/*
 * Sikshya marketing — shared design system.
 *
 * Used on the existing landing page + every dynamic /sikshya-landing/* surface.
 * Scoped under `body.sikshya-marketing` so any theme styles can't leak in and
 * none of our styles can leak out to non-Sikshya pages on mantrabrain.com.
 */

body.sikshya-marketing {
    /* Brand tokens derived from the Sikshya LMS logo:
       - primary = the navy blue used for the "SIKSHYA" wordmark
       - accent  = the deep purple used for the "LMS" suffix
       Tier colors keep distinct identity but pull from the same family so the
       whole UI feels visually tied to the logo. */
    --sk-brand-primary: #2c5ba8;
    --sk-brand-primary-dark: #1f4585;
    --sk-brand-primary-light: #e8f0fa;
    --sk-brand-accent: #7a2e80;
    --sk-brand-accent-dark: #5e2266;
    --sk-brand-accent-light: #f5e8f5;
    --sk-text-primary: #0f172a;
    --sk-text-secondary: #475569;
    --sk-text-muted: #64748b;
    --sk-bg-page: #ffffff;
    --sk-bg-section: #f6f9fd;
    --sk-bg-card: #ffffff;
    --sk-border: #dde6f0;
    --sk-border-strong: #c2cfdf;
    --sk-radius-sm: 6px;
    --sk-radius: 10px;
    --sk-radius-lg: 16px;
    --sk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --sk-shadow: 0 4px 12px rgba(31, 69, 133, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --sk-shadow-lg: 0 12px 32px rgba(31, 69, 133, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
    /* Tier palette — aligned with brand family. Growth uses the logo's purple to
       signal "this is the most popular tier" and visually pair with the brand mark. */
    --sk-tier-free: #16a34a;
    --sk-tier-starter: #2c5ba8;
    --sk-tier-growth: #7a2e80;
    --sk-tier-scale: #b91c1c;
    --sk-container-max: 1280px;

    background: var(--sk-bg-page);
    color: var(--sk-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.sikshya-marketing *,
body.sikshya-marketing *::before,
body.sikshya-marketing *::after {
    box-sizing: border-box;
}

body.sikshya-marketing .sk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 2px solid var(--sk-brand-primary);
    border-radius: 0 0 var(--sk-radius) 0;
    z-index: 9999;
}

body.sikshya-marketing .sk-skip-link:focus {
    left: 0;
}

body.sikshya-marketing .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Global keyboard-focus indicator. Many interactive elements (cards, buttons,
   summary, billing-toggle pills) rely on browser-default focus rings that are
   visually swallowed by border-radius and transitions. This baseline ensures
   keyboard users always see WHERE focus is. Scoped to :focus-visible (not
   :focus) so mouse clicks don't trigger the outline. Individual components
   that already paint their own focus state can override with `outline: none`. */
body.sikshya-marketing :is(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sk-brand-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Layout primitives */
body.sikshya-marketing .sk-container {
    max-width: var(--sk-container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 480px) {
    body.sikshya-marketing .sk-container {
        padding: 0 1rem;
    }
}

body.sikshya-marketing .sk-main {
    padding-top: 0;
}

body.sikshya-marketing .sk-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

body.sikshya-marketing .sk-section--tier {
    border-top: 1px solid var(--sk-border);
}

/* Headings */
body.sikshya-marketing .sk-main h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-main h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-main h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-prose {
    max-width: 60ch;
    color: var(--sk-text-secondary);
    font-size: 1.0625rem;
}

/* Hero */
body.sikshya-marketing .sk-hero {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
    background: linear-gradient(180deg, var(--sk-brand-primary-light) 0%, var(--sk-bg-page) 100%);
}

body.sikshya-marketing .sk-hero__eyebrow {
    color: var(--sk-brand-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8125rem;
    margin: 0 0 0.75rem;
}

body.sikshya-marketing .sk-hero__title {
    max-width: 22ch;
    margin: 0 0 1rem;
}

body.sikshya-marketing .sk-hero__subtitle {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--sk-text-secondary);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}

body.sikshya-marketing .sk-hero__buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Buttons */
body.sikshya-marketing .sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--sk-radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1;
}

body.sikshya-marketing .sk-btn--primary {
    /* Solid LMS-purple primary — keeps the action surface clean and consistent across the site. */
    background: var(--sk-brand-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(122, 46, 128, 0.25);
}

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

body.sikshya-marketing .sk-btn--ghost {
    background: transparent;
    color: var(--sk-text-primary);
    border-color: var(--sk-border-strong);
}

body.sikshya-marketing .sk-btn--ghost:hover {
    border-color: var(--sk-brand-accent);
    color: var(--sk-brand-accent);
}

/* Tier badges */
body.sikshya-marketing .sk-tier-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

body.sikshya-marketing .sk-tier-badge--free { background: rgba(22, 163, 74, 0.1); color: var(--sk-tier-free); }
body.sikshya-marketing .sk-tier-badge--starter { background: rgba(44, 91, 168, 0.1); color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-tier-badge--growth { background: rgba(122, 46, 128, 0.1); color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-tier-badge--scale { background: rgba(185, 28, 28, 0.1); color: var(--sk-tier-scale); }
/* Pan-Pro badge — for places that need to reference "Pro across all tiers"
   rather than a specific tier (e.g. "Pro · 31 add-ons" totals). Uses the brand
   primary+accent gradient so it doesn't read as ANY single tier's color. */
body.sikshya-marketing .sk-tier-badge--pro {
    background: linear-gradient(90deg, var(--sk-brand-primary), var(--sk-brand-accent));
    color: #fff;
}

/* Section header */
body.sikshya-marketing .sk-section__header {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 50ch;
}

body.sikshya-marketing .sk-section__header h2 {
    margin-top: 0.5rem;
}

body.sikshya-marketing .sk-section__header p {
    color: var(--sk-text-secondary);
    margin: 0;
}

/* Card grid */
body.sikshya-marketing .sk-card-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

body.sikshya-marketing .sk-card-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

@media (max-width: 480px) {
    body.sikshya-marketing .sk-card-grid,
    body.sikshya-marketing .sk-card-grid--wide {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    transition: all 0.15s ease;
}

body.sikshya-marketing .sk-card:hover {
    border-color: var(--sk-brand-primary);
    box-shadow: var(--sk-shadow);
    transform: translateY(-1px);
}

body.sikshya-marketing .sk-card__link {
    display: block;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    position: relative;
}

body.sikshya-marketing .sk-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    padding-right: 1.5rem;
}

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

body.sikshya-marketing .sk-card__meta {
    font-size: 0.8125rem;
    color: var(--sk-text-muted);
    margin: 0.75rem 0 0;
}

body.sikshya-marketing .sk-card__arrow {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    color: var(--sk-text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

body.sikshya-marketing .sk-card:hover .sk-card__arrow {
    transform: translateX(3px);
    color: var(--sk-brand-primary);
}

/* Outcome list (✓ bullets) */
body.sikshya-marketing .sk-outcome-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.75rem;
}

body.sikshya-marketing .sk-outcome-list > li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--sk-text-primary);
    font-size: 1rem;
}

body.sikshya-marketing .sk-outcome-bullet {
    flex-shrink: 0;
    color: var(--sk-tier-free);
    font-weight: 700;
    margin-top: 0.125rem;
}

/* Unlock grid */
body.sikshya-marketing .sk-unlock-grid {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 480px) {
    body.sikshya-marketing .sk-unlock-grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-unlock-grid > li {
    background: var(--sk-bg-section);
    padding: 1.25rem;
    border-radius: var(--sk-radius);
}

body.sikshya-marketing .sk-unlock-grid p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
}

/* How-it-works steps */
body.sikshya-marketing .sk-how-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    counter-reset: step;
    display: grid;
    gap: 1.25rem;
}

body.sikshya-marketing .sk-how-list > li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

body.sikshya-marketing .sk-how-list__num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sk-brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

body.sikshya-marketing .sk-how-list p {
    margin: 0.25rem 0 0;
    color: var(--sk-text-secondary);
}

/* FAQ */
body.sikshya-marketing .sk-faq {
    margin: 1.5rem 0 0;
}

body.sikshya-marketing .sk-faq__item {
    border-bottom: 1px solid var(--sk-border);
    padding: 1rem 0;
}

body.sikshya-marketing .sk-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sk-text-primary);
    padding-right: 1.5rem;
    position: relative;
}

body.sikshya-marketing .sk-faq__item summary::-webkit-details-marker {
    display: none;
}

body.sikshya-marketing .sk-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.25rem;
    color: var(--sk-text-muted);
    transition: transform 0.15s ease;
}

body.sikshya-marketing .sk-faq__item[open] summary::after {
    transform: rotate(45deg);
}

body.sikshya-marketing .sk-faq__item p {
    margin: 0.75rem 0 0;
    color: var(--sk-text-secondary);
}

/* Feature hero (per-feature page) — Yatra-style two-column with illustration */
body.sikshya-marketing .sk-feature-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    background:
        radial-gradient(ellipse 80% 60% at 90% 10%, rgba(44, 91, 168, 0.12), transparent 70%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(122, 46, 128, 0.10), transparent 70%),
        linear-gradient(180deg, var(--sk-brand-primary-light) 0%, var(--sk-bg-page) 100%);
}

body.sikshya-marketing .sk-feature-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-feature-hero__inner {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-feature-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

body.sikshya-marketing .sk-feature-hero__price {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sk-text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-feature-hero__tagline {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--sk-text-secondary);
    margin: 0 0 1.5rem;
    max-width: 50ch;
}

body.sikshya-marketing .sk-feature-hero__buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.sikshya-marketing .sk-feature-hero__finepoint {
    margin: 1.25rem 0 0;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
}

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

body.sikshya-marketing .sk-feature-hero__visual {
    max-width: 100%;
}

body.sikshya-marketing .sk-feature-hero__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--sk-radius-lg);
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-feature-hero__visual {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* Breadcrumb */
body.sikshya-marketing .sk-breadcrumb {
    background: var(--sk-bg-section);
    padding: 0.75rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--sk-border);
    /* No margin-bottom: each page's hero owns its own top padding. Pages
       without a styled hero (e.g. comparison-single) add their own spacing
       via .sk-comparison-hero. */
}

/* Comparison page hero needs explicit top padding since it doesn't carry
   a gradient background like the feature hero does. */
body.sikshya-marketing .sk-comparison-hero {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

body.sikshya-marketing .sk-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

body.sikshya-marketing .sk-breadcrumb li + li::before {
    content: "/";
    color: var(--sk-text-muted);
    margin-right: 0.5rem;
}

body.sikshya-marketing .sk-breadcrumb a {
    color: var(--sk-text-secondary);
    text-decoration: none;
}

body.sikshya-marketing .sk-breadcrumb a:hover {
    color: var(--sk-brand-primary);
    text-decoration: underline;
}

body.sikshya-marketing .sk-breadcrumb [aria-current="page"] {
    color: var(--sk-text-primary);
    font-weight: 500;
}

/* Comparison table — horizontal scroll on narrow viewports with a subtle gradient
   hint so users notice the table is scrollable. */
body.sikshya-marketing .sk-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 0;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
        radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.08), rgba(15,23,42,0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.08), rgba(15,23,42,0)) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Pricing comparison — card-based (replaces the dense 5-column table) so the
   layout works without horizontal scroll on mobile and matches the homepage
   design language. */
body.sikshya-marketing .sk-pricing-compare__cards {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 960px) {
    body.sikshya-marketing .sk-pricing-compare__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    body.sikshya-marketing .sk-pricing-compare__cards {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-pricing-compare__card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 1.5rem;
}

body.sikshya-marketing .sk-pricing-compare__card h3 {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sk-border);
}

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

body.sikshya-marketing .sk-pricing-compare__rows > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.4;
}

body.sikshya-marketing .sk-pricing-compare__rows > li > span:first-child {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-pricing-compare__rows .sk-tier-badge {
    margin: 0;
    flex-shrink: 0;
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
}

body.sikshya-marketing .sk-pricing-compare__footnote {
    margin: 1.5rem 0 0;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

body.sikshya-marketing .sk-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sk-bg-card);
    /* Force a sensible minimum so .sk-table-wrap's horizontal scroll has
       something to scroll on mobile — without this the table just squeezes
       its "Feature" column on narrow viewports. */
    min-width: 560px;
}

body.sikshya-marketing .sk-table th,
body.sikshya-marketing .sk-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--sk-border);
    vertical-align: top;
}

body.sikshya-marketing .sk-table thead th {
    background: var(--sk-bg-section);
    font-weight: 700;
    color: var(--sk-text-primary);
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

body.sikshya-marketing .sk-table tbody th {
    font-weight: 600;
    color: var(--sk-text-primary);
    width: 40%;
}

body.sikshya-marketing .sk-table__feature {
    display: block;
}

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

body.sikshya-marketing .sk-yes { color: var(--sk-tier-free); font-weight: 700; font-size: 1.125rem; }
body.sikshya-marketing .sk-no { color: var(--sk-text-muted); }

/* CTA band — gradient echoes the SIKSHYA→LMS wordmark direction (navy → purple). */
body.sikshya-marketing .sk-cta-band {
    background: linear-gradient(135deg, var(--sk-brand-primary) 0%, var(--sk-brand-accent) 100%);
    color: #fff;
}

body.sikshya-marketing .sk-cta-band h2 {
    color: #fff;
    margin: 0 0 0.75rem;
}

body.sikshya-marketing .sk-cta-band p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 50ch;
    margin: 0 auto 1.5rem;
    font-size: 1.0625rem;
}

body.sikshya-marketing .sk-cta-band__inner {
    text-align: center;
}

body.sikshya-marketing .sk-cta-band__buttons {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

body.sikshya-marketing .sk-cta-band .sk-btn--primary {
    background: #fff;
    color: var(--sk-brand-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body.sikshya-marketing .sk-cta-band .sk-btn--primary:hover {
    background: #fff;
    color: var(--sk-brand-accent-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

body.sikshya-marketing .sk-cta-band .sk-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

body.sikshya-marketing .sk-cta-band .sk-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Pricing */
body.sikshya-marketing .sk-billing-toggle {
    display: inline-flex;
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
    border-radius: 999px;
    padding: 0.25rem;
    margin-top: 1.5rem;
}

body.sikshya-marketing .sk-billing-toggle__btn {
    border: none;
    background: transparent;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    color: var(--sk-text-secondary);
    transition: all 0.15s ease;
}

body.sikshya-marketing .sk-billing-toggle__btn.is-active {
    background: #fff;
    color: var(--sk-text-primary);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-pricing-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

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

body.sikshya-marketing .sk-pricing-card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

body.sikshya-marketing .sk-pricing-card--highlight {
    border-color: var(--sk-brand-primary);
    box-shadow: var(--sk-shadow-lg);
    transform: scale(1.025);
}

/* Drop the scale transform on narrow viewports so the highlighted card doesn't
   overflow the grid + create horizontal scroll on phones. */
@media (max-width: 768px) {
    body.sikshya-marketing .sk-pricing-card--highlight {
        transform: none;
    }
}

body.sikshya-marketing .sk-pricing-card__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sk-brand-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.sikshya-marketing .sk-pricing-card h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

body.sikshya-marketing .sk-pricing-card__pitch {
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 1.5rem;
    min-height: 2.5em;
}

body.sikshya-marketing .sk-pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

body.sikshya-marketing .sk-pricing-card__price strong,
body.sikshya-marketing .sk-pricing-card__price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sk-text-primary);
    line-height: 1;
}

body.sikshya-marketing .sk-pricing-card__price span,
body.sikshya-marketing .sk-pricing-card__price-period {
    color: var(--sk-text-muted);
    font-size: 0.9375rem;
}

body.sikshya-marketing .sk-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
    display: grid;
    gap: 0.5rem;
}

body.sikshya-marketing .sk-pricing-card__features > li {
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    padding-left: 1.5rem;
    position: relative;
}

body.sikshya-marketing .sk-pricing-card__features > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sk-tier-free);
    font-weight: 700;
}

body.sikshya-marketing .sk-pricing-card__cta {
    width: 100%;
}

/* ============================================================================
 * Homepage (sk-home-*) — uses the shared sk-* primitives plus a few home-only
 * compositional blocks. Layout patterns are reused on the pricing page so the
 * two surfaces feel like one product.
 * ============================================================================ */

body.sikshya-marketing .sk-home-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(ellipse 80% 60% at 90% 10%, rgba(44, 91, 168, 0.14), transparent 70%),
        radial-gradient(ellipse 60% 50% at 0% 90%, rgba(122, 46, 128, 0.10), transparent 70%),
        linear-gradient(180deg, var(--sk-brand-primary-light) 0%, var(--sk-bg-page) 100%);
}

body.sikshya-marketing .sk-home-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

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

body.sikshya-marketing .sk-home-hero__title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    /* Was 18ch — caused awkward 3-line wrap on tablets. 24ch gives a clean
       2-line wrap at 768-1024px while staying short on desktop. */
    max-width: 24ch;
}

body.sikshya-marketing .sk-home-hero__lead {
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    color: var(--sk-text-secondary);
    margin: 0 0 1.75rem;
    max-width: 56ch;
    line-height: 1.55;
}

body.sikshya-marketing .sk-home-hero__buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

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

body.sikshya-marketing .sk-home-hero__checklist li {
    display: flex;
    gap: 0.625rem;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
}

body.sikshya-marketing .sk-home-hero__checklist span {
    color: var(--sk-tier-free);
    font-weight: 700;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-home-hero__visual img {
    width: 100%;
    height: auto;
    border-radius: var(--sk-radius-lg);
    display: block;
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-home-hero__visual {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* Trust strip */
body.sikshya-marketing .sk-home-trust {
    background: var(--sk-bg-section);
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
    padding: 1rem 0;
}

body.sikshya-marketing .sk-home-trust__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Problem section */
body.sikshya-marketing .sk-home-problem__head {
    max-width: 64ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}

body.sikshya-marketing .sk-home-problem__head h2 {
    margin: 0.5rem 0 1rem;
}

body.sikshya-marketing .sk-home-problem__head .sk-prose {
    margin: 0 auto;
}

body.sikshya-marketing .sk-home-problem__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 760px) {
    body.sikshya-marketing .sk-home-problem__split {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-problem__panel {
    padding: 1.75rem;
    border-radius: var(--sk-radius-lg);
    border: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-home-problem__panel--bad {
    background: rgba(185, 28, 28, 0.04);
    border-color: rgba(185, 28, 28, 0.20);
}

body.sikshya-marketing .sk-home-problem__panel--good {
    background: rgba(22, 163, 74, 0.05);
    border-color: rgba(22, 163, 74, 0.22);
}

body.sikshya-marketing .sk-home-problem__panel h3 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

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

body.sikshya-marketing .sk-home-problem__panel li {
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    padding-left: 1.5rem;
    position: relative;
}

body.sikshya-marketing .sk-home-problem__panel--bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: var(--sk-tier-scale);
    font-weight: 700;
}

body.sikshya-marketing .sk-home-problem__panel--good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sk-tier-free);
    font-weight: 700;
}

/* Features showcase grid (6 cards) — also reused on the pricing page */
body.sikshya-marketing .sk-home-features__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 960px) {
    body.sikshya-marketing .sk-home-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    body.sikshya-marketing .sk-home-features__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-feature {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 1.5rem;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
}

body.sikshya-marketing .sk-home-feature:hover {
    border-color: var(--sk-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-home-feature h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

body.sikshya-marketing .sk-home-feature p {
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 1rem;
    flex: 1;
}

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

body.sikshya-marketing .sk-home-feature__link:hover {
    text-decoration: underline;
}

body.sikshya-marketing .sk-home-features__more {
    margin: 2rem 0 0;
    text-align: center;
}

/* How it works — 3 steps */
body.sikshya-marketing .sk-home-how__steps {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 760px) {
    body.sikshya-marketing .sk-home-how__steps {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-how__steps > li {
    padding: 1.75rem;
    background: var(--sk-bg-section);
    border-radius: var(--sk-radius-lg);
    border: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-home-how__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--sk-brand-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

body.sikshya-marketing .sk-home-how__steps h3 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

body.sikshya-marketing .sk-home-how__steps p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
}

/* Free vs Pro tier split — reused on pricing page */
body.sikshya-marketing .sk-home-tiers__split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 760px) {
    body.sikshya-marketing .sk-home-tiers__split {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-tiers__card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

body.sikshya-marketing .sk-home-tiers__card--pro {
    background:
        linear-gradient(180deg, var(--sk-brand-primary-light), #fff);
    border-color: var(--sk-brand-primary);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-home-tiers__card h3 {
    margin: 0.625rem 0 0.5rem;
    font-size: 1.25rem;
}

body.sikshya-marketing .sk-home-tiers__price {
    margin: 0 0 1.25rem;
}

body.sikshya-marketing .sk-home-tiers__price strong {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-home-tiers__price span {
    color: var(--sk-text-muted);
    font-size: 0.9375rem;
}

body.sikshya-marketing .sk-home-tiers__card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
    display: grid;
    gap: 0.625rem;
}

body.sikshya-marketing .sk-home-tiers__card li {
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    padding-left: 1.5rem;
    position: relative;
}

body.sikshya-marketing .sk-home-tiers__card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sk-tier-free);
    font-weight: 700;
}

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

/* Outcomes — what you can ship */
body.sikshya-marketing .sk-home-outcomes__grid {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 960px) {
    body.sikshya-marketing .sk-home-outcomes__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    body.sikshya-marketing .sk-home-outcomes__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-outcomes__grid > li {
    padding: 1.5rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
}

body.sikshya-marketing .sk-home-outcomes__grid h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

body.sikshya-marketing .sk-home-outcomes__grid p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
}

/* ============================================================================
 * Homepage pricing snapshot — Yatra-style three-tier card row with a featured
 * middle card and a Free callout strip above. Full pricing detail lives on
 * the /sikshya-landing/pricing/ page; this is the at-a-glance preview.
 * ============================================================================ */

body.sikshya-marketing .sk-home-pricing__free {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0.02));
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: var(--sk-radius-lg);
    margin: 2rem 0;
    flex-wrap: wrap;
}

body.sikshya-marketing .sk-home-pricing__free .sk-tier-badge {
    margin-bottom: 0;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-home-pricing__free-text {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body.sikshya-marketing .sk-home-pricing__free-text strong {
    color: var(--sk-text-primary);
    font-size: 1.0625rem;
}

body.sikshya-marketing .sk-home-pricing__free-text span {
    color: var(--sk-text-secondary);
    font-size: 0.875rem;
}

body.sikshya-marketing .sk-home-pricing__free-cta {
    flex-shrink: 0;
}

body.sikshya-marketing .sk-home-pricing__plans {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-home-pricing__plans {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-plan {
    position: relative;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

body.sikshya-marketing .sk-plan--featured {
    /* Featured tier blends both brand colors so the "most popular" card visually
       echoes the SIKSHYA + LMS wordmark gradient. */
    background: linear-gradient(180deg, var(--sk-brand-accent-light), #fff);
    border-color: var(--sk-brand-accent);
    box-shadow: var(--sk-shadow-lg);
    transform: scale(1.025);
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-plan--featured {
        transform: none;
    }
}

body.sikshya-marketing .sk-plan__ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    /* Gradient mixes the two brand colors — same direction as the logo wordmark
       (blue → purple) so the ribbon reads as a brand element. */
    background: linear-gradient(90deg, var(--sk-brand-primary), var(--sk-brand-accent));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.875rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(122, 46, 128, 0.35);
}

body.sikshya-marketing .sk-plan__tier {
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

body.sikshya-marketing .sk-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0 0 0.25rem;
}

body.sikshya-marketing .sk-plan__price-reg {
    color: var(--sk-text-muted);
    text-decoration: line-through;
    font-size: 1rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-plan__price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sk-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

body.sikshya-marketing .sk-plan__price-unit {
    color: var(--sk-text-muted);
    font-size: 1rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-plan__save {
    color: var(--sk-brand-accent);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

body.sikshya-marketing .sk-plan__alt {
    color: var(--sk-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1rem;
    font-weight: 500;
}

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

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

body.sikshya-marketing .sk-home-pricing__compare {
    text-align: center;
    margin: 2rem 0 0;
}

/* "Built for" audience grid — same look as outcomes but with a subtle accent strip */
body.sikshya-marketing .sk-home-audience__grid {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 960px) {
    body.sikshya-marketing .sk-home-audience__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    body.sikshya-marketing .sk-home-audience__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-audience__grid > li {
    padding: 1.5rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-left: 3px solid var(--sk-brand-primary);
    border-radius: var(--sk-radius-lg);
}

body.sikshya-marketing .sk-home-audience__grid h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

body.sikshya-marketing .sk-home-audience__grid p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* 404 — proper hero treatment so a 404 doesn't read as a broken page */
body.sikshya-marketing .sk-not-found__hero {
    padding: clamp(3rem, 8vw, 6rem) 0;
    text-align: center;
}

body.sikshya-marketing .sk-not-found__inner {
    max-width: 760px;
    margin: 0 auto;
}

body.sikshya-marketing .sk-not-found__numeral {
    display: block;
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--sk-brand-primary), var(--sk-brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

body.sikshya-marketing .sk-not-found__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0.5rem 0 0.75rem;
}

body.sikshya-marketing .sk-not-found__subtitle {
    color: var(--sk-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto 1.75rem;
}

body.sikshya-marketing .sk-not-found__cta-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

body.sikshya-marketing .sk-not-found__cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    text-align: left;
}

body.sikshya-marketing .sk-not-found__cards a {
    display: block;
    padding: 1.25rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    color: var(--sk-text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

body.sikshya-marketing .sk-not-found__cards a:hover {
    border-color: var(--sk-brand-accent);
    transform: translateY(-2px);
}

body.sikshya-marketing .sk-not-found__cards strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--sk-brand-primary);
}

body.sikshya-marketing .sk-not-found__cards span {
    display: block;
    color: var(--sk-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

body.sikshya-marketing .sk-not-found a:hover {
    text-decoration: underline;
}

/* ============================================================
   Features hub — tier stats band (quick-jump anchors)
   ============================================================ */
body.sikshya-marketing .sk-tier-stats {
    padding: 1.25rem 0 2rem;
    border-bottom: 1px solid var(--sk-border);
    background: var(--sk-bg-page);
}

body.sikshya-marketing .sk-tier-stats__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-tier-stats__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.sikshya-marketing .sk-tier-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    text-decoration: none;
    color: var(--sk-text-primary);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-tier-stats__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-tier-stats__item--free:hover { border-color: var(--sk-tier-free); }
body.sikshya-marketing .sk-tier-stats__item--starter:hover { border-color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-tier-stats__item--growth:hover { border-color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-tier-stats__item--scale:hover { border-color: var(--sk-tier-scale); }

body.sikshya-marketing .sk-tier-stats__count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-tier-stats__item--free .sk-tier-stats__count { color: var(--sk-tier-free); }
body.sikshya-marketing .sk-tier-stats__item--starter .sk-tier-stats__count { color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-tier-stats__item--growth .sk-tier-stats__count { color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-tier-stats__item--scale .sk-tier-stats__count { color: var(--sk-tier-scale); }

body.sikshya-marketing .sk-tier-stats__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sk-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Features hub — per-tier heading with inline count badge */
body.sikshya-marketing .sk-section__header--left {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 720px;
}

body.sikshya-marketing .sk-tier-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

body.sikshya-marketing .sk-tier-heading h2 {
    margin: 0;
    font-size: 1.75rem;
}

body.sikshya-marketing .sk-tier-heading__count {
    color: var(--sk-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-section--tier-free { scroll-margin-top: 80px; }
body.sikshya-marketing .sk-section--tier-starter { scroll-margin-top: 80px; }
body.sikshya-marketing .sk-section--tier-growth { scroll-margin-top: 80px; }
body.sikshya-marketing .sk-section--tier-scale { scroll-margin-top: 80px; }

/* ============================================================
   Addons hub — three-column tier comparison
   ============================================================ */
body.sikshya-marketing .sk-addons-compare {
    padding-top: 2.5rem;
}

body.sikshya-marketing .sk-addons-compare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 980px) {
    body.sikshya-marketing .sk-addons-compare__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-addons-compare__col {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--sk-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-addons-compare__col:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-addons-compare__col--featured {
    border-color: var(--sk-brand-accent);
    border-width: 2px;
    box-shadow: var(--sk-shadow);
    background: linear-gradient(180deg, var(--sk-brand-accent-light) 0%, var(--sk-bg-card) 40%);
}

@media (min-width: 981px) {
    body.sikshya-marketing .sk-addons-compare__col--featured {
        transform: scale(1.03);
    }
    body.sikshya-marketing .sk-addons-compare__col--featured:hover {
        transform: scale(1.03) translateY(-3px);
    }
}

body.sikshya-marketing .sk-addons-compare__head {
    text-align: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sk-border);
    margin-bottom: 1.25rem;
}

body.sikshya-marketing .sk-addons-compare__head .sk-tier-badge {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
}

body.sikshya-marketing .sk-addons-compare__tagline {
    margin: 0.75rem 0 1.25rem;
    color: var(--sk-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

body.sikshya-marketing .sk-addons-compare__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

body.sikshya-marketing .sk-addons-compare__price strong {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-addons-compare__price span {
    color: var(--sk-text-muted);
    font-size: 0.85rem;
}

body.sikshya-marketing .sk-addons-compare__sites {
    margin: 0.5rem 0 0;
    color: var(--sk-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-addons-compare__best-for {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--sk-bg-section);
    border-radius: var(--sk-radius);
    font-size: 0.9rem;
    color: var(--sk-text-secondary);
    line-height: 1.45;
}

body.sikshya-marketing .sk-addons-compare__best-for span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sk-text-muted);
}

body.sikshya-marketing .sk-addons-compare__unlocks-label {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sk-text-muted);
}

body.sikshya-marketing .sk-addons-compare__items {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

body.sikshya-marketing .sk-addons-compare__items li a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--sk-radius-sm);
    text-decoration: none;
    color: var(--sk-text-primary);
    transition: background 0.15s ease;
}

body.sikshya-marketing .sk-addons-compare__items li a:hover {
    background: var(--sk-bg-section);
}

body.sikshya-marketing .sk-addons-compare__items strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-addons-compare__items span {
    font-size: 0.82rem;
    color: var(--sk-text-muted);
    line-height: 1.4;
}

body.sikshya-marketing .sk-addons-compare__cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

body.sikshya-marketing .sk-addons-compare__footnote {
    text-align: center;
    margin: 2.5rem 0 0;
    color: var(--sk-text-muted);
    font-size: 0.9rem;
}

/* Reuse sk-plan__ribbon for featured tier callout */
body.sikshya-marketing .sk-addons-compare__col .sk-plan__ribbon {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   Addons hub — "When to upgrade" trigger cards
   ============================================================ */
body.sikshya-marketing .sk-addons-when__grid {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 980px) {
    body.sikshya-marketing .sk-addons-when__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body.sikshya-marketing .sk-addons-when__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-addons-when__grid li {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

body.sikshya-marketing .sk-addons-when__grid li:hover {
    border-color: var(--sk-border-strong);
    transform: translateY(-2px);
}

body.sikshya-marketing .sk-addons-when__grid li .sk-tier-badge {
    align-self: flex-start;
    margin-bottom: 0.25rem;
}

body.sikshya-marketing .sk-addons-when__grid h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--sk-text-primary);
    line-height: 1.35;
}

body.sikshya-marketing .sk-addons-when__grid p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============================================================
   Integrations hub — category nav, panels, rows
   Different visual structure from Features (catalog) and Addons (3-col comparison)
   ============================================================ */
body.sikshya-marketing .sk-int-nav {
    padding: 1.25rem 0 1.5rem;
    background: var(--sk-bg-section);
    border-bottom: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-int-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

body.sikshya-marketing .sk-int-nav__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: 999px;
    color: var(--sk-text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-int-nav__chip:hover {
    border-color: var(--sk-brand-primary);
    color: var(--sk-brand-primary);
    transform: translateY(-1px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-int-nav__icon {
    font-size: 1.1rem;
    line-height: 1;
}

body.sikshya-marketing .sk-int-category {
    scroll-margin-top: 80px;
}

body.sikshya-marketing .sk-int-category + .sk-int-category {
    padding-top: 0;
}

body.sikshya-marketing .sk-int-category__inner {
    max-width: 880px;
}

body.sikshya-marketing .sk-int-category__head {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-int-category__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    background: var(--sk-brand-primary-light);
    border-radius: var(--sk-radius);
}

body.sikshya-marketing .sk-int-category__head h2 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
}

body.sikshya-marketing .sk-int-category__head p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

body.sikshya-marketing .sk-int-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.sikshya-marketing .sk-int-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    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-int-row:hover {
    border-color: var(--sk-brand-primary);
    transform: translateX(2px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-int-row__copy {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-int-row__copy h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-int-row__copy p {
    margin: 0;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

body.sikshya-marketing .sk-int-row__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-int-row__arrow {
    color: var(--sk-text-muted);
    font-size: 1.1rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

body.sikshya-marketing .sk-int-row:hover .sk-int-row__arrow {
    color: var(--sk-brand-primary);
    transform: translateX(3px);
}

@media (max-width: 600px) {
    body.sikshya-marketing .sk-int-category__head {
        flex-direction: column;
        gap: 0.75rem;
    }
    body.sikshya-marketing .sk-int-row {
        padding: 0.85rem 1rem;
    }
}

/* Integrations — "Three paths" guidance section */
body.sikshya-marketing .sk-int-paths {
    list-style: none;
    margin: 2rem auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1080px;
}

@media (max-width: 900px) {
    body.sikshya-marketing .sk-int-paths {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-int-paths li {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
}

body.sikshya-marketing .sk-int-paths__num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--sk-brand-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
}

body.sikshya-marketing .sk-int-paths h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-int-paths p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================
   Homepage — hero reassurance line
   ============================================================ */
body.sikshya-marketing .sk-home-hero__reassure {
    margin: 0.75rem 0 1.25rem;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
    font-style: normal;
}

body.sikshya-marketing .sk-home-hero__reassure a {
    color: var(--sk-brand-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.4rem;
}

body.sikshya-marketing .sk-home-hero__reassure a:hover {
    text-decoration: underline;
}

body.sikshya-marketing .sk-cta-band__alt {
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

body.sikshya-marketing .sk-cta-band__alt a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.sikshya-marketing .sk-cta-band__alt a:hover {
    text-decoration: none;
}

/* ============================================================
   Homepage — pricing snapshot reassurance footer
   ============================================================ */
body.sikshya-marketing .sk-home-pricing__reassure {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
}

/* ============================================================
   Homepage — "When upgrading makes sense" trigger grid
   Honest conversion section: 6 specific moments mapped to tiers.
   ============================================================ */
body.sikshya-marketing .sk-home-upgrade__grid {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 980px) {
    body.sikshya-marketing .sk-home-upgrade__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body.sikshya-marketing .sk-home-upgrade__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-upgrade__grid li {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.5rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-home-upgrade__grid li:hover {
    border-color: var(--sk-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-home-upgrade__grid li .sk-tier-badge {
    align-self: flex-start;
    margin-bottom: 0.25rem;
}

body.sikshya-marketing .sk-home-upgrade__grid h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-home-upgrade__grid p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

body.sikshya-marketing .sk-home-upgrade__footnote {
    text-align: center;
    margin: 2rem 0 0;
    color: var(--sk-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* ============================================================
   SVG icon — single base + tier-tinted variants
   ============================================================ */
body.sikshya-marketing .sk-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* ============================================================
   Addons hub — pitch + count + catalog grid
   Extends sk-addons-compare with the new pitch/count blocks and
   adds the full standalone catalog grid below the comparison.
   ============================================================ */
body.sikshya-marketing .sk-addons-compare__pitch {
    margin: 0 0 1rem;
    color: var(--sk-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    flex-grow: 1;
}

body.sikshya-marketing .sk-addons-compare__count {
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--sk-text-muted);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--sk-border);
}

body.sikshya-marketing .sk-addons-compare__count a {
    color: var(--sk-brand-primary);
    text-decoration: none;
    font-weight: 600;
}

body.sikshya-marketing .sk-addons-compare__count a:hover {
    text-decoration: underline;
}

/* Catalog: tier-grouped panels with rich icon cards */
body.sikshya-marketing .sk-addons-catalog__tier {
    margin-top: 3rem;
    scroll-margin-top: 80px;
}

body.sikshya-marketing .sk-addons-catalog__tier:first-of-type {
    margin-top: 2rem;
}

body.sikshya-marketing .sk-addons-catalog__tier-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--sk-border);
}

body.sikshya-marketing .sk-addons-catalog__tier-head h3 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-addons-catalog__tier-price {
    margin-left: auto;
    color: var(--sk-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}

body.sikshya-marketing .sk-addons-catalog__tier-price span {
    color: var(--sk-text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

body.sikshya-marketing .sk-addons-catalog__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 960px) {
    body.sikshya-marketing .sk-addons-catalog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body.sikshya-marketing .sk-addons-catalog__grid {
        grid-template-columns: 1fr;
    }
    body.sikshya-marketing .sk-addons-catalog__tier-price {
        margin-left: 0;
        width: 100%;
    }
}

body.sikshya-marketing .sk-addon-card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-addon-card:hover {
    border-color: var(--sk-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-addon-card__link {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem;
    color: var(--sk-text-primary);
    text-decoration: none;
    height: 100%;
}

body.sikshya-marketing .sk-addon-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sk-radius-sm);
    background: var(--sk-brand-primary-light);
    color: var(--sk-brand-primary);
}

body.sikshya-marketing .sk-addon-card__icon .sk-icon {
    width: 1.25rem;
    height: 1.25rem;
}

body.sikshya-marketing .sk-addon-card__icon--starter {
    background: rgba(44, 91, 168, 0.1);
    color: var(--sk-tier-starter);
}
body.sikshya-marketing .sk-addon-card__icon--growth {
    background: rgba(122, 46, 128, 0.1);
    color: var(--sk-tier-growth);
}
body.sikshya-marketing .sk-addon-card__icon--scale {
    background: rgba(185, 28, 28, 0.1);
    color: var(--sk-tier-scale);
}

body.sikshya-marketing .sk-addon-card__copy {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-addon-card__copy h4 {
    margin: 0 0 0.3rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-addon-card__copy p {
    margin: 0;
    color: var(--sk-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

body.sikshya-marketing .sk-addon-card__arrow {
    flex-shrink: 0;
    color: var(--sk-text-muted);
    align-self: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

body.sikshya-marketing .sk-addon-card:hover .sk-addon-card__arrow {
    color: var(--sk-brand-primary);
    transform: translateX(2px);
}

/* Integrations row arrow — use SVG instead of text glyph */
body.sikshya-marketing .sk-int-nav__chip .sk-icon,
body.sikshya-marketing .sk-int-category__icon .sk-icon {
    width: 1.2rem;
    height: 1.2rem;
}

body.sikshya-marketing .sk-int-category__icon .sk-icon {
    width: 1.4rem;
    height: 1.4rem;
}

body.sikshya-marketing .sk-int-row__arrow .sk-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* ============================================================
   Pricing page — Yatra-style six-card layout + grouped matrix
   ============================================================ */

/* Hero variation for pricing — slightly tighter than the homepage hero */
body.sikshya-marketing .sk-pricing-hero {
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

body.sikshya-marketing .sk-pricing-hero__note {
    margin: 1rem 0 0;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
}

body.sikshya-marketing .sk-pricing-hero__note a {
    color: var(--sk-brand-primary);
    text-decoration: none;
    font-weight: 600;
}

body.sikshya-marketing .sk-pricing-hero__note a:hover {
    text-decoration: underline;
}

/* Hero trust strip — three guarantees in a compact row */
body.sikshya-marketing .sk-pricing-hero__trust {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.5rem;
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-pricing-hero__trust {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        text-align: center;
    }
}

body.sikshya-marketing .sk-pricing-hero__trust li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-pricing-hero__trust li {
        text-align: center;
    }
}

body.sikshya-marketing .sk-pricing-hero__trust strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sk-brand-primary);
}

body.sikshya-marketing .sk-pricing-hero__trust span {
    font-size: 0.78rem;
    color: var(--sk-text-muted);
    line-height: 1.4;
}

/* Founder-signed guarantee block beneath the FAQ */
body.sikshya-marketing .sk-pricing-guarantee {
    margin-top: 2.5rem;
}

body.sikshya-marketing .sk-pricing-guarantee__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 2rem;
    background: linear-gradient(135deg, var(--sk-brand-primary-light) 0%, var(--sk-brand-accent-light) 100%);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    text-align: center;
}

body.sikshya-marketing .sk-pricing-guarantee__quote {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--sk-text-primary);
    font-style: italic;
}

body.sikshya-marketing .sk-pricing-guarantee__sig {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--sk-text-secondary);
    font-size: 0.85rem;
}

body.sikshya-marketing .sk-pricing-guarantee__sig strong {
    color: var(--sk-brand-primary);
    font-size: 0.95rem;
}

body.sikshya-marketing .sk-pricing-guarantee__sig span {
    color: var(--sk-text-muted);
    font-size: 0.78rem;
}

/* ============================================================
   Features hub — "at a glance" Free vs Pro panel
   ============================================================ */
body.sikshya-marketing .sk-features-glance {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

body.sikshya-marketing .sk-features-glance__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 800px) {
    body.sikshya-marketing .sk-features-glance__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-features-glance__col {
    padding: 1.75rem;
    border-radius: var(--sk-radius-lg);
    border: 1px solid var(--sk-border);
    background: var(--sk-bg-card);
    display: flex;
    flex-direction: column;
}

body.sikshya-marketing .sk-features-glance__col--free {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.04) 0%, var(--sk-bg-card) 50%);
}

body.sikshya-marketing .sk-features-glance__col--pro {
    background: linear-gradient(180deg, var(--sk-brand-accent-light) 0%, var(--sk-bg-card) 50%);
    border-color: var(--sk-brand-accent);
}

body.sikshya-marketing .sk-features-glance__col h2 {
    margin: 0.75rem 0 1rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-features-glance__col ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

body.sikshya-marketing .sk-features-glance__col li {
    display: flex;
    gap: 0.5rem;
    color: var(--sk-text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

body.sikshya-marketing .sk-features-glance__col li::before {
    content: '✓';
    color: var(--sk-tier-free);
    font-weight: 700;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-features-glance__col--pro li::before {
    color: var(--sk-brand-accent);
}

body.sikshya-marketing .sk-features-glance__cta {
    color: var(--sk-brand-accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    align-self: flex-start;
    transition: text-decoration 0.15s ease;
}

body.sikshya-marketing .sk-features-glance__col--free .sk-features-glance__cta {
    color: var(--sk-tier-free);
}

body.sikshya-marketing .sk-features-glance__cta:hover {
    text-decoration: underline;
}

/* ============================================================
   Integrations page — named-integrations "ships with" grid
   ============================================================ */
body.sikshya-marketing .sk-int-named__grid {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 920px) {
    body.sikshya-marketing .sk-int-named__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    body.sikshya-marketing .sk-int-named__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-int-named__card {
    display: flex;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-int-named__card:hover {
    border-color: var(--sk-brand-accent);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-int-named__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-int-named__body {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-int-named__name {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sk-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.sikshya-marketing .sk-int-named__tier {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

body.sikshya-marketing .sk-int-named__tier--free { background: rgba(22, 163, 74, 0.1); color: var(--sk-tier-free); }
body.sikshya-marketing .sk-int-named__tier--starter { background: rgba(44, 91, 168, 0.1); color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-int-named__tier--growth { background: rgba(122, 46, 128, 0.1); color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-int-named__tier--scale { background: rgba(185, 28, 28, 0.1); color: var(--sk-tier-scale); }

body.sikshya-marketing .sk-int-named__desc {
    margin: 0;
    color: var(--sk-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ============================================================
   Homepage — "By the numbers" stat strip
   ============================================================ */
body.sikshya-marketing .sk-home-stats {
    padding: 2.5rem 0 2rem;
}

body.sikshya-marketing .sk-home-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    border-radius: var(--sk-radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--sk-brand-primary-light) 0%, var(--sk-brand-accent-light) 100%);
    border: 1px solid var(--sk-border);
    padding: 1.5rem;
}

@media (max-width: 880px) {
    body.sikshya-marketing .sk-home-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    body.sikshya-marketing .sk-home-stats__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-stats__grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
}

body.sikshya-marketing .sk-home-stats__grid strong {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sk-brand-accent);
    letter-spacing: -0.02em;
}

body.sikshya-marketing .sk-home-stats__grid span {
    font-size: 0.85rem;
    color: var(--sk-text-secondary);
    line-height: 1.45;
    max-width: 240px;
}

/* ============================================================
   Homepage — Comparison strip linking to /vs/ pages
   ============================================================ */
body.sikshya-marketing .sk-home-compare__grid {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    body.sikshya-marketing .sk-home-compare__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-compare__card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    text-decoration: none;
    color: var(--sk-text-primary);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

body.sikshya-marketing .sk-home-compare__card:hover {
    border-color: var(--sk-brand-accent);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-home-compare__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-home-compare__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

body.sikshya-marketing .sk-home-compare__copy strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-text-primary);
    line-height: 1.35;
}

body.sikshya-marketing .sk-home-compare__copy span {
    font-size: 0.82rem;
    color: var(--sk-text-muted);
    line-height: 1.5;
}

body.sikshya-marketing .sk-home-compare__arrow {
    flex-shrink: 0;
    color: var(--sk-text-muted);
    font-size: 1.05rem;
    align-self: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

body.sikshya-marketing .sk-home-compare__card:hover .sk-home-compare__arrow {
    color: var(--sk-brand-accent);
    transform: translateX(3px);
}

/* ============================================================
   Homepage — Outcomes section tier badge positioning
   ============================================================ */
body.sikshya-marketing .sk-home-outcomes__grid li .sk-tier-badge {
    align-self: flex-start;
    margin-bottom: 0.5rem;
}

/* ============================================================
   Homepage — SEO content block (long-form keyword cluster)
   ============================================================ */
body.sikshya-marketing .sk-home-seo {
    background: var(--sk-bg-section);
}

body.sikshya-marketing .sk-home-seo__grid {
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 800px) {
    body.sikshya-marketing .sk-home-seo__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-home-seo__card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 1.5rem 1.6rem;
}

body.sikshya-marketing .sk-home-seo__card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    color: var(--sk-text-primary);
    line-height: 1.3;
}

body.sikshya-marketing .sk-home-seo__card p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ============================================================
   Addon hub — hero count strip + cross-links grid
   ============================================================ */
body.sikshya-marketing .sk-addons-hero__counts {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-addons-hero__counts {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.sikshya-marketing .sk-addons-hero__counts li {
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    align-items: center;
}

body.sikshya-marketing .sk-addons-hero__counts strong {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--sk-brand-accent);
    line-height: 1;
}

body.sikshya-marketing .sk-addons-hero__counts-unit {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sk-text-muted);
    margin-left: 0.05rem;
}

body.sikshya-marketing .sk-addons-hero__counts span {
    font-size: 0.78rem;
    color: var(--sk-text-secondary);
    font-weight: 500;
}

/* Cross-links grid */
body.sikshya-marketing .sk-addons-crosslinks__grid {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 980px) {
    body.sikshya-marketing .sk-addons-crosslinks__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    body.sikshya-marketing .sk-addons-crosslinks__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-addons-crosslinks__grid a {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    color: var(--sk-text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
    height: 100%;
}

body.sikshya-marketing .sk-addons-crosslinks__grid a:hover {
    border-color: var(--sk-brand-accent);
    transform: translateY(-2px);
}

body.sikshya-marketing .sk-addons-crosslinks__grid strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-addons-crosslinks__grid span {
    font-size: 0.82rem;
    color: var(--sk-text-muted);
    line-height: 1.5;
}

/* ============================================================
   Integrations hub — hero count strip
   ============================================================ */
body.sikshya-marketing .sk-int-hero__counts {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-int-hero__counts {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.sikshya-marketing .sk-int-hero__counts li {
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    align-items: center;
}

body.sikshya-marketing .sk-int-hero__counts strong {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--sk-brand-accent);
    line-height: 1.1;
}

body.sikshya-marketing .sk-int-hero__counts span {
    font-size: 0.78rem;
    color: var(--sk-text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

/* ============================================================
   Features hub — tier section header (left: copy, right: CTA)
   ============================================================ */
body.sikshya-marketing .sk-tier-section__head {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sk-border);
}

@media (max-width: 720px) {
    body.sikshya-marketing .sk-tier-section__head {
        flex-direction: column;
        gap: 1.25rem;
    }
}

body.sikshya-marketing .sk-tier-section__head-left {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-tier-section__head-left h2 {
    margin: 0.5rem 0 0.5rem;
    font-size: 1.65rem;
    line-height: 1.25;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-tier-section__head-left p {
    margin: 0;
    color: var(--sk-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 720px;
}

/* Zero out the global tier-badge bottom margin in every flex/inline context
   where it sits next to other inline items — otherwise align-items: center
   sees the badge's margin box and offsets it above its row neighbors. */
body.sikshya-marketing .sk-tier-heading .sk-tier-badge,
body.sikshya-marketing .sk-pplan__head-row .sk-tier-badge,
body.sikshya-marketing .sk-addons-compare__head .sk-tier-badge,
body.sikshya-marketing .sk-pmatrix__table thead th .sk-tier-badge,
body.sikshya-marketing .sk-addons-catalog__tier-head .sk-tier-badge,
body.sikshya-marketing .sk-plan__tier.sk-tier-badge {
    margin-bottom: 0;
}

body.sikshya-marketing .sk-tier-section__head-cta {
    flex-shrink: 0;
}

/* Per-feature card — tier-tinted icon for visual differentiation */
body.sikshya-marketing .sk-tier-section__grid .sk-card__link {
    padding: 1.25rem 1.25rem 1.5rem;
}

body.sikshya-marketing .sk-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    margin-bottom: 0.85rem;
    background: var(--sk-brand-primary-light);
    color: var(--sk-brand-primary);
}

body.sikshya-marketing .sk-card__icon .sk-icon {
    width: 18px;
    height: 18px;
}

body.sikshya-marketing .sk-card__icon--free { background: rgba(22, 163, 74, 0.1); color: var(--sk-tier-free); }
body.sikshya-marketing .sk-card__icon--starter { background: rgba(44, 91, 168, 0.1); color: var(--sk-tier-starter); }
body.sikshya-marketing .sk-card__icon--growth { background: rgba(122, 46, 128, 0.1); color: var(--sk-tier-growth); }
body.sikshya-marketing .sk-card__icon--scale { background: rgba(185, 28, 28, 0.1); color: var(--sk-tier-scale); }

/* Billing toggle — pill switcher above the cards */
body.sikshya-marketing .sk-pricing-toggle-section {
    padding-top: 0;
    padding-bottom: 1.5rem;
}

body.sikshya-marketing .sk-pricing-toggle-wrap {
    display: flex;
    justify-content: center;
}

body.sikshya-marketing .sk-billing-toggle {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 999px;
    gap: 2px;
}

body.sikshya-marketing .sk-billing-toggle__btn {
    background: transparent;
    border: none;
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-text-secondary);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-billing-toggle__btn:hover {
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-billing-toggle__btn.is-active {
    background: #fff;
    color: var(--sk-text-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

body.sikshya-marketing .sk-billing-toggle__save {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
}

/* Six-card grid — three columns; visible row swaps via data-billing */
body.sikshya-marketing .sk-pricing-grid-wrap {
    padding-top: 0;
}

body.sikshya-marketing .sk-pplan-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 980px) {
    body.sikshya-marketing .sk-pplan-grid {
        grid-template-columns: 1fr;
    }
}

/* Show/hide based on billing mode set on the wrapping section */
body.sikshya-marketing .sk-pricing-grid-wrap[data-billing="yearly"] .sk-pplan--lifetime { display: none; }
body.sikshya-marketing .sk-pricing-grid-wrap[data-billing="lifetime"] .sk-pplan--yearly { display: none; }

body.sikshya-marketing .sk-pplan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    /* More vertical breathing room — cards now read as confident chunks
       rather than a compressed wall of text. */
    padding: 2.25rem 1.85rem 1.85rem;
    box-shadow: var(--sk-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    gap: 0.25rem;
}

body.sikshya-marketing .sk-pplan:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow);
}

body.sikshya-marketing .sk-pplan--featured {
    /* Featured card uses the LMS purple to echo the brand wordmark.
       The accent ring is an inset box-shadow (not a 2px border) so the box-model
       stays identical to non-featured cards — otherwise the +1px border throws
       off where the ribbon sits relative to the card edge. */
    border-color: var(--sk-brand-accent);
    box-shadow: inset 0 0 0 1px var(--sk-brand-accent), var(--sk-shadow);
    background: linear-gradient(180deg, var(--sk-brand-accent-light) 0%, var(--sk-bg-card) 40%);
}

body.sikshya-marketing .sk-pplan__ribbon {
    position: absolute;
    top: -11px;
    right: 22px;
    background: linear-gradient(90deg, var(--sk-brand-primary), var(--sk-brand-accent));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(122, 46, 128, 0.35);
}

body.sikshya-marketing .sk-pplan__head {
    margin-bottom: 1rem;
}

/* Tier badge + license pill row sits at the top of every card */
body.sikshya-marketing .sk-pplan__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.sikshya-marketing .sk-pplan__license {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--sk-bg-section);
    color: var(--sk-text-secondary);
    border: 1px solid var(--sk-border);
}

/* Scale 1-site / 15-site toggle. Slots into the head row in place of the
   .sk-pplan__license pill so cards stay vertically aligned across tiers. */
body.sikshya-marketing .sk-scale-license-toggle {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--sk-bg-section);
    border: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-scale-license-toggle__btn {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--sk-text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    transition: background 160ms ease, color 160ms ease;
    line-height: 1;
}

body.sikshya-marketing .sk-scale-license-toggle__btn:hover {
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-scale-license-toggle__btn.is-active {
    background: var(--sk-text-primary);
    color: #fff;
}

/* Variant blocks: only the one matching data-scale-license on the card root
   is visible. The same markup is reused on /pricing/ (.sk-pplan cards) AND on
   the landing-page snapshot (.sk-plan cards) — both selectors cover both. */
body.sikshya-marketing .sk-pplan__variant {
    display: none;
}

body.sikshya-marketing .sk-pplan[data-scale-license="1site"] .sk-pplan__variant[data-scale-variant="1site"],
body.sikshya-marketing .sk-pplan[data-scale-license="15site"] .sk-pplan__variant[data-scale-variant="15site"],
body.sikshya-marketing .sk-plan[data-scale-license="1site"] .sk-pplan__variant[data-scale-variant="1site"],
body.sikshya-marketing .sk-plan[data-scale-license="15site"] .sk-pplan__variant[data-scale-variant="15site"] {
    display: block;
}

/* The CTA variant block needs to participate in flex layout so the
   "Compare features" link, CTA button, and renewal note stack the same as on
   non-Scale cards. */
body.sikshya-marketing .sk-pplan[data-scale-license="1site"] .sk-pplan__variant--cta[data-scale-variant="1site"],
body.sikshya-marketing .sk-pplan[data-scale-license="15site"] .sk-pplan__variant--cta[data-scale-variant="15site"] {
    display: flex;
    flex-direction: column;
}

/* Landing-page snapshot head row: lays out the tier badge + toggle. */
body.sikshya-marketing .sk-plan__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

body.sikshya-marketing .sk-pplan__pitch {
    margin: 0.75rem 0 0;
    color: var(--sk-text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Savings pill — amber accent so it pops against the rest of the card */
body.sikshya-marketing .sk-pplan__save {
    display: inline-block;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    letter-spacing: 0.01em;
}

body.sikshya-marketing .sk-pplan--featured .sk-pplan__save {
    background: #fde68a;
}

body.sikshya-marketing .sk-pplan__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.5rem 0 0.4rem;
}

body.sikshya-marketing .sk-pplan__price-reg {
    color: var(--sk-text-muted);
    text-decoration: line-through;
    font-size: 1rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-pplan__price-amount {
    font-size: 2.85rem;
    font-weight: 800;
    color: var(--sk-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

body.sikshya-marketing .sk-pplan__price-unit {
    color: var(--sk-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

body.sikshya-marketing .sk-pplan__meta {
    margin: 0 0 1.25rem;
    padding: 0.5rem 0;
    color: var(--sk-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-pplan__features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-grow: 1;
}

body.sikshya-marketing .sk-pplan__features li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--sk-text-secondary);
}

body.sikshya-marketing .sk-pplan__features li span {
    color: var(--sk-tier-free);
    font-weight: 700;
    flex-shrink: 0;
}

body.sikshya-marketing .sk-pplan__features li.is-excluded {
    color: var(--sk-text-muted);
}

body.sikshya-marketing .sk-pplan__features li.is-excluded span {
    color: var(--sk-text-muted);
}

body.sikshya-marketing .sk-pplan__compare-link {
    /* Inline anchors ignore vertical margins. display: block lets the
       margin: 0 0 1rem actually create space between this link and the CTA
       button below it. */
    display: block;
    text-align: center;
    color: var(--sk-brand-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

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

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

body.sikshya-marketing .sk-pplan__renewal {
    margin: 0.6rem 0 0;
    text-align: center;
    color: var(--sk-text-muted);
    font-size: 0.78rem;
}

body.sikshya-marketing .sk-pricing-grid__reassure {
    margin: 2rem 0 0;
    text-align: center;
    color: var(--sk-text-muted);
    font-size: 0.875rem;
}

/* ============================================================
   Pricing comparison matrix — grouped categories
   ============================================================ */
/* Tooltip clipping was happening because the wrapper used overflow-x: auto,
   which establishes a scroll-clip context. Above the mobile breakpoint we use
   overflow: visible so tooltip popups can escape the cell bounds; below it we
   re-enable horizontal scroll and accept that tooltips clip on small screens
   (touch users see the underlying ARIA label via screen readers regardless). */
body.sikshya-marketing .sk-pmatrix__wrap {
    overflow: visible;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    background: var(--sk-bg-card);
    margin-top: 2rem;
    /* Cap the visible area on small viewports — clamp prevents the table
       from forcing the page to horizontal-scroll on desktop. */
    position: relative;
}

/* Bumped to 900px (was 720px) so we don't leave a dead zone at 721-880px where
   the table's min-width (720px) plus container padding + cell content can push
   past the viewport, forcing whole-page horizontal scroll. Above 900px the
   table fits comfortably and overflow:visible lets tooltips escape cell bounds. */
@media (max-width: 900px) {
    body.sikshya-marketing .sk-pmatrix__wrap {
        overflow-x: auto;
    }
}

body.sikshya-marketing .sk-pmatrix__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

body.sikshya-marketing .sk-pmatrix__table thead {
    background: var(--sk-bg-section);
    border-bottom: 2px solid var(--sk-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

body.sikshya-marketing .sk-pmatrix__table th,
body.sikshya-marketing .sk-pmatrix__table td {
    padding: 0.85rem 1rem;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--sk-border);
}

body.sikshya-marketing .sk-pmatrix__table thead th {
    font-weight: 700;
    color: var(--sk-text-primary);
}

body.sikshya-marketing .sk-pmatrix__feat-col,
body.sikshya-marketing .sk-pmatrix__feat {
    text-align: left;
    width: 38%;
    color: var(--sk-text-primary);
    font-weight: 500;
}

/* tfoot CTA row — one button per tier column, mirrors the thead labels */
body.sikshya-marketing .sk-pmatrix__cta-row td {
    padding: 1rem 0.75rem 1.25rem;
    background: var(--sk-bg-section);
    border-top: 2px solid var(--sk-border);
    text-align: center;
    vertical-align: middle;
}

body.sikshya-marketing .sk-pmatrix__cta-row td.sk-pmatrix__feat-col {
    background: var(--sk-bg-section);
}

body.sikshya-marketing .sk-pmatrix__cta {
    display: inline-flex;
    width: 100%;
    max-width: 180px;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Scale cell holds two CTAs (1-site + 15-site). Stack vertically with a
   small gap so both fit inside the matrix footer cell. */
body.sikshya-marketing .sk-pmatrix__cta--alt {
    margin-top: 0.4rem;
}

/* Feature name + info icon row inside each th. Full-width flex so the link
   sits flush against the left edge and the cell reads as a clean column. */
body.sikshya-marketing .sk-pmatrix__feat-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
    text-align: left;
}

/* Feature → /features/<slug>/ link */
body.sikshya-marketing .sk-pmatrix__feat-link {
    color: var(--sk-text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--sk-border-strong);
    transition: color 0.15s ease, border-color 0.15s ease;
}

body.sikshya-marketing .sk-pmatrix__feat-link:hover,
body.sikshya-marketing .sk-pmatrix__feat-link:focus-visible {
    color: var(--sk-brand-accent);
    border-bottom-color: var(--sk-brand-accent);
    outline: none;
}

body.sikshya-marketing .sk-pmatrix__feat-name {
    color: var(--sk-text-primary);
}

/* CSS-only tooltip — info icon with a popup that appears on hover/focus. */
body.sikshya-marketing .sk-pmatrix__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--sk-text-muted);
    cursor: help;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
}

body.sikshya-marketing .sk-pmatrix__info:hover,
body.sikshya-marketing .sk-pmatrix__info:focus-visible {
    color: var(--sk-brand-accent);
    background: var(--sk-brand-accent-light);
    outline: none;
}

body.sikshya-marketing .sk-pmatrix__info svg {
    display: block;
}

/* Popup itself — sits above the icon, fades in on hover/focus. Higher
   z-index so it floats above subsequent page sections (payment gateways,
   FAQ band, etc.) when overflowing the table cell. */
body.sikshya-marketing .sk-pmatrix__info-text {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 280px;
    padding: 0.6rem 0.75rem;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 50;
    text-align: left;
    white-space: normal;
}

/* The hovered tooltip itself needs to participate in stacking context so
   the popup paints above neighboring rows / following sections. */
body.sikshya-marketing .sk-pmatrix__info:hover,
body.sikshya-marketing .sk-pmatrix__info:focus-visible {
    position: relative;
    z-index: 50;
}

/* Arrow pointing down at the icon */
body.sikshya-marketing .sk-pmatrix__info-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}

body.sikshya-marketing .sk-pmatrix__info:hover .sk-pmatrix__info-text,
body.sikshya-marketing .sk-pmatrix__info:focus-visible .sk-pmatrix__info-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Edge-of-table tooltips on first column rows — anchor left so popup doesn't
   clip out of the scrollable wrapper. Right-align variant for the last 2-3 rows
   isn't strictly needed since the popup is centered above the icon. */

/* Mobile (table wraps with overflow-x: auto) — the absolutely-positioned tooltip
   would be clipped by the scroll container, so we hide the in-cell version and
   render a JS-managed portal tooltip on <body> instead (see sikshya-pricing.js).
   The portal is positioned right above the icon's bounding box, so it visually
   anchors to the icon while escaping the overflow clip. */
@media (max-width: 900px) {
    body.sikshya-marketing .sk-pmatrix__info-text {
        display: none;
    }
}

/* Portal tooltip — injected on <body> by sikshya-pricing.js. Lives outside the
   table's scroll container so the visual anchor to the icon survives. Active
   only on mobile (the JS gates by viewport width). */
body.sikshya-marketing .sk-pmatrix__info-portal {
    position: fixed;
    width: max-content;
    max-width: min(320px, calc(100vw - 2rem));
    padding: 0.7rem 0.9rem;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.32);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    text-align: left;
}

body.sikshya-marketing .sk-pmatrix__info-portal.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Arrow pointing down at the icon, matching the desktop CSS-only tooltip. */
body.sikshya-marketing .sk-pmatrix__info-portal::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}

/* When the portal is flipped below the icon (no room above), point the arrow
   upward instead. JS adds .is-flipped when it positions below the trigger. */
body.sikshya-marketing .sk-pmatrix__info-portal.is-flipped::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #0f172a;
}

body.sikshya-marketing .sk-pmatrix__group th {
    background: var(--sk-bg-section);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--sk-text-muted);
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-top: 2px solid var(--sk-border);
}

body.sikshya-marketing .sk-pmatrix__yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(22, 163, 74, 0.1);
    color: var(--sk-tier-free);
    border-radius: 6px;
    font-weight: 700;
}

body.sikshya-marketing .sk-pmatrix__no {
    color: var(--sk-text-muted);
    font-weight: 500;
}

body.sikshya-marketing .sk-pmatrix__value {
    color: var(--sk-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ============================================================
   Payment gateway showcase
   ============================================================ */
body.sikshya-marketing .sk-pgateways__grid {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

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

@media (max-width: 560px) {
    body.sikshya-marketing .sk-pgateways__grid {
        grid-template-columns: 1fr;
    }
}

body.sikshya-marketing .sk-pgateway {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.sikshya-marketing .sk-pgateway:hover {
    border-color: var(--sk-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-sm);
}

body.sikshya-marketing .sk-pgateway__mark {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

body.sikshya-marketing .sk-pgateway__copy {
    flex: 1;
    min-width: 0;
}

body.sikshya-marketing .sk-pgateway__name {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.sikshya-marketing .sk-pgateway__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

body.sikshya-marketing .sk-pgateway__tag--free { background: rgba(22, 163, 74, 0.1); color: var(--sk-tier-free); }
body.sikshya-marketing .sk-pgateway__tag--pro { background: rgba(122, 46, 128, 0.1); color: var(--sk-tier-growth); }

body.sikshya-marketing .sk-pgateway__desc {
    margin: 0;
    color: var(--sk-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}