/* Career HQ coming-soon page.
   Tokens are copied verbatim from the Career HQ Design System (tokens/*.css);
   only the subset this page uses is included. */

@font-face{font-family:"Qanelas";src:url("/assets/fonts/qanelas-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Qanelas";src:url("/assets/fonts/qanelas-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Qanelas";src:url("/assets/fonts/qanelas-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Qanelas";src:url("/assets/fonts/qanelas-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* Brand primitives */
  --chq-navy:#19166d;--chq-orange:#ff5403;--chq-white:#ffffff;--chq-ink:#070017;
  /* Ramps */
  --navy-950:#08072b;--navy-900:#0f0d47;--navy-800:#19166d;--navy-200:#d5d4f6;--navy-50:#f4f4fd;
  --orange-800:#a83300;--orange-700:#d24300;--orange-600:#ff5403;--orange-400:#ff8d57;--orange-200:#ffcdb4;--orange-100:#ffe6d9;
  --ink-950:#070017;--ink-700:#3a3552;--ink-500:#767185;--ink-400:#9c98a8;--ink-300:#c3c0cc;--ink-200:#e0dee6;--ink-100:#efeef3;
  --green-600:#0e8c5f;--green-100:#dcf5eb;--red-600:#cc2418;
  /* Semantic */
  --text-strong:var(--ink-950);--text-body:var(--ink-700);--text-muted:var(--ink-500);
  --surface-navy:var(--chq-navy);--surface-navy-deep:var(--chq-ink);
  --border-subtle:var(--ink-200);--border-on-navy:rgba(255,255,255,.22);
  --action-primary:var(--chq-orange);--action-primary-hover:var(--orange-700);
  --action-disabled-bg:var(--ink-100);--action-disabled-text:var(--ink-400);
  --focus-ring:var(--orange-600);--ring-focus:0 0 0 3px rgba(255,84,3,.35);
  /* Type */
  --font-core:"Qanelas","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --size-display-1:76px;--size-display-2:60px;--size-h2:34px;--size-h4:21px;
  --size-body-lg:18px;--size-body:16px;--size-body-sm:14px;--size-caption:13px;--size-micro:11px;
  --leading-display:1.02;--leading-heading:1.14;--leading-snug:1.35;--leading-body:1.55;--leading-loose:1.7;
  --tracking-display:-.03em;--tracking-heading:-.02em;--tracking-eyebrow:.14em;
  /* Space, shape, motion */
  --container-max:1200px;--gutter-page:24px;--gutter-page-lg:48px;--grid-gap:24px;
  --control-h-lg:54px;
  --radius-input:14px;--radius-card:20px;--radius-pill:999px;
  --duration-instant:80ms;--duration-fast:140ms;
  --ease-out:cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  font:400 var(--size-body)/var(--leading-body) var(--font-core);
  color:rgba(255,255,255,.82);background:var(--surface-navy);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
main{flex:1}
h1,h2,h3,p,figure,fieldset{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--orange-200);color:var(--chq-ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page-lg)}

/* Header */
.site-header{border-bottom:1px solid rgba(255,255,255,.12)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.logo img{height:30px;width:auto}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  border:1px solid var(--border-on-navy);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);color:#fff;font-size:var(--size-body-sm);font-weight:700;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--chq-orange)}

/* Eyebrow + tie-triangle marker (the system's only ornament) */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:700 var(--size-micro)/1.2 var(--font-core);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--orange-400);
}
.tie{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid currentColor}

/* Hero */
.hero{padding:72px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.display{
  font:900 var(--size-display-2)/var(--leading-display) var(--font-core);
  letter-spacing:var(--tracking-display);color:#fff;
}
.lead{font:400 var(--size-body-lg)/var(--leading-loose) var(--font-core);color:rgba(255,255,255,.78);max-width:560px}

.hero-visual{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-on-navy);background:var(--navy-900)}
.hero-visual img{width:100%;aspect-ratio:960/1165;object-fit:cover}

/* Waitlist card: white card on navy, flat, line not shadow */
.card{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:24px;color:var(--text-body);margin-top:8px}
.roles{border:0;padding:0;min-width:0}
.card-label{padding:0;margin-bottom:12px;font:600 var(--size-body-sm)/1.3 var(--font-core);color:var(--text-strong)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--radius-pill);
  border:1.5px solid var(--ink-300);color:var(--text-body);font-size:var(--size-body-sm);font-weight:500;
  transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.chip:hover span{background:var(--navy-50);border-color:var(--chq-navy)}
.chip input:checked + span{background:var(--chq-navy);border-color:var(--chq-navy);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--focus-ring);outline-offset:2px}

.field-row{display:flex;gap:12px;margin-top:20px}
.input-wrap{position:relative;flex:1;min-width:0}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-400);pointer-events:none;width:18px;height:18px}
.input{
  width:100%;height:var(--control-h-lg);padding:0 16px 0 44px;
  border:1.5px solid var(--ink-300);border-radius:var(--radius-input);background:#fff;
  color:var(--text-strong);font:400 var(--size-body)/1 var(--font-core);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder{color:var(--ink-400)}
.input:focus{outline:none;border-color:var(--chq-navy);box-shadow:var(--ring-focus)}
.input[aria-invalid="true"]{border-color:var(--red-600)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--control-h-lg);padding:0 28px;border-radius:var(--radius-pill);
  border:2px solid transparent;font:700 var(--size-body)/1 var(--font-core);cursor:pointer;white-space:nowrap;
  transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-instant) var(--ease-out);
}
.btn-primary{background:var(--action-primary);border-color:var(--action-primary);color:#fff}
.btn-primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.btn:active{transform:scale(.98)}
.btn[disabled]{background:var(--action-disabled-bg);border-color:var(--action-disabled-bg);color:var(--action-disabled-text);cursor:not-allowed;transform:none}
.btn .icon{width:18px;height:18px}

.form-msg{margin-top:12px;font-size:var(--size-caption);color:var(--text-muted)}
.form-msg.is-error{color:var(--red-600);font-weight:500}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.success{display:flex;gap:16px;align-items:flex-start}
.success[hidden]{display:none}
.success:focus{outline:none}
.success-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--green-100);color:var(--green-600);flex:none}
.success-title{font:600 var(--size-h4)/var(--leading-snug) var(--font-core);color:var(--text-strong)}
.success-body{margin-top:4px;color:var(--text-body);overflow-wrap:anywhere}
.success-body strong{color:var(--text-strong)}

/* Pillars */
.pillars{padding:0 0 96px}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;max-width:720px}
.section-head h2{font:700 var(--size-h2)/var(--leading-heading) var(--font-core);letter-spacing:var(--tracking-heading);color:#fff}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.pillar{
  display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:var(--radius-card);
  background:rgba(255,255,255,.06);border:1px solid var(--border-on-navy);
}
.pill-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--orange-100);color:var(--orange-600);margin-bottom:8px}
.pill-icon .icon{width:26px;height:26px}
.pillar h3{font:700 var(--size-h4)/var(--leading-snug) var(--font-core);color:#fff}
.pillar p{color:rgba(255,255,255,.72)}
.employer-note{display:flex;gap:12px;align-items:flex-start;margin-top:32px;color:rgba(255,255,255,.72);font-size:var(--size-body-sm)}
.employer-note .icon{color:var(--orange-400);width:20px;height:20px}
.employer-note strong{color:#fff;font-weight:700}

/* Footer */
.site-footer{background:var(--surface-navy-deep);color:rgba(255,255,255,.62);font-size:var(--size-caption)}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:24px;padding-bottom:24px}

/* Responsive */
@media (min-width:1100px){
  .display{font-size:var(--size-display-1)}
}
@media (max-width:960px){
  .hero{padding:48px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual img{aspect-ratio:16/11;object-position:center 42%}
  .pillar-grid{grid-template-columns:1fr}
  .pillars{padding-bottom:64px}
}
@media (max-width:640px){
  .container{padding:0 var(--gutter-page)}
  .header-row{min-height:68px}
  .logo img{height:24px}
  .status-pill{height:32px;padding:0 12px;font-size:var(--size-caption)}
  .display{font-size:44px}
  .lead{font-size:var(--size-body)}
  .card{padding:20px}
  .field-row{flex-direction:column}
  .btn{width:100%}
  .pillar{padding:24px}
  .section-head h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}