/* ── 1 · SOLID BAR ───────────────────────────────────────────────────────────
   Platform default is background-color:rgba(255,255,255,0) — fully transparent —
   so page content scrolling underneath collides with the menu text.

   The paint MUST go on .is-topbar (z-index:101), NOT on the .is-section-navbar
   wrapper. Tested live 2026-08-12: the wrapper renders at z-index:2, so page
   content paints straight over it and the collision remains. Consequence: the
   painted band is the topbar's 77px, while the navbar section reserves 90px —
   a 13px transparent seam below the bar is expected and correct.               */
.is-topbar{
  background-color:#FBF7F2 !important;
}
.is-topbar.shrink{
  background-color:#FBF7F2 !important;
  box-shadow:0 1px 3px rgba(28,22,18,.10) !important;
}

/* ── 2 · MOBILE + TABLET BAR: hamburger LEFT, logo CENTRE ────────────────────
   #is-menu-toggle exists ONLY at <=1024px (the bundle sets display:none from
   1025px up), so this is inherently a phone/tablet change — desktop keeps its
   logo-left / links-right bar by design.

   The transform lives on .is-topbar-logo and NEVER on .is-topbar-container:
   a transform on the container would become the containing block for the
   position:fixed drawer and overlay and break both.                            */
@media (max-width:1024px){

  .is-topbar .is-topbar-container{
    display:flex !important;
    align-items:center;
    position:relative;                 /* safe: does not capture fixed children */
  }
  .is-topbar .is-topbar-menu{
    display:block !important;
    order:-1;
    flex:0 0 auto;
  }
  .is-topbar #is-menu-toggle{
    display:block !important;
    float:none !important;
    margin:0 0 0 20px !important;
  }
  .is-topbar .is-topbar-logo{
    order:1;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    padding-left:0 !important;
  }

  /* Drawer slides in from the left, matching the button it came from.
     NavBar decides open/closed by reading the INLINE property
     menu.style.right === "0px". A stylesheet !important changes rendering but
     not element.style.right, so the toggle, the overlay and the body
     scroll-lock all keep working. Open AND close cycles verified live.
     The hamburger morphs to × in place for free: #is-menu-toggle is
     z-index:1000000, above the drawer's 100000.                                */
  .is-topbar .is-menu{
    right:auto !important;
    left:-1000px;
    float:none;
    /* FULL COVER (founder request 2026-08-12): the platform ships width:80%
       max-width:500px, which left a strip of page showing beside the drawer and
       read as messy. Full width hides the page completely. The × stays usable
       because #is-menu-toggle is z-index:1000000, above the drawer's 100000.
       NOTE: getComputedStyle reports the OLD 312px width in a hidden pane even
       though the paint is correct — screenshot-verified full cover at 390px.
       Trust the screenshot, not the computed read (same artifact as elsewhere). */
    width:100% !important;
    max-width:none !important;
  }
  .is-topbar #is-menu-toggle.active ~ .is-menu{
    left:0;
  }

  /* ── 2c · BRAND INSIDE THE OPEN DRAWER (founder request 2026-08-12) ─────────
     The drawer is full-cover, so opening it hides the bar and with it the
     centred logo — the brand disappeared entirely for as long as the menu was
     open, on the one surface where a first-time visitor is deciding.

     Painted at the SAME coordinates the bar's own logo occupies when closed
     (measured live at 390px: 188x50 at x=101, y=13.5, i.e. dead centre). The
     result is that the logo appears NOT TO MOVE when the drawer opens — the
     hamburger morphs to x beside it and everything else slides in underneath.
     top is 14px rather than 13.5 deliberately: a half-pixel offset softens the
     mark for no visible gain, and integer alignment is the whole lesson of the
     line-height note above.

     CSS-only and deliberately NOT a menu item:
       - a Menu Builder logo row would also render in the DESKTOP bar, which is
         already tight enough to clip its own last item below ~1150px;
       - the fragility contract forbids injecting markup into the drawer.
     Consequence, accepted: a pseudo-element cannot be a link, so this is
     decorative and NOT tap-to-home. Closing the drawer restores the real,
     tappable logo. If tap-to-home from inside the drawer is ever wanted, that
     is a DOM change and needs its own review.

     background-size is the image's exact 188x50 so it maps 1:1 to device
     pixels; pointer-events:none so it can never steal a tap from the x or the
     first row. Centred with a negative margin, NOT translateX — a transform
     would promote this to its own layer, which is the bug in §8.             */
  .is-topbar #is-menu-toggle.active ~ .is-menu::before{
    content:"";
    position:absolute;
    top:14px;
    left:50%;
    margin-left:-94px;
    width:188px;
    height:50px;
    background:url("https://cdn.edbound.app/public/72bb05dd-094c-49f5-b52d-7e07659be3e0/builderv3/10042026/5mpwd.webp") no-repeat 50% 50%;
    background-size:188px 50px;
    pointer-events:none;
  }

  /* Drawer rows: more room to breathe and a bigger tap target.

     line-height is pinned to an INTEGER 22px, and that is a bug fix, not taste.
     Founder-reported 2026-08-12: the LAST items of the drawer looked blurred,
     as if something translucent sat over them. Nothing sat over them — measured
     and confirmed the hit-test order is li > ul > .is-menu > .is-menu-overlay,
     i.e. the platform overlay is BENEATH the drawer, exactly as intended.

     The real cause is subpixel accumulation, the same failure §8 fixes for
     submenus. The platform's inherited line-height made each row 50.05px tall,
     so every row below the first inherited the leftover:

         row 1  y=70      row 5  y=270.19
         row 2  y=120.05  row 6  y=320.23
         row 3  y=170.09  Login  y=399.28
         row 4  y=220.14  then EVERY footer-band item at y=…​.33

     A third of a pixel is the worst case for glyph rasterisation, which is why
     the app / social / legal / trust bands looked soft while the top rows did
     not. 14 + 22 + 14 = 50 exactly, so nothing drifts and all 16 rows land on
     integers — verified, every fractional offset 0.

     Side effect, accepted and mildly positive: the legal-band rows grow 28.9px
     -> 34px. They were under the 44pt tap-target minimum either way; 34px is
     less wrong. The trust line is UNAFFECTED — its own rule sets line-height
     1.75 at higher specificity, so its three-line wrap is unchanged.

     Do NOT "fix" softness here with translateZ/will-change/backdrop-filter.
     Promoting a layer is what CAUSES this class of bug (see §8). Remove the
     fractional offset instead.                                                 */
  .is-topbar .is-menu > ul.is-menu-links > li > a{
    padding-top:14px !important;
    padding-bottom:14px !important;
    line-height:22px !important;
  }

  /* ── 2d · COURSE LIBRARY'S SUB-ITEM IS ALWAYS OPEN IN THE DRAWER ───────────
     Founder-reported 2026-08-12: tapping "Course Library" in the drawer went to
     the Course Library page instead of revealing Recorded Courses, so the nested
     item was effectively unreachable on mobile.

     That is correct platform behaviour, not a bug: unlike About and More — which
     carry EMPTY links and are therefore pure toggles — Course Library has a real
     href, so a tap navigates. The caret is the toggle, and it is a 58x48 target
     at the far right of the row that nobody will find.

     The nesting exists ONLY to keep the DESKTOP bar from clipping its own last
     item. The drawer has unlimited vertical room and no such constraint, so the
     honest fix is to stop hiding the child on mobile: show it as a normal
     indented row. Nothing is behind a caret, the parent still links to the
     library, and the child still links to the recorded-courses page.

     The caret is hidden with it — leaving a disclosure arrow on a row that no
     longer discloses anything is worse than having no arrow at all.

     Deliberately scoped to THIS item by href. About and More keep their toggles:
     they hold 3 and 2 children respectively and are genuine grouping rows, while
     this is a single child hidden behind a control.                            */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="/page/course-library"]) > ul{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    height:auto !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="/page/course-library"]) > a > span{
    display:none !important;
  }

  /* ── 2e · THE CLOSE BUTTON NEEDS TO LOOK LIKE A BUTTON ─────────────────────
     Founder-reported: the x reads "plain and lost", and asked about glassmorphism.

     Glassmorphism is the wrong tool here and would do nothing: the effect is a
     blur of whatever sits BEHIND the panel, and this drawer is opaque #fff at
     full cover. There is nothing behind it to blur, so a frosted chip would
     render as a flat tint — cost of a compositing layer, none of the look. Worse,
     backdrop-filter promotes the element to its own GPU layer, which is exactly
     the mechanism behind the soft-text bug documented in section 8 and in the
     line-height note above.

     What the x actually lacked was AFFORDANCE, not translucency — it was three
     bare strokes floating on white with no boundary telling you it is pressable.
     So: a warm cream chip in the bar's own #FBF7F2, a hairline in the walnut used
     by every drawer icon, and a 1px shadow to lift it off the page.

     Drawn on ::before and positioned ABSOLUTELY, never with padding. Padding on
     this element is on record as having caused 12px of drawer side-scroll; an
     absolutely-positioned backing plate cannot affect layout at all. It also
     paints before the three .line spans, so the strokes stay on top untouched.
     44x44 meets the iOS minimum, and it is centred on the icon rather than
     anchored, so it cannot drift if the platform ever resizes the bars.

     Applied only to .active — the closed hamburger sits on the cream bar where it
     already reads as a control, and a chip there would just be noise.           */
  .is-topbar #is-menu-toggle.active::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:-22px 0 0 -22px !important;
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    background:#FBF7F2 !important;
    border:1px solid rgba(110,74,66,.18) !important;
    box-shadow:0 1px 3px rgba(28,22,18,.10) !important;
  }

  /* ── 2b · TOP CLEARANCE, held site-wide instead of per page ────────────────
     The 90px coexistence shim used to live in each page's own Header code,
     which every publish of that page wipes. Verified 2026-08-12: it had already
     been lost on live-workshops (#aklw), whose eyebrow sits at y=56 — inside the
     bar. Contact and the legal pages (#akh-legal) still had theirs; that rule is
     restated here so a future publish cannot lose it either. Same property, same
     value — restating is idempotent, never additive.

     Deliberately NOT a blanket rule on `.is-section-navbar + *`: about, reviews
     and the homepage already clear the band on their own and a blanket 90px
     would open a dead gap on each. Course Library must also never receive it —
     it reserves its own band (see the coexistence patch) and would double-push. */
  .is-wrapper > .is-section-navbar + #aklw,
  .is-wrapper > .is-section-navbar + #akh-legal{
    margin-top:90px !important;
  }
}

/* ── 3 · DESKTOP BRAND SIZE ──────────────────────────────────────────────────
   .is-photo-profile carries height:auto, which overrides the logo's HTML height
   attribute; the logo cell is then shrink-to-fit inside a display:table
   container, so a crowded menu row starves it. Measured live with 9 items:
   74x20 despite logowidth=188. With the 5-item cut plus the floor below: 166x44. */
@media (min-width:1025px){
  .is-topbar .is-topbar-logo{
    min-width:190px;
  }
  .is-topbar .is-topbar-logo .is-photo-profile{
    height:44px !important;
    max-height:44px !important;
    width:auto !important;
    max-width:none !important;
  }
  .is-topbar.shrink .is-topbar-logo .is-photo-profile{
    height:38px !important;
    max-height:38px !important;
  }
}

/* ── 4 · LOGIN / ACCOUNT — the emphasised item ───────────────────────────────
   Founder decision 2026-08-12: emphasise the auth item, NOT Free Lessons.
   (Free Lessons keeps its icon and normal styling; the earlier wine pill on it
   has been removed.)

   The item has TWO shapes over its life and both must be covered, because the
   platform replaces the Login anchor's parent innerHTML on login:
     logged out -> li > a[href*="/account/login"]
     logged in  -> li > a#kn-accmenu-btn   (+ sibling <ul>)
   Selector 1 stops matching after the swap and selector 2 starts, so the
   emphasis carries across without any JS and without racing the swap.

   Fragility contract rule 4 is respected: no markup is injected inside the
   Login <li>, and nothing depends on its children surviving — each state is
   matched independently by its own selector.

   The desktop pill is deliberately applied to the LOGGED-OUT item only. The
   Account anchor also contains the 45px avatar the platform injects, and boxing
   that inside a pill reads badly; signed-in users get colour + weight instead.  */
.is-topbar .is-menu-links > li:has(> a[href*="/account/login"]) > a,
.is-topbar .is-menu-links > li > a#kn-accmenu-btn{
  color:#7A2436 !important;
  font-weight:600 !important;
}
@media (min-width:1025px){
  .is-topbar .is-menu-links > li:has(> a[href*="/account/login"]) > a{
    border:1px solid #7A2436;
    border-radius:999px;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* ── 5 · LOGIN ROW ───────────────────────────────────────────────────────────
   Proko pattern: auth sits at the bottom of the drawer behind a divider.
   Requires Login to be LAST in Menu Builder (see the click-list).
   Self-disarming: after the platform swaps the anchor for the Account menu the
   :has() stops matching, so signed-in users get the platform's native styling.  */
@media (max-width:1024px){
  .is-topbar .is-menu-links > li:has(> a[href*="/account/login"]){
    margin-top:18px;
    border-top:1px solid rgba(28,22,18,.12);
    padding-top:10px;
  }
}

/* ── 7 · MOBILE SUBMENU: make the caret tappable ─────────────────────────────
   Platform bug, not ours. The bundle DOES bind a submenu toggle to the caret
   <span> for widths under 1024:

       r && r.addEventListener("click", t => { if (!(innerWidth >= 1024)) {
             const r = i.querySelector("ul");
             r && (hasClass(r,"active") ? removeClass(r,"active") : addClass(r,"active"));
             t.preventDefault(); t.stopImmediatePropagation(); } });

   ...but the platform's own CSS sets
       .is-menu ul li a>span { pointer-events:none !important }
   so that click can never land. The tap falls through to the <a> and navigates
   to the parent page instead of opening the submenu (founder-reported on About).

   Re-enabling pointer events lets the platform's own handler run. Because that
   handler calls preventDefault + stopImmediatePropagation, the drawer stays open
   and no navigation happens — verified live 2026-08-12: submenu opens, drawer
   still open, still on the same page.

   Scoped with :has(> ul) so it can only ever affect items that actually have a
   submenu. (Items without one carry no span at all, so they are untouched either
   way — confirmed on Reviews — but the guard makes that explicit and safe.)
   Tapping the LABEL still navigates to the parent page; tapping the CARET opens
   the submenu. That is the Udemy/Proko drill-in pattern.

   HIT AREA — v2, 2026-08-12. The first version grew the tap target with
   padding + negative margins. That REGRESSED: founder reported the mobile menu
   scrolling sideways. Measured cause — the drawer's scrollWidth counts the span's
   padding box even though the negative margin pulls it back visually, so
   padding-right:12px produced exactly 12px of horizontal overflow
   (baseline 312 -> 324 on a 312px drawer).

   v2 uses an absolutely-positioned ::after instead, which adds NO layout width.
   Two details that matter:
     - `right:0`, never a negative right. A negative right on the pseudo-element
       still contributes to scrollWidth (measured: right:-10px => 10px overflow).
       Growth is left/top/bottom only.
     - the ::after inherits pointer-events:auto and is not itself an event target,
       so the click still lands on the span the platform handler is bound to.
   Verified: drawer scrollWidth 312 == clientWidth 312, identical to baseline with
   no caret fix at all; submenu opens; drawer stays open.                        */
@media (max-width:1024px){
  .is-topbar .is-menu ul li:has(> ul) > a > span{
    pointer-events:auto !important;
    position:relative !important;
  }
  .is-topbar .is-menu ul li:has(> ul) > a > span::after{
    content:"" !important;
    position:absolute !important;
    top:-18px !important;
    bottom:-18px !important;
    left:-20px !important;             /* into the space-between gap, not the label */
    right:0 !important;                /* MUST stay 0 - see note above */
  }
  /* Guard: the drawer must never scroll sideways, whatever a future rule adds. */
  .is-topbar .is-menu{
    overflow-x:hidden !important;
  }
}

/* ── 8 · MOBILE SUBMENU: kill the GPU promotion that softens the text ────────
   Founder-reported: Account dropdown text looks slightly blurred on mobile when
   expanded. Cause is the platform base rule, which applies at EVERY width —
   the only mobile override is `position:relative`:

       .is-menu li ul{ transition:.2s ease-out; opacity:0;
                       transform:translate3d(0,0,0) scale(.8); visibility:hidden; }

   translate3d promotes the submenu to its own GPU layer, and the layer lands on
   a fractional offset (measured y=320.23 on the live homepage at 390px). Text
   painted into a composited layer at a subpixel offset is exactly what renders
   soft. It affects EVERY expanded submenu on mobile, not just Account.

   In a drawer the scale-in animation buys nothing, so drop it below 1024 and the
   submenu paints on the normal layer. Hiding is unaffected: on mobile the
   platform hides submenus with `.is-menu li ul{display:none}`, not with the
   transform — verified closed=display:none, open=display:block after this rule. */
@media (max-width:1024px){
  .is-topbar .is-menu li ul,
  .is-topbar .is-menu li ul.active{
    transition:none !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}

/* ── 9 · DRAWER ICONS (mobile only) ──────────────────────────────────────────
   Matched on href, so no per-item classname is needed and a rename cannot break
   them. Drawn as CSS masks over currentColor, which means each icon inherits its
   row's colour — Free Lessons' icon comes out wine automatically, and the Login
   icon disappears cleanly when the platform swaps in the Account menu.

   Why mobile only: the desktop row already sits at exactly 980px after the More
   cut. Adding ~32px per item there would re-break the clipping we just fixed.

   Why NOT the platform's own icon field: every menu item has an `html` field and
   Home used to ship `<i class="icon ion-android-home">`, but Ionicons is NOT
   loaded on the live site — probed 2026-08-12, the glyph resolves to empty
   content. Native icons would need us to add a webfont; masks need nothing.

   The alignment rules are load-bearing. Platform anchors are
   `display:flex; justify-content:space-between`, so simply adding a ::before
   pushes the LABEL to the far right edge. flex-start on the anchor plus
   margin-left:auto on the caret span restores icon → label → caret.

   BUG FIXED 2026-08-12 (founder-reported: "the account menu icon is a pure
   square"). The first version put the sizing + `background-color:currentColor`
   on a blanket `> li > a::before`, so ANY top-level item without a matching mask
   painted a solid 20x20 block. That hit the Account item after login — and hit
   About too, until its submenu existed for the :has() to match.

   The box is now created ONLY by the selector list below, so an item with no
   icon has no pseudo-element at all. Do not reintroduce a blanket base rule.
   (A `display:none` base plus `display:block` re-enables was tried and FAILED:
   the blanket selector out-specifies the href-based ones, so it won and every
   icon vanished. Creating the box only where wanted is the correct shape.)
   #kn-accmenu-btn is additionally excluded by name — belt and braces, since the
   platform gives the Account row its own avatar.                               */
@media (max-width:1024px){
  .is-topbar .is-menu ul.is-menu-links li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li > a > span{
    margin-left:auto !important;       /* keeps the caret hard right */
  }
  /* The icon box exists ONLY for these items. */
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="/page/course-library"]::before,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="/page/recorded-courses"]::before,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="/page/live-workshops"]::before,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="alekhyam-free-lessons"]::before,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="/page/reviews"]::before,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="/account/login"]::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(ul a[href*="about-alekhyam"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(ul a[href*="shop.alekhyam.com"]) > a::before{
    content:"" !important;
    display:block !important;
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    margin-right:12px !important;
    background-color:#6E4A42 !important;   /* walnut, 7.72:1 - muted by HUE not alpha */
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:22px 22px !important;    mask-size:22px 22px !important;
  }
  /* Never give the post-login Account row a mask box. */
  .is-topbar .is-menu ul.is-menu-links > li > a#kn-accmenu-btn::before{
    content:none !important;
    display:none !important;
  }
  /* ...but keep its label aligned with the iconed rows above it. */
  .is-topbar .is-menu ul.is-menu-links > li > a#kn-accmenu-btn{
    /* label rail = 15 gutter + 22 icon + 12 gap. Was 32px, sized for the old
       21px box and already 8px short, so the rail kinked after sign-in. */
    padding-left:49px !important;
  }
  /* Course Library — layers */
  .is-topbar .is-menu-links > li > a[href*="/page/course-library"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 7.9 4.4 4 4.6v13c3.9-.2 6.4.5 8 2 1.6-1.5 4.1-2.2 8-2v-13c-3.9-.2-6.4.5-8 2z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 7.9 4.4 4 4.6v13c3.9-.2 6.4.5 8 2 1.6-1.5 4.1-2.2 8-2v-13c-3.9-.2-6.4.5-8 2z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E") !important;
  }
  /* Live Workshops — video camera */
  /* Recorded Courses — play mark. PRE-WIRED for the slug /page/recorded-courses.
     If the Knorish page lands on a different slug this simply does not match,
     which is harmless. Deliberately a different metaphor from the open book
     (all courses) and the easel (live workshops). */
  .is-topbar .is-menu-links > li > a[href*="/page/recorded-courses"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10.2 8.6 16 12l-5.8 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10.2 8.6 16 12l-5.8 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/page/live-workshops"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='11' rx='1.6'/%3E%3Cpath d='M12 14.5v2.4'/%3E%3Cpath d='M6.8 21 12 16.9 17.2 21'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='11' rx='1.6'/%3E%3Cpath d='M12 14.5v2.4'/%3E%3Cpath d='M6.8 21 12 16.9 17.2 21'/%3E%3C/svg%3E") !important;
  }
  /* Free Lessons — gift */
  .is-topbar .is-menu-links > li > a[href*="alekhyam-free-lessons"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='9.4' width='16.8' height='11.2' rx='2.6'/%3E%3Cpath d='M12 9.4v11.2'/%3E%3Cpath d='M12 9.4C10.3 6.5 8.9 5.2 7.7 5.4a2 2 0 0 0 .2 4h8.2a2 2 0 0 0 .2-4c-1.2-.2-2.6 1.1-4.3 4z'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='9.4' width='16.8' height='11.2' rx='2.6'/%3E%3Cpath d='M12 9.4v11.2'/%3E%3Cpath d='M12 9.4C10.3 6.5 8.9 5.2 7.7 5.4a2 2 0 0 0 .2 4h8.2a2 2 0 0 0 .2-4c-1.2-.2-2.6 1.1-4.3 4z'/%3E%3C/svg%3E") !important;
  }
  /* Reviews — star */
  .is-topbar .is-menu-links > li > a[href*="/page/reviews"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.9 2.5 5.1 5.6.8-4.1 4 1 5.6-5-2.6-5 2.6 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.9 2.5 5.1 5.6.8-4.1 4 1 5.6-5-2.6-5 2.6 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E") !important;
  }
  /* Login — sign-in arrow. Self-removing: after the auth swap the anchor is
     #kn-accmenu-btn with no login href, so this stops matching.                */
  .is-topbar .is-menu-links > li > a[href*="/account/login"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.6h4.2a2.4 2.4 0 0 1 2.4 2.4v12a2.4 2.4 0 0 1-2.4 2.4h-4.2'/%3E%3Cpath d='m9.2 16.4 4.4-4.4-4.4-4.4'/%3E%3Cpath d='M13.6 12H3.6'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.6h4.2a2.4 2.4 0 0 1 2.4 2.4v12a2.4 2.4 0 0 1-2.4 2.4h-4.2'/%3E%3Cpath d='m9.2 16.4 4.4-4.4-4.4-4.4'/%3E%3Cpath d='M13.6 12H3.6'/%3E%3C/svg%3E") !important;
  }
  /* About — people. Matched via its submenu, because once About becomes a pure
     toggle its own href is empty and there is nothing else to match on.
     (Was an info-circle; changed 2026-08-12 at founder request — "about us"
     reads better as people than as an information glyph.)                      */
  .is-topbar .is-menu-links > li:has(ul a[href*="about-alekhyam"]) > a::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='8.4' r='3.4'/%3E%3Cpath d='M3.6 20.4a5.8 5.8 0 0 1 11.6 0'/%3E%3Ccircle cx='17.2' cy='9.8' r='2.3'/%3E%3Cpath d='M16.8 15.6a4.5 4.5 0 0 1 3.6 4.8'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='8.4' r='3.4'/%3E%3Cpath d='M3.6 20.4a5.8 5.8 0 0 1 11.6 0'/%3E%3Ccircle cx='17.2' cy='9.8' r='2.3'/%3E%3Cpath d='M16.8 15.6a4.5 4.5 0 0 1 3.6 4.8'/%3E%3C/svg%3E") !important;
  }
  /* More — ellipsis. Matched via its Shop child, same reasoning as About.      */
  .is-topbar .is-menu-links > li:has(ul a[href*="shop.alekhyam.com"]) > a::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.4' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.6' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.4' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.6' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  /* ── 9b · SUB-ITEM ICONS (added 2026-08-12) ───────────────────────────────
     Slightly smaller and lighter than the parent rows so the hierarchy still
     reads. Matched with the case-insensitive `i` flag because the live Contact
     link is `/page/Contact` with a capital C — matching it case-sensitively
     would silently miss.
     The Account submenu (Dashboard / Profile / Logout) is deliberately left
     alone: the platform injects those and Dashboard carries no href to match. */
  .is-topbar .is-menu-links > li ul > li > a{ padding-left:32px !important; }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/recorded-courses" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="about-alekhyam" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="alekhyam-faq" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/contact" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="shop.alekhyam.com" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="tamboora.in" i]::before{
    content:"" !important;
    display:block !important;
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    margin-right:10px !important;
    background-color:#6E4A42 !important;
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:18px 18px !important;    mask-size:18px 18px !important;
  }
  /* About Alekhyam — document */
  /* Recorded Courses — play mark, SAME glyph as the top-level rule above. It moved
     down here on 2026-08-12 when the item was nested under Course Library to stop
     the desktop bar clipping its own last row. The top-level selector needs the
     anchor to be a direct child of a direct child of .is-menu-links, so nesting
     silently dropped the icon; matching it at BOTH depths is what keeps the mark
     attached regardless of where the item sits in the menu tree. */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/recorded-courses" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10.2 8.6 16 12l-5.8 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10.2 8.6 16 12l-5.8 3.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="about-alekhyam" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.4a2 2 0 0 1 2-2h7.2l4.8 4.8v10.4a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M14.2 3.4v5h5'/%3E%3Cpath d='M8.8 14h6.4'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.4a2 2 0 0 1 2-2h7.2l4.8 4.8v10.4a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M14.2 3.4v5h5'/%3E%3Cpath d='M8.8 14h6.4'/%3E%3C/svg%3E") !important;
  }
  /* FAQ — question in a circle */
  .is-topbar .is-menu-links > li ul > li > a[href*="alekhyam-faq" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.7 9.6a2.4 2.4 0 1 1 3.1 2.3c-.6.2-.9.8-.9 1.4v.3'/%3E%3Ccircle cx='12' cy='16.9' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.7 9.6a2.4 2.4 0 1 1 3.1 2.3c-.6.2-.9.8-.9 1.4v.3'/%3E%3Ccircle cx='12' cy='16.9' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  /* Contact — envelope */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/contact" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.2' width='17.2' height='13.6' rx='2.4'/%3E%3Cpath d='m4.2 6.8 7.8 5.5 7.8-5.5'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.2' width='17.2' height='13.6' rx='2.4'/%3E%3Cpath d='m4.2 6.8 7.8 5.5 7.8-5.5'/%3E%3C/svg%3E") !important;
  }
  /* Shop — bag */
  .is-topbar .is-menu-links > li ul > li > a[href*="shop.alekhyam.com" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8.4h13.2l-.9 11.2a1.6 1.6 0 0 1-1.6 1.5H7.9a1.6 1.6 0 0 1-1.6-1.5z'/%3E%3Cpath d='M9.2 8.4V6.6a2.8 2.8 0 0 1 5.6 0v1.8'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8.4h13.2l-.9 11.2a1.6 1.6 0 0 1-1.6 1.5H7.9a1.6 1.6 0 0 1-1.6-1.5z'/%3E%3Cpath d='M9.2 8.4V6.6a2.8 2.8 0 0 1 5.6 0v1.8'/%3E%3C/svg%3E") !important;
  }
  /* Community — globe */
  .is-topbar .is-menu-links > li ul > li > a[href*="tamboora.in" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.4a13 13 0 0 1 0 17.2 13 13 0 0 1 0-17.2z'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.4a13 13 0 0 1 0 17.2 13 13 0 0 1 0-17.2z'/%3E%3C/svg%3E") !important;
  }

  /* ── 9c · ACCOUNT AVATAR MUST NOT BE THE CLICK TARGET ─────────────────────
     Founder-reported: signed in on mobile, tapping the profile picture RELOADS
     the page instead of expanding Dashboard/Profile/Logout.

     Cause, and it was introduced by section 7. The Account anchor is
     `<a href="" id="kn-accmenu-btn">`, and an EMPTY href resolves to the current
     URL — so any unprevented click on it reloads. The platform's own guard is:

         if (event.target.tagName.toLowerCase() === "a" && href === "") preventDefault()

     — it only fires when the anchor ITSELF is the event target. Section 7 turned
     `pointer-events` back on for the caret span of every item with a submenu,
     and the Account item has one, so a tap on the avatar or caret made the
     <i>/<span> the target instead of the <a>. The guard did not fire, and the
     browser followed the empty href.

     Putting the inner nodes back to pointer-events:none makes the anchor the
     target again, so the platform prevents default, keeps the drawer open and
     toggles the submenu. This rule carries an id so it outranks section 7.      */
  .is-topbar .is-menu-links > li > a#kn-accmenu-btn > span,
  .is-topbar .is-menu-links > li > a#kn-accmenu-btn > span *{
    pointer-events:none !important;
  }

  /* The Login icon is the ONLY one left on currentColor. Section 4 paints that
     anchor wine, so the icon inherits wine — and because it inherits rather than
     hard-codes, it keeps working after the platform swaps the row for the
     Account menu. A fixed value here could leak onto a signed-in learner's row. */
  .is-topbar .is-menu-links > li > a[href*="/account/login"]::before{
    background-color:currentColor !important;
  }

  /* ── 9d · OPTICAL HIERARCHY (premium pass, 2026-08-12) ────────────────────
     Content icons sit back at 50% so the labels lead and the set reads as a
     quiet system rather than a row of badges. The auth row is the exception —
     it is the emphasised item (section 4), so its icon carries full weight and
     picks up the wine colour through currentColor.                            */
  .is-topbar .is-menu-links > li > a[href*="/account/login"]::before{
    opacity:.9 !important;
  }

  /* Keep any scrolling inside the drawer from chaining to the page behind it. */
  .is-topbar .is-menu{
    overscroll-behavior:contain !important;
  }
}

/* ── 10 · "OPENS IN A NEW TAB" INDICATOR ─────────────────────────────────────
   Keyed on target="_blank", which makes it SELF-TRUTHFUL: the arrow can only
   appear once the item genuinely opens a new tab.

   As of 2026-08-12 Shop and Community carry target:"false" in the navbar
   settings and their rendered anchors have NO target attribute at all — so
   nothing shows yet, by design. Flip the target in Menu Builder for Shop and
   Community and the arrow appears on its own. No CSS edit needed either way,
   and it can never claim a new tab that does not happen.                       */
.is-topbar .is-menu a[target="_blank"]::after{
  content:"" !important;
  display:inline-block !important;
  flex:0 0 11px !important;
  width:11px !important;
  height:11px !important;
  margin-left:6px !important;
  margin-top:2px !important;
  align-self:flex-start !important;   /* superscript, not centred */
  background-color:#6E4A42 !important;
  opacity:1 !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-size:11px !important;        mask-size:11px !important;
}

/* ── 11 · DESKTOP DROPDOWNS: start below the bar, not inside it ──────────────
   Founder-reported: "the right side dropdowns are not behaving properly."

   Measured cause: the platform gives `.is-menu li ul` `position:absolute` with a
   `right` but NO `top`, so the dropdown lands at its static position — directly
   under the ANCHOR (bottom y=50), not under the BAR (bottom y=77). It therefore
   overlapped the bar's lower 27px, with its white background and drop shadow
   cutting across the menu row.

   This was always true, but it only became visible when section 1 made the bar
   solid cream — against a transparent bar there was nothing to cut across.

   `top:100%` resolves against the li, which is full bar height, so the dropdown
   starts exactly at the bar's bottom edge. Verified 2026-08-12: About and More
   both go from 27px of overlap to 0.

   Scoped to `> ul.is-menu-links > li > ul` — direct children only — so any
   deeper nesting keeps the platform's own flyout positioning.                  */
@media (min-width:1025px){
  .is-topbar .is-menu > ul.is-menu-links > li > ul{
    top:100% !important;
    margin-top:0 !important;
  }
}

/* ── 6 · OPTIONAL, NOT ACTIVE: a separate "Sign up" item ─────────────────────
   Knorish has ONE auth item and replaces its contents with the Account menu on
   login. A second Sign up item would survive that swap and keep saying "Sign up"
   next to a signed-in learner's own Account menu.
   If you ever add one — link /account/signup, verified 200 on 2026-08-12, and
   safe because it does NOT contain the substring /account/login so it cannot
   hijack the swap — uncomment the rule below. It is gated on .is-authenticated,
   which the SERVER puts on .is-wrapper, so it is correct at first paint with no
   JS timing race.

   .is-wrapper.is-authenticated
     .is-topbar .is-menu-links > li:has(> a[href*="/account/signup"]){
       display:none !important;
     }
                                                                                */


@media (max-width:1024px){

  /* ══ 1 · BAND LAYOUT ═════════════════════════════════════════════════════
     Every member of a float group carries the SAME margin-top. Floats align to
     the top of the line box, so a margin on only the first item lets its
     siblings ride up and collide with the caption — that exact bug is on record
     from this session's first attempt. */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]){
    float:left !important;
    width:auto !important;
    border-top:0 !important;
    box-sizing:border-box !important;
    margin-top:32px !important;
  }
  /* only the first of each band starts a new line */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]){
    clear:both !important;
    position:relative !important;
    margin-left:15px !important;
  }

  /* ══ 2 · BAND CAPTIONS ═══════════════════════════════════════════════════ */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"])::before{
    content:"GET THE APP" !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"])::before{
    content:"FOLLOW" !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"])::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"])::before{
    display:block !important;
    position:absolute !important;
    top:-22px !important;
    left:0 !important;
    font-size:10px !important;
    letter-spacing:1.7px !important;
    font-weight:700 !important;
    color:#6E4A42 !important;          /* 7.72:1 */
    opacity:1 !important;
    white-space:nowrap !important;
  }

  /* ══ 3 · APP BUTTONS — rectangular, side by side, 52px tall ══════════════ */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]){
    width:calc(50% - 20px) !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]){
    margin-right:10px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]) > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:52px !important;        /* was 38px — under both platform minimums */
    padding:0 10px !important;
    border:1px solid rgba(28,22,18,.15) !important;
    border-radius:12px !important;
    background:#FFFDFB !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:.2px !important;
    color:#1C1612 !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]) > a::before{
    content:"" !important;
    display:block !important;
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    margin-right:9px !important;
    background-color:#6E4A42 !important;
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:20px 20px !important;    mask-size:20px 20px !important;
    /* one neutral device+download mark, used for BOTH — see trademark note */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.4' y='2.8' width='11.2' height='18.4' rx='2.8'/%3E%3Cpath d='M12 7.8v6.2'/%3E%3Cpath d='m9.5 11.5 2.5 2.5 2.5-2.5'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.4' y='2.8' width='11.2' height='18.4' rx='2.8'/%3E%3Cpath d='M12 7.8v6.2'/%3E%3Cpath d='m9.5 11.5 2.5 2.5 2.5-2.5'/%3E%3C/svg%3E") !important;
  }

  /* ══ 4 · SOCIAL — 26px glyph in a 48px tile ══════════════════════════════ */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]) > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;            /* label hidden visually, kept for AT */
    padding:0 !important;
    margin-right:12px !important;
    min-width:48px !important;
    min-height:48px !important;
    border-radius:50% !important;
    border:1px solid rgba(28,22,18,.13) !important;
    background:#FFFDFB !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]) > a::before{
    content:"" !important;
    display:block !important;
    flex:0 0 26px !important;
    width:26px !important;
    height:26px !important;
    margin-right:0 !important;
    background-color:#6E4A42 !important;
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:26px 26px !important;    mask-size:26px 26px !important;
  }
  /* Instagram — flash dot is a SOLID mark, not an outlined ring */
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="instagram.com"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='16.9' cy='7.1' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='16.9' cy='7.1' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  /* YouTube — solid play triangle; a stroked one blunts to a lozenge at 26px */
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="youtube.com"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='5.4' width='19.2' height='13.2' rx='4.2'/%3E%3Cpath d='M10.3 9.5 15.7 12l-5.4 2.5z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='5.4' width='19.2' height='13.2' rx='4.2'/%3E%3Cpath d='M10.3 9.5 15.7 12l-5.4 2.5z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }
  /* Facebook — the f is a LETTERFORM: solid fill inside a ring.
     The previous version outlined it, which nobody does to an f. */
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="facebook.com"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M13.05 20.9v-6.6h2.25l.35-2.7h-2.6v-1.72c0-.78.21-1.31 1.34-1.31h1.43V5.98a19 19 0 0 0-2.09-.11c-2.07 0-3.48 1.27-3.48 3.59v1.94H8.85v2.7h2.4v6.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M13.05 20.9v-6.6h2.25l.35-2.7h-2.6v-1.72c0-.78.21-1.31 1.34-1.31h1.43V5.98a19 19 0 0 0-2.09-.11c-2.07 0-3.48 1.27-3.48 3.59v1.94H8.85v2.7h2.4v6.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important;
  }

  /* icon-only rows must not also print the base block's new-tab arrow */
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="play.google.com"]::after,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="apps.apple.com"]::after,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="instagram.com"]::after,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="youtube.com"]::after,
  .is-topbar .is-menu ul.is-menu-links > li > a[href*="facebook.com"]::after{
    content:none !important;
  }

  /* ══ 5 · LEGAL MICRO-LINKS ═══════════════════════════════════════════════ */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]) > a{
    font-size:11.5px !important;
    letter-spacing:.2px !important;
    color:#6E4A42 !important;          /* 7.72:1 */
    opacity:1 !important;
    padding:6px 16px 6px 0 !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]) > a::before{
    content:none !important;
  }

  /* ══ 6 · TRUST SENTENCE ══════════════════════════════════════════════════
     Matched on the EMPTY href, not on :last-child alone — any Menu Builder item
     added after it would otherwise silently re-target this styling onto the
     wrong row.
     pointer-events:none is load-bearing, not cosmetic: an empty href resolves to
     the CURRENT url, so a tap on the address would reload the page and throw the
     drawer away. cursor:default does nothing on touch. */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child{
    clear:both !important;
    float:none !important;
    display:block !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child > a{
    display:block !important;
    white-space:normal !important;
    pointer-events:none !important;
    cursor:default !important;
    font-size:10.5px !important;
    line-height:1.75 !important;
    color:#6B5A55 !important;          /* 6.52:1 */
    opacity:1 !important;
    padding:20px 20px 32px 15px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child > a::after{
    content:none !important;
  }
}

/* Everything in this section belongs to the drawer only. */
@media (min-width:1025px){
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child{
    display:none !important;
  }
}


@media (max-width:1024px){

  /* ── HOME ─────────────────────────────────────────────────────────────────
     EXACT href match. NEVER [href*="/"] — the wildcard matches every internal
     link on the site and would paint an icon box on all of them.
     Home returned to the menu on 2026-08-13 at founder request. Its first life
     shipped the platform icon field (<i class="icon ion-android-home">), which
     rendered EMPTY because Ionicons is not loaded on the live site (probed
     2026-08-12) — that is why it was removed. A mask needs no webfont.
     The logo anchor also points at "/" but sits outside ul.is-menu-links, so it
     cannot match this selector.                                              */
  .is-topbar .is-menu ul.is-menu-links > li > a[href="/"]::before{
    content:"" !important;
    display:block !important;
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    margin-right:12px !important;
    background-color:#6E4A42 !important;
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:22px 22px !important;    mask-size:22px 22px !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.4 12 4.2l8.2 6.2v8.4a1.4 1.4 0 0 1-1.4 1.4H5.2a1.4 1.4 0 0 1-1.4-1.4z'/%3E%3Cpath d='M9.6 20.2v-6.4h4.8v6.4'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.4 12 4.2l8.2 6.2v8.4a1.4 1.4 0 0 1-1.4 1.4H5.2a1.4 1.4 0 0 1-1.4-1.4z'/%3E%3Cpath d='M9.6 20.2v-6.4h4.8v6.4'/%3E%3C/svg%3E") !important;
  }

  /* ── SUB-ITEM ICONS FOR THE THREE ITEMS THAT MOVED DOWN A LEVEL ───────────
     Live Workshops and Reviews were top-level until v5; All Courses & Workshops
     is new. The top-level selectors need the anchor to be a direct child of a
     direct child of .is-menu-links, so nesting silently drops the icon —
     matching at BOTH depths is what keeps the mark attached regardless of where
     the item sits in the tree (same fix as Recorded Courses, 2026-08-12).
     Glyphs are carried down VERBATIM so an item keeps its identity when it
     moves. The old top-level rules are left in place: they simply stop matching,
     which is harmless, and they make the move reversible.                     */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/course-library" i]::before,
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/reviews" i]::before{
    content:"" !important;
    display:block !important;
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    margin-right:10px !important;
    background-color:#6E4A42 !important;
    opacity:1 !important;
    -webkit-mask-repeat:no-repeat !important;  mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;   mask-position:center !important;
    -webkit-mask-size:18px 18px !important;    mask-size:18px 18px !important;
  }
  /* Live Workshops — easel (verbatim from the top-level rule) */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='11' rx='1.6'/%3E%3Cpath d='M12 14.5v2.4'/%3E%3Cpath d='M6.8 21 12 16.9 17.2 21'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='11' rx='1.6'/%3E%3Cpath d='M12 14.5v2.4'/%3E%3Cpath d='M6.8 21 12 16.9 17.2 21'/%3E%3C/svg%3E") !important;
  }
  /* All Courses & Workshops — layers, the Course Library mark (verbatim) */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/course-library" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 7.9 4.4 4 4.6v13c3.9-.2 6.4.5 8 2 1.6-1.5 4.1-2.2 8-2v-13c-3.9-.2-6.4.5-8 2z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 7.9 4.4 4 4.6v13c3.9-.2 6.4.5 8 2 1.6-1.5 4.1-2.2 8-2v-13c-3.9-.2-6.4.5-8 2z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E") !important;
  }
  /* Reviews — star (verbatim from the top-level rule) */
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/reviews" i]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.9 2.5 5.1 5.6.8-4.1 4 1 5.6-5-2.6-5 2.6 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.9 2.5 5.1 5.6.8-4.1 4 1 5.6-5-2.6-5 2.6 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E") !important;
  }

  /* ── START FREE · drawer ──────────────────────────────────────────────────
     Founder ruling 2026-08-13: "should not be in the More but should not compete
     with paid menu links, so somewhere in between." So it is neither buried nor
     a solid primary button — a soft wine wash with wine text and a wine-tinted
     icon. It reads as an invitation, not a call to action that outranks the
     paid course links above it.
     It sits directly ABOVE the Login row, so the drawer's single hairline (base
     section 5, anchored on the Login <li>) falls between them: Start Free groups
     with the navigation, Login opens the auth zone below the line.            */
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a{
    background:rgba(122,36,54,.085) !important;
    color:#7A2436 !important;
    font-weight:600 !important;
    border-radius:10px !important;
    margin:6px 15px 2px !important;
    padding-top:11px !important;
    padding-bottom:11px !important;
  }
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a::before{
    background-color:#7A2436 !important;   /* icon joins the row, 8.5:1 on the wash */
  }
}

/* ── START FREE · desktop ───────────────────────────────────────────────────
   Login is the OUTLINED pill (border, no fill). Start Free is the TINTED pill
   (fill, no border). Two different weights, neither of them a solid primary —
   which is the whole point of the ruling: visible, but not shouting over the
   paid links, and not competing with each page's own primary CTA (contract C3).
   Placed before Login in the menu, so the bar reads
       Home · Course Library ▾ · About ▾ · More ▾ ···· Start Free · Login       */
@media (min-width:1025px){
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a{
    background:rgba(122,36,54,.085) !important;
    color:#7A2436 !important;
    font-weight:600 !important;
    border-radius:999px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


@media (max-width:1024px){

  .is-topbar .is-menu > ul.is-menu-links > li > a{
    padding-top:16px !important;
    padding-bottom:16px !important;
    line-height:22px !important;
  }

  .is-topbar .is-menu-links > li ul > li > a{
    padding-top:11px !important;
    padding-bottom:11px !important;
    line-height:22px !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]){
    margin-top:46px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"])::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"])::before{
    top:-30px !important;
    font-size:10.5px !important;
    letter-spacing:1.9px !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li > a[href="/"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 10.6 12 3.4l8.6 7.2'/%3E%3Cpath d='M5.6 9.8v9a1.8 1.8 0 0 0 1.8 1.8h9.2a1.8 1.8 0 0 0 1.8-1.8v-9'/%3E%3Cpath d='M9.8 20.6v-4.9a2.2 2.2 0 0 1 4.4 0v4.9'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/page/course-library"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 0 0 17.2 2.1 2.1 0 0 0 2.1-2.1 2.1 2.1 0 0 1 2.1-2.1H18a4.2 4.2 0 0 0 4.2-4.2C22.2 7.3 17.7 3.4 12 3.4Z'/%3E%3Ccircle cx='8.4' cy='8.6' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='7.2' cy='13.2' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='11.6' cy='16.4' r='1.25' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/page/live-workshops"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='3.4' width='14.8' height='10.8' rx='2'/%3E%3Cpath d='M7.2 20.8 12 14.2l4.8 6.6'/%3E%3Cpath d='M9 18.4h6'/%3E%3Ccircle cx='16.1' cy='10.8' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/page/recorded-courses"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 4.2h9.2'/%3E%3Cpath d='M5.6 7.2h12.8'/%3E%3Crect x='3.6' y='10.2' width='16.8' height='10.4' rx='2'/%3E%3Cpath d='M10.5 13.1 15 15.4l-4.5 2.3z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="alekhyam-free-lessons"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='8.4' width='18.4' height='4.4' rx='1.2'/%3E%3Cpath d='M4.8 12.8v6.2a1.8 1.8 0 0 0 1.8 1.8h10.8a1.8 1.8 0 0 0 1.8-1.8v-6.2'/%3E%3Cpath d='M12 8.4v12.4'/%3E%3Cpath d='M12 8.4C10.5 5.9 9.2 4.8 8.1 5a1.7 1.7 0 0 0 .2 3.4'/%3E%3Cpath d='M12 8.4c1.5-2.5 2.8-3.6 3.9-3.4a1.7 1.7 0 0 1-.2 3.4'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/page/reviews"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 14.3 9.3 20 9.8 15.7 13.6 16.9 19.2 12 16.3 7.1 19.2 8.3 13.6 4 9.8 9.7 9.3Z'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li > a[href*="/account/login"]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='9.6' r='2.9'/%3E%3Cpath d='M6.3 18.4a6.2 6.2 0 0 1 11.4 0'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='3.4' width='14.8' height='10.8' rx='2'/%3E%3Cpath d='M7.2 20.8 12 14.2l4.8 6.6'/%3E%3Cpath d='M9 18.4h6'/%3E%3Ccircle cx='16.1' cy='10.8' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/recorded-courses" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 4.2h9.2'/%3E%3Cpath d='M5.6 7.2h12.8'/%3E%3Crect x='3.6' y='10.2' width='16.8' height='10.4' rx='2'/%3E%3Cpath d='M10.5 13.1 15 15.4l-4.5 2.3z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/course-library" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.2' y='3.6' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.6' y='13.2' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.2' y='13.2' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="about-alekhyam" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 7.9 4.4 4 4.6v13c3.9-.2 6.4.5 8 2 1.6-1.5 4.1-2.2 8-2v-13c-3.9-.2-6.4.5-8 2Z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="alekhyam-faq" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.3 9.3a2.8 2.8 0 1 1 3.7 2.7c-.7.3-1 .9-1 1.6v.5'/%3E%3Ccircle cx='12' cy='17.2' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/contact" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.2' width='17.2' height='13.6' rx='2'/%3E%3Cpath d='m3.6 6.6 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="shop.alekhyam.com" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 7.8h13.2l-.9 11.2a1.6 1.6 0 0 1-1.6 1.5H7.9a1.6 1.6 0 0 1-1.6-1.5z'/%3E%3Cpath d='M9.2 7.8V6a2.8 2.8 0 0 1 5.6 0v1.8'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="tamboora.in" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='4.6'/%3E%3Ccircle cx='8' cy='15.2' r='4.6'/%3E%3Ccircle cx='16' cy='15.2' r='4.6'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li ul > li > a[href*="/page/reviews" i]::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 14.3 9.3 20 9.8 15.7 13.6 16.9 19.2 12 16.3 7.1 19.2 8.3 13.6 4 9.8 9.7 9.3Z'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li:has(ul a[href*="about-alekhyam"]) > a::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.8' cy='8.4' r='3.4'/%3E%3Cpath d='M3.8 20.4a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.8a3.4 3.4 0 0 1 .9 6.5M17.4 15a5.9 5.9 0 0 1 2.8 5.4'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }
  .is-topbar .is-menu-links > li:has(ul a[href*="shop.alekhyam.com"]) > a::before{
    --akh-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.4' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.6' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-image:var(--akh-g) !important;
            mask-image:var(--akh-g) !important;
  }

  .is-topbar .is-menu .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]{
    display:flex !important;
    align-items:center !important;
    margin:10px 15px 14px 0 !important;
    padding:16px 16px 16px 15px !important;
    background:#7a2436 !important;
    color:#fff !important;
    border-radius:0 14px 14px 0 !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:22px !important;
    letter-spacing:.1px !important;
  }

  .is-topbar .is-menu .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]::before{
    background-color:#fff !important;
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    margin-right:12px !important;
    -webkit-mask-size:22px 22px !important;   mask-size:22px 22px !important;
  }

  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a{
    background:transparent !important;
    color:#3c332d !important;
    font-weight:500 !important;
    border-radius:0 !important;
    margin:0 !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a::before{
    background-color:#6E4A42 !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]){
    height:auto !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]){
    width:calc((100% - 46px) * 0.5299) !important;
    max-width:202.29px !important;
    margin-right:16px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]){
    width:calc((100% - 46px) * 0.4701) !important;
    max-width:179.50px !important;
    margin-right:0 !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]) > a{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:contain !important;   /* contain => letterbox, never stretch */
    font-size:0 !important;               /* label hidden visually, kept for AT */
    line-height:0 !important;
    letter-spacing:0 !important;
    overflow:hidden !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]) > a{
    aspect-ratio:119.66407 / 40 !important;
    background-image:url("https://cdn.alekhyam.in/site-pages/shared-common-assets/nav-marks-v1/apple-app-store-badge.svg") !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]) > a{
    aspect-ratio:238.96 / 70.87 !important;
    background-image:url("https://cdn.alekhyam.in/site-pages/shared-common-assets/nav-marks-v1/google-play-badge.svg") !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]) > a::before{
    content:none !important;
    display:none !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]) > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    min-width:60px !important;
    min-height:60px !important;
    width:60px !important;
    height:60px !important;
    padding:0 !important;
    margin-right:12px !important;
    font-size:0 !important;               /* label kept in the DOM for AT */
  }
  /* the ::before stops being a walnut stencil and becomes real artwork */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]) > a::before,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]) > a::before{
    content:"" !important;
    display:block !important;
    background-color:transparent !important;
    -webkit-mask-image:none !important;   mask-image:none !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:contain !important;
    margin:0 !important;
    filter:none !important;
    transform:none !important;
    box-shadow:none !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]) > a::before{
    width:30px !important;  height:30px !important;  flex:0 0 30px !important;
    background-image:url("https://cdn.alekhyam.in/site-pages/shared-common-assets/nav-marks-v1/instagram-glyph-gradient.png") !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]) > a::before{
    width:34px !important;  height:30px !important;  flex:0 0 34px !important;
    background-image:url("https://cdn.alekhyam.in/site-pages/shared-common-assets/nav-marks-v1/youtube-icon-red.png") !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]) > a::before{
    width:30px !important;  height:30px !important;  flex:0 0 30px !important;
    background-image:url("https://cdn.alekhyam.in/site-pages/shared-common-assets/nav-marks-v1/facebook-logo-primary.png") !important;
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]) > a,
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]) > a{
    padding:11px 18px 11px 0 !important;
  }

  @keyframes akh-row-in{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
  @keyframes akh-sub-in{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }

  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li{
    animation:akh-row-in 300ms cubic-bezier(.22,.61,.36,1);
  }

  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(1){ animation-delay:0ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(2){ animation-delay:22ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(3){ animation-delay:44ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(4){ animation-delay:66ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(5){ animation-delay:88ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(6){ animation-delay:110ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(7){ animation-delay:132ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(8){ animation-delay:154ms }
  #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li:nth-child(n+9){ animation-delay:170ms }

  .is-topbar .is-menu ul.is-menu-links > li ul{
    animation:akh-sub-in 240ms cubic-bezier(.22,.61,.36,1);
  }

  @media (prefers-reduced-motion:reduce){
    #is-menu-toggle.active ~ .is-menu ul.is-menu-links > li,
    .is-topbar .is-menu ul.is-menu-links > li ul{ animation:none !important }
  }

  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child > a{
    padding:24px 22px 40px 15px !important;
    line-height:19px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AKH NAV v8 · 2026-09-02 · founder-authorized ("implement the CSS fixes now")

   REVERT = delete from this marker to EOF, republish as nav-v9.css, repoint the
   <link>. Every rule below is an OVERRIDE appended after the v7 passes; nothing
   above this line was edited, so the baseline stays byte-identical and diffable.

   WHY AN APPEND AND NOT AN EDIT. nav-v7.css is two stacked copies of the drawer
   stylesheet — ~32 selectors declared twice, first pass ~427-990, second pass
   ~1011-1303 — and source order decides, so the LATER copy always wins. That
   de-duplication is a real and separate job; coupling it to a user-visible fix
   would put a risky refactor and a visible change behind one deploy. Appending
   means every rule here wins by the same source-order mechanism the file already
   relies on, and the revert stays a truncation.

   Each section names the founder complaint or the audit finding it closes.
   Measurements are from the live site at 390x844, 820x1000 and 1440x900 on
   2026-09-02, taken only after asserting innerWidth > 0 (SOP 44 §6).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── v8-1 · DRAWER: reclaim the dead vertical space ─────────────────────────
   FOUNDER COMPLAINT 1: "on mobile there is so much white vertical space wasted
   near footer".

   Measured before: drawer scrollHeight 1056 against an 844 viewport — 212px
   hidden below the fold. The band gaps were 18 + 46 + 46 + 46 = 156px.

   The 46px is NOT arbitrary padding and must not be flattened. It decomposes as
   30px (the caption's `top:-30px` offset, which is store-badge clear space: a
   quarter of the 60px badge height, satisfying Apple's 40px floor and Google's
   "same size or larger" rule) plus 16px of discretionary separation ABOVE the
   caption. So:

     · app + social bands  46 -> 38   keeps all 30px of caption offset, spends 8
                                      of the 16 discretionary px. The trademark
                                      arithmetic is untouched.
     · legal band          46 -> 20   this band has NO caption. nav-v7.css:1025
                                      applies the same 46px to all eight band
                                      leaders, but the caption ::before at :1035
                                      is scoped to play.google.com and
                                      instagram.com only. The legal band has been
                                      reserving a caption slot for a caption that
                                      does not exist. This is the pure waste.

   Do NOT find/replace "46px" in this file: nav-v7.css:1174 and :1179 carry
   `calc((100% - 46px) * …)` for the badge widths, where the 46 is a HORIZONTAL
   sum (15px left inset + 16px inter-badge gap + 15px right inset) and has
   nothing to do with the band margin.                                        */
@media (max-width:1024px){
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="play.google.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="apps.apple.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="instagram.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="youtube.com"]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="facebook.com"]){
    margin-top:38px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="Terms-of-Services" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="return-and-refund" i]),
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href*="privacy-policy" i]){
    margin-top:20px !important;
  }

  /* The trust row measured 121px: 3 wrapped lines x 19px = 57px of sentence
     carrying 64px of padding (nav-v7.css:1300 `padding:24px 22px 40px 15px`).
     16/24 keeps a visible foot under the drawer and returns 24px.
     NOT touched: font-size stays 10.5px and colour stays #6B5A55 (6.52:1) —
     this is a statutory disclosure and shrinking it erodes an already-borderline
     contrast. pointer-events:none stays load-bearing: the href is empty, which
     resolves to the current URL, so a tap would reload and throw the drawer away. */
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href=""]):last-child > a{
    padding:16px 22px 24px 15px !important;
  }
}

/* ── v8-2 · DRAWER: Live Workshops stops impersonating a selected item ──────
   FOUNDER COMPLAINT 2: "the live workshop looks like always selected menu item".

   Two stacked causes, both here.

   (a) nav-v7.css:1133-1145 paints the depth-2 child anchor a solid wine slab —
       background #7a2436, white text, weight 700, radius 0 14px 14px 0, and
       margins/padding that make it 78px tall against its siblings' 44px. It is
       the only wine-filled element in the entire drawer, it out-shouts its own
       parent, and because the menu is ONE shared block rendered identically into
       all 96 pages, it looks the same on every page. A permanent highlight on a
       navigation row is read as "you are here" — which is exactly what the
       founder reported.

   (b) nav-v7.css:175-183 (rule 2d) force-opens the Course Library submenu on
       mobile. That rule is sound but STALE: its own comment reasons from "a
       single child hidden behind a control" — it was written when Course Library
       had ONE child (Recorded Courses). It now has THREE, so the drawer shows
       four rows where the author intended two.

   RULING TAKEN HERE: keep the submenu open (nothing hidden behind a caret nobody
   finds — the original argument still holds, and it now holds harder with three
   children) and demote the child to a normal indented row. Live Workshops keeps
   weight 600 so it still leads its siblings; it just stops being a fake state.
   Recovers 34px and removes the drawer's loudest wrong signal.

   If Live Workshops deserves top-level prominence — and the case is good, it is
   the only inventory on the site that expires — that is a data-settings promotion
   to the bar, not a paint job on a grandchild. Left for the structure lane.     */
@media (max-width:1024px){
  .is-topbar .is-menu .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:11px 16px 11px 32px !important;
    background:transparent !important;
    color:rgba(0,0,0,.9) !important;
    border-radius:0 !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:22px !important;
    letter-spacing:.1px !important;
  }
  .is-topbar .is-menu .is-menu-links > li ul > li > a[href*="/page/live-workshops" i]::before{
    background-color:#6E4A42 !important;
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    margin-right:10px !important;
    -webkit-mask-size:18px 18px !important;
            mask-size:18px 18px !important;
  }
}

/* ── v8-3 · DRAWER: restore the ruled Start Free treatment ──────────────────
   FOUNDER COMPLAINT 5: "the desktop version has start free cta highlighted"
   — i.e. the emphasis is INVERTED between breakpoints.

   This is a regression, not a missing design. nav-v7.css:970-985 already gives
   Start Free the drawer pill under a recorded founder ruling of 2026-08-13,
   quoted in the file itself: "should not be in the More but should not compete
   with paid menu links, so somewhere in between". A duplicate block 178 lines
   later (nav-v7.css:1155-1167) resets it to `background:transparent; color:#3c332d;
   font-weight:500` — measured live as exactly that — so the ruling has been
   silently reverted for however long the second pass has been live, leaving the
   mobile drawer with no primary action at all.

   Restoring it is a deletion of an accident, not a new decision.

   DELIBERATELY NOT CHANGED: the desktop pair stays tinted-pill + outlined-pill.
   The same 13-Aug ruling says in as many words that neither should be a solid
   primary, so making Start Free solid would overturn a founder decision under
   cover of a bug fix. What IS wrong on desktop is that the two pills abut at
   exactly 0px (measured: Start Free ends 1020, Login starts 1020) so they read
   as one two-part control — that is fixed in v8-6 with a gutter.               */
@media (max-width:1024px){
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a{
    background:rgba(122,36,54,.085) !important;
    color:#7A2436 !important;
    font-weight:600 !important;
    border-radius:10px !important;
    margin:6px 15px 2px !important;
    padding-top:11px !important;
    padding-bottom:11px !important;
  }
  .is-topbar .is-menu-links > li:has(> a[href*="alekhyam-free-lessons"]) > a::before{
    background-color:#7A2436 !important;
  }
}

/* ── v8-4 · DISCLOSURE: About and More finally say they open ────────────────
   FOUNDER COMPLAINT 4: "about submenu is hidden without hint under about main
   menu label".

   Verified live 2026-09-02: every top-level anchor's ::after computes to
   `content:none`, and there is no <span> child on any of them — so there is no
   caret anywhere, on mobile or desktop. About and More look identical to Home
   and Start Free, which are real destinations.

   The behaviour is fine — re-tested live: tapping About takes its <ul> from
   display:none to block and does NOT navigate. Only the affordance is missing.

   IT MUST BE A ::after, NEVER A REAL CHILD ELEMENT. nav-v7.css:577-598 records
   the platform guard verbatim: it only prevents the page reload when
   `event.target.tagName === "a" && href === ""`. A real child element would BE
   the event target, the guard would miss, and the empty href would resolve to
   the current URL and reload the page — a bug this site has already paid for. A
   pseudo-element can never be an event target, so the guard keeps firing.
   pointer-events:none is belt-and-braces on top of that.

   ~45 lines of v7 caret machinery (nav-v7.css:350-367, :433) target
   `li:has(> ul) > a > span` — markup this menu has never rendered. It is inert,
   it is not removed here (append-only), and it cannot conflict: it styles a
   span, this styles ::after. Flagged for the de-duplication pass.

   STATE HOOK, and the reason this needs no JavaScript: the platform toggles the
   class `active` on the CHILD <ul> — not on the <li>, not on the <a>. Verified
   by snapshotting className open and closed. So `li:has(> ul.active)` is a pure
   CSS open-state selector, and the chevron can rotate with no MutationObserver
   and no race against the platform's DOMContentLoaded handler.

   Measured cost on the desktop bar: +8px total (Login's right edge 1098 -> 1106).
   The currency control starts at x=1126, so 20px of clearance remains.          */
.is-topbar .is-menu ul.is-menu-links > li:has(> ul) > a::after{
  content:"" !important;
  display:inline-block !important;
  width:7px !important;
  height:7px !important;
  margin-left:7px !important;
  border-right:1.6px solid currentColor !important;
  border-bottom:1.6px solid currentColor !important;
  transform:translateY(-2px) rotate(45deg);
  transform-origin:center !important;
  opacity:.5 !important;
  pointer-events:none !important;
  transition:transform .18s ease-out, opacity .18s ease-out;
}
.is-topbar .is-menu ul.is-menu-links > li:has(> ul.active) > a::after{
  transform:translateY(1px) rotate(-135deg);
  opacity:.9 !important;
}
@media (prefers-reduced-motion:reduce){
  .is-topbar .is-menu ul.is-menu-links > li:has(> ul) > a::after{ transition:none !important; }
}

/* ── v8-5 · DESKTOP: the submenus were keyboard-unreachable ─────────────────
   NOT a founder complaint — found while measuring, and the most serious defect
   in the set.

   Proven live at 1440px on 2026-09-02: focus About, activate it, and its <ul>
   stays `visibility:hidden; opacity:0`. The platform opens desktop dropdowns on
   :hover only, and nav-v7.css authors zero :hover and zero :focus rules in
   87,419 bytes. Six destinations — About Alekhyam, FAQ, Contact, Reviews, Shop,
   Community — cannot be reached without a pointing device. That is a WCAG 2.1.1
   (Keyboard) Level A failure on all 96 pages.

   MEASUREMENT TRAP, recorded so the next person does not "un-fix" this: styles
   for :focus-within and :focus-visible are only APPLIED while the document holds
   system focus. `element.matches(':focus-within')` returns true regardless, so a
   probe in a background tab reports the rule as matching AND the element as
   unstyled, which looks exactly like a specificity bug. Click into the page and
   assert `document.hasFocus() === true` before measuring anything focus-related.
   With that done, this rule was verified to open the panel.                     */
@media (min-width:1025px){
  .is-topbar .is-menu ul.is-menu-links > li:focus-within > ul{
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* Focus ring. `grep -c focus nav-v7.css` = 0: the stylesheet neither removes nor
   supplies one, so the visible ring is whatever the platform's base sheet does,
   which is not guaranteed and is not brand-aligned. :focus-visible only paints
   for keyboard users, so pointer users see no change.
   The wine ring is set on the drawer's white and the bar's paper alike; the one
   place it would disappear is a wine-filled row, and v8-2 removed the only one. */
.is-topbar .is-menu a:focus-visible,
.is-topbar #is-menu-toggle:focus-visible{
  outline:2px solid #7A2436 !important;
  outline-offset:2px !important;
  border-radius:4px;
}

/* ── v8-6 · DESKTOP: hierarchy, panel, type, edge ───────────────────────────
   Everything here is the "premium and intentional" half of the brief.          */
@media (min-width:1025px){

  /* (a) The two pills abutted at exactly 0px — measured Start Free 907-1020,
     Login 1020-1098 — so they read as one segmented control rather than two
     ranked actions. A gutter is the smallest change that restores the ranking
     without overturning the 13-Aug "neither is solid" ruling.
     Budget check: this pushes Login's right edge to ~1112 against the currency
     control at x=1126. Still clear. The bar cannot absorb much more than this —
     .is-topbar-container carries `padding-right:104px` (set by the currency
     runtime, geo-currency.src.js:448) reserving that track, so the ~112px of
     apparent free space at the right is spoken for, not headroom. */
  .is-topbar .is-menu-links > li:has(> a[href*="/account/login"]),
  .is-topbar .is-menu-links > li:has(> a#kn-accmenu-btn){
    padding-left:14px !important;
  }

  /* (b) The dropdown panels were completely unauthored: nav-v7.css:650-673 is the
     ONLY desktop rule for them and it sets exactly `top:100%` and `margin-top:0`.
     Everything else was platform default — 160px wide, no radius, no border,
     a hard `0 17px 20px rgba(0,0,0,.08)` shadow, zero padding. At 160px the
     longest label ("All Courses & Workshops") wrapped to two lines (measured 59px
     against its siblings' 42px). This is the single largest premium gain
     available on desktop and it carries no structural risk: it is paint on a
     panel the platform already renders. */
  .is-topbar .is-menu ul.is-menu-links > li > ul{
    min-width:238px !important;
    background:#FFFDFB !important;
    border:1px solid rgba(110,74,66,.14) !important;
    border-radius:12px !important;
    box-shadow:0 12px 28px -8px rgba(28,22,18,.16), 0 2px 6px rgba(28,22,18,.05) !important;
    padding:7px !important;
    overflow:hidden !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li > ul > li > a{
    border-radius:8px !important;
    padding:10px 14px !important;
    font-size:14px !important;
    line-height:20px !important;
    white-space:nowrap !important;
    transition:background-color .14s ease-out, color .14s ease-out;
  }
  .is-topbar .is-menu ul.is-menu-links > li > ul > li > a:hover,
  .is-topbar .is-menu ul.is-menu-links > li > ul > li > a:focus-visible{
    background:rgba(122,36,54,.07) !important;
    color:#7A2436 !important;
  }
  @media (prefers-reduced-motion:reduce){
    .is-topbar .is-menu ul.is-menu-links > li > ul > li > a{ transition:none !important; }
  }

  /* (c) The bar answers the pointer. nav-v7.css has zero :hover rules, so today
     a 980px catalogue bar is completely inert under the cursor. */
  .is-topbar .is-menu ul.is-menu-links > li > a:hover{
    color:#7A2436 !important;
  }

  /* (d) A resting edge. The bar is #FBF7F2 over a #FBF7F2 page with no border
     and no shadow (nav-v7.css:10-12; the only separation ever authored is the
     .shrink state at :15-18), so at rest it has no boundary at all — the most
     noticeable "unfinished" tell on an otherwise careful surface.
     A hairline, not a shadow: the shrink shadow still does its job on scroll,
     and this does not change .is-topbar's 77px height. Height is deliberately
     untouched — five chip pages carry hand-pasted 96-110px scroll margins tuned
     to the current bar, and moving it would mean re-pasting all five. */
  .is-topbar{
    border-bottom:1px solid rgba(122,36,54,.10) !important;
  }
}

/* (e) The brand typeface. `grep -c font-family nav-v7.css` = 0 — the universal
   menu, the one component on all 96 pages, renders in `system-ui` while the
   design system has been locked at EB Garamond + Manrope since v2.0.
   Manrope 400/500/600/700 is ALREADY loaded on every page (verified live via
   document.fonts: the same Google Fonts request that carries EB Garamond), so
   this costs no extra request, no FOUT and no layout thrash.
   Tracking: the platform ships letter-spacing:1px at 15px, which is wide for a
   grotesque. .2px on the desktop bar only; the drawer's rhythm is already right
   and its row heights are pinned to an integer 22px line-height (nav-v7.css:139)
   to defeat a subpixel-blur bug — so the drawer's metrics are left alone. */
.is-topbar .is-menu ul.is-menu-links > li > a,
.is-topbar .is-menu ul.is-menu-links > li > ul > li > a{
  font-family:'Manrope', system-ui, -apple-system, sans-serif !important;
}
@media (min-width:1025px){
  .is-topbar .is-menu ul.is-menu-links > li > a{
    font-size:14.5px !important;
    font-weight:500 !important;
    letter-spacing:.2px !important;
  }
}

/* ── v8-7 · MOBILE: the hamburger was a 25x14 tap target ────────────────────
   Measured live: #is-menu-toggle is an <a> of exactly 25x14px with padding:0 —
   350px2 against the 44x44 = 1,936px2 minimum. It is the ONLY way into the menu
   on every page under 1025px.

   Delivered as an absolutely-positioned ::before, never as padding: padding on
   this element is on record in nav-v7.css as having caused 12px of drawer
   side-scroll, whereas an absolutely-positioned box cannot affect layout at all.
   Hit-testing on a pseudo-element routes to its originating element, so the
   anchor really does gain the area. The element is already position:relative
   (verified), so this centres on the icon.

   Transparent on purpose. SOP 44 records the deliberate decision that the CLOSED
   hamburger gets no cream chip — "it sits on the cream bar where it already reads
   as a control, and a chip there would just be noise". That aesthetic ruling is
   preserved; only the target grows. Scoped with :not(.active) so the open-state
   chip at nav-v7.css:196-207 is untouched.                                     */
@media (max-width:1024px){
  .is-topbar #is-menu-toggle:not(.active)::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:-22px 0 0 -22px !important;
    width:44px !important;
    height:44px !important;
    background:transparent !important;
    border-radius:50% !important;
  }
}

/* ── v8-8 · MOBILE: the closed drawer left 18 links in the tab order ────────
   nav-v7.css:62 parks the closed drawer at `left:-1000px` with no visibility or
   inert treatment, so on every viewport under 1025px roughly eighteen invisible
   links sit ahead of all page content for keyboard and screen-reader users. A
   keyboard user tabbing into any page traverses the whole menu, off-screen and
   silent, before reaching the first heading.

   visibility:hidden removes the subtree from the tab order AND the accessibility
   tree, unlike `display:none` which would also fight the slide.

   IT IS SET ON THE <ul>, NOT ON .is-menu, AND THAT IS NOT A STYLE CHOICE. Tried
   on .is-menu first and measured it failing: that element carries the platform's
   `transition:.3s` shorthand, i.e. transition-property ALL, so a visible->hidden
   change is interpolated and the computed value stalls at `visible`. It stayed
   visible indefinitely, and only settled once the transition was removed and
   restored — flaky behaviour that must never be shipped. ul.is-menu-links has a
   0s transition, so the same declaration applies instantly and deterministically.
   Setting it on .is-menu would also have hidden the drawer's own wordmark, which
   is a ::before on that element.

   Measured on the live page, open/close/reopen: visible anchors inside the list
   go 24 -> 3 -> 24 -> 3. (The residual 3 are the submenu children of the closed
   About/More groups, which the platform already keeps out of the flow.)

   The platform's own state machine reads `r.style.right === "0px"` and is not
   affected. The chip system's veil hangs off `#is-menu-toggle.active`, which is
   also untouched.                                                              */
@media (max-width:1024px){
  .is-topbar #is-menu-toggle:not(.active) ~ .is-menu > ul.is-menu-links{
    visibility:hidden !important;
  }
  .is-topbar #is-menu-toggle.active ~ .is-menu > ul.is-menu-links{
    visibility:visible !important;
  }
}

/* ── v8-9 · TABLET: 768-1024 was a mostly-empty white sheet ─────────────────
   Measured at 820x1000: the drawer is full width (805px) with every row hugging
   the left ~250px, and the Live Workshops slab rendered 770px wide. The drawer
   was only ever tuned for ~375px.

   The full-cover drawer itself is a recorded founder decision (nav-v7.css:64-70,
   2026-08-12) and is NOT reversed here — the panel-with-strip alternative was
   explicitly rejected. What changes is the CONTENT column: constrained and
   centred, so the surrounding white reads as a deliberate margin instead of an
   abandoned gap.

   margin-left/right longhands ONLY, never the `margin` shorthand: platform JS
   writes an inline `margin-top:70px` on this ul, and the shorthand would beat it
   on all four sides and slide the list under the drawer wordmark.              */
@media (min-width:768px) and (max-width:1024px){
  .is-topbar .is-menu ul.is-menu-links{
    max-width:460px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ── v8-10 · Windows High Contrast ──────────────────────────────────────────
   Every icon in this menu is a CSS mask or a background-image, and the app and
   social rows keep their labels at font-size:0 so screen readers still read
   "Android" / "Instagram". In forced-colors mode the masks and background images
   are dropped, so those rows become empty boxes with invisible labels.
   Restoring the type is the whole fix — the labels are already in the DOM.     */
@media (forced-colors: active){
  .is-topbar .is-menu ul.is-menu-links > li > a{
    font-size:15px !important;
    forced-color-adjust:auto !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> ul) > a::after{
    border-color:currentColor !important;
  }
}
/* ══ end AKH NAV v8 ═════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   AKH NAV v9 · 2026-09-03 · correction to v8, shipped within the hour

   ONE FIX. v8's chevron rule is scoped `li:has(> ul) > a::after`, which is
   correct for every LOGGED-OUT state — verified live, three matches: Course
   Library, About, More.

   It is wrong for a SIGNED-IN learner, and that state cannot be seen by reading
   the served HTML. Read from the platform bundle instead
   (www.alekhyam.com/content/out/2026/pagev3.min.js, 137,308 B, offset 115623):
   when `.is-wrapper` carries `.is-authenticated`, the platform replaces the
   Login <li>'s innerHTML at DOMContentLoaded with

       <a href="" id="kn-accmenu-btn">Account
         <span><i class="kn-profilepic-mnu"></i>
               <span class="caret menutoggle"></span></span></a>
       <ul><li>Dashboard</li><li>Profile</li><li>Help</li><li>Logout</li></ul>

   — so that <li> gains a child <ul> AND the anchor already carries the
   platform's own caret. v8's rule therefore matched it and painted a SECOND
   chevron beside the account avatar for every signed-in learner (2,357 paying
   customers, 660 of them repeat).

   Excluded by id rather than by fixing the shape: the swap is the platform's,
   it fires after DOMContentLoaded, and nothing in our control changes it.

   This is why the logged-out DOM is not sufficient evidence for a nav rule.
   Any future selector matching `li:has(> ul)` or `a[href=""]` inside this menu
   must state what it does in BOTH auth states before it ships.
   ═══════════════════════════════════════════════════════════════════════════ */
.is-topbar .is-menu ul.is-menu-links > li:has(> ul) > a#kn-accmenu-btn::after{
  content:none !important;
}
/* ══ end AKH NAV v9 ═════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   AKH NAV v10 · 2026-09-03 · the desktop bar has to FIT before the IA change

   THIS FIXES A PRE-EXISTING LIVE DEFECT, found while rehearsing the v6 structure
   change and not previously measured by anyone.

   MEASURED on the live site at innerWidth 1025, logged out, BEFORE this block:
       items    Home 391-466 · Course Library 466-616 · About 616-708 ·
                More 708-794 · Start Free 794-895 · Login 909-981
       the container's content track ends at 891 (980px container, and the
       currency runtime sets padding-right:104px on .is-topbar-container,
       geo-currency.src.js:448, to reserve its own slot)
       the currency control itself occupies 911-987
   => Login was painted ON TOP of the $USD control, overlapping it by 70px.
   Anyone on a 1025-1279px viewport — a small laptop, or a half-screen window on
   a 2560px display — has been seeing two controls stacked on each other.

   SIGNED IN IT IS WORSE, and that state is invisible in the served HTML: the
   platform swaps Login for `Account` + avatar + caret, which measures 71px
   WIDER. At 1025 that put the bar 40px past the content track.

   Promoting Live Workshops into the bar (v6) adds 142px, so this had to be
   fixed first or the IA change would have shipped on top of a broken bar.

   THREE LEVERS, smallest first:

   (a) Item padding 17 -> 12 across desktop, and -> 8 with 13.5px type in the
       1025-1279 band. Rhythm only; no item is lost.

   (b) Home is hidden on desktop and KEPT IN THE DRAWER. The logo sits 200px to
       its left pointing at the same href, so on desktop it was always a second
       control for one destination — GLOBAL_NAV_V5_PROPOSAL_2026-08-13 §1 already
       recommended exactly this ("hide it at >=1025px and keep it drawer-only"),
       and Udemy, Proko and edX all rely on the logo. It stays in the drawer
       because the founder asked for it on 2026-08-14; that request is honoured
       where there is room and where the logo is not adjacent.
       Selector is the EXACT `a[href="/"]`, never `[href*="/"]` — the wildcard
       matches every internal link on the site (SOP 44 §4).

   (c) The signed-in Account control becomes avatar-only on desktop. The label
       stays in the DOM at font-size:0, so the accessible name is still
       "Account" — the same technique the app and social rows already use. This
       is also the conventional treatment (every reference nav shows an avatar,
       not the word), and it is what makes the signed-in bar fit at 1025.

   AFTER, measured, worst case (1025px, SIGNED IN, the state that was 40px over):
       Live Workshops · Course Library · About · Start Free · [avatar]
       last item ends 880, currency starts 911 -> 31px clear, no page h-scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .is-topbar .is-menu ul.is-menu-links > li > a{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li:has(> a[href="/"]){
    display:none !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li > a#kn-accmenu-btn{
    font-size:0 !important;
  }
  .is-topbar .is-menu ul.is-menu-links > li > a#kn-accmenu-btn > span{
    font-size:14.5px !important;
  }
}
@media (min-width:1025px) and (max-width:1279px){
  .is-topbar .is-menu ul.is-menu-links > li > a{
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:13.5px !important;
  }
  /* v8 gave the auth item a 14px gutter so the two pills stop reading as one
     control; 8px is enough separation at this width and buys back 6px. */
  .is-topbar .is-menu-links > li:has(> a[href*="/account/login"]),
  .is-topbar .is-menu-links > li:has(> a#kn-accmenu-btn){
    padding-left:8px !important;
  }
}
/* ══ end AKH NAV v10 ════════════════════════════════════════════════════════ */