/* ==================================================================
   Guided — the footer  (LOCAL PREVIEW ONLY)

   It was a black slab carrying an 84px logo and a 60px white headline —
   heavier than anything else on the page, and the only place still
   using the old cream link colour.

   Apple's footer is the quietest thing on the page: the off-white wash,
   12px type, hairline rules, no headline, no lock-up. This does the
   same, and lets the black homework panel stay the single dark moment
   in the whole layout.

   Loaded last; the authored styles are inline, so everything here needs
   !important to land.
   ================================================================== */

footer {
  background: #F5F5F7 !important;
  border-top: 1px solid #D2D2D7 !important;
  padding: 44px 24px 34px !important;
  color: #6E6E73 !important;
}

footer > div {
  gap: 26px !important;
}

/* ---- the mark ---- */

footer img {
  width: 26px !important;
  height: 26px !important;
}

footer > div > div:first-child {
  gap: 10px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid #D2D2D7 !important;
}

footer h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #1D1D1F !important;
}

/* ---- the columns ---- */

footer h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #1D1D1F !important;
  margin-bottom: 2px !important;
}

footer a,
footer span {
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: #6E6E73 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

footer a:hover {
  color: #1D1D1F !important;
  text-decoration: underline !important;
}

footer a:focus-visible {
  outline: 2px solid #0071E3;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- the legal line ---- */

footer > div > span:last-child {
  display: block !important;
  padding-top: 20px !important;
  border-top: 1px solid #D2D2D7 !important;
  font-size: 12px !important;
  color: #86868B !important;
}

@media (max-width: 1024px) {
  footer { padding: 34px 22px 28px !important; }
  footer > div { gap: 22px !important; }
  footer > div > div:nth-child(2) { gap: 24px !important; }
}