:root {
  --deep: #050B11;
  --ink: #0A141D;
  --ink-2: #0F1C27;
  --line: #1A2A38;
  --text: #E9EEF2;
  --muted: #93A3B0;
  --faint: #5F7182;
  --lake: #7DB5E8;
  --lake-2: #2A78C2;
  --mist: #DCE4EA;
  --mist-2: #C9D4DD;
  --paper-text: #0F1C27;
  --paper-muted: #4E5D69;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --num: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 17px/1.65 var(--sans); font-weight: 300; }
.num { font-family: var(--num); font-feature-settings: "tnum"; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--lake); }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--lake); margin: 0 0 22px; }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(5, 11, 17, .86); backdrop-filter: blur(14px); border-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 40px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 500 17px var(--sans); letter-spacing: .02em; }
.brand svg { width: 26px; height: 26px; fill: none; stroke: var(--lake); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.links { display: flex; gap: 32px; margin-left: auto; }
.links a { text-decoration: none; font-size: 14px; font-weight: 400; color: var(--muted); transition: color .2s; }
.links a:hover { color: var(--text); }
.btn {
  display: inline-block; text-decoration: none; font: 500 15px var(--sans); letter-spacing: .01em;
  padding: 15px 28px; border-radius: 2px; background: var(--mist); color: var(--paper-text);
  transition: background .25s, transform .25s var(--ease);
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn.small { padding: 10px 18px; font-size: 14px; }
.link { text-decoration: none; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.link:hover { color: var(--text); border-color: var(--lake); }

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 70% 20%, #0F2233 0%, var(--deep) 62%); overflow: hidden; }
#depth, #depth2 { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > .wrap { width: 100%; }
.hero-in { position: relative; padding-top: 120px; text-align: center; }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: 1.02; max-width: 960px; margin: 0 auto; text-wrap: balance; }
.hero-in .lead { margin-left: auto; margin-right: auto; }
/* the line above the headline: bigger, with a slow moving blue gradient */
.tagline { font-size: 17px; font-weight: 600; letter-spacing: .24em; line-height: 1.6; margin-bottom: 34px; }
.tagline > span {
  display: inline-block;
  background: linear-gradient(90deg, #4F95D6 0%, #A9CFF2 25%, #E9EEF2 50%, #A9CFF2 75%, #4F95D6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { from { background-position: 0% 0; } to { background-position: -200% 0; } }
.hero-in .hero-cta { justify-content: center; }
.hero-foot { text-align: center; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 700px; margin: 30px 0 0; }
.hero-cta { display: flex; align-items: center; gap: 30px; margin-top: 44px; }
.hero-foot { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 100px; padding-bottom: 48px; }
.hero-foot div { border-top: 1px solid var(--line); padding-top: 18px; }
.hero-foot b { display: block; font-size: 22px; font-weight: 400; color: var(--text); }
.hero-foot span { font-size: 14px; color: var(--muted); }

/* blocks */
.block { padding: 150px 0; }
.block h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; }
.narrow { max-width: 820px; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: start; }
.split.rev { grid-template-columns: 1fr 1.05fr; align-items: center; }
.prose p { margin: 0 0 20px; color: var(--muted); font-size: 18px; }
.prose p:first-child { color: var(--text); }
.paper { background: var(--mist); color: var(--paper-text); }
.paper .eyebrow { color: var(--lake-2); }
.paper h2 em { color: var(--lake-2); }
.deep { background: var(--deep); }

/* stages */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 70px; border-top: 1px solid var(--mist-2); }
.stage { padding: 40px 36px 10px 0; }
.stage + .stage { padding-left: 36px; border-left: 1px solid var(--mist-2); }
.stage-n { font-size: 13px; color: var(--lake-2); }
.stage h3 { font-size: 40px; margin: 18px 0 4px; }
.stage-when { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 22px; }
.stage p { color: #2F3F4B; font-size: 16px; }
.stage ul { list-style: none; margin: 26px 0 0; padding: 0; }
.stage li { font-size: 15px; padding: 11px 0; border-top: 1px solid var(--mist-2); font-weight: 400; }
.aside { margin: 56px 0 0; font-size: 15px; color: var(--paper-muted); }

/* why */
.whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 56px; margin-top: 80px; }
.why { border-top: 1px solid var(--line); padding-top: 26px; }
.why-k { display: block; font-family: var(--serif); font-size: 32px; margin-bottom: 12px; }
.why p { margin: 0; color: var(--muted); font-size: 16px; }

/* method */
.method { list-style: none; margin: 90px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.method::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.method::after { content: ""; position: absolute; left: 0; top: 7px; height: 1px; width: var(--fill, 0%); background: linear-gradient(90deg, var(--lake-2), var(--lake)); transition: width 2.4s var(--ease); }
.method li { position: relative; padding-right: 26px; }
.m-dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--deep); border: 1px solid var(--faint); position: relative; z-index: 1; transition: border-color .4s, background .4s; }
.method li.lit .m-dot { border-color: var(--lake); background: var(--lake); box-shadow: 0 0 0 5px rgba(125, 181, 232, .12); }
.method b { display: block; font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 26px 0 10px; }
.method small { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); }
.standards { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 110px; padding-top: 34px; border-top: 1px solid var(--line); font-size: 15px; }
.std-label { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.std-note { flex-basis: 100%; font-size: 13px; color: var(--faint); }

/* group panel */
.panel { background: linear-gradient(160deg, #102131, var(--ink-2)); border: 1px solid var(--line); border-radius: 4px; padding: 30px 32px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.panel-h { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.conv-big { display: flex; align-items: flex-end; gap: 18px; margin: 30px 0 34px; }
.conv-big b { font-size: 76px; font-weight: 400; line-height: .85; color: var(--text); }
.conv-big span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.bars { display: flex; flex-direction: column; gap: 15px; }
.bar { display: grid; grid-template-columns: 82px 1fr 34px; gap: 16px; align-items: center; font-size: 14px; color: var(--muted); }
.bar i { display: block; height: 4px; background: var(--line); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--lake-2); transition: width 1.6s var(--ease); }
.panel.in .bar i::after { width: var(--w); }
.bar.hl i::after { background: var(--lake); }
.bar.hl span, .bar.hl b { color: var(--text); }
.bar b { font-weight: 400; text-align: right; color: var(--text); }
.panel-f { display: flex; gap: 32px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.panel-f b { color: var(--text); font-weight: 400; margin-right: 6px; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 70px; border-top: 1px solid var(--mist-2); }
.t { padding: 34px 36px 34px 0; border-bottom: 1px solid var(--mist-2); }
.t:not(:nth-child(3n + 1)) { padding-left: 36px; border-left: 1px solid var(--mist-2); }
.t b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.t span { font-size: 15px; color: #33424E; }

/* contact */
.contact { position: relative; padding: 170px 0 150px; background: radial-gradient(90% 100% at 30% 100%, #0F2233 0%, var(--deep) 65%); overflow: hidden; text-align: center; }
.contact-in { position: relative; }
.contact h2 { font-size: clamp(42px, 6vw, 84px); line-height: 1.04; }
.contact .lead { margin: 26px auto 46px; }
.contact-meta { margin: 30px 0 0; font-size: 13px; color: var(--faint); letter-spacing: .06em; }

/* footer */
.foot { background: var(--deep); border-top: 1px solid var(--line); }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 84px; font-size: 13px; color: var(--faint); }
.brand.small { font-size: 14px; color: var(--muted); }
.brand.small svg { width: 20px; height: 20px; }

/* footer links */
.foot-links { display: flex; gap: 22px; }
.foot-links a { text-decoration: none; color: var(--muted); }
.foot-links a:hover, .foot-links a[aria-current] { color: var(--text); }

/* legal pages */
.legal-page { background: var(--ink); }
.nav .back { margin-left: auto; }
.legal { padding-top: 150px; padding-bottom: 120px; }
.legal h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.05; }
.draft-note { display: inline-block; margin: 26px 0 0; padding: 10px 16px; border: 1px solid #5A4A1E; border-radius: 2px; background: rgba(232, 196, 84, .07); color: #E3C46E; font-size: 14px; }
.legal-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 70px; margin-top: 60px; align-items: start; }
.legal-toc { position: sticky; top: 110px; font-size: 14px; }
.legal-toc > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.legal-toc a { text-decoration: none; color: var(--muted); }
.legal-toc a:hover { color: var(--text); }
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 30px; margin: 56px 0 18px; scroll-margin-top: 110px; }
.legal-body h2:first-of-type { margin-top: 10px; }
.legal-body p, .legal-body li { color: #C3CDD5; font-size: 16px; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul { margin: 0 0 18px; padding-left: 20px; }
.legal-body li { margin: 6px 0; }
.legal-body strong { color: var(--text); font-weight: 500; }
.legal-body a { color: var(--lake); }
.legal-body .tbl { overflow-x: auto; margin: 10px 0 22px; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-body th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.legal-body td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: #C3CDD5; vertical-align: top; }
.legal-body td:first-child { color: var(--text); }
mark.tbc { background: rgba(232, 196, 84, .12); color: #E3C46E; padding: 1px 5px; border-radius: 2px; font-size: .92em; }

/* reveal on scroll, once */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tagline > span { animation: none; background-position: 25% 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .method::after, .bar i::after { transition: none; }
}

@media (max-width: 1000px) {
  .wrap { padding: 0 28px; }
  .links { display: none; }
  .nav-in { justify-content: space-between; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 50px; }
  .stages, .trust { grid-template-columns: 1fr; }
  .stage, .stage + .stage { padding: 36px 0 20px; border-left: 0; border-top: 1px solid var(--mist-2); }
  .stages { border-top: 0; }
  .t, .t:not(:nth-child(3n + 1)) { padding: 26px 0; border-left: 0; }
  .whys { grid-template-columns: 1fr 1fr; gap: 44px 36px; }
  .method { grid-template-columns: 1fr 1fr 1fr; gap: 50px 0; }
  .method::before, .method::after { display: none; }
  .hero-foot { grid-template-columns: 1fr 1fr; margin-top: 70px; }
  .legal-grid { grid-template-columns: 1fr; gap: 36px; }
  .legal-toc { position: static; }
  .legal { padding-top: 120px; }
  .block { padding: 110px 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .hero-in { padding-top: 110px; }
  .tagline { font-size: 12.5px; letter-spacing: .2em; }
  .tagline .pe { display: block; }
  .hero-cta { flex-direction: column; align-items: center; gap: 22px; }
  .hero-foot { gap: 22px; margin-top: 56px; }
  .hero-foot b { font-size: 18px; }
  .whys { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr 1fr; }
  .block { padding: 90px 0; }
  .panel { padding: 24px 20px; }
  .conv-big b { font-size: 60px; }
  .foot-in { flex-direction: column; justify-content: center; height: auto; padding: 28px 0; text-align: center; }
  .contact { padding: 120px 0 110px; }
}

/* ---------- charts: three figures that show the difference ---------- */
.chart { margin: 90px 0 0; padding: 0; }
.chart figcaption { display: flex; flex-direction: column; gap: 6px; margin-bottom: 36px; }
.chart figcaption b { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.chart figcaption span { font-size: 15px; color: var(--muted); }
.chart-note { margin: 26px 0 0; font-size: 13px; color: var(--faint); }

/* speed: two timelines on one week axis */
.speed { border-top: 1px solid var(--line); padding-top: 50px; }
.sp-rows { display: flex; flex-direction: column; gap: 44px; }
.sp-row, .sp-axis { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: center; }
.sp-name { font-size: 16px; font-weight: 500; color: var(--text); }
.sp-name small { display: block; font-size: 13px; font-weight: 300; color: var(--muted); }
.sp-track { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: rgba(26, 42, 56, .6); margin: 46px 0 0; }
.sp-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; transition: width 1.8s var(--ease); }
.old .sp-bar { background: #3C4E5E; }
.new .sp-bar { background: linear-gradient(90deg, var(--lake-2), var(--lake)); }
.speed.in .sp-bar { width: var(--to); }
.sp-mk { position: absolute; left: var(--at); top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); border: 2px solid #6F8292; opacity: 0; transition: opacity .5s 1.4s; }
.new .sp-mk { border-color: var(--lake); background: var(--lake); }
.speed.in .sp-mk { opacity: 1; }
.sp-mk em { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--muted); text-align: center; white-space: nowrap; }
.sp-mk em b { font-size: 13px; font-weight: 500; color: var(--text); }
.new .sp-mk em b { color: var(--lake); }
.sp-axis { margin-top: 22px; }
.sp-axis div { position: relative; height: 16px; border-top: 1px solid var(--line); }
.sp-axis i { position: absolute; left: var(--at); top: 6px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.sp-axis i:first-child { transform: none; }
.sp-axis i:last-child { transform: translateX(-100%); }

/* fix: a waterfall of the cost to fix, on paper */
.fix { border-top: 1px solid var(--mist-2); padding-top: 50px; }
.fix figcaption span, .fix .chart-note { color: var(--paper-muted); }
.fx-rows { display: flex; flex-direction: column; gap: 4px; }
.fx-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) 70px; gap: 24px; align-items: center; padding: 10px 0; }
.fx-row > span { font-size: 15.5px; font-weight: 500; }
.fx-row small { display: block; font-size: 13px; font-weight: 300; color: var(--paper-muted); }
.fx-track { position: relative; height: 22px; }
.fx-track i { position: absolute; top: 0; bottom: 0; left: var(--from); width: 0; border-radius: 4px; background: var(--lake-2); transition: width 1.1s var(--ease); }
.fx-row:nth-child(2) i { transition-delay: .25s; }
.fx-row:nth-child(3) i { transition-delay: .5s; }
.fx-row:nth-child(4) i { transition-delay: .75s; }
.fx-row.total i { transition-delay: 1.1s; background: var(--paper-text); }
.fix.in .fx-track i { width: var(--w); }
.fx-row > b { font-size: 16px; font-weight: 500; text-align: right; }
.fx-row.total { border-top: 1px solid var(--mist-2); margin-top: 8px; padding-top: 18px; }
.fx-row.total > b { font-size: 20px; }

/* convergence: one line against the platform company */
.conv { border-top: 1px solid var(--line); padding-top: 50px; }
.cv-plot { position: relative; }
.cv-plot svg { display: block; width: 100%; overflow: visible; }
.cv-line { fill: none; stroke: var(--lake); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cv-area { fill: url(#cvFill); opacity: 0; transition: opacity 1.2s .8s; }
.conv.in .cv-area { opacity: 1; }
.cv-ref { stroke: #6F8292; stroke-width: 1; stroke-dasharray: 4 5; }
.cv-grid { stroke: var(--line); stroke-width: 1; }
.cv-lbl { font: 400 11.5px var(--num); fill: var(--faint); }
.cv-ref-lbl { font: 400 12.5px var(--sans); fill: var(--muted); }
.cv-dot { fill: var(--lake); stroke: var(--ink); stroke-width: 2; }
.cv-call { font: 500 13px var(--sans); fill: var(--text); }
.cv-call tspan.n { font: 500 15px var(--num); fill: var(--lake); }
.cv-x { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.cv-tip { position: absolute; top: 0; pointer-events: none; background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 7px 10px; font-size: 13px; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .15s; transform: translateX(-50%); }
.cv-tip b { display: block; font: 500 15px var(--num); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .sp-bar, .sp-mk, .fx-track i, .cv-area { transition: none; }
}
@media (max-width: 1000px) {
  .sp-row, .sp-axis { grid-template-columns: 1fr; gap: 0; }
  .sp-axis > span { display: none; }
  .fx-row { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px 16px; }
  .fx-row > span { grid-column: 1 / -1; }
  .chart { margin-top: 70px; }
}
@media (max-width: 640px) {
  .chart figcaption b { font-size: 27px; }
  .sp-mk em { font-size: 11.5px; }
  .sp-mk.low em { bottom: auto; top: 18px; }
  .sp-mk.end em { transform: translateX(-70%); }
}
@media (max-width: 640px) { .new .sp-track { margin-bottom: 40px; } }

/* what we do best: seven short points under the hero */
.bests { list-style: none; margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mist-2); }
.best { padding: 30px 28px 34px 0; border-bottom: 1px solid var(--mist-2); }
.best + .best { padding-left: 28px; border-left: 1px solid var(--mist-2); }
.best:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.best .num { display: block; font-size: 12px; color: var(--lake-2); letter-spacing: .08em; margin-bottom: 18px; }
.best b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin-bottom: 10px; }
.best p { margin: 0; font-size: 15px; color: #33424E; }
@media (max-width: 1000px) {
  .bests { grid-template-columns: 1fr 1fr; }
  .best, .best + .best { padding: 26px 24px 28px 0; border-left: 0; }
  .best:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--mist-2); }
}
@media (max-width: 640px) {
  .bests { grid-template-columns: 1fr; margin-top: 50px; }
  .best, .best + .best, .best:nth-child(2n) { padding: 24px 0; border-left: 0; }
}
.best.cta { display: flex; flex-direction: column; justify-content: flex-end; }
.best.cta .link { color: var(--lake-2); font-weight: 600; font-size: 15px; }
@media (max-width: 640px) { .best.cta { padding-top: 30px; } }

/* ---------- November rewrite: hero frameworks, what we do with art, integrations, safe data ---------- */
.hero h1 { font-size: clamp(40px, 6vw, 84px); max-width: 1020px; }
.hero h1 em { color: var(--lake); }
.hero-foot { display: block; margin-top: 80px; }
.fw-label { margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.frameworks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.frameworks li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 20, 29, .55); backdrop-filter: blur(4px); }
.frameworks svg { grid-row: span 2; width: 36px; height: 36px; fill: none; stroke: var(--lake); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.frameworks b { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.2; }
.frameworks span { font-size: 12.5px; color: var(--muted); }

.best { position: relative; outline: none; }
.best .art { display: block; width: 120px; height: 80px; margin-bottom: 18px; fill: none; stroke: #7C93A6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.best .art .ok { stroke: var(--lake-2); stroke-width: 2.6; }
.best .art .fill { fill: rgba(42, 120, 194, .16); stroke: var(--lake-2); }
.best:hover .art, .best:focus-within .art, .best:focus .art { transform: translateY(-3px); }
.best p.more { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; color: var(--paper-muted); transition: max-height .35s var(--ease), opacity .3s, margin-top .3s; }
.best:hover p.more, .best:focus p.more, .best:focus-within p.more { max-height: 120px; opacity: 1; margin-top: 10px; }
.best:focus-visible { box-shadow: inset 0 0 0 2px var(--lake-2); }
@media (hover: none) { .best p.more { max-height: none; opacity: 1; margin-top: 10px; } }

/* integrations: two rows of logos drifting in opposite directions */
#tools { overflow: hidden; }
.lead-sm { font-size: 18px; color: var(--muted); max-width: 640px; margin: 22px 0 0; }
.marquee { margin-top: 64px; display: flex; flex-direction: column; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-row { display: flex; gap: 14px; width: max-content; animation: mq 60s linear infinite; }
.mq-row.rev { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .mq-row { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tool { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); white-space: nowrap; font-size: 15px; color: var(--text); }
.tool i { width: 24px; height: 24px; flex: none; background: var(--mist); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.tool i.gen { -webkit-mask: none; mask: none; background: none; border: 1.5px solid var(--muted); border-radius: 6px; }
.tool small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tool.more { border-style: dashed; color: var(--lake); }
.tool.more i { -webkit-mask: none; mask: none; background: none; border: 1.5px dashed var(--lake); border-radius: 50%; position: relative; }
.tool.more i::before, .tool.more i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--lake); }
.tool.more i::after { transform: rotate(90deg); }

/* safe data flow */
.chart.safe { margin-top: 80px; }
.paper .chart figcaption span { color: var(--paper-muted); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 38px; height: 2px; background: linear-gradient(90deg, var(--mist-2), var(--lake-2), var(--mist-2)); }
.flow::after { content: ""; position: absolute; top: 34px; left: 10%; width: 10px; height: 10px; border-radius: 50%; background: var(--lake-2); box-shadow: 0 0 0 4px rgba(42, 120, 194, .18); animation: flowdot 6s var(--ease) infinite; }
@keyframes flowdot { 0% { left: 10%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 89%; opacity: 0; } }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.flow svg { width: 76px; height: 76px; padding: 14px; border-radius: 50%; background: #fff; border: 1px solid var(--mist-2); fill: none; stroke: var(--lake-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; margin-bottom: 8px; }
.flow b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.flow span { font-size: 14px; color: var(--paper-muted); max-width: 190px; }

@media (max-width: 1000px) {
  .frameworks { grid-template-columns: repeat(3, 1fr); }
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow::before { left: 37px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--mist-2), var(--lake-2), var(--mist-2)); }
  .flow::after { display: none; }
  .flow li { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; text-align: left; align-items: center; }
  .flow svg { grid-row: span 2; margin: 0; }
  .flow span { max-width: none; }
}
@media (max-width: 640px) {
  .frameworks { grid-template-columns: 1fr 1fr; }
  .frameworks li:last-child { grid-column: 1 / -1; }
  .hero-foot { margin-top: 56px; }
  .marquee { margin-top: 44px; }
  .tool { padding: 11px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mq-row, .flow::after { animation: none; } }
.tool i.gen { display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--mist); border: 1.5px solid var(--muted); }
/* the safe-data flow sits on the dark band */
.flow::before { background: linear-gradient(90deg, var(--line), var(--lake-2), var(--line)); }
.flow::after { background: var(--lake); box-shadow: 0 0 0 4px rgba(125, 181, 232, .18); }
.flow svg { background: var(--ink-2); border-color: var(--line); stroke: var(--lake); }
.flow span { color: var(--muted); }
@media (max-width: 1000px) { .flow::before { background: linear-gradient(180deg, var(--line), var(--lake-2), var(--line)); } }

/* ---------- separate pages: tab bar, page headers ---------- */
.tabs a { position: relative; padding: 6px 0; }
.tabs a[aria-current="page"] { color: var(--text); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--lake); border-radius: 1px; }
@media (max-width: 1000px) {
  .nav-in { flex-wrap: wrap; height: auto; padding-top: 14px; gap: 10px 20px; }
  .nav .tabs { display: flex; order: 3; width: 100%; margin: 0 -4px; padding: 0 4px 10px; gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .nav .tabs::-webkit-scrollbar { display: none; }
  .nav .tabs a { white-space: nowrap; }
  .nav .btn.small { margin-left: auto; }
  .nav:not(.solid) { background: rgba(5, 11, 17, .7); backdrop-filter: blur(10px); }
}
.page-hero { position: relative; padding: 190px 0 110px; background: radial-gradient(110% 100% at 70% 0%, #0F2233 0%, var(--deep) 62%); overflow: hidden; }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.04; max-width: 980px; margin: 0; text-wrap: balance; }
.page-hero h1 em { color: var(--lake); }
@media (max-width: 1000px) { .page-hero { padding: 160px 0 80px; } }
.aside.dark { color: var(--muted); }
.aside.dark .link { margin-left: 8px; }
.ticks { list-style: none; margin: 30px 0 34px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--lake); border-bottom: 2px solid var(--lake); transform: rotate(-45deg); }

/* ---------- how an audit runs: one line of steps that light up ---------- */
.rv { margin-top: 70px; }
.rv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
.rv-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 32px; height: 2px; background: var(--line); }
.rv-steps::after { content: ""; position: absolute; left: 6%; top: 32px; height: 2px; width: calc(var(--fill, 0%) * .88); background: linear-gradient(90deg, var(--lake-2), var(--lake)); transition: width .9s var(--ease); }
.rv-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.rv-ico { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line); transition: border-color .4s, background .4s, box-shadow .4s, transform .4s var(--ease); margin-bottom: 10px; }
.rv-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.rv-steps li.lit .rv-ico { border-color: var(--lake-2); background: #0F2438; }
.rv-steps li.lit .rv-ico svg { stroke: var(--lake); }
.rv-steps li.now .rv-ico { box-shadow: 0 0 0 7px rgba(125, 181, 232, .12); transform: scale(1.06); }
.rv-steps b { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.rv-steps small { font-size: 14px; color: var(--muted); max-width: 170px; line-height: 1.4; }
.gets-h { margin-top: 100px; }
.gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gets.four { grid-template-columns: repeat(4, 1fr); margin-top: 60px; }
.gets li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); outline: none; transition: border-color .25s, transform .25s var(--ease); }
.gets li:hover, .gets li:focus-visible { border-color: var(--lake-2); transform: translateY(-2px); }
.gets svg { grid-row: span 2; width: 32px; height: 32px; fill: none; stroke: var(--lake); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gets b { font-size: 16px; font-weight: 600; color: var(--text); }
.gets span { font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
@media (max-width: 1000px) {
  .rv-steps { grid-template-columns: 1fr; gap: 16px; }
  .rv-steps::before { left: 32px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
  .rv-steps::after { left: 32px; top: 16px; width: 2px; height: calc(var(--fill, 0%) * .92); transition: height .9s var(--ease); }
  .rv-steps li { display: grid; grid-template-columns: 66px 1fr; column-gap: 18px; text-align: left; align-items: center; justify-items: start; }
  .rv-ico { grid-row: span 2; margin: 0; }
  .rv-steps small { max-width: none; }
  .gets, .gets.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .gets, .gets.four { grid-template-columns: 1fr; } }

/* ---------- frameworks: tabs down the left, one panel at a time ---------- */
.fw-block { padding-top: 90px; }
.fw { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.fw-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 100px; }
.fw-tabs button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; font: inherit; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fw-tabs button b { font-weight: 500; font-size: 15px; }
.fw-tabs button span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.fw-tabs button:hover { color: var(--text); background: var(--ink); }
.fw-tabs button[aria-selected="true"] { color: var(--text); background: var(--ink-2); border-color: var(--line); box-shadow: inset 3px 0 0 var(--lake); }
.fw-tabs button.own { margin-bottom: 10px; }
.fw-tabs button.own span { color: var(--lake); }
.fw-tabs button:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
.fw-panel { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 40px 44px; animation: fwin .35s var(--ease); }
.fw-panel.own { background: linear-gradient(160deg, #10263A, var(--ink)); border-color: #24435E; }
@keyframes fwin { from { opacity: 0; transform: translateY(8px); } }
.fw-panel header { max-width: 720px; }
.fw-tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lake); font-weight: 600; }
.fw-panel h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; margin: 10px 0 14px; }
.fw-panel header p { margin: 0; font-size: 17px; color: var(--muted); }
.fw-panel .fw-who { margin-top: 16px; font-size: 15px; color: var(--text); }
.fw-who b { display: inline-block; margin-right: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.fw-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.fw-cols > div { border-top: 1px solid var(--line); padding-top: 20px; }
.fw-cols h3 { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; }
.fw-cols h3 i { width: 10px; height: 10px; border-radius: 50%; }
.fw-cols .d1 { background: #7DB5E8; } .fw-cols .d2 { background: #B9A4E8; } .fw-cols .d3 { background: #6FD3A4; }
.fw-sub { margin: 4px 0 14px; font-size: 13px; color: var(--faint); }
.fw-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fw-cols li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text); line-height: 1.45; }
.fw-cols li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 6px; border-left: 1.8px solid var(--lake); border-bottom: 1.8px solid var(--lake); transform: rotate(-45deg); }
@media (max-width: 900px) {
  .fw { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fw-tabs { flex-direction: row; position: static; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
  .fw-tabs::-webkit-scrollbar { display: none; }
  .fw-tabs button { flex: none; flex-direction: column; align-items: flex-start; gap: 2px; border-color: var(--line); }
  .fw-tabs button.own { margin-bottom: 0; }
  .fw-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--lake); }
  .fw-panel { padding: 28px 22px; }
  .fw-cols { grid-template-columns: 1fr; }
}

/* ---------- the group dashboard ---------- */
.dash { background: linear-gradient(170deg, #0E1E2C, #08121B); border: 1px solid #1E3242; border-radius: 12px; padding: 22px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); font-size: 14px; color: var(--text); }
.db-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.db-fund { font-size: 15px; color: var(--muted); } .db-fund b { color: var(--text); font-weight: 600; }
.db-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6FD3A4; }
.db-live i { width: 8px; height: 8px; border-radius: 50%; background: #6FD3A4; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.db-kpis { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 10px; margin: 16px 0; }
.db-kpis > div { background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.db-kpis b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.db-kpis span { font-size: 12px; color: var(--muted); }
.db-read b { font-family: var(--num); font-size: 22px; line-height: 1.3; color: var(--lake); }
.db-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.db-table { display: flex; flex-direction: column; min-width: 0; }
.db-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 70px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 10px; border-bottom: 1px solid var(--line); border-radius: 6px; transition: background .6s; }
.db-row.sync { animation: rowsync 1.4s ease-out; }
@keyframes rowsync { 0% { background: rgba(125, 181, 232, .12); } 100% { background: transparent; } }
.db-head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.db-co b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-co small, .db-st small, .db-g small { font-size: 12px; color: var(--faint); }
.db-st { display: flex; flex-direction: column; gap: 5px; }
.db-lakes { display: flex; gap: 3px; }
.db-lakes i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.db-lakes i.done { background: #2E5F8C; }
.db-lakes i.now { background: var(--lake); animation: blink 2s ease-in-out infinite; }
.db-lakes i.now.up { background: linear-gradient(90deg, #6FD3A4, rgba(111, 211, 164, .25)); animation: none; position: relative; overflow: hidden; }
.db-lakes i.now.up::after { content: ""; position: absolute; inset: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(220, 255, 238, .9), transparent); animation: upflow 2.6s ease-in-out infinite; }
@keyframes upflow { from { transform: translateX(-100%); } to { transform: translateX(220%); } }
.db-sys { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.db-sync { width: 8px; height: 8px; border-radius: 50%; background: #2E5F8C; }
.db-row.sync .db-sync { background: var(--lake); box-shadow: 0 0 0 4px rgba(125, 181, 232, .2); }
.db-g { display: flex; align-items: center; gap: 10px; }
.db-g i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.db-g em { display: block; height: 100%; background: linear-gradient(90deg, var(--lake-2), var(--lake)); border-radius: 3px; transition: width 1s var(--ease); }
.db-g b { font-size: 13px; font-weight: 500; width: 24px; text-align: right; }
.db-feed { border-left: 1px solid var(--line); padding-left: 16px; min-width: 0; }
.db-feed p { margin: 4px 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.db-feed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.db-feed li { font-size: 13px; color: var(--muted); line-height: 1.4; padding-left: 12px; border-left: 2px solid #2E5F8C; animation: feedin .6s var(--ease); }
.db-feed li:first-child { border-left-color: var(--lake); color: var(--text); }
.db-feed li b { display: block; font-size: 12px; font-weight: 600; color: var(--lake); }
@keyframes feedin { from { opacity: 0; transform: translateY(-6px); } }
.dash.compact .db-main { grid-template-columns: minmax(0, 1fr); }
.dash.compact .db-kpis { grid-template-columns: repeat(4, 1fr); }
.dash.compact .db-kpis .db-read { display: none; }
.dash.compact .db-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 54px minmax(0, .9fr); gap: 10px; }
@media (max-width: 1000px) {
  .db-main { grid-template-columns: minmax(0, 1fr); }
  .db-feed { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .db-kpis { grid-template-columns: repeat(2, 1fr); }
  .db-kpis .db-read { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dash { padding: 14px; }
  .db-row, .dash.compact .db-row { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 8px; }
  .db-row > .db-sys { display: none; }
  .db-row > .db-g { grid-column: 1 / -1; }
  .db-head > span:nth-child(3), .db-head > span:nth-child(4) { display: none; }
  .dash.compact .db-kpis { grid-template-columns: repeat(2, 1fr); }
}
.dash-block { padding-top: 80px; }

/* security page: icons on the six rules */
.trust.icons .t svg { display: block; width: 32px; height: 32px; margin-bottom: 14px; fill: none; stroke: var(--lake-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .db-live i, .db-lakes i.now, .db-lakes i.now.up::after, .db-row.sync, .db-feed li, .fw-panel { animation: none; } }
@media (max-width: 640px) { .foot-in { flex-wrap: wrap; justify-content: center; height: auto; padding-block: 24px; } .foot-links { flex-wrap: wrap; justify-content: center; gap: 10px 18px; } }

/* ---------- plainer look (Ray, 11 Nov): one type family, no rings, green as a third colour ---------- */
:root {
  --serif: "Hanken Grotesk", system-ui, sans-serif; /* every heading now uses the same family as the body */
  --ok: #5CC99A;      /* third colour: compliant, checked, live */
  --ok-2: #2F9E6E;    /* the same on the light bands */
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }
.block h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.12; }
.best b, .stage h3, .why-k, .flow b, .rv-steps b, .fw-cols h3, .chart figcaption b, .t b, .method b { font-weight: 600; letter-spacing: -.015em; }
.best b { font-size: 21px; }
.stage h3 { font-size: 30px; }
.flow b { font-size: 18px; }
.rv-steps b { font-size: 19px; }
.fw-cols h3 { font-size: 19px; }
.chart figcaption b { font-size: 26px; }
.t b { font-size: 20px; }
.db-kpis b { font-family: var(--num); font-weight: 500; font-size: 24px; }
.fw-panel h2 { font-size: clamp(28px, 3vw, 40px); }

/* hero: flat background, text on the left, the product on the right */
.hero { min-height: 0; padding-bottom: 0; background: linear-gradient(180deg, #0B1824 0%, var(--deep) 70%); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; text-align: left; padding-top: 170px; }
.hero h1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.06; max-width: 620px; margin: 0; }
.hero-in .lead { margin-left: 0; margin-right: 0; max-width: 540px; }
.hero-in .hero-cta { justify-content: flex-start; }
.tagline { font-size: 13px; letter-spacing: .2em; margin-bottom: 26px; }
.hero-dash { box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.hero-foot { margin-top: 90px; padding-bottom: 70px; }
.page-hero { background: linear-gradient(180deg, #0B1824 0%, var(--deep) 80%); }
.page-hero h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.08; }
.contact { background: var(--deep); border-top: 1px solid var(--line); }
.contact h2 { font-size: clamp(32px, 4vw, 54px); }

/* the third colour, used only for what is compliant, checked or live */
.frameworks svg { stroke: var(--ok); }
.ticks li::before, .fw-cols li::before { border-color: var(--ok); }
.best .art .ok { stroke: var(--ok-2); }
.db-live { color: var(--ok); } .db-live i { background: var(--ok); }
.db-lakes i.now.up { background: linear-gradient(90deg, var(--ok), rgba(92, 201, 154, .25)); }
.fw-cols .d3 { background: var(--ok); }
.flow li:last-child svg { stroke: var(--ok); border-color: rgba(92, 201, 154, .35); }
.rv-steps li:last-child.lit .rv-ico { border-color: var(--ok-2); } .rv-steps li:last-child.lit .rv-ico svg { stroke: var(--ok); }
.tool.more { color: var(--ok); border-color: rgba(92, 201, 154, .4); }
.tool.more i { border-color: var(--ok); } .tool.more i::before, .tool.more i::after { background: var(--ok); }
.ticks.big li { font-size: 19px; color: var(--text); padding-block: 4px; }
#group .split { align-items: center; }

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 150px; }
  .hero-foot { margin-top: 56px; padding-bottom: 50px; }
}
#group .link { display: inline-block; margin-top: 26px; }
@media (max-width: 1000px) { .hero-in .hero-cta { justify-content: flex-start; align-items: flex-start; } }

/* ---------- menu band: its own colour, an arrow on each tab, a quick overview on hover ---------- */
.nav, .nav.solid { background: #12212E; border-bottom: 1px solid #22384A; backdrop-filter: none; }
.nav.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
section[id] { scroll-margin-top: 100px; }
.tabs { gap: 6px; align-items: stretch; }
.tab { position: relative; display: flex; align-items: center; }
.tab > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 6px; color: #B9C6D1; transition: background .2s, color .2s; }
.tab > a:hover, .tab:focus-within > a { color: var(--text); background: rgba(255, 255, 255, .06); }
.tab > a[aria-current="page"] { color: var(--text); }
.tab > a[aria-current="page"]::after { left: 14px; right: 14px; bottom: 2px; }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .25s var(--ease); }
.tab:hover .chev, .tab:focus-within .chev { transform: rotate(180deg); opacity: 1; }
.menu { position: absolute; top: 100%; left: 0; width: 330px; margin-top: 12px; padding: 20px 22px 18px; background: #12212E; border: 1px solid #22384A; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; z-index: 30; }
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps hover alive across the gap */
.tab:hover .menu, .tab:focus-within .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.menu p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.menu ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu li a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 6px; font-size: 14.5px; color: var(--text); text-decoration: none; }
.menu li a:hover { background: rgba(255, 255, 255, .06); }
.menu-go { display: inline-block; padding-top: 12px; border-top: 1px solid #22384A; width: 100%; font-size: 13.5px; color: var(--lake); text-decoration: none; }
.menu-go:hover { color: var(--text); }
.tab:last-child .menu { left: auto; right: 0; }
@media (max-width: 1000px) {
  .menu, .chev { display: none; }
  .tab > a { padding: 6px 0; }
  .nav .tabs { gap: 22px; }
}

/* hero: text left, the frameworks stacked on the right */
.hero { background: var(--deep); }
.hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding-top: 180px; padding-bottom: 110px; align-items: center; }
.frameworks.side { grid-template-columns: 1fr 1fr; gap: 12px; }
.frameworks.side li { display: block; padding: 0; background: var(--ink); }
.frameworks.side li a { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 18px; text-decoration: none; color: inherit; border-radius: 6px; transition: background .2s; }
.frameworks.side li a:hover { background: var(--ink-2); }
.frameworks.side li.more { border-style: dashed; background: transparent; }
.frameworks.side li.more a { grid-template-columns: 1fr; }
.frameworks.side li.more b { font-size: 14px; color: var(--muted); font-weight: 500; }
.frameworks.side li.more span { color: var(--ok); font-size: 13px; }

/* what we do in three lines */
.overview { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ov { display: grid; grid-template-columns: repeat(3, 1fr); }
.ov-i { padding: 44px 36px 46px 0; display: flex; flex-direction: column; gap: 6px; }
.ov-i + .ov-i { padding-left: 36px; border-left: 1px solid var(--line); }
.ov-n { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ok); font-weight: 600; }
.ov-i b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ov-i p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 320px; }

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 150px; padding-bottom: 70px; gap: 40px; }
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov-i, .ov-i + .ov-i { padding: 26px 0; border-left: 0; }
  .ov-i + .ov-i { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) { .frameworks.side { grid-template-columns: 1fr; } .frameworks.side li:last-child { grid-column: auto; } }
@media (max-width: 640px) { .frameworks.side { grid-template-columns: 1fr 1fr; gap: 8px; } .frameworks.side li a { grid-template-columns: 1fr; padding: 14px; row-gap: 6px; } .frameworks.side svg { grid-row: auto; width: 28px; height: 28px; } .frameworks.side b { font-size: 14px; } .frameworks.side li.more { grid-column: 1 / -1; } }

/* ==========================================================================
   Light theme (Ray, 11 Nov): the soft mist band is the base, white sections,
   navy text, lake blue accent, green for what is compliant or live.
   The product dashboard and the closing band stay dark, like a screenshot.
   ========================================================================== */
:root {
  --deep: #F4F7F9;   /* alternate band */
  --ink: #FFFFFF;    /* page and cards */
  --ink-2: #F1F5F8;  /* raised surface */
  --line: #D6DFE6;
  --text: #0F1C27;
  --muted: #4E5D69;
  --faint: #6A7A87;
  --lake: #2A78C2;
  --lake-2: #1F5F9E;
  --ok: #2F9E6E;
  --ok-2: #237F58;
}
body { background: var(--ink); color: var(--text); font-weight: 400; }
.btn { background: var(--text); color: #fff; border-radius: 6px; }
.btn:hover { background: #1F3447; }
.link:hover { color: var(--text); }

/* menu band: white, its own line underneath */
.nav, .nav.solid { background: #fff; border-bottom: 1px solid var(--line); }
.nav.scrolled { box-shadow: 0 8px 24px rgba(15, 28, 39, .07); }
.tab > a { color: #33424E; }
.tab > a:hover, .tab:focus-within > a { background: rgba(15, 28, 39, .05); }
.menu { background: #fff; border-color: var(--line); box-shadow: 0 24px 50px rgba(15, 28, 39, .14); }
.menu li a:hover { background: var(--ink-2); }
.menu-go { border-top-color: var(--line); }
.tagline > span { background: linear-gradient(90deg, #1F5F9E 0%, #2A78C2 30%, #0F1C27 50%, #2A78C2 70%, #1F5F9E 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* headers on the mist band */
.hero, .page-hero { background: var(--mist); }
.hero .lead, .page-hero .lead { color: #33424E; }
.frameworks li, .frameworks.side li { background: #fff; border-color: #C9D4DD; }
.frameworks.side li a:hover { background: #F7FAFC; }
.frameworks.side li.more { background: transparent; border-color: #AFC0CD; }
.frameworks b { color: var(--text); }
.overview { background: #fff; }

/* sections */
.deep { background: var(--deep); }
.tool { background: #fff; color: var(--text); }
.tool i { background: #33424E; }
.tool i.gen { background: none; color: #33424E; border-color: #8A9AA7; }
.gets li { background: #fff; }
.fw-panel { background: #fff; }
.fw-panel.own { background: linear-gradient(160deg, #EAF2FA, #fff 70%); border-color: #BFD3E6; }
.fw-tabs button:hover { background: #fff; }
.fw-tabs button[aria-selected="true"] { background: #fff; }
.rv-steps li.lit .rv-ico { background: #EAF2FA; }
.rv-steps li.now .rv-ico { box-shadow: 0 0 0 7px rgba(42, 120, 194, .12); }
.flow svg { background: #fff; }
.foot { background: #fff; }

/* the dashboard keeps its dark screen */
.dash { --text: #E9EEF2; --muted: #93A3B0; --faint: #6F8394; --line: #1A2A38; --lake: #7DB5E8; --lake-2: #2A78C2; --ok: #5CC99A; --ink-2: #0F1C27; color: var(--text); box-shadow: 0 30px 70px rgba(15, 28, 39, .25); }

/* closing band: dark navy so the page ends firmly */
.contact { background: #0F1C27; --text: #E9EEF2; --muted: #A9B8C4; --faint: #7F92A1; --line: #22384A; --lake: #7DB5E8; color: var(--text); border-top: 0; }
.contact .btn { background: #E9EEF2; color: #0F1C27; }
.contact .btn:hover { background: #fff; }

/* ---------- investors view: text scrolls on the left, the screen stays and drills in on the right ---------- */
.iv-block { padding-top: 110px; padding-bottom: 60px; }
.iv { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 70px; align-items: start; }
.iv-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s; }
.iv-step.on { opacity: 1; }
.iv-step:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 40px; }
.iv-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--lake); margin-bottom: 14px; }
.iv-step h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.iv-step p { margin: 14px 0 0; font-size: 17px; color: var(--muted); max-width: 460px; }
.iv-step .ticks { margin: 22px 0 0; }
.iv-inline { display: none; }

.iv-screen { position: sticky; top: 130px; height: 590px; display: flex; flex-direction: column; background: linear-gradient(170deg, #0E1E2C, #08121B); border: 1px solid #1E3242; border-radius: 14px; box-shadow: 0 30px 70px rgba(15, 28, 39, .28); overflow: hidden;
  --text: #E9EEF2; --muted: #93A3B0; --faint: #6F8394; --line: #1A2A38; --lake: #7DB5E8; --lake-2: #2A78C2; --ok: #5CC99A; color: var(--text); font-size: 14px; }
.iv-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.iv-dots { display: flex; gap: 6px; } .iv-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2A3D4E; }
.iv-crumb { flex: 1; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-views { position: relative; flex: 1; }
.iv-view { position: absolute; inset: 0; padding: 22px 24px; overflow: hidden; opacity: 0; transform: scale(.97) translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: none; }
.iv-view.on { opacity: 1; transform: none; pointer-events: auto; }
.iv-h { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.iv-proj { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.iv-pt b { display: block; font-size: 16px; font-weight: 600; } .iv-pt small { font-size: 12.5px; color: var(--faint); }
.iv-mix { display: flex; gap: 3px; height: 8px; } .iv-mix i { border-radius: 4px; }
.iv-mix .s, .iv-key .s { background: #93A3B0; } .iv-mix .a, .iv-key .a { background: #7DB5E8; } .iv-mix .f, .iv-key .f { background: #B9A4E8; } .iv-mix .u, .iv-key .u { background: #5CC99A; }
.iv-flag { font-size: 12px; color: #F2A3A3; border: 1px solid rgba(229, 124, 124, .4); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.iv-ok { font-size: 12px; color: var(--ok); border: 1px solid rgba(92, 201, 154, .35); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.iv-key { display: flex; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--muted); } .iv-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dash.flat { background: none; border: 0; box-shadow: none; padding: 0; }
.dash.flat .db-top { display: none; }
.dash.flat .db-kpis { margin-top: 0; }
.iv-co b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .iv-co small { color: var(--faint); font-size: 13px; }
.iv-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 16px 0; }
.iv-rail span { font-size: 11.5px; color: var(--faint); padding-top: 10px; border-top: 4px solid var(--line); }
.iv-rail span.done { border-top-color: #2E5F8C; color: var(--muted); }
.iv-rail span.now { border-top-color: var(--lake); color: var(--text); font-weight: 600; }
.iv-rail span.now.up { border-top-color: var(--ok); }
.iv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.iv-tiles div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, .03); }
.iv-tiles b { display: block; font-family: var(--num); font-weight: 500; font-size: 20px; }
.iv-tiles span { font-size: 11.5px; color: var(--muted); }
.iv-tiles .red b { color: #F2A3A3; }
.iv-bars div { display: grid; grid-template-columns: 150px 1fr 24px; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.iv-bars i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lake-2), var(--lake)); width: var(--w); }
.iv-bars b { font-family: var(--num); font-weight: 500; color: var(--text); text-align: right; }
.iv-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.iv-docs span { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; }
.iv-docs .ok { color: var(--ok); border-color: rgba(92, 201, 154, .35); }
.iv-docs .next { color: var(--lake); border-color: rgba(125, 181, 232, .35); }
.iv-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iv-log li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--muted); }
.iv-log b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lake); font-weight: 600; }
.iv-log li.ok b { color: var(--ok); }

@media (max-width: 1000px) {
  .iv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .iv > .iv-screen { display: none; }
  .iv-step, .iv-step:first-child { min-height: 0; opacity: 1; padding: 0 0 56px; justify-content: flex-start; }
  .iv-inline { display: block; margin-top: 26px; }
  .iv-mini { position: static; height: auto; }
  .iv-mini .iv-view { position: static; opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .iv-proj { grid-template-columns: minmax(0, 1fr) auto; } .iv-proj .iv-mix { grid-column: 1 / -1; order: 3; }
  .iv-tiles { grid-template-columns: 1fr 1fr; }
  .iv-bars div { grid-template-columns: 110px 1fr 22px; }
  .iv-view { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .iv-view, .iv-step { transition: none; } }
/* privacy page on the light theme */
.legal-body p, .legal-body li, .legal-body td { color: var(--muted); }
.draft-note { border-color: #D9C27A; background: #FBF5E3; color: #6B520C; }
mark.tbc { background: #FBF0CF; color: #6B520C; }

/* ---------- home header: soft grey with a light vignette, brighter in the middle (Ray chose option A) ---------- */
.page-home .hero { background: radial-gradient(120% 90% at 35% 40%, #F7F9FB 0%, #E8EEF2 55%, #D6DFE6 100%); }

/* the grey bands further down: a touch lighter, with a soft fade */
.paper { background: linear-gradient(180deg, #EEF2F5 0%, #E1E8ED 100%); }

/* ---------- three-line band: a small drawing on each ---------- */
.ov-ico { width: 40px; height: 40px; margin-bottom: 14px; fill: none; stroke: var(--lake); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-ico .g { stroke: var(--ok); stroke-width: 2.2; }

/* ---------- home: the investors view playing on its own ---------- */
.iv-home { align-items: center; }
.iv-screen.auto { position: relative; top: auto; height: 560px; }
.iv-screen.auto .iv-views { flex: 1; }
.iv-crumb span { transition: color .2s; }
.iv-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; transform: translate(70%, 60%); transition: transform 1s cubic-bezier(.45, .05, .25, 1); pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.iv-cursor svg { width: 22px; height: 22px; fill: #fff; stroke: #0F1C27; stroke-width: 1.2; stroke-linejoin: round; }
.iv-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7DB5E8; opacity: 0; transform: scale(.4); }
.iv-cursor.click::after { animation: ivclick .45s ease-out; }
@keyframes ivclick { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
.iv-hit { background: rgba(125, 181, 232, .14) !important; outline: 1px solid rgba(125, 181, 232, .5); border-radius: 6px; color: #fff; }
.iv-progress { display: flex; gap: 6px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.iv-progress span { flex: 1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-top: 8px; border-top: 3px solid var(--line); transition: color .3s, border-color .3s; }
.iv-progress span.on { color: var(--text); border-top-color: var(--lake); }
.lead-sm.dark { color: var(--muted); margin: 18px 0 0; font-size: 17px; }
@media (max-width: 1000px) { .iv-screen.auto { height: 600px; } }
@media (max-width: 640px) {
  .iv-screen.auto { height: 640px; font-size: 13px; }
  .iv-screen.auto .iv-view { padding: 14px; }
  .iv-progress span { font-size: 9.5px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) { .iv-cursor { display: none; } }
.iv-screen.auto { height: 630px; }
@media (max-width: 640px) { .iv-screen.auto { height: 700px; } }
.iv > .iv-screen { height: 650px; top: 110px; }

/* the longer company name still fits one row with the button on a phone */
@media (max-width: 480px) { .nav .brand { font-size: 15px; gap: 8px; letter-spacing: 0; } .nav .brand svg { width: 22px; height: 22px; } .nav .btn.small { padding: 8px 12px; font-size: 13px; } .nav-in { gap: 10px 12px; } }

/* homepage headline: the second half in the compliant green (12 Nov) */
.hero h1 .h1-keep { color: #1F7A52; }