/*
 * Sikshya marketing — header + footer (chrome) styles.
 *
 * Paired with sikshya-marketing.css. All rules scoped under body.sikshya-marketing
 * so they don't leak to non-Sikshya pages on the host site.
 */

/* Header */
body.sikshya-marketing .sk-header {
    background: #ffffff;
    border-bottom: 1px solid var(--sk-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* When the WordPress admin bar is showing (logged-in admins), push the sticky
   header below it so the nav doesn't sit underneath. WP uses these heights:
   32px on desktop (>782px) and 46px on the mobile breakpoint. */
body.admin-bar.sikshya-marketing .sk-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar.sikshya-marketing .sk-header {
        top: 46px;
    }
}

body.sikshya-marketing .sk-header__bar {
    padding: 0 1.5rem;
}

body.sikshya-marketing .sk-header__inner {
    max-width: var(--sk-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 64px;
}

body.sikshya-marketing .sk-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

body.sikshya-marketing .sk-header__brand-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 180px;
}

/* Brand text consistency — wherever "Sikshya" / "LMS" appears as text
   marks (b-name + b-suffix spans), they share the same coloring as the
   site brand tokens so the wordmark feels uniform across the site. */
body.sikshya-marketing .sk-brand-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-weight: 700;
    line-height: 1;
}

body.sikshya-marketing .sk-brand-text__sikshya {
    color: var(--sk-brand-primary);
    font-weight: 700;
}

body.sikshya-marketing .sk-brand-text__lms {
    color: var(--sk-text-muted);
    font-weight: 600;
    font-size: 0.78em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.sikshya-marketing .sk-header__nav {
    flex: 1;
}

body.sikshya-marketing .sk-header__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

body.sikshya-marketing .sk-header__menu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.5rem;
    color: var(--sk-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

/* Compare menu uses a <button> trigger instead of an <a> (no top-level
   destination — the mega menu carries the links). Reset browser button
   defaults so it matches the link styling exactly. */
body.sikshya-marketing .sk-header__menu-link--button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    appearance: none;
}

body.sikshya-marketing .sk-header__menu-link:hover {
    color: var(--sk-brand-accent);
    background: transparent;
}

/* Active page — underline pill in LMS purple. Both the link color and the
   border-bottom shift so the active nav item is obvious without filling a chip. */
body.sikshya-marketing .sk-header__menu-item.is-current .sk-header__menu-link {
    color: var(--sk-brand-accent);
    background: transparent;
    border-bottom-color: var(--sk-brand-accent);
}

/* Chevron caret — proper SVG glyph, rotates on hover/focus */
body.sikshya-marketing .sk-header__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: currentColor;
    transition: transform 0.15s ease;
    font-size: 0;
    line-height: 0;
}

body.sikshya-marketing .sk-header__caret::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
}

body.sikshya-marketing .sk-has-mega:hover .sk-header__caret,
body.sikshya-marketing .sk-has-mega:focus-within .sk-header__caret {
    transform: rotate(180deg);
}

/* ============================================================================
 * Mega menus — polished redesign
 *
 * Structure:
 *  - Hover or focus opens. A 12px transparent "bridge" above the panel covers
 *    the gap so cursor can travel from trigger → panel without losing hover.
 *  - Panels use a generous 2rem inner padding, rounded corners, soft shadow.
 *  - Items render as card-style rows with hover background — no tier badge
 *    clutter inside the nav.
 * ============================================================================ */

body.sikshya-marketing .sk-has-mega {
    position: relative;
}

/* The outer `.sk-mega` is a transparent positioning shell — the visible white
   panel (background, border, box-shadow, overflow clip) lives on
   `.sk-mega__inner` below. This split lets the outer carry a `::before` hover
   bridge that fills the 12px gap between LI and panel without being clipped
   by the inner's overflow:hidden (which the inner needs to keep the gray
   footer's edge-fill background inside the rounded corners).

   The real visual gap (12px) stays so the panel doesn't visually collide with
   the nav row; the bridge below covers it as a hit zone. */
body.sikshya-marketing .sk-mega {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    /* Close delay so the panel survives a brief un-hover while the cursor is
       in transit; opacity fades over 0.15s, visibility flips at 0.25s. */
    transition: opacity 0.15s ease, visibility 0s 0.25s;
    z-index: 200;
    min-width: 320px;
}

/* Cursor bridge between LI bottom and visible panel top. Sits ABOVE the panel
   via negative top, extending up into the 12px gap. Inside `.sk-mega` (outer
   shell) but NOT clipped: the outer has no `overflow: hidden` — that lives on
   `.sk-mega__inner`. Wider than the panel by 40px each side so diagonal cursor
   travel toward panel edges stays on hover. */
body.sikshya-marketing .sk-mega::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -40px;
    right: -40px;
    height: 22px;
}

body.sikshya-marketing .sk-mega--wide,
body.sikshya-marketing .sk-mega--addons {
    width: min(920px, calc(100vw - 3rem));
}

body.sikshya-marketing .sk-mega--narrow {
    width: 380px;
}

body.sikshya-marketing .sk-has-mega:hover > .sk-mega,
body.sikshya-marketing .sk-has-mega:focus-within > .sk-mega,
body.sikshya-marketing .sk-has-mega.is-open > .sk-mega {
    opacity: 1;
    visibility: visible;
    /* Open instantly (no delay) — close delay only kicks in on the reverse direction. */
    transition: opacity 0.15s ease, visibility 0s 0s;
}

/* Visible white box — moved here from `.sk-mega` so the outer can stay
   transparent and act as the cursor-bridge capture zone (its padding-top
   creates the visual gap to the LI without leaving a hit-test dead zone). */
body.sikshya-marketing .sk-mega__inner {
    padding: 1.75rem 2rem;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

body.sikshya-marketing .sk-mega__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2.5rem;
}

body.sikshya-marketing .sk-mega__col {
    min-width: 0;
}

body.sikshya-marketing .sk-mega__heading {
    color: var(--sk-brand-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.875rem;
}

body.sikshya-marketing .sk-mega__col ul,
body.sikshya-marketing .sk-mega__compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.125rem;
}

body.sikshya-marketing .sk-mega a {
    display: block;
    padding: 0.5rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 8px;
    color: var(--sk-text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

body.sikshya-marketing .sk-mega a:hover {
    background: var(--sk-brand-primary-light);
    color: var(--sk-brand-primary);
}

body.sikshya-marketing .sk-mega__item-name {
    display: block;
    line-height: 1.35;
}

/* Tier badge appears only in the add-ons mega menu (column headers), not on every nav item.
   Hide it inside the features-mega item rows for a cleaner look. */
body.sikshya-marketing .sk-mega--wide .sk-mega__item-tier {
    display: none;
}

body.sikshya-marketing .sk-mega__item-sub {
    display: block;
    color: var(--sk-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    margin-top: 0.25rem;
    line-height: 1.4;
}

body.sikshya-marketing .sk-mega__compare-list a {
    padding: 0.625rem 0.75rem;
}

body.sikshya-marketing .sk-mega__footer {
    margin: 1.5rem -2rem -1.75rem;
    padding: 1rem 2rem;
    background: var(--sk-bg-section);
    border-top: 1px solid var(--sk-border);
    border-radius: 0 0 var(--sk-radius-lg) var(--sk-radius-lg);
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    align-items: center;
}

body.sikshya-marketing .sk-mega__footer-link {
    color: var(--sk-brand-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

body.sikshya-marketing .sk-mega__footer-link:hover {
    text-decoration: underline;
}

/* Add-ons mega: free vs pro split — refined */
body.sikshya-marketing .sk-mega__free-vs-pro {
    display: grid;
    grid-template-columns: 1.05fr 2fr;
    gap: 2rem;
    align-items: stretch;
}

body.sikshya-marketing .sk-mega__free-col {
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0.02));
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: var(--sk-radius);
}

body.sikshya-marketing .sk-mega__free-col .sk-tier-badge {
    margin: 0 0 0.625rem;
}

body.sikshya-marketing .sk-mega__free-col .sk-mega__heading {
    color: var(--sk-text-primary);
    margin-bottom: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

body.sikshya-marketing .sk-mega__sub {
    color: var(--sk-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

body.sikshya-marketing .sk-mega__inline-cta {
    display: inline-block;
    color: var(--sk-tier-free);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.875rem;
}

body.sikshya-marketing .sk-mega__inline-cta:hover {
    text-decoration: underline;
}

body.sikshya-marketing .sk-mega__pro-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

body.sikshya-marketing .sk-mega__pro-cols .sk-tier-badge {
    margin: 0 0 0.625rem;
    font-size: 0.6875rem;
}

body.sikshya-marketing .sk-mega__pro-cols .sk-mega__heading {
    color: var(--sk-text-primary);
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Compare mega — narrow list */
body.sikshya-marketing .sk-mega--narrow .sk-mega__heading {
    color: var(--sk-text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 1024px) {
    body.sikshya-marketing .sk-mega--wide,
    body.sikshya-marketing .sk-mega--addons {
        width: min(720px, calc(100vw - 3rem));
    }

    body.sikshya-marketing .sk-mega__cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }

    body.sikshya-marketing .sk-mega__pro-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    body.sikshya-marketing .sk-mega__free-vs-pro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    /* On mobile, mega menus are hidden — the hamburger mobile nav takes over. */
    body.sikshya-marketing .sk-mega {
        display: none;
    }
}

body.sikshya-marketing .sk-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

body.sikshya-marketing .sk-header__action {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: var(--sk-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.15s ease;
}

body.sikshya-marketing .sk-header__action--ghost {
    color: var(--sk-text-secondary);
}

body.sikshya-marketing .sk-header__action--ghost:hover {
    color: var(--sk-text-primary);
    background: var(--sk-bg-section);
}

body.sikshya-marketing .sk-header__action--cta {
    background: var(--sk-brand-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(122, 46, 128, 0.25);
}

body.sikshya-marketing .sk-header__action--cta:hover {
    background: var(--sk-brand-accent-dark);
    box-shadow: 0 4px 10px rgba(122, 46, 128, 0.32);
}

body.sikshya-marketing .sk-header__mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-sm);
    padding: 0.5rem;
    cursor: pointer;
    /* 44x44 minimum to meet WCAG 2.5.5 / Apple HIG touch-target guidance. */
    width: 44px;
    height: 44px;
    position: relative;
}

/* Hamburger icon — 3 rounded lines via inline SVG. When the drawer is open
   (aria-expanded="true"), the top + bottom lines rotate to form an "X" while
   the middle line fades out, signalling the close action. */
body.sikshya-marketing .sk-header__mobile-icon {
    display: block;
    color: var(--sk-text-primary);
    transition: color 0.15s ease;
}

body.sikshya-marketing .sk-header__mobile-toggle:hover .sk-header__mobile-icon,
body.sikshya-marketing .sk-header__mobile-toggle:focus-visible .sk-header__mobile-icon {
    color: var(--sk-brand-accent);
}

body.sikshya-marketing .sk-header__mobile-icon line {
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

/* Open state — morph into an X */
body.sikshya-marketing .sk-header__mobile-toggle[aria-expanded="true"] .sk-header__mobile-icon-top {
    transform: translateY(5px) rotate(45deg);
}

body.sikshya-marketing .sk-header__mobile-toggle[aria-expanded="true"] .sk-header__mobile-icon-mid {
    opacity: 0;
}

body.sikshya-marketing .sk-header__mobile-toggle[aria-expanded="true"] .sk-header__mobile-icon-bot {
    transform: translateY(-5px) rotate(-45deg);
}

/* ============================================================================
 * Mobile drawer — slide-in from the right, full-height, with backdrop.
 *
 * Lives outside the <header> in the DOM so its fixed positioning isn't
 * constrained by the sticky header's z-index. Body scroll is locked while
 * the drawer is open (added by JS via .sk-no-scroll on <body>).
 * ============================================================================ */

body.sikshya-marketing .sk-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 998;
}

body.sikshya-marketing .sk-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.sikshya-marketing .sk-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: #fff;
    box-shadow: -20px 0 50px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Offset drawer below WordPress admin bar when present */
body.admin-bar.sikshya-marketing .sk-drawer {
    top: 32px;
    bottom: 0;
}

@media (max-width: 782px) {
    body.admin-bar.sikshya-marketing .sk-drawer {
        top: 46px;
    }
}

body.sikshya-marketing .sk-drawer.is-open {
    transform: translateX(0);
}

body.sikshya-marketing.sk-no-scroll {
    overflow: hidden;
}

/* Drawer header — brand + close */
body.sikshya-marketing .sk-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sk-border);
    flex-shrink: 0;
    background: var(--sk-bg-section);
}

body.sikshya-marketing .sk-drawer__brand {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

body.sikshya-marketing .sk-drawer__brand-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 150px;
}

body.sikshya-marketing .sk-drawer__close {
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sk-text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    transition: all 0.15s ease;
}

body.sikshya-marketing .sk-drawer__close:hover {
    border-color: var(--sk-brand-accent);
    color: var(--sk-brand-accent);
    background: var(--sk-brand-accent-light);
    transform: scale(1.05);
}

/* Drawer nav — scrollable middle section */
body.sikshya-marketing .sk-drawer__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

body.sikshya-marketing .sk-drawer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.sikshya-marketing .sk-drawer__item {
    border-bottom: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-drawer__item:last-child {
    border-bottom: 0;
}

body.sikshya-marketing .sk-drawer__link,
body.sikshya-marketing .sk-drawer__expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.05rem 1.25rem;
    color: var(--sk-text-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

body.sikshya-marketing .sk-drawer__link:hover,
body.sikshya-marketing .sk-drawer__expand:hover {
    background: var(--sk-bg-section);
    color: var(--sk-brand-accent);
}

/* Active drawer link — left accent bar */
body.sikshya-marketing .sk-drawer__item.is-current .sk-drawer__link,
body.sikshya-marketing .sk-drawer__item.is-current .sk-drawer__expand {
    color: var(--sk-brand-accent);
    box-shadow: inset 3px 0 0 var(--sk-brand-accent);
    background: var(--sk-brand-accent-light);
}

body.sikshya-marketing .sk-drawer__expand-icon {
    color: var(--sk-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.15s ease;
    width: 20px;
    text-align: center;
    font-weight: 300;
}

body.sikshya-marketing .sk-drawer__expand:hover .sk-drawer__expand-icon {
    color: var(--sk-brand-accent);
}

body.sikshya-marketing .sk-drawer__expand[aria-expanded="true"] .sk-drawer__expand-icon {
    transform: rotate(45deg);
    color: var(--sk-brand-accent);
}

/* Drawer submenu — accordion-style expansion */
body.sikshya-marketing .sk-drawer__sub {
    background: var(--sk-bg-section);
    padding: 0.5rem 0 0.85rem;
    border-top: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-drawer__sub-overview {
    display: block;
    padding: 0.7rem 1.25rem;
    color: var(--sk-brand-accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}

body.sikshya-marketing .sk-drawer__sub-overview:hover {
    background: var(--sk-brand-accent-light);
}

body.sikshya-marketing .sk-drawer__sub-heading {
    padding: 0.625rem 1.25rem 0.25rem;
    margin: 0;
    color: var(--sk-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.sikshya-marketing .sk-drawer__sub-heading .sk-tier-badge {
    margin: 0;
}

body.sikshya-marketing .sk-drawer__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.sikshya-marketing .sk-drawer__sub-list a {
    display: block;
    padding: 0.6rem 1.25rem 0.6rem 1.75rem;
    color: var(--sk-text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.sikshya-marketing .sk-drawer__sub-list a:hover {
    background: #fff;
    color: var(--sk-brand-accent);
    border-left-color: var(--sk-brand-accent);
}

/* Drawer footer — sticky CTAs */
body.sikshya-marketing .sk-drawer__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--sk-border);
    background: #fff;
    display: grid;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-drawer__cta {
    width: 100%;
    justify-content: center;
}

/* Mobile breakpoint: hide desktop nav + reveal hamburger */
@media (max-width: 880px) {
    body.sikshya-marketing .sk-header__nav,
    body.sikshya-marketing .sk-header__actions {
        display: none;
    }
    body.sikshya-marketing .sk-header__mobile-toggle {
        display: block;
        margin-left: auto;
    }
}

/* Above the mobile breakpoint, the drawer stays hidden no matter what. */
@media (min-width: 881px) {
    body.sikshya-marketing .sk-drawer,
    body.sikshya-marketing .sk-drawer-backdrop {
        display: none !important;
    }
}

/* Footer */
body.sikshya-marketing .sk-footer {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    /*
     * No margin-top: every preceding section has its own bottom padding (via .sk-section
     * or the CTA band's gradient). A 4rem top margin here showed white background between
     * a final dark CTA section and the dark footer — exactly the gap visible in the screenshot.
     */
}

body.sikshya-marketing .sk-footer__inner {
    max-width: var(--sk-container-max);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 3rem;
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

body.sikshya-marketing .sk-footer__brand {
    max-width: 320px;
}

body.sikshya-marketing .sk-footer__logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1rem;
    line-height: 1;
}

body.sikshya-marketing .sk-footer__brand-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 180px;
    /* Invert the source logo to pure white for the dark footer — avoids needing
       a second asset file. brightness(0) collapses to black; invert(1) flips to white. */
    filter: brightness(0) invert(1);
}

body.sikshya-marketing .sk-footer__tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

body.sikshya-marketing .sk-footer__author {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin: 0;
}

body.sikshya-marketing .sk-footer__author a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

body.sikshya-marketing .sk-footer__author a:hover {
    color: #fff;
    text-decoration: underline;
}

body.sikshya-marketing .sk-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-footer__cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

body.sikshya-marketing .sk-footer__col h4 {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.875rem;
}

body.sikshya-marketing .sk-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

body.sikshya-marketing .sk-footer__col a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s ease;
}

body.sikshya-marketing .sk-footer__col a:hover {
    color: #fff;
}

body.sikshya-marketing .sk-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.sikshya-marketing .sk-footer__legal-inner {
    max-width: var(--sk-container-max);
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

body.sikshya-marketing .sk-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

body.sikshya-marketing .sk-footer__social a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

body.sikshya-marketing .sk-footer__social a:hover {
    color: #fff;
}

/* ============================================================
   Top utility bar — uses the LMS purple secondary brand color so the
   band reads as a distinct brand element from the main nav (white).
   ============================================================ */
body.sikshya-marketing .sk-topbar {
    background: linear-gradient(90deg, var(--sk-brand-accent-dark) 0%, var(--sk-brand-accent) 100%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.sikshya-marketing .sk-topbar__inner {
    max-width: var(--sk-container-max);
    margin: 0 auto;
    padding: 7px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

body.sikshya-marketing .sk-topbar__msg {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}

body.sikshya-marketing .sk-topbar__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
}

body.sikshya-marketing .sk-topbar__links li {
    position: relative;
}

body.sikshya-marketing .sk-topbar__links li + li::before {
    content: '';
    position: absolute;
    left: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
}

body.sikshya-marketing .sk-topbar__links a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.sikshya-marketing .sk-topbar__links a:hover {
    color: #fff;
}

/* Facebook glyph stays branded blue against the purple band so the icon reads as a brand mark. */
body.sikshya-marketing .sk-topbar__fb svg {
    color: #93c5fd;
}

/* Topbar hides at the SAME breakpoint as the main nav switches to drawer
   (880px). Was 900px — left a 20px dead zone (881-900px) where the topbar
   was gone but the desktop nav was still trying to render. */
@media (max-width: 880px) {
    body.sikshya-marketing .sk-topbar {
        display: none;
    }
}

/* ============================================================
   Mega menu — clean icon-card grid (overrides the legacy .sk-mega a styles)
   ============================================================ */

/* Grid-variant panel: wider, brighter. Visible-box styles live on the inner
   wrapper so the outer `.sk-mega` can stay transparent (see the `.sk-mega`
   rule near the top). The two-column features/add-ons panels feel airy; the
   narrow Compare panel keeps its 3-card lettermark layout in a tighter
   footprint. */
body.sikshya-marketing .sk-mega--grid {
    width: min(900px, calc(100vw - 3rem));
    background: transparent;
    box-shadow: none;
}

body.sikshya-marketing .sk-mega--narrow.sk-mega--grid {
    width: min(720px, calc(100vw - 3rem));
}

body.sikshya-marketing .sk-mega--grid .sk-mega__inner {
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

body.sikshya-marketing .sk-mega__grid {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.sikshya-marketing .sk-mega__grid--two {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.6rem;
}

body.sikshya-marketing .sk-mega__grid--three {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.6rem;
}

/* Icon card — reset all the legacy .sk-mega a styles, then build a clean,
   left-aligned card with icon → title/desc/tag stack on the right. */
body.sikshya-marketing .sk-mega--grid .sk-mega__card {
    display: flex !important;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 0.95rem;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    color: var(--sk-text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__card:hover,
body.sikshya-marketing .sk-mega--grid .sk-mega__card:focus-visible {
    background: var(--sk-bg-section);
    border-color: var(--sk-border);
    color: var(--sk-text-primary);
    outline: none;
}

body.sikshya-marketing .sk-mega__card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sk-brand-primary-light);
    color: var(--sk-brand-primary);
    transition: transform 0.15s ease;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__card:hover .sk-mega__card-icon {
    transform: scale(1.04);
}

body.sikshya-marketing .sk-mega__card-icon .sk-icon {
    width: 20px;
    height: 20px;
}

/* Tier-tinted icon backgrounds */
body.sikshya-marketing .sk-mega__card[data-tier="free"] .sk-mega__card-icon {
    background: rgba(22, 163, 74, 0.1);
    color: var(--sk-tier-free);
}
body.sikshya-marketing .sk-mega__card[data-tier="starter"] .sk-mega__card-icon {
    background: rgba(44, 91, 168, 0.1);
    color: var(--sk-tier-starter);
}
body.sikshya-marketing .sk-mega__card[data-tier="growth"] .sk-mega__card-icon {
    background: rgba(122, 46, 128, 0.1);
    color: var(--sk-tier-growth);
}
body.sikshya-marketing .sk-mega__card[data-tier="scale"] .sk-mega__card-icon {
    background: rgba(185, 28, 28, 0.1);
    color: var(--sk-tier-scale);
}

body.sikshya-marketing .sk-mega__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

body.sikshya-marketing .sk-mega__card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sk-text-primary);
    line-height: 1.3;
    margin: 0;
}

body.sikshya-marketing .sk-mega__card-desc {
    font-size: 0.78rem;
    color: var(--sk-text-muted);
    line-height: 1.45;
    margin: 0;
    /* Cap at 2 lines so card heights stay even */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.sikshya-marketing .sk-mega__card-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.4rem;
    /* Was 0.62rem (~10px) — under the WCAG minimum-legibility threshold on
       tinted backgrounds. 0.7rem (~11px) reads cleanly without ballooning. */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
body.sikshya-marketing .sk-mega__card-tag--free { background: rgba(22, 163, 74, 0.12); color: var(--sk-tier-free); }
body.sikshya-marketing .sk-mega__card-tag--starter { background: rgba(44, 91, 168, 0.12); color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-mega__card-tag--growth { background: rgba(122, 46, 128, 0.12); color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-mega__card-tag--scale { background: rgba(185, 28, 28, 0.12); color: var(--sk-tier-scale); }

/* Compare mega — 3 lettermark cards in a row */
body.sikshya-marketing .sk-mega--grid .sk-mega__vs-card {
    display: flex !important;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    margin: 0;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--sk-text-primary);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__vs-card:hover,
body.sikshya-marketing .sk-mega--grid .sk-mega__vs-card:focus-visible {
    border-color: var(--sk-brand-primary);
    color: var(--sk-text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    background: #fff;
    outline: none;
}

body.sikshya-marketing .sk-mega__vs-mark {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sk-bg-section);
    color: var(--sk-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

body.sikshya-marketing .sk-mega__vs-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

body.sikshya-marketing .sk-mega__vs-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sk-text-primary);
    line-height: 1.3;
}

body.sikshya-marketing .sk-mega__vs-desc {
    font-size: 0.75rem;
    color: var(--sk-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer band — quiet section divider, primary CTA on left, secondary on right */
body.sikshya-marketing .sk-mega--grid .sk-mega__footer {
    border-top: 1px solid var(--sk-border);
    margin: 1rem -1.5rem -1.25rem;
    padding: 0.9rem 1.5rem;
    background: var(--sk-bg-section);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__footer-link {
    color: var(--sk-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    transition: color 0.15s ease;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__footer-link:hover {
    color: var(--sk-brand-primary);
    background: transparent;
}

body.sikshya-marketing .sk-mega--grid .sk-mega__footer-link--primary {
    color: var(--sk-brand-primary);
    font-weight: 600;
}

/* On smaller screens (still desktop), collapse compare mega to 2 cols then 1 */
@media (max-width: 980px) {
    body.sikshya-marketing .sk-mega__grid--three {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Mobile drawer — utility links section at bottom of nav
   ============================================================ */
/* Transparent spacer between the primary nav block and the utility nav block.
   No own background — the preceding `.sk-drawer__item` already has a 1px
   border-bottom; drawing a second line here would stack into a double border
   (which is exactly what was shipped before). The remaining margin keeps the
   visual breathing room between the two groupings. */
body.sikshya-marketing .sk-drawer__divider {
    list-style: none;
    height: 0;
    background: transparent;
    margin: 0.5rem 0 0;
    padding: 0;
}

/* Force the utility items to NOT pick up the .sk-drawer__item border bottom */
body.sikshya-marketing .sk-drawer__item--util {
    border-bottom: none;
}

body.sikshya-marketing .sk-drawer__item--util .sk-drawer__util {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.25rem;
    width: 100%;
    color: var(--sk-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

body.sikshya-marketing .sk-drawer__item--util .sk-drawer__util:hover {
    background: var(--sk-brand-accent-light);
    color: var(--sk-brand-accent);
}

body.sikshya-marketing .sk-drawer__item--util .sk-drawer__util svg {
    color: #1877f2;
    flex-shrink: 0;
}