/* =========================================================
   SKILL SELLER — FINAL DEMO TYPOGRAPHY + READABILITY LAYER
   Loaded last on purpose.
========================================================= */
:root{
    --ss-navy:#000D4D;
    --ss-blue:#1747D1;
    --ss-gold:#EBAB01;
    --ss-white:#FFFFFF;
    --ss-ink:#0F1012;
    --ss-body:#667085;
    --ss-soft:#F6F8FC;
    --ss-line:#E4EAF4;
    --ss-display:"Bricolage Grotesque",sans-serif;
    --ss-ui:"Manrope",sans-serif;
    --ss-body-font:"Inter",sans-serif;
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
    margin:0;
    overflow-x:hidden;
    color:var(--ss-ink);
    background:#fff;
    font-family:var(--ss-body-font);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body *{box-sizing:border-box}
img{max-width:100%}

h1,h2,
[class$="-title"],
[class*="-title "]{
    font-family:var(--ss-display);
    font-weight:700;
}

h3,h4,h5,h6,
button,
.ss-nav-link,
.ss-drawer-link,
[class*="-btn"],
[class*="-action"],
[class*="-kicker"],
[class*="-eyebrow"]{
    font-family:var(--ss-ui);
}

p,small,input,textarea,select,label{
    font-family:var(--ss-body-font);
}

.site-view{
    width:100%;
    overflow-x:clip;
}
.site-view:not(.active){display:none}
.site-view.active{display:block}

/* Header never changes between public views. */
.ss-site-header{
    position:sticky!important;
    top:0;
    z-index:1000;
    width:100%;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:saturate(150%) blur(14px);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid rgba(228,234,244,.95);
}
.ss-header-shell{
    width:calc(100% - 48px)!important;
    max-width:1440px!important;
    min-height:82px;
    margin:auto!important;
}
.ss-header-logo img,
.ss-drawer-logo img{
    width:auto!important;
    height:52px!important;
    object-fit:contain!important;
}
.ss-nav-link{
    font-size:14px!important;
    font-weight:700!important;
    white-space:nowrap;
}
.ss-login-btn,.ss-start-btn{
    min-height:46px!important;
    font-size:14px!important;
}

/* Content width */
:is(
.ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
.ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell
){
    width:calc(100% - 48px)!important;
    max-width:1440px!important;
    margin-inline:auto!important;
}

/* Hero readability */
.ss-course-hero h1,
.ss-cat-hero h1,
.ss-edu-title,
.ss-partner-title,
.ss-events-title,
.ss-about-title,
.ss-support-title{
    font-size:clamp(46px,4vw,64px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
}
.ss-course-hero p,
.ss-cat-hero p,
.ss-edu-lead,
.ss-partner-lead,
.ss-events-lead,
.ss-about-lead,
.ss-support-lead{
    font-size:16px!important;
    line-height:1.65!important;
    color:#5F6F87!important;
}

/* Headings */
.ss-cat-section-head h2,
.ss-edu-head h2,
.ss-partner-head h2,
.ss-events-head h2,
.ss-about-head h2,
.ss-support-head h2,
.ss-course-results-head h2{
    font-family:var(--ss-display)!important;
    font-size:clamp(28px,2.5vw,38px)!important;
    line-height:1.12!important;
    font-weight:700!important;
}
.ss-cat-section-head p,
.ss-edu-head p,
.ss-partner-head p,
.ss-events-head p,
.ss-about-head p,
.ss-support-head p,
.ss-course-results-head p{
    font-size:14px!important;
    line-height:1.55!important;
}

/* Course page */
.ss-course-search input{font-size:14px!important}
.ss-course-popular,
.ss-course-count-line,
.ss-course-card-meta,
.ss-course-instructor,
.ss-course-rating{font-size:12px!important}
.ss-course-card-category{font-size:12px!important}
.ss-course-card h3,
.ss-course-card-title-row{font-family:var(--ss-ui)!important;font-size:17px!important;line-height:1.3!important}
.ss-course-card-description{font-size:14px!important;line-height:1.55!important}
.ss-course-view-button{font-size:13px!important;min-height:42px!important}
.ss-course-filter-panel,
.ss-course-filter-drawer{font-size:13px!important}
.ss-course-filter-group label{font-size:13px!important}

/* Categories */
.ss-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.ss-cat-card{padding:20px!important;min-height:260px!important}
.ss-cat-card h3{font-size:17px!important;line-height:1.25!important}
.ss-cat-card p{font-size:14px!important;line-height:1.55!important}
.ss-cat-tags span,.ss-cat-skill-chip{font-size:11px!important;min-height:28px!important}
.ss-cat-action,.ss-cat-card a,.ss-cat-card button{font-size:13px!important}
.ss-cat-goal strong,.ss-cat-connect-item strong,.ss-cat-step strong{font-size:14px!important}
.ss-cat-goal small,.ss-cat-connect-item small,.ss-cat-step small{font-size:12px!important;line-height:1.45!important}

/* Educators */
.ss-edu-grid{gap:16px!important}
.ss-edu-card{min-height:320px!important}
.ss-edu-card-top{grid-template-columns:130px minmax(0,1fr)!important;min-height:210px!important}
.ss-edu-card h3{font-size:17px!important}
.ss-edu-role{font-size:12px!important}
.ss-edu-card p{font-size:13px!important;line-height:1.5!important}
.ss-edu-tags span{font-size:11px!important;min-height:27px!important}
.ss-edu-card-actions button{font-size:12px!important;min-height:42px!important}
.ss-edu-exp{font-size:12px!important;min-height:68px!important}
.ss-edu-profile h3{font-size:27px!important}
.ss-edu-profile p{font-size:14px!important;line-height:1.6!important}
.ss-edu-profile-meta strong{font-size:12px!important}
.ss-edu-profile-meta small{font-size:11px!important}
.ss-edu-learning-card strong,.ss-edu-step strong{font-size:13px!important}
.ss-edu-learning-card small,.ss-edu-step small{font-size:11px!important;line-height:1.45!important}

/* Partner */
.ss-partner-overview-grid{grid-template-columns:repeat(4,1fr)!important;gap:14px!important}
.ss-partner-feature,.ss-partner-person,.ss-partner-step{min-height:170px!important;padding:18px!important}
.ss-partner-feature strong,.ss-partner-person strong,.ss-partner-step strong,
.ss-partner-tool strong,.ss-partner-transparency strong{font-size:14px!important}
.ss-partner-feature small,.ss-partner-person small,.ss-partner-step small,
.ss-partner-tool small,.ss-partner-transparency small{font-size:12px!important;line-height:1.5!important}
.ss-partner-note{font-size:12px!important}
.ss-partner-level span{font-size:12px!important}
.ss-partner-level strong{font-size:20px!important}
.ss-partner-level small{font-size:11px!important}
.ss-partner-tool-grid{grid-template-columns:repeat(3,1fr)!important}
.ss-partner-tool{min-height:92px!important}

/* Events */
.ss-events-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.ss-events-card-img{height:180px!important}
.ss-events-card .type{font-size:11px!important;min-height:26px!important}
.ss-events-card h3{font-size:16px!important}
.ss-events-card-meta{font-size:12px!important;line-height:1.5!important}
.ss-events-card p{font-size:13px!important;line-height:1.55!important}
.ss-events-card-actions a,.ss-events-card-actions button{font-size:12px!important;min-height:40px!important}
.ss-events-feature-copy h3{font-size:22px!important}
.ss-events-feature-copy p{font-size:14px!important;line-height:1.6!important}
.ss-events-meta{font-size:12px!important}
.ss-events-why-item strong{font-size:13px!important}
.ss-events-why-item small{font-size:11px!important;line-height:1.4!important}
.ss-events-step strong{font-size:13px!important}
.ss-events-step small{font-size:11px!important;line-height:1.4!important}

/* About */
.ss-about-story{grid-template-columns:.7fr 1.3fr!important}
.ss-about-story-copy p{font-size:14px!important;line-height:1.65!important}
.ss-about-story-flow{grid-template-columns:repeat(3,1fr)!important}
.ss-about-story-step strong{font-size:13px!important}
.ss-about-story-step small{font-size:11px!important;line-height:1.4!important}
.ss-about-problem-grid,.ss-about-mission-grid{grid-template-columns:repeat(2,1fr)!important}
.ss-about-problem{min-height:190px!important}
.ss-about-problem strong,.ss-about-mission-item strong,
.ss-about-ecosystem-item strong,.ss-about-philosophy-item strong{font-size:13px!important}
.ss-about-problem small,.ss-about-mission-item small,
.ss-about-ecosystem-item small,.ss-about-philosophy-item small{font-size:11px!important;line-height:1.45!important}
.ss-about-ecosystem{grid-template-columns:repeat(3,1fr)!important}

/* Support */
.ss-support-categories{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.ss-support-category{min-height:190px!important;padding:18px!important}
.ss-support-category strong{font-size:14px!important}
.ss-support-category small{font-size:12px!important;line-height:1.5!important}
.ss-support-category button{font-size:12px!important;min-height:40px!important}
.ss-support-popular{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.ss-support-popular button{min-height:78px!important;font-size:12px!important}
.ss-support-workspace{grid-template-columns:1fr 1fr!important;gap:16px!important}
.ss-support-faq button{font-size:13px!important;min-height:48px!important}
.ss-support-answer{font-size:12px!important;line-height:1.55!important}
.ss-support-field label{font-size:12px!important}
.ss-support-field input,.ss-support-field select,.ss-support-field textarea{font-size:13px!important}
.ss-support-login-note{font-size:11px!important;line-height:1.45!important}
.ss-support-status-step strong,.ss-support-contact strong{font-size:13px!important}
.ss-support-status-step small,.ss-support-contact small{font-size:11px!important;line-height:1.4!important}
.ss-support-benefit strong{font-size:12px!important}
.ss-support-benefit small{font-size:11px!important;line-height:1.4!important}
.ss-support-ready li,.ss-support-safe li{font-size:12px!important}

/* Prevent tiny text from reference-layout scaling */
.ss-partner-view small,
.ss-events-view small,
.ss-about-view small,
.ss-support-view small,
.ss-edu-safe small{
    min-font-size:11px;
}

@media(max-width:1100px){
    .ss-desktop-nav{display:none!important}
    .ss-menu-btn{display:flex!important}
    .ss-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .ss-events-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .ss-support-categories,.ss-support-popular{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .ss-support-workspace{grid-template-columns:1fr!important}
}

@media(max-width:767px){
    :is(
    .ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
    .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell
    ){
        width:calc(100% - 32px)!important;
    }

    .ss-header-shell{width:calc(100% - 24px)!important;min-height:70px}
    .ss-header-logo img,.ss-drawer-logo img{height:42px!important}
    .ss-login-btn{display:none!important}

    .ss-course-hero h1,.ss-cat-hero h1,.ss-edu-title,.ss-partner-title,
    .ss-events-title,.ss-about-title,.ss-support-title{
        font-size:clamp(36px,10vw,48px)!important;
    }

    .ss-course-hero p,.ss-cat-hero p,.ss-edu-lead,.ss-partner-lead,
    .ss-events-lead,.ss-about-lead,.ss-support-lead{
        font-size:15px!important;
    }

    .ss-cat-grid,
    .ss-partner-overview-grid,
    .ss-partner-tool-grid,
    .ss-events-grid,
    .ss-about-story-flow,
    .ss-about-problem-grid,
    .ss-about-mission-grid,
    .ss-about-ecosystem,
    .ss-support-categories,
    .ss-support-popular{
        grid-template-columns:1fr!important;
    }

    .ss-edu-grid{
        display:flex!important;
        overflow-x:auto!important;
    }

    .ss-edu-card{flex:0 0 88%!important}

    .ss-about-story{grid-template-columns:1fr!important}
    .ss-support-workspace{grid-template-columns:1fr!important}
}

@media(max-width:480px){
    :is(
    .ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
    .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell
    ){
        width:calc(100% - 24px)!important;
    }
}


/* =========================================================
   SKILL SELLER — FINAL REAL PROJECT READABILITY LOCK
   Public home + all section views + mobile drawer
========================================================= */

:root{
    --ss-real-content-max:1560px;
}

/* Keep the website visually full-width without oversized side margins. */
.ss-header-shell,
:is(.ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
    .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell){
    width:calc(100% - 32px)!important;
    max-width:var(--ss-real-content-max)!important;
}

/* Header / drawer readability. */
.ss-nav-link{
    font-size:13.5px!important;
    letter-spacing:-.01em!important;
}
.ss-login-btn,.ss-start-btn{
    font-size:13.5px!important;
}
.ss-drawer-link{
    min-height:55px!important;
    font-size:14px!important;
}
.ss-drawer-label{
    overflow:visible!important;
    text-overflow:clip!important;
}
.ss-drawer-login,.ss-drawer-start{
    font-size:14px!important;
}

/* Home page: headline -> subheadline -> data hierarchy remains readable. */
.site-view[data-view="home"] h1{
    font-family:var(--ss-display)!important;
    font-size:clamp(46px,4.5vw,68px)!important;
    line-height:1.02!important;
    letter-spacing:-.042em!important;
}
.site-view[data-view="home"] h2{
    font-family:var(--ss-display)!important;
    font-size:clamp(30px,2.65vw,40px)!important;
    line-height:1.1!important;
    letter-spacing:-.025em!important;
}
.site-view[data-view="home"] h3{
    font-family:var(--ss-ui)!important;
    font-size:18px!important;
    line-height:1.28!important;
}
.site-view[data-view="home"] p{
    font-size:14.5px!important;
    line-height:1.6!important;
}
.site-view[data-view="home"] small{
    font-size:11.5px!important;
    line-height:1.45!important;
}
.site-view[data-view="home"] button,
.site-view[data-view="home"] .btn,
.site-view[data-view="home"] [class*="-btn"]{
    font-size:13px!important;
}

/* All full public sections. */
.ss-course-hero p,.ss-cat-hero p,.ss-edu-lead,.ss-partner-lead,
.ss-events-lead,.ss-about-lead,.ss-support-lead{
    font-size:16px!important;
    line-height:1.62!important;
}
.ss-cat-section-head p,.ss-edu-head p,.ss-partner-head p,.ss-events-head p,
.ss-about-head p,.ss-support-head p,.ss-course-results-head p{
    font-size:14.5px!important;
    line-height:1.58!important;
}

/* Cards / detail lines. */
.ss-course-card-description,
.ss-cat-card p,
.ss-edu-card p,
.ss-events-card p,
.ss-about-story-copy p{
    font-size:13.5px!important;
    line-height:1.55!important;
}
.ss-partner-feature small,.ss-partner-person small,.ss-partner-step small,
.ss-partner-tool small,.ss-partner-transparency small,
.ss-events-why-item small,.ss-events-step small,
.ss-about-story-step small,.ss-about-problem small,.ss-about-mission-item small,
.ss-about-ecosystem-item small,.ss-about-philosophy-item small,
.ss-support-category small,.ss-support-status-step small,.ss-support-contact small,
.ss-support-benefit small{
    font-size:11.5px!important;
    line-height:1.48!important;
}

/* Public form controls stay legible. */
.site-view input,
.site-view textarea,
.site-view select,
.site-view button{
    font-size:13px;
}

/* Footer readability (footer has its own later inline style, so use important). */
.ss-final-footer-brand p{
    font-size:14px!important;
    line-height:1.65!important;
}
.ss-final-footer-col h4{
    font-size:14px!important;
}
.ss-final-footer-col a{
    font-size:13px!important;
    line-height:1.45!important;
}
.ss-final-footer-bottom-shell{
    font-size:12px!important;
}

/* No left-right movement. */
html,body,#mainContent,.site-view{
    max-width:100%;
    overflow-x:hidden!important;
}

@media(max-width:1100px){
    .ss-header-shell,
    :is(.ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
        .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell){
        width:calc(100% - 24px)!important;
    }
}

@media(max-width:767px){
    .ss-header-shell{
        width:calc(100% - 18px)!important;
    }
    :is(.ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
        .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell){
        width:calc(100% - 24px)!important;
    }

    .ss-drawer-link{
        min-height:54px!important;
        font-size:13.5px!important;
    }

    .site-view[data-view="home"] h1{
        font-size:clamp(36px,10.5vw,48px)!important;
    }
    .site-view[data-view="home"] h2{
        font-size:clamp(27px,7.2vw,34px)!important;
    }
    .site-view[data-view="home"] h3{
        font-size:17px!important;
    }
    .site-view[data-view="home"] p{
        font-size:14px!important;
        line-height:1.58!important;
    }
    .site-view[data-view="home"] small{
        font-size:11.5px!important;
    }

    .ss-course-hero p,.ss-cat-hero p,.ss-edu-lead,.ss-partner-lead,
    .ss-events-lead,.ss-about-lead,.ss-support-lead{
        font-size:14.5px!important;
        line-height:1.58!important;
    }

    /* 16px controls prevent unwanted mobile browser zoom and improve readability. */
    .site-view input,
    .site-view textarea,
    .site-view select{
        font-size:16px!important;
    }
}

@media(max-width:420px){
    :is(.ss-course-shell,.ss-cat-shell,.ss-edu-shell,.ss-seller-shell,
        .ss-partner-shell,.ss-events-shell,.ss-about-shell,.ss-support-shell){
        width:calc(100% - 20px)!important;
    }
    .ss-drawer-link{
        font-size:13px!important;
    }
}