/* NorthStaff.ai coming-soon page.
   Colours and type are the NorthStaff Design System tokens (tokens/colors.css,
   tokens/typography.css in the Claude Design project), copied here so the page
   is self-contained and needs no build step. */
@font-face{
  font-family:"Manrope";
  src:url("fonts/Manrope-Variable.ttf") format("truetype-variations"),
      url("fonts/Manrope-Variable.ttf") format("truetype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
:root{
  --petrol-600:#285659;
  --petrol-700:#1F4547;
  --petrol-50:#EEF4F4;
  --sand-100:#F1EBDF;
  --sand-400:#C4B394;
  --neutral-50:#FBF7F0;
  --neutral-200:#E6E1D8;
  --neutral-600:#6F6A61;
  --neutral-800:#2A2824;
  --neutral-900:#1B1A17;
  --bg-app:var(--neutral-50);
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-800);
  --text-muted:var(--neutral-600);
  --text-brand:var(--petrol-600);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-app);
  color:var(--text-body);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px 16px 36px;
}
.wrap{width:100%;max-width:1120px;margin:0 auto}
main.wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:40px 0 32px;
}
.logo{display:block;width:min(440px,84vw);height:auto}
.status{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--petrol-50);
  color:var(--text-brand);
  border-radius:999px;
  padding:6px 14px 6px 11px;
  font-size:13px;font-weight:600;
  letter-spacing:.01em;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--sand-400)}
h1{margin:0}
.status{margin:28px 0 0}
.art{margin:36px 0 0;position:relative;width:100%;max-width:440px}
.art::before{
  content:"";position:absolute;inset:auto 0 6% 0;height:76%;
  background:var(--sand-100);border-radius:28px;z-index:0;
}
.art img{position:relative;z-index:1;display:block;width:100%;height:auto}
footer.wrap{
  border-top:1px solid var(--neutral-200);
  padding-top:18px;
  font-size:13px;color:var(--text-muted);
  text-align:center;
}
@media (max-width:600px){
  .art{margin-top:28px}
}
@media (prefers-reduced-motion:no-preference){
  .art img,h1,.status{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}
  .status{animation-delay:.06s}.art img{animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}