/* ==========================================================================
   VELOURÉ — styles. The posture of activetheory.net: the page is a world
   (world.js) travelled by scroll; the interface is a few technical labels,
   a pill, a cursor and modals. One family throughout — Chakra Petch, our
   stand-in for NB Architekt — set in caps. Tokens live in tokens.css.
   ========================================================================== */

@font-face{font-family:'Chakra Petch';src:url('assets/fonts/chakra-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/chakra-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/chakra-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/chakra-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Share Tech Mono';src:url('assets/fonts/sharetech-mono.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ui:'Chakra Petch','Share Tech Mono',ui-monospace,Consolas,monospace;
  --mono:'Share Tech Mono',ui-monospace,Consolas,monospace;
  --tech:#BFE3EC;
  --tech-dim:rgba(191,227,236,.55);
  --white:#EAF6FA;
  --ease:cubic-bezier(.22,1,.36,1);
  --glass:linear-gradient(160deg,rgba(10,14,19,.9) 0%,rgba(6,8,11,.86) 100%);
  --glass-edge:rgba(191,227,236,.2);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#040506}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--ink);background:transparent;
  font-family:var(--ui);font-weight:400;font-size:13px;line-height:1.7;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
html.modal-open body{overflow:hidden}
html.no-world body{background:radial-gradient(90% 60% at 50% -10%,#28506a 0%,#0c0e12 55%,#040506 100%) fixed}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
img,svg{display:block}
::selection{background:rgba(168,205,224,.35);color:#fff}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--tech);margin:0 0 14px}

/* the world sits behind everything */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:2}

/* ---------- loader: the slash disc ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#030405;display:grid;place-items:center;transition:opacity 1.1s var(--ease),visibility 1.1s}
.loader::before{content:"";position:absolute;left:50%;top:50%;width:min(46vmin,46vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px rgba(191,227,236,.45),0 0 60px -10px rgba(168,205,224,.75),inset 0 0 50px -20px rgba(168,205,224,.55)}
.loader canvas{position:relative;z-index:1}
.ld-brand{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--tech-dim)}
html.loaded .loader{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- cursor ---------- */
html.has-cursor,html.has-cursor *{cursor:none !important}
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;mix-blend-mode:difference;display:none}
html.has-cursor .cursor{display:block}
.cursor i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor .dot{width:6px;height:6px;background:#fff}
.cursor .ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.75);transition:transform .3s var(--ease),border-color .3s,width .3s,height .3s}
.cursor.hot .ring,html.card-hover .cursor .ring{transform:translate(-50%,-50%) scale(1.6);border-color:#fff}
.cursor.down .ring{transform:translate(-50%,-50%) scale(.75)}

/* ---------- interface ---------- */
.ui{position:relative;z-index:5}
.nav{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:flex-start;gap:18px;padding:34px 40px 0;pointer-events:none;
  opacity:0;transform:translateY(-10px);transition:opacity 1s var(--ease) .3s,transform 1s var(--ease) .3s}
html.loaded .nav{opacity:1;transform:none}
.nav::before{content:"";position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(180deg,rgba(3,5,7,.75),rgba(3,5,7,0));pointer-events:none;z-index:-1}
.nav > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);padding:9px 0}
.brand svg{width:22px;height:24px;fill:none;stroke:var(--tech);stroke-width:3;stroke-linejoin:round}
.brand span{font-size:12px;letter-spacing:.42em;text-transform:uppercase;font-weight:700}
.snd{display:flex;align-items:center;gap:3px;height:42px;padding:0 6px 0 22px;color:var(--tech-dim);transition:color .3s}
.snd:hover,html.sound-on .snd{color:var(--tech)}
.snd i{display:block;width:2px;height:6px;background:currentColor;transform-origin:50% 100%;transition:height .3s}
html.sound-on .snd i{animation:eq 1.1s ease-in-out infinite}
html.sound-on .snd i:nth-child(2){animation-delay:-.3s}html.sound-on .snd i:nth-child(3){animation-delay:-.6s}html.sound-on .snd i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:5px}50%{height:14px}}
.snd span{margin-left:10px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase}
.pill-wrap{margin-left:auto;position:relative;display:grid;justify-items:end;gap:12px}
.pill{position:relative;display:flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;border:1px solid rgba(191,227,236,.38);background:rgba(6,10,14,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(168,205,224,.06),0 20px 44px -16px rgba(168,205,224,.35)}
.pill::after{content:"";position:absolute;left:14%;right:14%;bottom:-20px;height:24px;border-radius:50%;background:radial-gradient(50% 50% at 50% 0%,rgba(168,205,224,.6),rgba(168,205,224,0) 70%);filter:blur(6px);opacity:.85;pointer-events:none}
.pill a{position:relative;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--white);padding:12px 2px;transition:text-shadow .3s,color .3s}
.pill a:hover{text-shadow:0 0 14px rgba(191,227,236,.9)}
.pill .ln{position:relative;width:54px;height:12px;margin:0 16px;flex:0 0 auto;--amp:0;--ph:0}
.pill .ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(191,227,236,.75);opacity:calc(1 - var(--amp))}
.pill .ln::after{content:"";position:absolute;left:-18px;right:-18px;top:0;bottom:0;opacity:var(--amp);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='%23BFE3EC' stroke-width='1.2'/></svg>");
  background-repeat:repeat-x;background-position:calc(var(--ph) * 1px) center;background-size:24px 12px}
.player{display:flex;align-items:center;gap:12px;padding-right:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tech-dim)}
.player button{color:var(--tech);letter-spacing:0;font-size:12px;padding:6px 4px;transition:text-shadow .3s}
.player button:hover{text-shadow:0 0 12px rgba(191,227,236,.9)}
.player .pn{min-width:112px;text-align:center}
html.sound-on .player .pn{color:var(--tech)}
.login{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;border:1px solid rgba(191,227,236,.22);background:rgba(6,10,14,.35);backdrop-filter:blur(12px);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tech);transition:border-color .3s,box-shadow .4s}
.login:hover{border-color:var(--tech);box-shadow:0 0 24px -6px rgba(168,205,224,.55)}

/* ---------- stations ---------- */
.scene{position:relative;min-height:100vh}
.hero{min-height:100vh}
.work{min-height:340vh}
#process{min-height:110vh}
.end{min-height:100vh}
.anchor{position:absolute;top:0}

.over{position:absolute;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease);pointer-events:none}
.over.on{opacity:1;transform:none;pointer-events:auto}
.over p{margin:0 0 16px;max-width:38ch;text-transform:uppercase;font-size:12.5px;line-height:1.8;letter-spacing:.08em;color:var(--white)}
.over p.k{color:var(--tech);font-size:10.5px}

.cue{left:50%;top:36vh;transform:translate(-50%,0);text-align:center;z-index:3}
.cue span{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--tech);text-shadow:0 0 18px rgba(191,227,236,.75);animation:cue 2.6s ease-in-out infinite}
.cue.on{transform:translate(-50%,0)}
@keyframes cue{0%,100%{opacity:1}50%{opacity:.4}}
html:not(.loaded) .cue{opacity:0}

.col-right{right:6vw;top:50%;width:min(360px,40vw);transform:translateY(calc(-50% + 14px))}
.col-right.on{transform:translateY(-50%)}
.col-left{left:6vw;bottom:9vh;width:min(420px,70vw)}
.col-left.wide{width:min(620px,86vw);bottom:auto;top:50%;transform:translateY(calc(-50% + 14px))}
.col-left.wide.on{transform:translateY(-50%)}

.work .col-left{position:sticky;top:calc(100vh - 330px);bottom:auto;margin-left:6vw;padding-top:0;display:inline-block;vertical-align:top}
.arrows{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.arrows a{display:inline-flex;gap:14px;align-items:baseline;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);transition:color .3s,text-shadow .3s,transform .4s var(--ease)}
.arrows a i{font-style:normal;color:#C6A4FF;letter-spacing:0}
.arrows a:hover{color:#fff;text-shadow:0 0 16px rgba(198,164,255,.8);transform:translateX(6px)}
.ask{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(191,227,236,.45);background:rgba(6,10,14,.55);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--white);box-shadow:0 18px 40px -18px rgba(168,205,224,.45);transition:border-color .3s,box-shadow .4s}
.ask span{color:var(--tech);animation:cue 1.6s ease-in-out infinite}
.ask:hover{border-color:var(--tech);box-shadow:0 0 28px -6px rgba(168,205,224,.6)}
.hint-pick{position:sticky;top:calc(100vh - 70px);display:block;margin:0 6vw 0 auto;width:max-content;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--tech-dim)}
html:not(.world-on) .hint-pick{display:none}

.big{font-weight:700;text-transform:uppercase;font-size:clamp(40px,7vw,104px);line-height:.95;letter-spacing:.01em;margin:0 0 26px;color:var(--white)}
.big i{font-style:normal;color:var(--tech)}
.arrow-link{display:inline-flex;gap:14px;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--white);transition:transform .4s var(--ease),text-shadow .3s}
.arrow-link i{font-style:normal;color:var(--tech)}
.arrow-link:hover{transform:translateX(6px);text-shadow:0 0 14px rgba(191,227,236,.8)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--white);
  padding:16px 26px;border-radius:999px;border:1px solid rgba(191,227,236,.5);background:rgba(8,14,18,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);transition:transform .4s var(--ease),border-color .3s,background .3s,box-shadow .5s var(--ease)}
.btn:hover{transform:translateY(-1px);border-color:var(--tech);background:rgba(168,205,224,.12);box-shadow:0 0 28px -4px rgba(168,205,224,.45),0 18px 40px -14px rgba(0,0,0,.9)}
.btn i,.btn .ar{font-style:normal;color:var(--tech);display:inline-block;transition:transform .35s var(--ease)}
.btn:hover i,.btn:hover .ar{transform:translateX(4px)}
.btn.ghost,.btn-ghost{border-color:rgba(191,227,236,.22)}
.btn[disabled]{cursor:not-allowed;opacity:.5}
.btn-sm{padding:12px 18px;font-size:10.5px}

/* the glitch: DOM text splits while the page moves */
html.scrolling .gl{animation:glitch .22s steps(2) infinite}
@keyframes glitch{0%{text-shadow:-2px 0 rgba(80,220,255,.7),2px 0 rgba(255,90,150,.6);transform:translateX(0)}50%{text-shadow:2px 0 rgba(80,220,255,.7),-2px 0 rgba(255,90,150,.6);transform:translateX(1px)}100%{text-shadow:-1px 0 rgba(80,220,255,.6),1px 0 rgba(255,90,150,.5);transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){html.scrolling .gl{animation:none}}

/* a11y list of the cards: hidden until focused with the keyboard */
.sr-list{position:absolute;left:6vw;top:14vh;margin:0;padding:0;list-style:none;display:grid;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s}
.sr-list:focus-within{opacity:1;pointer-events:auto}
.sr-list button{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);padding:8px 12px;border:1px solid var(--glass-edge);border-radius:8px;background:rgba(6,10,14,.7)}
.sr-list button:focus-visible{outline:1px solid var(--tech);outline-offset:2px}

/* ---------- footer ---------- */
.foot{padding:12vh 6vw 8vh;background:linear-gradient(180deg,rgba(4,5,6,0),rgba(4,5,6,.9) 30%);}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:32px;border-top:1px solid rgba(191,227,236,.16)}
.foot p{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.9}
.foot p.k{margin-bottom:10px}
.foot a{color:var(--white);transition:color .3s,text-shadow .3s}
.foot a:hover{color:#fff;text-shadow:0 0 12px rgba(191,227,236,.8)}
.disclaimer{margin:56px 0 0;max-width:900px;font-size:11px;line-height:1.8;letter-spacing:.02em;color:var(--muted)}
.disclaimer b{font-weight:400;color:var(--ink-2)}
.copy{margin:28px 0 0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:4vh 4vw;background:rgba(3,5,7,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .4s var(--ease)}
.modal.on{opacity:1}
.modal[hidden]{display:none}
.m-box{position:relative;width:min(1000px,100%);max-height:92vh;overflow:auto;padding:clamp(28px,4vw,56px);background:var(--glass);border:1px solid var(--glass-edge);border-top-color:rgba(220,236,244,.34);border-radius:22px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 80px -30px rgba(168,205,224,.3);transform:translateY(22px) scale(.985);transition:transform .55s var(--ease);scrollbar-width:thin;scrollbar-color:rgba(191,227,236,.3) transparent}
.modal.on .m-box{transform:none}
.m-close{position:sticky;top:0;float:right;display:inline-flex;gap:10px;align-items:center;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tech);padding:10px 14px;border:1px solid rgba(191,227,236,.25);border-radius:999px;background:rgba(6,10,14,.8);z-index:2;transition:border-color .3s}
.m-close i{font-style:normal}
.m-close:hover{border-color:var(--tech)}
.m-title{font-weight:700;text-transform:uppercase;font-size:clamp(32px,5vw,74px);line-height:.98;letter-spacing:.005em;margin:0 0 14px;color:var(--white);clear:both}
.meta{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tech-dim);margin:0 0 22px}
.m-lede{font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.75;color:var(--white);max-width:60ch;margin:0 0 30px}
.m-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:0 0 26px}
.m-cols h3,.not-h,.stage h3{font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.2em;color:var(--tech);margin:0 0 14px}
.m-cols p{margin:0;font-size:12.5px;line-height:1.8;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list li{position:relative;padding-left:30px;font-size:12.5px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.list li::before{content:"->";position:absolute;left:0;top:0;color:var(--tech);letter-spacing:0}
.list.num{counter-reset:n}
.list.num li{counter-increment:n}
.list.num li::before{content:counter(n,decimal-leading-zero)}
.list.not li::before{content:"x";color:#F08A8A}
.m-note{margin:0 0 28px;padding:16px 20px;border:1px solid rgba(191,227,236,.18);border-radius:12px;background:rgba(168,205,224,.06);font-size:11.5px;line-height:1.7;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.m-foot{margin:26px 0 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.m-foot a{color:var(--tech)}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0 34px}
.stage{padding:24px;border:1px solid rgba(191,227,236,.16);border-radius:14px;background:rgba(255,255,255,.02)}
.stage .sn{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--tech-dim);margin:0 0 28px}
.stage h3{font-size:22px;letter-spacing:.06em;color:var(--white)}
.stage p{margin:0;font-size:12.5px;line-height:1.8;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.not-h{margin-top:8px}
.list.not{margin-bottom:30px}

/* ---------- the start box (booking / application) and the path finder ---------- */
.startbox{border:1px solid rgba(191,227,236,.18);border-radius:16px;background:rgba(255,255,255,.02);overflow:hidden}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.tab{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:20px 26px;border-bottom:1px solid transparent;margin-bottom:-1px;color:var(--muted);transition:color .25s,border-color .25s}
.tab + .tab{border-left:1px solid var(--rule)}
.tab .ti{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.tab .ts{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tab.on{color:var(--white);border-bottom-color:var(--tech)}
.tab.on .ts{color:var(--muted)}
.panel{display:none;padding:clamp(22px,3vw,36px)}
.panel.on{display:block}
.stepbar{display:flex;gap:6px;margin-bottom:24px}
.stepbar i{display:block;flex:1;height:2px;background:var(--rule-strong);transition:background .3s}
.stepbar i.on{background:var(--tech);box-shadow:0 0 8px var(--tech)}
.router{border:1px solid rgba(191,227,236,.18);border-radius:16px;background:rgba(255,255,255,.02);padding:clamp(22px,3vw,36px)}
.prog{display:flex;gap:6px;margin-bottom:26px}
.prog i{display:block;width:34px;height:2px;background:var(--rule-strong);transition:background .3s}
.prog i.on{background:var(--tech);box-shadow:0 0 8px var(--tech)}
.q h3{font-weight:700;text-transform:uppercase;font-size:clamp(20px,2vw,30px);line-height:1.15;letter-spacing:.02em;margin:0 0 10px;color:var(--white)}
.hint{margin:0 0 24px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:18px;text-align:left;width:100%;padding:15px 18px;border:1px solid var(--rule);border-radius:10px;background:rgba(255,255,255,.025);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:border-color .25s,background .25s,transform .35s var(--ease),box-shadow .35s}
.opt .k{font-size:11px;letter-spacing:.1em;color:var(--tech);width:20px;flex:0 0 auto;margin:0}
.opt:hover{border-color:rgba(191,227,236,.5);background:var(--blue-soft);transform:translateX(3px);box-shadow:0 0 24px -10px rgba(168,205,224,.5)}
.router-foot{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--rule)}
.res .rlab{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--tech);margin-bottom:12px}
.res h3{font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);line-height:1.05;margin:0 0 14px;color:var(--white)}
.res .track{color:var(--tech)}
.res .why{color:var(--ink-2);margin:0 0 24px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.75}
.steps{display:grid;border-top:1px solid var(--rule)}
.step{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.step .sn{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tech);padding-top:2px;flex:0 0 70px}
.par{margin-top:22px;padding:16px 20px;border:1px solid var(--blue-line);border-radius:10px;background:var(--blue-soft);display:grid;gap:6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.par b{font-weight:400;font-size:10.5px;letter-spacing:.2em;color:var(--tech)}
.legalnote{font-size:11px;line-height:1.7;letter-spacing:.03em;color:var(--muted);margin:18px 0 0}
.res-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.host{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.host .av{width:38px;height:38px;border-radius:50%;border:1px solid var(--blue-line);display:grid;place-items:center;color:var(--tech);font-size:11px;letter-spacing:.1em;flex:0 0 auto}
.host .hm{display:flex;flex-direction:column;gap:2px}
.host .hm b{font-weight:400;color:var(--white);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.host .hm em{font-style:normal;color:var(--muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.host .hb{margin-left:auto;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bk-h{font-weight:700;text-transform:uppercase;font-size:20px;margin:0 0 6px;color:var(--white)}
.bk-s{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1px solid var(--rule);border-radius:10px;background:rgba(255,255,255,.025);color:var(--ink-2);transition:border-color .25s,background .25s,box-shadow .3s}
.day .dw{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.day .dd{font-weight:700;font-size:24px;line-height:1.1;color:var(--white)}
.day .dm{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.day:hover{border-color:rgba(191,227,236,.5)}
.day.on{border-color:var(--tech);background:var(--blue-soft);box-shadow:0 0 22px -8px rgba(168,205,224,.6)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:16px}
.slot{font-size:12px;letter-spacing:.08em;padding:12px 8px;border:1px solid var(--rule);border-radius:10px;color:var(--ink-2);transition:border-color .25s,background .25s}
.slot:hover{border-color:rgba(191,227,236,.5)}
.slot.on{border-color:var(--tech);background:var(--blue-soft);color:var(--white)}
.slot[disabled]{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.tz{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.bk-sum{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border:1px solid var(--blue-line);border-radius:10px;background:var(--blue-soft);margin-bottom:20px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bk-sum b{font-weight:400;color:var(--white)}
.bk-sum span{color:var(--muted)}

.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14px;letter-spacing:.03em;color:var(--ink);background:rgba(255,255,255,.035);border:1px solid var(--rule);border-radius:10px;padding:13px 14px;transition:border-color .25s,background .25s,box-shadow .3s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23BFE3EC' stroke-width='1.4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field select option{background:#14161B;color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tech);background:rgba(255,255,255,.05);box-shadow:0 0 20px -8px rgba(168,205,224,.6)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.checks{display:grid;gap:10px}
.check{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .25s,background .25s;color:var(--ink-2)}
.check.on{border-color:var(--blue-line);background:var(--blue-soft)}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:16px;height:16px;margin:3px 0 0;border:1px solid var(--rule-strong);border-radius:3px;background:transparent;position:relative;cursor:pointer}
.check input:checked{border-color:var(--tech);background:var(--tech)}
.check input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--blue-ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.check span{font-size:12px;line-height:1.6;letter-spacing:.03em}
.check span b{color:var(--white);font-weight:400}
.check span em{display:block;font-style:normal;color:var(--muted);font-size:11.5px;margin-top:2px}
.check a{color:var(--tech) !important;text-decoration:underline;text-underline-offset:2px}
.safety{display:flex;gap:12px;align-items:flex-start;margin-top:6px;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;color:var(--muted);font-size:12px;line-height:1.6;letter-spacing:.03em}
.safety svg{flex:0 0 auto;margin-top:2px;color:var(--tech)}
.review{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:1px solid var(--rule);margin-bottom:20px}
.review > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:12.5px;letter-spacing:.04em}
.review > div span:first-child{color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.18em;padding-top:2px}
.review > div span:last-child{text-align:right;color:var(--ink)}
.err{margin:14px 0 0;padding:12px 14px;border:1px solid rgba(240,138,138,.4);border-radius:10px;background:rgba(240,138,138,.08);color:var(--err);font-size:12.5px;letter-spacing:.03em}
.done{text-align:center;padding:14px 0 6px}
.done .ck{width:54px;height:54px;border-radius:50%;border:1px solid var(--tech);color:var(--tech);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 34px -8px var(--tech)}
.done h3{font-weight:700;text-transform:uppercase;font-size:26px;margin:0 0 10px;color:var(--white)}
.done p{color:var(--ink-2);max-width:48ch;margin:0 auto;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.75}
.done .card{display:grid;margin:22px auto 0;max-width:420px;border-top:1px solid var(--rule);text-align:left}
.done .card > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.done .card > div span:first-child{color:var(--muted);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding-top:2px}
.gcal{width:100%;height:640px;border:0;background:#fff;border-radius:12px}

/* ---------- badge ---------- */
.badge{position:fixed;left:16px;bottom:16px;z-index:50;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--tech);padding:7px 12px;border:1px solid rgba(191,227,236,.3);border-radius:999px;background:rgba(6,10,14,.7)}
.badge[hidden]{display:none}

/* ---------- focus ---------- */
:focus-visible{outline:1px solid var(--tech);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .m-cols{grid-template-columns:1fr;gap:28px}
  .stages{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{padding:18px 18px 0;gap:10px}
  .brand span{display:none}
  .snd span{display:none}
  .snd{padding-left:10px}
  .player{display:none}
  .login{height:42px;padding:0 16px;font-size:10px}
  .pill{height:42px;padding:0 18px}
  .pill a{font-size:10.5px}
  .pill .ln{width:34px;margin:0 10px}
  .cue{top:20vh}
  .col-right{right:auto;left:6vw;top:auto;bottom:10vh;width:min(420px,88vw);transform:translateY(14px)}
  .col-right.on{transform:none}
  .over p{font-size:11.5px}
  .work .col-left{top:calc(100vh - 300px);width:88vw}
  .arrows a{font-size:12px}
  .hint-pick{display:none}
  .big{font-size:clamp(36px,11vw,64px)}
  .modal{padding:0}
  .m-box{max-height:100vh;height:100vh;border-radius:0;padding:22px 18px 40px}
  .m-title{font-size:clamp(30px,9vw,48px)}
  .tabs{grid-template-columns:1fr}
  .tab + .tab{border-left:0;border-top:1px solid var(--rule)}
  .fieldrow,.review{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(5,1fr)}
  .foot-grid{grid-template-columns:1fr;gap:22px}
}