/* Qapply blog — shared styles. Matches the marketing site brand. */
:root{
  --bg:#FBFAF6; --surface:#fff; --ink:#18181B; --ink-2:#3F3F46; --ink-3:#71717A;
  --ink-4:#A1A1AA; --line:#ECEAE3; --line-2:#DEDCD3; --accent:#5B5BF6; --accent-2:#3D3DD8;
  --f-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.wide{max-width:1040px}

/* nav */
.nav{border-bottom:1px solid var(--line);background:rgba(251,250,246,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px;max-width:1040px;margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px}
.nav-cta{background:var(--ink);color:#fff;padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600}
.nav-cta:hover{background:#27272A;text-decoration:none}

/* article */
article{padding:48px 0 24px}
.eyebrow{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
article h1{font-family:var(--f-display);font-weight:700;font-size:42px;line-height:1.08;letter-spacing:-.025em;margin-bottom:18px;text-wrap:balance}
.meta{color:var(--ink-3);font-size:14px;margin-bottom:30px}
.lead{font-size:20px;line-height:1.6;color:var(--ink-2);margin-bottom:30px}
article h2{font-family:var(--f-display);font-weight:600;font-size:27px;letter-spacing:-.02em;margin:42px 0 14px;line-height:1.2}
article h3{font-family:var(--f-display);font-weight:600;font-size:20px;margin:28px 0 10px}
article p{margin-bottom:18px;color:var(--ink-2)}
article ul,article ol{margin:0 0 18px 22px;color:var(--ink-2)}
article li{margin-bottom:9px}
article strong{color:var(--ink)}
blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:24px 0;color:var(--ink-2);font-size:18px}
.tldr{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:22px 24px;margin:0 0 34px}
.tldr h2{margin:0 0 10px;font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.tldr ul{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font-family:var(--f-display);background:var(--surface)}

/* cta box */
.cta{margin:46px 0 10px;background:linear-gradient(135deg,#5B5BF6,#3D3DD8);color:#fff;border-radius:18px;padding:34px 32px;text-align:center}
.cta h2{font-family:var(--f-display);color:#fff;margin:0 0 10px;font-size:26px}
.cta p{color:rgba(255,255,255,.86);margin-bottom:20px}
.cta a{display:inline-block;background:#fff;color:var(--accent-2);font-weight:700;padding:13px 26px;border-radius:10px}
.cta a:hover{text-decoration:none;background:#f4f4ff}

/* faq */
.faq h3{font-size:18px;margin:22px 0 6px}

/* related + footer */
.related{border-top:1px solid var(--line);margin-top:46px;padding-top:30px}
.related h2{font-family:var(--f-display);font-size:20px;margin-bottom:16px}
.related a{display:block;margin-bottom:10px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0;color:var(--ink-3);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;max-width:1040px;margin:0 auto;padding:0 22px}
.footer-links{display:flex;gap:18px}

/* blog hub */
.hub-hero{padding:56px 0 34px;text-align:center}
.hub-hero h1{font-family:var(--f-display);font-weight:700;font-size:44px;letter-spacing:-.025em;margin-bottom:14px}
.hub-hero p{font-size:19px;color:var(--ink-2);max-width:560px;margin:0 auto}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:14px 0 20px}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:24px;transition:transform .12s,box-shadow .12s,border-color .12s;display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(15,15,30,.25);border-color:var(--ink-4);text-decoration:none}
.card .tag{font-family:var(--f-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.card h2{font-family:var(--f-display);font-size:20px;line-height:1.25;margin:10px 0 8px;color:var(--ink)}
.card p{color:var(--ink-3);font-size:15px}

@media(max-width:600px){
  article h1{font-size:32px}
  .hub-hero h1{font-size:34px}
  body{font-size:16px}
}