/* HiringOps homepage. Layout is inline in index.html (it came from the design
   canvas); this file adds page basics, the tour's scaling, and the narrow-screen
   overrides, which need !important to beat the inline styles. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F4F3F8; }
a { color: #5B21B6; text-decoration: none; }
a:hover { color: #4C1D95; }
a:focus-visible, button:focus-visible { outline: 3px solid #8B5CF6; outline-offset: 3px; border-radius: 10px; }
img { max-width: 100%; }

.demo { position: relative; margin-top: 64px; width: 100%; overflow: hidden; }
.demo-inner { transform-origin: 0 0; }
.demo-pending { visibility: hidden; }

/* "Request access" form, inside the dark CTA card. The header and hero buttons are
   anchors to #request-access, so leave room for them to land against. */
#request-access { scroll-margin-top: 24px; }
.access-form { display: flex; flex-direction: column; gap: 14px; }
.af-field { display: flex; flex-direction: column; gap: 6px; }
.af-label { font-size: 14px; font-weight: 600; color: #D6CFEC; }
.af-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  font-family: inherit; font-size: 15.5px; line-height: 1.4; color: #FFFFFF;
  background: #262038; border: 1px solid #453C63; border-radius: 10px;
  transition: border-color 150ms ease, background 150ms ease;
}
.af-input::placeholder { color: #8C82AB; }
.af-input:hover { border-color: #5A4F7D; }
.af-input:focus { outline: none; border-color: #A78BFA; background: #2C2540; }
.af-input:focus-visible { outline: 3px solid #8B5CF6; outline-offset: 2px; }
/* The arrow is drawn here because a dark <select> keeps the OS-native one otherwise. */
.af-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A79DC4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.af-select:invalid { color: #8C82AB; }
.af-input[aria-invalid="true"] { border-color: #F87171; }
.af-textarea { resize: vertical; min-height: 76px; }
.af-submit {
  margin-top: 4px; padding: 14px 24px; border: 0; border-radius: 999px;
  background: #FFFFFF; color: #1C1530; font-family: inherit; font-size: 16.5px;
  font-weight: 600; cursor: pointer; transition: background 150ms ease, opacity 150ms ease;
}
.af-submit:hover:not(:disabled) { background: #EDE9FE; }
.af-submit:disabled { opacity: 0.6; cursor: default; }
/* Takes no space until the script has something to say. Hidden by the ABSENCE of
   data-tone rather than by :empty, because the script sets data-tone first and the
   text second: the live region is therefore already visible (and so already in the
   accessibility tree) when its content arrives. Keyed on :empty instead, the element
   would still be display:none at the moment of insertion, which is the classic way to
   lose the announcement. */
.af-status { margin: 0; font-size: 15px; line-height: 1.45; }
.af-status:not([data-tone]) { display: none; }
.af-status[data-tone="error"] { color: #FCA5A5; }
.af-status[data-tone="success"] { color: #A7F3D0; }
.af-status a { color: inherit; text-decoration: underline; }
.af-fineprint { margin: 0; font-size: 13.5px; color: #8C82AB; }
.af-fineprint a { color: #A79DC4; text-decoration: underline; }
/* Shown in place of the form once a request goes through. */
.af-done { margin: 0; font-size: 17px; line-height: 1.5; color: #FFFFFF; }
.af-done strong { display: block; margin-bottom: 8px; font-size: 20px; }

@media (max-width: 1000px) {
  .site-nav { display: none !important; }
  .hero-title { font-size: 64px !important; }
  #how ol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #integrations > div { grid-template-columns: minmax(0, 1fr) !important; padding: 40px !important; gap: 40px !important; }
  #security > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Side by side, the headline and a 400px form leave each other too little room. */
  .cta > div { flex-direction: column !important; align-items: flex-start !important; gap: 36px !important; }
  .cta-form-col { width: 100% !important; max-width: 480px !important; }
}

@media (max-width: 640px) {
  .site-header { padding: 16px 20px !important; }
  .header-signin { display: none !important; }
  section { padding: 96px 20px 0 !important; }
  .hero { padding-top: 40px !important; }
  .hero-title { font-size: 46px !important; }
  .hero-row { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
  .hero-row p { font-size: 18px !important; }
  .demo { margin-top: 40px; }
  h2 { font-size: 36px !important; }
  #how ol, #security > div { grid-template-columns: minmax(0, 1fr) !important; }
  #integrations > div { padding: 28px 22px !important; border-radius: 24px !important; }
  .cta > div { flex-direction: column !important; align-items: flex-start !important; padding: 40px 28px !important; gap: 32px !important; }
  .cta-form-col { width: 100% !important; }
  .site-footer { padding: 72px 20px 40px !important; }
  .site-footer > div { flex-direction: column !important; }
  .site-footer nav { flex-wrap: wrap !important; gap: 14px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}