/* CuriousRubik portal sign-in — Design System 2.0 "Midnight Garden" tokens */
@font-face{font-family:"Cabinet Grotesk";font-weight:100 900;font-display:swap;src:url(/assets/fonts/cabinet-grotesk.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-weight:300 900;font-display:swap;src:url(/assets/fonts/satoshi.woff2) format("woff2")}
:root{
  --navy:#101357;--peach:#FEA49F;--amber:#FBAF08;--teal:#00A0A0;--green:#007F4F;
  --paper:#FFF9F1;--card:#FFFDF9;--cool:#F0EAF0;--line:#DEDBE4;--body:#4F5067;--muted:#62627A;--error:#912827;
  --head:"Cabinet Grotesk",Arial,sans-serif;--sans:"Satoshi",Arial,sans-serif;
  --r:4px;
  /* per-portal (overridden by body class) */
  --field:var(--navy);--on-field:#FFF9F1;--on-field-soft:rgba(255,249,241,.78);--accent:var(--amber);--block:#1b1f6e;--chip-bg:rgba(255,249,241,.1);--chip-line:rgba(255,249,241,.22);
}
body.p-sales{--field:var(--amber);--on-field:var(--navy);--on-field-soft:#2b2e63;--accent:var(--navy);--block:#fcc444;--chip-bg:rgba(255,253,249,.55);--chip-line:rgba(16,19,87,.18)}
body.p-employee{--field:var(--green);--on-field:#fff;--on-field-soft:rgba(255,255,255,.86);--accent:var(--amber);--block:#0a8d5a;--chip-bg:rgba(255,255,255,.12);--chip-line:rgba(255,255,255,.28)}
body.p-vendors{--field:var(--teal);--on-field:var(--navy);--on-field-soft:#14185a;--accent:var(--navy);--block:#19adad;--chip-bg:rgba(255,253,249,.5);--chip-line:rgba(16,19,87,.2)}
body.p-customers{--field:var(--peach);--on-field:var(--navy);--on-field-soft:#2b2e63;--accent:var(--navy);--block:#ffb5b0;--chip-bg:rgba(255,253,249,.55);--chip-line:rgba(16,19,87,.18)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--peach);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--navy);color:#fff;padding:10px 14px;border-radius:var(--r);text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout */
.shell{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);min-height:100vh;min-height:100dvh}
.brand{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--field);color:var(--on-field);padding:40px clamp(32px,4.2vw,72px) 36px;display:flex;flex-direction:column;isolation:isolate}
.brand::before{ /* square grid texture */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--chip-line) 1px,transparent 1px),linear-gradient(90deg,var(--chip-line) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(180deg,transparent 0,#000 45%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%,#000 75%,transparent 100%)}
.brand-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font:800 26px/1 var(--head);letter-spacing:-1.2px;color:inherit;text-decoration:none}
.wordmark:hover{text-decoration:none}
.tag{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--chip-line);background:var(--chip-bg);border-radius:var(--r);color:var(--on-field)}
.tag svg{width:14px;height:14px}
.kicker{display:flex;align-items:center;gap:12px;margin:clamp(36px,6vh,64px) 0 18px;font:800 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-field)}
.kicker::before{content:"";width:34px;height:3px;background:var(--accent)}
.brand h1{margin:0;max-width:15ch;font:700 clamp(40px,3.7vw,60px)/1.04 var(--head);letter-spacing:-.025em;color:var(--on-field)}
.lead{margin:20px 0 0;max-width:46ch;font-size:18px;line-height:1.65;color:var(--on-field-soft)}
.art{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;margin:22px 0 18px;min-height:180px}
.art::before{content:"";position:absolute;height:84%;aspect-ratio:1;right:6%;top:50%;transform:translateY(-46%);background:var(--block);border-radius:var(--r);z-index:-1}
.art img{width:min(100%,500px);height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 28px 36px rgba(16,19,87,.22))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);padding:9px 12px;border-radius:var(--r);background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--on-field)}
.chips li::before{content:"";width:7px;height:7px;background:var(--accent)}
body.p-employee .chips li::before,body.p-chooser .chips li::before{background:var(--amber)}

/* form side */
.panel{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(28px,5vw,96px)}
.panel-inner{width:100%;max-width:440px;margin:0 auto}
.panel h2{margin:0;font:700 clamp(30px,2.4vw,38px)/1.1 var(--head);letter-spacing:-.02em;color:var(--navy)}
.sub{margin:10px 0 22px;color:var(--body)}
.label-sm{display:block;margin:0 0 8px;font:700 13px/1.3 var(--sans);color:var(--navy)}
.sso{display:grid;gap:10px}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:12px 18px;border-radius:var(--r);font:700 15px/1 var(--sans);cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn-sso{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-sso:hover{border-color:var(--navy);box-shadow:0 2px 0 var(--navy)}
.btn-sso svg{width:18px;height:18px}
.btn-primary{margin-top:6px;background:var(--peach);color:var(--navy);border:1px solid var(--navy);box-shadow:0 3px 0 var(--navy)}
.btn-primary:hover{background:var(--amber)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.btn-primary svg{width:18px;height:18px;transition:transform .15s}
.btn-primary:hover svg{transform:translateX(3px)}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0 18px;font-size:13px;color:var(--muted)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:8px;font:700 14px/1.3 var(--sans);color:var(--navy)}
.control{position:relative}
.input{width:100%;min-height:52px;padding:12px 14px;font:500 16px/1.3 var(--sans);color:var(--navy);background:#fff;border:1px solid #c9c6d3;border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#8a8a9e}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(254,164,159,.55)}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(145,40,39,.12)}
.has-toggle .input{padding-right:54px}
.toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:var(--r);cursor:pointer}
.toggle:hover{color:var(--navy);background:var(--cool)}
.toggle svg{width:20px;height:20px}
.toggle .eye-off{display:none}
.toggle[aria-pressed="true"] .eye{display:none}
.toggle[aria-pressed="true"] .eye-off{display:block}
.err{display:none;margin:7px 0 0;font:600 13px/1.4 var(--sans);color:var(--error)}
.err.on{display:block}
.caps{display:none;margin:7px 0 0;font:600 13px/1.4 var(--sans);color:var(--navy)}
.caps.on{display:flex;align-items:center;gap:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;font-size:14px}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--body)}
.check input{width:18px;height:18px;margin:0;accent-color:var(--navy)}
.linkbtn{appearance:none;border:0;background:none;padding:4px 0;font:700 14px/1.2 var(--sans);color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{text-decoration-color:var(--peach);text-decoration-thickness:2px}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;background:var(--cool);border-radius:var(--r);font-size:14px;line-height:1.55;color:var(--body)}
.note svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--navy)}
.status{display:none;gap:12px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;border:1px solid var(--navy);border-left:6px solid var(--amber);background:var(--card);border-radius:var(--r);font-size:14px;line-height:1.55;color:var(--navy)}
.status.on{display:flex}
.status strong{display:block;font:700 15px/1.3 var(--sans);margin-bottom:2px}
.status svg{flex:none;width:20px;height:20px;margin-top:1px}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px}
.back svg{width:16px;height:16px}
.meta{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.9;color:var(--body)}
.meta p{margin:0}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--muted)}
.legal a{font-weight:500;color:var(--muted)}
[hidden]{display:none!important}

/* chooser list */
.portals{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.portal{display:grid;grid-template-columns:48px 1fr 20px;gap:16px;align-items:center;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--body);font-weight:400;transition:border-color .15s,box-shadow .15s,transform .15s}
.portal:hover{border-color:var(--navy);box-shadow:0 3px 0 var(--navy);transform:translateY(-1px);text-decoration:none}
.portal .ic{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r);color:var(--navy)}
.portal .ic svg{width:22px;height:22px}
.portal b{display:block;font:700 17px/1.25 var(--head);letter-spacing:-.005em;color:var(--navy)}
.portal span.d{display:block;margin-top:3px;font-size:14px;line-height:1.45}
.portal small{display:block;margin-top:5px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.portal .go{width:20px;height:20px;color:var(--navy);transition:transform .15s}
.portal:hover .go{transform:translateX(3px)}
.ic-sales{background:var(--amber)}.ic-employee{background:var(--green);color:#fff!important}.ic-vendors{background:var(--teal)}.ic-customers{background:var(--peach)}

/* chooser orbit illustration labels */
.orbit{position:absolute;inset:0;pointer-events:none}
.orbit span{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;background:var(--card);color:var(--navy);border-radius:var(--r);font:700 13px/1 var(--sans);box-shadow:0 10px 24px rgba(5,7,40,.28)}
.orbit i{width:10px;height:10px;display:block}
.o1{left:2%;top:12%}.o2{right:2%;top:18%}.o3{left:4%;bottom:14%}.o4{right:4%;bottom:8%}

@media (max-width:1100px){.brand h1{font-size:40px}.lead{font-size:16px}}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .brand{position:relative;height:auto}
  .brand{padding:22px 20px 26px}
  .brand::before{background-size:40px 40px}
  .wordmark{font-size:22px}
  .kicker{margin:26px 0 12px;font-size:11px}
  .brand h1{font-size:32px;max-width:18ch}
  .lead{font-size:15.5px;margin-top:12px}
  .art{min-height:0;margin:18px 0 0;justify-content:flex-end}
  .art img{width:150px;max-height:none}
  .art::before{width:110px;right:16px}
  .brand .art{position:absolute;right:-8px;bottom:-6px;margin:0;opacity:1}
  .brand .lead{max-width:none;padding-right:0}
  .chips,.orbit{display:none}
  .brand.has-art-m{padding-bottom:26px}
  .panel{padding:30px 20px 40px;justify-content:flex-start}
  .panel h2{font-size:28px}
}
@media (max-width:900px){.brand .art{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.nowrap{white-space:nowrap}
@media (min-width:901px) and (max-height:760px){.kicker{margin-top:28px}.brand h1{font-size:38px}.lead{font-size:16px}}

/* Contact pop-up (live curiousrubik.com enquiry form) */
html.cdlg-open{overflow:hidden}
.cdlg{width:min(1080px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--r);background:var(--paper);color:var(--body);box-shadow:0 30px 80px rgba(5,7,40,.45);overflow:auto;overscroll-behavior:contain}
.cdlg::backdrop{background:rgba(16,19,87,.62);backdrop-filter:blur(3px)}
.cdlg[open]{animation:cdlg-in .2s ease-out}
@keyframes cdlg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cdlg-close{position:sticky;top:0;float:right;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;margin:14px 14px -58px 0;padding:8px 12px;border:1px solid var(--navy);border-radius:var(--r);background:var(--card);color:var(--navy);font:700 14px/1 var(--sans);cursor:pointer}
.cdlg-close:hover{background:var(--amber)}
.cdlg-close span[aria-hidden]{font-size:20px;line-height:.8}
.cdlg-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:100%}
.cdlg-aside{display:flex;flex-direction:column;gap:14px;padding:40px 36px 32px;background:var(--navy);color:var(--paper)}
.cdlg-kicker{display:flex;align-items:center;gap:12px;font:800 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.cdlg-kicker::before{content:"";width:34px;height:3px;background:var(--amber)}
.cdlg-aside h2{margin:6px 0 0;font:700 34px/1.08 var(--head);letter-spacing:-.02em;color:var(--paper)}
.cdlg-aside p{margin:0;color:rgba(255,249,241,.8);line-height:1.65}
.cdlg-aside img{width:100%;max-width:320px;height:auto;margin:auto;filter:drop-shadow(0 20px 28px rgba(0,0,0,.3))}
.cdlg-sign{font:700 14px/1.4 var(--sans);color:var(--amber)}
.cdlg-panel{padding:40px 40px 32px}
.cdlg-panel h2{margin:0 64px 0 0;font:700 34px/1.1 var(--head);letter-spacing:-.02em;color:var(--navy)}
#cdlg-intro{margin:10px 0 22px}
.cdlg-form{min-height:200px}
.cdlg-loading{margin:0;color:var(--muted);font-size:14px}
.cdlg-fail{margin:0;padding:12px 14px;border-left:4px solid var(--error);background:var(--card);color:var(--navy);font-size:14px}
.cdlg-privacy{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.cdlg .hs-form-html{--hsf-global__font-family:Satoshi,Arial,sans-serif!important;--hsf-global__font-size:16px!important;--hsf-global__color:#101357!important;--hsf-global-error__color:#912827!important;--hsf-row__horizontal-spacing:16px!important;--hsf-row__vertical-spacing:16px!important;--hsf-module__vertical-spacing:8px!important;--hsf-background__background-color:transparent!important;--hsf-background__background-image:none!important;--hsf-background__border-width:0px!important;--hsf-background__border-style:none!important;--hsf-background__padding:0px!important;--hsf-field-label__font-family:Satoshi,Arial,sans-serif!important;--hsf-field-label__font-size:14px!important;--hsf-field-label__color:#101357!important;--hsf-field-label-requiredindicator__color:#912827!important;--hsf-field-description__color:#62627a!important;--hsf-field-footer__color:#62627a!important;--hsf-field-input__font-family:Satoshi,Arial,sans-serif!important;--hsf-field-input__color:#101357!important;--hsf-field-input__background-color:#fff!important;--hsf-field-input__placeholder-color:#8a8a9e!important;--hsf-field-input__border-color:#c9c6d3!important;--hsf-field-input__border-width:1px!important;--hsf-field-input__border-style:solid!important;--hsf-field-input__border-radius:4px!important;--hsf-field-input__padding:12px 14px!important;--hsf-field-textarea__font-family:Satoshi,Arial,sans-serif!important;--hsf-field-textarea__color:#101357!important;--hsf-field-textarea__background-color:#fff!important;--hsf-field-textarea__border-color:#c9c6d3!important;--hsf-field-textarea__border-radius:4px!important;--hsf-field-textarea__padding:12px 14px!important;--hsf-button__font-family:Satoshi,Arial,sans-serif!important;--hsf-button__font-size:16px!important;--hsf-button__color:#101357!important;--hsf-button__background-color:#FEA49F!important;--hsf-button__background-image:none!important;--hsf-button__border-radius:4px!important;--hsf-button__padding:14px 22px!important;--hsf-button__box-shadow:0 3px 0 #101357!important;--hsf-richtext__font-family:Satoshi,Arial,sans-serif!important;--hsf-richtext__color:#4F5067!important;--hsf-heading__font-family:"Cabinet Grotesk",Arial,sans-serif!important;--hsf-heading__color:#101357!important;--hsf-erroralert__color:#912827!important}
.cdlg .hs-form-html .hsfc-FieldLabel{font-weight:700;line-height:1.4}
.cdlg .hs-form-html :is(input,textarea,select,button):focus-visible{outline:3px solid #101357;outline-offset:2px}
.cdlg .hs-form-html textarea{min-height:112px;resize:vertical}
.cdlg .hs-form-html .hsfc-NavigationRow{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.cdlg .hs-form-html .hsfc-NavigationRow__Buttons>button[type=submit]{min-height:52px;width:100%;border:1px solid #101357!important;font-weight:700}
.cdlg .hs-form-html .hsfc-NavigationRow__Buttons>button[type=submit]:hover{background:#FBAF08!important}
@media (max-width:900px){
  .cdlg{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border-radius:0}
  .cdlg-grid{grid-template-columns:1fr}
  .cdlg-aside{display:none}
  .cdlg-panel{padding:22px 20px 32px}
  .cdlg-panel h2{font-size:28px}
  .cdlg-close{margin:12px 12px -56px 0}
  .cdlg .hs-form-html .hsfc-Row{display:grid;grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.cdlg[open]{animation:none}}