/* ============================================================================
   Zambezi Trade Capital — the Chartered Financial Analyst programme page
   ----------------------------------------------------------------------------
   A third page in the same system, not a third design. It loads tokens.css,
   base.css, chrome.css and main.css exactly as the landing page does, and
   reuses main.css wholesale for its section rhythm: .section, .section--sunk,
   .kicker, .section__intro, .section__lead, .statement and .tags all come from
   there and are not restated here.

   What this file adds is the small set of components the programme needs and
   the rest of the site has no use for: the page hero and its three-year
   progression band, the study-to-practice mapping, the target tiles, the
   memorandum framework, the feedback loop and the career timeline.

   Two rules, inherited from the rest of the site:

     - No colour is invented here. Every value is a token from tokens.css.
       --gold-light and --teal-bright fail AA for small text and are used only
       as graphics — rules, borders, arrowheads. Figures and labels are set in
       --teal, --gold or the inks.
     - Layout is fluid. There are no fixed heights and the breakpoints are in
       rem, so the page reflows from 320px up without a hero-style container
       query. Nothing here shares a unit with styles/hero.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------
   Deliberately not full-viewport. The landing page owns the full composition
   reproduced from docs/mission.png; this is a document hero in the same family
   as .doc-hero — mark, kicker, title, strapline — with the three-year
   progression band beneath it, because the progression *is* the argument.
   --------------------------------------------------------------------------- */

.cfa-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-3xl) + 2rem) 0 var(--space-xl);
  border-bottom: 1px solid var(--rule-soft);
}

/* The same circuit language as the landing hero — orthogonal runs, 45-degree
   elbows, filled and hollow nodes — at a fraction of the weight, and faded out
   before it reaches the text so it can never compete with it. */
.cfa-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cfa-hero__circuit {
  position: absolute;
  inset: 0 0 auto auto;
  width: min(34%, 24rem);
  height: 100%;
  opacity: 0.55;
  mask-image: linear-gradient(to left, rgb(0 0 0 / 1) 30%, rgb(0 0 0 / 0) 100%);
}

@media (max-width: 48rem) {
  /* On a phone the artwork would sit under the title rather than beside it. */
  .cfa-hero__circuit {
    display: none;
  }
}

.cfa-hero__inner,
.cfa-hero__progress,
.cfa-jump {
  position: relative; /* above .cfa-hero__bg */
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The mark sits beside the title block, not centred on it: the text column is
   four elements tall here, and a mark centred on all four floats level with the
   middle of the paragraph rather than reading as part of the title. */
.cfa-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
}

.cfa-hero__mark {
  flex: none;
  width: clamp(4.5rem, 9vw, 8rem);
  height: auto;
}

.cfa-hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.cfa-hero h1 {
  max-width: 20ch;
  margin-top: var(--space-2xs);
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.cfa-hero__strap {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--teal);
}

.cfa-hero__lead {
  max-width: var(--measure);
  margin-top: var(--space-s);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-body);
}

@media (max-width: 40rem) {
  .cfa-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
}

/* --- The three-year progression ------------------------------------------
   Three stages with an arrow between them: the same device the landing page
   uses for the transaction sequence (.process), so the two read as one visual
   language rather than two. ------------------------------------------------- */

.cfa-hero__progress {
  margin-top: var(--space-2xl);
}

.cfa-progression {
  display: grid;
  gap: var(--space-l);
  list-style: none;
}

.cfa-progression__stage {
  position: relative;
  padding-top: var(--space-s);
  border-top: 2px solid var(--teal-bright);
}

.cfa-progression__year {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.cfa-progression__stage strong {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.cfa-progression__note {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* The connector. Drawn on the stage that follows it, as in main.css's
   .process, so the row stays a plain three-column grid. */
.cfa-progression__stage + .cfa-progression__stage::before,
.cfa-progression__stage + .cfa-progression__stage::after {
  content: "";
  position: absolute;
  background: none;
}

@media (min-width: 52rem) {
  .cfa-progression {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-2xl);
  }

  .cfa-progression__stage + .cfa-progression__stage::before {
    top: -2px;
    left: calc(-1 * var(--space-2xl));
    width: var(--space-2xl);
    height: 2px;
    background: var(--rule);
  }

  /* The arrowhead: two borders on a rotated box, so it needs no markup. */
  .cfa-progression__stage + .cfa-progression__stage::after {
    top: -0.32rem;
    left: calc(-0.55rem);
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--teal-bright);
    border-right: 2px solid var(--teal-bright);
    rotate: 45deg;
  }
}

/* Stacked, the arrow turns to point down the page instead of across it. */
@media (max-width: 51.99rem) {
  .cfa-progression__stage + .cfa-progression__stage::before {
    top: calc(-1 * var(--space-l));
    left: 1rem;
    width: 2px;
    height: var(--space-l);
    background: var(--rule);
  }

  .cfa-progression__stage + .cfa-progression__stage::after {
    top: calc(-0.5rem);
    left: 0.72rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--teal-bright);
    border-bottom: 2px solid var(--teal-bright);
    rotate: 45deg;
  }
}

/* --- The four verbs, and the caveat under them ---------------------------- */

.cfa-hero__motto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

.cfa-hero__motto span + span::before {
  content: "·";
  margin-right: var(--space-s);
  color: var(--rule);
}

/* The programme is a target progression and says so before anything else on
   the page implies a schedule. Muted, but at the reading size — this is a
   qualification, not decoration. */
.cfa-hero__caveat {
  max-width: var(--measure);
  margin-top: var(--space-m);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --- Jump links -----------------------------------------------------------
   Twelve sections is more than a reader will scroll through speculatively, so
   the page states its own contents once, at the top. Plain anchors: no script
   is involved and none is needed. ------------------------------------------- */

.cfa-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

.cfa-jump a {
  padding: 0.35em 0.9em;
  border: 1px solid var(--border-card);
  border-radius: 100px;
  background: var(--panel);
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--teal);
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.cfa-jump a:hover {
  border-color: var(--border-panel);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Programme philosophy: the study-to-practice mapping
   ---------------------------------------------------------------------------
   A two-column table of correspondences without being a table: on the left the
   curriculum area, on the right the thing it is used for that month. The gold
   rule between the columns is the "applied to" arrow.
   --------------------------------------------------------------------------- */

.cfa-map {
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-map li {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-s) 0;
  border-top: 1px solid var(--rule-soft);
}

.cfa-map li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.cfa-map__from {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--teal);
}

.cfa-map__to {
  color: var(--ink-body);
}

@media (min-width: 46rem) {
  .cfa-map li {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-m);
  }

  .cfa-map__to {
    padding-left: var(--space-m);
    border-left: 2px solid var(--gold-light);
  }
}

/* ---------------------------------------------------------------------------
   A year of the programme
   --------------------------------------------------------------------------- */

.cfa-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.cfa-column h3 {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border-panel);
}

.cfa-list {
  margin-top: var(--space-s);
  list-style: none;
}

.cfa-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.5rem;
  color: var(--ink-body);
}

/* A dash rather than a bullet, in the accent that says which kind of work this
   is: teal for what is studied, gold for what is done on a transaction. */
.cfa-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.7rem;
  height: 2px;
  background: var(--teal-bright);
}

.cfa-list--work li::before {
  background: var(--gold-light);
}

/* --- Targets --------------------------------------------------------------
   Stated as figures because they are meant to be counted, and labelled as
   targets everywhere they appear. The panel carries the note that says so.
   --------------------------------------------------------------------------- */

.cfa-deliverables {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.cfa-deliverables__note {
  max-width: var(--measure);
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

.cfa-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
  list-style: none;
}

.cfa-targets li {
  padding-top: var(--space-s);
  border-top: 2px solid var(--gold-light);
}

.cfa-targets__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
}

.cfa-targets__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-body);
}

/* The rows that carry no figure — a dashboard, a policy change, an examination
   attempt. Full width so they do not read as an empty tile, and never spanning
   a column count the grid may not have. */
.cfa-targets__wide,
.cfa-targets__exam {
  grid-column: 1 / -1;
  border-top-width: 1px;
  border-top-color: var(--rule);
}

.cfa-targets__wide .cfa-targets__label,
.cfa-targets__exam .cfa-targets__label {
  margin-top: 0;
  font-size: var(--step-0);
  color: var(--ink);
}

.cfa-targets__exam {
  border-top-color: var(--gold);
}

/* --- The question each year has to answer --------------------------------- */

.cfa-question {
  max-width: 52rem;
  margin-top: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  border-left: 3px solid var(--gold);
  background: rgb(255 255 255 / 0.6);
}

.cfa-question__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.cfa-question__text {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   The three-year scorecard
   --------------------------------------------------------------------------- */

.cfa-scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-scorecard li {
  padding: var(--space-m);
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--gold-light);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.cfa-scorecard__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal);
}

.cfa-scorecard__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-body);
}

/* The CFA levels are not a count, so the tile takes the full row and its
   figure is set at heading size rather than at figure size. */
.cfa-scorecard__levels {
  grid-column: 1 / -1;
}

.cfa-scorecard__levels .cfa-scorecard__figure {
  font-size: var(--step-2);
  letter-spacing: 0.12em;
}

.cfa-scorecard__levels .cfa-scorecard__label {
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
   The investment memorandum framework
   ---------------------------------------------------------------------------
   Twenty-six headings in the order they are written, grouped into the four
   questions they answer. The numbering is continuous across the groups — the
   <ol start> attributes carry it for assistive technology, and the numerals
   drawn beside each line are aria-hidden so it is never announced twice.
   --------------------------------------------------------------------------- */

.cfa-memo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: start;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.cfa-memo__group {
  padding: var(--space-m);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-m);
  background: var(--panel);
}

.cfa-memo__group h3 {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border-panel);
}

.cfa-memo__list {
  margin-top: var(--space-2xs);
  list-style: none;
}

.cfa-memo__list li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs);
  padding: 0.45rem 0;
  color: var(--ink-body);
}

.cfa-memo__list li + li {
  border-top: 1px solid var(--rule-soft);
}

.cfa-memo__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   The feedback loop
   --------------------------------------------------------------------------- */

.cfa-loop {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-s);
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-loop li {
  position: relative;
  margin-right: 2.4rem;
  padding: 0.55em 1.3em;
  border: 1px solid var(--border-panel);
  border-radius: 100px;
  background: var(--panel);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.cfa-loop li:last-child {
  margin-right: 0;
}

/* Same arrowhead as the progression band, in the margin the item reserves for
   it, so a wrapped row still reads as a continuing sequence. */
.cfa-loop li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1.55rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--teal-bright);
  border-right: 2px solid var(--teal-bright);
  rotate: 45deg;
  translate: 0 -50%;
}

/* Under about 350px only one pill fits per line, and an arrow pointing into the
   right-hand margin then reads as a dangling mark rather than as "next". Below
   that width the sequence turns down the page, as the progression band does. */
@media (max-width: 22rem) {
  .cfa-loop {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1.9rem;
  }

  .cfa-loop li {
    margin-right: 0;
  }

  .cfa-loop li:not(:last-child)::after {
    right: auto;
    left: 1.4rem;
    top: auto;
    bottom: -1.3rem;
    border-top: 0;
    border-bottom: 2px solid var(--teal-bright);
    translate: none;
  }
}

.cfa-loop__note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.cfa-versus {
  margin-top: var(--space-xl);
}

.cfa-versus__table {
  margin-top: var(--space-s);
  overflow-x: auto;
}

.cfa-versus table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}

.cfa-versus th,
.cfa-versus td {
  padding: 0.7em 0.9em 0.7em 0;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

.cfa-versus th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid var(--teal-bright);
}

.cfa-versus td {
  color: var(--ink-body);
}

.cfa-versus td:first-child {
  color: var(--ink);
}

.cfa-versus__note {
  max-width: var(--measure);
  margin-top: var(--space-m);
  color: var(--ink-body);
}

/* ---------------------------------------------------------------------------
   The weekly operating model
   --------------------------------------------------------------------------- */

.cfa-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-week > li {
  padding: var(--space-m);
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--teal-bright);
  border-radius: var(--radius-m);
  background: var(--panel);
}

.cfa-week ul {
  margin-top: var(--space-s);
  list-style: none;
}

.cfa-week ul li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.2rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-body);
}

.cfa-week ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.55rem;
  height: 2px;
  background: var(--gold-light);
}

/* ---------------------------------------------------------------------------
   Research topics
   ---------------------------------------------------------------------------
   The pills are .tags, from main.css. Only the space above them is this
   page's business.
   --------------------------------------------------------------------------- */

.cfa-topics {
  margin-top: var(--space-xl);
}

/* ---------------------------------------------------------------------------
   Professional ethics
   ---------------------------------------------------------------------------
   Ten principles, given room rather than a box each: this section should read
   as plainly as possible.
   --------------------------------------------------------------------------- */

.cfa-ethics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-s) var(--space-xl);
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-ethics li {
  position: relative;
  padding: var(--space-s) 0 var(--space-s) 1.5rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-body);
}

.cfa-ethics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-s) + 0.72em);
  width: 0.7rem;
  height: 2px;
  background: var(--gold);
}

/* ---------------------------------------------------------------------------
   Career progression
   ---------------------------------------------------------------------------
   Four stages, drawn with the same connected-steps device as the transaction
   sequence on the landing page. The last one is dashed: it sits beyond the
   three years and is not part of what the programme sets out to deliver.
   --------------------------------------------------------------------------- */

.cfa-career {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  list-style: none;
}

.cfa-career li {
  position: relative;
  padding-top: var(--space-s);
  border-top: 2px solid var(--teal-bright);
}

/* Scoped through the list so it outranks `.cfa-career li`, which is (0,1,1)
   and would otherwise keep its solid teal rule. */
.cfa-career li.cfa-career__long {
  border-top-style: dashed;
  border-top-color: var(--gold-light);
}

.cfa-career__when {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.cfa-career strong {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.cfa-career__what {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 60rem) {
  .cfa-career {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--space-m);
  }

  .cfa-career li + li::before {
    content: "";
    position: absolute;
    top: -2px;
    left: calc(-1 * var(--space-m));
    width: var(--space-m);
    height: 2px;
    background: var(--rule);
  }
}

/* ---------------------------------------------------------------------------
   Eligibility, and the trademark position
   ---------------------------------------------------------------------------
   The eligibility statement gets the treatment the white paper gives its
   regulatory statement: body weight, full contrast, at the reading size, in a
   bordered panel. It is the block on this page that must not be skimmed past.

   The trademark disclaimer below it is deliberately quieter — the brief calls
   for it to be discreet — but it is still set at the caption size the footer
   uses and in the same ink, not in small print.
   --------------------------------------------------------------------------- */

.cfa-notice {
  max-width: min(var(--page-max), 58rem);
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--border-panel);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.cfa-notice p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-body);
}

.cfa-notice p + p {
  margin-top: var(--space-s);
}

.cfa-disclaimer {
  max-width: min(var(--page-max), 58rem);
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Print
   ---------------------------------------------------------------------------
   styles/print.css handles the chrome and the landing page's hero. These are
   the few rules that are only this page's concern: keep the panels off page
   boundaries and drop the background artwork, which is ink for no information.
   --------------------------------------------------------------------------- */

@media print {
  .cfa-hero {
    padding-top: 0;
    overflow: visible;
  }

  .cfa-hero__bg,
  .cfa-jump {
    display: none;
  }

  .cfa-deliverables,
  .cfa-memo__group,
  .cfa-question,
  .cfa-notice,
  .cfa-scorecard li,
  .cfa-week > li {
    break-inside: avoid;
    box-shadow: none;
  }
}