/* AIV microsite. Layout: one 1120px column; product visuals sit in framed app windows; teal = product, gold = TrustBridge advisory and the book */
/* Fonts are self-hosted (no third-party font request, same rule as the main site). */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
:root{
  --bg:#ffffff; --soft:#f3f6f9; --surface:#ffffff; --ink:#14202e; --mut:#5a6878; --line:#e1e6ec;
  --navy:#1f3a5f; --teal:#0e7c6b; --tealsoft:#e5f2ee; --gold:#9a6b00; --goldsoft:#f7f0dd;
  --warn:#8a5a00; --bad:#b42318; --badsoft:#fdecea; --app:#f1f4f7; --appline:#d5dce4; --onteal:#ffffff;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,serif;
  --r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b121d; --soft:#0f1926; --surface:#121d2c; --ink:#e6ebf2; --mut:#9ba8b8; --line:#243347;
  --navy:#93b6e2; --teal:#4fc1a8; --tealsoft:#11302a; --gold:#d8b36a; --goldsoft:#2a2414;
  --warn:#e2b65c; --bad:#f2837a; --badsoft:#3a1714; --app:#0e1724; --appline:#2a3a50; --onteal:#06231d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b121d; --soft:#0f1926; --surface:#121d2c; --ink:#e6ebf2; --mut:#9ba8b8; --line:#243347;
  --navy:#93b6e2; --teal:#4fc1a8; --tealsoft:#11302a; --gold:#d8b36a; --goldsoft:#2a2414;
  --warn:#e2b65c; --bad:#f2837a; --badsoft:#3a1714; --app:#0e1724; --appline:#2a3a50; --onteal:#06231d; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
a{color:var(--teal)}
img{max-width:100%}
.in{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:64px}
.band.soft{background:var(--soft)}
.stack{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600}
.lead{font-size:17px;color:var(--mut);max-width:66ch}
.mut{color:var(--mut)}
.cap{font-size:12px;color:var(--mut)}
h1.big{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(28px,3.6vw,42px)}
h2.sec{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(23px,2.6vw,30px)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr .in{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;padding-block:12px}
.brand{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;line-height:1.15;text-decoration:none;margin-right:auto}
.brand .mark{grid-row:1/3;grid-column:1;display:block}
.brand .mark rect{fill:var(--teal)}
.brand .mark path{fill:none;stroke:var(--onteal);stroke-width:2.2;stroke-linecap:round}
.brand b,.brand small{grid-column:2}
.brand b{font-size:19px;color:var(--navy);letter-spacing:.02em}
.brand small{font-size:11px;color:var(--mut)}
.nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.nav a{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--teal);font-weight:600}
.nav a.ext{color:var(--gold)}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;font-weight:600;font-size:14.5px;text-decoration:none;border:1px solid var(--teal);line-height:1.3;cursor:pointer;font-family:inherit;background:transparent;color:var(--teal)}
.btn.p{background:var(--teal);color:var(--onteal)}
.btn.g{border-color:var(--gold);color:var(--gold)}
.btn:hover{filter:brightness(1.06)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--warn);background:var(--goldsoft);border-radius:20px;padding:3px 12px;align-self:flex-start}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
/* grids */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;padding-block:56px 64px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hero>*,.grid>*,.two>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.card h3{font-size:16.5px}
.pricing .card p{margin-bottom:8px}
.card .k{font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.price{font-family:var(--serif);font-size:28px;color:var(--navy);font-weight:600}
.steps{counter-reset:s}
.steps .card::before{counter-increment:s;content:counter(s);font-family:var(--mono);color:var(--teal);font-size:14px}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.facts span{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
ul.clean{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.goldband{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;border:1px solid var(--gold);border-radius:var(--r);padding:24px;background:var(--surface)}
.goldband>div{flex:1 1 380px;min-width:0}
.goldband h3{color:var(--gold);font-size:19px}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";flex:none;font-family:var(--mono);font-size:18px;line-height:1;color:var(--teal);font-weight:500}
details[open] summary::after{content:"\2013"}
details p{margin-top:8px;color:var(--mut)}
.pill{font-size:11px;border-radius:20px;padding:2px 9px;font-weight:500;white-space:nowrap;display:inline-block}
.pill.ok{background:var(--tealsoft);color:var(--teal)}
.pill.wait{background:var(--goldsoft);color:var(--warn)}
.pill.dr{background:var(--appline);color:var(--ink)}
.pill.bad{background:var(--badsoft);color:var(--bad)}
.ftr{border-top:1px solid var(--line);background:var(--soft);padding-block:28px;font-size:13px;color:var(--mut)}
.ftr .in{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.ftr a{color:var(--mut)}
/* app window */
.app{background:var(--app);border:1px solid var(--appline);border-radius:10px;overflow:hidden;font-size:13px;box-shadow:0 18px 40px -26px rgba(15,30,50,.55)}
.apphead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--appline);font-family:var(--mono);font-size:11.5px;color:var(--mut);flex-wrap:wrap}
.apphead .dots{display:flex;gap:6px}
.apphead .dots i{width:9px;height:9px;border-radius:50%;background:var(--appline);display:block}
.appbody{padding:14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.tier{background:var(--navy);color:var(--surface);font-weight:600;border-radius:4px;padding:3px 9px;font-size:12px;white-space:nowrap}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini td,table.mini th{padding:6px 4px;border-bottom:1px solid var(--appline);text-align:left}
table.mini th{color:var(--mut);font-weight:500;font-size:11px}
/* ---------- workflow player ---------- */
.wf-steps{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--appline);background:var(--surface)}
.wf-step{position:relative;border:0;background:transparent;font:inherit;font-size:12px;color:var(--mut);padding:10px 4px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.wf-step b{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--appline);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:11px;background:var(--app);transition:background .3s,border-color .3s,color .3s}
.wf-step.done b{background:var(--tealsoft);border-color:var(--teal);color:var(--teal)}
.wf-step.on{color:var(--ink);font-weight:600}
.wf-step.on b{background:var(--teal);border-color:var(--teal);color:var(--onteal)}
.wf-step .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:transparent}
.wf-step.on .bar{background:var(--teal);transform-origin:left;animation:fill var(--dur,4.6s) linear both}
.wf.paused .wf-step.on .bar{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* all panels share one grid cell, so the stage is always as tall as the tallest panel and never jumps between steps */
.wf-stage{min-height:262px;position:relative;display:grid}
.wf-panel{grid-area:1/1;padding:16px;display:flex;flex-direction:column;gap:10px;visibility:hidden}
.wf-panel.on{visibility:visible}
.wf-panel h4{font-size:13.5px}
.seq>*{opacity:1}
.run .seq>*{animation:rise .45s ease both;animation-delay:calc(var(--i,0)*.42s)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qrow{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--appline);border-radius:6px;padding:7px 10px}
.qrow span{min-width:0}
.ans{font-family:var(--mono);font-size:11.5px;font-weight:500;border-radius:4px;padding:1px 8px;background:var(--tealsoft);color:var(--teal)}
.ans.no{background:var(--goldsoft);color:var(--warn)}
.result{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed var(--appline);padding-top:10px;flex-wrap:wrap}
.pkg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pkg div{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--appline);border-radius:6px;padding:7px 9px;min-width:0}
.tick{width:16px;height:16px;border-radius:50%;background:var(--teal);flex:none;position:relative}
.tick::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--onteal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.doc{background:var(--surface);border:1px solid var(--appline);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:7px}
.ln{height:7px;border-radius:4px;background:var(--appline);width:var(--w,90%)}
.run .ln{animation:type .7s ease-out both;animation-delay:calc(var(--i,0)*.32s);transform-origin:left}
@keyframes type{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sigbox{background:var(--surface);border:1px solid var(--appline);border-radius:6px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;position:relative}
.sigbox dt{color:var(--mut)}
.sigbox dd{margin:0;font-family:var(--mono);font-size:12px}
.stamp{position:absolute;right:12px;top:10px;border:2px solid var(--teal);color:var(--teal);font-weight:700;font-size:12px;letter-spacing:.1em;padding:3px 9px;border-radius:5px;transform:rotate(-8deg)}
.run .stamp{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:2.1s}
@keyframes stamp{from{opacity:0;transform:rotate(-8deg) scale(1.8)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.mon svg{width:100%;height:auto;display:block}
.mon .ln-live{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.run .mon .ln-live{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mon .bandv{fill:var(--tealsoft)}
.mon .thr{stroke:var(--warn);stroke-dasharray:4 4;stroke-width:1.2}
.mon text{fill:var(--mut);font-size:10px;font-family:var(--mono)}
.mon .hot{fill:var(--bad)}
.run .mon .hot{animation:rise .4s ease both 2.7s}
.evt{display:flex;gap:8px;align-items:flex-start;background:var(--badsoft);color:var(--bad);border-radius:6px;padding:8px 10px;font-size:12.5px}
.run .evt{animation:rise .4s ease both 2.9s}
.wf-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 14px;border-top:1px solid var(--appline);flex-wrap:wrap}
.wf-toggle{border:1px solid var(--appline);background:var(--surface);color:var(--ink);border-radius:5px;font:inherit;font-size:12px;padding:3px 10px;cursor:pointer}
/* ---------- swimlane ---------- */
.lanes{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;overflow:hidden}
.lane-grid{display:grid;grid-template-columns:110px repeat(7,minmax(0,1fr));grid-template-rows:auto auto;gap:10px 10px;align-items:stretch}
.lane-lab{font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center}
.lane-lab.ai{color:var(--teal)} .lane-lab.hu{color:var(--navy)}
.lc{border:1px dashed var(--line);border-radius:7px;padding:9px 10px;font-size:12.5px;line-height:1.4;background:var(--soft);color:var(--mut);transform:scale(.98);transition:color .45s,transform .45s,border-color .45s,background .45s;display:flex;flex-direction:column;gap:5px;min-width:0}
.lc .who{font-size:10.5px;font-family:var(--mono);color:var(--mut)}
.lc.ai{grid-row:1} .lc.hu{grid-row:2}
.lc.gap{visibility:hidden}
.lc.lit{color:var(--ink);border-style:solid;transform:none;background:var(--surface)}
.lc.lit.ai{border-color:var(--teal)}
.lc.lit.hu{border-color:var(--navy)}
.lc.lit.no{border-color:var(--bad);background:var(--badsoft)}
.lc.now{box-shadow:0 0 0 3px var(--tealsoft)}
.lc.no .x{color:var(--bad);font-weight:600}
.lanes .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--mut)}
/* ---------- classifier ---------- */
.clf{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.clf>*{min-width:0}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:opacity .3s}
.q.off{opacity:.4}
.q p{font-size:15px}
.opts{display:flex;gap:8px}
.opt{border:1px solid var(--appline);background:var(--soft);color:var(--ink);border-radius:6px;font:inherit;font-size:14px;padding:6px 18px;cursor:pointer}
.opt.sel{background:var(--teal);border-color:var(--teal);color:var(--onteal)}
.tierbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:10px;position:sticky;top:90px}
.tierbox .tl{font-family:var(--serif);font-size:30px;color:var(--navy);font-weight:600}
.tierbox.pop{animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.meter i{height:8px;border-radius:3px;background:var(--appline);transition:background .4s}
.meter i.on{background:var(--teal)}
.meter i.on.t3{background:var(--warn)} .meter i.on.t4{background:var(--bad)}
/* ---------- drift ---------- */
.drift{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.drift svg{width:100%;height:auto;display:block}
/* ---------- pilot path ---------- */
.path{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 18px 18px}
.track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.track::before{content:"";position:absolute;left:10%;right:10%;top:13px;height:3px;background:var(--appline);border-radius:2px}
.track .fillbar{position:absolute;left:10%;top:13px;height:3px;background:var(--teal);border-radius:2px;width:0;transition:width .9s ease}
.ms{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:13px;min-width:0}
.ms b{width:29px;height:29px;border-radius:50%;background:var(--surface);border:2px solid var(--appline);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--mut);transition:all .4s;z-index:1}
.ms.done b{border-color:var(--teal);color:var(--teal);background:var(--tealsoft)}
.ms.on b{background:var(--teal);border-color:var(--teal);color:var(--onteal);box-shadow:0 0 0 5px var(--tealsoft)}
.ms .t{font-weight:600}
.ms .d{color:var(--mut);font-size:12.5px}
.path>.cap{margin-top:12px}
.calls{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
/* ---------- audit log ---------- */
.log{background:var(--app);border:1px solid var(--appline);border-radius:10px;overflow:hidden}
.log ol{list-style:none;margin:0;padding:6px 0}
.log li{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:9px 14px;font-size:13px;border-left:3px solid transparent;color:var(--mut);transition:color .4s,background .4s,border-color .4s}
.log li>*{min-width:0}
.log li time{font-family:var(--mono);font-size:12px;color:var(--mut)}
.log li.lit{color:var(--ink)}
.log li.now{background:var(--surface);border-left-color:var(--teal)}
.log li.no.now{border-left-color:var(--bad)}
/* forms */
form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
form.f>*{min-width:0}
form.f label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:500}
form.f .full{grid-column:1/-1}
form.f input,form.f select,form.f textarea{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--appline);border-radius:6px;background:var(--surface);color:var(--ink);width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.formmsg{font-size:13.5px}
.formmsg .err{color:var(--bad)}
@media (min-width:1100px){.grid.steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1099px){.grid.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.grid.steps{grid-template-columns:1fr}}
@media (min-width:861px){.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .hdr .in{padding-block:8px;gap:6px 12px}
  .hdr .btn{padding:7px 12px;font-size:13.5px}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none}
  .hero,.two,.clf{grid-template-columns:1fr}
  .hero{gap:30px;padding-block:36px 44px}
  .band{padding-block:46px}
  .lane-grid{grid-template-columns:1fr;grid-template-rows:none}
  .lane-lab{display:none}
  .lc,.lc.ai,.lc.hu{grid-row:auto!important;grid-column:auto!important}
  .lc.gap{display:none}
  .track{grid-template-columns:1fr;gap:14px}
  .track::before,.track .fillbar{display:none}
  .ms{flex-direction:row;text-align:left;align-items:flex-start}
  .ms b{flex:none}
  form.f{grid-template-columns:minmax(0,1fr)}
  .tierbox{position:static}
  .pkg{grid-template-columns:1fr}
}
@media (max-width:600px){.drift .mon svg{overflow:visible;padding:0 10px 0 24px}.drift .mon text{font-size:18px}}
@media (max-width:480px){.wf-step{font-size:10.5px}.log li{grid-template-columns:52px 1fr}.log li .pill{grid-column:2;justify-self:start}.recid{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lc,.log li{opacity:1;transform:none}
  .mon .ln-live{stroke-dashoffset:0!important}
}