@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/bricolage-grotesque-var.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/hanken-grotesk-var.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/dm-mono-300.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400.woff2') format('woff2')}
/* =====================================================================
   NeuRazor Labs.
   A graphite instrument panel, not a void. Surfaces are genuinely
   distinct from the ground so the page reads as built rather than empty.
   Two things move without being asked: the hero ribbon, which the client
   wants alive, and the card reel, which can be paused. Everything else
   moves only where a person acts.
   ===================================================================== */

/* Any display value in an author sheet outranks the browser's own
   [hidden] rule, so a .btn set hidden still drew, and drew dead. Every
   fail-closed switch on this page depends on hidden meaning hidden. */
[hidden]{display:none !important}

:root{
  --bg:#090B0F;            /* the ground, deep */
  --bg-2:#0F1217;          /* panels */
  --bg-3:#161A21;          /* raised / hover */
  --bg-4:#222831;          /* tracks */
  --ink-rgb:237,239,243;
  --text:#EDEFF3;
  --text-2:#AEB6C2;
  --text-3:#8A929E;
  --line:rgba(237,239,243,.10);
  --line-2:rgba(237,239,243,.17);
  --line-3:rgba(237,239,243,.30);
  --brand-a:#5C86FF; --brand-b:#3EC0F0; --brand-c:#3DF5E2;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --shell:1240px; --gut:clamp(20px,3.6vw,44px);
  --sec:clamp(56px,6vw,88px);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:60px;
}
:root[data-theme="light"],:root[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:15.5px;line-height:1.62;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--text);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select,button{border-radius:0;-webkit-appearance:none;appearance:none}
svg,canvas{display:block;max-width:100%}
:where(a,button,input,textarea,select,[tabindex],[role="slider"]):focus-visible{
  outline:2px solid var(--brand-c);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------- primitives */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
/* type scale: 11 · 13 · 15 · 18 · 22 · 30 · 46 · fluid display.
   Nothing smaller than 11px anywhere on the page. */
.label{font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.028em;
  line-height:1.08;font-optical-sizing:auto;color:var(--text)}
h1{font-size:clamp(30px,3.5vw,50px);letter-spacing:-.036em;line-height:1.04}
h2{font-size:clamp(23px,2.3vw,33px);letter-spacing:-.032em;text-wrap:balance}
h3{font-size:18px}
.lede{font-size:15.5px;line-height:1.65;color:var(--text-2);max-width:34em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid transparent;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
/* solid, not a gradient: the brand ramp belongs to the signal, and a
   gradient button is the tell of a page that has nothing else to say */
.btn--fill{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--fill:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.btn--line{border-color:var(--line-3);color:var(--text)}
.btn--line:hover{border-color:var(--text);background:var(--bg-3)}
.btn--sm{padding:8px 15px;font-size:11px}

/* =====================================================================
   BOOT PLATE. Particles converge onto a mathematically exact circle
   (even angular spacing, one true radius), that circle becomes the
   mark's rim, the disc fills, the wave draws, the plate lifts.
   ===================================================================== */
/* opt-in: no script, no plate, so the page is never hidden behind a
   loader that cannot lift */
.boot{display:none}
html.booting .boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);transition:opacity .55s ease,visibility .55s}
.boot[data-done="true"]{opacity:0;visibility:hidden}
.boot__canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s ease}
.boot__mark{position:relative;width:min(140px,30vw);aspect-ratio:1}
.boot__mark svg{position:absolute;inset:0;width:100%;height:100%}
.boot__ring{opacity:0;transition:opacity .45s ease}
.boot__disc{opacity:0;transform:scale(.2);transform-box:view-box;transform-origin:100px 100px;
  transition:opacity .5s ease,transform .75s var(--ease)}
.boot__wave{stroke:#EDEFF3}
.boot__skip{position:absolute;bottom:20px;right:20px;min-height:44px;padding:0 16px;
  display:inline-flex;align-items:center;color:var(--text-3);transition:color .25s}
.boot__skip:hover{color:var(--text)}
html.booting,html.booting body{overflow:hidden}

/* The field, sitewide. A fixed dot grid on the ground plane; the content
   blocks above it are opaque, so it reads in the negative space between
   them. It redraws only while the pointer moves. */
.dots{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nav,main,.foot,.sheet{position:relative;z-index:1}

/* the page's scroll position, drawn as the brand wave */
.trace{position:fixed;top:0;left:0;right:0;height:6px;z-index:70;
  pointer-events:none;background:var(--bg);transform:translateZ(0)}
.trace svg{width:100%;height:100%}
.trace path{fill:none;stroke-width:2;stroke-linecap:round}
.trace__track{stroke:rgba(237,239,243,.08)}
.trace__fill{stroke:url(#traceGrad);opacity:0}

/* =============================================================== NAV */
.nav{position:fixed;top:6px;left:0;right:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand svg{width:26px;height:26px;flex:none}
.brand__txt{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.022em}
.brand__txt span{font-weight:350;color:var(--text-2)}
.nav__right{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav__links{display:flex;gap:clamp(13px,1.8vw,26px)}
.nav__links a{display:flex;align-items:center;min-height:44px;font-size:13px;
  color:var(--text-2);transition:color .25s}
.nav__links a{position:relative}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--text)}
.nav__links a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:9px;
  height:1px;background:linear-gradient(90deg,var(--brand-a),var(--brand-c))}
.nav__act{display:flex;align-items:center;gap:8px}
.auth{position:relative}
.caret{width:6px;height:6px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease)}
.auth[data-open="true"] .caret{transform:rotate(225deg) translateY(-1px)}
.auth__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:214px;
  background:var(--bg-2);border:1px solid var(--line-2);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.auth[data-open="true"] .auth__menu{opacity:1;visibility:visible;transform:none}
.auth__menu a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  min-height:48px;padding:11px 16px;font-size:13px;color:var(--text-2);transition:background .2s,color .2s}
.auth__menu a+a{border-top:1px solid var(--line)}
.auth__menu a:hover,.auth__menu a:focus-visible{background:var(--bg-3);color:var(--text)}
.auth__menu i{font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}

/* signing in: the role word fills left to right, and the fill IS the
   progress. Without JS the links simply navigate. */
.veilin{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;opacity:0;
  background:
    linear-gradient(rgba(130,150,190,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,150,190,.05) 1px,transparent 1px),
    radial-gradient(ellipse 62% 58% at 12% 6%,rgba(13,63,212,.30),transparent 68%),
    #0C0E12;
  background-size:54px 54px,54px 54px,100% 100%,auto;
  transition:opacity .3s var(--ease)}
.veilin.on{opacity:1}
.veilin__word{position:relative;font-family:var(--display);font-weight:600;
  font-size:clamp(52px,11vw,150px);line-height:1;letter-spacing:-.045em;white-space:nowrap}
.veilin__base{color:rgba(237,239,243,.13)}
.veilin__fill{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--brand-a),var(--brand-b) 45%,var(--brand-c));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.9s cubic-bezier(.62,0,.3,1)}
.veilin.on .veilin__fill{clip-path:inset(0 0 0 0)}
/* the same sweep, read as a rule under the word */
.veilin__rule{position:relative;width:min(440px,64vw);height:1px;background:rgba(237,239,243,.14)}
.veilin__rule i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--brand-a),var(--brand-c));
  transition:transform 1.9s cubic-bezier(.62,0,.3,1)}
.veilin.on .veilin__rule i{transform:scaleX(1)}
.veilin__mark{width:34px;height:34px;opacity:.85}
.burger{display:none;width:36px;height:36px;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1px;background:var(--text);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;
  height:1px;background:var(--text);transition:transform .3s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
.sheet{position:fixed;inset:calc(var(--nav-h) + 6px) 0 0;z-index:55;background:var(--bg);
  padding:20px var(--gut);display:none;flex-direction:column}
.sheet[data-open="true"]{display:flex}
.sheet a.sheet__link{font-family:var(--display);font-size:22px;font-weight:600;
  letter-spacing:-.028em;padding:13px 0;border-bottom:1px solid var(--line)}
.sheet .nav__act{margin-top:18px;flex-direction:column;align-items:stretch;gap:8px}
.sheet .btn{justify-content:center}

/* =====================================================================
   HERO. A stage, not a boxed panel. All four instrument signatures are
   layered across the full width; picking one from the bar draws it in
   left to right. The line is the visual, so the type does not have to
   carry the frame alone.
   ===================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding-top:calc(var(--nav-h) + clamp(40px,5.5vw,86px))}
.hero__field{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0}
 /* the signature runs the full width, so the reading side gets a scrim:
   type stays crisp on the left, the line owns the right */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.8) 30%,
    rgba(9,11,15,.3) 52%,transparent 68%)}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(56px,8vw,120px)}
.hero h1{margin-top:16px;max-width:none;font-size:clamp(38px,6.5vw,94px);
  letter-spacing:-.05em;line-height:.95}
/* Final's own treatment: the second line drops in weight and tone
   rather than being knocked out to an outline */
.hero h1 .dim{color:var(--text-2);font-weight:500}
.hero__lede{margin-top:24px;max-width:27em}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* the instrument bar: full width, flush to the foot of the stage */
.bar{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--bg);
  transform:translateZ(0);backface-visibility:hidden}
.bar__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bar__btn{display:flex;align-items:center;gap:10px;min-height:56px;padding:16px 14px 16px 0;
  text-align:left;color:var(--text-3);border-left:1px solid var(--line);
  transition:color .25s,background .25s}
.bar__btn:first-child{border-left:0}
.bar__btn:hover{color:var(--text-2);background:rgba(237,239,243,.03)}
.bar__btn[aria-current="true"]{color:var(--text)}
.bar__pip{flex:none;width:5px;height:5px;margin-left:14px;background:currentColor;
  opacity:.35;transition:opacity .25s,background .25s}
.bar__btn:first-child .bar__pip{margin-left:0}
.bar__btn[aria-current="true"] .bar__pip{opacity:1;background:var(--accent)}
.bar__name{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__draw{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);opacity:.5;transition:opacity .25s}
.bar__btn:hover .bar__draw{opacity:1}
.bar__btn[aria-current="true"] .bar__draw{opacity:0}
.bar__btn[aria-current="true"]{box-shadow:inset 0 -1px 0 var(--accent)}

/* ==================================================== section chrome */
.sec{position:relative;padding-block:var(--sec);border-bottom:1px solid var(--line)}



.sec__head{display:grid;grid-template-columns:auto 1fr;gap:8px 40px;align-items:baseline;
  margin-bottom:32px}
.sec__head>.label{color:var(--brand-c);display:flex;align-items:center;gap:10px}
.sec__head>.label::before{content:"";width:16px;height:1px;background:currentColor}
.sec__head h2{grid-column:1}
.sec__head .lede{grid-column:2;justify-self:start}
.sec__head .label{grid-column:1/-1;margin-bottom:2px}

/* ===================================================== THE SHIFT ====
   All three at once. The earlier carousel advanced on its own, which
   read as the page moving under you, and it left two thirds of the
   section empty at any moment. */
.shift{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.shift__col{background:var(--bg);padding:24px clamp(16px,1.8vw,24px) 26px;
  display:flex;flex-direction:column;gap:14px}
.shift__t{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.026em;
  line-height:1.18;text-wrap:balance}
.shift__p{font-size:14px;line-height:1.6;color:var(--text-2)}
.ledger{margin-top:auto;border-top:1px solid var(--line)}
.ledger__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.ledger__row:last-child{border-bottom:0}
.ledger__name{font-size:13px;color:var(--text-2);position:relative}
.ledger__name::after{content:"";position:absolute;left:-2px;right:-2px;top:53%;height:1px;
  background:var(--text-3)}
.ledger__row--live .ledger__name{color:var(--text)}
.ledger__row--live .ledger__name::after{display:none}
.ledger__row--live .label{color:var(--brand-c)}
.moves{list-style:none;margin-top:auto;border-top:1px solid var(--line)}
.moves li{display:grid;grid-template-columns:16px 1fr;gap:9px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--text-2)}
.moves li:last-child{border-bottom:0}
.moves li::before{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.moves li[data-dir="up"]::before{content:"\2191"}
.moves li[data-dir="hold"]::before{content:"\2261"}
.moves li b{color:var(--text);font-weight:500}
.mkwrap{margin-top:auto;display:grid;gap:14px}
.mk{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.mk span{min-height:38px;display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--line-2);font-size:13px;color:var(--text-2);
  transition:border-color .25s,color .25s,background .25s}

/* =====================================================================
   SUITE. The four instruments ride a reel that drifts left; hovering
   anywhere on it stops the travel so a card can be read or opened.
   ===================================================================== */
.reel[data-play="false"] .reel__track{animation-play-state:paused}
.inst:focus-visible{outline:2px solid var(--brand-c);outline-offset:-4px}
.reel{position:relative;overflow:hidden;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent)}
.reel__track{display:flex;width:max-content;animation:reel 46s linear infinite}
.reel:hover .reel__track,.reel:focus-within .reel__track{animation-play-state:paused}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.inst{--accent:var(--brand-c);position:relative;flex:0 0 clamp(280px,26vw,352px);
  display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:start;
  background:var(--bg);text-align:left;padding:24px 28px;
  border-right:1px solid var(--line);transition:background .25s}
.inst::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);opacity:.5;transition:opacity .25s}
.inst:hover::before{opacity:1}
.inst:hover{background:var(--bg-3)}
.inst__name{font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.028em;align-self:baseline}
.inst__tag{grid-column:2;grid-row:1;text-align:right;color:var(--accent);align-self:baseline}
.inst__sig{grid-column:1/-1;width:100%;height:52px}
.inst__desc{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--text-2);min-height:3em}
.inst__foot{grid-column:1/-1;display:flex;justify-content:flex-end;
  padding-top:12px;border-top:1px solid var(--line)}
.inst__open{margin-left:auto;color:var(--text-2)}
.inst:hover .inst__open{color:var(--accent)}
.reelbar{position:absolute;left:0;right:0;bottom:20px;z-index:2;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);
  display:flex;justify-content:flex-end}
.reelbar button{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;
  background:var(--bg);
  border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);transition:color .2s,border-color .2s}
.reelbar button:hover{color:var(--text);border-color:var(--line-3)}

.veil{position:fixed;inset:0;z-index:80;background:rgba(10,12,15,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.veil.on{opacity:1}
.panel{position:fixed;z-index:81;top:50%;left:50%;width:min(600px,calc(100vw - 24px));
  max-height:84vh;transform:translate(-50%,-50%);opacity:0;
  background:var(--bg-2);border:1px solid var(--line-2);
  display:flex;flex-direction:column;overflow:hidden;transition:opacity .3s}
.panel.on{opacity:1}
.panel__head{padding:22px clamp(20px,3vw,30px) 18px;border-bottom:1px solid var(--line);position:relative}
.panel__head h3{margin-top:8px;font-size:23px;letter-spacing:-.03em}
.panel__close{position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;
  place-items:center;border:1px solid var(--line-2);color:var(--text-2);font-size:13px;
  transition:background .2s,color .2s}
.panel__close:hover{background:var(--text);color:var(--bg)}
.panel__body{overflow:auto;padding:22px clamp(20px,3vw,30px) 26px}
.panel__body h4{margin:22px 0 11px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;color:var(--text);border:1px solid var(--accent,var(--line-2));
  background:color-mix(in srgb,var(--accent,transparent) 12%,transparent);padding:7px 12px}
.panel__note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* =================================================== HOW IT WORKS ===
   The Final builder, restored: drag a module between rounds, switch one
   off, drop competencies, reweight the six Signal markers. Each module
   carries its instrument's accent so three columns of hairlines do not
   read as one grey mass.
   ===================================================================== */
.builder{border:1px solid var(--line);background:var(--bg)}
.builder__bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  justify-content:space-between;padding:13px clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.builder__roles{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:baseline}
.roleset{display:flex;flex-wrap:wrap;gap:6px}
.role{min-height:40px;display:inline-flex;align-items:center;padding:9px 14px;border:1px solid var(--line-2);color:var(--text-2);font-size:13px;
  transition:background .25s,color .25s,border-color .25s}
.role:hover{color:var(--text);background:var(--bg-3)}
.role[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}

.rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.round{background:var(--bg);display:flex;flex-direction:column;
  padding:16px clamp(14px,1.6vw,20px) 18px}
.round__head{display:flex;align-items:baseline;gap:9px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:12px}
.round__head>.label{color:var(--brand-c)}
.round__name{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.022em}
.round__stack{flex:1;display:flex;flex-direction:column;gap:9px;min-height:52px;
  transition:background .2s,box-shadow .2s}
.round__stack.is-drop{background:color-mix(in srgb,var(--brand-c) 9%,transparent);box-shadow:inset 0 0 0 1px var(--brand-c)}
.round__empty{display:grid;place-items:center;min-height:52px;text-align:center;padding:10px;
  border:1px dashed var(--line-2);color:var(--text-3)}

/* a module card, tinted by its own instrument */
.mod{--accent:var(--brand-c);
  border:1px solid var(--line-2);border-left:2px solid var(--accent);
  background:var(--bg-2);padding:11px 12px;cursor:grab;
  transition:opacity .3s,background .25s,border-color .25s}
.mod:hover{background:var(--bg-3)}
.mod.is-dragging{opacity:1;cursor:grabbing;background:var(--bg-3);
  box-shadow:inset 0 0 0 1px var(--brand-c)}
.mod[data-on="false"]{opacity:.4;border-left-color:var(--line-2)}
.mod[data-on="false"] .mod__body{display:none}
.mod__top{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}
.mod__name{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.02em}
.mod__meta{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mod__right{flex:none;display:flex;align-items:center;gap:8px}
.grip{flex:none;width:34px;height:34px;display:grid;place-items:center;font-size:11px;
  letter-spacing:1px;color:var(--text-2);cursor:grab;user-select:none;
  border:1px solid transparent;transition:color .2s,border-color .2s}
.mod:hover .grip{color:var(--text);border-color:var(--line-2)}
.grip:hover,.grip:focus-visible{color:var(--text);border-color:var(--line-2)}
.toggle{position:relative;width:44px;height:26px;flex:none;border-radius:8px;
  border:1px solid var(--line-3);transition:background .25s,border-color .25s}
.toggle::after{content:"";position:absolute;top:6px;left:6px;width:12px;height:12px;
  border-radius:50%;background:var(--text-3);transition:transform .25s var(--ease),background .25s}
.toggle[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 26%,transparent);
  border-color:var(--accent)}
.toggle[aria-pressed="true"]::after{transform:translateX(18px);background:var(--accent)}
.mod__body{margin-top:12px}

.wt{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-bottom:8px}
.wt__label{font-size:12px;color:var(--text-2)}
.wt__val{font-family:var(--mono);font-size:11px;color:var(--text-3);text-align:right;
  font-variant-numeric:tabular-nums}
.wt--lead .wt__label,.wt--lead .wt__val{color:var(--text)}
.wt__track{grid-column:1/-1;position:relative;height:26px;cursor:ew-resize;
  display:flex;align-items:center;touch-action:none}
.wt__track::before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--bg-4)}
.wt__fill{position:absolute;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand-a),var(--accent));
  transition:width .22s var(--ease)}
.wt__grip{position:absolute;width:8px;height:8px;background:var(--text);
  transform:translateX(-50%);left:0;transition:left .22s var(--ease)}
/* the row under the pointer tracks it exactly; the other five still
   ease, because they are being moved on the user's behalf */
.wt__track.is-drag .wt__fill,.wt__track.is-drag .wt__grip{transition:none}
.wt__total{display:flex;justify-content:space-between;align-items:center;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.wt__total b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text);
  font-variant-numeric:tabular-nums}

.cchips{display:flex;flex-wrap:wrap;gap:5px}
.cchip{min-height:34px;display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--line-2);font-size:12px;color:var(--text-3);
  text-align:left;transition:background .2s,color .2s,border-color .2s}
.cchip:hover{color:var(--text-2);border-color:var(--line-3)}
.cchip[aria-pressed="true"]{color:var(--text);border-color:var(--accent);
  background:transparent}

.builder__foot{display:flex;gap:12px 20px;justify-content:flex-end;align-items:center;
  padding:11px clamp(14px,1.6vw,20px);border-top:1px solid var(--line);
  background:var(--bg-2)}
.note{font-size:13px;line-height:1.5;color:var(--text-3);max-width:52em}

/* =====================================================================
   CONNECT. First-person statements set large: the visitor picks the one
   that is true and the panel routes to match. Tab semantics, and the
   chosen statement carries a growing signal line.
   ===================================================================== */
.sw{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(28px,5vw,76px);align-items:start}
.sw__tabs{display:flex;flex-direction:column}
.sw__tab{position:relative;display:flex;align-items:center;width:100%;padding:20px 0 20px 56px;
  border-top:1px solid var(--line-2);font-family:var(--display);
  font-size:clamp(20px,2.6vw,26px);line-height:1.15;letter-spacing:-.028em;font-weight:600;
  color:var(--text-3);text-align:left;transition:color .3s var(--ease)}
.sw__tab:last-of-type{border-bottom:1px solid var(--line-2)}
.sw__tab:hover{color:var(--text-2)}
.sw__tab[aria-selected="true"]{color:var(--text)}
/* out of flow, so choosing a statement never moves the statement */
.sw__line{position:absolute;left:0;top:50%;width:0;height:3px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-c));
  transition:width .4s var(--ease)}
.sw__tab[aria-selected="true"] .sw__line{width:40px}
/* both columns open on the same rule, instead of a magic offset */
.sw__panels{border-top:1px solid var(--line-2);padding-top:20px}
.sw__panel[hidden]{display:none}
.sw__panel{animation:swin .45s var(--ease)}
@keyframes swin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sw__panel h3{margin-top:12px;font-size:clamp(20px,2.3vw,28px);font-weight:600;letter-spacing:-.028em}
.sw__panel p{margin-top:11px;font-size:15px;line-height:1.65;color:var(--text-2);max-width:42ch}
.sw__meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.sw__meta span{min-height:36px;display:inline-flex;align-items:center;font-size:13px;
  color:var(--text-2);border:1px solid var(--line-2);padding:6px 12px}
.sw__ctas{margin-top:24px;display:flex;flex-wrap:wrap;gap:9px}
.sw__where{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}

/* one modal shell, three form configurations */
.fm{position:fixed;z-index:90;top:50%;left:50%;width:min(520px,calc(100vw - 24px));
  max-height:88vh;transform:translate(-50%,-50%);opacity:0;
  background:var(--bg-2);border:1px solid var(--line-2);
  display:flex;flex-direction:column;overflow:hidden;transition:opacity .3s}
.fm.on{opacity:1}
.fm__head{padding:22px clamp(20px,3vw,28px) 18px;border-bottom:1px solid var(--line);position:relative}
.fm__head h3{margin-top:8px;font-size:22px;letter-spacing:-.03em}
.fm__close{position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;
  place-items:center;border:1px solid var(--line-2);color:var(--text-2);font-size:13px;
  transition:background .2s,color .2s}
.fm__close:hover{background:var(--text);color:var(--bg)}
.fm__body{overflow:auto;padding:20px clamp(20px,3vw,28px) 26px}
.f{margin-bottom:15px}
.f>label{display:block;margin-bottom:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.f input,.f select,.f textarea{width:100%;font-family:var(--body);font-size:14px;color:var(--text);
  background:var(--bg);border:1px solid var(--line-2);padding:10px 12px;transition:border-color .2s}
.f textarea{min-height:84px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand-c)}
.f .bad,.f input.bad,.f select.bad,.f textarea.bad{border-color:#E06C64}
.f select{padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),
                   linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px;background-repeat:no-repeat}
.f select option{background:var(--bg-2);color:var(--text)}
.f input[type="file"]::file-selector-button{font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--bg-3);
  border:1px solid var(--line-2);padding:6px 11px;margin-right:11px;cursor:pointer}
.seg{display:flex;gap:6px;border:1px solid transparent}
.seg button{flex:1;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 6px;color:var(--text-2);border:1px solid var(--line-2);
  transition:background .2s,color .2s,border-color .2s}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ferr{display:none;margin:-4px 0 12px;font-size:13px;color:#E06C64}
.ferr.on{display:block}
.fsub{width:100%;margin-top:4px;padding:15px 20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bg);
  background:var(--text);border:1px solid var(--text)}
.fsub:hover{background:transparent;color:var(--text)}
.fdone{padding:4px 0 2px}
.fdone .tick{width:32px;height:32px;display:grid;place-items:center;background:var(--brand-c);
  color:var(--bg);font-size:14px;font-weight:700;margin-bottom:14px}
.fdone h4{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.026em}
.fdone p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--text-2)}

/* ======================================================== FOOTER ==== */
.foot{position:relative;padding-block:clamp(40px,4.5vw,64px) 26px}

.foot__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 36px;
  align-items:center}
.foot__nav{display:flex;flex-wrap:wrap;gap:16px 40px}
.foot__run{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot__nav a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;
  color:var(--text-2);transition:color .25s}
.foot__nav a:hover{color:var(--text)}
.foot__meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line)}


/* =====================================================================
   MATERIAL. Every surface was an outline drawn on a flat field, which
   is what made the page read as a diagram. A hairline of light on the
   top edge and a whisper of gradient give each panel a body, without
   spending any colour to do it.
   ===================================================================== */
.shift__col,.inst,.mod,.round,.builder,.fm,.panel,.auth__menu{
  box-shadow:inset 0 1px 0 rgba(237,239,243,.05)}
.builder,.fm,.panel{background-image:linear-gradient(180deg,rgba(237,239,243,.025),transparent 46%)}
.shift__col{background-image:linear-gradient(180deg,rgba(237,239,243,.018),transparent 38%)}

/* a centre of gravity: the field falls away at the corners so the eye
   settles mid-page instead of drifting to the edges */
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(126% 96% at 50% 38%,transparent 52%,rgba(0,0,0,.55))}

/* the section label runs a rule out to the margin, so the head reads
   as a masthead rather than a floating caption */
.sec__head>.label{display:flex;align-items:center;gap:10px;width:100%}
.sec__head>.label::after{content:"";flex:1;height:1px;background:var(--line);margin-left:16px}

/* the signature is the point of each card, so give it the size of one,
   and lift the card off the plane as it is read */
.inst__sig{height:72px}
.inst{transition:background .25s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.inst:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(237,239,243,.09),0 18px 40px -26px rgba(0,0,0,.9)}
.mod{transition:opacity .3s,background .25s,border-color .25s,transform .3s var(--ease)}
.mod:hover{transform:translateY(-1px)}

/* the footer signs off with the mark the page opened on, at page width */
.foot{position:relative;overflow:hidden}
.foot__wave{position:absolute;left:-2%;right:-2%;bottom:-4%;height:62%;
  pointer-events:none;opacity:.07}
.foot__wave svg{width:100%;height:100%}
.foot .shell{position:relative;z-index:1}

/* =================================================== RESPONSIVE ===== */
@media (max-width:900px){
  /* single-column rounds must not stretch a card to the viewport */
  .mod{max-width:440px}
  .round__stack{align-items:start}
  .wt{max-width:400px}
  .bar__in{grid-template-columns:1fr 1fr}
  .bar__btn:nth-child(3){border-left:0}
  .bar__btn:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .reel__track{grid-template-columns:repeat(2,1fr)}
  .shift{grid-template-columns:1fr}
  .inst__sig{height:60px}
  .sw{grid-template-columns:1fr;gap:0}
  .sw__panels{border-top:0;padding-top:24px}
  .rounds{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:28px}
  .sec__head{grid-template-columns:1fr;gap:10px}
  .sec__head>.label::after{display:none}
  .sec__head .lede{grid-column:1}
}
@media (max-width:820px){
  .frow{grid-template-columns:1fr}
  .nav__links,.nav__right>.nav__act{display:none}
  .burger{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reel__track{animation:none;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .reel__track>.inst[aria-hidden="true"]{display:none}
  .reelbar{display:none}
  .reel{-webkit-mask-image:none;mask-image:none}
  .veilin__fill{clip-path:inset(0 0 0 0)}
}

/* the WhatsApp mark sits with the button's mono label */
.wa{width:16px;height:16px;fill:currentColor;flex:none}
.fsub[disabled]{opacity:.6;cursor:default}

/* the CSP blocks inline style attributes, so the off-screen defs sheet
   is positioned here instead */
.defs{position:absolute;width:0;height:0}
/* the honeypot: removed from view and from the tab order, but not
   display:none, which some bots read as a field to skip */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}