/* Nightcrew. One page: night (we work while you sleep) → dawn (pick your trade, see your price) → morning (wake up to work).
   Newsreader headlines, Hanken Grotesk text, IBM Plex Mono for timestamps. Moon gold = signals, orange = press here, green = yes. */

:root {
  --night: #0C1220; --night-2: #131B2E; --night-3: #1C2640; --night-line: rgba(255,255,255,.1);
  --on-night: #F4F0E8; --on-night-2: #A9B1C3; --on-night-3: #737D96;
  --paper: #F8F4ED; --sheet: #FFFFFF; --sand: #EFE8DC; --ink: #121620; --ink-2: #2B303C; --muted: #5E6472; --line: #E6DFD2;
  --moon: #F2C14E; --mark: #FFE7A3; --go: #FF7A3D; --go-press: #F1672A; --on-go: #121620;
  --yes: #3DDC97; --yes-ink: #0E7A4B; --yes-soft: #DFF3E8;
  --serif: "Newsreader", Georgia, serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ui: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --r: 12px; --r2: 20px; --r3: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --g: 20px;
}
@media (min-width: 768px) { :root { --g: 32px; } }
@media (min-width: 1280px) { :root { --g: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--on-night); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; caret-color: var(--go); accent-color: var(--go); }
::selection { background: var(--moon); color: var(--ink); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
svg { display: block; flex: none; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--g); }
.vh { position: absolute; left: -9999px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 24px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; background: none; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.btn:active { transform: scale(.98); }
.btn--go { background: var(--go); color: var(--on-go); }
.btn--go:hover { background: var(--go-press); }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 14.5px; }
.btn .i { width: 18px; height: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand svg { width: 30px; height: 30px; }

h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6.6vw, 92px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--moon); }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
h2 .soft { color: #9C9488; }
.lede { font-size: 19px; line-height: 1.55; color: var(--on-night-2); max-width: 50ch; text-wrap: pretty; }
.lede b { color: var(--on-night); font-weight: 600; }

.linkform { display: flex; gap: 8px; padding: 6px; background: var(--on-night); border-radius: 999px; max-width: 540px; color: var(--ink); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
.linkform input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 8px 0 20px; font-size: 17px; color: var(--ink); }
.linkform input::placeholder { color: #8A8F9B; }
@media (max-width: 520px) { .linkform { flex-direction: column; border-radius: var(--r2); padding: 8px; } .linkform input { padding: 14px 12px; } }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--on-night-2); }
.ticks li { display: inline-flex; gap: 6px; align-items: center; }
.ticks .i { width: 16px; height: 16px; color: var(--yes); }

/* ───────── night ───────── */
.night { position: relative; overflow: hidden; background: var(--night); }
.night__photo { position: absolute; inset: 0; overflow: hidden; }
.night__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; animation: drift 24s cubic-bezier(.2,.6,.2,1) both; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.night__photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(12,18,32,.94) 0%, rgba(12,18,32,.78) 38%, rgba(12,18,32,.35) 70%, rgba(12,18,32,.55) 100%),
  linear-gradient(180deg, rgba(12,18,32,.4), transparent 20%, transparent 70%, var(--night) 100%); }
@media (max-width: 1039px) { .night__photo::after { background: linear-gradient(180deg, rgba(12,18,32,.35) 0%, rgba(12,18,32,.55) 40%, var(--night) 100%); } .night__photo { bottom: auto; height: 520px; } .hero { padding-top: 300px; } }
.night__photo { height: 100svh; max-height: 980px; bottom: auto; }
.top { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; height: 72px; }
.top nav { display: none; margin-left: auto; gap: 28px; font-size: 15px; font-weight: 500; color: var(--on-night-2); }
.top nav a { text-decoration: none; } .top nav a:hover { color: var(--on-night); }
.top .btn { margin-left: auto; }
@media (min-width: 900px) { .top nav { display: flex; } .top .btn { margin-left: 0; } }

.hero { position: relative; z-index: 2; display: grid; gap: 40px; align-items: center; padding-block: 32px 88px; }
@media (min-width: 1040px) { .hero { grid-template-columns: minmax(0, 640px); min-height: calc(92svh - 72px); padding-block: 8px 64px; } }
.hero__copy { display: grid; gap: 22px; }
.live { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-night-2); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yes); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 100% { box-shadow: 0 0 0 10px rgba(61,220,151,0); } }

/* the demo: a real-looking job post → email → reply → owner's phone */
.demo { display: grid; gap: 14px; }
.win { background: #FBFAF7; color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ECE8E1; border-bottom: 1px solid #DCD6CB; font-family: var(--ui); }
.win__bar > i { width: 11px; height: 11px; border-radius: 50%; background: #CFC8BB; }
.win__bar > i:nth-child(1) { background: #EC6A5E; } .win__bar > i:nth-child(2) { background: #F4BF4F; } .win__bar > i:nth-child(3) { background: #61C554; }
.url { margin-left: 10px; flex: 1; min-width: 0; background: #F8F6F1; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; color: #59606C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; }
.url .i { width: 13px; height: 13px; color: #8A909B; }
.wtime { font-family: var(--mono); font-size: 12px; color: #59606C; margin-left: 8px; white-space: nowrap; }
.stage { position: relative; height: 430px; font-family: var(--ui); }
@media (max-width: 520px) { .stage { height: 500px; } }
.scene { position: absolute; inset: 0; padding: 22px 22px 20px; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; overflow: hidden; }
.scene.on { opacity: 1; transform: none; pointer-events: auto; }

/* scene 1: job post */
.job { display: grid; gap: 12px; align-content: start; }
.job__head { display: flex; gap: 12px; align-items: center; }
.job__logo { width: 44px; height: 44px; border-radius: 10px; background: #1F2937; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.job__head b { display: block; font-size: 20px; line-height: 1.2; }
.job__head small { color: #59606C; font-size: 14px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.job__meta span { font-size: 12.5px; background: #EFECE6; border-radius: 6px; padding: 4px 8px; color: #3F4552; }
.job__txt { font-size: 14.5px; line-height: 1.6; color: #2F3542; }
.job__txt mark { background: transparent; color: inherit; border-radius: 3px; padding: 0 2px; transition: background-color 400ms; }
.job__txt mark.hit { background: var(--mark); box-shadow: 0 0 0 1px #F2C14E inset; }
.job__btn { justify-self: start; font-size: 13px; font-weight: 600; background: #2557D6; color: #fff; border-radius: 8px; padding: 8px 14px; }
.scan { position: absolute; left: 0; right: 0; height: 64px; top: -64px; background: linear-gradient(180deg, transparent, rgba(242,193,78,.18), transparent); border-bottom: 2px solid rgba(242,193,78,.75); }
.scene.on .scan { animation: scan 2.8s var(--ease) .2s both; }
@keyframes scan { to { top: 100%; } }
.match { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 10px; background: var(--night); color: var(--on-night); border-radius: 12px; padding: 10px 14px; font-family: var(--sans); font-size: 14px; opacity: 0; transform: translateY(8px); transition: all 500ms var(--ease); }
.match.in { opacity: 1; transform: none; }
.match .i { color: var(--moon); width: 18px; height: 18px; }
.match b { font-weight: 600; }
.match span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--yes); }

/* scene 2: compose */
.mail { display: flex; flex-direction: column; }
.mail__row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #E7E2D9; font-size: 14px; }
.mail__row span { color: #7A808C; width: 58px; flex: none; }
.mail__row b { font-weight: 600; }
.mail__body { padding-top: 12px; font-size: 14px; line-height: 1.55; color: #2F3542; white-space: pre-line; flex: 1; min-height: 0; overflow: hidden; }
.mail__body .caret { display: inline-block; width: 1.5px; height: 1.05em; background: #2557D6; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mail__foot { padding-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #59606C; }
.mail__foot .send { margin-left: auto; background: #2557D6; color: #fff; font-weight: 600; border-radius: 999px; padding: 8px 16px; }
.mail__foot .i { width: 16px; height: 16px; }

/* scene 3: reply in the thread */
.thread { display: grid; gap: 12px; align-content: start; }
.thread__subj { font-size: 18px; font-weight: 600; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-top: 1px solid #E7E2D9; }
.msg__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; grid-row: span 2; }
.msg__who { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.msg__who b { font-weight: 600; }
.msg__who time { margin-left: auto; color: #7A808C; font-size: 12.5px; }
.msg p { font-size: 14.5px; color: #2F3542; line-height: 1.5; }
.msg--old p { color: #7A808C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg--new { animation: pop 600ms var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.flag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: var(--yes-soft); color: var(--yes-ink); font-family: var(--sans); font-weight: 600; font-size: 13.5px; border-radius: 999px; padding: 6px 12px; }
.flag .i { width: 16px; height: 16px; }

/* scene 4: the owner's lock screen, plain email + text notifications */
.lock { background: radial-gradient(400px 300px at 70% 0%, #3C4C78, transparent), linear-gradient(180deg, #1B2340, #0C1220); color: #fff; display: grid; align-content: start; gap: 10px; }
.lock__t { text-align: center; font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.lock__d { text-align: center; font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.n { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 1px 10px; background: rgba(246,246,248,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #111; border-radius: 20px; padding: 11px 13px; opacity: 0; transform: translateY(-10px) scale(.98); transition: all 520ms var(--ease); font-family: var(--ui); }
.n.in { opacity: 1; transform: none; }
.n__ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; grid-row: span 3; color: #fff; }
.n__ic .i { width: 22px; height: 22px; stroke-width: 2; }
.n__ic--mail { background: linear-gradient(180deg, #4AA3FF, #1673F2); }
.n__ic--sms { background: linear-gradient(180deg, #6EE07A, #2DBE48); }
.n__top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.n__top b { font-weight: 600; }
.n__top time { color: #6B6F78; }
.n__sub { font-size: 13.5px; font-weight: 600; }
.n p { font-size: 13.5px; line-height: 1.35; color: #2B2F38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps button { border: 0; background: none; cursor: pointer; display: grid; gap: 8px; text-align: left; color: var(--on-night-3); font-size: 13px; font-weight: 600; padding: 0; }
.steps button i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.steps button i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--moon); }
.steps button.done i::after { width: 100%; }
.steps button.on { color: var(--on-night); }
.steps button.on i::after { animation: fill var(--dur, 4s) linear both; }
@keyframes fill { to { width: 100%; } }

/* ───────── dawn: trades + quote ───────── */
.dawn { position: relative; background: linear-gradient(180deg, var(--night) 0, #2A2D45 90px, #8C6E5E 190px, #E9C9A2 270px, var(--paper) 380px); color: var(--ink); padding-top: 200px; padding-bottom: 96px; }
@media (min-width: 960px) { .dawn { padding-top: 240px; padding-bottom: 112px; } }
.dawn__head { display: grid; gap: 16px; margin-bottom: 36px; }
@media (min-width: 1040px) { .dawn__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } }
.dawn .lede { color: var(--muted); }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink-2); transition: all 160ms var(--ease); }
.tab .i { width: 18px; height: 18px; color: var(--muted); }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab[aria-selected="true"] .i { color: var(--moon); }

.trade { display: grid; background: var(--sheet); border-radius: var(--r3); overflow: hidden; box-shadow: 0 2px 4px rgba(18,22,32,.04), 0 40px 80px -40px rgba(18,22,32,.35); }
@media (min-width: 960px) { .trade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.trade__pic { position: relative; min-height: 340px; background: var(--night-2); overflow: hidden; color: var(--on-night); }
.trade__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: drift 14s ease-out both; }
.trade__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,32,.15) 35%, rgba(12,18,32,.88)); }
.radar { position: absolute; z-index: 2; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; background: rgba(12,18,32,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; }
.radar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yes); animation: ping 2s ease-out infinite; }
.trade__pic .best { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 6px; }
.trade__pic .best small { font-size: 13px; color: var(--moon); font-weight: 700; }
.trade__pic .best b { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; }
.trade__body { padding: 28px; display: grid; gap: 22px; align-content: start; }
@media (min-width: 960px) { .trade__body { padding: 40px 44px; } }
.trade__body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.watchlist { display: grid; gap: 9px; }
.watchlist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; color: var(--ink-2); line-height: 1.45; }
.watchlist .i { color: #C58D12; margin-top: 1px; }
.quote { display: grid; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r2); padding: 20px; }
.quote__top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.quote dd { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -.01em; }
.quote dd small { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--muted); letter-spacing: 0; margin-top: 4px; line-height: 1.35; }
.quote .worth dd { color: var(--yes-ink); }
.slide { display: grid; gap: 6px; }
.slide label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; }
.slide output { font-family: var(--serif); font-weight: 500; font-size: 22px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--fill, 25%), #DCD4C6 var(--fill, 25%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #DCD4C6; }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.opts { display: grid; gap: 10px; }
@media (min-width: 560px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt { display: grid; gap: 6px; }
.opt > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--sand); border-radius: 999px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(18,22,32,.14); }
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pay .btn { box-shadow: 0 10px 24px -10px rgba(255,122,61,.8); }
.pay small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.payoff { font-size: 15px; color: var(--ink-2); background: var(--yes-soft); border-radius: var(--r); padding: 12px 16px; }
.payoff b { color: var(--yes-ink); }
.swap { animation: swap 520ms var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ───────── morning ───────── */
.morning { position: relative; overflow: hidden; color: #fff; background: #2A2219; }
.morning > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.morning::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,12,.9) 0%, rgba(20,16,12,.7) 40%, rgba(20,16,12,.15) 75%), linear-gradient(180deg, transparent 60%, rgba(20,16,12,.85)); }
@media (max-width: 899px) { .morning::after { background: linear-gradient(180deg, rgba(20,16,12,.35), rgba(20,16,12,.92) 55%); } }
.morning .wrap { position: relative; z-index: 1; display: grid; gap: 24px; padding-block: 120px 40px; }
@media (max-width: 899px) { .morning .wrap { padding-top: 300px; } }
.morning h2 { color: #fff; max-width: 13ch; }
.morning h2 em { color: #FFD7A8; }
.morning .lede { color: rgba(255,255,255,.82); }
.trust { display: grid; gap: 10px; margin-top: 8px; }
.trust li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: rgba(255,255,255,.8); font-size: 15px; }
.trust .i { color: var(--yes); }
.foot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); margin-top: 72px; padding-top: 20px; font-size: 13.5px; color: rgba(255,255,255,.6); }
.foot nav { display: flex; gap: 20px; }

.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 8px; background: rgba(12,18,32,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--night-line); border-radius: 999px; padding: 8px 8px 8px 18px; transform: translateY(150%); transition: transform 400ms var(--ease); }
.dock.on { transform: none; }
.dock span { font-size: 14px; line-height: 1.25; color: var(--on-night-2); }
.dock span b { display: block; color: var(--on-night); font-size: 15px; }
.dock .btn { margin-left: auto; min-height: 44px; }
@media (min-width: 960px) { .dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* the night shift band: what happened while he slept */
.shift { position: relative; z-index: 2; display: grid; gap: 32px; padding-block: 24px 40px; }
@media (min-width: 1040px) { .shift { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding-block: 40px 56px; } }
.shift__copy { display: grid; gap: 18px; }
.shift__copy h2 { color: var(--on-night); }
.log { display: grid; gap: 4px; margin-top: 4px; }
.log button { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 12px; text-align: left; border: 0; background: none; cursor: pointer; padding: 12px 14px; border-radius: 14px; color: var(--on-night-3); transition: background 200ms, color 200ms; }
.log button time { font-family: var(--mono); font-size: 12.5px; padding-top: 3px; }
.log button b { font-weight: 600; font-size: 16px; color: inherit; }
.log button span { grid-column: 2; font-size: 14.5px; line-height: 1.45; }
.log button.on { background: rgba(255,255,255,.06); color: var(--on-night); }
.log button.on time { color: var(--moon); }
.log button.on span { color: var(--on-night-2); }
.log button .bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; display: none; }
.log button.on .bar { display: block; }
.log button .bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--moon); }
.log button.on .bar::after { animation: fill var(--dur, 4s) linear both; }

/* phones: show the photo first, then the words */
@media (max-width: 1039px) {
  .night__photo { height: 600px; }
  .hero { padding-top: 400px; }
  .night__photo img { object-position: 84% 50%; }
}
@media (max-width: 1039px) {
  .shift__copy { display: contents; }
  .shift__copy h2 { order: 1; }
  .shift .win { order: 2; }
  .log { order: 3; margin-top: -16px; }
  .log button:not(.on) span { display: none; }
  .log button { padding: 8px 12px; }
}

/* bolder brand */
.brand svg { width: 38px; height: 38px; filter: drop-shadow(0 0 14px rgba(242,193,78,.35)); }
.wm { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-size: 26px; letter-spacing: -.035em; line-height: 1; color: #fff; }
.wm b { font-weight: 800; color: var(--moon); }
@media (max-width: 520px) { .wm { font-size: 23px; } .brand svg { width: 34px; height: 34px; } }

/* live: who's hiring near you */
.livebox { background: var(--sheet); border-radius: var(--r3); box-shadow: 0 2px 4px rgba(18,22,32,.04), 0 40px 80px -40px rgba(18,22,32,.35); padding: 24px; display: grid; gap: 20px; }
@media (min-width: 960px) { .livebox { padding: 36px 40px; } }
.livebox__form { display: grid; gap: 12px; }
@media (min-width: 900px) { .livebox__form { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; } }
.livebox .seg { justify-self: start; }
.livebox__in { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.livebox__in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 8px 0 16px; font-size: 17px; color: var(--ink); }
@media (max-width: 520px) { .livebox__in { flex-direction: column; border-radius: var(--r2); } .livebox__in input { padding: 12px; } }
.livebox__hint { color: var(--muted); font-size: 15px; }
.scanning { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 600; }
.scanning .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--go); animation: ping 1.2s ease-out infinite; }
.livebox__sum { font-size: 18px; color: var(--ink); display: grid; gap: 4px; }
.livebox__sum b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--yes-ink); }
.livebox__sum small { font-size: 13.5px; color: var(--muted); }
.hires { display: grid; gap: 8px; }
@media (min-width: 760px) { .hires { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hires { grid-template-columns: 1fr 1fr 1fr; } }
.hires li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); animation: swap 500ms var(--ease) both; }
.hires li:nth-child(2) { animation-delay: 60ms; } .hires li:nth-child(3) { animation-delay: 120ms; } .hires li:nth-child(4) { animation-delay: 180ms; } .hires li:nth-child(5) { animation-delay: 240ms; } .hires li:nth-child(6) { animation-delay: 300ms; }
.hires__co { font-weight: 700; font-size: 15.5px; }
.hires__t { font-size: 14px; color: var(--ink-2); }
.hires__m { font-size: 12.5px; color: var(--muted); }
.livebox__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.livebox__cta small { color: var(--muted); font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.livebox > *, .livebox__form > * { min-width: 0; }
@media (max-width: 600px) { .livebox .seg { flex-wrap: wrap; justify-self: stretch; } .livebox .seg button { white-space: normal; } .livebox { padding: 20px 16px; } }
@media (max-width: 600px) { .livebox__cta .btn, .pay .btn { white-space: normal; width: 100%; text-align: center; } }

/* three trades: wrap tabs on phones instead of hiding one off-screen */
@media (max-width: 600px) { .tabs { flex-wrap: wrap; overflow: visible; } }