/* All Solutions Background Colors */
.case-studies-all-solutions-content .bg-color-transportation { background-color: #1e2a5e; }
.case-studies-all-solutions-content .bg-color-energy, .case-studies-all-solutions-content .bg-color-energy-utilities { background-color: #203615; }
.case-studies-all-solutions-content .bg-color-industrial, .case-studies-all-solutions-content .bg-color-industrial-automation { background-color: #374151; }
.case-studies-all-solutions-content .bg-color-smartcity, .case-studies-all-solutions-content .bg-color-smart-city, .case-studies-all-solutions-content .bg-color-smart-cities { background-color: #0e1f3a; }
.case-studies-all-solutions-content .bg-color-oilgas, .case-studies-all-solutions-content .bg-color-oil-gas, .case-studies-all-solutions-content .bg-color-oil-and-gas { background-color: #39240e; }
.case-studies-all-solutions-content .bg-color-agriculture { background-color: #064e3b; }
.case-studies-all-solutions-content .bg-color-maritime, .case-studies-all-solutions-content .bg-color-maritime-ports { background-color: #0c4a6e; }
.case-studies-all-solutions-content .bg-color-retail, .case-studies-all-solutions-content .bg-color-retail-hospitality { background-color: #7c2d12; }
.case-studies-all-solutions-content .bg-color-healthcare { background-color: #831843; }
.case-studies-all-solutions-content .bg-svg-pattern { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 0v24H0' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E"); }

/* Case Studies Styles */
.case-study-hero-title { font-size: 46px; }
.case-study-hero-desc { font-size: 15px; color: rgba(255, 255, 255, 0.45); }
.case-study-card-title { font-size: 18px; }

/* All Solutions Banner Overrides */
.case-study-hero-em {
    color: var(--blue-primary, #2563eb);
}

.dark .case-study-hero-em, 
.force-dark .case-study-hero-em {
    color: #F59E0B; /* --orange-accent */
}

.case-study-hero-ctas {
    margin-top: 2rem;
}

.case-study-hero-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.case-study-industry-pills {
    margin-top: 1rem;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap; /* Allows pills to wrap onto the next line */
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 20;
    width: 100% !important;
}

.dark .case-study-industry-pills,
.force-dark .case-study-industry-pills {
    border-top-color: rgba(51, 65, 85, 0.5);
}

.case-study-industry-pills-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.dark .case-study-industry-pills-label,
.force-dark .case-study-industry-pills-label {
    color: #94a3b8;
}

.case-study-industry-pill {
    padding: 0.4rem 0.8rem;
    background-color: hsla(0, 0%, 100%, .1);
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
    font-size: 14px;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    text-decoration: none;
}

.dark .case-study-industry-pill,
.force-dark .case-study-industry-pill {
    background-color: hsla(0, 0%, 100%, .1);
    border-color: rgba(51, 65, 85, 0.5);
}

.case-study-industry-pill:hover {
    background-color: hsla(0, 0%, 100%, .2);
}

.dark .case-study-industry-pill:hover,
.force-dark .case-study-industry-pill:hover {
    background-color: hsla(0, 0%, 100%, .2);
}

.case-study-industry-pill.active {
    background-color: var(--blue-primary, #2563eb) !important;
    border-color: var(--blue-primary, #2563eb) !important;
    color: #ffffff !important;
}

.case-study-industry-pill .pill-icon {
    font-size: 1.125rem;
}

/* Right Side Stats Card */
.case-study-hero-card-inner {
    background-color: transparent;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsla(0, 0%, 100%, .08);
}

.case-study-hero-card-head {
    display: flex;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: hsla(0, 0%, 100%, .08);
    padding: .875rem 1.25rem;
    font-weight: 700;
    letter-spacing: .1em;
    background: rgba(0, 87, 255, .12);
    color: hsla(0, 0%, 100%, .38);
    text-transform: uppercase;
    font-size: 10px;
}

.case-study-hero-card-body {
    padding: 1.25rem 1.5rem;
}

.case-study-hero-stat {
    background-color: transparent;
    border: 1px solid hsla(0, 0%, 100%, .08);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-study-hero-stat-val {
    font-size: 28px;
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
}

.case-study-hero-stat-val sup {
    font-size: 28px;
    color: #ffffff;
}

.case-study-hero-stat-lbl {
    font-size: 10.5px;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.case-study-progress-text {
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

/* Stats Band for All Solutions */
.case-study-stats-wrapper {
    margin-bottom: 2rem;
}
.case-study-stats-band {
    background: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(110deg, #0d1020 0%, #0d1860 100%);
    background-size: 30px 30px, 30px 30px, 100% 100%;
    border-radius: 24px;
    padding: 4rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-evenly;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}
.dark .case-study-stats-band, .force-dark .case-study-stats-band {
    border-bottom-color: rgba(255,255,255,0.1);
}
.case-study-stats-band .stat-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.case-study-stats-band .stat-item:not(:last-child)::after {
    content: "";
    position: absolute !important;
    right: -1rem !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
.case-study-stats-band .stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff !important;
    font-family: var(--font-display, 'Inter', sans-serif);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.case-study-stats-band .stat-num sup {
    font-size: 1.5rem;
    top: -0.5em;
    font-weight: 700;
    position: relative;
    color: var(--blue-primary, #2563eb) !important;
}
.case-study-stats-band .stat-label {
    font-size: 13.6px;
    color: rgb(148, 163, 184) !important;
    font-weight: 500;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS — All Solutions + Case Studies
   Palette matches design-system.css / the Tailwind brand tokens:
   brand-blue #2563EB, dark card surface #1E3A5F (brand-dark-alt),
   dark accent #FBBF24 (brand-gold-alt). Literal colours are used so
   nothing depends on newly compiled Tailwind utility classes.
   ══════════════════════════════════════════════════════════════ */

.fs-section { margin-bottom: 0; padding-block: 4.75rem; }
/* the first section keeps the hero-to-content gap that is already approved
   (hero mb-16 = 4rem), exactly like the sibling pages. */
.fs-section--first { padding-top: 0; }
#featured-solutions, #how-it-works, #faq, #deployments,
#library, #by-industry, #by-solution, #architecture,
[id^="sol-"] { scroll-margin-top: 96px; }

/* ── application cards ── */
.fs-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .fs-grid { grid-template-columns: repeat(2, 1fr); } }

.fs-card {
    background: #fff; border: 1px solid #E8EAF0; border-radius: 16px;
    padding: 1.5rem; display: flex; flex-direction: column; height: 100%;
    transition: all .2s;
}
.dark .fs-card { background: #1E3A5F; border-color: #1e293b; }
.fs-card:hover { box-shadow: 0 8px 28px rgba(37,99,235,.14); border-color: #B8D0FF; transform: translateY(-3px); }
.dark .fs-card:hover { border-color: rgba(251,191,36,.4); }

.fs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.fs-icon { font-size: 30px; line-height: 1; }
.fs-num { font-size: 26px; font-weight: 900; letter-spacing: -.04em; color: #EEF3FF; line-height: 1; }
.dark .fs-num { color: rgba(251,191,36,.16); }

.fs-title { font-size: 16px; font-weight: 700; color: #0D1020; margin: 0 0 10px; letter-spacing: -.01em; line-height: 1.3; }
.dark .fs-title { color: #F1F5F9; }

.fs-text { font-size: 12.5px; line-height: 1.6; color: #4A5480; margin: 0 0 1rem; }
.dark .fs-text { color: #94A3B8; }

.fs-meta { font-size: 11px; line-height: 1.6; color: #9099B8; margin: 0 0 10px; }
.dark .fs-meta { color: #7C89A6; }
.fs-meta strong { color: #4A5480; font-weight: 700; }
.dark .fs-meta strong { color: #CBD5E1; }

.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; }
.fs-chip {
    font-size: 10px; font-weight: 700; color: #2563EB; background: #EFF4FF;
    border: 1px solid #DBE6FF; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.dark .fs-chip { color: #FBBF24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.22); }

.fs-link { margin-top: auto; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #2563EB; text-decoration: none; transition: color .15s; }
.fs-link:hover { color: rgba(37,99,235,.8); }
.dark .fs-link { color: #FBBF24; }
.dark .fs-link:hover { color: #F59E0B; }

/* ── How E-Lins solutions work: 4-node flow ── */
.fs-flow { display: flex; align-items: stretch; margin: 0 0 1.25rem; }
.fs-flow-node { flex: 1; min-width: 0; background: #F8FAFF; border: 1.5px solid #DBE6FF; border-radius: 12px; padding: 1rem .875rem; text-align: center; }
.dark .fs-flow-node { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22); }
.fs-flow-node--core { background: linear-gradient(135deg,#0d1860,#1a3080); border-color: transparent; }
.fs-flow-node-t { font-size: 12.5px; font-weight: 800; color: #0D1020; line-height: 1.35; margin-bottom: 4px; }
.dark .fs-flow-node-t { color: #F1F5F9; }
.fs-flow-node--core .fs-flow-node-t { color: #fff; }
.fs-flow-node-d { font-size: 11px; line-height: 1.55; color: #9099B8; }
.dark .fs-flow-node-d { color: #7C89A6; }
.fs-flow-node--core .fs-flow-node-d { color: rgba(255,255,255,.6); }
.fs-flow-arr { display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #2563EB; font-size: 18px; font-weight: 900; flex-shrink: 0; }
.dark .fs-flow-arr { color: #FBBF24; }
@media (max-width: 820px) {
    .fs-flow { flex-direction: column; }
    .fs-flow-arr { padding: 6px 0; transform: rotate(90deg); }
}
.fs-flow-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.fs-flow-foot .fs-link { margin-top: 0; }
.fs-flow-cap { font-size: 13px; line-height: 1.7; color: #4A5480; margin: 0; max-width: 640px; }
.dark .fs-flow-cap { color: #94A3B8; }

/* ── FAQ ── */
.fs-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 2rem; }
.fs-faq-item { background: #fff; border: 1px solid #E8EAF0; border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.dark .fs-faq-item { background: #1E3A5F; border-color: #1e293b; }
.fs-faq-item:hover { border-color: #C8D8FF; }
.fs-faq-item.open { border-color: #2563EB; box-shadow: 0 3px 14px rgba(37,99,235,.09); }
.dark .fs-faq-item.open { border-color: #FBBF24; }
.fs-faq-q { padding: 14px 18px; font-size: 13.5px; font-weight: 600; color: #0D1020; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; user-select: none; transition: background .15s; }
.dark .fs-faq-q { color: #F1F5F9; }
.fs-faq-q:hover { background: #F8FAFF; }
.dark .fs-faq-q:hover { background: rgba(255,255,255,.03); }
.fs-faq-item.open .fs-faq-q { background: #EFF4FF; color: #2563EB; }
.dark .fs-faq-item.open .fs-faq-q { background: rgba(251,191,36,.12); color: #FBBF24; }
.fs-faq-icon { width: 22px; height: 22px; border-radius: 50%; background: #EFF4FF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #2563EB; flex-shrink: 0; transition: all .2s; font-style: normal; }
.dark .fs-faq-icon { background: rgba(251,191,36,.12); color: #FBBF24; }
.fs-faq-item.open .fs-faq-icon { background: #2563EB; color: #fff; transform: rotate(45deg); }
.dark .fs-faq-item.open .fs-faq-icon { background: #FBBF24; color: #0d1020; }
.fs-faq-a { display: none; padding: 0 18px 16px; font-size: 13px; color: #4A5480; line-height: 1.75; }
.dark .fs-faq-a { color: #94A3B8; }
.fs-faq-item.open .fs-faq-a { display: block; }
.fs-faq-a p { margin: 0 0 .6rem; }
.fs-faq-a p:last-child { margin-bottom: 0; }
.fs-faq-a strong { color: #0D1020; font-weight: 700; }
.dark .fs-faq-a strong { color: #F1F5F9; }

/* ── light "entry" band (Real-World Deployments / Deployment Architecture) ── */
.fs-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: linear-gradient(135deg,#EEF3FF,#dce6ff);
    border: 1px solid #dce6ff; border-radius: 16px; padding: 2rem 2.25rem;
}
.dark .fs-band { background: linear-gradient(135deg,rgba(251,191,36,.12),rgba(251,191,36,.05)); border-color: rgba(251,191,36,.2); }
.fs-band-body { flex: 1 1 420px; min-width: 0; }
.fs-band-title { font-size: 20px; font-weight: 800; color: #0D1020; letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.25; }
.dark .fs-band-title { color: #F1F5F9; }
.fs-band-text { font-size: 13.5px; line-height: 1.7; color: #4A5480; margin: 0; max-width: 640px; }
.dark .fs-band-text { color: #AEB9D4; }
.fs-band-btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: #2563EB; color: #fff; font-size: 14px; font-weight: 700;
    padding: 13px 26px; border-radius: 8px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(37,99,235,.3); transition: all .18s;
}
.fs-band-btn:hover { background: #1D4ED8; transform: translateY(-1px); }
.dark .fs-band-btn { background: #FBBF24; color: #0d1020; box-shadow: 0 6px 18px rgba(251,191,36,.25); }
.dark .fs-band-btn:hover { background: #F59E0B; }

/* ══════════════════════════════════════════════════════════════
   CASE STUDIES PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── hero stat row (sits inside the always-dark hero) ── */
.fs-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; max-width: 760px; margin: 2rem auto 0; }
@media (min-width: 768px) { .fs-hero-stats { grid-template-columns: repeat(4, 1fr); } }
.fs-hero-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .9rem .75rem; text-align: center; }
.fs-hero-stat-num { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em; margin-bottom: 6px; }
.fs-hero-stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1.4; }

/* ── industry tiles ── */
.fs-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .fs-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fs-tiles { grid-template-columns: repeat(4, 1fr); } }
.fs-tile {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #E8EAF0; border-radius: 12px;
    padding: .85rem 1rem; text-decoration: none; transition: all .18s;
}
.dark .fs-tile { background: #1E3A5F; border-color: #1e293b; }
.fs-tile:hover { border-color: #B8D0FF; box-shadow: 0 4px 16px rgba(37,99,235,.08); transform: translateY(-2px); }
.dark .fs-tile:hover { border-color: rgba(251,191,36,.4); }
.fs-tile-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.fs-tile-name { font-size: 12.5px; font-weight: 700; color: #0D1020; line-height: 1.35; }
.dark .fs-tile-name { color: #F1F5F9; }

/* ── solution cards ── */
.fs-sols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .fs-sols { grid-template-columns: repeat(2, 1fr); } }
.fs-sol { background: #fff; border: 1px solid #E8EAF0; border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; transition: all .2s; }
.dark .fs-sol { background: #1E3A5F; border-color: #1e293b; }
.fs-sol:hover { box-shadow: 0 8px 28px rgba(37,99,235,.14); border-color: #B8D0FF; transform: translateY(-3px); }
.dark .fs-sol:hover { border-color: rgba(251,191,36,.4); }
.fs-sol-head { display: flex; align-items: center; gap: 12px; margin-bottom: .9rem; }
.fs-sol-icon { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg,#EEF3FF,#dce6ff); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.dark .fs-sol-icon { background: linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.08)); }
.fs-sol-title { font-size: 15px; font-weight: 800; color: #0D1020; letter-spacing: -.015em; line-height: 1.3; margin: 0; }
.dark .fs-sol-title { color: #F1F5F9; }
.fs-sol-text { font-size: 12.5px; line-height: 1.65; color: #4A5480; margin: 0 0 1rem; }
.dark .fs-sol-text { color: #94A3B8; }
.fs-sol-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fs-sol-list li { font-size: 12.5px; line-height: 1.5; }
.fs-sol-list a { color: #2563EB; font-weight: 600; text-decoration: none; }
.fs-sol-list a:hover { text-decoration: underline; }
.dark .fs-sol-list a { color: #FBBF24; }
.fs-sol-none { font-size: 12.5px; line-height: 1.6; color: #9099B8; margin: 0 0 1rem; }
.dark .fs-sol-none { color: #7C89A6; }
.fs-sol-arch { margin-top: auto; font-size: 12.5px; font-weight: 700; color: #2563EB; text-decoration: none; }
.fs-sol-arch:hover { text-decoration: underline; }
.dark .fs-sol-arch { color: #FBBF24; }

/* ── case library ── */
.fs-subhead {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #2563EB; margin: 2.5rem 0 1rem; padding-bottom: .6rem;
    border-bottom: 1px solid #E8EAF0;
}
.dark .fs-subhead { color: #FBBF24; border-bottom-color: rgba(255,255,255,.1); }
.fs-subhead:first-of-type { margin-top: 0; }
.fs-subhead-n { font-size: 11px; font-weight: 700; color: #9099B8; letter-spacing: 0; text-transform: none; }
.dark .fs-subhead-n { color: #7C89A6; }

.fs-lib { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .fs-lib { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fs-lib { grid-template-columns: repeat(3, 1fr); } }
.fs-lib-card { background: #fff; border: 1px solid #E8EAF0; border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; transition: all .2s; }
.dark .fs-lib-card { background: #1E3A5F; border-color: #1e293b; }
.fs-lib-card:hover { box-shadow: 0 8px 28px rgba(37,99,235,.14); border-color: #B8D0FF; transform: translateY(-3px); }
.dark .fs-lib-card:hover { border-color: rgba(251,191,36,.4); }
.fs-lib-top { display: flex; align-items: center; gap: 12px; margin-bottom: .9rem; }
.fs-lib-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg,#EEF3FF,#dce6ff); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dark .fs-lib-icon { background: linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.08)); }
.fs-lib-title { font-size: 15px; font-weight: 800; color: #0D1020; letter-spacing: -.015em; line-height: 1.3; margin: 0; }
.dark .fs-lib-title { color: #F1F5F9; }
.fs-lib-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2563EB; margin: 0 0 .6rem; }
.dark .fs-lib-meta { color: #FBBF24; }
.fs-lib-text { font-size: 12.5px; line-height: 1.65; color: #4A5480; margin: 0 0 1rem; }
.dark .fs-lib-text { color: #94A3B8; }

.fs-lib-tag {
    display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #9099B8; background: #F5F7FA;
    border: 1px solid #E8EAF0; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.dark .fs-lib-tag { color: #7C89A6; background: #0A1628; border-color: #1e293b; }
.fs-lib-top .fs-lib-tag { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════
   v2 additions — media cards, gradient head bands, featured paper,
   and the missing base .play-icon rule (only the :hover rule ships
   in the saved theme CSS, so the play badge would otherwise be
   unstyled on the site's own Videos page too).
   ══════════════════════════════════════════════════════════════ */
.fs-lib-card--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fs-lib-body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.fs-thumb { position: relative; display: block; overflow: hidden; background: #0A1628; }
.fs-thumb--16x9 { aspect-ratio: 16 / 9; }
.fs-thumb--3x4 { aspect-ratio: 3 / 4; }
.fs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fs-lib-card:hover .fs-thumb img { transform: scale(1.04); }

.fs-headband {
    height: 150px; display: flex; align-items: center; justify-content: center;
    font-size: 46px; line-height: 1; position: relative; overflow: hidden;
}
.fs-headband::after {
    content: ''; position: absolute; inset: 0; opacity: .15; pointer-events: none; mix-blend-mode: overlay;
    background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 100%);
}

.fs-feature {
    display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 1.5rem;
    background: #fff; border: 1px solid #E8EAF0; border-radius: 16px; padding: 1.5rem;
}
.dark .fs-feature { background: #1E3A5F; border-color: #1e293b; }
.fs-feature-cover { flex: 0 0 210px; max-width: 210px; border-radius: 12px; overflow: hidden; background: #0A1628; }
.fs-feature-cover img { width: 100%; height: auto; display: block; transition: transform .3s; }
.fs-feature:hover .fs-feature-cover img { transform: scale(1.04); }
.fs-feature-body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.fs-feature-body .fs-lib-tag { margin-bottom: .9rem; }
@media (max-width: 640px) { .fs-feature-cover { flex: 0 0 100%; max-width: 100%; } }

.video-card.fs-video-card { display: flex; flex-direction: column; height: 100%; }
.video-info.fs-video-body { display: flex; flex-direction: column; flex: 1; }
.fs-video-body .fs-lib-top { margin-bottom: .75rem; }
.fs-video-body .fs-lib-text { margin-bottom: .85rem; }
.fs-video-body .fs-link { margin-top: auto; }

.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 22, 40, .62); border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff; font-size: 17px; line-height: 1; padding-left: 3px;
    transition: background .2s, transform .2s;
}

.fs-tile-icon { color: #2563EB; display: inline-flex; align-items: center; }
.dark .fs-tile-icon { color: #FBBF24; }
.fs-tile-icon svg { width: 20px; height: 20px; }

/* country-code badge next to the pin on the past-event tiles */
.fs-tile-code {
    flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.3;
    color: #2563EB; background: #EFF4FF; border: 1px solid #DBE6FF; border-radius: 4px; padding: 2px 5px;
}
.dark .fs-tile-code { color: #FBBF24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.22); }

/* ══════════════════════════════════════════════════════════════
   v2.4 — alternating full-bleed section bands, mirroring the
   .section / .section-muted rhythm of insights-overview.html.
   box-shadow + clip-path produce a true edge-to-edge band from a
   container-width element without 100vw (which would add a
   horizontal scrollbar on Windows).
   ══════════════════════════════════════════════════════════════ */
.fs-section--muted {
    background: #f4f7fb;
    box-shadow: 0 0 0 100vmax #f4f7fb;
    clip-path: inset(0 -100vmax);
    border-top: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
}
.dark .fs-section--muted {
    background: #131e2e;
    box-shadow: 0 0 0 100vmax #131e2e;
    border-color: #26364a;
}