/* Self-hosted fonts (no third-party requests) */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-mono-latin-500-normal.woff2) format("woff2")}
/* Auvia Gateway site, v2.
   Layout: light technical product site. ClickHouse structure (huge centred headline,
   hairline grids, square corners, tile matrices, coloured "deploy" band) in the Elastic
   palette, with animated SVG infrastructure diagrams as the main visual. Single light theme. */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F5F7FA;
  --bg-3: #EEF2F7;
  --ink: #1A1C21;
  --ink-2: #343741;
  --mute: #69707D;
  --faint: #98A2B3;
  --line: #D3DAE6;
  --line-2: #E9EDF3;
  --blue: #006BB4;
  --blue-d: #005C9C;
  --blue-t: #E6F1FA;
  --navy: #1A1C21;
  --teal: #017D73;
  --teal-t: #E6F2F1;
  --pink: #DD0A73;
  --pink-t: #FCE7F1;
  --yellow: #F5A700;
  --yellow-t: #FEF6E5;
  --green: #017D73;
  --red: #BD271E;
  --code: #F5F7FA;
  --code-2: #EEF2F7;
  --code-fg: #343741;
  --code-mute: #69707D;
  --code-k: #006BB4;
  --code-s: #017D73;
  --code-n: #DD0A73;

  --f-head: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, Menlo, Courier, monospace;

  --wrap: 1280px;
  --r: 4px;
  --shadow: 0 1px 2px rgba(28,30,35,.06), 0 10px 30px -12px rgba(16,28,63,.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--navy); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-head); text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
code, pre { font-family: var(--f-mono); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--yellow); }
.lede { font-size: 19px; line-height: 1.55; color: var(--mute); max-width: 64ch; }
.note { font-size: 13px; color: var(--mute); }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: var(--r); font: 600 15px/1 var(--f-body); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-d); color: #fff; }
.btn-ghost { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.link-arrow, .more { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.more { margin-top: 18px; }
.stretch { color: inherit; }
.stretch:hover { color: var(--blue); }
.stretch::after { content: ""; position: absolute; inset: 0; }

/* ---------- Utility bar + header ---------- */
.util { background: var(--navy); color: #C8D2EA; font-size: 13px; }
.util .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.util a { color: #fff; font-weight: 500; }
.util .news { display: flex; gap: 10px; align-items: center; }
.util .news b { font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--yellow); color: var(--navy); padding: 4px 6px; }
@media (max-width: 760px) { .util .news { display: none; } }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top > .wrap { display: flex; align-items: center; gap: 36px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 21px/1 var(--f-head); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand small { font: 500 10.5px/1 var(--f-mono); color: var(--mute); letter-spacing: .1em; text-transform: uppercase; }
.nav { display: flex; gap: 28px; margin-right: auto; align-items: stretch; }
.nav > .dd { position: relative; display: flex; }
.nav > .dd > button, .nav > a.nl { font: 500 15px/1 var(--f-body); color: var(--ink-2); background: none; border: 0; cursor: pointer; padding: 24px 0; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.nav > .dd > button::after, .nav > a.nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav > .dd:hover > button::after, .nav > .dd:focus-within > button::after, .nav > a.nl:hover::after, .nav > a.nl.on::after, .nav > .dd.on > button::after { transform: scaleX(1); }
.nav > .dd > button svg { width: 10px; height: 10px; transition: transform .2s; }
.nav > .dd:hover > button svg, .nav > .dd:focus-within > button svg { transform: rotate(180deg); }
.menu { position: absolute; top: 100%; left: -20px; min-width: 360px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px; display: grid; gap: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.menu.wide { grid-template-columns: repeat(2, minmax(0,1fr)); min-width: 640px; }
.dd:hover .menu, .dd:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.menu a { display: grid; gap: 3px; padding: 12px 14px; color: var(--ink); border-left: 2px solid transparent; }
.menu a:hover { background: var(--bg-2); border-left-color: var(--blue); color: var(--ink); }
.menu a b { font: 600 14.5px/1.3 var(--f-head); }
.menu a span { font-size: 13px; color: var(--mute); line-height: 1.4; }
.top-cta { display: flex; gap: 10px; align-items: center; }
.theme-btn { display: none; }
.menuBtn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; place-items: center; }
.menuBtn svg { width: 20px; height: 20px; }
@media (max-width: 1100px) { .nav { display: none; } .menuBtn { display: grid; } .brand { margin-right: auto; } }
@media (max-width: 560px) { .top > .wrap { gap: 12px; } .top-cta .btn-primary { display: none; } }
#mnav { border-top: 1px solid var(--line); background: var(--bg); }
#mnav .wrap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; padding-block: 14px 22px; max-height: 72vh; overflow-y: auto; }
@media (max-width: 560px) { #mnav .wrap { grid-template-columns: minmax(0,1fr); } }
#mnav h4 { grid-column: 1 / -1; margin-top: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#mnav a { padding: 11px 0; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line-2); }
#mnav .btn { grid-column: 1 / -1; justify-content: center; margin-top: 4px; border-bottom: 0; color: #fff; }

/* ---------- Blueprint background ---------- */
.bp { background-color: var(--bg); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; }

/* ---------- Home hero ---------- */
.hhero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hhero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 20%, transparent 40%, var(--bg) 100%); pointer-events: none; }
.hhero .wrap { position: relative; z-index: 1; padding-block: 80px 64px; display: grid; justify-items: center; text-align: center; }
.hhero h1 { margin-top: 22px; font: 600 clamp(40px, 6.4vw, 84px)/1.04 var(--f-head); letter-spacing: -.025em; max-width: 13ch; }
.hhero h1 em { font-style: normal; color: var(--blue); }
.hhero .lede { margin-top: 24px; max-width: 58ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hhero .hero-ctas { justify-content: center; }
.announce { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 48px; width: 100%; max-width: 980px; text-align: left; }
@media (max-width: 760px) { .announce { grid-template-columns: minmax(0,1fr); } }
.announce a { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; transition: border-color .15s; }
.announce a:hover { border-color: var(--ink); color: var(--ink-2); }
.announce i { width: 44px; height: 44px; display: grid; place-items: center; background: var(--c, var(--blue-t)); font: 600 11px/1 var(--f-mono); color: var(--ink); font-style: normal; }
.announce b { color: var(--ink); }
.announce span.go { color: var(--ink); font-size: 18px; }

/* ---------- Diagram panel ---------- */
.diagram { position: relative; background: var(--bg); border: 1px solid var(--line); }
.diagram-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.diagram-head b { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font: 500 12px/1 var(--f-mono); color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; height: 3px; background: var(--c); display: inline-block; }
.dscroll { overflow-x: auto; }
.dscroll svg { display: block; width: 100%; min-width: 820px; height: auto; }
.diagram-foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.diagram-foot button { font: 600 13px/1 var(--f-body); color: var(--blue); background: none; border: 0; cursor: pointer; padding: 0; }
.hero-diagram { width: 100%; margin-top: 56px; text-align: left; }

/* SVG diagram vocabulary */
.dg text { font-family: var(--f-mono); fill: var(--ink-2); }
.dg .t { font: 600 14px var(--f-head); fill: var(--ink); }
.dg .s { font-size: 11px; fill: var(--mute); }
.dg .lbl { font-size: 11px; letter-spacing: .08em; fill: var(--faint); }
.dg .box { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.dg .box.strong { stroke: var(--ink); stroke-width: 1.5; }
.dg .chip { fill: var(--bg-2); stroke: var(--line); }
.dg .chip.hl { fill: var(--yellow-t); stroke: var(--yellow); }
.dg .chip.bl { fill: var(--blue-t); stroke: var(--blue); }
.dg .chip.dim { fill: var(--bg); stroke: var(--line-2); }
.dg .wire { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dg .wire.mt { stroke: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.dg .wire.dlr { stroke: color-mix(in srgb, var(--teal) 50%, var(--line)); stroke-dasharray: 4 4; }
.dg .wire.mo { stroke: color-mix(in srgb, var(--pink) 45%, var(--line)); stroke-dasharray: 2 4; }
.dg .wire.data { stroke: var(--line); stroke-dasharray: 3 3; }
.dg .flow { stroke-dasharray: 6 10; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.dg .pk { r: 4.5; }
.dg .pk.mt { fill: var(--blue); }
.dg .pk.dlr { fill: var(--teal); }
.dg .pk.mo { fill: var(--pink); }
.dg .pk.lk { fill: var(--yellow); stroke: var(--ink); stroke-width: 1; }
.dg .arrow { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.dg .arrow.back { stroke-dasharray: 5 4; }
.dg .arrow.ok { stroke: var(--teal); }
.dg .lane { stroke: var(--line); stroke-dasharray: 3 5; }
.dg .tag { fill: var(--yellow); }
.dg .tagt { font-size: 11px; fill: var(--navy); font-weight: 600; }
.dg .stepn { fill: var(--ink); }
.dg .stepnt { font-size: 10px; fill: #fff; font-weight: 600; }
.seq.play .st { animation: seqin .45s ease both; animation-delay: calc(var(--i) * 420ms); }
@keyframes seqin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.seq .st { transform-box: fill-box; }

/* ---------- Page hero ---------- */
.phero { border-bottom: 1px solid var(--line); }
.phero .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-block: 48px 64px; }
.phero.solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 0 auto; }
@media (max-width: 1000px) { .phero .wrap { grid-template-columns: minmax(0,1fr); gap: 36px; } }
.phero h1 { margin-top: 16px; font: 600 clamp(34px, 4.2vw, 54px)/1.08 var(--f-head); letter-spacing: -.02em; }
.phero .lede { margin-top: 20px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font: 500 12px/1 var(--f-mono); color: var(--faint); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--blue); }
.kpis { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; border-left: 1px solid var(--line); }
.kpis span { font: 500 12px/1 var(--f-mono); color: var(--ink-2); padding: 9px 12px; border: 1px solid var(--line); border-left: 0; background: var(--bg); }
canvas#net, canvas#net2 { display: none; }

/* ---------- Sections ---------- */
section.band { padding-block: 104px; position: relative; }
.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { display: grid; gap: 16px; max-width: 820px; margin-bottom: 48px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head h2 { font: 600 clamp(30px, 3.6vw, 46px)/1.1 var(--f-head); letter-spacing: -.02em; }
.rv.in { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Standards strip (ClickHouse "trusted by" row, as protocols) */
.std { border-bottom: 1px solid var(--line); background: var(--bg); }
.std .wrap { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 32px; align-items: center; padding-block: 26px; }
@media (max-width: 760px) { .std .wrap { grid-template-columns: minmax(0,1fr); gap: 14px; } }
.std b { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.std ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.std li { font: 600 15px/1 var(--f-mono); color: var(--ink-2); letter-spacing: -.01em; }

/* Tile matrix ("Why …") */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: minmax(0,1fr); } }
.tile { position: relative; padding: 30px 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); display: grid; gap: 10px; align-content: start; transition: background .2s; min-width: 0; }
.tile:hover { background: var(--bg-2); }
.tile svg { width: 32px; height: 32px; color: var(--blue); }
.tile h3 { font: 600 19px/1.25 var(--f-head); letter-spacing: -.01em; }
.tile p { font-size: 15px; color: var(--mute); }
.tile .n { font: 500 11px/1 var(--f-mono); color: var(--faint); }
.tile.hl { background: var(--yellow-t); }

/* Cards (subpages) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .cards, .cards.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .cards, .cards.c2, .cards.c4 { grid-template-columns: minmax(0,1fr); } }
.card { position: relative; padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); display: grid; gap: 10px; align-content: start; transition: background .2s; min-width: 0; }
.card:hover { background: var(--bg-2); }
.card .k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.card h3 { font: 600 19px/1.25 var(--f-head); }
.card p { font-size: 15px; color: var(--mute); }

/* Segment tabs ("Built for every …") */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { position: relative; background: none; border: 0; padding: 16px 22px 18px 0; margin-right: 22px; cursor: pointer; text-align: left; display: grid; gap: 4px; color: var(--mute); font: 400 14px/1.35 var(--f-body); white-space: nowrap; }
.tab b { font: 600 18px/1.2 var(--f-head); color: var(--faint); transition: color .2s; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(var(--prog, 0)); transform-origin: left; }
.tab[aria-selected="true"] b, .tab:hover b { color: var(--ink); }
.flow { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; margin-top: 40px; align-items: center; }
@media (max-width: 1000px) { .flow { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.flow-copy h3 { font: 600 30px/1.1 var(--f-head); letter-spacing: -.02em; }
.flow-copy p { margin: 14px 0 22px; color: var(--mute); max-width: 50ch; }
.flow-media { min-width: 0; }
.flow.show .flow-copy > * { animation: rise .5s ease both; }
.flow.show .flow-media { animation: rise .6s ease both; animation-delay: 80ms; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.ticks li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; background: var(--blue); }

/* Screens */
.frame { position: relative; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.url { flex: 1; min-width: 0; font: 11.5px/1 var(--f-mono); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { width: 100%; }
.shots-nav { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-bottom: 0; background: var(--bg); width: max-content; max-width: 100%; }
.shots-nav button { font: 500 13px/1 var(--f-mono); padding: 12px 16px; background: none; border: 0; border-right: 1px solid var(--line); color: var(--mute); cursor: pointer; }
.shots-nav button:last-child { border-right: 0; }
.shots-nav button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.shots img { transition: opacity .25s; }
.shots img.swap { opacity: .2; }

/* Split: text + media */
.split2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.split2.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split2.rev > :first-child { order: 2; }
@media (max-width: 1000px) { .split2, .split2.rev { grid-template-columns: minmax(0,1fr); gap: 28px; } .split2.rev > :first-child { order: 0; } }
.split2 h2 { font: 600 clamp(26px, 3vw, 40px)/1.1 var(--f-head); letter-spacing: -.025em; }
.split2 p { margin: 14px 0 22px; color: var(--mute); max-width: 56ch; }
.stackband + .stackband { margin-top: 96px; }

/* Feature matrix (Melrose/Gatum-style catalogue) */
.fm { display: grid; grid-template-columns: 260px minmax(0,1fr); border: 1px solid var(--line); background: var(--bg); }
@media (max-width: 860px) { .fm { grid-template-columns: minmax(0,1fr); } }
.fm-nav { border-right: 1px solid var(--line); display: grid; align-content: start; }
@media (max-width: 860px) { .fm-nav { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; overflow-x: auto; } }
.fm-nav button { text-align: left; padding: 15px 18px; background: none; border: 0; border-bottom: 1px solid var(--line-2); font: 600 15px/1.2 var(--f-head); color: var(--mute); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.fm-nav button span { font: 500 11px/1 var(--f-mono); color: var(--faint); align-self: center; }
.fm-nav button[aria-selected="true"] { background: var(--bg-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
.fm-panel { padding: 28px 30px; min-width: 0; }
.fm-panel h3 { font: 600 22px/1.2 var(--f-head); }
.fm-panel > p { margin-top: 8px; color: var(--mute); }
.fm-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; }
@media (max-width: 620px) { .fm-list { grid-template-columns: minmax(0,1fr); } }
.fm-list li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line-2); position: relative; font-size: 15px; color: var(--ink-2); }
.fm-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* Deploy band (ClickHouse yellow band, Elastic yellow) */
.deployband { background: var(--yellow-t); border-block: 1px solid color-mix(in srgb, var(--yellow) 55%, var(--line)); }
.deploy { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); margin-bottom: 40px; }
@media (max-width: 900px) { .deploy { grid-template-columns: minmax(0,1fr); } }
.dcard { position: relative; padding: 28px 26px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--bg); display: grid; gap: 10px; align-content: start; }
.dcard .k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dcard h3 { font: 600 24px/1.15 var(--f-head); letter-spacing: -.02em; }
.dcard p { font-size: 15px; color: var(--mute); }

/* Numbers */
.limits { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 860px) { .limits { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lim { padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.lim strong { display: block; font: 600 clamp(34px, 4vw, 54px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lim strong small { font-size: .4em; letter-spacing: 0; color: var(--mute); margin-left: 2px; }
.lim > span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--mute); }
.lim > em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; line-height: 1.45; color: var(--mute); opacity: .85; }

/* Code */
.term { background: var(--code); color: var(--code-fg); border: 1px solid var(--code-2); min-width: 0; }
.term-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; background: var(--code-2); }
.term-bar .lbl { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--code-mute); }
.term pre { margin: 0; padding: 16px 18px; font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
.term .k { color: var(--code-k); } .term .s { color: var(--code-s); } .term .m { color: var(--code-n); } .term .c { color: var(--code-mute); }
.copy { font: 600 12px/1 var(--f-body); color: #1A1C21; background: var(--code-s); border: 0; padding: 8px 12px; cursor: pointer; white-space: nowrap; }

/* Tables */
.tbl { overflow-x: auto; border: 1px solid var(--line); background: var(--bg); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.tbl th, .tbl td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl th { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.tbl td:first-child { font-weight: 600; color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }

/* FAQ */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
@media (max-width: 980px) { .split { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 16px; align-items: center; padding: 22px 0; font: 600 18px/1.35 var(--f-head); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--f-mono); color: var(--ink); text-align: center; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 40px 24px 0; color: var(--mute); max-width: 72ch; }

/* Related */
.related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .related { grid-template-columns: minmax(0,1fr); } }
.related a { display: grid; gap: 8px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); transition: background .2s; }
.related a:hover { background: var(--bg-2); color: var(--ink); }
.related b { font: 600 18px/1.3 var(--f-head); }
.related span { font-size: 15px; color: var(--mute); }
.related em { font-style: normal; font: 500 12px/1 var(--f-mono); color: var(--blue); }

/* CTA band */
.cta { background: var(--blue); color: #fff; }
.cta .wrap { padding-block: 88px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 56px; align-items: center; }
@media (max-width: 980px) { .cta .wrap { grid-template-columns: minmax(0,1fr); } }
.cta h2 { color: #fff; font: 600 clamp(32px, 4vw, 52px)/1.08 var(--f-head); letter-spacing: -.02em; }
.cta p { margin-top: 18px; color: #DCE8FB; max-width: 54ch; font-size: 17px; }
.cta .eyebrow { color: #fff; }
.paths { display: grid; border-top: 1px solid rgba(255,255,255,.35); }
.path { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; transition: padding .2s; }
.path:hover { color: #fff; padding-left: 8px; }
.path strong { display: block; font: 600 18px/1.3 var(--f-head); }
.path span { display: block; margin-top: 2px; font-size: 14px; color: #DCE8FB; }
.path .arr { font-size: 20px; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.mail code { user-select: all; font-size: 14px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); padding: 9px 11px; }

/* Footer */
footer { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--mute); }
footer .wrap { padding-block: 64px 28px; }
.f-grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap: 32px; }
@media (max-width: 980px) { .f-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.f-grid h4 { font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.f-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.f-grid a { color: var(--mute); font-size: 14.5px; }
.f-grid a:hover { color: var(--blue); }
.f-brand { display: grid; gap: 14px; align-content: start; font-size: 14.5px; }
.f-brand code { color: var(--ink); font-size: 13.5px; }
.f-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }

/* Guide */
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
@media (max-width: 1000px) { .guide { grid-template-columns: minmax(0,1fr); } }
.toc { position: sticky; top: 130px; align-self: start; border-left: 1px solid var(--ink); padding-left: 18px; display: grid; gap: 10px; font-size: 14.5px; }
@media (max-width: 1000px) { .toc { position: static; } }
.toc b { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.toc a { color: var(--ink-2); }
.prose { max-width: 760px; }
.prose h2 { font: 600 30px/1.2 var(--f-head); letter-spacing: -.02em; margin: 56px 0 14px; }
.prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.checklist { border: 1px solid var(--line); background: var(--bg); }
.checklist label { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.checklist label:hover { background: var(--bg-2); }
.checklist input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); }
.checklist b { display: block; color: var(--ink); font-weight: 600; }
.checklist span { font-size: 14.5px; color: var(--mute); }
.score { padding: 16px 20px; background: var(--yellow-t); font-weight: 600; color: var(--ink); }

/* Contact */
.formwrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: start; }
@media (max-width: 1000px) { .formwrap { grid-template-columns: minmax(0,1fr); } }
form.demo { position: relative; background: var(--bg); border: 1px solid var(--line); padding: 32px; display: grid; gap: 20px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 620px) { .row2 { grid-template-columns: minmax(0,1fr); } }
.fld { display: grid; gap: 6px; }
.fld > label, fieldset legend { font: 600 14px/1.3 var(--f-body); color: var(--ink); }
.fld input, .fld select, .fld textarea { font: 400 15px/1.4 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px; width: 100%; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); font-size: 14.5px; cursor: pointer; }
.opts label:has(input:checked) { border-color: var(--blue); background: var(--blue-t); color: var(--ink); }
.opts input { accent-color: var(--blue); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.result { border: 1px solid var(--teal); background: var(--teal-t); padding: 18px 20px; display: grid; gap: 10px; }
#formResult { border-color: var(--yellow); background: var(--yellow-t); }
.result pre { margin: 0; white-space: pre-wrap; font-size: 13px; background: var(--bg); border: 1px solid var(--line); padding: 14px; color: var(--ink-2); }
.result .btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.side-card { border: 1px solid var(--line); background: var(--bg-2); padding: 28px; display: grid; gap: 14px; }
.side-card h3 { font: 600 19px/1.3 var(--f-head); }
.side-card p, .side-card li { font-size: 15px; color: var(--mute); }
.side-card ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }

/* AI console mock */
.aimock { background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.aimock .ai-body { padding: 22px; display: grid; gap: 14px; min-height: 470px; align-content: start; }
.bub { max-width: 86%; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.bub.me { justify-self: end; background: var(--blue); color: #fff; }
.bub.ai { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.toolrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { font: 500 11.5px/1 var(--f-mono); color: var(--mute); border: 1px dashed var(--line); padding: 6px 8px; display: inline-flex; gap: 6px; align-items: center; }
.tool i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.mini-tbl { width: 100%; border-collapse: collapse; font: 12.5px/1.3 var(--f-mono); margin-top: 8px; }
.mini-tbl th, .mini-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mini-tbl th { color: var(--mute); font-weight: 500; }
.mini-tbl td.n, .mini-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.confirm { border: 1px solid var(--yellow); background: var(--yellow-t); padding: 14px; display: grid; gap: 10px; font-size: 14px; }
.confirm .btns { display: flex; gap: 8px; }
.confirm button { font: 600 13px/1 var(--f-body); padding: 9px 14px; cursor: default; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.confirm button.p { background: var(--blue); color: #fff; border-color: var(--blue); }
.mask { font: 500 12px/1 var(--f-mono); background: var(--pink-t); color: var(--pink); padding: 2px 5px; }
.aimock [data-step] { transition: opacity .4s ease, transform .4s ease; }
.aimock.play [data-step].wait { opacity: 0; transform: translateY(8px); }
.ai-foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--mute); }
.ai-foot .inp { flex: 1; border: 1px solid var(--line); padding: 10px 12px; color: var(--mute); background: var(--bg-2); }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(16,28,63,.86); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); cursor: zoom-out; animation: fade .2s ease; }
.lightbox img { max-height: 92vh; width: auto; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Wide diagrams scroll inside their panel instead of widening grid columns */
.hhero .wrap { grid-template-columns: minmax(0, 1fr); }
.hero-diagram, .diagram, .dscroll, .flow-media, .split2 > *, .phero .wrap > * { min-width: 0; max-width: 100%; }

/* Platform menu: one product, capabilities listed under it */
.menu .lead { grid-column: 1 / -1; background: var(--bg-2); border-left-color: var(--blue); margin-bottom: 4px; }
.menu .cap-h { grid-column: 1 / -1; padding: 10px 14px 4px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }


/* ================= OUI layer =================
   Components styled like the Auvia operator panel (OUI, the Elastic UI fork):
   EuiPanel, EuiButton, EuiBreadcrumbs, EuiTabs, EuiBadge, EuiCallOut, EuiStat,
   EuiAccordion, EuiCodeBlock, EuiBasicTable. Page structure is unchanged. */
:root {
  --r-s: 4px; --r-m: 6px;
  --sh-s: 0 .8px .8px rgba(0,0,0,.04), 0 2.3px 2px rgba(0,0,0,.03);
  --sh-m: 0 .9px 4px -1px rgba(0,0,0,.08), 0 2.6px 8px -1px rgba(0,0,0,.06), 0 5.7px 12px -1px rgba(0,0,0,.05), 0 15px 15px -1px rgba(0,0,0,.04);
  --shadow: var(--sh-m);
}

/* Type (EuiTitle / EuiText) */
body { font-size: 16px; color: var(--ink-2); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
.hhero h1 { font: 700 clamp(36px, 4.6vw, 58px)/1.1 var(--f-head); letter-spacing: -.025em; max-width: 18ch; }
.hhero h1 em { color: var(--blue); }
.sec-head h2 { font: 700 clamp(28px, 3vw, 38px)/1.2 var(--f-head); letter-spacing: -.02em; }
.phero h1 { font: 700 clamp(30px, 3.6vw, 44px)/1.15 var(--f-head); letter-spacing: -.02em; }
.split2 h2 { font: 700 clamp(24px, 2.4vw, 30px)/1.25 var(--f-head); }
.flow-copy h3 { font: 700 24px/1.25 var(--f-head); }
.tile h3, .card h3, .dcard h3, .related b, .fm-panel h3, .side-card h3 { font-family: var(--f-head); font-weight: 600; }
.tile h3, .card h3 { font-size: 17px; }
.cta h2 { font: 700 clamp(28px, 3.2vw, 38px)/1.2 var(--f-head); color: var(--ink); }
.lede { color: var(--mute); }

/* EuiBadge as section label */
.eyebrow { font: 500 12px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); background: #E9EDF3; padding: 5px 8px; border-radius: 2px; gap: 6px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; }

/* Section heads centred (current structure) */
.sec-head { margin-inline: auto; text-align: center; justify-items: center; }
.split .sec-head, .gal-head .sec-head { margin-inline: 0; text-align: left; justify-items: start; }

/* EuiButton */
.btn { height: 40px; padding: 0 16px; border-radius: var(--r-s); border: 1px solid transparent; font: 500 15px/1 var(--f-body); gap: 8px; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.btn-ghost { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn-ghost:hover { background: var(--blue-t); color: var(--blue); border-color: var(--blue); }
.more, .link-arrow { font: 500 15px/1.2 var(--f-body); color: var(--blue); }
.more:hover, .link-arrow:hover { text-decoration: underline; }

/* Header (EuiHeader) and announcement row */
.util { background: var(--bg-2); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.util a { color: var(--blue); }
.util .news b { background: var(--pink); color: #fff; border-radius: 2px; font: 500 11px/1 var(--f-body); padding: 4px 6px; letter-spacing: 0; text-transform: none; }
body::before { background: var(--bg-2); }
.top { background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-s); }
.nav > .dd > button, .nav > a.nl { font: 500 14.5px/1 var(--f-body); color: var(--ink-2); }
.nav > .dd > button::after, .nav > a.nl::after { background: var(--blue); height: 2px; }
.menu { border-radius: var(--r-m); box-shadow: var(--sh-m); border-color: var(--line); padding: 8px; }
.menu a { border-left: 0; border-radius: var(--r-s); }
.menu a:hover { background: var(--bg-2); }
.menu a b { font: 600 14px/1.3 var(--f-body); color: var(--ink); }
.menu .lead { background: var(--blue-t); }
.menu .lead b { color: var(--blue); }
.menu .cap-h { font: 600 11px/1 var(--f-body); letter-spacing: .04em; color: var(--mute); }
.menuBtn { border-radius: var(--r-s); }

/* EuiBreadcrumbs (arrow pills, as in the panel header) */
.crumbs { gap: 0; font: 500 13px/1 var(--f-body); color: var(--ink-2); margin-bottom: 22px; }
.crumbs a, .crumbs span[aria-current] { display: inline-flex; align-items: center; height: 28px; padding: 0 16px 0 20px; background: #E9EDF3; color: var(--ink-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-right: -6px; }
.crumbs a:first-child { padding-left: 12px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.crumbs a:hover { background: #DDE3EC; color: var(--ink); }
.crumbs span[aria-current] { background: #CCE4F5; color: var(--blue); }
.crumbs span[aria-hidden] { display: none; }

/* Hero (current structure: text left, callouts right, diagram below) */
.bp { background-image: none; }
.hhero { background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--bg-2) 100%); }
.hhero::after { display: none; }
.hhero .wrap { justify-items: stretch; text-align: left; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px; align-items: end; padding-block: 64px 72px; }
.hhero .wrap > .eyebrow, .hhero .wrap > h1, .hhero .wrap > .lede, .hhero .wrap > .hero-ctas { grid-column: 1; }
.hhero .wrap > .eyebrow { justify-self: start; }
.hhero .hero-ctas { justify-content: flex-start; }
.hhero .announce { grid-column: 2; grid-row: 1 / span 4; grid-template-columns: minmax(0,1fr); align-self: end; margin-top: 0; }
.hhero .hero-diagram { grid-column: 1 / -1; }
@media (max-width: 1000px) { .hhero .wrap { grid-template-columns: minmax(0,1fr); } .hhero .announce { grid-column: 1; grid-row: auto; margin-top: 36px; } }
.phero { background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); }

/* EuiCallOut for the announcements */
.announce a { border: 0; border-radius: var(--r-s); background: var(--c, var(--blue-t)); padding: 14px 16px; grid-template-columns: 32px minmax(0,1fr) auto; }
.announce a:hover { filter: brightness(.98); }
.announce i { width: 32px; height: 32px; border-radius: 50%; background: #fff; font: 600 10px/1 var(--f-body); color: var(--ink-2); }
.announce b { color: var(--blue); }
.announce span.go { color: var(--blue); }

/* EuiPanel */
.diagram, .fm, .frame, form.demo, .aimock, .side-card, .checklist, .tbl, .result { border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); background: #fff; overflow: hidden; }
.diagram-head { background: #fff; border-bottom: 1px solid var(--line); }
.diagram-head b { font: 600 14px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.legend { font: 400 12.5px/1 var(--f-body); }
.diagram-foot { background: var(--bg-2); }
.frame { box-shadow: var(--sh-m); }
.frame-bar { background: #fff; border-bottom: 1px solid var(--line); }
.url { font: 400 12px/1 var(--f-body); color: var(--mute); }

/* Grids of EuiCards: separate panels with a gap */
.tiles, .cards, .related, .limits, .deploy { border: 0; gap: 16px; }
.tile, .card, .related a, .lim, .dcard { border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); background: #fff; transition: box-shadow .2s, transform .2s; }
.tile:hover, .card:hover, .related a:hover, .dcard:hover { background: #fff; box-shadow: var(--sh-m); transform: translateY(-2px); }
.tile.hl { background: var(--yellow-t); border-color: #F7D88F; }
.tile svg, .card svg { color: var(--blue); }
.card .k, .dcard .k { font: 600 12px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--blue); }
.related em { font: 500 14px/1 var(--f-body); }

/* EuiTabs */
.tabs { display: flex; gap: 0; border: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { margin: 0 24px 0 0; padding: 12px 2px 14px; border: 0; background: none; white-space: nowrap; box-shadow: none; }
.tab b { font: 600 16px/1.2 var(--f-body); color: var(--ink-2); }
.tab[aria-selected="true"] { background: none; box-shadow: none; }
.tab[aria-selected="true"] b { color: var(--blue); }
.tab::after { height: 2px; background: var(--blue); bottom: -1px; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Feature matrix as EuiSideNav + panel */
.fm-nav { background: var(--bg-2); border-right: 1px solid var(--line); padding: 8px; gap: 2px; }
.fm-nav button { border: 0; border-radius: var(--r-s); font: 500 14.5px/1.2 var(--f-body); color: var(--ink-2); padding: 10px 12px; }
.fm-nav button span { font: 500 12px/1 var(--f-body); background: #E9EDF3; color: var(--ink-2); padding: 3px 6px; border-radius: 2px; }
.fm-nav button[aria-selected="true"] { background: var(--blue-t); color: var(--blue); box-shadow: none; font-weight: 600; }
.fm-nav button[aria-selected="true"] span { background: var(--blue); color: #fff; }
.fm-list li { border-bottom-color: var(--line-2); }
.fm-list li::before { border-color: var(--teal); }

/* EuiStat */
.lim strong { font: 700 clamp(32px, 3.6vw, 44px)/1 var(--f-body); letter-spacing: -.02em; }
.lim:nth-child(4n+1) strong { color: var(--blue); }
.lim:nth-child(4n+2) strong { color: var(--teal); }
.lim:nth-child(4n+3) strong { color: var(--pink); }
.lim:nth-child(4n+4) strong { color: #B57500; }
.lim strong small { color: inherit; opacity: .7; }
.lim > span { font-size: 14px; }

/* EuiAccordion FAQ */
.faq { border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); background: #fff; padding: 0 20px; }
.faq summary { grid-template-columns: 20px minmax(0,1fr); gap: 10px; font: 600 16px/1.4 var(--f-body); padding: 18px 0; }
.faq summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .2s; justify-self: center; }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq summary::after { display: none; }
.faq .ans { padding: 0 0 20px 30px; }
.faq details:last-child { border-bottom: 0; }

/* EuiCodeBlock (light) */
.term { background: var(--code); color: var(--code-fg); border: 1px solid var(--line); border-radius: var(--r-m); }
.term-bar { background: #fff; border-bottom: 1px solid var(--line); }
.term-bar .lbl { font: 600 13px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.copy { background: none; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-s); font: 500 13px/1 var(--f-body); padding: 7px 10px; }
.copy:hover { background: var(--blue-t); }
.caret { background: var(--blue); }

/* EuiButtonGroup for the screen switcher */
.shots-nav { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; margin-bottom: 12px; box-shadow: none; }
.shots-nav button { font: 500 14px/1 var(--f-body); color: var(--blue); border-right: 1px solid var(--line); padding: 10px 14px; }
.shots-nav button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* EuiBadge for hero chips */
.kpis { border: 0; gap: 6px; }
.kpis span { font: 500 12px/1 var(--f-body); border: 1px solid var(--line); border-radius: 2px; background: #fff; padding: 5px 8px; }

/* EuiBasicTable */
.tbl th { background: #fff; font: 600 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.tbl td { border-bottom: 1px solid var(--line-2); }
.tbl tr:hover td { background: var(--bg-2); }

/* Deploy band, CTA and footer: light, panel style */
.deployband { background: var(--bg-2); border-color: var(--line); }
.cta { background: var(--blue-t); color: var(--ink-2); border-top: 1px solid #CCE4F5; }
.cta .eyebrow { color: var(--ink-2); background: #fff; }
.cta p { color: var(--mute); }
.paths { border-top: 1px solid #CCE4F5; }
.path { color: var(--ink); border-bottom: 1px solid #CCE4F5; }
.path:hover { color: var(--blue); }
.path strong { font: 600 17px/1.3 var(--f-body); }
.path span { color: var(--mute); }
.path .arr { color: var(--blue); }
.mail code { color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
footer { background: var(--bg-2); color: var(--mute); border-top: 1px solid var(--line); }
.f-grid h4 { font: 600 12px/1 var(--f-body); letter-spacing: .02em; color: var(--ink); text-transform: uppercase; }
.f-grid a { color: var(--ink-2); }
.f-grid a:hover { color: var(--blue); }
.f-brand .brand { color: var(--ink); }

/* Forms (EuiFieldText / EuiCheckableCard) */
.fld input, .fld select, .fld textarea { background: #FBFCFD; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(16,22,26,.02); }
.opts label { border-radius: var(--r-s); background: #fff; }
.result { border-left: 4px solid var(--teal); }
#formResult { border-left-color: var(--yellow); }

/* AI mock as panel conversation */
.bub { border-radius: var(--r-m); }
.bub.ai { background: var(--bg-2); border-color: var(--line); }
.tool { border-radius: 2px; border-style: solid; background: #fff; font-family: var(--f-body); }
.confirm { border-radius: var(--r-m); border-color: #F7D88F; }
.confirm button { border-radius: var(--r-s); }
.mask { border-radius: 2px; }

/* Diagrams in the OUI palette */
.dg text { font-family: var(--f-body); }
.dg .t { font: 600 13.5px var(--f-body); }
.dg .s, .dg .lbl { font-family: var(--f-mono); }
.dg .box, .dg .chip { rx: 4px; }
.dg .chip.hl { fill: var(--yellow-t); stroke: #F7D88F; }
.dg .chip.bl { fill: var(--blue-t); stroke: #9CC6E6; }
.dg .box.strong { stroke: var(--blue); stroke-width: 1.5; }
.dg .stepn { fill: var(--blue); }
.dg .tag { fill: var(--yellow-t); stroke: #F7D88F; }
.dg .tagt { fill: #8A5A00; }
.dg .pk.lk { fill: var(--yellow); stroke: #fff; }

/* ---------- Enterprise additions: three open screens, photos, compliance ---------- */
.hhero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: 48px; }
.hhero .hcopy { grid-column: 1; min-width: 0; display: grid; justify-items: start; }
.hhero .hcopy h1 { margin-top: 18px; }
.hhero .hcopy .lede { margin-top: 20px; }
.hhero .hcopy .announce { grid-column: auto; grid-row: auto; margin-top: 32px; width: 100%; max-width: 560px; }
.hhero .hero-diagram { grid-column: 1 / -1; margin-top: 64px; }
@media (max-width: 1000px) { .hhero .wrap { grid-template-columns: minmax(0,1fr); } }

.screens3 { grid-column: 2; position: relative; min-width: 0; aspect-ratio: 16 / 12; perspective: 1600px; }
@media (max-width: 1000px) { .screens3 { grid-column: 1; margin-top: 40px; } }
.win { position: absolute; width: 82%; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease, filter .9s ease; will-change: transform; }
.win .frame { box-shadow: var(--sh-m); }
.win .wl { position: absolute; left: 14px; bottom: -14px; font: 600 12px/1 var(--f-body); color: #fff; background: var(--blue); padding: 6px 9px; border-radius: 3px; box-shadow: var(--sh-s); }
.win.p0 { transform: translate(0, 0) rotateY(-8deg) rotateX(3deg); z-index: 1; opacity: .72; filter: saturate(.8); }
.win.p1 { transform: translate(9%, 17%) rotateY(-8deg) rotateX(3deg); z-index: 2; opacity: .86; }
.win.p2 { transform: translate(18%, 34%) rotateY(-8deg) rotateX(3deg) scale(1.02); z-index: 3; opacity: 1; }
.win.p2 .frame { box-shadow: 0 20px 50px -18px rgba(0,60,110,.35), var(--sh-m); }
.win.w0 .wl { background: var(--blue); } .win.w1 .wl { background: var(--teal); } .win.w2 .wl { background: var(--pink); }
@media (prefers-reduced-motion: reduce) { .win { transition: none; } }

.photo { margin: 0; position: relative; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-m); background: var(--bg-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; display: block; }
.flow-media .photo img { aspect-ratio: 16 / 10; }

.comp { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 40px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; box-shadow: var(--sh-s); padding: 36px; }
@media (max-width: 900px) { .comp { grid-template-columns: minmax(0,1fr); padding: 24px; } }
.comp-badges { display: grid; gap: 14px; justify-items: center; text-align: center; }
.badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.badges img { height: 44px; width: auto; }
.badges.big img { height: 72px; }
.comp-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
@media (max-width: 900px) { .comp-list { grid-template-columns: minmax(0,1fr); } }
.comp-list h3 { font: 600 17px/1.3 var(--f-body); color: var(--ink); }
.comp-list p { margin-top: 8px; font-size: 15px; color: var(--mute); }

.steps4 { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps4 li { position: relative; padding: 14px 0 14px 48px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.steps4 li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-t); color: var(--blue); font: 600 14px/30px var(--f-body); text-align: center; }
.steps4 b { color: var(--ink); font-weight: 600; }
.steps4 span { font-size: 15px; color: var(--mute); }

.cta-side { display: grid; gap: 20px; min-width: 0; }
.cta-photo img { aspect-ratio: 16 / 8; }

.f-badges { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.f-badges .badges img { height: 40px; }
.comp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.badges.big { justify-content: center; gap: 16px; }
.badges.big img { height: 56px; }
@media (max-width: 900px) { .comp { grid-template-columns: minmax(0,1fr); } }

/* Brand: mark + wordmark */
.brand { gap: 10px; }
.brand .mark { flex: none; display: block; }
.brand .wm { display: grid; line-height: 1; }
.brand .wm b { font: 700 20px/1 var(--f-body); letter-spacing: -.02em; color: var(--ink); }
.brand .wm small { margin-top: 3px; font: 600 9.5px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }

/* Enterprise brand */
.brand .mark { width: 34px; height: 34px; }
.brand .wm b { font: 700 24px/1 var(--f-body); letter-spacing: -.035em; color: #003B5C; text-transform: lowercase; }
.brand .wm small { margin-top: 4px; font: 600 9px/1 var(--f-body); letter-spacing: .38em; color: var(--mute); }

/* White footer, Openmind structure */
footer { background: #fff; color: var(--mute); border-top: 1px solid var(--line); }
footer > .wrap { padding-block: 64px 48px; }
.f-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 980px) { .f-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .f-grid { grid-template-columns: minmax(0,1fr); } }
.f-brand { display: grid; gap: 18px; align-content: start; }
.f-brand .brand .mark { width: 40px; height: 40px; }
.f-brand .brand .wm b { font-size: 28px; }
.f-tag { font-size: 15px; color: var(--ink-2); max-width: 34ch; }
footer address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
footer address b { color: var(--ink); }
.f-mail { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.f-mail svg { width: 18px; height: 18px; color: var(--blue); }
.f-mail a { color: var(--ink-2); }
.f-mail a:hover { color: var(--blue); }
.f-brand .badges img { height: 40px; }
.f-grid h4 { font: 700 17px/1.2 var(--f-body); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin-bottom: 16px; }
.f-grid h4.f-sub { margin-top: 28px; }
.f-grid ul { gap: 11px; }
.f-grid a { color: var(--ink-2); font-size: 14.5px; }
.f-grid a:hover { color: var(--blue); }
.f-badges { display: none; }
.f-bar { border-top: 1px solid var(--line); background: #fff; }
.f-bar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 18px; font-size: 13.5px; color: var(--mute); }
.f-bar b { color: var(--ink); }
.f-top { font-weight: 600; color: var(--ink); }
.f-top:hover { color: var(--blue); }

/* ================= Wide enterprise layout =================
   12-column grid up to 1600px with generous gutters. Section heads split into
   title (left) and introduction (right); the hero's three screens run off the
   right edge; everything else stays left aligned and quiet. */
:root { --wrap: 1600px; --gut: clamp(20px, 4.2vw, 80px); }
.wrap { max-width: var(--wrap); padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); } }

/* Type scale: 14 / 16 / 20 / 26 / 34 / 46 / 72 */
body { font-size: 16px; line-height: 1.6; }
.lede { font-size: 20px; line-height: 1.55; max-width: 60ch; }
.hhero h1 { font: 600 clamp(44px, 4.8vw, 76px)/1.04 var(--f-body); letter-spacing: -.035em; color: #10243E; max-width: 15ch; }
.hhero h1 em { color: inherit; font-style: normal; }
.sec-head h2 { font: 600 clamp(32px, 3vw, 46px)/1.1 var(--f-body); letter-spacing: -.028em; color: #10243E; }
.phero h1 { font: 600 clamp(36px, 3.6vw, 56px)/1.08 var(--f-body); letter-spacing: -.03em; color: #10243E; }
.split2 h2 { font: 600 clamp(28px, 2.4vw, 34px)/1.15 var(--f-body); letter-spacing: -.02em; color: #10243E; }
.flow-copy h3 { font: 600 clamp(24px, 2vw, 30px)/1.2 var(--f-body); letter-spacing: -.02em; color: #10243E; }
.tile h3, .card h3 { font-size: 20px; letter-spacing: -.01em; color: #10243E; }

/* Section heads: title left, introduction right; no label above */
section.band { padding-block: clamp(80px, 9vw, 144px); }
.sec-head, .sec-head.center { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; max-width: none; margin: 0 0 clamp(40px, 4.5vw, 72px); text-align: left; justify-items: start; }
.sec-head > .eyebrow { display: none; }
.sec-head > h2 { grid-column: 1; }
.sec-head > .lede { grid-column: 2; margin: 0; max-width: 62ch; }
.sec-head > h2:only-of-type:last-child { grid-column: 1 / span 2; max-width: 22ch; }
@media (max-width: 900px) { .sec-head, .sec-head.center { grid-template-columns: minmax(0,1fr); row-gap: 14px; } .sec-head > .lede { grid-column: 1; } }
.split .sec-head { grid-template-columns: minmax(0,1fr); }
.split .sec-head > .lede { grid-column: 1; }

/* Hero: copy on 5 columns, screens on 7 and off the right edge */
.hhero { overflow: hidden; }
.hhero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); padding-block: clamp(56px, 6vw, 104px) clamp(56px, 6vw, 96px); }
.hhero .hcopy .lede { font-size: 20px; }
.hhero .hcopy .eyebrow { margin-bottom: 4px; }
.hhero .hcopy .announce { max-width: 600px; gap: 10px; }
.screens3 { aspect-ratio: auto; height: clamp(360px, 38vw, 640px); margin-right: calc(-1 * var(--gut) - 6vw); }
.win { width: 78%; }
.win.p0 { transform: translate(0, 0) rotateY(-10deg) rotateX(4deg); }
.win.p1 { transform: translate(12%, 16%) rotateY(-10deg) rotateX(4deg); }
.win.p2 { transform: translate(24%, 32%) rotateY(-10deg) rotateX(4deg) scale(1.03); }
@media (max-width: 1000px) { .screens3 { height: 72vw; margin-right: 0; } .win { width: 82%; } }
.hhero .hero-diagram { margin-top: clamp(56px, 6vw, 96px); }

/* Segment tabs and flows use the full width */
.flow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); margin-top: 48px; }
@media (max-width: 1000px) { .flow { grid-template-columns: minmax(0,1fr); } }
.flow-copy p { font-size: 17px; }
.tab { margin-right: 40px; }
.tab b { font-size: 18px; }

/* Wider grids: more air, larger cards, fewer boxes per row on mid screens */
.tiles { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 1200px) { .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: minmax(0,1fr); } }
.tile { padding: 32px 28px 30px; gap: 12px; }
.tile p { font-size: 16px; }
.limits { gap: 24px; }
.lim { padding: 32px 28px; }
.deploy { gap: 24px; }
.dcard { padding: 32px 28px; }
.cards { gap: 24px; }
.card { padding: 30px 28px; }
.split2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); }
.split2.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1000px) { .split2, .split2.rev { grid-template-columns: minmax(0,1fr); } }
.split2 p { font-size: 17px; }

/* Compliance as a wide plate */
.comp { padding: clamp(28px, 3.5vw, 56px); gap: clamp(32px, 4vw, 72px); }
.comp-list { gap: clamp(24px, 3vw, 48px); }

/* Page heroes: copy 5, media 7 */
.phero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); padding-block: clamp(40px, 5vw, 80px) clamp(56px, 6vw, 96px); }
.phero.solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: var(--wrap); }
.phero.solo .wrap > div { max-width: 980px; }
@media (max-width: 1000px) { .phero .wrap { grid-template-columns: minmax(0,1fr); } }

/* FAQ and CTA keep a two-part split */
.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); }
@media (max-width: 980px) { .split { grid-template-columns: minmax(0,1fr); } }
.cta .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); padding-block: clamp(72px, 8vw, 128px); }
@media (max-width: 980px) { .cta .wrap { grid-template-columns: minmax(0,1fr); } }
.cta h2 { font: 600 clamp(32px, 3vw, 46px)/1.1 var(--f-body); letter-spacing: -.028em; color: #10243E; }

/* Footer spreads over the full width */
.f-grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr)); gap: clamp(32px, 4vw, 72px); }
@media (max-width: 980px) { .f-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .f-grid { grid-template-columns: minmax(0,1fr); } }
/* Hero: no label above the headline; screens bleed past the right edge */
.hhero .hcopy > .eyebrow { display: none; }
.hhero .hcopy h1 { margin-top: 0; }
@media (min-width: 1001px) {
  .win { width: 92%; }
  .win.p1 { transform: translate(10%, 15%) rotateY(-12deg) rotateX(4deg); }
  .win.p2 { transform: translate(20%, 30%) rotateY(-12deg) rotateX(4deg) scale(1.03); }
}
/* Page heroes: the breadcrumb already names the page, so no label above the title */
.phero .eyebrow { display: none; }
.phero h1 { margin-top: 4px; }
@media (max-width: 1000px) {
  .hhero .wrap, .phero .wrap { grid-template-columns: minmax(0, 1fr); }
  .screens3 { grid-column: 1; }
}

/* picture wrappers */
.frame picture, .photo picture { display: block; }
.photo picture { height: 100%; }

/* Contacts: phone, office, email */
.util-contact { display: flex; gap: 10px; align-items: center; }
.util-contact span { color: var(--line); }
.f-ico { display: inline-grid; place-items: center; width: 20px; flex: none; color: var(--blue); }
.f-ico svg { width: 18px; height: 18px; }
.f-addr, .f-mail { display: flex; gap: 10px; align-items: flex-start; font-style: normal; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.f-addr b { color: var(--ink); }
.f-mail small, .contact-list small { color: var(--mute); font-size: 13px; }
.f-mail a { color: var(--ink-2); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.contact-list a { color: var(--ink); font-weight: 600; }
.mail .tel { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink); }
.mail .tel svg { width: 18px; height: 18px; color: var(--blue); }

/* Footer legal links and legal pages */
.f-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.f-legal a { color: inherit; }
.f-legal a:hover { color: var(--blue); }
.prose.legal h2 { scroll-margin-top: 96px; }
.prose.legal ul { padding-left: 1.2em; }
.prose.legal li { margin: 6px 0; }
.consent a { color: var(--blue); text-decoration: underline; }

/* Home, product-site structure */
.hticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.hticks li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; font-size: 16.5px; color: var(--ink-2); }
.hticks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.proof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; font-size: 14px; color: var(--mute); }
.badges.sm img { height: 34px; }
.segcards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1200px) { .segcards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .segcards { grid-template-columns: minmax(0,1fr); } }
.segcard { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); overflow: hidden; min-width: 0; transition: box-shadow .2s; }
.segcard:hover { box-shadow: var(--sh-m, 0 6px 18px rgba(0,0,0,.08)); }
.seg-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.seg-media .photo, .seg-media picture, .seg-media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.seg-media .term { height: 100%; margin: 0; border-radius: 0; border: 0; }
.seg-media .term pre { font-size: 12px; }
.seg-copy { padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.seg-copy .k { font: 600 13px/1 var(--f-body); color: var(--blue); }
.seg-copy h3 { font: 600 19px/1.3 var(--f-head); }
.seg-copy h3 a { color: var(--ink); }
.seg-copy p { font-size: 15px; color: var(--mute); }
.seg-copy .ticks li { font-size: 14.5px; }
.seg-copy .more { margin-top: 6px; font-weight: 600; color: var(--blue); font-size: 14.5px; }
.stretch::after { content: ""; position: absolute; inset: 0; }
.steps3 { display: grid; gap: clamp(48px, 6vw, 96px); }
.center-cta { display: flex; justify-content: center; margin-top: 36px; }
.integ { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .integ { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .integ { grid-template-columns: minmax(0,1fr); } }
.integ article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); padding: 24px; display: grid; gap: 8px; align-content: start; }
.integ h3 { font: 600 17px/1.3 var(--f-head); }
.integ p { font-size: 14.5px; color: var(--mute); }
.chips { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }

/* Full footer */
.f-grid.f5 { grid-template-columns: minmax(0, 3.2fr) repeat(4, minmax(0, 2fr)); gap: clamp(28px, 3vw, 56px); }
@media (max-width: 1100px) { .f-grid.f5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .f-grid.f5 .f-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .f-grid.f5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.f-cta { justify-self: start; height: 42px; margin-top: 4px; }
.f-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.f-trust .badges img { height: 38px; }
.f-inst { background: var(--bg-2); border-top: 1px solid var(--line); }
.f-inst .wrap { padding-block: 24px; display: grid; gap: 12px; }
.f-inst nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.f-inst nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.f-inst nav a:hover, .f-company a:hover { color: var(--blue); }
.f-company { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.f-company a { color: inherit; }
.f-dp { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--mute); max-width: 120ch; }
.sitemap-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; }
@media (max-width: 1000px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: minmax(0,1fr); } }
.sitemap-grid h2 { font: 600 20px/1.2 var(--f-head); margin-bottom: 16px; }
.sitemap-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sitemap-grid a { display: grid; gap: 2px; }
.sitemap-grid b { color: var(--ink); font-weight: 600; }
.sitemap-grid a:hover b { color: var(--blue); }
.sitemap-grid span { font-size: 14px; color: var(--mute); }
.more-row { margin: 20px 0 0; }
.more-row .more { font-weight: 600; color: var(--blue); }
.split2.solo { grid-template-columns: minmax(0,1fr); }
@media (min-width: 1000px) { .split2.solo .steps4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1000px) { .split2.solo .steps4 { gap: 24px; } .split2.solo .steps4 li { border-bottom: 0; border-top: 2px solid var(--line); padding: 56px 0 0; } .split2.solo .steps4 li::before { top: 14px; } }

/* Panel snippets: transparent images, the pieces sit directly on the page */
.snip { margin: 0; }
.snip picture, .snip img { display: block; width: 100%; height: auto; }

/* Glossary */
.az { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.az a { font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: #fff; }
.az a:hover { color: var(--blue); border-color: var(--blue); }
.glossary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; }
@media (max-width: 800px) { .glossary { grid-template-columns: minmax(0,1fr); } }
.glossary > div { padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.glossary dt { font: 600 17px/1.3 var(--f-head); color: var(--ink); }
.glossary dd { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }
.tbl code { font-size: 13px; }

/* Primary buttons keep white text inside areas that recolour links (footer columns, cards) */
a.btn.btn-primary, a.btn.btn-primary:hover, a.btn.btn-primary:visited { color: #fff; }

/* Trust Center */
.trust-badges { display: flex; justify-content: center; align-items: center; padding: 40px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); }
.badges a { display: inline-flex; }
.ctrl-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1100px) { .ctrl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .ctrl-grid { grid-template-columns: minmax(0,1fr); } }
.ctrl-grid article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); padding: 24px; display: grid; gap: 14px; align-content: start; }
.ctrl-grid h3 { font: 600 18px/1.3 var(--f-head); }
.ctrl-grid .ticks li { font-size: 14.5px; }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 800px) { .certs { grid-template-columns: minmax(0,1fr); } }
.cert { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-s); padding: 28px; display: grid; gap: 20px; align-content: start; }
.cert-head { display: flex; gap: 16px; align-items: center; }
.cert-head img { width: 64px; height: 64px; object-fit: contain; }
.cert-head h3 { font: 600 20px/1.2 var(--f-head); }
.cert-head p { margin: 4px 0 0; color: var(--mute); font-size: 14.5px; }
.cert dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.cert dt { font-size: 13px; color: var(--mute); }
.cert dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-size: 15px; }
.cert .btn { justify-self: start; }
.comp-badges .btn { margin-top: 16px; }
.f-grid.f5 { grid-template-columns: minmax(0, 3fr) repeat(5, minmax(0, 2fr)); }
@media (max-width: 1240px) { .f-grid.f5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .f-grid.f5 .f-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .f-grid.f5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.f-trust a { color: var(--blue); font-weight: 600; }
.trust-badges .badges { gap: 28px; }
.trust-badges .badges img { height: 96px; }

/* Home, CodeTwo structure: hero counters and trust strip */
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 12px 40px; margin: 36px 0 0; }
.hstats dt { font: 700 clamp(30px, 3vw, 42px)/1 var(--f-body); letter-spacing: -.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.hstats dd { margin: 8px 0 0; font-size: 14px; color: var(--mute); max-width: 18ch; }
@media (max-width: 520px) { .hstats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 16px; } .hstats dd { font-size: 12.5px; } }
.trustband { padding-block: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trustband.band { padding-block: 36px; }
.trust-strip { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.trust-strip ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; flex-wrap: wrap; flex: 1; justify-content: center; }
.trust-strip li { display: grid; gap: 2px; max-width: 26ch; }
.trust-strip li b { color: var(--ink); font-size: 16px; }
.trust-strip li span { color: var(--mute); font-size: 14px; }
.trust-strip .more { font-weight: 600; color: var(--blue); white-space: nowrap; }
#capabilities .card p:empty { display: none; }
#capabilities .card h3 { font-size: 16.5px; font-weight: 500; }
.trust-strip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 24px 48px; align-items: center; }
.trust-strip ul { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; justify-content: stretch; }
.trust-strip li { max-width: none; }
@media (max-width: 1000px) { .trust-strip { grid-template-columns: minmax(0,1fr); } .trust-strip ul { grid-template-columns: minmax(0,1fr); } }

/* Hero windows: the box grows with its width, so the stacked windows never spill onto the diagram below */
.screens3 { height: auto; aspect-ratio: 3 / 2; margin-bottom: 24px; }
@media (max-width: 1000px) { .screens3 { height: auto; aspect-ratio: 4 / 3; } }
.hero-diagram { position: relative; z-index: 1; margin-top: 32px; }

/* All features page */
.az a span { margin-left: 4px; color: var(--mute); font-size: 12px; }
.feat-areas { display: grid; gap: 0; margin-top: 8px; }
.feat-area { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 64px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
@media (max-width: 900px) { .feat-area { grid-template-columns: minmax(0,1fr); } }
.feat-head h2 { font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--f-head); }
.feat-head p { margin: 10px 0 14px; color: var(--mute); }
.feat-head .more { font-weight: 600; color: var(--blue); }
.feat-area .ticks { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 32px; }
@media (max-width: 640px) { .feat-area .ticks { grid-template-columns: minmax(0,1fr); } }
.addons-h { margin: 40px 0 16px; font: 600 18px/1.2 var(--f-head); color: var(--ink); }
#capabilities .cards.c2 .card h3 { font-size: 16.5px; }