/* ING Networks — colours from the brand avatar (navy + cyan→emerald ridge) */
:root {
  --navy-900: #0b1023;
  --navy-800: #172554;
  --navy-700: #172554;
  --blue-600: #1e40af;
  --cyan: #22d3ee;
  --emerald: #34d399;
  --sky-200: #bfdbfe;
  --sky-300: #93c5fd;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --paper: #ffffff;
  --paper-2: #f8faff;
  --grad: linear-gradient(90deg, var(--cyan), var(--emerald));
  --radius: 14px;
  --max: 1160px;
  /* ponytail: system fonts only — no Google Fonts, avoids the DSGVO font-embedding issue */
  --font: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html { background: var(--navy-900); }  /* colour of the iOS overscroll area: matches header and footer, not white */
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--blue-600); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .6em; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 760px; }
section { padding: 88px 0; }
section.alt { background: var(--paper-2); }
section.dark { background: radial-gradient(120% 120% at 20% 0%, var(--blue-600) 0%, var(--navy-700) 45%, var(--navy-900) 100%); color: #fff; }
section.dark .lead, section.dark p { color: var(--sky-200); }
section.dark .eyebrow { color: var(--cyan); }

/* header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(11, 16, 35, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(147, 197, 253, .12); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.brand svg { width: 36px; height: 36px; }
.brand small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .3em; color: var(--sky-200); }
.brand span { white-space: nowrap; }
@media (max-width: 480px) { .brand { gap: 8px; font-size: .9rem; } .brand img { width: 30px; height: 30px; } .brand small { letter-spacing: .2em; } }
.nav { display: flex; gap: 20px; margin-left: auto; }
.nav a { color: var(--sky-200); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.nav a:hover { color: #fff; }
.lang { display: flex; gap: 6px; font-size: 0.8125rem; font-weight: 700; }
.lang a, .lang span { color: var(--sky-300); text-decoration: none; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(147, 197, 253, .25); }
.lang span { color: var(--navy-900); background: var(--sky-200); border-color: var(--sky-200); }
@media (max-width: 960px) { .nav { display: none; } .lang { margin-left: auto; } }

/* buttons */
.btn { display: inline-block; padding: 13px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 1rem; }
.btn-primary { background: var(--grad); color: var(--navy-900); }
.btn-ghost { border: 1px solid rgba(191, 219, 254, .45); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* hero */
.hero { padding: 48px 0 72px; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; max-width: 900px; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .ridge { position: absolute; right: -40px; bottom: 20px; width: 560px; opacity: .55; pointer-events: none; }
@media (max-width: 760px) { .hero { padding-top: 32px; } .hero .ridge { width: 340px; opacity: .3; } }
/* no automatic word splitting in the top section (looked odd: "Pro-zesse", "reli-able"); break-word only as a safety net */
.hero h1, .hero .lead { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
/* phones and tablets: the hero also fills the first screen (svh = visible height with the browser bars shown) */
@media (max-width: 960px) { .hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: center; } }
/* desktop: the hero fills the first screen below the 64px header (+1px border), content centred vertically */
@media (min-width: 961px) { .hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: center; padding: 48px 0; } }
.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 48px; padding-top: 24px; font-size: 0.875rem; color: var(--sky-200); }
.trust b { color: #fff; }

/* grids & cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 36px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
section.alt .card { background: #fff; }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }
.card .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--navy-800); display: grid; place-items: center; margin-bottom: 16px; }
.card .ico svg { width: 22px; height: 22px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: #e0f2fe; color: #075985; margin-bottom: 12px; }
.tag.voice { background: #d6f8e2; color: #0b1023; }

/* AI telephony bridge */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 44px 0 12px; align-items: stretch; }
.flow .step { background: rgba(255, 255, 255, .05); border: 1px solid rgba(147, 197, 253, .2); border-radius: 12px; padding: 18px 16px; position: relative; margin-right: 26px; }
.flow .step:last-child { margin-right: 0; }
.flow .step:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; width: 22px; height: 3px; background: var(--grad); border-radius: 2px; }
.flow .step b { display: block; color: #fff; margin-bottom: 4px; }
.flow .step span { font-size: 0.875rem; color: var(--sky-200); }
.flow .step.ai { border-color: var(--cyan); background: rgba(34, 211, 238, .08); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow .step { margin-right: 0; }
  .flow .step:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -16px; width: 3px; height: 12px; }
}
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.checks li { padding-left: 28px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--emerald); border-bottom: 3px solid var(--emerald); transform: rotate(-45deg); }
section:not(.dark) .checks li { color: var(--muted); }

/* numbers */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 36px; }
.stat { border-left: 3px solid; border-image: var(--grad) 1; padding: 4px 0 4px 18px; }
.stat b { display: block; font-size: 2rem; font-weight: 800; color: var(--navy-700); line-height: 1.1; }
.stat span { font-size: 0.875rem; color: var(--muted); }

/* table */
.table-wrap { overflow-x: auto; margin-top: 32px; }
table { border-collapse: collapse; width: 100%; min-width: 620px; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 1rem; }
th { background: var(--navy-800); color: #fff; font-weight: 600; }
td:first-child { font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* references */
.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.logos span { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--navy-700); font-size: 0.875rem; }
/* client names run slowly right to left; pauses on hover, static if the visitor prefers reduced motion */
.marquee { overflow: hidden; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee-group { display: flex; gap: 12px; padding-right: 12px; }
.marquee span { white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; color: var(--navy-700); font-size: 1rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-track { animation: none; width: auto; } .marquee-group { flex-wrap: wrap; } .marquee-group[aria-hidden] { display: none; } }
.case .result { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-weight: 700; color: var(--navy-700); font-size: 1rem; }
.note { font-size: 0.875rem; color: var(--muted); margin-top: 18px; }

/* process */
.steps { counter-reset: s; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 36px; }
.steps .card { position: relative; padding-top: 58px; }
.steps .card::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; top: 20px; left: 26px; font-weight: 800; font-size: 1.25rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* contact */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.contact dt { color: var(--sky-300); font-weight: 600; }
.contact dd { margin: 0; color: #fff; }
.contact dd a { color: #fff; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }
/* contact section centred: heading, text, form and details on one axis */
.wrap.contact { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 36px; }
.wrap.contact .lead { margin-left: auto; margin-right: auto; }
.wrap.contact .contact-form { width: 100%; max-width: 560px; margin: 28px auto 0; text-align: left; }
.wrap.contact .contact-form button { justify-self: center; }
.wrap.contact .form-note { text-align: center; }
.wrap.contact dl { width: max-content; max-width: 100%; text-align: left; }

/* footer */
footer { background: var(--navy-900); color: var(--sky-300); font-size: 0.875rem; padding: 28px 0; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
footer a { color: var(--sky-200); text-decoration: none; }
footer .spacer { margin-left: auto; }

/* legal pages */
.legal { padding: 64px 0; max-width: 760px; }
.legal h2 { font-size: 1.25rem; margin-top: 1.6em; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 400px) { .grid.three { grid-template-columns: 1fr; } }
h1, h2 { overflow-wrap: break-word; }
@media (max-width: 480px) { h1, h2 { hyphens: auto; } }
@media (max-width: 480px) { .hero h1 { font-size: 1.85rem; } }
.hero .wrap { position: relative; z-index: 1; }
.hero .ridge { opacity: .28; bottom: 90px; }
.contact-form { display: grid; gap: 14px; margin-top: 28px; max-width: 520px; }
.contact-form label { display: grid; gap: 6px; color: var(--sky-300); font-weight: 600; font-size: 0.875rem; }
.contact-form input, .contact-form textarea { font: inherit; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(191, 219, 254, .35); border-radius: 10px; padding: 11px 13px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--sky-300); outline-offset: 1px; }
.contact-form button { justify-self: start; border: 0; cursor: pointer; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-note { margin: 0; color: #fff; font-weight: 600; }

/* integrations: actions -> AI -> programs (lines drawn by script, hidden on small screens) */
.integ .integ-map { position: relative; margin-top: 36px; }
.integ .integ-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.integ .integ-lines path { fill: none; stroke: rgba(91,140,255,.5); stroke-width: 1.6; stroke-dasharray: 5 8; animation: integ-flow 1.6s linear infinite; }
.integ .integ-lines path.down { stroke: rgba(52,211,153,.6); animation-direction: reverse; }
@keyframes integ-flow { to { stroke-dashoffset: -26; } }
.integ .integ-label { position: relative; text-align: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.integ .acts { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.integ .act { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; box-shadow: 0 4px 14px rgba(15,23,42,.05); }
.integ .act b { display: block; font-size: 0.875rem; color: var(--ink); }
.integ .act span { font-size: 0.8125rem; color: var(--muted); }
.integ .integ-core { position: relative; width: 170px; height: 170px; margin: 70px auto; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #1e40af, #0b1023 75%);
  color: #fff; display: grid; place-items: center; text-align: center; box-shadow: 0 0 0 10px rgba(91,140,255,.12), 0 0 0 22px rgba(91,140,255,.06); }
.integ .integ-core b { display: block; font-size: 1.125rem; } .integ .integ-core span { font-size: 0.8125rem; color: var(--sky-200); line-height: 1.4; }
.integ .integ-core .pulse { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(52,211,153,.5); animation: integ-pulse 2.4s ease-out infinite; }
@keyframes integ-pulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.integ .systems { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.integ .sys { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(15,23,42,.05); }
.integ .sys h3 { margin: 0 0 6px; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; }
.integ .sys h3 i { font-style: normal; width: 24px; height: 24px; border-radius: 7px; background: var(--navy-800); color: var(--cyan); display: grid; place-items: center; font-size: 0.8125rem; }
.integ .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.integ .chips span { font-size: 0.8125rem; font-weight: 600; color: var(--navy-700); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.integ .integ-note { text-align: center; max-width: 760px; margin: 18px auto 0; color: var(--muted); }
.integ .layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.integ .layer { border-radius: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.integ .layer .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-800); color: var(--cyan); font-weight: 800; font-size: 0.875rem; margin-bottom: 8px; }
.integ .layer h3 { margin: 0 0 4px; font-size: 1rem; } .integ .layer p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.integ .layer.hl { background: #ecfdf5; border-color: var(--emerald); } .integ .layer.hl .n { background: var(--emerald); color: var(--navy-900); }
.integ .jml { margin-top: 32px; border-radius: 18px; padding: 22px 24px; color: #fff; background: radial-gradient(120% 140% at 10% 0%, var(--blue-600) 0%, var(--navy-700) 50%, var(--navy-900) 100%); }
.integ .jml .eyebrow { color: var(--cyan); } .integ .jml h3 { margin: 0 0 14px; font-size: 1.25rem; color: #fff; }
.integ .jml-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.integ .jml-steps > div { background: rgba(255,255,255,.06); border: 1px solid rgba(191,219,254,.22); border-radius: 12px; padding: 10px 12px; font-size: 0.875rem; color: #dbe7ff; }
.integ .jml-steps b { display: block; color: #fff; font-size: 0.875rem; margin-bottom: 2px; }
.integ .jml-steps small { display: inline-block; margin-top: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; }
.integ .jml-steps small.d { color: #0b1023; background: #d6f8e2; } .integ .jml-steps small.k { color: #1e40af; background: #dbeafe; }
.integ .jml-steps .ai { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(191,219,254,.18); color: #fff; font-size: 0.8125rem; line-height: 1.4; } .integ .jml-steps .ai small { margin: 0 4px 0 0; } .integ .jml p { margin: 14px 0 0; font-size: 0.875rem; color: var(--sky-200); }
.integ .host-h { margin: 40px 0 0; font-size: 1.25rem; }
.integ .hosting { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.integ .host { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; border-top: 4px solid #5b8cff; }
.integ .host h3 { margin: 0 0 4px; font-size: 1rem; } .integ .host p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.integ .fine { font-size: 0.8125rem; color: #8a93a5; margin-top: 22px; }
@media (max-width: 900px) {
  .integ .integ-lines { display: none; } .integ .acts { grid-template-columns: 1fr 1fr; } .integ .systems, .integ .layers, .integ .hosting { grid-template-columns: 1fr; }
  .integ .integ-core { margin: 24px auto; } .integ .jml-steps { grid-template-columns: 1fr 1fr; }
}

/* hero background animation (hero-flow.js): 7-second seamless loop */
.hero .hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; }


/* hub diagram */
.hub { margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 8px 26px rgba(15, 23, 42, .05); overflow-x: auto; }
.hub svg { display: block; width: 100%; min-width: 700px; height: auto; font-family: var(--font); }
.hub-t { font-weight: 800; font-size: 19px; fill: #0b1023; } .hub-s { font-size: 13.5px; fill: #475569; }
.hub-tw { font-weight: 800; font-size: 19px; fill: #fff; } .hub-sw { font-size: 13.5px; fill: #e0f2fe; }
.hub-tg { font-weight: 800; font-size: 19px; fill: #0b1023; } .hub-sg { font-size: 13.5px; fill: #0b1023; } .hub-tech { font-size: 13px; fill: #0b1023; letter-spacing: .04em; }
.hub-lab { font-size: 13.5px; font-weight: 700; fill: #0b1023; } .hub-num { font-size: 14px; font-weight: 800; fill: #fff; }
.hub-arr { stroke: #475569; stroke-width: 2.5; fill: none; marker-end: url(#hub-ah); }
.hub-team { fill: #d6f8e2; stroke: #86efac; stroke-width: 2; } .hub-orch { fill: #fff; stroke: #1e40af; stroke-width: 2; } .hub-gate { fill: var(--acc-light, #cffafe); stroke: var(--acc, #22d3ee); stroke-width: 2.5; }
.hub-soft { fill: #fef3c7; stroke: #fcd34d; stroke-width: 2.5; } .hub-ai { fill: url(#hub-local); stroke: var(--acc, #22d3ee); stroke-width: 2; } .hub-ai.cloud { fill: url(#hub-cloud); stroke: #1d4ed8; }
.hub-chip { fill: #fff; stroke: #fcd34d; stroke-width: 1.5; } .hub-chiptext { font-size: 15px; font-weight: 800; fill: #0b1023; }
.home-clients { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--line); } .home-clients h3 { margin: 0 0 4px; font-size: 1.25rem; } .home-clients p { margin: 0; color: var(--muted); } .home-clients .more { display: inline-block; margin-top: 18px; }
.hub-ico { fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the connected software as chips in running text: overview cards and profession pages */
.uc-with { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; } .uc-with b { flex-basis: 100%; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.uc-with span, .pills.sw span { display: inline-flex; align-items: center; gap: 7px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; color: #0b1023; font-weight: 700; }
.uc-with span { padding: 3px 11px; font-size: 0.8125rem; } .uc-with svg, .pills.sw svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* gatekeeper bars in the integrations map */
.integ-gate { position: relative; z-index: 2; width: 78%; margin: 14px auto; padding: 7px 18px; border-radius: 999px; background: #cffafe; border: 2px solid #22d3ee; color: #0b1023; font-weight: 800; font-size: 0.875rem; text-align: center; }
.integ-gate span { font-weight: 600; color: #155e75; }
/* the AI inside the gatekeeper */
.gk-shell { position: relative; border: 2.5px solid #22d3ee; background: #cffafe; border-radius: 18px; padding: 8px 10px 10px; display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1; }
.gk-shell > .gk-tag { display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0b1023; white-space: nowrap; }
.gk-shell > .gk-tag svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #0b1023; stroke-width: 2.5; }
.flow > .gk-shell, .flow > .ai-unit > .gk-shell { padding: 8px; } .flow > .gk-shell > .step, .flow > .ai-unit > .gk-shell > .step { flex: 1; margin: 0; background: #0b1023; }
.ai-unit { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.house > .arrow:has(+ .ai-unit) { align-self: flex-start; margin-top: 34px; }
.ai-row { display: flex; gap: 8px; flex: 1; align-items: stretch; } .ai-row > .gk-shell { padding: 8px; } .ai-row > .gk-shell > .step { flex: 1; margin: 0; background: #0b1023; }
@media (max-width: 900px) { .ai-row { flex-direction: column; } }
/* the step after a run of AI steps: the same distance and the same connecting line as before the run */
.flow > .ai-unit:not(:last-child) { position: relative; margin-right: 26px; }
.flow > .ai-unit:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; width: 22px; height: 3px; background: var(--grad); border-radius: 2px; }
@media (max-width: 900px) { .flow > .ai-unit { grid-column: auto !important; } .flow > .ai-unit:not(:last-child) { margin-right: 0; } .flow > .ai-unit:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -16px; width: 3px; height: 12px; } }
.orch-n { border: 2px solid #1e40af; background: #fff; color: #0b1023; border-radius: 12px; padding: 6px 10px; text-align: center; font-weight: 800; font-size: 0.875rem; line-height: 1.25; flex: none; }
.orch-n small { display: block; font-weight: 500; font-size: 0.8125rem; }
.orch-ud { text-align: center; color: #0b1023; font-weight: 800; line-height: 1; flex: none; }
.integ-orch { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; margin: 10px auto 2px; } .integ-orch .orch-n { min-width: 260px; }
.integ-map .hub, .ov .hub { margin: 18px 0; box-shadow: none; }
.integ .integ-shell { z-index: 2; width: fit-content; flex: none; margin: 64px auto; padding: 12px 34px 26px; border-radius: 28px; align-items: center; box-shadow: 0 10px 30px rgba(14, 116, 144, .18); }
.integ .integ-shell .integ-core { margin: 14px auto 0; }
.integ .sys.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; } .integ .sys.wide h3 { margin: 0; }
@media (max-width: 900px) { .integ .integ-shell { margin: 24px auto; } .integ .sys.wide { display: block; } .integ .sys.wide h3 { margin: 0 0 6px; } }
section.dark .node.c-gw, section.dark .uc-sys span { color: #0b1023; } section.dark .node.c-gw small { color: #155e75; }
@media (min-width: 901px) { .uc-flow.five { grid-template-columns: 1fr auto 1fr auto .9fr auto 1fr auto 1.25fr; } }
/* ---- multi-page additions ---- */
/* header menu with drop-downs */
.nav { gap: 2px; align-items: center; }
.nav .item { position: relative; }
.nav .top { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; }
.nav .top.current { color: #fff; box-shadow: inset 0 -2px 0 var(--cyan); border-radius: 8px 8px 0 0; }
.nav .has-menu > .top::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.nav .menu { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px; background: #0f1730; border: 1px solid rgba(147, 197, 253, .18); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav .item.right .menu { left: auto; right: 0; }
.nav .item:hover .menu, .nav .item:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.nav .menu a { display: block; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.nav .menu a:hover { background: rgba(255, 255, 255, .07); }
.nav .cta { margin-left: 8px; padding: 8px 14px; border-radius: 8px; background: var(--grad); color: var(--navy-900); font-weight: 700; }
.nav .cta:hover { color: var(--navy-900); filter: brightness(1.08); }
.nav-toggle { display: none; background: none; border: 1px solid rgba(147, 197, 253, .25); border-radius: 8px; width: 40px; height: 36px; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--sky-200); border-radius: 2px; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-header .wrap { gap: 12px; }
  .nav { position: absolute; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100svh - 64px); margin: 0; padding: 12px 20px 40px; background: var(--navy-900); flex-direction: column; align-items: stretch; overflow-y: auto; }
  .nav.open { display: flex; }
  .nav .top { font-size: 1rem; font-weight: 700; color: #fff; padding: 12px 0 4px; }
  .nav .top.current { box-shadow: none; color: var(--cyan); }
  .nav .has-menu > .top::after { display: none; }
  .nav .menu, .nav .item.right .menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; background: none; box-shadow: none; padding: 0 0 8px 12px; border-left: 2px solid rgba(147, 197, 253, .18); min-width: 0; }
  .nav .menu a { white-space: normal; }
  .nav .cta { margin: 16px 0 0; text-align: center; padding: 12px; }
}

/* sub-page header band */
.page-hero { padding: 72px 0 64px; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; max-width: 880px; }
.page-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crumb { font-size: 0.875rem; margin-bottom: 18px; color: var(--sky-300); }
.crumb a { color: var(--sky-200); }
.more { display: inline-block; margin-top: 14px; font-weight: 700; text-decoration: none; }
.more::after { content: " \2192"; }
a.card { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pills span { font-size: 0.875rem; font-weight: 600; color: var(--navy-700); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; }
.example-note { margin-top: 28px; padding: 14px 18px; border-left: 4px solid var(--cyan); background: #e7f9ff; border-radius: 0 10px 10px 0; font-size: 0.875rem; color: var(--muted); }

/* security visual 1: where does your data go */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.cmp-card { border-radius: 18px; padding: 24px; border: 2px solid var(--line); background: #fff; }
.cmp-card.bad { border-color: #e2e8f0; background: #f3f6fa; }
.cmp-card.good { border-color: var(--emerald); background: #ecfdf5; }
.cmp-card h3 { font-size: 1.25rem; }
.cmp-card { display: flex; flex-direction: column; }
.cmp-card .scene { flex: 1; align-content: center; }
.cmp-card.solo h3 { text-align: center; }
.cmp-card.solo .scene { margin-top: 8px; }
.cmp-card.solo .house { padding: 40px 26px 24px; gap: 16px; }
.cmp-card.solo .node { padding: 16px 20px; font-size: 1rem; }
.cmp-card.solo .node small { font-size: 0.8125rem; }
.cmp-card.solo .node svg { width: 32px; height: 32px; }
.cmp-card.solo .blocked i { display: none; }
.cmp-card.solo .blocked { font-size: 1rem; background: #fff; border: 1px solid #86efac; border-radius: 999px; padding: 7px 18px; }
.cmp-card.solo .blocked br { display: none; }
.cmp-card .eu-points { list-style: none; padding: 0; display: grid; gap: 14px; }
.cmp-card .eu-points b { color: var(--ink); }
.cmp-card ul { margin: 18px 0 0; padding-left: 20px; color: var(--muted); font-size: 1rem; }
.scene { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 190px; }
.node { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 0.875rem; font-weight: 700; text-align: center; line-height: 1.3; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.node small { display: block; font-weight: 500; color: var(--muted); font-size: 0.8125rem; }
.node svg { width: 26px; height: 26px; margin: 0 auto 4px; stroke: var(--navy-700); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.node.warn { border-color: #e2e8f0; } .node.warn svg { stroke: #475569; }
.arrow { font-weight: 800; font-size: 1.25rem; color: #475569; }
.arrow.ok { color: #0b1023; }
.house { border: 2.5px dashed #0b1023; border-radius: 18px; padding: 30px 14px 14px; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .6); }
.house > b { position: absolute; top: 7px; left: 14px; font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; color: #0b1023; }
.blocked { font-size: 0.8125rem; font-weight: 700; color: #0b1023; text-align: center; }
.blocked i { font-style: normal; display: block; font-size: 1.25rem; text-decoration: line-through; color: #b4c0d2; }

/* security visual 2: layers (onion) */
.layers-vis { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin-top: 36px; }
.onion { position: relative; border-radius: 22px; padding: 36px 12px 12px; border: 2px solid; }
.onion > b { position: absolute; top: 9px; left: 16px; right: 12px; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onion.o1 { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.onion.o2 { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.onion.o3 { background: #cffafe; border-color: #22d3ee; color: #155e75; }
.onion.o4 { background: #d6f8e2; border-color: #86efac; color: #0b1023; }
.onion.o5 { background: #aef2c6; border-color: #34d399; color: #064e3b; }
.onion .core { border-radius: 16px; padding: 26px 14px; text-align: center; color: #fff; background: radial-gradient(120% 140% at 20% 0%, var(--blue-600), var(--navy-900) 80%); }
.onion .core b { display: block; font-size: 1.25rem; } .onion .core span { font-size: 0.875rem; color: var(--sky-200); }
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.layer-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.layer-list .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid; }
.layer-list b { display: block; } .layer-list span { color: var(--muted); font-size: 1rem; } .layer-list em { font-style: normal; color: var(--navy-700); font-weight: 600; }
.watch { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.watch div { border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 16px 18px; border-left: 4px solid var(--blue-600); }
.watch p { margin: 0; color: var(--muted); font-size: 1rem; }

/* security visual 4: traffic light */
.lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.light { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; border-top: 6px solid; }
.light h3 { display: flex; align-items: center; gap: 10px; }
.light h3::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: currentColor; flex: none; }
.light.g { border-top-color: #34d399; } .light.g h3 { color: #0b1023; }
.light.y { border-top-color: #f59e0b; } .light.y h3 { color: #b45309; }
.light.r { border-top-color: #475569; } .light.r h3 { color: #1e293b; }
.light ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 1rem; } .light li { margin-bottom: 6px; }

/* security visual: placeholders instead of personal data */
.mask { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 36px; }
.mask-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.mask-step p { margin: 14px 0 0; color: var(--muted); font-size: 1rem; }
.mask-step h3 { margin: 12px 0 10px; }
.mask-arrow { align-self: center; font-size: 1.5rem; font-weight: 800; color: #0b1023; }
.where { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.where.in { background: #d6f8e2; color: #0b1023; } .where.out { background: #dbeafe; color: #1e40af; }
.doc { background: var(--paper-2); border: 1px dashed #e2e8f0; border-radius: 10px; padding: 14px; font-size: 1rem; line-height: 1.9; }
.doc mark { background: #fde68a; color: var(--ink); padding: 2px 5px; border-radius: 5px; }
.doc code { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; background: var(--navy-800); color: var(--cyan); padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
@media (max-width: 860px) { .mask { grid-template-columns: 1fr; } .mask-arrow { justify-self: center; transform: rotate(90deg); } }

/* coloured diagram boxes */
.scene.v { flex-direction: column; gap: 14px; }
.node.c-office { background: #d6f8e2; border-color: #86efac; } .node.c-office svg { stroke: #0b1023; }
.node.c-ai { background: radial-gradient(120% 140% at 20% 0%, var(--blue-600), var(--navy-900) 80%); border-color: var(--navy-700); color: #fff; } .node.c-ai svg { stroke: var(--cyan); }
.node.c-docs { background: #fef3c7; border-color: #fcd34d; } .node.c-docs svg { stroke: #b45309; }
.node.warn { background: #e0f2fe; border-color: #7dd3fc; } .node.warn svg { stroke: #0369a1; }
.node.c-provider { background: linear-gradient(135deg, #1d4ed8, #38bdf8); border-color: #1d4ed8; color: #fff; } .node.c-provider small { color: #e0f2fe; } .node.c-provider svg { stroke: #fff; }
.node.c-dc { background: linear-gradient(135deg, #1d4ed8, #38bdf8); border-color: #1d4ed8; color: #fff; } .node.c-dc small { color: #e0f2fe; } .node.c-dc svg { stroke: #fff; }
.node.c-out { background: #f3f6fa; border: 1.5px dashed #b4c0d2; color: #b4c0d2; box-shadow: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.875rem; }
.node.c-out svg { stroke: #b4c0d2; margin: 0; width: 20px; height: 20px; }
.house { background: #fff; }
/* red-and-white barrier: the border nothing crosses */
.barrier { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; }
.barrier::before, .barrier::after { content: ""; flex: 1; height: 12px; border-radius: 6px; border: 1px solid var(--navy-700); background: repeating-linear-gradient(135deg, var(--navy-700) 0 10px, #fff 10px 20px); }
.barrier span { display: flex; align-items: center; gap: 7px; font-size: 0.875rem; font-weight: 800; color: var(--navy-700); background: #fff; border: 2px solid var(--navy-700); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.barrier svg { width: 18px; height: 18px; stroke: var(--navy-700); fill: none; stroke-width: 2.4; }
@media (max-width: 480px) { .barrier span { white-space: normal; text-align: center; } }

/* real-world examples: one flow picture per case */
.uc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.uc-org { font-weight: 800; color: var(--navy-700); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 0.875rem; }
.uc-kind { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; color: #fff; background: #1d4ed8; }
.uc-kind.local, .uc-kind.sovereign { background: var(--navy-800); color: var(--cyan); }
.uc-kind.choice { background: linear-gradient(90deg, #1d4ed8, var(--navy-800)); }
.card .uc-kind { margin-bottom: 12px; }
.uc-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.25fr; gap: 12px; align-items: stretch; margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 8px 26px rgba(15, 23, 42, .05); }
.uc-col { display: flex; flex-direction: column; gap: 10px; }
.uc-col > b { font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.uc-col .node { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 12px; font-size: 1rem; }
.uc-col .node small { margin-top: 3px; }
.uc-arrow { align-self: center; margin-top: 22px; font-size: 1.5rem; font-weight: 800; color: #0b1023; }
.node.c-gw { background: #cffafe; border: 2px solid #22d3ee; } .node.c-gw svg { stroke: #0b1023; }
.uc-sys { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.uc-sys span { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; padding: 9px 8px; font-size: 0.875rem; font-weight: 700; text-align: center; line-height: 1.25; display: grid; place-items: center; }
.uc-out { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 12px; }
.uc-out > div { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px 16px; font-size: 1rem; }
.uc-out svg { width: 24px; height: 24px; flex: none; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-result { background: #dbeafe; background: linear-gradient(120deg, color-mix(in srgb, #93c5fd 62%, #fff), color-mix(in srgb, #93c5fd 26%, #fff)); border: 1px solid color-mix(in srgb, #62a0f6 55%, #fff); color: #0b1023; } .uc-result svg { stroke: #0b1023; }
.uc-fit { --c: #bfdbfe; --d: #8fbdfb; display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: #e6f0fe; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff)); border: 1px solid color-mix(in srgb, var(--d) 55%, #fff); color: #0b1023; font-size: 1rem; }
.uc-fit p { margin: 0; } .uc-fit > .c-ico { background: linear-gradient(145deg, #fff, var(--c)); border: 1px solid var(--d); }
.uc-human { background: #d6f8e2; border: 1px solid #86efac; color: #0b1023; font-weight: 600; } .uc-human svg { stroke: #0b1023; }
.uc-facts { margin-top: 26px; max-width: 860px; }
.uc-facts ul { margin: 0; padding-left: 20px; color: var(--muted); } .uc-facts li { margin-bottom: 6px; }
.uc-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 0.875rem; color: var(--muted); }
.uc-legend span { display: flex; align-items: center; gap: 8px; }
.uc-legend i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid; }
.uc-legend i.c-office { background: #d6f8e2; border-color: #86efac; } .uc-legend i.c-dc { background: #1d4ed8; border-color: #1d4ed8; }
.uc-legend i.c-ai { background: var(--navy-800); border-color: var(--navy-800); } .uc-legend i.c-gw { background: #cffafe; border-color: #22d3ee; }
@media (max-width: 900px) {
  .uc-flow { grid-template-columns: 1fr; padding: 16px; } .uc-arrow { margin: 0; justify-self: center; transform: rotate(90deg); }
  .uc-out { grid-template-columns: 1fr; }
}

/* one company: complete overview */
.ov { margin-top: 36px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 8px 26px rgba(15, 23, 42, .05); }
.ov-label { text-align: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ov-depts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ov-depts .node { padding: 12px; font-size: 1rem; }
.ov-link { width: 4px; height: 26px; margin: 6px auto; border-radius: 2px; background: var(--grad); }
.ov-hub { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 12px; align-items: stretch; max-width: 860px; margin: 0 auto; }
.ov-hub .node { display: flex; flex-direction: column; justify-content: center; padding: 14px; }
.ov-core { border-radius: 16px; display: grid; place-content: center; text-align: center; padding: 20px 14px; background: var(--grad); color: var(--navy-900); }
.ov-core b { font-size: 1.25rem; } .ov-core span { font-size: 0.875rem; font-weight: 600; }
.ov-gw { max-width: 860px; margin: 0 auto; padding: 14px; font-size: 1rem; }
.ov-sys { grid-template-columns: repeat(7, 1fr); }
/* one company: workflow timeline */
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-weight: 700; font-size: 0.875rem; }
.tl-legend span { display: flex; align-items: center; gap: 8px; } .tl-legend i { width: 14px; height: 14px; border-radius: 50%; background: var(--ph); }
.ph-join { --ph: #34d399; } .ph-work { --ph: #1d4ed8; } .ph-move { --ph: #f59e0b; } .ph-leave { --ph: #475569; }
.tl { list-style: none; margin: 28px 0 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: linear-gradient(#34d399, #1d4ed8 45%, #f59e0b 85%, #475569); }
.tl-step { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; margin-bottom: 16px; }
.tl-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--ph); color: #fff; font-weight: 800; display: grid; place-items: center; z-index: 1; border: 4px solid #fff; }
.tl-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--ph); border-radius: 14px; padding: 18px 20px; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tl-head h3 { margin: 0; font-size: 1.125rem; flex: 1; min-width: 200px; }
.tl-phase { font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ph); border-radius: 6px; padding: 3px 9px; }
.tl-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.tl-body b { display: block; font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tl-body ul { margin: 0; padding-left: 18px; font-size: 1rem; } .tl-body li { margin-bottom: 3px; }
.tl-human { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; background: #d6f8e2; border: 1px solid #86efac; color: #0b1023; font-weight: 600; font-size: 0.875rem; border-radius: 10px; padding: 8px 12px; }
.tl-human svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-sys span { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 3px 9px; font-size: 0.8125rem; font-weight: 700; }
/* office day + log monitor */
.card.day { position: relative; } .card.day .time { position: absolute; top: 26px; right: 26px; font-weight: 800; color: var(--blue-600); }
section.dark .uc-flow { background: rgba(255, 255, 255, .05); border-color: rgba(147, 197, 253, .2); box-shadow: none; }
section.dark .uc-col > b { color: var(--sky-200); }
.logbox { background: #0b1023 !important; border-color: rgba(147, 197, 253, .3) !important; align-items: stretch; gap: 4px; text-align: left; }
.logbox code { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; font-weight: 500; color: #93c5fd; white-space: nowrap; }
.logbox code.odd { color: var(--navy-900); background: #fcd34d; border-radius: 4px; padding: 1px 4px; }
.verdicts { flex: 1; display: grid; gap: 8px; align-content: center; }
.verdicts span { border-radius: 10px; padding: 9px 10px; font-weight: 800; font-size: 0.875rem; text-align: center; }
.v-ok { background: #d6f8e2; color: #0b1023; } .v-look { background: #fef3c7; color: #0b1023; } .v-act { background: #fff; color: var(--navy-900); border: 2px solid var(--cyan); }
@media (max-width: 900px) {
  .ov { padding: 16px; } .ov-depts { grid-template-columns: 1fr 1fr; } .ov-hub { grid-template-columns: 1fr 1fr; gap: 10px; } .ov-core { grid-column: 1 / -1; order: -1; } .ov-core::after { content: "uses one of these two, depending on the data:"; display: block; margin-top: 10px; font-size: 0.8125rem; font-weight: 700; } .ov-hub .node { font-size: 0.875rem; padding: 12px 8px; } .ov-sys { grid-template-columns: 1fr 1fr; }
  .tl-body { grid-template-columns: 1fr; } .tl-step { grid-template-columns: 38px 1fr; gap: 10px; } .tl-dot { width: 38px; height: 38px; } .tl::before { left: 17px; }
}

.node.c-ai small { color: var(--sky-200); }

/* one company: the complete map of areas */
.area-group { margin-top: 30px; }
.area-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; margin-bottom: 12px; color: var(--ink); }
.area-title i { width: 14px; height: 14px; border-radius: 4px; background: var(--g); }
.area-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.integ .acts-map { position: relative; } .integ .acts-map .area-group:first-child { margin-top: 0; } .integ .acts-map .area-group { margin-top: 22px; }
.area { display: flex; flex-direction: column; }
.integ .integ-ways { margin-top: 44px; } .integ .integ-ways h3 { font-size: 1.125rem; margin: 0; } .integ .integ-ways .sx-stdw { margin-top: 16px; } .sx-ways { table-layout: fixed; } .sx-ways td:first-child { width: auto; } .sx-ways td:nth-child(2) { width: auto; } .sx-ways td:nth-child(3) { color: var(--ink); }
.integ-auth { max-width: 980px; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; text-align: center; }
.integ-auth > b { flex-basis: 100%; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.integ-auth span { border-radius: 999px; padding: 6px 14px; border: 2px solid; font-size: 0.875rem; font-weight: 700; color: #0b1023; }
.integ-auth span i { font-style: normal; font-weight: 500; opacity: .8; margin-left: 6px; }
.integ-auth .u { background: #dbeafe; border-color: #93c5fd; } .integ-auth .c { background: #fff; border-color: #1e40af; }
.integ-auth p { flex-basis: 100%; margin: 6px 0 0; font-size: 0.875rem; color: var(--muted); }
.integ .integ-signin { max-width: 76ch; margin: 26px auto 0; text-align: center; font-size: 1rem; color: var(--muted); }
#identity .integ-auth { margin-bottom: 8px; }
.integ .integ-eg { position: relative; max-width: 820px; margin: 0 auto 22px; text-align: center; font-size: 1rem; color: var(--muted); } .integ .integ-eg b { color: var(--ink); }
.area-sw { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.area-sw b { flex-basis: 100%; margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.area-sw span { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: #fef3c7; border: 1px solid #fcd34d; color: #0b1023; }
.area { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--g); border-radius: 12px; padding: 14px 16px; }
.area h3 { font-size: 1rem; margin-bottom: 8px; }
.area ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: 0.875rem; line-height: 1.45; } .area li { margin-bottom: 4px; }
@media (max-width: 1000px) { .area-grid { grid-template-columns: 1fr 1fr; } .ov-depts { grid-template-columns: 1fr 1fr; } .ov-sys { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .area-grid { grid-template-columns: 1fr; } }

.cmp-card.solo .house { flex-wrap: nowrap; gap: 8px; padding: 40px 14px 22px; }
.cmp-card.solo .house .node { padding: 14px 12px; font-size: 1rem; }
@media (max-width: 520px) { .cmp-card.solo .house { flex-direction: column; } .cmp-card.solo .house .arrow { transform: rotate(90deg); } }

/* security: which model runs where */
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.zone { border-radius: 14px; padding: 16px 18px; border: 1px solid; }
.zone b { display: block; font-size: 1.125rem; margin-bottom: 4px; } .zone span { font-size: 0.875rem; }
.zone.z-de { background: #d6f8e2; border-color: #86efac; color: #064e3b; }
.zone.z-eu { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.zone.z-world { background: #f3f6fa; border-color: #e2e8f0; color: #1e293b; }
table.models td:first-child { white-space: normal; }
table.models tr.grp td { font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 9px 18px; }
table.models tr.grp.z-de td { background: #d6f8e2; color: #0b1023; }
table.models tr.grp.z-eu td { background: #dbeafe; color: #1e40af; }
table.models tr.grp.z-world td { background: #f3f6fa; color: #475569; }
table.models td { vertical-align: middle; }
.pill { display: inline-block; border-radius: 999px; padding: 4px 13px; font-size: 0.875rem; font-weight: 800; white-space: nowrap; }
.pill.z-de { background: #34d399; color: #fff; } .pill.z-eu { background: #1d4ed8; color: #fff; } .pill.z-world { background: #e2e8f0; color: #475569; }
@media (max-width: 860px) { .zones { grid-template-columns: 1fr; } }

.country-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; font-weight: 700; color: var(--muted); }
.country-switch button { font: inherit; font-weight: 800; cursor: pointer; border-radius: 999px; padding: 8px 20px; border: 2px solid var(--navy-700); background: #fff; color: var(--navy-700); }
.country-switch button[aria-selected="true"] { background: var(--navy-700); color: #fff; }

table.models .c { text-align: center; }
.tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #34d399; }
.tick svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.notick { font-size: 0.8125rem; color: #475569; }

table.models small.size { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }

.str { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.str span { flex: 1; height: 10px; border-radius: 5px; background: #e2e8f0; overflow: hidden; }
.str i { display: block; height: 100%; border-radius: 5px; background: var(--grad); }
.str b { width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

table.models th small.unit { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--sky-200); }

.score-box { margin-top: 26px; border: 1px solid var(--line); border-left: 5px solid var(--cyan); border-radius: 0 14px 14px 0; background: #fff; padding: 18px 22px; }
.score-box h3 { margin-bottom: 6px; } .score-box p { margin: 0; color: var(--muted); max-width: 860px; } .score-box p b { color: var(--ink); }
.score-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.score-scale span { background: var(--paper-2); border-radius: 10px; padding: 10px 14px; font-size: 0.875rem; color: var(--muted); }
.score-scale b { display: block; color: var(--navy-700); font-size: 1rem; }
.score-box + .table-wrap { margin-top: 18px; }
@media (max-width: 700px) { .score-scale { grid-template-columns: 1fr; } }

.score-box p.who { margin-top: 10px; }

table.models small.maker { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
table.models td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
#models .fine { margin-top: 16px; font-size: 0.8125rem; color: #475569; max-width: 980px; }
#models .fine p { margin: 0 0 4px; } #models .fine b { color: var(--muted); }

table.models small.alt { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }

.choice { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.choice .or { text-align: center; font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b1023; }
.cmp-card.solo .choice .node { padding: 12px 14px; }
.node.c-dc small, .node.c-ai small { font-weight: 500; }

/* security: hybrid design with a demarcation line */
.hy { flex: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.hy-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hy-top .node { min-width: 180px; }
.hy-lanes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.hy-lane { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 14px; }
.hy-lane.in { background: #d6f8e2; } .hy-lane.out { background: #dbeafe; }
.hy-lane > b { font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; }
.hy-lane.in > b { color: #0b1023; } .hy-lane.out > b { color: #1e40af; }
.hy-chips { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.hy-chips span { background: #fff; border-radius: 8px; padding: 5px 8px; font-size: 0.8125rem; font-weight: 700; text-align: center; }
.hy-lane .node { width: 100%; }
.hy-line { position: relative; width: 34px; }
.hy-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 3px dashed var(--navy-700); }
.hy-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; background: #ecfdf5; padding: 2px 8px; font-size: 0.8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-700); }

/* reliability page */
@media (min-width: 961px) and (max-width: 1180px) { .nav .top { padding: 8px 6px; font-size: 0.875rem; } .nav .cta { padding: 8px 10px; margin-left: 4px; } .site-header .wrap { gap: 12px; } }
.rbs { display: grid; gap: 12px; margin-top: 18px; }
.rb { display: grid; grid-template-columns: 190px 1fr 64px; gap: 4px 12px; align-items: center; }
.rb-l { font-weight: 700; font-size: 0.875rem; } .rb b { text-align: right; font-variant-numeric: tabular-nums; }
.rb-t { height: 14px; border-radius: 7px; background: #e2e8f0; overflow: hidden; } .rb-t i { display: block; height: 100%; border-radius: 7px; background: var(--grad); }
.rb small { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--muted); } .rb small:empty { display: none; }
.uc-sys.rules { grid-template-columns: 1fr; } .uc-sys.rules span { background: #fff; border-color: var(--line); font-weight: 600; }
.loop { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 18px; }
.loop .node { padding: 16px 12px; } .loop-mid { display: grid; justify-items: center; gap: 0; } .loop-mid small { font-size: 0.8125rem; font-weight: 700; color: #0b1023; }
.loop-out { display: grid; gap: 8px; margin-top: 14px; } .loop-out span { border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: 0.875rem; text-align: center; }
.saga { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 14px; }
.saga-row { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; gap: 8px; align-items: stretch; }
.saga-step { border-radius: 12px; padding: 12px 14px; border: 2px solid; display: grid; gap: 2px; align-content: center; }
.saga-step b { font-size: 1rem; } .saga-step span { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.saga-step.ok { background: #d6f8e2; border-color: #86efac; color: #0b1023; }
.saga-step.fail { background: #fef3c7; border-color: #f59e0b; color: #0b1023; }
.saga-step.wait { background: #f3f6fa; border-color: #e2e8f0; border-style: dashed; color: #475569; }
.saga-step.undo { background: #eff6ff; border-color: var(--navy-700); color: var(--navy-700); grid-template-columns: 22px 1fr; column-gap: 8px; }
.saga-step.undo svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
.saga-step.note { border: 0; text-align: center; color: var(--navy-700); }
.saga-step.next { background: var(--grad); border: 0; color: var(--navy-900); }
.saga-arrow { align-self: center; text-align: center; font-size: 1.5rem; font-weight: 800; color: #0b1023; } .saga-row.back .saga-arrow { color: var(--navy-700); } .saga-arrow.off { color: #e2e8f0; }
@media (max-width: 900px) {
  .saga-row { grid-template-columns: 1fr; } .saga-arrow { transform: rotate(90deg); } .saga-arrow.off:empty { display: none; }
  .saga-row.back { display: flex; flex-direction: column-reverse; }
  .loop { grid-template-columns: 1fr; } .loop-mid { grid-auto-flow: column; gap: 8px; }
  .rb { grid-template-columns: 110px 1fr 54px; }
}

.legal-list ol, .legal-list ul { max-width: 900px; padding-left: 22px; color: var(--muted); display: grid; gap: 12px; margin-top: 20px; }
.legal-list li b { color: var(--ink); }

/* landing page: the "Our AI solutions" button is the source of the animation, so it glows and breathes with it (7 s loop) */
.hero .cta-row .btn-ghost { position: relative; border-color: rgba(34, 211, 238, .8); background: rgba(11, 16, 35, .55); overflow: hidden; animation: ai-pulse 3.5s ease-in-out infinite; }
.hero .cta-row .btn-ghost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0), 0 0 12px rgba(34, 211, 238, .30); } 50% { box-shadow: 0 0 0 6px rgba(34, 211, 238, .10), 0 0 30px rgba(52, 211, 153, .55); } }
@keyframes ai-sheen { 0%, 35% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .hero .cta-row .btn-ghost, .hero .cta-row .btn-ghost::after { animation: none; } }

/* every box that stands for the AI glows exactly like the "Our AI solutions" button on the landing page:
   same colours, same strength, same 3.5 s beat, same sheen */
.node.c-ai, .node.c-dc, .flow .step.ai, .stack .tier.ai, .ov-core { border-color: rgba(34, 211, 238, .8); animation: ai-pulse 3.5s ease-in-out infinite; }
.node.c-ai, .node.c-dc, .stack .tier.ai, .ov-core { position: relative; overflow: hidden; }
.node.c-ai::after, .node.c-dc::after, .stack .tier.ai::after, .ov-core::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .node.c-ai, .node.c-dc, .flow .step.ai, .stack .tier.ai, .ov-core, .node.c-ai::after, .node.c-dc::after, .stack .tier.ai::after, .ov-core::after { animation: none; } }

a.arch { font-size: .9em; white-space: nowrap; }

.tl-why { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 0.875rem; color: var(--muted); }
.tl-why b { color: var(--navy-700); }
.cmp-card h3 .uc-kind { margin-right: 8px; vertical-align: 2px; }

/* case studies: the two overview pages get their own, darker cards */
.grid.feature { grid-template-columns: 1fr 1fr; }
a.card.feat { background: radial-gradient(120% 140% at 10% 0%, var(--blue-600) 0%, var(--navy-700) 50%, var(--navy-900) 100%); border-color: var(--navy-700); color: #fff; padding: 30px; }
a.card.feat h3 { font-size: 1.25rem; color: #fff; } a.card.feat p { color: var(--sky-200); font-size: 1rem; }
a.card.feat .tag { background: rgba(34, 211, 238, .16); color: var(--cyan); }
a.card.feat .more { color: var(--cyan); }
@media (max-width: 760px) { .grid.feature { grid-template-columns: 1fr; } }

/* the opening band of every page fills the first screen below the header, like the landing page (phones, tablets, notebooks) */
.page-hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: center; }

/* ten software cards: five per row on wide screens */
@media (min-width: 901px) { .integ .systems { grid-template-columns: repeat(6, 1fr); } }

/* architecture: everything in one picture */
.one { margin-top: 28px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(15, 23, 42, .07); background: #fff; }
.one-band { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 18px; padding: 16px 22px; }
.one-band h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.one-band h3 svg { width: 26px; height: 26px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.one-band small { display: block; font-weight: 500; font-size: 0.8125rem; margin-top: 2px; }
.one-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .one-pills.six { grid-template-columns: repeat(6, 1fr); gap: 8px; } .one-pills.six span { font-size: 0.8125rem; padding: 10px 6px; }
.one-pills span { border-radius: 12px; padding: 10px 12px; font-size: 0.875rem; font-weight: 700; line-height: 1.3; text-align: center; display: grid; place-items: center; }
.one-band.sec { background: #d6f8e2; color: #0b1023; } .one-band.sec h3 svg { stroke: #0b1023; } .one-band.sec .one-pills span { background: #fff; border: 1px solid #86efac; }
.one-band.rel { background: var(--navy-800); color: #fff; } .one-band.rel h3 { color: #fff; } .one-band.rel h3 svg { stroke: var(--cyan); } .one-band.rel small { color: var(--sky-200); } .one-band.rel .one-pills span { background: rgba(255, 255, 255, .07); border: 1px solid rgba(34, 211, 238, .45); }
.one-mid { padding: 26px 22px; display: grid; grid-template-columns: 1fr auto 2.1fr auto 1.25fr; gap: 14px; align-items: stretch; }
.one-col { display: flex; flex-direction: column; gap: 8px; } .one-col > b { font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.one-col > .node { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 12px; font-size: 1rem; }
.one-col > .uc-sys { align-content: center; }
.one-arrow { align-self: center; margin-top: 22px; font-size: 1.5rem; font-weight: 800; color: #0b1023; text-align: center; }
.one-gk { flex: 1; border: 3px solid #22d3ee; background: #cffafe; border-radius: 20px; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.one-gk > strong { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 1rem; color: #0b1023; }
.one-gk > strong svg { width: 22px; height: 22px; fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .one-gk > strong small { font-weight: 500; font-size: 0.8125rem; color: #155e75; }
.one-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; } .one-pair .node { display: flex; flex-direction: column; justify-content: center; padding: 16px 10px; }
.one-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; }
@media (max-width: 900px) { .one-band, .one-mid { grid-template-columns: 1fr; } .one-pills, .one-pills.six { grid-template-columns: 1fr 1fr; } .one-arrow { margin: 0; transform: rotate(90deg); } }
.one-mid.m4 { grid-template-columns: .8fr auto 1.9fr auto .85fr auto .85fr auto 1.15fr; } .one-mid.m5 { grid-template-columns: .8fr auto 1.7fr auto 2.9fr; }
.one-arrow.hi { align-self: start; margin-top: 50px; } .one-arrow.gkl { align-self: end; margin: 0 0 72px; }
.one-lanes { border-left: 4px solid #0b1023; padding-left: 10px; }
.one-ud { text-align: center; font-size: 1.25rem; font-weight: 800; color: #0b1023; line-height: 1; }
.one-box { border-radius: 16px; border: 2px solid; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 3px; color: #0b1023; font-size: 1rem; line-height: 1.3; min-width: 0; }
.one-box b { font-size: 1rem; } .one-box small { font-size: 0.8125rem; font-weight: 500; } .one-col > .one-box.fill { flex: 1; }
.one-box svg { width: 22px; height: 22px; fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
.one-box.gk { border: 3px solid #22d3ee; background: #cffafe; } .one-box.srv, .one-box.orch { background: #fff; border-color: #1e40af; } .one-box.sw { background: #fef3c7; border-color: #fcd34d; } .one-box.reg { background: #eff6ff; border-color: var(--navy-700); }
.one-lanes { display: grid; gap: 8px; flex: 1; } .one-lanes .lane { display: grid; grid-template-columns: 1fr .85fr 1.25fr; gap: 8px; } .one-lanes .one-box { padding: 8px 8px; }
.one-size { display: inline-block; margin: 0 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #0b1023; font-size: 0.875rem; font-weight: 700; padding: 6px 16px; }
.one-ulist { display: grid; gap: 8px; flex: 1; border-right: 4px solid #0b1023; padding-right: 10px; } .one-ulist .node { display: flex; flex-direction: column; justify-content: center; padding: 10px 8px; }
.one-pair.one1 { grid-template-columns: 1fr; }
.one-rowt { margin: 16px 22px -10px; font-size: 0.8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0b1023; }
.one-wall { margin: 0 22px; padding: 6px 10px; border-radius: 10px; text-align: center; background: #475569 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16'%3E%3Crect width='20' height='16' fill='%23475569'/%3E%3Cpath d='M0 0H20M0 8H20M10 0V8M0 8V16M20 8V16' stroke='%23e9d5cf' stroke-width='1.4'/%3E%3C/svg%3E"); }
.one-wall span { display: inline-block; background: #0b1023; color: #fff; border-radius: 8px; padding: 5px 16px; font-size: 0.875rem; font-weight: 700; }
.nav .item.cols .menu { display: flex; gap: 6px; padding: 12px; align-items: flex-start; }
.nav .menu .mcol { min-width: 215px; } .nav .menu .mcol + .mcol { border-left: 1px solid rgba(147, 197, 253, .22); padding-left: 6px; }
.nav .menu .menu-h { display: block; margin: 0 10px 6px; padding: 4px 0 7px; font-size: 1rem; font-weight: 800; color: #fff; border-bottom: 2px solid var(--cyan); }
.nav .item.cols .menu a { white-space: normal; font-size: 0.875rem; }
.nav .item.cols .menu a.menu-h { font-size: 1rem; padding: 4px 0 7px; border-radius: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nav .item.cols .menu a.menu-h::after { content: "→"; font-weight: 400; opacity: .75; transition: transform .15s; }
.nav .item.cols .menu a.menu-h:hover { background: none; color: var(--cyan); } .nav .item.cols .menu a.menu-h:hover::after { transform: translateX(3px); opacity: 1; }
@media (max-width: 960px) { .nav .item.cols .menu { display: block; padding: 0 0 8px 12px; } .nav .menu .mcol + .mcol { border-left: 0; padding-left: 0; margin-top: 8px; } }
.nav .menu { max-height: 82vh; overflow-y: auto; }
@media (min-width: 961px) {
  .site-header .wrap { position: relative; } .nav { align-self: stretch; }
  .nav .item.wide { position: static; align-self: stretch; display: flex; align-items: center; }   /* as tall as the header: no gap between the entry and its menu */
  .nav .item.wide .menu { left: 50%; right: auto; top: 100%; width: max-content; max-width: calc(100vw - 24px); transform: translate(-50%, 4px); }
  .nav .item.wide:hover .menu, .nav .item.wide:focus-within .menu { transform: translate(-50%, 0); }
  .nav .item.wide .menu .mcol { min-width: 0; flex: 1 1 215px; }
}
.x2 { position: relative; box-shadow: 8px 8px 0 -2px #fff, 8px 8px 0 0 #b4c0d2; margin: 0 8px 8px 0; }
.x2::after { content: "\00d7 2"; position: absolute; top: -10px; right: -10px; background: #0b1023; color: #fff; font-size: 0.8125rem; font-weight: 800; border-radius: 999px; padding: 3px 9px; line-height: 1.2; }
.one-pair.three { grid-template-columns: 1fr; gap: 4px; } .one-pair.three > i { font-style: normal; text-align: center; color: #0b1023; font-weight: 800; font-size: 1rem; line-height: 1; }
.one-pair.three .node { padding: 12px 8px; } .one-pair.three .node b { display: block; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; } .one-col > .one-gk.x2 { flex: 1; }
.site-header .signin { color: #fff; font-weight: 700; font-size: 0.875rem; text-decoration: none; border: 1px solid rgba(147, 197, 253, .45); border-radius: 999px; padding: 4px 13px; white-space: nowrap; } .site-header .signin:hover { background: rgba(255, 255, 255, .1); } .site-header .signin.on { background: #475569; border-color: #475569; }
@media (max-width: 960px) { .site-header .signin { margin-left: auto; } .site-header .signin + .lang { margin-left: 0; } }
.comp-cards .card { border-top: 5px solid #e2e8f0; } .comp-cards .card.wide { grid-column: 1 / -1; } .comp-cards .card p { margin-bottom: 0; } .comp-cards .card .more { display: inline-block; margin-top: 12px; }
.comp-cards h3 { display: flex; align-items: center; gap: 10px; } .comp-cards h3 svg { width: 24px; height: 24px; fill: none; stroke: #0b1023; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.comp-cards .c-orch { border-top-color: #1e40af; } .comp-cards .c-gate { border-top-color: #22d3ee; } .comp-cards .c-cloud { border-top-color: #38bdf8; } .comp-cards .c-onprem { border-top-color: #0b1023; }
.integ .integ-shell.onion { width: auto; padding: 0; margin: 46px auto 10px; background: none; border: 0; border-radius: 50%; box-shadow: none; display: grid; place-items: center; }
.onion .on { position: relative; display: grid; place-items: center; border-radius: 50%; aspect-ratio: 1; box-sizing: border-box; }
.onion .on > span { position: absolute; top: 0; left: 0; right: 0; height: var(--band); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0b1023; white-space: nowrap; }
.onion .r4 { width: min(470px, 88vw); --band: 10.5%; background: #cffafe; border: 3px solid #22d3ee; box-shadow: 0 10px 30px rgba(14, 116, 144, .14); }
.onion .r3 { width: 79%; --band: 12.5%; background: #fff; border: 3px solid #1e40af; }
.onion .r2 { width: 75%; --band: 15%; background: #cffafe; border: 3px solid #22d3ee; }
.integ .onion .integ-core { width: 68%; height: auto; aspect-ratio: 1; margin: 0; }
.onion-note { position: relative; z-index: 2; text-align: center; font-size: 0.875rem; color: var(--muted); max-width: 600px; margin: 0 auto 46px; padding: 6px 14px; border-radius: 10px; background: var(--paper-2, #f8faff); }
@media (max-width: 520px) { .onion .on > span { font-size: 0.8125rem; letter-spacing: .03em; } }
/* the remaining AI boxes get exactly the same glow and sheen as all others */
.integ .integ-core, .k.ai-m, .st.mdl, .ro-b.m, .hs-in div.m { position: relative; overflow: hidden; border-color: rgba(34, 211, 238, .8); animation: ai-pulse 3.5s ease-in-out infinite; }
.integ .integ-core::after, .k.ai-m::after, .st.mdl::after, .ro-b.m::after, .hs-in div.m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
.integ .integ-core { border: 2px solid rgba(34, 211, 238, .8); } .integ .integ-core .pulse { display: none; }
.hub-ai, .hub-ai.cloud { stroke: rgba(34, 211, 238, .8); animation: ai-pulse-svg 3.5s ease-in-out infinite; }
.hub-sheen { transform-box: fill-box; transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes ai-pulse-svg { 0%, 100% { filter: drop-shadow(0 0 5px rgba(34, 211, 238, .30)); } 50% { filter: drop-shadow(0 0 3px rgba(34, 211, 238, .25)) drop-shadow(0 0 13px rgba(52, 211, 153, .55)); } }
@media (prefers-reduced-motion: reduce) { .integ .integ-core, .k.ai-m, .st.mdl, .ro-b.m, .hs-in div.m, .hub-ai, .hub-sheen, .integ .integ-core::after, .k.ai-m::after, .st.mdl::after, .ro-b.m::after, .hs-in div.m::after { animation: none; } }
.ai-row .gk-shell > .step.ai { overflow: hidden; }
.ai-row .gk-shell > .step.ai::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ai-row .gk-shell > .step.ai::before { animation: none; } }
/* the AI steps wear the blue of the AI on the title page, lit from the top left; the beat is drawn so that it shows on the light frame */
.flow > .gk-shell > .step.ai, .flow > .ai-unit > .gk-shell > .step.ai, .ai-row > .gk-shell > .step.ai { background: #1d4ed8;
  background: radial-gradient(170% 220% at 8% -12%, #1d4ed8 0%, #1d4ed8 36%, #0b1023 100%); animation: ai-beat 3.5s ease-in-out infinite; }
.flow > .gk-shell > .step.ai span, .flow > .ai-unit > .gk-shell > .step.ai span, .ai-row > .gk-shell > .step.ai span { color: #fff; }   /* white: 4.5 to 1 also on the lightest blue */
@keyframes ai-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0), 0 0 10px rgba(29, 78, 216, .35); filter: brightness(1); }
  50% { box-shadow: 0 0 0 4px rgba(34, 211, 238, .45), 0 0 22px rgba(29, 78, 216, .7); filter: brightness(1.16); } }
@media (prefers-reduced-motion: reduce) { .flow > .gk-shell > .step.ai, .flow > .ai-unit > .gk-shell > .step.ai, .ai-row > .gk-shell > .step.ai { animation: none; } }
/* several AI steps in a row: one AI assistant in one gatekeeper; the steps are joined in one box, parted by small dotted lines */
.ai-one { position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid rgba(34, 211, 238, .8); color: #fff; background: #1d4ed8;
  background: radial-gradient(150% 220% at 4% -14%, #1d4ed8 0%, #1d4ed8 34%, #0b1023 100%); animation: ai-beat 3.5s ease-in-out infinite; }
.ai-one::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34, 211, 238, .28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
.ai-one > small { position: relative; display: block; padding: 12px 16px 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ai-steps { position: relative; display: flex; flex: 1; }
.ai-sub { position: relative; flex: 1; min-width: 0; padding: 10px 16px 16px; }
.ai-sub b { display: block; color: #fff; margin-bottom: 4px; } .ai-sub span { font-size: 0.875rem; color: #fff; }
.ai-sub + .ai-sub { border-left: 2px dotted rgba(255, 255, 255, .6); }
@media (max-width: 900px) { .ai-steps { flex-direction: column; } .ai-sub + .ai-sub { border-left: 0; border-top: 2px dotted rgba(255, 255, 255, .6); padding-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .ai-one, .ai-one::before { animation: none; } }
/* every card reacts to the pointer; cards that lead somewhere react more clearly */
.card, .cmp-card, .sys, .act, .host, .stat, .layer, .comp-cards .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover, .cmp-card:hover, .sys:hover, .act:hover, .host:hover, .stat:hover, .layer:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(15, 23, 42, .13); border-color: #93c5fd; }
.card:has(a):hover, a.card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(15, 23, 42, .18); border-color: #22d3ee; }
.card:has(a):hover .more { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .card, .cmp-card, .sys, .act, .host, .stat, .layer { transition: none; } .card:hover, .cmp-card:hover, .sys:hover, .act:hover, .host:hover, .stat:hover, .layer:hover, .card:has(a):hover { transform: none; } }
.one-form { margin-top: 34px; }
/* unified drawing style: dark text on tinted boxes */
.integ-gate, .integ-gate span, .gk-shell > .gk-tag, .node.c-gw, .node.c-gw small, section.dark .node.c-gw small, .house > b, .blocked,
.onion.o1, .onion.o2, .onion.o3, .onion.o4, .onion.o5, .where.in, .where.out, .uc-human, .tl-human, .v-ok, .v-look,
.zone.z-de, .zone.z-eu, .zone.z-world, table.models tr.grp.z-de td, table.models tr.grp.z-eu td, .choice .or, .hy-lane.in > b, .hy-lane.out > b,
.loop-mid small, .saga-step.ok, .saga-step.fail, .saga-step.undo, .saga-step.note, .one-band.sec, .one-band.sec h3, .one-band.sec small,
.one-gk > strong, .one-gk > strong small, .node.c-office, .node.c-office small, .node.c-docs, .node.c-docs small, .light.g h3 { color: #0b1023; }
.gk-shell > .gk-tag svg, .one-gk > strong svg { stroke: #0b1023; }
 .one-form h3 { font-size: 1.25rem; margin: 0 0 4px; } .one-form > p { margin: 0 0 14px; max-width: 900px; }
@media (max-width: 900px) { .one-mid.m4, .one-mid.m5, .one-lanes .lane { grid-template-columns: 1fr; } }

.one-cards .card { border-top: 5px solid; } .one-cards .card p { margin-bottom: 0; }
.one-cards h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.one-cards h3 svg { width: 26px; height: 26px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.one-cards .oc-sec { border-top-color: #34d399; } .one-cards .oc-sec h3 svg { stroke: #0b1023; }
.one-cards .oc-gk { border-top-color: #22d3ee; } .one-cards .oc-gk h3 svg { stroke: #0b1023; }
.one-cards .oc-rel { border-top-color: var(--navy-800); } .one-cards .oc-rel h3 svg { stroke: var(--navy-700); }

/* FAQ */
.faq { margin-top: 28px; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 0; }
.faq details p { color: var(--muted); }

/* architecture: the big picture */
.stack { margin-top: 36px; display: grid; gap: 0; max-width: 860px; }
.stack .tier { border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 18px 20px; display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; align-items: center; }
.stack .tier h3 { margin: 0; } .stack .tier p { margin: 0; color: var(--muted); font-size: 1rem; }
.stack .tier.ai { background: radial-gradient(120% 160% at 10% 0%, var(--blue-600), var(--navy-900) 75%); border-color: var(--navy-700); }
.stack .tier.ai h3 { color: #fff; } .stack .tier.ai p { color: var(--sky-200); }
.stack .tier.guard { border: 2px solid var(--emerald); background: #ecfdf5; }
.stack .link { width: 3px; height: 22px; margin: 0 auto; background: var(--grad); border-radius: 2px; }

@media (max-width: 860px) {
  .cmp, .layers-vis, .lights, .watch { grid-template-columns: 1fr; }
  .stack .tier { grid-template-columns: 1fr; }
  .onion { padding: 32px 7px 7px; }
}


/* security page: six controls */
.sx-map { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 8px 26px rgba(15, 23, 42, .05); overflow-x: auto; }
.sx-map svg { display: block; width: 100%; min-width: 860px; height: auto; font-family: var(--font); }
.sx-map .fwt { font-size: 7.5px; font-weight: 800; letter-spacing: 1px; fill: #fff; }
.sx-map .zl { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; fill: #0b1023; }
.sx-map .t { font-size: 16px; font-weight: 800; fill: #0b1023; } .sx-map .s { font-size: 12.5px; fill: #1e293b; }
.sx-map .tw { font-size: 16px; font-weight: 800; fill: #fff; } .sx-map .sw { font-size: 12.5px; fill: #e0f2fe; }
.sx-map .lab { font-size: 12px; font-weight: 700; fill: #0b1023; } .sx-map .num { font-size: 13px; font-weight: 800; fill: #fff; }
.sx-map .ar { stroke: #475569; stroke-width: 2.2; fill: none; }
.sx-six { margin-top: 24px; }
.sx-six .card { padding: 22px 24px; border-top: 5px solid #e2e8f0; }
.sx-six .k1 { border-top-color: #93c5fd; } .sx-six .k2, .sx-six .k5 { border-top-color: #22d3ee; } .sx-six .k3 { border-top-color: #1e40af; } .sx-six .k4 { border-top-color: #0b1023; } .sx-six .k6 { border-top-color: #b4c0d2; }
.sx-auth .card { border-top: 5px solid #93c5fd; }
.sx-loc .card { border-top: 5px solid #38bdf8; } .sx-loc .card:nth-child(2) { border-top-color: #0b1023; } .sx-loc .card:nth-child(3) { border-top-color: #1e40af; }
.sx-gws div { background: #cffafe; border: 2px solid #22d3ee; } .sx-gws p { color: #0b1023; }
.sx-zone.gen { background: #f3f6fa; border: 2px solid #b4c0d2; color: #0b1023; } .sx-zone.sen { background: #fffbeb; border: 2px solid #f59e0b; color: #0b1023; } .sx-zone.kno { background: #eff6ff; border: 2px solid #93c5fd; color: #0b1023; }
.sx-band { margin-top: 30px; display: grid; grid-template-columns: 230px 1fr; gap: 14px 24px; align-items: start; padding: 18px 20px; border-radius: 16px; background: #dbeafe; border: 2px solid #93c5fd; color: #0b1023; }
.sx-band h3 { margin: 0; font-size: 1rem; } .sx-band h3 small { display: block; font-weight: 500; font-size: 0.8125rem; margin-top: 4px; }
.sx-rows { display: grid; gap: 18px; min-width: 0; } .sx-rows b { display: block; font-size: 1rem; } .sx-rows p { margin: 2px 0 10px; font-size: 0.875rem; color: #0b1023; }
.sx-pills { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .sx-pills.p5 { grid-template-columns: repeat(5, 1fr); }
.sx-pills span { background: #fff; border: 1px solid #93c5fd; border-radius: 10px; padding: 7px 6px; font-size: 0.8125rem; font-weight: 700; text-align: center; line-height: 1.3; display: grid; place-items: center; }
.sx-band.aw { margin-top: 14px; background: #d6f8e2; border-color: #86efac; } .sx-band.aw .sx-pills span { border-color: #86efac; } .sx-band.aw .sx-rows p { margin-top: 0; }
.sx-sbx div { background: #eff6ff; border: 2px dashed #1e40af; } .sx-sbx p { color: #0b1023; }
.sx-pr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.sx-pr a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; color: var(--ink); transition: border-color .15s; } .sx-pr a:hover { border-color: #93c5fd; }
.sx-pr b { display: block; } .sx-pr span { font-size: 0.875rem; color: var(--blue-600); font-weight: 700; }
.sx-fw { flex: none; width: 14px; border-radius: 4px; border: 1px solid #1e293b; background: #475569 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16'%3E%3Crect width='20' height='16' fill='%23475569'/%3E%3Cpath d='M0 0H20M0 8H20M10 0V8M0 8V16M20 8V16' stroke='%23e9d5cf' stroke-width='1.4'/%3E%3C/svg%3E"); }
.sx-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-900); color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 12px; }
.sx-six h3 { margin: 0 0 6px; } .sx-six .more { margin-top: 12px; font-size: 0.875rem; }
.sx-h { margin: 44px 0 0; font-size: 1.125rem; }
.sx-chain { display: grid; grid-template-columns: 1.55fr auto 1fr; align-items: stretch; margin-top: 32px; }
.sx-side { border-radius: 16px; padding: 14px 16px 16px; border: 1px solid; min-width: 0; }
.sx-side.own { background: #ecfdf5; border-color: #86efac; } .sx-side.cl { background: #eff6ff; border-color: #93c5fd; }
.sx-side > b { display: block; font-size: 0.8125rem; letter-spacing: .12em; text-transform: uppercase; color: #0b1023; margin-bottom: 10px; }
.sx-row { display: flex; align-items: stretch; gap: 8px; }
.sx-box { flex: 1; min-width: 0; background: #fff; border: 2px solid #1e40af; border-radius: 12px; padding: 10px 12px; text-align: center; font-weight: 800; font-size: 1rem; color: #0b1023; display: flex; flex-direction: column; justify-content: center; }
.sx-box small { display: block; font-weight: 400; font-size: 0.8125rem; color: #1e293b; }
.sx-box.gw { background: #cffafe; border-color: #22d3ee; }
.sx-box.model { background: linear-gradient(135deg, #1d4ed8, #0b1023 85%); border-color: #22d3ee; color: #fff; } .sx-box.model small { color: #e0f2fe; }
.sx-ar { align-self: center; color: #475569; font-weight: 800; }
.sx-link { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 12px; min-width: 170px; text-align: center; font-size: 0.8125rem; color: #1e293b; }
.sx-link b { color: #0b1023; } .sx-link i { display: block; width: 100%; height: 0; border-top: 4px double #0b1023; margin: 7px 0; }
.sx-points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px 36px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sx-points li { padding-left: 16px; border-left: 3px solid var(--sky-300); color: var(--muted); font-size: 1rem; } .sx-points li b { display: block; color: var(--ink); }
.sx-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.sx-chips div { background: #fff; border: 2px solid #1e40af; border-radius: 12px; padding: 13px 15px; } .sx-chips b { display: block; } .sx-chips span { font-size: 0.875rem; color: var(--muted); }
.sx-zone small { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.sx-zone em { display: block; font-style: normal; font-weight: 700; margin-top: 10px; font-size: 0.875rem; }
.sx-stdw { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; overflow-x: auto; background: #fff; }
.sx-std { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 1rem; }
.sx-std th { text-align: left; background: var(--navy-900); color: #fff; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 11px 16px; }
.sx-std td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.sx-std td:first-child { color: var(--ink); font-weight: 700; width: 34%; } .sx-std td:nth-child(2) { width: 22%; }
.sx-std td small { display: block; font-weight: 400; color: var(--muted); }
.sx-std td, .sx-std th { white-space: normal; overflow-wrap: break-word; }
.sx-auth-t { table-layout: fixed; } .sx-auth-t td:first-child, .sx-auth-t td:nth-child(2) { width: auto; } .sx-auth-t td:nth-child(2), .sx-auth-t td:last-child { color: var(--ink); } .sx-auth-t td:last-child { font-weight: 700; }
@media (max-width: 860px) {
  .sx-chain { grid-template-columns: 1fr; } .sx-row { flex-direction: column; } .sx-ar { transform: rotate(90deg); }
  .sx-link { padding: 12px 0; } .sx-link i { width: 0; height: 30px; border-top: 0; border-left: 4px double #0b1023; margin: 6px 0; }
  .sx-chips { grid-template-columns: 1fr 1fr; } .sx-fw { width: 100%; height: 14px; }
  .sx-band { grid-template-columns: 1fr; } .sx-pills, .sx-pills.p5 { grid-template-columns: 1fr 1fr; } .sx-pr { grid-template-columns: 1fr; }
}


/* architecture page: connections to the cloud */
.cx-wrap { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; overflow-x: auto; background: #fff; }
.cx { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
.cx th { text-align: left; background: var(--navy-900); color: #fff; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 11px 14px; }
.cx td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); white-space: normal; overflow-wrap: break-word; font-weight: 400; }
.cx td:first-child { color: var(--ink); font-weight: 800; }
.cx tr.grp td { background: #eff6ff; color: #0b1023; font-weight: 800; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; }
.cx .who { display: flex; flex-wrap: wrap; gap: 5px; }
.cx .who span { border: 1px solid #b4c0d2; border-radius: 999px; padding: 2px 9px; font-size: 0.8125rem; font-weight: 700; color: #0b1023; background: #fff; }
.cx .who small { flex-basis: 100%; font-size: 0.8125rem; color: var(--muted); }
.cx .bsi b { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.8125rem; font-weight: 800; color: #0b1023; border: 2px solid; margin-bottom: 6px; }
.cx .bsi.ok b { background: #d6f8e2; border-color: #86efac; } .cx .bsi.part b { background: #fffbeb; border-color: #f59e0b; }
.cx .bsi.no b { background: #f3f6fa; border-color: #b4c0d2; } .cx .bsi.na b { background: #fff; border-color: #e2e8f0; border-style: dashed; }
.cx .bsi span { display: block; }
.cx-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.cx-rec div { border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 16px 18px; border-left: 4px solid var(--blue-600); }
.cx-rec h3 { margin: 0 0 4px; font-size: 1rem; } .cx-rec p { margin: 0; color: var(--muted); font-size: 1rem; }
@media (max-width: 860px) { .cx-rec { grid-template-columns: 1fr; } }


/* ===== review of 12 October 2026 ===== */
/* title area: a full screen only on the home page */
.page-hero { min-height: 0; display: block; padding: 60px 0 48px; }
/* skip link for keyboard users */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: #0b1023; padding: 12px 18px; font-weight: 800; border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }
/* contrast: white text needs a dark enough ground */
.pill.z-de { background: #0b1023; }
.ph-join { --ph: #0b1023; }
.ph-move .tl-phase, .ph-move .tl-dot, .tl-phase.ph-move { color: #0b1023; }
.node.c-dc { background: linear-gradient(135deg, #1d4ed8, #3b82f6); } .node.c-dc small { color: #fff; }
.fine, .integ .fine, p.fine { color: #475569; }
section.dark p a, section.dark .note a, section.dark li a { color: #bfdbfe; }
a.card.feat .tag { color: #cffafe; }
.nav-toggle { min-width: 44px; min-height: 44px; }
/* tap targets: links inside text get a taller hit area (at least 24 px) without moving the lines */
:is(p, li, td, dd, span) > a:not([class]), a.arch, .mbar a, .crumb a, .site-footer a:not([class]), footer a:not([class]) { padding-block: 4px; }
a.rf { padding-block: 6px; }
.saga-step.wait { color: #475569; } .node.c-out { color: #475569; } .node.c-out svg { stroke: #475569; }
/* text lines stay readable: about 75 characters */
main .wrap > p, .dd p, .dd ul, .dd ol, .legal-list ol, .legal-list ul, .note, .fine p, .tl-why, .integ-eg, .integ-note { max-width: 76ch; }
.wrap.contact p, .wrap.contact .lead { max-width: 640px; }
.one-form > p, .card.wide p, .sx-rows p, .integ-auth p { max-width: 76ch; } .integ .integ-eg, .integ-auth p { margin-left: auto; margin-right: auto; }
/* a call to action in the middle of long pages */
.cta-strip { background: #0b1023; color: #fff; padding: 22px 0; }
.cta-strip .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; }
.cta-strip p { margin: 0; max-width: none; color: #e2e8f0; } .cta-strip b { color: #fff; }
.cta-strip .btn { padding: 10px 20px; white-space: nowrap; }
/* folded details: a table opens on a click */
details.fold { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
details.fold > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 800; color: #0b1023; display: flex; gap: 12px; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0b1023; color: #fff; display: grid; place-items: center; font-weight: 800; }
details.fold[open] > summary::before { content: "\2212"; }
details.fold > summary small { font-weight: 500; color: var(--muted); }
details.fold > .fold-in { padding: 0 18px 18px; } details.fold > .fold-in > :first-child { margin-top: 0; }
.fold-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fold-chips span { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: .875rem; font-weight: 700; color: #0b1023; }
/* the four forms of the architecture as tabs */
.tabs { margin-top: 26px; position: relative; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tab-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tab-bar label { cursor: pointer; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 11px 14px; font-weight: 800; color: #0b1023; line-height: 1.3; }
.tab-bar label small { display: block; font-weight: 500; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.tab-panel { display: none; }
#tab-one:checked ~ .tab-bar label[for="tab-one"], #tab-two:checked ~ .tab-bar label[for="tab-two"], #tab-group:checked ~ .tab-bar label[for="tab-group"], #tab-conf:checked ~ .tab-bar label[for="tab-conf"] { background: #0b1023; border-color: #0b1023; color: #fff; }
#tab-one:checked ~ .tab-bar label[for="tab-one"] small, #tab-two:checked ~ .tab-bar label[for="tab-two"] small, #tab-group:checked ~ .tab-bar label[for="tab-group"] small, #tab-conf:checked ~ .tab-bar label[for="tab-conf"] small { color: #e2e8f0; }
#tab-one:focus-visible ~ .tab-bar label[for="tab-one"], #tab-two:focus-visible ~ .tab-bar label[for="tab-two"], #tab-group:focus-visible ~ .tab-bar label[for="tab-group"], #tab-conf:focus-visible ~ .tab-bar label[for="tab-conf"] { outline: 3px solid #22d3ee; outline-offset: 2px; }
#tab-one:checked ~ .tab-panel[data-tab="tab-one"], #tab-two:checked ~ .tab-panel[data-tab="tab-two"], #tab-group:checked ~ .tab-panel[data-tab="tab-group"], #tab-conf:checked ~ .tab-panel[data-tab="tab-conf"] { display: block; }
.tab-panel.one-form { margin-top: 18px; }
/* the areas of a company open group by group */
details.area-group > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
details.area-group > summary::-webkit-details-marker { display: none; }
details.area-group > summary::after { content: "+"; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: #0b1023; color: #fff; display: grid; place-items: center; font-weight: 800; }
details.area-group[open] > summary::after { content: "\2212"; }
details.area-group > summary .area-names { font-weight: 500; font-size: .875rem; color: var(--muted); }
details.area-group[open] > summary .area-names { display: none; }
details.area-group:not([open]) { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 16px; }
/* a normal note where a result bar carried a long text */
.rel-note { margin-top: 18px; border-left: 4px solid #0b1023; background: #fff; border-radius: 0 12px 12px 0; padding: 14px 18px; max-width: 76ch; color: var(--muted); } .rel-note b { color: #0b1023; }
/* the "gatekeeper in the middle" drawing and the six controls on a phone: a version from top to bottom */
.hub-m, .sx-map-m { display: none; }
.hub-m { gap: 6px; } .hub-m .b { border-radius: 12px; border: 2px solid; padding: 10px 12px; text-align: center; color: #0b1023; } .hub-m .b b { display: block; } .hub-m .b small { display: block; font-size: .875rem; color: #1e293b; }
.hub-m .u { background: #d6f8e2; border-color: #86efac; } .hub-m .o { background: #fff; border-color: #1e40af; } .hub-m .g { background: #cffafe; border-color: #22d3ee; }
.hub-m .m { background: linear-gradient(135deg, #1d4ed8, #0b1023 85%); border-color: #22d3ee; color: #fff; } .hub-m .m small { color: #e0f2fe; }
.hub-m .s { background: #fef3c7; border-color: #fcd34d; text-align: left; } .hub-m .s ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.hub-m .s li { background: #fff; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.hub-m .a { text-align: center; font-weight: 800; color: #475569; font-size: .875rem; line-height: 1.2; } .hub-m .f { text-align: center; font-size: .875rem; color: #475569; margin-top: 4px; }
.sx-map-m { gap: 6px; } .sx-map-m .b { border-radius: 12px; border: 2px solid; padding: 9px 12px; color: #0b1023; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.sx-map-m .b i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #0b1023; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .875rem; }
.sx-map-m .b b { display: block; } .sx-map-m .b small { display: block; font-size: .875rem; color: #1e293b; } .sx-map-m .b.n { grid-template-columns: 1fr; }
.sx-map-m .u { background: #d6f8e2; border-color: #86efac; } .sx-map-m .au { background: #dbeafe; border-color: #93c5fd; } .sx-map-m .g { background: #cffafe; border-color: #22d3ee; }
.sx-map-m .c { background: #fff; border-color: #1e40af; } .sx-map-m .m { background: linear-gradient(135deg, #1d4ed8, #0b1023 85%); border-color: #22d3ee; color: #fff; } .sx-map-m .m small { color: #e0f2fe; }
.sx-map-m .w { background: #fef3c7; border-color: #fcd34d; } .sx-map-m .m i { background: #fff; color: #0b1023; } .sx-map-m .fw { background: #475569; border-color: #1e293b; color: #fff; text-align: center; padding: 4px 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; }
.sx-map-m .a { text-align: center; font-weight: 800; color: #475569; font-size: .875rem; line-height: 1.1; } .sx-map-m h3 { margin: 12px 0 2px; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
/* the header fits a narrow phone (375 px) */
@media (max-width: 430px) { .site-header .wrap { gap: 7px; padding: 0 12px; } .brand { gap: 6px; } .site-header .signin { padding: 4px 9px; } .lang { gap: 3px; } .lang a, .lang span { padding: 3px 5px; } }
/* between the phone menu and a wide screen the menu entries stay on one line (German and French entries are longer) */
@media (min-width: 961px) and (max-width: 1140px) { .nav .top { white-space: nowrap; padding: 8px 7px; } .nav a { font-size: .8125rem; } .site-header .wrap { gap: 10px; } .brand small { display: none; } }
/* narrow phones: the company name stands on two lines, so that it does not run under the sign-in button */
@media (max-width: 520px) { .brand span { white-space: normal; line-height: 1.1; max-width: 6em; } .brand small { display: none; } }
@media (max-width: 350px) { .site-header .wrap { gap: 5px; padding: 0 8px; } .brand img { width: 26px; height: 26px; } .site-header .signin { padding: 4px 7px; } .lang { gap: 2px; } .lang a, .lang span { padding: 3px 4px; } }
@media (max-width: 760px) {
  section { padding: 48px 0; }
  .page-hero { padding: 40px 0 34px; }
  .hub svg, .sx-map svg { display: none; } .hub-m, .sx-map-m { display: grid; } .hub { overflow: visible; } .sx-map { overflow: visible; min-width: 0; }
  .tab-bar { grid-template-columns: 1fr 1fr; }
  .cta-strip .wrap { justify-content: flex-start; }
  footer a, .more { display: inline-block; padding-top: 8px; padding-bottom: 8px; }
  /* tables become cards: one block per row, the column title above each value */
  .rt-wrap { overflow: visible !important; border: 0 !important; background: none !important; min-width: 0 !important; box-shadow: none !important; }
  table.rt { display: block; min-width: 0 !important; width: 100% !important; border: 0; background: none; }
  table.rt thead, table.rt colgroup, table.rt tr.rt-head { display: none; }
  table.rt tbody, table.rt tr, table.rt td, table.rt th { display: block; width: auto !important; }
  table.rt tr { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 0 0 10px; padding: 10px 14px; }
  table.rt td, table.rt th { border: 0 !important; padding: 4px 0 !important; white-space: normal !important; text-align: left !important; }
  table.rt td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #475569; }
  table.rt td:first-child { font-weight: 800; color: #0b1023; font-size: 1rem; }
  /* tables with short values: title and value side by side, so a card stays short */
  table.models.rt td[data-label]:not(:first-child) { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: center; }
  table.models.rt td[data-label]:not(:first-child)::before { letter-spacing: 0; grid-column: 1; grid-row: 1; }
  table.models.rt td[data-label]:not(:first-child) { row-gap: 3px; }
  table.models.rt td[data-label]:not(:first-child) > * { grid-column: 2; justify-self: start; }
  table.models.rt td.c { text-align: left !important; } table.models.rt .str { max-width: 220px; }
  table.rt tr.grp { border: 0; background: none; padding: 10px 0 0; margin-bottom: 6px; } table.rt tr.grp td { background: none !important; padding: 0 !important; }
}

/* ---- phone: sections and model cards open on a tap (phone_folds.py) ---- */
details.m-fold > summary { display: none; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-row-btn { display: none; }
@media (max-width: 760px) {
  details.m-fold > summary { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 20px 0; min-height: 46px; border: 2px solid var(--line); border-radius: 12px;
    background: #fff; font-weight: 800; color: #0b1023; cursor: pointer; list-style: none; }
  details.m-fold > summary::-webkit-details-marker { display: none; }
  details.m-fold > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; font-weight: 800; }
  details.m-fold[open] > summary::after { content: "\2212"; }
  details.m-fold > summary .m-less, details.m-fold[open] > summary .m-more { display: none; }
  details.m-fold[open] > summary .m-less { display: inline; }
  details.m-fold[open] > summary { margin-bottom: 22px; }
  details.m-fold > summary:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
  table.models.rt tr.m-row { position: relative; }
  table.models.rt tr.m-row td:first-child { padding-right: 112px !important; min-height: 44px; }
  table.models.rt tr.m-closed td[data-label]:not(:first-child):not(.m-keep) { display: none; }
  .m-row-btn { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 12px; border: 2px solid var(--line); border-radius: 10px;
    background: #fff; font: inherit; font-size: .875rem; font-weight: 800; color: #0b1023; cursor: pointer; }
  .m-row-btn::after { content: "+"; font-size: 1.125rem; line-height: 1; }
  .m-row-btn[aria-expanded="true"]::after { content: "\2212"; }
  .m-row-btn:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
}

/* home page: the four points under the title, double size, two beside each other and two below them */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 44px; font-size: 1.75rem; line-height: 1.25; }
.trust span { min-width: 0; overflow-wrap: break-word; }
.trust span small { display: block; margin-top: 6px; font-size: .5em; font-weight: 500; line-height: 1.35; opacity: .9; }
/* the field of dots on the right belongs to the picture alone: no text may stand on it. hero-flow.js draws the dots from 67 % of the
   width (computer); the four statements end at 62 %, at every window width. */
.hero .wrap { width: 100%; box-sizing: border-box; }   /* the text column keeps its place, whatever the width of its blocks */
@media (min-width: 761px) { .hero .trust { max-width: calc(62vw - max(20px, (100vw - var(--max)) / 2 + 20px)); } }
/* phones: the same two by two; the size follows the width so that the longest word ("recommandations") stays in one piece */
@media (max-width: 760px) { .trust { gap: 16px; font-size: clamp(1rem, 5vw, 1.25rem); } }
/* home page: the security controls as a section of their own */
.home-sec { border-top: 4px solid #22d3ee; border-bottom: 4px solid #22d3ee; }
.home-sec .sx-six .card { background: #fff; color: #0b1023; }
.home-sec .sx-six .card h3 { color: #0b1023; }
.home-sec .sx-six .card p { color: #475569; }
.home-sec .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 760px) {   /* phone: number and question side by side, the explanation is on the Security page */
  .home-sec .sx-six { gap: 10px; }
  .home-sec .sx-six .card { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; }
  .home-sec .sx-six .card .sx-n { margin: 0; grid-row: 1 / span 2; }
  .home-sec .sx-six .card h3 { margin: 0; }
  .home-sec .sx-six .card p { display: none; }
  .home-sec .sx-six .card .more { grid-column: 2; margin-top: 2px; padding: 0; }
}

/* start page: four service cards in one row, two on tablets, one on phones */
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.four { grid-template-columns: minmax(0, 1fr); } }
/* ---- light structure: the ring, the four ways, the security strip (simple_site.py) ---- */
.offers-grid { display: grid; grid-template-columns: minmax(280px, 470px) minmax(0, 1fr); column-gap: 44px; align-items: center; }
.ring-stage { display: contents; }
.offers-grid .eyebrow, .offers-grid h2, .offers-grid .lead, .offers-grid .ring-more { grid-column: 1 / -1; }
.ring-box { grid-column: 1; grid-row: 4; margin-top: 36px; } .offers-grid > .offer-list { grid-column: 2; grid-row: 4; margin-top: 36px; }
.ring { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; }
#offers { background: linear-gradient(#fbfcfe, #f3f6fa); }
/* a jump to the ring shows the whole section in the middle of the window, at every window size */
@media (min-width: 861px) {
  #offers { box-sizing: border-box; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: flex; align-items: center; padding: 26px 0; }
  #offers > .wrap { width: 100%; }
  #offers .ring-box, #offers .offers-grid > .offer-list { margin-top: 18px; }
  #offers .ring { width: min(100%, max(270px, calc((100vh - 330px) * .96))); margin: 0 auto; }
  #offers .ring-more { margin-top: 14px; }
}
/* the four parts: polished faces, a side wall, and a step outwards on hover */
.ring a.seg { cursor: pointer; }
.ring a.seg .hit { fill: transparent; stroke: transparent; pointer-events: all; }
.ring a.seg .move, .ring .sh { transition: transform .22s cubic-bezier(.2, .8, .3, 1.2); }
.ring .sh { pointer-events: none; }
.ring a.seg .top { transition: filter .2s; }
.ring a.seg .shadow { transition: opacity .2s; pointer-events: none; }
.ring a.seg:hover .shadow, .ring a.seg:focus-visible .shadow { opacity: .3; }
.ring a.seg .gloss, .ring a.seg text { pointer-events: none; }
.ring a.seg text { fill: #0b1023; letter-spacing: -.01em; }
.ring a.seg:hover .move, .ring a.seg:focus-visible .move { transform: translate(var(--dx), var(--dy)); }
.ring a.seg:hover .top, .ring a.seg:focus-visible .top { filter: saturate(1.3) brightness(1.03); }
.ring a.seg:focus { outline: none; }
.ring a.seg:focus-visible .gloss { stroke: #0b1023; stroke-width: 2.5; stroke-linejoin: round; }
/* the AI in the middle: the colours and the pulse of the AI model on every other page */
.ring-core { fill: url(#ring-ai); stroke: rgba(34, 211, 238, .8); stroke-width: 2.5; animation: ai-pulse-svg 3.5s ease-in-out infinite; }
.ring-sheen { transform-box: fill-box; transform: translateX(-120%); animation: ai-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ring-core, .ring-sheen { animation: none; } .ring a.seg .move, .ring .sh, a.offer { transition: none; } }
.offer-list { display: grid; gap: 14px; }
.offer-list.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
/* the cards carry the colour of their part of the ring; text stays near-black */
a.offer { display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 2px 14px; align-items: center; padding: 16px 20px 16px 16px; border-radius: 16px; color: #0b1023; text-decoration: none;
  background: var(--c); background: linear-gradient(120deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff));
  border: 1px solid color-mix(in srgb, var(--d, var(--c)) 55%, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.offer i { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, #fff, var(--c)); border: 1px solid var(--d, var(--c)); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
a.offer i svg { width: 24px; height: 24px; fill: none; stroke: #0b1023; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.offer b { grid-column: 2; grid-row: 1; font-size: 1.125rem; }
a.offer span { grid-column: 2; grid-row: 2; color: #1e293b; font-size: 1rem; }
a.offer::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 9px; height: 9px; border-top: 2px solid #0b1023; border-right: 2px solid #0b1023; transform: rotate(45deg); opacity: .6; }
a.offer:hover, a.offer:focus-visible { transform: translateX(6px); border-color: var(--d, #0b1023); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 30px -18px rgba(15, 23, 42, .42); }
#offers:has(a.offer[data-k="onprem"]:hover) .ring a.seg[data-k="onprem"] .move, #offers:has(a.offer[data-k="onprem"]:hover) .ring .sh[data-k="onprem"], .ring:has(a.seg[data-k="onprem"]:hover) .sh[data-k="onprem"], .ring:has(a.seg[data-k="onprem"]:focus-visible) .sh[data-k="onprem"] { transform: translate(var(--dx), var(--dy)); }
#offers:has(.ring a.seg[data-k="onprem"]:hover) a.offer[data-k="onprem"] { transform: translateX(6px); border-color: #0b1023; }
#offers:has(a.offer[data-k="eu"]:hover) .ring a.seg[data-k="eu"] .move, #offers:has(a.offer[data-k="eu"]:hover) .ring .sh[data-k="eu"], .ring:has(a.seg[data-k="eu"]:hover) .sh[data-k="eu"], .ring:has(a.seg[data-k="eu"]:focus-visible) .sh[data-k="eu"] { transform: translate(var(--dx), var(--dy)); }
#offers:has(.ring a.seg[data-k="eu"]:hover) a.offer[data-k="eu"] { transform: translateX(6px); border-color: #0b1023; }
#offers:has(a.offer[data-k="aws"]:hover) .ring a.seg[data-k="aws"] .move, #offers:has(a.offer[data-k="aws"]:hover) .ring .sh[data-k="aws"], .ring:has(a.seg[data-k="aws"]:hover) .sh[data-k="aws"], .ring:has(a.seg[data-k="aws"]:focus-visible) .sh[data-k="aws"] { transform: translate(var(--dx), var(--dy)); }
#offers:has(.ring a.seg[data-k="aws"]:hover) a.offer[data-k="aws"] { transform: translateX(6px); border-color: #0b1023; }
#offers:has(a.offer[data-k="saas"]:hover) .ring a.seg[data-k="saas"] .move, #offers:has(a.offer[data-k="saas"]:hover) .ring .sh[data-k="saas"], .ring:has(a.seg[data-k="saas"]:hover) .sh[data-k="saas"], .ring:has(a.seg[data-k="saas"]:focus-visible) .sh[data-k="saas"] { transform: translate(var(--dx), var(--dy)); }
#offers:has(.ring a.seg[data-k="saas"]:hover) a.offer[data-k="saas"] { transform: translateX(6px); border-color: #0b1023; }
#offers:has(a.offer[data-k="azure"]:hover) .ring a.seg[data-k="azure"] .move, #offers:has(a.offer[data-k="azure"]:hover) .ring .sh[data-k="azure"], .ring:has(a.seg[data-k="azure"]:hover) .sh[data-k="azure"], .ring:has(a.seg[data-k="azure"]:focus-visible) .sh[data-k="azure"] { transform: translate(var(--dx), var(--dy)); }
#offers:has(.ring a.seg[data-k="azure"]:hover) a.offer[data-k="azure"] { transform: translateX(6px); border-color: #0b1023; }
.ring-more { margin-top: 26px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid.two { grid-template-columns: minmax(0, 1fr); } }
.sec-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 30px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }
.sec-strip b { margin-right: 6px; color: #0b1023; }
.sec-strip span { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #0b1023; font-size: 1rem; }
.sec-strip a { margin-left: auto; font-weight: 700; }
/* the strip "For clients" of the security page: the light blue of the tiles beside the ring, with a symbol */
.sec-strip.s-sky { --c: #bfdbfe; --d: #8fbdfb; background: var(--c); background: linear-gradient(120deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff));
  border-color: color-mix(in srgb, var(--d) 55%, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
.sec-strip.s-sky span { background: rgba(255, 255, 255, .8); border-color: color-mix(in srgb, var(--d) 55%, #fff); }
.sec-strip.s-sky a { color: #0b1023; }
.sec-strip > .c-ico { margin-right: 4px; }
/* one look on every page (13 October 2026): the soft ground, the light cards with a fine line and a soft shadow, and the
   light icon tiles of the title page apply to every page, also behind the sign-in. Cards with a colour of their own keep it. */
main > section:not(.dark):not(.alt):not(#offers):not(#telephony-block) { background: linear-gradient(#fbfcfe, #f8faff); }
main > section.alt:not(#offers):not(#telephony-block) { background: linear-gradient(#f3f6fa, #eff6ff); }
.card, .cmp-card, .sys, .act, .host, .stat, .layer { border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
.card[class="card"], section.alt .card[class="card"] { background: linear-gradient(120deg, #fff, #f6f9fd); border: 1px solid #dbe4f0; }
.card[class="card"]:hover, .card:has(a):hover, a.card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 20px 34px -18px rgba(15, 23, 42, .42); }
.card .ico { border-radius: 12px; background: linear-gradient(145deg, #fff, #dbeafe); border: 1px solid #93c5fd; box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
.card .ico svg { stroke: #0b1023; }
.tag { border-radius: 999px; padding: 4px 11px; }
/* the security mechanisms: a list that opens, each with a small picture in the fixed colours of the components */
.mech-list { display: grid; gap: 12px; margin-top: 28px; }
.mech { border-radius: 16px; background: linear-gradient(120deg, #fff, #f6f9fd); border: 1px solid #dbe4f0; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
.mech summary { display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 2px 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; }
.mech summary::-webkit-details-marker { display: none; }
.mech summary b { grid-column: 1; font-size: 1.125rem; color: #0b1023; }
.mech summary span { grid-column: 1; color: #1e293b; font-size: 1rem; }
.mech summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; border-right: 2px solid #0b1023; border-bottom: 2px solid #0b1023; transform: rotate(45deg); opacity: .6; transition: transform .18s; }
.mech[open] summary::after { transform: rotate(-135deg); }
.mech[open] { border-color: #93c5fd; }
.mech-in { padding: 0 20px 20px; }
.mech-in p { margin: 0; max-width: 72ch; color: #1e293b; }
.mech-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding: 16px; border-radius: 14px; background: #fbfcfe; border: 1px solid #e2e8f0; }
.mp { padding: 9px 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; color: #0b1023; background: #fff; border: 2px solid #1e40af; text-align: center; }
.mp.u { background: #d6f8e2; border: 1px solid #86efac; } .mp.id { background: #dbeafe; border: 1px solid #93c5fd; } .mp.gw { background: #cffafe; border: 1px solid #22d3ee; }
.mp.sw { background: #fef3c7; border: 1px solid #fcd34d; } .mp.own { background: #ecfdf5; border: 1px solid #86efac; } .mp.cloud { background: #eff6ff; border: 1px solid #93c5fd; }
.mp.model { background: linear-gradient(135deg, #1d4ed8, #0b1023); border: 2px solid rgba(34, 211, 238, .8); color: #fff; }
.mp.fw { background: #475569; border: 1px solid #475569; color: #fff; }
.mp.z1 { background: #f3f6fa; border: 1px solid #b4c0d2; } .mp.z2 { background: #fffbeb; border: 1px solid #f59e0b; } .mp.z3 { background: #eff6ff; border: 1px solid #93c5fd; }
.mp.stop { background: #fff; border: 2px solid #0b1023; }
.mp.stop.s2 { background: #dbeafe; } .mp.stop.s3 { background: #93c5fd; }     /* three levels of shutdown: the wider the reach, the stronger the blue */
.mp-to { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 34px; font-style: normal; font-size: .8125rem; font-weight: 600; color: #1e293b; }
.mp-to::after { content: ""; width: 100%; min-width: 34px; height: 2px; background: #1e40af; }
/* the picture of each way */
.way-form { margin-top: 26px; padding-top: 34px; }
.way-form:has(.way-tag) { padding-top: 4px; }
.way-form + .way-form { margin-top: 68px; }   /* two variants stand clearly apart */
/* the name of the variant stands clear above the picture: the large symbol of the place rises 34px out of its card */
.way-tag { display: inline-block; max-width: 100%; margin-bottom: 50px; padding: 4px 12px; border-radius: 14px; line-height: 1.35; background: #0b1023; color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.way-pic { display: flex; align-items: stretch; margin: 0; }
.wp-zone { position: relative; flex: 1 1 0; min-width: 0; padding: 16px 16px 18px; border-radius: 18px; color: #0b1023; box-shadow: 0 16px 30px -20px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .85); }
.wp-zone.own { flex-grow: 1.35; background: linear-gradient(160deg, #ecfdf5, #d6f8e2); border: 1px solid #86efac; }
.wp-zone.cloud { background: linear-gradient(160deg, #f5f9ff, #dbeafe); border: 1px solid #93c5fd; }
.wp-zone.out { background: #f3f6fa; border: 1.5px dashed #b4c0d2; }
.wp-zone > b { display: block; min-height: 34px; margin-left: 92px; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
/* the symbol of the place: large, half outside the card, so that building and cloud are read at once */
.wp-ico { position: absolute; left: 16px; top: -34px; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 22px; background: linear-gradient(145deg, #fff, var(--tile)); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 #fff, 0 14px 22px -12px rgba(15, 23, 42, .5); }
.wp-ico svg { width: 50px; height: 50px; fill: none; stroke: #0b1023; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wp-zone.own { --tile: #aef2c6; --edge: #34d399; } .wp-zone.cloud { --tile: #bfdbfe; --edge: #62a0f6; } .wp-zone.out { --tile: #e2e8f0; --edge: #b4c0d2; }
.wp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wp { flex: 1 1 120px; display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 9px 12px; border-radius: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.wp small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 500; }
.wp-stack { flex: 1 1 150px; display: grid; grid-auto-rows: 1fr; gap: 8px; min-width: 0; }   /* both blocks always the same size */
.wp-stack .wp { min-height: 50px; }
.wp.u { background: #d6f8e2; border: 1px solid #86efac; }
.wp.sw { background: #fffbeb; border: 1px solid #fcd34d; }   /* pale yellow, as pale as the blue of "Users" (17 Oct 2026) */
.wp.ai { background: #fff; border: 2px solid #1e40af; }
.wp.gw { background: #cffafe; border: 1px solid #22d3ee; }
.wp.mgd { background: #dbeafe; border: 2px solid #62a0f6; }
/* who operates what: self-managed in the green of the office building, managed by AWS in the blue of the cloud */
.who-wrap { overflow-x: auto; margin-top: 16px; border-radius: 16px; border: 1px solid #dbeafe; background: linear-gradient(140deg, #fbfcfe 0%, #f5f9ff 48%, #eff6ff 100%); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
.who { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 8px; color: #0b1023; }
table.who, table.who tr, table.who th, table.who td { background: none; border: 0; box-shadow: none; }
table.who th, table.who td.comp { padding: 8px 10px; text-align: left; font-size: 1rem; font-weight: 700; color: #0b1023; }
table.who thead th { font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; }
.who td { padding: 0; }
.who td span { display: block; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-align: center; }
.who td.own span { background: #d6f8e2; border: 1px solid #86efac; }
.who td.aws span { background: #dbeafe; border: 1px solid #93c5fd; }
.who-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: .875rem; color: #0b1023; }
.who-key span { display: inline-flex; align-items: center; gap: 8px; }
.who-key span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.who-key .own::before { background: #d6f8e2; border: 1px solid #86efac; } .who-key .aws::before { background: #dbeafe; border: 1px solid #93c5fd; }
.wp.model { position: relative; overflow: hidden; background: linear-gradient(135deg, #1d4ed8, #0b1023); border: 2px solid rgba(34, 211, 238, .8); color: #fff; animation: ai-pulse 3.5s ease-in-out infinite; }
.wp.model small { color: #e0f2fe; }
.wp-link { flex: 0 0 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; color: #0b1023; font-size: .8125rem; font-weight: 600; text-align: center; line-height: 1.25; }
.wp-link::after { content: ""; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, #1e40af 0 8px, transparent 8px 13px); }
.way-h { margin: 34px 0 0; font-size: 1.25rem; }
.way-h + .grid { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .wp.model { animation: none; } }
@media (max-width: 860px) {
  .way-pic { flex-direction: column; }
  .way-pic .wp-zone + .wp-link + .wp-zone { margin-top: 34px; }
  .wp-link { flex-basis: auto; flex-direction: column-reverse; padding: 8px 0 0; }
  .wp-link::after { width: 2px; height: 24px; background: repeating-linear-gradient(180deg, #1e40af 0 8px, transparent 8px 13px); }
  /* the connection continues below its label, through the room that the symbol of the next frame needs, and ends 8px above that frame */
  .wp-link::before { content: ""; width: 2px; height: 50px; margin-bottom: -26px; background: repeating-linear-gradient(180deg, #1e40af 0 8px, transparent 8px 13px); }
}
#telephony-block { background: linear-gradient(120deg, #eff6ff, #ecfdf5); }
#telephony-block .cta-row { margin-top: 22px; }
.tel-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px; }
.tel-chips a { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #93c5fd; color: #0b1023; font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .3); transition: transform .15s ease, border-color .15s ease; }
.tel-chips a:hover, .tel-chips a:focus-visible { border-color: #0b1023; transform: translateY(-2px); }
/* The colours of the two marks, one place for the whole site: Cisco the cyan and blue of the Webex mark (no green);
   Microsoft Teams periwinkle, indigo and violet. Cards (cards.py), chips and the picture of Teams Rooms all read these values. */
:root { --cisco-a: #e7f9ff; --cisco-b: #e9efff; --cisco-line: #b0d9f3; --cisco-full: linear-gradient(135deg, #22d3ee 0%, #1d4ed8 100%);
  --teams-a: #f1f3ff; --teams-b: #edebfb; --teams-c: #f3effd; --teams-line: #c6c3f2; --teams-full: linear-gradient(135deg, #8b98f6 0%, #5e52d5 60%, #3331ac 100%); }
.tel-chips a.b-webex { background: linear-gradient(115deg, var(--cisco-a) 0%, var(--cisco-b) 100%); border-color: var(--cisco-line); }
.tel-chips a.b-teams { background: linear-gradient(115deg, var(--teams-a) 0%, var(--teams-b) 55%, var(--teams-c) 100%); border-color: var(--teams-line); }
/* a chip that names a product of Cisco or Microsoft Teams, on any page */
span.b-chip.b-webex { background: linear-gradient(115deg, var(--cisco-a) 0%, var(--cisco-b) 100%) !important; border-color: var(--cisco-line) !important; color: #0b1023; }
span.b-chip.b-teams { background: linear-gradient(115deg, var(--teams-a) 0%, var(--teams-b) 55%, var(--teams-c) 100%) !important; border-color: var(--teams-line) !important; color: #0b1023; }
/* the picture of Teams Rooms: what is Microsoft in the colours of Teams, what is Cisco in the colours of Cisco */
.mtr-pic .mtr-app { background: linear-gradient(115deg, var(--teams-a) 0%, var(--teams-b) 55%, var(--teams-c) 100%); border-color: var(--teams-line); }
.mtr-pic .mtr-cloud:first-child { background: linear-gradient(115deg, var(--teams-a) 0%, var(--teams-b) 55%, var(--teams-c) 100%); border-color: var(--teams-line); }
.mtr-pic .mtr-cloud:last-child { background: linear-gradient(115deg, var(--cisco-a) 0%, var(--cisco-b) 100%); border-color: var(--cisco-line); }
.mtr-pic .mtr-dev span { background: linear-gradient(115deg, var(--cisco-a) 0%, var(--cisco-b) 100%); border-color: #1d4ed8; } .mtr-pic .mtr-dev i { background: #1d4ed8; }
.mtr-pic .mtr-screen { border-color: #1d4ed8; }
/* Microsoft Teams Rooms on Cisco devices: room (own network, green), devices (white, blue line), software (yellow), clouds (blue) */
.mtr-pic { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; margin: 30px 0 26px; }
.mtr-room { padding: 16px 18px 18px; border-radius: 16px; background: #ecfdf5; border: 1px solid #86efac; color: #0b1023; }
.mtr-room > b, .mtr-cloud b { display: block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.mtr-screen { margin-top: 12px; padding: 22px 14px; border-radius: 12px; background: #fff; border: 2px solid #1e40af; text-align: center; box-shadow: 0 10px 20px -14px rgba(15, 23, 42, .5); }
.mtr-app { display: inline-block; padding: 8px 16px; border-radius: 10px; background: #fef3c7; border: 1px solid #fcd34d; font-weight: 800; }
.mtr-screen small { display: block; margin-top: 8px; color: #1e293b; }
.mtr-dev { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.mtr-dev span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #1e40af; font-weight: 700; font-size: 1rem; }
.mtr-dev i { width: 10px; height: 10px; border-radius: 50%; background: #1e40af; }
.mtr-link { height: 2px; margin: 0 8px; background: #1e40af; position: relative; }
.mtr-link::before, .mtr-link::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; border-top: 2px solid #1e40af; border-right: 2px solid #1e40af; }
.mtr-link::before { left: 0; transform: rotate(-135deg); } .mtr-link::after { right: 0; transform: rotate(45deg); }
.mtr-clouds { display: grid; gap: 14px; }
.mtr-cloud { padding: 14px 18px; border-radius: 16px; background: #eff6ff; border: 1px solid #93c5fd; color: #0b1023; }
.mtr-cloud b em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: #1e293b; }
.mtr-cloud span { display: block; margin-top: 4px; }
@media (max-width: 760px) {
  .mtr-pic { grid-template-columns: minmax(0, 1fr); }
  .mtr-link { width: 2px; height: 30px; margin: 6px auto; }
  .mtr-link::before { left: -4px; top: 0; transform: rotate(-45deg); } .mtr-link::after { right: -4px; top: auto; bottom: 0; transform: rotate(135deg); }
}
footer a.quiet { opacity: .85; padding-block: 4px; }   /* as tall as the other links of the footer: a target of 24 px */
/* after sign-in: "Sign out" in place of "Sign in", and a menu that has grown by two entries (clients) or four (administrators) */
.site-header form.signout { margin: 0; display: flex; }
.site-header button.signin { font: inherit; font-size: .875rem; font-weight: 700; background: none; cursor: pointer; }
@media (max-width: 960px) { .site-header form.signout { margin-left: auto; } .site-header form.signout + .lang { margin-left: 0; } }
@media (min-width: 961px) {
  .site-header.signed .wrap { max-width: 1480px; gap: 12px; }      /* a grown menu may use more of a wide window */
  .site-header.signed .nav .top { padding: 8px 7px; font-size: .875rem; white-space: nowrap; }
  .site-header.signed .nav .cta { padding: 8px 11px; margin-left: 4px; }
}
@media (min-width: 961px) and (max-width: 1400px) { .site-header.signed .brand span { display: none; } .site-header.signed .nav .top { padding: 8px 6px; font-size: .8125rem; } }
@media (min-width: 961px) and (max-width: 1250px) { .site-header.signed.admin .nav .cta { display: none; } .site-header.signed .nav .top { padding: 8px 4px; } }
@media (min-width: 961px) and (max-width: 1080px) { .site-header.signed .nav .top { font-size: 0.8125rem; padding: 8px 3px; } .site-header.signed .nav .cta { display: none; } }
@media (max-width: 860px) {
  /* a phone: heading, text and ring fill exactly one screen after the jump; the four cards start below its edge */
  .offers-grid { display: block; }
  .ring-stage { display: flex; flex-direction: column; min-height: calc(100vh - 87px); min-height: calc(100svh - 87px); }
  .ring-box { flex: 1; display: grid; place-items: center; margin-top: 14px; }
  .offers-grid > .offer-list { margin-top: 0; }
  .ring { max-width: 400px; margin: 0 auto; }
  /* a jump to the ring on a phone: the section starts right under the header (65 px high there, against the 76 px the
     page keeps free), with less air above the ring, and the ring is never taller than the room that is left */
  #offers { scroll-margin-top: -11px; padding-top: 22px; }
  #offers .lead { margin-bottom: 0; }
  #offers .ring { width: min(100%, 400px, max(250px, calc(100svh - 330px))); }
  .sec-strip a { margin-left: 0; }
}

/* ---- every card is a very pale periwinkle with a faint gloss and carries a symbol (cards.py): lighter than any drawing ---- */
@media print { .c-ico { display: none; } }
@media screen {
.t-grey { --c: #f5f9ff; --d: #dbeafe; }
.tinted.tinted.tinted { color: #0b1023; border-color: #dbeafe; background: #f5f9ff;
  background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 34%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 120% at 105% 115%, #eff6ff 0%, rgba(237, 240, 252, 0) 55%), linear-gradient(140deg, #fbfcfe 0%, #f5f9ff 48%, #eff6ff 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -14px 24px -14px rgba(52, 70, 170, .07),
    0 2px 3px rgba(40, 60, 150, .05), 0 22px 34px -18px rgba(52, 70, 170, .15); }
.tinted.tinted.tinted:hover { border-color: #a9b9f0; }
.tinted > .c-ico, .tinted > summary > .c-ico, .tinted > .tl-head > .c-ico { box-shadow: inset 0 1px 0 #fff, 0 6px 12px -5px rgba(52, 70, 170, .22); }
.tinted h3, .tinted p, .tinted li, .tinted .more, .tinted b, .tinted .area-sw b, .tinted .time { color: #0b1023; }
.tinted p, .tinted li { color: #1e293b; }
.tinted .tag, .tinted .tl-phase { background: rgba(255, 255, 255, .72); border: 1px solid var(--d); color: #0b1023; }
.tinted .result { color: #0b1023; border-top-color: color-mix(in srgb, var(--d) 55%, #fff); }
.tinted .ico { border-radius: 12px; background: linear-gradient(145deg, #fff, var(--c)); border: 1px solid var(--d); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
.tinted .ico svg { stroke: #0b1023; }
.c-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; font-style: normal;
  background: linear-gradient(145deg, #fff, var(--c, #e2e8f0)); border: 1px solid var(--d, #b4c0d2); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
.c-ico svg { width: 24px; height: 24px; fill: none; stroke: #0b1023; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the symbol stands to the left of the text, as on the four cards of the title page */
.card.has-ico, .host.has-ico, .kid-card, .mask-step.has-ico, .mech.has-ico > summary { position: relative; }
.card.has-ico, .host.has-ico { padding-left: 84px; min-height: 92px; }
.card.has-ico > .c-ico, .host.has-ico > .c-ico { position: absolute; left: 22px; top: 24px; }
.kid-card.kid-card.has-ico { padding-left: 76px; min-height: 76px; border-left-width: 1px; }
.kid-card > .c-ico { position: absolute; left: 16px; top: 16px; }
.kid-card b, .kid-card span, .sx-pr .kid-card span { color: #0b1023; }
.sx-chips > .kid-card.kid-card.has-ico { padding: 62px 15px 14px; border-width: 1px; }
.sx-chips > .kid-card > .c-ico { left: 14px; top: 12px; width: 38px; height: 38px; border-radius: 11px; }
.sx-chips > .kid-card > .c-ico svg { width: 21px; height: 21px; }
.mask-step.has-ico > .c-ico { position: absolute; right: 16px; top: 50px; width: 38px; height: 38px; border-radius: 11px; }
.card.has-ico > h3 > svg { display: none; }
.mask-step.has-ico > .c-ico svg { width: 21px; height: 21px; }
.light.g.tinted.tinted.tinted { border-top: 6px solid #34d399; } .light.y.tinted.tinted.tinted { border-top: 6px solid #f59e0b; } .light.r.tinted.tinted.tinted { border-top: 6px solid #475569; }
.light.tinted h3 { color: #0b1023; } .light.tinted h3::before { display: none; }
.layer.tinted .n { background: rgba(255, 255, 255, .8); border-color: var(--d); color: #0b1023; }
/* questions and answers, folded tables and the chapters of the technical documents: the same light grey, the question mark as symbol */
.faq details, details.fold, details.dd { border-color: #dbeafe; background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 34%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 120% at 105% 115%, #eff6ff 0%, rgba(237, 240, 252, 0) 55%), linear-gradient(140deg, #fbfcfe 0%, #f5f9ff 48%, #eff6ff 100%); }
.faq details > summary { position: relative; padding-left: 50px; }
.faq details > summary::before { content: "?"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-weight: 800; color: #0b1023; background: linear-gradient(145deg, #fff, #f5f9ff); border: 1px solid #dbeafe; box-shadow: inset 0 1px 0 #fff, 0 6px 12px -5px rgba(52, 70, 170, .22); }
.faq details p { color: #1e293b; }
.mech.has-ico > summary { padding-left: 76px; min-height: 76px; }
.mech.has-ico > summary > .c-ico { position: absolute; left: 16px; top: 16px; }
.mech.tinted .mech-in { padding-left: 76px; }
.mech.tinted .mech-pic { background: rgba(255, 255, 255, .6); border-color: color-mix(in srgb, var(--d) 45%, #fff); }
/* cards with a list: the symbol stands in the line of the heading, the list keeps the whole width */
.ico-head { position: relative; }
.ico-head > .c-ico { position: absolute; left: 14px; top: 12px; width: 38px; height: 38px; border-radius: 11px; }
.ico-head > .c-ico svg { width: 21px; height: 21px; }
.ico-head > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 38px; padding-left: 50px; }
.cmp-card.ico-head > .c-ico { left: 24px; top: 22px; }
.tl-head > .c-ico { width: 38px; height: 38px; border-radius: 11px; }
.tl-head > .c-ico svg { width: 21px; height: 21px; }
.area.tinted { border-top-width: 1px; }
.area.tinted .area-sw b { border-top-color: color-mix(in srgb, var(--d) 55%, #fff); }
.tl-card.tinted.tinted.tinted { border-left: 5px solid var(--ph, var(--d)); }
a.card.feat.has-ico { padding-left: 92px; }
a.card.feat.has-ico > .c-ico { left: 30px; top: 30px; }
.steps .card.has-ico::before { left: 84px; }
/* the rows of a table on a phone are cards as well: light grey in place of white */
@media (max-width: 760px) { table.rt tr { border-color: #dbeafe; background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 34%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 120% at 105% 115%, #eff6ff 0%, rgba(237, 240, 252, 0) 55%), linear-gradient(140deg, #fbfcfe 0%, #f5f9ff 48%, #eff6ff 100%); } }
/* the link cards of the four deployment models (a.offer) keep the colour of their part of the ring on every page: they are not touched here */
/* telephony: every tile of Cisco carries the cyan and blue of the Webex mark (no green), what belongs to Microsoft Teams the colours of the Teams mark;
   the ground light and glossy, the tile of the symbol in the full colours with a white symbol */
.card.b-webex.tinted.tinted.tinted, .card.k-aivoice.tinted.tinted.tinted { border-color: var(--cisco-line); background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .34) 34%, rgba(255, 255, 255, 0) 58%), linear-gradient(115deg, var(--cisco-a) 0%, var(--cisco-b) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -14px 24px -14px rgba(24, 64, 169, .11), 0 2px 3px rgba(24, 64, 169, .055), 0 22px 34px -18px rgba(24, 100, 200, .23); }
.card.b-webex.tinted.tinted.tinted:hover { border-color: #1d4ed8; }
.card.b-webex > .c-ico { background: var(--cisco-full); border-color: #3b82f6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 12px -5px rgba(24, 64, 169, .6); }
.card.b-teams.tinted.tinted.tinted { border-color: var(--teams-line); background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .34) 34%, rgba(255, 255, 255, 0) 58%), linear-gradient(115deg, var(--teams-a) 0%, var(--teams-b) 55%, var(--teams-c) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -14px 24px -14px rgba(51, 49, 172, .11), 0 2px 3px rgba(51, 49, 172, .055), 0 22px 34px -18px rgba(70, 64, 190, .23); }
.card.b-teams.tinted.tinted.tinted:hover { border-color: #5e52d5; }
.card.b-teams > .c-ico { background: var(--teams-full); border-color: #4f47c4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 12px -5px rgba(51, 49, 172, .6); }
.card.b-webex > .c-ico svg, .card.b-teams > .c-ico svg { stroke: #fff; }
.card.b-webex .tag { border-color: #b0d9f3; } .card.b-teams .tag { border-color: #c6c3f2; }
/* the scheme of the bottom tiles on tiles that he named: green, blue, pale blue, in the look of the tiles beside the ring */
.s-green { --c: #86efac; --d: #6fe39b; } .s-sky { --c: #bfdbfe; --d: #8fbdfb; } .s-blue { --c: #93c5fd; --d: #62a0f6; } .s-pale { --c: #dbeafe; --d: #b6d3fb; }
.tinted.tinted.tinted.s-green, .tinted.tinted.tinted.s-sky, .tinted.tinted.tinted.s-blue, .tinted.tinted.tinted.s-pale { background: var(--c);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff));
  border-color: color-mix(in srgb, var(--d) 55%, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
.tinted.tinted.tinted.s-green:hover, .tinted.tinted.tinted.s-sky:hover, .tinted.tinted.tinted.s-blue:hover, .tinted.tinted.tinted.s-pale:hover { border-color: var(--d); }
.s-green > .c-ico, .s-sky > .c-ico, .s-blue > .c-ico, .s-pale > .c-ico, .mech.s-green > summary > .c-ico, .mech.s-sky > summary > .c-ico, .mech.s-blue > summary > .c-ico, .mech.s-pale > summary > .c-ico { background: linear-gradient(145deg, #fff, var(--c)); border-color: var(--d); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
/* project cards: the line around the label shows the category (AI, AI and voice, voice); the tile of the symbol has a colour of
   its own for every symbol (the same symbol would get the same colour), with a white symbol. Voice keeps the colours of Cisco. */
.card.k-voice > .c-ico { background: var(--cisco-full); border-color: #3b82f6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 12px -5px rgba(24, 64, 169, .6); }
.card.tile-1 > .c-ico { background: linear-gradient(135deg, #3b82f6 0%, #0b1023 100%); border-color: #22d3ee; }
.card.tile-2 > .c-ico { background: linear-gradient(135deg, #2dd4bf 0%, #0f766e 100%); border-color: #0d9488; }
.card.tile-3 > .c-ico { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); border-color: #7c3aed; }
.card.tile-4 > .c-ico { background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%); border-color: #d97706; }
.card.tile-5 > .c-ico { background: linear-gradient(135deg, #34d399 0%, #0b1023 100%); border-color: #0b1023; }
.card[class*=" tile-"] > .c-ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 12px -5px rgba(15, 23, 42, .55); }
.card[class*=" tile-"] > .c-ico svg, .card.k-voice > .c-ico svg { stroke: #fff; }
.card.k-ai .tag { border: 1.5px solid #1e40af; } .card.k-aivoice .tag { border: 1.5px solid #14b8a6; } .card.k-voice .tag { border: 1.5px solid #b0d9f3; }
/* the rows that open the five parts of a company: the scheme of the tiles beside the ring, row and symbol tile as on those tiles */
.area-title .g-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--d, #8fbdfb);
  background: linear-gradient(145deg, #fff, var(--c, #bfdbfe)); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -4px rgba(15, 23, 42, .4); }
.area-title .g-ico svg { width: 21px; height: 21px; fill: none; stroke: #0b1023; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
details.area-group.row-card:not([open]) { padding: 12px 16px; background: var(--c);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff));
  border-color: color-mix(in srgb, var(--d) 55%, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 24px -18px rgba(15, 23, 42, .3); }
details.area-group.row-card:not([open]):hover { border-color: var(--d); }
/* the cards inside an opened part: a very light tone towards the colour of that part (its dot), as bright as the other cards */
.area-group .area.tinted.tinted.tinted { border-color: color-mix(in srgb, var(--g) 24%, #fff);
  background: radial-gradient(130% 90% at 12% -10%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 34%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(140deg, color-mix(in srgb, var(--g) 4%, #fff) 0%, color-mix(in srgb, var(--g) 9%, #fff) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), 0 2px 3px color-mix(in srgb, var(--g) 6%, transparent), 0 22px 34px -18px color-mix(in srgb, var(--g) 22%, transparent); }
.area-group .area.tinted.tinted.tinted:hover { border-color: color-mix(in srgb, var(--g) 55%, #fff); }
.area-group .area.tinted > .c-ico { background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--g) 16%, #fff)); border-color: color-mix(in srgb, var(--g) 34%, #fff); }
.area-group .area.tinted .area-sw b { border-top-color: color-mix(in srgb, var(--g) 24%, #fff); }
details.area-group.row-card > summary.area-title { margin-bottom: 0; } details.area-group.row-card[open] > summary.area-title { margin-bottom: 12px; }
@media (max-width: 560px) {
  .card.has-ico { padding-left: 22px; padding-top: 80px; }
  .card.has-ico > .c-ico { top: 22px; }
  .steps .card.has-ico { padding-top: 80px; } .steps .card.has-ico::before { left: 80px; top: 28px; }
  a.card.feat.has-ico { padding-left: 30px; padding-top: 88px; } a.card.feat.has-ico > .c-ico { left: 30px; top: 28px; }
  .mech.tinted .mech-in { padding-left: 20px; }
}
}

/* ---- readability.py: the form opens on a tap, folds for long pages, larger small text ---- */
/* the jump to the contact section ends exactly under the menu bar (65 px), without the strip of the section above */
#contact { scroll-margin-top: -11px; }
details.contact-fold { width: 100%; margin-top: 26px; text-align: center; }
details.contact-fold > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
details.contact-fold > summary::-webkit-details-marker { display: none; }
details.contact-fold[open] > summary { display: none; }
details.contact-fold > .contact-form { text-align: left; margin-top: 0; }
.page-hero .tel-chips.jump { margin-top: 22px; }
.tel-chips.jump a { font-size: .875rem; }
details.hub-fold { display: none; }
@media (max-width: 760px) {
  details.hub-fold { display: block; }
  details.hub-fold > summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 2px solid var(--line); border-radius: 12px;
    background: #fff; font-weight: 800; color: #0b1023; cursor: pointer; list-style: none; }
  details.hub-fold > summary::-webkit-details-marker { display: none; }
  details.hub-fold > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; font-weight: 800; }
  details.hub-fold[open] > summary::after { content: "\2212"; }
  details.hub-fold[open] > summary { margin-bottom: 12px; }
  details.hub-fold > summary:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
}
/* running text: at least 15 px */
.note, p.note { font-size: .9375rem; }
.tl-why, .tl-human { font-size: 1rem; }
.area ul { font-size: 1rem; }
details.area-group > summary .area-names { font-size: 1rem; }
.contact-form label { font-size: 1rem; }
.who-key { font-size: 1rem; }
.uc-legend { font-size: 1rem; }
.trust span small { font-size: max(.5em, .8125rem); }
/* drawings: the second lines at least 15 px, short labels in narrow boxes at least 14 px */
.wp small { font-size: 1rem; }
.ai-sub span, .flow .step span { font-size: 1rem; }
.orch-n { font-size: 1rem; } .orch-n small { font-size: .875rem; }
.hub-m .b small, .hub-m .f { font-size: 1rem; }
.node small { font-size: .875rem; }
.wp-link { font-size: .875rem; }
.mp-to span { font-size: .875rem; }
.mtr-screen small { font-size: .875rem; }
/* chips: at least 14 px */
.area-sw span, .tl-sys span, .uc-with span { font-size: .875rem; }

/* ---- landing_cards.py: people in their own colour; no box in a box of the same colour ---- */
.wp.u, .hub-m .u, .mp.u, .node.c-office, .uc-legend i.c-office { background: #edebfb; border-color: #c6c3f2; }
.hub-team { fill: #edebfb; stroke: #c6c3f2; }
.uc-human, .tl-human { background: #edebfb; border-color: #c6c3f2; color: #0b1023; }
.uc-human svg, .tl-human svg, .node.c-office svg { stroke: #0b1023; }
/* managed by AWS or by the provider: the stronger blue, so that it stands out from the light blue of the cloud */
.wp.mgd { background: #93c5fd; border-color: #3b82f6; }
.who td.aws span, .who-key .aws::before { background: #93c5fd; border-color: #62a0f6; }
/* chips of Cisco and Microsoft Teams: white, with the line of the brand */
.b-chip.b-webex, .b-chip.b-teams { background: #fff; }
/* small pictures and drawings: a white ground under coloured boxes */
.mech.tinted .mech-pic { background: #fff; }
.mtr-screen { background: #fff; }
.mtr-pic .mtr-room .mtr-dev span { background: #fff; }
.bo .area.op, .bo .bx.f, .bo .both, .hsb .bx.f, .store li, .bld .port, .mask-step .where.out { background: #fff; }
.hsb.cf, .bo { background: #fff; }
body .ha .hsb, body .ha .hsb.cf { background: #fff; }   /* the drawing of failover has its own, scoped style in the page */
.sx-side.own .sx-box.gw { background: #fff; }

/* ---- lighting.py: one light from the top left; only the colours of the scheme ---- */
:root { --lit: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 55%); --shadow-rest: 0 1px 2px rgba(15, 23, 42, .06), 6px 14px 26px -16px rgba(15, 23, 42, .30); --shadow-lift: 0 1px 2px rgba(15, 23, 42, .06), 10px 22px 34px -18px rgba(15, 23, 42, .40);
  --cisco-a: #eff6ff; --cisco-b: #dbeafe; --cisco-line: #93c5fd; --cisco-full: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --teams-a: #eff6ff; --teams-b: #dbeafe; --teams-c: #eff6ff; --teams-line: #93c5fd; --teams-full: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
/* the tiles beside the ring and every card in their scheme: light top left, deeper bottom right */
a.offer, .tinted.tinted.tinted.s-green, .tinted.tinted.tinted.s-sky, .tinted.tinted.tinted.s-blue, .tinted.tinted.tinted.s-pale {
  background: var(--lit), linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff) 0%, color-mix(in srgb, var(--c) 62%, #fff) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-rest); }
a.offer:hover, a.offer:focus-visible, .tinted.tinted.tinted.s-green:hover, .tinted.tinted.tinted.s-sky:hover, .tinted.tinted.tinted.s-blue:hover, .tinted.tinted.tinted.s-pale:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-lift); }
/* a card without a scheme: the pale blue, lit the same way */
.tinted.tinted.tinted { background: var(--lit), linear-gradient(135deg, #fbfcfe 0%, #f5f9ff 50%, #eff6ff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-rest); }
/* frames of the drawings and the cards of the five parts of a company */
.wp-zone.own { background: var(--lit), linear-gradient(135deg, #ecfdf5, #d6f8e2); }
.wp-zone.cloud { background: var(--lit), linear-gradient(135deg, #f5f9ff, #dbeafe); }
.wp-zone { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 6px 16px 30px -20px rgba(15, 23, 42, .5); }
.hub, .who-wrap, .sec-strip, .card:not(.tinted) { box-shadow: var(--shadow-rest); }
.area-group .area.tinted.tinted.tinted { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-rest); }
/* icon tiles: light top left already (145 degrees); their shadow falls down and right */
.c-ico, a.offer i, .area-title .g-ico { box-shadow: inset 0 1px 0 #fff, 3px 6px 10px -5px rgba(15, 23, 42, .4); }
/* chips: the pale blue of the scheme with a blue line (Cisco and Microsoft Teams alike) */
.tel-chips a, .tel-chips a.b-webex, .tel-chips a.b-teams { background: linear-gradient(135deg, #fff 0%, #eff6ff 100%); border-color: #93c5fd; box-shadow: 2px 4px 10px -6px rgba(15, 23, 42, .3); }
.b-chip.b-webex, .b-chip.b-teams { background: #fff; border-color: #93c5fd; }
/* the software named in the cards of the five parts of a company: chips of the scheme, not yellow (yellow is for drawings) */
.area-sw span { background: #fff; border-color: #93c5fd; }
/* users: pale blue with a blue line; a person who decides: white with a blue line; the corporate account: green */
.wp.u, .hub-m .u, .mp.u, .node.c-office, .uc-legend i.c-office { background: #dbeafe; border-color: #3b82f6; }
.hub-team { fill: #dbeafe; stroke: #3b82f6; }
.uc-human, .tl-human { background: #fff; border-color: #93c5fd; }
.mp.id { background: #ecfdf5; border-color: #86efac; }

/* language menu (lang_menu.py) */
.site-header details.lang { position: relative; display: block; }
details.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 9px;
  font-size: 0.8125rem; font-weight: 700; color: var(--navy-900); background: var(--sky-200); border: 1px solid var(--sky-200); border-radius: 6px; user-select: none; }
details.lang > summary::-webkit-details-marker { display: none; }
details.lang > summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform .15s; }
details.lang[open] > summary::after { transform: rotate(180deg); }
details.lang > summary:focus-visible { outline: 2px solid var(--sky-300); outline-offset: 2px; }
details.lang .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 160px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; background: var(--navy-800); border: 1px solid rgba(147, 197, 253, .25); border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, .4); }
details.lang .lang-menu a, details.lang .lang-menu span { display: block; padding: 10px 14px; border: 0; border-radius: 6px; font-size: 0.875rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; white-space: nowrap; }
details.lang .lang-menu a { color: #fff; background: transparent; }
details.lang .lang-menu a:hover, details.lang .lang-menu a:focus-visible { background: rgba(147, 197, 253, .14); outline: none; }
details.lang .lang-menu span { color: var(--navy-900); background: var(--sky-200); }
@media (max-width: 430px) { details.lang > summary { padding: 3px 7px; } details.lang .lang-menu a, details.lang .lang-menu span { padding: 11px 14px; } }

/* client reference (testimonial.py) */
.testimonial { max-width: 760px; margin: 28px auto 0; padding: 22px 26px; border-radius: 16px; background: #fff; border: 1px solid #dbeafe;
  border-left: 4px solid #1e40af; box-shadow: 0 12px 24px -18px rgba(15, 23, 42, .3); color: #0b1023; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { margin: 0; font-size: 1.125rem; line-height: 1.55; font-style: italic; }
.testimonial blockquote p::before { content: open-quote; } .testimonial blockquote p::after { content: close-quote; }
html[lang="de"] .testimonial blockquote p { quotes: "\201E" "\201C"; } html[lang="en"] .testimonial blockquote p { quotes: "\201C" "\201D"; }
html[lang="fr"] .testimonial blockquote p { quotes: "\00AB\00A0" "\00A0\00BB"; } html[lang="es"] .testimonial blockquote p { quotes: "\00AB" "\00BB"; }
.testimonial figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 1rem; }
.testimonial .t-note { color: #475569; font-size: .8125rem; }
.ref-band { padding-block: 40px; }
.ref-band .testimonial { margin-top: 0; }

/* ---- landing_colours.py: one colour has two roles here ---- */
/* software outside drawings: the chip of the landing page (white, light blue line) in place of yellow */
div.tl-sys > span, div.pills.sw > span, div.uc-with > span { background: #fff; border-color: #bfdbfe; }
/* the label on the dark feature cards: the light blue of the text on the landing page */
a.card.feat .tag { color: #bfdbfe; }
/* the timeline of one company: join green, work blue, move cyan, leave slate; dark text on the two light colours */
.ph-join { --ph: #34d399; } .ph-work { --ph: #1d4ed8; } .ph-move { --ph: #22d3ee; } .ph-leave { --ph: #475569; }
.ph-join .tl-dot, .ph-join .tl-phase, .ph-move .tl-dot, .ph-move .tl-phase { color: #0b1023; }
.tl::before { background: linear-gradient(#34d399, #1d4ed8 45%, #22d3ee 85%, #475569); }
/* the three lights: green, cyan, slate */
.light.y { border-top-color: #22d3ee; } .light.y.tinted.tinted.tinted { border-top: 6px solid #22d3ee; } .light.y h3 { color: #0b1023; }
/* a requirement met in part, in the comparison tables */
.cx .bsi.part b { background: #eff6ff; border-color: #93c5fd; }
/* a ticked cell: green of the ring with a dark tick */
.tick svg { stroke: #0b1023; }
.pill.z-de { background: #34d399; color: #0b1023; }
/* brand tiles: Cisco in the cyan and blue of the landing page, Microsoft Teams in its blues and navy */
:root { --teams-full: linear-gradient(135deg, #3b82f6 0%, #1e40af 60%, #172554 100%); }
.card.b-teams.tinted.tinted.tinted:hover { border-color: #1e40af; }
.card.b-teams > .c-ico { border-color: #1e40af; }
/* project tiles: the symbol tiles in landing-page colours only */
.card.tile-2 > .c-ico { background: linear-gradient(135deg, #22d3ee 0%, #1e40af 100%); border-color: #22d3ee; }
.card.tile-3 > .c-ico { background: linear-gradient(135deg, #3b82f6 0%, #172554 100%); border-color: #93c5fd; }
.card.tile-4 > .c-ico { background: linear-gradient(135deg, #34d399 0%, #1e40af 100%); border-color: #34d399; }
.card.tile-5 > .c-ico { background: linear-gradient(135deg, #34d399 0%, #172554 100%); border-color: #34d399; }
.card.k-aivoice .tag { border-color: #22d3ee; }