html,body{margin:0;height:100%;overflow:hidden;background:#0A1120}
a{color:#A8DCFF}a:hover{color:#FFFFFF}
.bk *{box-sizing:border-box}
.bk .nl{color:#DCE3EE;text-decoration:none;font-size:14px;font-weight:600;padding:12px 2px}
.bk .nl:hover{color:#FFFFFF}
.bk .cap{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.bk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;font-size:15px;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,filter .2s}
.bk .btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bk .btn-ghost{color:#F3F6FA;background:rgba(8,13,26,.4);border-color:rgba(255,255,255,.26);backdrop-filter:blur(14px)}
.bk .btn-ghost:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.bk .feat{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#DCE3EE}
.bk .glass{background:rgba(8,13,26,.62);border:1px solid rgba(255,255,255,.16);border-radius:20px;backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.bk .tile{text-decoration:none;color:#EEF2F8;display:flex;flex-direction:column;gap:8px;padding:clamp(14px,2.2vh,22px) 22px;border-radius:18px;background:rgba(10,17,32,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);transition:transform .25s,border-color .25s,background .25s}
.bk .tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.36);background:rgba(10,17,32,.72);color:#FFFFFF}
.bk .ov-l{background:linear-gradient(90deg,rgba(10,17,32,.95) 0%,rgba(10,17,32,.82) 34%,rgba(10,17,32,.25) 62%,rgba(10,17,32,0) 80%)}
.bk .ov-r{background:linear-gradient(270deg,rgba(10,17,32,.95) 0%,rgba(10,17,32,.82) 34%,rgba(10,17,32,.25) 62%,rgba(10,17,32,0) 80%)}
.bk .fade{background:linear-gradient(180deg,#0A1120 0%,rgba(10,17,32,0) 16%,rgba(10,17,32,0) 78%,#0A1120 100%)}
.bk .num{font-size:clamp(90px,17vh,200px);font-weight:800;letter-spacing:-0.06em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);user-select:none}
.bk .fld{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;color:#AEBACC}
.bk .inp{height:50px;padding:0 14px;border-radius:12px;border:1px solid rgba(160,185,220,.22);background:rgba(6,10,22,.55);color:#EEF2F8;font:500 15px Manrope,system-ui,sans-serif}
/* topic dropdown: dark, rounded, our own chevron; fully styled list where the browser allows it */
.bk .selw{position:relative}
.bk .selw svg{position:absolute;right:16px;top:50%;margin-top:-9px;pointer-events:none;color:#AEBACC}
.bk select.inp{appearance:none;-webkit-appearance:none;color-scheme:dark;width:100%;padding-right:46px;cursor:pointer}
.bk select.inp:hover{border-color:rgba(160,185,220,.4)}
.bk select.inp option{background:#101A2C;color:#EEF2F8}
@supports (appearance:base-select){
.bk select.inp,.bk select.inp::picker(select){appearance:base-select}
.bk select.inp{display:flex;align-items:center}
.bk select.inp::picker-icon{display:none}
.bk select.inp::picker(select){margin-top:8px;padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(12,19,34,.97);box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(18px)}
.bk select.inp option{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:9px;background:transparent;color:#DCE3EE;font:600 15px Manrope,system-ui,sans-serif;cursor:pointer}
.bk select.inp option:hover,.bk select.inp option:focus-visible{background:rgba(56,182,255,.14);color:#FFFFFF;outline:none}
.bk select.inp option:checked{background:rgba(56,182,255,.2);color:#FFFFFF}
.bk select.inp option::checkmark{color:#38B6FF;order:1;margin-left:auto}
}
.bk textarea.inp{height:110px;padding:12px 14px;resize:vertical}
.bk .inp:focus{outline:2px solid #38B6FF;outline-offset:1px;border-color:transparent}
.bk .fl{color:#AEBACC;text-decoration:none;font-size:14px}
.bk .fl:hover{color:#FFFFFF}
.bk .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(6,10,22,.6);border:1px solid rgba(160,185,220,.12)}
/* one app = one screen */
/* the stage: one scene at a time, the next photo wipes over the current one */
.bk .stage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#05080F;--io:cubic-bezier(.77,0,.18,1);--out:cubic-bezier(.16,1,.3,1)}
.bk .stage > .scr{position:absolute!important;inset:0;margin:0!important;min-height:0;height:auto;overflow:hidden;background:#0A1120;visibility:hidden;z-index:0;transition:visibility 0s linear 2.1s}
.bk .stage > .scr.down{clip-path:inset(100% 0 0 0)}
.bk .stage > .scr.up{clip-path:inset(0 0 100% 0)}
.bk .stage > .scr.on{visibility:visible;z-index:2;clip-path:inset(0 0 0 0);transition:clip-path 1.8s var(--io) .05s,visibility 0s}
.bk .stage > .scr.prev{visibility:visible;z-index:1;clip-path:inset(0 0 0 0)}
/* footer: the last step slides v3's footer up over the contact scene */
.bk .stage > .scr.fscene{clip-path:none!important;background:transparent;pointer-events:none;z-index:3}
.bk .stage > .scr.fscene.on{pointer-events:auto}
.bk .fscrim{position:absolute;inset:0;background:rgba(5,8,15,.6);opacity:0;transition:opacity .9s ease}
.bk .stage > .scr.on .fscrim{opacity:1}
.bk .fpanel{position:absolute;left:0;right:0;bottom:0;background:#0A1120;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -30px 80px rgba(0,0,0,.5);transform:translateY(100%);transition:transform 1s var(--io)}
.bk .stage > .scr.on .fpanel{transform:none;transition:transform 1.3s var(--out) .1s}
.bk .ck{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;border-radius:5px;border:1.5px solid rgba(255,255,255,.32);background:transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
.bk .ck:hover{border-color:rgba(255,255,255,.6)}
.bk .ck:checked{background:#38B6FF;border-color:#38B6FF;box-shadow:inset 0 0 0 3px #0E1729}
.bk .ck:focus-visible{outline:2px solid #38B6FF;outline-offset:2px}
@keyframes bkSpin{to{transform:rotate(360deg)}}
.bk .mscroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.bk .mscroll::-webkit-scrollbar{width:8px}
.bk .mscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}
.bk .mscroll::-webkit-scrollbar-track{background:transparent}
.bk .nl.acc-link{color:#8C99AE;font-weight:500}
.bk .nl.acc-link:hover{color:#FFFFFF}
@media (max-width:600px){.bk .acc-link{display:none}}
/* photos: slow drift always, a slow push-in as a scene arrives, the leaving scene dims and holds */
@keyframes bkDrift{from{transform:translate3d(-1%,0,0)}to{transform:translate3d(1%,-.6%,0)}}
.bk .stage .pimg{scale:1.16;transition:scale 3.2s var(--out),filter 1.8s ease;animation:bkDrift 44s ease-in-out infinite alternate}
.bk .stage > .scr.on .pimg{scale:1.03}
.bk .stage > .scr.prev .pimg{scale:1.07;filter:brightness(.5)}
/* content: the leaving copy fades out, the arriving copy rises in, callouts follow */
.bk .stage .mo{opacity:0;translate:0 44px;transition:opacity .45s ease,translate .6s ease}
.bk .stage .mo2{opacity:0;translate:70px 0;transition:opacity .45s ease,translate .6s ease}
.bk .stage > .scr.on .mo{opacity:1;translate:0 0;transition:opacity 1.1s ease .8s,translate 1.4s var(--out) .8s}
.bk .stage > .scr.on .mo2{opacity:1;translate:0 0;transition:opacity 1.1s ease 1.15s,translate 1.4s var(--out) 1.15s}
/* side section dots */
.bk .dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:4px}
.bk .dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;text-decoration:none}
@media (prefers-reduced-motion:reduce){
.bk .stage > .scr,.bk .stage .pimg,.bk .stage .mo,.bk .stage .mo2{transition-duration:.01s!important;transition-delay:0s!important}
.bk .stage .pimg{animation:none}
}
@media (max-height:1000px){.bk .num{display:none}.bk .num + .cap{margin-top:0!important}}
@media (max-height:860px){.bk .td,.bk .hT{display:none}}
@media (max-width:1100px){.bk .navlinks{display:none}}
@media (max-width:900px){
.bk .ov-l,.bk .ov-r{background:linear-gradient(180deg,rgba(10,17,32,.55) 0%,rgba(10,17,32,.88) 45%,rgba(10,17,32,.96) 100%)}
.bk .num{font-size:120px}
.bk .dots{display:none}
}
@media (max-width:760px),(max-height:700px){
.bk .mo2{display:none}
.bk #apps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.bk .td{display:none}
}

/* ---- site additions (not in the design canvas) ---- */
[hidden]{display:none!important}
.bk .dd-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6F7C91}
.bk .dd-sum.on{color:#EEF2F8}
.bk .dd-row{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:9px;cursor:pointer;font:600 14px Manrope,system-ui,sans-serif;color:#DCE3EE}
.bk .dd-row.on{color:#FFFFFF}
.bk .dd-dot{width:8px;height:8px;border-radius:50%;flex:none}
.bk .form-err{margin:0;font-size:13.5px;color:#FF8A8A}
.bk .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* small screens: these elements carry inline display styles from the design, so the hide rules need !important */
@media (max-width:1100px){.bk .navlinks{display:none!important}}
@media (min-width:761px) and (max-height:860px){.bk .hT,.bk .td{display:none!important}}
@media (min-width:761px) and (max-height:600px){.bk .mo2{display:none!important}}
@media (min-width:761px) and (max-height:700px){.bk #apps .tile > span:nth-child(3){display:none!important}.bk #apps .tile{padding:12px 14px!important;gap:0!important}}
/* short screens hide the example cards: keep Hangar and Competition text on the left (their layout is reversed) */
@media (min-width:901px) and (max-height:700px){.bk [style*="wrap-reverse"][style*="row-reverse"]{justify-content:flex-end!important}}

/* any scene taller than the screen scrolls within itself; app.js moves on at its edge */
.bk .stage > .scr.on{overflow-y:auto!important;overscroll-behavior:contain}

/* ---- phones: all text shown (scenes scroll), compact header, menu drawer ---- */
@media (max-width:760px){
.bk .td{display:block!important}
.bk .feat{font-size:14px!important}
.bk [data-scene="account"] .mo > div:nth-child(2){grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.bk [data-scene="account"] .mo > div:nth-child(2) > div{padding:18px!important;gap:6px!important}
.bk [data-scene="contact"] .mo{gap:18px!important}
.bk [data-scene="contact"] .glass{padding:16px!important}
.bk #c-form{gap:12px!important}
.bk #c-form > div[style*="grid"],.bk #eoi-form > div[style*="grid"]{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
/* header: full on the hero, compact once you move on; the scenes start below it, so it never covers them */
.bk{--hh:72px}
.bk.compact{--hh:48px}
.bk header{background:#0A1120!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.bk header .navrow{height:var(--hh)!important;padding:0 16px!important;transition:height .3s cubic-bezier(.16,1,.3,1)}
.bk header img[alt="BLANIK logo"]{width:40px!important;height:27px!important;transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1)}
.bk.compact header img[alt="BLANIK logo"]{width:32px!important;height:22px!important}
.bk header .navrow > a[data-go="top"] > span{display:inline-block;max-width:160px;overflow:hidden;white-space:nowrap;transition:opacity .2s ease,max-width .3s cubic-bezier(.16,1,.3,1)}
.bk.compact header .navrow > a[data-go="top"] > span{opacity:0;max-width:0}
.bk header .navrow > div:last-of-type{transition:opacity .2s ease,visibility 0s linear 0s}
.bk.compact header .navrow > div:last-of-type{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.bk header #mSec{display:flex;position:absolute;right:16px;top:50%;transform:translateY(-50%);align-items:center;gap:8px;font-size:14px;font-weight:700;color:#EEF2F8;opacity:0;pointer-events:none;transition:opacity .25s ease}
.bk.compact header #mSec{opacity:1}
.bk .stage > .scr{top:49px!important}
.bk [data-scene="top"]{padding-top:24px!important}
/* centre each scene's content only while it fits; a taller one starts at the top and scrolls (no clipped top) */
.bk .stage > .scr{align-items:flex-start!important}
.bk .stage > .scr > div:not([aria-hidden]){margin-top:auto!important;margin-bottom:auto!important}
.bk [data-scene="top"]{justify-content:flex-start!important}
.bk [data-scene="top"] > div:not([aria-hidden]){flex:none!important;margin-bottom:0!important}
.bk [style*="padding: clamp(96px"],.bk [style*="padding: clamp(100px"]{padding-top:24px!important}
.bk [data-scene="account"],.bk [data-scene="contact"]{padding-top:24px!important}
.bk [data-scene="contact"]{padding-left:16px!important;padding-right:16px!important;padding-bottom:0!important;flex-direction:column!important;align-items:stretch!important}
}
/* the menu drawer (opened from the logo on phones) */
.bk .drawer{position:fixed;inset:0;z-index:90}
.bk .dr-scrim{position:absolute;inset:0;background:rgba(5,8,15,.6);opacity:0;transition:opacity .3s ease}
.bk .drawer.open .dr-scrim{opacity:1}
.bk .dr-panel{position:absolute;left:0;top:0;bottom:0;width:min(300px,82vw);background:#0C1426;border-right:1px solid rgba(255,255,255,.1);box-shadow:20px 0 60px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:2px;padding:14px 12px;overflow-y:auto}
.bk .drawer.open .dr-panel{transform:none}
.bk .dr-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.bk .dr-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:.24em;color:#FFFFFF}
.bk .dr-close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#EEF2F8;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bk .dr-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;color:#DCE3EE;text-decoration:none;font-size:16px;font-weight:700}
.bk .dr-item:hover{background:rgba(255,255,255,.05);color:#FFFFFF}
.bk .dr-item.cur{background:rgba(255,255,255,.08);color:#FFFFFF}
.bk .dr-sep{height:1px;background:rgba(255,255,255,.08);margin:6px 8px}
/* shop partner pop-up (site addition) */
.bk .pt-kinds{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk .pt-kinds legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:700;color:#AEBACC}
.bk .pt-kind{position:relative;cursor:pointer}
.bk .pt-kind input{position:absolute;opacity:0;width:1px;height:1px}
.bk .pt-kind span{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(160,185,220,.22);background:rgba(6,10,22,.55);transition:border-color .15s,background-color .15s}
.bk .pt-kind b{font-size:14.5px;font-weight:800;color:#EEF2F8}
.bk .pt-kind i{font-style:normal;font-size:12.5px;line-height:1.4;color:#8C99AE}
.bk .pt-kind:hover span{border-color:rgba(255,255,255,.4)}
.bk .pt-kind input:checked + span{border-color:#E5E4E2;background:rgba(229,228,226,.12)}
.bk .pt-kind input:focus-visible + span{outline:2px solid #E5E4E2;outline-offset:2px}
.bk .pt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.bk .pt-kinds{grid-template-columns:1fr}.bk .pt-row{grid-template-columns:1fr}}
/* the section name only shows in the compact phone header */
.bk #mSec{display:none}
/* hero tiles: on phones only the number and dot, then the app name */
.bk .tile .t-name{display:none}
@media (max-width:760px){
.bk #apps .tile .t-nm,.bk #apps .tile > span:nth-child(4){display:none!important}
.bk #apps .tile > span:nth-child(3){font-size:12px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:0!important;color:#8C99AE!important;margin-top:-4px}
.bk #apps .tile .t-name{display:block;font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;color:#FFFFFF}
.bk #apps .tile{gap:8px!important;padding:14px!important}
.bk #apps .tile .cap{font-size:10.5px!important}
.bk #apps .tile > span:first-child > span:last-child{width:7px!important;height:7px!important}
}
/* phone fixes: stat numbers fit, status pills stay on one line, the footer never scrolls inside itself */
@media (max-width:760px){
.bk .glass [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] [style*="font-size: 32px"]{font-size:24px!important}
.bk .glass [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] [style*="font-size: 24px"]{font-size:19px!important}
.bk .glass [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] > div{min-width:0}
.bk .glass [style*="border-radius: 999px"]{white-space:nowrap;flex:none}
.bk .stage > .scr.fscene{overflow:hidden!important}
.bk .fpanel{max-height:100%;overflow-y:auto}
}
/* pull to refresh on the hero (drawn by app.js) */
.bk .ptr{position:absolute;left:50%;top:calc(var(--hh,76px) + 14px);z-index:40;width:40px;height:40px;margin-left:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0C1426;border:1px solid rgba(255,255,255,.16);color:#AEBACC;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,0);pointer-events:none;transition:opacity .2s}
.bk .ptr.ready{color:#FFFFFF;border-color:rgba(255,255,255,.4)}
.bk .ptr.spin svg{animation:bkPtr .8s linear infinite}
@keyframes bkPtr{to{transform:rotate(360deg)}}
/* scenes scroll up and down only, never sideways */
.bk .stage > .scr.on{overflow-x:hidden!important}
/* phones: the contact scene's mini footer follows the form instead of sitting fixed over it;
   the next scroll still brings up the full footer */
@media (max-width:760px){.bk .stage > .scr[data-scene="contact"] > div[style*="z-index: 6"]{position:static!important;order:2;flex:none;margin:32px 0 0 -16px!important;width:100vw;box-sizing:border-box}}
/* phones: the contact scene's mini footer keeps only the copyright and the More button */
@media (max-width:760px){
.bk .stage > .scr[data-scene="contact"] > div[style*="z-index: 6"] img,
.bk .stage > .scr[data-scene="contact"] > div[style*="z-index: 6"] .mf-site,
.bk .stage > .scr[data-scene="contact"] > div[style*="z-index: 6"] .fl{display:none!important}
.bk .stage > .scr[data-scene="contact"] > div[style*="z-index: 6"] > div{flex-wrap:nowrap!important;padding:0 16px!important}
}
/* header Contact: text on larger screens, an envelope icon on phones */
.bk .hdr-contact .hc-ic{display:none}
@media (max-width:760px){
.bk header .hdr-contact{width:44px;padding:0!important;border:0!important;background:transparent!important;backdrop-filter:none!important;color:#EEF2F8}
.bk header .hdr-contact .hc-ic{display:block;width:24px;height:24px}
.bk header .hdr-contact .hc-tx{display:none}
}
/* language picker: a globe button with a list in the header; on phones it lives in the menu drawer */
.bk .lang-wrap{position:relative;display:flex}
.bk .lang-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#EEF2F8;font:700 13px Manrope,system-ui,sans-serif;cursor:pointer}
.bk .lang-btn:hover{background:rgba(255,255,255,.08)}
.bk .lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:220px;padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(12,19,34,.98);box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.bk .lang-item,.bk .dr-lang-item{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:9px;color:#DCE3EE;text-decoration:none;font-size:14px;font-weight:600}
.bk .lang-item:hover,.bk .dr-lang-item:hover{background:rgba(255,255,255,.06);color:#FFFFFF}
.bk .lang-item.cur,.bk .dr-lang-item.cur{background:rgba(255,255,255,.1);color:#FFFFFF}
.bk .dr-lang-row{width:100%;border:0;background:transparent;font-family:inherit;cursor:pointer;text-align:left}
.bk .dr-lang-row .dr-lang-label{flex:1}
.bk .dr-lang-cur{font-size:14px;font-weight:600;color:#8C99AE}
.bk .dr-chev{flex:none;display:flex;color:#8C99AE}
.bk .dr-lang-list{display:flex;flex-direction:column;gap:2px}
@media (max-width:760px){.bk .lang-wrap{display:none}}
@media (min-width:761px){.bk .dr-lang{display:none}}
/* phone menu: the language page slides in over the menu, and back out */
.bk .dr-panel{overflow-x:hidden}
.bk .dr-panel.sub-open{overflow-y:hidden}
.bk .dr-page{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:2px;padding:14px 12px;background:#0C1426;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s}
.bk .dr-panel.sub-open .dr-page{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.16,1,.3,1),visibility 0s}
.bk .dr-page-head{display:flex;align-items:center;gap:8px;padding:2px 2px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;font-weight:800;color:#FFFFFF}
.bk .dr-back{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#EEF2F8;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bk .dr-page .dr-lang-item{min-height:46px;font-size:16px}
/* phones: the hero pill is just its words, no colour dots */
@media (max-width:760px){.bk [data-scene="top"] .mo > span:first-child > span:first-child{display:none!important}}
/* phones: the app's colour on its number and its name */
@media (max-width:760px){
.bk #apps .tile:nth-child(1) .t-name{color:#FFD49E}
.bk #apps .tile:nth-child(2) .t-name{color:#A8DCFF}
.bk #apps .tile:nth-child(3) .t-name{color:#8FE0B5}
.bk #apps .tile:nth-child(4) .t-name{color:#C2CAD6}
.bk #apps .tile:nth-child(5) .t-name{color:#D2C4FF}
.bk #apps .tile:nth-child(6) .t-name{color:#FFB3B3}
}
/* phones: room between the hero buttons and the app cards */
@media (max-width:760px){.bk #apps{margin-top:36px!important}}
/* phones: no Talk to us button in the hero (the envelope in the header goes to Contact) */
@media (max-width:760px){.bk [data-scene="top"] .btn[data-go="contact"]{display:none!important}}
/* two-way toggle (Competition: Individual / Team standings), a pill like Fleet's List / Map */
.bk .seg{display:flex;gap:6px;padding:5px;border-radius:12px;background:rgba(8,13,26,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);align-self:flex-start}
.bk .seg button{padding:8px 14px;border:0;border-radius:8px;background:transparent;color:#AEBACC;font:700 13px Manrope,system-ui,sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.bk .seg button:hover{color:#FFFFFF}
.bk .seg button.on{background:#FF6B6B;color:#2B0D0D;font-weight:800}
.bk .seg button:focus-visible{outline:2px solid #FF6B6B;outline-offset:2px}
/* Competition: the Standings card and its toggle sit a little lower (larger screens) */
@media (min-width:761px){.bk [data-scene="landing"] .mo2{transform:translateY(64px)}}
/* phones: language globe beside the Contact envelope in the large header */
.bk .hdr-lang{display:none}
@media (max-width:760px){
.bk header .hdr-lang{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#EEF2F8;cursor:pointer}
.bk header .navrow > div:last-of-type{gap:4px!important}
}