/* =====================================================================
   LMS B2B — Marketing v3 section banding (premium identity layer)
   --------------------------------------------------------------------
   Brand-locked palette: blue #0060b4, yellow #fed600. Supporting tones
   are derived from those two (darker for hover, lighter for tints) so
   nothing fights the two anchor colours.

   Section rhythm:
     • HERO        — #0060b4 (with darker top + lighter glow)
     • TRUST STRIP — white
     • STATS       — soft-cream tint of the yellow, blue numbers
     • USE CASES   — white
     • FEATURES    — white
     • HOW IT WKS  — soft-cream yellow band
     • PRICING     — white (explicit per spec)
     • ADDONS      — white
     • FAQ         — soft-cream yellow band
     • BLOG        — white
     • CTA         — dark navy (unchanged from color layer)
     • FOOTER      — pure black with yellow accents
   ===================================================================== */

:root {
  /* Brand-anchor colours — fixed by user. Don't substitute. */
  --m3-band-blue:        #0060b4;       /* primary blue */
  --m3-band-yellow:      #fed600;       /* primary yellow */

  /* Derived shades. Hand-picked so all hovers / borders / tints stay in
     the same hue family as the two anchors — no rogue accent colours. */
  --m3-band-blue-deep:   #004a8e;       /* hero gradient bottom + hover */
  --m3-band-blue-darker: #003a70;       /* deepest, for navy footer-adjacent */
  --m3-band-blue-glow:   #1979c9;       /* radial accent inside hero */
  --m3-band-blue-soft:   #e7f1fb;       /* button-hover tint on white */
  --m3-band-yellow-deep: #e6bf00;       /* yellow hover */
  --m3-band-yellow-dark: #b89a00;       /* heading / icon accent on cream */
  --m3-band-cream:       #fff8d1;       /* full-section soft band */
  --m3-band-cream-edge:  #f5e58a;       /* divider between band + white */
  --m3-band-black:       #0b0d1f;       /* dark "near-black" with a hint of navy */
  --m3-band-black-mid:   #14172e;       /* slight lift for the middle band */
  --m3-band-black-deep:  #06081a;       /* deepest for the copyright bar */

  /* CTA red — user-locked. Every major "do this now" button on the
     marketing site lands on this colour so it reads as one consistent
     action signal across hero + pricing + contact + CTA card. */
  --m3-band-cta:         #e42527;
  --m3-band-cta-deep:    #c41a1c;       /* hover */
  --m3-band-cta-darker:  #9a1517;       /* active / very dark accent */
}

/* ─────────── HERO — near-black base with purple-pink radial accents ───
   Mostly black so the page reads as premium / serious. Two soft radial
   gradients (pink upper-left, violet lower-right) inject just enough
   colour to keep it from feeling flat, without competing with the
   headline or the dashboard mockup. */
.m3-hero {
  --m3-hero-deep:  #050608;   /* near-pure-black at the top edge */
  --m3-hero-mid:   #0a0a14;   /* very dark, barely any hue */
  --m3-hero-pop:   #0e0d1c;   /* deepest, faint purple cast at the bottom */
  background:
    /* Pink wash behind the headline (left ~25%, mid-height) */
    radial-gradient(ellipse 55% 60% at 22% 42%, rgba(236, 72, 153, .22), transparent 62%),
    /* Violet wash under the dashboard mockup (right side) */
    radial-gradient(ellipse 50% 55% at 82% 70%, rgba(124, 58, 237, .22), transparent 62%),
    /* Cool indigo tickle in the centre to bridge the two */
    radial-gradient(ellipse 70% 40% at 50% 90%, rgba(99, 102, 241, .10), transparent 65%),
    /* Pure dark base */
    linear-gradient(180deg, var(--m3-hero-deep) 0%, var(--m3-hero-mid) 55%, var(--m3-hero-pop) 100%);
  color: #f3f4f6;
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

/* 2-column row */
.m3-hero-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 991px) {
  .m3-hero-row { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* LEFT column — text, left-aligned */
.m3-hero-left { text-align: left; }
.m3-hero-left .m3-hero-title,
.m3-hero-left .m3-hero-sub,
.m3-hero-left .m3-hero-cta,
.m3-hero-left .m3-hero-meta,
.m3-hero-left .m3-hero-chips { text-align: left; justify-content: flex-start; }
.m3-hero-left .m3-hero-title { font-size: clamp(2.5rem, 5vw, 4.25rem); margin-block: 1.25rem 1rem; }
.m3-hero-left .m3-hero-sub   { max-width: 36rem; margin-inline: 0; }
.m3-hero-left .m3-hero-cta   { margin-block: 1.75rem 1.25rem; }

/* Replace the meta check-marks with chip pills (matches the reference's
   "Popular: Programming · Design · …" row). */
.m3-hero-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  margin-top: 1.25rem;
}
.m3-hero-chip-label {
  color: rgba(243,244,246,.55); font-size: .82rem; font-weight: 500;
  margin-right: .25rem;
}
.m3-hero-chip {
  display: inline-flex; align-items: center;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(243,244,246,.85);
  font-size: .82rem; font-weight: 500;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.m3-hero-chip:hover {
  background: rgba(228,37,39,.12);
  border-color: rgba(228,37,39,.45);
  color: #fff;
}

/* RIGHT column — single editorial image */
.m3-hero-right { position: relative; }
.m3-hero-right .m3-preview {
  margin: 0; max-width: none;
  border-radius: 22px;
  background: transparent;       /* no white card under the photo */
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 50px 100px rgba(0,0,0,.55),
    0 0 0 1px rgba(124,58,237,.18),
    0 0 80px rgba(124,58,237,.25);
  overflow: hidden;
}
.m3-hero-right .m3-preview img {
  display: block;
  width: 100%; height: auto;
  border-radius: inherit;
}

/* Floating glass callout cards over the mockup */
.m3-hero-floater {
  position: absolute; z-index: 3;
  background: rgba(15,12,38,.65);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .85rem 1.05rem;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font-size: .8rem; line-height: 1.3;
}
.m3-hero-float--tl { top: -1.25rem;   left: -1.25rem; }
.m3-hero-float--br { bottom: -1.25rem; right: -1.25rem; }
.m3-hero-floater-val { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.m3-hero-floater-lbl { color: rgba(243,244,246,.65); font-size: .68rem; margin-top: .2rem; }
.m3-hero-floater-stars { color: #fbbf24; font-size: .8rem; display: flex; align-items: center; }

@media (max-width: 575px) {
  .m3-hero-float--tl { top: -.75rem;   left: -.5rem;  padding: .65rem .8rem; }
  .m3-hero-float--br { bottom: -.75rem; right: -.5rem; padding: .65rem .8rem; }
  .m3-hero-floater-val { font-size: 1.2rem; }
}

/* 4-stat anchor row below the columns */
.m3-hero-stats {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}
.m3-hero-stat {
  background: rgba(15,12,38,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  color: #fff;
}
.m3-hero-stat-val {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em;
}
.m3-hero-stat-lbl {
  color: rgba(243,244,246,.62);
  font-size: .82rem; margin-top: .35rem;
}
@media (max-width: 767px) {
  .m3-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard mockup lives in the narrower right column now — its inner
   4-tile stats row would crush at this width, so reflow to 2x2 to keep
   the values readable. */
.m3-hero-right .m3-adm-stats { grid-template-columns: repeat(2, 1fr); }
/* Very subtle 24px texture grid — user-supplied spec. Light gray lines
   (#f1f3f5) at 1px every 24px with opacity .02 against the navy give
   the surface a barely-there mesh feel that reads as polish rather than
   as a "grid". No mask — the grid covers the whole hero uniformly. */
.m3-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, #f1f3f5 1px, transparent 1px),
    linear-gradient(#f1f3f5 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .02;
  width: auto; height: auto;
  border-radius: 0;
  filter: none; animation: none;
  -webkit-mask-image: none;
          mask-image: none;
}
/* ::after also blanked. Hero is now a clean navy gradient — no dots, no
   sparkles, no grid, no patterns. The radial spotlights inside the
   main .m3-hero background do all the depth work. */
.m3-hero::after  { display: none; }
.m3-hero > .container { position: relative; z-index: 2; }

.m3-hero-title          { color: #ffffff; letter-spacing: -.025em; }
.m3-hero-title .m3-accent {
  background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(147,197,253,.40);
}
.m3-hero-sub            { color: rgba(243,244,246,.82); }
.m3-hero-meta           { color: rgba(243,244,246,.72); }
.m3-hero-meta span i    { color: #93c5fd; }

/* Hero tag pill — light blue on dark glass to match the navy backdrop */
.m3-tag {
  background: rgba(147,197,253,.08);
  border-color: rgba(147,197,253,.35);
  color: #dbeafe;
  font-weight: 600;
}
.m3-tag-dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.25); }

/* MAJOR CTA — every "do this now" button on the marketing site lands on
   the user-locked red #e42527 so the action signal stays consistent
   across hero, pricing cards, contact form, and the bottom CTA card.
   The brand yellow stays for headline accents + tag pills, not buttons. */
.m3-btn--primary,
.m3-plan .m3-btn--outline,        /* "Start with Starter / Pro / Enterprise" */
.lms-nav .btn-primary,
.lms-nav .m3-btn--primary,
.m3-strip ~ section .m3-btn--primary,
.m3-pricing .m3-btn--primary,
.m3-blog    .m3-btn--primary,
.m3-uses    .m3-btn--primary,
.m3-cta-card .m3-btn--primary,
/* Bootstrap-styled buttons on /contact and /pricing.php (the standalone
   page) — they use plain .btn.btn-primary, not our .m3-btn class. */
.m3-hero ~ section .btn.btn-primary,
.lms-footer ~ * .btn.btn-primary,
section .btn.btn-primary {
  background: var(--m3-band-cta);
  color: #fff;
  font-weight: 700;
  border: 1px solid var(--m3-band-cta);
  box-shadow: 0 8px 22px rgba(228,37,39,.30);
}
.m3-btn--primary:hover,
.m3-plan .m3-btn--outline:hover,
.lms-nav .btn-primary:hover,
.lms-nav .m3-btn--primary:hover,
.m3-strip ~ section .m3-btn--primary:hover,
.m3-pricing .m3-btn--primary:hover,
.m3-blog    .m3-btn--primary:hover,
.m3-cta-card .m3-btn--primary:hover,
.m3-hero ~ section .btn.btn-primary:hover,
section .btn.btn-primary:hover {
  background: var(--m3-band-cta-deep);
  color: #fff;
  border-color: var(--m3-band-cta-deep);
  box-shadow: 0 14px 32px rgba(196,26,28,.45);
}
.m3-hero .m3-btn--ghost {
  border-color: rgba(255,255,255,.30);
  color: #f5f5f4;
  background: rgba(255,255,255,.02);
}
.m3-hero .m3-btn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.55);
}

/* Hero preview card — sits on blue, so glow + subtle yellow ring */
.m3-preview {
  background: #fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 40px 80px rgba(0,0,0,.40),
    0 0 0 1px rgba(254,214,0,.18),
    0 0 60px rgba(25,121,201,.30);
}

/* (post-hero primary-button override removed — every major CTA now uses
   the red rule at the top of this file; no per-section overrides needed.) */

/* ─────────── TRUST STRIP — white ─────────── */
.m3-strip {
  background: #fff;
  border-top: 1px solid var(--m3-line);
  border-bottom: 1px solid var(--m3-line);
}
.m3-strip-label {
  background: none !important;
  -webkit-text-fill-color: var(--m3-band-blue);
  color: var(--m3-band-blue) !important;
}

/* ─────────── STATS — soft-yellow band, blue numbers ─────────── */
.m3-stats {
  background: var(--m3-band-cream);
  border-top: 1px solid var(--m3-band-cream-edge);
  border-bottom: 1px solid var(--m3-band-cream-edge);
}
.m3-stat-num,
.m3-stats-row .m3-stat:nth-child(2) .m3-stat-num,
.m3-stats-row .m3-stat:nth-child(3) .m3-stat-num,
.m3-stats-row .m3-stat:nth-child(4) .m3-stat-num {
  background: none !important;
  -webkit-text-fill-color: var(--m3-band-blue);
  color: var(--m3-band-blue) !important;
  letter-spacing: -.03em;
}
.m3-stats .m3-stat-label {
  color: var(--m3-band-blue-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
}

/* ─────────── USE CASES — white ─────────── */
.m3-uses { background: #fff; }

/* ─────────── FEATURES — white ─────────── */
.m3-features { background: #fff; }

/* ─────────── HOW IT WORKS — soft-yellow band ─────────── */
.m3-how {
  background: var(--m3-band-cream);
  border-top: 1px solid var(--m3-band-cream-edge);
  border-bottom: 1px solid var(--m3-band-cream-edge);
}
.m3-step-n {
  background: none !important;
  -webkit-text-fill-color: var(--m3-band-yellow-dark);
  color: var(--m3-band-yellow-dark) !important;
  font-weight: 800;
}
.m3-how .m3-steps li {
  background: #fff;
  border: 1px solid var(--m3-band-cream-edge);
}
.m3-how .m3-steps li::before {
  background: linear-gradient(90deg, var(--m3-band-blue), var(--m3-band-yellow)) !important;
}

/* ─────────── PRICING — white (explicit) ─────────── */
.m3-pricing { background: #fff; }
.m3-pricing .m3-section-title .m3-accent {
  background: linear-gradient(135deg, var(--m3-band-blue), var(--m3-band-blue-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m3-cycle-btn em {
  background: linear-gradient(135deg, var(--m3-band-yellow), var(--m3-band-yellow-deep));
  color: var(--m3-band-blue-darker);
}
.m3-cycle-btn.is-active { color: var(--m3-band-blue); }
.m3-plan-feat i { color: var(--m3-band-blue); }
.m3-plan-feat li:hover i { color: var(--m3-band-yellow-deep); }
.m3-plan {
  border: 1px solid var(--m3-line);
}
.m3-plan::before {
  background: linear-gradient(90deg, var(--m3-band-blue), var(--m3-band-yellow)) !important;
  opacity: .35;
}
.m3-plan:hover::before { opacity: 1; }

/* ─────────── ADDONS — white ─────────── */
.m3-addons { background: #fff; }
.m3-addon-tab.is-active {
  background: var(--m3-band-blue);
  color: #fff; border-color: transparent;
}

/* ─────────── BLOG — white ─────────── */
.m3-blog { background: #fff; }
.m3-blog-img--ph {
  background: linear-gradient(135deg, rgba(0,96,180,.12), rgba(254,214,0,.20));
  color: var(--m3-band-blue);
}

/* ─────────── FAQ — soft-yellow band ─────────── */
.m3-faq {
  background: var(--m3-band-cream);
  border-top: 1px solid var(--m3-band-cream-edge);
  border-bottom: 1px solid var(--m3-band-cream-edge);
}
.m3-faq-item { background: #fff; border: 1px solid var(--m3-band-cream-edge); }
.m3-faq-item[open] {
  border-color: var(--m3-band-blue);
  box-shadow: 0 8px 24px rgba(0,96,180,.12);
}
.m3-faq-item summary:hover,
.m3-faq-item[open] summary { color: var(--m3-band-blue); }
.m3-faq-item[open] .m3-faq-ic { color: var(--m3-band-yellow-deep); }

/* ─────────── EYEBROWS — blue everywhere by default ─────────── */
.m3-eyebrow {
  background: none !important;
  -webkit-text-fill-color: var(--m3-band-blue);
  color: var(--m3-band-blue) !important;
  font-weight: 700;
}
.m3-section-title .m3-accent {
  background: linear-gradient(135deg, var(--m3-band-blue), var(--m3-band-blue-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* On the cream-band sections, switch the eyebrow + accent to mustard so
   they don't disappear into the cream background. */
.m3-stats .m3-section-title .m3-accent,
.m3-how   .m3-section-title .m3-accent,
.m3-faq   .m3-section-title .m3-accent {
  background: linear-gradient(135deg, var(--m3-band-yellow-deep), var(--m3-band-yellow-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m3-stats .m3-eyebrow,
.m3-how   .m3-eyebrow,
.m3-faq   .m3-eyebrow {
  -webkit-text-fill-color: var(--m3-band-yellow-dark);
  color: var(--m3-band-yellow-dark) !important;
}

/* ─────────── PROGRESS BAR — blue→yellow ─────────── */
.m3-progress > span {
  background: linear-gradient(90deg, var(--m3-band-blue), var(--m3-band-yellow));
  box-shadow: 0 0 8px rgba(0,96,180,.45);
}

/* ─────────── FOOTER — three-band dark identity ───────────
   Outer wrapper sets the base tone; three internal sections (social
   strip, link columns, copyright) graduate from lighter to darker so the
   footer reads as a real surface, not a single block of black. */
.lms-footer {
  background: var(--m3-band-black);
  color: rgba(255,255,255,.72);
  border-top: 3px solid var(--m3-band-yellow);
  font-size: .92rem;
}

/* Social strip — slightly lifted from the base for separation */
.lms-foot-social {
  background: var(--m3-band-black-mid);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 1.1rem 0;
  color: rgba(255,255,255,.78);
}
.lms-foot-social-label {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.lms-foot-social-icons {
  display: inline-flex; gap: .35rem; flex-wrap: wrap; justify-content: center;
}
.lms-foot-social-icons a {
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.lms-foot-social-icons a:hover {
  background: var(--m3-band-yellow);
  color: var(--m3-band-black);
  border-color: var(--m3-band-yellow);
  transform: translateY(-1px);
}

/* Main link columns */
.lms-foot-main { padding: 3rem 0 2.25rem; }
.lms-foot-heading {
  color: var(--m3-band-yellow);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.lms-foot-about {
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 28rem;
}
.lms-foot-mute { color: rgba(255,255,255,.55) !important; }

.lms-foot-links,
.lms-foot-contact {
  list-style: none; padding: 0; margin: 0;
}
.lms-foot-links li,
.lms-foot-contact li {
  padding: .25rem 0;
  font-size: .88rem;
}
.lms-foot-links a,
.lms-foot-contact a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .15s;
}
.lms-foot-links a:hover,
.lms-foot-contact a:hover { color: var(--m3-band-yellow); }
.lms-foot-contact li {
  display: flex; align-items: flex-start; gap: .55rem;
  color: rgba(255,255,255,.78);
}
.lms-foot-contact li i {
  color: var(--m3-band-yellow);
  margin-top: .15rem; flex: 0 0 1rem; font-size: .95rem;
}

.lms-footer .lms-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--m3-band-yellow);
  color: var(--m3-band-black);
  font-weight: 800; font-size: 1.1rem;
}

/* Copyright bar — deepest band */
.lms-foot-copy {
  background: var(--m3-band-black-deep);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1rem 0;
  color: rgba(255,255,255,.55);
}
.lms-foot-copy small { font-size: .78rem; }

/* Generic resets so leftover Bootstrap utility classes don't override
   our intentional dark-footer colours. */
.lms-footer .text-muted { color: rgba(255,255,255,.55) !important; }
.lms-footer .text-reset { color: rgba(255,255,255,.85) !important; }

@media (max-width: 575.98px) {
  .lms-foot-social { text-align: center; }
  .lms-foot-social-label { display: none; }
  .lms-foot-main   { padding: 2rem 0 1.25rem; }
}

/* ─────────── NAV BAR — solid white, three-column grid ──────────
   Sits above the dark hero. White background with a subtle shadow so it
   lifts from whatever's behind. The container uses a 1fr/auto/1fr CSS-
   grid so the link strip is geometrically CENTERED on the container
   width, regardless of how wide the brand label or CTA button get. */
.lms-nav {
  background: #ffffff;
  backdrop-filter: none;
  border-bottom: 1px solid var(--m3-line);
  box-shadow: 0 1px 0 rgba(11,13,31,.04), 0 4px 16px rgba(11,13,31,.04);
}
.lms-nav .lms-nav-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.lms-nav-brand    { justify-self: start; margin-right: 0; }
.lms-nav-center   { justify-self: center; }
.lms-nav-cta      { justify-self: end; display: flex; gap: .5rem; align-items: center; }

.lms-nav-links { display: flex; gap: .25rem; flex-direction: row; margin: 0; padding: 0; list-style: none; }
.lms-nav-links .nav-link { padding: .5rem 1rem; font-weight: 500; }

.lms-nav a,
.lms-nav .nav-link,
.lms-nav .lms-brand-name { color: var(--m3-band-black); }
.lms-nav a:hover,
.lms-nav .nav-link:hover { color: var(--m3-band-cta); }
.lms-nav .lms-brand-mark {
  background: var(--m3-band-cta);
  color: #fff;
}

/* Mobile — Bootstrap's navbar-collapse expands below the row, so revert
   to a stacked layout when the toggler shows up (< lg). */
@media (max-width: 991.98px) {
  .lms-nav .lms-nav-grid {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand toggler cta";
  }
  .lms-nav-brand    { grid-area: brand; }
  .lms-nav .navbar-toggler { grid-area: toggler; }
  .lms-nav-cta      { grid-area: cta; }
  .lms-nav-center   {
    grid-column: 1 / -1; /* full-width drawer when expanded */
    justify-self: stretch;
  }
  .lms-nav-links { flex-direction: column; gap: .15rem; padding: .5rem 0; }
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .m3-hero { padding-block: 4rem 3rem; }
  .m3-hero-title { font-size: clamp(2.25rem, 9vw, 3rem); }
}