@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

/* ============================================================
   iGurus — Warm Cream Theme (Option 2)
   Branch: feature/igurus-cream-theme
   Loaded AFTER main.css / custom.css / page-components.css
   so every rule here wins via specificity or !important.

   Palette:
     Page / section bg  #FDFBF8  (warm cream)           var(--ig-cream)
     Cards / nav        #FFFFFF
     Primary / CTA      #A41034  (crimson)
     Hover              #D91247
     CTA band / accent  #A41034  (brand crimson)
     Testimonial bg     #2A1521  (deep plum-charcoal)    dark pause point
     Headings / ink     #111827
     Muted text         #6B7280
     Star ratings       #F59E0B  (amber)
     Dot pattern        removed — flat backgrounds only
     Footer bg          #F6EFE6
   Tokens defined in igurus-design-system.css (loaded first)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES — uniform Fraunces + Inter typography
   Scoped so these never affect non-auth pages.
══════════════════════════════════════════════════════════════ */
.ig-login-page h1,
.ig-login-page h2,
.ig-login-page h3,
.ig-lbp-slide h2,
.ig-login-title {
    font-family: 'Fraunces', Georgia, serif !important;
    text-transform: none !important;
    -webkit-text-fill-color: inherit !important;
    background: none !important;
}

.ig-login-page,
.ig-login-page p,
.ig-login-page label,
.ig-login-page input,
.ig-login-page button,
.ig-login-page a,
.ig-login-page span {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Ensure headings inside brand panel keep Fraunces */
.ig-lbp-content h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    text-transform: none !important;
}

/* ── 0. CSS variable patch (drives any var()-dependent rules) ── */
:root {
    --ig-chrome-bg:      #FFFFFF;
    --ig-chrome-darker:  #F6EFE6;
    --ig-chrome-surface: #FFFFFF;
    --ig-border:         rgba(17,24,39,0.10);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LAYOUT — 10vw side frame
   Body provides 10vw padding on each side. Full-bleed colored
   sections break out with -10vw margin then re-add 10vw padding
   so their CONTENT stays at the 10vw alignment mark.
═══════════════════════════════════════════════════════════════ */

/* ── Body frame ── */
body {
    padding-left:  10vw !important;
    padding-right: 10vw !important;
}

/* custom.css has an older, unconditional "footer: bleed to full viewport
   width" rule (.ig-footer{padding-left/right:5vw}) left over from a prior
   layout system. At desktop widths that stacks ON TOP of body's own 10vw
   frame, making the footer ~5vw narrower on each side than the header and
   every other section. Zero it here so the footer relies solely on body's
   10vw frame (matching the header) — the @media blocks below already
   re-add the correct 5vw/16px padding at the tablet/mobile breakpoints
   where .ig-footer *does* need its own break-out padding, and being later
   in this file they still win at those widths. */
.ig-footer {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ── Top gap between fixed header and first section ── */
#content-wrapper {
    padding-top: 40px !important;
    min-height: 0 !important;
}
@media (max-width: 991px) {
    #content-wrapper { padding-top: 28px !important; }
}
@media (max-width: 575px) {
    #content-wrapper { padding-top: 16px !important; }
}

/* ── Full-bleed sections: break out of body's 10vw then re-add ──
   Covers both the old .ig-* namespace and the newer .igcat/.igw etc.
   NOTE: .ig-cta-band is intentionally excluded — it is a rounded card
   that should sit INSIDE the body frame (10vw each side), not bleed out.
   .ig-why (#F4F4F2) and .ig-home-blogs (#F5F4F2) have distinct backgrounds
   and must be full-bleed so their bands extend to viewport edges. */
.ig-hero,
.ig-stats-bar,
.ig-cat-section,
.ig-inst-section,
.ig-testi-section,
.ig-fact,
.ig-faq,
.ig-journey,
.ig-instructors,
.ig-cr-hero,
.ig-cr-body,
.ig-instr,
.ig-join,
.ig-shorts-section,
.igcat,
.igw,
.ig-why,
.ig-home-blogs,
.courses-area.section-pt-120,
.ig-footer,
.ig-footer-bottom,
.ig-footer .ig-footer-copy,
.coh-hero,
.coh-body,
.hc-hero,
.hc-section,
.hc-section--tint {


    box-sizing: border-box !important;
}

/* ── igw: re-align content with body 10vw frame (full-bleed rule uses 15vw) ── */
.igw {
    padding-left:  10vw !important;
    padding-right: 10vw !important;
}

/* ── CTA band: contained card — sits in the 10vw body frame ── */
.ig-cta-band {
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* ── Tablet (≤991px): 5vw frame ── */
@media (max-width: 991px) {
    body {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
    }
    .ig-hero,
    .ig-stats-bar,
    .ig-cat-section,
    .ig-inst-section,
    .ig-testi-section,
    .ig-fact,
    .ig-faq,
    .ig-journey,
    .ig-instructors,
    .ig-cr-hero,
    .ig-cr-body,
    .ig-instr,
    .ig-join,
    .ig-shorts-section,
    .igcat,
    .igw,
    .ig-why,
    .ig-home-blogs,
    .courses-area.section-pt-120,
    .ig-footer,
    .ig-footer-bottom,
    .ig-footer .ig-footer-copy,
    .coh-hero,
    .coh-body,
    .hc-hero,
    .hc-section,
    .hc-section--tint {
        margin-left:  -5vw !important;
        margin-right: -5vw !important;
        padding-left:  5vw !important;
        padding-right: 5vw !important;
        width: calc(100% + 10vw) !important;
    }
}

/* ── Mobile (≤575px): no side frame ── */
@media (max-width: 575px) {
    body {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
    .ig-hero,
    .ig-stats-bar,
    .ig-cat-section,
    .ig-inst-section,
    .ig-testi-section,
    .ig-fact,
    .ig-faq,
    .ig-journey,
    .ig-instructors,
    .ig-cr-hero,
    .ig-cr-body,
    .ig-instr,
    .ig-join,
    .ig-shorts-section,
    .igcat,
    .igw,
    .ig-why,
    .ig-home-blogs,
    .courses-area.section-pt-120,
    .ig-footer,
    .ig-footer-bottom,
    .ig-footer .ig-footer-copy,
    .coh-hero,
    .coh-body,
    .hc-hero,
    .hc-section,
    .hc-section--tint {
        margin-left:  0 !important;
        margin-right: 0 !important;
        padding-left:  16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }
}

/* ── Canonical container inside every full-bleed section ──────
   Full-bleed sections supply the 10vw/5vw/16px edge padding
   themselves. Any .container/.custom-container nested inside must
   NOT shrink (custom.css 88% rule) or add extra gutter (Bootstrap
   default 12px). max-width:100% + padding:0 keeps col content at
   exactly the section's own edge — the same edge as the header
   (.tg-header__area) and footer (.ig-footer .container). */
.ig-hero .container, .ig-hero .custom-container,
.ig-stats-bar .container,
.ig-cat-section .container,
.ig-inst-section .container,
.ig-testi-section .container,
.ig-fact .container,
.ig-faq .container,
.ig-journey .container,
.ig-instructors .container,
.ig-cr-hero .container, .ig-cr-body .container,
.ig-instr .container,
.ig-join .container,
.ig-shorts-section .container,
.igcat .container, .igcat .custom-container,
.igw .container, .igw .custom-container,
.courses-area .container, .courses-area .custom-container,
.coh-hero .container, .coh-body .container,
.igleg-lhdr .container,
.ct-metrics .container,
.ct-hq-wrap .container,
.ct-body .container,
.ct-ways-section .container,
.ct-cta-strip .container,
.ctp-info-strip .container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}

/* .main-area qualifier bumps specificity past the generic
   `.main-area > section > .container` fallback (L5966) that otherwise
   caps this at 720px between 768–991px. */
.main-area .hc-hero .container,
.main-area .hc-section .container,
.main-area .hc-section--tint .container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}

/* ── Section inner-wrapper alignment — strip ad-hoc indent/centering ─────────
   The page frame (10vw desktop / 5vw tablet / 16px mobile) lives at the SECTION
   level for full-bleed sections, and at the BODY level for contained sections.
   Custom.css adds extra horizontal padding or independent max-width centering to
   specific inner wrappers, which drifts their content off the canonical left/right
   edge established by the header and all ig-wrap sections.

   Sources overridden (all are NO !important in custom.css, so a single
   !important rule here wins regardless of cascade position):
   • .ig-fact__inner { padding: 0 10% !important }                  → L5975
   • .ig-faq__inner  { max-width:1200px; margin:auto; pad:0 15px }  → L8811/L9578
   • .ig-why__inner  { max-width:1340px; margin:auto; pad:0 5% }    → L12267
   • .igw__wrap      { max-width:1340px; margin:auto }               → L12619
   • .ig-wrap        { padding-inline:20px } at ≤991px              → L10575
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Stats counter — remove 10% extra horizontal indent */
.ig-fact .ig-fact__inner {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* 2. FAQ — remove 1200px fixed-width centering and 15px side padding */
.ig-faq .ig-faq__inner {
    max-width:    100% !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
    padding-left: 0    !important;
    padding-right:0    !important;
}

/* 3. Features (ig-why) — remove 5% extra indent and 1340px centering */
.ig-why .ig-why__inner {
    max-width:    100% !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
    padding-left: 0    !important;
    padding-right:0    !important;
}

/* 4. Why iGurus reskin (igw) — remove 1340px centering (no horiz. padding to clear) */
.igw .igw__wrap {
    max-width:    100% !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
}

/* 5. All ig-wrap sections at tablet (≤991px) — custom.css L10575 adds 20px extra.
   The section's own 5vw frame already provides the correct edge at tablet. */
@media (max-width: 991px) {
    .ig-wrap {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   A. HEADER  —  canonical 10vw side-frame
   ─────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH: every full-bleed section carries its
   own 10vw side padding (5vw tablet / 16px mobile) so content
   starts at exactly that edge from the viewport. The header must
   share that same edge.

   HOW: apply the 10vw frame to .tg-header__area itself (overrides
   custom.css L8545 `.tg-header__area{padding:0!important}` — same
   specificity (0,1,0), ig-theme.css loads later → wins). The
   background remains full-width (position:fixed; left:0; width:100%).
   .container inside gets max-width:100% to fill the padded area
   without the 88%-centering drift from custom.css's breakpoints.
   .tgmenu__wrap gets padding:0 — the area already provides the frame.
   ═══════════════════════════════════════════════════════════════ */

header {
    background:        rgba(245,241,234,.88) !important;
    background-image:  none !important;
    backdrop-filter:   blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.tg-header__area,
.tg-header__area.sticky-menu {
    background:              rgba(245,241,234,.88) !important;
    background-image:        none !important;
    border-bottom:           1px solid rgba(0,0,0,.07) !important;
    box-shadow:              none !important;
    backdrop-filter:         blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition:              box-shadow .2s ease;
    padding-left:  10vw !important;
    padding-right: 10vw !important;
}
/* Scrolled state */
.tg-header__area.ig-scrolled {
    box-shadow: 0 2px 16px rgba(17,24,39,0.08) !important;
}
/* Header frame was hardcoded to 10vw at every width, while body/footer
   (and every .ig-wrap section) drop to 5vw ≤991px and 0/16px ≤575px —
   the doc comment above always called for the header to track those same
   breakpoints, it just never got wired up. Match them so the left/right
   gap stays identical to the footer at every screen size. */
@media (max-width: 991px) {
    .tg-header__area,
    .tg-header__area.sticky-menu {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
    }
}
@media (max-width: 575px) {
    .tg-header__area,
    .tg-header__area.sticky-menu {
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
}

/* Container: fill the 10vw-padded area (max-width:100% prevents custom.css
   88% breakpoint from shifting header independently of ig-wrap sections) */
.tg-header__area .container,
.tg-header__area .custom-container,
.tg-header__area .container.custom-container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}

/* Wrap: no extra side padding — the area frame already positions content */
.tg-header__area .tgmenu__wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* Tablet (≤991px): body frame = 5vw → header matches */
@media (max-width: 991px) {
    .tg-header__area,
    .tg-header__area.sticky-menu {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
    }
}
/* Mobile (≤575px): matches full-bleed sections' 16px */
@media (max-width: 575px) {
    .tg-header__area,
    .tg-header__area.sticky-menu {
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
}

/* Mobile menu: must be invisible on desktop.
   main.css uses transform:translateX(101%) but that breaks when any ancestor
   has a CSS transform/will-change creating a new stacking context. */
@media (min-width: 1200px) {
    .tgmobile__menu,
    .tgmobile__menu-backdrop {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Nav links — dark ink on white */
.ig-nav-link {
    color: #374151 !important;
}
.ig-nav-link:hover {
    background: rgba(164,16,52,0.06) !important;
    color: #A41034 !important;
}
.ig-nav-link.active {
    color: #A41034 !important;
    background: rgba(164,16,52,0.08) !important;
}
/* Categories trigger: highlight only while the JS-driven menu is actually open —
   not on raw :hover, which can read as "stuck on" after a page navigation leaves
   the cursor resting over the same screen position. */
.ig-nav-link--caret:hover {
    background: transparent !important;
    color: #374151 !important;
}
.ig-nav-dropdown.ig-mega-open .ig-nav-link--caret {
    background: rgba(164,16,52,0.08) !important;
    color: #A41034 !important;
}

/* Logo + Categories group — Categories trigger sits right beside the logo
   as a bordered pill, separate from the Home/Courses/Klips/Shorts row */
.ig-logo-group {
    display: flex !important;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.ig-cat-trigger { position: relative; }
.ig-cat-trigger__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    border: 1.5px solid rgba(17,24,39,0.14) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: border-color .15s !important;
}
.ig-cat-trigger__btn:hover,
.ig-cat-trigger.ig-mega-open .ig-cat-trigger__btn {
    border-color: rgba(164,16,52,0.4) !important;
}
.ig-cat-trigger__icon {
    font-size: 13px;
    opacity: .7;
}

/* Categories dropdown panel — white, no dot */
/* top: calc(100%+10px) in custom.css creates a 10px dead zone — override to 0 gap */
.ig-dropdown-panel {
    background:       #FFFFFF !important;
    background-image: none !important;
    border-color:     rgba(17,24,39,0.09) !important;
    box-shadow:       0 16px 48px rgba(17,24,39,0.12) !important;
    top:              100% !important;
    margin-top:       4px !important;
}
/* Transparent bridge so the mouse doesn't lose hover crossing the 4px gap */
.ig-nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
}
.ig-mega-cat-item { color: #111827 !important; }
.ig-mega-cat-item:hover,
.ig-mega-cat-item.active { background: #FDFBF8 !important; color: #A41034 !important; }
.ig-mega-sub-panel a { color: #6B7280 !important; }
.ig-mega-sub-panel a:hover { background: #FDFBF8 !important; color: #A41034 !important; }

/* Header search bar — light border on white */
.ig-header-search {
    background:   rgba(17,24,39,0.04) !important;
    border-color: rgba(17,24,39,0.12) !important;
}
.ig-header-search:focus-within {
    border-color: rgba(164,16,52,.35) !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,.10) !important;
}
.ig-hs-icon {
    color: #9CA3AF !important;
}
.ig-hs-input {
    color: #111827 !important;
}
.ig-hs-input::placeholder {
    color: #9CA3AF !important;
}
/* Fallback: the older .input-grp search form on header */
.ig-header-search .input-grp {
    background:   rgba(17,24,39,0.04) !important;
    border-color: rgba(17,24,39,0.12) !important;
}
.ig-header-search input {
    color: #111827 !important;
}
.ig-header-search input::placeholder {
    color: #9CA3AF !important;
}
.ig-header-search button {
    color: #6B7280 !important;
}
.ig-header-search button:hover {
    color: #A41034 !important;
}

/* Auth buttons — adapt for white header */
.ig-hdr-btn--outline {
    color:        #fff !important;
    background:   #A41034 !important;
    border-color: rgba(17,24,39,0.18) !important;
}
.ig-hdr-btn--outline:hover {
    background:   #A41034 !important;
    color:        #fff !important;
    border-color: rgba(17,24,39,0.28) !important;
}
.ig-hdr-btn--solid {
    background: #A41034 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(164,16,52,0.30) !important;
}
.ig-hdr-btn--solid:hover {
    background: #D91247 !important;
    color: #FFFFFF !important;
}

/* ── Icon buttons (cart / wishlist / bell) — circular cream style ─
   custom.css L3847: border-radius 10px (square), L3848: near-invisible
   rgba bg, L3850: white-on-white icon color. Override to 40px circle. */
.ig-icon-btn {
    width:         44px !important;
    height:        44px !important;
    border-radius: 50% !important;
    background:    #FFFFFF !important;
    border:        1px solid #F0E6DD !important;
    color:         #111827 !important;
    font-size:     21px !important;
    transition:    background .18s, border-color .18s, box-shadow .18s, transform .15s !important;
}
.ig-icon-btn svg {
    width:  22px !important;
    height: 22px !important;
}
.ig-icon-btn:hover {
    background:    #F6EFE6 !important;
    border-color:  rgba(164,16,52,.30) !important;
    color:         #A41034 !important;
    box-shadow:    0 3px 10px rgba(164,16,52,.14) !important;
    transform:     scale(1.07) !important;
}

/* Gap between icon circles — 14px apart instead of 6px cluster */
.tgmenu__action .list-wrap,
.ig-header-actions .list-wrap {
    gap: 14px !important;
}

/* Count pip — 20px crimson circle, white border ─────
   custom.css L3870: blue bg overridden + L3876: near-black border. */
.tgmenu__action .mini-cart-count,
.tgmenu__action .mini-cart-count-user-notificaiton {
    width:         20px !important;
    height:        20px !important;
    min-width:     20px !important;
    padding:       0 !important;
    font-size:     11px !important;
    font-weight:   700 !important;
    background:    #A41034 !important;
    border:        2px solid #FFFFFF !important;
    border-radius: 50% !important;
    top:           -5px !important;
    right:         -5px !important;
}

/* Avatar button — crimson fill is correct; fix the white border ──
   custom.css L3894 border: rgba(255,255,255,.25) = invisible on white header. */
.ig-avatar-btn {
    border: 2px solid rgba(164,16,52,.20) !important;
}

/* ── FIX: Icon glyph color — WHITE-ON-WHITE root cause ─────────────────────
   custom.css L8230: .tg-header__area .tgmenu__action a i { color:#fff !important }
   custom.css L8557: .tg-header__area .tgmenu__action a i { color:rgba(255,255,255,.90) !important }
   Both at specificity (0,3,1). Our .ig-icon-btn rule is only (0,1,0) — loses entirely.
   Fix: use (0,3,2) = .tg-header__area .tgmenu__action a.ig-icon-btn i to beat them.

   custom.css L8676 ALSO sets color on the <a> itself (not just its `i`
   child): ".tg-header__area .tgmenu__action a { color: rgba(255,255,255,.90) }".
   The `i`-only fix above never touched this, so any icon rendered as an
   inline <svg fill="currentColor"/stroke="currentColor"> (rather than a
   Font Awesome <i>) still inherits that near-white anchor color and goes
   invisible on the cream navbar — this is why the wishlist heart looked
   "blank" even after being converted to inline SVG. Fix the anchor itself
   too, so currentColor-based icons resolve correctly regardless of
   whether they're <i> or <svg>. */
.tg-header__area .tgmenu__action a.ig-icon-btn,
.tg-header__area .tgmenu__action a.ig-icon-btn i {
    color: #111827 !important;
}
.tg-header__area .tgmenu__action a.ig-icon-btn:hover,
.tg-header__area .tgmenu__action a.ig-icon-btn:hover i {
    color: #A41034 !important;
}

/* ── FIX: Zero-count badge showing despite d-none class ────────────────────
   JS syncBadge() toggles .d-none on zero-count spans. Bootstrap .d-none is (0,1,0).
   custom.css L3874: .tgmenu__action .mini-cart-count { display:flex !important } is (0,2,0).
   Higher specificity wins → badge stays visible. Our fix at (0,3,0) beats both. */
.tgmenu__action .mini-cart-count.d-none,
.tgmenu__action .mini-cart-count-user-notificaiton.d-none {
    display: none !important;
}



/* ═══════════════════════════════════════════════════════════════
   B. MAIN CONTENT — cream + dot pattern everywhere
   Wrapper from master.blade.php:
     <main class="main-area fix">  inside  <section id="content-wrapper">
   ═══════════════════════════════════════════════════════════════ */

/* Outer content wrapper transparent so body dot shows through */
 

/* Main content area: flat cream */
main.main-area {
    background-color:  #F5F1EA !important;
    background-image:  none !important;
}

/* body also carries the cream as a universal fallback */
body {
    background-color:  #FDFBF8 !important;
    background-image:  none !important;
}


/* ── B1. Hero section ─────────────────────────────────────── */
/* Base rule (0,1,0) — handles any .ig-hero page-wide */
.ig-hero {
    
    background-size:   20px 20px !important;
    border:            none !important;        /* kill crimson border-bottom from custom.css L7974 */
}
/* Higher-specificity rule (0,2,0) — beats custom.css L10546 and L10755 which are also 0,1,0 */
.ig-hero.ig-hero--cream {
    
    background-size:   20px 20px !important;
    border:            none !important;
    overflow:          hidden !important;
}
.ig-hero::before,
.ig-hero.ig-hero--cream::before {
    
    border:     none !important;
}
/* Title text — match specificity of custom.css L10756 .ig-hero .ig-hero__title (0,2,0) */
.ig-hero .ig-hero__title { color: #111827 !important; font-family: 'Playfair Display', Georgia, serif !important; }
.ig-hero p.ig-hero__sub,
.ig-hero .ig-hero__sub   { color: #6B7280 !important; }
.ig-eyebrow     { color: #A41034 !important; }
.ig-eyebrow::before { background: #A41034 !important; }
.ig-hero__trust { border-top-color: #DDD5CA !important; }
.ig-trust-lbl   { color: #9A8F85 !important; }

/* ── Hero layout always active (was buried inside @if block in blade) ── */
.ig-hero.ig-hero--cream {
   
    display: flex !important;
    align-items: center !important;
}
/* ── Hero-wrap horizontal inset reset (desktop) ─────────────────────────
   custom.css L10841 sets padding-inline:5%!important on .ig-hero .ig-wrap
   (specificity 0,2,0). Override here with higher specificity + !important.
   Split into separate rules so one invalid selector never kills the group.
──────────────────────────────────────────────────────────────────────── */
.ig-hero.ig-hero--cream > .ig-wrap {
    width:          100% !important;
    max-width:      100% !important;
    padding-inline: 0    !important;
    padding-left:   0    !important;
    padding-right:  0    !important;
    margin-inline:  auto !important;
}
#wrapper.no-sidebar .ig-hero.ig-hero--cream > .ig-wrap {
    width:          100% !important;
    max-width:      100% !important;
    padding-inline: 0    !important;
    padding-left:   0    !important;
    padding-right:  0    !important;
    margin-inline:  auto !important;
}
@media (max-width: 991px) {
    .ig-hero.ig-hero--cream { min-height: auto !important; }
}
@media (max-width: 600px) {
    /* Restore the 20px gutter all .ig-wrap elements receive on mobile */
    .ig-hero.ig-hero--cream > .ig-wrap {
        padding-inline: 20px !important;
        padding-left:   20px !important;
        padding-right:  20px !important;
    }
}

/* ── Hero search form — remove old dark-theme floating card shadow ── */
.ig-hero__search {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    max-width: 560px;
    margin-top: 28px;
}
.ig-hero__search:focus-within {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Search bar and tag pills stay white (sit on top of dots) */
.ig-search-bar {
    background: #FFFFFF !important;
    border-color: #D6CFC5 !important;
    box-shadow: 0 2px 12px rgba(17,24,39,.07) !important;
}
.ig-search-bar:focus-within {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.10), 0 2px 12px rgba(17,24,39,.07) !important;
}
.ig-stag {
    background: #FFFFFF !important;
    border-color: #D6CFC5 !important;
    color: #374151 !important;
}

/* Search tags: flex row, not forced 3-col grid */
.ig-search-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 560px;
    margin-top: 12px;
}
.ig-search-tags .ig-stag {
    width: auto !important;
    text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════
   Hero search — premium dropdown variant
   Key challenge: custom.css `.ig-search-bar button` forces
   background:#A41034 on every <button> child. We use the
   more-specific `.ig-search-bar--drop` parent to win.
   ═══════════════════════════════════════════════════════════ */

.ig-search-bar--drop {
    position: relative;
    align-items: center !important;
    padding: 7px 7px 7px 18px !important;
    gap: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(17,24,39,.08) !important;
}

/* Search icon */
.ig-sb-icon {
    width: 19px; height: 19px;
    color: #9CA3AF; flex-shrink: 0; margin-right: 12px;
    pointer-events: none;
}

/* ── Dropdown wrapper sits in the flex row ── */
.ig-topic-drop {
    flex: 1;
    position: relative;
    min-width: 0;
}

/* ── Trigger button — MUST beat `.ig-search-bar button` (0,1,1)
       Our selector is (0,2,1) ── */
.ig-search-bar--drop .ig-topic-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 9px 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
    cursor: pointer !important;
    text-align: left !important;
    outline: none !important;
    font-family: inherit !important;
    border-radius: 0 !important;
    transition: color .15s !important;
}
.ig-search-bar--drop .ig-topic-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ig-search-bar--drop .ig-topic-trigger.has-value {
    color: #1C1514 !important;
    font-weight: 500 !important;
}

.ig-topic-chevron {
    width: 15px; height: 15px;
    color: #C4C4C4; flex-shrink: 0;
    transition: transform .25s ease, color .2s;
}
.ig-search-bar--drop .ig-topic-trigger[aria-expanded="true"] .ig-topic-chevron {
    transform: rotate(180deg);
    color: #A41034;
}

/* Thin divider between trigger and Search button */
.ig-topic-drop::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: #E5E7EB;
    pointer-events: none;
}

/* ── Dropdown panel ── */
.ig-topic-options {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: -52px;
    min-width: 380px;
    background: #FFFFFF;
    border: 1px solid rgba(17,24,39,.09);
    border-radius: 18px;
    box-shadow:
        0 4px 6px -1px rgba(17,24,39,.04),
        0 20px 48px -8px rgba(17,24,39,.14);
    padding: 10px;
    list-style: none;
    margin: 0;
    z-index: 500;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
    /* entrance animation */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.ig-topic-options.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* "Trending" label at top */
.ig-topic-options::before {
    content: 'TRENDING CATEGORIES';
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #9CA3AF;
    padding: 4px 12px 8px;
}

/* ── Each option — MUST beat `.ig-search-bar button` ── */
.ig-search-bar--drop .ig-topic-opt {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 11px 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: background .15s, color .15s !important;
    margin-bottom: 2px !important;
}
.ig-search-bar--drop .ig-topic-opt .ig-opt-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    color: #6B7280;
    transition: background .15s, color .15s;
}
.ig-search-bar--drop .ig-topic-opt:hover {
    background: #FDF2F5 !important;
    color: #A41034 !important;
}
.ig-search-bar--drop .ig-topic-opt:hover .ig-opt-icon {
    background: rgba(164,16,52,.12);
    color: #A41034;
}
.ig-search-bar--drop .ig-topic-opt.is-selected {
    background: rgba(164,16,52,.07) !important;
    color: #A41034 !important;
    font-weight: 600 !important;
}
.ig-search-bar--drop .ig-topic-opt.is-selected .ig-opt-icon {
    background: #A41034;
    color: #fff;
}

/* "All Topics" row — subtly separated */
.ig-search-bar--drop .ig-topic-opt--all {
    margin-bottom: 6px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    border-radius: 12px 12px 0 0 !important;
    padding-bottom: 13px !important;
    color: #6B7280 !important;
}
.ig-search-bar--drop .ig-topic-opt--all .ig-opt-icon {
    background: #F9FAFB;
    color: #9CA3AF;
}

/* ── Search submit button ── */
.ig-search-bar--drop .ig-sb-btn {
    background: #A41034 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 11px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .2s, box-shadow .2s !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: 10px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    letter-spacing: .01em !important;
}
.ig-search-bar--drop .ig-sb-btn:hover {
    background: #D91247 !important;
    box-shadow: 0 4px 14px rgba(164,16,52,.32) !important;
}


/* ══════════════════════════════════════════════════════════════
   Hero search — modern form (ig-hero-search-modern)
   Replaces old custom-dropdown approach with native <select>
   ══════════════════════════════════════════════════════════════ */

.ig-hero-search-modern {
    margin-top: 28px;
    max-width: 580px;
}

/* ── Pill row ── */
.ig-search-wrapper {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(17,24,39,.08);
    gap: 0;
    transition: border-color .2s, box-shadow .2s;
}
.ig-search-wrapper:focus-within {
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164,16,52,.10), 0 4px 20px rgba(17,24,39,.08);
}

/* ── Text search field ── */
.ig-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-width: 0;
}
.ig-search-field i {
    color: #9CA3AF;
    font-size: 15px;
    flex-shrink: 0;
}
.ig-search-field input[type="text"] {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px;
    color: #1C1514;
    background: transparent;
    min-width: 0;
    font-family: inherit;
    padding: 0 !important;
}
.ig-search-field input[type="text"]::placeholder { color: #9CA3AF; }

/* ── Category native select ── */
.ig-category-select {
    display: flex;
    align-items: center;
    border-left: 1px solid #E5E7EB;
    padding: 6px 14px;
    flex-shrink: 0;
}
.ig-category-select select {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    appearance: auto;
    -webkit-appearance: auto;
    max-width: 150px;
}
.ig-category-select select:focus { outline: none; }

/* ── Submit button ── */
.ig-search-wrapper > button[type="submit"] {
    background: #A41034 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    box-shadow: none !important;
    transition: background .2s, box-shadow .2s !important;
    white-space: nowrap !important;
    letter-spacing: .01em !important;
}
.ig-search-wrapper > button[type="submit"]:hover {
    background: #D91247 !important;
    box-shadow: 0 4px 14px rgba(164,16,52,.32) !important;
}

/* ── Popular tags row ── */
.ig-popular-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.ig-popular-tags > span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    white-space: nowrap;
}
.ig-popular-tags a {
    font-size: 13px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 4px 13px;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.ig-popular-tags a:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.45);
    color: #fff;
}

/* On light hero backgrounds, swap tags to dark-on-white */
.ig-hero--cream .ig-popular-tags > span {
    color: #6B7280;
}
.ig-hero--cream .ig-popular-tags a {
    color: #374151;
    background: #fff;
    border-color: #E5E7EB;
}
.ig-hero--cream .ig-popular-tags a:hover {
    background: rgba(164,16,52,.05);
    border-color: rgba(164,16,52,.25);
    color: #A41034;
}

/* ── B2. Homepage personalised sections ───────────────────── */
.ig-home-personal-section,
.ig-home-personal-section--alt,
.ig-home-personal-section + .ig-home-personal-section,
.ig-home-personal-section + .ig-home-personal-section + .ig-home-personal-section,
.ig-home-personal-section + .ig-home-personal-section + .ig-home-personal-section + .ig-home-personal-section {
    background-color:  #FDFBF8 !important;
    background-image:  none !important;
}


/* ── B3. Core named sections ──────────────────────────────── */
.ig-why-section {
    background-size: 20px 20px !important;
}
/* Slightly deeper warm tone for alternating sections */
.ig-cat-section,
.ig-inst-section {
    background-color:  #F2EBE0 !important;
    background-image:  none !important;
}
/* Shorts row */
.ig-shorts-section {
    background-color:  #FDFBF8 !important;
    background-image:  none !important;
}

/* General utility: any section/div that Bootstrap or theme sets to plain white
   inside main should show cream + dots instead */
main.main-area section,
main.main-area .section-bg {
    
    background-image:  none;
}

/* ── Dark-hero carve-out ─────────────────────────────────────────────
   The rule above is (0,1,2) and blindly overrides intentionally-dark
   split-panel heroes. Specificity here is (0,2,1) → wins cleanly.
   Add any new dark section here rather than patching page-level CSS. */
main.main-area .id-hero {
    background-color: #1C1514 !important;
    background-image: none     !important;
}

/* Stats bar — white band with subtle border/shadow on cream page */
main.main-area .ig-stats-bar {
    background-color:  #FFFFFF !important;
    background-image:  none !important;
    border-top:        1px solid #E5E7EB !important;
    border-bottom:     1px solid #E5E7EB !important;
    box-shadow:        0 1px 3px rgba(0,0,0,.04) !important;
    border-radius: 95px !important;
}
/* CTA band is now flat cream — reinforce at higher specificity */
main.main-area .ig-cta-band {
    background-image: none !important;
    background-color: #F5F1EA !important;
}


/* ── B4. Cards and surface panels — solid white, no dots ───── */
.ig-ccard,
.ig-ccat,
.ig-icard,
.igc,
.ig-hero__float {
    background:        #FFFFFF !important;
    background-image:  none !important;
}
.ig-ctab             { background: #FFFFFF !important; }
.ig-ctab.active      { background: #111827 !important; border-color: #111827 !important; }


/* ═══════════════════════════════════════════════════════════════
   C. FOOTER — solid #F6EFE6, NO dot pattern
   Selector confirmed from footer.blade.php: <footer class="ig-footer">

   Specificity battles vs custom.css:
     L4232/L8190/L8562  .ig-footer { bg: #1C1514 !important }          (0,1,0)
     L8190              .ig-footer { border-top: 3px solid #A41034 }   (0,1,0)
     L8249  .ig-footer h2/h3/h4/p { color: #fff !important }           (0,1,1)
     L8593  .ig-footer hr { border-color: … !important }               (0,1,1)
     L8595  .ig-footer .ig-fw h4/h5 { color: #fff !important }         (0,2,1)
     L8598  .ig-footer .ig-fw a/p { color: #fff !important }           (0,2,1)
     L8601  .ig-footer .ig-fw a:hover { color: #fff !important }       (0,2,1)
     L8603  .ig-footer-bottom { bg: #1C1514 !important }               (0,1,0)
     L8604  .ig-footer .ig-footer-copy { bg/color !important }         (0,2,0)
   All overrides load AFTER custom.css — equal specificity wins by cascade.
   ═══════════════════════════════════════════════════════════════ */

/* ── Background (0,1,0) — same spec as enemy, loads later → wins ── */
.ig-footer {
    background-color:  #F5F1EA !important;
    background-image:  none !important;
    border-top:        none !important;
}
.ig-footer-top {
    padding-top: 32px !important;
}
/* ig-footer carries 10vw padding (from the full-bleed rule above).
   Container: max-width:100% fills that padded area without 88% drift;
   padding:0 removes Bootstrap gutter → newsletter heading and footer
   columns both land at the footer's own 10vw edge (same as the header). */
.ig-footer .container,
.ig-footer-bottom .container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}
/* Thin crimson top-accent line */
.ig-footer::before {
    background: rgba(164,16,52,.30) !important;
}

/* ── HR (0,1,1) — beats L8593 .ig-footer hr (0,1,1) ── */
.ig-footer hr { border-color: #DDD5C8 !important; }

/* ── General heading text (0,1,1) — beats L8249 (0,1,1) ── */
.ig-footer h2,
.ig-footer h3,
.ig-footer h4,
.ig-footer h5 { color: #111827 !important; }

/* ── General body text (0,1,1) — beats L8249 (0,1,1) ── */
.ig-footer p  { color: #6B7280 !important; }

/* ── Newsletter banner — #A41034 brand background ── */
.ig-newsletter-banner {
    background:    #A41034 !important;
    border:        1px solid rgba(164,16,52,.12) !important;
    border-radius: 20px !important;
    padding:       36px 52px !important;
    margin-top:    0 !important;
    margin-bottom: 40px !important;
    position:      relative !important;
    overflow:      hidden !important;
    box-shadow:    0 2px 20px rgba(17,24,39,.06) !important;
}
.ig-newsletter-banner::before {
    content: none !important;
}
.ig-newsletter-banner h3 {
    color:                   #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size:               clamp(20px, 2.4vw, 26px) !important;
    font-weight:             700 !important;
    margin-bottom:           6px !important;
    line-height:             1.2 !important;
}
.ig-newsletter-banner p {
    color:                   #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size:               14.5px !important;
    margin:                  0 !important;
    line-height:             1.6 !important;
}

/* ── Form ── */
.ig-newsletter-banner .newsletter {
    width: 100% !important;
}
.ig-newsletter-banner .ig-newsletter-form {
    display:       flex !important;
    align-items:   center !important;
    width:         100% !important;
    max-width:     520px !important;
    margin:        0 0 0 auto !important;
    background:    #F5F1EA !important;
    border:        1.5px solid #E5E7EB !important;
    border-radius: 999px !important;
    padding:       7px 7px 7px 24px !important;
    overflow:      hidden !important;
    transition:    border-color .2s !important;
}
.ig-newsletter-banner .ig-newsletter-form:focus-within {
    border-color: rgba(164,16,52,.5) !important;
}
.ig-newsletter-banner .ig-newsletter-form input[type="email"] {
    flex:                    1 !important;
    height:                  44px !important;
    border:                  none !important;
    outline:                 none !important;
    background:              transparent !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:               14.5px !important;
    padding:                 0 !important;
    min-width:               0 !important;
}
.ig-newsletter-banner .ig-newsletter-form input[type="email"]::placeholder {
    color:                   #7A7268 !important;
    -webkit-text-fill-color: #7A7268 !important;
}
.ig-newsletter-banner .ig-newsletter-form button {
    flex-shrink:     0 !important;
    width:           44px !important;
    height:          44px !important;
    padding:         0 !important;
    border:          none !important;
    border-radius:   50% !important;
    background:      #A41034 !important;
    color:           #F5F1EA !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    transition:      background .2s, transform .2s !important;

}
.ig-newsletter-banner .ig-newsletter-form button:hover {
    background: #8C0D2C !important;

}
.ig-newsletter-banner .ig-newsletter-form button svg {
    width:   20px !important;
    height:  20px !important;
    display: block !important;
}

@media (max-width: 991px) {
    .ig-newsletter-banner {
        padding:    36px 28px !important;
        text-align: center !important;
    }
    .ig-newsletter-banner .ig-newsletter-form {
        margin: 24px auto 0 !important;
        max-width: 100% !important;
    }
}
@media (max-width: 480px) {
    .ig-newsletter-banner {
        border-radius: 16px !important;
        padding: 28px 20px !important;
    }
}

/* ── Widget headings (0,2,1) — beats L8595 .ig-footer .ig-fw h5 (0,2,1) ── */
.ig-footer .ig-fw h4,
.ig-footer .ig-fw h5 { color: #111827 !important; }

/* ── Widget body text (0,2,1) — beats L8598 .ig-footer .ig-fw p (0,2,1) ── */
.ig-footer .ig-fw p  { color: #6B7280 !important; }

/* ── Widget links (0,2,1) — beats L8598/L8601 .ig-footer .ig-fw a (0,2,1) ── */
.ig-footer .ig-fw a       { color: #374151 !important; }
.ig-footer .ig-fw a:hover { color: #A41034 !important; }

/* ── Generic footer-link class (0,2,0) — beats L8600 (0,2,0) ── */
.ig-footer .ig-footer-link { color: #374151 !important; }

/* ── Footer widget heading class reinforcement (0,1,0) ── */
.ig-footer-heading { color: #111827 !important; }
.ig-footer-heading::after { background: #A41034 !important; }

/* ── Footer link lists (0,2,1) — beats L4308 .ig-footer-links li a (0,2,1) ── */
.ig-footer-links li a,
.ig-footer-links li a::before { color: #374151 !important; }
.ig-footer-links li a:hover,
.ig-footer-links li a:hover::before { color: #A41034 !important; }

/* ── Footer desc / contact items ── */
.ig-footer-desc { color: #6B7280 !important; }
.ig-fc-item     { color: #6B7280 !important; }
.ig-fc-item i   { color: #A41034 !important; }

/* ── Contact email link (Get In Touch column) ── */
.ig-contact-email {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    color:           #374151 !important;
    font-size:       .875rem !important;
    text-decoration: none !important;
    margin-bottom:   14px !important;
    font-weight:     500 !important;
}
.ig-contact-email i {
    color:       #A41034 !important;
    font-size:   13px !important;
    flex-shrink: 0 !important;
}
.ig-contact-email:hover {
    color:           #A41034 !important;
    text-decoration: none !important;
}

/* ── Footer logo — show the uploaded iGurus PNG on the cream footer ──
   The ::after SVG was referencing the SkillGro template asset
   (frontend/img/logo/logo.svg). The correct logo is the admin-uploaded
   PNG in uploads/custom-images/ via $footerSetting->logo. */
.ig-footer .ig-footer-brand .ig-footer-logo-img {
    display:    block !important;
    max-height: 52px !important;
    width:      auto !important;
    max-width:  200px !important;
    filter:     none !important;    /* custom.css L13157 turns logo white via brightness(0) invert(1) — kill it */
    opacity:    1 !important;       /* custom.css L4254 sets opacity:.80 — restore full opacity */
}
.ig-footer .ig-footer-brand::after {
    display: none !important;
}

/* ── Social pills — convert white PNGs to crimson #A41034 ── */
.ig-social-pill {
    background:   rgba(164,16,52,.07) !important;
    border-color: rgba(164,16,52,.14) !important;
}
.ig-social-pill img {
    filter: invert(22%) sepia(74%) saturate(5000%) hue-rotate(295deg) brightness(41%) !important;
    opacity: 1 !important;
}
.ig-social-pill:hover {
    background:   rgba(164,16,52,.18) !important;
    border-color: rgba(164,16,52,.4)  !important;
}
.ig-social-pill:hover img {
    filter: invert(22%) sepia(74%) saturate(5000%) hue-rotate(295deg) brightness(54%) !important;
    opacity: 1 !important;
}

.ig-app-badges a { border-color: rgba(164,16,52,.2) !important; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — 4-column desktop grid (Explore / Company / Legal /
   Get In Touch). Bootstrap's 12-col row only offers whole-number
   fractions, which can't give Legal the extra room its longest
   link ("Refund & Cancellation Policy") needs without stealing
   width from Get In Touch. Replacing the row with a precise CSS
   grid at ≥1366px keeps the same 4 <div>s (the col-xl/lg/md/sm
   classes stay in the markup as the fallback stacking layout
   below this breakpoint).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1366px) {
    .ig-footer-upper {
        display: grid !important;
        grid-template-columns: 0.9fr 1fr 1.25fr 1.3fr !important;
        column-gap: 32px !important;
        /* Bootstrap's .row applies a negative left/right margin (from
           --bs-gutter-x) to offset its columns' own padding — with that
           padding zeroed out below and column-gap doing the spacing
           instead, the leftover negative margin would shift the whole
           grid off the 10vw frame. Cancel it. */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .ig-footer-upper > .ig-footer-col {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Guarantee no wrapping once the grid gives every column enough
       room — belt-and-braces alongside the fr widths above. */
    .ig-footer-links li a { white-space: nowrap !important; }
}

/* Safety net below 1366px, where the columns fall back to Bootstrap's
   stacked/wrapped layout and a long label (e.g. "Refund & Cancellation
   Policy") may still wrap: align the › marker to the top of the text
   instead of centering it against the wrapped block, so it sits next to
   the first line instead of floating alone between lines. Left as the
   default `center` above 1366px, where white-space:nowrap already
   guarantees a single line and centering is the correct look. */
@media (max-width: 1365.98px) {
    .ig-footer-links li a { align-items: flex-start !important; }
}

/* ── Bottom bar (0,1,0) — beats L8603 .ig-footer-bottom (0,1,0) ── */
.ig-footer-bottom {
    background-color:  #F5F1EA !important;
    background-image:  none !important;
    border-top:        1px solid #DDD5C8 !important;
}
/* ── L8604 second selector .ig-footer .ig-footer-copy (0,2,0) ── */
.ig-footer .ig-footer-copy { color: #6B7280 !important; }

.ig-copyright           { color: #9A8F85 !important; margin: 0 !important; }
.ig-bottom-links li a   { color: #374151 !important; }
.ig-bottom-links li a:hover { color: #A41034 !important; }

/* ── Bottom bar inner: copyright left, micro-links right ── */
.ig-footer-bottom__inner {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    flex-wrap:       wrap !important;
    gap:             8px 24px !important;
    padding:         14px 0 !important;
}
.ig-bottom-links {
    list-style:  none !important;
    margin:      0 !important;
    padding:     0 !important;
    display:     flex !important;
    align-items: center !important;
    gap:         0 !important;
}
.ig-bottom-links li + li::before {
    content:     '·' !important;
    padding:     0 8px !important;
    color:       #C9B99E !important;
    font-size:   .75rem !important;
}
.ig-bottom-links li a {
    font-size:       .78rem !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
}

/* ── Social icons moved into the bottom bar — compact, no bottom
     margin (custom.css L4391 gives it 20px meant for the old full-
     height column) and a tighter gap to match the copyright line. ── */
.ig-footer-bottom__inner .ig-footer-social {
    gap:           12px !important;
    margin-bottom: 0 !important;
}
.ig-footer-bottom__inner .ig-social-pill {
    width:  32px !important;
    height: 32px !important;
}
.ig-footer-bottom__inner .ig-social-pill img {
    width: 15px !important;
}

@media (max-width: 767px) {
    .ig-copyright { text-align: center !important; }
    .ig-footer-bottom__inner {
        flex-direction: column !important;
        align-items:    center !important;
        text-align:     center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   D. CTA BAND — premium crimson card-band with depth
   Rounded 24px corners, radial glow + dot texture, compact.
   Headline → subtext → two readable buttons. No avatar cluster.
   ═══════════════════════════════════════════════════════════════ */

/* Band: light cream card-band with subtle crimson accents */
.ig-cta-band {
    background:    transparent !important;
    color:         #1C1514 !important;
    position:      relative !important;
    overflow:      hidden !important;
    border-radius: 0 !important;
    border:        none !important;
    box-shadow:    none !important;
   /* margin-block:  32px !important;*/
}
/* Depth layer: removed */
.ig-cta-band::before {
    content:        none;
}
/* Kill old overlay from custom.css */
.ig-cta-band::after {
    display: none !important;
}

.ig-cta-band .ig-wrap {
    padding-block: 24px !important;
    text-align:    center !important;
    position:      relative !important;
    z-index:       1 !important;
}

/* Inner wrapper — scroll-reveal target */
.ig-cta-inner {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.ig-cta-inner.is-visible {
    animation: igCtaFadeUp .55s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes igCtaFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dissolve old .ig-cta-card wrapper */
.ig-cta-card {
    background:       transparent !important;
    background-image: none !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    padding:          0 !important;
}

/* Headline */
.ig-cta-band h2 {
    color:          #1C1514 !important;
    font-size:      clamp(26px, 3.2vw, 44px) !important;
    font-weight:    700 !important;
    line-height:    1.10 !important;
    letter-spacing: -0.022em !important;
    margin:         0 auto !important;
    max-width:      20em !important;
}

/* Subtext */
.ig-cta-band p {
    color:         #6B7280 !important;
    font-size:     clamp(15px, 1.05vw, 17px) !important;
    line-height:   1.6 !important;
    margin-top:    8px !important;
    margin-bottom: 0 !important;
    max-width:     480px !important;
    margin-inline: auto !important;
}

/* Action row */
.ig-cta-actions {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             14px !important;
    margin-top:      18px !important;
    flex-wrap:       wrap !important;
}

/* Primary: solid crimson, white text — stands out on the light card */
.ig-cta-band .ig-btn--light {
    background:   #A41034 !important;
    color:        #FFFFFF !important;
    border-color: #A41034 !important;
    box-shadow:   0 4px 18px rgba(164,16,52,.22) !important;
    font-weight:  700 !important;
    padding:      10px 32px !important;
    font-size:    1rem !important;
    transition:   background .28s ease, color .28s ease,
                  box-shadow .28s ease, transform .28s ease !important;
}
.ig-cta-band .ig-btn--light:hover {
    background:   #8E0D2C !important;
    border-color: #8E0D2C !important;
    color:        #FFFFFF !important;
    box-shadow:   0 8px 28px rgba(164,16,52,.30) !important;
    transform:    translateY(-2px) !important;
}

/* Secondary: crimson outline/ghost — clearly readable on the cream card */
.ig-cta-band .ig-btn--on-dark {
    background:   transparent !important;
    color:        #A41034 !important;
    border:       1.5px solid rgba(164,16,52,.35) !important;
    border-color: rgba(164,16,52,.35) !important;
    font-weight:  600 !important;
    padding:      10px 32px !important;
    font-size:    1rem !important;
    transition:   background .28s ease, border-color .28s ease,
                  color .28s ease, transform .28s ease !important;
}
.ig-cta-band .ig-btn--on-dark:hover {
    background:   rgba(164,16,52,.08) !important;
    border-color: #A41034 !important;
    color:        #A41034 !important;
    transform:    translateY(-2px) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ig-cta-inner.is-visible { animation: none !important; }
    .ig-cta-band .ig-btn--light,
    .ig-cta-band .ig-btn--on-dark { transition: none !important; }
    .ig-cta-band .ig-btn--light:hover,
    .ig-cta-band .ig-btn--on-dark:hover { transform: none !important; }
}

/* Mobile */
@media (max-width: 767px) {
    .ig-cta-band { border-radius: 16px !important; margin-block: 12px !important; }
    .ig-cta-band .ig-wrap { padding-block: 20px !important; }
    .ig-cta-actions { flex-direction: column !important; align-items: stretch !important; }
    .ig-cta-band .ig-btn--light,
    .ig-cta-band .ig-btn--on-dark {
        width: 100% !important; max-width: 300px !important;
        margin-inline: auto !important; justify-content: center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   E. GLOBAL BUTTON HOVER COLOURS
   ═══════════════════════════════════════════════════════════════ */

.ig-btn--primary:hover        { background: #D91247 !important; box-shadow: 0 10px 22px rgba(217,18,71,.32) !important; }
.ig-search-bar button:hover   { background: #D91247 !important; }
.ig-stag:hover                { color: #A41034 !important; border-color: #A41034 !important; background: #FDFBF8 !important; }


/* ═══════════════════════════════════════════════════════════════
   F. STAR RATINGS → amber #F59E0B
   ═══════════════════════════════════════════════════════════════ */

.ig-ccard__rating i,
.igc__rating i,
.ig-testi-rating i,
i.fa-star,
i.fas.fa-star,
i.far.fa-star {
    color: #F59E0B !important;
}


/* ═══════════════════════════════════════════════════════════════
   G. STATS BAR — white band, crimson numbers
   custom.css refs (no !important): L10149 .ig-stats-bar bg #1C1514 (0,1,0)
                                    L10151 .ig-stats-grid display:grid 4col
                                    L10152 .ig-stat padding:8px 16px; position:relative
                                    L10153 .ig-stat+.ig-stat::before divider rgba(white,.12)
   main.main-area .ig-stats-bar (B3, 0,2,0) wins background; duplicated here for
   standalone page contexts (no main.main-area wrapper).
   ═══════════════════════════════════════════════════════════════ */
.ig-stats-bar {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-top:       1px solid #E5E7EB !important;
    border-bottom:    1px solid #E5E7EB !important;
    box-shadow:       0 1px 3px rgba(0,0,0,.04) !important;
}
.ig-stat__num,
.ig-stat__num em { color: #A41034 !important; }
.ig-stat__lbl    {
    color:          #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
/* Qualitative icon signals (stats-area qualitative redesign) */
.ig-stat__icon {
    font-size:   1.6rem !important;
    color:       #A41034 !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}
/* Recolor the existing divider pseudo-element (custom.css L10153) for light bg */
.ig-stat + .ig-stat::before { background: #E5E7EB !important; }


/* ═══════════════════════════════════════════════════════════════
   COURSE CARD — Rating / New badge pills
   .igcc-rating-slot  : fixed-height slot keeps meta row aligned
   .igcc-badge-pill   : shared pill shape
   --rating           : amber star (only shown when reviews_count > 0)
   --new              : crimson tint (no amber — reserved for stars)
   ═══════════════════════════════════════════════════════════════ */
.igcc-rating-slot {
    display:         flex !important;
    align-items:     center !important;
    height:          22px !important;   /* fixed height prevents reflow */
    flex-shrink:     0 !important;
}
.igcc-badge-pill {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             4px !important;
    padding:         2px 8px !important;
    border-radius:   20px !important;
    font-size:       0.72rem !important;
    font-weight:     600 !important;
    line-height:     1 !important;
    white-space:     nowrap !important;
}
/* Rating pill — amber star on cream */
.igcc-badge-pill--rating {
    background: #FEF3C7 !important;
    color:      #92400E !important;
    border:     1px solid #FDE68A !important;
}
.igcc-badge-pill--rating i {
    color: #F59E0B !important;
    font-size: 0.65rem !important;
}
/* New pill — soft crimson, no amber */
.igcc-badge-pill--new {
    background: rgba(164, 16, 52, 0.08) !important;
    color:      #A41034 !important;
    border:     1px solid rgba(164, 16, 52, 0.18) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   COURSE CARD SYSTEM — igcc-*
   Premium card for /courses AJAX grid.
   All styling lives here per brand rules (not in courses-redesign.css).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
.igcc-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(17,24,39,.06);
    box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 14px 30px -24px rgba(17,24,39,.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .45s cubic-bezier(.2,.8,.2,1),
                transform   .45s cubic-bezier(.2,.8,.2,1),
                border-color .45s;
    animation: igcc-fadein .42s cubic-bezier(.4,0,.2,1) both;
}
.igcc-card:hover {
    box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 30px 56px -28px rgba(164,16,52,.36);
    transform: translateY(-6px);
    border-color: rgba(164,16,52,.35);
}
.igcc-card:hover .igcc-title a { color: #A41034; }

/* Staggered entrance — repeats per row of 4 */
.course-holder .col:nth-child(4n+1) .igcc-card { animation-delay:   0ms; }
.course-holder .col:nth-child(4n+2) .igcc-card { animation-delay:  70ms; }
.course-holder .col:nth-child(4n+3) .igcc-card { animation-delay: 140ms; }
.course-holder .col:nth-child(4n+4) .igcc-card { animation-delay: 210ms; }

@keyframes igcc-fadein {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Thumbnail ── */
.igcc-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    flex-shrink: 0;
    background: #111827;
}

/* Flat fallback variants */
.igcc-thumb--a { background: #111827; }
.igcc-thumb--b { background: #111827; }
.igcc-thumb--c { background: #111827; }

/* Stripe overlay removed */
.igcc-thumb--fallback::before {
    content: none;
}

/* Flat scrim on real images */
.igcc-thumb:not(.igcc-thumb--fallback)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.22);
    z-index: 2;
    pointer-events: none;
}

.igcc-thumb-img,
.igcc-thumb-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.igcc-thumb-img {
    object-fit: cover;
    display: block;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.igcc-card:hover .igcc-thumb-img { transform: scale(1.06); }

/* Category fallback */
.igcc-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 1;
}
.igcc-thumb-label {
    color: rgba(255,255,255,.92);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
    position: relative;
    z-index: 3;
}

/* ── Top-left cluster: price badge + Verified pill ── */
.igcc-top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    z-index: 4;
}

/* FREE / price badge — inside .igcc-top-left */
.igcc-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1.4;
}

/* Verified pill — below price badge */
.igcc-verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(5,150,105,.90);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 7px 3px 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    white-space: nowrap;
    line-height: 1.4;
}
.igcc-verified-pill i { font-size: 9px; }
.igcc-badge--free {
    background: #A41034;
    color: #fff;
}
.igcc-badge--price {
    background: rgba(255,255,255,.93);
    color: #A41034;
    font-weight: 800;
}

/* ── Action buttons — top-right (wishlist + cart) ── */
.igcc-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 5;
}
.igcc-actions__btns { display: contents; }

/* (Verified pill now lives in .igcc-top-left — rule below kept for safety) */
.igcc-actions .igcc-verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(5,150,105,.90);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 4px 8px 4px 6px;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
}
.igcc-verified-pill i { font-size: 9px; }
.igcc-act-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #A41034;
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
    transition: background .18s, transform .18s;
    padding: 0;
    flex-shrink: 0;
}
.igcc-act-btn:hover { background: #A41034; color: #fff; transform: scale(1.08); }
.igcc-act-btn.is-active { background: #A41034; color: #fff; }

/* ── Code icon — bottom-right ── */
.igcc-code-icon {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.32);
    z-index: 4;
    letter-spacing: .05em;
    pointer-events: none;
    user-select: none;
}

/* ── Play overlay — shown on card hover ── */
.igcc-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .3s;
    z-index: 3;
}
.igcc-play span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #A41034;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.6);
    transform: scale(.85);
    transition: transform .3s;
}
.igcc-card:hover .igcc-play         { opacity: 1; }
.igcc-card:hover .igcc-play span    { transform: scale(1); }

/* ── Rating / "New" badge — thumbnail overlay (hidden; moved to body row) ── */
.igcc-rb { display: none; }
.igcc-rb--new { display: none; }

/* ── Duration chip — bottom-left, frosted dark ── */
.igcc-dur {
    position: absolute;
    bottom: 10px;
    left: 11px;
    background: rgba(0,0,0,.50);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.igcc-dur i { font-size: 11px; }

/* ── Body ── */
.igcc-body {
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Category + rating/New meta row ── */
.igcc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 7px;
    min-width: 0;
}

/* Category chip */
.igcc-cat {
    display: inline-block;
    background: transparent;
    color: #A41034;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
    transition: opacity .15s;
    flex: 1;
    min-width: 0;
}
.igcc-cat:hover { color: #A41034; opacity: .75; text-decoration: none; }

/* Rating / "New" inline pill — sits in meta-row right */
.igcc-rb-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(164,16,52,.10);
    color: #A41034;
    line-height: 1.5;
}
.igcc-rb-inline i { color: #F59E0B; font-size: 9px; }
.igcc-rb-inline--new {
    background: rgba(164,16,52,.10);
    color: #A41034;
}

/* Title: 2-line clamp, no mid-word cut */
.igcc-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.42;
    color: #111827;
    margin: 0 0 10px;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.igcc-title a { color: inherit; text-decoration: none; }
.igcc-title a:hover { color: #A41034; }

/* Instructor row — avatar + name on left, views on right */
.igcc-instr {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    justify-content: space-between;
}
.igcc-instr-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
}
/* Views inline in instructor row */
.igcc-instr-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: #9CA3AF;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.igcc-instr-views i { font-size: 10px; }
.igcc-instr-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,0,0,.08);
}
.igcc-instr-init {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #A41034;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.igcc-instr-name {
    font-size: 11.5px;
    color: #6B7280;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Footer — pinned to card bottom ── */
.igcc-foot {
    padding: 0 16px 14px;
    margin-top: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.igcc-divider {
    border: none;
    border-top: 1px solid rgba(17,24,39,.07);
    margin: 10px 0 10px;
}
.igcc-foot-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.igcc-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
}
.igcc-verified i { font-size: 11px; color: #059669; }
.igcc-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 400;
}
.igcc-views i { font-size: 10px; }

/* Full-width CTA button */
.igcc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1.5px solid #A41034;
    background: transparent;
    color: #A41034;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .2s cubic-bezier(.4,0,.2,1),
                color     .2s cubic-bezier(.4,0,.2,1),
                gap       .2s;
}
.igcc-btn:hover {
    background: #A41034;
    color: #fff;
    text-decoration: none;
    gap: 10px;
}
.igcc-btn i {
    font-size: 11.5px;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.igcc-btn:hover i { transform: translateX(3px); }

/* ── Enforce 4-up / 2-up / 1-up grid for course-holder ── */
@media (min-width: 1200px) {
    .course-holder.row > .col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .course-holder.row > .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}
@media (max-width: 767px) {
    .course-holder.row > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .igcc-card,
    .igcc-thumb-img,
    .igcc-btn,
    .igcc-btn i {
        transition: none !important;
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — Vertical spacing rhythm
   ───────────────────────────────────────────────────────────────
   Audit findings (lesson-one layout):
     .igcat            56t / 96b   → bottom-heavy, fat gap before .igw
     .igw__wrap        0 / 0       → NO desktop padding at all
     .ig2-inst-section 100pb       → stacks 100+120 = 220px with testimonials
     .ig-testi-section 120pb       → very large
     .ig-stats-bar     64pb each   → generous for a simple icon strip

   Target: 80px top/bottom on desktop, scaling to 48px on mobile.
   Reference anchor: .ig-cta-band .ig-wrap { padding-block: 80px } ✓
   ═══════════════════════════════════════════════════════════════ */

/* ── Stats bar — compact icon strip, not a full content section ── */
.ig-stats-bar .ig-wrap {
    padding-block: 40px !important;
}

/* ── Categories — fix asymmetric 56t/96b → uniform 80px ── */
.igcat {
    padding-top:    80px !important;
    padding-bottom: 80px !important;
}

/* ── Why iGurus — add missing desktop vertical padding ──
   Source: custom.css only has responsive padding (≤991px).
   Desktop was 0/0 — the dark section abutted categories
   with no breathing room on either side.               */
.igw__wrap {
    padding-top:    80px !important;
    padding-bottom: 80px !important;
}

/* ── Instructor section — reduce 100px → 80px ── */
.ig2-inst-section {
    padding-block: 80px !important;
}

/* ── Testimonials — reduce 120px → 96px
   Slightly more than standard (intentional: dark hero-tier section
   benefits from extra air). Removes the 100+120 double-stack.   */
.ig-testi-section {
    padding-block: 96px !important;
}

/* ── Responsive scale-down (tablet) ── */
@media (max-width: 991px) {
    .igcat             { padding-top: 64px !important; padding-bottom: 64px !important; }
    .igw__wrap         { padding-top: 64px !important; padding-bottom: 64px !important; }
    .ig2-inst-section  { padding-block: 64px !important; }
    .ig-testi-section  { padding-block: 80px !important; }
    .ig-stats-bar .ig-wrap { padding-block: 32px !important; }
}

/* ── Responsive scale-down (mobile) ── */
@media (max-width: 575px) {
    .igcat             { padding-top: 48px !important; padding-bottom: 48px !important; }
    .igw__wrap         { padding-top: 48px !important; padding-bottom: 48px !important; }
    .ig2-inst-section  { padding-block: 48px !important; }
    .ig-testi-section  { padding-block: 64px !important; }
    .ig-stats-bar .ig-wrap { padding-block: 28px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   G2. TESTIMONIALS — light card-based redesign
   Section bg: #FBF7F2 (blends with page, no dark band).
   Content inside .ig-testi-card: white bg, 1px #F0E6DD border,
   box-shadow, 20px radius, 48px padding, max-width 860px centered.
   Decorative large quotation mark rendered in #F0E6DD behind text.

   Specificity notes:
     L10466 .ig-testi-section bg #1C1514              (0,1,0)
     L10913 .ig-testi-section .ig-sec-title #fff !imp (0,2,0)
   ig-theme.css loads last → cascade wins at equal specificity
   ═══════════════════════════════════════════════════════════════ */

/* Section — light, blends with page background */
.ig-testi-section {
    
    padding-block:    80px !important;
    margin-bottom:    0 !important;
}

/* White card container */
.ig-testi-card {
    position:      relative;
    overflow:      hidden;
    background:    #FFFFFF;
    border:        1px solid #F0E6DD;
    box-shadow:    0 8px 24px rgba(0,0,0,.06);
    border-radius: 20px;
    padding:       48px 52px;
    max-width:     100%;
    margin:        0 auto;
}
@media (max-width: 767px) {
    .ig-testi-card { padding: 32px 24px; }
}

/* Large faint quotation mark — decorative background watermark */
.ig-testi-card__deco {
    position:       absolute;
    top:            24px;
    left:           28px;
    font-size:      120px;
    line-height:    1;
    color:          #EBD9CE;
    pointer-events: none;
    user-select:    none;
    z-index:        0;
}

/* Push card content above the deco watermark */
.ig-testi-meta,
.ig-testi-stage { position: relative; z-index: 1; }

/* Section label + heading — light palette */
.ig-testi-section .ig-sec-title {
    color:       #111827 !important;
    font-weight: 600 !important;
}
.ig-testi-section .ig-eyebrow { color: #A41034 !important; }

/* Quote — card-sized, readable, italic */
.ig-testi-quote {
    font-size:      clamp(1.0625rem, 1.8vw, 1.25rem) !important;
    font-style:     italic !important;
    line-height:    1.75 !important;
    color:          #374151 !important;
    font-weight:    400 !important;
    letter-spacing: 0 !important;
}

/* Author */
.ig-testi-nm   { color: #111827 !important; font-weight: 700 !important; }
.ig-testi-role { color: #6B7280 !important; }

/* Avatar — default crimson; inline style per-slide can override */
.ig-testi-av { background: #A41034; color: #FFFFFF !important; }
.ig-testi-av--img { background: transparent !important; padding: 0; overflow: hidden; }
.ig-testi-av--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Arrows — white circle, soft shadow, crimson icon */
.ig-testi-arrow {
    background:   #FFFFFF !important;
    border:       1px solid #F0E6DD !important;
    box-shadow:   0 2px 8px rgba(0,0,0,.08) !important;
    color:        #A41034 !important;
}
.ig-testi-arrow:hover {
    background:   #FBF7F2 !important;
    border-color: rgba(164,16,52,.25) !important;
    color:        #A41034 !important;
    box-shadow:   0 4px 12px rgba(0,0,0,.10) !important;
}

/* Dots */
.ig-testi-dot           { background: #E5E7EB !important; }
.ig-testi-dot.is-active {
    background:    #A41034 !important;
    width:         26px !important;
    border-radius: 4px !important;
}

/* Controls row — increase gap so arrows don't feel cramped against dots */
.ig-testi-controls {
    gap:        20px !important;
    margin-top: 36px !important;
}
/* Extra left push on the dots cluster so it reads as separate from the arrows */
.ig-testi-dots {
    margin-left: 8px !important;
    gap:         8px !important;
}
/* Slide counter shown when > 6 slides */
.ig-testi-counter {
    margin-left: 8px;
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #6B7280;
    min-width:   36px;
}

/* .ig-newsletter-banner inside footer → already crimson — no change */



/* ═══════════════════════════════════════════════════════════════
   H. WHY IGURUS SECTION (.igw) — cream restyle v2 (premium polish)
   Source: why-area.blade.php  <section class="igw">
   ═══════════════════════════════════════════════════════════════ */

/* H0. Section shell: override dark #1C1514 background */
.igw {
    background-size: 20px 20px !important;
}

/* H0a. Kill orb blobs and noise overlay */
.igw__orb--1,
.igw__orb--2 { display: none !important; }
.igw__noise  { display: none !important; }

/* H1. Left panel — dark ink on cream */
.igw__eyebrow      { color: #A41034 !important; }
.igw__eyebrow-dash { background: #A41034 !important; }
.igw__heading      { color: #111827 !important; font-family: 'Playfair Display', Georgia, serif !important; }
.igw__heading-em   { color: #A41034 !important; -webkit-text-fill-color: #A41034 !important; }
.igw__lead         { color: #6B7280 !important; }

/* H2. Stats — bounded so 3 fit in 420px panel */
.igw__stats {
    gap:           20px !important;
    margin-bottom: 60px !important;
}
.igw__stat-val {
    font-size:   clamp(24px, 2.8vw, 36px) !important;
    font-weight: 800 !important;
    color:       #111827 !important;
}
.igw__stat-plus { font-size: 0.50em !important; color: #A41034 !important; }
.igw__stat-star { font-size: 0.60em !important; color: #F59E0B !important; }
.igw__stat-label {
    letter-spacing: 0.12em !important;
    color:          #6B7280 !important;
}
.igw__stat-sep {
    height:     40px !important;
    background: rgba(17,24,39,0.15) !important;
}

/* H3. CTA button — refined shadow, softer hover */
.igw__cta {
    background: #A41034 !important;
    box-shadow: 0 8px 20px rgba(164,16,52,0.22) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.igw__cta:hover {
    background:      #8E0D2C !important;
    box-shadow:      0 12px 32px rgba(164,16,52,0.30) !important;
    transform:       translateY(-2px) !important;
    color:           #ffffff !important;
    text-decoration: none !important;
}
.igw__cta:hover .igw__cta-arrow {
    transform: translateX(4px) !important;
}

/* H4. Feature cards — white, elevated, hairline border */
.igw__card {
    background:       #FFFFFF !important;
    background-image: none !important;
    border:           1px solid rgba(17,24,39,0.05) !important;
    border-radius:    20px !important;
    box-shadow:       0 2px 12px rgba(17,24,39,0.05) !important;
    padding:          36px 30px 32px !important;
    transition:       transform 0.35s cubic-bezier(0.4,0,0.2,1),
                      box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
                      border-color 0.35s ease !important;
}
.igw__card:hover {
    background:   #FFFFFF !important;
    border-color: rgba(164,16,52,0.15) !important;
    transform:    translateY(-6px) !important;
    box-shadow:   0 18px 40px rgba(17,24,39,0.12),
                  0 0 0 1px rgba(164,16,52,0.15) !important;
}

/* H5. Ghost number — crimson tint, firmly behind content */
.igw__card-num {
    color:          rgba(164,16,52,0.06) !important;
    z-index:        0 !important;
    pointer-events: none !important;
    transition:     color 0.35s ease !important;
}
.igw__card:hover .igw__card-num {
    color: rgba(164,16,52,0.10) !important;
}

/* H6. Icon tile — flat crimson, inner highlight, premium shadow */
.igw__card-ico {
    background:    #A41034 !important;
    border-radius: 14px !important;
    box-shadow:    inset 0 1px 0 rgba(255,255,255,0.15),
                   0 6px 16px rgba(164,16,52,0.25) !important;
    position:      relative !important;
    z-index:       1 !important;
    transition:    box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
                   transform  0.35s cubic-bezier(0.4,0,0.2,1),
                   filter     0.35s ease !important;
}
.igw__card:hover .igw__card-ico {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
                0 10px 28px rgba(164,16,52,0.42) !important;
    transform:  scale(1.06) !important;
    filter:     brightness(1.08) !important;
}
.igw__card-ico svg { color: #ffffff !important; stroke: #ffffff !important; }

/* H7. Card title — Fraunces, dark ink, subtle crimson on hover */
.igw__card-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size:   17px !important;
    font-weight: 600 !important;
    color:       #111827 !important;
    line-height: 1.3 !important;
    margin:      0 0 10px !important;
    position:    relative !important;
    z-index:     1 !important;
    transition:  color 0.3s ease !important;
}
.igw__card:hover .igw__card-title {
    color: #8E0D2C !important;
}

/* H8. Card body text */
.igw__card-text {
    font-size:   14px !important;
    color:       #6B7280 !important;
    line-height: 1.75 !important;
    margin:      0 !important;
    position:    relative !important;
    z-index:     1 !important;
}

/* H9. Bottom accent bar — keep from custom.css */
.igw__card-bar {
    z-index: 1 !important;
}

/* H10. Entrance animation keyframe */
@keyframes igwCardFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* H11. prefers-reduced-motion: disable transforms throughout */
@media (prefers-reduced-motion: reduce) {
    .igw__card,
    .igw__card-ico,
    .igw__cta,
    .igw__cta-arrow { transition: none !important; }
    .igw__card:hover,
    .igw__cta:hover      { transform: none !important; }
    .igw__card:hover .igw__card-ico  { transform: none !important; }
    .igw__cta:hover .igw__cta-arrow  { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   I. HERO — extra safety net for any residual white text
   The new banner-area.blade.php uses .ig-hero__title / .ig-hero__sub
   Old blade used .ig-hero__desc — cover both.
   ═══════════════════════════════════════════════════════════════ */

.ig-hero__title,
.ig-hero__title * {
    color: #111827 !important;
}
/* em/highlight inside title stays crimson */
.ig-hero__title em,
.ig-hero__title .highlight {
    color: #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
}
.ig-hero__sub,
.ig-hero__desc {
    color: #6B7280 !important;
}
/* Kill any clipped text fill on a light background — it renders invisible */
.ig-hero .ig-gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #A41034 !important;
    background-clip: unset !important;
    color: #A41034 !important;
}


/* ═══════════════════════════════════════════════════════════════
   J. INSTRUCTOR CARD — initial-avatar fallback
   Shown when instructor has no user-uploaded photo.
   PHP gate: str_contains($instructor->image, 'custom-images')
   The system default (/uploads/website-images/frontend-avatar.png)
   is a logo mark that stretches badly in the 240px card — skip it.
   ═══════════════════════════════════════════════════════════════ */

.ig2-icard__initials {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            100%;
    height:           100%;
    background:       #F5F1EA !important;
    color:            #A41034 !important;
    font-size:        5.5rem;
    font-weight:      700;
    font-family:      "Outfit", system-ui, sans-serif;
    letter-spacing:   -0.02em;
    line-height:      1;
    user-select:      none;
}
.ig2-icard__initials[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   K. WHY IGURUS (.ig-why) — features-area.blade.php
   NOTE: Section H targets the .igw namespace (why-area.blade.php).
   The HOMEPAGE uses features-area.blade.php with .ig-why namespace.

   Root cause of "200+" clipping: custom.css .ig-why__hd-right has
   flex-shrink:0 + align-items:flex-end on a column flex. Children
   with flex:1 1 auto + min-width:0 can collapse to their min-content
   (effectively 0px) at certain rendering states, causing the strip to
   shrink below the content width. Fix: use flex:0 0 auto (no grow/
   shrink) on stats so they stay at natural content size, and anchor
   the right panel with an explicit min-width at tablet+.
   ═══════════════════════════════════════════════════════════════ */

/* Stats strip — single row, natural sizing */
.ig-why__stat-strip {
    flex-wrap: nowrap !important;
    gap:       20px !important;
}

/* Right panel: reserve enough width for 3 stats at tablet+ */
@media (min-width: 768px) {
    .ig-why__hd-right {
        min-width: 440px !important;
    }
}

/* Stat items — natural size, no forced grow/shrink */
.ig-why__stat {
    flex:       0 0 auto !important;
    text-align: center !important;
}

/* Numbers — clamp scales with viewport */
.ig-why__stat strong {
    font-size:   clamp(1.5rem, 2.5vw, 2.25rem) !important;
    font-weight: 800 !important;
    color:       #111827 !important;
    white-space: nowrap !important;
}

/* Star inside "4.8" — em units so it scales with the number */
.ig-why__star-icon {
    font-size:      0.60em !important;
    color:          #F59E0B !important;
    vertical-align: middle !important;
}

/* Labels — nowrap keeps "EXPERT COURSES" on one line */
.ig-why__stat span {
    letter-spacing: 0.06em !important;
    color:          #6B7280 !important;
    white-space:    nowrap !important;
}

/* Separator — taller to span the larger numbers */
.ig-why__stat-div {
    height:      42px !important;
    flex-shrink: 0 !important;
    align-self:  center !important;
}


/* ═══════════════════════════════════════════════════════════════
   L. REFINED EDITORIAL FEEL — weights, whitespace, shadows
   Applied on top of the cream theme for a more premium look.
   ═══════════════════════════════════════════════════════════════ */

/* ── L1. Heading weights: 800/700 → 600 for editorial softness ─
   Stat numbers (.ig-stat__num, .ig-why__stat strong, etc.) are
   intentionally excluded — they must stay bold for visual impact. */
.ig-hero__title,
.ig-hero .ig-hero__title     { font-weight: 600 !important; }
.ig-why__title               { font-weight: 600 !important; }
.igw__heading                { font-weight: 600 !important; }
.ig-cta-band h2              { font-weight: 700 !important; }
/* .ig-testi-section .ig-sec-title weight consolidated into G2 */
.ig2-inst-hd h2,
.ig-sec-title                { font-weight: 600 !important; }


/* ── L2. Section vertical padding +25-30% ─────────────────────
   Before: ig-why 108px / testi 100px / stats-bar wrap 52px     */
.ig-why {
    padding: 140px 0 !important;       /* was 108px (+30%) */
}
/* .ig-testi-section padding consolidated into G2 */
.ig-stats-bar .ig-wrap {
    padding-block: 68px !important;    /* was 52px (+31%)  */
}


/* ── L3. Card shadows — soft elevation, remove hard borders ───
   Before: hard 1px border / no shadow on course + instructor cards */
.ig-ccard,
.ig-ccat,
.ig-icard,
.igc {
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
    border:     1px solid rgba(0,0,0,.04) !important;
}
.ig2-icard {
    background:    #FDFBF8 !important;
    box-shadow:    0 2px 8px rgba(0,0,0,.04) !important;
    border:        1px solid #F0E6DD !important;
    border-radius: 16px !important;
    overflow:      hidden !important;
    transition:    transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.ig-ccard:hover,
.igc:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.10) !important;
}
.ig2-icard:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,.08) !important;
    transform:  translateY(-4px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   M. INSTRUCTOR CARDS — premium refinements
   Base defined in page-components.css L41068-41342
   ═══════════════════════════════════════════════════════════════ */

/* Photo: persistent bottom-vignette to ground the image */
.ig2-icard__photo {
    position: relative !important;
}
.ig2-icard__photo::after {
    content:        '' !important;
    position:       absolute !important;
    inset:          0 !important;
    background:     rgba(17,24,39,.15) !important;
    pointer-events: none !important;
    z-index:        1 !important;
}

/* Rating: pill container */
.ig2-icard__rating {
    display:       inline-flex !important;
    align-self:    flex-start !important;
    background:    #FBF7F2 !important;
    border-radius: 12px !important;
    padding:       4px 10px !important;
}
/* Stars: slightly larger */
.ig2-icard__stars .fa-star,
.ig2-icard__stars .fa-star-half-alt,
.ig2-icard__stars .far.fa-star {
    font-size: 14px !important;
}

/* Name: weight + slight size lift */
.ig2-icard__name {
    font-weight: 700 !important;
    font-size:   1.0625rem !important;
}

/* Stats: warm-toned dividers and labels */
.ig2-icard__stats {
    border-top-color: #EDE3D8 !important;
}
.ig2-icard__stat-sep { background: #EDE3D8 !important; }
.ig2-icard__stat span { color: #9B8F82 !important; }

/* CTA: outlined crimson at rest → fill on hover */
.ig2-icard__cta {
    background: transparent !important;
    border:     1.5px solid #A41034 !important;
    color:      #A41034 !important;
}
.ig2-icard:hover .ig2-icard__cta,
.ig2-icard__cta:hover {
    background:   #A41034 !important;
    border-color: #A41034 !important;
    color:        #FFFFFF !important;
}

/* ── Share This Course — centered icon buttons ───────────────────── */
.cdp-sidebar-share {
    text-align: center !important;
}
.cdp-sidebar-share-title {
    text-align: center !important;
}
.cdp-sidebar-share .shareon {
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             8px !important;
    flex-wrap:       wrap !important;
}
.cdp-sidebar-share .shareon > * {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           38px !important;
    height:          38px !important;
    min-width:       38px !important;
    padding:         0 !important;
    border-radius:   50% !important;
    margin:          0 !important;
    position:        relative !important;
    box-sizing:      border-box !important;
    transition:      transform .18s ease, opacity .18s ease !important;
}
.cdp-sidebar-share .shareon > *:hover {
    transform: scale(1.12) !important;
    opacity:   1 !important;
}
.cdp-sidebar-share .shareon > *::before {
    position: absolute !important;
    top:      50% !important;
    left:     50% !important;
    transform: translate(-50%, -50%) !important;
    width:    18px !important;
    height:   18px !important;
    margin:   0 !important;
}

/* ── Contact FAQ accordion — fix Bootstrap [hidden]!important clash ─
   Bootstrap: [hidden]{display:none!important}
   The JS toggles ct-faq-item--open on the parent. We use that class
   (higher specificity + !important) to override Bootstrap and show
   the answer; the plain rule hides it when the class is absent.    */
.ct-faq-item__answer                      { display: none  !important; }
.ct-faq-item--open .ct-faq-item__answer   { display: block !important; }

/* ── Blog floating share bar — icon radius & margin fix ─────────── */
.bd-float-share {
    left: 20px !important;
    border-radius: 20px !important;
}
.bd-float-share .shareon {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    gap:             8px !important;
}
.bd-float-share .shareon > * {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           36px !important;
    height:          36px !important;
    min-width:       36px !important;
    padding:         0 !important;
    margin:          0 !important;
    border-radius:   50% !important;
    position:        relative !important;
    box-sizing:      border-box !important;
    transition:      transform .18s ease, opacity .18s ease !important;
}
.bd-float-share .shareon > *:hover {
    transform: scale(1.1) !important;
    opacity:   1 !important;
}
.bd-float-share .shareon > *::before {
    position:  absolute !important;
    top:       50% !important;
    left:      50% !important;
    transform: translate(-50%, -50%) !important;
    margin:    0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   REPORT ABUSE MODAL — flat design pass
   Targets both learning_lesson_index.blade.php and index.blade.php
   (same .report_abuse_modal class; no shared partial exists).
   Zero functional changes: form action, options, JS hooks unchanged.
   ══════════════════════════════════════════════════════════════════ */

/* Shell */
.report_abuse_modal .modal-content {
    border-radius: 12px !important;
    overflow:      hidden !important;
    border:        none !important;
    box-shadow:    0 20px 60px rgba(0,0,0,.18) !important;
}

/* Header — flat crimson */
.report_abuse_modal .modal-header {
    background:    #A41034 !important;
    border-bottom: none !important;
    padding:       16px 20px !important;
    align-items:   center !important;
}
.report_abuse_modal .modal-title {
    color:       #FFFFFF !important;
    font-weight: 700 !important;
    font-size:   15px !important;
    font-family: 'Inter', sans-serif !important;
    margin:      0 !important;
}
/* × close button in header — white glyph */
.report_abuse_modal .close,
.report_abuse_modal .btn-close {
    color:   rgba(255,255,255,.85) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter:  brightness(10) !important;
}

/* Explanatory copy band */
.report_abuse_modal .abuse_report_para {
    background:    #F9FAFB !important;
    padding:       14px 20px !important;
    border-bottom: 1px solid #E5E7EB !important;
    margin:        0 !important;
}
.report_abuse_modal .abuse_report_para p {
    color:       #374151 !important;
    font-size:   13.5px !important;
    line-height: 1.65 !important;
    margin:      0 !important;
    font-family: 'Inter', sans-serif !important;
}
.report_abuse_modal .abuse_report_para a {
    color:           #A41034 !important;
    text-decoration: underline !important;
}

/* Body */
.report_abuse_modal .modal-body {
    background: #FFFFFF !important;
    padding:    20px !important;
}

/* Inputs — neutral border, crimson focus */
.report_abuse_modal .form-select,
.report_abuse_modal .form-control {
    border:           1.5px solid #E5E7EB !important;
    border-radius:    8px !important;
    color:            #111827 !important;
    font-size:        14px !important;
    font-family:      'Inter', sans-serif !important;
    background-color: #FFFFFF !important;
    box-shadow:       none !important;
    padding:          10px 14px !important;
}
.report_abuse_modal .form-select:focus,
.report_abuse_modal .form-control:focus {
    border-color: #A41034 !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,.12) !important;
    outline:      none !important;
}
.report_abuse_modal textarea.form-control {
    min-height: 110px !important;
    resize:     vertical !important;
}

/* Footer */
.report_abuse_modal .modal-footer {
    background:  #FFFFFF !important;
    border-top:  1px solid #E5E7EB !important;
    padding:     12px 20px !important;
    gap:         10px !important;
}

/* Submit — primary crimson */
.report_abuse_modal .submit_report {
    background:    #A41034 !important;
    border:        2px solid #A41034 !important;
    color:         #FFFFFF !important;
    font-weight:   700 !important;
    font-size:     14px !important;
    border-radius: 8px !important;
    padding:       9px 22px !important;
    transition:    background .18s ease, border-color .18s ease !important;
}
.report_abuse_modal .submit_report:hover,
.report_abuse_modal .submit_report:focus {
    background:  #D91247 !important;
    border-color: #D91247 !important;
}

/* Close / Cancel — ghost secondary */
.report_abuse_modal .modal-footer [data-bs-dismiss="modal"] {
    background:    transparent !important;
    border:        1.5px solid #D1D5DB !important;
    color:         #374151 !important;
    font-weight:   600 !important;
    font-size:     14px !important;
    border-radius: 8px !important;
    padding:       9px 18px !important;
    transition:    background .18s ease, border-color .18s ease !important;
}
.report_abuse_modal .modal-footer [data-bs-dismiss="modal"]:hover {
    background:   #F3F4F6 !important;
    border-color: #9CA3AF !important;
}



/* ═══════════════════════════════════════════════════════════════
   N. COURSE CARD — instructor row + enrolled state
   ═══════════════════════════════════════════════════════════════ */

/* Instructor row: remove the lavender box that appears in some browsers
   (.ig-premium-card context makes this selector more specific than the
   bare .premium-instructor-row rules in page-components.css) */
.ig-premium-card .premium-instructor-row {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
   
    padding:       0 0 10px !important;
    margin-bottom: 0 !important;
}
.ig-premium-card:hover .premium-instructor-row {
    background: transparent !important;
}

/* Green border + glow instead of the default lavender */
.ig-premium-card.is-enrolled {
   border-color: rgba(164, 16, 52, 0.20) !important;
    box-shadow:   0 2px 8px rgba(16,185,129,.08), 0 8px 28px rgba(164,16,52,.07) !important;
}
.ig-premium-card.is-enrolled:hover {
    border-color: rgba(164, 16, 52, 0.20) !important;
    box-shadow:   0 4px 12px rgba(16,185,129,.12), 0 24px 48px rgba(164,16,52,.10) !important;
}

/* Override the crimson ::before accent line, always visible */
.ig-premium-card.is-enrolled::before {
    background: #A41034 !important;
    opacity:    1 !important;
    height:     3px !important;
}

/* Ensure no red outline/border bleeds from focus states inside the card */
.ig-premium-card.is-enrolled:focus-within {
   border-color: rgba(164, 16, 52, 0.20) !important;

    outline:      none !important;
}

/* ═══════════════════════════════════════════════════════════════
   O. ACCOUNT SETTINGS — profile-settings-redesign.css handles all
   styling when inside .settings-page-wrapper.
   These fallback rules apply only when that wrapper is absent.
   ═══════════════════════════════════════════════════════════════ */

/* Form inputs: crimson focus (fallback only) */
.settings-form .form-grp input:focus,
.settings-form .form-grp select:focus,
.settings-form .form-grp textarea:focus,
.instructor__profile-form .form-grp input:focus,
.instructor__profile-form .form-grp select:focus,
.instructor__profile-form .form-grp textarea:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.10) !important;
    background: #fff !important;
}
.settings-form .form-grp input:not([type="file"]),
.settings-form .form-grp select,
.settings-form .form-grp textarea,
.instructor__profile-form .form-grp input:not([type="file"]),
.instructor__profile-form .form-grp select,
.instructor__profile-form .form-grp textarea {
    background: #faf8f5 !important;
    border-color: #e5dfd8 !important;
    color: #1C1514 !important;
}

/* ── Instructor dashboard: sales card — remove head padding gap ── */
.idlc-sales-card .table-responsive { padding-top: 4px !important; }
.idlc-sales-table th { padding-top: 12px !important; }

/* Header row — canonical #F9FAFB, beats dashboard-redesign.css's
   var(--surface)/white via the extra .idlc-sales-card ancestor class. */
.idlc-sales-card .idlc-sales-table thead th {
    background: #F9FAFB !important;
}

/* Course name column — widened to take the space freed by merging the
   old separate Status/Payment columns into one Status column. */
.idlc-course-name {
    max-width: 260px !important;
}

/* Footer count row — matches the "Showing N …" pattern used on the
   Announcements/Questions table cards. */
.idlc-sales-footer {
    padding: 10px 16px;
    border-top: 1px solid #E5E7EB;
    font-size: 12px;
    color: #6B7280;
}
.idlc-sales-footer strong { color: #111827; }

/* ── Certificates Page — cream theme fixes ── */
.cert-card {
    border: 1px solid #e8e0d8 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05) !important;
}
.cert-card:hover {
    border-color: #d4c8be !important;
    box-shadow: 0 6px 24px rgba(164,16,52,.10), 0 2px 8px rgba(0,0,0,.08) !important;
}
.cert-search-wrap input[type="text"] {
    border: 1.5px solid #ddd5cb !important;
    background: #fff !important;
}
.cert-search-wrap input[type="text"]:focus {
    border-color: #A41034 !important;
    box-shadow: 0 0 0 3px rgba(164,16,52,.10) !important;
}
.cert-empty {
    border: 1.5px dashed #d4c8be !important;
}
.cert-btn-view {
    background: #A41034 !important;
    color: #fff !important;
}
.cert-btn-dl {
    background: #eef2ff !important;
    color: #3b5fc0 !important;
}
.cert-btn-li {
    background: #e6f2ff !important;
    color: #0A66C2 !important;
}
.cert-btn-copy {
    background: #f5f0eb !important;
    color: #6b5c52 !important;
}


/* ═══════════════════════════════════════════════════════════════
   N. FEATURED PROGRAMS — Premium course card system
   MasterClass/Apple editorial feel — dopamine via micro-interactions
   Applies to .igc everywhere (home, course library, category pages)
   ═══════════════════════════════════════════════════════════════ */

/* ── N0. Kill stray crimson border that bleeds from hero into courses ── */
.ig-hero { border-bottom: none !important; }

/* ── N1. Section shell: fully transparent so body's cream+dots show through ── */
.ig-courses-section {
    background-color: transparent !important;
    background-image: none !important;
    border:           none !important;
    outline:          none !important;
    padding-block:    80px 96px !important;
}

/* ── N2. Section header: tighten so "View all" doesn't float ── */
.ig-courses-hd {
    margin-bottom: 16px !important;
    align-items:   center !important;
}
.ig-courses-hd .ig-link-arrow { flex-shrink: 0; white-space: nowrap; }

/* ── N3. Grid: 4-up desktop / 2-up tablet / 1-up mobile ── */
.ig-course-grid-3 {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   24px !important;
    margin-top:            16px !important;
    align-items:           stretch !important;
}
@media (max-width: 1199px) {
    .ig-course-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
    .ig-course-grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── N4. Card shell ── */
.igc {
    background:       #FFFFFF !important;
    background-image: none !important;
    border-radius:    20px !important;
    border:           1px solid rgba(17,24,39,0.06) !important;
    box-shadow:       0 2px 8px rgba(17,24,39,0.04) !important;
    overflow:         hidden !important;
    display:          flex !important;
    flex-direction:   column !important;
    height:           100% !important;
    transition:       transform         0.35s cubic-bezier(0.4,0,0.2,1),
                      box-shadow        0.35s cubic-bezier(0.4,0,0.2,1),
                      border-color      0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
.igc:hover {
    transform:    translateY(-6px) !important;
    box-shadow:   0 16px 40px rgba(17,24,39,0.12),
                  0 0 0 1px rgba(164,16,52,0.14) !important;
    border-color: rgba(164,16,52,0.10) !important;
}

/* ── N5. Media: 16:10 aspect, cinematic zoom on hover ── */
.igc__media {
    aspect-ratio:  16/11 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow:      hidden !important;
    flex-shrink:   0 !important;
}
.igc__link { display: block; width: 100%; height: 100%; }
.igc__img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
}
.igc:hover .igc__img { transform: scale(1.06) !important; }

/* ── N6. Rating badge: frosted white pill / crimson "New" ── */
.igc__rating {
    top:                     10px !important;
    right:                   10px !important;
    padding:                 4px 10px !important;
    border-radius:           100px !important;
    font-size:               11.5px !important;
    font-weight:             700 !important;
    line-height:             1 !important;
    gap:                     4px !important;
    /* Frosted glass */
    background:              rgba(255,255,255,0.88) !important;
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border:                  1px solid rgba(255,255,255,0.65) !important;
    color:                   #111827 !important;
    box-shadow:              0 1px 4px rgba(0,0,0,0.10) !important;
}
.igc__rating i { color: #F59E0B !important; font-size: 11px !important; }

/* "New" pill — crimson solid */
.igc__rating--new {
    background:              #A41034 !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    border-color:            transparent !important;
    color:                   #FFFFFF !important;
    box-shadow:              0 2px 8px rgba(164,16,52,0.32) !important;
}
.igc__rating--new i { display: none !important; }

/* ── N7. Category pill: bottom-left, backdrop blur ── */
.igc__cat {
    backdrop-filter:         blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow:              0 2px 8px rgba(0,0,0,0.20) !important;
}

/* ── N8. Body: generous padding ── */
.igc__body {
    padding:        22px 24px 24px !important;
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    gap:            0 !important;
}

/* ── N9. Title: Fraunces, 2-line clamp, no mid-word break ── */
.igc__title {
    font-family:        'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-size:          1.05rem !important;
    font-weight:        600 !important;
    color:              #111827 !important;
    line-height:        1.38 !important;
    letter-spacing:     -0.013em !important;
    margin-bottom:      12px !important;
    min-height:         calc(1.05rem * 1.38 * 2) !important;
    /* 2-line clamp */
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    white-space:        normal !important;
    word-break:         break-word !important;
    hyphens:            auto !important;
    text-overflow:      ellipsis !important;
}
.igc__title a { color: inherit !important; text-decoration: none !important; }
.igc:hover .igc__title a { color: #A41034 !important; }

/* ── N10. Instructor row ── */
.igc__instr {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    margin-bottom: 0 !important;
}
.igc__instr img {
    width:         28px !important;
    height:        28px !important;
    border-radius: 50% !important;
    object-fit:    cover !important;
    flex-shrink:   0 !important;
    border:        1.5px solid rgba(17,24,39,0.08) !important;
}
.igc__instr-avatar {
    width:         28px !important;
    height:        28px !important;
    border-radius: 50% !important;
    background:    #FAEDF0 !important;
    color:         #A41034 !important;
    font-size:     11px !important;
    font-weight:   700 !important;
    display:       grid !important;
    place-items:   center !important;
    flex-shrink:   0 !important;
}
.igc__instr-name {
    font-size:      13px !important;
    font-weight:    500 !important;
    color:          #6B7280 !important;
    text-decoration: none !important;
    line-height:    1.3 !important;
}
.igc__instr-name:hover { color: #A41034 !important; }

/* ── N11. Hairline divider — auto-margin pushes it (+ footer) to card bottom ── */
.igc__divider {
    margin-top:    auto !important;
    margin-bottom: 14px !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    height:        1px !important;
    border:        none !important;
    background:    rgba(17,24,39,0.07) !important;
    flex-shrink:   0 !important;
}

/* ── N12. Footer ── */
.igc__foot {
    margin-top:      0 !important;
    padding-top:     0 !important;
    border-top:      none !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             8px !important;
    flex-shrink:     0 !important;
}

/* Price */
.igc__price {
    font-size:       1rem !important;
    font-weight:     700 !important;
    color:           #111827 !important;
    letter-spacing:  -0.02em !important;
    flex-shrink:     0 !important;
}
.igc__price--free {
    background:    rgba(164,16,52,0.09) !important;
    color:         #A41034 !important;
    padding:       3px 10px !important;
    border-radius: 100px !important;
    font-size:     13px !important;
    font-weight:   700 !important;
}

/* ── N13. CTA button — always visible, outlined → fills on card hover ── */
.igc__btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             5px !important;
    padding:         7px 13px !important;
    border:          1.5px solid #A41034 !important;
    background:      transparent !important;
    color:           #A41034 !important;
    font-size:       12.5px !important;
    font-weight:     600 !important;
    border-radius:   8px !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
    flex-shrink:     0 !important;
    /* Always visible — override the hide-by-default from custom.css */
    opacity:         1 !important;
    transform:       none !important;
    pointer-events:  auto !important;
    transition:      background     0.25s cubic-bezier(0.4,0,0.2,1),
                     color          0.25s cubic-bezier(0.4,0,0.2,1),
                     box-shadow     0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.igc__btn i {
    font-size:  10px !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.igc:hover .igc__btn {
    background:  #A41034 !important;
    color:       #FFFFFF !important;
    box-shadow:  0 4px 14px rgba(164,16,52,0.28) !important;
    opacity:     1 !important;
    transform:   none !important;
    border-color: #A41034 !important;
}
.igc:hover .igc__btn i { transform: translateX(4px) !important; }

/* ── N14. Staggered entrance animation ── */
@keyframes igcFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.igc--anim {
    animation: igcFadeUp 0.55s cubic-bezier(0.4,0,0.2,1) both !important;
}
@media (prefers-reduced-motion: reduce) {
    .igc { opacity: 1 !important; }
    .igc--anim { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   O. CATEGORY CARDS — compact, flat-badge reskin
   ───────────────────────────────────────────────────────────────
   Whole card is an <a> link (no separate footer button).
   Per-card CSS vars set inline from Blade:
     --igcat-accent  full hex of card's color
     --igcat-grad    flat accent color
     --igcat-glow    rgba for hover box-shadow
     --igcat-border  rgba for hover border-color
   ═══════════════════════════════════════════════════════════════ */

/* ── Fallback vars (crimson) ── */
.igcat__card {
    --igcat-accent: #A41034;
    --igcat-grad:   #A41034;
    --igcat-glow:   rgba(164,16,52,0.22);
    --igcat-border: rgba(164,16,52,0.28);
}

/* ── O1. Grid: 5-up single row on desktop ── */
.igcat__grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

/* ── O2. Card: compact, full-surface link, equal height ── */
.igcat__card {
    height:  100% !important;
    padding: 22px 20px 22px !important;
    cursor:  pointer !important;
    min-height: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),
                border-color 0.3s ease !important;
}

/* ── O3. Focus ring uses per-card accent ── */
.igcat__card:focus-visible {
    outline:        2px solid var(--igcat-accent) !important;
    outline-offset: 3px !important;
}

/* ── O4. Top accent bar: permanent, per-card color, subtle thicken on hover ── */
.igcat__card::before {
    background: var(--igcat-accent) !important;
    transform:  scaleX(1) !important;
    transition: height 0.3s ease !important;
    height:     3px !important;
}
.igcat__card:hover::before {
    height:    4px !important;
    transform: scaleX(1) !important;
}

/* ── O5. Remove legacy icon glow ── */
.igcat__icon-glow {
    display: none !important;
}

/* ── O6. Icon wrap: compact 46px ── */
.igcat__icon-wrap {
    width:         46px !important;
    height:        46px !important;
    margin-bottom: 14px !important;
}

/* ── O7. Icon badge: flat fill, white icon, rounded-square ── */
.igcat__icon {
    width:         46px !important;
    height:        46px !important;
    border-radius: 12px !important;
    background:    var(--igcat-grad) !important;
    color:         #ffffff !important;
    transition:    transform 0.3s cubic-bezier(0.4,0,0.2,1),
                   filter    0.3s ease !important;
}
.igcat__icon img {
    filter: brightness(0) invert(1) !important;
}

/* ── O8. Hide legacy footer button (removed from blade, belt-and-suspenders) ── */
.igcat__footer {
    display: none !important;
}

/* ── O9. Title: Fraunces, single line with ellipsis, accent color on hover ── */
.igcat__name {
    font-family:   'Fraunces', Georgia, serif !important;
    font-size:     0.9375rem !important;
    font-weight:   700 !important;
    color:         #111827 !important;
    line-height:   1.38 !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    display:       block !important;
    min-height:    0 !important;
    margin-bottom: 8px !important;
    transition:    color 0.3s ease !important;
}

/* ── O10. Meta: compact, neutral ── */
.igcat__meta {
    font-size:  0.8125rem !important;
    color:      #6B7280 !important;
    flex-wrap:  wrap !important;
    margin:     0 !important;
    gap:        6px !important;
}
.igcat__meta-item i {
    color:     #9CA3AF !important;
    font-size: 10px !important;
}

/* ── O11. Badge: reposition top-right, clear of accent bar ── */
.igcat__badge {
    top:   14px !important;
    right: 14px !important;
}

/* ── O12. Hover: card lifts, glow shadow, icon brightens, title tints ── */
.igcat__card:hover {
    transform:    translateY(-6px) !important;
    box-shadow:   0 16px 40px var(--igcat-glow), 0 4px 12px rgba(0,0,0,0.08) !important;
    border-color: var(--igcat-border) !important;
}
.igcat__card:hover .igcat__icon {
    filter:    brightness(1.12) saturate(1.15) !important;
    transform: scale(1.05) !important;
}
.igcat__card:hover .igcat__name {
    color: var(--igcat-accent) !important;
}

/* ── O13. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .igcat__card,
    .igcat__card:hover {
        transition: box-shadow 0.15s, border-color 0.15s !important;
        transform:  none !important;
    }
    .igcat__card::before,
    .igcat__card:hover::before {
        transition: none !important;
    }
    .igcat__icon,
    .igcat__card:hover .igcat__icon {
        transition: filter 0.15s !important;
        transform:  none !important;
    }
    .igcat__name,
    .igcat__card:hover .igcat__name {
        transition: color 0.15s !important;
    }
}

/* ── O14. Responsive breakpoints ── */
@media (max-width: 991px) {
    .igcat__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 575px) {
    .igcat__grid { grid-template-columns: 1fr !important; }
    .igcat__card { height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   O15. CARD REDESIGN — re-enables the icon-glow + hover "Explore →"
   affordance that already existed in the CSS (custom.css) but had been
   switched off/stripped from the markup by the O-series compaction
   above. Reused here per-category via the --igcat-accent/grad/glow
   vars already set inline on each card, instead of the old hardcoded
   crimson-only version, and the icon now matches the soft-tint +
   colored-glyph pattern used everywhere else on the page (hero trust
   stats, instructor requirement icons) rather than a solid color fill.
   ═══════════════════════════════════════════════════════════════ */
.igcat__card {
    min-height: 236px !important;
    display: flex !important;
    flex-direction: column !important;
}
.igcat__icon-wrap { width: 54px !important; height: 54px !important; margin-bottom: 16px !important; }
.igcat__icon-glow {
    display:    block !important;
    inset:      -12px !important;
    background: radial-gradient(circle, var(--igcat-glow), transparent 70%) !important;
}
.igcat__icon {
    width:      54px !important;
    height:     54px !important;
    background: var(--igcat-glow) !important;
    color:      var(--igcat-accent) !important;
}
.igcat__icon svg { width: 24px !important; height: 24px !important; }
.igcat__icon img { filter: none !important; width: 26px !important; height: 26px !important; }
.igcat__card:hover .igcat__icon {
    background: var(--igcat-grad) !important;
    color:      #ffffff !important;
    transform:  scale(1.06) !important;
}
.igcat__card:hover .igcat__icon img { filter: brightness(0) invert(1) !important; }

/* Footer: "Explore →" — hidden at rest, whole card is already the link so
   this is an affordance, not a separate click target */
.igcat__footer {
    display:         flex !important;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto !important;
    padding-top:     16px !important;
}
.igcat__cta {
    font-size:  0.8125rem !important;
    font-weight: 600 !important;
    color:      var(--igcat-accent) !important;
    opacity:    0 !important;
    transform:  translateX(-4px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.igcat__arrow {
    width:           28px !important;
    height:          28px !important;
    border-radius:   50% !important;
    border:          1.5px solid var(--igcat-border) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    color:           var(--igcat-accent) !important;
    font-size:       11px !important;
    flex-shrink:     0 !important;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}
.igcat__card:hover .igcat__cta { opacity: 1 !important; transform: translateX(0) !important; }
.igcat__card:hover .igcat__arrow {
    background:   var(--igcat-grad) !important;
    border-color: var(--igcat-accent) !important;
    color:        #ffffff !important;
    transform:    translateX(2px) !important;
}
@media (prefers-reduced-motion: reduce) {
    .igcat__cta, .igcat__arrow { transition: opacity 0.15s, color 0.15s, background 0.15s !important; }
}

/* ═══════════════════════════════════════════════════════════════
   P. CATEGORY SECTION HEADER — stat card + browse button redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── P1. Nuke every stray border / outline / shadow on all header
         containers — belt-and-suspenders after prior audit ── */
.igcat {
    outline:    none !important;
    box-shadow: none !important;
}
.igcat__hd {
    border-top:   none !important;
    border-left:  none !important;
    border-right: none !important;
    outline:      none !important;
    box-shadow:   none !important;
}
.igcat__hd-left,
.igcat__hd-right {
    border:     none !important;
    outline:    none !important;
    box-shadow: none !important;
}

/* ── P2. Stat card: solid crimson, premium elevated card ── */
.igcat__stat-pair {
    background:    #A41034 !important;
    border:        none !important;
    border-radius: 16px !important;
    padding:       20px 28px !important;
    gap:           24px !important;
    box-shadow:    0 8px 24px rgba(164,16,52,0.18),
                   inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.igcat__stat strong {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size:   2rem !important;
    font-weight: 700 !important;
    color:       #FFFFFF !important;
    line-height: 1 !important;
}
.igcat__stat span {
    color:          rgba(255,255,255,0.80) !important;
    font-size:      0.6875rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top:     4px !important;
}
.igcat__stat-sep {
    background: rgba(255,255,255,0.20) !important;
    height:     36px !important;
}

/* ── P3. Browse All: outlined crimson button, full-width under stat card ── */
.igcat__browse {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    width:           100% !important;
    padding:         10px 20px !important;
    border:          1.5px solid #A41034 !important;
    border-radius:   10px !important;
    background:      transparent !important;
    color:           #A41034 !important;
    font-size:       0.875rem !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    box-shadow:      none !important;
    transition:      background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.igcat__browse i {
    color:      inherit !important;
    font-size:  12px !important;
    transition: transform 0.2s ease !important;
}
.igcat__browse:hover {
    background:      #A41034 !important;
    color:           #fff !important;
    border-color:    #A41034 !important;
    transform:       none !important;
    text-decoration: none !important;
}
.igcat__browse:hover i {
    transform: translateX(3px) !important;
}

/* ── P4. Right-side cluster: column, right-aligned, compact gap ── */
.igcat__hd-right {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-end !important;
    gap:            10px !important;
    flex-shrink:    0 !important;
}
.igcat__stat {
    align-items: flex-end !important;
}

/* ── P5. Header-to-grid spacing ── */
.igcat__hd {
    padding-bottom: 24px !important;
    margin-bottom:  24px !important;
}

/* ── P6. Responsive ── */
@media (max-width: 991px) {
    .igcat__hd-right { align-items: flex-start !important; }
    .igcat__stat     { align-items: flex-start !important; }
    .igcat__browse   { width: auto !important; }
}


/* ═══════════════════════════════════════════════════════════════
   Q. WHY IGURUS — Centered horizontal process-flow redesign
   Replaces the old 2-col split (panel + 2×2 card grid) with a
   single centered intro + 4 circular badges + dashed connectors
   + centered CTA. HTML uses .igw__inner / .igw__flow / .igw__step.
   ═══════════════════════════════════════════════════════════════ */

/* Q0. Section: cream bg inherited; set vertical rhythm.
       Overrides custom.css dark #1C1514 and Section M's .igw__wrap padding. */
.igw {
    padding:  96px 0 !important;
    overflow: hidden !important;
}

/* Q1. Inner container — replaces .igw__wrap 2-col grid */
.igw__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding:        0 5% !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}

/* Q2. Centered intro block */
.igw__intro {
    text-align:     center !important;
    max-width:      640px !important;
    margin:         0 auto 64px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igw__eyebrow {
    justify-content: center !important;
    margin-bottom:   18px !important;
}
.igw__heading {
    text-align:    center !important;
    margin-bottom: 20px !important;
}

/* Q3. Crimson accent divider line (~60px) */
.igw__divider {
    display:       block !important;
    width:         60px !important;
    height:        3px !important;
    background:    #A41034 !important;
    border-radius: 2px !important;
    margin:        0 auto 20px !important;
    flex-shrink:   0 !important;
}

.igw__lead {
    text-align: center !important;
    max-width:  560px !important;
    margin:     0 auto !important;
}

/* Q4. Horizontal 4-step flow — the core layout */
.igw__flow {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   32px !important;
    width:                 100% !important;
    max-width:             1100px !important;
    position:              relative !important;
    margin-bottom:         56px !important;
    align-items:           start !important;
}

/* Dashed horizontal connector: spans from center of badge 1 to center of badge 4.
   In a 4-col equal grid, each column is 25% wide; badge center = 12.5% from each edge. */
.igw__flow::before {
    content:        '' !important;
    position:       absolute !important;
    top:            32px !important;
    left:           12.5% !important;
    right:          12.5% !important;
    height:         0 !important;
    border-top:     2px dashed rgba(164,16,52,0.30) !important;
    z-index:        0 !important;
    pointer-events: none !important;
}

/* Q5. Each step — centered flex column */
.igw__step {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    text-align:     center !important;
    position:       relative !important;
    z-index:        1 !important;
}

/* Q6. Circular numbered badge — 64px, flat crimson */
.igw__step-badge {
    width:          64px !important;
    height:         64px !important;
    border-radius:  50% !important;
    background:     #A41034 !important;
    color:          #ffffff !important;
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    line-height:    1 !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content: center !important;
    box-shadow:     inset 0 1px 0 rgba(255,255,255,0.18),
                    0 8px 20px rgba(164,16,52,0.25) !important;
    margin-bottom:  24px !important;
    flex-shrink:    0 !important;
    position:       relative !important;
    z-index:        1 !important;
    transition:     transform 0.35s cubic-bezier(0.4,0,0.2,1),
                    box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
                    filter 0.35s ease !important;
}
.igw__step:hover .igw__step-badge {
    transform:  scale(1.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
                0 14px 32px rgba(164,16,52,0.42) !important;
    filter:     brightness(1.08) !important;
}

/* Q7. Step content body — centered column */
.igw__step-body {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}

/* Q8. Step title — Fraunces, shifts to crimson on hover */
.igw__step-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size:   1rem !important;
    font-weight: 600 !important;
    color:       #111827 !important;
    margin:      0 0 8px !important;
    line-height: 1.3 !important;
    transition:  color 0.3s ease !important;
}
.igw__step:hover .igw__step-title {
    color: #8E0D2C !important;
}

/* Q9. Step description */
.igw__step-text {
    font-size:   0.875rem !important;
    color:       #6B7280 !important;
    line-height: 1.7 !important;
    margin:      0 !important;
    max-width:   200px !important;
}

/* Q10. Stats block — centered row, override Section H's margin-bottom */
.igw__stats {
    gap:             24px !important;
    margin-bottom:   56px !important;
    justify-content: center !important;
}
.igw__stat           { align-items: center !important; }
.igw__stat-val       { font-size: clamp(24px,2.8vw,36px) !important; font-weight: 800 !important; color: #111827 !important; }
.igw__stat-plus      { font-size: 0.50em !important; color: #A41034 !important; }
.igw__stat-star      { font-size: 0.60em !important; color: #F59E0B !important; }
.igw__stat-label     { letter-spacing: 0.12em !important; color: #6B7280 !important; text-align: center !important; }
.igw__stat-sep       { height: 36px !important; background: rgba(17,24,39,0.15) !important; }

/* Q11. Centered CTA wrapper */
.igw__cta-wrap {
    display:         flex !important;
    justify-content: center !important;
}

/* Q12. CTA button — solid crimson pill, refined shadow */
.igw__cta {
    background:      #A41034 !important;
    box-shadow:      0 8px 20px rgba(164,16,52,0.22) !important;
    transition:      background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    color:           #ffffff !important;
    text-decoration: none !important;
}
.igw__cta:hover {
    background:      #8E0D2C !important;
    box-shadow:      0 12px 32px rgba(164,16,52,0.30) !important;
    transform:       translateY(-2px) !important;
    color:           #ffffff !important;
    text-decoration: none !important;
}
.igw__cta:hover .igw__cta-arrow { transform: translateX(4px) !important; }

/* Q13. prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .igw__step-badge,
    .igw__cta,
    .igw__cta-arrow        { transition: none !important; }
    .igw__step:hover .igw__step-badge { transform: none !important; filter: none !important; }
    .igw__cta:hover                   { transform: none !important; }
    .igw__cta:hover .igw__cta-arrow   { transform: none !important; }
}

/* Q14. Tablet — 2×2, hide horizontal connector */
@media (max-width: 991px) {
    .igw { padding: 64px 0 !important; }
    .igw__inner { padding: 0 4% !important; }
    .igw__flow {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px 24px !important;
    }
    .igw__flow::before { display: none !important; }
    .igw__step-text    { max-width: 240px !important; }
}

/* Q15. Mobile — single column, vertical dashed connector */
@media (max-width: 575px) {
    .igw { padding: 48px 0 !important; }
    .igw__inner { padding: 0 20px !important; }
    .igw__intro { max-width: 100% !important; }
    .igw__flow  {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    /* Vertical dashed connector below each non-last step */
    .igw__step:not(:last-child)::after {
        content:     '' !important;
        display:     block !important;
        width:       0 !important;
        height:      28px !important;
        border-left: 2px dashed rgba(164,16,52,0.30) !important;
        margin:      12px auto !important;
    }
    .igw__step-text { max-width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════
   R. WHY IGURUS — Legacy override reset for why-igurus.css
   ───────────────────────────────────────────────────────────────
   why-igurus.css loads AFTER ig-theme.css via @stack('styles').
   But ig-theme.css used !important in Sections H, Q, and M for
   the old dark→cream restyle and the since-replaced centered flow.
   These rules block the handoff CSS from applying correctly.
   Section R neutralises each conflict — also with !important —
   so why-igurus.css wins on every property it needs to own.
   ═══════════════════════════════════════════════════════════════ */

/* R1. Section shell: restore full padding (Section Q forced 96px 0,
       killing horizontal gutters; handoff uses clamp horizontal too).
       Flat cream background. */
.igw {
    padding:         clamp(56px,8vw,128px) clamp(24px,6vw,104px) !important;
    background:      #F5F1EA !important;
    background-size: auto !important;
}

/* R2. Keep orbs and noise hidden — flat solid background needs no overlays */
.igw__orb--1,
.igw__orb--2 { display: none !important; }
.igw__noise  { display: none !important; }

/* R3. Inner wrap: zero out the Section M padding that adds vertical
       space inside the wrap (the section itself now owns padding). */
.igw__wrap {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

/* R4. Eyebrow: restore left-aligned flex, correct margin
       (Section Q forced justify-content:center + 18px margin) */
.igw__eyebrow {
    justify-content: flex-start !important;
    margin-bottom:   26px !important;
}

/* R5. Heading: restore left-align, no bottom margin
       (Section Q forced text-align:center + 20px margin) */
.igw__heading {
    text-align:    left !important;
    margin-bottom: 0 !important;
}

/* R6. Lead: restore left-align, correct max-width and margin
       (Section Q forced center + max-width:560px + auto margin) */
.igw__lead {
    text-align: left !important;
    max-width:  30em !important;
    margin:     30px 0 0 !important;
}

/* R7. Stats: clear top-margin and justification overrides */
.igw__stats {
    margin-bottom:   0 !important;
    justify-content: flex-start !important;
}
.igw__stat   { align-items: flex-start !important; }
.igw__stat-val { font-size: clamp(30px,3vw,40px) !important; }

/* R8. Cards: flat surface */
.igw__card {
    background: #F9FAFB !important;
    border:     1px solid rgba(164,16,52,.10) !important;
}
.igw__card:hover {
    background:   #F9FAFB !important;
    border-color: rgba(164,16,52,.30) !important;
}

/* R9. Ghost numeral: use opacity approach, not rgba color
       (Section H used rgba(17,24,39,.12) which mutes the crimson tint) */
.igw__card-num {
    color:   #A41034 !important;
    opacity: .07 !important;
}
.igw__card:hover .igw__card-num {
    color:   #A41034 !important;
    opacity: .13 !important;
}

/* R10. Card title: Cormorant Garamond, not Fraunces
        (Section H overrode to Fraunces for the old card design) */
.igw__card-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size:   clamp(23px,1.7vw,27px) !important;
    font-weight: 700 !important;
    color:       #111827 !important;
}

/* R11. CTA: flat crimson + handoff shadow */
.igw__cta {
    background:      #A41034 !important;
    box-shadow:      0 14px 34px -12px rgba(164,16,52,.45) !important;
    transition:      transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s !important;
    margin-top:      48px !important;
    color:           #FBF5EE !important;
    text-decoration: none !important;
}
.igw__cta:hover {
    transform:       translateY(-3px) !important;
    box-shadow:      0 22px 46px -14px rgba(164,16,52,.5) !important;
    background:      #D91247 !important;
    color:           #FBF5EE !important;
    text-decoration: none !important;
}
/* Arrow circle: frosted white + combined nudge+rotate (Section Q only had translateX) */
.igw__cta-arrow {
    background: rgba(255,255,255,.15) !important;
    color:      #ffffff !important;
    border:     1px solid rgba(255,255,255,.25) !important;
    transition: transform .4s cubic-bezier(.2,.8,.2,1) !important;
}
.igw__cta:hover .igw__cta-arrow {
    transform: translateX(4px) rotate(-8deg) !important;
}

/* R12. Heading-em: let why-igurus.css -webkit-text-fill-color win;
        Section H set it to #A41034 which is the same value but
        needs to defer to the CSS var approach. */
.igw__heading-em {
    color:                  var(--wine) !important;
    -webkit-text-fill-color: var(--wine) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ALL-INSTRUCTORS PAGE  —  Premium editorial reskin
   Branch: feature/igurus-cream-theme
   All selectors scoped to .ig-instructors-pg or .ig-instr-card
   ══════════════════════════════════════════════════════════════════════ */

.ig-instructors-pg { background-color: #F5F1EA !important; background-image: none !important; min-height: 100vh; }

/* HERO — compact, pure #A41034 flat colour, no dot bleed */
.ig-instructors-hero {
  background-color: #A41034 !important;
  background-image: none !important;
  padding: 40px 0 0;
  position: relative;
  overflow: hidden;
}
/* Decorative overlays disabled — keeps background pure #A41034 */
.ig-instructors-hero__pattern,
.ig-instructors-hero__glow {
  display: none !important;
}
.ig-instructors-hero__inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 800px; margin: 0 auto;
  padding: 0 24px 32px;
}
.ig-instructors-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 100px; margin-bottom: 14px;
}
.ig-instructors-hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800; color: #fff;
  line-height: 1.15; margin: 0 0 10px;
}
.ig-hero-accent { font-style: italic; color: #FDDAC4; }
.ig-instructors-hero__title-underline {
  display: block; width: 36px; height: 2px;
  background: rgba(255,255,255,0.35); border-radius: 2px;
  margin: 0 auto 12px;
}
.ig-instructors-hero__sub {
  color: rgba(255,255,255,0.78); font-size: 0.9rem;
  line-height: 1.55; margin: 0 0 20px;
}

/* Stats strip — inline pills, no wrapping, text always visible */
.ig-instructors-hero__stats {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 0;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px; padding: 8px 4px; margin-bottom: 20px;
  max-width: 100%;
}
.ig-ih-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 20px;
  background: transparent !important;
}
.ig-ih-stat strong {
  font-size: 1.05rem; font-weight: 800; color: #fff !important;
  line-height: 1.1; display: block;
}
.ig-ih-stat span {
  font-size: 9.5px; color: rgba(255,255,255,0.78) !important;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-top: 2px; white-space: nowrap; display: block;
}
.ig-ih-stat-div {
  width: 1px; height: 28px; background: rgba(255,255,255,0.25); flex-shrink: 0;
}

/* Search bar */
.ig-instructors-search-wrap { max-width: 520px; margin: 0 auto; }
.ig-instructors-search {
  position: relative; display: flex; align-items: center;
  background: #fff; border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15); overflow: hidden;
}
.ig-instructors-search__icon {
  position: absolute; left: 20px;
  color: #A41034; font-size: 14px; pointer-events: none;
}
.ig-instructors-search__input {
  width: 100%; padding: 14px 44px 14px 48px;
  border: none; outline: none; background: transparent;
  font-size: 14px; color: #1a1a1a;
}
.ig-instructors-search__input::placeholder { color: #9A9A9A; }
.ig-instructors-search__clear {
  position: absolute; right: 16px;
  background: none; border: none; cursor: pointer;
  color: #9A9A9A; opacity: 0; transition: opacity 0.2s; padding: 4px;
}

/* Scallop transition hero -> body */
.ig-instructors-hero__bar {
  display: none !important;
}

/* BODY */
.ig-instructors-body { padding: 36px 0 80px; }
.ig-instructors-meta-row { padding: 0 0 16px; display: flex; align-items: center; }
.ig-instructors-count { font-size: 13px; color: #6B7280; }
.ig-instructors-count strong { color: #1a1a1a; }

/* 2-up premium horizontal grid */
.ig-instructors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* INSTRUCTOR CARD — premium 3-col: [avatar] [info] [cta]
   Left accent stripe via inset box-shadow (respects border-radius) */
.ig-instr-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,0.05);
  box-shadow: inset 4px 0 0 #A41034, 0 4px 20px rgba(17,24,39,0.07);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.ig-instr-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 4px 0 0 #A41034,
              0 16px 40px rgba(17,24,39,0.13),
              0 0 0 1px rgba(164,16,52,0.09);
}
@media (prefers-reduced-motion: reduce) {
  .ig-instr-card,
  .ig-instr-card__avatar,
  .ig-instr-card__avatar--initial,
  .ig-instr-card__cta i { transition: none !important; }
}

/* Col 1: Avatar — fixed, vertically centered */
.ig-instr-card__avatar-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ig-instr-card__avatar {
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  outline: 2px solid rgba(164,16,52,0.14);
  box-shadow: 0 4px 16px rgba(17,24,39,0.12);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: block; flex-shrink: 0;
}
.ig-instr-card:hover .ig-instr-card__avatar { transform: scale(1.05); }

.ig-instr-card__avatar--initial {
  width: 76px; height: 76px; border-radius: 50%;
  background: #A41034;
  border: 3px solid #fff;
  outline: 2px solid rgba(164,16,52,0.14);
  box-shadow: 0 4px 16px rgba(17,24,39,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700; color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0; line-height: 1;
}
.ig-instr-card:hover .ig-instr-card__avatar--initial { transform: scale(1.05); }

/* Col 2: Info — flex:1, left-aligned, tight stack */
.ig-instr-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px;
}

/* Name + inline rating */
.ig-instr-card__name-row {
  display: flex; align-items: center;
  gap: 8px; width: 100%; min-width: 0;
}
.ig-instr-card__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem; font-weight: 700; color: #111827;
  letter-spacing: -0.01em; margin: 0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}

/* Stars — amber, inline, non-shrinking */
.ig-instr-card__stars {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.ig-instr-card__stars .fas.fa-star,
.ig-instr-card__stars .fas.fa-star-half-alt { color: #F59E0B; font-size: 11px; }
.ig-instr-card__stars .far.fa-star { color: #D1D5DB; font-size: 11px; }
.ig-instr-card__rating-val {
  font-size: 11.5px; font-weight: 700; color: #374151; margin-left: 2px;
}

/* Specialty / role */
.ig-instr-card__role {
  font-size: 12.5px; color: #6B7280; font-weight: 500;
  display: block; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Meta pills — subtle border makes them pop */
.ig-instr-card__meta {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0;
}
.ig-instr-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 100px;
}
.ig-instr-card__badge--courses {
  background: rgba(164,16,52,0.07); color: #A41034;
  border: 1px solid rgba(164,16,52,0.14);
}
.ig-instr-card__badge--students {
  background: rgba(164,16,52,0.05); color: #A41034;
  border: 1px solid rgba(164,16,52,0.10);
}
.ig-instr-card__badge i { font-size: 9px; }

/* Social chips — circular, directly under pills */
.ig-instr-card__social {
  display: flex; gap: 5px; align-items: center; margin-top: 2px;
}
.ig-instr-soc-link {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(164,16,52,0.07); color: #A41034;
  border: 1px solid rgba(164,16,52,0.10);
  font-size: 11px; text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ig-instr-soc-link:hover { background: #A41034; color: #fff !important; border-color: #A41034; }

/* Col 3: View Profile CTA — right edge, outlined fills on hover */
.ig-instr-card__cta {
  flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: transparent !important; color: #A41034 !important;
  border: 1.5px solid #A41034; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none !important; white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease,
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.ig-instr-card__cta i {
  font-size: 10px; color: #A41034 !important;
  transition: transform 0.22s ease, color 0.22s ease;
}
.ig-instr-card__cta:hover {
  background: #A41034 !important; color: #fff !important;
  box-shadow: 0 6px 20px rgba(164,16,52,0.35);
}
.ig-instr-card__cta:hover i { transform: translateX(3px); color: #fff !important; }

/* Empty / no-results state */
.ig-instr-empty {
  text-align: center; padding: 80px 20px;
  display: flex; flex-direction: column; align-items: center;
  grid-column: 1 / -1;
}
.ig-instr-empty--search { display: none; }
.ig-instr-empty__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(164,16,52,0.08); display: grid; place-items: center;
  font-size: 1.5rem; color: #A41034; margin-bottom: 20px;
}
.ig-instr-empty__title { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.ig-instr-empty__sub { font-size: 14px; color: #6B7280; margin: 0; }

/* Pagination */
.ig-instructors-pagination { margin-top: 48px; display: flex; justify-content: center; }

/* Staggered entrance — 70 ms per card */
@keyframes igInstrFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ig-instr-card.igic--anim {
  animation: igInstrFadeUp 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

/* Mobile: 1-up; avatar+info row 1, CTA full-width row 2 */
@media (max-width: 767px) {
  .ig-instructors-grid { grid-template-columns: 1fr; }
  .ig-instr-card {
    padding: 16px 18px; gap: 14px;
    flex-wrap: wrap; align-items: flex-start;
  }
  .ig-instr-card__avatar,
  .ig-instr-card__avatar--initial { width: 60px; height: 60px; }
  .ig-instr-card__avatar--initial { font-size: 1.3rem; }
  .ig-instr-card__body { flex: 1; }
  .ig-instr-card__cta { flex: 0 0 100%; justify-content: center; margin-top: 4px; }
}

/* ══ Courses Page — Dropdown Filter Bar ══════════════════════════════════════ */

.ig-dd-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 0 14px;
    border-bottom: 1px solid #ece8e1;
    margin-bottom: 20px;
}

.ig-dd { position: relative; }

.ig-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e0d8d0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #3d2d2d;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
    line-height: 1.3;
}
.ig-dd-btn:hover           { border-color: #A41034; color: #A41034; }
.ig-dd.open .ig-dd-btn     { border-color: #A41034; color: #A41034; background: rgba(164,16,52,.04); }
.ig-dd.active .ig-dd-btn   { background: #A41034; border-color: #A41034; color: #fff; }

.ig-dd-ico { font-size: 11px; opacity: .6; }
.ig-dd.active .ig-dd-ico  { opacity: 1; }

.ig-dd-count {
    background: rgba(255,255,255,.28);
    color: #fff;
    border-radius: 50px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    text-align: center;
    display: none;
    line-height: 15px;
}
.ig-dd.active .ig-dd-count { display: inline-block; }

.ig-dd-arrow { font-size: 10px; transition: transform .2s; opacity: .45; }
.ig-dd.open .ig-dd-arrow   { transform: rotate(180deg); opacity: .8; }
.ig-dd.active .ig-dd-arrow { opacity: .9; }

.ig-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e0d8d0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    z-index: 250;
    overflow: hidden;
}
.ig-dd.open .ig-dd-panel { display: block; }

.ig-dd-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px 10px;
    border-bottom: 1px solid #f0ebe6;
    font-size: 11px;
    font-weight: 700;
    color: #8a7a74;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.ig-dd-panel-clear {
    font-size: 11px;
    font-weight: 700;
    color: #A41034;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: none;
    line-height: 1;
}
.ig-dd-panel-clear.show { display: inline; }

.ig-dd-opts {
    padding: 6px;
    max-height: 230px;
    overflow-y: auto;
}

.ig-dd-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    margin: 0;
    transition: background .1s;
}
.ig-dd-opt:hover { background: #faf6f2; }
.ig-dd-opt input[type="radio"],
.ig-dd-opt input[type="checkbox"] {
    accent-color: #A41034;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.ig-dd-opt span {
    font-size: 13.5px;
    color: #3d2d2d;
    line-height: 1.3;
    font-weight: 400;
}

.ig-dd-sub-holder {
    padding: 4px 6px 6px;
}
.ig-dd-sub-holder:empty { display: none; }
.ig-dd-sub-holder .courses-widget { margin: 0; padding: 0; border: none; box-shadow: none; }
.ig-dd-sub-holder .widget-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #8a7a74; padding: 8px 4px 4px; margin: 0; border-top: 1px solid #f0ebe6; }
.ig-dd-sub-holder .form-check { padding: 7px 10px; border-radius: 7px; }
.ig-dd-sub-holder .form-check:hover { background: #faf6f2; }
.ig-dd-sub-holder .form-check-label { font-size: 13.5px; color: #3d2d2d; cursor: pointer; }
.ig-dd-sub-holder .form-check-input { accent-color: #A41034; cursor: pointer; }
.ig-dd-sub-holder .list-wrap { list-style: none; padding: 0; margin: 0; }

.ig-dd-spacer { flex: 1; }

.ig-dd-clear-all {
    display: none;
    font-size: 12px;
    font-weight: 700;
    color: #A41034;
    background: none;
    border: 1.5px solid #A41034;
    border-radius: 50px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.ig-dd-clear-all.visible { display: inline-flex; align-items: center; }
.ig-dd-clear-all:hover { background: #A41034; color: #fff; }

/* ── Native select filters ── */
.ig-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    padding: 9px 36px 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 130px;
    white-space: nowrap;
    line-height: 1.4;
}
.ig-filter-select:focus {
    outline: none;
    border-color: #A41034;
    box-shadow: 0 0 0 3px rgba(164, 16, 52, 0.12);
}
.ig-filter-select:hover {
    border-color: #9CA3AF;
}
/* Highlight when a value is selected */
.ig-filter-select.ig-active {
    border-color: #A41034;
    color: #A41034;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A41034'/%3E%3C/svg%3E");
}
.sub-category-holder { display: contents; }

@media (max-width: 640px) {
    .ig-dd-bar { gap: 6px; flex-wrap: wrap; }
    .ig-filter-select { min-width: 120px; font-size: 12px; padding: 7px 30px 7px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   T. TESTIMONIALS — two-column crossfade redesign
   Overrides old one-column dark design from custom.css (L10513)
   and partial G2 rules above. Appended last = wins at cascade.
   ═══════════════════════════════════════════════════════════════ */

/* Section: cream background, compact padding */
.ig-testi-section {
    background:    #F5F1EA !important;
    padding-block: 56px !important;
    color:         #1C1514 !important;
}

/* Outer white card */
.ig-testi-card {
    padding: 44px 52px !important;
}

/* Two-column grid: 2fr meta / 3fr stage */
.ig-testi-layout {
    display:               grid !important;
    grid-template-columns: 2fr 3fr !important;
    gap:                   clamp(32px, 4vw, 60px) !important;
    align-items:           start !important;
}

/* Deco quote mark: in-flow small crimson accent — NOT absolute */
.ig-testi-card__deco {
    position:      static !important;
    display:       block !important;
    font-size:     26px !important;
    line-height:   1 !important;
    color:         rgba(164,16,52,.40) !important;
    margin-bottom: 14px !important;
    pointer-events: none !important;
}

/* Left column */
.ig-testi-meta {
    position: relative !important;
    z-index:  1 !important;
}
.ig-testi-heading {
    font-size:      clamp(20px, 2.2vw, 30px) !important;
    font-weight:    700 !important;
    color:          #1C1514 !important;
    line-height:    1.18 !important;
    letter-spacing: -0.015em !important;
    margin:         6px 0 0 !important;
}
.ig-testi-intro {
    font-size:   var(--fs-sm) !important;
    color:       #6B7280 !important;
    margin-top:  10px !important;
    line-height: 1.55 !important;
}

/* Controls */
.ig-testi-controls {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    margin-top:  28px !important;
    flex-wrap:   wrap !important;
}
.ig-testi-arrow {
    width:         38px !important;
    height:        38px !important;
    border-radius: 50% !important;
    display:       grid !important;
    place-items:   center !important;
    background:    transparent !important;
    border:        1.5px solid rgba(164,16,52,.30) !important;
    color:         #A41034 !important;
    cursor:        pointer !important;
    flex-shrink:   0 !important;
    transition:    background .2s, border-color .2s, color .2s !important;
}
.ig-testi-arrow:hover {
    background:   #A41034 !important;
    border-color: #A41034 !important;
    color:        #FFFFFF !important;
    box-shadow:   none !important;
}
.ig-testi-arrow svg { width: 18px !important; height: 18px !important; }

.ig-testi-dots { display: flex !important; gap: 6px !important; align-items: center !important; margin-left: 4px !important; }
.ig-testi-dot  { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgba(28,21,20,.18) !important; border: none !important; cursor: pointer !important; transition: all .25s !important; }
.ig-testi-dot.is-active { background: #A41034 !important; width: 22px !important; border-radius: 4px !important; }

.ig-testi-counter { font-size: .8125rem !important; font-weight: 600 !important; color: #6B7280 !important; margin-left: 4px !important; }

/* Right column: crossfade carousel — override custom.css flex-strip */
.ig-testi-stage {
    position: relative !important;
    overflow: visible !important;
}
.ig-testi-track {
    display:    grid !important;
    transform:  none !important;
    transition: none !important;
}
.ig-testi-slide {
    grid-row:    1 !important;
    grid-column: 1 !important;
    opacity:     0 !important;
    visibility:  hidden !important;
    transition:  opacity .45s ease, visibility .45s ease !important;
    min-width:   0 !important;
    padding:     0 !important;
}
.ig-testi-slide.is-active {
    opacity:    1 !important;
    visibility: visible !important;
}

/* Individual testimonial card */
.ig-testi-inner-card {
    background:    #FFFFFF !important;
    border:        1px solid #F0E6DD !important;
    border-radius: 16px !important;
    padding:       clamp(24px, 2.8vw, 36px) !important;
    box-shadow:    0 4px 16px rgba(0,0,0,.05) !important;
    transition:    box-shadow .3s ease, transform .3s ease !important;
}
.ig-testi-inner-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.09) !important;
    transform:  translateY(-3px) !important;
}

/* Rating stars */
.ig-testi-rating {
    display:       inline-flex !important;
    gap:           3px !important;
    margin-bottom: 14px !important;
}
.ig-testi-rating i { color: #F59E0B !important; font-size: 1rem !important; }

/* Quote */
.ig-testi-quote {
    font-size:      clamp(.9375rem, 1.4vw, 1.125rem) !important;
    font-style:     italic !important;
    line-height:    1.72 !important;
    color:          #374151 !important;
    font-weight:    400 !important;
    letter-spacing: 0 !important;
    margin:         0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   U. INSTRUCTOR DASHBOARD — hero + stats combined zone
   Wraps the crimson banner card and the stats strip (or custom
   hero/stats pair) on each instructor page so the shared JS in
   instructor-dashboard/layouts/master.blade.php can sync the
   zone's height against the left sidebar profile card in one
   bidirectional operation, instead of stretching only the banner.

   Doubled class (.ig-hero-zone.ig-hero-zone) gives specificity
   (0,3,0) so the margin-zeroing override wins over the per-page
   (0,2,0) !important rules already on the child elements.
   ═══════════════════════════════════════════════════════════════ */
.ig-hero-zone {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin-bottom:  20px;
}
/* Zero out children's own bottom margins — the zone gap handles it. */
.ig-hero-zone.ig-hero-zone > .dashboard-banner-card,
.ig-hero-zone.ig-hero-zone > .ial-hero,
.ig-hero-zone.ig-hero-zone > .iq-header { margin-bottom: 0 !important; }
.ig-hero-zone.ig-hero-zone > [class$="-stats-strip"],
.ig-hero-zone.ig-hero-zone > .ial-stats,
.ig-hero-zone.ig-hero-zone > .iq-stats  { margin-bottom: 0 !important; }

/* Author row */
.ig-testi-author {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    margin-top:  22px !important;
    padding-top: 18px !important;
    border-top:  1px solid #F0E6DD !important;
}
.ig-testi-author-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.ig-testi-nm   { font-size: .875rem !important; color: #111827 !important; font-weight: 700 !important; }
.ig-testi-role { font-size: .75rem !important; color: #6B7280 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* Avatar */
.ig-testi-av {
    width:         44px !important;
    height:        44px !important;
    border-radius: 50% !important;
    flex-shrink:   0 !important;
    display:       grid !important;
    place-items:   center !important;
    font-size:     .875rem !important;
    font-weight:   700 !important;
    color:         #FFFFFF !important;
}
.ig-testi-av--img { background: transparent !important; padding: 0 !important; overflow: hidden !important; }
.ig-testi-av--img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ig-testi-slide        { transition: none !important; }
    .ig-testi-inner-card   { transition: none !important; }
    .ig-testi-inner-card:hover { transform: none !important; }
    .ig-testi-arrow        { transition: none !important; }
}

/* Mobile: single column */
@media (max-width: 767px) {
    .ig-testi-layout   { grid-template-columns: 1fr !important; gap: 24px !important; }
    .ig-testi-meta     { text-align: center !important; }
    .ig-testi-controls { justify-content: center !important; }
    .ig-testi-card     { padding: 28px 20px !important; }
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE OVERRIDES  (auth.css corrections)
   ══════════════════════════════════════════════════════════ */

/* Cream background, no dots, 10% horizontal gap each side */
.ig-login-page {
    background:       #F5F1EA !important;
    background-image: none !important;
    padding:          0 10% !important;
    align-items:      stretch !important;
}

/* Brand panel: tighter, breathable padding */
.ig-login-brand-panel { padding: 36px 44px !important; }

/* Compact slide typography */
.ig-lbp-brand        { margin-bottom: 22px !important; }
.ig-lbp-progress-bar { margin-bottom: 22px !important; }
.ig-lbp-slide h2     { font-size: 28px !important; margin: 0 0 10px !important; }
.ig-lbp-slide > p    { font-size: 13px !important; margin: 0 0 14px !important; }
.ig-lbp-dots         { margin-top: 18px !important; }

/* Feature list: compact */
.ig-lbp-feat-list    { gap: 7px !important; margin-bottom: 14px !important; }
.ig-lbp-feat-list li {
    padding:    9px 12px !important;
    background: rgba(255,255,255,.7) !important;
    transition: background .22s, border-color .22s, transform .22s, box-shadow .22s !important;
}
.ig-lbp-feat-list li:hover {
    transform:    translateX(4px) !important;
    box-shadow:   0 4px 16px rgba(164,16,52,.08) !important;
    border-color: rgba(164,16,52,.18) !important;
    background:   rgba(255,255,255,.95) !important;
}

/* Icon tile: cream-tinted crimson (no solid dark square) */
.ig-lbp-feat-icon {
    width:      34px !important;
    height:     34px !important;
    background: rgba(164,16,52,.08) !important;
    color:      #A41034 !important;
    border:     1px solid rgba(164,16,52,.14) !important;
}

/* Stats row: compact, cream-tinted */
.ig-lbp-stats-row {
    padding:    12px 16px !important;
    background: rgba(255,255,255,.72) !important;
}
.ig-lbp-stat strong { font-size: 18px !important; }

/* Form panel */
.ig-login-form-panel {
    flex:      0 0 44% !important;
    max-width: 44% !important;
    padding:   32px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   V. INSTRUCTOR PAGES — unified white header card (ec-mhead)
   One card containing page title (top) + stats grid (bottom),
   same visual pattern as student My Orders / My Courses.
   The card fills the ig-hero-zone via flex:1, which lets the
   shared syncTopZone() JS match it to the left profile card.
   ═══════════════════════════════════════════════════════════════ */
.ec-mhead {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             20px;
    margin-bottom:   0;
    border:          1.5px solid var(--brand);
    border-radius:   20px;
    padding:         22px 26px;
    background:      var(--paper);
    flex:            1;
}
.ec-mhead__top {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             24px;
}
.ec-mhead > .ecrs-stats { margin: 0 !important; }
.ec-mhead__eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--brand);
    display:        block;
    margin-bottom:  4px;
}
.ec-mhead__title {
    font-family:    'Cormorant Garamond', serif !important;
    font-size:      32px;
    font-weight:    600;
    letter-spacing: -.01em;
    margin:         2px 0 4px;
    line-height:    1;
    color:          var(--ink);
    text-transform: none !important;
}
.ec-mhead__sub {
    color:     var(--muted);
    font-size: 14px;
    max-width: 460px;
    margin:    0;
}
/* CTA button — link or button element */
.ec-browse {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    background:      var(--brand);
    color:           #fff !important;
    font-weight:     700;
    font-size:       14.5px;
    padding:         13px 22px;
    border-radius:   13px;
    white-space:     nowrap;
    box-shadow:      0 14px 28px -14px rgba(164,16,52,.5);
    text-decoration: none;
    transition:      background .2s;
    flex:            none;
}
.ec-browse:hover    { background: var(--brand-hov); color: #fff !important; }
button.ec-browse    { cursor: pointer; border: none; }

/* ── Stats grid ── */
.ecrs-stats {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   12px;
    width:                 100%;
    margin:                0 !important;
}
.ecrs-stat {
    background:  #fff;
    border:      1px solid #D9D0C7;
    border-radius: 14px;
    padding:     24px 16px !important;
    display:     flex;
    flex-direction: column;
    align-items: center;
    box-shadow:  0 1px 2px rgba(61,10,24,.04);
    transition:  box-shadow .2s, transform .2s, border-color .2s;
    text-decoration: none !important;
    color: inherit !important;
}
.ecrs-stat:hover {
    box-shadow:  0 10px 22px -14px rgba(17,24,39,.2);
    transform:   translateY(-2px);
    border-color: var(--brand);
}
.ecrs-stat__ico {
    width:         40px !important;
    height:        40px !important;
    border-radius: 10px !important;
    display:       grid;
    place-items:   center;
    flex:          none;
    background:    var(--brand);
    color:         #fff;
    margin-bottom: 12px;
    font-size:     15px;
}
.ecrs-stat__ico--ok     { background: #047857 !important; color: #fff !important; }
.ecrs-stat__ico--gold   { background: #B45309 !important; color: #fff !important; }
.ecrs-stat__ico--indigo { background: #1D4ED8 !important; color: #fff !important; }
.ecrs-stat__ico--orange { background: #EA580C !important; color: #fff !important; }
.ecrs-stat__ico svg     { width: 18px !important; height: 18px !important; }
.ecrs-stat__text {
    display:     flex;
    flex-direction: column;
    align-items: center;
    text-align:  center;
}
.ecrs-stat__num {
    font-size:      23px;
    font-weight:    800;
    line-height:    1;
    letter-spacing: -.02em;
    color:          var(--ink);
    display:        block;
}
.ecrs-stat__label {
    font-size:   11.5px;
    color:       var(--muted);
    font-weight: 600;
    margin-top:  5px;
    display:     block;
}
@media (max-width: 960px) {
    .ecrs-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .ec-mhead   { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .ecrs-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Card: kill stray border, compact, white on cream */
.ig-login-card {
    border-top: none !important;
    padding:    28px 28px 22px !important;
    max-width:  420px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.08) !important;
    background: #FFFFFF !important;
}

/* Compact form internals */
.ig-login-logo     { margin-bottom: 16px !important; }
.ig-login-title    { font-size: 22px !important; margin: 0 0 4px !important; }
.ig-login-sub      { font-size: 13px !important; margin: 0 0 14px !important; }
.ig-login-trust    { margin-bottom: 14px !important; gap: 5px !important; }
.ig-login-field    { margin-bottom: 12px !important; }
.ig-login-meta-row { margin-bottom: 14px !important; }
.ig-login-submit   { margin-bottom: 12px !important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .ig-lbp-feat-list li,
    .ig-lbp-feat-list li:hover { transition: none !important; transform: none !important; }
}

/* Responsive: on tablet and below, remove side gaps (they're already stacked) */
@media (max-width: 991px) {
    .ig-login-page       { padding: 0 !important; }
    .ig-login-form-panel { flex: none !important; max-width: 100% !important; padding: 40px 20px !important; }
}

/* HERO WIDTH FIX — nuclear final override (source-order last) */
section.ig-hero.ig-hero--cream > div.ig-wrap {
    padding-left:   0 !important;
    padding-right:  0 !important;
    padding-inline: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN — Centered Card  (feature/igurus-cream-theme)
   Class prefix: .lc-*  (login card)
   Old .lg-* split-column layout replaced. These rules load last
   so they win cleanly over any inherited resets.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ──
   min-height + justify-content:center is the universally reliable centering
   pattern for auth pages. The previous position:fixed + overflow-y:auto +
   margin:auto approach caused Chrome/Safari to collapse the auto margin to 0
   (browsers resolve flex free-space before distributing auto margins when
   overflow is present), pinning the card to the top of the viewport.       */
.lc-page {
    min-height:       100vh !important;
    display:          flex !important;
    flex-direction:   column !important;
    align-items:      center !important;
    justify-content:  center !important;
    background-color: #F5F1EA !important;
    background-image: none !important;
    padding:          48px 20px !important;
    box-sizing:       border-box !important;
    font-family:      system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ── Card ── */
.lc-card {
    position:      relative !important;
    width:         100% !important;
    max-width:     520px !important;
    background:    #FFFFFF !important;
    border-radius: 20px !important;
    border:        1px solid rgba(17,24,39,.05) !important;
    box-shadow:    0 12px 40px rgba(17,24,39,.08), 0 1px 3px rgba(17,24,39,.04) !important;
    padding:       0 40px 36px !important;
    overflow:      hidden !important;
    animation:     lcFadeUp .4s cubic-bezier(.2,.8,.2,1) both !important;
    box-sizing:    border-box !important;
}
@keyframes lcFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lc-card { animation: none !important; }
}

/* ── 4px crimson accent bar flush to top ── */
.lc-accent {
    position:      absolute !important;
    top:           0 !important;
    left:          0 !important;
    right:         0 !important;
    height:        4px !important;
    background:    #A41034 !important;
    border-radius: 20px 20px 0 0 !important;
}

/* ── Logo ── */
.lc-logo-wrap {
    display:         flex !important;
    justify-content: center !important;
    padding-top:     36px !important;
    margin-bottom:   24px !important;
}
.lc-logo { display: inline-block !important; text-decoration: none !important; }
.lc-logo__img {
    height:     75px !important;
    width:      auto !important;
    object-fit: contain !important;
    display:    block !important;
}

/* ── Heading + sub ── */
.lc-title {
    font-family:             'Fraunces', Georgia, serif !important;
    font-weight:             700 !important;
    font-size:               clamp(26px, 5vw, 32px) !important;
    line-height:             1.05 !important;
    letter-spacing:          -.022em !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background:              none !important;
    text-align:              center !important;
    text-transform:          none !important;
    margin:                  0 !important;
    padding:                 0 !important;
}
.lc-sub {
    font-size:               14px !important;
    font-weight:             400 !important;
    line-height:             1.55 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-align:              center !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    margin:                  7px 0 0 !important;
}

/* ── Trust badge pills ──
   Card inner width = 440px − (40+40)px side padding = 360px.
   Three badges at 11.5px / padding:5px 11px / gap:7px need ≈420px — always
   wrap 2+1. Fix: tighten font+padding+icon so all three sit on one row.     */
.lc-trust {
    display:         flex !important;
    flex-wrap:       wrap !important;
    justify-content: center !important;
    gap:             5px !important;
    margin:          18px 0 0 !important;
}
.lc-trust__pill {
    display:                 inline-flex !important;
    align-items:             center !important;
    gap:                     4px !important;
    padding:                 4px 9px !important;
    border-radius:           999px !important;
    background:              rgba(164,16,52,.06) !important;
    border:                  1px solid rgba(164,16,52,.15) !important;
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    font-size:               10.5px !important;
    font-weight:             600 !important;
    white-space:             nowrap !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lc-trust__pill svg {
    width:       10px !important;
    height:      10px !important;
    flex-shrink: 0 !important;
}

/* ── Alert ── */
.lc-alert {
    display:                 flex !important;
    align-items:             flex-start !important;
    gap:                     9px !important;
    padding:                 11px 14px !important;
    border-radius:           10px !important;
    font-size:               13px !important;
    line-height:             1.5 !important;
    background:              #fef2f2 !important;
    border:                  1px solid #fecaca !important;
    color:                   #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    margin-top:              18px !important;
    box-sizing:              border-box !important;
}
.lc-alert a {
    color:                   #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-weight:             700 !important;
    text-decoration:         underline !important;
}
.lc-alert svg { flex-shrink: 0 !important; margin-top: 1px !important; }

/* ── Success ── */
.lc-success {
    display:                 flex !important;
    align-items:             flex-start !important;
    gap:                     9px !important;
    padding:                 11px 14px !important;
    border-radius:           10px !important;
    font-size:               13px !important;
    line-height:             1.5 !important;
    background:              #f0fdf4 !important;
    border:                  1px solid #bbf7d0 !important;
    color:                   #15803d !important;
    -webkit-text-fill-color: #15803d !important;
    margin-top:              18px !important;
    box-sizing:              border-box !important;
}
.lc-success svg { flex-shrink: 0 !important; margin-top: 1px !important; }

/* ── Google OAuth ── */
.lc-google {
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    gap:                     10px !important;
    width:                   100% !important;
    margin-top:              20px !important;
    padding:                 12px !important;
    border-radius:           12px !important;
    border:                  1px solid #D1D5DB !important;
    background:              #FFFFFF !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size:               14.5px !important;
    font-weight:             600 !important;
    text-decoration:         none !important;
    cursor:                  pointer !important;
    transition:              border-color .2s, box-shadow .2s !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    box-sizing:              border-box !important;
}
.lc-google:hover {
    border-color:            #B0B7C3 !important;
    box-shadow:              0 4px 14px -8px rgba(17,24,39,.22) !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* ── OR divider ── */
.lc-or {
    display:                 flex !important;
    align-items:             center !important;
    gap:                     12px !important;
    margin:                  18px 0 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    font-size:               11px !important;
    font-weight:             600 !important;
    letter-spacing:          .10em !important;
    text-transform:          uppercase !important;
}
.lc-or::before,
.lc-or::after {
    content:    '' !important;
    flex:       1 !important;
    height:     1px !important;
    background: #E5E7EB !important;
}

/* ── Form fields ── */
.lc-field { margin-bottom: 16px !important; }
.lc-label {
    display:                 block !important;
    margin-bottom:           7px !important;
    font-size:               13px !important;
    font-weight:             600 !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    font-family:             system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.lc-label i {
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    font-style:              normal !important;
}
.lc-inwrap {
    position:    relative !important;
    display:     flex !important;
    align-items: center !important;
}
.lc-field-ico {
    position:       absolute !important;
    left:           14px !important;
    width:          16px !important;
    height:         16px !important;
    color:          #9CA3AF !important;
    pointer-events: none !important;
    flex-shrink:    0 !important;
}
.lc-input {
    width:                   100% !important;
    padding:                 12px 14px 12px 42px !important;
    border-radius:           11px !important;
    border:                  1px solid #E5E7EB !important;
    background:              #F9FAFB !important;
    font-family:             system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size:               14.5px !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    outline:                 none !important;
    -webkit-appearance:      none !important;
    transition:              border-color .2s, box-shadow .2s, background .2s !important;
    box-sizing:              border-box !important;
}
.lc-input::placeholder {
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
}
.lc-input:focus {
    border-color: #A41034 !important;
    background:   #FFFFFF !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,.10) !important;
}
.lc-input.is-invalid {
    border-color: #ef4444 !important;
    background:   #FFFFFF !important;
    box-shadow:   0 0 0 3px rgba(239,68,68,.10) !important;
}
.lc-input--pw { padding-right: 44px !important; }
.lc-input.is-valid {
    border-color: #0F766E !important;
    background:   #FFFFFF !important;
    box-shadow:   0 0 0 3px rgba(15,118,110,.09) !important;
}
.lc-input--readonly {
    background:              #F3F4F6 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    cursor:                  default !important;
    border-color:            #F3F4F6 !important;
}
.lc-input--readonly:focus {
    background:   #F3F4F6 !important;
    border-color: #E5E7EB !important;
    box-shadow:   none !important;
}

/* Eye toggle */
.lc-eye {
    position:      absolute !important;
    right:         8px !important;
    display:       grid !important;
    place-items:   center !important;
    width:         32px !important;
    height:        32px !important;
    border:        0 !important;
    background:    none !important;
    color:         #9CA3AF !important;
    cursor:        pointer !important;
    border-radius: 8px !important;
    padding:       0 !important;
    flex-shrink:   0 !important;
    transition:    color .15s, background .15s !important;
}
.lc-eye:hover {
    color:      #A41034 !important;
    background: rgba(164,16,52,.06) !important;
}
.lc-eye svg { width: 17px !important; height: 17px !important; display: block !important; }

/* Inline error */
.lc-err {
    display:                 block !important;
    margin-top:              5px !important;
    min-height:              1em !important;
    font-size:               12px !important;
    font-weight:             500 !important;
    color:                   #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
}
.lc-hint {
    display:      block !important;
    margin-top:   5px !important;
    font-size:    12px !important;
    font-weight:  400 !important;
    color:        #9CA3AF !important;
}

/* ── Remember + Forgot ── */
.lc-meta {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             12px !important;
    margin:          4px 0 20px !important;
}
.lc-remember {
    display:                 flex !important;
    align-items:             center !important;
    gap:                     8px !important;
    font-size:               13.5px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    cursor:                  pointer !important;
    user-select:             none !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lc-remember input[type="checkbox"] {
    width:        15px !important;
    height:       15px !important;
    accent-color: #A41034 !important;
    cursor:       pointer !important;
    flex-shrink:  0 !important;
}
.lc-forgot {
    font-size:               13.5px !important;
    font-weight:             600 !important;
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    text-decoration:         none !important;
    white-space:             nowrap !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    transition:              color .15s !important;
}
.lc-forgot:hover {
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
    text-decoration:         underline !important;
}

/* ── Forgot password row (right-aligned, directly below password field) ── */
.ig-forgot-row {
    text-align:    right !important;
    margin:        4px 0 14px !important;
}
.ig-forgot-link {
    font-size:               13px !important;
    font-weight:             500 !important;
    line-height:             14px !important;
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    text-decoration:         none !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    transition:              color .15s !important;
}
.ig-forgot-link:hover {
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
    text-decoration:         underline !important;
}

/* ── Remember me row (standalone, below forgot-password) ── */
.ig-remember-row {
    display:                 flex !important;
    align-items:             center !important;
    gap:                     8px !important;
    margin-bottom:           16px !important;
    font-size:               13px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    cursor:                  pointer !important;
    user-select:             none !important;
}
.ig-remember-row label {
    cursor:                  pointer !important;
    line-height:             14px !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.ig-remember-row input[type="checkbox"] {
    width:        14px !important;
    height:       14px !important;
    margin:       0 !important;
    accent-color: #A41034 !important;
    cursor:       pointer !important;
    flex-shrink:  0 !important;
}

/* reCAPTCHA */
.lc-recaptcha { margin: 0 0 16px !important; }

/* ── Submit ── */
.lc-submit {
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    gap:                     8px !important;
    width:                   100% !important;
    padding:                 14px !important;
    border:                  0 !important;
    border-radius:           12px !important;
    background:              #A41034 !important;
    color:                   #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family:             system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size:               15px !important;
    font-weight:             600 !important;
    cursor:                  pointer !important;
    box-shadow:              0 8px 24px -10px rgba(164,16,52,.55) !important;
    transition:              transform .22s, box-shadow .22s, background .22s !important;
    letter-spacing:          normal !important;
    text-transform:          none !important;
    box-sizing:              border-box !important;
}
.lc-submit:hover {
    background: #D91247 !important;
    transform:  translateY(-2px) !important;
    box-shadow: 0 14px 32px -12px rgba(164,16,52,.55) !important;
}
.lc-submit svg {
    width:      16px !important;
    height:     16px !important;
    flex-shrink: 0 !important;
    transition:  transform .22s !important;
}
.lc-submit:hover svg { transform: translateX(4px) !important; }
.lc-submit--loading {
    opacity:        .72 !important;
    cursor:         not-allowed !important;
    pointer-events: none !important;
    transform:      none !important;
    box-shadow:     none !important;
}

/* ── Sign up link ── */
.lc-signup {
    margin:                  22px 0 0 !important;
    text-align:              center !important;
    font-size:               14px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lc-signup a {
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    font-weight:             700 !important;
    text-decoration:         none !important;
}
.lc-signup a:hover {
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
    text-decoration:         underline !important;
}

/* ── Terms ── */
.lc-terms {
    margin:                  10px 0 0 !important;
    text-align:              center !important;
    font-size:               12px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    line-height:             1.5 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lc-terms a {
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-decoration:         underline !important;
    text-underline-offset:   2px !important;
}
.lc-terms a:hover {
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .lc-page { padding: 20px 12px !important; }
    .lc-card {
        padding:       0 24px 28px !important;
        border-radius: 16px !important;
    }
    .lc-logo-wrap {
        padding-top:   28px !important;
        margin-bottom: 18px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lc-submit,
    .lc-submit:hover { transition: none !important; transform: none !important; }
    .lc-submit:hover svg { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE compact modifiers  —  rg-page / rg-card
   Keeps the lc-* visual identity but squeezes everything into
   a single viewport with no scroll on 768 px+ screens.
   ═══════════════════════════════════════════════════════════════ */

.rg-page {
    padding: 16px !important;
}

.rg-card {
    max-width:      520px !important;
    padding-left:   28px !important;
    padding-right:  28px !important;
    padding-bottom: 18px !important;
}

/* Logo — smaller so the header takes less vertical space */
.rg-card .lc-logo-wrap {
    padding-top:   14px !important;
    margin-bottom: 6px !important;
}
.rg-card .lc-logo__img {
    height: 38px !important;
}

/* Heading */
.rg-card .lc-title {
    font-size:     clamp(18px, 2.8vw, 22px) !important;
    line-height:   1.1 !important;
}
.rg-card .lc-sub {
    font-size:  12px !important;
    margin-top: 3px !important;
}

/* Alert */
.rg-card .lc-alert {
    margin-top:    8px !important;
    margin-bottom: 0 !important;
    padding:       8px 12px !important;
    font-size:     12px !important;
}

/* Google + OR */
.rg-card .lc-google {
    margin-top: 10px !important;
    padding:    9px !important;
    font-size:  13.5px !important;
}
.rg-card .lc-or {
    margin: 8px 0 !important;
}

/* Role toggle */
.rg-card .lg-roles {
    margin-bottom: 8px !important;
}
.rg-card .lg-role {
    padding:   6px 10px !important;
    font-size: 12.5px !important;
}

/* Form fields */
.rg-card .lg-field {
    margin-bottom: 7px !important;
}
.rg-card .lg-label {
    font-size:     11.5px !important;
    margin-bottom: 4px !important;
}
.rg-card .lg-input {
    padding:   8px 12px 8px 36px !important;
    font-size: 13px !important;
}
.rg-card .lg-input--pw {
    padding-right: 34px !important;
}
.rg-card .lg-inwrap > svg {
    left:   11px !important;
    width:  15px !important;
    height: 15px !important;
}
.rg-card .lg-eye {
    width:  28px !important;
    height: 28px !important;
    right:  4px !important;
}
.rg-card .lg-eye svg {
    width:  14px !important;
    height: 14px !important;
}
.rg-card .rc-input-check { right: 8px !important; }
.rg-card .lg-err {
    font-size:  10.5px !important;
    min-height: 0 !important;
}

/* Strength bar */
.rg-card .lg-pw-track {
    height:        4px !important;
    margin-bottom: 5px !important;
}
.rg-card .lg-pw-chips {
    gap:           4px !important;
    margin-bottom: 6px !important;
}
.rg-card .lg-pw-chip {
    padding:   3px 7px !important;
    font-size: 10px !important;
}

/* Checkboxes */
.rg-card .lg-check {
    padding:       3px 6px !important;
    margin-bottom: 2px !important;
    font-size:     11px !important;
    gap:           8px !important;
}
.rg-card .rc-cb-box {
    width:     16px !important;
    height:    16px !important;
    min-width: 16px !important;
}
.rg-card .lg-check--terms {
    padding: 3px 6px !important;
}

/* Submit */
.rg-card .lg-submit {
    padding:       11px !important;
    font-size:     14px !important;
    margin-bottom: 6px !important;
}

/* Sign-in link */
.rg-card .lg-signup {
    margin-top: 4px !important;
    font-size:  12.5px !important;
}

/* Mobile fallback: allow scroll on small screens */
@media (max-width: 600px) {
    .rg-page { padding: 12px !important; }
    .rg-card {
        max-width:     100% !important;
        padding-left:  20px !important;
        padding-right: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ PAGE  —  fq-*
   Hero mirrors the /blog "light page header" pattern (igblog-lhdr):
   centered eyebrow + serif title + underline + subtitle, search bar,
   dot-pill topic filters. Body keeps the docs-style topic sections.
   Palette: crimson #A41034 | cream #F5F1EA | white #FFFFFF
   ═══════════════════════════════════════════════════════════════ */

/* ── Light page header — mirrors .igsm-lhdr's centered layout exactly, plus a
   centered search bar underneath the subtitle. ── */
/* Doubled-up ".main-area .igfaq-lhdr" specificity (0,2,0) is required to beat
   custom.css's "section[class*=\"faq\"] { padding: 90px 0 !important; }" —
   a homepage-teaser rule whose wildcard attribute selector (0,1,1) also
   matches this page's .igfaq-lhdr/.igfaq-topics-section by accident. */
.main-area .igfaq-lhdr {
    background:     #F5F1EA !important;
    padding:        28px 0 22px !important;
    border-bottom:  1px solid rgba(17,24,39,0.07) !important;
}
.igfaq-lhdr__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igfaq-lhdr .ig-sec-hd--center { margin-bottom: 14px !important; }
.igfaq-lhdr .ig-eyebrow       { margin-bottom: 6px !important; }
.igfaq-lhdr .ig-sec-title     { margin-top: 0 !important; margin-bottom: 6px !important; }
.igfaq-lhdr .ig-sec-underline { margin-top: 10px !important; margin-bottom: 6px !important; }
.igfaq-lhdr .ig-sec-sub       { margin-top: 0 !important; margin-bottom: 0 !important; }
.igfaq-lhdr__eyebrow {
    font-size:      0.75rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igfaq-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.9rem, 3.2vw, 2.7rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.14 !important;
}

/* Search bar — white bg, crimson button */
.igfaq-lhdr__search {
    display:       flex !important;
    align-items:   center !important;
    max-width:     480px !important;
    width:         100% !important;
    background:    #FFFFFF !important;
    border:        1.5px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow:      hidden !important;
    box-shadow:    0 1px 4px rgba(17,24,39,0.07) !important;
    margin:        0 auto !important;
    transition:    border-color .2s, box-shadow .2s !important;
    position:      relative !important;
}
.igfaq-lhdr__search:focus-within {
    border-color: #A41034 !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,0.12) !important;
}
.igfaq-lhdr__search-ico {
    flex-shrink: 0 !important;
    color:       #9CA3AF !important;
    margin-left: 16px !important;
    display:     inline-flex !important;
}
.igfaq-lhdr__search input {
    flex:        1 !important;
    background:  transparent !important;
    border:      none !important;
    outline:     none !important;
    box-shadow:  none !important;
    padding:     9px 8px 9px 12px !important;
    font-size:   0.9375rem !important;
    color:       #111827 !important;
    font-family: inherit !important;
}
.igfaq-lhdr__search input::placeholder { color: #9CA3AF !important; }
.igfaq-lhdr__clr {
    flex-shrink:   0 !important;
    background:    rgba(17,24,39,.06) !important;
    border:        none !important;
    border-radius: 50% !important;
    width:         22px !important;
    height:        22px !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    color:         #6B7280 !important;
    cursor:        pointer !important;
    padding:       0 !important;
    margin-right:  8px !important;
    transition:    background .15s !important;
}
.igfaq-lhdr__clr:hover { background: rgba(17,24,39,.10) !important; }
.igfaq-lhdr__search button[type="submit"] {
    flex-shrink:   0 !important;
    background:    #A41034 !important;
    border:        none !important;
    color:         #FFFFFF !important;
    padding:       0 22px !important;
    min-height:    38px !important;
    font-size:     0.875rem !important;
    font-weight:   700 !important;
    cursor:        pointer !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           7px !important;
    border-radius: 0 10px 10px 0 !important;
    white-space:   nowrap !important;
    transition:    background .18s !important;
}
.igfaq-lhdr__search button[type="submit"]:hover { background: #8a0c2a !important; }

@media (max-width: 767px) {
    .igfaq-lhdr        { padding: 8px 0 12px !important; }
    .igfaq-lhdr__inner { padding-inline: 24px !important; }
    /* Matches .igfaq-lhdr's bottom padding above, same single-unit rule as desktop */
    .fq-body           { padding-top: 12px; }
}
@media (max-width: 480px) {
    .igfaq-lhdr__inner  { padding-inline: 16px !important; }
    .igfaq-lhdr__search { border-radius: 12px !important; }
}

/* ── Topic filter — horizontal row of colour cards, one per category (plus
   "All Topics"), each tinted with its own --cat-accent so the row reads as
   a strip of colour instead of plain outlined buttons. ── */
.main-area .igfaq-topics-section {
    background: #F5F1EA;
    padding:    18px 0 !important;
}
.igfaq-wrap {
    max-width:      1200px;
    margin:         0 auto;
    padding-inline: 40px;
}
.igfaq-topics-row {
    display:        flex;
    flex-wrap:      wrap;
    gap:            10px;
}
.igfaq-topic-card {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    background:      color-mix(in srgb, var(--cat-accent, #A41034) 8%, #fff);
    border:          1.5px solid color-mix(in srgb, var(--cat-accent, #A41034) 22%, transparent);
    border-radius:   100px;
    padding:         9px 16px 9px 10px;
    font-size:       0.85rem;
    font-weight:     600;
    color:           color-mix(in srgb, var(--cat-accent, #A41034) 82%, #111827);
    cursor:          pointer;
    white-space:     nowrap;
    outline:         none;
    transition:      background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.igfaq-topic-card:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-accent, #A41034) 35%, transparent);
}
.igfaq-topic-card__ico {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    flex-shrink:     0;
    background:      color-mix(in srgb, var(--cat-accent, #A41034) 16%, #fff);
    color:           var(--cat-accent, #A41034);
}
.igfaq-topic-card__count {
    flex-shrink:   0;
    font-size:     0.72rem;
    font-weight:   700;
    color:         var(--cat-accent, #A41034);
    background:    #FFFFFF;
    border-radius: 100px;
    padding:       2px 8px;
}
.igfaq-topic-card:hover {
    background:  color-mix(in srgb, var(--cat-accent, #A41034) 14%, #fff);
    transform:   translateY(-1px);
}
.igfaq-topic-card--active {
    background: var(--cat-accent, #A41034);
    border-color: var(--cat-accent, #A41034);
    color:      #FFFFFF;
}
.igfaq-topic-card--active .igfaq-topic-card__ico   { background: rgba(255,255,255,.22); color: #FFFFFF; }
.igfaq-topic-card--active .igfaq-topic-card__count { background: #FFFFFF; color: var(--cat-accent, #A41034); }
/* ".igfaq-topic-card:hover" above is (0,2,0) specificity — same as a lone
   ":hover" pairing but higher than ".igfaq-topic-card--active" (0,1,0) alone,
   so without this rule hovering the active pill reverted it to the pale
   tint background, making the "selected" pill look unstyled while hovered. */
.igfaq-topic-card--active:hover {
    background: color-mix(in srgb, var(--cat-accent, #A41034) 88%, #000);
    border-color: var(--cat-accent, #A41034);
    color:      #FFFFFF;
}

@media (max-width: 767px) {
    .igfaq-wrap        { padding-inline: 24px; }
    .igfaq-topics-row  { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 480px) {
    .igfaq-wrap { padding-inline: 16px; }
}

/* ── Body ── */
.fq-body {
    background: #F5F1EA;
    padding:    16px 0 8px;
    max-width:  1200px;
    margin:     0 auto;
}

/* ── Topic section: sticky label card + list ── */
/* Sidebar is a fixed 220px label card; the list column is 1fr and freely fills the
   rest of the row — there's no unused third track here, but the sidebar was trimmed
   down from 240px and the gap tightened so the (already fluid) list gets more room. */
.fq-topic {
    display:             grid;
    grid-template-columns: 220px 1fr;
    gap:                 32px;
    padding:             20px 8px;
}

.fq-topic-label {
    background:     #FFFFFF;
    border:         1px solid rgba(17,24,39,.07);
    border-top:     3px solid var(--cat-accent, #A41034);
    border-radius:  16px;
    padding:        20px 20px;
    box-shadow:     0 2px 14px rgba(17,24,39,.05);
    box-sizing:     border-box;
    height:         100% !important;
    align-self:     stretch !important;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.fq-topic-ico {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    background:      rgba(164,16,52,.09);
    background:      color-mix(in srgb, var(--cat-accent, #A41034) 12%, #fff);
    color:           var(--cat-accent, #A41034);
    margin-bottom:   14px;
}
.fq-topic-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      1.3rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 0 4px !important;
    line-height:    1.25 !important;
}
.fq-topic-count {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .82rem;
    color:       #9CA3AF;
    margin:      0;
}

/* Single unified card (no gap between rows — a flex `gap` here was
   rendering as a stray empty bordered box between rows in some
   browsers). Rows sit flush and are separated by a plain divider
   line instead, like a classic accordion. */
.fq-topic-list {
    display:        flex;
    flex-direction: column;
    gap:            0 !important;
    min-width:      0;
    background:     #FFFFFF;
    border:         1px solid rgba(17,24,39,.07);
    border-top:     3px solid var(--cat-accent, #A41034);
    border-radius:  16px;
    overflow:       hidden;
    box-shadow:     0 2px 14px rgba(17,24,39,.05);
    box-sizing:     border-box;
}
.fq-row {
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(17,24,39,.07);
    border-radius: 0;
    transition:    background .18s, box-shadow .18s;
}
.fq-row:last-child { border-bottom: none; }
.fq-row:hover { background: rgba(17,24,39,.02); }
.fq-row:has(.fq-row-q[aria-expanded="true"]) {
    background:  color-mix(in srgb, var(--cat-accent, #A41034) 5%, #fff);
    border-left: 3px solid var(--cat-accent, #A41034);
}

.fq-row-q {
    width:           100%;
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         14px 18px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    outline:         none;
}
.fq-row-q:focus-visible {
    outline:        2px solid #A41034;
    outline-offset: -2px;
    border-radius:  10px;
}
.fq-row-idx {
    flex-shrink:  0;
    font-family:  'Inter', system-ui, sans-serif;
    font-size:    .78rem;
    font-weight:  700;
    color:        rgba(164,16,52,.45);
    letter-spacing: .02em;
}
.fq-row-text {
    font-family:  'Fraunces', Georgia, serif;
    font-size:    1rem;
    font-weight:  600;
    color:        #111827;
    line-height:  1.45;
    flex:         1;
    transition:   color .15s;
    text-align:   left;
    text-transform: none;
}
.fq-row-q:hover .fq-row-text      { color: #A41034; }
.fq-row-q[aria-expanded="true"] .fq-row-text { color: #A41034; }

.fq-row-chevron {
    flex-shrink:  0;
    width:        28px;
    height:       28px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    border-radius: 50%;
    background:   rgba(164,16,52,.07);
    color:        #A41034;
    transition:   transform .25s cubic-bezier(.4,0,.2,1), background .15s;
}
.fq-row-q[aria-expanded="true"] .fq-row-chevron {
    transform:  rotate(180deg);
    background: rgba(164,16,52,.15);
}

.fq-row-a {
    overflow:   hidden;
    max-height: 0;
    opacity:    0;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                opacity    .22s ease;
}
.fq-row-a-inner {
    padding:      10px 18px 16px 54px;
    font-family:  'Inter', system-ui, sans-serif;
    font-size:    .94rem;
    color:        #6B7280;
    line-height:  1.75;
    border-top:   1px solid rgba(17,24,39,.05);
}

/* Links inside answers (including igfaq-link from controller) */
.fq-row-a-inner a,
.fq-link,
.igfaq-link {
    color:                  #A41034;
    text-decoration:        underline;
    text-underline-offset:  2px;
    transition:             color .15s;
}
.fq-row-a-inner a:hover,
.fq-link:hover,
.igfaq-link:hover { color: #8E0D2C; }

/* ── Empty / no results ── */
.fq-empty {
    text-align:   center;
    padding:      64px 24px;
    grid-column:  1 / -1;
}
.fq-empty-ico {
    color:        #D1D5DB;
    margin-bottom: 18px;
}
.fq-empty-title {
    font-family:  'Fraunces', Georgia, serif;
    font-size:    1.15rem;
    font-weight:  700;
    color:        #374151;
    margin-bottom: 8px;
}
.fq-empty-hint {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .9rem;
    color:       #9CA3AF;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .fq-topic { grid-template-columns: 1fr; gap: 16px; }
    .fq-topic-label {
        position:       static;
        display:        flex;
        flex-direction: row;
        align-items:    center;
        justify-content: flex-start;
        gap:            14px;
        padding:        16px 18px;
        min-height:     0;
    }
    .fq-topic-ico { margin-bottom: 0; flex-shrink: 0; }
}
@media (max-width: 600px) {
    .fq-row-q     { padding: 12px 16px; gap: 12px; }
    .fq-row-a-inner { padding-left: 16px; }
    .fq-body      { padding: 12px 0 40px; }
    .fq-topic     { padding: 16px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .fq-row-a, .fq-row-chevron { transition: none !important; transform: none !important; }
}

/* ── CTA — plain compact band (FAQ page only; deliberately simpler than the
   shared .ig-cta-band floating crimson card used on the homepage). Just
   centered text and one solid button — no divider, shadow, or glow. */
/* ".main-area" prefix + !important beats custom.css's
   "section[class*=\"faq\"] { padding: 90px 0 !important; }" wildcard, which
   also matches this class name (see .igfaq-lhdr comment above). */
.main-area .igfaq-cta {
    background:  #F5F1EA;
    padding:     8px 0 32px !important;
}
.igfaq-cta__inner {
    max-width:      560px;
    margin:         0 auto;
    padding-inline: 40px;
    text-align:     center;
    opacity:        0;
    transform:      translateY(12px);
    transition:     opacity .5s ease, transform .5s ease;
}
.igfaq-cta__inner.is-visible { opacity: 1; transform: translateY(0); }
.igfaq-cta__title {
    font-family:    'Fraunces', Georgia, serif;
    font-size:      clamp(1.5rem, 2.6vw, 2rem);
    font-weight:    700;
    color:          #111827;
    margin:         0;
}
.igfaq-cta__sub {
    font-size:   0.9375rem;
    color:       #6B7280;
    margin:      8px 0 0;
}
.igfaq-cta__btn { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
    .igfaq-cta__inner { transition: none; }
}
@media (max-width: 480px) {
    .main-area .igfaq-cta { padding: 4px 0 28px !important; }
    .igfaq-cta__inner     { padding-inline: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED SITE CONTAINER — single source of max-width for all page zones.
   Problem: header uses .container.custom-container (wide responsive widths),
   footer and page sections use .container only (Bootstrap default, narrower).
   Fix: mirror the exact custom-container breakpoints from main.css onto the
   footer and main content section containers. Backgrounds stay full-width;
   only content edges are aligned.

   .dash__wrap (student app-shell) joined this group because it never
   carried a .container class at all — dashboard.css only gives it
   "margin:0 auto" with no max-width, so at wide viewports it stretched
   edge-to-edge inside .main-area while the header/footer stayed capped
   and centered via this same cascade, leaving the dashboard's left/right
   edges misaligned with the header/footer above and below it instead of
   sharing their gutter.

   The 1800px→1680px and 1500px→1320px wide-screen tiers were removed
   (here and in main.css's .custom-container, the source these mirror) —
   on a 1920px+ monitor they left a large, clearly-wasted band of empty
   background on both sides of every page zone. max-width:100% now holds
   all the way down to the 1199.98px tablet breakpoint, where the
   remaining tiers still apply unchanged (real responsive breathing room,
   not wasted wide-screen space). ═══════════════════════════════════════════════════════════════════════════ */
.ig-footer .container,
.main-area > section > .container,
.dash__wrap {
    max-width:  100% !important;
    margin:     0 auto !important;
}
@media (max-width: 1199.98px) {
    .ig-footer .container,
    .main-area > section > .container,
    .dash__wrap { max-width: 960px !important; }
}
@media (max-width: 991.98px) {
    .ig-footer .container,
    .main-area > section > .container,
    .dash__wrap { max-width: 720px !important; }
}
@media (max-width: 767.98px) {
    .ig-footer .container,
    .main-area > section > .container,
    .dash__wrap { max-width: 100% !important; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ig-footer .container,
    .main-area > section > .container,
    .dash__wrap { max-width: 540px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ig-courses.css GRADIENT OVERRIDES
   ig-courses.css cannot be edited directly; override its backgrounds here.
   ═══════════════════════════════════════════════════════════════════════════ */
.crs-hero {
    background: #A41034 !important;
}
.crs-hero__dots {
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
}

/* Remove the large empty gap between pagination and footer on /klips and /courses.
   ig-courses.css sets .crs { padding-bottom: 80px } and
   .crs-content { padding: 20px 0 80px } — combined 160px of dead cream space.
   We keep a small bottom buffer (20px) for breathing room. */
.crs { padding-bottom: 20px !important; }
.crs-content { padding-bottom: 20px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REGISTER PAGE — Micro-interaction polish  (feature/igurus-cream-theme)
   Outer wrapper: .rc-page  |  Card: .lg-card  |  Fields: .lg-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes rcFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rcShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(3px); }
}
@keyframes rcChipPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* ── Screen-reader only ── */
.rc-sr-only {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    padding:  0 !important;
    margin:   -1px !important;
    overflow: hidden !important;
    clip:     rect(0,0,0,0) !important;
    border:   0 !important;
}

/* ── Page shell ── */
.rc-page {
    min-height:       100vh !important;
    display:          flex !important;
    flex-direction:   column !important;
    align-items:      center !important;
    justify-content:  center !important;
    background-color: #F5F1EA !important;
    background-image: none !important;
    padding:          48px 20px !important;
    box-sizing:       border-box !important;
    font-family:      'Hanken Grotesk', system-ui, sans-serif !important;
}

/* ── Nuclear text resets inside card (prevents page-components.css text-transform etc.) ── */
.lg-card *, .lg-card *::before, .lg-card *::after { box-sizing: border-box !important; }
.lg-card h1, .lg-card h2, .lg-card h3 {
    font-family:              'Cormorant Garamond', Georgia, serif !important;
    text-transform:           none !important;
    background:               none !important;
    -webkit-text-fill-color:  inherit !important;
    background-clip:          unset !important;
    -webkit-background-clip:  unset !important;
    letter-spacing:           normal !important;
    line-height:              1.1 !important;
    margin:                   0 !important;
    padding:                  0 !important;
    font-weight:              700 !important;
}
.lg-card p, .lg-card span, .lg-card label, .lg-card button, .lg-card input {
    text-transform:  none !important;
    letter-spacing:  normal !important;
    font-family:     'Hanken Grotesk', system-ui, sans-serif !important;
}
.lg-card a { text-decoration: none !important; }

/* ── Card container ── */
.lg-card {
    position:      relative !important;
    width:         100% !important;
    max-width:     30% !important;
    background:    #FFFFFF !important;
    border-radius: 18px !important;
    box-shadow:    0 1px 3px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.09), 0 1px 0 rgba(0,0,0,.02) !important;
    padding:       0 36px 28px !important;
    border:        1px solid rgba(0,0,0,.05) !important;
    box-sizing:    border-box !important;
    font-family:   'Hanken Grotesk', system-ui, sans-serif !important;
    color:         #111827 !important;
    overflow:      hidden !important;
    animation:     rcFadeUp .45s cubic-bezier(.2,.8,.2,1) both !important;
}

/* ── Crimson top accent bar ── */
.rc-accent {
    position:      absolute !important;
    top:           0 !important;
    left:          0 !important;
    right:         0 !important;
    height:        4px !important;
    background:    #A41034 !important;
    border-radius: 18px 18px 0 0 !important;
    pointer-events: none !important;
}

/* ── Stagger entrance for form sections ── */
/* NOTE: no opacity: 0 here — animation fill-mode:both applies the "from"
   keyframe (opacity:0) during the delay. Using !important on opacity would
   block the animation from ever restoring opacity:1. */
.rc-animate {
    animation:       rcFadeUp .32s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

/* ── Card logo ── */
.lg-card__logo {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             9px !important;
    text-decoration: none !important;
}

/* ── Title + subtitle ── */
.lg-title {
    margin:                  12px 0 0 !important;
    font-family:             'Cormorant Garamond', Georgia, serif !important;
    font-weight:             700 !important;
    font-size:               clamp(26px, 2.6vw, 32px) !important;
    line-height:             1.05 !important;
    color:                   #111827 !important;
    letter-spacing:          -.02em !important;
    text-transform:          none !important;
    -webkit-text-fill-color: #111827 !important;
    background:              none !important;
    padding:                 0 !important;
}
.lg-sub {
    margin:                  6px 0 0 !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               13px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    -webkit-text-fill-color: #6B7280 !important;
}

/* ── Alert ── */
.lg-alert {
    display:                 flex !important;
    align-items:             flex-start !important;
    gap:                     9px !important;
    padding:                 11px 14px !important;
    border-radius:           9px !important;
    font-size:               13px !important;
    line-height:             1.5 !important;
    background:              #fef2f2 !important;
    border:                  1px solid #fecaca !important;
    color:                   #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    margin-top:              16px !important;
}
.lg-alert svg { flex-shrink: 0 !important; margin-top: 1px !important; }

/* ── Google button ── */
.lg-google {
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    gap:                     11px !important;
    width:                   100% !important;
    margin:                  14px 0 0 !important;
    padding:                 11px !important;
    border-radius:           11px !important;
    border:                  1px solid #D1D5DB !important;
    background:              #FFFFFF !important;
    color:                   #111827 !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               14px !important;
    font-weight:             600 !important;
    cursor:                  pointer !important;
    text-decoration:         none !important;
    transition:              border-color .2s, box-shadow .2s !important;
    -webkit-text-fill-color: #111827 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    box-sizing:              border-box !important;
}
.lg-google:hover {
    border-color:            #B0B7C3 !important;
    box-shadow:              0 6px 18px -10px rgba(17,24,39,.3) !important;
    -webkit-text-fill-color: #111827 !important;
}
.lg-google svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* ── OR divider ── */
.lg-or {
    display:                 flex !important;
    align-items:             center !important;
    gap:                     12px !important;
    margin:                  14px 0 !important;
    color:                   #9CA3AF !important;
    font-size:               10px !important;
    font-weight:             600 !important;
    letter-spacing:          .1em !important;
    text-transform:          uppercase !important;
    -webkit-text-fill-color: #9CA3AF !important;
}
.lg-or::before, .lg-or::after {
    content:    '' !important;
    flex:       1 !important;
    height:     1px !important;
    background: #E5E7EB !important;
}

/* ── Role toggle ── */
.lg-roles {
    display: flex !important;
    gap:     8px !important;
    margin:  10px 0 6px !important;
}
.lg-role {
    flex:                    1 !important;
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    gap:                     7px !important;
    padding:                 9px 14px !important;
    background:              #F9FAFB !important;
    border:                  1.5px solid #E5E7EB !important;
    border-radius:           10px !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               13px !important;
    font-weight:             600 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    cursor:                  pointer !important;
    transition:              background .2s, border-color .2s, color .2s, transform .1s, box-shadow .2s !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    user-select:             none !important;
}
.lg-role.active {
    background:              #A41034 !important;
    border-color:            #A41034 !important;
    color:                   #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow:              0 4px 12px -4px rgba(164,16,52,.45) !important;
}
.lg-role:active {
    transform: scale(.97) !important;
}

/* ── 2-column row ── */
.lg-row2 {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   14px !important;
}

/* ── Form fields ── */
.lg-field  { margin-bottom: 10px !important; }
.lg-label  {
    display:                 block !important;
    margin-bottom:           6px !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               12.5px !important;
    font-weight:             600 !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lg-label i {
    color:                   #A41034 !important;
    font-style:              normal !important;
    -webkit-text-fill-color: #A41034 !important;
}
.lg-inwrap {
    position:    relative !important;
    display:     flex !important;
    align-items: center !important;
}
.lg-inwrap > svg {
    position:       absolute !important;
    left:           13px !important;
    width:          16px !important;
    height:         16px !important;
    color:          #9CA3AF !important;
    pointer-events: none !important;
    flex-shrink:    0 !important;
    transition:     color .2s !important;
    z-index:        1 !important;
}
.lg-inwrap:focus-within > svg {
    color: #A41034 !important;
}
.lg-input {
    width:                   100% !important;
    padding:                 11px 13px 11px 38px !important;
    border-radius:           10px !important;
    border:                  1px solid #E5E7EB !important;
    background:              #F9FAFB !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               13.5px !important;
    color:                   #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    outline:                 none !important;
    -webkit-appearance:      none !important;
    transition:              border-color .2s, box-shadow .2s, background .2s !important;
    box-sizing:              border-box !important;
}
.lg-input::placeholder {
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
}
.lg-input:focus {
    background:   #FFFFFF !important;
    border-color: #A41034 !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,.09) !important;
}
.lg-input.is-invalid {
    background:   #FFFFFF !important;
    border-color: #D91247 !important;
    box-shadow:   0 0 0 3px rgba(217,18,71,.09) !important;
}
.lg-input.is-valid {
    background:   #FFFFFF !important;
    border-color: #0F766E !important;
    box-shadow:   0 0 0 3px rgba(15,118,110,.09) !important;
}
.lg-input--pw  { padding-right: 38px !important; }
.lg-input--readonly {
    background:              #F3F4F6 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    cursor:                  default !important;
    border-color:            #F3F4F6 !important;
}
.lg-input--readonly:focus {
    background:   #F3F4F6 !important;
    border-color: #E5E7EB !important;
    box-shadow:   none !important;
}
.lg-input[type="date"] { padding-left: 11px !important; color-scheme: light !important; }

/* ── Valid check icon (appears when input.is-valid) ── */
.rc-input-check {
    position:       absolute !important;
    right:          11px !important;
    display:        flex !important;
    align-items:    center !important;
    pointer-events: none !important;
    opacity:        0 !important;
    transform:      scale(.55) !important;
    transition:     opacity .2s, transform .2s !important;
    color:          #0F766E !important;
    z-index:        2 !important;
}
.rc-input-check svg { width: 14px !important; height: 14px !important; }
.lg-input.is-valid ~ .rc-input-check,
.lc-input.is-valid ~ .rc-input-check {
    opacity:   1 !important;
    transform: scale(1) !important;
}

/* ── Shake animation ── */
.rc-shake { animation: rcShake .38s cubic-bezier(.36,.07,.19,.97) both !important; }

/* ── Password eye button ── */
.lg-eye {
    position:                absolute !important;
    right:                   6px !important;
    display:                 grid !important;
    place-items:             center !important;
    width:                   30px !important;
    height:                  30px !important;
    border:                  0 !important;
    background:              none !important;
    color:                   #9CA3AF !important;
    cursor:                  pointer !important;
    border-radius:           7px !important;
    -webkit-text-fill-color: #9CA3AF !important;
    transition:              color .2s, background .2s !important;
    flex-shrink:             0 !important;
}
.lg-eye:hover {
    color:                   #A41034 !important;
    background:              #F9FAFB !important;
    -webkit-text-fill-color: #A41034 !important;
}
.lg-eye svg { width: 15px !important; height: 15px !important; }

/* ── Inline error ── */
.lg-err {
    display:                 block !important;
    margin-top:              4px !important;
    min-height:              .8em !important;
    font-size:               11.5px !important;
    font-weight:             500 !important;
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
}

/* ── Password strength bar ── */
.rg-pw-box {
    background:    #F9FAFB !important;
    border:        1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding:       12px 14px 10px !important;
    margin-bottom: 14px !important;
}
.lg-pw-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    margin-bottom:   5px !important;
}
.lg-pw-label {
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               11px !important;
    font-weight:             500 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lg-pw-level {
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               11px !important;
    font-weight:             600 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
    transition:              color .25s !important;
}
.lg-pw-level--weak   { color: #EF4444 !important; -webkit-text-fill-color: #EF4444 !important; }
.lg-pw-level--fair   { color: #F97316 !important; -webkit-text-fill-color: #F97316 !important; }
.lg-pw-level--good   { color: #EAB308 !important; -webkit-text-fill-color: #EAB308 !important; }
.lg-pw-level--strong { color: #10B981 !important; -webkit-text-fill-color: #10B981 !important; }
.lg-pw-track {
    height:        5px !important;
    background:    #F3F4F6 !important;
    border-radius: 50px !important;
    overflow:      hidden !important;
    margin-bottom: 8px !important;
}
.lg-pw-fill {
    height:        100% !important;
    width:         0 !important;
    border-radius: 50px !important;
    background:    #EF4444 !important;
    transition:    width .3s, background .3s !important;
}
.lg-pw-chips {
    display:       flex !important;
    flex-wrap:     wrap !important;
    gap:           5px !important;
    margin-bottom: 10px !important;
}
.lg-pw-chip {
    display:                 inline-flex !important;
    align-items:             center !important;
    gap:                     4px !important;
    padding:                 4px 10px !important;
    border-radius:           50px !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               11px !important;
    font-weight:             600 !important;
    background:              #F3F4F6 !important;
    color:                   #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    white-space:             nowrap !important;
    transition:              all .2s !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lg-pw-chip.ok {
    background:              #DCFCE7 !important;
    color:                   #15803D !important;
    -webkit-text-fill-color: #15803D !important;
}
.lg-pw-chip.rc-chip-pop { animation: rcChipPop .3s cubic-bezier(.2,.8,.2,1) !important; }
.lg-pw-chip svg { width: 8px !important; height: 8px !important; }

/* ── Custom checkboxes ── */
.lg-check {
    display:                 flex !important;
    align-items:             flex-start !important;
    gap:                     10px !important;
    margin-bottom:           6px !important;
    padding:                 8px 10px !important;
    border-radius:           9px !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               12.5px !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    line-height:             1.45 !important;
    text-transform:          none !important;
    cursor:                  pointer !important;
    transition:              background .15s !important;
}
.lg-check:hover {
    background: #F9FAFB !important;
}
/* Hide native checkbox — .rc-cb-box renders the visual */
.lg-check input[type="checkbox"] {
    position:       absolute !important;
    opacity:        0 !important;
    width:          0 !important;
    height:         0 !important;
    pointer-events: none !important;
}
/* Custom checkbox box */
.rc-cb-box {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           18px !important;
    height:          18px !important;
    min-width:       18px !important;
    border-radius:   5px !important;
    border:          1.5px solid #D1D5DB !important;
    background:      #FFFFFF !important;
    margin-top:      1px !important;
    flex-shrink:     0 !important;
    transition:      border-color .2s, background .2s, box-shadow .2s !important;
}
.lg-check:hover .rc-cb-box {
    border-color: #A41034 !important;
}
.rc-cb-box svg {
    width:      11px !important;
    height:     11px !important;
    opacity:    0 !important;
    transform:  scale(.5) !important;
    transition: opacity .15s, transform .15s !important;
    stroke:     #FFFFFF !important;
    fill:       none !important;
}
.lg-check input:checked + .rc-cb-box {
    background:   #A41034 !important;
    border-color: #A41034 !important;
    box-shadow:   0 2px 6px -2px rgba(164,16,52,.4) !important;
}
.lg-check input:checked + .rc-cb-box svg {
    opacity:   1 !important;
    transform: scale(1) !important;
}
.lg-check input:focus-visible + .rc-cb-box {
    outline:        2px solid #A41034 !important;
    outline-offset: 2px !important;
}
/* Terms row — no box, just slightly darker text + link accent */
.lg-check--terms {
    margin-bottom:   8px !important;
    background:      transparent !important;
    border:          none !important;
    padding:         8px 10px !important;
}
.lg-check--terms > span:not(.rc-cb-box) {
    color:                   #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-weight:             500 !important;
}
.lg-check--terms a {
    color:                   #A41034 !important;
    -webkit-text-fill-color: #A41034 !important;
    font-weight:             600 !important;
    text-decoration:         underline !important;
    text-underline-offset:   2px !important;
}
.lg-check--terms a:hover {
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
}

/* ── reCAPTCHA ── */
.rc-page .lg-recaptcha { margin: 4px 0 10px !important; }

/* ── Submit button ── */
.lg-submit {
    display:                 flex !important;
    align-items:             center !important;
    justify-content:         center !important;
    gap:                     9px !important;
    width:                   100% !important;
    padding:                 13px !important;
    border:                  0 !important;
    border-radius:           11px !important;
    background:              #A41034 !important;
    color:                   #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               14.5px !important;
    font-weight:             600 !important;
    cursor:                  pointer !important;
    box-shadow:              0 10px 24px -10px rgba(164,16,52,.55) !important;
    transition:              background .2s, transform .15s, box-shadow .2s !important;
    letter-spacing:          normal !important;
    text-transform:          none !important;
    margin-bottom:           10px !important;
    box-sizing:              border-box !important;
}
.lg-submit:hover:not(:disabled) {
    background:  #D91247 !important;
    transform:   translateY(-1px) !important;
    box-shadow:  0 14px 28px -10px rgba(217,18,71,.55) !important;
}
.lg-submit:active:not(:disabled) {
    transform:  scale(.98) !important;
    box-shadow: 0 6px 14px -8px rgba(164,16,52,.4) !important;
}
.lg-submit svg {
    width:       14px !important;
    height:      14px !important;
    flex-shrink: 0 !important;
    transition:  transform .2s !important;
}
.lg-submit:hover:not(:disabled) svg {
    transform: translateX(4px) !important;
}
.lg-submit:disabled,
.rc-submit--loading {
    opacity: .72 !important;
    cursor:  not-allowed !important;
    transform: none !important;
}

/* ── Sign-in link ── */
.lg-signup {
    margin:                  6px 0 0 !important;
    text-align:              center !important;
    font-family:             'Hanken Grotesk', system-ui, sans-serif !important;
    font-size:               13.5px !important;
    font-weight:             400 !important;
    color:                   #6B7280 !important;
    -webkit-text-fill-color: #6B7280 !important;
    text-transform:          none !important;
    letter-spacing:          normal !important;
}
.lg-signup a {
    color:                   #A41034 !important;
    font-weight:             700 !important;
    -webkit-text-fill-color: #A41034 !important;
    text-decoration:         none !important;
}
.lg-signup a:hover {
    color:                   #D91247 !important;
    -webkit-text-fill-color: #D91247 !important;
    text-decoration:         underline !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .lg-card  { max-width: 500px !important; }
}
@media (max-width: 620px) {
    .lg-row2  { grid-template-columns: 1fr !important; }
    .lg-card  { max-width: 100% !important; padding: 0 20px 24px !important; border-radius: 14px !important; }
    .rc-page  { padding: 20px 16px !important; }
}

/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .lg-card,
    .rc-animate,
    .rc-shake,
    .rc-input-check,
    .rc-cb-box,
    .rc-cb-box svg,
    .lg-pw-chip,
    .lg-pw-chip.rc-chip-pop,
    .lg-pw-level,
    .lg-check,
    .lg-input,
    .lg-role,
    .lg-submit,
    .lg-inwrap > svg {
        animation:  none !important;
        transition: none !important;
    }
    .rc-animate  { opacity: 1 !important; }
    .lg-card     { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CAREERS PAGE  —  igcar-*
   Compact SaaS-careers layout: one continuous cream (#F5F1EA) page
   background, white cards providing contrast (no alternating full-
   bleed color bands), single shared container for consistent
   left/right alignment across every section, 8px spacing rhythm.
   Palette: crimson #A41034 | cream #F5F1EA | white #FFFFFF
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared container — ~10% side margins on wide viewports, capped so
   lines of text and cards never stretch edge-to-edge on large monitors ── */
.igcar-wrap {
    max-width: 1240px;
    margin:    0 auto;
    padding:   0 24px;
}

/* ── Light page header — mirrors .igsm-lhdr exactly (same established
   pattern used by the Sitemap/Affiliate pages) so this page matches the
   site's own header convention instead of a bespoke crimson hero band. ── */
.igcar-lhdr {
    background:    #F5F1EA !important;
    padding:       14px 0 10px !important;
    border-bottom: 1px solid rgba(17,24,39,0.07) !important;
}
.igcar-lhdr__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igcar-lhdr .ig-sec-hd--center  { margin-bottom: 10px !important; }
.igcar-lhdr .ig-eyebrow         { margin-bottom: 6px !important; }
.igcar-lhdr .ig-sec-title       { margin-bottom: 6px !important; }
.igcar-lhdr .ig-sec-underline   { display: block !important; margin-bottom: 6px !important; }
.igcar-lhdr .ig-sec-sub         { margin-bottom: 0 !important; }
.igcar-lhdr__eyebrow {
    font-size:      0.75rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igcar-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
}
@media (max-width: 991px) {
    .igcar-lhdr        { padding: 16px 0 12px !important; }
    .igcar-lhdr__inner { padding-inline: 24px !important; }
}

/* ── Culture strip — compact row, icon + copy, no decorative filler ── */
.igcar-culture-section { padding: 28px 0 40px; }
.igcar-culture-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}
.igcar-culture-card {
    border-radius:  12px;
    padding:        16px 18px;
    display:        flex;
    align-items:    flex-start;
    gap:            12px;
    border:         1px solid transparent;
    transition:     box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.igcar-culture-card:hover {
    transform:  translateY(-2px);
}
.igcar-culture-icon {
    width:           36px;
    height:          36px;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.igcar-culture-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      .98rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 0 2px !important;
    line-height:    1.2 !important;
}
.igcar-culture-text {
    font-family:  'Inter', system-ui, sans-serif;
    font-size:    .82rem;
    color:        #4B5563;
    line-height:  1.5;
    margin:       0;
}

/* ── Colored card variants — same red/amber/green accent trio as the
   Sitemap page's igsm-card colors, but filled tints instead of a plain
   white card with a top border ── */
.igcar-culture-card--red {
    background:  rgba(164,16,52,.07);
    border-color: rgba(164,16,52,.12);
}
.igcar-culture-card--red:hover {
    border-color: rgba(164,16,52,.28);
    box-shadow:   0 8px 20px -8px rgba(164,16,52,.25);
}
.igcar-culture-card--red .igcar-culture-icon {
    background: rgba(164,16,52,.15);
    color:      #A41034;
}
.igcar-culture-card--amber {
    background:  rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.16);
}
.igcar-culture-card--amber:hover {
    border-color: rgba(245,158,11,.34);
    box-shadow:   0 8px 20px -8px rgba(245,158,11,.28);
}
.igcar-culture-card--amber .igcar-culture-icon {
    background: rgba(245,158,11,.20);
    color:      #B45309;
}
.igcar-culture-card--green {
    background:  rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.14);
}
.igcar-culture-card--green:hover {
    border-color: rgba(16,185,129,.30);
    box-shadow:   0 8px 20px -8px rgba(16,185,129,.25);
}
.igcar-culture-card--green .igcar-culture-icon {
    background: rgba(16,185,129,.18);
    color:      #047857;
}

/* ── Open Roles ── */
.igcar-roles-section { padding: 8px 0 40px; }
.igcar-roles-hd {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   16px;
}
.igcar-section-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      1.3rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 !important;
}
.igcar-section-sub {
    font-family:  'Inter', system-ui, sans-serif;
    font-size:    .85rem;
    color:        #6B7280;
    margin:       0;
}
.igcar-roles-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.igcar-role-card {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           16px;
    padding:       16px 20px;
    background:    #FFFFFF;
    border:        1px solid rgba(17,24,39,.08);
    border-radius: 10px;
    box-shadow:    0 1px 4px rgba(17,24,39,.04);
    transition:    box-shadow .15s, border-color .15s;
}
.igcar-role-card:hover {
    box-shadow:   0 4px 14px rgba(17,24,39,.08);
    border-color: rgba(164,16,52,.25);
}
.igcar-role-left  { flex: 1; min-width: 0; }
.igcar-role-right { flex-shrink: 0; }
.igcar-role-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      1rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 0 6px !important;
}
.igcar-role-meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
}
.igcar-role-badge {
    display:       inline-block;
    padding:       2px 9px;
    border-radius: 99px;
    font-family:   'Inter', system-ui, sans-serif;
    font-size:     .7rem;
    font-weight:   700;
    letter-spacing: .04em;
}
.igcar-role-badge--blue   { background: rgba(59,130,246,.1);  color: #2563EB; }
.igcar-role-badge--purple { background: rgba(164,16,52,.1);  color: #A41034; }
.igcar-role-badge--green  { background: rgba(34,197,94,.1);   color: #15803D; }
.igcar-role-badge--red    { background: rgba(164,16,52,.1);   color: #A41034; }

.igcar-role-pill {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .78rem;
    color:       #9CA3AF;
}
.igcar-apply-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         9px 18px;
    background:      #A41034;
    color:           #FFFFFF !important;
    border-radius:   8px;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .83rem;
    font-weight:     600;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background .15s, transform .15s, box-shadow .15s;
    box-shadow:      0 3px 10px rgba(164,16,52,.22);
}
.igcar-apply-btn:hover {
    background:  #c0153e;
    color:       #FFFFFF !important;
    transform:   translateY(-1px);
    box-shadow:  0 5px 14px rgba(164,16,52,.3);
}

/* Empty state */
.igcar-empty {
    text-align:   center;
    padding:      40px 24px;
    border:       1px dashed rgba(17,24,39,.15);
    border-radius: 12px;
    background:   #FFFFFF;
}
.igcar-empty-ico   { color: #D1D5DB; margin-bottom: 10px; }
.igcar-empty-title {
    font-family:   'Fraunces', Georgia, serif;
    font-size:     1.05rem;
    font-weight:   700;
    color:         #374151;
    margin-bottom: 4px;
    text-transform: none;
}
.igcar-empty-hint {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .85rem;
    color:       #9CA3AF;
}

/* ── Speculative / open application — folded into the roles section as a
   compact accent card instead of its own full-bleed band ── */
.igcar-speculative-card {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    background:    #FFFFFF;
    border:        1px solid rgba(17,24,39,.07);
    border-left:   3px solid #A41034;
    border-radius: 10px;
    padding:       18px 20px;
    box-shadow:    0 1px 4px rgba(17,24,39,.04);
    margin-top:    16px;
}
.igcar-speculative-icon {
    width:         36px;
    height:        36px;
    border-radius: 9px;
    background:    rgba(164,16,52,.08);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #A41034;
    flex-shrink:   0;
}
.igcar-speculative-body { flex: 1; }
.igcar-speculative-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      1rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 0 4px !important;
}
.igcar-speculative-text {
    font-family:   'Inter', system-ui, sans-serif;
    font-size:     .85rem;
    color:         #6B7280;
    margin-bottom: 8px;
    line-height:   1.55;
}
.igcar-speculative-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           #A41034;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .85rem;
    font-weight:     600;
    text-decoration: none;
    transition:      color .15s;
}
.igcar-speculative-link:hover { color: #c0153e; }

/* ── CTA / stats ── */
.igcar-cta {
    padding:     0 0 48px;
    text-align:  center;
}
.igcar-cta-inner {
    max-width: 640px;
    margin:    0 auto;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 2px 14px rgba(17,24,39,.06);
}
.igcar-cta-h2 {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.3rem, 2.6vw, 1.6rem) !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    text-transform: none !important;
    margin:         0 0 6px !important;
}
.igcar-cta-sub {
    font-family:   'Inter', system-ui, sans-serif;
    font-size:     .9rem;
    color:         #6B7280;
    margin-bottom: 20px;
    line-height:   1.55;
}
.igcar-stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    margin-bottom:         20px;
}
.igcar-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        14px 8px;
    border-radius:  10px;
    border:         1px solid transparent;
}
.igcar-stat-num {
    font-family:  'Fraunces', Georgia, serif;
    font-size:    1.3rem;
    font-weight:  700;
    line-height:  1.1;
}
.igcar-stat-lbl {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .72rem;
    color:       #6B7280;
    margin-top:  3px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Colored stat cards — same red/amber/green/blue accent quad as the
   Sitemap page's igsm-card colors ── */
.igcar-stat--red    { background: rgba(164,16,52,.07);  border-color: rgba(164,16,52,.12); }
.igcar-stat--amber  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.16); }
.igcar-stat--green  { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.14); }
.igcar-stat--blue   { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.14); }
.igcar-stat--red   .igcar-stat-num { color: #A41034; }
.igcar-stat--amber .igcar-stat-num { color: #B45309; }
.igcar-stat--green .igcar-stat-num { color: #047857; }
.igcar-stat--blue  .igcar-stat-num { color: #1D4ED8; }
.igcar-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         11px 28px;
    background:      #A41034;
    color:           #FFFFFF !important;
    border-radius:   8px;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .9rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background .18s, box-shadow .18s, transform .15s;
    box-shadow:      0 4px 14px rgba(164,16,52,.25);
}
.igcar-cta-btn:hover {
    background:  #c0153e;
    color:       #FFFFFF !important;
    box-shadow:  0 6px 20px rgba(164,16,52,.32);
    transform:   translateY(-1px);
}
.igcar-cta-btn:active { transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .igcar-culture-grid { grid-template-columns: 1fr; }
    .igcar-role-card    { flex-direction: column; align-items: flex-start; }
    .igcar-role-right   { width: 100%; }
    .igcar-apply-btn    { width: 100%; justify-content: center; }
    .igcar-stats        { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .igcar-speculative-card { flex-direction: column; }
    .igcar-roles-hd     { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 480px) {
    .igcar-wrap        { padding: 0 16px; }
    .igcar-culture-section { padding: 20px 0 32px; }
    .igcar-roles-section { padding: 8px 0 32px; }
    .igcar-cta         { padding: 0 0 40px; }
    .igcar-cta-inner   { padding: 24px 18px; }
}

/* ══════════════════════════════════════════════════════════
   KLIPS PAGE  (igkl-*)
   Hero only — sidebar/grid/pagination reuse ig-cr-* + courses-redesign.css
══════════════════════════════════════════════════════════ */
.igkl-hero {
    background:    #A41034 !important;
    border-radius: 20px;
    padding:       clamp(24px, 2.5vw, 40px) clamp(28px, 3vw, 56px);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 22px 50px -34px rgba(164,16,52,.55);
}
.igkl-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 100% 200% at 50% -20%, rgba(255,255,255,.06) 0%, transparent 65%);
    pointer-events: none;
}
.igkl-hero-inner {
    max-width:  680px;
    margin:     0 auto;
    position:   relative;
    z-index:    1;
}
.igkl-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    font-family:    'Inter', system-ui, sans-serif;
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.90);
    background:     rgba(255,255,255,.15);
    border:         1px solid rgba(255,255,255,.25);
    border-radius:  50px;
    padding:        5px 14px;
    margin-bottom:  14px;
}
.igkl-h1 {
    font-family:             'Fraunces', Georgia, serif !important;
    font-size:               clamp(1.7rem, 3.5vw, 2.4rem) !important;
    font-weight:             700 !important;
    color:                   #FFFFFF !important;
    line-height:             1.2 !important;
    margin:                  0 0 10px !important;
    text-transform:          none !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background:              none !important;
}
.igkl-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   .97rem;
    color:       rgba(255,255,255,.78);
    margin:      0 0 22px !important;
    line-height: 1.6;
}
.igkl-stats {
    display:         inline-flex;
    align-items:     center;
    background:      rgba(0,0,0,.18);
    border-radius:   12px;
    padding:         12px 0;
}
.igkl-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        0 28px;
    gap:            3px;
}
.igkl-stat-num {
    font-family:  'Fraunces', Georgia, serif;
    font-size:    1.45rem;
    font-weight:  700;
    color:        #FFFFFF;
    line-height:  1.1;
}
.igkl-stat-lbl {
    font-family:    'Inter', system-ui, sans-serif;
    font-size:      .68rem;
    font-weight:    600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.62);
}
.igkl-stat-div {
    width:      1px;
    height:     34px;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .igkl-hero      { border-radius: 14px; padding: 24px 20px; }
    .igkl-stats     { display: flex; flex-wrap: wrap; justify-content: center; padding: 12px 16px; gap: 10px; }
    .igkl-stat      { padding: 0 16px; }
    .igkl-stat-div  { display: none; }
    .igkl-stat-num  { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════════════════
   AFFILIATE PROGRAMME PAGE  —  igaf-* namespace
══════════════════════════════════════════════════════════ */

/* ── Shared layout ── */
.igaf-wrap        {  margin: 0 auto; padding: 0 24px; }
.igaf-wrap--narrow { max-width: 680px; }
.igaf-section     { padding: 48px 0; }
.igaf-section--alt {   }
.igaf-section--last { padding-top: 8px !important; padding-bottom: 40px !important; }
.igaf-section-hd  { text-align: center; margin-bottom: 32px; }
.igaf-section-title {
    font-family:    'Fraunces', Georgia, serif;
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    700;
    color:          #111827;
    margin:         0 0 8px;
    line-height:    1.2;
}
.igaf-section-sub {
    font-size:  .95rem;
    color:      #6B7280;
    margin:     0;
    line-height: 1.6;
}

/* ── Form + FAQ side-by-side split ── */
.igaf-apply-faq-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    align-items:           stretch;
}
.igaf-apply-col { min-width: 0; display: flex; flex-direction: column; }
.igaf-faq-col   { min-width: 0; display: flex; flex-direction: column; }

/* ── Who is it for + Apply form side-by-side split ── */
.igaf-wif-apply-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    align-items:           stretch;
}
.igaf-wif-col { min-width: 0; display: flex; flex-direction: column; }
.igaf-section-hd--left { text-align: left; margin-bottom: 16px; }
.igaf-wif-grid.igaf-wif-grid--compact {
    grid-template-columns: repeat(2, 1fr);
    flex: 1;
}
.igaf-faq-card {
    background:    #fff;
    border:        1px solid #E5E7EB;
    border-top:    4px solid #A41034;
    border-radius: 10px;
    padding:       24px 24px 20px;
    box-shadow:    0 4px 18px -6px rgba(0,0,0,.08);
    flex:          1;
    display:       flex;
    flex-direction: column;
}

/* ── Hero — same shared light-header pattern as the Sitemap page
   (.igsm-lhdr), instead of a bespoke two-column crimson banner. CTA
   buttons + stats kept, recolored for the light cream background and
   centered underneath the subtitle instead of right-aligned. ── */
.igaf-lhdr {
    background:    #F5F1EA !important;
    padding:       14px 0 10px !important;
    border-bottom: 1px solid rgba(17,24,39,0.07) !important;
}
.igaf-lhdr__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igaf-lhdr .ig-sec-hd--center { margin-bottom: 16px !important; }
.igaf-lhdr .ig-eyebrow       { margin-bottom: 6px !important; }
.igaf-lhdr .ig-sec-title     { margin-bottom: 6px !important; }
.igaf-lhdr .ig-sec-underline { display: block !important; margin-bottom: 6px !important; }
.igaf-lhdr .ig-sec-sub       { margin-bottom: 0 !important; }
.igaf-lhdr__eyebrow {
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igaf-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
}
.igaf-hero-btns {
    display:         flex;
    align-items:     center;
    gap:             10px;
    flex-wrap:       wrap;
    justify-content: center;
}
.igaf-btn-primary {
    display:         inline-flex;
    align-items:     center;
    background:      #A41034;
    color:           #fff;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .9rem;
    font-weight:     700;
    padding:         11px 26px;
    border-radius:   8px;
    text-decoration: none;
    box-shadow:      0 6px 16px rgba(164,16,52,.22);
    transition:      background .18s, transform .15s, box-shadow .18s;
}
.igaf-btn-primary:hover {
    background: #8B0E2A;
    transform:  translateY(-1px);
    box-shadow: 0 8px 20px rgba(164,16,52,.28);
}
.igaf-btn-ghost {
    display:         inline-flex;
    align-items:     center;
    background:      transparent;
    color:           #A41034;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .9rem;
    font-weight:     600;
    padding:         11px 26px;
    border-radius:   8px;
    border:          1.5px solid rgba(164,16,52,.4);
    text-decoration: none;
    transition:      border-color .18s, background .18s;
}
.igaf-btn-ghost:hover { border-color: #A41034; background: rgba(164,16,52,.06); }

/* ── Trust strip — colored metric cards, same technique as the
   Contact page's trust strip (.ct-metric) and the Support page's
   .hc-metric, instead of a plain dot-separated stats line. ── */
.igaf-metrics { padding: 20px 0 0; }
.igaf-metrics__inner {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
}
.igaf-metric {
    position:      relative;
    overflow:      hidden;
    padding:       18px 16px;
    border:        1.5px solid #EDE8DF;
    border-radius: 12px;
    background:    #FFFFFF;
    display:       flex;
    align-items:   center;
    gap:           12px;
    transition:    box-shadow .18s, transform .18s;
}
.igaf-metric::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igaf-metric--red::before   { background: #ef4444; }
.igaf-metric--amber::before { background: #f59e0b; }
.igaf-metric--green::before { background: #10b981; }
/* border-color stays neutral on hover — a same-color border would
   collide with the ::before top bar and read as a doubled line. */
.igaf-metric:hover { box-shadow: 0 6px 18px rgba(17,24,39,.08); transform: translateY(-2px); }
.igaf-metric__icon {
    width:           38px;
    height:          38px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       15px;
}
.igaf-metric--red .igaf-metric__icon   { background: rgba(239,68,68,.08);  color: #dc2626; }
.igaf-metric--amber .igaf-metric__icon { background: rgba(245,158,11,.10); color: #b45309; }
.igaf-metric--green .igaf-metric__icon { background: rgba(16,185,129,.10); color: #047857; }
.igaf-metric__val {
    font-size:      1.05rem;
    font-weight:    700;
    color:          #111827;
    line-height:    1.15;
    letter-spacing: -.01em;
}
.igaf-metric__label {
    font-size:      11px;
    font-weight:    600;
    color:          #6B7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top:     2px;
}
@media (max-width: 640px) {
    .igaf-metrics__inner { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    .igaf-lhdr        { padding: 16px 0 12px !important; }
    .igaf-lhdr__inner { padding-inline: 24px !important; }
}

/* ── How it works — steps — full-width 3-column grid with a colored
   top bar per card (same red/amber/green rotation as the trust
   strip), instead of a fixed-260px card cluster centered inside a
   much wider section. border-color stays neutral on hover (see the
   trust-strip metrics above) so it doesn't collide with the bar. ── */
.igaf-section--steps { padding: 24px 0 40px !important; }
.igaf-steps {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}
.igaf-step {
    position:       relative;
    overflow:       hidden;
    background:     #fff;
    border:         1.5px solid #EDE8DF;
    border-radius:  14px;
    padding:        26px 24px;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    transition:     box-shadow .18s, transform .18s;
}
.igaf-step::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igaf-step--red::before   { background: transparent; }
.igaf-step--amber::before { background: transparent; }
.igaf-step--green::before { background: transparent; }
.igaf-step:hover { box-shadow: 0 6px 20px rgba(17,24,39,.08); transform: translateY(-2px); }
.igaf-step-text { flex: 1; }
.igaf-step-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          34px;
    border-radius:   999px;
    background:      #A41034;
    color:           #fff;
    font-family:     'Fraunces', Georgia, serif;
    font-size:       1rem;
    font-weight:     700;
    margin:          0 auto 14px;
}
.igaf-step--red .igaf-step-num   { background: #A41034; }
.igaf-step--amber .igaf-step-num { background: #A41034; }
.igaf-step--green .igaf-step-num { background: #A41034; }
.igaf-step-title {
    font-family:    'Fraunces', Georgia, serif;
    font-size:      1.1rem;
    font-weight:    700;
    color:          #111827;
    margin:         0 0 6px;
}
.igaf-step-text {
    font-size:   .88rem;
    color:       #6B7280;
    line-height: 1.6;
    margin:      0;
}

/* ── Commission rate cards ── */
/* Tighter top/bottom gap matching the compacted rhythm of the sections
   above it (trust strip / how-it-works), instead of the generic
   .igaf-section 48px top padding used site-wide. */
.igaf-cr-section { padding: 12px 0 16px !important; }
.igaf-cr-section .igaf-section-hd { margin-bottom: 16px; }

/* ── Compact 3-col rate grid ── */
.igaf-cr-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   12px;
    align-items:           stretch;
    margin-bottom:         12px;
}

/* ── Base card ── */
.igaf-cr-card {
    background:    #FFFFFF;
    border:        1.5px solid #EDE8DF;
    border-radius: 12px;
    padding:       16px 16px 14px;
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    transition:    transform .18s, box-shadow .18s;
}
.igaf-cr-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 1;
}
.igaf-cr-card--blue::before  { background: #3b82f6; }
.igaf-cr-card--amber::before { background: #f59e0b; }
.igaf-cr-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 10px 28px -10px rgba(17,24,39,.15);
}
.igaf-cr-card--blue:hover  { box-shadow: 0 10px 24px -8px rgba(59,130,246,.28); }
.igaf-cr-card--amber:hover { box-shadow: 0 10px 24px -8px rgba(245,158,11,.28); }

/* ── Featured card (maroon) ── */
.igaf-cr-card--featured {
    background:   #A41034;
    border-color: transparent;
    box-shadow:   0 8px 28px -8px rgba(164,16,52,.45);
    padding-top:  20px;
}
.igaf-cr-card--featured::before { content: none; }
.igaf-cr-card--featured:hover {
    transform:  translateY(-3px);
    box-shadow: 0 14px 36px -10px rgba(164,16,52,.55);
}

/* Dot-texture overlay */
.igaf-cr-dots {
    position: absolute; inset: 0; opacity: .4;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
}

/* ── "Highest Rate" pill badge ── */
.igaf-cr-badge {
    position:       absolute;
    top:            10px;
    right:          10px;
    background:     rgba(255,255,255,.22);
    color:          #FFFFFF;
    font-size:      8.5px;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  50px;
    z-index:        1;
}

/* Watermark number behind rate */
.igaf-cr-watermark {
    position:       absolute;
    bottom:         36px;
    right:          -4px;
    font-size:      72px;
    font-weight:    900;
    line-height:    1;
    color:          rgba(255,255,255,.06);
    pointer-events: none;
    user-select:    none;
    letter-spacing: -.04em;
    z-index:        0;
}

/* ── Icon ── */
.igaf-cr-icon {
    position:        relative;
    z-index:         1;
    width:           34px;
    height:          34px;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 8px;
    background:      rgba(164,16,52,.08);
    color:           #A41034;
    transition:      transform .15s;
}
.igaf-cr-card:hover .igaf-cr-icon { transform: scale(1.08) rotate(-3deg); }
.igaf-cr-card--blue .igaf-cr-icon  { background: rgba(59,130,246,.10); color: #1d4ed8; }
.igaf-cr-card--amber .igaf-cr-icon { background: rgba(245,158,11,.12); color: #b45309; }
.igaf-cr-card--featured .igaf-cr-icon { background: rgba(255,255,255,.18); color: #FFFFFF; }

/* z-index stacking above dot overlay */
.igaf-cr-product,
.igaf-cr-product-sub,
.igaf-cr-rate-wrap,
.igaf-cr-rate-label,
.igaf-cr-divider,
.igaf-cr-cookie { position: relative; z-index: 1; }

/* ── Product name + sub ── */
.igaf-cr-product {
    font-size:      13px;
    font-weight:    700;
    color:          #111827;
    margin:         0 0 1px;
    letter-spacing: -.01em;
}
.igaf-cr-card--featured .igaf-cr-product { color: #FFFFFF; }

.igaf-cr-product-sub {
    font-size:   11px;
    font-weight: 500;
    color:       #9CA3AF;
    margin:      0 0 8px;
}
.igaf-cr-card--featured .igaf-cr-product-sub { color: rgba(255,255,255,.6); }

/* ── Rate number ── */
.igaf-cr-rate-wrap {
    display:         flex;
    align-items:     baseline;
    justify-content: center;
    gap:             1px;
    margin-bottom:   1px;
}
.igaf-cr-rate {
    font-size:      38px;
    font-weight:    800;
    line-height:    1;
    letter-spacing: -.03em;
    color:          #A41034;
}
.igaf-cr-card--blue .igaf-cr-rate   { color: #1d4ed8; }
.igaf-cr-card--amber .igaf-cr-rate  { color: #b45309; }
.igaf-cr-card--featured .igaf-cr-rate { color: #FFFFFF; }

.igaf-cr-pct {
    font-size:     18px;
    font-weight:   700;
    line-height:   1;
    color:         #A41034;
    margin-bottom: 3px;
}
.igaf-cr-card--blue .igaf-cr-pct   { color: #1d4ed8; }
.igaf-cr-card--amber .igaf-cr-pct  { color: #b45309; }
.igaf-cr-card--featured .igaf-cr-pct { color: rgba(255,255,255,.9); }

.igaf-cr-rate-label {
    font-size:      10px;
    font-weight:    600;
    color:          #9CA3AF;
    margin:         0 0 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.igaf-cr-card--featured .igaf-cr-rate-label { color: rgba(255,255,255,.55); }

/* Thin divider */
.igaf-cr-divider {
    width:      36px;
    height:     1px;
    background: #E5E7EB;
    margin:     0 auto 8px;
}
.igaf-cr-card--featured .igaf-cr-divider { background: rgba(255,255,255,.22); }

/* ── Cookie window pill ── */
.igaf-cr-cookie {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    font-size:       11px;
    font-weight:     500;
    color:           #374151;
    background:      #F5F1EA;
    border-radius:   8px;
    padding:         5px 10px;
}
.igaf-cr-cookie svg { color: #A41034; flex-shrink: 0; }
.igaf-cr-card--blue .igaf-cr-cookie svg  { color: #1d4ed8; }
.igaf-cr-card--amber .igaf-cr-cookie svg { color: #b45309; }
.igaf-cr-card--featured .igaf-cr-cookie { background: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.igaf-cr-card--featured .igaf-cr-cookie svg { color: rgba(255,255,255,.75); }

/* ── Footer note ── */
.igaf-cr-note {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    font-size:       12px;
    color:           #9CA3AF;
    margin:          0;
}
.igaf-cr-note svg { color: #9CA3AF; flex-shrink: 0; }

@media (max-width: 700px) {
    .igaf-cr-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}

/* ── Benefits – bento grid ── */
/* Tighter top gap: combined with .igaf-cr-section's own bottom padding
   below, the generic .igaf-section 48px top padding was stacking into
   an ~80px gap between the commission note and this heading. */
.igaf-wj-section { padding-top: 24px !important; padding-bottom: 40px !important; }
.igaf-wj-section .igaf-section-hd { margin-bottom: 20px; }

/* ── Compact 3-col colored-card grid ── */
/* Borderless icon + text list — deliberately not another bordered
   card grid, since How it works / Who is it for / Apply / FAQ are
   already boxes. Rows separated by hairlines instead. */
.igaf-benefits {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap:            48px;
    row-gap:               0;
}

.igaf-benefit-row {
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    padding:       22px 0;
    border-bottom: 1px solid rgba(17,24,39,.08);
}
.igaf-benefit-row:nth-last-child(-n+2) { border-bottom: none; }

/* ── Per-row accent colors ── */
.igaf-benefit-row:nth-child(1) { --igaf-accent: #A41034; }
.igaf-benefit-row:nth-child(2) { --igaf-accent: #2563EB; }
.igaf-benefit-row:nth-child(3) { --igaf-accent: #059669; }
.igaf-benefit-row:nth-child(4) { --igaf-accent: #D97706; }
.igaf-benefit-row:nth-child(5) { --igaf-accent: #A41034; }
.igaf-benefit-row:nth-child(6) { --igaf-accent: #0891B2; }

/* ── Icon — round instead of the rounded-square used elsewhere ── */
.igaf-benefit-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--igaf-accent-bg, rgba(164,16,52,.09));
    color:           var(--igaf-accent, #A41034);
    flex-shrink:     0;
}
/* Per-row icon tint */
.igaf-benefit-row:nth-child(1) .igaf-benefit-icon { background: rgba(164,16,52,.09);  color: #A41034; }
.igaf-benefit-row:nth-child(2) .igaf-benefit-icon { background: rgba(37,99,235,.09);  color: #2563EB; }
.igaf-benefit-row:nth-child(3) .igaf-benefit-icon { background: rgba(5,150,105,.09);  color: #059669; }
.igaf-benefit-row:nth-child(4) .igaf-benefit-icon { background: rgba(217,119,6,.09);  color: #D97706; }
.igaf-benefit-row:nth-child(5) .igaf-benefit-icon { background: rgba(164,16,52,.09); color: #A41034; }
.igaf-benefit-row:nth-child(6) .igaf-benefit-icon { background: rgba(8,145,178,.09);  color: #0891B2; }

.igaf-benefit-body { min-width: 0; }

/* ── Title ── */
.igaf-benefit-title {
    font-size:      .92rem;
    font-weight:    700;
    color:          #111827;
    margin:         0 0 4px;
    letter-spacing: -.01em;
}

/* ── Body text ── */
.igaf-benefit-text {
    font-size:   .8rem;
    color:       #6B7280;
    line-height: 1.6;
    margin:      0;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .igaf-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
    .igaf-benefits { grid-template-columns: 1fr; }
    .igaf-benefit-row { border-bottom: 1px solid rgba(17,24,39,.08); }
    .igaf-benefit-row:last-child { border-bottom: none; }
}

/* ── Who is it for — compact colored cards ── */
.igaf-wif-section { background: #F5F1EA; padding: 32px 0 16px !important; }
.igaf-wif-section .igaf-section-hd { margin-bottom: 20px; }
.igaf-wif-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
}
.igaf-wif-card {
    background:     #fff;
    border:         1px solid rgba(17,24,39,.08);
    border-top:     4px solid var(--igaf-wif-accent, #A41034);
    border-radius:  10px;
    padding:        16px 16px 14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    transition:     transform .18s, box-shadow .18s;
}
.igaf-wif-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 8px 22px -8px rgba(17,24,39,.13);
}
/* Per-card accent colors */
.igaf-wif-card:nth-child(1) { --igaf-wif-accent: #A41034; }
.igaf-wif-card:nth-child(2) { --igaf-wif-accent: #2563EB; }
.igaf-wif-card:nth-child(3) { --igaf-wif-accent: #059669; }
.igaf-wif-card:nth-child(4) { --igaf-wif-accent: #D97706; }
.igaf-wif-card:nth-child(5) { --igaf-wif-accent: #A41034; }
.igaf-wif-card:nth-child(6) { --igaf-wif-accent: #0891B2; }

.igaf-wif-icon-wrap {
    width:           32px;
    height:          32px;
    border-radius:   8px;
    background:      rgba(164,16,52,.09);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
/* Per-card icon tints */
.igaf-wif-card:nth-child(1) .igaf-wif-icon-wrap { background: rgba(164,16,52,.09); }
.igaf-wif-card:nth-child(2) .igaf-wif-icon-wrap { background: rgba(37,99,235,.09); }
.igaf-wif-card:nth-child(3) .igaf-wif-icon-wrap { background: rgba(5,150,105,.09); }
.igaf-wif-card:nth-child(4) .igaf-wif-icon-wrap { background: rgba(217,119,6,.09); }
.igaf-wif-card:nth-child(5) .igaf-wif-icon-wrap { background: rgba(164,16,52,.09); }
.igaf-wif-card:nth-child(6) .igaf-wif-icon-wrap { background: rgba(8,145,178,.09); }

.igaf-wif-icon-wrap i {
    font-size: .9rem;
    color:     var(--igaf-wif-accent, #A41034);
}
.igaf-wif-body { min-width: 0; }
.igaf-wif-title {
    font-size:   .9rem;
    font-weight: 700;
    color:       #111827;
    margin:      0 0 5px;
    line-height: 1.25;
}
.igaf-wif-text {
    font-size:   .78rem;
    color:       #6B7280;
    line-height: 1.6;
    margin:      0;
}

/* ── Application card ── */
/* ── Application form card ── */
.igaf-apply-card {
    background:    #fff;
    border:        1px solid #E5E7EB;
    border-top:    4px solid #A41034;
    border-radius: 10px;
    padding:       24px 24px 20px;
    box-shadow:    0 4px 18px -6px rgba(0,0,0,.08);
    flex:          1;               /* stretch to match FAQ col height */
    display:       flex;
    flex-direction: column;
}
.igaf-apply-eyebrow {
    display:        inline-block;
    font-size:      1.5rem !important;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #A41034;
    margin-bottom:  5px;
}
.igaf-apply-eyebrow--center { display: block; text-align: center; }
.igaf-apply-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size:   1.25rem;
    font-weight: 700;
    color:       #111827;
    margin:      0 0 4px;
}
.igaf-apply-sub {
    font-size:   .82rem;
    color:       #6B7280;
    margin:      0 0 14px;
    line-height: 1.55;
}
.igaf-apply-form { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.igaf-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.igaf-form-group  { display: flex; flex-direction: column; gap: 3px; }
.igaf-form-label {
    font-size:   .76rem;
    font-weight: 600;
    color:       #374151;
}
.igaf-form-opt { font-weight: 400; color: #9CA3AF; }
.igaf-form-input {
    width:         100%;
    padding:       7px 11px;
    border:        1.5px solid #D1D5DB;
    border-radius: 7px;
    font-size:     .84rem;
    font-family:   'Inter', system-ui, sans-serif;
    color:         #111827;
    background:    #fff;
    transition:    border-color .18s;
    box-sizing:    border-box;
    outline:       none;
}
.igaf-form-input:focus { border-color: #A41034; box-shadow: 0 0 0 3px rgba(164,16,52,.09); }
.igaf-form-textarea { resize: vertical; min-height: 72px; flex: 1; }
.igaf-apply-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    background:      #A41034;
    color:           #fff;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .84rem;
    font-weight:     700;
    padding:         9px 22px;
    border-radius:   7px;
    border:          none;
    cursor:          pointer;
    transition:      background .18s, transform .15s;
    text-decoration: none;
    align-self:      flex-start;
}
.igaf-apply-btn:hover { background: #8B0D2A; transform: translateY(-1px); }
.igaf-apply-note {
    font-size:   .75rem;
    color:       #9CA3AF;
    margin:      0;
    line-height: 1.5;
}

/* ── FAQ accordion — icon-badged cards ── */
.igaf-faq-list { display: flex; flex-direction: column; gap: 10px; }
.igaf-faq-item {
    background:    #FAFAF8;
    border:        1px solid #ECE7DE;
    border-radius: 10px;
    overflow:      hidden;
    flex:          1;
    display:       flex;
    flex-direction: column;
    justify-content: center;
    transition:    background .18s, border-color .18s, box-shadow .18s;
}
.igaf-faq-item:has(.igaf-faq-q[aria-expanded="true"]) {
    background:    #fff;
    border-color:  var(--igaf-faq-accent, #A41034);
    box-shadow:    0 3px 12px -5px rgba(0,0,0,.10);
}
/* Per-item accent colors */
.igaf-faq-item:nth-child(1) { --igaf-faq-accent: #A41034; --igaf-faq-accent-bg: rgba(164,16,52,.09); }
.igaf-faq-item:nth-child(2) { --igaf-faq-accent: #2563EB; --igaf-faq-accent-bg: rgba(37,99,235,.09); }
.igaf-faq-item:nth-child(3) { --igaf-faq-accent: #059669; --igaf-faq-accent-bg: rgba(5,150,105,.09); }
.igaf-faq-item:nth-child(4) { --igaf-faq-accent: #D97706; --igaf-faq-accent-bg: rgba(217,119,6,.09); }
.igaf-faq-item:nth-child(5) { --igaf-faq-accent: #A41034; --igaf-faq-accent-bg: rgba(164,16,52,.09); }

.igaf-faq-q {
    display:         flex;
    align-items:     center;
    width:           100%;
    flex:            1;
    padding:         11px 14px;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     'Inter', system-ui, sans-serif;
    font-size:       .84rem;
    font-weight:     600;
    color:           #111827;
    text-align:      left;
    gap:             12px;
}
.igaf-faq-q:hover { background: rgba(0,0,0,.02); }
.igaf-faq-q[aria-expanded="true"] { color: var(--igaf-faq-accent, #A41034); }
.igaf-faq-q-icon {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--igaf-faq-accent-bg, rgba(164,16,52,.09));
    color:            var(--igaf-faq-accent, #A41034);
    font-size:        .78rem;
}
.igaf-faq-q-text { flex: 1; }
.igaf-faq-chevron { transition: transform .22s; flex-shrink: 0; color: #9CA3AF; }
.igaf-faq-q[aria-expanded="true"] .igaf-faq-chevron { transform: rotate(180deg); color: var(--igaf-faq-accent, #A41034); }
.igaf-faq-a {
    padding:     0 14px 14px 56px;
    font-size:   .8rem;
    color:       #6B7280;
    line-height: 1.6;
}
.igaf-faq-a p { margin: 0; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .igaf-benefits  { grid-template-columns: repeat(2, 1fr); }
    .igaf-wif-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .igaf-apply-faq-row { grid-template-columns: 1fr; gap: 32px; }
    .igaf-wif-apply-row { grid-template-columns: 1fr; gap: 32px; }
    .igaf-wif-grid--compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .igaf-wif-grid--compact { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .igaf-steps { grid-template-columns: 1fr; }
    .igaf-apply-card { padding: 20px 18px; }
    .igaf-faq-card { padding: 20px 18px; }
    .igaf-form-row--2 { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .igaf-benefits     { grid-template-columns: 1fr; }
    .igaf-wif-grid     { grid-template-columns: 1fr; }
    .igaf-benefit-row  { border-bottom: 1px solid rgba(17,24,39,.08); }
    .igaf-benefit-row:last-child { border-bottom: none; }
}

/* ── Refund policy — contact footer overrides ── */
.ig-rf-contact-footer__inner {
    max-width: 100% !important;
    width:     100% !important;
}

/* ══════════════════════════════════════════════════════════
   SITEMAP PAGE  —  igsm-* namespace
   ig-cr-page-wrap provides the 28px side margin for the hero card.
══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.igsm-hero {
    background:    #A41034 !important;
    border-radius: 20px;
    padding:       clamp(36px, 4vw, 60px) clamp(28px, 4vw, 64px);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 22px 50px -34px rgba(164,16,52,.55);
}
.igsm-hero::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(255,255,255,.12), transparent);
    pointer-events: none;
}
.igsm-hero-inner {
    max-width:  540px;
    margin:     0 auto;
    position:   relative;
    z-index:    1;
}
.igsm-eyebrow {
    display:        inline-flex;
    align-items:    center;
    font-family:    'Inter', system-ui, sans-serif;
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.90);
    background:     rgba(255,255,255,.15);
    border:         1px solid rgba(255,255,255,.25);
    border-radius:  50px;
    padding:        5px 14px;
    margin-bottom:  14px;
}
.igsm-h1 {
    font-family:    'Fraunces', Georgia, serif;
    font-size:      clamp(2rem, 5vw, 2.8rem);
    font-weight:    800;
    color:          #fff;
    line-height:    1.1;
    margin:         0 0 12px;
    letter-spacing: -.02em;
}
.igsm-sub {
    font-size:   clamp(.88rem, 1.6vw, 1rem);
    color:       rgba(255,255,255,.82);
    line-height: 1.65;
    margin:      0;
}

/* ── Wrapper — cream page bg, constrained ── */
.igsm-wrap {
    margin:     0 auto;
    padding:    24px 0 40px;
    background: transparent;
}

/* ── Light page header — mirrors .igblog-lhdr exactly (same established
   pattern used by the blog/FAQ pages) so this page matches the site's
   own header convention instead of a bespoke crimson hero band. ── */
.igsm-lhdr {
    background:    #F5F1EA !important;
    padding:       14px 0 10px !important;
    border-bottom: 1px solid rgba(17,24,39,0.07) !important;
}
.igsm-lhdr__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igsm-lhdr .ig-sec-hd--center  { margin-bottom: 10px !important; }
.igsm-lhdr .ig-eyebrow         { margin-bottom: 6px !important; }
.igsm-lhdr .ig-sec-title       { margin-bottom: 6px !important; }
.igsm-lhdr .ig-sec-underline   { display: block !important; margin-bottom: 6px !important; }
.igsm-lhdr .ig-sec-sub         { margin-bottom: 0 !important; }
.igsm-lhdr__eyebrow {
    font-size:      0.75rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igsm-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
}
@media (max-width: 991px) {
    .igsm-lhdr        { padding: 16px 0 12px !important; }
    .igsm-lhdr__inner { padding-inline: 24px !important; }
}

/* ── Horizontal rows — one full-width card per section, title on its own
   line (like the iDharma reference's "① Section name" header) with the
   links wrapping in a row underneath — not squeezed onto the same line,
   which was clipping longer titles ("Help & Resources") against the
   chips next to them. A short section (3 links) and a long one (8 links)
   each take only the height their own wrapped links need. ── */
.igsm-grid {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ── Card — single crimson top accent on every card (no per-card color
   variants); icon tile is always crimson-on-crimson-tint. ── */
.igsm-card {
    display:           flex;
    flex-direction:    column;
    gap:               8px;
    background:        #FFFFFF;
    border:            1px solid #E5E7EB;
    border-radius:     10px;
    padding:           14px 18px;
    position:          relative;
    overflow:          hidden;
    transition:        box-shadow .18s, border-color .18s;
}
.igsm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    border-radius: 10px 10px 0 0;
    background: #A41034;
}
.igsm-card:hover {
    border-color: #A41034;
    box-shadow:   0 6px 18px -8px rgba(164,16,52,.20);
}

/* Category accents — red/amber/green/blue rhythm (iDharma "Popular
   topics" reference), cycling across the 6 sections. */
.igsm-card--red::before      { background: #ef4444; }
.igsm-card--amber::before    { background: #f59e0b; }
.igsm-card--green::before    { background: #10b981; }
.igsm-card--blue::before     { background: #3b82f6; }
.igsm-card--red:hover        { border-color: #ef4444; box-shadow: 0 6px 18px -8px rgba(239,68,68,.22); }
.igsm-card--amber:hover      { border-color: #f59e0b; box-shadow: 0 6px 18px -8px rgba(245,158,11,.22); }
.igsm-card--green:hover      { border-color: #10b981; box-shadow: 0 6px 18px -8px rgba(16,185,129,.22); }
.igsm-card--blue:hover       { border-color: #3b82f6; box-shadow: 0 6px 18px -8px rgba(59,130,246,.22); }

/* Numbered circular badge + title — full-width header row, own line
   above the links (not sharing a row with them), so the title always
   has however much space it needs and can never clip against a chip. */
.igsm-card-head {
    display:      flex;
    align-items:  center;
    gap:          10px;
}
.igsm-card-num {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      #A41034;
    color:           #fff;
    font-size:       0.75rem;
    font-weight:     800;
    flex-shrink:     0;
}
.igsm-card--red .igsm-card-num    { background: #ef4444; }
.igsm-card--amber .igsm-card-num  { background: #f59e0b; }
.igsm-card--green .igsm-card-num  { background: #10b981; }
.igsm-card--blue .igsm-card-num   { background: #3b82f6; }

/* ── Title ── */
.igsm-card-title {
    font-family:   'Fraunces', Georgia, serif;
    font-size:     0.95rem;
    font-weight:   700;
    color:         #111827;
    margin:        0;
    line-height:   1.2;
}

/* ── Link list — flows horizontally and wraps, so a short section (3
   links) collapses to one line instead of three, and a long one (8
   links) only wraps as many lines as it actually needs. ── */
.igsm-card-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            6px;
    flex:           1;
    min-width:      0;
}
.igsm-card-link {
    font-size:       0.85rem;
    font-weight:     400;
    color:           #374151;
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 10px;
    border-radius:   16px;
    background:      #FAFAFA;
    white-space:     nowrap;
    transition:      color .15s, background .15s;
}
.igsm-card-link::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(164,16,52,.55);
    flex-shrink:   0;
    transition:    transform .15s;
}
.igsm-card--red .igsm-card-link::before    { background: #ef4444; }
.igsm-card--amber .igsm-card-link::before  { background: #f59e0b; }
.igsm-card--green .igsm-card-link::before  { background: #10b981; }
.igsm-card--blue .igsm-card-link::before   { background: #3b82f6; }
.igsm-card-link:hover           { color: #A41034; background: rgba(164,16,52,.06); }
.igsm-card-link:hover::before   { transform: scale(1.2); }

/* ── Responsive ── */
@media (max-width: 700px) {
    .igsm-wrap { padding: 28px 0 48px; }
}
@media (max-width: 520px) {
    .igsm-wrap { padding: 24px 0 40px; }
}


/* ══════════════════════════════════════════════════════════
   BLOG LIST PAGE  —  igblog-* hero
══════════════════════════════════════════════════════════ */
.igblog-hero-bg { background: #A41034 !important; }

/* Taller hero — align top so search + pills don't push stats off */
.igblog-hero__inner {
    align-items: flex-start !important;
    padding-top: 4px !important;
}
.igblog-hero__inner .crs-hero__right {
    padding-top: 22px;
}

/* ── Search bar on crimson ── */
.igblog-hero__search {
    position:      relative;
    display:       flex;
    align-items:   center;
    max-width:     520px;
    background:    rgba(255,255,255,.12);
    border:        1.5px solid rgba(255,255,255,.22);
    border-radius: 14px;
    overflow:      hidden;
    backdrop-filter: blur(12px);
    margin-top:    24px;
    transition:    border-color .2s, box-shadow .2s;
}
.igblog-hero__search:focus-within {
    border-color: rgba(255,255,255,.5);
    box-shadow:   0 0 0 4px rgba(255,255,255,.1);
}
.igblog-hero__search-icon {
    flex-shrink: 0;
    color:       rgba(255,255,255,.55);
    font-size:   13px;
    margin-left: 16px;
}
.igblog-hero__search input {
    flex:        1;
    background:  transparent;
    border:      none;
    outline:     none;
    padding:     13px 14px;
    font-size:   .9rem;
    color:       #ffffff;
    font-family: inherit;
}
.igblog-hero__search input::placeholder { color: rgba(255,255,255,.45); }
.igblog-hero__search input,
.igblog-hero__search input:focus,
.igblog-hero__search input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.igblog-hero__search button {
    flex-shrink:   0;
    background:    #ffffff;
    border:        none;
    color:         #A41034;
    padding:       0 22px;
    min-height:    46px;
    font-size:     .85rem;
    font-weight:   700;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           7px;
    border-radius: 10px;
    margin:        3px;
    transition:    background .18s;
    white-space:   nowrap;
}
.igblog-hero__search button:hover { background: #F5F1EA; }

/* ── Category filter pills on crimson ── */
.igblog-hero__cats {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 18px;
}
.igblog-cat-pill {
    display:         inline-flex;
    align-items:     center;
    padding:         6px 16px;
    border-radius:   100px;
    font-size:       12.5px;
    font-weight:     600;
    border:          1.5px solid rgba(255,255,255,.2);
    color:           rgba(255,255,255,.75);
    text-decoration: none;
    background:      rgba(255,255,255,.08);
    transition:      background .18s, border-color .18s, color .18s;
}
.igblog-cat-pill:hover {
    background:      rgba(255,255,255,.18);
    border-color:    rgba(255,255,255,.4);
    color:           #ffffff;
    text-decoration: none;
}
.igblog-cat-pill--active {
    background:   #ffffff;
    border-color: #ffffff;
    color:        #A41034;
}
.igblog-cat-pill--active:hover {
    background: #F5F1EA;
    color:      #A41034;
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .igblog-hero__inner { flex-direction: column !important; }
    .igblog-hero__inner .crs-hero__right { padding-top: 20px; width: 100%; }
    .igblog-hero__search { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   §03 WHY IGURUS — compact overrides
   Source file: why-igurus.css (namespace: .igw__)
   Target viewport: 1366×768 — full section in one screen.
   No shadows added. Hover behaviour untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Section padding: 56px top/bottom, keep horizontal padding */
.igw {
    padding-top:    56px !important;
    padding-bottom: 56px !important;
}

/* Left column vertically centered vs card grid */
.igw__wrap {
    align-items: center !important;
    gap: clamp(28px, 4vw, 56px) !important;
}

/* Tighten eyebrow → heading gap */
.igw__eyebrow {
    margin-bottom: 10px !important;
}

/* Heading: constrained size, tighter line-height */
.igw__heading {
    font-size:   clamp(2rem, 3.5vw, 2.75rem) !important;
    line-height: 1.1 !important;
}

/* Lead paragraph: less top margin, smaller text */
.igw__lead {
    margin-top:    12px !important;
    font-size:     0.9375rem !important;
    line-height:   1.6 !important;
    margin-bottom: 0 !important;
}

/* CTA: pull up closer to paragraph */
.igw__cta {
    margin-top: 22px !important;
    gap:        14px !important;
    padding:    5px 5px 5px 22px !important;
    font-size:  15px !important;
}
.igw__cta-arrow {
    width:  38px !important;
    height: 38px !important;
}

/* Card grid: fixed 16px gap */
.igw__cards {
    gap: 16px !important;
}

/* Card: 24px padding, tighter radius */
.igw__card {
    padding:       24px !important;
    border-radius: 16px !important;
}

/* Ghost numbers: shrink so they don't inflate card height */
.igw__card-num {
    font-size: 2.5rem !important;
    top:       8px !important;
    right:     12px !important;
}

/* Icon badge: 40×40, 10px radius */
.igw__card-ico {
    width:         40px !important;
    height:        40px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
}
.igw__card-ico svg {
    width:  18px !important;
    height: 18px !important;
}

/* Card title: ~1.15rem, tight bottom margin */
.igw__card-title {
    font-size:     1.15rem !important;
    margin-bottom: 5px !important;
    line-height:   1.25 !important;
}

/* Card body: 0.875rem, line-height 1.5 */
.igw__card-text {
    font-size:   0.875rem !important;
    line-height: 1.5 !important;
}

/* Dark variant — keep ghost number visible at new size */
.igw--dark .igw__card-num { font-size: 2.5rem !important; }


/* ═══════════════════════════════════════════════════════════════
   HOME POLISH PASS — 2026-07
   ═══════════════════════════════════════════════════════════════ */

/* ── HP1. Why iGurus — hide ghost numerals, rebalance card spacing ── */
.igw__card-num     { display: none !important; }
.igw__card         { padding: 28px !important; }
.igw__card-ico     { margin-bottom: 16px !important; }
.igw__card-title   { margin-top: 0 !important; }

/* ── HP2. Category cards — guarantee top accent bar positioning ── */
.igcat__card { position: relative !important; }
.igcat__card::before {
    content:    '' !important;
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    right:      0 !important;
    height:     3px !important;
    background: var(--igcat-accent, #A41034) !important;
    transform:  scaleX(1) !important;
}
.igcat__card:hover::before { height: 4px !important; transform: scaleX(1) !important; }

/* ── HP3. Course card branded fallback cover ── */
.igc__media    { position: relative !important; }
.igc__fallback {
    position:        absolute !important;
    inset:           0 !important;
    background:      #A41034 !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             10px !important;
    z-index:         0 !important;
    border-radius:   inherit !important;
}
.igc__img {
    position: relative !important;
    z-index:  1 !important;
}
.igc__fallback svg {
    width:        48px !important;
    height:       48px !important;
    color:        rgba(255,255,255,0.90) !important;
    stroke:       rgba(255,255,255,0.90) !important;
}
.igc__fallback-lbl {
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.70) !important;
    text-align:     center !important;
    max-width:      80% !important;
}

/* ── HP4. Fields of Study — Browse All as text arrow link ── */
.igcat__browse {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: flex-start !important;
    gap:             7px !important;
    width:           auto !important;
    padding:         0 !important;
    border:          none !important;
    border-radius:   0 !important;
    background:      transparent !important;
    color:           #A41034 !important;
    font-size:       0.9375rem !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    box-shadow:      none !important;
    white-space:     nowrap !important;
    letter-spacing:  0.01em !important;
}
.igcat__browse i      { transition: transform 0.2s ease !important; }
.igcat__browse:hover  { background: transparent !important; color: #D91247 !important; border-color: transparent !important; transform: none !important; text-decoration: none !important; }
.igcat__browse:hover i { transform: translateX(4px) !important; }

.igcat__hd-right {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    align-self:     center !important;
    flex-shrink:    0 !important;
    gap:            0 !important;
}

/* Inline stats strip inside subtitle */
.igcat__stats-strip {
    color:       #9CA3AF !important;
    font-size:   inherit !important;
    font-weight: 400 !important;
}

/* Responsive: keep Browse All reachable on mobile */
@media (max-width: 767px) {
    .igcat__hd-right { align-self: flex-start !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SUPPORT PAGE  —  igsp-*
   Route: /page/support   View: frontend.pages.support-page
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared wrapper ── */
.igsp-wrap {
    max-width:  900px;
    margin:     0 auto;
    padding:    0 28px;
}

/* ── Shared section spacing — one consistent cream canvas throughout,
   no alternating white/cream bands, for a content-first editorial feel. ── */
.igsp-section {
    padding:    64px 0;
    background: #F5F1EA;
}

/* ── Section eyebrow + title ── */
.igsp-eyebrow,
.igsp-section-eyebrow {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #9CA3AF;
    margin-bottom:  10px;
}
.igsp-section-title {
    font-family:   'Fraunces', Georgia, serif;
    font-size:     1.75rem;
    font-weight:   700;
    color:         #1C1116;
    margin-bottom: 36px;
    line-height:   1.2;
}

/* ── Inline link ── */
.igsp-link {
    color:           #A41034;
    text-decoration: underline;
}
.igsp-link:hover { color: #D91247; }


/* ══════════ HERO ══════════
   Hero text uses the shared .igleg-lhdr light-header component
   (see "SHARED LIGHT HEADER" / .igleg-lhdr elsewhere in this file).
   No bespoke .igsp-hero shell, search bar, or quick-links remain —
   the hero is just the shared eyebrow/title/underline/subtitle. */

/* ══════════ POPULAR TOPICS — CTA pills instead of description cards;
   description text moves to the title attr (tooltip) since a pill has
   no room for it. Colors cycle through the same warm palette as the
   "Most asked" pills (.igsp-ql) above, for a consistent pill language. ══ */
.igsp-topics-section {
    /* Snug against the "Most asked" pills above instead of the generic
       .igsp-section 64px rhythm used by the page's other sections. */
    padding: 16px 0 48px !important;
}
/* Centered head — deliberately breaks from the page's usual left-aligned
   section headers, matching the hero above it instead. */
.igsp-topics-head { text-align: center; max-width: 560px; margin: 0 auto; }
.igsp-topics-section .igsp-section-title { margin-bottom: 6px; }
.igsp-topics-intro { font-size: .95rem; color: #6B7280; margin: 0 0 28px; }
.igsp-topics-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
}
.igsp-topic-card {
    position:        relative;
    overflow:        hidden;
    display:         block;
    padding:         22px 20px;
    background:      #ffffff;
    border:          1.5px solid #EDE8DF;
    border-radius:   16px;
    text-align:      left;
    text-decoration: none;
    color:           inherit;
    transition:      border-color .18s, box-shadow .18s, transform .18s;
}
.igsp-topic-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igsp-topic-card:hover {
    box-shadow:      0 10px 28px rgba(17,24,39,.08);
    transform:       translateY(-3px);
    text-decoration: none;
    color:           inherit;
}
.igsp-topic-card__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px; height: 44px;
    border-radius:   50%;
    margin:          0 auto 14px;
}
.igsp-topic-card__icon svg { width: 20px; height: 20px; }
.igsp-topic-card h3 {
    font-size:   .95rem;
    font-weight: 700;
    color:       #1C1116;
    margin:      0 0 6px;
}
.igsp-topic-card p {
    font-size:   .8rem;
    color:       #6B7280;
    margin:      0;
    line-height: 1.45;
}

/* Colorful accents — cycles red / amber / green / blue per card,
   top-bar + matching icon tint, mirroring the reference card style. */
.igsp-topic-card:nth-of-type(4n+1)::before { background: #A41034; }
.igsp-topic-card:nth-of-type(4n+2)::before { background: #B8860B; }
.igsp-topic-card:nth-of-type(4n+3)::before { background: #16A34A; }
.igsp-topic-card:nth-of-type(4n+4)::before { background: #2563EB; }
.igsp-topic-card:nth-of-type(4n+1) .igsp-topic-card__icon { background: rgba(164,16,52,.1);  color: #A41034; }
.igsp-topic-card:nth-of-type(4n+2) .igsp-topic-card__icon { background: rgba(184,134,11,.1); color: #B8860B; }
.igsp-topic-card:nth-of-type(4n+3) .igsp-topic-card__icon { background: rgba(22,163,74,.1);  color: #16A34A; }
.igsp-topic-card:nth-of-type(4n+4) .igsp-topic-card__icon { background: rgba(37,99,235,.1);  color: #2563EB; }

@media (max-width: 1024px) { .igsp-topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .igsp-topics-grid { grid-template-columns: 1fr; } }


/* ══════════ KNOWLEDGE BASE / ACCORDIONS ══════════ */
.igsp-kb-section {
    /* Snug against the Popular Topics section above instead of the
       generic .igsp-section 64px rhythm. */
    padding: 16px 0 48px !important;
}
/* Centered head, matching Popular Topics above it. */
.igsp-kb-head { text-align: center; max-width: 560px; margin: 0 auto; }
.igsp-kb-section .igsp-section-title { margin-bottom: 8px; }
.igsp-kb-intro {
    font-size:   .95rem;
    color:       #6B7280;
    margin-top:  0;
    margin-bottom: 20px;
}

/* Category cards — 2-column grid once the container is wide enough
   (matches the header/footer frame now instead of the old 900px
   .igsp-wrap cap), 1 column below that. align-items:start keeps each
   card its own natural height instead of stretching short ones to
   match a taller neighbour in the same row. */
#igsp-acc-container {
    display:               grid;
   
    align-items:           start;
    gap:                   20px 24px;
}

/* Topic group — now a single unified card (colored top bar + header +
   accordion all inside one bordered box) instead of a bare header
   floating above a separately-bordered accordion list. */
.igsp-kb-group {
    position:      relative;
    overflow:      hidden;
    background:    #ffffff;
    border:        1.5px solid #EDE8DF;
    border-radius: 14px;
    margin-bottom: 0;
    scroll-margin-top: 80px;
    transition:    border-color .18s, box-shadow .18s;
}
.igsp-kb-group::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igsp-kb-group:nth-of-type(5n+1)::before { background: #A41034; }
.igsp-kb-group:nth-of-type(5n+2)::before { background: #B8860B; }
.igsp-kb-group:nth-of-type(5n+3)::before { background: #16A34A; }
.igsp-kb-group:nth-of-type(5n+4)::before { background: #2563EB; }
.igsp-kb-group:nth-of-type(5n+5)::before { background: #C05621; }
/* border-color intentionally stays neutral gray on hover — the card
   already carries the accent color via the ::before top bar, and
   switching the border to that same color too made the two collide
   into what looked like a doubled/duplicate bar right at the top
   edge. box-shadow alone is enough hover feedback. */
.igsp-kb-group:hover {
    box-shadow: 0 6px 20px rgba(17,24,39,.08);
}

/* Group header */
.igsp-kb-hdr {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     18px 18px 12px;
}
.igsp-kb-num {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    color:           #ffffff;
    font-size:       .8rem;
    font-weight:     700;
    flex-shrink:     0;
}
.igsp-kb-group:nth-of-type(5n+1) .igsp-kb-num { background: #A41034; }
.igsp-kb-group:nth-of-type(5n+2) .igsp-kb-num { background: #B8860B; }
.igsp-kb-group:nth-of-type(5n+3) .igsp-kb-num { background: #16A34A; }
.igsp-kb-group:nth-of-type(5n+4) .igsp-kb-num { background: #2563EB; }
.igsp-kb-group:nth-of-type(5n+5) .igsp-kb-num { background: #C05621; }
.igsp-kb-title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #1C1116;
    margin:      0;
}

/* Accordion list — lives inside the .igsp-kb-group card, so it no
   longer needs its own border/radius, just the row dividers. */
.igsp-acc-list {
    border-top: 1px solid #EDE8DF;
}
.igsp-acc-row + .igsp-acc-row {
    border-top: 1px solid #EDE8DF;
}
.igsp-acc-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    width:           100%;
    padding:         13px 18px;
    background:      transparent;
    border:          none;
    text-align:      left;
    cursor:          pointer;
    font-size:       .9rem;
    font-weight:     600;
    color:           #1C1116;
    transition:      background .15s;
}
.igsp-acc-btn:hover { background: #FDFAF6; }
/* Plain :focus (e.g. after a mouse click) is reset to none first —
   otherwise the browser falls back to its own UA/OS-accent-colored
   outline, which showed up as a stray amber line under the button
   instead of the brand crimson ring. :focus-visible re-adds the
   themed ring for real keyboard navigation. */
.igsp-acc-btn:focus { outline: none; }
.igsp-acc-btn:focus-visible {
    outline: 2px solid #A41034;
    outline-offset: -2px;
}
.igsp-acc-q { flex: 1; }
.igsp-acc-chevron {
    flex-shrink: 0;
    color:       #9CA3AF;
    transition:  transform .22s;
}
.igsp-acc-btn[aria-expanded="true"] .igsp-acc-chevron {
    transform: rotate(180deg);
}
.igsp-acc-body {
    max-height: 0;
    opacity:    0;
    overflow:   hidden;
    transition: max-height .28s ease, opacity .22s ease;
}
.igsp-acc-inner {
    padding:     0 18px 15px;
    font-size:   .9rem;
    color:       #4B5563;
    line-height: 1.65;
}

/* No-results message */

/* ══════════ INBOX ROUTING CARDS ══════════ */
.igsp-inbox-section {
    /* Snug against the Knowledge Base section above instead of the
       generic .igsp-section 64px rhythm. */
    padding: 16px 0 48px !important;
}
.igsp-inbox-section .igsp-section-title { margin-bottom: 8px; }
.igsp-inbox-intro {
    font-size:   .95rem;
    color:       #6B7280;
    margin-top:  0;
    margin-bottom: 24px;
}
.igsp-inbox-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}
/* Colorful cards — top-bar + matching icon tint, cycling red / amber /
   green, mirroring the reference card style. */
.igsp-inbox-card {
    position:      relative;
    overflow:      hidden;
    background:    #ffffff;
    border:        1.5px solid #EDE8DF;
    border-radius: 14px;
    padding:       22px 22px 20px;
    transition:    box-shadow .18s, transform .18s;
}
.igsp-inbox-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igsp-inbox-card:nth-of-type(3n+1)::before { background: #A41034; }
.igsp-inbox-card:nth-of-type(3n+2)::before { background: #B8860B; }
.igsp-inbox-card:nth-of-type(3n+3)::before { background: #16A34A; }
.igsp-inbox-card:hover {
    box-shadow: 0 6px 20px rgba(17,24,39,.08);
    transform:  translateY(-2px);
}
.igsp-inbox-icon {
    width:           44px;
    height:          44px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   16px;
}
.igsp-inbox-card:nth-of-type(3n+1) .igsp-inbox-icon { background: rgba(164,16,52,.1);  color: #A41034; }
.igsp-inbox-card:nth-of-type(3n+2) .igsp-inbox-icon { background: rgba(184,134,11,.1); color: #B8860B; }
.igsp-inbox-card:nth-of-type(3n+3) .igsp-inbox-icon { background: rgba(22,163,74,.1);  color: #16A34A; }
.igsp-inbox-card h3 {
    font-size:   1rem;
    font-weight: 700;
    color:       #1C1116;
    margin:      0 0 8px;
}
.igsp-inbox-card p {
    font-size:   .875rem;
    color:       #6B7280;
    margin:      0 0 16px;
    line-height: 1.55;
}
.igsp-inbox-email {
    font-size:       .85rem;
    font-weight:     600;
    color:           #A41034;
    text-decoration: none;
    word-break:      break-all;
}
.igsp-inbox-email:hover { text-decoration: underline; }


/* ══════════ RELATED PAGES — colorful cards, cycling red / amber /
   green / blue, mirroring the reference card style ══════════ */
.igsp-related-section {
    /* Snug against the inbox cards above instead of the generic
       .igsp-section 64px rhythm. */
    padding: 16px 0 48px !important;
}
.igsp-related-section .igsp-section-title { margin-bottom: 16px; }
.igsp-related-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   14px;
}
.igsp-related-card {
    position:        relative;
    overflow:        hidden;
    display:         flex;
    align-items:     flex-start;
    gap:             14px;
    padding:         18px 16px;
    background:      #ffffff;
    border:          1.5px solid #EDE8DF;
    border-radius:   14px;
    text-decoration: none;
    color:           inherit;
    transition:      box-shadow .2s, transform .2s;
}
.igsp-related-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.igsp-related-card:nth-of-type(4n+1)::before { background: #A41034; }
.igsp-related-card:nth-of-type(4n+2)::before { background: #B8860B; }
.igsp-related-card:nth-of-type(4n+3)::before { background: #16A34A; }
.igsp-related-card:nth-of-type(4n+4)::before { background: #2563EB; }
.igsp-related-card:hover {
    box-shadow:      0 6px 18px rgba(17,24,39,.09);
    transform:       translateY(-3px);
    text-decoration: none;
    color:           inherit;
}
.igsp-related-icon {
    flex-shrink:     0;
    width:           38px;
    height:          38px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform .2s;
}
.igsp-related-card:nth-of-type(4n+1) .igsp-related-icon { background: rgba(164,16,52,.1);  color: #A41034; }
.igsp-related-card:nth-of-type(4n+2) .igsp-related-icon { background: rgba(184,134,11,.1); color: #B8860B; }
.igsp-related-card:nth-of-type(4n+3) .igsp-related-icon { background: rgba(22,163,74,.1);  color: #16A34A; }
.igsp-related-card:nth-of-type(4n+4) .igsp-related-icon { background: rgba(37,99,235,.1);  color: #2563EB; }
.igsp-related-card:hover .igsp-related-icon { transform: scale(1.08); }
.igsp-related-card div { flex: 1; min-width: 0; }
.igsp-related-card h3 {
    font-size:   .875rem;
    font-weight: 700;
    color:       #1C1116;
    margin:      0 0 4px;
}
.igsp-related-card p {
    font-size:   .8rem;
    color:       #6B7280;
    margin:      0;
    line-height: 1.4;
}
.igsp-related-arrow {
    flex-shrink: 0;
    color:       #D1C9BF;
    margin-top:  2px;
    transition:  color .15s, transform .15s;
}
.igsp-related-card:nth-of-type(4n+1):hover .igsp-related-arrow { color: #A41034; transform: translateX(3px); }
.igsp-related-card:nth-of-type(4n+2):hover .igsp-related-arrow { color: #B8860B; transform: translateX(3px); }
.igsp-related-card:nth-of-type(4n+3):hover .igsp-related-arrow { color: #16A34A; transform: translateX(3px); }
.igsp-related-card:nth-of-type(4n+4):hover .igsp-related-arrow { color: #2563EB; transform: translateX(3px); }


/* ══════════ BOTTOM CTA BAND ══════════
   Plain full-bleed band on the shared cream background, no card/
   border/shadow — same quiet treatment as the Instructor Agreement's
   closing CTA (.ia-cta-footer). !important kept throughout so nothing
   can silently override it again. */
.igsp-cta-band {
    background: #F5F1EA !important;
    padding:    40px 24px !important;
    text-align: center !important;
}
.igsp-cta-card {
    max-width: 560px !important;
    margin:    0 auto !important;
}
.igsp-cta-card h2 {
    font-family:   'Fraunces', Georgia, serif !important;
    font-size:     1.5rem !important;
    font-weight:   700 !important;
    color:         #1C1116 !important;
    margin-bottom: 8px !important;
    line-height:   1.25 !important;
    letter-spacing: -.01em;
}
.igsp-cta-card h2 span { color: #A41034 !important; }
.igsp-cta-card p {
    font-size:   .875rem !important;
    color:       #6B7280 !important;
    max-width:   520px;
    margin:      0 auto 18px !important;
    line-height: 1.6;
}
.igsp-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 24px;
    background:      #A41034 !important;
    color:           #ffffff !important;
    border:          2px solid #A41034 !important;
    border-radius:   10px;
    font-size:       .85rem;
    font-weight:     600;
    text-decoration: none;
    box-shadow:      0 4px 14px rgba(164,16,52,.30);
    transition:      background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.igsp-cta-btn:hover {
    background:      #7e0c27 !important;
    border-color:    #7e0c27 !important;
    text-decoration: none;
    color:           #ffffff !important;
    transform:       translateY(-2px);
    box-shadow:      0 6px 20px rgba(164,16,52,.38);
}


/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
    .igsp-related-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .igsp-section       { padding: 48px 0; }
    .igsp-section-title { font-size: 1.45rem; margin-bottom: 28px; }
    .igsp-inbox-grid    { grid-template-columns: 1fr; }
    .igsp-related-grid  { grid-template-columns: 1fr; }
    .igsp-kb-group      { scroll-margin-top: 60px; }
}


/* ═══════════════════════════════════════════════════════════════
   STYLE-ALIGNMENT PASS — 2026-07
   Centered section headers, trust strip, dot-pills, card borders.
   ═══════════════════════════════════════════════════════════════ */

/* ── SA1. Centered section header pattern ── */
.ig-sec-hd--center {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    text-align:     center !important;
    max-width:      700px !important;
    margin-left:    auto !important;
    margin-right:   auto !important;
    margin-bottom:  48px !important;
}
/* Eyebrow: center-justify and remove the leading dash in centered context */
.ig-sec-hd--center .ig-eyebrow,
.ig-sec-hd--center .igcat__eyebrow {
    justify-content: center !important;
    margin-bottom:   12px !important;
}
/* Hide the decorative line from igcat__eyebrow when inside centered header */
.ig-sec-hd--center .igcat__eyebrow-dash { display: none !important; }

/* ── SA2. 60px crimson accent underline ── */
.ig-sec-underline {
    display:       block !important;
    width:         60px !important;
    height:        3px !important;
    background:    #A41034 !important;
    border-radius: 2px !important;
    margin:        16px auto 0 !important;
    flex-shrink:   0 !important;
}

/* ── SA3. Centered muted subtitle ── */
.ig-sec-sub {
    font-size:   1.0625rem !important;
    color:       #6B7280 !important;
    line-height: 1.65 !important;
    margin-top:  16px !important;
    margin-bottom: 0 !important;
    text-align:  center !important;
}

/* ── SA4. Centered "view all" link row below grids ── */
.ig-sec-viewall {
    display:         flex !important;
    justify-content: center !important;
    margin-top:      32px !important;
}

/* ── SA5. Category section heading styles (when inside centered header) ── */
.ig-sec-hd--center .igcat__title { font-size: clamp(1.75rem,2.8vw,2.5rem) !important; text-align: center !important; }
.ig-sec-hd--center .igcat__sub   { text-align: center !important; }
/* Stats strip is now moved to its own <p.igcat__stats-line> below the subtitle.
   The section header switched to the left-aligned split layout shared with
   Featured Programs (.ig-fp-header__text) — left-align to match, instead of
   floating centered under a left-aligned paragraph. */
.igcat__stats-strip               { display: none !important; }
.igcat__stats-line {
    font-size:   0.8125rem !important;
    color:       #6B7280 !important;
    text-align:  left !important;
    margin-top:  10px !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}
.igcat__stats-num {
    color:       #A41034 !important;
    font-weight: 600 !important;
}

/* ── SA6. Testimonials — solo carousel, controls below ── */
.ig-testi-heading--centered {
    font-size:      clamp(22px, 2.4vw, 32px) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    line-height:    1.15 !important;
    letter-spacing: -0.015em !important;
    margin:         6px 0 0 !important;
    text-align:     center !important;
}
/* Solo carousel stage — centered at max-width 840px */
.ig-testi-stage--solo {
    max-width:    840px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    overflow:     hidden !important;
}
/* Controls row centered below the carousel */
.ig-testi-controls--solo {
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             16px !important;
    margin-top:      24px !important;
}

/* ── SA7. Popular tag dot-pills ── */
.ig-hero--cream .ig-popular-tags a {
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           6px !important;
    background:    #FFFFFF !important;
    border:        1px solid #E5E7EB !important;
    border-radius: 100px !important;
    color:         #374151 !important;
    padding:       4px 13px 4px 10px !important;
    transition:    border-color .15s, color .15s !important;
}
.ig-hero--cream .ig-popular-tags a::before {
    content:       '' !important;
    display:       inline-block !important;
    width:         6px !important;
    height:        6px !important;
    border-radius: 50% !important;
    background:    #A41034 !important;
    flex-shrink:   0 !important;
}
.ig-hero--cream .ig-popular-tags a:hover {
    border-color: #A41034 !important;
    color:        #A41034 !important;
    background:   #FFFFFF !important;
}

/* ── SA8. Why iGurus feature cards — crimson top border, flat shadow ── */
.igw__card {
    border-top: 3px solid #A41034 !important;
    box-shadow: 0 1px 4px rgba(17,24,39,0.07) !important;
}
.igw__card:hover {
    box-shadow: 0 4px 20px rgba(164,16,52,0.16) !important;
}

/* ── SA9. CTA band — tighten heading and subtitle widths ── */
.ig-cta-band h2 {
    max-width: 560px !important;
}
.ig-cta-band p {
    max-width: 560px !important;
}
.ig-cta-band .ig-wrap {
    padding-block: 24px !important;
}

/* ── SA10. Hero trust strip — icon-led stat blocks, not plain text ── */
.ig-hero__trust-strip {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   wrap !important;
    gap:         0 !important;
    margin-top:  20px !important;
    padding-top: 16px !important;
    border-top:  1px solid rgba(17,24,39,0.10) !important;
    line-height: 1.5 !important;
}
.ig-trust-stat {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
}
.ig-trust-stat__ico {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           36px !important;
    height:          36px !important;
    border-radius:   10px !important;
    background:      rgba(164,16,52,0.08) !important;
    color:           #A41034 !important;
    flex-shrink:     0 !important;
}
.ig-trust-stat__ico svg { width: 17px !important; height: 17px !important; }
.ig-trust-stat__text {
    display:     flex !important;
    flex-direction: column !important;
    font-size:   0.8125rem !important;
    color:       #6B7280 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
.ig-trust-stat__text strong {
    color:       #1C1514 !important;
    font-weight: 700 !important;
    font-size:   0.9375rem !important;
}
.ig-trust-sep {
    width:       1px !important;
    height:      30px !important;
    background:  rgba(17,24,39,0.12) !important;
    margin:      0 22px !important;
    flex-shrink: 0 !important;
}

/* Mobile adjustments for new elements */
@media (max-width: 767px) {
    .ig-sec-hd--center { margin-bottom: 32px !important; }
    .ig-hero__trust-strip { row-gap: 14px !important; }
    .ig-trust-sep { margin: 0 14px !important; height: 26px !important; }
    .ig-testi-stage--solo { max-width: 100% !important; }
    .igcat__stats-line { font-size: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BL — Blog Index Page  (/blog)
   Light header · dot-pills · featured+sidebar top row · full-width grid
   ═══════════════════════════════════════════════════════════════ */

/* BL1. Light page header — maximally compact, zero wasted space */
.igblog-lhdr {
    background:     #F5F1EA !important;
    padding:        18px 0 14px !important;
    border-bottom:  1px solid rgba(17,24,39,0.07) !important;
}
.igblog-lhdr__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igblog-lhdr .ig-sec-hd--center {
    margin-bottom: 10px !important;
}
/* Stack compression: tighten internal gaps */
.igblog-lhdr .ig-eyebrow       { margin-bottom: 6px !important; }
.igblog-lhdr .ig-sec-title     { margin-bottom: 6px !important; }
.igblog-lhdr .ig-sec-underline { display: block !important; margin-bottom: 6px !important; }
.igblog-lhdr .ig-sec-sub       { margin-bottom: 0 !important; }
/* Eyebrow: small-caps label, elevated weight/tracking */
.igblog-lhdr__eyebrow {
    font-size:      1.75 rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
/* Blog title: Fraunces serif — larger, confident editorial heading */
.igblog-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
}

/* BL1b. Blog DETAILS page — same light header, plus a centered breadcrumb
   and centered meta row (author/date/reading time/views/comments) above it */
.igbd-lhdr {
    background:     #F5F1EA !important;
    padding:        18px 0 14px !important;
    border-bottom:  1px solid rgba(17,24,39,0.07) !important;
}
/* Centered — mirrors .igsm-lhdr's centered layout; the old two-column
   (copy + Categories snapshot card) layout no longer renders on this page */
.igbd-lhdr__inner {
    max-width:      800px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
.igbd-lhdr__main { flex: 1 1 auto; min-width: 0; text-align: center !important; width: 100%; }
.igbd-lhdr__breadcrumb { justify-content: center !important; margin-bottom: 12px !important; }
.igbd-lhdr .ig-sec-hd         { margin-bottom: 12px !important; text-align: center !important; }
.igbd-lhdr .ig-eyebrow        { margin-bottom: 6px !important; }
.igbd-lhdr .ig-sec-title      { margin-bottom: 6px !important; }
.igbd-lhdr .ig-sec-underline  { display: block !important; margin-bottom: 6px !important; margin-inline: auto !important; }
.igbd-lhdr .ig-sec-sub        { margin-bottom: 0 !important; max-width: 640px !important; margin-inline: auto !important; }
.igbd-lhdr__eyebrow {
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igbd-lhdr__title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight:    800 !important;
    text-transform: none !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
}
.igbd-lhdr__meta-inline { justify-content: center !important; margin: 14px 0 0 !important; color: #A41034 !important; }
.igbd-lhdr__meta-inline .bd-meta__item--updated { color: #A41034 !important; }
.igbd-lhdr__search { max-width: 460px !important; width: 100% !important; margin: 18px 0 0 !important; }

/* Categories snapshot card — mirrors a stat-card hero pattern:
   white card, header + badge, row list with a count pill each */
.igbd-cat-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 12px 32px rgba(17,24,39,.08); border: 1px solid rgba(17,24,39,.06);
    padding: 22px 22px 18px;
}
.igbd-cat-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.igbd-cat-card__head h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important; font-weight: 800; color: #111827; margin: 0;
}
.igbd-cat-card__badge {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bd-primary, #A41034); background: rgba(164,16,52,.08);
    border: 1px solid rgba(164,16,52,.18); border-radius: 100px; padding: 3px 10px; white-space: nowrap;
}
.igbd-cat-card__list { list-style: none; margin: 0; padding: 0; }
.igbd-cat-card__list li { border-bottom: 1px solid #F0EDE7; }
.igbd-cat-card__list li:last-child { border-bottom: none; }
.igbd-cat-card__list li a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0; font-size: 13.5px; font-weight: 600; color: #374151; text-decoration: none;
    transition: color .15s ease;
}
.igbd-cat-card__list li a:hover { color: var(--bd-primary, #A41034); }
.igbd-cat-card__count {
    font-size: 11px; font-weight: 700; color: var(--bd-primary, #A41034);
    background: rgba(164,16,52,.08); border-radius: 100px; padding: 2px 9px; min-width: 20px; text-align: center;
}

/* BL2. Search bar — white bg, crimson button */
.igblog-lhdr__search {
    display:       flex !important;
    align-items:   center !important;
    max-width:     640px !important;
    width:         100% !important;
    background:    #FFFFFF !important;
    border:        1.5px solid #E5E7EB !important;
    border-radius: 14px !important;
    overflow:      hidden !important;
    box-shadow:    0 1px 4px rgba(17,24,39,0.07) !important;
    margin-bottom: 26px !important;
    transition:    border-color .2s, box-shadow .2s !important;
}
.igblog-lhdr__search:focus-within {
    border-color: #A41034 !important;
    box-shadow:   0 0 0 3px rgba(164,16,52,0.12) !important;
}
.igblog-lhdr__search-ico {
    flex-shrink: 0 !important;
    color:       #9CA3AF !important;
    font-size:   1rem !important;
    margin-left: 20px !important;
}
.igblog-lhdr__search input {
    flex:        1 !important;
    background:  transparent !important;
    border:      none !important;
    outline:     none !important;
    box-shadow:  none !important;
    padding:     13px 18px !important;
    font-size:   1.0625rem !important;
    color:       #111827 !important;
    font-family: inherit !important;
}
.igblog-lhdr__search input::placeholder { color: #9CA3AF !important; }
.igblog-lhdr__search button {
    flex-shrink:   0 !important;
    background:    #A41034 !important;
    border:        none !important;
    color:         #FFFFFF !important;
    padding:       0 28px !important;
    min-height:    48px !important;
    font-size:     0.95rem !important;
    font-weight:   700 !important;
    cursor:        pointer !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           8px !important;
    border-radius: 0 12px 12px 0 !important;
    white-space:   nowrap !important;
    transition:    background .18s !important;
}
.igblog-lhdr__search button:hover { background: #8a0c2a !important; }

/* BL3. Topic filter pills — homepage dot-pill style */
.igblog-lhdr__cats {
    display:         flex !important;
    flex-wrap:       wrap !important;
    justify-content: center !important;
    gap:             6px !important;
}
/* Full override: replace the old crimson-band pill with homepage dot-pill */
.igblog-cat-pill {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             6px !important;
    background:      #FFFFFF !important;
    border:          1px solid #E5E7EB !important;
    border-radius:   100px !important;
    color:           #374151 !important;
    padding:         5px 14px 5px 10px !important;
    font-size:       0.8125rem !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    backdrop-filter: none !important;
    transition:      border-color .15s, color .15s !important;
}
.igblog-cat-pill::before {
    content:       '' !important;
    display:       inline-block !important;
    width:         6px !important;
    height:        6px !important;
    border-radius: 50% !important;
    background:    #A41034 !important;
    flex-shrink:   0 !important;
}
.igblog-cat-pill:hover {
    background:      #FFFFFF !important;
    border-color:    #A41034 !important;
    color:           #A41034 !important;
    text-decoration: none !important;
    transform:       none !important;
}
.igblog-cat-pill--active {
    background:   #A41034 !important;
    border-color: #A41034 !important;
    color:        #FFFFFF !important;
}
.igblog-cat-pill--active::before {
    background: rgba(255,255,255,0.65) !important;
}
.igblog-cat-pill--active:hover {
    background: #8a0c2a !important;
    color:      #FFFFFF !important;
}

/* BL4. Body wrapper */
.igblog-body {
    padding:    18px 0 24px !important;
}
.igblog-body__inner {
    max-width:      1200px !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
}

/* BL5. Single-column stack — hero card, popular strip, grid, pagination */
.igblog-stack {
    display:        flex !important;
    flex-direction: column !important;
    gap:            32px !important;
}

/* BL6. Featured card — wide compact lead card, per-category top border */
.bpl2-featured {
    grid-template-columns: 0.85fr 1.15fr !important;
    border-top:    3px solid var(--cat-accent, #A41034) !important;
    border-radius: 16px !important;
    box-shadow:    0 1px 4px rgba(17,24,39,0.07), 0 4px 20px rgba(17,24,39,0.08) !important;
}
.bpl2-featured:hover {
    box-shadow: 0 1px 4px rgba(17,24,39,0.06), 0 12px 36px rgba(164,16,52,0.14) !important;
    transform:  translateY(-3px) !important;
}
/* Featured media: stretches to match the text column's height (grid row stretch) */
.bpl2-featured__media {
    min-height: 260px !important;
    height:     100% !important;
    overflow:   hidden !important;
}
.bpl2-featured__media img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
}
/* Category badge on the featured image ties to the same accent as the top border */
.bpl2-badge--cat {
    background:      var(--cat-accent, #A41034) !important;
    border:          none !important;
    backdrop-filter: none !important;
}
/* Featured title: 1.65rem — fits two full lines in the narrower sidebar-layout body column */
.bpl2-featured__title {
    font-size:          1.65rem !important;
    line-height:        1.3 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display:            -webkit-box !important;
    overflow:           hidden !important;
}
/* Featured excerpt: full ~100-word summary, no clamp — card height balances around it */
.bpl2-featured__excerpt {
    flex:               none !important;
    margin-bottom:      20px !important;
}
/* Tighter featured body */
.bpl2-featured__body    { padding: 28px 32px !important; }
.bpl2-featured__footer  { display: flex !important; align-items: center !important; gap: 12px !important; }

/* BL7. Article card — Fraunces title, 16:9 media, per-category top border */
.bpl2-card {
    border-top: 3px solid var(--cat-accent, #A41034) !important;
}
.bpl2-card__title {
    font-family:        'Fraunces', 'Playfair Display', Georgia, serif !important;
    font-size:          1.0625rem !important;
    font-weight:        700 !important;
    line-height:        1.35 !important;
    margin-bottom:      8px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display:            -webkit-box !important;
    overflow:           hidden !important;
}
/* Card media: 16:9 aspect ratio, compact relative to card */
.bpl2-card__media {
    aspect-ratio: 16 / 9 !important;
    height:       auto !important;
    overflow:     hidden !important;
}
.bpl2-card__media img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
}
/* "New" ribbon sits over the thumbnail corner — image no longer carries the category pill */
.bpl2-card__new-badge {
    position: absolute !important;
    top:      8px !important;
    left:     8px !important;
    z-index:  2 !important;
}
/* Category badge — solid chip in-body, tied to the same accent as the top border */
.bpl2-card__cat {
    position:        static !important;
    align-self:      flex-start !important;
    display:         inline-flex !important;
    background:      var(--cat-accent, #A41034) !important;
    font-size:       9.5px !important;
    padding:         3px 10px !important;
    margin-bottom:   10px !important;
    box-shadow:      none !important;
}
.bpl2-card__cat:hover { filter: brightness(0.9) !important; transform: none !important; }
/* Card excerpt: one line only — compact, content-forward */
.bpl2-card__excerpt {
    font-size:          0.8125rem !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    display:            -webkit-box !important;
    overflow:           hidden !important;
    margin-bottom:      14px !important;
}

/* BL7b. Card body — flex column so footer pins to bottom */
.bpl2-card__body {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    padding:        16px 18px 18px !important;
}

/* BL8. Card footer — avatar + name/date left, CTA right */
.bpl2-card__foot {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             8px !important;
    margin-top:      auto !important;
    padding-top:     10px !important;
    border-top:      1px solid rgba(17,24,39,0.07) !important;
}
.bpl2-card__author {
    display:     flex !important;
    align-items: center !important;
    gap:         7px !important;
    min-width:   0 !important;
    flex:        1 !important;
    overflow:    hidden !important;
}
.bpl2-card__author-img {
    width:         28px !important;
    height:        28px !important;
    min-width:     28px !important;
    border-radius: 50% !important;
    object-fit:    cover !important;
    flex-shrink:   0 !important;
}
.bpl2-card__author-info {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1px !important;
    min-width:      0 !important;
    overflow:       hidden !important;
}
.bpl2-card__author-name {
    font-size:     0.75rem !important;
    font-weight:   600 !important;
    color:         #374151 !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    line-height:   1.3 !important;
}
.bpl2-card__author-date {
    font-size:   0.625rem !important;
    color:       #9CA3AF !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}
.bpl2-card__cta {
    flex-shrink:    0 !important;
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            4px !important;
    font-size:      0.6875rem !important;
    font-weight:    700 !important;
    color:          #A41034 !important;
    white-space:    nowrap !important;
    letter-spacing: 0.01em !important;
    transition:     gap 180ms ease !important;
}
.bpl2-card:hover .bpl2-card__cta { gap: 6px !important; }

/* BL9. Grid — four columns default; 2-col for small result sets (≤3 cards) */
.igblog-body__inner .bpl2-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   22px !important;
}
.igblog-body__inner .bpl2-grid.bpl2-grid--2col {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* BL10. Popular Right Now — bigger vertical cards, 4 per row, in a Swiper
   carousel loading every popular post (was a hard-capped 4-item grid) */
.bpl2-popnow { overflow: visible !important; }
.bpl2-popnow__nav {
    display:     flex !important;
    gap:         8px !important;
    flex-shrink: 0 !important;
}
.bpl2-popnow__nav-btn {
    width:         34px !important;
    height:        34px !important;
    border-radius: 50% !important;
    border:        1px solid rgba(17,24,39,.14) !important;
    background:    #FFFFFF !important;
    color:         #1C1514 !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    font-size:     12px !important;
    cursor:        pointer !important;
    transition:    background 150ms ease, color 150ms ease, border-color 150ms ease !important;
}
.bpl2-popnow__nav-btn:hover {
    background:   #A41034 !important;
    border-color: #A41034 !important;
    color:        #FFFFFF !important;
}
.bpl2-popnow__nav-btn.swiper-button-disabled {
    opacity:        .35 !important;
    cursor:         default !important;
    pointer-events: none !important;
}
.popular-swiper-active {
    overflow: hidden !important;
    padding:  4px 4px 24px !important;
    margin:   0 -4px !important;
}
.popular-swiper-active .swiper-slide {
    height:  auto !important;
    display: flex !important;
}
.bpl2-popnow__item {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     stretch !important;
    gap:             0 !important;
    width:           100% !important;
    background:      #FFFFFF !important;
    border:          1px solid rgba(17,24,39,0.07) !important;
    border-radius:   14px !important;
    padding:         0 !important;
    overflow:        hidden !important;
    text-decoration: none !important;
    transition:      box-shadow 180ms ease, transform 180ms ease !important;
}
.bpl2-popnow__item:hover {
    box-shadow:      0 8px 22px rgba(164,16,52,0.14) !important;
    transform:       translateY(-2px) !important;
    text-decoration: none !important;
}
.bpl2-popnow__thumb {
    width:         100% !important;
    height:        100px !important;
    flex-shrink:   0 !important;
    border-radius: 0 !important;
    overflow:      hidden !important;
}
.bpl2-popnow__thumb img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}
.bpl2-popnow__info { min-width: 0 !important; padding: 16px !important; }
.bpl2-popnow__title {
    font-size:          1.05rem !important;
    font-weight:        700 !important;
    color:              #1C1514 !important;
    line-height:        1.35 !important;
    margin:             0 0 10px !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    transition:         color 180ms ease !important;
}
.bpl2-popnow__item:hover .bpl2-popnow__title { color: #A41034 !important; }
.bpl2-popnow__date {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
    font-size:   0.875rem !important;
    color:       #9ca3af !important;
}
.bpl2-popnow__date i { color: #A41034 !important; font-size: 10px !important; }
/* Section head — reuse the flat divider component for "Popular Right Now" */
.bpl2-popnow .bpl2-section-head { margin-bottom: 16px !important; }
.bpl2-popnow .bpl2-section-head__label {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         7px !important;
    color:       #1C1514 !important;
}
.bpl2-popnow .bpl2-section-head__label i { color: #A41034 !important; }

.bpl2-popnow__divider {
    border:     none !important;
    height:     1px !important;
    background: rgba(28,21,20,.12) !important;
    opacity:    1 !important;
    margin:     32px 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — compact hero override  (ig-au-hero → .igsm-lhdr feel)
   Route: /about-us   View: frontend.pages.about-us
   All data preserved; vertical space tightened to match sitemap pattern.
   ═══════════════════════════════════════════════════════════════ */

/* ── AU1. Section shell — keep cream bg + full-bleed, shrink vertical padding ── */
.ig-au-hero {
    padding-top:    14px !important;
    padding-bottom: 10px !important;
    border-bottom:  1px solid rgba(17,24,39,.07) !important;
}

/* ── AU2. Breadcrumb — tighter bottom gap ── */
.ig-au-breadcrumb {
    margin-bottom: 5px !important;
    font-size:     11.5px !important;
}

/* ── AU3. Headline — compact Fraunces size, tight margin ── */
.ig-au-hero__title {
    font-size:     clamp(1.25rem, 2.4vw, 1.85rem) !important;
    line-height:   1.18 !important;
    margin-bottom: 5px !important;
}

/* ── AU4. Subtitle — smaller text, tighter line-height and bottom gap ── */
.ig-au-hero__sub {
    font-size:     13px !important;
    line-height:   1.5 !important;
    margin-bottom: 8px !important;
}

/* ── AU5. CTA row — tighten gap and bottom margin ── */
.ig-au-hero__actions {
    gap:           8px !important;
    margin-bottom: 8px !important;
}

/* ── AU6. Stat strip — horizontal cards, no shadow, compact padding ── */
.ig-au-hero__stats {
    gap: 8px !important;
}
.ig-au-hero__stat {
    flex-direction: row !important;
    align-items:    center !important;
    padding:        8px 12px !important;
    border-radius:  8px !important;
    gap:            8px !important;
    box-shadow:     none !important;
}
.ig-au-hero__stat-icon {
    width:       26px !important;
    height:      26px !important;
    flex-shrink: 0 !important;
}
.ig-au-hero__stat-icon svg {
    width:  14px !important;
    height: 14px !important;
}
.ig-au-hero__stat-num {
    font-size:   1rem !important;
    line-height: 1.1 !important;
}
.ig-au-hero__stat-label {
    font-size: 10px !important;
}
@media (max-width: 575px) {
    .ig-au-hero {
        padding-top:    12px !important;
        padding-bottom:  8px !important;
    }
    .ig-au-hero__stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — "What We Stand For" compact override  (ig-au-values / ig-value)
   ═══════════════════════════════════════════════════════════════ */

/* ── AV1. Section shell — tighten vertical padding ── */
.ig-au-values {
    padding: 24px 0 20px !important;
}

/* ── AV2. Section header — smaller title, tighter bottom gap ── */
.ig-au-values__header {
    margin-bottom: 14px !important;
}
.ig-au-values__title {
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height: 1.2 !important;
}

/* ── AV3. Grid — tighter gap ── */
.ig-au-values__grid {
    gap: 10px !important;
}

/* ── AV4. Cards — compact padding, smaller radius ── */
.ig-value {
    padding:       14px 16px 12px !important;
    border-radius: 10px !important;
    box-shadow:    none !important;
    border:        1px solid rgba(17,24,39,.08) !important;
    border-top:    4px solid var(--ig-crimson) !important;
}
.ig-value--1 { border-top-color: #DC4A34 !important; }
.ig-value--2 { border-top-color: #B8860B !important; }
.ig-value--3 { border-top-color: #16A34A !important; }
.ig-value--4 { border-top-color: #2563EB !important; }

/* ── AV5. Number accent — smaller so it doesn't push card height ── */
.ig-value__num {
    font-size: 2.2rem !important;
}

/* ── AV6. Icon — smaller square, tighter bottom gap ── */
.ig-value__icon {
    width:         36px !important;
    height:        36px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
}
.ig-value__icon svg {
    width:  18px !important;
    height: 18px !important;
}

/* ── AV7. Card heading and body — tighter spacing ── */
.ig-value h3 {
    font-size:     1rem !important;
    margin-bottom: 5px !important;
}
.ig-value p {
    font-size:   13px !important;
    line-height: 1.55 !important;
}

@media (max-width: 575px) {
    .ig-au-values { padding: 18px 0 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — "How It Works" compact override  (ig-au-features / ig-au-feature-card)
   ═══════════════════════════════════════════════════════════════ */

/* ── AF1. Section shell ── */
.ig-au-features {
    padding: 24px 0 20px !important;
}

/* ── AF2. Header ── */
.ig-au-features__header {
    margin-bottom: 14px !important;
}
.ig-au-features__title {
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height: 1.2 !important;
}

/* ── AF3. Grid ── */
.ig-au-features__grid {
    gap: 10px !important;
}

/* ── AF4. Cards ── */
.ig-au-feature-card {
    padding:       14px 16px 12px !important;
    border-radius: 10px !important;
    box-shadow:    none !important;
    border:        1px solid rgba(17,24,39,.08) !important;
    border-top:    4px solid var(--ig-crimson) !important;
}
.ig-au-feature-card--1 { border-top-color: #DC4A34 !important; }
.ig-au-feature-card--2 { border-top-color: #B8860B !important; }
.ig-au-feature-card--3 { border-top-color: #16A34A !important; }
.ig-au-feature-card--4 { border-top-color: #2563EB !important; }

/* ── AF5. Step pill ── */
.ig-au-feature-card__step {
    font-size:     10.5px !important;
    padding:       2px 8px !important;
    margin-bottom: 8px !important;
}

/* ── AF6. Icon ── */
.ig-au-feature-card__icon {
    margin-bottom: 8px !important;
}
.ig-au-feature-card__icon svg {
    width:  20px !important;
    height: 20px !important;
}

/* ── AF7. Title + desc ── */
.ig-au-feature-card__title {
    font-size:     0.95rem !important;
    margin-bottom: 5px !important;
}
.ig-au-feature-card__desc {
    font-size:   13px !important;
    line-height: 1.5 !important;
}

@media (max-width: 575px) {
    .ig-au-features { padding: 18px 0 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — "Student Reviews" compact override  (ig-au-testimonials / ig-au-tcard)
   ═══════════════════════════════════════════════════════════════ */

/* ── AT1. Section shell — tighten vertical padding ── */
.ig-au-testimonials {
    padding-top:    24px !important;
    padding-bottom: 20px !important;
}

/* ── AT2. Header ── */
.ig-au-testimonials__header {
    margin-bottom: 14px !important;
}
.ig-au-testimonials__title {
    font-size:     clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height:   1.2 !important;
    margin-bottom: 6px !important;
}

/* ── AT3. Rating strip ── */
.ig-au-testimonials__rating {
    gap: 6px !important;
}
.ig-au-testimonials__rating-score {
    font-size: 1.1rem !important;
}
.ig-au-testimonials__rating-stars svg {
    width:  13px !important;
    height: 13px !important;
}
.ig-au-testimonials__rating-count {
    font-size: 12px !important;
}

/* ── AT4. Grid — fixed 4-up row, compact gap ── */
.ig-au-testimonials__grid {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   14px !important;
}
@media (max-width: 1100px) {
    .ig-au-testimonials__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575px) {
    .ig-au-testimonials__grid { grid-template-columns: 1fr !important; }
}

/* ── AT5. Cards ── */
.ig-au-tcard {
    padding:       14px 16px 12px !important;
    border-radius: 10px !important;
    box-shadow:    none !important;
    border:        1px solid rgba(17,24,39,.08) !important;
    border-top:    4px solid var(--ig-crimson) !important;
}
.ig-au-tcard--1 { border-top-color: #DC4A34 !important; }
.ig-au-tcard--2 { border-top-color: #B8860B !important; }
.ig-au-tcard--3 { border-top-color: #16A34A !important; }
.ig-au-tcard--4 { border-top-color: #2563EB !important; }

/* ── AT6. Quote icon ── */
.ig-au-tcard__quote {
    margin-bottom: 6px !important;
}
.ig-au-tcard__quote svg {
    width:  16px !important;
    height: 16px !important;
}

/* ── AT7. Stars ── */
.ig-au-tcard__stars {
    gap:           2px !important;
    margin-bottom: 6px !important;
}
.ig-au-tcard__stars svg {
    width:  12px !important;
    height: 12px !important;
}

/* ── AT8. Review text ── */
.ig-au-tcard__comment {
    font-size:   13px !important;
    line-height: 1.55 !important;
    margin:      0 0 10px !important;
}

/* ── AT9. Person row ── */
.ig-au-tcard__person {
    gap: 8px !important;
}
.ig-au-tcard__avatar {
    width:  32px !important;
    height: 32px !important;
}
.ig-au-tcard__name {
    font-size: 0.85rem !important;
}
.ig-au-tcard__role {
    font-size: 11.5px !important;
}

@media (max-width: 575px) {
    .ig-au-testimonials { padding-top: 18px !important; padding-bottom: 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — FAQ section compact override  (ig-au-faq / ig-au-accordion)
   Functionality (accordion toggle, search, category rail JS) untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── AF1. Section shell ── */
.ig-au-faq {
    padding: 24px 0 20px !important;
}

/* ── AF2. Header ── */
.ig-au-faq__header--center {
    margin-bottom: 12px !important;
}
.ig-au-faq__title {
    font-size:     clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height:   1.2 !important;
    margin-bottom: 4px !important;
}
.ig-au-faq__sub {
    font-size: 13px !important;
}

/* ── AF3. Search bar ── */
.ig-au-faq__search {
    margin:  0 auto 12px !important;
    padding: 8px 16px !important;
}
.ig-au-faq__search input {
    font-size: 13px !important;
}

/* ── AF4. Two-col layout — narrower rail, tighter gap ── */
.ig-au-faq__layout {
    grid-template-columns: 190px 1fr !important;
    gap:                   18px !important;
}

/* ── AF5. Category rail buttons ── */
.ig-au-faq__cat {
    padding: 7px 10px !important;
    gap:     8px !important;
}
.ig-au-faq__cat-icon {
    width:         26px !important;
    height:        26px !important;
    min-width:     26px !important;
    border-radius: 6px !important;
}
.ig-au-faq__cat-icon svg {
    width:  14px !important;
    height: 14px !important;
}
.ig-au-faq__cat-label {
    font-size: 13px !important;
}
.ig-au-faq__cat-count {
    font-size: 11px !important;
}

/* ── AF6. Rail help box ── */
.ig-au-faq__rail-help {
    margin-top: 10px !important;
    padding:    12px !important;
    border-radius: 8px !important;
}
.ig-au-faq__rail-help p {
    font-size:     12px !important;
    margin-bottom: 8px !important;
}
.ig-au-faq__rail-help a {
    font-size: 12px !important;
}

/* ── AF7. Content area ── */
.ig-au-faq__content {
    gap: 14px !important;
}
.ig-au-faq__group-title {
    font-size:     11px !important;
    margin-bottom: 8px !important;
    gap:           6px !important;
}
.ig-au-faq__group-title svg {
    width:  14px !important;
    height: 14px !important;
}

/* ── AF8. Accordion — icon-badged cards, matching the Affiliate
   page's FAQ design (.igaf-faq-item): a top-accent-bar outer card on
   the section's #F5F1EA bg, each question its own row with a colored
   icon badge, accent color cycling per item. ── */
.ig-au-accordion {
    background:     #F5F1EA !important;
    border-top:     4px solid #A41034 !important;
    border-radius:  10px !important;
    box-shadow:     none !important;
    padding:        10px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}
.ig-au-accordion__item {
    background:    #ffffff !important;
    border:        1px solid #ECE7DE !important;
    border-bottom: 1px solid #ECE7DE !important;
    border-radius: 10px !important;
    overflow:      hidden;
}
.ig-au-accordion__item:last-child { border-bottom: 1px solid #ECE7DE !important; }
/* Per-item accent — same 5-color cycle as the Affiliate page's FAQ */
.ig-au-accordion__item:nth-child(5n+1) { --ig-au-accent: #A41034; --ig-au-accent-bg: rgba(164,16,52,.09); }
.ig-au-accordion__item:nth-child(5n+2) { --ig-au-accent: #2563EB; --ig-au-accent-bg: rgba(37,99,235,.09); }
.ig-au-accordion__item:nth-child(5n+3) { --ig-au-accent: #059669; --ig-au-accent-bg: rgba(5,150,105,.09); }
.ig-au-accordion__item:nth-child(5n+4) { --ig-au-accent: #D97706; --ig-au-accent-bg: rgba(217,119,6,.09); }
.ig-au-accordion__item:nth-child(5n+5) { --ig-au-accent: #A41034; --ig-au-accent-bg: rgba(164,16,52,.09); }
.ig-au-accordion__btn {
    padding:   11px 14px !important;
    font-size: 13.5px !important;
    gap:       12px !important;
}
.ig-au-accordion__btn:not(.collapsed) { color: var(--ig-au-accent, #A41034) !important; }
.ig-au-accordion__q-text { flex: 1; }
.ig-au-accordion__badge {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--ig-au-accent-bg, rgba(164,16,52,.09));
    color:           var(--ig-au-accent, #A41034);
}
.ig-au-accordion__icon { color: var(--ig-au-accent, #A41034) !important; }
.ig-au-accordion__body {
    padding:   0 14px 14px 56px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* ── AF9. CTA band ── */
.ig-au-faq__cta {
    padding:       14px 20px !important;
    border-radius: 10px !important;
    gap:           12px !important;
}
.ig-au-faq__cta-text h3 {
    font-size:     14px !important;
    margin-bottom: 2px !important;
}
.ig-au-faq__cta-text p {
    font-size: 12.5px !important;
}
.ig-au-faq__cta-btn {
    padding:   8px 16px !important;
    font-size: 13px !important;
    gap:       6px !important;
    border-radius: 8px !important;
}

/* ── AF10. Single-category support bar — cream instead of white,
   matching the section's own #F5F1EA bg. ── */
.ig-au-faq__support {
    background:    #F5F1EA !important;
    margin-top:    12px !important;
    padding:       10px 14px !important;
    gap:           10px !important;
    border-radius: 8px !important;
}

@media (max-width: 900px) {
    .ig-au-faq { padding: 18px 0 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — FULL PAGE REDESIGN
   American-clean · unified #F5F1EA bg · 10vw gutters (= header/footer)
   Compact · 0 space wastage · all functionality preserved
   ═══════════════════════════════════════════════════════════════ */

/* ── P1. Unified cream background across ALL five sections ── */
.ig-au-hero,
.ig-au-values,
.ig-au-features,
.ig-au-testimonials,
.ig-au-faq {
    background:       #F5F1EA !important;
    background-image: none !important;   /* kills FAQ dot pattern */
}

/* ── P2. 10vw gutters on all sections (= tg-header__area / footer pattern)
         Also removes full-bleed margin hacks on hero + testimonials ── */
.ig-au-hero,
.ig-au-values,
.ig-au-features,
.ig-au-testimonials,
.ig-au-faq {
    padding-left:  10vw !important;
    padding-right: 10vw !important;
    margin-left:   0    !important;
    margin-right:  0    !important;
    width:         100% !important;
    box-sizing:    border-box !important;
}

/* ── P3. Hairline dividers so same-bg sections read as distinct ── */
.ig-au-hero,
.ig-au-values,
.ig-au-features,
.ig-au-testimonials {
    border-bottom: 1px solid rgba(17,24,39,.08) !important;
}

/* ── P4. All inner wrappers: strip max-width centering — section gutters own it now ── */
.ig-au-hero__inner,
.ig-au-values__wrap,
.ig-au-features__wrap,
.ig-au-testimonials__wrap,
.ig-au-faq__wrap {
    max-width: none !important;
    margin:    0    !important;
    padding:   0    !important;
    width:     100% !important;
}

/* ── P5. Hero — left-align for American professional style ── */
.ig-au-hero__inner {
    text-align:  left !important;
    align-items: flex-start !important;
}
.ig-au-breadcrumb {
    justify-content: flex-start !important;
}
.ig-au-hero__actions {
    justify-content: flex-start !important;
}
.ig-au-hero__stats {
    max-width: 100% !important;
    margin:    0    !important;
}

/* ── P6. Section headers — left-align across all content sections ── */
.ig-au-values__header,
.ig-au-features__header,
.ig-au-testimonials__header {
    text-align:   left !important;
    max-width:    none !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
}

/* ── P8. Eyebrow label — left-justify in all about-us contexts ── */
.ig-au-values__header .ig-au-eyebrow,
.ig-au-features__header .ig-au-eyebrow,
.ig-au-testimonials__header .ig-au-eyebrow,
.ig-au-faq__header .ig-au-eyebrow {
    justify-content: flex-start !important;
}

/* ── P9. Responsive: tablet → 5vw, mobile → 16px ── */
@media (max-width: 991px) {
    .ig-au-hero,
    .ig-au-values,
    .ig-au-features,
    .ig-au-testimonials,
    .ig-au-faq {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
    }
}
@media (max-width: 575px) {
    .ig-au-hero,
    .ig-au-values,
    .ig-au-features,
    .ig-au-testimonials,
    .ig-au-faq {
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT-US — FAQ redesign: category rail moved above the content at
   every width (not just the ≤900px collapse page-components.css already
   had), and a true 10vw gutter that actually lines up with the header
   and footer edges.
   ═══════════════════════════════════════════════════════════════ */

/* AF11. True 10vw gutter. <main class="main-area"> sits inside an
   ancestor <section> capped to a ~1340px centered content column (a
   narrower Bootstrap-style wrapper than the header/footer's own ~10vw-
   padded container) — P2 above tried to set 10vw padding directly on
   .ig-au-faq, but that only pads *within* the already-too-narrow column,
   it can't widen it. Full-bleed out of every ancestor first (standard
   "100vw + calc(50% - 50vw)" trick — safe here because the ancestor
   stack is horizontally symmetric), then re-apply the header/footer's
   own 10vw gutter so the edges genuinely coincide.
   ".main-area" prefix + !important is also required to beat custom.css's
   "section[class*=\"faq\"] { padding: 90px 0 !important; }" wildcard,
   which incidentally matches this class name too (see .igfaq-lhdr on the
   standalone /faq page for the same bug). */
.main-area .ig-au-faq {
     
    padding:      32px 10vw 40px !important;
    box-sizing:   border-box !important;
}
@media (max-width: 991px) {
    .main-area .ig-au-faq { padding: 24px 5vw 28px !important; }
}
@media (max-width: 575px) {
    .main-area .ig-au-faq { padding: 20px 16px 24px !important; }
}

/* AF12. Category rail: always a horizontal wrapping row above the
   content — the 240px sidebar column is gone at every width, not just
   the mobile collapse page-components.css already defined. */
.ig-au-faq__layout {
    display:        flex !important;
    flex-direction: column !important;
    gap:            24px !important;
}
.ig-au-faq__rail {
    position:   static !important;
    flex-direction: row !important;
    flex-wrap:  wrap !important;
    overflow-x: visible !important;
    gap:        8px !important;
}
.ig-au-faq__cat { flex: 0 0 auto !important; }
/* Dropped: redundant with the crimson "Still have a question?" CTA
   already at the foot of .ig-au-faq__content, and there's no sidebar
   column left for it to live in. */
.ig-au-faq__rail-help { display: none !important; }

/* AF13. Match content width to the testimonials section above (.igaf-wrap:
   max-width 1200px, 24px side padding) — the 10vw viewport-relative
   padding from AF11 is computed against the viewport, not this section's
   already-narrower ancestor column, so it was rendering visibly narrower
   than .igaf-wrap. Zero out the section's own side padding and let
   .ig-au-faq__wrap own the width the same way .igaf-wrap does. */
.main-area .ig-au-faq {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
.ig-au-faq__wrap {
    max-width: 1200px !important;
    margin:    0 auto !important;
    padding:   0 24px !important;
    width:     100% !important;
    box-sizing: border-box !important;
}

/* BL10b. Pagination — flat system, no gradient (overrides global gradient active-state) */
.bpl2-pagination .pagination .page-item.active .page-link {
    background:   #A41034 !important;
    border-color: transparent !important;
}
.bpl2-pagination .pagination .page-item .page-link:hover:not(.active) {
    border-color: #A41034 !important;
    color:        #A41034 !important;
}

/* BL11. Responsive */
@media (max-width: 991px) {
    .igblog-lhdr        { padding: 16px 0 12px !important; }
    .igblog-lhdr__inner { padding-inline: 24px !important; }
    .igblog-body__inner { padding-inline: 24px !important; }
    .igblog-body__inner .bpl2-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575px) {
    .igblog-lhdr__inner  { padding-inline: 16px !important; }
    .igblog-lhdr__search { border-radius: 12px !important; }
    .igblog-body__inner  { padding-inline: 16px !important; }
    .igblog-body__inner .bpl2-grid { grid-template-columns: repeat(1, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BL-POLISH — Blog Index Micro-interactions & Motion Pass
   P1 Featured clipping fix · P2 Card choreography · P3 Stagger
   P4 Freshness badge · P5 Category tint · P6 Pill feedback
   P7 Sidebar compaction · P8 Newsletter reward
   ═══════════════════════════════════════════════════════════════ */

/* P2. Card hover choreography — precise 200ms lift, 400ms image, arrow stagger */
.bpl2-card {
    transition: box-shadow 200ms ease-out, transform 200ms ease-out !important;
    will-change: transform !important;
}
.bpl2-card:hover {
    transform:  translateY(-4px) !important;
    box-shadow: 0 2px 8px rgba(17,24,39,0.06), 0 14px 36px rgba(164,16,52,0.15) !important;
}
.bpl2-card__media img {
    transition: transform 400ms ease !important;
    will-change: transform !important;
}
.bpl2-card:hover .bpl2-card__media img { transform: scale(1.05) !important; }
.bpl2-card:hover .bpl2-card__title    { color: #A41034 !important; }
.bpl2-card__cta i {
    display:    inline-block !important;
    transition: transform 200ms ease-out 50ms !important;
}
.bpl2-card:hover .bpl2-card__cta i { transform: translateX(4px) !important; }

/* P3. Stagger entrance — JS adds .stagger-init; IO adds .is-visible */
.bpl2-card.stagger-init {
    opacity:    0 !important;
    transform:  translateY(12px) !important;
    transition: opacity 360ms ease, transform 360ms ease,
                box-shadow 200ms ease-out !important;
    will-change: opacity, transform !important;
}
.bpl2-card.stagger-init.is-visible {
    opacity:   1 !important;
    transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
    .bpl2-card.stagger-init {
        opacity:    1 !important;
        transform:  none !important;
        transition: box-shadow 200ms ease-out !important;
    }
}

/* P4. Freshness badge */
.bpl2-badge-new {
    display:        inline-flex !important;
    align-items:    center !important;
    background:     #A41034 !important;
    color:          #FFFFFF !important;
    font-size:      9px !important;
    font-weight:    800 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    padding:        2px 7px !important;
    border-radius:  100px !important;
    flex-shrink:    0 !important;
    line-height:    1.5 !important;
    vertical-align: middle !important;
}

/* P6. Pill dot scales on hover; pill pulses on click */
.igblog-cat-pill::before {
    transition: transform 200ms cubic-bezier(.34,1.56,.64,1) !important;
}
.igblog-cat-pill:hover::before  { transform: scale(1.6) !important; }
.igblog-cat-pill--active::before { transform: none !important; }
.igblog-cat-pill:active { animation: bl-pill-pulse 150ms ease !important; }
@keyframes bl-pill-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* P8. Newsletter micro-reward — scale-pop on checkmark, emerald success colour */
@keyframes ig-check-pop {
    0%   { transform: scale(0.55); }
    65%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.ig-newsletter-form button.is-success {
    background:     #0F766E !important;
    animation:      ig-check-pop 350ms cubic-bezier(.34,1.56,.64,1) forwards !important;
    pointer-events: none !important;
}
.ig-newsletter-success {
    color:       #0F766E !important;
    font-weight: 600 !important;
    font-size:   0.875rem !important;
    margin-top:  6px !important;
}

/* ── Vidstack lesson player: crimson brand, flat controls (no gradients) ──
   Video Layout reads --video-* custom props (not --media-* directly) —
   see player/styles/default/layouts/video.css: `--media-brand: var(--video-brand, #f5f5f5)` */
.video-payer media-player {
    --video-brand: #A41034;
    --video-focus-ring-color: #A41034;
    --video-font-family: Inter, system-ui, sans-serif;
    /* Big center play button (both the initial-load state and the
       compact/"sm" paused state) default to rgba(0,0,0,.6)/--media-brand
       fallback — pin both explicitly to our crimson instead. */
    --video-load-button-bg: #A41034;
    --video-sm-play-button-bg: #A41034;
}

/* Flat control-bar background — replace Vidstack's default gradient */
.video-payer .vds-video-layout .vds-controls[data-visible] {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.72);
}

/* The lesson title already renders as the page <h1> below the player —
   don't duplicate it inside the player chrome (keep NOW PLAYING / Lesson pills). */
.video-payer .vds-chapter-title {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL HUB (/legal) — light header + flat per-section cards
   ═══════════════════════════════════════════════════════════════ */

/* Mirrors .igsm-lhdr/.igblog-lhdr exactly — the site's established compact
   light-header pattern — instead of the old bespoke crimson hero band. */
/* Support page: hero is immediately followed by the Popular Topics
   section with no search bar/quicklinks between them anymore, so the
   hero's usual bottom border sat awkwardly close under the subtitle —
   drop it there and give a little extra breathing room instead. */
.igleg-lhdr:has(+ .igsp-topics-section) { border-bottom: none !important; padding-bottom: 24px !important; }

.igleg-lhdr {
    background:    #F5F1EA !important;
    padding:       14px 0 10px !important;
    border-bottom: 1px solid rgba(17,24,39,0.07) !important;
}
.igleg-lhdr__inner {
    /* Same cascading max-width as "SHARED SITE CONTAINER" above, so this
       light header's edges land on the exact same left/right line as the
       header logo and footer columns at every breakpoint, instead of a
       flat 1200px cap that drifts narrower than the body sections below
       it once the viewport passes ~1600px. */
    max-width:      100% !important;
    margin:         0 auto !important;
    padding-inline: 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
}
@media (max-width: 1199.98px) { .igleg-lhdr__inner { max-width: 960px !important; } }
@media (max-width: 991.98px) { .igleg-lhdr__inner { max-width: 720px !important; } }
@media (max-width: 767.98px) { .igleg-lhdr__inner { max-width: 100% !important; } }
@media only screen and (min-width: 576px) and (max-width: 767px) { .igleg-lhdr__inner { max-width: 540px !important; } }
.igleg-lhdr .ig-sec-hd--center { margin-bottom: 10px !important; }
.igleg-lhdr .ig-sec-underline  { display: block !important; margin-bottom: 6px !important; }
.igleg-lhdr .ig-sec-sub        { margin-bottom: 0 !important; }
.igleg-lhdr__eyebrow {
    margin-bottom:  6px !important;
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
}
.igleg-lhdr__title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size:   clamp(1.875rem, 3.4vw, 2.75rem) !important;
    font-weight: 800 !important;
    margin-top:  0 !important;
    margin-bottom: 6px !important;
}

/* Optional metadata row (Effective/Version/Applies to/Questions) — used
   by pages that need to preserve this data below the light header
   instead of the old crimson hero's dark meta strip. Harmless on pages
   that don't include it (Legal, Sitemap, etc.). */
.igleg-lhdr__meta {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    baseline;
    justify-content: center;
    gap:            10px 28px;
    margin:         14px 0 0;
    padding-top:    14px;
    border-top:     1px solid rgba(17,24,39,0.07);
    width:          100%;
}
.igleg-lhdr__meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.igleg-lhdr__meta-item dt {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          #9CA3AF;
    margin:         0;
}
.igleg-lhdr__meta-item dd {
    font-size:   13px;
    font-weight: 700;
    color:       #111827;
    margin:      0;
}
.igleg-lhdr__meta-item dd a {
    color: #A41034 !important;
    text-decoration: none !important;
}
.igleg-lhdr__meta-item dd a:hover { text-decoration: underline !important; }

.igleg-wrap {
    margin:    0 auto !important;
    padding:   40px 0 80px !important;
}

/* ── Section header: compact, left-aligned, sentence case ── */
.igleg-group        { margin-bottom: 48px !important; }
.igleg-group:last-child,
.igleg-group--last  { margin-bottom: 0 !important; }

.igleg-group-title {
    font-family:   'Fraunces', Georgia, serif !important;
    font-size:     1.5rem !important;
    font-weight:   600 !important;
    color:         #1C1514 !important;
    margin:        0 0 4px !important;
    text-align:    left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.igleg-group-sub {
    font-size:   0.9rem !important;
    color:       #6B7280 !important;
    margin:      0 0 20px !important;
    text-align:  left !important;
}

/* ── Per-section accent colors (one line each to retint) ── */
.igleg-group--learners    { --igleg-accent: #A41034; }
.igleg-group--platform    { --igleg-accent: #111827; }
.igleg-group--instructors { --igleg-accent: #0F766E; }
.igleg-group--enterprise  { --igleg-accent: #B45309; }

/* ── Grid: flexbox, 4-up, cards hug their own content (no equal-height
   stretch) so short cards don't carry dead internal whitespace ── */
.igleg-grid {
    display:     flex !important;
    flex-wrap:   wrap !important;
    align-items: flex-start !important;
    gap:         14px !important;
}

/* ── Card: 3px accent top border, no icon column, compact & content-tight ── */
.igleg-card {
    flex:            0 1 calc((100% - 3 * 14px) / 4) !important;
    min-width:       220px !important;
    box-sizing:      border-box !important;
    margin:          0 !important;
    display:         block !important;
    background:      #fff !important;
    border:          1px solid #E5E7EB !important;
    border-top:      3px solid var(--igleg-accent, #A41034) !important;
    border-radius:   10px !important;
    padding:         14px 16px !important;
    box-shadow:      0 1px 2px rgba(0,0,0,.04) !important;
    text-decoration: none !important;
    color:           inherit !important;
    transition:      transform .18s, border-color .18s, box-shadow .18s !important;
}
.igleg-card:hover {
    transform:        translateY(-2px) !important;
    border-color:     var(--igleg-accent, #A41034) !important;
    border-top-color: var(--igleg-accent, #A41034) !important;
    box-shadow:       0 8px 20px rgba(0,0,0,.08) !important;
    text-decoration:  none !important;
    color:            inherit !important;
}

.igleg-card-title {
    font-size:   0.9375rem !important;
    font-weight: 700 !important;
    color:       #1C1514 !important;
    margin:      0 0 4px !important;
    line-height: 1.25 !important;
}
.igleg-card-text {
    font-size:          0.8125rem !important;
    color:              #6B7280 !important;
    line-height:        1.45 !important;
    margin:             0 0 8px !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
}
.igleg-card-link {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         5px !important;
    font-size:   0.8125rem !important;
    font-weight: 600 !important;
    color:       var(--igleg-accent, #A41034) !important;
    margin-top:  0 !important;
}
.igleg-card-link svg {
    width:      12px !important;
    height:     12px !important;
    transition: transform .18s !important;
}
.igleg-card:hover .igleg-card-link svg {
    transform: translateX(3px) !important;
}

/* ── Contact strip: flat card, crimson top border, single row ── */
.igleg-contact {
    margin-top:  48px !important;
    padding:     20px 24px !important;
    background:  #fff !important;
    border:      1px solid #E5E7EB !important;
    border-top:  3px solid #A41034 !important;
    border-radius: 10px !important;
}
.igleg-contact p {
    margin:      0 !important;
    font-size:   0.9375rem !important;
    color:       #3D3830 !important;
    line-height: 1.6 !important;
}
.igleg-contact a {
    color:           #A41034 !important;
    font-weight:     600 !important;
    text-decoration: none !important;
}
.igleg-contact a:hover { text-decoration: underline !important; }

@media (max-width: 1100px) {
    .igleg-card { flex-basis: calc((100% - 2 * 14px) / 3) !important; }
}
@media (max-width: 900px) {
    .igleg-card { flex-basis: calc((100% - 14px) / 2) !important; }
}
@media (max-width: 991px) {
    .igleg-lhdr        { padding: 16px 0 12px !important; }
    .igleg-lhdr__inner { padding-inline: 24px !important; }
}
@media (max-width: 600px) {
    .igleg-card  { flex-basis: 100% !important; }
    .igleg-wrap  { padding: 32px 0 56px !important; }
}

/* ================================================================
   SHORTS PAGE — patch fixes
   Branch: feature/igurus-cream-theme
================================================================ */

/* Fix 6: Hide site header on mobile so .igs-bar is the only nav chrome */
@media (max-width: 679px) {
    body:has(.igs-wrap) .tg-header__area          { display: none !important; }
    body:has(.igs-wrap) .igs-wrap                 { top: 0 !important; }
}

/* .igs-search-overlay / .igs-search-close / .igs-no-results used to be
   styled here too (an older top-slide-down search banner design). That
   duplicate definition was never removed when lesson_shorts.blade.php's
   own inline <style> replaced it with the current centered-pill design —
   same class names, equal specificity, so the two fought per-property
   depending on <style>/<link> document order. Concretely: this file's
   `transform: translateY(-100%)/translateY(0)` was winning over the
   blade file's `transform: translateX(-50%)` centering offset (both set
   the same `transform` property, so only one value can win — a later
   rule doesn't merge functions from an earlier one), leaving the overlay
   pinned at `left: 50%` with no horizontal centering, so it rendered
   overflowing off the right edge on phones instead of centered. Removed
   here entirely — the blade file's version is the single source of truth
   now. See lesson_shorts.blade.php's "SEARCH OVERLAY" section. */

/* Course upsell chip — slightly different accent vs lesson chip */
.igs-chip--course {
    background: rgba(16,185,129,.12) !important;
    border-color: rgba(16,185,129,.35) !important;
    margin-top: 4px !important;
}
.igs-chip--course i:first-child { color: #10b981 !important; }

/* ═══════════════════════════════════════════════════════════════
   HERO — lands exactly within one viewport on load (no scroll to
   see the whole thing), while keeping both columns balanced: the
   copy is vertically centered and the visual stretches to match,
   instead of the visual overflowing far past a short copy block.
   Source-order last → wins over custom.css L10800-10944.
   ═══════════════════════════════════════════════════════════════ */
.ig-hero.ig-hero--cream > .ig-wrap {
    padding-block: 32px 36px !important;
}
.ig-hero .ig-hero__eyebrow { margin-bottom: 22px !important; }
.ig-hero p.ig-hero__sub,
.ig-hero .ig-hero__sub { margin-top: 22px !important; }
.ig-hero-search-modern { margin-top: 32px !important; }
.ig-popular-tags       { margin-top: 20px !important; }
.ig-hero .ig-hero__cta { margin-top: 32px !important; }
.ig-hero .ig-hero__trust-strip {
    margin-top:  32px !important;
    padding-top: 18px !important;
}
@media (min-width: 992px) {
    .ig-hero.ig-hero--cream {
        height:      calc(100vh - var(--header-h, 70px)) !important;
        align-items: stretch !important;
        overflow:    hidden !important;
    }
    /* Small top clearance so the photo never sits flush against the
       frosted-glass header for its backdrop-blur to pick up the
       photo's colours — that produced a hazy pastel band under the header. */
    .ig-hero.ig-hero--cream > .ig-wrap {
        height:              100% !important;
        align-items:         stretch !important;
        grid-template-rows:  1fr !important;
        padding-top:         6px !important;
    }
    /* Vertically center the copy against the full-height photo — a
       top-aligned copy left a large empty gap under the (much shorter)
       text block while the photo kept going all the way down, which
       read as unbalanced. Centering distributes that leftover space
       evenly above and below instead of dumping it all at the bottom. */
    .ig-hero .ig-hero__copy   { height: 100% !important; justify-content: center !important; }
    .ig-hero .ig-hero__visual { height: 100% !important; min-height: 420px !important; }
    /* Inset the photo itself (not the column) on all sides, shrinking
       width/height together so the crop stays close to the original —
       a width-only shrink cropped more off the subject. That gives the
       shadow room to show without cutting off part of the photo. */
    .ig-hero .ig-hero__img {
        width:  calc(100% - 48px) !important;
        height: calc(100% - 64px) !important;
        margin-top: 24px !important;
    }
}
/* Real site numbers — students / instructors / courses, in a self-contained
   card that pops off the cream page background (replaces the placeholder
   brand-logo row, which only had gray dummy demo images with no real logos
   behind them, and the earlier plain-text row it briefly became). */
.ig-hero__stat-proof {
    display:       flex !important;
    align-items:   center !important;
    gap:           0 !important;
    margin-top:    32px !important;
    padding:       18px 22px !important;
    background:    #FFFFFF !important;
    border:        1px solid rgba(17,24,39,0.07) !important;
    border-radius: 16px !important;
    box-shadow:    0 10px 28px rgba(17,24,39,.07), 0 2px 8px rgba(17,24,39,.04) !important;
}
.ig-hero-divider {
    display:     block !important;
    width:       1px !important;
    height:      36px !important;
    background:  rgba(17,24,39,0.10) !important;
    flex-shrink: 0 !important;
    margin:      0 22px !important;
}
.ig-stat-proof {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    flex:        1 1 0 !important;
    min-width:   0 !important;
}
.ig-stat-proof__ico {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           40px !important;
    height:          40px !important;
    border-radius:   50% !important;
    background:      rgba(164,16,52,0.08) !important;
    color:           #A41034 !important;
    flex-shrink:     0 !important;
}
.ig-stat-proof__ico svg { width: 19px !important; height: 19px !important; }
.ig-stat-proof__body {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1px !important;
    min-width:      0 !important;
}
.ig-stat-proof__num {
    font-size:   1.375rem !important;
    font-weight: 800 !important;
    color:       #1C1514 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}
.ig-stat-proof__label {
    font-size:      .75rem !important;
    font-weight:    600 !important;
    color:          #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    white-space:    nowrap !important;
}
@media (max-width: 420px) {
    .ig-hero__stat-proof { padding: 14px 16px !important; }
    .ig-hero-divider { margin: 0 12px !important; }
    .ig-stat-proof__ico { width: 34px !important; height: 34px !important; }
    .ig-stat-proof__num { font-size: 1.1rem !important; }
}
/* ── Qualitative hero badges (replaces raw stat counters) ── */
.ig-hero__qual-badges {
    display:     flex !important;
    flex-wrap:   wrap !important;
    gap:         10px !important;
    margin-top:  24px !important;
}
.ig-qual-badge {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             7px !important;
    padding:         7px 14px !important;
    border-radius:   100px !important;
    background:      rgba(164,16,52,.08) !important;
    border:          1px solid rgba(164,16,52,.18) !important;
    color:           #A41034 !important;
    font-size:       0.8125rem !important;
    font-weight:     600 !important;
    letter-spacing:  0.01em !important;
    white-space:     nowrap !important;
}
.ig-qual-badge svg {
    width:  15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

/* Match the soft shadow already used on the left-side search bar —
   layered with a wider ambient pass since the photo is much bigger,
   so a shadow this subtle on its own would get lost entirely. */
.ig-hero .ig-hero__img {
    box-shadow: 0 24px 56px rgba(17,24,39,.18), 0 4px 20px rgba(17,24,39,.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — center the nav links in the middle of the bar instead
   of hugging the logo. Absolute + translate centers it against the
   header's true width regardless of how wide the logo / actions
   groups are (justify-content:space-between can't guarantee that
   since it depends on those two groups being equal width).
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    /* Position against .tg-header__area (the full-viewport-width bar
       itself), not .tgmenu__nav — nesting inside Bootstrap's .container/
       .row/.col-12 can leave that inner element off-center from the
       true page middle, which showed up as the nav sitting ~85px left
       of viewport center. .tg-header__area spans edge-to-edge (its own
       10vw padding is inside its box), so 50% of it = 50% of the page. */
    .tg-header__area { position: relative !important; }
    .ig-header-nav {
        position:  absolute !important;
        left:      50% !important;
        top:       50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHORTS PAGE — persistent header search bar (YouTube Shorts style).
   Markup always renders (header.blade.php) but stays hidden on every
   other page; only the shorts page's body:has(.igs-wrap) hook reveals
   it, sitting in the same centered slot the nav links use elsewhere.
   ═══════════════════════════════════════════════════════════════ */
.ig-shorts-searchbar { display: none; }
@media (min-width: 1200px) {
    body:has(.igs-wrap) .ig-shorts-searchbar {
        display:       flex;
        align-items:   center;
        gap:           10px;
        position:      absolute;
        left:          50%;
        top:           50%;
        transform:     translate(-50%, -50%);
        width:         100%;
        max-width:     480px;
        background:    #f5f5f5;
        border:        1px solid #e5e5e5;
        border-radius: 24px;
        padding:       8px 18px;
    }
    body:has(.igs-wrap) .ig-shorts-searchbar__icon {
        color: #606060;
        font-size: 14px;
        flex-shrink: 0;
    }
    body:has(.igs-wrap) .ig-shorts-searchbar input {
        flex:        1;
        border:      none;
        background:  transparent;
        outline:     none;
        font-size:   14px;
        color:       #0f0f0f;
        font-family: inherit;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — content-audit rebuild (ctp-* classes)
   Per approved content audit: flat fills only (no gradients, no dot/
   texture backgrounds), crimson #A41034 / hover #D91247, headings
   #111827 in the system heading stack (no serif on this page), amber
   forbidden except star ratings, inline SVG icons only.
   contact-redesign.css (loaded after this file) owns the rest of the
   page (map/form/ways-to-reach/CTA shell) — these ctp-* classes are
   new and don't collide with it, so no specificity fights needed
   except the two shared-component overrides noted below.
   ═══════════════════════════════════════════════════════════════ */

/* ── C1. Hero — override the shared .igleg-lhdr__title's serif face
   (also used un-changed by Legal/Sitemap) with two classes so this
   page-scoped rule (0,2,0) wins over the shared one (0,1,0) regardless
   of stylesheet order. ── */
.igleg-lhdr__title.ctp-hero__title {
    font-family: 'Outfit', system-ui, sans-serif !important;
    color:       #111827 !important;
}

/* ── C3. Left panel — "Get in touch" heading (shared .ct-hq-title is
   contact-page-scoped already, so a plain descendant override is
   enough here; kept as two classes anyway for a consistent pattern
   with C1 above). ── */
.ct-hq-title.ctp-panel-title {
    font-family: 'Outfit', system-ui, sans-serif !important;
    color:       #111827 !important;
}

/* No more single big outer box (.ct-hq-card) tying both columns
   together — each side now sits directly on the page background, with
   "Get in touch" as its own card and Response Times as a loose column
   of its own already-individual colored cards. */
.ctp-panels-grid {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 32px;
    align-items: start;
}
.ctp-touch-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 22px 22px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%; /* match the form card's stretched column height */
    box-sizing: border-box;
}
/* Compact the card's internal rhythm so it doesn't dwarf the form,
   and pin "Follow us" to the bottom so any leftover height (when the
   form is taller) reads as one deliberate gap instead of the card
   just trailing off shorter than its neighbour. */
.ctp-touch-card .ct-hq-title { margin-bottom: 4px !important; }
.ctp-touch-card .ctp-address-pending { margin-bottom: 14px !important; font-size: 13px; }
.ctp-touch-card .ct-hq-note { font-size: 12.5px; margin: 10px 0 0; }
.ctp-touch-card .ct-hq-social { margin-top: auto; padding-top: 14px; border-top: 1px solid #F0EDE8; }
.ctp-times-col { min-width: 0; }
@media (max-width: 900px) {
    .ctp-panels-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* Only one panel left in this grid (Response Times) — Get in touch
   moved down to sit beside the contact form instead. */
.ctp-panels-grid--single { grid-template-columns: 1fr; }

/* Address placeholder — visibly incomplete, not a fake specific city */
.ctp-address-pending {
    color: #9CA3AF !important;
    font-style: italic;
}
.ctp-address-pending svg { flex-shrink: 0; color: #9CA3AF; }

/* Mail rows — colored cards (one accent per category, matching the
   Response Times grid) instead of plain inline rows */
.ctp-mail-rows { gap: 7px; }
.ctp-mail-row {
    align-items: center;
    padding: 8px 12px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background .15s, border-color .15s, transform .15s;
}
.ctp-mail-row:hover { transform: translateY(-1px); }
.ctp-mail-ico svg { width: 14px; height: 14px; }

.ctp-mail-row--red {
    background: rgba(164,16,52,.06);
    border-color: rgba(164,16,52,.14);
}
.ctp-mail-row--red .ctp-mail-ico { background: rgba(164,16,52,.10) !important; color: #A41034 !important; }

.ctp-mail-row--amber {
    background: rgba(180,83,9,.06);
    border-color: rgba(180,83,9,.14);
}
.ctp-mail-row--amber .ctp-mail-ico { background: rgba(180,83,9,.10) !important; color: #B45309 !important; }

.ctp-mail-row--green {
    background: rgba(5,150,105,.06);
    border-color: rgba(5,150,105,.14);
}
.ctp-mail-row--green .ctp-mail-ico { background: rgba(5,150,105,.10) !important; color: #059669 !important; }

.ctp-mail-row--blue {
    background: rgba(29,78,216,.06);
    border-color: rgba(29,78,216,.14);
}
.ctp-mail-row--blue .ctp-mail-ico { background: rgba(29,78,216,.10) !important; color: #1D4ED8 !important; }

.ctp-mail-row--purple {
    background: rgba(164,16,52,.06);
    border-color: rgba(164,16,52,.14);
}
.ctp-mail-row--purple .ctp-mail-ico { background: rgba(164,16,52,.10) !important; color: #A41034 !important; }
.ctp-mail-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}
.ctp-mail-text strong {
    font-size: 13px; font-weight: 600; color: #111827;
}
.ctp-mail-text span {
    font-size: 12.5px; color: #6B7280;
}
a.ctp-mail-row:hover .ctp-mail-text strong,
a.ctp-mail-row:hover .ctp-mail-text span {
    color: #D91247;
}

/* Social icons — flat SVG, crimson hover (already matches design
   system; just confirming the SVG sizes cleanly inside the button) */
.ctp-soc-btn svg { flex-shrink: 0; }

/* ── C4. Response times — single horizontal row of 4 cards (was a
   stacked column of full-width strips, before that a 2×2 grid).
   Colored top border + a tinted pill in the same color (overriding
   the shared crimson-only .ct-hq-badge for each variant). ── */
.ctp-times-col .ct-hq-times {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
}
.ctp-time-row {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 18px 16px !important;
    gap: 10px !important;
    min-width: 0;
}
.ctp-time-row span:first-child { font-size: 14px !important; font-weight: 600; }
.ctp-time-row::before {
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 3px !important;
}
.ctp-time-row--red::before    { background: #A41034 !important; }
.ctp-time-row--amber::before  { background: #B45309 !important; }
.ctp-time-row--green::before  { background: #059669 !important; }
.ctp-time-row--blue::before   { background: #1D4ED8 !important; }

/* Center the "Response Times" label over its card row, matching the
   centered hero above it instead of sitting flush left. */
.ctp-times-col .ct-hq-section-label { text-align: center; }

.ctp-time-row--red .ct-hq-badge {
    background: rgba(164,16,52,.10) !important;
    border-color: rgba(164,16,52,.18) !important;
    color: #A41034 !important;
}
.ctp-time-row--amber .ct-hq-badge {
    background: rgba(180,83,9,.10) !important;
    border-color: rgba(180,83,9,.18) !important;
    color: #B45309 !important;
}
.ctp-time-row--green .ct-hq-badge {
    background: rgba(5,150,105,.10) !important;
    border-color: rgba(5,150,105,.18) !important;
    color: #059669 !important;
}
.ctp-time-row--blue .ct-hq-badge {
    background: rgba(29,78,216,.10) !important;
    border-color: rgba(29,78,216,.18) !important;
    color: #1D4ED8 !important;
}
@media (max-width: 700px) {
    .ctp-times-col .ct-hq-times { flex-wrap: wrap !important; }
    .ctp-time-row { flex: 1 1 calc(50% - 5px) !important; }
}

/* ── C5. "Quick Answers" deflection cards — restyled after the iDharma
   reference: eyebrow + heading + subtitle above an un-boxed card grid
   sitting directly on the page background, instead of everything
   packed into one bordered white card. Cards keep the colored-top-
   border language shared with the Response Times cards above them. ── */
.ctp-info-strip { padding: 32px 0 40px; background: #F5F1EA; }
.ctp-info-header { max-width: 640px; margin: 0 auto 22px; text-align: center; }
.ctp-info-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B45309;
    margin: 0 0 8px;
}
.ctp-info-title {
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}
.ctp-info-sub {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

.ctp-deflect__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ctp-deflect__card {
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px 20px 18px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ctp-deflect__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.ctp-deflect__card--red::before    { background: #A41034; }
.ctp-deflect__card--amber::before  { background: #B45309; }
.ctp-deflect__card--green::before  { background: #059669; }
.ctp-deflect__card--blue::before   { background: #1D4ED8; }
.ctp-deflect__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17,24,39,.08);
}
.ctp-deflect__card--red:hover   { border-color: rgba(164,16,52,.35); }
.ctp-deflect__card--amber:hover { border-color: rgba(180,83,9,.35); }
.ctp-deflect__card--green:hover { border-color: rgba(5,150,105,.35); }
.ctp-deflect__card--blue:hover  { border-color: rgba(29,78,216,.35); }
.ctp-deflect__card h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 5px;
}
.ctp-deflect__card p {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.45;
    margin: 0;
}
@media (max-width: 900px) {
    .ctp-deflect__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ctp-deflect__cards { grid-template-columns: 1fr; }
}

.ctp-grievance__title {
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 4px !important;
}
.ctp-grievance__body {
    font-size: 12.5px;
    color: #374151;
    line-height: 1.55;
    margin: 0;
}
.ctp-grievance__body a {
    color: #A41034;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ctp-grievance__body a:hover { color: #D91247; }
.ctp-grievance__footnote {
    font-size: 11px;
    color: #9CA3AF;
}

/* ── C7. Bottom CTA — flattened per the "no gradients / no dot
   textures" rule (this card previously carried both). Higher
   specificity than contact-redesign.css's own !important rules so it
   wins regardless of stylesheet order. ── */
.ctp-cta-flat .ct-cta-strip__card {
    background: #FDF6F7 !important;
    border: 1px solid rgba(164,16,52,.14);
    box-shadow: none;
}
.ctp-cta-flat .ct-cta-strip__dots { display: none !important; }
.ctp-cta-flat .ct-cta-strip__title { color: #111827 !important; }
.ctp-cta-flat .ct-cta-strip__title span { color: #A41034; }
.ctp-cta-flat .ct-cta-strip__sub { color: rgba(28,21,20,.65) !important; }

/* ═══════════════════════════════════════════════════════════════
   NIGHT WIND-DOWN — wellbeing feature (Tier 1 + Tier 2)
   Flat fills only, no gradients. Crimson #A41034 accents.
   This is a wellness nudge, not an engagement mechanic: both actions
   in the overlay are the same size and equally easy to reach.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tier 2: full-screen wind-down overlay ── */
.ig-wb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 24, 39, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ig-wb-overlay[hidden] { display: none; }

.ig-wb-card {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.ig-wb-title {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.ig-wb-body {
    color: #4B5563;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 28px;
}

.ig-wb-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Both buttons share the exact same footprint — no visual hierarchy
   trick to make "keep watching" harder to notice or reach. */
.ig-wb-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ig-wb-btn--primary {
    background: #A41034;
    color: #FFFFFF;
}
.ig-wb-btn--primary:hover { background: #D91247; }

.ig-wb-btn--ghost {
    background: transparent;
    color: #111827;
    border-color: #E5E7EB;
}
.ig-wb-btn--ghost:hover { background: #F5F1EA; border-color: #A41034; color: #A41034; }

/* ── Tier 2: "resume where you left off" pill (Shorts only) ── */
.ig-wb-resume {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid rgba(164,16,52,.18);
    border-radius: 999px;
    padding: 8px 10px 8px 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.ig-wb-resume[hidden] { display: none; }
.ig-wb-resume__text {
    font-size: .8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}
.ig-wb-resume__go {
    background: #A41034;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: .8125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ig-wb-resume__go:hover { background: #D91247; }
.ig-wb-resume__close {
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 1.1rem;
    line-height: 1;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-wb-resume__close:hover { color: #111827; }

/* ── Tier 1 (dormant): "resting" full-page card ── */
.ig-wb-rest {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}
.ig-wb-rest__card {
    max-width: 420px;
    text-align: center;
}
.ig-wb-rest__icon {
    width: 56px;
    height: 56px;
    color: #A41034;
    margin: 0 auto 20px;
    display: block;
}
.ig-wb-rest__title {
    color: #111827;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.ig-wb-rest__body {
    color: #4B5563;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 28px;
}
.ig-wb-rest__cta {
    display: inline-block;
    background: #A41034;
    color: #FFFFFF;
    font-weight: 700;
    font-size: .95rem;
    padding: 14px 32px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .18s ease;
}
.ig-wb-rest__cta:hover { background: #D91247; color: #FFFFFF; }

@media (max-width: 575px) {
    .ig-wb-card { padding: 28px 22px; }
    .ig-wb-resume { top: 8px; padding: 6px 8px 6px 14px; }
    .ig-wb-resume__text { display: none; } /* keep the pill compact on small phones — Resume + close still reachable */
}

/* ── Settings page: "Night wind-down reminders" toggle row ── */
.ig-wb-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #EDE7DD;
    border-radius: 14px;
    background: #FBF9F5;
    cursor: pointer;
    margin-bottom: 20px;
}
.ig-wb-toggle-copy { display: flex; flex-direction: column; gap: 4px; }
.ig-wb-toggle-title { font-weight: 700; color: #111827; font-size: .95rem; }
.ig-wb-toggle-sub { font-size: .8125rem; color: #6B7280; line-height: 1.5; max-width: 480px; }

.ig-wb-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.ig-wb-switch input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1;
}
.ig-wb-switch__track {
    position: absolute; inset: 0;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background .18s ease;
}
.ig-wb-switch__track::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform .18s ease;
}
.ig-wb-switch input:checked ~ .ig-wb-switch__track { background: #A41034; }
.ig-wb-switch input:checked ~ .ig-wb-switch__track::before { transform: translateX(20px); }

/* ═══════════════════════════════════════════════════════════════
   HOME — Featured Programs cards, compacted
   Scoped to .ig-courses-section so the courses library / category
   pages keep the roomier .igc card size — only the homepage grid
   shrinks.
   ═══════════════════════════════════════════════════════════════ */
.ig-courses-section .ig-course-grid-3 { gap: 18px !important; }
.ig-courses-section .igc__media { aspect-ratio: 16/9 !important; }
.ig-courses-section .igc__body { padding: 16px 18px 18px !important; }
.ig-courses-section .igc__title {
    font-size:     0.95rem !important;
    line-height:   1.35 !important;
    margin-bottom: 8px !important;
    min-height:    calc(0.95rem * 1.35 * 2) !important;
}
.ig-courses-section .igc__instr { gap: 6px !important; }
.ig-courses-section .igc__instr img,
.ig-courses-section .igc__instr-avatar { width: 24px !important; height: 24px !important; }
.ig-courses-section .igc__instr-name { font-size: 12px !important; }
.ig-courses-section .igc__divider { margin-bottom: 10px !important; }
.ig-courses-section .igc__price { font-size: 0.9rem !important; }

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR STAT-CARD ICON CHIPS — canonical role palette
   White card, 1px solid #E5E7EB, no colored borders/top strips.
   Color lives only in a solid rounded-square icon chip (~40px)
   with a white icon. Numbers stay #111827, labels stay #6B7280.

   Crimson #A41034 = primary metric    (Total Questions, Total Announcements)
   Amber   #B45309 = attention/pending (Unread)
   Blue    #1D4ED8 = content           (Courses, Courses Covered)
   Green   #047857 = media/success     (Klips, Sent This Month, Since Last Sent)
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR DASHBOARD — TIPS / INSIGHTS SECTION
   Shared across all instructor pages to fill empty space.
   Namespace: .idash-tips
   Palette: maroon #A41034 · cream #FDF9F2 · gold #C9982E · ink #1C1514
══════════════════════════════════════════════════════════════ */
.idash-tips {
    margin-top: 22px;
    font-family: 'Inter', sans-serif;
}
.idash-tips__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.idash-tips__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #1C1514;
    margin: 0;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.idash-tips__title i {
    font-size: 13px;
    color: #C9982E;
    flex-shrink: 0;
}
/* 3-column tip cards */
.idash-tips__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.idash-tips__card {
    background: #fff;
    border: 1px solid #FFFFFF;
    border-top: 3px solid var(--tip-chip, #A41034);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.idash-tips__card:hover {
    box-shadow: 0 8px 24px rgba(28,20,16,.08);
    transform: translateY(-2px);
}
.idash-tips__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--tip-chip, #A41034);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 13px;
}
.idash-tips__card-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #1C1514;
    margin-bottom: 6px;
    line-height: 1.3;
}
.idash-tips__card-body {
    font-size: 12.5px;
    color: #6B5D54;
    line-height: 1.65;
    margin: 0;
}
/* Quick-action link row */
.idash-tips__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.idash-tips__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid #FFFFFF;
    color: #3A2E28;
    background: #fff;
    transition: border-color .15s, color .15s, background .15s;
}
.idash-tips__action-btn:hover {
    border-color: #A41034;
    color: #A41034;
    background: rgba(164,16,52,.04);
    text-decoration: none;
}
.idash-tips__action-btn i { font-size: 11px; }
.idash-tips__action-btn--primary {
    background: #A41034;
    color: #FDF9F2;
    border-color: #A41034;
}
.idash-tips__action-btn--primary:hover {
    background: #7A0D27;
    border-color: #7A0D27;
    color: #FDF9F2;
}
/* Divider label */
.idash-tips__sep {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #A89A8E;
    margin-bottom: 14px;
}
.idash-tips__sep::before,
.idash-tips__sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #FFFFFF;
}
@media (max-width: 900px) {
    .idash-tips__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .idash-tips__grid { grid-template-columns: 1fr; }
    .idash-tips__action-btn { flex: 1; justify-content: center; }
}
.ig-courses-section .igc__price--free { padding: 2px 9px !important; font-size: 12px !important; }
.ig-courses-section .igc__btn { padding: 6px 11px !important; font-size: 11.5px !important; }

/* ═══════════════════════════════════════════════════════════════
   HOME — Featured Programs: split header (copy left / CTA+nav
   right, one aligned row) instead of a centered block stacked
   above a separately-aligned action row. Category tabs removed;
   cards are a Swiper carousel instead of a static 4-up grid.
   ═══════════════════════════════════════════════════════════════ */
.ig-fp-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             32px;
    margin-bottom:   36px;
}
.ig-fp-header__text { max-width: 620px; }
.ig-fp-header__text .ig-sec-title     { white-space: nowrap !important; }
.ig-fp-header__text .ig-sec-underline { margin: 14px 0 0 !important; }
.ig-fp-header__text .ig-sec-sub       { text-align: left !important; margin-top: 12px !important; white-space: nowrap !important; }
@media (max-width: 900px) {
    .ig-fp-header__text .ig-sec-title { white-space: normal !important; }
    .ig-fp-header__text .ig-sec-sub   { white-space: normal !important; }
}
.ig-fp-header__actions {
    display:       flex;
    align-items:   center;
    gap:           16px;
    flex-shrink:   0;
    padding-bottom: 4px;
}
.ig-courses-nav { display: flex; gap: 8px; flex-shrink: 0; }
.ig-courses-nav-btn {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1px solid rgba(17,24,39,.14);
    background:      #FFFFFF;
    color:           #1C1514;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    cursor:          pointer;
    transition:      background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ig-courses-nav-btn:hover { background: #A41034; border-color: #A41034; color: #FFFFFF; }
.ig-courses-nav-btn.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

@media (max-width: 900px) {
    .ig-fp-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            20px;
    }
    .ig-fp-header__actions { align-self: stretch; justify-content: space-between; }
}

.ig-courses-swiper { overflow: hidden; padding: 4px 4px 26px; margin: 0 -4px; }
.ig-courses-swiper .swiper-slide { height: auto; display: flex; }
.ig-courses-swiper .swiper-slide .igc { width: 100%; }

@media (max-width: 767px) {
    .ig-courses-hd-cta { justify-content: center; flex-wrap: wrap; margin-top: 20px; }
}

/* Popular Blogs (homepage) — blend into the cream body background
   instead of the white block the shared .ig-home-blogs component
   uses lower on the page, so it flows seamlessly with Featured
   Programs right above it. */
.ig-home-blogs.ig-home-blogs--popular {
    background: transparent !important;
}

/* Popular Blogs — swiper carousel (mirrors .ig-courses-swiper above it) */
.ig-pblogs-swiper { overflow: hidden; padding: 4px 4px 26px; margin: 0 -4px; }
.ig-pblogs-swiper .swiper-slide { height: auto; display: flex; }
.ig-pblogs-swiper .swiper-slide .ig-home-blog-card { width: 100%; }

/* ig-home-blog-card carried leftover purple/violet/blue accents from
   an earlier theme pass (custom.css L5562-5613) that never migrated
   to the maroon system the rest of the site now uses — fixing here,
   site-wide, since this card is shared by every "*-blog-area" section. */
.ig-home-blog-card {
    border-radius: 20px !important;
    border-color:  rgba(17,24,39,0.06) !important;
}
.ig-home-blog-card:hover {
    box-shadow: 0 14px 40px rgba(164,16,52,.13) !important;
}
.ig-home-blog-card__tag {
    background: #A41034 !important;
}
.ig-home-blog-card__title {
    color: #111827 !important;
}
.ig-home-blog-card__cta:hover {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME — Fields of Study cards, compacted (was a tall 296px-min-height
   card with lots of dead space between the meta line and footer).
   ═══════════════════════════════════════════════════════════════ */
.igcat__grid { gap: 16px !important; }
.igcat__card {
    padding:       36px 18px 18px !important;
    min-height:    0 !important;
    border-radius: 14px !important;
}
/* Badge floats over the card (absolute) instead of taking its own row,
   so the one card with a "Most Popular"/"New" badge doesn't end up
   taller than the rest — every card stays the same compact height. */
.igcat__badge {
    position:  absolute !important;
    top:       12px !important;
    right:     12px !important;
    padding:   3px 9px !important;
    font-size: 9.5px !important;
}
.igcat__card { position: relative !important; }

/* Row layout — icon, name+meta, and the arrow all sit on one line
   instead of stacking vertically with a separate footer below. */
.igcat__row {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
}
.igcat__icon-wrap {
    width:       40px !important;
    height:      40px !important;
    margin:      0 !important;
    flex-shrink: 0 !important;
}
.igcat__icon {
    width:         40px !important;
    height:        40px !important;
    border-radius: 11px !important;
}
.igcat__icon img,
.igcat__icon svg { width: 18px !important; height: 18px !important; }
.igcat__info { flex: 1 !important; min-width: 0 !important; }
.igcat__name {
    font-size:     0.92rem !important;
    margin-bottom: 4px !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
}
.igcat__meta {
    font-size:   0.74rem !important;
    gap:         6px !important;
    flex-wrap:   nowrap !important;
    white-space: nowrap !important;
}
/* Arrow removed — the whole card is already the link. Un-stretch the
   grid/card too: an earlier rule (O1/O2 above) forced align-items:
   stretch + height:100%, so every card matched the tallest sibling
   (the one with a badge), leaving visible dead space in the rest. */
.igcat__grid { align-items: start !important; }
.igcat__card { height: auto !important; }

/* ═══════════════════════════════════════════════════════════════
   HOME — Testimonials redesigned as a 3-up Swiper carousel (was a
   single centered slide capped at max-width:840px — full width but
   only one lonely card looked worse than filling it properly).
   Same .ig-fp-header split layout as the sections above it.
   ═══════════════════════════════════════════════════════════════ */
.ig-testi-swiper { overflow: hidden; padding: 4px 4px 8px; margin: 0 -4px; }
.ig-testi-swiper .swiper-slide { height: auto; display: flex; padding: 4px; }
.ig-testi-swiper .ig-testi-inner-card {
    width:          100% !important;
    display:        flex !important;
    flex-direction: column !important;
}
.ig-testi-swiper .ig-testi-quote { flex: 1 !important; }
.ig-testi-swiper .ig-testi-author { margin-top: 22px !important; }

/* ═══════════════════════════════════════════════════════════════
   HOME — SECTION SPACING REDUCTION
   All home sections were 80–96px top+bottom → ~176px visible gap.
   Reduced to 48px to tighten the page rhythm.
   ═══════════════════════════════════════════════════════════════ */
.ig-courses-section   { padding-block: 48px !important; }
.ig-home-blogs        { padding: 48px 0 !important; }
.igcat                { padding-top: 48px !important; padding-bottom: 48px !important; }
.igw__wrap            { padding-top: 48px !important; padding-bottom: 48px !important; }
.igw                  { padding-top: 0 !important; padding-bottom: 0 !important; }
.ig-testi-section     { padding-block: 48px !important; }
.ig2-inst-section     { padding-block: 48px !important; }

@media (max-width: 991px) {
    .ig-courses-section { padding-block: 36px !important; }
    .ig-home-blogs      { padding: 36px 0 !important; }
    .igcat              { padding-top: 36px !important; padding-bottom: 36px !important; }
    .igw__wrap          { padding-top: 36px !important; padding-bottom: 36px !important; }
    .ig-testi-section   { padding-block: 36px !important; }
}

@media (max-width: 575px) {
    .ig-courses-section { padding-block: 28px !important; }
    .ig-home-blogs      { padding: 28px 0 !important; }
    .igcat              { padding-top: 28px !important; padding-bottom: 28px !important; }
    .igw__wrap          { padding-top: 28px !important; padding-bottom: 28px !important; }
    .ig-testi-section   { padding-block: 28px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   IG-PAGE-SEARCH — Autocomplete search bar for content pages
   ═══════════════════════════════════════════════════════════════ */
.ig-pgsearch {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 24px auto 0;
}
.ig-pgsearch__wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(158,27,50,.18);
    border-radius: 10px;
    padding: 0 14px;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(28,23,20,.07);
    transition: border-color .18s, box-shadow .18s;
}
.ig-pgsearch__wrap:focus-within {
    border-color: #9E1B32;
    box-shadow: 0 2px 18px rgba(158,27,50,.13);
}
.ig-pgsearch__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #9E1B32;
    opacity: .7;
}
.ig-pgsearch__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
    color: #1C1714;
    padding: 13px 0;
    font-family: inherit;
}
.ig-pgsearch__input::placeholder { color: #9CA3AF; }
.ig-pgsearch__clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: none; /* hidden by default — JS removes [hidden] attr to show */
    align-items: center;
    transition: color .15s;
}
/* Visible only after JS removes the [hidden] attribute (user typed something) */
.ig-pgsearch__clear:not([hidden]) { display: flex; }
.ig-pgsearch__clear:hover { color: #9E1B32; }

/* Dropdown */
.ig-pgsearch__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid rgba(158,27,50,.15);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(28,23,20,.12);
    list-style: none;
    margin: 0; padding: 6px 0;
    z-index: 900;
    max-height: 340px;
    overflow-y: auto;
}
.ig-pgsearch__dropdown[hidden] { display: none; }
.ig-pgsearch__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
}
.ig-pgsearch__item:hover,
.ig-pgsearch__item[aria-selected="true"] {
    background: rgba(158,27,50,.06);
}
.ig-pgsearch__item-text {
    font-size: .88rem;
    color: #1C1714;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ig-pgsearch__item-text::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9E1B32;
    flex-shrink: 0;
}
.ig-pgsearch__item-cat {
    font-size: .75rem;
    color: #9CA3AF;
    white-space: nowrap;
    flex-shrink: 0;
}
.ig-pgsearch__no-results {
    padding: 12px 16px;
    font-size: .87rem;
    color: #9CA3AF;
    text-align: center;
}

/* Dark hero variant — used when hero bg is crimson */
.igaf-lhdr--dark .ig-pgsearch__wrap {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    box-shadow: none;
}
.igaf-lhdr--dark .ig-pgsearch__wrap:focus-within {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.5);
}
.igaf-lhdr--dark .ig-pgsearch__input { color: #fff; }
.igaf-lhdr--dark .ig-pgsearch__input::placeholder { color: rgba(255,255,255,.55); }
.igaf-lhdr--dark .ig-pgsearch__icon { color: #fff; opacity: .8; }

@media (max-width: 575px) {
    .ig-pgsearch { max-width: 100%; }
    .ig-pgsearch__item-cat { display: none; }
}

/* Scroll-to highlight flash */
@keyframes ig-pgsearch-flash {
    0%   { outline: 3px solid rgba(158,27,50,.55); outline-offset: 4px; }
    70%  { outline: 3px solid rgba(158,27,50,.55); outline-offset: 4px; }
    100% { outline: 3px solid rgba(158,27,50,0);   outline-offset: 8px; }
}
.ig-pgsearch--highlight {
    animation: ig-pgsearch-flash 1.8s ease forwards;
    border-radius: 4px;
}

/* ============================================================
   tc-legal-banner — T&C §13 contact callout
   ============================================================ */
.tc-legal-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--cr-t, #fbe9ec);
    border: 1.5px solid rgba(158, 27, 50, .18);
    border-radius: 14px;
}
.tc-legal-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid rgba(158, 27, 50, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cr, #9e1b32);
}
.tc-legal-banner__body {
    flex: 1;
    min-width: 0;
}
.tc-legal-banner__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cr, #9e1b32);
    margin: 0 0 3px;
}
.tc-legal-banner__desc {
    font-size: 0.88rem;
    color: var(--ink, #1c1714);
    margin: 0;
    line-height: 1.5;
}
.tc-legal-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: var(--cr, #9e1b32);
    color: #fff;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.tc-legal-banner__btn:hover { background: #7e1528; color: #fff; text-decoration: none; }

@media (max-width: 600px) {
    .tc-legal-banner { flex-wrap: wrap; }
    .tc-legal-banner__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   ig-contact-modal — mailto: link intercept form
   ============================================================ */
.ig-cm-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 23, 20, .55);
    z-index: 9998;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ig-cm-backdrop--visible { display: block; }

.ig-cm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}
.ig-cm-modal--visible {
    display: flex;
    pointer-events: auto;
}

.ig-cm-inner {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e3e0);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(28, 23, 20, .18);
    width: 100%;
    max-width: 500px;
    padding: 32px;
    position: relative;
    animation: ig-cm-slide-in .22s cubic-bezier(.22,1,.36,1) both;
}

@keyframes ig-cm-slide-in {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.ig-cm-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: var(--muted-bg, #f5f3f0);
    color: var(--muted, #6b7280);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.ig-cm-close:hover { background: var(--cr-t, #fbe9ec); color: var(--cr, #9e1b32); }

.ig-cm-header {
    text-align: center;
    margin-bottom: 24px;
}
.ig-cm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--cr-t, #fbe9ec);
    color: var(--cr, #9e1b32);
    font-size: 20px;
    margin-bottom: 12px;
}
.ig-cm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink, #1c1714);
    margin: 0 0 4px;
}
.ig-cm-to {
    font-size: 0.82rem;
    color: var(--muted, #6b7280);
    margin: 0;
}

.ig-cm-field {
    margin-bottom: 14px;
}
.ig-cm-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink, #1c1714);
    margin-bottom: 5px;
}
.ig-cm-req { color: var(--cr, #9e1b32); }
.ig-cm-field input,
.ig-cm-field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border, #e5e3e0);
    border-radius: 9px;
    background: var(--surface, #faf8f5);
    color: var(--ink, #1c1714);
    font-size: 0.92rem;
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}
.ig-cm-field input:focus,
.ig-cm-field textarea:focus {
    outline: none;
    border-color: var(--cr, #9e1b32);
    box-shadow: 0 0 0 3px var(--cr-t, #fbe9ec);
}

.ig-cm-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.ig-cm-error[hidden] { display: none; }

.ig-cm-submit {
    width: 100%;
    padding: 12px;
    background: var(--cr, #9e1b32);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.ig-cm-submit:hover:not(:disabled) { background: #7e1528; }
.ig-cm-submit:disabled { opacity: .6; cursor: not-allowed; }

.ig-cm-success {
    text-align: center;
    padding: 12px 0;
}
.ig-cm-success[hidden] { display: none; }
.ig-cm-success-icon {
    font-size: 3rem;
    color: #16a34a;
    margin-bottom: 16px;
}
.ig-cm-success h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink, #1c1714);
    margin: 0 0 8px;
}
.ig-cm-success p {
    font-size: 0.9rem;
    color: var(--muted, #6b7280);
    margin: 0 0 20px;
}

body.ig-cm-open { overflow: hidden; }

@media (max-width: 540px) {
    .ig-cm-inner { padding: 22px 18px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — Categories mega-menu, colorized. Was a plain black/gray
   text list; now each category gets a colored icon badge (cycled
   6-hue palette, same system used for course-card fallbacks and
   category cards elsewhere), plus a highlighted CTA banner at the
   bottom of the panel.
   ═══════════════════════════════════════════════════════════════ */
.ig-mega-panel {
    flex-direction: column !important;
    width:          680px !important;
    padding:        12px !important;
}
.ig-mega-panel__body { display: flex !important; }

.ig-mega-cat-item { gap: 10px !important; }
.ig-mega-cat-item__icon {
    width:           30px !important;
    height:          30px !important;
    border-radius:   8px !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    background:      color-mix(in srgb, var(--mega-accent, #A41034) 14%, #fff) !important;
    color:           var(--mega-accent, #A41034) !important;
    transition:      background .15s ease, color .15s ease !important;
}
.ig-mega-cat-item__icon svg { width: 16px !important; height: 16px !important; }
.ig-mega-cat-item__icon img { width: 18px !important; height: 18px !important; object-fit: contain !important; border-radius: 4px !important; }
.ig-mega-cat-item__name { flex: 1 !important; min-width: 0 !important; }

.ig-mega-cat-item:hover,
.ig-mega-cat-item.active {
    background: color-mix(in srgb, var(--mega-accent, #A41034) 8%, #fff) !important;
    color:      var(--mega-accent, #A41034) !important;
}
/* Solid-fill hover only for the currentColor SVG fallback — a raster
   icon image doesn't recolor to white, so it would just look broken
   sitting on a suddenly-dark badge; those keep their light tint. */
.ig-mega-cat-item:hover .ig-mega-cat-item__icon:not(.ig-mega-cat-item__icon--img),
.ig-mega-cat-item.active .ig-mega-cat-item__icon:not(.ig-mega-cat-item__icon--img) {
    background: var(--mega-accent, #A41034) !important;
    color:      #FFFFFF !important;
}
.ig-mega-cat-item:hover .ig-mega-cat-item__icon--img,
.ig-mega-cat-item.active .ig-mega-cat-item__icon--img {
    background: color-mix(in srgb, var(--mega-accent, #A41034) 22%, #fff) !important;
}
.ig-mega-cat-item:hover .ig-mega-cat-arrow,
.ig-mega-cat-item.active .ig-mega-cat-arrow {
    color: var(--mega-accent, #A41034) !important;
}
.ig-mega-sub-panel a:hover {
    background: color-mix(in srgb, var(--mega-accent, #A41034) 8%, #fff) !important;
    color:      var(--mega-accent, #A41034) !important;
}

/* Bottom CTA banner */
.ig-mega-banner {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             16px !important;
    margin-top:      10px !important;
    padding:         14px 18px !important;
    border-radius:   10px !important;
    background:      linear-gradient(120deg, #A41034, #7d0c27) !important;
    color:           #FFFFFF !important;
    text-decoration: none !important;
}
.ig-mega-banner:hover { color: #FFFFFF !important; text-decoration: none !important; }
.ig-mega-banner__text { font-size: 13px !important; line-height: 1.4 !important; }
.ig-mega-banner__text strong { display: block !important; font-size: 14px !important; margin-bottom: 2px !important; }
.ig-mega-banner__arrow {
    width:           32px !important;
    height:          32px !important;
    border-radius:   50% !important;
    background:      rgba(255,255,255,.16) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    transition:      transform .2s ease, background .2s ease !important;
}
.ig-mega-banner:hover .ig-mega-banner__arrow {
    background: rgba(255,255,255,.28) !important;
    transform:  translateX(3px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — "Contact Us" as a CTA button instead of a plain list link.
   Outlined at rest, fills crimson + turns white on hover. Selector
   is scoped to beat .ig-footer .ig-fw a (0,2,1 !important) which was
   overriding the text/border colour with the generic muted link grey.
   ═══════════════════════════════════════════════════════════════ */
.ig-footer .ig-fw a.ig-footer-cta-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    padding:         10px 22px !important;
    background:      transparent !important;
    border:          1.5px solid #A41034 !important;
    color:           #A41034 !important;
    font-size:       0.875rem !important;
    font-weight:     700 !important;
    border-radius:   100px !important;
    text-decoration: none !important;
    margin-bottom:   20px !important;
    transition:      background .2s ease, color .2s ease, gap .2s ease !important;
}
.ig-footer .ig-fw a.ig-footer-cta-btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
.ig-footer .ig-fw a.ig-footer-cta-btn:hover {
    background:      #A41034 !important;
    border-color:    #A41034 !important;
    color:           #FFFFFF !important;
    gap:             11px !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Klips / Shorts / Be an Affiliate as outlined pill buttons,
   matching the footer's "Contact Us" CTA style exactly (transparent,
   maroon border + text at rest, fills solid maroon + white on hover).
   ═══════════════════════════════════════════════════════════════ */
.ig-hero__pill-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    padding:         10px 20px !important;
    background:      transparent !important;
    border:          1.5px solid #A41034 !important;
    color:           #A41034 !important;
    font-size:       0.9375rem !important;
    font-weight:     700 !important;
    border-radius:   10px !important;
    text-decoration: none !important;
    transition:      background .2s ease, color .2s ease, gap .2s ease !important;
}
.ig-hero__pill-btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
.ig-hero__pill-btn:hover {
    background:      #A41034 !important;
    color:           #FFFFFF !important;
    gap:             11px !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSTRUCTOR DASHBOARD HERO — flat, no-gradient refinement (2026-07)
   Base layout for .idlc-hero / .idlc-metrics lives in dashboard-
   redesign.css, which loads AFTER this file — so these overrides use
   one extra class (.idlc-hero--flat / .idlc-metrics--flat) to win on
   specificity rather than load order, without editing that file.
   Design system: #FFFFFF/#F9FAFB surfaces, #E5E7EB borders, #A41034
   crimson accents, #F59E0B amber reserved for star ratings only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrap — purely a layout container now (no visible fill/
   border): hero + stat cards sit directly on the page background, and
   this div only exists so the height-sync script has one element to
   stretch to match the left profile card's height. ── */
.idlc-hero-metrics-wrap {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── Hero banner — plain white card, no crimson outline ── */
.idlc-hero.idlc-hero--flat {
    background:  #FFFFFF !important;
    border:      1px solid #E5E7EB !important;
    box-shadow:  none !important;
}
.idlc-hero.idlc-hero--flat::before { display: none !important; }

/* ── Followers stat badge — sits under the hero subtitle (see
   InstructorDashboardController@index / instructor-dashboard/index.blade.php
   for why it isn't a 5th card in .idlc-metrics). Blue #1D4ED8 = info role,
   consistent with the design system's reserved meanings for crimson/amber/blue. ── */
.idlc-followers-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    margin-top:      2px;
    padding:         5px 12px;
    font-size:       .78rem;
    font-weight:     600;
    color:           #1D4ED8;
    background:      rgba(29,78,216,.08);
    border:          1px solid rgba(29,78,216,.18);
    border-radius:   999px;
    text-decoration: none;
    transition:      background .15s ease, border-color .15s ease;
}
.idlc-followers-badge:hover {
    background:   rgba(29,78,216,.14);
    border-color: rgba(29,78,216,.3);
    color:        #1D4ED8;
}
.idlc-followers-badge i { font-size: .72rem; }

/* ── Section links ("View all", "All courses") — crimson with the
   design system's hover shade instead of falling back to crimson on
   crimson (no visible hover feedback). ── */
.idlc-section-hd a:hover,
.idlc-tc-hd-right a:hover {
    color: #D91247 !important;
}

/* ── Stat cards — flat white surface, no colored top-accent stripe
   (design system: color lives only in the icon chip, never as a card
   accent/border). ── */
.idlc-metrics.idlc-metrics--flat .idlc-metric__accent {
    display: none !important;
}

.idlc-metrics.idlc-metrics--flat .idlc-metric {
    position:   relative !important;
    background: #FFFFFF !important;
    border:     1px solid #E5E7EB !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.idlc-metrics.idlc-metrics--flat .idlc-metric:hover {
    border-color: #A41034 !important;
    box-shadow:   0 4px 14px -4px rgba(17,24,39,.12) !important;
    transform:    translateY(-2px) !important;
}

/* Card content centered — icon badge, value, label, sub-line all centered */
.idlc-metrics.idlc-metrics--flat .idlc-metric {
    text-align: center !important;
}

/* Icons — canonical solid rounded-square chip (40px, white icon),
   centered above the value. Rating card is the sanctioned exception:
   no chip at all — its amber star sits beside the value instead
   (see .idlc-metric--4 override below). */
.idlc-metrics.idlc-metrics--flat .idlc-metric__icon {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           40px !important;
    height:          40px !important;
    margin:          0 auto 12px !important;
    border-radius:   10px !important;
    background:      #A41034 !important;
    color:           #FFFFFF !important;
}
.idlc-metrics.idlc-metrics--flat .idlc-metric__icon svg { display: block !important; }

/* Per-card chip color — Enrollments (crimson), Earnings (green),
   Courses (blue). Rating gets no chip (amber is reserved for the
   star beside its value, not a card accent). */
.idlc-metrics.idlc-metrics--flat .idlc-metric--2 .idlc-metric__icon {
    background: #047857 !important;
}
.idlc-metrics.idlc-metrics--flat .idlc-metric--3 .idlc-metric__icon {
    background: #1D4ED8 !important;
}

/* Text — headings/muted per design system, no per-card tint */
.idlc-metrics.idlc-metrics--flat .idlc-metric__val {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    color:           #111827 !important;
}
.idlc-metrics.idlc-metrics--flat .idlc-metric__lbl { color: #6B7280 !important; }
.idlc-metrics.idlc-metrics--flat .idlc-metric__sub { color: #6B7280 !important; }

/* ── Instructor Resources cards — colored top-accent stripe per card,
   same crimson/amber/blue rotation as the stat cards above. ── */
.idlc-qlinks .idlc-qlink {
    border-top: 3px solid #A41034 !important;
}
.idlc-qlinks .idlc-qlink:nth-child(2) { border-top-color: #D97706 !important; }
.idlc-qlinks .idlc-qlink:nth-child(3) { border-top-color: #1D4ED8 !important; }
.idlc-qlinks .idlc-qlink:nth-child(4) { border-top-color: #047857 !important; }

/* ── Top Performing Courses cards — flat white, no colored top-accent
   stripe (design system: color lives only in chips/badges, never a
   card border). ── */
.idlc-tc-track .idlc-top-course {
    border-top: 1px solid #E5E7EB !important;
}

/* ── Recent Sales card — brand crimson top-accent stripe. Lives in
   the page's own <style> push (index.blade.php), not here: dashboard-
   redesign.css's [class*="card"] selector loads after this file and
   its `border` shorthand resets border-top back to plain gray. ── */

/* ══════════════════════════════════════════════════════════════
   SHARED — <x-empty-state> component
   Reusable empty-state block (icon + title + text) for table cards.
   Canonical tokens: white/#F9FAFB, #E5E7EB border, #111827/#6B7280
   text, muted #6B7280 icon, no dashed/tinted legacy treatment.
══════════════════════════════════════════════════════════════ */
.es-wrap {
    padding: 56px 24px;
    text-align: center;
}
.es-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
}
.es-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.es-text {
    font-size: 13px;
    color: #6B7280;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}
.es-action {
    margin-top: 18px;
}
.es-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6B7280;
    margin: 10px auto 0;
}
.es-hint svg {
    width: 13px;
    height: 13px;
    flex: none;
}
/* <x-empty-state>'s action button hardcodes .dash-btn/.dash-btn--primary,
   which is otherwise only defined in dashboard.css (student dashboard
   pages only). This fallback makes the button render correctly on public
   pages that use the component (e.g. the cart page) without loading the
   whole dashboard stylesheet just for one button. */
.dash-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 11px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; border: 1px solid transparent; text-decoration: none;
    transition: transform .25s, background .25s, box-shadow .25s;
}
.dash-btn svg { width: 15px; height: 15px; fill: currentColor; }
.dash-btn--primary { background: #A41034; color: #fff; box-shadow: 0 12px 26px -14px rgba(164,16,52,.6); }
.dash-btn--primary:hover { background: #D91247; transform: translateY(-2px); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   SHARED — <x-empty-state-steps> (extends .es-wrap with a numbered
   "How it works" guide, same crimson-circle language as the Teams/
   Zoom settings guide cards) and <x-preview-list> (a quiet second
   card describing what a populated view will contain). Used together
   on student "earned-content" pages (Quiz Attempts, Pending Exams,
   Certificates, Badges, Reviews, Orders) so the zero-data state fills
   the column with honest, useful content instead of one small card.
══════════════════════════════════════════════════════════════ */
.es-wrap.step-guide {
    padding: 40px 28px;
}
.step-guide__list {
    text-align: left;
    max-width: 380px;
    margin: 28px auto 0;
    padding-top: 24px;
    border-top: 1px solid #E5E7EB;
}
.step-guide__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.step-guide__step:last-child {
    margin-bottom: 0;
}
.step-guide__num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #A41034;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.step-guide__label {
    font-size: 13.5px;
    color: #111827;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}
.step-guide__xp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 380px;
    margin: 18px auto 0;
    font-size: 12px;
    color: #6B7280;
}
.step-guide__xp svg {
    width: 13px;
    height: 13px;
    color: #A41034;
    flex-shrink: 0;
}

/* ── <x-preview-list> — quiet second card, purely informational
   (not skeleton rows / fake data). ── */
.preview-list {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 24px 28px;
    margin-top: 16px;
}
.preview-list__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0 0 16px;
}
.preview-list__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.preview-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.preview-list__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.preview-list__icon svg {
    width: 15px;
    height: 15px;
}
.preview-list__label {
    font-size: 13.5px;
    color: #111827;
    font-weight: 500;
}

@media (max-width: 560px) {
    .es-wrap.step-guide { padding: 32px 20px; }
    .step-guide__list { max-width: none; }
    .preview-list { padding: 20px; }
}

/* ── Student dashboard — "Highly Rated" fallback cards shown in the
   Continue Learning slot when a student has zero enrollments. Reuses
   .learn-sec-card as-is; this modifier only fixes baseline alignment
   for the inline star icon + rating text (the shared .learn-sec-card__meta
   rule was plain text only, no icon). ── */
.learn-sec-card__meta--rating {
    display: flex;
    align-items: center;
    gap: 4px;
}
.learn-sec-card__meta--rating svg {
    flex-shrink: 0;
    color: #F59E0B;
}

/* ── Instructor Profile Settings — inline validation error state.
   The plain .form-grp inputs on this form had no is-invalid styling
   at all (no @error blocks were wired up), so failed validation
   previously redirected back with nothing visible on the form. ── */
.instructor__profile-form .form-grp input.is-invalid,
.instructor__profile-form .form-grp select.is-invalid {
    border-color: #EF4444 !important;
}
.instructor__profile-form .invalid-feedback {
    display: block;
    color: #EF4444;
    font-size: 12px;
    margin-top: 4px;
}

/* ============================================================================
   STUDENT APP-SHELL — desktop-only, internally-scrollable dashboard layout.
   Scoped entirely to .dash / .dash-* (that namespace is only ever rendered
   by resources/views/frontend/student-dashboard/layouts/master.blade.php —
   see dashboard.css L1-2), so none of this can reach the instructor module
   or public pages without that class ever appearing there.

   Breakpoint matches dashboard.css's own two-column/stacked breakpoint
   (.dash-grid flex-direction:column at max-width:1080px) — below 1081px
   none of this fires and the page is untouched normal document flow.

   .ig-scroll-hidden hides the scrollbar without disabling scroll: it only
   removes the visible track/thumb (scrollbar-width/-webkit-scrollbar),
   never sets overflow:hidden, so wheel/trackpad/touch/keyboard scrolling
   and focus-scroll-into-view all keep working. ── */
.ig-scroll-hidden { scrollbar-width: none; -ms-overflow-style: none; }
.ig-scroll-hidden::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (min-width: 1081px) {
    /* Frameless layout, matching the instructor shell's .dash-col--sidebar:
       the sidebar just sticks to the header offset and takes its natural
       height — no fixed viewport budget, no internal overflow-y:auto. Now
       that the nav is a flat list (no accordion) instead of collapsible
       groups, every item is visible all the time, so a fixed-height
       scrolling panel only hid items below the fold instead of letting
       the page reach them; natural document scroll shows the whole menu. */
    .dash .dash-side {
        position: sticky !important;
        top: var(--header-h, 84px) !important;
    }
}

/* The dedicated invoice/certificate print & PDF routes render their own
   standalone <html> documents and never carry the .dash class at all, so
   they're already unaffected by the shell above. This is a defensive
   second layer for the unlikely case a student prints directly from a
   .dash-bearing dashboard page (e.g. Ctrl+P on My Courses): without it,
   the fixed height + overflow:auto would clip printed output to one
   viewport's worth of content instead of flowing across pages. */
@media print {
    .dash, .dash__wrap, .dash-grid, .dash-side, .dash-right {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
}

/* Instructor module intentionally has NO app-shell (unlike the student
   module above) — it uses natural document scroll. dashboard-redesign.css's
   own "frameless layout" rules already give it what it needs:
   .dash-col--sidebar{position:sticky;top:28px} (no height/overflow cap) and
   .sbnew{height:auto;overflow:visible}. An app-shell block used to live
   here, wrapping .dash-col--sidebar/.dash-col--main in a calc(100vh-header)
   box with overflow-y:auto — that fought the frameless sidebar's own
   height:auto/overflow:visible reset and risked clipping/hiding nav items
   below the fold instead of letting the page scroll to reach them. Removed. */

/* ══════════════════════════════════════════════════════════════════════════
   FLASH TOASTS (toastr) — site-wide, not scoped to any one module (login/
   logout fire before any dashboard has loaded). Toastr's own CSS ships a
   plain solid-color box (green/red/yellow/blue) with white text; replaced
   with the same flat white-card pattern used elsewhere: white background,
   #E5E7EB border, and a left accent bar carrying the status color instead
   of a filled background. ═══════════════════════════════════════════════ */
#toast-container > .toast {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #E5E7EB !important;
    border-left: 4px solid #6B7280 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px -12px rgba(17,24,39,.18) !important;
    opacity: 1 !important;
    padding: 14px 18px 14px 16px !important;
}
#toast-container > .toast:hover {
    box-shadow: 0 14px 28px -12px rgba(17,24,39,.24) !important;
    opacity: 1 !important;
}
#toast-container > .toast-success { border-left-color: #047857 !important; }
#toast-container > .toast-error   { border-left-color: #DC2626 !important; }
#toast-container > .toast-warning { border-left-color: #B45309 !important; }
#toast-container > .toast-info    { border-left-color: #A41034 !important; }
.toast-title   { color: #111827 !important; font-weight: 700 !important; margin-bottom: 2px !important; }
.toast-message { color: #111827 !important; }
.toast-close-button { color: #6B7280 !important; text-shadow: none !important; opacity: 1 !important; }
.toast-close-button:hover, .toast-close-button:focus { color: #111827 !important; opacity: 1 !important; }
.toast-progress { background-color: rgba(17,24,39,.14) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CANONICAL TABLE SPEC — one visual style for every data table/tabular list
   across the frontend (student + instructor modules; admin/ig-admin.css is
   out of scope). Each existing table keeps its own class names, markup,
   queries, filters, sort, and pagination — only visual properties are
   unified here, all keyed off the custom properties below so a future spec
   change is a one-place edit instead of a re-audit.

   Audited surfaces (11 real tables; Certificates and Pending Exams are card
   grids, not tables, and were left alone; invoice/certificate PDF layout
   tables are print-only and untouched):
     instructor: Recent Sales (.idlc-sales-table), My Sales (.ms-table),
       Payout history (.pol-table), Questions (.iq-table, courses+klips),
       Announcements (.ial-row, div-grid list), Messages (.iml-table)
     student: Order History (.ord-table), Quiz Attempts (.qat-table),
       Messages (.msg-table), My Reviews (.rev-table), Leaderboard (.lb-table)

   Row padding: 13px vertical (body) / 11px vertical (header) — chosen
   because it was already the value on 4 of the 11 tables (Order History,
   Quiz Attempts, student Messages, My Reviews); horizontal padding is left
   per-table since column widths/layouts differ and that dimension wasn't
   the source of visible inconsistency. ═══════════════════════════════════ */
:root {
    --ig-tbl-head-bg:     #F9FAFB;
    --ig-tbl-head-text:   #6B7280;
    --ig-tbl-border:      #E5E7EB;
    --ig-tbl-row-hover:   #F9FAFB;
    --ig-tbl-text:        #111827;
    --ig-tbl-text-muted:  #6B7280;
    --ig-tbl-pad-y-head:  11px;
    --ig-tbl-pad-y-body:  13px;
    /* Badge palette — success/attention/info/danger/neutral, the only five
       status classes any table badge should map onto. */
    --ig-badge-success-bg:   #ECFDF5; --ig-badge-success-text:   #047857;
    --ig-badge-attention-bg: #FFF8EB; --ig-badge-attention-text: #B45309;
    --ig-badge-info-bg:      #EFF6FF; --ig-badge-info-text:      #1D4ED8;
    --ig-badge-danger-bg:    #FDECEE; --ig-badge-danger-text:    #A41034;
    --ig-badge-neutral-bg:   #F9FAFB; --ig-badge-neutral-text:   #6B7280;
}

/* ── Generic component classes, for any NEW table going forward ── */
.ig-table-card {
    background: #FFFFFF !important;
    border: 1px solid var(--ig-tbl-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.ig-table { width: 100% !important; border-collapse: collapse !important; }
.ig-table thead th {
    background: var(--ig-tbl-head-bg) !important;
    color: var(--ig-tbl-head-text) !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
    padding: var(--ig-tbl-pad-y-head) 16px !important;
    border-bottom: 1px solid var(--ig-tbl-border) !important;
    text-align: left !important; white-space: nowrap !important;
}
.ig-table tbody td {
    padding: var(--ig-tbl-pad-y-body) 16px !important;
    border-bottom: 1px solid var(--ig-tbl-border) !important;
    color: var(--ig-tbl-text) !important;
    vertical-align: middle !important;
}
.ig-table tbody tr:last-child td { border-bottom: none !important; }
.ig-table tbody tr.is-clickable { cursor: pointer !important; }
.ig-table tbody tr.is-clickable:hover td { background: var(--ig-tbl-row-hover) !important; }
.ig-table .ig-num { text-align: right !important; font-variant-numeric: tabular-nums !important; }
.ig-table .ig-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.ig-badge {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 4px 11px !important; border-radius: 999px !important;
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: .02em !important;
    white-space: nowrap !important;
}
.ig-badge--success   { background: var(--ig-badge-success-bg)   !important; color: var(--ig-badge-success-text)   !important; }
.ig-badge--attention { background: var(--ig-badge-attention-bg) !important; color: var(--ig-badge-attention-text) !important; }
.ig-badge--info      { background: var(--ig-badge-info-bg)      !important; color: var(--ig-badge-info-text)      !important; }
.ig-badge--danger    { background: var(--ig-badge-danger-bg)    !important; color: var(--ig-badge-danger-text)    !important; }
.ig-badge--neutral   { background: var(--ig-badge-neutral-bg)   !important; color: var(--ig-badge-neutral-text)   !important; }
.ig-table-footer {
    padding: 10px 16px !important;
    border-top: 1px solid var(--ig-tbl-border) !important;
    font-size: 12px !important; color: var(--ig-tbl-text-muted) !important;
}
.ig-table-footer strong { color: var(--ig-tbl-text) !important; }

/* ── Existing tables: remove colored top-strips so the card is a flat
   white surface with a plain border, per the design system. ── */
.iq-table-card::before { display: none !important; }

/* ── Existing tables: header row — background/text/weight/border unified.
   Grouped by identical property so one rule covers every surface. ── */
.idlc-sales-table thead th,
.ms-page .ms-table thead th,
.pol-table thead th,
.iq-table thead th,
.ial-list-head,
.iml-page .iml-table thead th,
.ord-table thead th,
.qat-table thead th,
.msg-table thead th,
.rev-table thead th,
.lb-th {
    background: var(--ig-tbl-head-bg) !important;
    color: var(--ig-tbl-head-text) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--ig-tbl-border) !important;
    border-top-color: var(--ig-tbl-border) !important;
    padding-top: var(--ig-tbl-pad-y-head) !important;
    padding-bottom: var(--ig-tbl-pad-y-head) !important;
}

/* ── Body rows: border color + vertical rhythm + hover, no zebra ── */
.idlc-sales-table tbody td,
.ms-page .ms-table tbody td,
.pol-table tbody td,
.iq-table td,
.ial-row,
.iml-page .iml-row td,
.ord-table tbody td,
.qat-table tbody td,
.msg-table tbody td,
.rev-table tbody td,
.lb-td {
    border-bottom: 1px solid var(--ig-tbl-border) !important;
    padding-top: var(--ig-tbl-pad-y-body) !important;
    padding-bottom: var(--ig-tbl-pad-y-body) !important;
}
/* My Sales had alternating-row zebra striping — the one real "NO zebra
   stripe" violation found in the audit. Force every row to the same flat
   white so it matches the rest of the table. */
.ms-page .ms-table tbody .ms-data-row:nth-child(even) td,
.ms-page .ms-table tbody .ms-data-row:nth-child(odd) td {
    background: #FFFFFF !important;
}
.idlc-sales-table tbody tr:hover,
.pol-table tbody tr:hover,
.iq-table tbody tr:hover,
.ial-row:hover,
.iml-page .iml-row:hover td,
.ord-table tbody tr:hover td,
.qat-table tbody tr:hover td,
.msg-table tbody tr:hover td,
.rev-table tbody tr:hover td,
.lb-row:hover {
    background: var(--ig-tbl-row-hover) !important;
}
.ms-page .ms-table tbody .ms-data-row:hover td { background: var(--ig-tbl-row-hover) !important; }
/* Instructor Messages used a gradient to flag unread rows — replaced with
   a flat tint (design system: zero gradients). */
.iml-page .iml-row.unread { background: var(--ig-badge-danger-bg) !important; }
.lb-row--me { background: var(--ig-badge-attention-bg) !important; }

/* ── Status badges — every existing badge class mapped onto the five
   canonical states. Mapping (left → right = existing class → state):
     Paid, Completed, Approved, Replied, Pass  → success
     Pending, Awaiting Reply, Follow-up sent   → attention
     Processing, New                          → info
     Declined, Cancelled, Fail                 → danger
     Free, Read/All read                      → neutral               ── */
.idlc-badge--success, .pol-badge--approved, .ord-badge--paid,
.qat-badge--pass, .iml-badge--replied, .msg-status--replied,
.rev-status--approved {
    background: var(--ig-badge-success-bg) !important;
    color: var(--ig-badge-success-text) !important;
}
.idlc-badge--warn, .pol-badge--pending, .ord-badge--pending,
.iml-badge--awaiting, .msg-status--awaiting, .msg-status--followup,
.rev-status--pending {
    background: var(--ig-badge-attention-bg) !important;
    color: var(--ig-badge-attention-text) !important;
}
.idlc-badge--info, .iml-badge--new {
    background: var(--ig-badge-info-bg) !important;
    color: var(--ig-badge-info-text) !important;
}
.idlc-badge--danger, .pol-badge--rejected, .ord-badge--cancelled,
.qat-badge--fail {
    background: var(--ig-badge-danger-bg) !important;
    color: var(--ig-badge-danger-text) !important;
}
.iq-tbl-read {
    background: var(--ig-badge-neutral-bg) !important;
    color: var(--ig-badge-neutral-text) !important;
    padding: 3px 10px !important; border-radius: 999px !important;
}
.iq-tbl-unread {
    background: var(--ig-badge-attention-bg) !important;
    color: var(--ig-badge-attention-text) !important;
    padding: 3px 10px !important; border-radius: 999px !important;
}

/* ── Footers — the "Showing N …" bar under every table gets the same
   text treatment (colors already matched on most pages; this closes the
   remaining gaps). ── */
.idlc-sales-footer, .ms-page .ms-card-footer, .pol-card-footer,
.iq-tbl-footer, .iml-page .iml-card-footer, .ecrs-showing {
    color: var(--ig-tbl-text-muted) !important;
}
.idlc-sales-footer strong, .ms-page .ms-card-footer strong, .pol-card-footer strong,
.iq-tbl-footer strong, .iml-page .iml-card-footer strong, .ecrs-showing b {
    color: var(--ig-tbl-text) !important;
}

/* ── Numeric/currency columns — right-aligned, tabular figures ── */
.idlc-amount, .ms-price, .pol-amount, .lb-td--xp, .ord-table .ord-amount, .qat-score {
    font-variant-numeric: tabular-nums !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CANONICAL FILTER-BAR SPEC — companion to the table-unification block
   above. One compact, white, single-row filter bar for every filter/search
   surface (student + instructor modules; admin and the course/klips public
   catalogs are out of scope — the catalog's .crs-filter-bar was already
   compliant: white, single row, no labels, active-filter border built in).

   Audited surfaces and what each needed:
     Announcements   (.ial-filter-card > .msi-filter-bar) — labeled fields,
       off-white bg, separate card from the list (.ial-card)
     Payout history   (.msi-filter-bar, inside .pol-card already) — labeled
       fields, off-white bg
     My Sales         (.ms-filters) — near-compact already, had a "Filter &
       Sort" header row, separate card from the table (.ms-card)
     Instructor Messages (.iml-filters) — same shape as My Sales
     Notifications    (.nf-filters) — same shape, separate from .nf-card
     Questions        (.iq-panel-top, already inside .iq-table-card) — OK
     Recent Sales     (.idlc-sf, already inside .idlc-sales-card) — OK
     Order History / Quiz Attempts / Messages / My Reviews / My Courses
       (shared .ecrs-filters-card) — cream #FBF6EC background, "Filter &
       Sort" header row + inline "Showing N of M" duplicate of the table
       footer, separate card from the table on all but My Courses (a card
       grid, which per spec keeps its own slim card)

   Every filter row is compacted to a single ~40px control row with no
   labels above inputs, no header row, no inline result count, and (except
   My Courses, which has no table to merge into) visually merged into the
   table card below via border-radius/margin so the two read as one card
   with an internal divider. ═══════════════════════════════════════════════ */

/* ── Backgrounds: white everywhere (was off-white #fafaf9 on the labeled
   .msi-filter-bar pattern, cream #FBF6EC on the shared .ecrs-filters-card
   pattern) ── */
.msi-filter-bar,
.ial-filter-card,
.ecrs-filters-card {
    background: #FFFFFF !important;
}

/* ── Remove "FILTER & SORT" header rows and inline result-count fragments
   — the table footer is the single count location now. ── */
.ms-page .ms-filters__head,
.iml-page .iml-filters__head,
.notif-page .nf-filters__head,
.ecrs-filters-card__head,
.msi-filter-meta {
    display: none !important;
}
/* Student Messages had a floating "Sent Messages" heading between the
   filter card and the table card — every sibling page goes straight from
   filters to table, so this is hidden for the same clean, merged look. */
.msg-section > .sec-head { display: none !important; }

/* ── Remove per-field labels on the "labeled" pattern (Announcements,
   Payout) — the icon + placeholder/default-option text already carry the
   meaning, per spec. ── */
.msi-filter-label { display: none !important; }
.msi-filter-group { min-width: 0 !important; }

/* ── Reset/Clear: one quiet text-button pattern everywhere (crimson text,
   no border, no fill) instead of the assorted bordered/tinted pill
   variants. Text is renamed "Clear" → "Reset" in the blade markup to
   match. ── */
.ms-page .ms-filter-reset, .iml-page .iml-filter-reset, .notif-page .nf-filter-reset,
.ecrs-reset-btn, .msi-filter-clear, .iq-freset, .idlc-sf__clear {
    background: transparent !important;
    border: none !important;
    color: #A41034 !important;
    padding: 6px 4px !important;
    box-shadow: none !important;
}
.ms-page .ms-filter-reset:hover, .iml-page .iml-filter-reset:hover, .notif-page .nf-filter-reset:hover,
.ecrs-reset-btn:hover, .msi-filter-clear:hover, .iq-freset:hover,
.idlc-sf__clear:hover {
    background: transparent !important;
    color: #D91247 !important;
    text-decoration: underline !important;
}

/* ── Active-filter affordance: crimson border on a search/date field the
   user has actually typed/picked into. (Select dropdowns need JS to detect
   a non-default value reliably — out of scope for this CSS-only pass;
   the Reset button's existing show/hide logic already signals "something
   is filtering" at the row level.) ── */
.msi-filter-input:not(:placeholder-shown), .msi-filter-date:not(:placeholder-shown),
.ecrs-pill-search input:not(:placeholder-shown), .ecrs-pill-select--date:not(:placeholder-shown),
.ms-page .ms-filter-search input:not(:placeholder-shown), .ms-page .ms-filter-date:not(:placeholder-shown),
.iml-page .iml-filter-search input:not(:placeholder-shown),
.notif-page .nf-filter-search input:not(:placeholder-shown) {
    border-color: #A41034 !important;
}

/* ── Visual card-merge: filter row sits inside the same card as the table
   below it, separated by a divider line instead of a gap between two
   independently-rounded cards. Each pair: filter box loses its bottom
   corners/border/shadow, table box loses its top corners/border. ── */
.ial-filter-card,
.ms-page .ms-filters,
.iml-page .iml-filters,
.notif-page .nf-filters,
.ecrs-filters-card {
    border-radius: 14px 14px 0 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.ial-filter-card + .ial-card,
.ms-page .ms-filters + .ms-card,
.iml-page .iml-filters + .iml-card,
.notif-page .nf-filters + .nf-card,
.ecrs-filters-card + .ord-section .card,
.ecrs-filters-card + .qat-section .card,
.ecrs-filters-card + .msg-section .card.msg-table-card,
.ecrs-filters-card + .rev-section .card,
.ecrs-filters-card + .ntf-section .card {
    border-radius: 0 0 14px 14px !important;
    border-top: 1px solid #E5E7EB !important;
    margin-top: 0 !important;
}
.ecrs-filters-card + .ord-section,
.ecrs-filters-card + .qat-section,
.ecrs-filters-card + .msg-section,
.ecrs-filters-card + .rev-section,
.ecrs-filters-card + .ntf-section {
    margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   SHORTS — GUEST SIGN-IN GATE
   One reusable "sign in to do X" modal for every guest-gated action
   on the Shorts feed (Like/Dislike/Save/Subscribe/Ask/Upload), plus
   the sign-in strip that replaces the comment composer for guests.
   On-system: white card, #E5E7EB border, crimson primary CTA — no
   dark/TikTok-style modal chrome like the rest of the Shorts page.
   Markup lives in resources/views/shorts/lesson_shorts.blade.php.
   ════════════════════════════════════════════════════════════════ */
.igs-signin-modal {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.igs-signin-modal.open { opacity: 1; pointer-events: auto; }
.igs-signin-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
}
.igs-signin-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 30px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .18);
    transform: scale(.94) translateY(10px);
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.igs-signin-modal.open .igs-signin-modal__sheet { transform: scale(1) translateY(0); }
.igs-signin-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: #6B7280;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.igs-signin-modal__close:hover { background: #F9FAFB; color: #111827; }
.igs-signin-modal__msg {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 6px 0 22px;
    line-height: 1.4;
}
.igs-signin-modal__btns { display: flex; flex-direction: column; gap: 10px; }
.igs-signin-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.igs-signin-modal__btn--primary { background: #A41034; color: #fff !important; }
.igs-signin-modal__btn--primary:hover { background: #D91247; }
.igs-signin-modal__btn--secondary { background: #FFFFFF; color: #A41034 !important; border-color: #E5E7EB; }
.igs-signin-modal__btn--secondary:hover { border-color: #A41034; background: #F9FAFB; }

/* Comment composer — guest state (same padding/height as .igs-ccompose
   so the panel doesn't jump when swapping the input for the strip). */
.igs-ccompose--guest { justify-content: center; }
.igs-cstrip {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
    /* Without this, a flex item's default min-width:auto keeps it sized to
       its content and refuses to shrink inside .igs-ccompose (also a flex
       row), so flex-wrap above never gets a chance to kick in and the text
       clips against the panel edge on narrow viewports instead of wrapping. */
    min-width: 0;
    flex: 1 1 auto;
}
.igs-cstrip__link { color: #A41034; font-weight: 700; text-decoration: none; }
.igs-cstrip__link:hover { color: #D91247; text-decoration: underline; }
.igs-cstrip__sep { color: #E5E7EB; }
.igs-cstrip__new { color: #6B7280; font-size: 12px; text-decoration: underline; }
.igs-cstrip__new:hover { color: #111827; }

/* ══════════════════════════════════════════════════════════════════════════
   TOP-ROW HEIGHT ALIGNMENT — instructor sidebar profile card vs. the page's
   header+stats zone. The JS in instructor-dashboard/layouts/master.blade.php
   stretches whichever side is shorter (profile or header zone) via
   min-height so both bottom out on the same line. When the header zone is
   taller and the profile card is the one being stretched, its content
   (avatar, name, badge, switch button) must stay vertically centered
   instead of pinning to the top and leaving dead space below the button —
   .profile (student sidebar) already does this; .sbnew-profile did not. ═══ */
.sbnew-profile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ── "Explore by category" chips (.ecrs-cat-chip, shared by My Courses /
   Wish List / Cart zero-states) — the crimson border+text was previously
   only a :hover effect, so every chip looked plain/neutral until the
   mouse was actually over it (easy to mistake one hovered chip for a
   differently-styled one). Now permanently crimson-accented; hover
   escalates to a filled crimson chip for feedback. ── */
.ecrs-cat-chip {
    border-color: #A41034 !important;
    color: #A41034 !important;
}
.ecrs-cat-chip:hover {
    background: #A41034 !important;
    color: #FFFFFF !important;
}

/* ── "Popular on iGurus" (.ecrs-promo-section, shared by My Courses /
   Wish List / Cart zero-states) — cards were full-width grid columns (3
   fluid columns = noticeably larger than the /courses page's 4-column
   grid); now a fixed-width horizontal scroll track, matching the smaller
   /courses card size, with prev/next arrows next to "View all" (only
   rendered when there are more than 3 cards to scroll to — see
   popular-courses.blade.php's @if($courses->count() > 3)). Same
   scroll-snap technique as the instructor dashboard's Top Performing
   Courses carousel. ── */
.ecrs-promo-section__head-right { display: flex; align-items: center; gap: 16px; }
.ecrs-promo-nav { display: flex; gap: 6px; }
.ecrs-promo-nav__btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid #E5E7EB; background: #FFFFFF; color: #6B7280;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .15s, color .15s;
}
.ecrs-promo-nav__btn:hover { border-color: #A41034; color: #A41034; }

.crs-grid--track {
    display: flex !important;
    gap: 16px;
    overflow-x: auto;
    /* proximity (not mandatory): mandatory snap fights the JS
       scrollBy({behavior:'smooth'}) prev/next buttons below, forcing
       an abrupt re-snap mid-animation instead of a smooth glide —
       proximity still snaps to a card edge once scrolling settles,
       without hijacking the animated scroll itself. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px; /* keeps card shadows from clipping */
}
.crs-grid--track::-webkit-scrollbar { display: none; }
.crs-grid--track .crs-card {
    flex: 0 0 260px;
    width: 260px;
    scroll-snap-align: start;
}
@media (max-width: 480px) {
    .crs-grid--track .crs-card { flex-basis: 220px; width: 220px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CART PAGE — on-system restyle + empty-cart conversion content
   (resources/views/frontend/pages/cart.blade.php). Scoped to .cart-pg so
   none of this reaches any other page.

   Container: adopts the exact same .container the Courses page uses (see
   cart-redesign.css — the old max-width:100%/extra %-padding overrides that
   made this page narrower than Courses were removed there). Every section
   below spans that same container width, no per-section max-width, so
   header/content edges line up exactly when switching between /courses
   and /cart. The one deliberate exception is .cart-empty-wrap, capped at
   800px and centered — a bare "your cart is empty" message stretched to
   the full 1320px container would read as sparse, not as an anchored card;
   the wishlist bridge and popular/chip sections below it still go full
   width. ═══════════════════════════════════════════════════════════════ */

/* Generic safe "white card" utility — .card is a dashboard.css-only class
   that would collide with Bootstrap's own .card elsewhere on public pages,
   so this page (and any other public page) uses this instead. */
.ig-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17,24,39,.03), 0 16px 36px -28px rgba(17,24,39,.3);
}

/* ── Header: same crimson-hero pattern as the Courses page (.crs-hero),
   reusing its classes directly — plus a small icon chip (kept per spec)
   and an item-count badge in place of the Courses page's stats pill. ── */
.cart-pg .crs-hero { margin: 18px 0 0; }
.cart-pg .cart-hero-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.cart-pg .crs-hero__left { display: flex; align-items: center; gap: 14px; }
.cart-pg .cart-hero-badge {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #FFFFFF;
    border-radius: 100px; font-weight: 700; font-size: 13px;
    padding: 7px 18px; white-space: nowrap; flex-shrink: 0;
}

/* ── Empty-state card — the one intentionally-capped section (see note
   above); still anchored to the container's left edge, not floating.
   page-components.css's legacy .cart-empty-wrap rule sets min-height:60vh
   (a holdover from the old bespoke empty-cart markup); halved here so the
   card hugs its content instead of eating half the viewport. ── */
.cart-pg .cart-empty-wrap {
    margin: 10 0 20px !important; margin-top: 10px !important;
    min-height: 30vh;
    padding: 30px 20px;
}

/* ── Wishlist bridge — full container width ── */
.cart-pg .cart-bridge-card { margin: 10 0 20px !important; margin-top: 10px !important; padding: 24px 28px; }
.cart-pg .cart-bridge-card__head { margin-bottom: 6px; }
.cart-pg .cart-bridge-card__title { font-size: 18px; font-weight: 700; color: #111827; margin: 0; }
.cart-pg .cart-bridge-card__sub { font-size: 13px; color: #6B7280; margin: 3px 0 0; }
.cart-pg .cart-bridge-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.cart-pg .cart-bridge-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 10px; border-radius: 12px;
    border-bottom: 1px solid #F3F4F6;
    transition: background .15s;
}
.cart-pg .cart-bridge-row:last-child { border-bottom: none; }
.cart-pg .cart-bridge-row:hover { background: #F9FAFB; }
.cart-pg .cart-bridge-row__thumb {
    flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
    position: relative; background: #F9FAFB;
    display: flex; align-items: center; justify-content: center; color: #A41034;
}
.cart-pg .cart-bridge-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-pg .cart-bridge-row__thumb svg { width: 22px; height: 22px; }
.cart-pg .cart-bridge-row__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.cart-pg .cart-bridge-row__title {
    font-size: 15px; font-weight: 600; color: #111827; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.cart-pg .cart-bridge-row__type {
    flex: none;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 100px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.cart-pg .cart-bridge-row__type--klip { background: #EFF6FF; color: #1D4ED8; }
.cart-pg .cart-bridge-row__type--course { background: #FDECEE; color: #A41034; }
.cart-pg .cart-bridge-row__meta { flex: none; display: flex; align-items: center; gap: 14px; }
.cart-pg .cart-bridge-row__price { font-size: 13.5px; font-weight: 700; color: #A41034; white-space: nowrap; }
.cart-pg .cart-bridge-row__price--free { color: #047857; }
.cart-pg .cart-bridge-row__rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: #6B7280; white-space: nowrap; }
.cart-pg .cart-bridge-row__rating svg { width: 12px; height: 12px; color: #F59E0B; }
.cart-pg .cart-bridge-row__btn {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 9px;
    background: #FFFFFF; border: 1px solid #E5E7EB; color: #A41034;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cart-pg .cart-bridge-row__btn:hover { background: #A41034; border-color: #A41034; color: #FFFFFF; }
.cart-pg .cart-bridge-row__btn svg { width: 13px; height: 13px; }
.cart-pg .cart-bridge-card__link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 16px; font-size: 13px; font-weight: 700; color: #A41034; text-decoration: none;
}
.cart-pg .cart-bridge-card__link:hover { color: #D91247; text-decoration: underline; }
.cart-pg .cart-bridge-card__link svg { width: 13px; height: 13px; }

/* ── Popular / category-chip sections reused from the shared partials —
   full container width, same grid rhythm as /courses (.crs-grid). ── */
.cart-pg .ecrs-promo-section { margin: 0 0 24px; }

@media (max-width: 900px) {
    .cart-pg .cart-bridge-row__body { flex-wrap: wrap; }
    .cart-pg .cart-bridge-row__meta { flex-basis: 100%; margin-top: 4px; }
}
@media (max-width: 767.98px) {
    /* .crs-hero__inner already stacks at this breakpoint via ig-courses.css */
    .cart-pg .cart-bridge-row { flex-wrap: wrap; }
    .cart-pg .cart-bridge-row__btn { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE NAVBAR — persistent action bar + slide-in drawer, below 1200px
   (matches the existing .ig-header-nav / mega-menu cutover in the "HEADER —
   center the nav links" block above — Categories and Home/Courses/Klips/
   Shorts already go d-none below that same breakpoint).

   Root cause of the pre-existing breakage: .tgmenu__nav (custom.css) carries
   a flat `padding: 0 95px` with no responsive override at all, so on a
   375–414px phone that's 190px gone to padding alone before the logo or a
   single icon renders — everything overlaps/overflows and only whatever
   happens to land inside the sliver that's left (the cart icon) stays
   visible. There was also no hamburger button anywhere in the markup — the
   legacy .tgmobile__menu this replaces relied on main.js cloning
   `.tgmenu__wrap .tgmenu__main-menu`, an element that doesn't exist in this
   redesigned header, into a drawer nothing could ever open. See
   header.blade.php for the new markup this styles. ══════════════════════ */

/* Fixed side padding was the direct cause of the overlap/overflow below xl */
@media (max-width: 1199.98px) {
    .tgmenu__nav { padding: 0 16px !important; gap: 8px; }
}
@media (max-width: 480px) {
    .tgmenu__nav { padding: 0 12px !important; }
    .ig-header-logo-img { height: 30px !important; }
}

/* Hamburger — reuses the same 40px circular .ig-icon-btn treatment as the
   other header icons; hidden on desktop, shown below the drawer breakpoint.
   !important on the base rule too (not just the override) — this button
   also carries .ig-icon-btn, and any other selector matching that combo
   with equal-or-higher specificity than a bare non-important .ig-mobile-
   toggle rule could otherwise force it visible outside the media query. */
.ig-mobile-toggle { display: none !important; }
@media (max-width: 1199.98px) {
    .ig-mobile-toggle { display: inline-flex !important; }
}

/* Wishlist + avatar move into the drawer below 1200px so the persistent
   bar only ever carries logo + bell + cart + hamburger; guest Sign In
   moves into the drawer too (drawer has its own CTA). Bell/cart are not
   touched — they stay in the bar at every width. */
@media (max-width: 1199.98px) {
    .ig-header-actions .ig-wishlist-icon,
    .ig-header-actions .user_icon { display: none !important; }
    .ig-header-actions .ig-auth-btns { display: none !important; }
}

/* Backdrop */
.ig-mobile-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(17,24,39,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 100000;
}
.ig-mobile-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* Drawer panel — slide-in from the right (simplest fit for the existing
   vanilla-JS class-toggle pattern already used by the avatar dropdown/
   notification bell in this same file; a full-screen overlay would compete
   visually with the avatar dropdown's own mobile full-screen mode). */
.ig-mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 320px; max-width: 85vw;
    background: #FFFFFF;
    box-shadow: -8px 0 32px rgba(17,24,39,.16);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 100001;
    display: flex; flex-direction: column;
}
.ig-mobile-drawer.is-open { transform: translateX(0); }
@media (min-width: 1200px) {
    .ig-mobile-drawer, .ig-mobile-drawer-backdrop { display: none !important; }
}

.ig-mdw-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0;
}
.ig-mdw-logo img { height: 30px; width: auto; display: block; }
.ig-mdw-close {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #E5E7EB; background: #F9FAFB; color: #6B7280;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
.ig-mdw-close:hover { color: #A41034; border-color: rgba(164,16,52,.3); }

.ig-mdw-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* User block */
.ig-mdw-user { background: #A41034; padding: 18px; }
.ig-mdw-user-top { display: flex; align-items: center; gap: 12px; }
.ig-mdw-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: #FFFFFF; color: #A41034; font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.4); flex-shrink: 0;
}
.ig-mdw-user-info { overflow: hidden; }
.ig-mdw-user-name {
    font-size: 14.5px; font-weight: 700; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ig-mdw-user-email {
    font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ig-mdw-user-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ig-mdw-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 50px;
}
.ig-mdw-badge--student { background: rgba(255,255,255,.18); color: #FFFFFF; }
.ig-mdw-badge--instructor { background: #FFFFFF; color: #A41034; }
.ig-mdw-user-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ig-mdw-user-link {
    display: block; text-align: center;
    padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 700;
    background: #FFFFFF; color: #A41034 !important; text-decoration: none !important;
}
.ig-mdw-user-link--ghost {
    background: rgba(255,255,255,.14); color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.3);
}

/* Nav links */
.ig-mdw-nav { display: flex; flex-direction: column; padding: 8px 8px 4px; }
.ig-mdw-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px; border-radius: 10px;
    font-size: 14.5px; font-weight: 600; color: #111827 !important; text-decoration: none !important;
}
.ig-mdw-nav-link i { width: 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.ig-mdw-nav-link:hover, .ig-mdw-nav-link.active { background: rgba(164,16,52,.06); color: #A41034 !important; }
.ig-mdw-nav-link.active i, .ig-mdw-nav-link:hover i { color: #A41034; }

/* Categories accordion */
.ig-mdw-accordion { border-top: 1px solid #F3F4F6; margin: 4px 8px 0; }
.ig-mdw-acc-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer;
    padding: 13px 10px; font-size: 14.5px; font-weight: 600; color: #111827;
}
.ig-mdw-acc-trigger span { display: flex; align-items: center; gap: 12px; }
.ig-mdw-acc-trigger span i { width: 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.ig-mdw-acc-chevron { font-size: 11px; color: #9CA3AF; transition: transform .2s; }
.ig-mdw-accordion.is-open .ig-mdw-acc-chevron { transform: rotate(180deg); color: #A41034; }
.ig-mdw-acc-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.ig-mdw-cat-item { padding: 2px 10px 10px 38px; }
.ig-mdw-cat-link {
    display: block; font-size: 13.5px; font-weight: 700; padding: 6px 0;
    color: #111827 !important; text-decoration: none !important;
}
.ig-mdw-cat-link:hover { color: #A41034 !important; }
.ig-mdw-subcats { display: flex; flex-direction: column; }
.ig-mdw-subcats a {
    font-size: 13px; padding: 5px 0;
    color: #6B7280 !important; text-decoration: none !important;
}
.ig-mdw-subcats a:hover { color: #A41034 !important; }

/* Wishlist / notifications links + guest CTA */
.ig-mdw-links { padding: 6px 8px; border-top: 1px solid #F3F4F6; margin-top: 4px; }
.ig-mdw-simple-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 10px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: #111827 !important; text-decoration: none !important;
}
.ig-mdw-simple-link span { display: flex; align-items: center; }
.ig-mdw-simple-link:hover { background: rgba(164,16,52,.06); color: #A41034 !important; }
.ig-mdw-simple-link i { margin-right: 10px; color: #9CA3AF; width: 16px; text-align: center; }
.ig-mdw-count {
    background: #A41034; color: #FFFFFF; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 50px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ig-mdw-guest-cta { padding: 16px; }
.ig-mdw-signin { display: block !important; text-align: center; }

/* Sticky logout footer */
.ig-mdw-footer { flex-shrink: 0; padding: 12px 14px; border-top: 1px solid #E5E7EB; }
.ig-mdw-logout {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    color: #A41034 !important; text-decoration: none !important;
    background: rgba(164,16,52,.06);
}
.ig-mdw-logout:hover { background: rgba(164,16,52,.12); }

/* Body scroll lock while the drawer is open */
body.ig-mdw-lock { overflow: hidden !important; }

/* ════════════════════════════════════════════════════════════════
   SITE PRELOADER — smaller logo + thin crimson spinner ring.
   Markup: resources/views/frontend/layouts/partials/preloader.blade.php
   (shared by frontend.layouts.master and .master_for_custom_page).
   Scoped to #preloader only — deliberately does NOT touch the separate
   .preloader / .preloader-two AJAX/content-load overlays (custom.css),
   which reuse the same .ig-spin-inner/.ig-spin-logo shell classes but
   are out of scope here. Overrides custom.css's older #preloader rules
   for the same selectors via higher specificity + !important.
   ════════════════════════════════════════════════════════════════ */
#preloader .ig-spin-inner {
    width: 100px !important;
    height: 100px !important;
}
#preloader .ig-spin-logo img {
    width: 70px !important;
    height: auto !important;
    animation: none !important;
}
#preloader .ig-spin-ring {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: 50% 50%;
    animation: igPreloaderSpin 1.1s linear infinite;
}
#preloader .ig-spin-ring__track { stroke: #E5E7EB; }
#preloader .ig-spin-ring__arc   { stroke: #A41034; }

@keyframes igPreloaderSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* dashboard-redesign.css sets a sitewide *,*::before,*::after{
       animation-duration:.01ms!important} reset under this same media
       query — without matching !important here that clamp wins on
       importance alone regardless of our higher selector specificity,
       and the "gentle pulse" would run too fast to perceive. */
    #preloader .ig-spin-ring {
        animation: igPreloaderPulse 1.6s ease-in-out infinite !important;
    }
    @keyframes igPreloaderPulse {
        0%, 100% { opacity: .35; }
        50%      { opacity: 1; }
    }
}

/* ════════════════════════════════════════════════════════════════
   COURSE DETAIL PAGE (/course/{slug}) — resources/views/frontend/
   pages/course-details.blade.php. New classes only; course-details-
   premium.css / course-details-redesign.css keep owning everything
   these rules don't touch.
   ════════════════════════════════════════════════════════════════ */

/* Zero-reviews state — replaces a fabricated score with plain muted
   text, used in both the hero rating row and the Reviews tab summary. */
.cdp-no-reviews-yet {
    color: #6B7280;
    font-size: 13.5px;
    font-weight: 500;
}

/* Share icons — monochrome inline SVG, on-system (replaces the old
   brand-colored Shareon widget). */
.cdp-share-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cdp-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    background: #FFFFFF;
    transition: color .15s, border-color .15s, background .15s;
}
.cdp-share-icon svg {
    width: 16px;
    height: 16px;
}
.cdp-share-icon:hover {
    color: #A41034;
    border-color: rgba(164,16,52,.35);
    background: rgba(164,16,52,.05);
}

/* Overview tab — "View full curriculum →" / instructor "View profile →" */
.cdp-view-full-link,
.cdp-instructor-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    color: #A41034;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.cdp-view-full-link:hover,
.cdp-instructor-card-link:hover {
    color: #D91247;
    text-decoration: underline;
}
.cdp-instructor-card-link {
    margin: 0 24px 20px;
}

/* Compact instructor card (Overview tab) — rating instead of role/social */
.cdp-instructor-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    margin-bottom: 4px;
}
.cdp-instructor-card-rating i.fa-star {
    color: #F59E0B;
    font-size: 12px;
}
.cdp-instructor-card-rating-score {
    color: #111827;
    font-weight: 700;
}
.cdp-instructor-card-rating-count {
    color: #6B7280;
}

/* Sticky buy box — main.css sets `body { overflow-x: hidden !important; }`
   sitewide (to stop horizontal scroll from this site's various -5vw/-10vw
   margin tricks). That mismatched hidden-x/visible-y pair on <body> is what
   the browser propagates to <html> to govern the real viewport scrollbox,
   converting the visible axis to `auto` in the process (confirmed via
   getComputedStyle(document.documentElement) reporting overflow "hidden
   auto") — and <html> becoming an explicit scroll container is what breaks
   position:sticky/fixed for every descendant.
   The fix must not touch <html>'s own overflow: propagation only triggers
   when <html>'s own computed overflow is `visible` on both axes (the
   default), so setting `overflow-y:visible` directly on <html> just
   re-triggers propagation and gets immediately re-derived back to `auto`
   from body's still-mismatched pair (confirmed empirically — this was the
   first attempt and it silently no-opped). Instead, override BOTH axes on
   <body> itself so the pair going into propagation is no longer mismatched
   (visible/visible in, visible/visible out). Needs `:has()` for specificity
   (0,1,1) to outrank main.css's plain `body{overflow-x:hidden!important}`
   (0,0,1) despite both being !important. Scoped to this page only, same
   :has() pattern used elsewhere in this codebase. */
body:has(.cdp-body) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Community Guidelines' pinned TOC (.cgp-doc-toc--pinned) uses
   position:fixed via JS, same failure mode as the sticky buy box above —
   <html> becoming an explicit scroll container breaks position:fixed
   descendants and can strand the page short of its real scrollHeight.
   Same fix, scoped to this page. */
body:has(.cgp-wrap) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Course-details hero thumbnail fallback — course-card.blade.php,
   ig-home-course-card.blade.php and instructor-details.blade.php each
   duplicate their own version of this (crs-thumb-fallback, igc__fallback,
   ip-c-thumb-fallback); this page had no fallback at all (a missing or
   dead thumbnail URL just rendered a broken image icon). Matches the
   crs-thumb-fallback visual language — neutral surface + generated serif
   initial — rather than introducing a fourth divergent style. */
.cdp-preview-thumb,
.cdp-mobile-thumb {
    position: relative;
}
.cdp-thumb-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
}
.cdp-thumb-fallback__letter {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    color: #A41034;
}

/* ════════════════════════════════════════════════════════════════
   TEAMS SETTINGS — shared two-column row, replaces two inline
   `style="display:grid;grid-template-columns:1fr 1fr"` blocks in
   resources/views/frontend/instructor-dashboard/teams/index.blade.php
   (Account Details↔Setup Guide, Session Tips↔Common Questions) that
   had no mobile fallback at all.
   ════════════════════════════════════════════════════════════════ */
.ts-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 767.98px) {
    .ts-two-col { grid-template-columns: 1fr; }
}
/* .ls-guide (right column) already forces height:100% (zoom-setting-
   redesign.css) so it fills the row; .ls-card (left column, e.g.
   Account Details) never got the same treatment, so it stayed shrink-
   wrapped to its own shorter form content instead of matching the
   taller card beside it. Scoped to this grid only — .ls-card is shared
   with the Live Sessions list pages, which must not get height:100%. */
.ts-two-col > .ls-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Stretching the card (above) only grows the outer box — .ls-card__body's
   children (FAQ items, tip rows) are plain block content with no way to
   use that extra height, so they clump at the top and leave one dead gap
   below the last item (e.g. Session Tips beside the taller Common
   Questions card). flex + space-between spreads the existing item gaps
   across the full height instead. */
.ts-two-col > .ls-card .ls-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR MENU — student + instructor dashboards.
   Below each module's own existing stacking breakpoint (student:
   1080px, matches dashboard.css's .dash-grid{flex-direction:column};
   instructor: 960px, matches dashboard-redesign.css's .dash-grid
   {grid-template-columns:1fr}) the sidebar already unsticks and
   renders above the page's main content — but fully expanded, so a
   phone user has to scroll past the whole profile+nav+extras block
   before reaching any page content. This wraps that same sidebar
   markup in a collapsed-by-default accordion instead, reusing the
   .is-open toggle-class idiom already used by the sidebar's own nav
   groups (student/layouts/sidebar.blade.php) and the mobile nav
   drawer. Markup: wrap the sidebar @include with .ig-sb-toggle-btn +
   .ig-sb-collapse in student-dashboard/layouts/master.blade.php and
   instructor-dashboard/layouts/master.blade.php.
   ════════════════════════════════════════════════════════════════ */
.ig-sb-toggle-btn {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    margin-bottom: 10px;
}
.ig-sb-toggle-btn__label { display: flex; align-items: center; gap: 8px; }
.ig-sb-toggle-btn__label i { color: #A41034; }
.ig-sb-chev { color: #9CA3AF; font-size: 12px; transition: transform .2s ease; }
.ig-sb-toggle-btn.is-open .ig-sb-chev { transform: rotate(180deg); }

@media (min-width: 1081px) {
    /* Above the stacking breakpoint .ig-sb-collapse has no collapse
       behavior to provide (that's only needed once .ig-sb-toggle-btn
       shows, below 1080px) — but as a plain block div it still sits
       between .dash-side (a `.dash-col` flex column with gap:18px) and
       its real children (.profile/.card.nav/.card.xp), so those children
       stack flush against each other instead of getting that 18px gap.
       That left the sidebar's second row ("Dashboard" nav item) sitting
       18px higher than .dash-main/.dash-rail's second row (Continue
       Learning / Popular on iGurus), which get the gap directly since
       nothing wraps them. display:contents makes the wrapper invisible
       to layout so .profile/.card.nav/.card.xp become direct flex
       children of .dash-side again, picking up the same gap for free. */
    .ig-sb-collapse { display: contents; }
}

@media (max-width: 1080px) {
    /* .dash-side becomes a flex-wrap:wrap row below this breakpoint
       (dashboard.css) — force both children to their own full-width row
       instead of sitting side-by-side as flex items. */
    .dash-side > .ig-sb-toggle-btn { display: flex; flex: 1 1 100%; width: 100%; }
    .dash-side > .ig-sb-collapse {
        flex: 1 1 100%;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .dash-side > .ig-sb-collapse.is-open { max-height: 3000px; }
}
@media (max-width: 960px) {
    .dash-col--sidebar > .ig-sb-toggle-btn { display: flex; }
    .dash-col--sidebar > .ig-sb-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .dash-col--sidebar > .ig-sb-collapse.is-open { max-height: 3000px; }
}

/* ════════════════════════════════════════════════════════════════
   SKELETON LOADING PLACEHOLDERS (ig-skeleton)

   For genuinely client-side-async sections ONLY — a container that's
   empty on initial render and gets populated by a later fetch (the
   course/klip catalog grids, the Klip comments panel). Almost every
   other page in this app is fully server-rendered Blade with no
   client-side loading gap at all (dashboards, Questions, course-detail
   tabs, every filterable dashboard table, admin charts, the shorts
   feed itself) — those pages never touch this system, because there's
   no gap for a skeleton to fill.

   Flat #E5E7EB fills with an opacity pulse — no shimmer-sweep gradient,
   per the zero-gradient design rule. Each variant's dimensions mirror
   its real counterpart (.crs-card, .igs-cm, .ig-table row, a dashboard
   stat tile) so swapping skeleton → real content never shifts layout.
   ════════════════════════════════════════════════════════════════ */

.ig-skel {
    background: #E5E7EB;
    border-radius: 6px;
    animation: igSkelPulse 1.2s ease-in-out infinite;
}
@keyframes igSkelPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
    .ig-skel { animation: none; opacity: .8; }
}

/* ── Text line ── */
.ig-skel-line { display: block; height: 12px; border-radius: 6px; }
.ig-skel-line--sm  { height: 9px; }
.ig-skel-line--lg  { height: 16px; }
.ig-skel-line--w25  { width: 25%; }
.ig-skel-line--w40  { width: 40%; }
.ig-skel-line--w50  { width: 50%; }
.ig-skel-line--w60  { width: 60%; }
.ig-skel-line--w75  { width: 75%; }
.ig-skel-line--w100 { width: 100%; }

/* ── Avatar circle ── */
.ig-skel-avatar { border-radius: 50%; flex-shrink: 0; }

/* ── Card — mirrors .crs-card (course/klip catalog grid: crs-thumb
   16/9 + crs-body padding/gap + crs-row + crs-author + crs-foot) so a
   card-for-card swap never shifts the grid. Independent of .crs-card's
   own rules (rather than reusing them directly) so this can't inherit
   .crs-thumb's brand-gradient background/pseudo-elements meant for
   real photos. ── */
.ig-skel-card {
    display: flex; flex-direction: column;
    border-radius: 16px; overflow: hidden;
    background: #FFFFFF; border: 1px solid #E5E7EB;
}
.ig-skel-card__thumb { aspect-ratio: 16/9; border-radius: 0; }
.ig-skel-card__body   { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 12px; }
.ig-skel-card__row     { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-skel-card__author  { display: flex; align-items: center; gap: 8px; padding-top: 1px; }
.ig-skel-card__author .ig-skel-avatar { width: 24px; height: 24px; }
.ig-skel-card__foot    { padding-top: 9px; border-top: 1px solid #E5E7EB; }

/* ── Table row — mirrors .ig-table's own cell padding/border so a
   skeleton <tr> sits at the exact row height of a real one. Not wired
   to any surface today (every current dashboard/admin table is
   server-rendered — see the file banner above) but built so the next
   table that goes AJAX doesn't have to invent this from scratch. ── */
.ig-skel-row td {
    padding: var(--ig-tbl-pad-y-body, 14px) 16px !important;
    border-bottom: 1px solid var(--ig-tbl-border, #E5E7EB) !important;
}

/* ── Stat card — chip square + number + label, matching the
   icon-chip + number + caption pattern used across dashboard stat
   tiles (e.g. .ecrs-stat). Also not wired anywhere today — those stat
   rows are all server-rendered — built for parity with the shared set. ── */
.ig-skel-stat        { display: flex; align-items: center; gap: 12px; }
.ig-skel-stat__chip   { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.ig-skel-stat__text   { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ig-skel-stat__num    { height: 18px; width: 50%; }
.ig-skel-stat__label  { height: 10px; width: 70%; }

/* ── List row — mirrors .igs-cm (Klip/Short comment row: 36px avatar +
   name/time line + 1-2 text lines). ── */
.ig-skel-listrow        { display: flex; gap: 10px; margin-bottom: 18px; }
.ig-skel-listrow .ig-skel-avatar { width: 36px; height: 36px; }
.ig-skel-listrow__body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ig-skel-listrow__top   { display: flex; align-items: center; gap: 7px; }

/* ═══════════════════════════════════════════════════════════════
   STUDENT QUIZ — PAGINATED CALM FOCUS MODE (student/learning/quiz/{id})
   ─────────────────────────────────────────────────────────────
   Concept: one question on screen at a time (Next/Previous), a
   quiet progress bar + dot navigator instead of loud stat cards,
   generous whitespace, low visual noise — the timer is the only
   thing allowed to raise its voice, and only as it runs low.
   #FFFFFF/#F9FAFB backgrounds, #E5E7EB borders, #111827 headings,
   #6B7280 muted, #A41034 crimson (#D91247 hover), #B45309 amber.
   Loads after custom.css → wins over the legacy .lp-quiz-* /
   .wsus__course_header rules there for the same selectors.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sticky sub-header: reuses .wsus__course_header's dual-header
   positioning (page-components.css pins top:var(--site-header-h)).
   Quiet — thin hairline, no shadow, timer as the one active color. ── */
.ig-quiz-stickybar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: none !important;
    gap: 14px !important;
}
.ig-quiz-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #6B7280 !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    max-width: 220px;
    background: none !important;
    padding: 0 !important;
}
.ig-quiz-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-quiz-back:hover { color: #A41034 !important; }
.ig-quiz-stickybar__title {
    flex: 1 !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}
.ig-quiz-timer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    flex-shrink: 0 !important;
    transition: color .2s !important;
}
.ig-quiz-timer__val { font-size: var(--fs-sm) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.ig-quiz-timer.is-warning { color: #B45309 !important; }
.ig-quiz-timer.is-critical {
    color: #A41034 !important;
    animation: igQuizTimerPulse 1.4s ease-in-out infinite;
}
@keyframes igQuizTimerPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ── Page background + wrap: narrow, centered, airy ── */
.ig-quiz-page { background: #F9FAFB !important; }
.ig-qz-wrap {
    padding: 56px 5% 64px !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

/* ── Progress: step label + meta line + thin bar + dot navigator.
   Replaces the old stat-card grid entirely — quiet text, not chips. ── */
.ig-qz-progress { margin-bottom: 28px !important; }
.ig-qz-progress__top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}
.ig-qz-progress__step {
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.ig-qz-progress__step b { font-weight: 700 !important; }
.ig-qz-progress__meta {
    font-size: var(--fs-xs) !important;
    color: #6B7280 !important;
}
.ig-qz-progress__track {
    height: 3px !important;
    background: #E5E7EB !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
.ig-qz-progress__fill {
    height: 100% !important;
    background: #A41034 !important;
    border-radius: 100px !important;
    transition: width .3s ease !important;
}
.ig-qz-dots {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.ig-qz-dot {
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #E5E7EB !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, transform .15s !important;
}
.ig-qz-dot:hover { border-color: #A41034 !important; }
.ig-qz-dot.is-answered { background: #A41034 !important; border-color: #A41034 !important; }
.ig-qz-dot.is-current { transform: scale(1.6); border-color: #B45309 !important; }
.ig-qz-dot.is-current.is-answered { border-color: #A41034 !important; }

/* ── Auto-submit note: one quiet line, not a banner ── */
.ig-qz-note {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: var(--fs-xs) !important;
    color: #6B7280 !important;
    margin: 0 0 32px !important;
}
.ig-qz-note svg { flex-shrink: 0; color: #B45309 !important; }

/* ── Card: single question, generous room to breathe ── */
.ig-qz-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 40px !important;
}
.ig-qz-panel__text {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: var(--lh-normal) !important;
    margin: 0 0 28px !important;
}

/* ── Options: single column, stacked. Whole label clickable;
   :has() drives the selected state instantly. ── */
.ig-qz-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.ig-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s !important;
}
.ig-option:hover { border-color: #A41034 !important; background: #F9FAFB !important; }
.ig-option:has(.ig-option__radio:checked) {
    border-color: #A41034 !important;
    background: rgba(164,16,52,.05) !important;
}
.ig-option__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-option__radiofake {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid #E5E7EB !important;
    background: #FFFFFF !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: border-color .15s, background .15s !important;
}
.ig-option:has(.ig-option__radio:checked) .ig-option__radiofake {
    border-color: #A41034 !important;
    background: #A41034 !important;
    box-shadow: inset 0 0 0 3px #FFFFFF !important;
}
.ig-option:has(.ig-option__radio:focus-visible) .ig-option__radiofake {
    outline: 2px solid #A41034 !important;
    outline-offset: 2px !important;
}
.ig-option__text { font-size: var(--fs-sm) !important; color: #111827 !important; font-weight: 500 !important; }
.ig-option:has(.ig-option__radio:checked) .ig-option__text { color: #7C0C28 !important; font-weight: 600 !important; }

/* ── Prev / Next / Submit actions ── */
.ig-qz-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E5E7EB !important;
}
.ig-qz-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    min-height: 44px !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    transition: background .15s, color .15s, opacity .15s !important;
}
.ig-qz-btn--ghost {
    background: transparent !important;
    color: #6B7280 !important;
}
.ig-qz-btn--ghost:hover:not(:disabled) { color: #111827 !important; }
.ig-qz-btn--ghost:disabled { opacity: .4 !important; cursor: not-allowed !important; }
.ig-qz-btn--primary {
    background: #A41034 !important;
    color: #fff !important;
    margin-left: auto !important;
}
.ig-qz-btn--primary:hover:not(:disabled) { background: #D91247 !important; }
.ig-qz-btn--primary:disabled { opacity: .65 !important; cursor: not-allowed !important; }
.ig-qz-btn.is-loading { opacity: .75 !important; }
.ig-qz-btn[hidden] { display: none !important; }

/* ── Minimal footer for focus mode: bottom bar only ── */
.ig-footer--minimal .ig-footer-bottom { border-top: 1px solid #E5E7EB !important; }

/* ── Mobile ── */
@media (max-width: 767px) {
    .ig-qz-wrap { padding: 32px 5% 48px !important; }
    .ig-qz-card { padding: 24px !important; }
    .ig-qz-panel__text { font-size: 1.05rem !important; }
    .ig-quiz-stickybar__title { display: none !important; }
    .ig-quiz-back { max-width: 120px; }
    .ig-qz-actions { flex-wrap: wrap !important; }
    .ig-qz-btn--ghost { order: 2 !important; }
    .ig-qz-btn--primary { order: 1 !important; width: 100% !important; justify-content: center !important; margin-left: 0 !important; }
}