/* Flat cream tone instead of a gradient, so the footer reads as a calm
   close to the page rather than another panel in the .statement/.cta/
   .premium-panel/.compare-card.dark/.audience-card:nth-child(3) family. */
.footer { position: relative; background: var(--cream); color: var(--black); padding: 54px 0 28px; }

/* Brand seam bookending the page, echoing .stripe under the header */
.footer:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--orange) 0 45%,var(--teal) 45% 100%); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 35px; }

.footer a { color: var(--black); text-decoration: none; }

/* Footer */
.footer { padding-top: 68px; padding-bottom: 32px; }

.footer-grid { gap: 44px; }

.footer p, .footer a { line-height: 1.6; }

.footer-grid h3 { font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 16px; }

.footer-grid h3 a { color: inherit; }

.footer-grid p a { display: inline-block; padding: 2px 0; }

.footer .small { opacity: .82; }

/* Animated underline on hover, matching AI_Course_Page's footer links:
   a currentColor line grows in from 0 to full width instead of appearing
   instantly. Excludes the logo link (:has(img)), which has no text to
   underline. */
.footer a:not(:has(img)) { background-image: linear-gradient(currentColor,currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; padding-bottom: 2px; }

.footer a { transition: color .2s ease, background-size .25s ease; }

.footer a:hover { color: var(--orange); background-size: 100% 1px; }

/* Replaces the previous inline style="border:0;border-top:1px solid #c3c1bd;..."
   on the <hr> between the link columns and the copyright line. */
.footer-divider { border: 0; border-top: 1px solid rgba(41,41,41,.18); margin: 36px 0 20px; }

/* Social icon row under the logo/tagline. Same specificity as the underline-link
   rules above (.footer a:not(:has(img)) / .footer a:hover) so source order wins
   and the circular icons don't get the animated text-link underline. */
.footer-social { display: flex; gap: 12px; margin-top: 16px; }

.footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(41,41,41,.06); color: var(--black); background-image: none; padding-bottom: 0; }

.footer .footer-social a:hover { background: var(--orange); color: var(--white); }

.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

/* Facebook's official badge (assets/facebook-icon.png) is a complete,
   fixed-color circle+"f" lockup, unlike Instagram's bare glyph - it can't
   sit inside our neutral circle button and doesn't take currentColor, so
   it gets its own transform-only hover instead of the shared background
   swap, and no background of its own (the image is already a full circle). */
.footer .footer-social a.facebook-badge { background: none; transition: transform .2s ease; }

.footer .footer-social a.facebook-badge:hover { background: none; transform: translateY(-2px) scale(1.06); }

/* Instagram's glyph has no badge of its own like Facebook's - left on the
   neutral default circle it reads much lighter than Facebook's solid blue
   badge right next to it. Giving it a fixed brand-color circle plus the
   official White glyph variant (fill follows currentColor) closes that gap
   without touching Instagram's own artwork or approximating their colors:
   white-on-color is one of their own sanctioned glyph use cases. */
.footer .footer-social a.instagram-badge { background: var(--teal); color: var(--white); transition: transform .2s ease; }

.footer .footer-social a.instagram-badge:hover { background: var(--teal); color: var(--white); transform: translateY(-2px) scale(1.06); }

.footer-social .footer-social-badge { display: block; width: 36px; height: 36px; border-radius: 50%; }