/* ═══════════════════════════════════════════════════════════════
   Hey Monika — Platform Hub theme
   ───────────────────────────────────────────────────────────────
   The single place brand styling lives for every page in this
   folder. Change a colour or a font here and all pages follow.

   HOW THIS WORKS
   Each page still has its own <style> blocks — those hold the
   layout for that page and are left alone. This file is linked
   LAST, so the colour and font values below win over the older
   ones, without any page's layout being disturbed.

   That is why the "legacy aliases" section exists: pages were
   built with their own variable names (--hm, --purple-600, --ink
   and so on). Rather than rewrite every rule in every page, each
   old name is re-pointed at the brand palette. A rule that says
   color: var(--hm) keeps working and simply comes out on-brand.

   Do not add page layout to this file. Keep it to brand values
   and the shared nav / footer.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────
   Self-hosted. Paths are relative, so pages work both when
   opened directly from this folder and when served from a site.
──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Fake Receipt';
  src: url('assets/fonts/fake_receipt_regular-webfont.woff2') format('woff2'),
       url('assets/fonts/fake_receipt_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dmsans-italic-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Brand tokens ───────────────────────────────────────────────
   Mirrors src/styles/tokens.css in the website repo. Keep the two
   in step — these are the same eight palette stops.
──────────────────────────────────────────────────────────────── */
:root {
  --palette-1:            #1c0826;   /* near-black plum */
  --palette-2:            #2e0e7c;   /* deep indigo */
  --palette-3:            #a030d4;   /* vivid violet — accent only */
  --palette-4:            #c278d4;   /* medium orchid */
  --palette-5:            #d0a8cc;   /* muted mauve */
  --palette-6:            #e2cedc;   /* dusty rose */
  --palette-7:            #eedde8;   /* pale blush */
  --palette-8:            #faf4f8;   /* near white */

  --color-bg:             var(--palette-8);
  --color-surface:        var(--palette-7);
  --color-surface-mid:    var(--palette-6);
  --color-surface-dark:   var(--palette-2);
  --color-text-primary:   var(--palette-1);
  --color-text-secondary: #6b4a72;
  --color-text-light:     var(--palette-8);

  --color-accent:         var(--palette-3);
  --color-accent-deep:    #7a1fa8;
  --color-monika:         var(--palette-4);
  --color-monika-light:   var(--palette-5);
  --color-monika-dark:    var(--palette-2);

  --font-display:         'Fake Receipt', monospace;
  --font-body:            'DM Sans', system-ui, sans-serif;

  /* Status colours — kept distinct from brand purple so that
     "this went wrong" never reads as decoration. */
  --color-ok:             #1a6b3d;
  --color-ok-bg:          #e8f4ec;
  --color-warn:           #8a5a00;
  --color-warn-bg:        #fdf3e0;
  --color-bad:            #b02330;
  --color-bad-bg:         #fbeaec;
  --color-info:           #2e0e7c;
  --color-info-bg:        #ece7f8;

  --border-radius-sm:     6px;
  --border-radius-md:     16px;
  --border-radius-pill:   999px;

  --shadow-sm:            0 1px 3px rgba(28,8,38,0.08);
  --shadow-md:            0 4px 24px rgba(28,8,38,0.12);
  --shadow-lg:            0 16px 64px rgba(28,8,38,0.18);

  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:        150ms;
  --duration-base:        300ms;

  /* Chrome heights — the body padding on each page is derived
     from these, so changing one here shifts the pages with it.
     --site-nav-height matches --nav-height on the website so the
     bar is the same depth across both. */
  --site-nav-height:      72px;
  --hub-bar-height:       47.4px;   /* 46px + 3%, to lift the active pill
                                       off the bar above it */

  /* ── Legacy aliases ──────────────────────────────────────────
     Old variable names, re-pointed at the brand palette. Each
     group is the vocabulary one or more pages were built with.
     Nothing here should be used in new work.
  ──────────────────────────────────────────────────────────── */

  /* library / roadmap / status / work-experience */
  --hm:        var(--color-accent);
  --hmd:       var(--palette-2);
  --hmm:       var(--color-monika);
  --hml:       var(--palette-7);
  --cream:     var(--color-bg);
  --t:         var(--color-text-primary);
  --tl:        var(--color-text-secondary);
  --tm:        #7d6383;
  --bd:        var(--palette-6);
  --ok:        var(--color-ok);
  --okbg:      var(--color-ok-bg);
  --warn:      var(--color-warn);
  --warnbg:    var(--color-warn-bg);
  --bad:       var(--color-bad);
  --badbg:     var(--color-bad-bg);
  --info:      var(--color-info);
  --infobg:    var(--color-info-bg);

  /* skills — Tailwind-style ramps */
  --purple-50:  #faf6fd;
  --purple-100: var(--palette-7);
  --purple-200: var(--palette-6);
  --purple-300: var(--palette-5);
  --purple-400: var(--color-monika);
  --purple-500: var(--color-accent);
  --purple-600: var(--color-accent-deep);
  --purple-700: #63198a;
  --purple-800: var(--palette-2);
  --purple-900: var(--palette-1);
  --pink-300:   var(--palette-5);
  --pink-400:   var(--color-monika);
  --pink-500:   var(--color-accent);
  --gold-50:    var(--color-warn-bg);
  --gold-100:   #f7e9cc;
  --gold-400:   #d9a441;
  --gold-500:   #b8862c;
  --gold-600:   var(--color-warn);
  --ink:        var(--color-text-primary);
  --muted:      var(--color-text-secondary);
  --border:     var(--palette-6);
  --card-shadow: var(--shadow-sm);

  /* progress / help */
  --purple:       var(--palette-2);
  --purple-mid:   var(--color-accent-deep);
  --purple-light: var(--palette-7);
  --purple-tag:   var(--color-monika);
  --black:        var(--color-text-primary);
  --white:        #ffffff;
  --grey-light:   var(--palette-8);
  --grey-mid:     var(--palette-6);
  --grey-text:    var(--color-text-secondary);
  --green:        var(--color-ok);
  --green-light:  var(--color-ok-bg);
  --amber:        var(--color-warn);
  --amber-light:  var(--color-warn-bg);
}

/* ── Typography ────────────────────────────────────────────────
   Pages set their own font-family on body and on individual
   elements. Rather than chase each one, the families are forced
   here: body copy to DM Sans, headings to the display face.
──────────────────────────────────────────────────────────────── */
/* !important is needed here because progress.html sets the old cream
   background with !important of its own. */
html,
body {
  background: var(--color-bg) !important;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: var(--font-body);
}

h1, h2, h3,
.page-title,
.hm-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Monospace was used for codes and IDs — keep it monospace, but
   the display face is itself a monospace so it reads as brand. */
code, kbd, samp, .mono {
  font-family: var(--font-display);
}

/* ── Site nav ──────────────────────────────────────────────────
   Mirrors the marketing site's nav, including the mobile drawer.
   Namespaced .hm-* so it cannot collide with page classes.
──────────────────────────────────────────────────────────────── */
.hm-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;              /* above the hub bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--site-nav-height);
  padding: 20px 32px;              /* same as the website's nav */
  background: var(--palette-1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;                /* crops Monika at the bar's edge */
}

/* Monika stands in for the wordmark here. She is drawn taller than the
   bar and pulled up to its top edge, so the bar crops her; the mask
   feathers that cut so it lands as a fade rather than a hard line. The
   effect is that she is leaning over the bar, looking at the page.

   The image is absolutely positioned so its extra height cannot push
   the bar taller — the bar stays exactly --site-nav-height. */
.hm-nav__logo {
  position: relative;
  z-index: 2;
  display: block;
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  /* Slow idle drift. Kept on the wrapper so the image's own transform
     stays free for cursor tracking (see hub-chrome.js). */
  animation: hm-logo-drift 7s ease-in-out infinite;
}
.hm-nav__logo img {
  position: absolute;
  left: 0;
  top: -12px;                      /* sits a little below the bar's top edge */
  height: 74px;
  width: auto;
  display: block;
  will-change: transform;
  transition: transform 220ms var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
}

@keyframes hm-logo-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-nav__logo { animation: none; }
  .hm-nav__logo img { transition: none; }
}

.hm-nav__menu {
  display: contents;
}

.hm-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-nav__links a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--duration-base);
}
.hm-nav__links a:hover { color: #fff; }

/* Current section — a soft rule under the label so visitors can see
   where they are without it shouting. */
.hm-nav__links a.is-active {
  position: relative;
  color: #fff;
}
.hm-nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-monika);
}

.hm-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: var(--border-radius-pill);
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.hm-nav__cta:hover {
  background: #fff;
  color: var(--color-text-primary);
}

.hm-nav__toggle {
  display: none;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.hm-nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.hm-nav.is-menu-open .hm-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hm-nav.is-menu-open .hm-nav__toggle-bar:nth-child(2) { opacity: 0; }
.hm-nav.is-menu-open .hm-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hub tab bar ───────────────────────────────────────────────
   Sits directly beneath the site nav.
──────────────────────────────────────────────────────────────── */
#hm-hub-nav {
  top: var(--site-nav-height) !important;
  height: var(--hub-bar-height);
  background: var(--palette-2) !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 99999;
}
#hm-hub-nav::-webkit-scrollbar { display: none; }

#hm-hub-logo {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  color: #fff !important;
  letter-spacing: 0.03em !important;
  margin-right: 18px !important;
  padding-right: 18px !important;
  border-right: 1px solid rgba(255,255,255,0.18);
}

#hm-hub-nav a {
  border-radius: var(--border-radius-pill) !important;
  transition: background var(--duration-fast), color var(--duration-fast) !important;
}
#hm-hub-nav a.hm-hub-active {
  background: var(--color-accent) !important;
  color: #fff !important;
}

/* Total chrome height — overrides the older single-bar padding. */
body {
  padding-top: calc(var(--site-nav-height) + var(--hub-bar-height)) !important;
}

/* ── Footer ────────────────────────────────────────────────────
   Mirrors src/styles/sections/footer.css in the website repo, so
   the two sites share one footer. Keep them in step.
──────────────────────────────────────────────────────────────── */
.hm-footer {
  background: var(--color-surface-dark);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  line-height: 1.6;
  padding: 128px 32px 32px;
  margin-top: 96px;
}

.hm-footer__inner {
  max-width: 1200px;
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 128px;
  align-items: start;
}

.hm-footer__brand img {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 32px;
}
.hm-footer__brand p {
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
}

.hm-footer__col h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 32px;
}
.hm-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-footer__col a {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--duration-base);
}
.hm-footer__col a:hover { color: #fff; }

/* Bare marks at half opacity — no chips, matching the website. */
.hm-footer__social {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.hm-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity var(--duration-base);
}
.hm-footer__social a:hover { opacity: 1; }

/* Monika, bottom-right, fading into the footer */
.hm-footer__monika {
  --monika-size: 110px;
  --monika-glow: rgba(155, 45, 110, 0.45);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
}

.hm-monika-wrapper {
  position: relative;
  width: var(--monika-size, 110px);
  max-width: 100%;
  aspect-ratio: 652.55 / 967.33;   /* matches Monika-body.svg */
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
          mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
  animation: hm-monika-bob 5s ease-in-out infinite;
}

/* Glow sits behind her: Monika-body.svg wraps a PNG whose alpha is
   opaque across the canvas, so drop-shadow would draw a rectangle. */
.hm-monika-wrapper::before {
  content: '';
  position: absolute;
  inset: 4% -16% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--monika-glow), transparent);
  z-index: 0;
  pointer-events: none;
}

.hm-monika-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.hm-monika-face {
  position: absolute;
  width: 92%;
  left: 4%;
  top: 6%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 2;
}

@keyframes hm-monika-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hm-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hm-footer__bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.03em;
}

/* ── Page titles & display numerals ────────────────────────────
   The display face is a chunky dot-matrix, so it earns its keep at
   large sizes only: page titles and the big figures. Card titles
   and UI labels stay in DM Sans, where it stays readable.

   Selectors are doubled up (.x.x or with a parent) purely to beat
   the older `font-family: inherit` rules already in the pages.
──────────────────────────────────────────────────────────────── */
.sect-intro h2,
.top-bar .top-bar-title,
.site-header h1,
.doc-header .doc-header-title,
.how-to-title,
.page-head h1,
.page-head h2,
h1.page-title,
.syllabus-note h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* Section headings — Status, What's New, Roadmap, Library and the
   page titles all sit at the same level, so they share one size.
   The display face runs small for its point size, hence 2rem. */
.sect-intro h2,
.site-header h1 {
  font-size: 2rem !important;
  line-height: 1.15 !important;
}

/* Was a 10px all-caps eyebrow with wide tracking. At heading size the
   tracking has to come back down or the display face sprawls. */
.how-to-title {
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Work Experience page introduction — 840px to line up with the cards
   below it, which the page sets to that width. */
.wer-intro {
  max-width: 840px;
  margin: 32px auto 0;
  padding: 0 20px;
}
.wer-intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--palette-2);
  margin-bottom: 10px;
}
.wer-intro p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

/* Code entry — was an edge-to-edge strip under the toolbar. Restyled as
   a card matching .how-to below it, with its label promoted to the card
   title. Pure CSS, so the markup and behaviour are untouched. */
.code-strip {
  max-width: 840px;
  margin: 24px auto 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid var(--palette-2);
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0;
  padding: 28px 36px 32px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.code-strip-label {
  flex: 0 0 100%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--palette-2);
  margin-bottom: 8px;
}

.code-strip .code-input { max-width: 320px; }

/* Callout heading — needs to out-rank the body copy beneath it. */
.syllabus-note h2 {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

/* Big figures — sized to be read at a skim, in the display face.
   Small tabular numerals inside tables are deliberately excluded:
   they need to stay aligned and legible at 13px. */
.kpi .value,
.split .panel .pnum,
.me-stat .msnum,
.top-act .ta-stat .val,
.trophy .tname,
.trophy.empty .tname {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

.kpi .value          { font-size: 40px !important; line-height: 1.1 !important; }
.split .panel .pnum  { font-size: 46px !important; line-height: 1.1 !important; }
.me-stat .msnum      { font-size: 34px !important; line-height: 1.1 !important; }
.top-act .ta-stat .val { font-size: 30px !important; line-height: 1.1 !important; }
.trophy .tname       { font-size: 28px !important; line-height: 1.15 !important; }
.trophy.empty .tname { font-size: 20px !important; }

/* ── Callouts ──────────────────────────────────────────────────
   These boxes say "read this first", not "something is wrong", so
   the amber has gone. Pale blush with an accent rule reads as a
   note and keeps amber free to mean an actual warning — which it
   still does on the status pills.
──────────────────────────────────────────────────────────────── */
:root {
  --color-note-bg:     #f6ecf5;
  --color-note-border: #e4cfe2;
  --color-note-rule:   var(--color-accent);
  --color-note-text:   #55305c;
}

.skl-disclaimer,
.syllabus-note,
.info-note,
.anon-note {
  background: var(--color-note-bg) !important;
  border: 1px solid var(--color-note-border) !important;
  border-left: 3px solid var(--color-note-rule) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-note-text) !important;
}

.skl-disclaimer strong,
.syllabus-note strong,
.syllabus-note h2,
.syllabus-note p,
.info-note strong,
.info-note p,
.anon-note strong {
  color: var(--color-note-text) !important;
}

/* Trophy tiles on Team Progress — same move, off the gold ramp. */
.trophy {
  background: linear-gradient(135deg, var(--palette-7) 0%, var(--palette-6) 100%) !important;
  border: 1px solid var(--color-note-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.trophy .tlabel { color: var(--color-accent-deep) !important; }
.trophy .tname,
.trophy.empty .tname { color: var(--palette-1) !important; }
.trophy .tdetail { color: var(--color-note-text) !important; }
.trophy-icon { filter: none !important; }

/* ── Responsive ────────────────────────────────────────────────
   Breakpoints match the website: 1024 / 768 / 480.
──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hm-footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
  }
  .hm-footer__monika { display: none; }
}

@media (max-width: 768px) {
  .hm-nav { padding: 10px 16px; }
  .hm-nav__toggle { display: flex; }

  .hm-nav__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 80px 16px;
    background: rgba(28, 8, 38, 0.97);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                visibility var(--duration-base);
  }
  .hm-nav.is-menu-open .hm-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .hm-nav__links {
    flex-direction: column;
    gap: 32px;
  }
  .hm-nav__links a { font-size: 22px; color: #fff; }
  .hm-nav__cta { padding: 12px 28px; font-size: 16px; }

  #hm-hub-nav { padding: 0 16px !important; gap: 8px !important; }

  .hm-footer { padding: 80px 16px 32px; margin-top: 56px; }
  .hm-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .hm-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .hm-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-nav__menu,
  .hm-nav__toggle-bar,
  #hm-hub-nav a {
    transition-duration: 0.01ms !important;
  }
}