/* CVApplyr article hub — clean, engaging, on-brand reading experience + floating download CTA. */
:root{
  --brand:#3B82F6; --brand-deep:#2563EB; --bright:#60A5FA; --cyan:#06B6D4;
  --ink:#0B1120; --slate:#1e293b; --muted:#64748b; --line:#e6ebf2; --bg:#ffffff; --soft:#f6f9fc;
  --grad:linear-gradient(120deg,#06B6D4,#3B82F6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding-top:0;background:var(--bg);color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* On the LIGHT article pages the shared site header (/js/app-header.js, in <div id="app-header">) has
   NO background — a clean transparent bar that lets the white page show through. We darken its text/icons
   so they stay readable over white. This override lives in article.css, which ONLY loads on article
   pages, so the header on every other page of the site is completely untouched. */
#app-header .nav{
  background:var(--bg) !important;          /* match the article page background (white) */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04) !important;
}
#app-header .nav-links a{ color:#475569 !important; }
#app-header .nav-links a:hover{ color:#0B1120 !important; background:rgba(2,6,23,.05) !important; }
#app-header .brand-text .cv{ color:#0B1120 !important; }
#app-header .brand-icon{ filter:none !important; }   /* real coloured logo, not the white knockout */
#app-header .menu-btn{ background:rgba(2,6,23,.04) !important; border-color:rgba(2,6,23,.12) !important; }
#app-header .menu-btn-icon,
#app-header .menu-btn-icon::before,
#app-header .menu-btn-icon::after{ background:#0B1120 !important; }

/* article shell */
.article{max-width:760px;margin:100px auto 0;padding:0 20px 80px}
.kicker{display:inline-block;margin:20px 0 0;color:var(--brand-deep);font-weight:800;font-size:13px;
  letter-spacing:1.4px;text-transform:uppercase}
h1{font-size:clamp(30px,5vw,46px);line-height:1.12;letter-spacing:-1px;color:var(--ink);margin:10px 0 14px;font-weight:850}
.dek{font-size:21px;color:#475569;margin:0 0 18px;line-height:1.55}
.meta{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line);
  padding-bottom:22px;margin-bottom:8px;flex-wrap:wrap}
.meta b{color:var(--slate)}
.article h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2;letter-spacing:-.5px;color:var(--ink);margin:46px 0 14px;font-weight:800}
.article h3{font-size:21px;color:var(--ink);margin:30px 0 8px;font-weight:750}
.article p{margin:0 0 20px}
.article ul,.article ol{margin:0 0 20px;padding-left:22px}
.article li{margin:8px 0}
.lead::first-letter{font-size:58px;font-weight:850;float:left;line-height:.78;padding:6px 10px 0 0;color:var(--brand)}

/* figures + graphics */
figure{margin:30px 0}
figure img{border-radius:16px;box-shadow:0 14px 40px rgba(15,23,42,.12);display:block;width:100%}
figure svg{width:100%;height:auto;border-radius:16px;display:block;border:1px solid var(--line);background:var(--soft)}
figcaption{color:var(--muted);font-size:14px;text-align:center;margin-top:10px}
/* real in-app screenshots — portrait phone captures, constrained + centred */
figure.shot img{max-width:330px;margin:0 auto;box-shadow:0 22px 60px rgba(15,23,42,.20)}
.shotrow{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:32px 0}
.shotrow figure{margin:0}
.shotrow img{max-width:250px;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.20);display:block}
/* two-column row: body text beside a tall portrait screenshot (never stack two images) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;margin:34px 0}
.split .split-text{min-width:0}
.split .split-text>:first-child{margin-top:0}
.split .split-text>:last-child{margin-bottom:0}
.split figure.shot{margin:0}
.split figure.shot img{max-width:100%;max-height:430px;width:auto;margin:0 auto}
@media(max-width:680px){
  .split{grid-template-columns:1fr;gap:16px}
  .split figure.shot img{max-width:300px;max-height:none}
}

/* callouts / stat cards / quote */
.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;padding:18px 20px;margin:26px 0;font-size:17px}
.callout b{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;
  box-shadow:0 8px 24px rgba(15,23,42,.05)}
.stat .n{font-size:30px;font-weight:850;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px}
blockquote{margin:30px 0;padding:6px 0 6px 22px;border-left:4px solid var(--cyan);font-size:22px;
  font-style:italic;color:var(--ink);line-height:1.5}

/* inline CTA band */
.ctaband{background:var(--ink);background-image:radial-gradient(900px 300px at 20% -20%,rgba(6,182,212,.30),transparent),
  radial-gradient(900px 300px at 100% 120%,rgba(59,130,246,.30),transparent);
  color:#fff;border-radius:20px;padding:30px 28px;margin:42px 0;text-align:center}
.ctaband h3{color:#fff;font-size:24px;margin:0 0 8px}
.ctaband p{color:#cbd5e1;margin:0 0 18px}
.ctaband a{display:inline-block;background:#fff;color:var(--ink);font-weight:800;padding:13px 28px;border-radius:999px}
.ctaband a:hover{text-decoration:none;transform:translateY(-1px)}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin:12px 0;background:#fff}
.faq summary{font-weight:750;color:var(--ink);cursor:pointer;padding:10px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brand);font-weight:800}
.faq details[open] summary::after{content:"–"}

/* related */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.related a{display:block;border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);font-weight:700;
  background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.related a:hover{text-decoration:none;border-color:var(--brand);transform:translateY(-2px)}
.related a span{display:block;color:var(--muted);font-weight:500;font-size:14px;margin-top:6px}

/* floating download button — always visible */
.fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;
  background:var(--grad);color:#fff;font-weight:800;padding:14px 22px;border-radius:999px;
  box-shadow:0 12px 34px rgba(59,130,246,.45);transition:transform .15s,box-shadow .15s}
.fab:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 16px 40px rgba(59,130,246,.55)}
.fab svg{width:20px;height:20px;fill:#fff}
.fab .sub{font-weight:600;font-size:11px;opacity:.85;display:block;line-height:1}

/* footer */
.afoot{background:#0f1426;color:#94a3b8;margin-top:40px;padding:46px 20px 30px}
.afoot .wrap{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.afoot h5{color:#fff;margin:0 0 10px;font-size:16px}
.afoot a{color:#94a3b8;display:block;margin:6px 0;font-size:14px}
.afoot a:hover{color:#fff}
.afoot .cr{max-width:1080px;margin:28px auto 0;border-top:1px solid #1e293b;padding-top:18px;font-size:13px;text-align:center}

/* article index grid */
.hub-hero{max-width:1080px;margin:0 auto;padding:26px 20px 8px;text-align:center}
.hub-hero h1{font-size:clamp(30px,5vw,48px)}
.hub-hero p{font-size:20px;color:#475569;max-width:680px;margin:0 auto}
.grid{max-width:1080px;margin:30px auto;padding:0 20px 70px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.06);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(15,23,42,.12)}
.card a{color:inherit}.card a:hover{text-decoration:none}
/* aspect-ratio matches the 1200x628 promo images so they fill without cropping */
.card .thumb{aspect-ratio:1200/628;background:var(--grad);background-size:cover;background-position:center;display:flex;
  align-items:flex-end;padding:14px}
.card .tag{background:rgba(255,255,255,.92);color:var(--brand-deep);font-weight:800;font-size:11px;
  padding:5px 10px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase}
.card .body{padding:18px 20px 22px}
.card h3{margin:0 0 8px;font-size:20px;color:var(--ink);line-height:1.25}
.card p{margin:0;color:var(--muted);font-size:15px}

/* hero image at the top of an article */
figure.hero{margin:6px 0 30px}
figure.hero img{width:100%}

/* ---- comments ---- */
.comments{max-width:760px;margin:10px auto 0;padding:34px 20px 96px;border-top:1px solid var(--line)}
.cmt-title{font-size:26px;color:var(--ink);margin:14px 0 4px;font-weight:800}
.cmt-count{color:var(--muted);font-weight:700}
.cmt-sub{color:var(--muted);margin:0 0 22px;font-size:16px}
.cmt-list{display:flex;flex-direction:column;gap:20px;margin-bottom:34px}
.cmt{display:flex;gap:14px}
.cmt-av{flex:none;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.cmt-main{flex:1;min-width:0}
.cmt-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cmt-name{font-weight:750;color:var(--ink)}
.cmt-time{color:var(--muted);font-size:13px}
.cmt-body{margin:4px 0 6px;color:var(--slate);white-space:pre-wrap;overflow-wrap:anywhere}
.cmt-reply-btn{background:none;border:none;color:var(--brand-deep);font-weight:700;font-size:13px;cursor:pointer;padding:0}
.cmt-reply-btn:hover{text-decoration:underline}
.cmt-replies{margin:16px 0 0;padding-left:18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:16px}
.cmt-empty{color:var(--muted);font-style:italic}
.cmt-formwrap{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:22px}
.cmt-formtitle{margin:0 0 14px;font-size:19px;color:var(--ink);font-weight:800}
.cmt-row{display:flex;gap:12px;margin-bottom:12px}
.cmt-in{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--slate)}
.cmt-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.cmt-ta{resize:vertical;min-height:96px;margin-bottom:12px;display:block}
.cmt-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cmt-formfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cmt-submit{background:var(--grad);color:#fff;font-weight:800;font-size:15px;border:none;border-radius:999px;padding:12px 26px;cursor:pointer;transition:transform .15s;box-shadow:0 8px 22px rgba(59,130,246,.30)}
.cmt-submit:hover{transform:translateY(-1px)}
.cmt-submit:disabled{opacity:.6;cursor:default;transform:none}
.cmt-priv{color:var(--muted);font-size:13px}
.cmt-msg{margin:12px 0;padding:10px 14px;border-radius:10px;font-size:14px}
.cmt-msg.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.cmt-msg.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.cmt-replybadge{display:flex;align-items:center;gap:6px;background:#eef4ff;border:1px solid #dbeafe;color:var(--brand-deep);font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;margin-bottom:12px;width:fit-content}
.cmt-replycancel{background:none;border:none;color:var(--brand-deep);cursor:pointer;font-size:13px;padding:0}

@media(max-width:560px){
  body{font-size:17px}
  .stats{grid-template-columns:1fr}
  .fab .sub{display:none}
  .fab{right:14px;bottom:14px;padding:13px 18px}
  .cmt-row{flex-direction:column;gap:12px}
  .comments{padding-bottom:90px}
}