/* Hireish sign-in sheet (/me/login, /hire/login).
   A Blade/CSS port of the shared SnappyHires sign-in at accounts.snappyhires.com/account/login:
   product hero on top (split-screen left on desktop), the same "Sign in or create account" sheet
   below/right. Every rule is scoped under .ss so nothing leaks into the rest of the site.
   Breakpoints follow the reference: phone < 768, md >= 768, lg >= 1024. */

main.ss-main { padding: 0; background: #fff; }
main.ss-main > .wrap { max-width: none; padding: 0; }

.ss { background: #fff; color: #0f172a; }
@media (min-width: 1024px) { .ss { display: grid; grid-template-columns: 1.1fr 1fr; } }

/* ───────────── hero ───────────── */
.ss-hero {
  position: relative; height: 380px; overflow: hidden; background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse at top left, #fbcfe8 0%, transparent 45%),
    radial-gradient(ellipse at top right, #fde68a 0%, transparent 45%),
    radial-gradient(ellipse at bottom left, #bfdbfe 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #c7d2fe 0%, transparent 50%);
}
@media (min-width: 768px) { .ss-hero { height: 440px; } }
/* The site header (60px) stays above the split screen, so both halves fill the rest of the window. */
@media (min-width: 1024px) { .ss-hero { position: sticky; top: 0; height: calc(100vh - 60px); min-height: 560px; } }

.ss-tile {
  position: absolute; width: 38%; max-width: 176px; border-radius: 16px; background: #fff; padding: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.1);
}
@media (min-width: 768px) { .ss-tile { max-width: 200px; } }
@media (min-width: 1024px) { .ss-tile { width: 29%; max-width: 220px; padding: 10px; } }
.ss-ban { position: relative; overflow: hidden; border-radius: 12px; padding: 10px 12px; color: #fff; }
@media (min-width: 1024px) { .ss-ban { padding: 12px 14px; } }
.ss-ban::before, .ss-ban::after { content: ""; position: absolute; border-radius: 50%; }
.ss-ban::before { right: -16px; top: -24px; width: 64px; height: 64px; background: rgba(255,255,255,.15); }
.ss-ban::after { right: 24px; bottom: -32px; width: 56px; height: 56px; background: rgba(255,255,255,.1); }
/* <div>s, not <p>s: a global text-wrap rule on p would beat the single-line ellipsis. */
.ss-ban > div { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.8); line-height: 1.5; }
.ss-h { margin-top: 2px; font-size: 18px; font-weight: 900; line-height: 1.25; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
@media (min-width: 1024px) { .ss-h { font-size: 20px; } }
.ss-d { font-size: 11px; color: rgba(255,255,255,.85); line-height: 1.5; }
.ss-n { margin-top: 8px; display: flex; align-items: center; gap: 6px; padding: 0 4px 2px; font-size: 12px; font-weight: 600; color: #1e293b; line-height: 1.4; white-space: nowrap; overflow: hidden; }
@media (min-width: 1024px) { .ss-n { font-size: 13px; } }
.ss-n i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Positions: tiles 1/3/6/8 are the product's four cards (phone slots), 4/5 join at md only, 2/7 replace them at lg. */
.ss-t2, .ss-t4, .ss-t5, .ss-t7 { display: none; }
.ss-t1 { left: 3%; top: 4%; transform: rotate(-6deg); }
.ss-t2 { transform: rotate(2deg); }
.ss-t3 { right: 3%; top: 3%; transform: rotate(6deg); }
.ss-t4 { transform: rotate(3deg); }
.ss-t5 { transform: rotate(-3deg); }
.ss-t6 { left: 5%; bottom: -7%; transform: rotate(-4deg); }
.ss-t7 { transform: rotate(2deg); }
.ss-t8 { right: 5%; bottom: -5%; transform: rotate(5deg); }
@media (min-width: 768px) {
  .ss-t4, .ss-t5 { display: block; }
  .ss-t1 { left: 4%; top: 5%; }
  .ss-t3 { right: 4%; top: 4%; }
  .ss-t4 { left: 1%; top: 40%; }
  .ss-t5 { right: 1%; top: 38%; }
  .ss-t6 { left: 6%; bottom: -4%; }
  .ss-t8 { right: 6%; bottom: -3%; }
}
@media (min-width: 1024px) {
  .ss-t2, .ss-t7 { display: block; }
  .ss-t1 { left: 7%; top: 7%; }
  .ss-t2 { left: 37%; top: 2%; }
  .ss-t3 { right: 6%; top: 9%; }
  .ss-t4, .ss-t5 { display: none; } /* side tiles are tablet-only; at the screen edge they were cropped */
  .ss-t6 { left: 7%; bottom: 8%; }
  .ss-t7 { left: 37%; bottom: 3%; }
  .ss-t8 { right: 6%; bottom: 10%; }
}

.ss-center { position: relative; z-index: 10; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 16px; text-align: center; }
.ss-mark { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 22%; font-size: 31px; font-weight: 900; color: #fff; font-family: Manrope, sans-serif; }
.ss-hero h1.ss-name { margin: 16px 0 0; font-size: 36px; line-height: 40px; font-weight: 900; letter-spacing: -.025em; color: #020617; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.ss-tag { margin: 12px 0 0; max-width: 320px; font-size: 15px; line-height: 1.375; color: #334155; }
.ss-tag .ss-sub { display: none; color: #64748b; }
@media (min-width: 768px) { .ss-tag .ss-sub { display: block; } }
@media (min-width: 1024px) {
  .ss-hero h1.ss-name { margin-top: 24px; font-size: 60px; line-height: 1; }
  .ss-tag { max-width: 384px; font-size: 18px; }
}

/* ───────────── sheet ───────────── */
.ss-sheet { position: relative; z-index: 20; margin-top: -28px; border-radius: 28px 28px 0 0; background: #fff; padding: 32px 24px 40px; }
@media (min-width: 1024px) { .ss-sheet { margin-top: 0; display: flex; min-height: calc(100vh - 60px); align-items: center; border-radius: 0; padding: 32px 64px; } }
.ss-in { margin: 0 auto; width: 100%; max-width: 420px; }

.ss h2.ss-title { margin: 0; text-align: center; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; color: #020617; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.ss-stack { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.ss-pill {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; border-radius: 999px;
  border: 1px solid #cbd5e1; background: #fff; padding: 14px 20px; font: inherit; font-size: 15px; font-weight: 600;
  line-height: 1.4; color: #0f172a; cursor: pointer; text-decoration: none; transition: border-color .15s, background-color .15s;
}
.ss-pill:hover { border-color: #94a3b8; background: #f8fafc; color: #0f172a; }
.ss-pill[hidden], .ss-step[hidden], .ss [hidden] { display: none !important; }
.ss-pill svg { flex: none; }
/* SnappyHires mark (the ATS SnappyMark at 20px): dark rounded square, gradient "S". */
.ss-snap { display: inline-flex; flex: none; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 22%; background: #020617; font-size: 9.6px; line-height: 1; font-weight: 900; font-family: Manrope, sans-serif; }
.ss-snap span { background-image: linear-gradient(to bottom right, #a5b4fc, #f0abfc, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-primary {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px;
  background: #020617; padding: 14px 20px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff; cursor: pointer; transition: background-color .15s;
}
.ss-primary:hover { background: #1e293b; }
.ss-more { display: flex; justify-content: center; margin-top: 20px; }
.ss-more button { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 8px 20px; font: inherit; font-size: 14px; font-weight: 600; color: #1e293b; cursor: pointer; }
.ss-more button:hover { background: #f8fafc; }
.ss-back { margin: -4px 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 500; color: #4f46e5; cursor: pointer; }
.ss-back:hover { color: #4338ca; }
[dir=rtl] .ss-back span { display: inline-block; transform: scaleX(-1); }

.ss-pill:focus-visible, .ss-primary:focus-visible, .ss-more button:focus-visible, .ss-back:focus-visible, .ss-link:focus-visible, .ss-foot a:focus-visible {
  outline: 2px solid #6366f1; outline-offset: 2px;
}

.ss-form { display: flex; flex-direction: column; gap: 16px; }
.ss-form label.ss-lbl { display: block; margin: 0; font-size: 14px; font-weight: 500; color: #334155; }
.ss .ss-field {
  margin-top: 6px; width: 100%; height: auto; border-radius: 12px; border: 1px solid #cbd5e1; background-color: #fff;
  padding: 12px 16px; font: inherit; font-size: 16px; line-height: 1.5; color: #0f172a; outline: none; transition: box-shadow .15s;
}
.ss select.ss-field { padding-right: 36px; }
[dir=rtl] .ss select.ss-field { padding-right: 16px; padding-left: 36px; }
.ss .ss-field:focus { outline: none; border-color: #cbd5e1; box-shadow: 0 0 0 2px #6366f1; }
.ss-pr { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
@media (max-width: 420px) { .ss-pr { grid-template-columns: 112px 1fr; } }
.ss-pr .ss-err { grid-column: 1 / -1; }
.ss-intro { margin: 0; text-align: center; font-size: 14px; color: #64748b; }
.ss-note { margin: 0; text-align: center; font-size: 13px; line-height: 1.5; color: #64748b; }
.ss-err { margin-top: 6px; font-size: 13px; color: #b91c1c; }
.ss-alert { margin-top: 16px; border-radius: 12px; border: 1px solid #fecaca; background: #fef2f2; padding: 8px 12px; font-size: 14px; color: #b91c1c; }
.ss-choose .ss-alert { margin: 16px 0 0; }
.ss-link { color: #4f46e5; font-weight: 600; text-decoration: none; }
.ss-link:hover { color: #4338ca; text-decoration: underline; }
.ss-quiet { margin: 20px 0 0; text-align: center; font-size: 14px; color: #475569; }
.ss-quiet + .ss-quiet { margin-top: 8px; }
.ss-foot { margin: 28px 0 0; text-align: center; font-size: 12px; line-height: 1.625; color: #64748b; }
.ss-foot a { color: #64748b; text-decoration: underline; text-underline-offset: 2px; }
.ss-foot a:hover { color: #334155; }

@media (prefers-reduced-motion: reduce) {
  .ss-pill, .ss-primary, .ss .ss-field { transition: none; }
}