/* Public layout only. Fluid gutters align heroes, listings and the shared chrome. */
.sofl-front-page {
    --public-gutter: clamp(20px, 4vw, 72px);
    --public-section-space: clamp(32px, 4vw, 64px);
    --public-header-height: 84px;
    font-size: 16px;
    line-height: 1.65;
    background-color: #fff;
}


.sofl-front-page :is(.container, .public-container) {
    width: 100%;
    /*max-width: 1600px;*/
    padding-inline: var(--public-gutter);
    /* margin-inline: auto;*/
}

.sofl-front-page :is(p, li) {
    overflow-wrap: break-word;
}

.sofl-front-page :is(img, video, iframe) {
    max-width: 100%;
}

.sofl-front-page :is(section[id], article[id], h2[id], h3[id], main[id]) {
    scroll-margin-top: calc(var(--public-header-height) + 20px);
}

.sofl-front-page :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #df9d19;
    outline-offset: 4px;
}

.public-skip-link {
    position: fixed;
    top: 12px;
    left: 20px;
    z-index: 1100;
    padding: 12px 20px;
    background: #fff;
    color: #062449;
    border-radius: 8px;
    transform: translateY(-160%);
}

    .public-skip-link:focus {
        transform: translateY(0);
    }

/* Navigation remains accessible while reading long articles. */
.sofl-front-page .sofl-public-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 0;
    background: #111827;
    box-shadow: 0px -15px 20px 0px #f0c664;
}

    .sofl-front-page .sofl-public-nav .navbar-brand {
        margin-right: 24px;
    }

        .sofl-front-page .sofl-public-nav .navbar-brand img {
            width: 100px;
            height: auto;
        }

    .sofl-front-page .sofl-public-nav .navbar-nav {
        gap: clamp(12px, 1.25vw, 22px);
    }

    .sofl-front-page .sofl-public-nav .nav-link {
        font-size: 16px;
        font-weight: 500;
        padding-block: 10px !important;
    }

.sofl-front-page .approved-button {
    min-height: 46px;
}

.sofl-front-page .nav-auth {
    gap: 12px;
    margin-left: 24px;
}

/* Full-width image bands, with readable copy and consistent vertical breathing room. */
.sofl-front-page :is(.approved-hero, .about-hero, .blogs-hero, .wisdom-hero, .qw-detail-hero, .hlv-hero) {
    padding-block: clamp(32px, 4vw, 56px);
    min-height: 340px;
}

.sofl-front-page .approved-hero {
    min-height: 440px;
    background-position: center;
}

.sofl-front-page .hero-copy {
    width: 50%;
    max-width: 680px;
}

.sofl-front-page :is(.hero-copy, .blogs-hero, .wisdom-hero, .about-hero-copy) p {
    line-height: 1.65;
}

.sofl-front-page :is(.blogs-breadcrumb, .about-breadcrumb, .qw-breadcrumb) {
    flex-wrap: wrap;
    line-height: 1.5;
}

.sofl-front-page .wisdom-benefits strong {
    font-size: 12px;
    max-width: 96px;
}

.sofl-front-page :is(.wisdom-benefits, .hlv-benefits) {
    flex-wrap: wrap;
    gap: 20px;
}

/* Each page uses the same section rhythm rather than tightly stacked cards. */
.sofl-front-page :is(.blogs-content, .wisdom-content, .hlv-content, .public-watch-content) {
    padding-block: var(--public-section-space);
}

.sofl-front-page.sofl-public-hlv .hlv-content {
    display: flow-root;
    padding-block: var(--public-section-space) !important;
}

.sofl-front-page :is(.blogs-section, .wisdom-featured, .qw-related-terms, .qw-more) {
    margin-block: var(--public-section-space);
}

.sofl-front-page .hlv-content > section {
    margin-bottom: var(--public-section-space);
}

.sofl-front-page :is(.blogs-section-head, .wisdom-heading, .hlv-section-heading, .about-section-heading) {
    margin-bottom: 20px;
    gap: 20px;
}

.sofl-front-page :is(.blogs-section-head, .wisdom-heading) p {
    margin-top: 6px;
}

.sofl-front-page :is(.blogs-grid, .blogs-featured-grid, .wisdom-grid, .hlv-video-grid, .qw-related-grid) {
    gap: 24px;
}

.sofl-front-page :is(.blogs-card, .wisdom-card, .hlv-video, .about-product) {
    border-radius: 12px;
    box-shadow: 0 4px 18px #09244906;
}

.sofl-front-page .wisdom-card {
    padding: 22px;
}

    .sofl-front-page .wisdom-card h3 {
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .sofl-front-page .wisdom-card p {
        font-size: 15px;
        line-height: 1.65;
    }

    .sofl-front-page .wisdom-card time {
        font-size: 13px;
    }

.sofl-front-page .wisdom-category {
    font-size: 11px;
    line-height: 1.4;
}

.sofl-front-page .wisdom-read {
    font-size: 14px;
    padding-top: 8px;
}

.sofl-front-page :is(.blogs-category-strip, .wisdom-topics, .hlv-playlists) {
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
}

.sofl-front-page :is(.wisdom-topics > a, .hlv-playlist) {
    scroll-snap-align: start;
}

.sofl-front-page .wisdom-topics strong {
    font-size: 12px;
}

.sofl-front-page .wisdom-topics small {
    font-size: 12px;
}

.sofl-front-page .wisdom-featured {
    gap: 24px;
}

.sofl-front-page .wisdom-why {
    padding: 28px;
}

    .sofl-front-page .wisdom-why :is(p, ul) {
        font-size: 15px;
        line-height: 1.65;
    }

.sofl-front-page :is(.blogs-subscription, .wisdom-subscription, .hlv-promotion) {
    margin-top: 32px;
    border-radius: 12px;
    padding: 28px;
    gap: 24px;
}

.sofl-front-page :is(.blogs-pagination, .wisdom-pagination, .hlv-pagination) {
    margin-block: 28px;
}

    .sofl-front-page :is(.blogs-pagination, .wisdom-pagination, .hlv-pagination) a {
        min-width: 40px;
        min-height: 40px;
    }

/* Long-form content has a comfortable reading measure even on a wide screen. */
.sofl-front-page :is(.qw-detail-layout, .public-watch-layout) {
    gap: 32px;
    align-items: start;
}

.sofl-front-page .qw-main-content > section {
    margin-bottom: 32px;
}

.sofl-front-page .qw-richtext {
    max-width: 78ch;
    font-size: 17px;
    line-height: 1.8;
    padding-left: 0;
}

    .sofl-front-page .qw-richtext :is(p, ul, ol) {
        margin-bottom: 18px;
    }

    .sofl-front-page .qw-richtext :is(img, table, iframe) {
        max-width: 100%;
    }

.sofl-front-page :is(.qw-keypoints, .qw-promotion) {
    padding: 24px;
    border-radius: 12px;
}

.sofl-front-page .qw-keypoints li p {
    font-size: 15px;
    line-height: 1.65;
}

.sofl-front-page .qw-neighbors {
    margin-top: 32px;
    padding: 20px;
}

.sofl-front-page .sofl-term-page {
    padding-inline: 0;
}

.sofl-front-page :is(.sofl-term-reading-content, .sofl-blog-richtext) {
    font-size: 17px;
    line-height: 1.8;
}

/* About and home sections share the same aligned gutters. */
.sofl-front-page :is(.about-introduction, .about-offers, .about-literacy, .about-audience, .about-philosophy) {
    padding-block: var(--public-section-space);
}

.sofl-front-page :is(.about-who, .about-mission-grid, .about-products) {
    gap: 24px;
}

.sofl-front-page .about-who {
    margin-bottom: 32px;
}

.sofl-front-page .about-product {
    padding: 24px 20px 38px;
}

    .sofl-front-page .about-product p {
        font-size: 15px;
        line-height: 1.65;
    }

.sofl-front-page .approved-about {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--public-gutter);
    gap: 40px;
}

.sofl-front-page .approved-upcoming {
    padding-block: var(--public-section-space);
}

.sofl-front-page .final-wrap {
    margin-block: 32px 0;
}

.sofl-front-page .approved-final {
    gap: 24px;
    padding: 36px;
}

.sofl-front-page .sofl-homepage-footer {
    margin-top: 0;
    padding: 48px 0 28px;
}

.sofl-front-page .public-footer-grid {
    gap: 32px;
}

.sofl-front-page .sofl-homepage-footer a {
    line-height: 1.6;
    padding-block: 3px;
}

.sofl-front-page .sofl-footer-bottom {
    margin-top: 32px;
    padding-top: 24px;
}

/* Blog products, FinLexicon and video details use their native component names. */
.sofl-front-page :is(.wealth-hero, .money-hero, .detail-hero, .fin-hero) {
    padding-block: 36px 48px;
    min-height: 320px;
}

.sofl-front-page :is(.wealth-content, .public-detail-content, .fin-content, .public-watch) {
    padding-block: var(--public-section-space);
}

.sofl-front-page :is(.public-featured-grid, .public-latest-grid, .fin-term-grid, .watch-card-grid) {
    gap: 24px;
}

.sofl-front-page .public-article {
    border-radius: 12px;
    overflow: hidden;
}

.sofl-front-page .public-article-body {
    padding: 20px;
}

.sofl-front-page .public-article h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.sofl-front-page .public-article p {
    font-size: 15px;
    line-height: 1.65;
}

.sofl-front-page .public-article-meta {
    font-size: 13px;
    gap: 16px;
    flex-wrap: wrap;
}

.sofl-front-page .public-detail-grid {
    gap: 32px;
}

.sofl-front-page .public-detail-richtext {
    font-size: 17px;
    line-height: 1.85;
    max-width: 78ch;
}

    .sofl-front-page .public-detail-richtext :is(h2, h3) {
        margin-top: 32px;
        margin-bottom: 14px;
        line-height: 1.3;
    }

    .sofl-front-page .public-detail-richtext :is(p, ul, ol) {
        margin-bottom: 20px;
    }

.sofl-front-page .detail-sidebar-card {
    padding: 20px;
    margin-bottom: 20px;
}

.sofl-front-page .detail-neighbours {
    margin-top: 32px;
}

.sofl-front-page .public-watch-info {
    padding-block: 24px;
}

.sofl-front-page .watch-related {
    margin-top: var(--public-section-space);
}

.sofl-front-page .fin-term-card {
    padding: 22px;
    border-radius: 12px;
}

.sofl-front-page .fin-card-copy p {
    font-size: 15px;
    line-height: 1.65;
}

.sofl-front-page .fin-section-heading {
    margin-bottom: 20px;
}

.sofl-front-page .sofl-term-detail-page {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--public-gutter);
}

.sofl-front-page .sofl-term-detail-shell {
    gap: 24px;
}

.sofl-front-page .sofl-reading-section {
    margin-bottom: 24px;
}

.sofl-front-page .sofl-term-page {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--public-gutter);
}

.sofl-front-page .sofl-public-term-page {
    background: #fff;
}

.sofl-front-page .sofl-public-term-hero {
    background: linear-gradient(110deg, #031e3b, #103959);
    border: 0;
    padding: 40px;
    color: #fff;
}

    .sofl-front-page .sofl-public-term-hero :is(p, .sofl-term-pronunciation) {
        color: #dce7f5;
    }

.sofl-front-page .sofl-public-term-layout {
    gap: 28px;
    margin-top: 28px;
}

.sofl-front-page .sofl-public-term-card {
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 4px 18px #09244906;
    margin-bottom: 24px;
}

    .sofl-front-page .sofl-public-term-card h2 {
        font: 700 26px/1.3 var(--font-body, var(--bs-body-font-family, Arial, sans-serif));
    }

    .sofl-front-page .sofl-public-term-card .sofl-blog-richtext {
        font-size: 17px;
        line-height: 1.8;
    }

  /*  .sofl-front-page .sofl-public-term-card .sofl-article-content {
        font-size: 17px;
        line-height: 1.8;
        max-width: 78ch;
    }
*/
.sofl-front-page img[data-public-image-fallback] {
    object-fit: contain;
    background: #f5f8fc;
}

@media (max-width: 575px) {
    .sofl-front-page .sofl-public-term-hero, .sofl-front-page .sofl-public-term-card {
        padding: 22px;
    }
}

.public-support-hero {
    padding: 36px 0 48px;
    background: linear-gradient(90deg, #00172df7 0%, #00172dd9 48%, #00172d44 100%), url('/images/about/hero-learner.webp') center/cover;
    color: #fff;
}

    .public-support-hero h1 {
        max-width: 720px;
        margin: 16px 0;
    }

    .public-support-hero em {
        color: #ffca43;
        font-style: normal;
    }

    .public-support-hero p {
        max-width: 600px;
        font-size: 17px;
        line-height: 1.7;
    }

.public-support-breadcrumb {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 13px;
}

    .public-support-breadcrumb a {
        color: #fff;
    }

.public-support-content {
    padding-block: var(--public-section-space);
}

.public-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.public-support-card {
    padding: 32px;
    border: 1px solid #e4eaf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 20px #09244906;
    min-width: 0;
}

    .public-support-card.cream {
        background: linear-gradient(120deg, #fff9ed, #fffcf5);
    }

.public-support-content h2 {
    font: 700 clamp(25px, 2.4vw, 34px)/1.25 var(--font-body, var(--bs-body-font-family, Arial, sans-serif));
    margin: 14px 0;
    color: #062449;
}

.public-support-content h3 {
    font-size: 21px;
    line-height: 1.3;
}

.public-support-content p {
    color: #536d99;
    line-height: 1.7;
}

.public-contact-method {
    display: flex;
    gap: 20px;
    margin: 28px 0;
    align-items: center;
}

    .public-contact-method > i {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #fff0cd;
        color: #d88f00;
        font-size: 28px;
        flex-shrink: 0;
    }

    .public-contact-method p {
        margin: 0;
    }

.public-support-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

    .public-support-list li {
        position: relative;
        padding-left: 26px;
        margin-block: 12px;
    }

        .public-support-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #12835a;
            font-weight: 700;
        }

.public-support-note {
    font-size: 13px;
    margin-top: 16px;
}

.public-support-faq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding: 32px;
    background: #f6faff;
    border-radius: 14px;
}

    .public-support-faq p {
        margin-bottom: 0;
    }

.public-plan-tag {
    display: inline-block;
    border-radius: 6px;
    background: #def8eb;
    color: #096044;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

    .public-plan-tag.premium {
        background: #ffe9b0;
        color: #805600;
    }

.public-plans-section {
    margin-top: 48px;
}

.public-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
    margin-top: 24px;
}

.public-plan-price {
    font-size: 32px;
    font-weight: 700;
    color: #062449;
    margin: 20px 0 8px;
}

@media (max-width: 767px) {
    .public-support-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-support-card {
        padding: 24px;
    }

    .public-support-faq {
        flex-direction: column;
        align-items: start;
        padding: 24px;
    }
}

@media (hover: hover) {
    .sofl-front-page :is(.blogs-card, .hlv-video, .about-product) {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }

        .sofl-front-page :is(.blogs-card, .hlv-video, .about-product):hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px #09244912;
        }
}

@media (max-width: 1199px) {
    .sofl-front-page {
        --public-gutter: 28px;
    }

        .sofl-front-page .sofl-public-nav .navbar-brand img {
            width: 148px;
        }

        .sofl-front-page .sofl-public-nav .navbar-nav {
            gap: 10px;
        }

        .sofl-front-page .sofl-public-nav .nav-link {
            font-size: 12px;
        }

        .sofl-front-page .nav-auth {
            margin-left: 16px;
            gap: 8px;
        }

            .sofl-front-page .nav-auth .approved-button {
                padding-inline: 12px;
            }

        .sofl-front-page .wisdom-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
}

@media (max-width: 991px) {
    .sofl-front-page {
        --public-header-height: 76px;
    }

        .sofl-front-page .sofl-public-nav .navbar-brand img {
            width: 70px;
        }

        .sofl-front-page .sofl-public-nav .navbar-nav {
            gap: 0;
            padding-top: 16px;
        }

        .sofl-front-page .sofl-public-nav .nav-link {
            font-size: 15px;
            min-height: 44px;
        }

        .sofl-front-page .nav-auth {
            margin: 16px 0 8px;
        }

        .sofl-front-page .navbar-collapse {
            max-height: calc(100dvh - 88px);
            overflow-y: auto;
        }

        .sofl-front-page .hero-copy {
            width: 62%;
        }

        .sofl-front-page :is(.wisdom-grid, .hlv-video-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sofl-front-page .approved-about {
            gap: 24px;
        }
}

@media (max-width: 575px) {
    .sofl-front-page {
        --public-gutter: 20px;
        --public-section-space: 32px;
    }

        .sofl-front-page :is(.approved-hero, .about-hero, .blogs-hero, .wisdom-hero, .qw-detail-hero) {
            min-height: 0;
            padding-block: 28px 36px;
        }

        .sofl-front-page .approved-hero {
            background-image: linear-gradient(90deg, #031e3bf2, #031e3b9c), url('/images/home/hero-learning.webp');
        }

        .sofl-front-page .hero-copy {
            width: 100%;
        }

        .sofl-front-page .hero-actions {
            flex-wrap: wrap;
            gap: 12px;
        }

        .sofl-front-page :is(.blogs-section-head, .wisdom-heading, .hlv-section-heading) {
            flex-wrap: wrap;
            align-items: start;
        }

        .sofl-front-page :is(.wisdom-grid, .hlv-video-grid, .qw-related-grid) {
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
        }

        .sofl-front-page .wisdom-card {
            padding: 20px;
        }

        .sofl-front-page .wisdom-feature-card > div {
            max-width: 100%;
            padding: 24px;
        }

        .sofl-front-page .approved-about {
            padding-inline: var(--public-gutter);
        }

        .sofl-front-page .approved-final {
            padding: 24px;
        }

        .sofl-front-page .sofl-footer-bottom {
            font-size: 12px;
            line-height: 1.6;
        }

            .sofl-front-page .sofl-footer-bottom > div {
                gap: 8px;
                font-size: 11px;
            }
}

@media (prefers-reduced-motion: reduce) {
    html:has(.sofl-front-page) {
        scroll-behavior: auto;
    }

    .sofl-front-page *, .sofl-front-page *::before, .sofl-front-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1499px) {
    .sofl-front-page:not(.sofl-public-home) .sofl-public-nav .navbar-brand img {
        width: 180px;
    }

    .sofl-front-page:not(.sofl-public-home) .sofl-public-nav .navbar-nav {
        gap: 12px;
    }

    .sofl-front-page:not(.sofl-public-home) .sofl-public-nav .nav-link {
        font-size: 16px;
    }

    .sofl-front-page:not(.sofl-public-home) .nav-auth {
        margin-left: 16px;
        gap: 8px;
    }

        .sofl-front-page:not(.sofl-public-home) .nav-auth .approved-button {
            white-space: nowrap;
            padding-inline: 14px;
        }
}

/* Shared navigation matches the public header reference. */
.sofl-front-page .sofl-public-nav .nav-link {
    border-bottom: 2px solid transparent;
}

    .sofl-front-page .sofl-public-nav .nav-link.active {
        color: #ffc43a;
        border-bottom-color: #ffc43a;
    }

.sofl-front-page .nav-auth .approved-button {
    min-height: 42px;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .sofl-front-page .sofl-public-nav .navbar-nav {
        gap: clamp(24px, 2.5vw, 40px);
    }

    .sofl-front-page .sofl-public-nav .nav-link {
        font-size: 18px;
    }
}

/* HLV section boundaries share one responsive spacing token. */
.sofl-front-page.sofl-public-hlv .hlv-featured-section { margin-block: var(--public-section-space) 0; }
.sofl-front-page.sofl-public-hlv .hlv-content > section { margin-block: 0; }
.sofl-front-page.sofl-public-hlv .hlv-content > section + section { margin-top: var(--public-section-space); }
.sofl-front-page.sofl-public-hlv .hlv-playlist-section { padding-block: 0; }
.sofl-front-page.sofl-public-hlv #latest-videos > .hlv-section-heading { margin-bottom: clamp(28px,3vw,44px); }

/* Contact options use the shared support cards and public button styles. */
.sofl-public-support .public-support-grid{gap:24px}
.sofl-public-support .public-support-card{padding:clamp(24px,2.5vw,40px)}
.sofl-public-support .public-support-card.cream{background:#faf8f4}
.sofl-public-support .public-contact-method{margin:0 0 24px;gap:24px}
.sofl-public-support .public-contact-method>i{width:72px;height:72px;font-size:30px}
.sofl-public-support .public-contact-method>div{min-width:0}
.sofl-public-support .public-contact-method h2{font-family:var(--font-heading,var(--font-body));font-size:clamp(23px,2vw,30px);margin:12px 0 0}
.sofl-public-support .public-contact-method .public-section-eyebrow{font-size:13px}
.sofl-public-support .public-support-content p{color:#4d4d4d;line-height:1.6}
.sofl-public-support .public-contact-address{margin:26px 0 36px}
.sofl-public-support .public-contact-address span{display:block;color:#4d4d4d;font-size:15px}
.sofl-public-support .public-contact-address a{display:block;width:fit-content;font-size:clamp(22px,2vw,26px);font-weight:700;color:#062449;text-decoration:underline;overflow-wrap:anywhere}
.sofl-public-support .public-support-list{margin:24px 0 30px}
.sofl-public-support .public-support-list li{padding:0;display:flex;gap:18px;align-items:baseline;margin:10px 0;color:#062449}
.sofl-public-support .public-support-list li::before{content:none}
.sofl-public-support .public-support-list i{color:#bb8c2b}
.sofl-public-support .public-support-note{margin:20px 0 0;font-size:14px}
.sofl-public-support .public-support-faq{margin-top:28px;background:#faf8f4;padding:clamp(24px,3vw,40px)}
.sofl-public-support .public-support-faq h2{font-family:var(--font-heading,var(--font-body));margin:12px 0 6px}
.sofl-public-support .public-support-faq>.approved-button{flex-shrink:0}
@media(max-width:575px){.sofl-public-support .public-contact-method{gap:16px}.sofl-public-support .public-contact-method>i{width:56px;height:56px;font-size:25px}.sofl-public-support .public-support-card>.approved-button{max-width:100%;white-space:normal}}

.sofl-public-support .public-contact-quick-answers{display:flex;flex-direction:column;align-items:flex-start}
.sofl-public-support .public-contact-quick-answers>.approved-button{margin-top:24px}
.sofl-public-support .public-contact-quick-answers>.public-contact-method{width:100%}