/* jobbyt.com — one look for every page. The same ink, cream and whale blue
   the app is drawn with; dark when the device is dark. */
:root{
  color-scheme:light dark;
  --bg:#f6f5f2;--surface:#edeae5;--raised:#ffffff;--line:#e3dfd8;
  --text:#211d1a;--soft:#3b352f;--muted:#6c645c;
  --accent:#276d9b;--accent-soft:#e5eef5;--action:#e54849;--on-action:#ffffff;
  --glow1:rgba(39,109,155,.14);--glow2:rgba(229,72,73,.10);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#171412;--surface:#211c19;--raised:#2a2420;--line:rgba(246,245,242,.1);
  --text:#f6f5f2;--soft:rgba(246,245,242,.88);--muted:rgba(246,245,242,.55);
  --accent:#5b9cc4;--accent-soft:rgba(91,156,196,.16);
  --glow1:rgba(91,156,196,.16);--glow2:rgba(229,72,73,.12);
}}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;line-height:1.5;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at top left,var(--glow1),transparent 32%),
    radial-gradient(circle at bottom right,var(--glow2),transparent 30%),
    var(--bg);
}
a{color:var(--accent)}
.wrap{width:min(960px,calc(100vw - 32px));margin:0 auto;padding:0 0 48px}
.narrow{width:min(760px,calc(100vw - 32px))}

/* top row: whale, name, a few round links */
header{display:flex;align-items:center;gap:12px;padding:22px 0}
header img{width:38px;height:38px}
header .brand{font-weight:800;font-size:20px;letter-spacing:-.01em;margin-right:auto;color:var(--text);text-decoration:none}
header nav{display:flex;gap:8px;flex-wrap:wrap}
header nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
header nav a.app{background:var(--action);border-color:var(--action);color:var(--on-action)}

/* the one big thing on the start page */
.hero{min-height:calc(100vh - 90px);display:grid;align-content:center;gap:18px;max-width:680px;padding:24px 0}
.kicker{margin:0;color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
h1{margin:0;font-size:clamp(42px,9vw,84px);line-height:.95;letter-spacing:-.025em;font-weight:800}
.lead{margin:0;font-size:19px;color:var(--soft);max-width:52ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.btn.action{background:var(--action);border-color:var(--action);color:var(--on-action)}
.note{font-size:13px;color:var(--muted);margin:0}

/* cards in a row, one column on a phone */
.cards{border-top:1px solid var(--line);padding:22px 0 0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--raised);border:1px solid var(--line);border-radius:20px;padding:18px}
.card h2{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
@media (max-width:760px){.hero{min-height:auto;padding:40px 0 20px}.cards{grid-template-columns:1fr}}

/* a plain page: privacy, contact */
.page h1{font-size:34px;letter-spacing:-.02em;margin:16px 0 6px}
.page h2{font-size:19px;margin-top:28px}
.page .muted{color:var(--muted);font-size:13px}
.page table{border-collapse:collapse;width:100%;font-size:15px}
.page td,.page th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}

/* the QR card */
.qr{width:min(520px,100%);margin:24px auto 0;border:1px solid var(--line);border-radius:24px;background:var(--raised);padding:24px;text-align:center}
.qr h1{font-size:clamp(26px,5vw,40px);margin:0 0 8px}
.qr p{margin:0 0 12px;color:var(--muted)}
.qr-code{margin:16px auto 8px;width:min(300px,72vw);aspect-ratio:1;border-radius:18px;background:#fff;padding:12px;border:1px solid var(--line)}
.qr-code img{width:100%;height:100%;display:block}

footer{padding:28px 0 0;color:var(--muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}