:root{
    --navy:#071b4b;
    --navy2:#10265f;
    --purple:#6a37e7;
    --purple2:#8b4ff3;
    --blue:#376df2;
    --green:#159c69;
    --red:#c74652;
    --ink:#10182f;
    --muted:#61708e;
    --paper:#fbfbfe;
    --line:#dbe1ef;
    --lav:#e9e1ff;
    --lav2:#dcd0ff;
    --bluefill:#dce7ff;
    --greenfill:#d7f1e5;
    --goldfill:#fae8bd;
    --shadow:0 12px 30px rgba(12,27,75,.10);
    --radius:18px;
    --max:1440px;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--ink);
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

*{
    box-sizing:border-box;
}


html{
    -webkit-text-size-adjust:100%;
}


body{
    margin:0;
    background:#f6f7fb;
    color:var(--ink);
}


a{
    color:inherit;
    text-decoration:none;
}


button,
input,
select,
textarea{
    font:inherit;
}


/*
 * Safari mobile zoom prevention.
 *
 * Any form control that may receive focus uses at least
 * 16px font size.
 */

input,
select,
textarea,
button{
    font-size:16px;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.container{
    width:min(
        var(--max),
        calc(100% - 32px)
    );

    margin:auto;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar{
    position:sticky;
    top:0;
    z-index:40;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--line);
}


.nav{
    height:72px;

    display:flex;
    align-items:center;

    gap:24px;
}


.logo img{
    height:42px;
}


.navlinks{
    display:flex;
    gap:22px;

    font-size:14px;
    font-weight:650;

    color:#273253;
}


.navlinks a:hover{
    color:var(--purple);
}


.navspacer{
    flex:1;
}


/* ============================================================
   BUTTONS / CONTROLS
   ============================================================ */

.currency,
.btn,
.iconbtn{
    border:1px solid var(--line);

    background:white;

    border-radius:11px;

    padding:11px 14px;

    cursor:pointer;

    font-weight:700;
}


.btn.primary{
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #5125c8
        );

    color:white;

    border:none;

    box-shadow:
        0 8px 18px
        rgba(93,52,218,.22);
}


.btn.green{
    background:var(--green);
    color:white;
    border:none;
}


.btn.ghost{
    background:white;
}


.btn.small{
    padding:8px 11px;
    font-size:13px;
}


.btn:focus,
.tab:focus{
    outline:3px solid rgba(55,109,242,.25);
    outline-offset:2px;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge{
    display:inline-flex;
    align-items:center;

    border-radius:999px;

    padding:6px 10px;

    font-size:12px;
    font-weight:800;

    background:var(--lav);
    color:#4f2cc5;
}


.badge.green{
    background:var(--greenfill);
    color:#08724b;
}


.badge.gold{
    background:var(--goldfill);
    color:#835810;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section{
    padding:26px 0;
}


.pagehead{
    padding:30px 0 12px;
}


.pagehead h1{
    margin:0;
    font-size:34px;
}


.pagehead p{
    color:var(--muted);
    max-width:760px;
}


/* ============================================================
   SEARCH / FILTERS
   ============================================================ */

.searchrow{
    display:grid;

    grid-template-columns:
        1.6fr
        repeat(
            4,
            minmax(130px,.45fr)
        );

    gap:10px;

    margin:18px 0;
}


.searchrow input,
.searchrow select{
    width:100%;

    min-height:46px;

    border:1px solid var(--line);

    border-radius:12px;

    padding:12px 14px;

    background:white;

    color:var(--ink);

    font-size:16px;

    line-height:1.4;

    outline:none;

    appearance:none;
    -webkit-appearance:none;

    box-shadow:none;
}


.searchrow input::placeholder{
    color:#7b879f;
    opacity:1;
}


.searchrow input:focus,
.searchrow select:focus{
    border-color:var(--purple);

    outline:3px solid
        rgba(106,55,231,.12);

    outline-offset:0;
}


/*
 * Custom select arrow.
 *
 * The select itself remains a normal HTML select,
 * but Safari's native blue-link appearance is removed.
 */

.searchrow select{
    padding-right:42px;

    background-color:white;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #61708e 50%
        ),
        linear-gradient(
            135deg,
            #61708e 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 12px) 20px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:no-repeat;
}


.searchrow select:hover{
    border-color:#b8c2d8;
}


.searchrow select:disabled{
    background-color:#f1f3f8;
    color:#8a94a9;
    cursor:not-allowed;
}


/* ============================================================
   GENERAL FORM CONTROLS
   ============================================================ */

input,
select,
textarea{
    font-size:16px;
}


input:focus,
select:focus,
textarea:focus{
    outline:3px solid
        rgba(55,109,242,.16);

    outline-offset:0;
}


/* Prevent browser link-like styling on form controls */

select,
option{
    color:var(--ink);
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.layout{
    display:grid;

    grid-template-columns:
        240px
        1fr;

    gap:20px;

    min-width:0;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar{
    background:var(--navy);

    color:white;

    border-radius:18px;

    padding:18px;

    align-self:start;

    position:sticky;

    top:92px;

    min-width:0;
}


.sidebar h3{
    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

    opacity:.75;
}


.filterlink,
.sidelink{
    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:10px 12px;

    border-radius:10px;

    margin:3px 0;

    font-size:14px;
}


.filterlink:hover,
.sidelink:hover,
.sidelink.active{
    background:
        rgba(127,83,246,.27);
}


/* ============================================================
   COURSE GRID
   ============================================================ */

.grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:18px;

    width:100%;
    min-width:0;
}


.grid > *{
    min-width:0;
    max-width:100%;
}


/* ============================================================
   COURSE CARD
   ============================================================ */

.course-card{
    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;
    min-width:0;
    max-width:100%;

    background:white;

    border:1px solid var(--line);

    border-radius:16px;

    overflow:hidden;

    /*
     * Ensures descendants cannot visually escape the
     * rounded card boundary in browsers where overflow
     * clipping and transformed descendants behave
     * differently.
     */
    clip-path:inset(0 round 16px);

    box-shadow:
        0 6px 18px
        rgba(18,30,67,.06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.course-card:hover{
    transform:translateY(-2px);

    box-shadow:var(--shadow);
}


/* ============================================================
   FULL CARD CLICK TARGET
   ============================================================ */

/*
 * The JavaScript creates this structure:
 *
 * <article class="course-card">
 *
 *     <a class="course-card__full-link"></a>
 *
 *     <div class="course-card__media">
 *         <img class="course-card__cover">
 *         <span class="course-card__enrolled-badge">
 *             Enrolled
 *         </span>
 *     </div>
 *
 *     <div class="cardbody">
 *         ...
 *     </div>
 *
 *     <div class="course-card__actions">
 *         <a class="course-card__button">View</a>
 *         <a class="course-card__button">Enroll</a>
 *     </div>
 *
 * </article>
 *
 *
 * The full-card link is an empty absolute overlay.
 *
 * It sits above the visual content but below the
 * actual action links.
 */

.course-card__full-link{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    z-index:10;

    cursor:pointer;

    background:transparent;
}


.course-card__full-link,
.course-card__full-link:visited,
.course-card__full-link:hover,
.course-card__full-link:active{
    color:transparent;
    text-decoration:none;
}


/* ============================================================
   COURSE MEDIA
   ============================================================ */

/*
 * The media wrapper owns the image dimensions.
 *
 * The image itself does NOT define its own aspect ratio.
 * This prevents its intrinsic dimensions from expanding
 * the card or escaping the media container.
 */

.course-card__media{
    position:relative;

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    aspect-ratio:16 / 10;

    min-width:0;
    min-height:0;

    overflow:hidden;

    /*
     * Creates an isolated stacking context so the image,
     * badge and full-card overlay remain contained.
     */
    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            #e9e1ff,
            #dce7ff
        );

    border-radius:0;

    z-index:1;
}


/* ============================================================
   COURSE COVER
   ============================================================ */

.course-card__media .course-card__cover{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    min-width:0;
    min-height:0;

    margin:0;
    padding:0;

    /*
     * The media wrapper controls the aspect ratio.
     * Do not give the image its own aspect ratio.
     */
    aspect-ratio:auto;

    /*
     * Keep the entire image inside the thumbnail box.
     */
    object-fit:contain;

    object-position:center center;

    border:0;
    border-radius:0;

    box-sizing:border-box;

    pointer-events:none;

    z-index:1;
}


/* ============================================================
   COURSE COVER PLACEHOLDER
   ============================================================ */

.course-card__media .course-card-cover-placeholder{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    min-width:0;
    min-height:0;

    margin:0;
    padding:0;

    aspect-ratio:auto;

    background:
        linear-gradient(
            135deg,
            #e9e1ff,
            #dce7ff
        );

    box-sizing:border-box;

    pointer-events:none;

    z-index:1;
}


/* ============================================================
   COURSE BODY
   ============================================================ */

.course-card > .cardbody{
    position:relative;

    z-index:1;

    width:100%;
    min-width:0;
    max-width:100%;

    padding:16px;
}


/*
 * Make ordinary card content ignore pointer events
 * so the full-card overlay can receive the click.
 *
 * The action area is now OUTSIDE .cardbody and therefore
 * is not affected by this rule.
 */

.course-card > .cardbody > *{
    pointer-events:none;
}


/* ============================================================
   COURSE ACTIONS
   ============================================================ */

/*
 * IMPORTANT:
 *
 * .course-card__actions is a direct child of .course-card.
 *
 * It is NOT inside .cardbody.
 *
 * It therefore remains independent from the full-card
 * overlay link.
 */

.course-card > .course-card__actions{
    position:relative;

    z-index:20;

    display:flex;

    align-items:stretch;

    width:100%;
    max-width:100%;
    min-width:0;

    gap:12px;

    margin-top:0;

    padding:0 16px 16px;

    box-sizing:border-box;

    pointer-events:auto;
}


/* ============================================================
   COURSE CARD BUTTONS
   ============================================================ */

.course-card .course-card__button{
    position:relative;

    z-index:21;

    flex:1 1 0;

    width:50%;

    min-width:0;
    max-width:100%;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 14px;

    border:none;

    border-radius:7px;

    font-family:inherit;

    font-size:16px;

    font-weight:600;

    line-height:1;

    text-align:center;

    text-decoration:none;

    white-space:nowrap;

    box-sizing:border-box;

    cursor:pointer;

    pointer-events:auto;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


/* ============================================================
   VIEW
   ============================================================ */

.course-card .course-card__button--view{
    background:#c84208;
    color:#ffffff;
}


.course-card .course-card__button--view:hover{
    background:#ad3707;
    color:#ffffff;
}


/* ============================================================
   ENROLL
   ============================================================ */

.course-card .course-card__button--enroll{
    background:#005844;
    color:#ffffff;
}


.course-card .course-card__button--enroll:hover{
    background:#004936;
    color:#ffffff;
}


/* ============================================================
   ACTIVE
   ============================================================ */

.course-card .course-card__button:active{
    transform:translateY(1px);
}


/* ============================================================
   FOCUS
   ============================================================ */

.course-card .course-card__button:focus-visible{
    outline:2px solid #111111;

    outline-offset:2px;
}


/* ============================================================
   CARD TYPOGRAPHY
   ============================================================ */

.eyebrow{
    font-size:11px;

    color:var(--purple);

    font-weight:850;

    text-transform:uppercase;

    letter-spacing:.06em;
}


.course-card h3{
    font-size:18px;

    margin:6px 0 10px;

    line-height:1.25;

    overflow-wrap:anywhere;
}


.course-subtitle{
    margin:0 0 12px;

    color:var(--muted);

    font-size:14px;

    line-height:1.5;

    overflow-wrap:anywhere;
}


.meta{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    font-size:12px;

    color:var(--muted);
}


.price-line{
    margin-top:15px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:10px;
}


.price{
    font-size:20px;
    font-weight:850;
}


.member{
    font-size:12px;

    color:var(--green);

    font-weight:750;
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
    display:grid;

    grid-template-columns:
        1.08fr
        .92fr
        320px;

    gap:24px;

    align-items:start;

    background:white;

    border:1px solid var(--line);

    border-radius:22px;

    padding:26px;

    box-shadow:
        0 6px 22px
        rgba(15,30,70,.05);

    min-width:0;
}


.breadcrumbs{
    font-size:12px;

    color:var(--muted);

    margin-bottom:15px;
}


.hero h1{
    font-size:44px;

    line-height:1.04;

    margin:10px 0 12px;

    letter-spacing:-.02em;
}


.hero .subtitle{
    font-size:18px;

    line-height:1.5;

    color:#35415e;
}


.coverwrap{
    position:relative;

    width:100%;
    max-width:100%;

    min-width:0;

    overflow:hidden;

    border-radius:18px;
}


.coverwrap img{
    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    border-radius:18px;

    object-fit:cover;
}


.preview-chip{
    position:absolute;

    left:14px;
    bottom:14px;

    background:
        rgba(5,17,50,.88);

    color:#fff;

    padding:10px 12px;

    border-radius:11px;

    font-size:13px;

    font-weight:700;
}


/* ============================================================
   PRICING CARD
   ============================================================ */

.pricing-card{
    border:1px solid var(--line);

    border-radius:16px;

    padding:18px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f7f4ff
        );

    min-width:0;
}


.pricing-card .list{
    font-size:14px;

    color:var(--muted);
}


.pricing-card .big{
    font-size:34px;

    font-weight:900;

    margin:2px 0 12px;
}


.pricing-card .member-price{
    color:var(--green);

    font-size:19px;

    font-weight:850;
}


.pricing-card .pathway-price{
    color:var(--purple);

    font-size:17px;

    font-weight:850;
}


.pricing-card hr{
    border:0;

    border-top:1px solid var(--line);

    margin:14px 0;
}


.pricing-card .btn{
    width:100%;

    margin-top:12px;
}


/* ============================================================
   FEATURE BAR
   ============================================================ */

.featurebar{
    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:18px;

    color:#42506e;

    font-size:13px;
}


.featurebar span{
    display:flex;

    gap:7px;

    align-items:center;
}


.featurebar b{
    color:var(--green);
}


/* ============================================================
   CONTENT GRID
   ============================================================ */

.content-grid{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:18px;

    margin-top:20px;

    min-width:0;
}


.panel{
    background:white;

    border:1px solid var(--line);

    border-radius:16px;

    padding:20px;

    min-width:0;
}


.panel.lav{
    background:var(--lav);
}


.panel.blue{
    background:var(--bluefill);
}


.panel.green{
    background:var(--greenfill);
}


.panel h2,
.panel h3{
    margin-top:0;
}


/* ============================================================
   CHECKLIST
   ============================================================ */

.checklist{
    display:grid;

    gap:10px;

    margin:0;

    padding:0;

    list-style:none;
}


.checklist li{
    display:flex;

    gap:9px;

    line-height:1.4;
}


.checklist li:before{
    content:'✓';

    display:grid;

    place-items:center;

    flex:0 0 19px;

    height:19px;

    border-radius:50%;

    background:var(--green);

    color:white;

    font-size:12px;

    font-weight:900;

    margin-top:1px;
}


/* ============================================================
   TABS
   ============================================================ */

.tabs{
    margin-top:20px;

    background:white;

    border:1px solid var(--line);

    border-radius:16px;

    overflow:hidden;

    min-width:0;
}


.tabbar{
    display:flex;

    border-bottom:1px solid var(--line);

    overflow-x:auto;
}


.tab{
    appearance:none;

    border:0;

    background:transparent;

    padding:16px 18px;

    font-weight:750;

    color:#42506e;

    border-bottom:3px solid transparent;

    cursor:pointer;

    white-space:nowrap;

    font-size:16px;
}


.tab.active{
    color:var(--purple);

    border-color:var(--purple);
}


.tabcontent{
    padding:22px;

    min-height:180px;
}


/* ============================================================
   LOCKED
   ============================================================ */

.locked{
    display:flex;

    gap:12px;

    align-items:center;

    background:var(--lav);

    border:1px solid #cdbfff;

    padding:16px;

    border-radius:12px;
}


/* ============================================================
   CURRICULUM
   ============================================================ */

.curriculum-public{
    display:grid;

    gap:10px;
}


.module-row{
    border:1px solid var(--line);

    border-radius:12px;

    padding:14px;

    background:white;

    min-width:0;
}


.module-row strong{
    display:block;
}


.module-row small{
    color:var(--muted);
}


/* ============================================================
   ACCESS STRIP
   ============================================================ */

.accessstrip{
    margin-top:18px;

    background:
        linear-gradient(
            135deg,
            #e4ddff,
            #dce8ff
        );

    border:1px solid #cfc3ff;

    border-radius:15px;

    padding:16px;

    display:flex;

    justify-content:space-between;

    gap:15px;

    align-items:center;

    flex-wrap:wrap;
}


.accessstrip .prices{
    display:flex;

    gap:16px;

    flex-wrap:wrap;

    font-size:13px;
}


.accessstrip b{
    color:var(--navy);
}


/* ============================================================
   MODAL
   ============================================================ */

.modalback{
    position:fixed;

    inset:0;

    background:
        rgba(3,13,39,.58);

    z-index:100;

    display:none;

    place-items:center;

    padding:20px;
}


.modalback.open{
    display:grid;
}


.modal{
    width:min(680px,100%);

    background:white;

    border-radius:20px;

    padding:24px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);
}


.modalhead{
    display:flex;

    justify-content:space-between;

    align-items:center;
}


.modalclose{
    border:0;

    background:#eef1f8;

    width:36px;

    height:36px;

    border-radius:50%;

    cursor:pointer;
}


.option{
    border:1px solid var(--line);

    border-radius:12px;

    padding:14px;

    margin:10px 0;
}


.option strong{
    display:block;
}


/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-shell{
    display:grid;

    grid-template-columns:
        250px
        1fr;

    min-height:
        calc(100vh - 72px);

    min-width:0;
}


.learner-sidebar{
    background:
        linear-gradient(
            180deg,
            #061845,
            #081e59
        );

    color:white;

    padding:22px 16px;

    min-width:0;
}


.learner-sidebar .brand{
    margin-bottom:22px;
}


.learner-sidebar .brand img{
    filter:none;

    height:38px;
}


.learner-main{
    padding:26px;

    background:#f6f7fb;

    min-width:0;
}


.welcome{
    background:
        linear-gradient(
            135deg,
            #3249d8,
            #8844ee
        );

    color:white;

    border-radius:16px;

    padding:22px 26px;

    margin-bottom:18px;
}


.dashgrid{
    display:grid;

    grid-template-columns:
        minmax(0,1.7fr)
        280px;

    gap:18px;

    min-width:0;
}


.continue-card{
    display:grid;

    grid-template-columns:
        190px
        1fr;

    gap:18px;

    background:white;

    border:1px solid var(--line);

    border-radius:16px;

    padding:16px;

    min-width:0;
}


.continue-card img{
    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    border-radius:12px;
}


.progressbar{
    height:8px;

    background:#edf0f6;

    border-radius:999px;

    overflow:hidden;
}


.progressbar > span{
    display:block;

    height:100%;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--purple)
        );

    border-radius:999px;
}


.progress-ring{
    width:120px;

    height:120px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:
        conic-gradient(
            var(--purple) var(--p),
            #e9e5fb 0
        );

    position:relative;

    margin:auto;
}


.progress-ring:before{
    content:'';

    position:absolute;

    width:90px;

    height:90px;

    background:white;

    border-radius:50%;
}


.progress-ring b{
    z-index:1;

    font-size:24px;
}


.module-list{
    display:grid;

    gap:8px;
}


.module-item{
    background:white;

    border:1px solid var(--line);

    border-radius:12px;

    padding:13px;

    display:grid;

    grid-template-columns:
        1fr
        180px
        85px;

    gap:12px;

    align-items:center;

    min-width:0;
}


.status{
    font-size:11px;

    padding:6px 8px;

    border-radius:999px;

    text-align:center;

    background:#eef1f7;

    color:#55627c;

    font-weight:750;
}


.status.done{
    background:var(--greenfill);

    color:#08704b;
}


.status.doing{
    background:var(--lav);

    color:#5935c9;
}


.right-stack{
    display:grid;

    gap:14px;

    min-width:0;
}


.recent{
    font-size:13px;

    color:#4d5a76;

    display:grid;

    gap:10px;
}


/* ============================================================
   LESSON
   ============================================================ */

.lesson-shell{
    display:grid;

    grid-template-columns:
        300px
        minmax(0,1fr)
        330px;

    min-height:
        calc(100vh - 72px);

    min-width:0;
}


.lesson-nav{
    background:white;

    border-right:1px solid var(--line);

    padding:16px;

    overflow:auto;
}


.lesson-main{
    padding:24px;

    background:#f6f7fb;

    min-width:0;
}


.notes{
    background:white;

    border-left:1px solid var(--line);

    padding:18px;

    min-width:0;
}


.video{
    background:
        linear-gradient(
            135deg,
            #0b1b4d,
            #5e2bd5
        );

    border-radius:18px;

    aspect-ratio:16 / 9;

    color:white;

    display:grid;

    place-items:center;

    position:relative;

    overflow:hidden;
}


.video .play{
    width:74px;

    height:74px;

    border-radius:50%;

    background:white;

    color:var(--purple);

    display:grid;

    place-items:center;

    font-size:28px;
}


.lesson-link{
    padding:10px;

    border-radius:9px;

    font-size:13px;

    display:flex;

    gap:9px;
}


.lesson-link.current{
    background:var(--lav);

    color:#4c2bbc;

    font-weight:750;
}


.lesson-link.done:before{
    content:'✓';

    color:var(--green);

    font-weight:900;
}


.notes textarea{
    width:100%;

    min-height:220px;

    border:1px solid var(--line);

    border-radius:12px;

    padding:12px;

    font-size:16px;

    resize:vertical;
}


/* ============================================================
   CHECKOUT
   ============================================================ */

.checkout{
    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:22px;

    min-width:0;
}


.checkout .panel{
    box-shadow:
        0 8px 24px
        rgba(19,31,71,.06);
}


.radio-option{
    display:flex;

    gap:12px;

    border:1px solid var(--line);

    padding:14px;

    border-radius:12px;

    margin:9px 0;
}


.summary-row{
    display:flex;

    justify-content:space-between;

    padding:9px 0;

    border-bottom:1px solid #edf0f6;
}


.summary-row.total{
    font-size:20px;

    font-weight:900;

    border:0;
}


/* ============================================================
   PLAN HERO
   ============================================================ */

.planhero{
    background:
        linear-gradient(
            135deg,
            #32128b,
            #7935ee
        );

    color:white;

    border-radius:22px;

    padding:28px;

    display:grid;

    grid-template-columns:
        1fr
        280px;

    gap:25px;

    min-width:0;
}


.planlist{
    display:grid;

    gap:10px;

    margin-top:18px;
}


.plan-course{
    display:grid;

    grid-template-columns:
        50px
        1fr
        auto;

    gap:12px;

    align-items:center;

    border:1px solid var(--line);

    background:white;

    border-radius:12px;

    padding:12px;

    min-width:0;
}


.plan-course .n{
    width:38px;

    height:38px;

    border-radius:10px;

    background:var(--lav);

    display:grid;

    place-items:center;

    color:var(--purple);

    font-weight:900;
}


/* ============================================================
   PROFESSIONAL
   ============================================================ */

.professional-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

    min-width:0;
}


.professional-card{
    background:
        linear-gradient(
            135deg,
            #0b1c52,
            #4820a8
        );

    color:white;

    border-radius:18px;

    padding:24px;

    min-height:280px;

    min-width:0;
}


.professional-card p{
    color:#d9ddf4;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer{
    padding:40px 0;

    color:#6b7690;

    font-size:13px;
}


/* ============================================================
   UTILITY
   ============================================================ */

.hide{
    display:none!important;
}


.muted{
    color:var(--muted);
}


.row{
    display:flex;

    gap:10px;

    align-items:center;
}


.space{
    justify-content:space-between;
}


.mobile-only{
    display:none;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.catalogue-pagination{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:24px;

    padding:10px 0;
}


.pagination-status{
    color:var(--muted);

    font-size:14px;

    font-weight:650;
}


/* ============================================================
   ENROLLED BADGE
   ------------------------------------------------------------
   Green enrollment indicator displayed at the
   top-right corner of the course cover.
   ============================================================ */

.course-card__enrolled-badge{
    position:absolute;

    top:12px;
    right:12px;
    left:auto;

    z-index:5;

    display:inline-flex;

    width:fit-content;
    max-width:max-content;

    flex:0 0 auto;

    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    min-height:30px;

    padding:7px 13px;

    background:#198754;
    color:#ffffff;

    border-radius:999px;

    font-family:inherit;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:0.2px;

    white-space:nowrap;

    pointer-events:none;

    box-shadow:
        0 2px 6px rgba(0,0,0,.20);
}


/* ============================================================
   ENROLLED BADGE CHECKMARK
   ============================================================ */

.course-card__enrolled-badge::before{
    content:"✓";

    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    width:16px;
    height:16px;

    margin-right:6px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    font-size:10px;
    font-weight:800;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1050px){

    .grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .hero{
        grid-template-columns:
            1fr
            1fr;
    }


    .pricing-card{
        grid-column:1/-1;

        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:10px;
    }


    .layout{
        grid-template-columns:1fr;
    }


    .sidebar{
        position:relative;

        top:0;
    }


    .dashboard-shell{
        grid-template-columns:
            210px
            1fr;
    }


    .dashgrid{
        grid-template-columns:1fr;
    }


    .lesson-shell{
        grid-template-columns:
            240px
            1fr;
    }


    .notes{
        display:none;
    }


    .searchrow{
        grid-template-columns:
            1fr
            1fr
            1fr;
    }


    .navlinks{
        display:none;
    }


    .hero h1{
        font-size:38px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:720px){

    .container{
        width:min(
            100% - 20px,
            var(--max)
        );
    }


    .nav{
        height:62px;

        gap:10px;
    }


    .logo img{
        height:36px;
    }


    .currency{
        padding:8px;
    }


    .grid{
        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }


    .grid > *{
        width:100%;
        max-width:100%;
        min-width:0;
    }


    .searchrow{
        grid-template-columns:1fr;
    }


    /*
     * Keep form controls at 16px.
     *
     * This prevents Safari iOS from automatically
     * zooming when a field receives focus.
     */

    .searchrow input,
    .searchrow select,
    input,
    select,
    textarea,
    button{
        font-size:16px;
    }


    .hero{
        grid-template-columns:1fr;

        padding:16px;
    }


    .hero h1{
        font-size:34px;
    }


    .coverwrap{
        order:-1;
    }


    .pricing-card{
        grid-column:auto;

        display:block;
    }


    .content-grid{
        grid-template-columns:1fr;
    }


    .dashboard-shell{
        grid-template-columns:1fr;
    }


    .learner-sidebar{
        display:none;
    }


    .learner-main{
        padding:14px;
    }


    .continue-card{
        grid-template-columns:
            110px
            1fr;
    }


    .module-item{
        grid-template-columns:1fr;
    }


    .lesson-shell{
        grid-template-columns:1fr;
    }


    .lesson-nav{
        display:none;
    }


    .lesson-main{
        padding:14px;
    }


    .checkout{
        grid-template-columns:1fr;
    }


    .planhero{
        grid-template-columns:1fr;
    }


    .professional-grid{
        grid-template-columns:1fr;
    }


    .mobile-only{
        display:block;
    }


    .accessstrip{
        align-items:flex-start;
    }


    .tabcontent{
        padding:16px;
    }


    /*
     * Course actions remain two equal buttons.
     */

    .course-card > .course-card__actions{
        gap:10px;

        margin-top:0;

        padding:
            0
            16px
            16px;
    }


    .course-card .course-card__button{
        height:42px;

        padding:0 12px;

        font-size:16px;
    }


    .course-card__enrolled-badge{
        top:8px;
        right:8px;
        left:auto;

        width:fit-content;
        max-width:max-content;

        min-height:27px;

        padding:6px 10px;

        font-size:11px;
    }


    .course-card__enrolled-badge::before{
        width:14px;
        height:14px;

        margin-right:5px;

        font-size:9px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:480px){

    .course-card > .course-card__actions{
        gap:8px;

        margin-top:0;

        padding:
            0
            16px
            16px;
    }


    .course-card .course-card__button{
        height:40px;

        padding:0 10px;

        border-radius:6px;

        font-size:16px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media(max-width:320px){

    .course-card > .course-card__actions{
        gap:6px;

        padding:
            0
            16px
            16px;
    }


    .course-card .course-card__button{
        height:38px;

        padding:0 8px;

        font-size:16px;
    }
}