/* veterans.nobledesktop.com hub. Layers on /styles.css; every token here comes
   from that file's :root. Shared by the hub, the generated program pages, and
   the enroll page. */

.brand svg { height: 26px; width: auto; color: var(--navy); display: block; }
.nav.scrolled { box-shadow: 0 2px 16px rgba(8,28,64,.13); }

/* Re-brand away from GSUSA. styles.css line ~884 makes .btn-primary GSUSA red
   and the nav rule paints a 4px --gsusa-red underline; both were decided for
   explore/agency.graduateschool.edu and are correct there. This is a Noble
   Desktop property served from the same stylesheet, so a red CTA under the
   Noble wordmark reads as another company's brand. Scope it back to Noble
   blue. If styles.css ever re-themes, delete this block rather than fighting it. */
.nav { border-bottom: 4px solid var(--accent); }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-2); color: #fff; }

/* ------------------------------------------------------------ mobile call bar */
.callbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none; gap: 1px; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; font-size: 15px; font-weight: 750; text-decoration: none; }
.callbar .cb-call { background: #fff; color: var(--navy); }
.callbar .cb-form { background: var(--accent); color: #fff; }
@media (max-width: 780px) { .callbar { display: flex; } .ft { padding-bottom: 96px; } }

/* ------------------------------------------------------------------ shared */
.chaps { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 16px; }
.chap { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 20px 20px 18px; }
.chap-n { font-size: 12.5px; font-weight: 750; color: var(--subtle); }
.chap-t { font-size: 17px; font-weight: 750; color: var(--navy); margin: 4px 0 9px; line-height: 1.3; }
.chap-d { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; }

.steps { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.step { border-top: 3px solid var(--line); padding-top: 16px; }
.step-n { font-size: 12.5px; font-weight: 800; color: var(--subtle); letter-spacing: .04em; }
.step-t { font-size: 16px; font-weight: 750; color: var(--navy); margin: 6px 0 8px; line-height: 1.35; }
.step-d { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; }

.facts { margin-top: 24px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fact { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact:nth-child(odd) { background: var(--panel); }
.fact-k { font-size: 14.5px; font-weight: 750; color: var(--navy); }
.fact-v { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) { .fact { grid-template-columns: 1fr; gap: 5px; } }

.legalblock { margin-top: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px 22px; }
.legalblock p { font-size: 12.5px; color: var(--subtle); line-height: 1.65; margin: 0 0 10px; max-width: 92ch; }
.legalblock p:last-child { margin-bottom: 0; }
.legalblock strong { color: var(--navy); }

/* --------------------------------------------------------------- catalog */
.catbar { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.catsearch { flex: 1 1 260px; min-width: 0; position: relative; }
/* 16px, not 15: iOS Safari auto-zooms the page when a sub-16px text control is
   focused. Same rule as the enroll inputs below. */
.catsearch input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; padding: 11px 13px 11px 38px; }
.catsearch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.catsearch svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--subtle); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 15px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.catcount { font-size: 13.5px; color: var(--muted); margin: 18px 0 0; }

.cgrid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ccard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 20px 20px 18px; box-shadow: 0 1px 2px rgba(4,48,90,.05), 0 6px 16px rgba(4,48,90,.06); }
.cc-track { font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.cc-name { font-size: 17.5px; font-weight: 750; line-height: 1.3; margin: 6px 0 0; }
.cc-name a { color: var(--navy); text-decoration: none; }
.cc-name a:hover { text-decoration: underline; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 9px; font-size: 13px; font-weight: 650; color: var(--subtle); }
.cc-meta span:not(:last-child)::after { content: "\00b7"; margin-left: 8px; color: var(--line); }
.cc-desc { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
.cc-next { margin-top: 14px; font-size: 13px; color: var(--ink); }
.cc-next strong { color: var(--navy); }
.cc-none { margin-top: 14px; font-size: 13px; color: var(--subtle); }
.cc-go { margin-top: auto; padding-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.cc-go .btn { padding: 9px 16px; font-size: 13.5px; }
.cempty { margin-top: 24px; padding: 30px; border: 1px dashed var(--border-strong); border-radius: 10px; text-align: center; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------- program pages */
.phead { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 46px 0 40px; }
.phead h1 { font-size: clamp(27px, 3.6vw, 40px); font-weight: 800; max-width: 22ch; margin: 0; }
.phead-sub { font-size: clamp(15px, 1.4vw, 17.5px); color: rgba(255,255,255,.88); max-width: 74ch; margin: 16px 0 24px; line-height: 1.6; }
.phead-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.phead-note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 74ch; }
.phead-note a { color: #fff; text-decoration: underline; }
.crumb { margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.78); }
.crumb a { color: #fff; text-decoration: underline; }

.pgrid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.95fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr; gap: 30px; } }
.plist { margin: 18px 0 0; padding-left: 20px; }
.plist li { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
h2.mt { margin-top: 34px; }
.pcov { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px 18px; }
.pcov li { font-size: 14px; color: var(--ink); line-height: 1.5; padding-left: 18px; position: relative; }
.pcov li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.pside { position: sticky; top: 84px; }
@media (max-width: 900px) { .pside { position: static; } }
.pcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 22px; box-shadow: 0 8px 28px rgba(8,28,64,.07); }
.pfacts { margin: 0; }
.pfacts > div { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pfacts dt { font-size: 12.5px; font-weight: 750; color: var(--subtle); }
.pfacts dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 650; }
.pinc-h { margin: 16px 0 6px; font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); }
.pinc { margin: 0; padding-left: 18px; }
.pinc li { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 4px; }
.pcard-cta { display: block; text-align: center; margin-top: 18px; }
.pcard-note { margin: 12px 0 0; font-size: 12.5px; color: var(--subtle); line-height: 1.55; text-align: center; }

.dt { width: 100%; margin-top: 20px; border-collapse: collapse; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dt th { text-align: left; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); background: var(--panel); padding: 11px 14px; border-bottom: 1px solid var(--line); }
.dt td { font-size: 14px; color: var(--ink); padding: 13px 14px; border-bottom: 1px solid var(--line); }
.dt tr:last-child td { border-bottom: 0; }
.dt-na { color: var(--subtle); }
.dt-go { text-align: right; white-space: nowrap; }
.dt-go a { font-weight: 700; font-size: 13.5px; }
@media (max-width: 720px) {
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  .dt thead { display: none; }
  .dt tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .dt td { border: 0; padding: 4px 14px; }
  .dt-go { text-align: left; padding-bottom: 12px; }
}
.nodates { margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 18px 20px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------ enroll form */
.eform { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 46px; align-items: start; }
@media (max-width: 940px) { .eform { grid-template-columns: 1fr; gap: 28px; } }
.ecard { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 26px; box-shadow: 0 8px 28px rgba(8,28,64,.07); }
.erow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .erow { grid-template-columns: 1fr; } }
.efield { display: block; margin-bottom: 15px; }
.elab { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.ereq { color: var(--red); }
.ehint { display: block; font-size: 12.5px; font-weight: 400; color: var(--subtle); margin-top: 3px; line-height: 1.5; }
/* 16px, not 15: iOS Safari auto-zooms the whole page when a field with a
   smaller font is focused, which throws the layout off mid-form. Same fix as
   the VDCI page. */
.ein, .esel, .eta { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 7px; padding: 10px 12px; }
.eta { min-height: 80px; resize: vertical; }
.ein:focus, .esel:focus, .eta:focus, .efile input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ein[aria-invalid="true"], .esel[aria-invalid="true"] { border-color: var(--red); }
.efile { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 14px; background: var(--panel); }
.efile input { font-size: 14px; width: 100%; }
.efile-note { margin: 8px 0 0; font-size: 12.5px; color: var(--subtle); line-height: 1.55; }
.efile-name { margin: 8px 0 0; font-size: 13px; color: var(--navy); font-weight: 650; }
.ehp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.econsent { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 16px; }
.eresult { font-size: 14px; line-height: 1.55; margin: 12px 0 0; }
.eresult.err { color: var(--red); }
.edone { text-align: center; padding: 30px 10px; }
.edone-t { font-size: 20px; font-weight: 750; color: var(--navy); margin: 0 0 10px; }
.edone-d { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0; }
.eside h2 { margin-top: 0; }
.esum { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 18px 20px; margin-top: 20px; }
.esum-h { font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); margin: 0 0 10px; }
.esum dl { margin: 0; }
.esum dl > div { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; padding: 6px 0; }
.esum dt { font-size: 13px; color: var(--subtle); font-weight: 650; }
.esum dd { margin: 0; font-size: 13.5px; color: var(--navy); font-weight: 700; }
.erep { margin-top: 20px; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.erep strong { color: var(--navy); }

/* Module list on program pages: numbered courses with their hours. */
.pmods { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: mod; border-top: 1px solid var(--line); }
.pmods li { counter-increment: mod; display: flex; align-items: baseline; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.pmods li::before { content: counter(mod); flex: none; width: 22px; font-size: 12px; font-weight: 750; color: var(--subtle); }
.pmods li span { flex: 1; min-width: 0; }
.pmods li em { flex: none; font-style: normal; font-size: 13px; font-weight: 650; color: var(--subtle); white-space: nowrap; }

/* Program hero artwork */
.phead-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .phead-grid { grid-template-columns: 1fr; gap: 26px; } .phead-art { max-width: 460px; } }
.phead-copy { min-width: 0; }
.phead-art { margin: 0; min-width: 0; }
.phead-art img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.34); aspect-ratio: 16/9; object-fit: cover; background: #0b2547; }
.phead-art figcaption { margin-top: 9px; font-size: 12px; color: rgba(255,255,255,.7); }

/* Reviews */
.revs { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.rev { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 20px 22px; }
.rev blockquote { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.62; }
.rev blockquote::before { content: "\201C"; color: var(--accent); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 3px; }
.rev figcaption { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--navy); }
.rev figcaption span { font-weight: 600; color: var(--subtle); }

/* Card artwork on the hub grid */
.cc-art { display: block; margin: -20px -20px 14px; border-bottom: 1px solid var(--line); background: #f2f6fb; }
.cc-art img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px 12px 0 0; }
.cc-rev { margin-top: 10px; font-size: 12.5px; font-weight: 650; color: var(--accent); }

/* Compact legal line + disclosures dialog. The full small print lives one click
   away so it stops swallowing the bottom of every page, while the trademark and
   no-endorsement sentences stay in plain view above it and in the footer. */
.legal-line { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--subtle); line-height: 1.65; max-width: 92ch; }
.legal-line strong { color: var(--navy); }
.legal-open { font: inherit; font-size: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.legal-open:hover { color: var(--accent-2); }
.legal-dlg { border: 0; border-radius: 14px; padding: 0; max-width: 720px; width: calc(100% - 32px); box-shadow: 0 24px 70px rgba(4,20,44,.4); }
.legal-dlg::backdrop { background: rgba(4,20,44,.6); }
.legal-dlg-in { padding: 26px 30px 30px; }
.legal-dlg-top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.legal-dlg-top h2 { margin: 0; font-size: 21px; color: var(--navy); }
.legal-x { margin-left: auto; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--subtle); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.legal-x:hover { background: var(--panel); color: var(--navy); }
.legal-dlg p { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 14px 0 0; }
.legal-dlg strong { color: var(--navy); }

/* Footer */
.vft { padding-top: 46px; }
.vft-top { display: grid; grid-template-columns: 1.7fr 1fr 1.15fr 1.25fr; gap: 34px 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.16); }
@media (max-width: 900px) { .vft-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vft-top { grid-template-columns: 1fr; gap: 26px; } }
.vft-name { font-size: 15px; font-weight: 750; color: #fff; margin: 0 0 10px; }
.vft-brand p { margin: 0 0 10px; max-width: 46ch; }
.vft-verify a { color: #fff; text-decoration: underline; font-weight: 650; }
.vft-h2 { margin-top: 20px; }
.vft-list { list-style: none; margin: 0; padding: 0; }
.vft-list li { margin-bottom: 8px; line-height: 1.55; }
.vft-list a { color: rgba(255,255,255,.78); text-decoration: none; }
.vft-list a:hover { color: #fff; text-decoration: underline; }
.vft-legal { padding-top: 22px; }
.vft-legal p { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.65; margin: 0 0 12px; max-width: 104ch; }
.vft-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.vft-links a, .vft-links .legal-open { color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 650; text-decoration: none; }
.vft-links a:hover, .vft-links .legal-open:hover { color: #fff; text-decoration: underline; }
.vft-links .legal-open { text-decoration: none; }
.vft-links span { font-size: 12.5px; }

/* "This program includes" grid, mirroring the nobledesktop.com class page */
.incs { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.inc { border-left: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 18px 20px; }
.inc-t { margin: 0 0 6px; font-size: 15px; font-weight: 750; color: var(--navy); line-height: 1.3; }
.inc-d { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ---------------------------------------------------- enroll, single column */
.ehead { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 40px 0 36px; }
.ehead h1 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; margin: 0; }
.ehead p { font-size: 16px; color: rgba(255,255,255,.86); line-height: 1.6; margin: 12px 0 0; max-width: 60ch; }
.ewrap { max-width: 660px; }
.erule { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.epick { margin: -8px 0 16px; font-size: 13px; font-weight: 650; color: var(--subtle); }
.echeck { display: flex; gap: 10px; align-items: center; margin: 18px 0 4px; font-size: 14.5px; font-weight: 650; color: var(--navy); cursor: pointer; }
.echeck input { width: 18px; height: 18px; flex: none; }
.esubmit { width: 100%; margin-top: 18px; }
.efine { margin: 14px 0 0; font-size: 12.5px; color: var(--subtle); line-height: 1.6; }
.ealt { margin: 20px 0 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.efile-in { padding: 8px 10px; }

/* Optional fields stay folded so the form reads as six questions, not ten. */
.emore { margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.emore summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 14.5px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.emore summary::-webkit-details-marker { display: none; }
.emore summary::after { content: "+"; margin-left: auto; font-size: 19px; font-weight: 400; color: var(--subtle); }
.emore[open] summary::after { content: "\2212"; }
.emore summary span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle); }
.emore-in { padding: 4px 16px 14px; }
.emore-in .efield:last-child { margin-bottom: 0; }

/* Third-party awards. Issuer and year sit with the title so each one reads as
   a citation rather than our own superlative. */
.aw-h { font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); margin: 30px 0 0; }
.awards { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; }
.awards li { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.aw-n { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.aw-s { font-size: 12px; font-weight: 650; color: var(--subtle); }

/* Learn the Skills Guarantee */
.guar { margin-top: 26px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); padding: 18px 20px; }
.guar-t { margin: 0 0 6px; font-size: 15.5px; font-weight: 750; color: var(--navy); }
.guar-d { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 88ch; }

/* ------------------------------------------------------- design refinements */

/* Card CTA hierarchy. Two equal buttons per card put 44 competing calls to
   action on the hub, and the second one led to the same place the card title
   already links to. Primary button + text link reads as one obvious action. */
.cc-more { align-self: stretch; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.cc-more:hover { text-decoration: underline; }
.cc-go { align-items: center; }

/* Progressive disclosure for the catalog. */
.more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.more-btn { background: #fff; color: var(--navy); border: 1px solid var(--border-strong); }
.more-btn:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }

/* One card system. These blocks had drifted to four different radii and three
   border treatments, which reads as several designs sharing a page. */
.ccard, .rev, .chap, .inc, .pcard, .vform-card, .ecard, .awards li { border-radius: 10px; }
.ccard { box-shadow: 0 1px 2px rgba(4,48,90,.04); transition: box-shadow .15s ease, border-color .15s ease; }
.ccard:hover { border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(4,48,90,.10); }
@media (prefers-reduced-motion: reduce) { .ccard { transition: none; } }

/* Section rhythm: give every section the same vertical breathing room so the
   page reads as a sequence rather than a stack of differently-sized blocks. */
.sec { padding: 60px 0; }
.sec h2 { margin-top: 0; }

/* ------------------------------------------------- device and platform fixes */

/* The util-bar search is 13px in styles.css, which makes iOS Safari zoom the
   whole page when it is focused. Scoped to the widths where the search is a
   full-row control; the placeholder color also lifts from 4.24:1 to 5.25:1. */
@media (max-width: 900px) { #site-search { font-size: 16px; } }
#site-search::placeholder { color: #5c6e80; }

/* styles.css paints the focus ring accent-2, which is 2.5:1 against the navy
   .phead/.ehead hero bands. Mirror its own white-ring pattern for .hero/.ft. */
.phead :focus-visible, .ehead :focus-visible { outline-color: #fff; }

/* The nav collapses to a hamburger under 1300px in styles.css, a breakpoint
   tuned for the agency site's much longer link row. This hub has at most seven
   short links, so almost every laptop was getting a hamburger and no visible
   section nav. Show the links from 981px up; below that the hamburger stands. */
@media (min-width: 981px) and (max-width: 1300px) {
  .nav-links { display: flex; width: auto; flex-direction: row; order: 0; }
  .nav-toggle { display: none; }
  .nav-cta { margin-left: 6px; }
}

/* On phones the chat widget bubble (fixed bottom-right, injected style) lands
   on top of the callbar and covers the Start enrollment button. Lift it above.
   The widget's own <style> is injected later in the cascade, so !important. */
@media (max-width: 780px) {
  #chatbot-widget-bubble { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

/* The nobledesktop.com util link has no icon, so once .util-txt is hidden on
   small screens it is an invisible 24px tap target that silently sends paid
   traffic to the main site. */
@media (max-width: 640px) {
  .util-links a[href="https://www.nobledesktop.com"] { display: none; }
}

/* The catalog grid, chips, and count are filled by script after parse. Reserve
   their space so the fill does not shove the sections below mid-read (CLS). */
.cgrid:empty { min-height: 430px; }
.chips:empty { min-height: 35px; }
.catcount { min-height: 20px; }

/* At phone width the schedule table stacks and loses its header row, leaving
   two bare dates with nothing saying which is the end date. The generator now
   stamps data-label on each cell; render it as an inline label. */
@media (max-width: 720px) {
  .dt td[data-label]::before { content: attr(data-label) ": "; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); margin-right: 6px; }
}

/* ---------------------------------------------------------------------------
   Program page: mirroring the nobledesktop.com course page
   ------------------------------------------------------------------------ */

/* Sticky in-page nav. The real course page keeps one down the side; at these
   widths a horizontal strip under the header carries the same information
   without stealing a column from the content. */
.ipn { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.ipn ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ipn li { flex: 0 0 auto; }
.ipn a { display: block; padding: 13px 12px; font-size: 13.5px; font-weight: 650; color: var(--subtle); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.ipn a:hover, .ipn a:focus-visible { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 720px) { .ipn a { padding: 12px 10px; font-size: 13px; } }

/* "This program includes" was a 4-column card grid that ran three rows deep and
   pushed everything below it off the first two screens. Same content as a
   two-column list of sentences: roughly a third of the height. */
.incl { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.incl li { font-size: 14.5px; line-height: 1.55; color: var(--subtle); padding-left: 18px; position: relative; }
.incl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.incl strong { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) { .incl { grid-template-columns: 1fr; gap: 9px; } }

/* Schedule header: length, tuition and the perks, so the section answers
   "what am I signing up for" before the date table, the way theirs does. */
.schead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 32px; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.schead-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; }
.schead-facts dt { font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.schead-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.perks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.perks li { font-size: 12.5px; font-weight: 650; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
@media (max-width: 860px) { .schead { grid-template-columns: 1fr; } }

/* Chip rows: electives, instructors, skills covered, career outcomes. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip { font-size: 13.5px; font-weight: 650; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; }
.chip span { color: var(--subtle); font-weight: 600; }
.chips-lg .chip { font-size: 14.5px; padding: 9px 15px; }
.sub-h { margin: 26px 0 0; font-size: 16px; font-weight: 750; color: var(--ink); }

/* Project examples, lifted from the same images the real course page shows. */
.projs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.proj { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.proj img { display: block; width: 100%; height: 172px; object-fit: cover; background: var(--panel); }
.proj figcaption { padding: 12px 14px 14px; }
.proj figcaption strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.proj figcaption span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--subtle); }
@media (max-width: 900px) { .projs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projs { grid-template-columns: 1fr; } .proj img { height: 200px; } }

/* Anchor targets must clear the sticky in-page nav, or a jump lands with the
   heading hidden underneath it. */
[id="included-courses"], [id="dates"], [id="reviews"], [id="tuition"], [id="benefits"],
[id="instructors"], [id="what-youll-learn"], [id="project-examples"], [id="skills"],
[id="careers"], [id="faq"], [id="related"] { scroll-margin-top: 64px; }

/* ===========================================================================
   Noble Desktop course-page parity
   ---------------------------------------------------------------------------
   Values below are lifted from the computed styles of
   www.nobledesktop.com/certificates/ai-software-engineering-bootcamp so the
   veterans program pages read as the same product, not a lookalike:

     hero gradient  linear-gradient(150deg, #170f2e, #2e419e)
     hero pills     rgba(0,0,0,.4), 4px radius
     primary CTA    #2554e3, 8px radius
     h1             41.5px / 600      h2  28.8px / 700
     side nav       sticky, 240px column

   Scoped to the program pages so the GSUSA-branded shared styles.css is
   untouched for agency.graduateschool.edu and the rest.
   ======================================================================== */
body[data-vet-page="veterans-noble"] {
  --nd-blue: #2554e3;
  --nd-hero-a: #170f2e;
  --nd-hero-b: #2e419e;
}

/* Hero: their gradient and type scale, keeping our crumb + VA note. */
body[data-vet-page="veterans-noble"] .phead {
  background: linear-gradient(150deg, var(--nd-hero-a) 0%, var(--nd-hero-b) 100%);
  padding: 40px 0 44px;
}
body[data-vet-page="veterans-noble"] .phead h1 {
  font-size: clamp(29px, 3.8vw, 41.5px); font-weight: 600; line-height: 1.2; max-width: 20ch;
}
body[data-vet-page="veterans-noble"] .phead-sub { font-size: clamp(15.5px, 1.45vw, 18px); margin-top: 18px; }

/* The two quick-fact pills under the h1. */
.hpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.hpills li { background: rgba(0,0,0,.4); color: #fff; border-radius: 4px; padding: 4px 10px; font-size: 14.5px; font-weight: 600; }

/* Their body headings are larger and blacker than ours were. */
body[data-vet-page="veterans-noble"] .sec h2 { font-size: clamp(22px, 2.4vw, 28.8px); font-weight: 700; }

/* Sidebar layout: sticky 240px rail with the Enroll CTA above the in-page nav,
   replacing the horizontal strip. This is the single biggest visual difference
   between our page and theirs. */
.pglayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
.pgnav { position: sticky; top: 14px; }
.pgnav-cta { display: block; width: 100%; text-align: center; background: var(--nd-blue); color: #fff; border-radius: 8px; padding: 11px 20px; font-size: 17px; font-weight: 650; text-decoration: none; }
.pgnav-cta:hover, .pgnav-cta:focus-visible { background: #1c44c4; color: #fff; }
.pgnav ul { list-style: none; margin: 18px 0 0; padding: 0; border-left: 1px solid var(--line); }
.pgnav li a { display: block; padding: 7px 16px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.pgnav li a:hover, .pgnav li a:focus-visible { color: var(--nd-blue); border-left-color: var(--nd-blue); background: var(--panel); }
.pgmain { min-width: 0; }
.pgmain > section:first-child { padding-top: 0; }
@media (max-width: 980px) {
  .pglayout { grid-template-columns: 1fr; gap: 0; }
  .pgnav { position: static; margin-bottom: 22px; }
  .pgnav ul { display: flex; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); margin-top: 14px; }
  .pgnav li a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .pgnav li a:hover { border-left: 0; border-bottom-color: var(--nd-blue); }
}

/* "What You'll Build": their portfolio-project showcase, which several
   programs have INSTEAD of Project Examples. */
.builds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.build { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.build img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--panel); }
.build-b { padding: 14px 16px 16px; }
.build-e { display: inline-block; font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--nd-blue); background: #eef2fe; border-radius: 4px; padding: 3px 8px; }
.build-t { margin: 9px 0 0; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.build-d { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--subtle); }
.build-m { margin: 9px 0 0; font-size: 12.5px; font-weight: 650; color: var(--nd-blue); }
@media (max-width: 700px) { .builds { grid-template-columns: 1fr; } }

/* Instructor cards with the avatar and role line the real page shows. */
.insts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; list-style: none; padding: 0; }
.inst { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.inst img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--panel); }
.inst-n { font-size: 15px; font-weight: 700; color: var(--ink); }
.inst-r { font-size: 12.5px; line-height: 1.45; color: var(--subtle); margin-top: 2px; }
@media (max-width: 860px) { .insts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .insts { grid-template-columns: 1fr; } }

/* Self-paced option callout. */
.spo { margin-top: 20px; border: 1px solid var(--line); border-left: 3px solid var(--nd-blue); border-radius: 10px; padding: 16px 18px; background: var(--panel); }
.spo p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

/* Icons on the includes list, matching the real course page. The bullet dot is
   dropped where an icon renders so the two never stack. */
.incl li { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; }
.incl li::before { display: none; }
.inc-i { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; color: var(--nd-blue); }
.incl li > span { min-width: 0; }

/* ---------------------------------------------------------------------------
   Course-page formatting fixes
   ------------------------------------------------------------------------ */

/* The site header is position:sticky and 75px tall. The side rail was sticking
   at top:14px, so on scroll it slid underneath the header and the Enroll
   button disappeared behind it. Park the rail below the header instead, and
   give anchor targets the same clearance so a jump does not land with the
   heading hidden under both. */
.pgnav { top: 89px; }
[id="benefits"], [id="what-youll-build"], [id="included-courses"], [id="self-paced-option"],
[id="dates"], [id="reviews"], [id="tuition"], [id="instructors"], [id="what-youll-learn"],
[id="project-examples"], [id="skills"], [id="careers"], [id="faq"], [id="related"] {
  scroll-margin-top: 100px;
}

/* These are UI screenshots, not photography, and they arrive at assorted
   aspect ratios (1.51 to 1.68 on this program alone). Forcing them into 16/9
   with object-fit:cover was slicing 6-18% off the top and bottom, which on a
   screenshot cuts off the very thing it is meant to show: one card lost its
   header bar and read as a dark band. Fit the whole frame instead and let the
   panel colour letterbox the difference. */
.build img, .proj img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: contain;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.proj img { height: auto; }

/* Card bodies were free to differ in height, leaving the eyebrow and title
   sitting at different heights across a row. Pin the grid so rows align. */
.builds > .build, .projs > .proj { display: flex; flex-direction: column; }
.build-b, .proj figcaption { flex: 1 1 auto; }

/* Enrollment page: same gradient as every other page, and the form no longer
   floats in empty margins. */
body[data-vet-page="veterans-noble-enroll"] {
  --nd-blue: #2554e3; --nd-hero-a: #170f2e; --nd-hero-b: #2e419e;
}
body[data-vet-page="veterans-noble-enroll"] .ehead {
  background: linear-gradient(150deg, var(--nd-hero-a) 0%, var(--nd-hero-b) 100%);
}
body[data-vet-page="veterans-noble-enroll"] .ehead h1 { font-weight: 600; }
body[data-vet-page="veterans-noble-enroll"] .ewrap { max-width: 1100px; }
.egrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: 32px; align-items: start; }
.eside { display: grid; gap: 16px; position: sticky; top: 89px; }
.ecard-quiet { padding: 18px 20px; box-shadow: none; background: var(--panel); }
/* .sec h2 in the shared styles.css is (0,1,1) and was winning over a bare
   .eside-h (0,1,0), rendering these rail headings at 32px. Scope to the rail so
   the specificity matches without touching the shared sheet. */
.eside .eside-h { margin: 0 0 8px; font-size: 15.5px; font-weight: 750; color: var(--ink); max-width: none; }
.eside-p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--subtle); }
.eside-p:last-child { margin-bottom: 0; }
.esteps { margin: 0; padding-left: 18px; display: grid; gap: 9px; }
.esteps li { font-size: 13.5px; line-height: 1.55; color: var(--subtle); }
.esteps strong { color: var(--ink); }
@media (max-width: 900px) {
  .egrid { grid-template-columns: 1fr; }
  .eside { position: static; }
}