@import '_content/InteractiveReader.ePUB/InteractiveReader.ePUB.3wg0gi61ox.bundle.scp.css';

/* /Components/Admin/Pages/BookList.razor.rz.scp.css */
.book-card-modern[b-joa2x346nw] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

    .book-card-modern:hover[b-joa2x346nw] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }

.book-cover-container[b-joa2x346nw] {
    position: relative;
    aspect-ratio: 2/2;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.book-cover-image[b-joa2x346nw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.book-card-modern:hover .book-cover-image[b-joa2x346nw] {
    transform: scale(1.05);
}

.book-cover-placeholder[b-joa2x346nw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.book-overlay[b-joa2x346nw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-card-modern:hover .book-overlay[b-joa2x346nw] {
    opacity: 1;
}

.book-actions[b-joa2x346nw] {
    display: flex;
    gap: 0.5rem;
}

    .book-actions .btn[b-joa2x346nw] {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

        .book-actions .btn:hover[b-joa2x346nw] {
            transform: scale(1.1);
        }

.book-info[b-joa2x346nw] {
    padding: 1.25rem;
}

.book-title-modern[b-joa2x346nw] {
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

    .book-title-modern a:hover[b-joa2x346nw] {
        color: #3b82f6 !important;
    }

.book-author[b-joa2x346nw] {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.book-description[b-joa2x346nw] {
    font-size: 0.875rem;
    line-height: 1.4;
}

.book-stats[b-joa2x346nw] {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.75rem;
}

.book-badges[b-joa2x346nw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

    .book-badges .badge[b-joa2x346nw] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }
/* /Components/Admin/Pages/CacheManagement.razor.rz.scp.css */
/* Cache Management Page Styles */

.cache-management-container[b-hueb41pop3] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Action Cards */
.cache-action-card[b-hueb41pop3] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cache-action-card:hover[b-hueb41pop3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Stat Cards */
.cache-stat-card[b-hueb41pop3] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #0d6efd;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.cache-stat-card:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-left-width: 6px;
}

.cache-stat-value[b-hueb41pop3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
}

.cache-stat-label[b-hueb41pop3] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Action Buttons */
.btn-cache-danger[b-hueb41pop3] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-cache-danger:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.btn-cache-warning[b-hueb41pop3] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border: none;
    color: #212529;
    transition: all 0.3s ease;
}

.btn-cache-warning:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.btn-cache-info[b-hueb41pop3] {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-cache-info:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #0aa2c0 0%, #099fbc 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.4);
}

/* Modal Enhancements */
.modal.show[b-hueb41pop3] {
    animation: fadeIn-b-hueb41pop3 0.2s ease;
}

@keyframes fadeIn-b-hueb41pop3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-hueb41pop3] {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* Alert Enhancements */
.alert[b-hueb41pop3] {
    border-left: 4px solid;
    border-radius: 0.5rem;
    animation: slideDown-b-hueb41pop3 0.3s ease;
}

@keyframes slideDown-b-hueb41pop3 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-hueb41pop3] {
    border-left-color: #198754;
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.1) 0%, rgba(255,255,255,0) 100%);
}

.alert-danger[b-hueb41pop3] {
    border-left-color: #dc3545;
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, rgba(255,255,255,0) 100%);
}

.alert-info[b-hueb41pop3] {
    border-left-color: #0dcaf0;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.1) 0%, rgba(255,255,255,0) 100%);
}

/* Info Boxes */
.cache-info-box[b-hueb41pop3] {
    border-left: 4px solid #0dcaf0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.cache-info-box h6[b-hueb41pop3] {
    color: #0dcaf0;
    margin-bottom: 0.5rem;
}

/* Loading State */
.btn:disabled[b-hueb41pop3] {
    opacity: 0.65;
    cursor: not-allowed;
}

.spinner-border-sm[b-hueb41pop3] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cache-stat-value[b-hueb41pop3] {
        font-size: 1.25rem;
    }
    
    .btn-lg[b-hueb41pop3] {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .cache-info-box[b-hueb41pop3] {
        padding: 1rem;
    }
}

/* Icon Styling */
.fas[b-hueb41pop3], .fa[b-hueb41pop3] {
    vertical-align: middle;
}

/* Card Animations */
.card[b-hueb41pop3] {
    animation: fadeInUp-b-hueb41pop3 0.5s ease;
}

@keyframes fadeInUp-b-hueb41pop3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:nth-child(1)[b-hueb41pop3] {
    animation-delay: 0.1s;
}

.card:nth-child(2)[b-hueb41pop3] {
    animation-delay: 0.2s;
}

.card:nth-child(3)[b-hueb41pop3] {
    animation-delay: 0.3s;
}
/* /Components/Layout/GuestFooter.razor.rz.scp.css */
/* Guest footer — scoped. Same paper, ink and navy as GuestNavMenu / GuestLandingPage (Guest Home v8). */

.lp-foot[b-u8fb2uyqig] {
    --lp-foot-ink: #15171a;
    --lp-foot-ink-soft: #4a4d54;
    --lp-foot-blue-deep: #0f3d5c;
    --lp-foot-line: #e5dfd2;

    padding-block: 32px calc(28px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--lp-foot-line);
    background: #faf7f2;
    color: var(--lp-foot-ink);
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.lp-foot:lang(ar)[b-u8fb2uyqig] {
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* No specificity, so single-class rules below (e.g. the tagline's margin) win. */
:where(.lp-foot) :where(p, ul)[b-u8fb2uyqig] {
    margin: 0;
}

:where(.lp-foot) :where(ul)[b-u8fb2uyqig] {
    padding: 0;
    list-style: none;
}

.lp-foot a[b-u8fb2uyqig] {
    color: var(--lp-foot-ink-soft);
    text-decoration: none;
}

.lp-foot a:hover[b-u8fb2uyqig] {
    color: var(--lp-foot-blue-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-foot a:focus-visible[b-u8fb2uyqig] {
    outline: 3px solid #0f3d5c;
    outline-offset: 2px;
    border-radius: 6px;
}

.lp-foot-inner[b-u8fb2uyqig] {
    display: grid;
    gap: 20px;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: 16px;
}

.lp-foot-name[b-u8fb2uyqig] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.lp-foot-name img[b-u8fb2uyqig] {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 10px;
}

.lp-foot-tagline[b-u8fb2uyqig] {
    margin-block-start: 6px;
    max-inline-size: 30em;
    color: var(--lp-foot-ink-soft);
    font-size: 14px;
}

/* The site map: four short columns (two on phones), each a heading and its links. */
.lp-foot-links[b-u8fb2uyqig] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.lp-foot-head[b-u8fb2uyqig] {
    margin: 0 0 2px;
    color: var(--lp-foot-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lp-foot-head:lang(ar)[b-u8fb2uyqig] {
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
}

.lp-foot-langs[b-u8fb2uyqig] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

/* Touch targets: at least 44 × 44px, short labels ("FAQ") included. */
.lp-foot-col a[b-u8fb2uyqig],
.lp-foot-langs a[b-u8fb2uyqig] {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    font-weight: 600;
}

.lp-foot-langs a:lang(ar)[b-u8fb2uyqig] {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* Marked like the header: colour, weight and an underline — not colour alone. */
.lp-foot-langs a[aria-current="true"][b-u8fb2uyqig] {
    color: var(--lp-foot-blue-deep);
    font-weight: 800;
    text-decoration: underline 2px #e0ac3b;
    text-underline-offset: 6px;
}

.lp-foot-copy[b-u8fb2uyqig] {
    color: var(--lp-foot-ink-soft);
    font-size: 13px;
}

/* The home page's phone call to action (#lp-dock in GuestLandingPage) floats over the bottom
   of the page; leave it room, so it never covers the last links. */
@media (max-width: 899.98px) {
    :root:has(.lp-dock) .lp-foot[b-u8fb2uyqig] {
        padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* Tablets: the brand, then the four link columns side by side, each on its own row. */
@media (min-width: 768px) {
    .lp-foot[b-u8fb2uyqig] {
        padding-block: 40px;
    }

    .lp-foot-inner[b-u8fb2uyqig] {
        padding-inline: 32px;
    }

    .lp-foot-links[b-u8fb2uyqig] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Desktop: the brand beside the columns; languages and the copyright under both. */
@media (min-width: 1024px) {
    .lp-foot-inner[b-u8fb2uyqig] {
        grid-template-columns: minmax(13rem, 1fr) minmax(0, 3fr);
        column-gap: 48px;
        align-items: start;
    }

    .lp-foot-langs[b-u8fb2uyqig],
    .lp-foot-copy[b-u8fb2uyqig] {
        grid-column: 1 / -1;
    }
}
/* /Components/Layout/GuestNavMenu.razor.rz.scp.css */
/* ============================================================
   Guest header — scoped styles

   Anonymous visitors only; the signed-in nav (StudentNavMenu) keeps the
   shared student-nav-menu.css styles. None of the global .top-navbar /
   .nav-links-desktop classes are used here on purpose — below 860px those are
   hidden with !important.

   One sticky row everywhere: brand at the inline start, then (home page, wide
   screens) the section links, the language menu, Sign in and the call to
   action. Phones get the short labels ("Free trial") so all four fit at
   360px; on the home page the phone's call to action is the bottom dock of
   GuestLandingPage, so the header drops its own there. Every control is at
   least 44 × 44px.

   Same paper, ink and navy as GuestLandingPage.razor.css (Guest Home v8;
   literal values: the signed-in --skrol-* brand tokens are not these);
   logical properties so the Arabic (RTL) build mirrors for free.
   ============================================================ */

.lp-nav[b-8qj5dhjgff] {
    --lp-nav-blue-deep: #0f3d5c;
    --lp-nav-blue: #0f3d5c;
    --lp-nav-blue-darker: #1a5479;
    --lp-nav-ink: #15171a;
    --lp-nav-ink-soft: #4a4d54;
    --lp-nav-line: #e5dfd2;
    --lp-nav-tint: #f2eee5;
    --lp-nav-gutter: 16px;

    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 4px;
    block-size: 64px;
    padding-inline: var(--lp-nav-gutter);
    background: rgba(250, 247, 242, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--lp-nav-line);
    color: var(--lp-nav-ink);
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.3;
}

.lp-nav a[b-8qj5dhjgff] {
    text-decoration: none;
}

.lp-nav :focus-visible[b-8qj5dhjgff] {
    outline: 3px solid var(--lp-nav-blue);
    outline-offset: -3px;
}

/* --- Skip link --------------------------------------------- */
.lp-nav-skip[b-8qj5dhjgff] {
    position: absolute;
    inset-inline-start: 8px;
    top: 6px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--lp-nav-blue-deep);
    color: #fff;
    font-weight: 700;
    transform: translateY(-160%);
}

.lp-nav-skip:focus[b-8qj5dhjgff] {
    transform: none;
    color: #fff;
}

/* Sliding up only hides it while nothing is above the header; the language
   suggestion bar (.lp-suggest) is, so it is also invisible until focused. */
.lp-nav-skip:not(:focus)[b-8qj5dhjgff] {
    opacity: 0;
    pointer-events: none;
}

/* --- Brand -------------------------------------------------- */
.lp-nav-brand[b-8qj5dhjgff] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-block-size: 44px;
    min-inline-size: 44px;
    margin-inline-end: auto;
    color: var(--lp-nav-ink);
    font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.lp-nav-brand:lang(ar)[b-8qj5dhjgff] {
    letter-spacing: 0;
}

.lp-nav-brand:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-ink);
}

.lp-nav-brand img[b-8qj5dhjgff] {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
}

/* --- Section links (home page, wide screens) ---------------- */
.lp-nav-links[b-8qj5dhjgff] {
    display: none;
}

.lp-nav-links ul[b-8qj5dhjgff] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-nav-links a[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 14px;
    border-radius: 999px;
    color: var(--lp-nav-ink-soft);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.lp-nav-links a:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-ink);
    background: var(--lp-nav-tint);
}

/* --- Language menu ------------------------------------------ */
.lp-lang[b-8qj5dhjgff] {
    position: relative;
    flex-shrink: 0;
}

.lp-lang-btn[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: 8px;
    border-radius: 999px;
    color: var(--lp-nav-ink);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.lp-lang-btn[b-8qj5dhjgff]::-webkit-details-marker {
    display: none;
}

.lp-lang-btn:hover[b-8qj5dhjgff],
.lp-lang[open] > .lp-lang-btn[b-8qj5dhjgff] {
    background: var(--lp-nav-tint);
    color: var(--lp-nav-ink);
}

.lp-lang-btn > .bi-globe2[b-8qj5dhjgff] {
    font-size: 17px;
}

/* The code (EN / AR / SO) at every width but the widest, where the name returns. */
.lp-lang-name[b-8qj5dhjgff] {
    display: none;
}

.lp-lang-name:lang(ar)[b-8qj5dhjgff],
.lp-lang-menu a:lang(ar)[b-8qj5dhjgff] {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

.lp-lang-chev[b-8qj5dhjgff] {
    font-size: 11px;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.lp-lang[open] .lp-lang-chev[b-8qj5dhjgff] {
    transform: rotate(180deg);
}

.lp-lang-menu[b-8qj5dhjgff] {
    position: absolute;
    z-index: 10;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    min-inline-size: 190px;
    padding: 6px;
    border: 1px solid var(--lp-nav-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(15, 61, 92, .38);
}

.lp-lang-menu ul[b-8qj5dhjgff] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-lang-menu a[b-8qj5dhjgff] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 44px;
    padding-inline: 12px;
    border-radius: 10px;
    color: var(--lp-nav-ink);
    font-size: 15px;
    font-weight: 600;
}

.lp-lang-menu a:hover[b-8qj5dhjgff] {
    background: var(--lp-nav-tint);
    color: var(--lp-nav-ink);
}

/* Marked by weight, colour and a check — not colour alone. */
.lp-lang-menu a[aria-current="true"][b-8qj5dhjgff] {
    color: var(--lp-nav-blue-deep);
    font-weight: 800;
}

/* --- Sign in and the call to action -------------------------- */
.lp-nav-signin[b-8qj5dhjgff] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: 8px;
    border-radius: 999px;
    color: var(--lp-nav-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.lp-nav-signin:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-ink);
    background: var(--lp-nav-tint);
}

.lp-nav-cta[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    margin-inline-start: 4px;
    padding-inline: 12px;
    border-radius: 999px;
    background: var(--lp-nav-blue-deep);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s, scale .15s cubic-bezier(.2, .7, .2, 1);
}

.lp-nav-cta:hover[b-8qj5dhjgff],
.lp-nav-cta:focus-visible[b-8qj5dhjgff] {
    background: var(--lp-nav-blue-darker);
    color: #fff;
}

.lp-nav .lp-nav-cta:focus-visible[b-8qj5dhjgff] {
    outline-offset: 2px;
}

/* One label at a time: the short one up to 1100px, the full one beyond (the Somali
   full labels are the widest; with the section links beside them they need 1100px). */
.lp-nav-long[b-8qj5dhjgff] {
    display: none;
}

/* The same press as the landing page's buttons. */
@media (prefers-reduced-motion: no-preference) {
    .lp-nav-cta:active[b-8qj5dhjgff] {
        scale: .98;
    }
}

/* --- Very narrow phones -------------------------------------- */
@media (max-width: 359.98px) {
    .lp-nav[b-8qj5dhjgff] {
        --lp-nav-gutter: 10px;
    }

    /* Keep the name for assistive tech; show the mark only. */
    .lp-nav-name[b-8qj5dhjgff] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lp-lang-chev[b-8qj5dhjgff] {
        display: none;
    }

    .lp-nav-cta[b-8qj5dhjgff] {
        padding-inline: 12px;
    }
}

/* --- Landing page, phones: the dock is the call to action -------------
   GuestLandingPage's bottom dock (#lp-dock) takes over once the hero's button
   has scrolled away, so the header keeps only the language menu and Sign in
   there. Other guest pages have no dock and keep the header's button. */
@media (max-width: 899.98px) {
    .lp-nav-home .lp-nav-cta[b-8qj5dhjgff] {
        display: none;
    }
}

/* --- Larger phones: the design's full-size brand and controls --------- */
@media (min-width: 480px) {
    .lp-nav[b-8qj5dhjgff] {
        --lp-nav-gutter: 20px;
    }

    .lp-nav-brand[b-8qj5dhjgff] {
        font-size: 23px;
    }

    .lp-nav-brand img[b-8qj5dhjgff] {
        inline-size: 32px;
        block-size: 32px;
        border-radius: 10px;
    }

    .lp-lang-btn[b-8qj5dhjgff],
    .lp-nav-signin[b-8qj5dhjgff] {
        padding-inline: 12px;
    }

    .lp-nav-cta[b-8qj5dhjgff] {
        padding-inline: 16px;
    }
}

/* --- Tablet and up -------------------------------------------------- */
@media (min-width: 768px) {
    .lp-nav[b-8qj5dhjgff] {
        --lp-nav-gutter: max(32px, calc((100% - 1140px) / 2 + 32px));

        gap: 8px;
    }

    .lp-nav-signin[b-8qj5dhjgff] {
        padding-inline: 14px;
        font-size: 15px;
    }

    .lp-nav-cta[b-8qj5dhjgff] {
        padding-inline: 20px;
        font-size: 15px;
    }
}

/* Room for the home page's section links next to everything else (Somali and
   Arabic labels are the longest; Somali needs about 930px with the short button).
   The brand and the links both push with an auto margin, so the links sit centred in
   the space between them. The brand, language menu and Sign in never shrink: the
   call to action is the one that gives way. */
@media (min-width: 1000px) {
    .lp-nav-links[b-8qj5dhjgff] {
        display: block;
        margin-inline-end: auto;
    }
}

@media (min-width: 1100px) {
    .lp-nav-long[b-8qj5dhjgff] {
        display: inline;
    }

    .lp-nav-short[b-8qj5dhjgff] {
        display: none;
    }
}

/* The language name instead of its code, once there is room. */
@media (min-width: 1240px) {
    .lp-lang-name[b-8qj5dhjgff] {
        display: inline;
    }

    .lp-lang-code[b-8qj5dhjgff] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-nav-cta[b-8qj5dhjgff],
    .lp-lang-chev[b-8qj5dhjgff] {
        transition: none;
    }
}

/* --- "This page is also in Svenska" ------------------------
   Shown above the header to a visitor arriving from outside on a public page
   in another language than the one they chose before (or their browser's).
   Written in that language; one quiet line, not a modal. */
.lp-suggest[b-8qj5dhjgff] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin: 0;
    padding: 8px 16px;
    background: #e6eff5;
    border-block-end: 1px solid #d3e3ee;
    color: #15171a;
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.lp-suggest:lang(ar)[b-8qj5dhjgff] {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

.lp-suggest > i[b-8qj5dhjgff] {
    color: #0f3d5c;
}

.lp-suggest a[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    color: #0f3d5c;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-suggest a:focus-visible[b-8qj5dhjgff] {
    outline: 3px solid #0f3d5c;
    outline-offset: 2px;
    border-radius: 6px;
}

/* The bar carries the suggested language's own dir. */
.lp-suggest[dir="rtl"] .lp-suggest-arrow[b-8qj5dhjgff] {
    transform: scaleX(-1);
}

/* --- Live offer ribbon -------------------------------------
   A campaign advertised to guests (setting Subscription.ShowOffersToGuests):
   one quiet line above the header in the page's language, never together
   with the language suggestion. Not sticky, no dismiss, no motion; it wraps
   on phones. Colours are the app's --hub-* tokens (app.css), with their light
   values as fallbacks: marketing pages carry no theme class, so they stay
   light, and a dark page would flip every token together. Ink on ember-soft
   is 15:1; the ember-deep tag 4.6:1. */
.lp-offerbar[b-8qj5dhjgff] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    margin: 0;
    padding: 2px 16px;
    background: var(--hub-ember-soft, #fbeae0);
    border-block-end: 1px solid var(--hub-ember-line, #f3cdb5);
    color: var(--hub-ink, #191712);
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.lp-offerbar:lang(ar)[b-8qj5dhjgff] {
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

.lp-offerbar-icon[b-8qj5dhjgff] {
    color: var(--hub-ember-deep, #b24d14);
}

.lp-offerbar-text[b-8qj5dhjgff] {
    font-weight: 700;
}

.lp-offerbar-ends[b-8qj5dhjgff] {
    color: var(--hub-ink-2, #5c574c);
}

.lp-offerbar-link[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    color: var(--hub-ink, #191712);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-offerbar-link:hover[b-8qj5dhjgff] {
    color: var(--hub-ember-deep, #b24d14);
}

.lp-offerbar-link:focus-visible[b-8qj5dhjgff] {
    outline: 3px solid var(--hub-ink, #191712);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The page's own direction: the arrow points along the reading order. */
:root[dir="rtl"] .lp-offerbar-arrow[b-8qj5dhjgff] {
    transform: scaleX(-1);
}
/* /Components/Layout/ReaderLayout.razor.rz.scp.css */
.book-reader-layout[b-ugvfzco8q0] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

    .book-reader-layout header[b-ugvfzco8q0] {
        background-color: #333;
        color: white;
        padding: 10px;
        text-align: center;
    }

    .book-reader-layout main[b-ugvfzco8q0] {
        flex: 1;
        overflow: auto;
    }
/* /Components/Pages/Admin/ExerciseBankReview.razor.rz.scp.css */
/* The exercise-bank review page. Bootstrap does the layout; this is only what it lacks:
   a selectable card, a status tint on a queue card, and compact key rows. Bootstrap here is
   5.0.2 — no -subtle / -emphasis utilities, hence the literal tints. */

.eb-context[b-diwyu7nfun] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.eb-spec-list[b-diwyu7nfun] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.eb-spec[b-diwyu7nfun] {
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: border-color .12s, background-color .12s;
}

.eb-spec:hover[b-diwyu7nfun],
.eb-spec:focus-visible[b-diwyu7nfun] {
    background: #f8f9fa;
    outline: none;
}

.eb-spec.is-selected[b-diwyu7nfun] {
    border-left-color: #0d6efd;
    background: #eef4ff;
}

.eb-spec.is-retired[b-diwyu7nfun] {
    opacity: .6;
}

.eb-count[b-diwyu7nfun] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.eb-spec-panel .eb-action[b-diwyu7nfun] {
    padding: .6rem 0;
    border-top: 1px solid #f1f3f5;
}

.eb-num[b-diwyu7nfun] {
    width: 5.5rem;
}

.eb-item[b-diwyu7nfun] {
    border-left: 4px solid #ced4da;
}

.eb-item.is-approved[b-diwyu7nfun] { border-left-color: #198754; }
.eb-item.is-rejected[b-diwyu7nfun] { border-left-color: #dc3545; opacity: .85; }
.eb-item.is-flagged[b-diwyu7nfun] { border-left-color: #ffc107; }

.eb-scene[b-diwyu7nfun] {
    color: #6c757d;
    font-style: italic;
}

.eb-prompt[b-diwyu7nfun] {
    font-size: 1.05rem;
}

.eb-answer[b-diwyu7nfun] {
    font-size: 1.15rem;
    font-weight: 500;
}

.eb-answer[b-diwyu7nfun]  .grammar-hl {
    background: #fff3cd;
    padding: 0 .15em;
    border-radius: .2em;
}

.eb-play[b-diwyu7nfun] {
    flex: 0 0 auto;
}

.eb-key[b-diwyu7nfun] {
    padding: .5rem .75rem;
    background: #f8f9fa;
    border-radius: .375rem;
}

.eb-key.eb-pending[b-diwyu7nfun] {
    background: #e7f5ff;
}

.eb-variant[b-diwyu7nfun] {
    padding: .15rem 0;
}

.eb-json[b-diwyu7nfun] {
    font-size: .8rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    padding: .5rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
}

.eb-note[b-diwyu7nfun] {
    max-width: 22rem;
}

.eb-variant-list .form-control[b-diwyu7nfun] {
    min-width: 12rem;
}

.min-w-0[b-diwyu7nfun] {
    min-width: 0;
}
/* /Components/Pages/Admin/ExerciseLessonQuestions.razor.rz.scp.css */
/* One lesson's Translate & Speak questions — shared by the Questions page and the Questions
   dialog on /admin/grammar. Bootstrap does the layout; this is the row tints and the answer
   highlight the review page also has. Bootstrap here is 5.0.2 — no -subtle / -emphasis
   utilities, hence the literal tints. */

.eq-focus[b-czg3eweco9] {
    white-space: pre-wrap;
    max-height: 6rem;
    overflow: auto;
}

/* The learner-language picker sits beside the lesson title; wide enough for a language name,
   never so wide it pushes a long title onto a third line. */
.eq-language[b-czg3eweco9] {
    flex: 0 0 auto;
    min-width: 12rem;
}

.eq-kind > .card-header[b-czg3eweco9] {
    background: #f8f9fa;
}

.eq-table td[b-czg3eweco9] {
    vertical-align: top;
}

.eq-table tr.eq-rejected td[b-czg3eweco9] {
    opacity: .55;
}

.eq-table tr.eq-flagged td:first-child[b-czg3eweco9] {
    box-shadow: inset 4px 0 0 #ffc107;
}

.eq-scene[b-czg3eweco9] {
    color: #6c757d;
    font-style: italic;
}

.eq-answer[b-czg3eweco9] {
    font-weight: 500;
}

.eq-answer[b-czg3eweco9]  .grammar-hl {
    background: #fff3cd;
    padding: 0 .15em;
    border-radius: .2em;
}

.eq-prompt[b-czg3eweco9] {
    font-size: .78rem;
}

.eq-variant-list .form-control[b-czg3eweco9] {
    min-width: 12rem;
}

.min-w-0[b-czg3eweco9] {
    min-width: 0;
}
/* /Components/Pages/Admin/ExerciseQuestions.razor.rz.scp.css */
/* The Questions page: only the sticky context bar is its own. Everything under it (the
   lesson card, the kind sections, the row tints) is ExerciseLessonQuestions and carries
   its own stylesheet. Bootstrap here is 5.0.2 — no -subtle / -emphasis utilities. */

.eq-context[b-6h91zjeqzd] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
/* /Components/Pages/Admin/GrammarManagement.razor.rz.scp.css */
/*
    The level context bar.

    Everything on this page below it is about ONE level, and the lesson list under it runs to
    dozens of rows. A picker that scrolls away leaves you editing, generating and publishing
    into a level you can no longer name — so it stays.

    The offset is the layout's own contract: MainLayout's .top-row is 3.5rem and sticks at
    top: 0 from 641px up, and is not sticky below that.
*/
.gm-context[b-dkctckuvtj] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

@media (min-width: 641px) {
    .gm-context[b-dkctckuvtj] {
        top: 3.5rem;
    }
}

/*
    The AI tools disclosure. A plain button, not a card header: collapsed it should read as
    one quiet line rather than as another panel competing with the lesson list.
*/
.gm-tools-toggle[b-dkctckuvtj] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    width: 100%;
    padding: .6rem .9rem;
    text-align: left;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    color: inherit;
}

.gm-tools-toggle:hover[b-dkctckuvtj] {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* Open, the toggle is the lid of the panels below it rather than a box of its own. */
.gm-tools-toggle[aria-expanded="true"][b-dkctckuvtj] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 1rem;
}

/*
    The pop-out field editor.

    The Content dialog puts a card's two text lines (and its data JSON) on one narrow row;
    a long explanation or a hand-written JSON blob is unreviewable there. The expand button
    on each box, and a double-click on the box itself, open that one field in this dialog —
    a full-width, tall textarea with Previous / Next through the whole deck.

    It sits ON TOP of the fullscreen Content modal. Bootstrap's .modal is z-index 1055 and
    the later sibling in the DOM would already win, but two stacked modals is unusual enough
    that the intent is pinned here.
*/
.gm-field-modal[b-dkctckuvtj] {
    z-index: 1070;
    background-color: rgba(0, 0, 0, .5);
}

.gm-field-modal .modal-title[b-dkctckuvtj] {
    font-size: 1.05rem;
}

.gm-field-editor[b-dkctckuvtj] {
    min-height: 42vh;
    resize: vertical;
    font-size: .9rem;
}

/* Never a tab stop — the box beside it already is, and the pop-out is a mouse affordance. */
.gm-field-expand[b-dkctckuvtj] {
    flex: 0 0 auto;
}
/* /Components/Pages/Admin/GrammarStructure.razor.rz.scp.css */
/*
    The units half is the INSIDE of the level highlighted in the table above it. The rule and
    the indent are the only things saying so — without them it is a second table of the same
    rank, which is exactly the confusion this page was split out to end.
*/
.gs-detail[b-trahbex2uk] {
    border-left: 3px solid var(--bs-primary, #6f42c1);
    padding-left: 1rem;
    margin-left: .25rem;
}

/* The indent costs more than it buys once the table has to scroll sideways anyway. */
@media (max-width: 767.98px) {
    .gs-detail[b-trahbex2uk] {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
}
/* /Components/Pages/Admin/LearnAudioReview.razor.rz.scp.css */
/* The Learn audio page. Bootstrap here is 5.0.2 — no -subtle / -emphasis utilities. */

.la-context[b-8sx3a938p8] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.la-actions[b-8sx3a938p8] {
    min-width: 11rem;
}

.la-coverage[b-8sx3a938p8] {
    height: .5rem;
    max-width: 28rem;
}

.la-folder-lang[b-8sx3a938p8] {
    margin-inline-start: .5rem;
    white-space: nowrap;
}

.la-table[b-8sx3a938p8] {
    table-layout: fixed;
}

.la-col-kind[b-8sx3a938p8] { width: 9rem; }
.la-col-voice[b-8sx3a938p8] { width: 12rem; }
.la-col-shapes[b-8sx3a938p8] { width: 17rem; }
.la-col-actions[b-8sx3a938p8] { width: 6.5rem; }

.la-text[b-8sx3a938p8] {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.la-meta[b-8sx3a938p8] {
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.la-row-missing > td[b-8sx3a938p8] {
    background: #fffbeb;
}

.la-row-mute > td[b-8sx3a938p8] {
    color: #6b7280;
}

.la-player[b-8sx3a938p8] {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: 2rem;
}

/* A recording: a pill. Saved ones are buttons that play; missing ones are dashed and inert. */
.la-shape[b-8sx3a938p8] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.la-shape.is-saved[b-8sx3a938p8] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

button.la-shape.is-saved[b-8sx3a938p8] {
    cursor: pointer;
}

button.la-shape.is-saved:hover[b-8sx3a938p8],
button.la-shape.is-saved:focus-visible[b-8sx3a938p8] {
    background: #d1fae5;
}

.la-shape.is-playing[b-8sx3a938p8] {
    background: #065f46;
    border-color: #065f46;
    color: #fff;
}

button.la-shape.is-playing:hover[b-8sx3a938p8],
button.la-shape.is-playing:focus-visible[b-8sx3a938p8] {
    background: #047857;
}

.la-shape.is-missing[b-8sx3a938p8] {
    background: #fff;
    border: 1px dashed #d1d5db;
    color: #6b7280;
}

@media (max-width: 767.98px) {
    .la-table[b-8sx3a938p8] {
        table-layout: auto;
    }

    .la-col-kind[b-8sx3a938p8],
    .la-col-voice[b-8sx3a938p8],
    .la-col-shapes[b-8sx3a938p8],
    .la-col-actions[b-8sx3a938p8] {
        width: auto;
    }
}
/* /Components/Pages/Admin/ListeningPracticeManagement.razor.rz.scp.css */
.nav-tabs .nav-link[b-x9w4e4mfre] {
    cursor: pointer;
}

.nav-pills .nav-link[b-x9w4e4mfre] {
    cursor: pointer;
}

.table-active[b-x9w4e4mfre] {
    background-color: rgba(13, 110, 253, 0.1);
}

.accordion-button[b-x9w4e4mfre] {
    background-color: #f8f9fa;
}

.accordion-button:not(.collapsed)[b-x9w4e4mfre] {
    background-color: #e7f1ff;
    color: #0a58ca;
}

.card[b-x9w4e4mfre] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header[b-x9w4e4mfre] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.display-4[b-x9w4e4mfre] {
    font-size: 2.5rem;
    font-weight: 300;
}

.btn-group-sm > .btn[b-x9w4e4mfre] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.spinner-border[b-x9w4e4mfre] {
    width: 3rem;
    height: 3rem;
}

.list-group-item-success[b-x9w4e4mfre] {
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.pagination[b-x9w4e4mfre] {
    margin-top: 1rem;
}

.badge[b-x9w4e4mfre] {
    font-weight: 500;
}

@media (max-width: 768px) {
    .btn-group[b-x9w4e4mfre] {
        display: flex;
        flex-direction: column;
    }
    
    .btn-group > .btn[b-x9w4e4mfre] {
        margin-bottom: 0.25rem;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* Contact page — builds on the shared legal-page shell (/css/legal-styles.css). */

.contact-email-card[b-7mz4a9sw6x] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.5rem;
}

.contact-email-icon[b-7mz4a9sw6x] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 14px;
    background: #e8f1f7;
    color: #1a3d52;
    font-size: 1.6rem;
}

.contact-email-body[b-7mz4a9sw6x] {
    flex: 1 1 220px;
    min-width: 0;
}

.contact-email-label[b-7mz4a9sw6x] {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.contact-email-address[b-7mz4a9sw6x] {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a3d52;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-email-address:hover[b-7mz4a9sw6x],
.contact-email-address:focus-visible[b-7mz4a9sw6x] {
    text-decoration: underline;
}

.contact-email-hint[b-7mz4a9sw6x] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #4b5563;
}

.contact-email-btn[b-7mz4a9sw6x] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
}

.contact-signed-in[b-7mz4a9sw6x] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #eef6ee;
    color: #24452a;
    font-size: 0.9rem;
    line-height: 1.5;
}

.contact-signed-in bdi[b-7mz4a9sw6x] {
    overflow-wrap: anywhere;
}

.contact-topics[b-7mz4a9sw6x] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.contact-topics li[b-7mz4a9sw6x] {
    margin: 0;
}

.contact-topic[b-7mz4a9sw6x] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.contact-topic:hover[b-7mz4a9sw6x],
.contact-topic:focus-visible[b-7mz4a9sw6x] {
    border-color: #1e5270;
    background: #f5f9fc;
}

.contact-topic-icon[b-7mz4a9sw6x] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #1a3d52;
    font-size: 1.15rem;
}

.contact-topic-text[b-7mz4a9sw6x] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.contact-topic-title[b-7mz4a9sw6x] {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 0.95rem;
}

.contact-topic-desc[b-7mz4a9sw6x] {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.45;
}

.contact-topic-chev[b-7mz4a9sw6x] {
    color: #9ca3af;
    flex: 0 0 auto;
}

[dir="rtl"] .contact-topic-chev[b-7mz4a9sw6x] {
    transform: scaleX(-1);
}

.contact-legal-links[b-7mz4a9sw6x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.contact-legal-links a[b-7mz4a9sw6x] {
    color: #1a3d52;
    font-weight: 600;
}

@media (max-width: 640px) {
    .contact-email-address[b-7mz4a9sw6x] {
        font-size: 1.25rem;
    }

    .contact-email-btn[b-7mz4a9sw6x] {
        width: 100%;
    }
}
/* /Components/Pages/Student/SubscriptionPlans.razor.rz.scp.css */
/* The promo code and campaign prices on the plans page (IMPLEMENTATION_DOCS/SUBSCRIPTION_PROMOTIONS.md
   section 7). Colours are the app.css tokens, which the dark theme redefines, so nothing here needs
   a dark rule of its own; sides are logical so Arabic mirrors. None of these is a .card or an
   .alert-info (the page lifts every .card on hover; the status banner is the first .alert-info). */

.promo-entry[b-90dncb2gcy] {
    max-inline-size: 28rem;
    margin-inline: auto;
    margin-block: 0 .5rem;
    text-align: center;
}

.promo-toggle[b-90dncb2gcy] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
}

.promo-applied[b-90dncb2gcy] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
    padding: .5rem .875rem;
    border-radius: .75rem;
    background: var(--hub-fern-soft);
    color: var(--hub-fern-deep);
    font-weight: 600;
}

.promo-form[b-90dncb2gcy] {
    text-align: start;
}

.promo-form-label[b-90dncb2gcy] {
    font-weight: 600;
    margin-block-end: .25rem;
}

/* Not a Bootstrap .input-group: its corner radii are physical and come out inside-out in Arabic. */
.promo-form-row[b-90dncb2gcy] {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.promo-input[b-90dncb2gcy] {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.promo-input[b-90dncb2gcy]::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.promo-apply[b-90dncb2gcy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.promo-error[b-90dncb2gcy] {
    margin-block-start: .375rem;
    font-size: .875rem;
    color: var(--danger-deep);
}

.promo-link-button[b-90dncb2gcy] {
    padding: 0;
    vertical-align: baseline;
    font-weight: 600;
}

/* Under the plan name, inline: the "Best value" pill owns the card's top corner. */
.promo-tags[b-90dncb2gcy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    margin-block-start: .5rem;
}

.promo-label[b-90dncb2gcy],
.promo-percent[b-90dncb2gcy] {
    display: inline-block;
    max-inline-size: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.promo-label[b-90dncb2gcy] {
    background: var(--hub-ember-soft);
    color: var(--hub-ember-deep);
}

.promo-percent[b-90dncb2gcy] {
    background: var(--hub-ember-deep);
    color: var(--hub-card);
}

.promo-was[b-90dncb2gcy] {
    margin-block-start: .75rem;
    font-size: 1.125rem;
    color: var(--hub-ink-2);
}

.promo-terms[b-90dncb2gcy] {
    margin-block: -.5rem 1rem;
    padding: 0;
    font-size: .875rem;
    color: var(--hub-ink-2);
}

.promo-terms li + li[b-90dncb2gcy] {
    margin-block-start: .125rem;
}

.promo-cheaper[b-90dncb2gcy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .25rem .5rem;
    margin-block-start: .5rem !important;
}

/* The /contact link after "Please contact us before paying again." Razor drops the space
   between the sentence and the link, so the gap is here (logical, for Arabic). */
.message-contact[b-90dncb2gcy] {
    margin-inline-start: .35rem;
    white-space: nowrap;
}
/* /Components/Pages/Student/SubscriptionUpgrade.razor.rz.scp.css */
/* The live automatic campaign: the same ember tones as the plans page's offer pill, so the two read as one offer. */
.promo-banner[b-34ibs11l71] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .75rem;
    max-inline-size: 30rem;
    margin: 0 auto 1.5rem;
    padding: .625rem 1rem;
    border-radius: 12px;
    background: var(--hub-ember-soft, #FBEAE0);
    color: var(--hub-ember-deep, #B24D14);
    text-align: start;
}

.promo-banner-icon[b-34ibs11l71] {
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.promo-banner-text[b-34ibs11l71] {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    min-inline-size: 0;
}

.promo-banner-label[b-34ibs11l71] {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.promo-banner-ends[b-34ibs11l71] {
    font-size: .875rem;
}

.promo-banner-link[b-34ibs11l71] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.promo-banner-link:hover[b-34ibs11l71],
.promo-banner-link:focus-visible[b-34ibs11l71] {
    text-decoration-thickness: 2px;
}
/* /Components/Shared/ReadingLevelComponent.razor.rz.scp.css */
/* ========================================
   READING LEVEL COMPONENT - OPTIMIZED CSS
   ======================================== */

/* ============================================
   LEVEL BUTTON - BASE STYLES
   ============================================ */
.level-button[b-8frnoroil4] {
    --btn-radius: 12px;
    --btn-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    min-height: 60px;
    position: relative;
    border-radius: var(--btn-radius);
    padding: 0.75rem 1.25rem;
    text-align: center;
    
    /* Performance optimization */
    will-change: transform, box-shadow;
    transition: transform var(--btn-transition), 
                box-shadow var(--btn-transition),
                background-color var(--btn-transition),
                border-color var(--btn-transition);
}

/* Reset will-change when not hovered */
.level-button:not(:hover):not(:active)[b-8frnoroil4] {
    will-change: auto;
}

.level-button:hover[b-8frnoroil4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

/* ============================================
   LEVEL BUTTON - PRIMARY (Selected)
   ============================================ */
.level-button.btn-primary[b-8frnoroil4] {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6), #1d4ed8);
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    color: var(--bg-primary, white);
}

/* ============================================
   LEVEL BUTTON - OUTLINE (Unselected)
   ============================================ */
.level-button.btn-outline-primary[b-8frnoroil4] {
    border: 2px solid var(--gray-200, #e5e7eb);
    background: var(--bg-primary, white);
    color: var(--gray-500, #6b7280);
}

.level-button.btn-outline-primary:hover[b-8frnoroil4] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
    background: #f8faff;
}

/* ============================================
   LEVEL BADGE & DESCRIPTION
   ============================================ */
.level-badge[b-8frnoroil4] {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.level-description[b-8frnoroil4] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* ============================================
   CLICK ANIMATION
   ============================================ */
@keyframes levelSelect-b-8frnoroil4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

.level-button:active[b-8frnoroil4] {
    animation: levelSelect-b-8frnoroil4 0.2s ease;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-container[b-8frnoroil4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 768px) {
    .level-button[b-8frnoroil4] {
        min-height: 50px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        --btn-radius: 10px;
    }
    
    .level-description[b-8frnoroil4] {
        font-size: 0.7rem;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 576px) {
    .level-button[b-8frnoroil4] {
        width: 100%;
        margin-bottom: 0.5rem;
        min-height: 44px; /* Touch-friendly minimum */
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .level-button[b-8frnoroil4] {
        transition: none;
    }
    
    .level-button:hover[b-8frnoroil4] {
        transform: none;
    }
    
    .level-button:active[b-8frnoroil4] {
        animation: none;
    }
}

/* ============================================
   FOCUS STATES - ACCESSIBILITY
   ============================================ */
.level-button:focus-visible[b-8frnoroil4] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}
/* /Components/Shared/StudentDashboard/GuestLandingPage.razor.rz.scp.css */
/* ============================================================
   Guest landing page — scoped styles

   The "Guest Home v8" design (Claude Design handoff): cream paper, deep navy for
   anything you act on, honey for the one highlight, Bricolage Grotesque headings
   over Hanken Grotesk text. Mobile first: the base rules are the 360–390px phone,
   then 520 / 768 / 860 / 900 / 1000 px step up. Logical properties only, so the
   Arabic (RTL) build mirrors without its own rules; the few direction-aware
   tweaks key off :lang(ar) / [dir="rtl"].

   Traps this file works around (see the memory notes on design handoffs):
   * A global rule sets h1–h6 in Poppins — every heading here sets its
     font-family explicitly (the reset list under "Type"; a new heading class
     goes there too).
   * A page-wide `.guest-landing a {color}` outranks one-class buttons under CSS
     isolation — the link rule is wrapped in :where(), and the buttons are
     written `.guest-landing .lp-btn-*`.
   * FocusOnNavigate focuses the <h1> on navigation — it never shows a ring.
   * overflow: only ever `clip`, never `hidden`/`auto`, on anything that holds a
     scroll-revealed element (cards, panels, phone frames, every ancestor of
     #lp-hero-cta). hidden/auto makes a scroll container, which becomes the
     view() timeline's scroller: the reveals stick at opacity 0. The one `auto`
     is the tab strip on phones, which holds nothing that reveals.
   * .lp-phone is the picture frame: its bottom edge fades out (mask-image). What
     a picture is about (its first rows) must sit above the fade in every
     language — if it doesn't, raise the frame's max-block-size; never shrink the
     text. The pictures are aria-hidden and must not look operable: no hover
     states, cursor: default.
   * letter-spacing and uppercase break Arabic script — every tracked label and
     tight headline is reset under :lang(ar).
   * The v8 prototype's focus ring was honey on cream (about 2:1); it is navy
     here, honey only on navy surfaces.
   ============================================================ */

/* The web fonts load asynchronously (App.razor), so the first paint uses a
   fallback. Unadjusted, the fallback is a different width: headlines wrap onto
   another line and the page jumps when the web font arrives. These faces are
   Arial scaled to each font's widths — measured with canvas.measureText — so
   lines break in the same places. Latin only: neither font has Arabic, and
   Arabic keeps its system face. (@font-face is not scoped by CSS isolation;
   the guest header and footer use them too.) */
@font-face {
    font-family: "Hanken Grotesk Fallback";
    src: local("Arial"), local("ArialMT");
    font-weight: 100 549;
    size-adjust: 100%;
    unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2190-21FF;
}

@font-face {
    font-family: "Hanken Grotesk Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 550 900;
    size-adjust: 95.5%;
    unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2190-21FF;
}

/* Bricolage Grotesque (600-800) runs about 90% of Arial Bold's width — measured over the
   page's headlines in English and Somali: 0.89 at 600, 0.905 at 700. */
@font-face {
    font-family: "Bricolage Grotesque Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 900;
    size-adjust: 90.5%;
    unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2190-21FF;
}

.guest-landing[b-8lenueeuc8] {
    /* Paper and ink. Literal values: the signed-in brand tokens (--skrol-*) are
       not these, and the older Android WebViews don't all parse oklch(). */
    --lp-cream: #faf7f2;          /* the page */
    --lp-card: #fff;
    --lp-soft: #f2eee5;           /* alternate sections, quiet fills */
    --lp-ink: #15171a;
    --lp-ink2: #4a4d54;           /* body text on cream and white */
    --lp-ink3: #62655f;           /* small print: 5:1 on soft, 5.4:1 on cream */
    --lp-line: #e5dfd2;

    --lp-navy: #0f3d5c;           /* buttons, links, accent text */
    --lp-navy2: #1a5479;          /* hover */
    --lp-navy-soft: #e6eff5;
    --lp-honey: #e0ac3b;          /* fills only: the highlight, the one bright button */
    --lp-honey-hover: #e8b94f;
    --lp-honey-soft: #f8e9c0;
    --lp-honey-ink: #7a5a10;      /* text on honey-soft */
    --lp-green: #2f6f4f;
    --lp-green-soft: #dcebe0;

    --lp-fd: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lp-fb: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lp-shadow: 0 1px 2px rgba(20, 15, 10, .04), 0 16px 40px -20px rgba(20, 15, 10, .22);
    --lp-ease: cubic-bezier(.2, .7, .2, 1);   /* decelerate: every entrance and nudge */

    color: var(--lp-ink);
    background: var(--lp-cream);
    font-family: var(--lp-fb);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Arabic: neither font has Arabic glyphs, so they fall through to a system face
   per character; Latin words keep the brand faces. */
.guest-landing:lang(ar)[b-8lenueeuc8] {
    --lp-fd: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Hanken Grotesk", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
    --lp-fb: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
    line-height: 1.7;
}

/* Resets carry no specificity (:where), so any single-class rule below wins —
   a plain `.guest-landing p` would out-rank `.lp-lead` under CSS isolation. */
:where(.guest-landing) :where(p, ul, ol, dl, dd, figure)[b-8lenueeuc8] {
    margin: 0;
}

:where(.guest-landing) :where(ul, ol)[b-8lenueeuc8] {
    padding: 0;
    list-style: none;
}

:where(.guest-landing) a[b-8lenueeuc8] {
    color: var(--lp-navy);
    text-decoration: none;
}

:where(.guest-landing) a:hover[b-8lenueeuc8] {
    color: var(--lp-navy2);
}

:where(.guest-landing) :is(button)[b-8lenueeuc8] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.guest-landing :focus-visible[b-8lenueeuc8] {
    outline: 3px solid var(--lp-navy);
    outline-offset: 3px;
}

.guest-landing a:not([class]):focus-visible[b-8lenueeuc8] {
    border-radius: 6px;
}

.guest-landing h1:focus[b-8lenueeuc8],
.guest-landing h1:focus-visible[b-8lenueeuc8] {
    outline: none;
}

/* --- Shell ------------------------------------------------- */
.lp-wrap[b-8lenueeuc8] {
    inline-size: 100%;
    max-inline-size: 1140px;
    margin-inline: auto;
    padding-inline: 20px;
}

.lp-section[b-8lenueeuc8] {
    padding-block: clamp(40px, 6vw, 64px);
}

.lp-head[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-inline-size: 700px;
    margin-block-end: clamp(20px, 3.5vw, 32px);
}

/* --- Type -------------------------------------------------- */
.lp-h1[b-8lenueeuc8],
.lp-h2[b-8lenueeuc8],
.lp-day-card h3[b-8lenueeuc8],
.lp-panel-title[b-8lenueeuc8],
.lp-plan-name[b-8lenueeuc8],
.lp-trust-title[b-8lenueeuc8],
.lp-about-title[b-8lenueeuc8] {
    font-family: var(--lp-fd);
    margin: 0;
    color: inherit;
    text-wrap: balance;
}

.lp-h1[b-8lenueeuc8] {
    font-size: clamp(42px, 11.5vw, 80px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
}

.lp-accent[b-8lenueeuc8] {
    padding-inline: .05em;
    background: linear-gradient(transparent 62%, var(--lp-honey) 62%);
    color: var(--lp-navy);
    font-style: normal;
}

.lp-h2[b-8lenueeuc8] {
    font-size: clamp(32px, 7.6vw, 54px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.03em;
}

.guest-landing:lang(ar) :is(.lp-h1, .lp-h2, .lp-panel-title, .lp-day-card h3, .lp-day-n, .lp-plan-name, .lp-plan-price, .lp-trial-price, .lp-facts b)[b-8lenueeuc8] {
    letter-spacing: 0;
}

.guest-landing:lang(ar) :is(.lp-h1, .lp-h2)[b-8lenueeuc8] {
    line-height: 1.3;
}

.lp-lead[b-8lenueeuc8] {
    max-inline-size: 40ch;
    color: var(--lp-ink2);
    font-size: clamp(17px, 4.3vw, 20px);
    text-wrap: pretty;
}

.lp-sub[b-8lenueeuc8] {
    max-inline-size: 52ch;
    color: var(--lp-ink2);
    font-size: clamp(17px, 4.2vw, 19px);
}

.lp-eyebrow[b-8lenueeuc8] {
    color: var(--lp-navy);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.guest-landing:lang(ar) .lp-eyebrow[b-8lenueeuc8],
.guest-landing:lang(ar) .lp-mock-head[b-8lenueeuc8] {
    letter-spacing: 0;
    text-transform: none;
}

.lp-pill[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--lp-navy-soft);
    color: var(--lp-navy);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}

/* --- Buttons ----------------------------------------------- */
.guest-landing[b-8lenueeuc8]  .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 56px;
    padding-inline: 26px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform .15s var(--lp-ease), background-color .15s, box-shadow .15s;
}

.guest-landing[b-8lenueeuc8]  .lp-btn-sm {
    min-block-size: 44px;
    padding-inline: 20px;
    font-size: 15px;
}

.guest-landing[b-8lenueeuc8]  .lp-btn-primary {
    background: var(--lp-navy);
    color: #fff;
    box-shadow: 0 14px 28px -16px rgba(15, 61, 92, .8);
}

.guest-landing[b-8lenueeuc8]  .lp-btn-primary:hover {
    background: var(--lp-navy2);
    color: #fff;
}

.guest-landing[b-8lenueeuc8]  .lp-btn-honey {
    background: var(--lp-honey);
    color: var(--lp-ink);
}

.guest-landing[b-8lenueeuc8]  .lp-btn-honey:hover {
    background: var(--lp-honey-hover);
    color: var(--lp-ink);
}

/* The secondary action: same size, outlined, never competing with the fill. */
.guest-landing[b-8lenueeuc8]  .lp-btn-outline {
    background: var(--lp-card);
    color: var(--lp-ink);
    box-shadow: inset 0 0 0 1.5px var(--lp-line);
}

.guest-landing[b-8lenueeuc8]  .lp-btn-outline:hover {
    color: var(--lp-ink);
    box-shadow: inset 0 0 0 1.5px var(--lp-ink);
}

.lp-btn .bi-bar-chart-steps[b-8lenueeuc8] {
    font-size: 18px;
}

.guest-landing[b-8lenueeuc8]  .lp-btn-arrow {
    font-size: 18px;
    transition: translate .2s var(--lp-ease);
}

:root[dir="rtl"] .guest-landing[b-8lenueeuc8]  .lp-btn-arrow {
    transform: scaleX(-1);
}

/* Phones: the two actions stack at full width; from 520px they sit side by side. */
.lp-cta-row[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    inline-size: 100%;
}

@media (min-width: 520px) {
    .lp-cta-row[b-8lenueeuc8] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        inline-size: auto;
    }
}

/* Store badges: black, rounded, 48px+ tall like the official ones; side by side, wrapping on narrow phones. */
.lp-stores[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px 20px;
}

.guest-landing .lp-store[b-8lenueeuc8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 52px;
    padding-inline: 14px 16px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    box-shadow: inset 0 0 0 1px #a6a6a6;
    text-decoration: none;
    line-height: 1.1;
}

.guest-landing a.lp-store:hover[b-8lenueeuc8] {
    color: #fff;
    background: #1c1c1c;
}

.guest-landing a.lp-store:focus-visible[b-8lenueeuc8] {
    outline: 3px solid var(--lp-honey);
    outline-offset: 2px;
}

.lp-store-icon[b-8lenueeuc8] {
    font-size: 26px;
}

.lp-store-text[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
}

.lp-store-text small[b-8lenueeuc8] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
}

.lp-store-text strong[b-8lenueeuc8] {
    font-family: var(--lp-fb);
    font-size: 19px;
    font-weight: 600;
}

/* Not yet available: same badge, no hover or pointer, with a "Coming soon" chip on its corner. */
.guest-landing .lp-store-soon[b-8lenueeuc8] {
    cursor: default;
    margin-block-start: 8px;
}

.lp-store-chip[b-8lenueeuc8] {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-end: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lp-honey);
    color: var(--lp-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

/* --- Hero -------------------------------------------------- */
.lp-hero[b-8lenueeuc8] {
    padding-block: 32px 44px;
}

.lp-hero-grid[b-8lenueeuc8] {
    display: grid;
    gap: 36px;
}

.lp-hero-copy[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.lp-trust[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-block-end: clamp(12px, 3vw, 28px);
    color: var(--lp-ink2);
    font-size: 14px;
    font-weight: 500;
}

.lp-trust > li[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lp-trust .bi-check-lg[b-8lenueeuc8] {
    color: var(--lp-green);
}

/* The interface languages, each named in itself: a unit that wraps as one, always on
   a line of its own (beside the other chips it would sometimes wrap alone behind a
   rule, depending on the language's wording). */
.lp-trust-langs[b-8lenueeuc8] {
    flex-basis: 100%;
    flex-wrap: wrap;
}

.lp-trust-langs .bi-globe2[b-8lenueeuc8] {
    color: var(--lp-ink3);
}

.lp-trust-names[b-8lenueeuc8] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.lp-trust-sep[b-8lenueeuc8] {
    color: var(--lp-ink3);
}

@media (min-width: 900px) {
    .lp-hero[b-8lenueeuc8] {
        padding-block: 56px 64px;
    }

    .lp-hero-grid[b-8lenueeuc8] {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
    }

    .lp-wrap[b-8lenueeuc8] {
        padding-inline: 32px;
    }
}

@media (min-width: 768px) {
    .lp-wrap[b-8lenueeuc8] {
        padding-inline: 32px;
    }
}

/* --- The conversation with Astrid ---------------------------- */
.lp-chat[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    inline-size: 100%;
    max-inline-size: 500px;
    min-block-size: 480px;
    margin-inline: auto;
    padding: 18px;
    border-radius: 32px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line), var(--lp-shadow);
}

.lp-chat-head[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--lp-line);
}

/* The portrait sits on a honey arch that peeks out behind it. */
.lp-avatar[b-8lenueeuc8] {
    position: relative;
    flex: none;
    inline-size: 48px;
    block-size: 58px;
}

.lp-avatar[b-8lenueeuc8]::before {
    content: "";
    position: absolute;
    inset-block: 5px -5px;
    inset-inline: 5px -5px;
    border-radius: 999px 999px 10px 10px;
    background: var(--lp-honey);
}

.lp-avatar img[b-8lenueeuc8] {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 999px 999px 10px 10px;
    background: #fff;
    object-fit: cover;
    object-position: 50% 16%;
}

.lp-chat-who b[b-8lenueeuc8] {
    display: block;
    font-family: var(--lp-fd);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.lp-chat-who small[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lp-ink3);
    font-size: 13px;
}

.lp-chat-who small[b-8lenueeuc8]::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: #3ca36b;
}

.lp-restart[b-8lenueeuc8] {
    display: none;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    margin-inline-start: auto;
    padding-inline: 10px;
    border-radius: 999px;
    color: var(--lp-ink3);
    font-size: 13px;
    font-weight: 600;
}

.lp-restart:not([hidden])[b-8lenueeuc8] {
    display: inline-flex;
}

.lp-restart:hover[b-8lenueeuc8] {
    background: var(--lp-soft);
    color: var(--lp-ink);
}

.lp-msgs[b-8lenueeuc8] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
}

.guest-landing[b-8lenueeuc8]  .lp-msg {
    max-inline-size: 88%;
    padding: 12px 15px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}

.guest-landing[b-8lenueeuc8]  .lp-msg small {
    display: block;
    margin-block-start: 4px;
    color: var(--lp-ink3);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.35;
}

.guest-landing[b-8lenueeuc8]  .lp-msg-a {
    align-self: flex-start;
    border-end-start-radius: 6px;
    background: var(--lp-soft);
}

.guest-landing[b-8lenueeuc8]  .lp-msg-u {
    align-self: flex-end;
    border-end-end-radius: 6px;
    background: var(--lp-navy);
    color: #fff;
}

.guest-landing[b-8lenueeuc8]  .lp-msg-typing {
    display: flex;
    gap: 4px;
    padding: 15px 16px;
}

.guest-landing[b-8lenueeuc8]  .lp-msg-typing i {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--lp-ink3);
}

.guest-landing[b-8lenueeuc8]  .lp-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guest-landing[b-8lenueeuc8]  .lp-opt {
    min-block-size: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    background: var(--lp-card);
    box-shadow: inset 0 0 0 1.5px var(--lp-navy);
    color: var(--lp-navy);
    font-size: 15.5px;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}

.guest-landing[b-8lenueeuc8]  .lp-opt:hover {
    background: var(--lp-navy);
    color: #fff;
}

/* The starting point the two answers lead to. */
.guest-landing[b-8lenueeuc8]  .lp-start-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    background: var(--lp-honey-soft);
}

.guest-landing[b-8lenueeuc8]  .lp-start-card small {
    color: var(--lp-honey-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.guest-landing:lang(ar)[b-8lenueeuc8]  .lp-start-card small {
    letter-spacing: 0;
    text-transform: none;
}

.guest-landing[b-8lenueeuc8]  .lp-start-card b {
    font-family: var(--lp-fd);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.guest-landing[b-8lenueeuc8]  .lp-start-card ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15.5px;
}

.guest-landing[b-8lenueeuc8]  .lp-start-card li {
    display: flex;
    gap: 8px;
}

.guest-landing[b-8lenueeuc8]  .lp-start-card li i {
    margin-block-start: 3px;
    color: var(--lp-green);
}

.guest-landing[b-8lenueeuc8]  .lp-start-card .lp-btn {
    inline-size: 100%;
    margin-block-start: 4px;
}

/* --- Life in Sweden ribbon ---------------------------------- */
.lp-rib[b-8lenueeuc8] {
    padding-block: 22px;
    border-block: 1px solid var(--lp-line);
    background: var(--lp-card);
}

.lp-rib .lp-wrap[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-rib-head[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 20px;
}

.lp-life-list[b-8lenueeuc8] {
    display: grid;
    gap: 10px;
}

@media (min-width: 620px) {
    .lp-life-list[b-8lenueeuc8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .lp-life-list[b-8lenueeuc8] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lp-tile[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 56px;
    padding: 10px 16px;
    border-radius: 18px;
    background: var(--lp-cream);
    box-shadow: inset 0 0 0 1px var(--lp-line);
}

.lp-tile-ico[b-8lenueeuc8] {
    flex: none;
    color: var(--lp-navy);
    font-size: 24px;
    line-height: 1;
}

.lp-tile-body[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.lp-tile-title[b-8lenueeuc8] {
    font-family: var(--lp-fd);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.lp-tile-sub[b-8lenueeuc8] {
    color: var(--lp-ink3);
    font-size: 13.5px;
    line-height: 1.35;
}

/* "More about …" links: the arrow leans the way the link goes. */
.guest-landing .lp-way-more[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    font-size: 16px;
    font-weight: 700;
}

/* --- How a day works ------------------------------------------ */
.lp-day[b-8lenueeuc8] {
    display: grid;
    gap: 12px;
}

@media (min-width: 800px) {
    .lp-day[b-8lenueeuc8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

.lp-day-card[b-8lenueeuc8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 28px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
}

.lp-day-n[b-8lenueeuc8] {
    color: var(--lp-navy);
    font-family: var(--lp-fd);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.lp-day-n small[b-8lenueeuc8] {
    margin-inline-start: 4px;
    font-size: 20px;
    letter-spacing: 0;
}

.lp-day-card h3[b-8lenueeuc8] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.lp-day-card > p:not(.lp-day-n)[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-size: 16px;
}

.lp-day-speak[b-8lenueeuc8] {
    background: var(--lp-navy);
    color: #fff;
}

.lp-day-speak .lp-day-n[b-8lenueeuc8] {
    color: var(--lp-honey);
}

.lp-day-speak > p:not(.lp-day-n)[b-8lenueeuc8] {
    color: rgba(255, 255, 255, .85);
}

.lp-day-review[b-8lenueeuc8] {
    background: var(--lp-honey-soft);
    box-shadow: none;
}

.lp-day-review .lp-day-n[b-8lenueeuc8] {
    color: var(--lp-honey-ink);
}

/* --- Features: tabs and panels -------------------------------- */
.lp-features[b-8lenueeuc8] {
    padding-block-start: 0;
}

/* The tab strip and the one-panel-at-a-time layout exist only once script runs
   (:root.lp-js, set in App.razor's head and again by guest-home.js): without it the
   strip is hidden and the four panels are simply stacked. */
.lp-tabs[b-8lenueeuc8] {
    display: none;
    gap: 8px;
    margin-block-end: 20px;
    padding: 4px;
    margin-inline: -4px;
    overflow-x: auto;
    scrollbar-width: none;
}

:root.lp-js .lp-tabs[b-8lenueeuc8] {
    display: flex;
}

.lp-tabs[b-8lenueeuc8]::-webkit-scrollbar {
    display: none;
}

.lp-tab[b-8lenueeuc8] {
    flex: none;
    min-block-size: 48px;
    padding-inline: 20px;
    border-radius: 999px;
    background: var(--lp-card);
    box-shadow: inset 0 0 0 1.5px var(--lp-line);
    color: var(--lp-ink2);
    font-size: 15.5px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}

.lp-tab:hover[b-8lenueeuc8] {
    box-shadow: inset 0 0 0 1.5px var(--lp-ink);
    color: var(--lp-ink);
}

.lp-tab[aria-selected="true"][b-8lenueeuc8] {
    background: var(--lp-navy);
    box-shadow: none;
    color: #fff;
}

/* The panels share one grid cell, so the box is as tall as the tallest and switching
   tabs moves nothing below it. */
.lp-panels[b-8lenueeuc8] {
    border-radius: 32px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
    overflow: clip;
}

.lp-panel[b-8lenueeuc8] {
    display: grid;
    gap: 24px;
    padding: clamp(20px, 4vw, 48px);
}

.lp-panel + .lp-panel[b-8lenueeuc8] {
    border-block-start: 1px solid var(--lp-line);
}

:root.lp-js .lp-panels[b-8lenueeuc8] {
    display: grid;
    grid-template-areas: "s";
}

:root.lp-js .lp-panel[b-8lenueeuc8] {
    grid-area: s;
    border-block-start: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .35s, transform .35s, visibility 0s .35s;
}

:root.lp-js .lp-panel.is-on[b-8lenueeuc8] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s, transform .35s;
}

@media (min-width: 860px) {
    .lp-panel[b-8lenueeuc8] {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
    }
}

.lp-panel-copy[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.lp-panel-title[b-8lenueeuc8] {
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
}

.lp-panel-copy > p[b-8lenueeuc8] {
    max-inline-size: 44ch;
    color: var(--lp-ink2);
    font-size: 17px;
}

.lp-facts[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.lp-facts li[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
}

.lp-facts b[b-8lenueeuc8] {
    color: var(--lp-navy);
    font-family: var(--lp-fd);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
}

.lp-facts span[b-8lenueeuc8] {
    color: var(--lp-ink3);
    font-size: 14px;
}

/* --- The pictures: a phone frame, faded at the bottom --------- */
.lp-phone[b-8lenueeuc8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    inline-size: 100%;
    max-inline-size: 340px;
    max-block-size: 400px;
    margin-inline: auto;
    padding: 18px 16px 0;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background: var(--lp-cream);
    box-shadow: 0 0 0 1px var(--lp-line);
    cursor: default;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.lp-mock[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-mock-head[b-8lenueeuc8] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--lp-ink3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-mock-head [lang="sv"][b-8lenueeuc8] {
    letter-spacing: 0;
    text-transform: none;
}

.lp-row[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
}

.lp-row small[b-8lenueeuc8] {
    display: block;
    color: var(--lp-ink3);
    font-size: 13px;
    font-weight: 400;
}

.lp-row > i[b-8lenueeuc8] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 12px;
    background: var(--lp-navy-soft);
    color: var(--lp-navy);
}

.lp-row.is-done > i[b-8lenueeuc8] {
    background: var(--lp-green-soft);
    color: var(--lp-green);
}

.lp-row.is-now[b-8lenueeuc8] {
    background: var(--lp-navy);
    box-shadow: none;
    color: #fff;
}

.lp-row.is-now small[b-8lenueeuc8] {
    color: rgba(255, 255, 255, .8);
}

.lp-row.is-now > i[b-8lenueeuc8] {
    background: var(--lp-honey);
    color: var(--lp-ink);
}

/* A due flashcard and the app's four ratings. */
.lp-flash > span[b-8lenueeuc8] {
    flex: 1;
}

.lp-flash b[b-8lenueeuc8] {
    display: block;
    font-family: var(--lp-fd);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.lp-flash .lp-flash-audio[b-8lenueeuc8] {
    margin-inline-start: auto;
}

.lp-rates[b-8lenueeuc8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.lp-rates span[b-8lenueeuc8] {
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.lp-rates span:last-child[b-8lenueeuc8] {
    background: var(--lp-green-soft);
    box-shadow: none;
    color: var(--lp-green);
}

/* The conversation, inside the picture: the chat's bubbles, a size down and at rest. */
.lp-mock .lp-msg[b-8lenueeuc8] {
    font-size: 15.5px;
}

/* A drawn player and its subtitle. */
.lp-vid[b-8lenueeuc8] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: repeating-linear-gradient(135deg, #d9e3ea 0 10px, #cdd9e2 10px 20px);
}

.lp-vid i[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--lp-navy);
    font-size: 20px;
}

.lp-captions[b-8lenueeuc8] {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 26, .82);
    color: #fff;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
}

.lp-captions small[b-8lenueeuc8] {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 400;
}

.lp-captions mark[b-8lenueeuc8] {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--lp-honey);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

/* The reader's page (Graded Reading). */
.lp-book-levels[b-8lenueeuc8] {
    display: inline-flex;
    gap: 4px;
}

.lp-book-levels i[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    min-inline-size: 22px;
    block-size: 22px;
    border-radius: 6px;
    background: var(--lp-soft);
    font-style: normal;
    letter-spacing: 0;
}

.lp-book-levels i.is-on[b-8lenueeuc8] {
    background: var(--lp-navy);
    color: #fff;
}

.lp-book-text[b-8lenueeuc8] {
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
    color: var(--lp-ink);
    font-size: 17px;
}

.lp-karaoke[b-8lenueeuc8] {
    background: var(--lp-honey-soft);
    border-radius: 4px;
}

/* --- Pricing ----------------------------------------------- */
.lp-pricing[b-8lenueeuc8] {
    background: var(--lp-soft);
}

.lp-plans[b-8lenueeuc8] {
    display: grid;
    gap: 14px;
}

@media (min-width: 800px) {
    .lp-plans[b-8lenueeuc8] {
        grid-template-columns: repeat(var(--lp-plan-count, 3), 1fr);
        align-items: stretch;
    }
}

.lp-trial[b-8lenueeuc8],
.lp-plan[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    border-radius: 28px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
}

.lp-plan-best[b-8lenueeuc8] {
    box-shadow: 0 0 0 2px var(--lp-navy), var(--lp-shadow);
}

.lp-plan-name[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--lp-fb);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.lp-badge[b-8lenueeuc8] {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--lp-honey-soft);
    color: var(--lp-honey-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lp-plan-price[b-8lenueeuc8],
.lp-trial-price[b-8lenueeuc8] {
    font-family: var(--lp-fd);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.lp-plan-price small[b-8lenueeuc8] {
    margin-inline-start: 6px;
    color: var(--lp-ink3);
    font-family: var(--lp-fb);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

.lp-plan-text[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-size: 15.5px;
}

.lp-plan-note[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-size: 14.5px;
    font-weight: 600;
}

/* A campaign on a plan card (only while the owner shows offers to guests and one is live):
   label, the price to pay as the card's largest number, then the terms; the list price below
   steps down to "Then SEK 35 per month". Never "lp-plan…"/"lp-trial…": the render tests read
   those prefixes as cards. The page's own tokens: signed-out pages always render light (App.razor
   gives them no theme class), so there is no dark variant to follow. */
.lp-offer[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    background: var(--lp-honey-soft);
    color: var(--lp-ink);
}

.lp-offer-tags[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.lp-offer-chip[b-8lenueeuc8],
.lp-offer-pct[b-8lenueeuc8] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* An admin's label can be long: it wraps inside the chip rather than widening the card. */
.lp-offer-chip[b-8lenueeuc8] {
    min-inline-size: 0;
    max-inline-size: 100%;
    background: var(--lp-navy);
    color: #fff;
    overflow-wrap: anywhere;
}

.lp-offer-pct[b-8lenueeuc8] {
    background: var(--lp-honey);
    color: var(--lp-ink);
    white-space: nowrap;
}

/* Flex, so "for your first payment" moves under the price as a whole instead of breaking beside it. */
.lp-offer-price[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--lp-ink2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/* "SEK 279,30" fits a 320px phone at this size and may break at its space rather than overflow. */
.lp-offer-amount[b-8lenueeuc8] {
    color: var(--lp-ink);
    font-family: var(--lp-fd);
    font-size: clamp(34px, 10vw, 44px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.lp-offer-terms[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-size: 14px;
    line-height: 1.45;
}

/* With an offer above it, the list price is the "then" figure: still there, no longer the headline. */
.lp-offer + .lp-plan-price[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-size: 26px;
}

.lp-offer-then[b-8lenueeuc8] {
    color: var(--lp-ink2);
    font-family: var(--lp-fb);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

.guest-landing:lang(ar) .lp-offer-amount[b-8lenueeuc8] {
    letter-spacing: 0;
}

.lp-trial .lp-btn[b-8lenueeuc8],
.lp-plan .lp-btn[b-8lenueeuc8] {
    inline-size: 100%;
    margin-block-start: auto;
}

.lp-pricing-more[b-8lenueeuc8] {
    margin-block-start: 12px;
}

/* --- FAQ --------------------------------------------------- */
.lp-faq[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-inline-size: 820px;
}

.lp-faq-item[b-8lenueeuc8] {
    border-radius: 22px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
}

.lp-faq-item summary[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-block-size: 64px;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.lp-faq-item summary[b-8lenueeuc8]::-webkit-details-marker {
    display: none;
}

.lp-faq-icon[b-8lenueeuc8] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--lp-soft);
    font-size: 14px;
    transition: transform .25s var(--lp-ease), background-color .25s;
}

.lp-faq-item[open] .lp-faq-icon[b-8lenueeuc8] {
    background: var(--lp-honey);
    transform: rotate(45deg);
}

.lp-faq-item p[b-8lenueeuc8] {
    max-inline-size: 64ch;
    padding: 0 20px 20px;
    color: var(--lp-ink2);
}

/* --- Start --------------------------------------------------- */
.lp-start[b-8lenueeuc8] {
    padding-block-end: clamp(64px, 10vw, 112px);
}

.lp-final[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: clamp(28px, 6vw, 72px);
    border-radius: 36px;
    background: var(--lp-navy);
    color: #fff;
}

.lp-final .lp-h2[b-8lenueeuc8] {
    color: #fff;
}

.lp-final .lp-sub[b-8lenueeuc8] {
    color: rgba(255, 255, 255, .82);
}

.lp-final small[b-8lenueeuc8] {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.guest-landing .lp-final a:not(.lp-btn)[b-8lenueeuc8] {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lp-final :focus-visible[b-8lenueeuc8] {
    outline-color: var(--lp-honey);
}

/* --- The phone's bottom call to action ------------------------- */
.lp-dock[b-8lenueeuc8] {
    position: fixed;
    z-index: 1020;
    inset-inline: 12px;
    inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
    max-inline-size: 520px;
    margin-inline: auto;
    padding-block: 8px;
    padding-inline: 22px 8px;
    border-radius: 999px;
    background: var(--lp-navy);
    box-shadow: 0 20px 44px -16px rgba(15, 61, 92, .7);
    color: #fff;
    transform: translateY(160%);
    visibility: hidden;
    transition: transform .35s var(--lp-ease), visibility 0s .35s;
}

.lp-dock.is-shown[b-8lenueeuc8] {
    transform: none;
    visibility: visible;
    transition: transform .35s var(--lp-ease);
}

.lp-dock :focus-visible[b-8lenueeuc8] {
    outline-color: var(--lp-honey);
}

.lp-dock p[b-8lenueeuc8] {
    flex: 1;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
}

.lp-dock small[b-8lenueeuc8] {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    font-weight: 400;
}

@media (min-width: 900px) {
    .lp-dock[b-8lenueeuc8] {
        display: none;
    }
}

/* --- Trust (testimonials, learner count, SFI alignment, about) — rendered by
   TrustSection, only with real data from Home:Trust. Its elements carry that
   component's scope, so the rules reach them through ::deep. ------------------ */
.guest-landing[b-8lenueeuc8]  .lp-trust-section {
    padding-block: clamp(40px, 6vw, 64px);
}

.guest-landing[b-8lenueeuc8]  .lp-trust-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    inline-size: 100%;
    max-inline-size: 1140px;
    margin-inline: auto;
    padding-inline: 20px;
}

.guest-landing[b-8lenueeuc8]  .lp-trust-title {
    font-size: clamp(32px, 7.6vw, 54px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
}

.guest-landing[b-8lenueeuc8]  .lp-trust-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    font-weight: 600;
}

.guest-landing[b-8lenueeuc8]  .lp-trust-facts li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guest-landing[b-8lenueeuc8]  .lp-trust-facts i {
    color: var(--lp-navy);
    font-size: 22px;
}

.guest-landing[b-8lenueeuc8]  .lp-quotes {
    display: grid;
    gap: 14px;
}

@media (min-width: 800px) {
    .guest-landing[b-8lenueeuc8]  .lp-quotes {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.guest-landing[b-8lenueeuc8]  .lp-quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    block-size: 100%;
    padding: 24px;
    border-radius: 28px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px var(--lp-line);
}

.guest-landing[b-8lenueeuc8]  .lp-quote blockquote {
    margin: 0;
    font-size: 17px;
}

.guest-landing[b-8lenueeuc8]  .lp-quote figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: auto;
}

.guest-landing[b-8lenueeuc8]  .lp-quote figcaption img {
    border-radius: 50%;
    object-fit: cover;
}

.guest-landing[b-8lenueeuc8]  .lp-quote figcaption small {
    display: block;
    color: var(--lp-ink3);
}

.guest-landing[b-8lenueeuc8]  .lp-about {
    max-inline-size: 68ch;
    color: var(--lp-ink2);
}

.guest-landing[b-8lenueeuc8]  .lp-about-title {
    margin-block-end: 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

/* ============================================================
   Motion — decoration only, always degrading to a static, complete page
   * Everything is CSS: the scroll reveals use view() timelines (Chrome and Edge;
     elsewhere the page is simply there), the hero plays once on load.
   * Only opacity, translate and scale move. Entrances move vertically only, so
     RTL needs rules just for the arrow's nudge.
   * animation-fill-mode is `backwards`, never `forwards`/`both`, so an element is
     hidden only before its animation starts; afterwards its own :hover and
     :active styles still apply.
   * Screens only (print shows the page as is), and only when the visitor has not
     asked for reduced motion.
   ============================================================ */

@keyframes lp-rise-b-8lenueeuc8 {
    from {
        opacity: 0;
        translate: 0 var(--lp-rise, 16px);
    }
}

@keyframes lp-pop-b-8lenueeuc8 {
    from {
        opacity: 0;
        translate: 0 8px;
        scale: .97;
    }
}

@keyframes lp-blink-b-8lenueeuc8 {
    50% {
        opacity: .25;
        translate: 0 -3px;
    }
}

/* --- Hero: once, on load ----------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
    .lp-hero-copy[b-8lenueeuc8] {
        --lp-rise: 12px;
    }

    .lp-hero-copy > *[b-8lenueeuc8] {
        animation: lp-rise-b-8lenueeuc8 .6s var(--lp-ease) backwards;
    }

    .lp-hero-copy > :nth-child(2)[b-8lenueeuc8] { animation-delay: .07s; }
    .lp-hero-copy > :nth-child(3)[b-8lenueeuc8] { animation-delay: .14s; }
    .lp-hero-copy > :nth-child(4)[b-8lenueeuc8] { animation-delay: .21s; }
    .lp-hero-copy > :nth-child(5)[b-8lenueeuc8] { animation-delay: .28s; }

    .lp-chat[b-8lenueeuc8] {
        animation: lp-rise-b-8lenueeuc8 .7s var(--lp-ease) .12s backwards;
    }

    /* The conversation, one message at a time (guest-home.js adds them). */
    .guest-landing[b-8lenueeuc8]  .lp-msgs > *,
    .guest-landing[b-8lenueeuc8]  .lp-start-card {
        animation: lp-pop-b-8lenueeuc8 .4s cubic-bezier(.2, .8, .3, 1.1) backwards;
    }

    .guest-landing[b-8lenueeuc8]  .lp-msg-typing i {
        animation: lp-blink-b-8lenueeuc8 1s infinite;
    }

    .guest-landing[b-8lenueeuc8]  .lp-msg-typing i:nth-child(2) { animation-delay: .15s; }
    .guest-landing[b-8lenueeuc8]  .lp-msg-typing i:nth-child(3) { animation-delay: .3s; }
}

/* --- Below the fold: tied to scroll ------------------------- */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 160px) {
    @media screen and (prefers-reduced-motion: no-preference) {
        .lp-head[b-8lenueeuc8],
        .lp-rib .lp-wrap > *[b-8lenueeuc8],
        .lp-day-card[b-8lenueeuc8],
        .lp-tabs[b-8lenueeuc8],
        .lp-panels[b-8lenueeuc8],
        .lp-trial[b-8lenueeuc8],
        .lp-plan[b-8lenueeuc8],
        .lp-faq[b-8lenueeuc8],
        .lp-final[b-8lenueeuc8] {
            animation: lp-rise-b-8lenueeuc8 var(--lp-ease) backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 160px;
        }

        .lp-day-card[b-8lenueeuc8] {
            --lp-rise: 24px;
        }
    }

    /* Side-by-side items arrive a step apart, in reading order (RTL too, since the
       first child sits on the right there). */
    @media screen and (prefers-reduced-motion: no-preference) and (min-width: 800px) {
        .lp-day-card:nth-child(2)[b-8lenueeuc8],
        .lp-plans > :nth-child(2)[b-8lenueeuc8] {
            animation-range: entry 30px entry 190px;
        }

        .lp-day-card:nth-child(3)[b-8lenueeuc8],
        .lp-plans > :nth-child(3)[b-8lenueeuc8] {
            animation-range: entry 60px entry 220px;
        }
    }
}

/* --- Interaction ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    /* A press you can feel. */
    .guest-landing[b-8lenueeuc8]  .lp-btn:active {
        scale: .98;
    }

    .guest-landing[b-8lenueeuc8]  .lp-btn:hover {
        translate: 0 -1px;
    }

    /* The arrow leans the way the button goes. */
    .guest-landing[b-8lenueeuc8]  .lp-btn:focus-visible .lp-btn-arrow,
    .lp-way-more:focus-visible .lp-btn-arrow[b-8lenueeuc8] {
        translate: 3px 0;
    }

    :root[dir="rtl"] .guest-landing[b-8lenueeuc8]  .lp-btn:focus-visible .lp-btn-arrow,
    :root[dir="rtl"] .lp-way-more:focus-visible .lp-btn-arrow[b-8lenueeuc8] {
        translate: -3px 0;
    }

    /* FAQ answers open and close smoothly instead of snapping. Browsers without
       ::details-content (or interpolate-size) keep the instant toggle. */
    .lp-faq-item[b-8lenueeuc8] {
        interpolate-size: allow-keywords;
    }

    .lp-faq-item[b-8lenueeuc8]::details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        transition:
            block-size .3s var(--lp-ease),
            opacity .3s ease,
            content-visibility .3s allow-discrete;
    }

    .lp-faq-item[open][b-8lenueeuc8]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .guest-landing[b-8lenueeuc8]  .lp-btn:hover .lp-btn-arrow,
    .lp-way-more:hover .lp-btn-arrow[b-8lenueeuc8] {
        translate: 3px 0;
    }

    :root[dir="rtl"] .guest-landing[b-8lenueeuc8]  .lp-btn:hover .lp-btn-arrow,
    :root[dir="rtl"] .lp-way-more:hover .lp-btn-arrow[b-8lenueeuc8] {
        translate: -3px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn[b-8lenueeuc8],
    .lp-btn-arrow[b-8lenueeuc8],
    .lp-tab[b-8lenueeuc8],
    .lp-opt[b-8lenueeuc8],
    .lp-panel[b-8lenueeuc8],
    .lp-faq-icon[b-8lenueeuc8],
    .lp-dock[b-8lenueeuc8] {
        transition: none;
    }
}
/* /Components/Shared/StudentDashboard/TrustSection.razor.rz.scp.css */
/* Trust section — scoped. Uses the landing page's --lp-* tokens, which it
   inherits from .guest-landing (custom properties cross CSS isolation). */

.lp-trust-section[b-08eiymrexz] {
    padding-block: 48px;
    border-block-start: 1px solid var(--lp-line, #e4e8ec);
    background: #fff;
}

.lp-trust-wrap[b-08eiymrexz] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: var(--lp-gutter, 16px);
}

.lp-trust-title[b-08eiymrexz] {
    margin: 0;
    font-family: inherit;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.lp-trust-section:lang(ar) .lp-trust-title[b-08eiymrexz] {
    letter-spacing: 0;
}

.lp-trust-facts[b-08eiymrexz],
.lp-quotes[b-08eiymrexz] {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-trust-facts li[b-08eiymrexz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.lp-trust-facts .bi[b-08eiymrexz] {
    color: var(--lp-green, #1e6b52);
    font-size: 18px;
}

.lp-quote[b-08eiymrexz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    block-size: 100%;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--lp-line, #e4e8ec);
    border-radius: 16px;
    background: var(--lp-linen, #f7f5f0);
}

.lp-quote blockquote[b-08eiymrexz] {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.lp-quote blockquote p[b-08eiymrexz] {
    margin: 0;
}

.lp-quote figcaption[b-08eiymrexz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: auto;
}

.lp-quote img[b-08eiymrexz] {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.lp-quote figcaption span[b-08eiymrexz] {
    display: flex;
    flex-direction: column;
}

.lp-quote small[b-08eiymrexz] {
    color: var(--lp-ink-soft, #4f5b67);
    font-size: 13px;
}

.lp-about[b-08eiymrexz] {
    padding: 18px;
    border-radius: 16px;
    background: var(--lp-mist, #f3f6f9);
}

.lp-about-title[b-08eiymrexz] {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
}

.lp-about p[b-08eiymrexz] {
    margin: 0;
    color: var(--lp-ink-soft, #4f5b67);
}

@media (min-width: 768px) {
    .lp-trust-section[b-08eiymrexz] {
        padding-block: 64px;
    }

    .lp-trust-title[b-08eiymrexz] {
        font-size: 36px;
    }

    .lp-quotes[b-08eiymrexz] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}