:root {
    --site-content-width: 1000px;
}

html,
body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

@media (min-width: 2000px) {
    :root {
        --site-content-width: 1200px;
    }
}

.site-container {
    max-width: var(--site-content-width);
}

.public-container {
    max-width: 1200px;
}

.public-container .content-page {
    max-width: 1200px;
}

.public-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (max-width: 991.98px) {
    .dashboard-site-header .navbar .site-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .dashboard-site-header .navbar-brand {
        grid-column: 2;
        justify-self: center;
        margin: 0;
    }

    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background-color: transparent;
        box-shadow: none;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(36, 87, 197, 0.18);
    }

    header:not(.dashboard-site-header) .navbar-toggler {
        margin-right: 0.75rem;
    }

    .dashboard-site-header .navbar-toggler {
        grid-column: 1;
        justify-self: start;
    }

    .dashboard-site-header .navbar .site-container > .order-lg-2 {
        grid-column: 3;
        justify-self: end;
    }

    .dashboard-site-header #mobile-menu {
        grid-column: 1 / -1;
        width: 100%;
    }

    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.3rem;
        background-image: none;
        border-top: 2px solid var(--bs-primary);
        border-bottom: 2px solid var(--bs-primary);
        position: relative;
    }

    .navbar-toggler-icon::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 2px solid var(--bs-primary);
        transform: translateY(-50%);
    }

    #mobile-menu .navbar-nav {
        align-items: center;
        padding: 1rem 0 0.75rem;
    }

    #mobile-menu .nav-link {
        padding: 0.5rem 1rem;
        font-size: 1.15rem;
        line-height: 1.35;
        text-align: center;
    }
}

.home-hero {
    padding: 2rem 1rem 4rem;
}

.home-check-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bs-success);
    color: var(--bs-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.full-bleed-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.full-bleed-section > .public-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.reading-is-not-enough {
    padding: 4rem 1rem;
    background-color: #29abe0;
}

.practice-way-section {
    padding: 3.5rem 1rem 4rem;
    background-color: var(--bs-white);
}

.home-pricing-section {
    padding: 4rem 1rem;
    background-color: #29abe0;
}

.home-pricing-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--bs-white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.home-pricing-card {
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--bs-white);
    box-shadow: 0 1rem 2.5rem rgba(24, 62, 92, 0.18);
}

.home-benefit-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    min-height: 12rem;
    padding: 2rem 1.75rem;
    border-radius: 1rem;
    background-color: var(--bs-white);
}

.home-benefit-icon {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    color: var(--bs-white);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.home-benefit-icon-memory {
    background-color: #8f63d8;
}

.home-benefit-icon-answer {
    background-color: #ff6464;
}

.home-benefit-icon-time {
    background-color: #ffc107;
}

.home-benefit-icon-target {
    background-color: var(--bs-success);
}

.home-benefit-card-inline {
    display: block;
}

.home-benefit-card-title {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.reading-is-not-enough .home-benefit-card h3 {
    font-size: 1.35rem;
    line-height: 1.25;
}

.reading-is-not-enough .home-benefit-card .fs-5 {
    font-size: 1.15rem !important;
    line-height: 1.55;
}

.practice-way-section .home-benefit-card {
    display: block;
    min-height: 12rem;
    border: 1px solid #e8eef3;
    box-shadow: 0 1rem 2.5rem rgba(24, 62, 92, 0.08);
}

.home-practice-card-title {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    line-height: 1.25;
}

.practice-way-section .home-benefit-card .fs-5 {
    font-size: 1.15rem !important;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .home-hero {
        padding: 4rem 1.5rem 5rem;
    }
}

@media (max-width: 767.98px) {
    .home-hero {
        padding: 0.75rem 1rem 3rem;
    }

    .home-hero .row {
        --bs-gutter-y: 1.5rem;
    }

    .home-hero img {
        max-width: 96%;
        display: block;
        margin: 0 auto;
    }

    .reading-is-not-enough {
        padding: 3rem 1.75rem;
    }

    .practice-way-section {
        padding: 2.5rem 1.75rem;
    }

    .home-pricing-section {
        padding: 3rem 1.75rem;
    }

    .reading-is-not-enough h2 {
        margin-bottom: 2.5rem !important;
        font-size: 2.2rem;
        line-height: 1.15;
    }

    .practice-way-section h2 {
        margin-bottom: 2.5rem !important;
        font-size: 2.2rem;
        line-height: 1.15;
    }

    .home-benefit-card {
        grid-template-columns: auto 1fr;
        gap: 1rem;
        align-items: start;
        min-height: 0;
        padding: 1.75rem 1.5rem;
        border-radius: 0.875rem;
    }

    .home-benefit-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
        font-size: 1.35rem;
    }

    .home-benefit-card h3 {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .home-benefit-card .fs-5 {
        font-size: 1.05rem !important;
        line-height: 1.55;
    }

    .reading-is-not-enough .row {
        --bs-gutter-y: 1.5rem;
    }

    .practice-way-section .row {
        --bs-gutter-y: 1.25rem;
    }

    .practice-way-section .home-benefit-card {
        min-height: 0;
    }
}

.auth-panel {
    max-width: 520px;
}

.hp-field {
    display: none;
}

.footer-link-dot {
    font-size: 1.9rem;
    line-height: 1;
}

.user-menu-toggle {
    color: inherit;
    text-decoration: none;
}

.user-menu-toggle::after {
    display: none;
}

.user-avatar {
    display: block;
    width: 2.0rem;
    height: 2.0rem;
    border: 1px solid #b0b6bd;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 36%, #b0b6bd 0 19%, transparent 20%),
        radial-gradient(circle at 50% 112%, #b0b6bd 0 43%, transparent 44%);
}

.user-avatar:hover {
    border-color: var(--bs-primary);
    background:
        radial-gradient(circle at 50% 36%, var(--bs-primary) 0 19%, transparent 20%),
        radial-gradient(circle at 50% 112%, var(--bs-primary) 0 43%, transparent 44%);    
}

.content-page {
    max-width: var(--site-content-width);
}

.public-container .blog-article-page {
    max-width: 1000px;
}

.article-thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-body {
    line-height: 1.7;
}

.article-body img {
    max-width: 100%;
    height: auto;
}

.article-body table {
    width: 100%;
    margin-bottom: 1rem;
}

.cookie-notice {
    bottom: 1rem;
    z-index: 1080;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
}