/* Experience case bentos as UI (decided 2026-09-30: interfaces are shown as UI).
   Words are each client's interface copy only; commercial and personal data are
   bars. Drawn originals archived in hichem-os drafts/site/bentos-ui/drawn-archive. */

/* ---------- heineken ---------- */
/* Heineken bento as UI, after the rebuilt Figma case file. Muted base, one lifted part.
   The frame is as wide as the drawing it replaced (--bw units at the page --u); inside it,
   one unit is 1/--bw of the frame. Desktop text is 9 units or more, phone text 8 or more. */
.bu-hk-w{width:100%;display:flex;justify-content:center}
.bu-hk-f{position:relative;flex:0 0 auto;width:calc(var(--bw) * var(--u, 1px));max-width:100%;border-radius:8px;overflow:hidden;background:#E5E9E1;container-type:inline-size;isolation:isolate;font-family:var(--font);color:#1a1a1a;line-height:1.25}
.bu-hk-f--m{display:none}
@media (max-width:899.98px){.bu-hk-f--d{display:none}.bu-hk-f--m{display:block}}
.bu-hk-c{--u:calc(100cqi / var(--bw));position:absolute;inset:0;font-size:calc(var(--u) * 9)}
.bu-hk-c i,.bu-hk-c b{font-style:normal}
.bu-hk-base,.bu-hk-hi{position:absolute;z-index:1;transition:transform 520ms var(--ease-sheet)}
.bu-hk-hi{z-index:2;background:#fff;border-radius:calc(var(--u) * 4);box-shadow:0 0 0 calc(var(--u) * 0.5) rgba(26,26,26,.08),0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06),0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13)}
.cell:hover .bu-hk-hi{transform:translateY(calc(var(--u) * -3))}
.cell:hover .bu-hk-base{transform:translateX(calc(var(--u) * -4))}
@media (prefers-reduced-motion:reduce){.bu-hk-base,.bu-hk-hi{transition:none}}
/* muted base, the screen behind */
.bu-hk-win{background:#f3f3f3;border-radius:calc(var(--u) * 6);box-shadow:0 0 0 calc(var(--u) * 0.5) rgba(26,26,26,.1),0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.06);overflow:hidden}
.bu-hk-win--w{background:#fff}
.bu-hk-mt{color:#a3a3a3;white-space:nowrap}
.bu-hk-mt--h{color:#8c8c8c;font-weight:600}
.bu-hk-cap{color:#a3a3a3;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.bu-hk-bar{display:block;flex:none;height:calc(var(--u) * 5);border-radius:calc(var(--u) * 3);background:#ececec}
.bu-hk-bar--n{height:calc(var(--u) * 7);background:#e2e2e2}
.bu-hk-sq{flex:none;display:block;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:calc(var(--u) * 2);background:#fafafa;box-shadow:0 0 0 calc(var(--u) * 0.5) #efefef}
.bu-hk-card{background:#fff;border-radius:calc(var(--u) * 4);box-shadow:0 0 0 calc(var(--u) * 0.6) #eaeaea}
.bu-hk-row{display:flex;align-items:center;gap:calc(var(--u) * 8);padding:calc(var(--u) * 8) calc(var(--u) * 9)}
.bu-hk-col{display:grid;gap:calc(var(--u) * 4);flex:1;min-width:0}
.bu-hk-bm{flex:none;color:#fff;background:#bddcbd;font-weight:500;padding:calc(var(--u) * 4) calc(var(--u) * 8);border-radius:calc(var(--u) * 4);white-space:nowrap}
.bu-hk-bo{flex:none;color:#a3a3a3;background:#fff;font-weight:500;padding:calc(var(--u) * 4) calc(var(--u) * 8);border-radius:calc(var(--u) * 4);box-shadow:0 0 0 calc(var(--u) * 0.6) #e3e3e3;white-space:nowrap}
.bu-hk-fld{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6);padding:0 calc(var(--u) * 8);height:calc(var(--u) * 22);border-radius:calc(var(--u) * 4);background:#fff;box-shadow:0 0 0 calc(var(--u) * 0.6) #eaeaea;white-space:nowrap}
.bu-hk-chev{flex:none;display:block;width:calc(var(--u) * 4);height:calc(var(--u) * 4);border-right:calc(var(--u) * 1) solid currentColor;border-bottom:calc(var(--u) * 1) solid currentColor;transform:translateY(calc(var(--u) * -1)) rotate(45deg)}
.bu-hk-cb{flex:none;display:block;width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:calc(var(--u) * 1.5);background:#fff;box-shadow:0 0 0 calc(var(--u) * 0.6) #dcdcdc}
.bu-hk-cb--on{background:#bddcbd;box-shadow:none}
/* quantity stepper: minus, the quantity as a bar, plus */
.bu-hk-st{flex:none;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);height:calc(var(--u) * 22);padding:0 calc(var(--u) * 7);border-radius:calc(var(--u) * 4);background:#fff;box-shadow:0 0 0 calc(var(--u) * 0.6) #eaeaea}
.bu-hk-st .bu-hk-bar{width:calc(var(--u) * 12)}
.bu-hk-pm{position:relative;display:block;width:calc(var(--u) * 8);height:calc(var(--u) * 1.4);background:#bddcbd}
.bu-hk-pm--p::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u) * 1.4);height:calc(var(--u) * 8);transform:translate(-50%,-50%);background:inherit}
.bu-hk-st--on .bu-hk-pm{background:#008100}
.bu-hk-st--on .bu-hk-bar{background:#d6d6d6}
/* full colour, the lifted part */
.bu-hk-btn{flex:none;color:#fff;background:#008100;font-weight:500;padding:calc(var(--u) * 5) calc(var(--u) * 9);border-radius:calc(var(--u) * 4);white-space:nowrap;text-align:center}
.bu-hk-bto{flex:none;color:#008100;background:#fff;font-weight:500;padding:calc(var(--u) * 5) calc(var(--u) * 9);border-radius:calc(var(--u) * 4);box-shadow:0 0 0 calc(var(--u) * 0.7) #008100;white-space:nowrap}
.bu-hk-lk{color:#008100;font-weight:500;white-space:nowrap}
.bu-hk-bdg{flex:none;color:#fff;font-weight:600;letter-spacing:.06em;padding:calc(var(--u) * 3) calc(var(--u) * 7);border-radius:calc(var(--u) * 2);white-space:nowrap;text-align:center}
.bu-hk-bdg--pro{background:#286cb7}
.bu-hk-bdg--dis{background:#ffca00;color:#1a1a1a}
.bu-hk-bdg--off{background:#ff7900}
.bu-hk-bdg--com{background:#8f258a}
.bu-hk-bdg--mix{background:#008100}
.bu-hk-x{position:relative;display:block;width:calc(var(--u) * 8);height:calc(var(--u) * 8)}
.bu-hk-x::before,.bu-hk-x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:calc(var(--u) * 1.2);background:#1a1a1a;transform:rotate(45deg)}
.bu-hk-x::after{transform:rotate(-45deg)}
.bu-hk-live-d{--bw:948;aspect-ratio:948/503}
.bu-hk-live-m{--bw:334;aspect-ratio:334/304}
.bu-hk-live-d .bu-hk-base{left:calc(var(--u) * 144);top:calc(var(--u) * 50);width:calc(var(--u) * 668);height:calc(var(--u) * 480);}
.bu-hk-lv-top{display:flex;align-items:center;gap:calc(var(--u) * 14);height:calc(var(--u) * 42);padding:0 calc(var(--u) * 18);background:#fff;border-bottom:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-lv-logo{display:block;flex:none;width:calc(var(--u) * 58);height:calc(var(--u) * 10);border-radius:calc(var(--u) * 2);background:#bddcbd;margin-right:calc(var(--u) * 6)}
.bu-hk-lv-top .bu-hk-fld{margin-left:auto;width:calc(var(--u) * 212);color:#a3a3a3}
.bu-hk-lv-body{display:grid;grid-template-columns:calc(var(--u) * 128) 1fr;gap:calc(var(--u) * 18);padding:calc(var(--u) * 16) calc(var(--u) * 18)}
.bu-hk-lv-fac{display:grid;align-content:start;gap:calc(var(--u) * 8)}
.bu-hk-lv-chip{display:flex;align-items:center;gap:calc(var(--u) * 6);width:max-content;padding:calc(var(--u) * 4) calc(var(--u) * 8);border-radius:calc(var(--u) * 99);box-shadow:0 0 0 calc(var(--u) * 0.6) #bddcbd}
.bu-hk-lv-chip .bu-hk-bar{width:calc(var(--u) * 48);background:#dbeadb}
.bu-hk-lv-fac .bu-hk-cap{margin-top:calc(var(--u) * 8)}
.bu-hk-lv-ck{display:flex;align-items:center;gap:calc(var(--u) * 7)}
.bu-hk-lv-ck .bu-hk-bar{width:calc(var(--u) * 44)}
.bu-hk-lv-main{display:grid;align-content:start;gap:calc(var(--u) * 9)}
.bu-hk-lv-act{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.bu-hk-lv-act > :first-child{margin-right:auto}
.bu-hk-lv-sort{display:flex;align-items:center;justify-content:space-between}
.bu-hk-lv-sort .bu-hk-fld{width:calc(var(--u) * 100);color:#a3a3a3}
.bu-hk-lv-main .bu-hk-row,.bu-hk-lv-main .bu-hk-slot{height:calc(var(--u) * 46)}
.bu-hk-lv-hi{left:calc(var(--u) * 302);top:calc(var(--u) * 233);width:calc(var(--u) * 520);display:flex;align-items:center;gap:calc(var(--u) * 12);padding:calc(var(--u) * 12) calc(var(--u) * 14);font-size:calc(var(--u) * 10)}
.bu-hk-lv-hi .bu-hk-sq{width:calc(var(--u) * 42);height:calc(var(--u) * 42)}
.bu-hk-lv-hi .bu-hk-col{gap:calc(var(--u) * 6)}
.bu-hk-lv-l3{display:flex;align-items:center;gap:calc(var(--u) * 10);margin-top:calc(var(--u) * 2)}
.bu-hk-lv-hi .bu-hk-bdg{font-size:calc(var(--u) * 9)}
.bu-hk-lv-hi .bu-hk-st{height:calc(var(--u) * 30);padding:0 calc(var(--u) * 10);gap:calc(var(--u) * 12)}
.bu-hk-lv-hi .bu-hk-st .bu-hk-bar{width:calc(var(--u) * 18)}
.bu-hk-lv-hi .bu-hk-pm{width:calc(var(--u) * 10);height:calc(var(--u) * 1.6)}
.bu-hk-lv-hi .bu-hk-pm--p::after{width:calc(var(--u) * 1.6);height:calc(var(--u) * 10)}
.bu-hk-live-m .bu-hk-base{left:calc(var(--u) * 18);top:calc(var(--u) * 18);width:calc(var(--u) * 330);height:calc(var(--u) * 300);}
.bu-hk-lvm-top{display:flex;align-items:center;justify-content:center;position:relative;height:calc(var(--u) * 34);background:#fff;border-bottom:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-lvm-top .bu-hk-lv-logo{margin:0}
.bu-hk-lvm-burger{position:absolute;left:calc(var(--u) * 14);top:50%;width:calc(var(--u) * 13);height:calc(var(--u) * 9);transform:translateY(-50%);border-top:calc(var(--u) * 1.2) solid #bdbdbd;border-bottom:calc(var(--u) * 1.2) solid #bdbdbd}
.bu-hk-lvm-burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:calc(var(--u) * 1.2);transform:translateY(-50%);background:#bdbdbd}
.bu-hk-lvm-main{display:grid;align-content:start;gap:calc(var(--u) * 9);padding:calc(var(--u) * 12) calc(var(--u) * 14);font-size:calc(var(--u) * 9)}
.bu-hk-lvm-act{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 7)}
.bu-hk-lvm-act > span{text-align:center;padding:calc(var(--u) * 6) 0}
.bu-hk-lvm-act .bu-hk-bo{box-shadow:0 0 0 calc(var(--u) * 0.6) #bddcbd;color:#9fc79f}
.bu-hk-lvm-card{display:grid;gap:calc(var(--u) * 8);padding:calc(var(--u) * 9) calc(var(--u) * 10);height:calc(var(--u) * 84)}
.bu-hk-lvm-card > .bu-hk-row{padding:0}
.bu-hk-lvm-card .bu-hk-st{justify-self:end}
.bu-hk-lvm-main .bu-hk-slot{height:calc(var(--u) * 84)}
.bu-hk-lvm-hi{left:calc(var(--u) * 24);top:calc(var(--u) * 107);width:calc(var(--u) * 292);display:grid;gap:calc(var(--u) * 8);padding:calc(var(--u) * 10) calc(var(--u) * 12);font-size:calc(var(--u) * 9.5)}
.bu-hk-lvm-hi > .bu-hk-row{padding:0;align-items:flex-start}
.bu-hk-lvm-hi .bu-hk-sq{width:calc(var(--u) * 32);height:calc(var(--u) * 32)}
.bu-hk-lvm-hi .bu-hk-col{gap:calc(var(--u) * 5)}
.bu-hk-lvm-hi .bu-hk-bdg{justify-self:start;font-size:calc(var(--u) * 9)}
.bu-hk-lvm-ft{display:flex;justify-content:space-between;align-items:center;padding-top:calc(var(--u) * 8);border-top:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-lvm-hi .bu-hk-st{height:calc(var(--u) * 26);gap:calc(var(--u) * 12);padding:0 calc(var(--u) * 9)}
.bu-hk-warn-d{--bw:603;aspect-ratio:603/255}
.bu-hk-warn-m{--bw:334;aspect-ratio:334/240}
.bu-hk-wn-hd{display:flex;align-items:center;height:calc(var(--u) * 24);padding:0 calc(var(--u) * 12);background:#fafafa;border-bottom:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-wn-tabs{display:flex;gap:calc(var(--u) * 16);padding:calc(var(--u) * 10) calc(var(--u) * 14) 0}
.bu-hk-wn-tabs .is-on{color:#6f6f6f;font-weight:500}
.bu-hk-wn-list{display:grid;gap:calc(var(--u) * 7);padding:calc(var(--u) * 10) calc(var(--u) * 14)}
.bu-hk-wn-list .bu-hk-row{height:calc(var(--u) * 42)}
.bu-hk-warn-d .bu-hk-base{left:calc(var(--u) * 86);top:calc(var(--u) * 24);width:calc(var(--u) * 384);height:calc(var(--u) * 250);}
.bu-hk-wn-hi{left:calc(var(--u) * 258);top:calc(var(--u) * 116);display:flex;gap:calc(var(--u) * 7);padding:calc(var(--u) * 9);font-size:calc(var(--u) * 9.5)}
.bu-hk-wn-hi .bu-hk-bdg{padding:calc(var(--u) * 5) calc(var(--u) * 8)}
.bu-hk-warn-m .bu-hk-base{left:calc(var(--u) * 18);top:calc(var(--u) * 18);width:calc(var(--u) * 262);height:calc(var(--u) * 240);}
.bu-hk-warn-m .bu-hk-wn-list{padding:calc(var(--u) * 10) calc(var(--u) * 12)}
.bu-hk-wnm-hi{left:calc(var(--u) * 116);top:calc(var(--u) * 104);width:calc(var(--u) * 200);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 7);padding:calc(var(--u) * 9);font-size:calc(var(--u) * 9.5)}
.bu-hk-wnm-hi .bu-hk-bdg{padding:calc(var(--u) * 6) calc(var(--u) * 4)}
.bu-hk-badge-d{--bw:295;aspect-ratio:295/255}
.bu-hk-badge-m{--bw:150;aspect-ratio:150/232}
.bu-hk-bg{display:grid;align-content:start;gap:calc(var(--u) * 8);padding:calc(var(--u) * 14)}
.bu-hk-bg .bu-hk-row{height:calc(var(--u) * 40)}
.bu-hk-badge-d .bu-hk-base{left:calc(var(--u) * 30);top:calc(var(--u) * 20);width:calc(var(--u) * 280);height:calc(var(--u) * 250);}
.bu-hk-sw{display:grid;gap:calc(var(--u) * 8);padding:calc(var(--u) * 10);background:#fafafa;font-size:calc(var(--u) * 9.5)}
.bu-hk-sw__m{font-weight:500;line-height:1.3}
.bu-hk-sw .bu-hk-fld{color:#6f6f6f;height:calc(var(--u) * 24)}
.bu-hk-sw__alt{display:grid;background:#fff;border-radius:calc(var(--u) * 4);box-shadow:0 0 0 calc(var(--u) * 0.6) #eaeaea}
.bu-hk-sw__alt > div{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);padding:calc(var(--u) * 7) calc(var(--u) * 8)}
.bu-hk-sw__alt > div + div{border-top:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-sw__alt .bu-hk-col .bu-hk-bar{background:#dedede}
.bu-hk-bg-hi{left:calc(var(--u) * 14);top:calc(var(--u) * 74);width:calc(var(--u) * 262);}
.bu-hk-badge-m .bu-hk-base{left:calc(var(--u) * 12);top:calc(var(--u) * 12);width:calc(var(--u) * 150);height:calc(var(--u) * 230);}
.bu-hk-badge-m .bu-hk-bg{padding:calc(var(--u) * 10)}
.bu-hk-bgm-hi{left:calc(var(--u) * 6);top:calc(var(--u) * 40);width:calc(var(--u) * 138);}
.bu-hk-bgm-hi.bu-hk-sw{gap:calc(var(--u) * 6);padding:calc(var(--u) * 7);font-size:calc(var(--u) * 9)}
.bu-hk-bgm-hi .bu-hk-fld{height:calc(var(--u) * 21);padding:0 calc(var(--u) * 6)}
.bu-hk-bgm-hi .bu-hk-sw__alt > div{display:grid;justify-content:stretch;gap:calc(var(--u) * 5);padding:calc(var(--u) * 6)}
.bu-hk-bgm-hi .bu-hk-btn{font-size:calc(var(--u) * 9);padding:calc(var(--u) * 4) calc(var(--u) * 6)}
.bu-hk-nl-d{--bw:282;aspect-ratio:282/195}
.bu-hk-nl-m{--bw:150;aspect-ratio:150/232}
.bu-hk-lc{background:#fff;overflow:hidden}
.bu-hk-lc__hd{display:flex;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 20);padding:0 calc(var(--u) * 8);background:#fafafa;border-bottom:calc(var(--u) * 0.6) solid #eaeaea}
.bu-hk-lc__hd .bu-hk-bar:last-child{margin-left:auto}
.bu-hk-grip{flex:none;display:block;width:calc(var(--u) * 8);height:calc(var(--u) * 6);border-top:calc(var(--u) * 1) solid #c9c9c9;border-bottom:calc(var(--u) * 1) solid #c9c9c9;position:relative}
.bu-hk-grip::after{content:"";position:absolute;left:0;right:0;top:50%;height:calc(var(--u) * 1);transform:translateY(-50%);background:#c9c9c9}
.bu-hk-lc__img{height:calc(var(--u) * 70);margin:calc(var(--u) * 8);border-radius:calc(var(--u) * 2);background:#fafafa}
.bu-hk-lc__tx{display:grid;gap:calc(var(--u) * 5);padding:0 calc(var(--u) * 8)}
.bu-hk-lc__tx > span{display:flex;align-items:center;gap:calc(var(--u) * 5)}
.bu-hk-lc__ft{display:flex;justify-content:flex-end;padding:calc(var(--u) * 8)}
.bu-hk-nl-d .bu-hk-base{left:calc(var(--u) * 18);top:calc(var(--u) * 16);width:calc(var(--u) * 152);height:calc(var(--u) * 196);}
.bu-hk-ln{display:grid;gap:calc(var(--u) * 6);padding:calc(var(--u) * 10) calc(var(--u) * 11);border-radius:calc(var(--u) * 8);font-size:calc(var(--u) * 9)}
.bu-hk-ln .bu-hk-x{justify-self:end}
.bu-hk-ln__l{font-size:calc(var(--u) * 10.5);font-weight:500;margin-top:calc(var(--u) * -4)}
.bu-hk-ln .bu-hk-fld{color:#6f6f6f;height:calc(var(--u) * 24)}
.bu-hk-ln__h{color:#6f6f6f}
.bu-hk-ln .bu-hk-bto{justify-self:end;margin-top:calc(var(--u) * 3);color:#7fbf7f;box-shadow:0 0 0 calc(var(--u) * 0.7) #9fcf9f}
.bu-hk-nl-hi{left:calc(var(--u) * 118);top:calc(var(--u) * 24);width:calc(var(--u) * 152);}
.bu-hk-nl-m .bu-hk-base{left:calc(var(--u) * 10);top:calc(var(--u) * 10);width:calc(var(--u) * 116);height:calc(var(--u) * 160);}
.bu-hk-nlm-hi{left:calc(var(--u) * 8);top:calc(var(--u) * 104);width:calc(var(--u) * 134);}
.bu-hk-nlm-hi.bu-hk-ln{gap:calc(var(--u) * 5);padding:calc(var(--u) * 9) calc(var(--u) * 10);font-size:calc(var(--u) * 9)}
.bu-hk-nlm-hi .bu-hk-ln__l{font-size:calc(var(--u) * 10)}
.bu-hk-path-d{--bw:283;aspect-ratio:283/195}
.bu-hk-path-m{--bw:334;aspect-ratio:334/184}
.bu-hk-sm{display:grid;align-content:start;padding:calc(var(--u) * 10) calc(var(--u) * 12)}
.bu-hk-sm > span{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);height:calc(var(--u) * 18);overflow:hidden}
.bu-hk-sm > span .bu-hk-mt{overflow:hidden;text-overflow:clip}
.bu-hk-sm > span .bu-hk-bar{width:calc(var(--u) * 24)}
.bu-hk-sm > .bu-hk-sm__hd{height:calc(var(--u) * 24);border-bottom:calc(var(--u) * 0.6) solid #eaeaea;margin-bottom:calc(var(--u) * 3)}
.bu-hk-sm > .bu-hk-slot{height:calc(var(--u) * 30)}
.bu-hk-sm__sv .bu-hk-mt{color:#9fc79f}
.bu-hk-path-d .bu-hk-base{left:calc(var(--u) * 26);top:calc(var(--u) * 14);width:calc(var(--u) * 244);height:calc(var(--u) * 196);}
.bu-hk-pt-hi{left:calc(var(--u) * 12);top:calc(var(--u) * 69);width:calc(var(--u) * 259);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 10);height:calc(var(--u) * 30);padding:0 calc(var(--u) * 11);font-size:calc(var(--u) * 9.5);white-space:nowrap}
.bu-hk-pt-hi .bu-hk-bar{width:calc(var(--u) * 30);height:calc(var(--u) * 7);background:#d6d6d6}
.bu-hk-path-m .bu-hk-base{left:calc(var(--u) * 52);top:calc(var(--u) * 12);width:calc(var(--u) * 252);height:calc(var(--u) * 184);}
.bu-hk-path-m .bu-hk-pt-hi{left:calc(var(--u) * 18);top:calc(var(--u) * 65);width:calc(var(--u) * 298);height:calc(var(--u) * 34);font-size:calc(var(--u) * 10.5)}
@media (min-width:900px){
@container (max-width:799.98px){.bu-hk-f{width:min(100%, calc(var(--bw) * 1px))}}
@container (max-width:793.98px){.bu-hk-badge-d{display:none}.bu-hk-badge-m{display:block}}
@container (max-width:764.98px){.bu-hk-nl-d{display:none}.bu-hk-nl-m{display:block}}
@container (max-width:767.98px){.bu-hk-path-d{display:none}.bu-hk-path-m{display:block}}
@container (max-width:736.98px){.bu-hk-warn-d{display:none}.bu-hk-warn-m{display:block}}
@container (max-width:745.98px){.bu-hk-live-d{display:none}.bu-hk-live-m{display:block}}
}


/* ---------- finanzcheck ---------- */
/* Finanzcheck bento, UI tiles, after the Figma case file (Cover frames Overview, Application status,
   Approval; Components page). One unit = 1/--w of the frame; each tile holds a desk, a phone and,
   for c-chart, a narrow canvas. */
.bu-fc { position: relative; display: block; width: min(100%, calc(var(--w) * 1px)); aspect-ratio: var(--w) / var(--h);
  border-radius: 8px; overflow: hidden; background: #E7E7E6; container-type: inline-size; isolation: isolate;
  font-family: var(--font); color: #0A0F1A; line-height: 1.3; text-align: left; letter-spacing: 0; }
.bu-fc--m, .bu-fc--n { display: none; }
@media (max-width: 899.98px) { .bu-fc--d { display: none; } .bu-fc--m { display: block; } }
/* Between 900px and about 1100px some tiles are too narrow for the desk canvas: the phone canvas
   takes over below 87 percent of the desk width (smallest desk text is 7.5 units, so 6.5px). */
.bu-fc-w { width: 100%; display: flex; justify-content: center; container-type: inline-size; }
.bu-fc-w--live { container-name: bufclive; }
@container bufclive (max-width: 316px) { .bu-fc-live-d { display: none; } .bu-fc-live-m { display: block; } }
.bu-fc-w--sheet { container-name: bufcsheet; }
@container bufcsheet (max-width: 495px) { .bu-fc-sheet-d { display: none; } .bu-fc-sheet-m { display: block; } }
.bu-fc-w--head { container-name: bufchead; }
@container bufchead (max-width: 225px) { .bu-fc-head-d { display: none; } .bu-fc-head-m { display: block; } }
.bu-fc-w--pills { container-name: bufcpills; }
@container bufcpills (max-width: 225px) { .bu-fc-pills-d { display: none; } .bu-fc-pills-m { display: block; } }
.bu-fc-w--chart { container-name: bufcchart; }
@container bufcchart (max-width: 225px) { .bu-fc-chart-d, .bu-fc-chart-m { display: none; } .bu-fc-chart-n { display: block; } }

.bu-fc-c { --u: calc(100cqi / var(--w)); position: absolute; inset: 0; font-size: calc(var(--u) * 8); }
.bu-fc i, .bu-fc b, .bu-fc em { font-style: normal; }
.bu-fc-base, .bu-fc-hi { position: absolute; z-index: 1; transition: transform 520ms var(--ease-sheet); }
.bu-fc-hi { z-index: 2; background: #fff; color: #0A0F1A;
  box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(26,26,26,.08), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06), 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13); }
.cell:hover .bu-fc-hi { transform: translateY(calc(var(--u) * -3)); }
.cell:hover .bu-fc-base { transform: translateX(calc(var(--u) * -4)); }
@media (prefers-reduced-motion: reduce) { .bu-fc-base, .bu-fc-hi { transition: none; } }

/* the muted base: the app's own screen, low contrast */
.bu-fc-scr { background: #F4F6FA; color: #8C93A0; border-radius: calc(var(--u) * 22); overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * 0.5) #d3d7de, 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.07); }
.bu-fc-in { position: absolute; inset: 0; padding: calc(var(--u) * 14) calc(var(--u) * 12); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.bu-fc-bar { display: inline-block; flex: none; height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #dfe3ea; vertical-align: middle; }
.bu-fc-bar--d { background: #c3c9d3; }
.bu-fc-ttl { display: flex; align-items: center; gap: calc(var(--u) * 6); font-weight: 700; color: #6b7382; letter-spacing: -.01em; white-space: nowrap; }
.bu-fc-back { flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-left: calc(var(--u) * 1.2) solid currentColor; border-bottom: calc(var(--u) * 1.2) solid currentColor; transform: rotate(45deg); }
.bu-fc-av { flex: none; margin-left: auto; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: #e3e8f2; }
.bu-fc-cap { font-size: calc(var(--u) * 7.5); font-weight: 600; letter-spacing: .06em; color: #9aa1ad; white-space: nowrap; }
.bu-fc--m .bu-fc-cap, .bu-fc--n .bu-fc-cap { font-size: calc(var(--u) * 8); }
.bu-fc-cd { background: #fff; border-radius: calc(var(--u) * 9); box-shadow: 0 0 0 calc(var(--u) * 0.5) #e4e7ed; padding: calc(var(--u) * 9); display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.bu-fc-seg { display: flex; gap: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; }
.bu-fc-seg span { flex: none; padding: calc(var(--u) * 3) calc(var(--u) * 7); border-radius: calc(var(--u) * 9); background: #fff; color: #8C93A0; font-weight: 600; box-shadow: 0 0 0 calc(var(--u) * 0.5) #e4e7ed; }
.bu-fc-seg .is-on { background: #9DB2DF; color: #fff; box-shadow: none; }
.bu-fc-pb { display: flex; gap: calc(var(--u) * 2); }
.bu-fc-pb i { height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); }
.bu-fc-k1 { background: #1F50B5; } .bu-fc-k2 { background: #12805A; } .bu-fc-k3 { background: #B7791F; } .bu-fc-k4 { background: #6D4AC4; }
.bu-fc-scr .bu-fc-pb i, .bu-fc-scr .bu-fc-dot { opacity: .4; }
.bu-fc-lg { display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; }
.bu-fc-lg .bu-fc-bar { margin-left: auto; }
.bu-fc-dot { flex: none; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-radius: 50%; }
.bu-fc-ar { display: flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 7) calc(var(--u) * 8); border-radius: calc(var(--u) * 9); white-space: nowrap; }
.bu-fc-ar b { font-weight: 700; color: #6b7382; display: flex; align-items: center; gap: calc(var(--u) * 4); }
.bu-fc-ar small { display: block; font-size: 1em; margin-top: calc(var(--u) * 2); }
.bu-fc-ar--b { background: #EDF2FB; color: #7f95c6; } .bu-fc-ar--g { background: #E7F1ED; color: #6fa58f; } .bu-fc-ar--a { background: #F8F1E4; color: #c3a066; }
.bu-fc-doc { position: relative; flex: none; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: #fff; }
.bu-fc-doc::before { content: ""; position: absolute; left: 34%; top: 26%; width: 32%; height: 48%; border: calc(var(--u) * 1) solid currentColor; border-radius: calc(var(--u) * 1.5); }
.bu-fc-chev { flex: none; margin-left: auto; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-right: calc(var(--u) * 1.1) solid currentColor; border-bottom: calc(var(--u) * 1.1) solid currentColor; transform: rotate(-45deg); }
.bu-fc-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; background: #F4F6FA; border-top: calc(var(--u) * 0.5) solid #e4e7ed; color: #a3aab4; font-size: calc(var(--u) * 7.5); font-weight: 600; letter-spacing: .04em; }
.bu-fc-tabs span { padding: calc(var(--u) * 6) calc(var(--u) * 5); border-radius: calc(var(--u) * 7); }
.bu-fc-tabs .is-on { background: #9DB2DF; color: #fff; }
.bu-fc-tl { display: flex; flex-direction: column; }
.bu-fc-tl > div { position: relative; padding: 0 0 calc(var(--u) * 9) calc(var(--u) * 14); }
.bu-fc-tl > div::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 2); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #9cc8b6; }
.bu-fc-tl > div.is-done::after { content: ""; position: absolute; left: calc(var(--u) * 2.5); top: calc(var(--u) * 8); bottom: 0; width: calc(var(--u) * 1); background: #9cc8b6; }
.bu-fc-tl > div.is-open::before { background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.8) #cfd4dc; }
.bu-fc-tl b { display: block; font-weight: 600; color: #6b7382; }
.bu-fc-tl small { display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: 1em; color: #a3aab4; margin-top: calc(var(--u) * 2); }
.bu-fc-btn { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 8); background: #9DB2DF; color: #fff; font-weight: 600; white-space: nowrap; }

/* lifted parts, full colour, the file's own tokens */
.bu-fc-sum { border-radius: calc(var(--u) * 11); display: grid; grid-template-columns: 1fr auto; row-gap: calc(var(--u) * 3); }
.bu-fc-sum b { font-weight: 700; }
.bu-fc-sum .bu-fc-cap { color: #6F7786; }
.bu-fc-sum .r { justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 4); }
.bu-fc-sum .r i { display: block; border-radius: calc(var(--u) * 3); background: #0A0F1A; }
.bu-fc-sum .g { color: #12805A; font-weight: 500; }
.bu-fc-sum .g i { background: #12805A; }
.bu-fc-prog { grid-column: 1 / -1; position: relative; border-radius: calc(var(--u) * 4); background: #EAF1FC; overflow: hidden; }
.bu-fc-prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32%; border-radius: inherit; background: #1F50B5; }
.bu-fc-app { border-radius: calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; text-align: center; }
.bu-fc-app .ic { position: relative; border-radius: calc(var(--u) * 9); background: #EAF1FC; color: #1F50B5; }
.bu-fc-app .ic::before { content: ""; position: absolute; left: 34%; top: 26%; width: 32%; height: 48%; border: calc(var(--u) * 1.2) solid currentColor; border-radius: calc(var(--u) * 1.5); }
.bu-fc-app .ic::after { content: ""; position: absolute; left: 42%; top: 44%; width: 16%; height: 16%; border-top: calc(var(--u) * 1) solid currentColor; border-bottom: calc(var(--u) * 1) solid currentColor; }
.bu-fc-app b { font-weight: 700; white-space: nowrap; }
.bu-fc-app .v { display: block; border-radius: calc(var(--u) * 3); background: #0A0F1A; }
.bu-fc-app .ref { display: flex; align-items: center; gap: calc(var(--u) * 4); color: #6F7786; }
.bu-fc-pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); border-radius: calc(var(--u) * 9); font-weight: 600; white-space: nowrap; }
.bu-fc-pill::before { content: ""; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-radius: 50%; background: currentColor; }
.bu-fc-pill--b { background: #EAF1FC; color: #1F50B5; }
.bu-fc-hero { border-radius: calc(var(--u) * 12); background: linear-gradient(160deg, #2150B0 0%, #1C3F93 45%, #141E48 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.bu-fc-hero .tk { position: relative; flex: none; border-radius: 50%; background: #12805A; }
.bu-fc-hero .tk::after { content: ""; position: absolute; left: 37%; top: 24%; width: 22%; height: 40%; border-right: calc(var(--u) * 1.8) solid #fff; border-bottom: calc(var(--u) * 1.8) solid #fff; transform: rotate(40deg); }
.bu-fc-hero .bu-fc-cap { color: rgba(255,255,255,.82); }
.bu-fc-hero .v { display: block; border-radius: calc(var(--u) * 3); background: #fff; }
.bu-fc-hero .s { display: block; border-radius: calc(var(--u) * 3); background: rgba(255,255,255,.45); }
.bu-fc-gauge { border-radius: calc(var(--u) * 12); display: flex; flex-direction: column; }
.bu-fc-gauge .bu-fc-cap { color: #6F7786; }
.bu-fc-gauge .v { display: block; border-radius: calc(var(--u) * 3); background: #0A0F1A; }
.bu-fc-gauge .tr { position: relative; border-radius: calc(var(--u) * 4); background: #F0F3F8; }
.bu-fc-gauge .tr::before { content: ""; position: absolute; left: 10%; width: 52%; top: 0; bottom: 0; border-radius: inherit; background: #E2EAF8; }
.bu-fc-gauge .tr::after { content: ""; position: absolute; left: 88%; top: -30%; bottom: -30%; width: calc(var(--u) * 1.8); border-radius: calc(var(--u) * 1); background: #1F50B5; }
.bu-fc-gauge .ft { display: flex; justify-content: space-between; gap: calc(var(--u) * 6); white-space: nowrap; color: #6F7786; }
.bu-fc-gauge .ft b { color: #1F50B5; font-weight: 500; }
.bu-fc-sh { border-radius: calc(var(--u) * 14); display: flex; flex-direction: column; }
.bu-fc-sh::before { content: ""; align-self: center; width: calc(var(--u) * 22); height: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: #d8dce3; }
.bu-fc-sh b { font-weight: 700; letter-spacing: -.01em; }
.bu-fc-sh span { color: #4a5263; }
.bu-fc-chip { display: flex; gap: calc(var(--u) * 4); flex-wrap: nowrap; overflow: hidden; }
.bu-fc-chip span { flex: none; display: grid; place-items: center; height: calc(var(--u) * 15); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 8); background: #F4F6FA; }
.bu-fc-chip span i { display: block; height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #c3c9d3; }
.bu-fc-chip .is-on { background: #9DB2DF; } .bu-fc-chip .is-on i { background: #fff; }
.bu-fc-tb { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.bu-fc-tb span { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 7); border-radius: calc(var(--u) * 9); background: #E7F1ED; color: #6fa58f; font-weight: 600; white-space: nowrap; }
.bu-fc-tb span::before { content: ""; width: calc(var(--u) * 2.5); height: calc(var(--u) * 5); border-right: calc(var(--u) * 1) solid currentColor; border-bottom: calc(var(--u) * 1) solid currentColor; transform: rotate(40deg) translateY(calc(var(--u) * -1)); }
.bu-fc-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); white-space: nowrap; }
.bu-fc-row b { font-weight: 700; color: #6b7382; }

/* ---- c-live: Overview (106:12), one credit lifted (Credit summary 42:80) ---- */
/* the desk phone is the Overview frame at 1.25 scale, filling the tall tile */
.bu-fc-live-d .bu-fc-scr { --u: calc(100cqi / 364 * 1.25); left: calc(var(--u) * 9.6); top: calc(var(--u) * 68); width: calc(var(--u) * 272); height: calc(var(--u) * 540); border-radius: calc(var(--u) * 30); }
.bu-fc-live-d .bu-fc-trj { display: block; width: 100%; height: auto; margin-top: calc(var(--u) * 2); }
.bu-fc-live-d .bu-fc-ax { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 7.5); color: #9aa1ad; }
.bu-fc-live-d .bu-fc-ax .bu-fc-bar { width: calc(var(--u) * 24); }
.bu-fc-live-d .bu-fc-in { padding: calc(var(--u) * 22) calc(var(--u) * 13) 0; gap: calc(var(--u) * 9); }
.bu-fc-live-d .bu-fc-ttl { font-size: calc(var(--u) * 14); }
.bu-fc-live-d .bu-fc-seg { font-size: calc(var(--u) * 7.5); }
.bu-fc-live-d .bu-fc-cd .v { display: block; width: calc(var(--u) * 118); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 4); background: #c3c9d3; }
.bu-fc-live-d .bu-fc-lg { font-size: calc(var(--u) * 8); }
.bu-fc-live-d .bu-fc-lg .bu-fc-bar { width: calc(var(--u) * 30); }
.bu-fc-live-d .bu-fc-ar { font-size: calc(var(--u) * 8); }
.bu-fc-live-d .bu-fc-ar .bu-fc-bar { width: calc(var(--u) * 26); }
.bu-fc-live-d .bu-fc-tabs { height: calc(var(--u) * 50); padding-bottom: calc(var(--u) * 4); }
.bu-fc-live-d .bu-fc-sum { left: calc(var(--u) * 22); top: calc(var(--u) * 309); width: calc(var(--u) * 312); padding: calc(var(--u) * 9) calc(var(--u) * 16); column-gap: calc(var(--u) * 10); font-size: calc(var(--u) * 9); }
.bu-fc-live-d .bu-fc-sum b { font-size: calc(var(--u) * 12); }
.bu-fc-live-d .bu-fc-sum .r i { width: calc(var(--u) * 52); height: calc(var(--u) * 12); }
.bu-fc-live-d .bu-fc-sum .g i { width: calc(var(--u) * 18); height: calc(var(--u) * 6); }
.bu-fc-live-d .bu-fc-prog { height: calc(var(--u) * 7); margin-top: calc(var(--u) * 7); }

.bu-fc-live-m .bu-fc-scr { left: calc(var(--u) * 72); top: calc(var(--u) * 22); width: calc(var(--u) * 240); height: calc(var(--u) * 460); border-radius: calc(var(--u) * 26); }
.bu-fc-live-m .bu-fc-in { padding: calc(var(--u) * 18) calc(var(--u) * 12) 0; gap: calc(var(--u) * 8); }
.bu-fc-live-m .bu-fc-ttl { font-size: calc(var(--u) * 13); }
.bu-fc-live-m .bu-fc-seg { font-size: calc(var(--u) * 8); }
.bu-fc-live-m .bu-fc-ar { font-size: calc(var(--u) * 8.5); }
.bu-fc-live-m .bu-fc-ar .bu-fc-bar { width: calc(var(--u) * 24); }
.bu-fc-live-m .bu-fc-cd .v { display: block; width: calc(var(--u) * 104); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); background: #c3c9d3; }
.bu-fc-live-m .bu-fc-lg { font-size: calc(var(--u) * 8.5); }
.bu-fc-live-m .bu-fc-lg .bu-fc-bar { width: calc(var(--u) * 28); }
.bu-fc-live-m .bu-fc-sum { left: calc(var(--u) * 20); top: calc(var(--u) * 192); width: calc(var(--u) * 292); padding: calc(var(--u) * 9) calc(var(--u) * 15); column-gap: calc(var(--u) * 10); font-size: calc(var(--u) * 9.5); }
.bu-fc-live-m .bu-fc-sum b { font-size: calc(var(--u) * 12); }
.bu-fc-live-m .bu-fc-sum .r i { width: calc(var(--u) * 50); height: calc(var(--u) * 12); }
.bu-fc-live-m .bu-fc-sum .g i { width: calc(var(--u) * 18); height: calc(var(--u) * 6); }
.bu-fc-live-m .bu-fc-prog { height: calc(var(--u) * 7); margin-top: calc(var(--u) * 7); }

/* ---- c-sheet: Application status (106:29), the Application card lifted (42:15) ---- */
.bu-fc-sheet-d .bu-fc-scr { left: calc(var(--u) * 232); top: calc(var(--u) * 20); width: calc(var(--u) * 316); height: calc(var(--u) * 240); border-radius: calc(var(--u) * 18); }
.bu-fc-sheet-d .bu-fc-in { padding: calc(var(--u) * 16) calc(var(--u) * 18) 0 calc(var(--u) * 80); gap: calc(var(--u) * 9); font-size: calc(var(--u) * 8.5); }
.bu-fc-sheet-d .bu-fc-ttl { font-size: calc(var(--u) * 11); }
.bu-fc-sheet-d .bu-fc-tl small .bu-fc-bar { width: calc(var(--u) * 34); }
.bu-fc-sheet-d .bu-fc-app { left: calc(var(--u) * 44); top: calc(var(--u) * 28); width: calc(var(--u) * 256); padding: calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 14); gap: calc(var(--u) * 5); font-size: calc(var(--u) * 8.5); }
.bu-fc-sheet-d .bu-fc-app .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 4); }
.bu-fc-sheet-d .bu-fc-app b { font-size: calc(var(--u) * 10.5); }
.bu-fc-sheet-d .bu-fc-app .v { width: calc(var(--u) * 96); height: calc(var(--u) * 11); }
.bu-fc-sheet-d .bu-fc-app .ref .bu-fc-bar { width: calc(var(--u) * 56); }
.bu-fc-sheet-d .bu-fc-pill { font-size: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 8); margin-top: calc(var(--u) * 4); }

.bu-fc-sheet-m .bu-fc-scr { left: calc(var(--u) * 150); top: calc(var(--u) * 16); width: calc(var(--u) * 204); height: calc(var(--u) * 230); border-radius: calc(var(--u) * 18); }
.bu-fc-sheet-m .bu-fc-in { padding: calc(var(--u) * 14) calc(var(--u) * 14) 0 calc(var(--u) * 40); gap: calc(var(--u) * 8); font-size: calc(var(--u) * 8.5); }
.bu-fc-sheet-m .bu-fc-ttl { font-size: calc(var(--u) * 10); }
.bu-fc-sheet-m .bu-fc-tl small .bu-fc-bar { width: calc(var(--u) * 30); }
.bu-fc-sheet-m .bu-fc-app { left: calc(var(--u) * 16); top: calc(var(--u) * 22); width: calc(var(--u) * 164); padding: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 5); font-size: calc(var(--u) * 8.5); }
.bu-fc-sheet-m .bu-fc-app .ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 3); }
.bu-fc-sheet-m .bu-fc-app b { font-size: calc(var(--u) * 10); }
.bu-fc-sheet-m .bu-fc-app .v { width: calc(var(--u) * 84); height: calc(var(--u) * 10); }
.bu-fc-sheet-m .bu-fc-app .ref .bu-fc-bar { width: calc(var(--u) * 44); }
.bu-fc-sheet-m .bu-fc-pill { font-size: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 8); margin-top: calc(var(--u) * 3); }

/* ---- c-head: Approval (106:36), the Hero lifted (106:39) ---- */
.bu-fc-head-d .bu-fc-scr { left: calc(var(--u) * 40); top: calc(var(--u) * 16); width: calc(var(--u) * 180); height: calc(var(--u) * 210); border-radius: calc(var(--u) * 18); }
.bu-fc-head-d .bu-fc-in { padding: calc(var(--u) * 14) calc(var(--u) * 14) 0; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 8); }
.bu-fc-head-d .bu-fc-ttl { font-size: calc(var(--u) * 9.5); }
.bu-fc-head-d .bu-fc-sp { height: calc(var(--u) * 94); flex: none; }
.bu-fc-head-d .bu-fc-tl small .bu-fc-bar { width: calc(var(--u) * 30); }
.bu-fc-head-d .bu-fc-hero { left: calc(var(--u) * 62); top: calc(var(--u) * 50); width: calc(var(--u) * 180); padding: calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 5); }
.bu-fc-head-d .bu-fc-hero .tk { width: calc(var(--u) * 22); height: calc(var(--u) * 22); margin-bottom: calc(var(--u) * 2); }
.bu-fc-head-d .bu-fc-hero .v { width: calc(var(--u) * 74); height: calc(var(--u) * 16); }
.bu-fc-head-d .bu-fc-hero .s { width: calc(var(--u) * 110); height: calc(var(--u) * 5); }

.bu-fc-head-m .bu-fc-scr { left: calc(var(--u) * 14); top: calc(var(--u) * 14); width: calc(var(--u) * 124); height: calc(var(--u) * 200); border-radius: calc(var(--u) * 16); }
.bu-fc-head-m .bu-fc-in { padding: calc(var(--u) * 12) calc(var(--u) * 10) 0; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8); }
.bu-fc-head-m .bu-fc-ttl { font-size: calc(var(--u) * 8.5); white-space: normal; align-items: flex-start; }
.bu-fc-head-m .bu-fc-ttl .bu-fc-back { margin-top: calc(var(--u) * 3); }
.bu-fc-head-m .bu-fc-sp { height: calc(var(--u) * 96); flex: none; }
.bu-fc-head-m .bu-fc-hero { left: calc(var(--u) * 16); top: calc(var(--u) * 52); width: calc(var(--u) * 124); padding: calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 11); gap: calc(var(--u) * 5); }
.bu-fc-head-m .bu-fc-hero .bu-fc-cap { font-size: calc(var(--u) * 8); letter-spacing: .03em; }
.bu-fc-head-m .bu-fc-hero .tk { width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 2); }
.bu-fc-head-m .bu-fc-hero .v { width: calc(var(--u) * 62); height: calc(var(--u) * 14); }
.bu-fc-head-m .bu-fc-hero .s { width: calc(var(--u) * 84); height: calc(var(--u) * 5); }

/* ---- c-pills: the Kredit tab parts, Rate gauge lifted (42:69) over Form row (23:33), Trust badges (42:58), Action bar (22:34) ---- */
.bu-fc-pills-d .bu-fc-scr { left: calc(var(--u) * 30); top: calc(var(--u) * 14); width: calc(var(--u) * 186); height: calc(var(--u) * 210); border-radius: calc(var(--u) * 18); }
.bu-fc-pills-d .bu-fc-in { padding: calc(var(--u) * 12) calc(var(--u) * 11) 0; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8); }
.bu-fc-pills-d .bu-fc-row .bu-fc-bar { width: calc(var(--u) * 34); height: calc(var(--u) * 6); background: #b8c6e6; }
.bu-fc-pills-d .bu-fc-chip span i { width: calc(var(--u) * 18); }
.bu-fc-pills-d .bu-fc-tb { font-size: calc(var(--u) * 7.5); margin-top: calc(var(--u) * 62); }
.bu-fc-pills-d .bu-fc-btn { height: calc(var(--u) * 24); font-size: calc(var(--u) * 8.5); }
.bu-fc-pills-d .bu-fc-gauge { left: calc(var(--u) * 56); top: calc(var(--u) * 50); width: calc(var(--u) * 190); padding: calc(var(--u) * 11) calc(var(--u) * 12); gap: calc(var(--u) * 7); font-size: calc(var(--u) * 7.5); }
.bu-fc-pills-d .bu-fc-gauge .v { width: calc(var(--u) * 54); height: calc(var(--u) * 18); }
.bu-fc-pills-d .bu-fc-gauge .tr { height: calc(var(--u) * 7); }

.bu-fc-pills-m .bu-fc-scr { left: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 126); height: calc(var(--u) * 200); border-radius: calc(var(--u) * 16); }
.bu-fc-pills-m .bu-fc-in { padding: calc(var(--u) * 11) calc(var(--u) * 9) 0; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8); }
.bu-fc-pills-m .bu-fc-row .bu-fc-bar { width: calc(var(--u) * 26); height: calc(var(--u) * 6); background: #b8c6e6; }
.bu-fc-pills-m .bu-fc-chip span i { width: calc(var(--u) * 16); }
.bu-fc-pills-m .bu-fc-btn { height: calc(var(--u) * 24); font-size: calc(var(--u) * 8.5); margin-top: calc(var(--u) * 92); }
.bu-fc-pills-m .bu-fc-gauge { left: calc(var(--u) * 16); top: calc(var(--u) * 60); width: calc(var(--u) * 126); padding: calc(var(--u) * 10) calc(var(--u) * 9); gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8); }
.bu-fc-pills-m .bu-fc-gauge .bu-fc-cap { font-size: calc(var(--u) * 8); letter-spacing: .02em; }
.bu-fc-pills-m .bu-fc-gauge .v { width: calc(var(--u) * 46); height: calc(var(--u) * 16); }
.bu-fc-pills-m .bu-fc-gauge .tr { height: calc(var(--u) * 6); }
.bu-fc-pills-m .bu-fc-gauge .ft { justify-content: flex-end; }

/* ---- c-chart: Mein Kredit app bar (35:9), Balance header (10:17), Action tile (191:335), Bottom sheet lifted (23:6) ---- */
.bu-fc-kr .bu-fc-ttl { display: grid; gap: calc(var(--u) * 1); }
.bu-fc-kr .bu-fc-ttl small { font-size: calc(var(--u) * 8); font-weight: 400; color: #a3aab4; }
.bu-fc-kr .bu-fc-cd .v { display: block; height: calc(var(--u) * 16); border-radius: calc(var(--u) * 4); background: #c3c9d3; }
.bu-fc-kr .bu-fc-cd .pg { height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: linear-gradient(90deg, #9DB2DF 32%, #E6ECF6 0); }
.bu-fc-kr .bu-fc-cd .ft { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); white-space: nowrap; }
.bu-fc-kr .bu-fc-cd .ft span { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.bu-fc-chart-d .bu-fc-scr { left: calc(var(--u) * 36); top: calc(var(--u) * 16); width: calc(var(--u) * 188); height: calc(var(--u) * 270); border-radius: calc(var(--u) * 18); }
.bu-fc-chart-d .bu-fc-in { padding: calc(var(--u) * 14) calc(var(--u) * 12) 0; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 7.5); }
.bu-fc-chart-d .bu-fc-ttl { font-size: calc(var(--u) * 11); }
.bu-fc-chart-d .bu-fc-cd .v { width: calc(var(--u) * 90); }
.bu-fc-chart-d .bu-fc-cd .ft .bu-fc-bar { width: calc(var(--u) * 18); }
.bu-fc-chart-d .bu-fc-sh { left: calc(var(--u) * 18); top: calc(var(--u) * 150); width: calc(var(--u) * 224); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 14); gap: calc(var(--u) * 6); font-size: calc(var(--u) * 8); }
.bu-fc-chart-d .bu-fc-sh b { font-size: calc(var(--u) * 12); }

.bu-fc-chart-m .bu-fc-scr { left: calc(var(--u) * 146); top: calc(var(--u) * 14); width: calc(var(--u) * 200); height: calc(var(--u) * 230); border-radius: calc(var(--u) * 18); }
.bu-fc-chart-m .bu-fc-in { padding: calc(var(--u) * 14) calc(var(--u) * 12) 0 calc(var(--u) * 60); gap: calc(var(--u) * 8); font-size: calc(var(--u) * 8); }
.bu-fc-chart-m .bu-fc-ttl { font-size: calc(var(--u) * 11); }
.bu-fc-chart-m .bu-fc-cd .v { width: calc(var(--u) * 70); }
.bu-fc-chart-m .bu-fc-cd .ft .bu-fc-bar { width: calc(var(--u) * 16); }
.bu-fc-chart-m .bu-fc-sh { left: calc(var(--u) * 16); top: calc(var(--u) * 40); width: calc(var(--u) * 186); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 14); gap: calc(var(--u) * 6); font-size: calc(var(--u) * 8.5); }
.bu-fc-chart-m .bu-fc-sh b { font-size: calc(var(--u) * 12); }

.bu-fc-chart-n .bu-fc-scr { left: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 126); height: calc(var(--u) * 200); border-radius: calc(var(--u) * 16); }
.bu-fc-chart-n .bu-fc-in { padding: calc(var(--u) * 12) calc(var(--u) * 10) 0; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8); }
.bu-fc-chart-n .bu-fc-ttl { font-size: calc(var(--u) * 10); }
.bu-fc-chart-n .bu-fc-cd .v { width: calc(var(--u) * 60); height: calc(var(--u) * 13); }
.bu-fc-chart-n .bu-fc-sh { left: calc(var(--u) * 10); top: calc(var(--u) * 66); width: calc(var(--u) * 130); padding: calc(var(--u) * 7) calc(var(--u) * 9) calc(var(--u) * 11); gap: calc(var(--u) * 5); font-size: calc(var(--u) * 8); }
.bu-fc-chart-n .bu-fc-sh b { font-size: calc(var(--u) * 10); }

/* ---------- covestro ---------- */
/* Covestro bento, UI tiles. A frame per canvas; --u inside is one canvas unit. */
.bu-cv-f { position: relative; flex: 0 0 auto; display: block; width: calc(var(--w) * var(--u, 1px)); max-width: 100%;
  aspect-ratio: var(--w) / var(--h); border-radius: 8px; overflow: hidden; background: #EBE6EA;
  container-type: inline-size; isolation: isolate; font-family: var(--font); line-height: 1.25; color: #12100e; }
.bu-cv-f--m { display: none; }
@media (max-width: 899.98px) { .bu-cv-f--d { display: none; } .bu-cv-f--m { display: block; } }
.bu-cv-c { --u: calc(100cqi / var(--w)); position: absolute; inset: 0; font-size: calc(var(--u) * 10); }
.bu-cv-c i, .bu-cv-c b { font-style: normal; }
.bu-cv-base, .bu-cv-hi { position: absolute; z-index: 1; }
.bu-cv-hi { z-index: 2; box-shadow: 0 0 0 calc(var(--u) * .5) rgba(26,26,26,.08), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06), 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13); }

/* the muted base: the screen, greyed back */
.bu-cv-card { position: absolute; background: #fff; border-radius: calc(var(--u) * 12);
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(194,185,198,.5), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.05); }
.bu-cv-bar { display: block; height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #E0DBDE; }
.bu-cv-bar--s { height: calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: #CBC4CC; }
.bu-cv-bar--t { height: calc(var(--u) * 3); }
.bu-cv-h { font-weight: 600; letter-spacing: -.01em; color: #a79dab; white-space: nowrap; }
.bu-cv-ring { position: absolute; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%; border: calc(var(--u) * 2.6) solid #b3aab5; box-sizing: border-box; }

/* the lifted part: the explorer's own dark surface */
.bu-cv-dk { background: #1b1227; color: rgba(255,255,255,.9); }
.bu-cv-ul { position: relative; }
.bu-cv-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -3); height: calc(var(--u) * 1.6); border-radius: 1px; background: linear-gradient(90deg, #ff803d, #eb0e77); }

/* ---- the explorer ---- */
.bu-cv-lv-scr { padding: calc(var(--u) * 16); box-sizing: border-box; }
.bu-cv-lv-hero { position: relative; height: calc(var(--u) * 232); border-radius: calc(var(--u) * 8); background: linear-gradient(160deg, #d3cdd4, #c4bcc6); }
.bu-cv-lv-name { position: absolute; right: calc(var(--u) * 24); top: calc(var(--u) * 24); font-size: calc(var(--u) * 11); color: rgba(255,255,255,.9); white-space: nowrap; }
.bu-cv-lv-name b { font-weight: 600; }
.bu-cv-lv-t1 { position: absolute; left: calc(var(--u) * 24); bottom: calc(var(--u) * 36); width: calc(var(--u) * 176); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: rgba(255,255,255,.8); }
.bu-cv-lv-t2 { position: absolute; left: calc(var(--u) * 24); bottom: calc(var(--u) * 22); width: calc(var(--u) * 120); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: rgba(255,255,255,.5); }
.bu-cv-lv-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 16); height: calc(var(--u) * 72); }
.bu-cv-lv-doors > div { display: grid; align-content: start; gap: calc(var(--u) * 7); padding: calc(var(--u) * 13) calc(var(--u) * 14); border-radius: calc(var(--u) * 8); background: #F8F7F7; border-top: calc(var(--u) * 4) solid #E0DBDE; font-size: calc(var(--u) * 11); }
.bu-cv-lv-axes { display: grid; gap: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 18); border-radius: calc(var(--u) * 12);
  background: radial-gradient(120% 140% at 85% 0%, #3a2216, transparent 60%), #1b1227; }
.bu-cv-lv-row { display: flex; align-items: baseline; gap: calc(var(--u) * 20); padding-bottom: calc(var(--u) * 9); border-bottom: calc(var(--u) * .6) solid rgba(255,255,255,.18);
  font-size: calc(var(--u) * 12); color: rgba(255,255,255,.55); white-space: nowrap; }
.bu-cv-lv-row .is-on { font-size: calc(var(--u) * 22); font-weight: 300; letter-spacing: -.01em; color: rgba(255,255,255,.92); }

/* ---- the four doors ---- */
.bu-cv-sl-cols { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: calc(var(--u) * 16); padding: calc(var(--u) * 22) calc(var(--u) * 24); box-sizing: border-box; }
.bu-cv-sl-cols > div { display: grid; align-content: start; }
.bu-cv-doors { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: calc(var(--u) * 10); overflow: hidden; }
.bu-cv-doors > span { display: grid; place-items: center; font-weight: 600; letter-spacing: -.005em; color: #fff; white-space: nowrap; }
.bu-cv-z1 { background: linear-gradient(180deg, #3d2b67, #273b6d); }
.bu-cv-z2 { background: linear-gradient(180deg, #60275a, #5c0033); }
.bu-cv-z3 { background: linear-gradient(180deg, #674625, #845714); }
.bu-cv-z4 { background: linear-gradient(180deg, #097857, #006140); }
.bu-cv-doors--2 { grid-template-columns: repeat(2, 1fr); }

/* ---- expert grading ---- */
.bu-cv-pn { display: grid; align-content: start; padding: calc(var(--u) * 16); box-sizing: border-box; }
.bu-cv-gr { display: grid; gap: calc(var(--u) * 8); padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); }
.bu-cv-gr__top { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.bu-cv-gr__k { font-size: calc(var(--u) * 8.5); color: rgba(255,255,255,.6); white-space: nowrap; }
.bu-cv-gr__v { font-size: calc(var(--u) * 13); font-weight: 300; justify-self: start; white-space: nowrap; }
.bu-cv-sld { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 8.5); color: rgba(255,255,255,.7); }
.bu-cv-sld__t { position: relative; flex: 1; height: calc(var(--u) * 1); background: rgba(255,255,255,.3); }
.bu-cv-sld__t::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * -.4); width: 33%; height: calc(var(--u) * 1.8); background: #00bb7e; }
.bu-cv-sld__t::after { content: ""; position: absolute; left: 33%; top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3); border-radius: 50%; background: #00bb7e; }
.bu-cv-ppl { position: relative; flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 12); color: #9b7fd6; }
.bu-cv-ppl i { position: absolute; bottom: 0; }
.bu-cv-ppl i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 42%; aspect-ratio: 1; transform: translate(-50%, calc(var(--u) * -1)); border: calc(var(--u) * 1.2) solid currentColor; border-radius: 50%; box-sizing: border-box; }
.bu-cv-ppl i:first-child { left: 0; width: calc(var(--u) * 10); height: calc(var(--u) * 4.5); border: calc(var(--u) * 1.2) solid currentColor; border-bottom: 0; border-radius: calc(var(--u) * 5) calc(var(--u) * 5) 0 0; box-sizing: border-box; }
.bu-cv-ppl i:last-child { right: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 3.6); border: calc(var(--u) * 1.2) solid currentColor; border-bottom: 0; border-left: 0; border-radius: 0 calc(var(--u) * 4) 0 0; box-sizing: border-box; }
.bu-cv-ppl i:last-child::before { width: 60%; left: 55%; }

/* ---- formulation filter ---- */
.bu-cv-fl { display: grid; gap: calc(var(--u) * 5); padding: calc(var(--u) * 9) calc(var(--u) * 9) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #2e0219; color: #fff; }
.bu-cv-fl__k { font-size: calc(var(--u) * 8.5); color: rgba(255,255,255,.62); margin: 0 0 calc(var(--u) * 1) calc(var(--u) * 2); }
.bu-cv-fl__p { display: grid; place-items: center; height: calc(var(--u) * 17); border-radius: calc(var(--u) * 9); background: #664b9e; font-size: calc(var(--u) * 9); white-space: nowrap; color: rgba(255,255,255,.88); }
.bu-cv-fl__p.is-on { background: #7d55c7; color: #fff; font-weight: 500; }

/* ---- product result ---- */
.bu-cv-doc { position: absolute; width: calc(var(--u) * 11); height: calc(var(--u) * 14); border: calc(var(--u) * 1.3) solid #b3aab5; border-radius: calc(var(--u) * 2); box-sizing: border-box;
  background: linear-gradient(#b3aab5, #b3aab5) calc(var(--u) * 2) calc(var(--u) * 6) / calc(var(--u) * 5) calc(var(--u) * 1.2) no-repeat, linear-gradient(#b3aab5, #b3aab5) calc(var(--u) * 2) calc(var(--u) * 9) / calc(var(--u) * 4) calc(var(--u) * 1.2) no-repeat; }
.bu-cv-pr { display: grid; gap: calc(var(--u) * 7); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: linear-gradient(180deg, #674625, #845714); color: #fff; }
.bu-cv-pr__n { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.bu-cv-pr__n i { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #ff803d; }
.bu-cv-pr__n span { height: calc(var(--u) * 7); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.85); }
.bu-cv-pr__li { font-size: calc(var(--u) * 9); color: rgba(255,255,255,.85); white-space: nowrap; }
.bu-cv-pr__li::before { content: "\2022"; margin-right: calc(var(--u) * 4); }

/* ---------- obseed ---------- */
/* obseed case bento, UI tiles. Canvas units: --u is one unit of the tile's canvas. */
.bu-ob { position: relative; display: block; width: 100%; border-radius: 8px; overflow: hidden; background: #EBE8DF;
  container-type: inline-size; isolation: isolate; font-family: var(--font); color: #1a1a1a; line-height: 1.25; letter-spacing: -.005em; }
.bu-ob--m { display: none; }
@media (max-width: 899.98px) { .bu-ob--d { display: none; } .bu-ob--m { display: block; } }
.bu-ob__c { position: absolute; inset: 0; font-size: calc(var(--u) * 9); }
.bu-ob__c > * { position: absolute; }
.bu-ob i, .bu-ob b { font-style: normal; }
.bu-ob-hi { z-index: 2; box-shadow: 0 0 0 @.5 rgba(26,26,26,.08), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06), 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13); }
.bu-ob-base { z-index: 1; }
/* the muted product surface */
.bu-ob-bar { display: block; height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #e6e2d9; }
.bu-ob-bar--d { background: #cfcabd; }
.bu-ob-mut { color: #9d988d; }

/* The site swaps its drawings at 899.98px. Between 900px and about 1100px some tiles are
   too narrow for the desk canvas to stay legible, so the phone canvas also takes over when the
   tile itself drops below three quarters of its desk width. */
.bu-ob-w { width: 100%; container-type: inline-size; }
.bu-ob-w--live { container-name: buoblive; }
@container buoblive (max-width: 273px) { .bu-ob-live.bu-ob--d { display: none; } .bu-ob-live.bu-ob--m { display: block; } }
.bu-ob-w--sheet { container-name: buobsheet; }
@container buobsheet (max-width: 428px) { .bu-ob-sheet.bu-ob--d { display: none; } .bu-ob-sheet.bu-ob--m { display: block; } }
.bu-ob-w--head { container-name: buobhead; }
@container buobhead (max-width: 195px) { .bu-ob-head.bu-ob--d { display: none; } .bu-ob-head.bu-ob--m { display: block; } }
.bu-ob-w--conf { container-name: buobconf; }
@container buobconf (max-width: 195px) { .bu-ob-conf.bu-ob--d { display: none; } .bu-ob-conf.bu-ob--m { display: block; } }
.bu-ob-w--chart { container-name: buobchart; }
@container buobchart (max-width: 506px) { .bu-ob-chart.bu-ob--d { display: none; } .bu-ob-chart.bu-ob--m { display: block; } }
.bu-ob-live.bu-ob--d { aspect-ratio: 364 / 686; } .bu-ob-live.bu-ob--d .bu-ob__c { --u: calc(100cqi / 364); }
.bu-ob-live.bu-ob--m { aspect-ratio: 334 / 417; } .bu-ob-live.bu-ob--m .bu-ob__c { --u: calc(100cqi / 334); }
.bu-ob-sheet.bu-ob--d { aspect-ratio: 570 / 395; } .bu-ob-sheet.bu-ob--d .bu-ob__c { --u: calc(100cqi / 570); }
.bu-ob-sheet.bu-ob--m { aspect-ratio: 334 / 296; } .bu-ob-sheet.bu-ob--m .bu-ob__c { --u: calc(100cqi / 334); }
.bu-ob-head.bu-ob--d { aspect-ratio: 260 / 222; } .bu-ob-head.bu-ob--d .bu-ob__c { --u: calc(100cqi / 260); }
.bu-ob-head.bu-ob--m { aspect-ratio: 150 / 192; } .bu-ob-head.bu-ob--m .bu-ob__c { --u: calc(100cqi / 150); }
.bu-ob-conf.bu-ob--d { aspect-ratio: 260 / 222; } .bu-ob-conf.bu-ob--d .bu-ob__c { --u: calc(100cqi / 260); }
.bu-ob-conf.bu-ob--m { aspect-ratio: 150 / 192; } .bu-ob-conf.bu-ob--m .bu-ob__c { --u: calc(100cqi / 150); }
.bu-ob-chart.bu-ob--d { aspect-ratio: 674 / 288; } .bu-ob-chart.bu-ob--d .bu-ob__c { --u: calc(100cqi / 674); }
.bu-ob-chart.bu-ob--m { aspect-ratio: 334 / 256; } .bu-ob-chart.bu-ob--m .bu-ob__c { --u: calc(100cqi / 334); }

/* ---- phone and the head card (c-live) ---- */
.bu-ob-phone { background: #F6F3EE; border-radius: calc(var(--u) * 34); box-shadow: 0 0 0 calc(var(--u) * 3) #fbfaf7, 0 0 0 calc(var(--u) * 3.5) #d6d1c5; overflow: hidden; }
.bu-ob-notch { position: absolute; left: 50%; top: calc(var(--u) * 10); width: calc(var(--u) * 64); height: calc(var(--u) * 17); margin-left: calc(var(--u) * -32); border-radius: calc(var(--u) * 9); background: #d9d4c9; }
.bu-ob-stat { position: absolute; top: calc(var(--u) * 14); width: calc(var(--u) * 22); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: #e0dcd2; }
.bu-ob-h { position: absolute; font-size: calc(var(--u) * 16); font-weight: 600; letter-spacing: -.02em; color: #a19c91; }
.bu-ob-rows { position: absolute; display: grid; }
.bu-ob-row { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 34); border-bottom: @.5 solid #e6e2d9; color: #a19c91; font-size: calc(var(--u) * 8.5); white-space: nowrap; }
.bu-ob-row .bu-ob-bar { margin-left: auto; width: calc(var(--u) * 22); }
.bu-ob-tick { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; }
.bu-ob-strip { position: absolute; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #5d5e57; }
.bu-ob-strip .bu-ob-bar { background: #85867e; }
.bu-ob-chipy { font-size: calc(var(--u) * 7.5); font-weight: 600; padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: #d8c982; color: #4b4a3e; }
.bu-ob-dots { position: absolute; display: flex; justify-content: space-between; align-items: center; }
.bu-ob-dots i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: currentColor; }
.bu-ob-dots i:last-child { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }

.bu-ob-card { background: #fff; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 14) calc(var(--u) * 14) 0; }
.bu-ob-pills { display: flex; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 9); color: #55534c; }
.bu-ob-pills span { padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: calc(var(--u) * 10); }
.bu-ob-pills .is-on { color: #1a1a1a; font-weight: 600; background: #fff; box-shadow: 0 0 0 @.6 #e3dfd6, 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(26,26,26,.06); }
.bu-ob-card .bu-ob-pills { background: #f3f0ea; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 3); width: max-content; }
.bu-ob-val { display: flex; align-items: flex-end; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 16); }
.bu-ob-val b { display: block; width: calc(var(--u) * 64); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); background: #1a1a1a; }
.bu-ob-val i { display: block; width: calc(var(--u) * 44); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #d9d5cc; margin-bottom: calc(var(--u) * 2); }
.bu-ob-lolli { display: block; width: 100%; height: auto; margin-top: calc(var(--u) * 12); overflow: visible; }
.bu-ob-tabs { display: flex; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 9); color: #6b665e; white-space: nowrap; }
.bu-ob-tabs span { padding: calc(var(--u) * 8) 0 calc(var(--u) * 12); border-top: calc(var(--u) * 1.6) solid transparent; }
.bu-ob-tabs .is-on { color: #1a1a1a; font-weight: 600; border-top-color: #E6C229; }

/* ---- desk (c-sheet) ---- */
.bu-ob-win { background: #F6F3EE; border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 @.6 #d6d1c5; overflow: hidden; display: flex; }
.bu-ob-rail { flex: none; background: #56574f; color: #bdbab0; padding: calc(var(--u) * 14) calc(var(--u) * 8); display: grid; align-content: start; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 8.5); }
.bu-ob-rail b { color: #e4e1d8; font-size: calc(var(--u) * 11); font-weight: 600; margin: 0 0 calc(var(--u) * 10) calc(var(--u) * 4); letter-spacing: -.01em; }
.bu-ob-rail span { padding: calc(var(--u) * 5) calc(var(--u) * 6); border-radius: calc(var(--u) * 4); white-space: nowrap; }
.bu-ob-rail .is-on { background: #d8c982; color: #3f3e35; font-weight: 600; }
.bu-ob-rail em { font-style: normal; font-size: calc(var(--u) * 7.5); font-weight: 600; color: #a09d94; margin: calc(var(--u) * 10) 0 calc(var(--u) * 2) calc(var(--u) * 6); }
.bu-ob-main { flex: 1; padding: calc(var(--u) * 16) calc(var(--u) * 18); min-width: 0; }
.bu-ob-main .bu-ob-pills { background: #ebe7df; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 3); width: max-content; color: #9d988d; }
.bu-ob-main .bu-ob-pills .is-on { color: #6b665e; font-weight: 600; box-shadow: none; }
.bu-ob-sheet .bu-ob-sec { margin-top: calc(var(--u) * 18); display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 10); font-weight: 600; color: #a19c91; }
.bu-ob-drow { position: relative; display: grid; grid-template-columns: calc(var(--u) * 108) 1fr calc(var(--u) * 46); align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 46); border-bottom: @.5 solid #e6e2d9; color: #a19c91; font-size: calc(var(--u) * 8.5); }
.bu-ob-drow .bu-ob-dots { position: static; }
.bu-ob-drow > .bu-ob-bar { justify-self: end; width: calc(var(--u) * 26); }
.bu-ob-lab { display: grid; gap: calc(var(--u) * 4); white-space: nowrap; }
.bu-ob-lab .bu-ob-bar { width: calc(var(--u) * 34); height: calc(var(--u) * 4); }
/* the lifted row */
.bu-ob-lrow { background: #fff; border-radius: calc(var(--u) * 10); padding: 0 calc(var(--u) * 14); }
.bu-ob-lrow.bu-ob-drow { color: #1a1a1a; font-size: calc(var(--u) * 10); font-weight: 500; border: 0; height: calc(var(--u) * 52); grid-template-columns: calc(var(--u) * 118) 1fr calc(var(--u) * 44); }
.bu-ob-lrow .bu-ob-lab .bu-ob-bar { background: #e4e0d7; width: calc(var(--u) * 40); }
.bu-ob-lrow .bu-ob-dots { color: #ec8f88; }
.bu-ob-lrow .bu-ob-dots i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.bu-ob-lrow .bu-ob-dots i:last-child { width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: #df3f35; }
.bu-ob-lrow .bu-ob-num { justify-self: end; display: flex; align-items: baseline; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 8); color: #6b665e; font-weight: 400; }
.bu-ob-num b { display: block; width: calc(var(--u) * 18); height: calc(var(--u) * 9); border-radius: calc(var(--u) * 2); background: #1a1a1a; align-self: center; }

/* ---- calendar week (c-head) ---- */
.bu-ob-cal { background: #F6F3EE; border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 @.6 #d6d1c5; padding: calc(var(--u) * 14) calc(var(--u) * 14); }
.bu-ob-crumb { font-size: calc(var(--u) * 7.5); color: #aaa59a; }
.bu-ob-cal .bu-ob-bar--t { width: calc(var(--u) * 56); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 4); background: #d6d1c5; margin: calc(var(--u) * 6) 0 calc(var(--u) * 12); }
.bu-ob-week { display: grid; grid-template-columns: repeat(var(--n), calc(var(--u) * 38)); gap: calc(var(--u) * 5); align-items: start; }
.bu-ob-day { display: grid; gap: calc(var(--u) * 4); align-content: start; }
.bu-ob-day > span { font-size: calc(var(--u) * 8); font-weight: 600; color: #9d988d; margin-bottom: calc(var(--u) * 2); }
.bu-ob-blk { display: block; border-radius: calc(var(--u) * 4); }
.bu-ob-blk--mint { background: #dde9e3; } .bu-ob-blk--pink { background: #f1e1df; } .bu-ob-blk--lil { background: #e3e2f1; } .bu-ob-blk--peach { background: #efe2d8; }
.bu-ob-blk--miss { border: @.9 dashed #cfa7a2; background: #fbfaf7; }
/* the lifted session card */
.bu-ob-sess { background: #CFE6DC; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 9) calc(var(--u) * 10) calc(var(--u) * 10); display: grid; gap: calc(var(--u) * 7); }
.bu-ob-sess b { font-size: calc(var(--u) * 10); font-weight: 600; }
.bu-ob-plan { position: relative; height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: rgba(26,26,26,.1); }
.bu-ob-plan::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 88%; border-radius: inherit; background: #1f7a5a; }

/* ---- chart configurator (c-pills) ---- */
.bu-ob-cfg { background: #F6F3EE; border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 @.6 #d6d1c5; padding: calc(var(--u) * 12); }
.bu-ob-sels { display: flex; gap: calc(var(--u) * 6); }
.bu-ob-sel { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 5) calc(var(--u) * 7); border-radius: calc(var(--u) * 6); background: #fbfaf7; box-shadow: 0 0 0 @.6 #dcd7cc; font-size: calc(var(--u) * 7.5); color: #aaa59a; white-space: nowrap; }
.bu-ob-sel b { color: #8d887e; font-weight: 600; }
.bu-ob-chev { width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); border-right: @.9 solid currentColor; border-bottom: @.9 solid currentColor; transform: rotate(45deg) translateY(calc(var(--u) * -1)); margin-left: calc(var(--u) * 2); }
.bu-ob-lines { position: absolute; left: 0; right: 0; bottom: 0; }
.bu-ob-lines svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the lifted menu */
.bu-ob-menu { background: #fff; border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 6); display: grid; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 9.5); }
.bu-ob-menu em { font-style: normal; font-size: calc(var(--u) * 7.5); color: #8a857c; padding: calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 2); }
.bu-ob-opt { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 6); color: #55534c; }
.bu-ob-opt.is-on { background: #f5f2ec; color: #1a1a1a; font-weight: 600; }
.bu-ob-opt.is-on i { margin-left: auto; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #d0643a; }

/* ---- a metric in statistics (c-chart) ---- */
.bu-ob-stat-c { background: #fff; border-radius: calc(var(--u) * 14); box-shadow: 0 0 0 @.6 #d6d1c5; padding: calc(var(--u) * 16) calc(var(--u) * 18); }
.bu-ob-ttl { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11); font-weight: 600; color: #8d887e; }
.bu-ob-moon { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; box-shadow: inset calc(var(--u) * -3) calc(var(--u) * -2) 0 calc(var(--u) * 1.1) #8d887e; transform: rotate(-20deg); }
.bu-ob-bands { position: relative; display: grid; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 14); }
.bu-ob-bands > i { display: block; height: calc(var(--u) * 30); border-radius: calc(var(--u) * 4); background: #f6f3ee; }
.bu-ob-bands > i:first-child { background: #f6e1de; }
.bu-ob-bands svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bu-ob-ax { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 12); }
.bu-ob-ax i { width: calc(var(--u) * 16); height: calc(var(--u) * 3.5); border-radius: calc(var(--u) * 2); background: #e6e2d9; }
/* the lifted tooltip */
.bu-ob-tip { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: #fff; font-size: calc(var(--u) * 10.5); font-weight: 500; white-space: nowrap; }
.bu-ob-tip > i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: #df3f35; flex: none; }
.bu-ob-tip .bu-ob-num { margin-left: auto; }