/* ── 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;
  }
}