/*==================================================
  Suomio
  style.css

  FINAL COVER VERSION
  Part 1 / 3

  Reset
  Variables
  Base
  Container
  Header
  Hero
  Buttons
  Homepage Foundation
==================================================*/


/*==================================================
  01. RESET
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

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

    background: #F5F8FA;
    color: #25333A;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
textarea,
select {
    font-family: inherit;
}


/*==================================================
  02. VARIABLES
==================================================*/

:root {

    /*----------------------------------------------
      Brand
    ----------------------------------------------*/

    --suomio-blue: #1B5E8A;

    --suomio-blue-dark: #174D70;

    --suomio-blue-light: #7FB1D0;

    --suomio-navy: #25333A;

    --suomio-ink: #202A2F;

    --finland-blue: #1B5E8A;

    --finland-blue-light: #6E9FBD;

    --china-red: #B85450;


    /*----------------------------------------------
      Text
    ----------------------------------------------*/

    --ink: #25333A;

    --text: #43535B;

    --text-muted: #73828A;

    --text-light: #8B989E;


    /*----------------------------------------------
      Surface
    ----------------------------------------------*/

    --white: #FFFFFF;

    --surface: #FFFFFF;

    --background: #F5F8FA;

    --surface-soft: #F1F5F6;

    --surface-blue: #E4EFF3;


    /*----------------------------------------------
      Borders
    ----------------------------------------------*/

    --border: #DCE5E9;

    --border-soft: rgba(
        35,
        52,
        61,
        .08
    );


    /*----------------------------------------------
      Status
    ----------------------------------------------*/

    --success: #3C8A68;

    --warning: #B77A32;

    --danger: #B85A55;


    /*----------------------------------------------
      Shadows
    ----------------------------------------------*/

    --shadow-sm:
        0
        5px
        15px
        rgba(
            30,
            45,
            55,
            .055
        );

    --shadow-md:
        0
        10px
        28px
        rgba(
            30,
            45,
            55,
            .09
        );

    --shadow-lg:
        0
        18px
        42px
        rgba(
            25,
            40,
            48,
            .13
        );


    /*----------------------------------------------
      Radius
    ----------------------------------------------*/

    --radius-sm: 9px;

    --radius-md: 15px;

    --radius-lg: 20px;

    --radius-xl: 26px;


    /*----------------------------------------------
      Transition
    ----------------------------------------------*/

    --transition:
        .25s
        ease;


    /*----------------------------------------------
      Homepage Lesson Card Colors

      Natural Nordic-inspired color palette.
    ----------------------------------------------*/

    --lesson-blue:
        #D7EAF2;

    --lesson-green:
        #D9E8D4;

    --lesson-sand:
        #F3DFC2;

    --lesson-lavender:
        #E4DDF0;

    --lesson-rose:
        #F0D9D5;

    --lesson-mint:
        #D5E9E0;


    /*----------------------------------------------
      Default Lesson Card
    ----------------------------------------------*/

    --lesson-bg:
        #D7EAF2;

    --lesson-deep:
        #1B5E8A;

}

/*==================================================
  03. BASE ELEMENTS
==================================================*/

img {
    display: block;
    max-width: 100%;
}

button {
    border: 0;
    outline: none;
    cursor: pointer;
}

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

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px
        solid
        rgba(
            27,
            94,
            138,
            .25
        );

    outline-offset: 3px;
}


/*==================================================
  04. SELECTION
==================================================*/

::selection {
    background:
        var(--finland-blue);

    color:
        var(--white);
}


/*==================================================
  05. SCROLLBAR
==================================================*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background:
        #EEF2F4;
}

::-webkit-scrollbar-thumb {
    background:
        #C5D0D5;

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #AAB9C0;
}


/*==================================================
  06. CONTAINER
==================================================*/

.container {
    width:
        min(
            1180px,
            calc(
                100% - 48px
            )
        );

    margin:
        0 auto;
}


/*==================================================
  07. HEADER
==================================================*/

.header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

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

    border-bottom:
        1px
        solid
        rgba(
            35,
            52,
            61,
            .08
        );

    backdrop-filter:
        blur(
            16px
        );

    -webkit-backdrop-filter:
        blur(
            16px
        );
}


.header .container {
    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


/*==================================================
  08. LOGO
==================================================*/

.logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--suomio-navy);

    font-size:
        1.35rem;

    font-weight:
        900;

    letter-spacing:
        -.045em;

    transition:
            color
            .25s
            ease;
}

.logo:hover {
    color:
        #DE2910;
}

.logo::before {
    content:
        "";

    width:
        12px;

    height:
        12px;

    flex-shrink:
        0;

    border-radius:
        4px;

    background:
        var(--finland-blue);

    transform:
        rotate(
            45deg
        );
}


/*==================================================
  09. HEADER ACTIONS
==================================================*/

.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


/*==================================================
  10. ICON BUTTON
==================================================*/

.icon-button {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

    color:
        var(--suomio-navy);

    transition:
        background
        var(--transition),

        border-color
        var(--transition),

        color
        var(--transition),

        transform
        var(--transition);
}

.icon-button:hover {
    background:
        #EAF2F5;

    border-color:
        rgba(
            27,
            94,
            138,
            .18
        );

    color:
        var(--finland-blue);

    transform:
        translateY(
            -1px
        );
}


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

.hero {
    padding:
        56px
        0
        48px;
}

.hero .container {
    position:
        relative;

    overflow:
        hidden;

    padding:
        64px
        52px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            #0B3048 0%,
            #124F70 48%,
            #1B6B7A 100%
        );

    color:
        #FFFFFF;

    box-shadow:
        0
        16px
        40px
        rgba(
            11,
            47,
            70,
            0.24
        );
}


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

.hero .container::before {
    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -90px;

    top:
        -120px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}


.hero .container::after {
    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        80px;

    bottom:
        -45px;

    border-radius:
        24px;

    transform:
        rotate(
            35deg
        );

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );
}


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

.hero h1 {
    position:
        relative;

    z-index:
        2;

    max-width:
        720px;

    color:
        #173B5C;

    font-size:
        clamp(
            2.35rem,
            5vw,
            3.8rem
        );

    font-weight:
        780;

    line-height:
        1.08;

    letter-spacing:
        -0.04em;

    text-shadow:
        0
        2px
        5px
        rgba(
            20,
            55,
            75,
            .12
        );

    margin-bottom:
        16px;
}

/*==================================================
  HERO TITLE SECOND LINE
==================================================*/

.hero h1 span {
    display: block;
    margin-top: 4px;
    font-weight: 450;
    letter-spacing: -0.015em;
    opacity: .82;
    color: #1B5E8A;
}

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

.hero p {
    position:
        relative;

    z-index:
        2;

    max-width:
        620px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        1.05rem;

    line-height:
        1.7;

    margin-bottom:
        32px;
}


/*==================================================
  11. HERO
==================================================*/

.hero {
    padding:
        6px
        0
        10px;
}


.hero .container {
    position:
        relative;

    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    padding:
        64px
        58px;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .42
        );

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            #BFDCE8 0%,
            #A9CDDC 52%,
            #C7DFE8 100%
        );

    box-shadow:
        0
        18px
        42px
        rgba(
            42,
            82,
            103,
            .16
        );

}


/*==================================================
  HERO PREMIUM LIGHT
==================================================*/

.hero .container::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -90px;

    top:
        -110px;

    border-radius:
        50%;

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

    box-shadow:
        0
        0
        60px
        rgba(
            255,
            255,
            255,
            .12
        );

}


/*==================================================
  HERO FINLAND BLUE ACCENT
==================================================*/

.hero .container::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        55px;

    bottom:
        -70px;

    border-radius:
        50%;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .28
        );

    background:
        rgba(
            27,
            94,
            138,
            .10
        );

}


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

.hero-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        700px;

}


/*==================================================
  CHINA + FINLAND BRAND MARK
==================================================*/

.hero-brand-mark {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        18px;

    padding:
        7px
        11px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .48
        );

    border-radius:
        999px;

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

    backdrop-filter:
        blur(
            10px
        );

    -webkit-backdrop-filter:
        blur(
            10px
        );

    color:
        #274652;

    font-size:
        .62rem;

    font-weight:
        800;

    letter-spacing:
        .04em;

}


/*==================================================
  FLAG MARKS
==================================================*/

.hero-flag {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        18px;

    overflow:
        hidden;

    border-radius:
        4px;

    box-shadow:
        0
        2px
        6px
        rgba(
            35,
            52,
            61,
            .12
        );

    font-size:
        .8rem;

    line-height:
        1;

}


/*==================================================
  CHINA FLAG MARK
==================================================*/

.hero-flag-china {

    background:
        #DE2910;

}


/*==================================================
  FINLAND FLAG MARK
==================================================*/

.hero-flag-finland {

    background:
        #FFFFFF;

    border:
        1px
        solid
        rgba(
            27,
            94,
            138,
            .16
        );

}


/*==================================================
  FLAG SEPARATOR
==================================================*/

.hero-flag-separator {

    width:
        1px;

    height:
        16px;

    background:
        rgba(
            39,
            70,
            82,
            .25
        );

}


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

.hero h1 {

    position:
        relative;

    z-index:
        3;

    max-width:
        650px;

    color:
        #173B5C;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

    font-weight:
        750;

    line-height:
        1.08;

    letter-spacing:
        -.035em;

    margin-bottom:
        16px;

    text-shadow:
        0
        1px
        1px
        rgba(
            255,
            255,
            255,
            .25
        );

}


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

.hero p {
    position:
        relative;

    z-index:
        2;

    max-width:
        560px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        0.95rem;

    font-weight:
        450;

    line-height:
        1.65;

    letter-spacing:
        0.005em;

    margin-top:
        14px;

    margin-bottom:
        32px;
}


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

.hero .primary-button {

    position:
        relative;

    z-index:
        4;

    margin-top:
        28px;

    background:
        #1B5E8A;

    color:
        #FFFFFF;

    box-shadow:
        0
        8px
        18px
        rgba(
            27,
            94,
            138,
            .20
        );

}


.hero .primary-button:hover {

    background:
        #164D70;

    box-shadow:
        0
        10px
        22px
        rgba(
            27,
            94,
            138,
            .26
        );

}


/*==================================================
  12. HERO DECORATION
==================================================*/

.hero .container::before {
    content:
        "";

    position:
        absolute;

    width:
        270px;

    height:
        270px;

    right:
        -95px;

    top:
        -115px;

    border-radius:
        65px;

    background:
        rgba(
            27,
            94,
            138,
            .13
        );

    transform:
        rotate(
            35deg
        );
}


.hero .container::after {
    content:
        "";

    position:
        absolute;

    width:
        12px;

    height:
        12px;

    right:
        56px;

    top:
        46px;

    border-radius:
        3px;

    background:
        var(--china-red);

    transform:
        rotate(
            45deg
        );
}


/*==================================================
  13. HERO CONTENT
==================================================*/

.hero-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        720px;
}


.hero-label {
    position:
        relative;

    z-index:
        2;

    display:
        inline-block;

    color:
        var(--finland-blue);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}


.hero h1 {
    margin-top:
        16px;

    color:
        #173A4A;

    font-size:
        clamp(
            2.1rem,
            4.6vw,
            3.5rem
        );

    font-weight:
        650;

    line-height:
        1.12;

    letter-spacing:
        -.025em;

    font-style:
        normal;
}


.hero p {
    max-width:
        640px;

    margin-top:
        17px;

    color:
        var(--text);

    font-size:
        .9rem;

    line-height:
        1.7;
}

/*==================================================
  HERO LANGUAGE IDENTITY
==================================================*/

.hero-language-switcher {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

}


.hero-language-card {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px
        12px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius:
        10px;

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

    color:
        #FFFFFF;

    font-size:
        .65rem;

    font-weight:
        800;

}


.hero-language-connector {

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    font-size:
        .75rem;

    font-weight:
        800;

}
/*==================================================
  14. HERO ACTIONS
==================================================*/

.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        26px;
}


/*==================================================
  15. BUTTON SYSTEM
==================================================*/

.primary-button,
.secondary-button,
.text-button {
    font-family:
        inherit;

    cursor:
        pointer;

    transition:
        background
        var(--transition),

        color
        var(--transition),

        border-color
        var(--transition),

        box-shadow
        var(--transition),

        transform
        var(--transition);
}


/*==================================================
16. PRIMARY BUTTON
==================================================*/

.primary-button {
min-height:
42px;

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

padding:
    10px
    18px;

border:
    1px
    solid
    var(--finland-blue);

border-radius:
    11px;

background:
    var(--finland-blue);

color:
    var(--white);

font-size:
    .68rem;

font-weight:
    800;

box-shadow:
    0
    5px
    14px
    rgba(
        27,
        94,
        138,
        .16
    );

}

.primary-button:hover {
background:
var(--suomio-blue-dark);

border-color:
    var(--suomio-blue-dark);

transform:
    translateY(
        -2px
    );

box-shadow:
    0
    8px
    18px
    rgba(
        27,
        94,
        138,
        .22
    );

}


/*==================================================
  17. SECONDARY BUTTON
==================================================*/

.secondary-button {
    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px
        18px;

    border:
        1px
        solid
        rgba(
            27,
            94,
            138,
            .22
        );

    border-radius:
        11px;

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

    color:
        var(--finland-blue);

    font-size:
        .68rem;

    font-weight:
        800;
}


.secondary-button:hover {
    background:
        var(--white);

    border-color:
        var(--finland-blue);

    transform:
        translateY(
            -2px
        );

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


#premiumButton[hidden],
#manageSubscriptionButton[hidden] {
    display: none !important;
}


/*==================================================
  CONTINUE LESSON BUTTON
==================================================*/

.continue-card .secondary-button {
    background:
        #DE2910;

    border-color:
        #DE2910;

    color:
        #FFFFFF;
}

.continue-card .secondary-button:hover {
    background:
        #005B9A;

    border-color:
        #005B9A;

    color:
        #FFFFFF;
}

/*==================================================
  18. TEXT BUTTON
==================================================*/

.text-button {
    padding:
        0;

    background:
        transparent;

    color:
        var(--finland-blue);

    font-size:
        .68rem;

    font-weight:
        800;
}


.text-button:hover {
    color:
        var(--suomio-blue-dark);
}


/*==================================================
  19. SECTION
==================================================*/

section {
    padding:
        42px
        0;
}


/*==================================================
  20. SECTION HEADER
==================================================*/

.section-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}


.section-header h2 {
    color:
        #173B5C;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.65rem
        );

    font-weight:
        900;

    line-height:
        1.2;

    letter-spacing:
        -.045em;
}


.section-header p {
    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        .68rem;

    line-height:
        1.55;
}


/*==================================================
  21. CONTINUE LEARNING
==================================================*/

.continue-card {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        26px
        29px;

    overflow:
        hidden;

    border:
        1px
        solid
        #B8D2E0;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #DCEAF3,
            #BFD8E6
        );

    box-shadow:
        0
        8px
        24px
        rgba(
            27,
            94,
            138,
            .12
        );
}


.continue-card::after {
    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        -35px;

    bottom:
        -45px;

    border-radius:
        30px;

    background:
        rgba(
            27,
            94,
            138,
            .14
        );

    transform:
        rotate(
            35deg
        );
}


.continue-card-content {
    position:
        relative;

    z-index:
        2;
}


.continue-card h3 {
    color:
        #173B5C;

    font-size:
        1rem;

    font-weight:
        850;
}


.continue-card p {
    margin-top:
        5px;

    color:
        #355766;

    font-size:
        .7rem;

    line-height:
        1.55;
}


.continue-card .primary-button {
    position:
        relative;

    z-index:
        2;

    flex-shrink:
        0;

    background:
        #DE2910;

    color:
        #FFFFFF;
}

.continue-card .primary-button:hover {
    background:
        #005B9A;
}

/*==================================================
  22. LESSON GRID FOUNDATION

  IMPORTANT:
  Part 2 will define the final 3-column layout.

  This foundation prevents cards from becoming
  one-line items or losing their card structure.
==================================================*/

.lesson-grid {
    display:
        grid;

    width:
        100%;

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

    gap:
        18px;

    align-items:
        stretch;
}


/*==================================================
  23. LESSON CARD FOUNDATION
==================================================*/

.lesson-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            35,
            52,
            61,
            .08
        );

    border-radius:
        20px;

    background:
        var(--lesson-bg);

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

    transition:
        transform
        var(--transition),

        box-shadow
        var(--transition),

        border-color
        var(--transition);
}


.lesson-card:hover {
    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            35,
            52,
            61,
            .12
        );

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


/*==================================================
  24. LESSON CARD COLOR SYSTEM

  THIS IS THE IMPORTANT FIX.

  Homepage cards now have actual visible colors.

  Do NOT add a white background to
  .lesson-card .lesson-header
  in later CSS.
==================================================*/

.lesson-card:nth-child(
    6n + 1
) {
    --lesson-bg:
        var(--lesson-blue);

    --lesson-deep:
        #1B5E8A;
}


.lesson-card:nth-child(
    6n + 2
) {
    --lesson-bg:
        var(--lesson-green);

    --lesson-deep:
        #55745F;
}


.lesson-card:nth-child(
    6n + 3
) {
    --lesson-bg:
        var(--lesson-sand);

    --lesson-deep:
        #8A6942;
}


.lesson-card:nth-child(
    6n + 4
) {
    --lesson-bg:
        var(--lesson-lavender);

    --lesson-deep:
        #695D7D;
}


.lesson-card:nth-child(
    6n + 5
) {
    --lesson-bg:
        var(--lesson-rose);

    --lesson-deep:
        #875E59;
}


.lesson-card:nth-child(
    6n + 6
) {
    --lesson-bg:
        var(--lesson-mint);

    --lesson-deep:
        #4E7468;
}


/*==================================================
  25. LESSON HEADER

  IMPORTANT:
  The header is transparent so the color from
  .lesson-card remains visible.
==================================================*/

.lesson-header {
    position:
        relative;

    min-height:
        112px;

    padding:
        20px
        21px
        16px;

    background:
        transparent;
}


.lesson-header::after {
    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        70px;

    right:
        -20px;

    top:
        -25px;

    border-radius:
        22px;

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

    transform:
        rotate(
            35deg
        );
}


/*==================================================
  26. LESSON NUMBER
==================================================*/

.lesson-number {
    position:
        relative;

        align-self:
        center;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        31px;

    min-height:
        25px;

    padding:
        0
        8px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .45
        );

    border-radius:
        8px;

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

    color:
        var(--lesson-deep);

    font-size:
        .55rem;

    font-weight:
        850;
}


/*==================================================
  27. LESSON BODY

  Keeps the original V1.0 class name for
  compatibility with existing HTML / JS.
==================================================*/

.lesson-body {
    position:
        relative;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    padding:
        4px
        21px
        18px;

    background:
        transparent;
}


/*==================================================
  28. LESSON TITLE
==================================================*/

.lesson-title {
    position:
        relative;

    z-index:
        2;

    max-width:
        88%;

    color:
        var(--ink);

    font-size:
        1.05rem;

    font-weight:
        900;

    line-height:
        1.25;

    letter-spacing:
        -.04em;
}


/*==================================================
  29. LESSON DESCRIPTION
==================================================*/

.lesson-description {
    position:
        relative;

    z-index:
        2;

    max-width:
        94%;

    color:
        rgba(
            54,
            69,
            77,
            .76
        );

    font-size:
        .67rem;

    font-weight:
        550;

    line-height:
        1.55;
}


/*==================================================
  30. LESSON META
==================================================*/

.lesson-meta {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}


/*==================================================
  31. LESSON LEVEL
==================================================*/

.lesson-level {
    align-self:
        center;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        0
        9px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .35
        );

    border-radius:
        7px;

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

    color:
        var(--lesson-deep);

    font-size:
        .53rem;

    font-weight:
        800;
}


/*==================================================
  32. LESSON STATUS
==================================================*/

.lesson-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--lesson-deep);

    font-size:
        .55rem;

    font-weight:
        800;
}


.lesson-status::before {
    content:
        "";

    width:
        6px;

    height:
        6px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--lesson-deep);
}


/*==================================================
  33. LESSON FOOTER
==================================================*/

.lesson-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        12px
        19px
        16px;

    border-top:
        1px
        solid
        rgba(
            35,
            52,
            61,
            .07
        );

    background:
        rgba(
            255,
            255,
            255,
            .18
        );
}


/*==================================================
  34. LESSON ACTION
==================================================*/

.lesson-card .primary-button {
    min-height:
        34px;

    padding:
        8px
        13px;

    border-radius:
        9px;

    background:
        var(--lesson-deep);

    border-color:
        var(--lesson-deep);

    font-size:
        .58rem;

    box-shadow:
        0
        4px
        10px
        rgba(
            35,
            52,
            60,
            .10
        );
}


.lesson-card .primary-button:hover {
    background:
        var(--suomio-navy);

    border-color:
        var(--suomio-navy);

    box-shadow:
        0
        6px
        13px
        rgba(
            23,
            26,
            28,
            .16
        );
}

/*==================================================
  Suomio V2.1
  style.css

  Part 2 / 3

  Home
  Continue Learning
  Course Catalog
  Lesson Cards
  Premium
  Support
  Footer
  UI States
  Responsive
==================================================*/


/*==================================================
  21. SECTION
==================================================*/

section {
    padding: 48px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.section-header h2 {
    color: #173B5C;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.04em;
}


/*==================================================
  22. CONTINUE LEARNING
==================================================*/

.continue-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 30px 32px;
    overflow: hidden;
    border: 1px solid #A9C6D6;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            #C7DFEC,
            #AFCFDF
        );
    box-shadow:
        0
        10px
        28px
        rgba(27, 94, 138, 0.14);
}

.continue-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -40px;
    top: -55px;
    border-radius: 38px;
    transform: rotate(35deg);
    background: rgba(27, 94, 138, 0.14);
}

.continue-card-content {
    position: relative;
    z-index: 2;
}

.continue-card h2 {
    color: #173B5C;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.continue-card p {
    max-width: 620px;
    margin-top: 7px;
    color: #355766;
    font-size: 0.72rem;
    line-height: 1.6;
}

.continue-card .primary-button {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}


/*==================================================
  23. COURSE CATALOG
==================================================*/

.course-catalog {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 18px;

}


/*==================================================
  24. LESSON CARD
==================================================*/

.lesson-card {
    position: relative;

    display: flex;

    flex-direction:
       column;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        225px;

    overflow:
        hidden;

    border: 1px solid rgba(35, 52, 61, 0.16);
    border-radius: 20px;

background:
    var(--lesson-bg);

    box-shadow:
        0 6px 18px
        rgba(30, 45, 55, 0.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.lesson-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(27, 94, 138, 0.28);

    box-shadow:
        0 10px 24px
        rgba(30, 45, 55, 0.11),
        0 2px 6px
        rgba(27, 94, 138, 0.08);
}


/*==================================================
  LESSON CARD COLOR SYSTEM
  Minimal / Soft / Focused
==================================================*/

.lesson-card:nth-child(6n + 1) {
    --lesson-bg: #DDECF3;
    --lesson-deep: #1B5E8A;
}

.lesson-card:nth-child(6n + 2) {
    --lesson-bg: #E2ECE3;
    --lesson-deep: #47704F;
}

.lesson-card:nth-child(6n + 3) {
    --lesson-bg: #EEE6D8;
    --lesson-deep: #806B45;
}

.lesson-card:nth-child(6n + 4) {
    --lesson-bg: #E8E3EF;
    --lesson-deep: #66557E;
}

.lesson-card:nth-child(6n + 5) {
    --lesson-bg: #EFE1DE;
    --lesson-deep: #875E55;
}

.lesson-card:nth-child(6n + 6) {
    --lesson-bg: #DFEBE5;
    --lesson-deep: #477166;
}

/*==================================================
  26. LESSON CARD TOP
==================================================*/

.lesson-card-top {
    position: relative;
    padding: 19px 20px 0;
    min-height: 42px;

    display: flex;
    justify-content: center;
}

.lesson-number {
    position: relative;

    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 31px;
    padding: 0 9px;

    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.42);

    color: var(--lesson-deep);

    font-size: 0.58rem;
    font-weight: 900;
}


/*==================================================
  27. LESSON STATUS
==================================================*/

.lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lesson-deep);
    font-size: 0.55rem;
    font-weight: 850;
}

.lesson-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lesson-deep);
}

.lesson-card small {
    display: block;
    width: 100%;
    text-align: center;
}

/*==================================================
  28. LESSON CARD CONTENT
==================================================*/

.lesson-card-content {
    position: relative;
    flex: 1;
    padding: 13px 20px 12px;
    text-align: center;
}

.lesson-card-content::before {
    content: "";
    position: absolute;

    width: 82px;
    height: 82px;

    right: -24px;
    top: -18px;

    border-radius: 24px;

    transform: rotate(35deg);

    background: var(--lesson-deep);

    opacity: 0.9;

    pointer-events: none;
}


/*==================================================
  29. LESSON TITLE
==================================================*/

.lesson-title {
    position: relative;
    z-index: 2;
    max-width: 88%;
    margin-top: 10px;
    color: #173B5C;
    font-size: clamp(
        1rem,
        1.45vw,
        1.22rem
    );
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.04em;
}


/*==================================================
  30. LESSON DESCRIPTION
==================================================*/

.lesson-description {
    position: relative;
    z-index: 2;
    max-width: 92%;
    margin-top: 10px;
    color: rgba(54, 69, 77, 0.76);
    font-size: 0.65rem;
    font-weight: 550;
    line-height: 1.55;
}


/*==================================================
  31. LESSON META
==================================================*/

.lesson-meta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.lesson-meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.42);
    color: rgba(38, 52, 60, 0.66);
    font-size: 0.53rem;
    font-weight: 750;
}


/*==================================================
  32. LESSON CARD FOOTER
==================================================*/

.lesson-card-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 19px 17px;
    border-top: 1px solid rgba(35, 52, 60, 0.08);
    background: rgba(255, 255, 255, 0.10);
}


/*==================================================
  33. LESSON ACTION
==================================================*/

.lesson-card .primary-button {
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 9px;
    background: var(--lesson-deep);
    color: #FFFFFF;
    font-size: 0.58rem;
    font-weight: 800;
    box-shadow:
        0 4px 10px
        rgba(27, 94, 138, 0.16);
}

.lesson-card .primary-button:hover {
    background: #171A1C;
    box-shadow:
        0 6px 13px
        rgba(23, 26, 28, 0.18);
}


/*==================================================
34. LESSON ICON
==================================================*/

.lesson-icon {
position:
absolute;

z-index:
    1;

left:
    50%;

transform:
    translateX(-50%);

top:
    26px;

width:
    auto;

height:
    auto;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    none;

border-radius:
    0;

background:
    transparent;

color:
    var(--lesson-deep);

font-size:
    2rem;

line-height:
    1;

opacity:
    .34;

filter:
    none;

box-shadow:
    none;

pointer-events:
    none;

}


/*==================================================
  35. COURSE PROGRESS STRIP
==================================================*/

.lesson-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.28);
}

.lesson-progress span {
    display: block;
    height: 100%;
    width: var(
        --lesson-progress,
        0%
    );
    background: var(--lesson-deep);
}


/*==================================================
  36. COMPLETED LESSON
==================================================*/

.lesson-card.is-completed {
    box-shadow:
        0 8px 22px
        rgba(27, 94, 138, 0.11);
}

.lesson-card.is-completed .lesson-number {
    background: var(--lesson-deep);
    border-color: var(--lesson-deep);
    color: #FFFFFF;
}

.lesson-card.is-completed .lesson-status {
    color: var(--lesson-deep);
}

.lesson-card.is-completed .lesson-status::before {
    background: var(--lesson-deep);
}


/*==================================================
  37. LOCKED LESSON
==================================================*/

.lesson-card.is-locked {
    filter: saturate(0.72);
}

.lesson-card.is-locked .lesson-title {
    color: rgba(37, 51, 58, 0.72);
}

.lesson-card.is-locked .primary-button {
    background: rgba(27, 94, 138, 0.72);
}


/*==================================================
  38. COURSE CATALOG EMPTY STATE
==================================================*/

.course-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 1px dashed #C9D5DA;
    border-radius: 18px;
    background: #F1F5F6;
    color: var(--text-muted);
    text-align: center;
}


/*==================================================
  39. COURSE FILTER BAR
==================================================*/

.course-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 19px;
}

.course-filter-button {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--text-muted);
    font-size: 0.59rem;
    font-weight: 800;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.course-filter-button:hover {
    border-color: var(--finland-blue);
    color: var(--finland-blue);
}

.course-filter-button.is-active {
    border-color: var(--finland-blue);
    background: var(--finland-blue);
    color: var(--white);
}


/*==================================================
  40. PREMIUM SECTION
==================================================*/

.premium-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    min-height: 240px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgba(173, 139, 67, 0.35);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            #20252A,
            #15191C
        );
    color: #FFFFFF;
    box-shadow:
        0 15px 35px
        rgba(20, 23, 25, 0.20);
}

.premium-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -75px;
    top: -105px;
    border-radius: 50%;
    border: 1px solid rgba(203, 167, 87, 0.18);
}

.premium-card::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    right: 38px;
    top: 33px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: #C9A75B;
}

.premium-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.premium-label {
    color: #C9A75B;
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.premium-content h2 {
    margin-top: 8px;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.premium-content p {
    max-width: 620px;
    margin-top: 10px;
    color: #AEB5B9;
    font-size: 0.72rem;
    line-height: 1.65;
}

.premium-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.premium-features li {
    color: #D8DEE1;
    font-size: 0.68rem;
}

.premium-action {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-card .primary-button {
    min-height: 42px;
    padding: 11px 20px;
    border-radius: 10px;
    background: #C9A75B;
    color: #17191B;
    font-weight: 850;
    box-shadow:
        0 5px 14px
        rgba(201, 167, 91, 0.20);
}

.premium-card .primary-button:hover {
    background: #FFFFFF;
    color: #17191B;
}


/*==================================================
  41. SUPPORT
==================================================*/

.support-card {
    position: relative;
    padding: 36px;
    overflow: hidden;
    border: 1px solid rgba(35, 52, 61, 0.07);
    border-radius: 20px;
    background: #FFFFFF;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.support-card h2 {
    color: #173B5C;
    margin-bottom: 12px;
    font-size: 1.4rem;
    font-weight: 900;
}

.support-card p {
    max-width: 620px;
    margin: 0 auto 22px;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.65;
}


/*==================================================
  42. FOOTER
==================================================*/

.footer {
    margin-top: 64px;
    padding: 36px 0;
    border-top: 1px solid var(--border);
    background: #FFFFFF;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer p {
    color: var(--text-muted);
    font-size: 0.68rem;
}


/*==================================================
  43. LOADING OVERLAY
==================================================*/

.loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.88);
    z-index: 9999;
}

.loading-overlay:not([hidden]) {
    display: flex;
}

.loading-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #E5E5E5;
    border-top-color: var(--finland-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/*==================================================
  44. TOAST
==================================================*/

.toast {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform:
        translateX(-50%)
        translateY(100px);
    padding: 14px 24px;
    border-radius: 14px;
    background: #222;
    color: #FFFFFF;
    opacity: 0;
    transition: 0.3s;
    z-index: 9999;
    box-shadow: var(--shadow-md);
}

.toast.show {
    opacity: 1;
    transform:
        translateX(-50%)
        translateY(0);
}


/*==================================================
  45. MODAL
==================================================*/

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.modal[hidden] {
    display: none !important;
}


/*-----------------------------------------
  Modal Content
-----------------------------------------*/

.modal-content {
    position: relative;
    z-index: 10000;

    width: min(520px, 100%);
    padding: 40px;

    border-radius: 24px;

    background: #FFFFFF;

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


/*-----------------------------------------
  Modal Close Button
-----------------------------------------*/

.modal-close {
    position: absolute;

    top: 14px;
    right: 16px;

    z-index: 10001;

    width: 40px;
    height: 40px;

    display: flex;

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

    padding: 0;

    border: none;

    background: transparent;

    color: var(--text-muted);

    font-size: 28px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    border-radius: 50%;

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


.modal-close:hover {

    background: rgba(
        0,
        0,
        0,
        0.06
    );

    color: var(--ink);

}


.modal-close:focus-visible {

    outline: 3px solid
        rgba(
            37,
            99,
            235,
            0.35
        );

    outline-offset: 2px;

}


/*-----------------------------------------
  Modal Content Typography
-----------------------------------------*/

.modal-content h2 {
    margin-bottom: 18px;

    color: var(--ink);

    font-size: 1.8rem;

    font-weight: 900;
}


.modal-content p {
    margin-bottom: 28px;

    color: var(--text-muted);

    line-height: 1.65;
}


/*-----------------------------------------
  Modal Actions
-----------------------------------------*/

.modal-actions {
    display: flex;

    gap: 16px;

    flex-wrap: wrap;
}


/*==================================================
  46. UTILITY
==================================================*/

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.w-100 {
    width: 100%;
}


/*==================================================
  47. ANIMATIONS
==================================================*/

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.35s ease;
}


/*==================================================
  48. SELECTION
==================================================*/

::selection {
    background: var(--finland-blue);
    color: #FFFFFF;
}


/*==================================================
  49. SCROLLBAR
==================================================*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F1F3F6;
}

::-webkit-scrollbar-thumb {
    background: #C9D3E0;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #AEBBCC;
}


/*==================================================
  50. RESPONSIVE — LARGE TABLET
==================================================*/

@media (max-width: 1050px) {

    .lesson-card {
        min-height: 220px;
    }

    .lesson-title {
        font-size: 1.02rem;
    }

}


/*==================================================
  51. RESPONSIVE — TABLET
==================================================*/

@media (max-width: 760px) {

    .continue-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px;
    }

    .premium-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px;
    }

    .premium-action {
        width: 100%;
         justify-content: flex-start;
    }

    .lesson-card {
        min-height: 215px;
        border-radius: 18px;
    }

    .lesson-card-content {
        padding: 15px 16px 11px;
    }

    .lesson-card-footer {
        padding: 10px 16px 14px;
    }

    .lesson-title {
        max-width: 94%;
        font-size: 0.94rem;
    }

    .lesson-description {
        font-size: 0.61rem;
    }

    .lesson-icon {
        width: 34px;
        height: 34px;
        right: 16px;
    }

}


/*==================================================
  52. RESPONSIVE — MOBILE
==================================================*/

@media (max-width: 560px) {

    section {
        padding: 34px 0;
    }

    .lesson-card {
        min-height: 205px;
        border-radius: 17px;
    }

    .lesson-card-top {
        padding: 15px 16px 0;
    }

    .lesson-card-content {
        padding: 14px 16px 10px;
    }

    .lesson-card-footer {
        padding: 10px 16px 14px;
    }

.lesson-title {
    width: 94%;
    max-width: 94%;

    min-height: 3.1em;

    font-size: 0.82rem;
    line-height: 1.25;

    text-align: center;

    margin-top: 6px;
}

.lesson-title {
    width: 94%;
    max-width: 94%;

    min-height: 3.1em;

    text-align: center;
    line-height: 1.2;
}

.lesson-title-number {
    display: block;

    font-size: 0.90rem;
    font-weight: 900;
}

.lesson-title-zh {
    display: block;

    margin-top: 3px;

    font-size: 0.70rem;
    font-weight: 750;

    line-height: 1.35;
}

.lesson-description {
    width: 94%;
    max-width: 94%;

    min-height: 4.5em;

    font-size: 0.76rem;
    line-height: 1.5;

    text-align: center;
}

.lesson-meta {
    justify-content: center;
    width: 100%;
}

    .lesson-card .primary-button {
        min-height: 33px;
        padding: 7px 11px;
    }

    .premium-card {
        min-height: 210px;
        padding: 25px 21px;
        border-radius: 19px;
    }

    .premium-content h2 {
        font-size: 1.55rem;
    }

/*-----------------------------------------
  Premium Payment Plans — Mobile
-----------------------------------------*/

.premium-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.support-card {
    padding: 28px 20px;
}

.footer .container {
    align-items: flex-start;
    flex-direction: column;
}

}

/*==================================================
  53. REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/*==================================================
  END — PART 2 / 3
==================================================*/

/*==================================================
  Suomio V2.1
  style.css

  Part 3 / 3
  Final Lesson Page Override

  Covers:
  - Lesson Page
  - Lesson Hero
  - Lesson Sections
  - Vocabulary
  - Audio
  - Dialogue
  - Listening
  - Examples
  - Grammar
  - Quick Check
  - Premium
  - Quiz
  - Progress
  - Navigation
  - Empty / Error States
  - Responsive
==================================================*/


/*==================================================
  QUICK CHECK
==================================================*/

.quick-check-card{
    width:100%;
    margin-top:24px;
}

.quick-check-question-card{
    width:100%;
    padding:28px;

    background:
         linear-gradient(
             145deg,
             #F4F8FA,
             #EAF2F6
         );

    border:1px solid #C9DDE7;
    border-radius:20px;

    box-shadow:
        0 10px 30px 
        rgba(27,94,138,0.08);

    box-sizing:border-box;
}

.quick-check-progress{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:22px;
    font-size:14px;
    color:#64748b;
}

.quick-check-progress strong{
    color:#0f172a;
    font-weight:700;
}

.quick-check-question{
    margin-bottom:24px;
    font-size:20px;
    line-height:1.6;
    font-weight:700;
    color:#0f172a;
}

.quick-check-options{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.quick-check-option{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;

    background:
        rgba(255,255,255,0.72);

    border:2px solid #D6E3EA;
    border-radius:14px;
    cursor:pointer;
    text-align:left;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.quick-check-option:hover{
    background:#F1F7FA;
    border-color:#8FB8CC;
    transform:translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(27,94,138,0.08);
}

.quick-check-option.selected{
    background:#eff6ff;
    border-color:#2563eb;
    box-shadow:0 4px 14px rgba(37,99,235,0.12);
}

.quick-check-option.correct{
    background:#f0fdf4;
    border-color:#22c55e;
}

.quick-check-option.incorrect{
    background:#fef2f2;
    border-color:#ef4444;
}

.quick-check-option:disabled{
    cursor:default;
}

.quick-check-option-letter{
    width:34px;
    height:34px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e2e8f0;
    color:#334155;
    font-size:14px;
    font-weight:700;
}

.quick-check-option.selected .quick-check-option-letter{
    background:#2563eb;
    color:#ffffff;
}

.quick-check-option.correct .quick-check-option-letter{
    background:#22c55e;
    color:#ffffff;
}

.quick-check-option.incorrect .quick-check-option-letter{
    background:#ef4444;
    color:#ffffff;
}

.quick-check-option-text{
    flex:1;
    color:#1e293b;
    font-size:16px;
    line-height:1.5;
}

.quick-check-option-check{
    width:24px;
    min-width:24px;
    font-size:20px;
    font-weight:700;
    text-align:center;
}

.quick-check-feedback{
    min-height:24px;
    margin-top:18px;
    font-size:15px;
    font-weight:600;
}

.quick-check-feedback.correct{
    color:#16a34a;
}

.quick-check-feedback.incorrect{
    color:#dc2626;
}

.quick-check-question-card .primary-button{
    margin-top:10px;
    min-width:160px;
}

.quick-check-complete{
    padding:36px 28px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(15,23,42,0.06);
}

.quick-check-complete-icon{
    width:64px;
    height:64px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dcfce7;
    color:#16a34a;
    font-size:30px;
    font-weight:700;
}

.quick-check-complete h4{
    margin:0 0 10px;
    color:#0f172a;
    font-size:22px;
}

.quick-check-complete p{
    margin:0 0 20px;
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

.quick-check-score{
    display:inline-block;
    padding:10px 16px;
    background:#f8fafc;
    border-radius:10px;
    color:#475569;
    font-size:14px;
    font-weight:600;
}


/*==================================================
  QUICK CHECK — MOBILE
==================================================*/

@media (max-width:768px){

    .quick-check-question-card{
        padding:20px;
        border-radius:16px;
    }

    .quick-check-question{
        font-size:18px;
    }

    .quick-check-option{
        padding:14px;
    }

    .quick-check-option-text{
        font-size:15px;
    }

    .quick-check-complete{
        padding:28px 20px;
    }

}

/*==================================================
  55. LESSON PAGE
==================================================*/

.lesson-page {
    padding: 34px 0 70px;
}

.lesson-container {
    width: min(940px, calc(100% - 48px));
    margin: 0 auto;
}


/*==================================================
  56. LESSON HERO
==================================================*/

.lesson-hero {
    position: relative;
    min-height: 270px;
    padding: 42px 46px;
    overflow: hidden;

    border: 1px solid #D8E3E8;
    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #E4EFF3,
            #D9E8EE
        );

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

.lesson-hero::before {
    content: "";
    position: absolute;

    width: 190px;
    height: 190px;

    right: -65px;
    top: -70px;

    border-radius: 45px;

    transform: rotate(35deg);

    background: var(
        --lesson-accent,
        #1B5E8A
    );

    opacity: .72;
}

.lesson-hero::after {
    content: "";
    position: absolute;

    width: 10px;
    height: 10px;

    right: 42px;
    top: 34px;

    border-radius: 3px;

    transform: rotate(45deg);

    background: var(--china-red);
}


/*==================================================
  57. LESSON HERO CONTENT
==================================================*/

.lesson-hero-content {
    position: relative;
    z-index: 2;

    max-width: 700px;
}

.lesson-hero-label {
    color: #1B5E8A;

    font-size: .62rem;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.lesson-hero h1 {
    margin-top: 10px;

    color: #123F5A;

    font-size: clamp(
        1.9rem,
        4vw,
        3rem
    );

    font-weight: 900;
    line-height: 1.1;

    letter-spacing: -.055em;
}

.lesson-hero-description {
    max-width: 650px;

    margin-top: 12px;

    color: var(--text);

    font-size: .82rem;
    line-height: 1.65;
}


/*==================================================
  58. LESSON HERO META
==================================================*/

.lesson-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
    margin-top: 20px;
}

.lesson-hero-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 10px;

    border: 1px solid rgba(27, 94, 138, .12);
    border-radius: 8px;

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

    color: var(--suomio-navy);

    font-size: .58rem;
    font-weight: 800;
}


/*==================================================
  59. LESSON HEADER CARD
==================================================

  Compatibility with original V1 HTML.
*/

.lesson-header-card {
    position: relative;

    padding: 36px;

    margin-bottom: 32px;

    overflow: hidden;

    border: 1px solid #D8E3E8;
    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #E4EFF3,
            #D9E8EE
        );

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

.lesson-header-card h1 {
    position: relative;
    z-index: 2;

    margin-bottom: 12px;

    color: #173B5C;

    font-size: clamp(
        1.9rem,
        4vw,
        3rem
    );

    font-weight: 900;
    line-height: 1.1;

    letter-spacing: -.055em;
}

.lesson-header-card p {
    position: relative;
    z-index: 2;

    max-width: 650px;

    color: var(--text);

    font-size: .82rem;
    line-height: 1.65;
}


/*==================================================
  60. LESSON CONTENT SECTION
==================================================*/

.lesson-content-section {
    margin-top: 34px;
}

.lesson-content-section + .lesson-content-section {
    margin-top: 28px;
}


/*==================================================
  61. ORIGINAL LESSON SECTION
==================================================

  Compatibility with original V1 HTML.
*/

.lesson-section {
    position: relative;

    padding: 28px;

    margin-bottom: 24px;

    border: 1px solid rgba(35, 52, 61, .07);
    border-radius: 20px;

    background: var(--white);

    box-shadow:
        0 7px 20px rgba(30, 45, 55, .055);
}


/* Homepage Lessons Card */

.home-lesson-section {

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(127, 177, 208, .18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FBFC 52%,
            #EDF4F7 100%
        );

}


.lesson-section h2 {
    margin-bottom: 20px;

    color: #173B5C;

    font-size: 1.3rem;
    font-weight: 900;

    letter-spacing: -.04em;
}

/*==================================================
  62. CONTENT SECTION HEADER
==================================================*/

.content-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.content-section-title {
    color: #173B5C;

    font-size: 1.3rem;
    font-weight: 900;

    line-height: 1.2;
    letter-spacing: -.04em;
}

.content-section-subtitle {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: .68rem;
    line-height: 1.55;
}


/*==================================================
  63. VOCABULARY LIST
==================================================*/

.vocabulary-list {
    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;
}


/*==================================================
  64. VOCABULARY ITEM
==================================================*/

.vocabulary-item {
    position: relative;

    min-height: 76px;

    display: grid;

    grid-template-columns:
        minmax(160px, .7fr)
        minmax(0, 1.3fr)
        auto;

    align-items: center;

    gap: 20px;

    padding: 15px 21px;

    overflow: hidden;

    border: 1px solid rgba(35, 52, 61, .20);
    border-radius: 15px;

    background: var(--vocab-bg);

    box-shadow:
        0 2px 4px rgba(30, 45, 55, .04),
        0 8px 20px rgba(30, 45, 55, .09);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.vocabulary-item:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 21px rgba(30, 45, 55, .09);
}


/*==================================================
  VOCABULARY COLOR SYSTEM
  Soft / Quiet / Readable
==================================================*/

.vocabulary-item:nth-child(6n + 1) {
    --vocab-bg: #F0F6F8;
}

.vocabulary-item:nth-child(6n + 2) {
    --vocab-bg: #F1F5F1;
}

.vocabulary-item:nth-child(6n + 3) {
    --vocab-bg: #F6F3ED;
}

.vocabulary-item:nth-child(6n + 4) {
    --vocab-bg: #F3F1F6;
}

.vocabulary-item:nth-child(6n + 5) {
    --vocab-bg: #F6F1EF;
}

.vocabulary-item:nth-child(6n + 6) {
    --vocab-bg: #EFF4F2;
}


/*==================================================
  66. VOCABULARY WORD
==================================================*/

.vocabulary-word {
    color: #173B5C;

    font-size: .92rem;
    font-weight: 900;

    line-height: 1.3;
}

.vocabulary-word-fi {
    color: #174A70;

    font-size: .95rem;
    font-weight: 850;
}

.vocabulary-word-zh {
    color:  #A34F4A;

    font-size: .74rem;
    font-weight: 750;
}


/*==================================================
  67. ORIGINAL VOCABULARY TRANSLATION
==================================================*/

.vocabulary-translation {
    color: var(--text-muted);

    font-size: .72rem;
    line-height: 1.55;
}


/*==================================================
  68. VOCABULARY EXAMPLE
==================================================*/

.vocabulary-example {
    color: var(--text);

    font-size: .68rem;
    line-height: 1.55;
}

.vocabulary-example strong {
    color: var(--suomio-navy);

    font-weight: 800;
}


/*==================================================
  69. AUDIO BUTTON
==================================================*/

.audio-button {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(27, 94, 138, .13);
    border-radius: 11px;

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

    color: var(--finland-blue-light);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.audio-button:hover {
    background: var(--finland-blue);
    color: var(--white);

    transform: scale(1.04);
}


/*==================================================
  70. DIALOGUE
==================================================*/

.dialogue-list {
    display: grid;
    gap: 13px;
}

.dialogue-item {
    position: relative;

    padding: 8px 18px;

    overflow: hidden;

    border: 1px solid rgba(35, 52, 61, .07);

    border-left: 4px solid var(--finland-blue);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F6F8F9
        );

    box-shadow:
        0 7px 18px rgba(30, 45, 55, .08);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.dialogue-item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(30, 45, 55, .09);
}

.dialogue-item:nth-child(even) {
    border-left-color: var(--china-red);
}

.dialogue-speaker {
    color: #1B5E8A;

    font-size: .6rem;
    font-weight: 850;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.dialogue-item:nth-child(even) .dialogue-speaker {
    color: #A34F4A;
}

.dialogue-finnish {
    margin-top: 7px;

    color: #173B5C;

    font-size: .86rem;
    font-weight: 750;

    line-height: 1.55;
}

.dialogue-translation {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: .68rem;
    line-height: 1.55;
}


/*==================================================
  71. LISTENING PRACTICE
==================================================*/

.listening-card {
    position: relative;

    min-height: 205px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 31px 34px;

    overflow: hidden;

    border: 1px solid #272D31;
    border-radius: 22px;

    background: #171B1E;

    color: var(--white);

    box-shadow:
        0 15px 38px rgba(15, 20, 23, .23);
}

.listening-card::before {
    content: "";
    position: absolute;

    width: 210px;
    height: 210px;

    right: -65px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .08);
}

.listening-card::after {
    content: "";
    position: absolute;

    width: 8px;
    height: 8px;

    right: 36px;
    bottom: 30px;

    border-radius: 2px;

    transform: rotate(45deg);

    background: var(--china-red);
}


/*==================================================
  72. LISTENING CONTENT
==================================================*/

.listening-content {
    position: relative;
    z-index: 2;
}

.listening-label {
    color: #7FB1D0;

    font-size: .6rem;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.listening-card h2 {
    margin-top: 7px;

    color: #FFFFFF;

    font-size: 1.35rem;
    font-weight: 850;

    letter-spacing: -.04em;
}

.listening-card p {
    max-width: 560px;

    margin-top: 7px;

    color: #AAB5BA;

    font-size: .7rem;
    line-height: 1.6;
}


/*==================================================
  73. LISTENING ACTION
==================================================*/

.listening-action {
    position: relative;
    z-index: 2;

    margin-top: 18px;
}

.listening-action .primary-button {
    background: var(--finland-blue);
}

.listening-action .primary-button:hover {
    background: #FFFFFF;
    color: #171B1E;
}


/*==================================================
  74. EXAMPLES
==================================================*/

.examples-list {
    display: grid;
    grid-template-columns: 1fr;

    gap: 11px;
}

.example-card {
    position: relative;

    padding: 19px 21px;

    border: 1px solid rgba(35, 52, 61, .06);
    border-radius: 15px;

    background: var(--example-bg);

    box-shadow:
        0 5px 15px rgba(30, 45, 55, .055);
}

.example-card:nth-child(4n + 1) {
    --example-bg: #F1F6F8;
}

.example-card:nth-child(4n + 2) {
    --example-bg: #F2F5F0;
}

.example-card:nth-child(4n + 3) {
    --example-bg: #F6F3ED;
}

.example-card:nth-child(4n + 4) {
    --example-bg: #F4F1F4;
}

.example-label {
    color: var(--finland-blue);

    font-size: .56rem;
    font-weight: 850;

    letter-spacing: .10em;
    text-transform: uppercase;
}

.example-finnish {
    margin-top: 7px;

    color: #173B5C;

    font-size: .82rem;
    font-weight: 750;

    line-height: 1.6;
}

.example-translation {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: .68rem;
}


/*==================================================
  75. GRAMMAR NOTES
==================================================*/

.grammar-notes {
    display: grid;
    gap: 7px;
}

.grammar-card {
    position: relative;

    padding: 8px 14px;

    overflow: hidden;

    border: 1px solid rgba(35, 52, 61, .07);
    border-radius: 17px;

    background: var(--grammar-bg);

    box-shadow:
        0 7px 18px rgba(30, 45, 55, .06);
}

.grammar-card:nth-child(4n + 1) {
    --grammar-bg: #EEF5F8;
}

.grammar-card:nth-child(4n + 2) {
    --grammar-bg: #F0F4EF;
}

.grammar-card:nth-child(4n + 3) {
    --grammar-bg: #F5F2EB;
}

.grammar-card:nth-child(4n + 4) {
    --grammar-bg: #F2F0F5;
}

.grammar-title {
    color: #173B5C;

    font-size: .92rem;
    font-weight: 850;
}

.grammar-description {
    margin-top: 2px;

    color: var(--text);

    font-size: .7rem;
    line-height: 1.4;
}

.grammar-example,
.grammar-pattern {
    margin-top: 4px;

    padding: 6px 10px;

    border-radius: 10px;

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

    color: #174A70;

    font-size: .7rem;
    font-weight: 750;
}

.grammar-pattern {
    overflow-x: auto;

    font-family:
        Consolas,
        "Courier New",
        monospace;
}


/*==================================================
  76. QUICK CHECK
==================================================*/

.quick-check {
    position: relative;

    min-height: 220px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px 33px;

    overflow: hidden;

    border: 1px solid #E4D8D2;
    border-radius: 22px;

    background: #F1E9E5;

    box-shadow:
        0 10px 28px rgba(70, 51, 44, .10);
}

.quick-check::before {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;

    right: -55px;
    bottom: -75px;

    border-radius: 40px;

    transform: rotate(35deg);

    background: #B8897D;

    opacity: .52;
}

.quick-check::after {
    content: "";
    position: absolute;

    width: 10px;
    height: 10px;

    right: 35px;
    top: 32px;

    border-radius: 3px;

    transform: rotate(45deg);

    background: var(--finland-blue);
}

.quick-check-content {
    position: relative;
    z-index: 2;
}

.quick-check-label {
    color: #8D5148;

    font-size: .6rem;
    font-weight: 850;

    letter-spacing: .11em;
    text-transform: uppercase;
}

.quick-check h2 {
    margin-top: 7px;

    color: #563F39;

    font-size: 1.35rem;
    font-weight: 900;

    letter-spacing: -.04em;
}

.quick-check p {
    max-width: 560px;

    margin-top: 7px;

    color: #6C5B55;

    font-size: .7rem;
    line-height: 1.6;
}

.quick-check .primary-button {
    margin-top: 18px;

    background: var(--finland-blue);
}


/*==================================================
  77. QUIZ CARD
==================================================*/

.quiz-card {
    position: relative;

    padding: 24px;

    margin-bottom: 24px;

    border: 1px solid rgba(35, 52, 61, .07);
    border-radius: 18px;

    background: var(--white);

    box-shadow:
        0 7px 20px rgba(30, 45, 55, .055);
}

.quiz-question {
    margin-bottom: 20px;

    color: #173B5C;

    font-size: 1.05rem;
    font-weight: 800;

    line-height: 1.5;
}

.quiz-options {
    display: grid;
    gap: 10px;
}

.quiz-option {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #FFFFFF;

    color: var(--text);

    text-align: left;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.quiz-option:hover {
    background: #F1F6F8;

    border-color: rgba(27, 94, 138, .25);

    transform: translateY(-1px);
}

.quiz-option.correct {
    background: #EAF7F0;
    border-color: var(--success);
}

.quiz-option.wrong {
    background: #FDEDED;
    border-color: var(--danger);
}


/*==================================================
  78. PREMIUM CARD
==================================================*/

.premium-card {
    position: relative;

    min-height: 115px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 16px 34px;

    overflow: hidden;

    border: 1px solid rgba(173, 139, 67, .35);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #20252A,
            #15191C
        );

    color: #FFFFFF;

    box-shadow:
        0 15px 35px rgba(20, 23, 25, .20);
}

.premium-card::before {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    right: -75px;
    top: -105px;

    border-radius: 50%;

    border: 1px solid rgba(203, 167, 87, .18);
}

.premium-card::after {
    content: "";
    position: absolute;

    width: 9px;
    height: 9px;

    right: 38px;
    top: 33px;

    border-radius: 2px;

    transform: rotate(45deg);

    background: #C9A75B;
}

.premium-content {
    position: relative;
    z-index: 2;
}

.premium-label {
    color: #C9A75B;

    font-size: .61rem;
    font-weight: 850;

    letter-spacing: .11em;
    text-transform: uppercase;
}

.premium-card h2 {
    margin-top: 3px;

    color: #FFFFFF;

    font-size: 1.35rem;
    font-weight: 900;

    letter-spacing: -.04em;
}

.premium-card p {
    max-width: 550px;

    margin-top: 3px;

    color: #AEB5B9;

    font-size: .7rem;
    line-height: 1.6;
}

.premium-card .primary-button {
    margin-top: 10px;

    background: #C9A75B;
    color: #17191B;

    box-shadow:
        0 5px 14px rgba(201, 167, 91, .20);
}

.premium-card .primary-button:hover {
    background: #FFFFFF;
    color: #17191B;
}

/*==================================================
  78.5. PREMIUM PAYMENT PLANS
==================================================*/

/* 付款方案外层 */
.premium-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin-top: 24px;
}

/* 单个付款方案 */
.premium-plan {
    position: relative;

    padding: 22px 20px;

    border: 1px solid rgba(201, 167, 91, .42);
    border-radius: 18px;

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

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

/* Hover */
.premium-plan:hover {
    transform: translateY(-3px);

    border-color: rgba(201, 167, 91, .75);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .18);
}

/* 推荐方案 */
.premium-plan.featured {
    border: 1.5px solid #C9A75B;

    background:
        linear-gradient(
            145deg,
            rgba(201, 167, 91, .12),
            rgba(255, 255, 255, .04)
        );
    box-shadow:
        0 0 0 1px rgba(201, 167, 91, .08),
        0 10px 28px rgba(201, 167, 91, .10);
}

/* 推荐标签 */
.premium-plan-badge {
    position: absolute;

    top: -10px;
    right: 16px;

    padding: 4px 9px;

    border-radius: 999px;

    background: #C9A75B;

    color: #17191B;

    font-size: .5rem;
    font-weight: 850;

    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 方案名称 */
.premium-plan-title {
    color: #FFFFFF;

    font-size: .78rem;
    font-weight: 800;
}

/* 价格 */
.premium-plan-price {
    margin-top: 8px;

    color: #C9A75B;

    font-size: 1.5rem;
    font-weight: 900;
}

/* 价格说明 */
.premium-plan-price span {
    color: #AEB5B9;

    font-size: .62rem;
    font-weight: 600;
}

/* 方案描述 */
.premium-plan-description {
    margin-top: 7px;

    color: #AEB5B9;

    font-size: .62rem;
    line-height: 1.5;
}

/* 付款按钮 */
.premium-plan-button {
    width: 100%;

    margin-top: 16px;
}


/*==================================================
  PREMIUM PAYMENT PLANS — TABLET
==================================================*/

@media (max-width: 760px) {

    .premium-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .premium-plan {
        min-width: 0;
        padding: 18px 10px;
    }

    .premium-plan-price {
        font-size: 1.25rem;
    }

    .premium-plan-badge {
        right: 8px;
        padding: 4px 7px;
    }

}

/*==================================================
  79. PREMIUM FEATURES
==================================================*/

.premium-features {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 16px;
}

.premium-features li {
    color: #D8DEE1;

    font-size: .72rem;
    line-height: 1.5;
}


/*==================================================
  80. PROGRESS BAR
==================================================*/

.progress-bar {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #E8ECF3;
}

.progress-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

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

    transition: width .35s ease;
}


/*==================================================
  81. COURSE PROGRESS STRIP
==================================================*/

.lesson-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: rgba(255, 255, 255, .25);
}

.lesson-progress span {
    display: block;

    height: 100%;

    width: var(--lesson-progress, 0%);

    background: var(--lesson-deep);
}


/*==================================================
  82. CONTENT DIVIDER
==================================================*/

.lesson-divider {
    width: 100%;
    height: 1px;

    margin: 32px 0;

    background: var(--border);
}


/*==================================================
83. LESSON NAVIGATION
==================================================*/

.lesson-navigation {
display: grid;

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

align-items: stretch;

gap: 14px;

margin-top: 34px;

}

.lesson-navigation-button {
min-height: 70px;

display: flex;
flex-direction: column;
justify-content: center;

padding: 15px 19px;

border: 1px solid rgba(23, 74, 112, .14);
border-radius: 14px;

background: var(--white);

box-shadow: 0 1px 3px rgba(23, 74, 112, .04);

transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);

}

.lesson-navigation-button:hover {
transform: translateY(-2px);

border-color: rgba(23, 74, 112, .24);

box-shadow: 0 5px 14px rgba(23, 74, 112, .08);

}

.lesson-navigation-button:hover {
transform: translateY(-2px);

border-color:
    rgba(27, 94, 138, .18);

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

}

.lesson-navigation-label {
color:
var(--text-muted);

font-size:
    .55rem;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    .09em;

}

.lesson-navigation-title {
margin-top:
4px;

color:
    #174A70;

font-size:
    .72rem;

font-weight:
    800;

}

/*-----------------------------------------
Completed Button
-----------------------------------------*/

#completeLesson {
white-space:
nowrap;

text-align:
    center;

}

/*-----------------------------------------
Mobile
-----------------------------------------*/

@media (max-width: 560px) {

.lesson-navigation {

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

    gap:
        8px;

    margin-top:
        28px;

}


.lesson-navigation-button {

    min-height:
        62px;

    padding:
        12px 10px;

    border-radius:
        12px;

}


.lesson-navigation-title {

    font-size:
        .68rem;

}


#completeLesson {

    font-size:
        .68rem;

    white-space:
        nowrap;

}

}


/*==================================================
  84. EMPTY STATE
==================================================*/

.empty-state,
.course-empty {
    min-height: 180px;

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

    padding: 30px;

    border: 1px dashed #C9D5DA;
    border-radius: 18px;

    background: #F1F5F6;

    color: var(--text-muted);

    text-align: center;
}

.empty-state h3 {
    margin-bottom: 12px;

    color: #173B5C;
}


/*==================================================
  85. ERROR STATE
==================================================*/

.error-state {
    min-height: 180px;

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

    padding: 40px 24px;

    border: 1px solid rgba(244, 67, 54, .12);
    border-radius: 18px;

    background: #FDEDED;

    color: var(--danger);

    text-align: center;
}


/*==================================================
  86. LESSON PAGE RESPONSIVE
==================================================*/

@media (max-width: 760px) {

    .lesson-container {
        width: calc(100% - 32px);
    }

    .lesson-hero {
        padding: 34px 28px;
        border-radius: 22px;
    }

    .lesson-header-card {
        padding: 30px 25px;
        border-radius: 22px;
    }

    .vocabulary-item {
        grid-template-columns:
            minmax(120px, .7fr)
            minmax(0, 1.3fr)
            auto;

        gap: 12px;

        padding: 14px 16px;
    }

    .listening-card,
    .quick-check,
    .premium-card {
        padding: 27px 25px;
    }

}


/*==================================================
87. LESSON PAGE MOBILE
==================================================*/

@media (max-width: 560px) {

.lesson-page {
padding: 24px 0 50px;
}

.lesson-container {
width: calc(100% - 28px);
}

.lesson-hero {
min-height: 250px;

padding: 29px 22px;

border-radius: 20px;

}

.lesson-hero h1 {
font-size: 1.8rem;
}

.lesson-hero-description {
font-size: .72rem;
}

.lesson-header-card {
padding: 27px 21px;
border-radius: 20px;
}

.lesson-header-card h1 {
font-size: 1.8rem;
}

.content-section-header {
align-items: flex-start;

flex-direction: column;

gap: 5px;

}

.content-section-title {
font-size: 1.15rem;
}

.lesson-section {
padding: 22px 18px;
border-radius: 18px;
}

/*=========================================
Vocabulary Item
=========================================*/

.vocabulary-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        max-content;

    grid-template-rows:
        auto
        auto;

    grid-template-areas:
        "finnish english"
        "chinese chinese";

    column-gap: 0;

    row-gap: 4px;

    min-height: 0;

    padding: 12px 20px;

    align-items: center;
}


/* Finnish */

.vocabulary-finnish {
    grid-area: finnish;

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

}

.vocabulary-finnish span {
    white-space: nowrap;

}

.vocabulary-finnish span {

    font-size: 1.05rem;
    font-weight: 650;

    line-height: 1.35;

    letter-spacing: -.01em;
}


/* English */

.vocabulary-english {
    grid-area: english;

    align-self: center;

    justify-self: end;

    text-align: right;

    white-space: nowrap;

    font-size: 1.05rem;

    font-weight: 400;

    line-height: 1.35;

    margin-left: 0px;
}


/* Chinese */

.vocabulary-chinese {
    grid-area: chinese;

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    width: 100%;

}

.vocabulary-chinese span {
    font-size: 0.98rem;

    font-weight: 400;

    line-height: 1.35;

    white-space: nowrap;
}


/* Audio buttons */

.vocabulary-finnish .audio-button,
.vocabulary-chinese .audio-button {
    width: 35px;

    height: 35px;

    flex-shrink: 0;
}


/* Example */

.vocabulary-example {
    grid-column: 1 / -1;

    grid-row: 3;

    margin-top: 6px;
}

}


/*==================================================
  88. REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }

}


/*==================================================
  END
  Suomio V2.1
  Part 3 / 3
==================================================*/

/*==================================================
  LEGAL & USER INFORMATION
==================================================*/

.legal-section {
    padding: 28px 0 34px;
}

.legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    text-align: center;
}

.legal-link {
    color: var(--text-muted);

    font-size: .62rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        color var(--transition);
}

.legal-link:hover {
    color: var(--finland-blue);
}

.legal-divider {
    color: #C7CED2;

    font-size: .62rem;
}

.copyright {
    margin-top: 12px;

    color: #A4ADB2;

    font-size: .58rem;

    text-align: center;
}

/*==================================================
  LOGIN / AUTH PAGE
==================================================*/

.auth-page{
    min-height:
        calc(
            100vh - 72px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        48px
        24px
        64px;

    background:
        linear-gradient(
            180deg,
            #F5F8FA 0%,
            #EEF4F6 100%
        );
}


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

.auth-container{
    width:
        100%;

    max-width:
        460px;

    margin:
        0 auto;
}


/*==================================================
  AUTH CARD
==================================================*/

.auth-card{
    width:
        100%;

    padding:
        42px
        40px
        34px;

    border:
        1px
        solid
        rgba(
            35,
            52,
            61,
            .09
        );

    border-radius:
        24px;

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

    box-shadow:
        0
        20px
        50px
        rgba(
            30,
            45,
            55,
            .09
        );
}


/*==================================================
  AUTH TITLE
==================================================*/

.auth-card h1{
    margin:
        0
        0
        10px;

    color:
        #173B5C;

    font-size:
        2rem;

    font-weight:
        850;

    line-height:
        1.15;

    letter-spacing:
        -.04em;

    text-align:
        center;
}


/*==================================================
  AUTH DESCRIPTION
==================================================*/

.auth-description{
    max-width:
        330px;

    margin:
        0
        auto
        32px;

    color:
        var(--text-muted);

    font-size:
        .82rem;

    line-height:
        1.65;

    text-align:
        center;
}


/*==================================================
  FORM GROUP
==================================================*/

.auth-card .form-group{
    margin-bottom:
        20px;
}


.auth-card .form-group label{
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--ink);

    font-size:
        .72rem;

    font-weight:
        800;
}


/*==================================================
  INPUT
==================================================*/

.auth-card .form-group input{
    width:
        100%;

    height:
        50px;

    padding:
        0
        15px;

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

    border-radius:
        11px;

    background:
        #F8FAFB;

    color:
        var(--ink);

    font-size:
        .8rem;

    outline:
        none;

    transition:
        border-color
        .2s
        ease,
        box-shadow
        .2s
        ease,
        background
        .2s
        ease;
}


.auth-card .form-group input::placeholder{
    color:
        #98A5AB;
}


.auth-card .form-group input:focus{
    border-color:
        var(--finland-blue);

    background:
        #FFFFFF;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            27,
            94,
            138,
            .10
        );
}

/*==================================================
  PASSWORD TOGGLE
==================================================*/

.auth-card .password-field{
    position:
        relative;
}

.auth-card .password-field input{
    padding-right:
        48px;
}

.auth-card .password-toggle{
    position:
        absolute;

    top:
        50%;

    right:
        12px;

    transform:
        translateY(-50%);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        1rem;

    line-height:
        1;

    opacity:
        .72;
}

.auth-card .password-toggle:hover{
    opacity:
        1;
}

.auth-card .password-toggle:focus-visible{
    outline:
        2px
        solid
        var(--finland-blue);

    outline-offset:
        2px;

    border-radius:
        6px;
}


/*==================================================
  PREMIUM CONSENT
==================================================*/

.premium-consent{
    margin-top:
        14px;

    padding:
        12px
        14px;

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

    border-radius:
        10px;

    background:
        #F8FAFB;
}

.premium-consent label{
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    cursor:
        pointer;

    color:
        var(--ink);

    font-size:
        .72rem;

    line-height:
        1.5;
}

.premium-consent input{
    width:
        16px;

    height:
        16px;

    margin-top:
        2px;

    flex:
        0
        0
        auto;
}


/*==================================================
  FORGOT PASSWORD
==================================================*/

.auth-options{
    display:
        flex;

    justify-content:
        flex-end;

    margin:
        -6px
        0
        22px;
}


.auth-options a{
    color:
        var(--finland-blue);

    font-size:
        .7rem;

    font-weight:
        750;
}


.auth-options a:hover{
    text-decoration:
        underline;
}


/*==================================================
  LOGIN BUTTON
==================================================*/

.auth-card #loginSubmitButton{
    width:
        100%;

    min-height:
        50px;

    margin:
        0;

    font-size:
        .75rem;

    border-radius:
        11px;
}

/*==================================================
  AUTH FORM BUTTON
==================================================*/

.auth-card form .primary-button {
    display: flex;

    width: 100%;

    justify-content: center;

    margin-left: auto;
    margin-right: auto;
}


/*==================================================
  ERROR MESSAGE
==================================================*/

.auth-message{
    margin-bottom:
        16px;

    padding:
        11px
        13px;

    border-radius:
        10px;

    font-size:
        .7rem;

    line-height:
        1.5;
}


.error-message{
    border:
        1px
        solid
        rgba(
            184,
            90,
            85,
            .20
        );

    background:
        rgba(
            184,
            90,
            85,
            .08
        );

    color:
        var(--danger);
}


/*==================================================
  REGISTER LINK
==================================================*/

.auth-switch{
    margin:
        26px
        0
        0;

    padding-top:
        23px;

    border-top:
        1px
        solid
        rgba(
            35,
            52,
            61,
            .08
        );

    color:
        var(--text-muted);

    font-size:
        .72rem;

    line-height:
        1.6;

    text-align:
        center;
}


.auth-switch a{
    margin-left:
        4px;

    color:
        var(--finland-blue);

    font-weight:
        800;
}


.auth-switch a:hover{
    text-decoration:
        underline;
}


/*==================================================
  BACK LINK
==================================================*/

.auth-back{
    display:
        block;

    width:
        max-content;

    margin:
        22px
        auto
        0;

    color:
        var(--text-muted);

    font-size:
        .7rem;

    font-weight:
        700;

    transition:
        color
        .2s
        ease;
}


.auth-back:hover{
    color:
        var(--finland-blue);
}


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

@media(
    max-width: 768px
){

    .auth-page{
        align-items:
            flex-start;

        padding:
            28px
            16px
            48px;
    }


    .auth-card{
        padding:
            34px
            22px
            28px;

        border-radius:
            20px;
    }


    .auth-card h1{
        font-size:
            1.7rem;
    }

}