/* ATS Perfect — the long-form guides (ATS-friendly resume, keywords, job-specific
   formats, Canada, entry level, testing, rejections, PDF vs Word).
   Needs css/site.css first (tokens, header, footer, buttons). */

main{max-width:calc(720px + 2 * var(--pad));margin:0 auto;padding:0 var(--pad) 80px}
main a:not(.btn){color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
main a:not(.btn):hover{text-decoration-color:var(--ink)}
main h1{margin:12px 0 12px;font-size:44px;line-height:52px;letter-spacing:-.03em}
main h2{margin:48px 0 12px;font-size:26px;line-height:34px;scroll-margin-top:88px}
main h3{margin:28px 0 8px;font-size:18px;line-height:28px}
main p{margin:0 0 16px;font-size:16px;line-height:27px}
main ul,main ol{margin:0 0 16px;padding-left:22px}
main li{margin-bottom:6px;line-height:26px}
main strong,main b{font-weight:600;color:var(--ink)}
.hero{padding:56px 0 8px}
.lede{font-size:19px;line-height:30px;color:var(--g-700)}
.meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 32px;font-size:13px;color:var(--muted)}

/* short version */
.tldr{margin:8px 0 32px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--g-50)}
.tldr h2{margin:0 0 8px;font-size:16px;line-height:24px}
.tldr ul{margin:0;padding:0;list-style:none}
.tldr li{position:relative;margin:0;padding:4px 0 4px 26px;font-size:15px;line-height:23px;color:var(--g-700)}
.tldr li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:11px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}

/* contents */
.toc{margin:0 0 40px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--g-50)}
.toc strong{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:28px}
.toc li{margin:4px 0;font-size:14px;line-height:22px}
.toc a:not(.btn){text-decoration:none;font-weight:500;color:var(--g-700)}
.toc a:not(.btn):hover{color:var(--ink);text-decoration:underline}

.callout{margin:24px 0;padding:14px 18px;border-left:3px solid var(--navy);border-radius:0 var(--r) var(--r) 0;background:var(--g-50);font-size:15px;line-height:24px;color:var(--g-700)}

/* checklists */
.checklist{margin:24px 0 32px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.checklist-head{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--navy);color:#fff}
.checklist-head .dot{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r);background:rgba(255,255,255,.12)}
.checklist-head .dot:empty::before{content:"";width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px)}
.checklist-head .dot svg{width:14px;height:14px}
.checklist-head h3{margin:0;font-size:16px;line-height:24px;color:#fff}
.checklist-head span{font-size:12px;color:#BAC3D1}
.check-row{display:flex;gap:12px;align-items:flex-start;padding:14px 20px;border-top:1px solid var(--line)}
.check-row:first-child{border-top:0}
.check-row .tick{flex:none;width:20px;height:20px;margin-top:3px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--g-100);color:var(--navy)}
.check-row .tick:empty::before{content:"";width:5px;height:9px;border-right:1.8px solid var(--navy);border-bottom:1.8px solid var(--navy);transform:rotate(45deg) translate(-1px,-1px)}
.check-row .tick svg{width:12px;height:12px}
.check-row .tick svg path{stroke:currentColor}
.check-row b{display:block;font-size:15px;line-height:23px}
.check-row p{margin:2px 0 0;font-size:14px;line-height:21px;color:var(--muted)}

/* tables */
.compare,.kwbank{width:100%;margin:20px 0 32px;border:1px solid var(--line);border-collapse:separate;border-spacing:0;border-radius:var(--r-lg);overflow:hidden;font-size:14px;line-height:22px}
.compare th,.kwbank th{padding:12px 16px;text-align:left;font-size:13px;font-weight:600;background:var(--g-50);color:var(--ink)}
.compare thead th:first-child{background:var(--green-50);color:var(--green-700)}
.compare thead th:last-child{background:var(--red-50);color:var(--red)}
.compare td,.kwbank td{padding:10px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--g-700)}
.compare td:first-child,.kwbank td:first-child{border-right:1px solid var(--line)}
.kwbank td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.compare--neutral thead th:first-child,.compare--neutral thead th:last-child{background:var(--g-50);color:var(--ink)}

/* sample resume, before/after */
.sample{margin:20px 0 32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--g-50);overflow:hidden}
.sample-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}
.sample-head span{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sample pre{margin:0;padding:16px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink);white-space:pre;tab-size:2}
.copy-btn{height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font-size:13px;font-weight:500;color:var(--g-700);cursor:pointer}
.copy-btn:hover{background:var(--g-50);border-color:var(--g-400)}
.ba{margin:16px 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ba .row{padding:12px 16px;font-size:14.5px;line-height:23px}
.ba .row.b{border-bottom:1px solid var(--line);background:var(--red-50);color:#7A271A}
.ba .row.a{background:var(--green-50);color:var(--green-700)}
.ba .tag{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

/* questions */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:16px;line-height:24px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--g-400);border-bottom:1.5px solid var(--g-400);transform:translateY(-2px) rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .ans{padding:0 24px 18px 0;font-size:15px;line-height:24px}
.faq .ans p{margin:0;font-size:15px;line-height:24px}

/* call to action */
.cta{margin:48px 0 0;padding:40px 32px;border-radius:var(--r-lg);background:var(--navy);text-align:center}
.cta--early{margin:8px 0 40px;padding:28px 24px}
.cta h2{margin:0 0 8px;font-size:24px;line-height:32px;color:#fff}
.cta p{max-width:480px;margin:0 auto 20px;color:#BAC3D1}
.cta .btn-primary{background:#fff;color:var(--navy)}
.cta .btn-primary:hover{background:var(--g-100)}

@media (max-width:560px){
  .hero{padding:32px 0 8px}
  main h1{font-size:32px;line-height:40px}
  main h2{font-size:22px;line-height:30px}
  .lede{font-size:17px;line-height:27px}
  .toc ol{columns:1}
  .compare{display:block;overflow-x:auto}
  /* Keyword tables stack on phones: the category, then its keywords at full width */
  .kwbank thead{display:none}
  .kwbank,.kwbank tbody,.kwbank tr,.kwbank td{display:block}
  .kwbank tr+tr{border-top:1px solid var(--line)}
  .kwbank td{border-top:0}
  .kwbank td:first-child{border-right:0;padding-bottom:0;white-space:normal}
  .kwbank td+td{padding-top:4px}
  .cta{padding:28px 20px}
}

/* ATS resume checklist (ats-resume-checklist.html): tick boxes, a progress bar, printable */
.cl-bar{position:sticky;top:64px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:8px 0 28px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 6px 20px -12px rgba(15,28,53,.25)}
.cl-count{font-size:14px;color:var(--g-700);white-space:nowrap}
.cl-count b{font-weight:600;color:var(--ink)}
.cl-track{flex:1;min-width:120px;height:6px;border-radius:999px;background:var(--g-100,#F2F4F7);overflow:hidden}
.cl-track i{display:block;height:100%;width:0;border-radius:inherit;background:var(--green,#17B26A);transition:width .25s ease}
.cl-bar.is-done{border-color:#ABEFC6;background:rgba(236,253,243,.95)}
.cl-btn{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:var(--g-700);cursor:pointer}
.cl-btn:hover{background:var(--g-50);color:var(--ink)}
.cl-reset{border-color:transparent;background:none}
.cl-list{list-style:none;margin:12px 0 28px;padding:0;counter-reset:cl}
.cl-list li{margin:0;padding:0}
.cl-list li+li{border-top:1px solid var(--line)}
.cl-list label{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;cursor:pointer}
.cl-list input{flex-shrink:0;width:20px;height:20px;margin:2px 0 0;accent-color:var(--green,#17B26A);cursor:pointer}
.cl-t b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.cl-t span{display:block;margin-top:2px;font-size:15px;line-height:23px;color:var(--g-700)}
.cl-list input:checked+.cl-t b{color:var(--g-500,#667085);text-decoration:line-through;text-decoration-color:var(--g-300,#D0D5DD)}
@media (max-width:560px){.cl-bar{position:static}}
@media print{
  .header,.footer,.cl-bar,.cta,.faq,#faq,.hero .meta{display:none !important}
  .cl-list label{padding:6px 0}
  .cl-t span{font-size:12px;line-height:17px}
  .cl-t b{font-size:13.5px;line-height:19px}
  main h2{margin-top:14px;font-size:16px}
  body{background:#fff}
}
/* "Checked by the free checker" tag on the items the ATS checker tests */
.cl-auto,.cl-list .cl-t b .cl-auto{display:inline-block;margin-top:0;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--green-50,#ECFDF3);color:var(--green-700,#067647);font-size:11.5px;font-weight:600;line-height:20px;vertical-align:2px;white-space:nowrap;text-decoration:none}
.lede .cl-auto{vertical-align:1px}
.cl-list .cl-t b .cl-auto{font-size:11.5px;line-height:20px;color:var(--green-700,#067647)}
.cl-list input:checked+.cl-t b .cl-auto{opacity:.6}
@media print{.cl-auto{border:1px solid #ABEFC6}}