/*
 * AAT Career Guides - minimal single-column reading template (v3.0).
 * Brand fonts/colours: Montserrat headings, Sen body, learndirect navy/blue/mint.
 * EVERYTHING is scoped under .cg-page so nothing leaks to the rest of the site.
 * Base rules that the mockup applied to bare body/a/h2 are applied to .cg-page here.
 */

.cg-page{
  --navy:#001052;
  --navy-2:#0a1f44;
  --accent:#1763C6;
  --mint:#01FCC2;
  --ink:#1a2540;          /* body text - navy-tinted near-black */
  --ink-soft:#39435c;     /* secondary */
  --ink-faint:#6b7892;    /* meta */
  --line:#e3e9f2;
  --line-soft:#eef3fb;
  --paper:#ffffff;
  --paper-tint:#f7faff;
  --accent-soft:#eef3fb;
  --measure:680px;

  font-family:'Sen',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.cg-page *{box-sizing:border-box}
.cg-page a{color:var(--accent);text-decoration:none}
.cg-page a:hover{text-decoration:underline}
.cg-page h1,
.cg-page h2,
.cg-page h3,
.cg-page .blocklabel,
.cg-page .download h3,
.cg-page .toc__label,
.cg-page .eyebrow,
.cg-page .note__k{font-family:'Montserrat',sans-serif}

/* ---------- Masthead / title block ---------- */
.cg-page .mast{
  max-width:var(--measure);
  margin:0 auto;
  padding:72px 24px 0;
}
.cg-page .mast .eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.cg-page .mast h1{
  font-weight:700;
  font-size:42px;
  line-height:1.14;
  letter-spacing:-0.015em;
  color:var(--navy);
  margin:0 0 18px;
  max-width:15ch;               /* control the title wrap */
}
.cg-page .mast .standfirst{
  font-size:20px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 26px;
  font-weight:400;
}
.cg-page .mast .meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:14px;
  color:var(--ink-faint);
  padding-bottom:34px;
  border-bottom:1px solid var(--line);
}
.cg-page .mast .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);display:inline-block}
.cg-page .mast .meta .stars{color:#00b67a;letter-spacing:1px}

/* ---------- Breadcrumb (aligned to masthead) ---------- */
.cg-page .cg-crumbs{
  max-width:var(--measure);
  margin:0 auto;
  padding:28px 24px 0;
  font-family:'Sen',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;
  line-height:1.5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--ink-faint);
}
.cg-page .cg-crumbs a{color:var(--ink-faint);text-decoration:none;transition:color .15s ease}
.cg-page .cg-crumbs a:hover{color:var(--accent);text-decoration:underline}
.cg-page .cg-crumbs__sep{color:#c7ccd6}
.cg-page .cg-crumbs__here{color:#374151;font-weight:400}

/* ---------- Layout: content + light TOC ---------- */
.cg-page .shell{
  max-width:960px;
  margin:0 auto;
  padding:0 24px 96px;
}
.cg-page .article{ max-width:var(--measure); margin:0 auto; width:100%; }

/* Light TOC */
.cg-page .toc{
  margin:36px 0 8px;
  padding:20px 22px;
  background:var(--paper-tint);
  border:1px solid var(--line);
  border-radius:10px;
}
.cg-page .toc__label{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 10px;
}
.cg-page .toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.cg-page .toc li{counter-increment:toc}
.cg-page .toc li + li{border-top:1px solid var(--line-soft)}
.cg-page .toc a{
  display:flex;gap:12px;align-items:baseline;padding:9px 0;
  color:var(--ink);font-size:15.5px;line-height:1.4;
}
.cg-page .toc a:hover{color:var(--accent);text-decoration:none}
.cg-page .toc a::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--accent);font-weight:700;font-size:12.5px;font-family:'Montserrat',sans-serif;
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:22px;
}

/* ---------- Reading content ---------- */
.cg-page .article .lead{ font-size:20px;line-height:1.6;color:var(--ink);margin:34px 0 8px;font-weight:400 }
.cg-page .article h2{
  font-weight:700;font-size:27px;line-height:1.25;letter-spacing:-0.01em;
  color:var(--navy);margin:52px 0 14px;scroll-margin-top:24px;
}
.cg-page .article h2:first-of-type{margin-top:40px}
.cg-page .article p{margin:0 0 20px;color:var(--ink)}
.cg-page .article p:last-child{margin-bottom:0}
.cg-page .article .sec + .sec{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px}

/* Highlight note - single accent bar (salary callouts) */
.cg-page .note{
  margin:28px 0;padding:18px 22px;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
}
.cg-page .note__k{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.cg-page .note__v{display:block;font-size:17px;line-height:1.55;color:var(--ink);margin:0}

/* ---------- Tables (salaryTable, timeline, section table) ---------- */
/* Minimal, on-brand: bordered, navy Montserrat header, alternating row tint,
   right-aligned numeric columns, horizontal scroll wrapper on mobile. */
.cg-page .tbl-wrap{
  margin:26px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:10px;
}
.cg-page table.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:15.5px;
  line-height:1.5;
  min-width:520px;
}
.cg-page table.tbl caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  color:var(--ink-faint);
  padding:12px 16px 10px;
  line-height:1.45;
}
.cg-page table.tbl th{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  text-align:left;
  color:#fff;
  background:var(--navy);
  padding:12px 16px;
  vertical-align:middle;
}
.cg-page table.tbl td{
  padding:12px 16px;
  border-top:1px solid var(--line);
  color:var(--ink);
  vertical-align:top;
}
.cg-page table.tbl tbody tr:nth-child(even){background:var(--paper-tint)}
.cg-page table.tbl td.num,
.cg-page table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cg-page table.tbl td a{font-weight:700}

/* FAQ */
.cg-page .faq details{border-bottom:1px solid var(--line);padding:2px 0}
.cg-page .faq summary{
  cursor:pointer;list-style:none;padding:16px 32px 16px 0;
  font-weight:700;font-size:17px;color:var(--navy);position:relative;font-family:'Montserrat',sans-serif;
}
.cg-page .faq summary::-webkit-details-marker{display:none}
.cg-page .faq summary::after{content:"+";position:absolute;right:2px;top:13px;font-size:22px;font-weight:400;color:var(--ink-faint)}
.cg-page .faq details[open] summary::after{content:"\2013"}
.cg-page .faq details p{margin:0 0 16px;color:var(--ink-soft);font-size:16.5px}

/* Sources */
.cg-page .sources ul{margin:0;padding:0;list-style:none}
.cg-page .sources li{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--ink-soft)}
.cg-page .sources li a{font-weight:700}

.cg-page .blocklabel{font-weight:700;font-size:24px;color:var(--navy);margin:56px 0 10px}

/* download band */
.cg-page .download{margin:48px 0 8px;padding:26px 28px;background:var(--navy);border-radius:12px;color:#fff}
.cg-page .download h3{margin:0 0 6px;font-weight:700;font-size:21px;color:#fff}
.cg-page .download p{margin:0 0 18px;color:#c9d9f4;font-size:15.5px}
.cg-page .download .btns{display:flex;gap:12px;flex-wrap:wrap}
.cg-page .download .btn{display:inline-block;padding:12px 22px;border:0;border-radius:8px;font-weight:700;font-size:15px;font-family:'Montserrat',sans-serif;cursor:pointer;line-height:1.2}
.cg-page .download .btn--primary{background:var(--mint);color:var(--navy)}
.cg-page .download .btn--primary:hover{filter:brightness(.96)}
.cg-page .download .btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.cg-page .download .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- Gate overlay (preserved hooks, minimal restyle) ---------- */
.cg-page .cg-gate{
  position:fixed;inset:0;z-index:1000;
  background:rgba(6,14,38,.72);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
}
.cg-page .cg-gate[hidden]{display:none}
.cg-page .cg-gate-card{
  background:var(--paper);border-radius:14px;
  max-width:460px;width:100%;
  padding:32px 30px;
  box-shadow:0 24px 60px rgba(0,16,82,.35);
  margin:auto;position:relative;
}
.cg-page .cg-gate-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:8px;
  color:var(--ink-soft);cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.cg-page .cg-gate-close:hover{background:rgba(6,14,38,.06);color:var(--navy)}
.cg-page .cg-gate-close:focus{outline:none;box-shadow:0 0 0 3px rgba(23,99,198,.18)}
.cg-page .cg-gate-close svg{display:block}
.cg-page .cg-gate-card .cg-eyebrow2{
  display:block;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.cg-page .cg-gate-card h2{font-family:'Montserrat',sans-serif;font-weight:700;font-size:24px;color:var(--navy);margin:0 0 10px}
.cg-page .cg-usp{color:var(--ink-soft);font-size:15.5px;margin:0 0 16px}
.cg-page .cg-gate-bullets{margin:0 0 20px;padding:0 0 0 20px;color:var(--ink-soft);font-size:15px}
.cg-page .cg-gate-bullets li{margin:0 0 6px}
.cg-page .cg-field-row{display:flex;gap:12px}
.cg-page .cg-field-row .cg-field{flex:1}
.cg-page .cg-field{margin:0 0 14px}
.cg-page .cg-field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin:0 0 6px;font-family:'Montserrat',sans-serif}
.cg-page .cg-field input{
  width:100%;padding:11px 13px;font-size:15px;font-family:'Sen',sans-serif;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;
}
.cg-page .cg-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,99,198,.15)}
.cg-page .cg-phone-warn{color:#a06a00;font-size:13px;margin:-6px 0 10px;min-height:0}
.cg-page .cg-phone-warn:empty{margin:0}
.cg-page .cg-err{color:#c0392b;font-size:14px;margin:0 0 10px;min-height:0}
.cg-page .cg-err:empty{margin:0}
.cg-page .cg-gate-submit{
  width:100%;padding:13px 20px;border:0;border-radius:8px;cursor:pointer;
  background:var(--mint);color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;
}
.cg-page .cg-gate-submit:hover{filter:brightness(.96)}
.cg-page .cg-consent{color:var(--ink-faint);font-size:12.5px;margin:12px 0 0;line-height:1.5}

/* Wide screens: float TOC into left gutter */
@media (min-width:1080px){
  .cg-page .shell{
    max-width:1120px;
    display:grid;
    grid-template-columns:236px minmax(0,var(--measure));
    justify-content:center;gap:64px;align-items:start;
  }
  .cg-page .article{margin:0}
  .cg-page .toc{position:sticky;top:32px;margin:0}
  .cg-page .mast{max-width:1120px;padding-left:calc(236px + 64px + 24px);padding-right:24px}
  .cg-page .cg-crumbs{max-width:1120px;padding-left:calc(236px + 64px + 24px);padding-right:24px}
  .cg-page .mast > *{max-width:var(--measure)}
  .cg-page .mast h1{max-width:16ch}
}

@media (max-width:640px){
  .cg-page{font-size:17px;line-height:1.65}
  .cg-page .mast{padding:40px 20px 0}
  .cg-page .cg-crumbs{padding:22px 20px 0;font-size:12px;gap:6px}
  .cg-page .mast h1{font-size:30px;max-width:none}
  .cg-page .mast .standfirst{font-size:18px}
  .cg-page .shell{padding:0 20px 64px}
  .cg-page .article h2{font-size:23px;margin:40px 0 12px}
  .cg-page .article .lead{font-size:18px}
  .cg-page .blocklabel{font-size:21px}
  .cg-page .cg-field-row{flex-direction:column;gap:0}
}