/* Product Academy Brand Style adapter for the resource library and career course.
   Canonical reference: /brand-style.html. Keep the legacy layout and lesson content. */
:root {
  --ink: #20221f;
  --body: #20221f;
  --muted: #5c6259;
  --paper: #fafbf7;
  --yellow: #ffe34d;
  --pink: #c61962;
  --light-pink: #f6ecf0;
  --light-yellow: #fff9d8;
  --light-navy: #eef0e8;
  --surface: #f2f3ed;
  --border: #dcded5;
  --white: #fff;
  --navy: #20221f;
  --navy-dark: #383d35;
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-xl: 12px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}
body { background: var(--paper); font-size: 16px; line-height: 1.65; }
h1, h2 { font-weight: 750; letter-spacing: -.05em; }
h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; }
h2 { line-height: 1.15; }
p { font-size: 16px; line-height: 1.65; }
.container { max-width: 1344px; padding-inline: 48px; }
.container--narrow { max-width: 856px; }
.nav { background: var(--paper); backdrop-filter: none; }
.nav__inner { min-height: 88px; padding-block: 16px; gap: 20px; }
.nav__logo, .resource-footer-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__logo img, .footer__logo img { width: 42px; height: 42px; }
.resource-wordmark { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.6px; color: var(--ink); }
.resource-wordmark small { display: block; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: .7px; margin-top: 5px; }
.footer .resource-wordmark { color: var(--white); }
.nav__dropdown-toggle { min-height: 44px; padding-inline: 10px; }
.nav__dropdown-menu { border: 1px solid var(--border); box-shadow: 4px 4px 0 var(--border); }
.nav__dropdown-menu a { min-height: 44px; }
.nav__burger { min-height: 44px; min-width: 44px; justify-content: center; }
.nav__mobile-menu { top: 88px; background: var(--paper); }
.btn { border-radius: 7px; min-height: 48px; justify-content: center; border-width: 1px; }
.btn--primary, .btn--navy { background: var(--ink); color: var(--white); }
.btn--primary:hover, .btn--navy:hover { background: #383d35; transform: none; }
.btn[href*='maven.com'] { background: var(--pink); color: var(--white); }
.btn[href='/assessment/'] { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.page-header, .hero { background: var(--paper); }
.page-header { padding-block: 48px; }
.page-header .lead { font-size: 18px; line-height: 1.65; }
.eyebrow, .page-meta, .roadmap__title, .roadmap__label, .lesson-frame__badge,
.lesson-frame__duration, .lesson-frame__footer-label, .lesson-frame__next-meta,
.objectives__title, .footer__col-title, .card__tag, .featured__tag {
  font-family: 'DM Mono', monospace; font-weight: 400; font-size: 12px; letter-spacing: .04em;
}
.eyebrow { background: transparent; color: var(--muted); padding: 0; border-radius: 0; }
.article { background: var(--paper); }
.article p, .article li { font-size: 16px; line-height: 1.75; }
.article a:not(.btn):not(.lesson-frame__next) { text-decoration: underline; text-underline-offset: 4px; }
.lesson-frame { background: var(--white); padding: 24px; }
.lesson-frame__badge { background: var(--yellow); color: var(--ink); border-radius: 4px; }
.lesson-frame__next { color: var(--ink); min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.video-embed { border-radius: 10px; }
.objectives { background: var(--surface); }
.objectives li::before { background-color: var(--ink); }
.roadmap__num { width: 38px; height: 38px; font-family: 'DM Mono', monospace; font-weight: 500; border-width: 1px; border-color: #aeb2a5; }
.roadmap__link, .roadmap__current { padding-block: 4px; }
.roadmap__step--current .roadmap__num { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.roadmap__step--current .roadmap__label { font-weight: 500; }
.stages-journey__node { border-color: var(--ink) !important; }
.tracker-banner, .tracker-cta__inner, .cta-box { background: var(--ink); border-radius: 12px; }
.featured__side { background: var(--surface) !important; }
.featured, .card { box-shadow: none; }
.card { --accent: var(--ink); --accent-bg: var(--light-yellow); }
.card:hover { box-shadow: none; transform: none; border-color: var(--ink); }
.dave-cta__avatar { background: var(--yellow); color: var(--ink); }
.footer { background: var(--ink); }
.footer__nav a, .footer__bottom { color: #b9c0b0; }
.footer__social-btn { border-radius: 7px; min-height: 44px; min-width: 44px; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 5px; }
.footer :focus-visible, .cta-box :focus-visible, .tracker-banner :focus-visible, .tracker-cta :focus-visible { outline-color: var(--yellow); }
.btn[href*='maven.com']:focus-visible { outline-color: var(--ink); }
@media (max-width: 1100px) {
  .container { padding-inline: 28px; }
  .nav__inner { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  .nav__inner { min-height: 76px; flex-wrap: nowrap; }
  .nav__mobile-menu { top: 76px; }
  .roadmap__steps { padding: 5px 5px 12px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 20px; }
  .page-header { padding-block: 32px; }
  .page-header .lead { font-size: 16px; }
  .page-meta { gap: 12px; }
  .lesson-frame { padding: 16px; }
  .direct-answer, .objectives { padding: 20px; }
  .article { padding-top: 28px; }
  .nav__logo img { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Wide lesson comparisons scroll independently, preserving table semantics. */
.resource-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 24px; }
.resource-table-scroll .compare-table { margin: 0; }
@media (max-width: 620px) { .resource-table-scroll .compare-table { min-width: 560px; } }
.hero__deco { display: none; }
.hero { padding-block: 56px; text-align: left; border-bottom: 1px solid var(--border); }
.hero__inner { max-width: 880px; margin-inline: 0; }
.hero__pill { background: none; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 400; padding: 0; border-radius: 0; }
.hero__sub { margin-inline: 0; font-size: 18px; }
.hero__stats { border-radius: 0; border-top: 1px solid var(--border); background: none; padding: 20px 0 0; justify-content: flex-start; gap: 16px 28px; backdrop-filter: none; }
.hero__stats span::before { color: var(--ink); }
@media (max-width: 620px) { .hero { padding-block: 36px; } .hero__sub { font-size: 16px; } }
.tracker-cta .btn--primary, .dave-cta .btn--primary { background: var(--yellow); color: var(--ink); }
.dave-cta h2 { color: var(--white); }
@media (min-width: 801px) and (max-width: 1024px) {
  .nav__links, .nav .btn--sm { display: none; }
  .nav__burger { display: flex; flex-direction: column; }
  .nav__inner { min-height: 76px; flex-wrap: nowrap; }
  .nav__mobile-menu { top: 76px; }
}