/* The Malkie Show front-end refresh: black, white and Malkie gold.
   Loaded after app.css and media.css (layouts/app.blade.php); #app / #navbar raise specificity
   over the theme and over the CSS saved with the home sections. */

:root {
    --tms-ink: #141217;
    --tms-ink-soft: #4A4650;
    --tms-gold: #C9902E;
    --tms-gold-deep: #A9761F;
    --tms-gold-light: #F3D27E;
    --tms-cream: #FBF3E2;
}

/* ---------- Header ---------- */

#navbar .nav-link {
    position: relative;
    padding: 8px 12px;
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 600;
    transition: color .15s;
}

#navbar .nav-link:hover,
#navbar .xs-categories-item:hover > .nav-link {
    color: var(--tms-gold-deep);
}

/* Current page: gold text with a short gold bar underneath. */
@media (min-width: 992px) {
    #navbar .nav-link.is-current::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--tms-gold);
    }
}

#navbar .nav-link.is-current {
    color: var(--tms-gold-deep);
}

/* Bell shows only with unread notifications (navbar.blade.php); its count is a gold badge. */
#navbar .noti-icon .badge-circle-danger {
    width: 18px;
    height: 18px;
    font-size: 11px !important;
    font-weight: 700;
    color: var(--tms-ink);
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    box-shadow: 0 0 0 2px #fff;
}

#navbar.sticky {
    box-shadow: 0 8px 24px rgba(20, 18, 23, .08);
}

/* Bigger logo on phones and tablets (was squeezed to ~40px wide). */
@media (max-width: 991.98px) {
    #navbar .navbar-brand {
        width: auto;
        max-width: none;
        height: auto;
        flex: 0 0 auto;
    }

    /* app.css forces height:auto !important here, which shrank the logo to the 88px box. */
    #navbar .navbar-brand img.nav-logo {
        width: auto;
        height: 60px !important;
        max-width: 130px;
    }
}

@media (max-width: 1199.98px) {
    #app .pb-topbar .container-boxed {
        padding: 0 16px;
    }

    #app .pb-topbar .slider-text {
        font-size: 14px;
    }
}

/* ---------- Seasons menu (navbar.blade.php): episode stills, one row ---------- */

#navbar .menu-category > ul > li .cat-dropdown-menu.tms-seasons {
    width: 940px;
    max-width: calc(100vw - 48px);
    padding: 22px;
    border: 1px solid #EEEBE6;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(20, 18, 23, .16);
    transform: translateY(6px);
    transition: opacity .18s, visibility .18s, transform .18s;
}

#navbar .menu-category > ul > li.show-items .cat-dropdown-menu.tms-seasons {
    transform: none;
}

#navbar .tms-seasons > li {
    margin: 0;
}

#navbar .tms-seasons-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px !important;
    padding: 0 4px;
}

#navbar .tms-seasons-head span {
    color: var(--tms-ink);
    font-size: 18px;
    font-weight: 800;
}

#navbar .tms-seasons-head small {
    color: #8A8690;
    font-size: 13px;
}

#navbar .tms-seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

#navbar .tms-season {
    display: block;
    padding: 6px;
    border-radius: 16px;
    color: var(--tms-ink);
    transition: background-color .15s;
}

#navbar .tms-season:hover {
    background: var(--tms-cream);
}

#navbar .tms-season-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #EEEBE6;
}

#navbar .tms-season-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

#navbar .tms-season:hover .tms-season-img img {
    transform: scale(1.06);
}

#navbar .tms-season-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 23, 0) 45%, rgba(20, 18, 23, .45));
}

#navbar .tms-season-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 11px;
    box-shadow: 0 6px 14px rgba(20, 18, 23, .3);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .2s, transform .2s;
}

#navbar .tms-season-play i {
    margin-left: 2px;
}

#navbar .tms-season:hover .tms-season-play {
    opacity: 1;
    transform: none;
}

#navbar .tms-season-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 2px;
}

#navbar .tms-season-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

#navbar .tms-season:hover .tms-season-title {
    color: var(--tms-gold-deep);
}

#navbar .tms-season-meta {
    color: #8A8690;
    font-size: 12px;
    font-weight: 600;
}

/* Inside the phone / tablet menu: compact rows with a small still. */
@media (max-width: 991.98px) {
    #navbar .menu-category > ul > li .cat-dropdown-menu.tms-seasons {
        width: 100%;
        max-width: none;
        margin-top: 8px;
        padding: 8px;
        border-radius: 16px;
        box-shadow: none;
        background: #FAF9F7;
        transform: none;
    }

    #navbar .tms-seasons-head {
        display: none;
    }

    #navbar .tms-seasons-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    #navbar .tms-season {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px;
        border-radius: 12px;
    }

    #navbar .tms-season-img {
        flex: 0 0 96px;
        border-radius: 10px;
    }

    #navbar .tms-season-play {
        display: none;
    }

    #navbar .tms-season-body {
        flex: 1 1 auto;
        align-items: flex-start;
        padding: 0;
        text-align: left;
    }
}

/* ---------- Teal question bar under the header -> black and gold ---------- */

#app .pb-topbar {
    padding: 10px 0;
    background: radial-gradient(circle at 88% -60%, rgba(243, 210, 126, .28), rgba(243, 210, 126, 0) 55%), var(--tms-ink);
    border-bottom: 1px solid rgba(243, 210, 126, .25);
}

#app .pb-topbar .text-slider {
    justify-content: flex-start;
    text-align: left;
    color: #fff;
    font-weight: 600;
}

#app .pb-topbar .slider-text {
    font-size: 16px;
    letter-spacing: .01em;
}

#app .pb-topbar .slider-text::before {
    content: "\f128";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--tms-gold);
    color: var(--tms-ink);
    font: 900 11px "Font Awesome 5 Free";
    vertical-align: 2px;
}

#app .pb-topbar .link-column {
    justify-content: flex-end;
}

#app .pb-topbar .link-column a {
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}

#app .pb-topbar .link-column a:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(201, 144, 46, .35);
}

/* ---------- Hero (pages/includes/hero.blade.php) ---------- */

#app .tms-hero .hero-swiper {
    height: clamp(460px, 64vh, 640px);
}

#app .tms-hero .swiper-slide {
    padding: 8px 15px;
}

#app .tms-hero .hero-banner {
    overflow: hidden;
    border-radius: 28px;
    /* Shown while the picture loads: dark, so the white headline is readable straight away. */
    background: radial-gradient(circle at 80% 30%, #3A3240, var(--tms-ink) 60%);
}

#app .tms-hero .hero-banner img.tms-hero-img {
    border: 0;
    border-radius: 0 !important;
    object-position: 70% center;
    /* Undo the phone-only rule saved in the admin custom CSS and a home section's CSS
       (centres by the corner, width:auto, endless "slideLeft" pan). */
    top: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    transform: none;
    animation: none;
}

/* Reel: banner + episode stills cross-fading, each with a slow zoom while shown. */
#app .tms-hero .tms-hero-reel,
#app .tms-hero .tms-reel-frame {
    position: absolute;
    inset: 0;
    margin: 0;
}

#app .tms-hero .tms-reel-frame {
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.1s ease;
}

#app .tms-hero .tms-reel-frame.is-active {
    opacity: 1;
}

/* A theme rule centres images by their corner (top/left 50%); pin these to fill the frame. */
#app .tms-hero .tms-reel-frame img.tms-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
}

#app .tms-hero .tms-reel-frame.is-active img {
    animation: tmsKenBurns 6.5s ease-out both;
}

/* Episode stills are 16:9 photos: keep the faces in view. */
#app .tms-hero .tms-reel-episode img.tms-hero-img {
    object-position: center 30%;
}

@keyframes tmsKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

#app .tms-hero .tms-reel-labels {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 2;
}

#app .tms-hero .tms-reel-label {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: 340px;
    padding: 10px 16px 10px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(20, 18, 23, .62);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

#app .tms-hero .tms-reel-label.is-active:not(:empty) {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#app .tms-hero .tms-reel-label:hover {
    border-color: rgba(243, 210, 126, .6);
}

#app .tms-hero .tms-reel-play {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 11px;
}

#app .tms-hero .tms-reel-play i {
    margin-left: 2px;
}

#app .tms-hero .tms-reel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#app .tms-hero .tms-reel-season {
    color: var(--tms-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#app .tms-hero .tms-reel-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#app .tms-hero .hero-banner .banner-bg-overlay {
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(20, 18, 23, .94) 0%, rgba(20, 18, 23, .78) 32%, rgba(20, 18, 23, 0) 62%),
        linear-gradient(0deg, rgba(20, 18, 23, .45) 0%, rgba(20, 18, 23, 0) 35%);
}

#app .tms-hero .hero-banner .hero-content {
    width: min(560px, 48%);
    padding-left: 64px;
}

#app .tms-hero .tms-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid rgba(243, 210, 126, .35);
    border-radius: 999px;
    background: rgba(20, 18, 23, .45);
    color: var(--tms-gold-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    animation: tmsHeroUp .5s ease both;
}

#app .tms-hero .tms-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tms-gold);
    box-shadow: 0 0 0 0 rgba(201, 144, 46, .6);
    animation: tmsHeroPulse 2s infinite;
}

#app .tms-hero .hero-banner .hero-content h1 {
    margin: 0;
    font-size: 58px !important;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

#app .tms-hero .course-time-date {
    margin: 16px 0 0;
    overflow: visible;
}

#app .tms-hero .course-time-date p {
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.6;
}

#app .tms-hero .hero-actions {
    gap: 12px;
    margin-top: 28px;
}

#app .tms-hero .hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin: 0;
    padding: 0 26px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s;
}

#app .tms-hero .hero-actions .btn:hover {
    transform: translateY(-2px);
}

#app .tms-hero .hero-actions .tms-hero-main {
    border: 0;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    box-shadow: 0 12px 28px rgba(201, 144, 46, .38);
}

#app .tms-hero .hero-actions .tms-hero-main i {
    font-size: 12px;
}

#app .tms-hero .hero-actions .tms-hero-main:hover {
    box-shadow: 0 16px 34px rgba(201, 144, 46, .48);
}

/* Second button: outlined so the main action stands out. */
#app .tms-hero .hero-actions .tms-hero-second {
    border: 1.5px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
}

#app .tms-hero .hero-actions .tms-hero-second:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .16);
}

/* Cart / favourite / info circles on episode slides. */
#app .tms-hero .hero-actions .vb-content-action-btn {
    width: 50px;
    height: 50px;
    margin: 0 !important;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    backdrop-filter: blur(6px);
}

#app .tms-hero .tms-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 28px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 600;
    animation: tmsHeroUp .5s ease .3s both;
}

#app .tms-hero .tms-hero-facts i {
    margin-right: 8px;
    color: var(--tms-gold-light);
}

#app .tms-hero .tms-hero-dots {
    position: absolute !important;
    left: auto;
    right: 40px;
    bottom: 28px;
    width: auto;
}

#app .tms-hero .tms-hero-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #fff;
    opacity: .5;
    transition: width .2s, opacity .2s;
}

#app .tms-hero .tms-hero-dots .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 4px;
    background: var(--tms-gold-light);
    opacity: 1;
}

@keyframes tmsHeroUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes tmsHeroPulse {
    0% { box-shadow: 0 0 0 0 rgba(201, 144, 46, .6); }
    70% { box-shadow: 0 0 0 8px rgba(201, 144, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 144, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-hero * {
        animation: none !important;
    }
}

@media (max-width: 1199.98px) {
    #app .tms-hero .hero-banner .hero-content h1 {
        font-size: 46px !important;
    }
}

/* Tablet and phone: picture on top, text over a dark fade at the bottom. */
@media (max-width: 991.98px) {
    #app .tms-hero .hero-swiper {
        height: 600px;
    }

    #app .tms-hero .swiper-slide {
        padding: 8px 12px;
    }

    #app .tms-hero .hero-banner {
        border-radius: 22px;
    }

    #app .tms-hero .hero-banner img.tms-hero-img {
        object-position: 64% top;
    }

    #app .tms-hero .hero-banner .banner-bg-overlay {
        background: linear-gradient(0deg, rgba(20, 18, 23, .97) 0%, rgba(20, 18, 23, .88) 38%, rgba(20, 18, 23, 0) 68%);
    }

    #app .tms-hero .hero-banner .hero-content {
        top: auto;
        bottom: 28px;
        width: 100%;
        padding: 0 24px;
        transform: none;
    }

    #app .tms-hero .hero-banner .hero-content h1 {
        font-size: 36px !important;
    }

    #app .tms-hero .course-time-date p {
        font-size: 15px !important;
    }

    /* The saved subtitle has a hard line break placed for the wide layout. */
    #app .tms-hero .course-time-date p br {
        display: none;
    }

    #app .tms-hero .tms-hero-dots {
        top: 20px;
        right: 24px;
        bottom: auto;
    }

    /* Wide episode stills only fill the top half here, so less of each side is cut off;
       the dark fade behind the text covers the join. */
    #app .tms-hero .tms-reel-episode {
        bottom: 48%;
    }

    #app .tms-hero .tms-reel-episode img.tms-hero-img {
        object-position: center center;
    }

    /* Episode label at the top, clear of the text at the bottom. */
    #app .tms-hero .tms-reel-labels {
        top: 16px;
        left: 16px;
        right: auto;
        bottom: auto;
    }

    #app .tms-hero .tms-reel-label {
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        max-width: calc(100vw - 72px);
        padding: 8px 14px 8px 8px;
    }

    #app .tms-hero .tms-reel-play {
        flex-basis: 28px;
        height: 28px;
        font-size: 10px;
    }

    #app .tms-hero .tms-reel-title {
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    #app .tms-hero .hero-swiper {
        height: 640px;
    }

    #app .tms-hero .hero-banner .hero-content {
        padding: 0 20px;
    }

    #app .tms-hero .hero-banner .hero-content h1 {
        font-size: 31px !important;
    }

    #app .tms-hero .hero-actions {
        gap: 10px;
        margin-top: 22px;
    }

    #app .tms-hero .hero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
        height: 48px;
    }

    #app .tms-hero .tms-hero-facts {
        gap: 6px 16px;
        margin-top: 20px;
        font-size: 12px;
    }
}

/* Spacing for the saved home sections. This rule used to come from the saved "Zeesekeit2" section's CSS,
   which mood_cards.blade.php now replaces; the other saved sections were laid out with it. */
.featured-home-section {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;
}

/* ---------- Mood intro in big type (pages/includes/mood_cards.blade.php) ---------- */

#app .tms-moods {
    padding: 72px 0 40px;
    text-align: center;
}

#app .tms-moods-ask {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 80px;
    margin: 0;
    color: var(--tms-ink);
    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
}

#app .tms-moods-face {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--tms-gold);
    font-size: 54px;
}

#app .tms-moods-face.is-in i {
    animation: tmsFacePop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes tmsFacePop {
    from { opacity: 0; transform: scale(.4) rotate(-30deg); }
    to { opacity: 1; transform: none; }
}

/* Each word rises in from a blur, one after another. */
#app .tms-moods-word {
    display: inline-block;
    animation: tmsWordIn .6s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i) * 80ms);
}

@keyframes tmsWordIn {
    from { opacity: 0; filter: blur(10px); transform: translateY(40%); }
    to { opacity: 1; filter: blur(0); transform: none; }
}

#app .tms-moods.is-leaving .tms-moods-line,
#app .tms-moods.is-leaving .tms-moods-face {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-30%);
    transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}

/* The answer: big gold with a slow shine across the letters. */
#app .tms-moods-answer {
    margin: 10px 0 0;
    background: linear-gradient(100deg, var(--tms-gold-deep) 0%, var(--tms-gold) 30%, #FBE6A8 45%, var(--tms-gold) 60%, var(--tms-gold-deep) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 76px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    animation: tmsShine 6s linear infinite;
}

#app .tms-moods-answer span {
    display: block;
}

@keyframes tmsShine {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

#app .tms-moods-fix {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--tms-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

#app .tms-moods-fix:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 18, 23, .2);
}

#app .tms-moods-fix i {
    color: var(--tms-gold-light);
    font-size: 12px;
    animation: tmsMoodsBounce 1.6s ease-in-out infinite;
}

@keyframes tmsMoodsBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@media (max-width: 1199.98px) {
    #app .tms-moods-ask { font-size: 46px; }
    #app .tms-moods-face { font-size: 44px; }
    #app .tms-moods-answer { font-size: 60px; }
}

@media (max-width: 767.98px) {
    #app .tms-moods {
        padding: 48px 0 20px;
    }

    #app .tms-moods-ask {
        flex-direction: column;
        gap: 10px;
        min-height: 128px;
        font-size: 32px;
    }

    #app .tms-moods-face {
        font-size: 38px;
    }

    #app .tms-moods-answer {
        font-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-moods * {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Home rows: heading with "View all" and arrows (pages/home.blade.php) ---------- */

#app .tms-row-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

#app .tms-row-head .section-title {
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    color: var(--tms-ink);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

#app .tms-row-head .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: var(--tms-gold);
}

#app .tms-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#app .tms-row-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    color: var(--tms-gold-deep);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

#app .tms-row-all i {
    font-size: 12px;
    transition: transform .2s;
}

#app .tms-row-all:hover i {
    transform: translateX(3px);
}

#app .tms-row-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #E7E3DD;
    border-radius: 50%;
    background: #fff;
    color: var(--tms-ink);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}

#app .tms-row-arrow:hover:not(.swiper-button-disabled) {
    border-color: var(--tms-ink);
    background: var(--tms-ink);
    color: var(--tms-gold-light);
}

#app .tms-row-arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

/* ---------- Video card (includes/webinar/home-content-card.blade.php) ---------- */

#app .tms-vcard {
    height: 100%;
    color: var(--tms-ink);
}

#app .tms-vcard-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #EEEBE6;
    box-shadow: 0 6px 18px rgba(20, 18, 23, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

#app .tms-vcard:hover .tms-vcard-media {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(20, 18, 23, .16);
}

#app .tms-vcard-link,
#app .tms-vcard-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#app .tms-vcard-link img {
    object-fit: cover;
    transition: transform .5s ease;
}

#app .tms-vcard:hover .tms-vcard-link img {
    transform: scale(1.05);
}

/* Soft dark at the bottom so the price and cart read on any picture. */
#app .tms-vcard-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 23, 0) 55%, rgba(20, 18, 23, .55));
}

#app .tms-vcard-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(20, 18, 23, .35);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s, transform .25s;
}

#app .tms-vcard-play i {
    margin-left: 3px;
}

#app .tms-vcard:hover .tms-vcard-play {
    opacity: 1;
    transform: none;
}

#app .tms-vcard-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    gap: 6px;
    pointer-events: none;
}

#app .tms-vcard-new {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-vcard-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 11px;
}

#app .tms-vcard-price {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--tms-ink);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
}

#app .tms-vcard-price s {
    margin-left: 4px;
    color: #8A8690;
    font-weight: 600;
}

#app .tms-vcard-cart,
#app .tms-vcard-notify {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(20, 18, 23, .3);
    transition: transform .15s;
}

#app .tms-vcard-cart:hover {
    transform: scale(1.1);
}

#app .tms-vcard-notify {
    right: 54px;
    background: rgba(255, 255, 255, .94);
}

#app .tms-vcard-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 4px 0;
}

#app .tms-vcard-season {
    color: var(--tms-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-vcard-body a {
    color: inherit;
    text-decoration: none;
}

#app .tms-vcard-title {
    display: -webkit-box;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .15s;
}

#app .tms-vcard:hover .tms-vcard-title {
    color: var(--tms-gold-deep);
}

#app .tms-vcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #8A8690;
    font-size: 13px;
    font-weight: 600;
}

#app .tms-vcard-meta i {
    margin-right: 6px;
    color: var(--tms-gold);
}

@media (max-width: 767.98px) {
    #app .tms-row-head .section-title {
        font-size: 22px;
    }

    /* Phones swipe; the arrows would only crowd the heading. */
    #app .tms-row-arrow {
        display: none;
    }

    #app .tms-row-all {
        margin-right: 0;
    }

    /* No hover on touch: keep the play button visible but small. */
    #app .tms-vcard-play {
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        font-size: 13px;
        opacity: .9;
        transform: none;
    }
}

/* Video rows (Newest, Most watched): give the cards their final width before Swiper starts, so they don't load
   full-width and then shrink. Must match the breakpoints in pages/home.blade.php
   (Swiper: width = (row - space * (perView - 1)) / perView). */
#app .tms-row-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
}

#app .tms-row-swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: calc((100% - 3.5px) / 1.25);
    margin-right: 14px;
}

@media (min-width: 576px) {
    #app .tms-row-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 19.2px) / 2.2);
        margin-right: 16px;
    }
}

@media (min-width: 992px) {
    #app .tms-row-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 44px) / 3.2);
        margin-right: 20px;
    }
}

@media (min-width: 1200px) {
    #app .tms-row-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 66px) / 4);
        margin-right: 22px;
    }
}

@media (min-width: 1900px) {
    #app .tms-row-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 96px) / 5);
        margin-right: 24px;
    }
}

/* ---------- FFP flip cards (pages/includes/ffp_cards.blade.php) ---------- */

#app .tms-ffp {
    padding: 72px 0 80px;
    background:
        radial-gradient(circle at 8% 10%, rgba(243, 210, 126, .35), rgba(243, 210, 126, 0) 40%),
        radial-gradient(circle at 92% 90%, rgba(201, 144, 46, .14), rgba(201, 144, 46, 0) 45%),
        #FBF8F3;
}

#app .tms-ffp-head {
    margin-bottom: 40px;
    text-align: center;
}

#app .tms-ffp-head h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    color: var(--tms-ink);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Mic icon as a round badge: thin gold ring on white. */
#app .tms-ffp-head h2 img {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 9px;
    border: 1.5px solid var(--tms-gold);
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 6px 16px rgba(201, 144, 46, .18);
}

#app .tms-ffp-head p {
    margin: 8px 0 0;
    color: var(--tms-ink-soft);
    font-size: 19px;
    font-weight: 600;
}

#app .tms-ffp-head small {
    display: block;
    margin-top: 6px;
    color: var(--tms-gold-deep);
    font-size: 13px;
    font-weight: 700;
}

#app .tms-ffp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

#app .tms-ffp-card {
    height: 320px;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

#app .tms-ffp-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
    #app .tms-ffp-card:hover .tms-ffp-inner {
        transform: rotateY(180deg);
    }
}

#app .tms-ffp-card.is-flipped .tms-ffp-inner,
#app .tms-ffp-card:focus-visible .tms-ffp-inner {
    transform: rotateY(180deg);
}

#app .tms-ffp-front,
#app .tms-ffp-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#app .tms-ffp-front {
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px 20px;
    border: 1px solid #F0E6D3;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF3E2 100%);
    box-shadow: 0 10px 28px rgba(20, 18, 23, .07);
    transition: box-shadow .25s;
}

#app .tms-ffp-card:hover .tms-ffp-front {
    box-shadow: 0 18px 40px rgba(20, 18, 23, .14);
}

/* Soft gold glow behind the cut-out portrait. */
#app .tms-ffp-front::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 50%;
    width: 190px;
    height: 190px;
    margin-left: -95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 210, 126, .55), rgba(243, 210, 126, 0) 70%);
}

/* The portraits are 800x1000 with the person in the middle ~60% and white around:
   fill the top of the card and zoom in around the face so it fills the card. */
#app .tms-ffp-front img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: calc(100% - 66px);
    margin: 0;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.2);
    transform-origin: center top;
    transition: transform .5s ease;
    /* The portraits have a white background baked in: multiply lets the card and glow show through it. */
    mix-blend-mode: multiply;
}

#app .tms-ffp-hint {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 15px;
    font-weight: 900;
    animation: tmsHintPulse 2.4s ease-in-out infinite;
}

@keyframes tmsHintPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 18, 23, .25); }
    50% { box-shadow: 0 0 0 7px rgba(20, 18, 23, 0); }
}

#app .tms-ffp-name {
    position: relative;
    color: var(--tms-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: center;
}

#app .tms-ffp-ep {
    position: relative;
    margin-top: 2px;
    color: var(--tms-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-ffp-back {
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 26px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(243, 210, 126, .32), rgba(243, 210, 126, 0) 55%),
        var(--tms-ink);
    color: #fff;
    transform: rotateY(180deg);
}

#app .tms-ffp-back-name {
    color: var(--tms-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#app .tms-ffp-back p {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

#app .tms-ffp-watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}

#app .tms-ffp-watch:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(201, 144, 46, .35);
}

#app .tms-ffp-watch i {
    font-size: 11px;
}

@media (max-width: 991.98px) {
    #app .tms-ffp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Phones: two across, shorter cards; tap to flip. */
@media (max-width: 767.98px) {
    #app .tms-ffp {
        padding: 48px 0 56px;
    }

    #app .tms-ffp-head {
        margin-bottom: 24px;
    }

    /* Icon on its own line above the title, so a wrapped title stays centred. */
    #app .tms-ffp-head h2 {
        flex-direction: column;
        gap: 6px;
        font-size: 26px;
        line-height: 1.15;
    }

    #app .tms-ffp-head h2 img {
        width: 42px;
        height: 42px;
        padding: 7px;
    }

    #app .tms-ffp-head p {
        font-size: 15px;
    }

    #app .tms-ffp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    #app .tms-ffp-card {
        height: 240px;
    }

    #app .tms-ffp-front {
        padding: 0 8px 14px;
        border-radius: 18px;
    }

    #app .tms-ffp-front::before {
        top: 18px;
        width: 130px;
        height: 130px;
        margin-left: -65px;
    }

    #app .tms-ffp-front img {
        height: calc(100% - 50px);
    }

    #app .tms-ffp-name {
        font-size: 15px;
    }

    #app .tms-ffp-ep {
        font-size: 9px;
    }

    #app .tms-ffp-hint {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    #app .tms-ffp-back {
        gap: 8px;
        padding: 16px 14px;
        border-radius: 18px;
    }

    #app .tms-ffp-back p {
        font-size: 16px;
    }

    #app .tms-ffp-watch {
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-ffp-inner {
        transition: none;
    }

    #app .tms-ffp-hint {
        animation: none;
    }
}

/* ---------- Behind-the-scenes band (pages/includes/curious_band.blade.php) ---------- */

#app .tms-curious {
    padding: 8px 0 56px;
    background: #FBF8F3;
}

#app .tms-curious-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 260px;
    padding: 40px 56px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--tms-ink);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}

/* Slow zoom on the photo (works on phones, unlike the old fixed background). */
#app .tms-curious-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 40%;
    animation: tmsCuriousZoom 18s ease-in-out infinite alternate;
}

@keyframes tmsCuriousZoom {
    from { transform: scale(1); }
    to { transform: scale(1.12); }
}

#app .tms-curious-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(20, 18, 23, .92) 0%, rgba(20, 18, 23, .7) 45%, rgba(20, 18, 23, .35) 100%),
        radial-gradient(circle at 100% 0%, rgba(243, 210, 126, .25), rgba(243, 210, 126, 0) 50%);
}

#app .tms-curious-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 620px;
}

#app .tms-curious-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tms-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#app .tms-curious-title {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

#app .tms-curious-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .35);
    transition: transform .2s, box-shadow .2s;
}

#app .tms-curious-btn i {
    font-size: 13px;
    transition: transform .2s;
}

#app .tms-curious-card:hover .tms-curious-btn {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(201, 144, 46, .45);
}

#app .tms-curious-card:hover .tms-curious-btn i {
    transform: translateX(4px);
}

@media (max-width: 767.98px) {
    #app .tms-curious {
        padding-bottom: 40px;
    }

    #app .tms-curious-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        min-height: 0;
        padding: 28px 22px;
        border-radius: 22px;
    }

    #app .tms-curious-card::before {
        background: linear-gradient(180deg, rgba(20, 18, 23, .55) 0%, rgba(20, 18, 23, .9) 100%);
    }

    #app .tms-curious-title {
        font-size: 24px;
    }

    #app .tms-curious-btn {
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-curious-bg {
        animation: none;
    }
}

/* ---------- Poifect balance (pages/includes/poifect_balance.blade.php) ---------- */

#app .tms-poifect {
    padding: 72px 0;
    background:
        radial-gradient(circle at 0% 20%, rgba(243, 210, 126, .32), rgba(243, 210, 126, 0) 40%),
        radial-gradient(circle at 100% 80%, rgba(201, 144, 46, .12), rgba(201, 144, 46, 0) 45%),
        #FBF8F3;
}

#app .tms-poifect-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 56px;
}

#app .tms-poifect-text h2 {
    margin: 0;
    color: var(--tms-ink);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
}

#app .tms-poifect-text h2 em {
    color: var(--tms-gold);
    font-style: italic;
}

#app .tms-poifect-sub {
    margin: 12px 0 0;
    color: var(--tms-ink-soft);
    font-size: 18px;
    font-weight: 600;
}

#app .tms-poifect-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

#app .tms-poifect-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #EFE6D4;
    border-radius: 16px;
    background: rgba(255, 255, 255, .75);
    color: var(--tms-ink-soft);
    font-size: 14px;
    line-height: 1.45;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

#app .tms-poifect-list li:hover {
    border-color: rgba(201, 144, 46, .45);
    box-shadow: 0 10px 24px rgba(20, 18, 23, .07);
    transform: translateY(-2px);
}

#app .tms-poifect-list strong {
    display: block;
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
}

#app .tms-poifect-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 12px;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 16px;
}

#app .tms-poifect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

#app .tms-poifect-main,
#app .tms-poifect-second {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background-color .2s;
}

#app .tms-poifect-main {
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
}

#app .tms-poifect-main i {
    font-size: 13px;
    transition: transform .2s;
}

#app .tms-poifect-main:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-poifect-main:hover i {
    transform: translateX(4px);
}

#app .tms-poifect-second {
    border: 1.5px solid var(--tms-ink);
    background: transparent;
    color: var(--tms-ink);
}

#app .tms-poifect-second i {
    font-size: 11px;
}

#app .tms-poifect-second:hover {
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-poifect-photo {
    position: relative;
}

/* The picture already has its black-to-gold rounded frame. */
#app .tms-poifect-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(20, 18, 23, .16));
}

#app .tms-poifect-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(20, 18, 23, .14);
    animation: tmsChipFloat 5s ease-in-out infinite;
}

#app .tms-poifect-chip i {
    color: var(--tms-gold);
}

#app .tms-poifect-chip-1 {
    top: 12%;
    left: -24px;
}

#app .tms-poifect-chip-2 {
    right: -16px;
    bottom: 14%;
    animation-delay: -2.5s;
}

@keyframes tmsChipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1199.98px) {
    #app .tms-poifect-text h2 {
        font-size: 38px;
    }
}

/* Tablet and phone: photo first, then the text and the six lines. */
@media (max-width: 991.98px) {
    #app .tms-poifect {
        padding: 48px 0;
    }

    #app .tms-poifect-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #app .tms-poifect-photo {
        order: -1;
        width: min(420px, 82%);
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    #app .tms-poifect-text h2 {
        font-size: 30px;
    }

    #app .tms-poifect-sub {
        font-size: 16px;
    }

    #app .tms-poifect-list {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 20px;
    }

    #app .tms-poifect-list li {
        padding: 12px 14px;
    }

    #app .tms-poifect-actions a {
        flex: 1 1 100%;
        justify-content: center;
    }

    #app .tms-poifect-chip {
        padding: 7px 12px;
        font-size: 12px;
    }

    #app .tms-poifect-chip-1 {
        left: -14px;
    }

    #app .tms-poifect-chip-2 {
        right: -10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-poifect-chip {
        animation: none;
    }
}

/* Rank badge on Most watched cards (#1, #2...). */
#app .tms-vcard-rank {
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(20, 18, 23, .25);
}

#app .tms-row-all {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    #app .tms-row-head .section-title {
        font-size: 20px;
    }
}

/* ---------- Fans quotes (pages/includes/fans_quotes.blade.php) ---------- */

#app .tms-fans {
    overflow: hidden;
    padding: 72px 0 64px;
    background:
        radial-gradient(circle at 50% 0%, rgba(243, 210, 126, .22), rgba(243, 210, 126, 0) 50%),
        var(--tms-ink);
    color: #fff;
}

#app .tms-fans-head {
    margin-bottom: 36px;
    text-align: center;
}

#app .tms-fans-badge {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    padding: 9px;
    border: 1.5px solid var(--tms-gold);
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}

#app .tms-fans-head h2 {
    margin: 0;
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.02em;
}

#app .tms-fans-head p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 17px;
    font-weight: 600;
}

#app .tms-fans-head strong {
    color: var(--tms-gold-light);
}

/* Rows drift sideways forever; the track holds the quotes four times and moves by a quarter of its width. */
#app .tms-fans-row {
    display: flex;
    margin-bottom: 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

#app .tms-fans-track {
    display: flex;
    flex: 0 0 auto;
    gap: 18px;
    padding-right: 18px;
    animation: tmsFansDrift 45s linear infinite;
}

#app .tms-fans-row.is-reverse .tms-fans-track {
    animation-direction: reverse;
    animation-duration: 36s;
}

#app .tms-fans-row:hover .tms-fans-track,
#app .tms-fans-row:active .tms-fans-track {
    animation-play-state: paused;
}

@keyframes tmsFansDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

#app .tms-fans-card {
    display: flex;
    flex: 0 0 320px;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 20px 22px;
    border-radius: 18px;
    background: #fff;
    color: var(--tms-ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

#app .tms-fans-card > i {
    color: var(--tms-gold);
    font-size: 18px;
}

#app .tms-fans-card blockquote {
    flex: 1 1 auto;
    margin: 0;
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

#app .tms-fans-card figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8A8690;
    font-size: 13px;
    font-weight: 700;
}

#app .tms-fans-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tms-cream);
    color: var(--tms-gold-deep);
    font-size: 10px;
}

#app .tms-fans-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin-top: 22px;
    padding: 0 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .35);
    transition: transform .2s;
}

#app .tms-fans-btn:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-fans-btn i {
    font-size: 13px;
    transition: transform .2s;
}

#app .tms-fans-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 767.98px) {
    #app .tms-fans {
        padding: 48px 0 44px;
    }

    #app .tms-fans-head {
        margin-bottom: 24px;
    }

    #app .tms-fans-head h2 {
        font-size: 28px;
    }

    #app .tms-fans-head p {
        font-size: 15px;
    }

    #app .tms-fans-card {
        flex-basis: 250px;
        padding: 16px 18px;
    }

    #app .tms-fans-card blockquote {
        font-size: 14px;
    }

    #app .tms-fans-row {
        margin-bottom: 12px;
    }

    #app .tms-fans-track {
        gap: 12px;
        padding-right: 12px;
    }
}

/* Without motion: one row the visitor can swipe through. */
@media (prefers-reduced-motion: reduce) {
    #app .tms-fans-track {
        animation: none;
    }

    #app .tms-fans-row {
        overflow-x: auto;
    }
}

/* ---------- Browse by season tabs (pages/includes/browse_seasons.blade.php) ---------- */

#app .tms-season-tabs {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

#app .tms-season-tabs::-webkit-scrollbar {
    display: none;
}

#app .tms-season-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #E7E3DD;
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

#app .tms-season-tab span {
    padding: 1px 8px;
    border-radius: 999px;
    background: #F3EFE8;
    color: #8A8690;
    font-size: 12px;
    font-weight: 800;
}

#app .tms-season-tab:hover {
    border-color: var(--tms-ink);
    color: var(--tms-ink);
}

#app .tms-season-tab.is-active {
    border-color: var(--tms-ink);
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-season-tab.is-active span {
    background: var(--tms-gold);
    color: var(--tms-ink);
}

#app .tms-season-tab:focus {
    outline: none;
}

#app .tms-season-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 144, 46, .45);
}

#app .tms-season-panel[hidden] {
    display: none;
}

/* ---------- Not-found page (resources/views/errors/404.blade.php) ---------- */

#app .tms-404 {
    padding: 72px 0 96px;
    background:
        radial-gradient(circle at 50% 20%, rgba(243, 210, 126, .35), rgba(243, 210, 126, 0) 45%),
        #FBF8F3;
    text-align: center;
}

#app .tms-404-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--tms-gold);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(201, 144, 46, .2);
}

#app .tms-404-badge img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#app .tms-404-code {
    margin: 18px 0 0;
    background: linear-gradient(100deg, var(--tms-gold-deep), var(--tms-gold) 40%, #FBE6A8 55%, var(--tms-gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

#app .tms-404 h1 {
    margin: 10px 0 0;
    color: var(--tms-ink);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
}

#app .tms-404-text {
    max-width: 520px;
    margin: 12px auto 0;
    color: var(--tms-ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

#app .tms-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

#app .tms-404-main,
#app .tms-404-second {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s, background-color .2s, color .2s;
}

#app .tms-404-main {
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
}

#app .tms-404-main:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-404-second {
    border: 1.5px solid var(--tms-ink);
    color: var(--tms-ink);
}

#app .tms-404-second:hover {
    background: var(--tms-ink);
    color: #fff;
}

@media (max-width: 575.98px) {
    #app .tms-404 {
        padding: 48px 0 64px;
    }

    #app .tms-404-code {
        font-size: 96px;
    }

    #app .tms-404 h1 {
        font-size: 24px;
    }

    #app .tms-404-actions a {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Links like /#browse-seasons land below the sticky header. */
#app #browse-seasons,
#app #newest-videos,
#app #most-watched {
    scroll-margin-top: 110px;
}

/* ---------- Metziah receipt (pages/includes/metziah_receipt.blade.php) ---------- */

#app .tms-receipt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border: 1.5px solid var(--tms-gold);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px rgba(201, 144, 46, .18);
}

#app .tms-receipt-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#app .tms-receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
    transition: transform .2s;
}

#app .tms-receipt-btn:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-receipt-btn i {
    font-size: 13px;
    transition: transform .2s;
}

#app .tms-receipt-btn:hover i {
    transform: translateX(4px);
}


#app .tms-receipt-section {
    overflow: hidden;
    padding: 72px 0 88px;
    background:
        radial-gradient(circle at 0% 100%, rgba(243, 210, 126, .35), rgba(243, 210, 126, 0) 40%),
        #FBF8F3;
}

#app .tms-receipt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

#app .tms-receipt-intro h2 {
    margin: 14px 0 0;
    color: var(--tms-ink);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.03em;
}

#app .tms-receipt-answer {
    margin: 12px 0 0;
    color: var(--tms-gold-deep);
    font-size: 20px;
    font-weight: 700;
}

/* Polaroid-style photo, slightly tilted. */
#app .tms-receipt-photo {
    width: min(300px, 70%);
    margin-top: 28px;
    padding: 12px 12px 40px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(20, 18, 23, .16);
    transform: rotate(-4deg);
}

#app .tms-receipt-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 30%;
}

#app .tms-receipt-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The till printer the paper comes out of. */
#app .tms-receipt-printer {
    position: relative;
    z-index: 2;
    width: 420px;
    max-width: 100%;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2A262E, var(--tms-ink));
    box-shadow: 0 10px 24px rgba(20, 18, 23, .3);
}

#app .tms-receipt-printer span {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 8px;
    height: 5px;
    border-radius: 3px;
    background: #000;
}

#app .tms-receipt {
    position: relative;
    width: 372px;
    max-width: calc(100% - 48px);
    margin-top: -10px;
    filter: drop-shadow(0 14px 22px rgba(20, 18, 23, .14));
}

#app .tms-receipt-paper {
    position: relative;
    padding: 28px 24px 30px;
    background: #fff;
    color: var(--tms-ink);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Torn zig-zag bottom edge. */
#app .tms-receipt-paper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background:
        linear-gradient(-45deg, transparent 7px, #fff 0) 0 0 / 14px 10px repeat-x,
        linear-gradient(45deg, transparent 7px, #fff 0) 0 0 / 14px 10px repeat-x;
}

#app .tms-receipt-paper p {
    margin: 0;
}

#app .tms-r-center {
    text-align: center;
}

#app .tms-r-strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .08em;
}

#app .tms-r-muted {
    color: #8A8690;
    font-size: 12px;
}

#app .tms-r-rule {
    margin: 12px 0 !important;
    border-top: 2px dashed #D9D3C9;
}

#app .tms-r-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

#app .tms-r-item {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
}

#app .tms-r-item small {
    color: #8A8690;
    font-size: 11px;
    font-style: italic;
    text-transform: none;
}

/* Readable item, with a red CANCELED tag instead of a line-through. */
#app .tms-r-mark {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 1px 6px;
    border: 1.5px solid #D93A3A;
    border-radius: 4px;
    color: #D93A3A;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#app .tms-r-line.is-yes {
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--tms-cream);
    font-weight: 800;
}

#app .tms-r-price {
    color: var(--tms-gold-deep);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

#app .tms-r-total {
    font-size: 16px;
    font-weight: 900;
}

#app .tms-r-barcode {
    height: 42px;
    margin: 16px 20px 0 !important;
    background: repeating-linear-gradient(90deg, var(--tms-ink) 0 2px, transparent 2px 4px, var(--tms-ink) 4px 7px, transparent 7px 9px, var(--tms-ink) 9px 10px, transparent 10px 13px);
}

/* The rubber stamp. */
#app .tms-receipt-stamp {
    position: absolute;
    right: -30px;
    bottom: 22px;
    z-index: 3;
    padding: 6px 16px;
    border: 4px solid #D93A3A;
    border-radius: 10px;
    color: #D93A3A;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    mix-blend-mode: multiply;
    opacity: 0;
    transform: rotate(-14deg) scale(2.6);
}

#app .tms-receipt-coupon {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 400px;
    max-width: 100%;
    margin-top: 30px;
    padding: 14px 18px;
    border: 2px dashed var(--tms-gold);
    border-radius: 14px;
    background: var(--tms-cream);
    color: var(--tms-ink);
    font-size: 14px;
    line-height: 1.45;
}

#app .tms-receipt-coupon b {
    color: var(--tms-gold-deep);
}

#app .tms-coupon-scissors {
    flex: 0 0 auto;
    color: var(--tms-gold-deep);
    font-size: 18px;
    transform: rotate(-90deg);
}

#app .tms-receipt-wrap .tms-receipt-btn {
    margin-top: 20px;
}

/* Printing: the paper feeds out in jerky steps, then the stamp slams down and the coupon follows. */
#app .tms-receipt-section.is-printing .tms-receipt {
    animation: tmsReceiptFeed 2.4s steps(16) both;
}

#app .tms-receipt-section.is-printing .tms-receipt-stamp {
    animation: tmsStampSlam .35s cubic-bezier(.3, 1.6, .5, 1) 2.6s both;
}

#app .tms-receipt-section.is-printing .tms-receipt-wrap {
    animation: tmsReceiptShake .4s ease 2.85s both;
}

#app .tms-receipt-section.is-printing .tms-receipt-coupon,
#app .tms-receipt-section.is-printing .tms-receipt-btn {
    animation: tmsCouponIn .5s ease 3.2s both;
}

#app .tms-receipt-section:not(.is-printing):not(.is-printed) .tms-receipt {
    clip-path: inset(0 0 100% 0);
}

#app .tms-receipt-section:not(.is-printing):not(.is-printed) .tms-receipt-coupon,
#app .tms-receipt-section:not(.is-printing):not(.is-printed) .tms-receipt-btn {
    opacity: 0;
}

#app .tms-receipt-section.is-printed .tms-receipt-stamp {
    opacity: .92;
    transform: rotate(-14deg) scale(1);
}

@keyframes tmsReceiptFeed {
    from { clip-path: inset(0 0 100% 0); transform: translateY(-40px); }
    to { clip-path: inset(-60px -90px -40px -90px); transform: none; }
}

@keyframes tmsStampSlam {
    from { opacity: 0; transform: rotate(-14deg) scale(2.6); }
    to { opacity: .92; transform: rotate(-14deg) scale(1); }
}

@keyframes tmsReceiptShake {
    0%, 100% { transform: none; }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(4px, -2px); }
    60% { transform: translate(-3px, 1px); }
    80% { transform: translate(2px, 0); }
}

@keyframes tmsCouponIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
    #app .tms-receipt-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #app .tms-receipt-intro {
        text-align: center;
    }

    #app .tms-receipt-photo {
        display: none;
    }
}

@media (max-width: 575.98px) {
    #app .tms-receipt-section {
        padding: 48px 0 64px;
    }

    #app .tms-receipt-intro h2 {
        font-size: 30px;
    }

    #app .tms-receipt-answer {
        font-size: 16px;
    }

    #app .tms-receipt-paper {
        padding: 22px 16px 24px;
        font-size: 12px;
    }

    #app .tms-receipt-stamp {
        right: -8px;
        font-size: 24px;
    }

    #app .tms-receipt-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Canceled items flying off the receipt into the space beside the photo (metziah_receipt.blade.php). */
#app .tms-receipt-intro {
    position: relative;
}

#app .tms-receipt-flyers {
    position: absolute;
    top: 38%;
    right: -30px;
    bottom: 0;
    left: min(310px, 60%);
    pointer-events: none;
}

#app .tms-flyer {
    position: absolute;
    filter: drop-shadow(0 14px 18px rgba(20, 18, 23, .18));
    opacity: 0;
}

#app .tms-flyer.is-vitamins {
    top: 0;
    left: 6%;
    width: 145px;
    --tilt: -12deg;
    --delay: .6s;
}

#app .tms-flyer.is-plane {
    top: 30%;
    left: 30%;
    width: 200px;
    --tilt: -8deg;
    --delay: 1s;
}

#app .tms-flyer.is-latte {
    top: 64%;
    left: 2%;
    width: 135px;
    --tilt: 10deg;
    --delay: 1.6s;
}

#app .tms-receipt-section.is-printing .tms-flyer {
    animation:
        tmsFlyOut .9s cubic-bezier(.2, .8, .2, 1) var(--delay) both,
        tmsFlyFloat 4s ease-in-out calc(var(--delay) + .9s) infinite;
}

#app .tms-receipt-section.is-printed .tms-flyer {
    opacity: 1;
    transform: rotate(var(--tilt));
}

/* From the receipt (to the right), shrunk and spinning, out to their spot. */
@keyframes tmsFlyOut {
    from { opacity: 0; transform: translate(260px, 40px) scale(.3) rotate(40deg); }
    to { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--tilt)); }
}

@keyframes tmsFlyFloat {
    0%, 100% { opacity: 1; transform: translate(0, 0) rotate(var(--tilt)); }
    50% { opacity: 1; transform: translate(0, -10px) rotate(calc(var(--tilt) + 4deg)); }
}

@media (max-width: 991.98px) {
    #app .tms-receipt-flyers {
        display: none;
    }
}

/* ---------- FAQ (pages/includes/faq_section.blade.php) ---------- */

#app .tms-faq {
    padding: 72px 0 80px;
    background: #fff;
}

#app .tms-faq .container {
    max-width: 860px;
}

#app .tms-faq-head {
    margin-bottom: 28px;
    text-align: center;
}

#app .tms-faq-head h2 {
    margin: 14px 0 0;
    color: var(--tms-ink);
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-faq-head p {
    margin: 6px 0 0;
    color: #8A8690;
    font-size: 16px;
    font-weight: 600;
}

#app .tms-faq-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

#app .tms-faq-tabs::-webkit-scrollbar {
    display: none;
}

#app .tms-faq-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid #E7E3DD;
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

#app .tms-faq-tab span {
    padding: 1px 8px;
    border-radius: 999px;
    background: #F3EFE8;
    color: #8A8690;
    font-size: 12px;
    font-weight: 800;
}

#app .tms-faq-tab:hover {
    border-color: var(--tms-ink);
    color: var(--tms-ink);
}

#app .tms-faq-tab.is-active {
    border-color: var(--tms-ink);
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-faq-tab.is-active span {
    background: var(--tms-gold);
    color: var(--tms-ink);
}

#app .tms-faq-tab:focus,
#app .tms-faq-q:focus {
    outline: none;
}

#app .tms-faq-tab:focus-visible,
#app .tms-faq-q:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 144, 46, .45);
}

#app .tms-faq-panel[hidden] {
    display: none;
}

#app .tms-faq-item {
    margin-bottom: 10px;
    border: 1px solid #EEEBE6;
    border-radius: 16px;
    background: #FBF8F3;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

#app .tms-faq-item.is-open {
    border-color: rgba(201, 144, 46, .45);
    background: #fff;
    box-shadow: 0 10px 26px rgba(20, 18, 23, .07);
}

#app .tms-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

/* Gold plus that turns into a minus. */
#app .tms-faq-plus {
    position: relative;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tms-cream);
    transition: background-color .2s;
}

#app .tms-faq-plus::before,
#app .tms-faq-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--tms-gold-deep);
    transition: transform .25s;
}

#app .tms-faq-plus::after {
    transform: rotate(90deg);
}

#app .tms-faq-item.is-open .tms-faq-plus {
    background: var(--tms-ink);
}

#app .tms-faq-item.is-open .tms-faq-plus::before,
#app .tms-faq-item.is-open .tms-faq-plus::after {
    background: var(--tms-gold-light);
}

#app .tms-faq-item.is-open .tms-faq-plus::after {
    transform: rotate(0deg);
}

/* Smooth open/close: the answer row grows from 0 to its height. */
#app .tms-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

#app .tms-faq-item.is-open .tms-faq-a {
    grid-template-rows: 1fr;
}

#app .tms-faq-a-inner {
    overflow: hidden;
}

#app .tms-faq-a-inner p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--tms-ink-soft);
    font-size: 15px;
    line-height: 1.65;
}

#app .tms-faq-a-inner a {
    color: var(--tms-gold-deep);
    font-weight: 700;
    text-decoration: underline;
}

#app .tms-faq-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--tms-ink);
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
}

#app .tms-faq-help strong {
    color: #fff;
}

#app .tms-faq-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(243, 210, 126, .16);
    color: var(--tms-gold-light);
    font-size: 17px;
}

#app .tms-faq-help .tms-receipt-btn {
    height: 46px;
    margin-left: auto;
    padding: 0 22px;
}

@media (max-width: 575.98px) {
    #app .tms-faq {
        padding: 48px 0 56px;
    }

    #app .tms-faq-head h2 {
        font-size: 26px;
    }

    #app .tms-faq-tabs {
        justify-content: flex-start;
    }

    #app .tms-faq-q {
        padding: 15px 16px;
        font-size: 15px;
    }

    #app .tms-faq-a-inner p {
        padding: 0 16px 16px;
        font-size: 14px;
    }

    #app .tms-faq-help .tms-receipt-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-faq-a {
        transition: none;
    }
}

/* ---------- Footer (includes/footer.blade.php) ---------- */

#app .tms-footer {
    padding: 56px 0 0;
    background:
        radial-gradient(circle at 85% 0%, rgba(243, 210, 126, .18), rgba(243, 210, 126, 0) 45%),
        var(--tms-ink);
    color: rgba(255, 255, 255, .72);
}

#app .tms-footer-news {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 26px 28px;
    border: 1px solid rgba(243, 210, 126, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .04);
}

#app .tms-footer-news-text strong {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}

#app .tms-footer-news-text span {
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
}

#app .tms-footer-news-form {
    display: flex;
    flex: 1 1 380px;
    max-width: 480px;
    padding: 6px;
    border-radius: 999px;
    background: #fff;
}

#app .tms-footer-news-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--tms-ink);
    font-size: 15px;
    outline: none;
}

#app .tms-footer-news-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

/* Disabled until an email is typed: still gold, just softer. */
#app .tms-footer-news-form button:disabled {
    opacity: .55;
    cursor: default;
}

#app .tms-footer-news-form button:not(:disabled):hover {
    transform: translateY(-1px);
}

#app .tms-footer-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(20, 18, 23, .25);
    border-top-color: var(--tms-ink);
    border-radius: 50%;
    animation: tmsSpin .7s linear infinite;
}

#app .tms-footer-spinner.d-none {
    display: none;
}

@keyframes tmsSpin {
    to { transform: rotate(360deg); }
}

#app .tms-footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 20px 32px;
    padding: 48px 0 40px;
}

#app .tms-footer-cols > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

#app .tms-footer-brand img {
    width: 120px;
    height: auto;
}

#app .tms-footer-brand p {
    max-width: 300px;
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    line-height: 1.6;
}

#app .tms-footer-title {
    margin-bottom: 4px;
    color: var(--tms-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#app .tms-footer-cols a {
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    text-decoration: none;
    transition: color .15s, transform .15s;
}

#app .tms-footer-cols a:hover {
    color: var(--tms-gold-light);
    transform: translateX(3px);
}

#app .tms-footer-mail i {
    margin-right: 6px;
    color: var(--tms-gold-light);
}

/* Reassurance row: fills the space under the link columns next to the taller brand column. */
/* The brand column spans both rows, so the perks fill the space beside it under the links. */
#app .tms-footer-brand {
    grid-row: span 2;
}

#app .tms-footer-cols > .tms-footer-perks {
    grid-column: 2 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: end;
    justify-content: flex-end;
    gap: 10px;
}

#app .tms-footer-perks span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(243, 210, 126, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 600;
}

#app .tms-footer-perks i {
    color: var(--tms-gold-light);
}

#app .tms-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(243, 210, 126, .2);
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}

#app .tms-footer-bottom-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

#app .tms-footer-bottom i {
    margin-right: 4px;
    color: var(--tms-gold-light);
}

#app .tms-footer-bottom a {
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
}

#app .tms-footer-bottom a:hover {
    color: var(--tms-gold-light);
}

@media (max-width: 991.98px) {
    #app .tms-footer-cols {
        grid-template-columns: 1fr 1fr;
    }

    #app .tms-footer-brand,
    #app .tms-footer-cols > .tms-footer-perks {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 575.98px) {
    #app .tms-footer {
        padding-top: 40px;
    }

    #app .tms-footer-news {
        padding: 20px 18px;
    }

    #app .tms-footer-news-text strong {
        font-size: 22px;
    }

    #app .tms-footer-news-form {
        flex-basis: 100%;
        max-width: none;
    }

    #app .tms-footer-cols {
        gap: 28px 20px;
        padding: 36px 0 32px;
    }

    #app .tms-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Season page (pages/categories.blade.php) ---------- */

#app .tms-season-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 64px;
    background: var(--tms-ink);
    color: #fff;
    isolation: isolate;
}

#app .tms-season-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

#app .tms-season-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(20, 18, 23, .95) 0%, rgba(20, 18, 23, .78) 45%, rgba(20, 18, 23, .4) 100%),
        radial-gradient(circle at 100% 0%, rgba(243, 210, 126, .22), rgba(243, 210, 126, 0) 50%);
}

#app .tms-season-hero-label {
    color: var(--tms-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#app .tms-season-hero h1 {
    margin: 8px 0 0;
    color: #fff;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -.03em;
}

#app .tms-season-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    font-weight: 600;
}

#app .tms-season-hero-meta i {
    margin-right: 8px;
    color: var(--tms-gold-light);
}

#app .tms-season-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin-top: 26px;
    padding: 0 26px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .35);
    transition: transform .2s;
}

#app .tms-season-hero-btn:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-season-hero-btn i {
    font-size: 12px;
}

#app .tms-season-pills {
    display: flex;
    gap: 8px;
    margin: 24px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#app .tms-season-pills::-webkit-scrollbar {
    display: none;
}

#app .tms-season-pills a {
    flex: 0 0 auto;
    padding: 9px 18px;
    border: 1px solid #E7E3DD;
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}

#app .tms-season-pills a:hover {
    border-color: var(--tms-ink);
    color: var(--tms-ink);
}

#app .tms-season-pills a.is-active {
    border-color: var(--tms-ink);
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-season-bundle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 20px;
    padding: 16px 20px;
    border: 1.5px solid rgba(201, 144, 46, .55);
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF9EC, var(--tms-cream));
}

#app .tms-season-bundle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 18px;
}

#app .tms-season-bundle-text {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    color: var(--tms-ink-soft);
    font-size: 14px;
}

#app .tms-season-bundle-text strong {
    color: var(--tms-ink);
    font-size: 17px;
    font-weight: 800;
}

#app .tms-season-bundle-price {
    color: var(--tms-gold-deep);
    font-size: 26px;
    font-weight: 900;
}

#app .tms-season-bundle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--tms-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s;
}

#app .tms-season-bundle-btn:hover {
    color: var(--tms-gold-light);
    transform: translateY(-2px);
}

#app .tms-season-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 22px;
    margin-top: 34px;
}

#app .tms-vcard-guests {
    margin-top: 4px;
    color: var(--tms-ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

#app .tms-vcard-guests b {
    color: var(--tms-gold-deep);
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    #app .tms-season-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #app .tms-season-hero {
        padding: 44px 0 40px;
    }

    #app .tms-season-hero h1 {
        font-size: 38px;
    }

    #app .tms-season-hero-meta {
        font-size: 14px;
    }

    #app .tms-season-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
        margin-top: 24px;
    }

    /* Two per row on phones: lighter card text, cart and price stay on the picture. */
    #app .tms-season-grid .tms-vcard-title {
        min-height: 0;
        font-size: 14px;
    }

    #app .tms-season-grid .tms-vcard-meta,
    #app .tms-season-grid .tms-vcard-guests {
        font-size: 11px;
    }

    #app .tms-season-grid .tms-vcard-season {
        font-size: 9px;
    }

    #app .tms-season-grid .tms-vcard-price {
        padding: 3px 8px;
        font-size: 11px;
    }

    #app .tms-season-grid .tms-vcard-cart {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    #app .tms-season-bundle-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Episode page (course/index.blade.php) ---------- */

#app .tms-episode-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--tms-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#app .tms-episode-head h1 {
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-episode-guests {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

#app .tms-episode-guests b {
    color: var(--tms-gold-light);
}

#app .tms-episode-head #realPrice.text-primary,
#app .tms-episode-head #priceWithDiscount {
    color: var(--tms-gold-light) !important;
    font-weight: 900;
}

#app .tms-episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    font-weight: 600;
}

#app .tms-episode-meta i {
    margin-right: 8px;
    color: var(--tms-gold-light);
}

/* Main button gold; the round icon buttons become small labelled pills. */
#app .tms-episode-head .btn-buy-watch {
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .35);
}

#app .tms-episode-head .btn-buy-watch:hover {
    color: var(--tms-ink);
    transform: translateY(-2px);
}

#app .tms-episode-head .course-action-row .action-items-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#app .tms-episode-head .vb-content-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: 40px;
    margin: 0 !important;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color .15s, border-color .15s;
}

#app .tms-episode-head .vb-content-action-btn:hover {
    border-color: var(--tms-gold-light);
    background: rgba(255, 255, 255, .16);
}

#app .tms-episode-head .vb-content-action-btn svg {
    width: 16px;
    height: 16px;
}

#app .tms-episode-head .vb-content-action-btn .tooltiptext {
    display: none;
}

#app .tms-episode-head .course-action-row a {
    text-decoration: none;
}

#app .tms-episode-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
}

#app .tms-episode-ticks i {
    margin-right: 6px;
    color: var(--tms-gold-light);
    font-size: 11px;
}

#app .tms-episode-gift {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(243, 210, 126, .5);
    text-underline-offset: 4px;
}

#app .tms-episode-gift i {
    color: var(--tms-gold-light);
}

#app .tms-episode-gift:hover {
    color: var(--tms-gold-light);
}

/* Tabs under the video: pills. */
#app .tms-episode-body .single-c-tabs .nav-tabs {
    justify-content: center !important;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
}

#app .tms-episode-body .single-c-tabs .nav-item {
    margin: 0 !important;
}

#app .tms-episode-body .single-c-tabs .nav-item a {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #E7E3DD;
    border-radius: 999px;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
}

#app .tms-episode-body .single-c-tabs .nav-item a::after {
    display: none;
}

#app .tms-episode-body .single-c-tabs .nav-item a.active {
    border-color: var(--tms-ink);
    background: var(--tms-ink);
    color: #fff;
}

/* Malkie's note as a warm card. */
#app .tms-note {
    max-width: 820px;
    margin: 28px auto 0 !important;
    padding: 28px 32px;
    border: 1px solid #F0E3C4;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFCF5, var(--tms-cream));
}

#app .tms-note-label {
    color: var(--tms-gold-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#app .tms-note .episode-description,
#app .tms-note .episode-description * {
    color: var(--tms-ink-soft);
    font-size: 16px !important;
    line-height: 1.75;
}

#app .tms-note .episode-description strong,
#app .tms-note .episode-description b,
#app .tms-note .episode-description h1,
#app .tms-note .episode-description h2,
#app .tms-note .episode-description h3,
#app .tms-note .episode-description h4 {
    color: var(--tms-ink) !important;
    font-size: 19px !important;
    font-weight: 800;
}

/* Comments. */
#app .tms-episode-body .tms-comments-title {
    align-items: baseline;
    max-width: 820px;
    margin: 0 auto;
    color: var(--tms-ink);
    font-size: 24px;
    font-weight: 800;
}

#app .tms-episode-body .tms-comments-title .comment-font {
    font-size: 24px;
}

/* The comments block (title, box, list) at the note card's width. */
#app .tms-episode-body #description > .mt-35 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

#app .tms-episode-body .comment_page .comments-card {
    margin-top: 10px !important;
    padding: 14px 16px !important;
    border: 1px solid #EEEBE6;
    border-radius: 16px;
    background: #FBF8F3;
}

#app .tms-episode-body .comment_page .avtar-text {
    background: var(--tms-cream) !important;
}

#app .tms-episode-body .comment_page .avtar-text h3 {
    color: var(--tms-gold-deep);
    font-weight: 800;
}

#app .tms-episode-body .comment_page .text-gray {
    color: var(--tms-ink-soft) !important;
}

#app .tms-comments-more {
    display: block;
    margin: 18px auto 0;
    padding: 11px 24px;
    border: 1.5px solid var(--tms-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

#app .tms-comments-more:hover {
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-episode-body textarea[name="comment"] {
    border: 1px solid #E7E3DD;
    border-radius: 14px;
    background: #FBF8F3;
}

#app .tms-episode-body .btn-primary {
    border: 0;
    border-radius: 12px;
    background: var(--tms-ink);
    font-weight: 800;
}

@media (max-width: 575.98px) {
    #app .tms-note {
        padding: 20px 18px;
    }

    #app .tms-episode-head .vb-content-action-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* Phones: the episode details sit under the video on white (theme layout), so dark text and side padding. */
@media (max-width: 767.98px) {
    #app .tms-episode-head .tms-episode-label,
    #app .tms-episode-head .tms-episode-guests,
    #app .tms-episode-head .tms-episode-meta,
    #app .tms-episode-head .tms-episode-ticks,
    #app .tms-episode-head .tms-episode-gift {
        padding-left: 20px;
        padding-right: 20px;
    }

    #app .tms-episode-head .tms-episode-label {
        color: var(--tms-gold-deep);
    }

    #app .tms-episode-head .tms-episode-guests,
    #app .tms-episode-head .tms-episode-meta,
    #app .tms-episode-head .tms-episode-ticks,
    #app .tms-episode-head .tms-episode-gift {
        color: var(--tms-ink-soft);
    }

    #app .tms-episode-head .tms-episode-guests b,
    #app .tms-episode-head .tms-episode-meta i,
    #app .tms-episode-head .tms-episode-ticks i,
    #app .tms-episode-head .tms-episode-gift i {
        color: var(--tms-gold-deep);
    }

    #app .tms-episode-head #realPrice.text-primary,
    #app .tms-episode-head #priceWithDiscount {
        color: var(--tms-gold-deep) !important;
    }

    #app .tms-episode-head .vb-content-action-btn {
        border-color: #E7E3DD;
        background: #fff;
        color: var(--tms-ink);
    }

    #app .tms-episode-head .vb-content-action-btn:hover {
        border-color: var(--tms-gold);
        background: var(--tms-cream);
    }
}

/* ---------- Cart (cart/cart_list.blade.php) and checkout (cart/payment.blade.php) ---------- */

#app .tms-cart,
#app .tms-checkout {
    padding-top: 36px;
    padding-bottom: 64px;
}

#app .tms-cart-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}

#app .tms-cart-head h1 {
    margin: 0;
    color: var(--tms-ink);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-cart-head span {
    color: #8A8690;
    font-size: 15px;
    font-weight: 700;
}

#app .tms-cart-grid,
#app .tms-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 28px;
}

#app .tms-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    padding: 14px 48px 14px 14px;
    border: 1px solid #EEEBE6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 18, 23, .05);
}

#app .tms-cart-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    object-fit: cover;
}

#app .tms-cart-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#app .tms-cart-label {
    color: var(--tms-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-cart-title {
    color: var(--tms-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

#app .tms-cart-title:hover {
    color: var(--tms-gold-deep);
}

#app .tms-cart-plan,
#app .tms-cart-gift {
    color: #8A8690;
    font-size: 13px;
    font-weight: 600;
}

#app .tms-cart-gift i {
    color: var(--tms-gold);
}

#app .tms-cart-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

#app .tms-cart-price strong {
    color: var(--tms-ink);
    font-size: 19px;
    font-weight: 900;
}

#app .tms-cart-price s,
#app .tms-cart-price small {
    color: #8A8690;
    font-size: 12px;
}

#app .tms-cart-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #F3EFE8;
    color: #8A8690;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

#app .tms-cart-remove:hover {
    background: #FBE4E4;
    color: #D93A3A;
}

#app .tms-cart-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#app .tms-cart-back:hover {
    color: var(--tms-gold-deep);
}

/* Order summary card (cart and checkout). */
#app .tms-cart-summary {
    position: sticky;
    top: 110px;
    padding: 22px;
    border: 1px solid #EEEBE6;
    border-radius: 20px;
    background: #FBF8F3;
}

#app .tms-cart-summary h2 {
    margin: 0 0 14px;
    color: var(--tms-ink);
    font-size: 19px;
    font-weight: 800;
}

#app .tms-cart-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 600;
}

#app .tms-cart-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dashed #DDD5C6;
    color: var(--tms-ink);
    font-size: 18px;
    font-weight: 900;
}

#app .tms-cart-coupon {
    margin: 6px 0;
}

#app .tms-cart-coupon summary {
    color: var(--tms-gold-deep);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#app .tms-cart-coupon p {
    margin: 8px 0 0;
    color: #8A8690;
    font-size: 13px;
}

#app .tms-cart-coupon-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

#app .tms-cart-coupon-row .form-control {
    height: 42px;
    border: 1px solid #E7E3DD;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
}

#app .tms-cart-coupon-row button {
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--tms-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

#app .tms-cart-coupon-row button:disabled {
    opacity: .5;
}

#app .tms-cart-checkout,
#app .tms-checkout .tms-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 16px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
    transition: transform .2s;
}

#app .tms-cart-checkout:hover,
#app .tms-checkout .tms-pay-btn:hover {
    transform: translateY(-2px);
}

#app .tms-checkout .tms-pay-btn:disabled {
    opacity: .55;
    transform: none;
}

#app .tms-checkout .tms-pay-btn.hidden {
    display: none;
}

#app .tms-cart-ticks {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

#app .tms-cart-ticks li {
    padding: 4px 0;
    color: var(--tms-ink-soft);
    font-size: 13px;
    font-weight: 600;
}

#app .tms-cart-ticks i {
    width: 18px;
    margin-right: 6px;
    color: var(--tms-gold-deep);
}

@media (max-width: 991.98px) {
    #app .tms-cart-grid,
    #app .tms-checkout {
        grid-template-columns: minmax(0, 1fr);
    }

    #app .tms-cart-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    #app .tms-cart-head h1 {
        font-size: 26px;
    }

    #app .tms-cart-item {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 40px 12px 12px;
    }

    #app .tms-cart-price {
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }

    #app .tms-cart-title {
        font-size: 15px;
    }
}

/* Header: a member's initial when there is no profile picture (top_nav/user_menu.blade.php). */
#app .tms-initial {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(243, 210, 126, .35);
}

/* Checkout steps and order lines (cart/payment.blade.php). */
#app .tms-checkout-card {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid #EEEBE6;
    border-radius: 20px;
    background: #fff;
}

#app .tms-checkout-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--tms-ink);
    font-size: 18px;
    font-weight: 800;
}

#app .tms-checkout-card h2 small {
    color: #8A8690;
    font-size: 13px;
    font-weight: 600;
}

#app .tms-checkout-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 13px;
    font-weight: 900;
}

#app .tms-checkout-hint {
    margin: 0 0 10px;
    color: #8A8690;
    font-size: 13px;
}

#app .tms-checkout-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px dashed #D6CDBC;
    border-radius: 12px;
    background: #FBF8F3;
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#app .tms-checkout-add:hover {
    border-color: var(--tms-gold);
}

#app .tms-checkout .stripe-form .checkout-radio {
    padding: 0 !important;
}

#app .tms-checkout-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #EEE6D8;
}

#app .tms-checkout-line img {
    width: 72px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
}

#app .tms-checkout-line > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#app .tms-checkout-line strong {
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

#app .tms-checkout-line .tms-cart-label {
    font-size: 10px;
}

#app .tms-checkout-line .tms-cart-plan {
    font-size: 12px;
}

#app .tms-checkout-line-price {
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
}

#app .tms-checkout .no-address-div:not([hidden]) {
    display: block;
}

@media (max-width: 575.98px) {
    #app .tms-checkout-card,
    #app .tms-cart-summary {
        padding: 16px;
    }
}

/* Header cart: the count sits on the icon's corner (includes/shopping-cart-dropdwon.blade.php). */
#app #navbarShopingCart {
    position: relative;
}

#app #navbarShopingCart svg {
    margin-right: 0 !important;
}

#app #navbarShopingCart #cartCount.badge {
    position: absolute;
    top: -2px;
    right: -4px;
    /* A circle for one digit, a pill for 10+. */
    min-width: 20px;
    width: auto;
    height: 20px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--tms-gold);
    color: var(--tms-ink);
    font-size: 10px !important;
    font-weight: 900;
    line-height: 1;
    box-sizing: border-box;
}

/* Plan picker popup (pages/includes/priceDialog.blade.php). */
.tms-plan-modal .modal-dialog {
    max-width: 460px;
}

.tms-plan-modal .modal-content {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(20, 18, 23, .35);
}

.tms-plan-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #F3EFE8;
    color: #6E6A74;
    cursor: pointer;
}

.tms-plan-close:hover {
    background: var(--tms-ink);
    color: #fff;
}

.tms-plan-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-right: 36px;
}

.tms-plan-head img {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    object-fit: cover;
}

.tms-plan-kicker {
    display: block;
    color: var(--tms-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tms-plan-title {
    margin: 2px 0 0;
    color: var(--tms-ink);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
}

.tms-plan-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tms-plan-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 2px solid #EEEBE6;
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.tms-plan-option:hover {
    border-color: var(--tms-gold-light);
}

.tms-plan-option.is-active {
    border-color: var(--tms-gold);
    background: #FFF9EC;
}

.tms-plan-option input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--tms-gold-deep);
}

.tms-plan-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tms-plan-text strong {
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.tms-plan-text small {
    color: #8A8690;
    font-size: 12px;
    font-weight: 600;
}

.tms-plan-members {
    height: 36px;
    margin-top: 6px;
    border-radius: 10px;
    font-size: 13px;
}

.tms-plan-price {
    color: var(--tms-ink);
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.tms-plan-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink) !important;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
    transition: transform .2s;
}

.tms-plan-buy:hover {
    transform: translateY(-2px);
}

.tms-plan-note {
    margin: 10px 0 0;
    color: #8A8690;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.tms-plan-note i {
    color: var(--tms-gold-deep);
}

@media (max-width: 575.98px) {
    .tms-plan-modal .modal-dialog {
        margin: 12px;
    }

    .tms-plan-modal .modal-content {
        padding: 18px;
    }

    .tms-plan-head img {
        width: 76px;
    }
}

/* "Added to your cart" card (cart.min.js showAddedToCart). */
.tms-added {
    position: fixed;
    top: 92px;
    right: 20px;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
    background: var(--tms-ink);
    color: #fff;
    box-shadow: 0 20px 50px rgba(20, 18, 23, .35);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s, transform .25s;
}

.tms-added.is-in {
    opacity: 1;
    transform: none;
}

.tms-added-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
}

.tms-added-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tms-added-text strong {
    font-size: 14px;
    font-weight: 800;
}

.tms-added-text small {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.tms-added-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--tms-gold);
    color: var(--tms-ink) !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
}

.tms-added-close {
    flex-shrink: 0;
    padding: 4px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .tms-added {
        top: auto;
        right: 16px;
        bottom: 16px;
        transform: translateY(12px);
    }
}

/* Login, sign-up, forgot and reset password (auth/*.blade.php, auth/includes/auth_side.blade.php). */
#app .tms-auth {
    padding-top: 40px;
    padding-bottom: 64px;
}

#app .tms-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto;
}

#app .tms-auth-side {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: 28px;
    background: var(--tms-ink);
}

#app .tms-auth-side-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

#app .tms-auth-side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 23, 0) 35%, rgba(20, 18, 23, .92) 100%);
}

#app .tms-auth-side-text {
    position: absolute;
    right: 32px;
    bottom: 30px;
    left: 32px;
    z-index: 1;
    color: #fff;
}

#app .tms-auth-side-text h2 {
    margin: 6px 0 14px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

#app .tms-auth-side-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#app .tms-auth-side-text li {
    padding: 3px 0;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 600;
}

#app .tms-auth-side-text li i {
    width: 20px;
    color: var(--tms-gold-light);
}

#app .tms-auth-kicker {
    display: block;
    color: var(--tms-gold-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#app .tms-auth-side .tms-auth-kicker {
    color: var(--tms-gold-light);
}

#app .tms-auth-card {
    align-self: center;
    padding: 40px;
    border: 1px solid #EEEBE6;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(20, 18, 23, .06);
}

#app .tms-auth-card h1 {
    margin: 6px 0 6px;
    color: var(--tms-ink);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-auth-sub {
    margin: 0 0 26px;
    color: #8A8690;
    font-size: 15px;
}

#app .tms-auth-card .input-label {
    margin-bottom: 6px;
    color: var(--tms-ink-soft);
    font-size: 13px;
    font-weight: 700;
}

#app .tms-auth-card .form-group {
    margin-bottom: 18px;
}

#app .tms-auth-card .form-control {
    height: 50px;
    padding: 0 16px;
    border: 1px solid #E7E3DD;
    border-radius: 14px;
    background: #FBF8F3;
    color: var(--tms-ink);
    font-size: 15px !important;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#app .tms-auth-card .form-control:focus {
    border-color: var(--tms-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 144, 46, .15);
}

#app .tms-auth-card .input-group .form-control {
    border-right: 0;
    border-radius: 14px 0 0 14px;
}

#app .tms-auth-card .field-append-button {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #E7E3DD;
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: #FBF8F3;
    color: #8A8690;
}

#app .tms-auth-card .field-append-button svg {
    width: 18px;
    height: 18px;
}

#app .tms-auth-card .input-group:focus-within .field-append-button {
    border-color: var(--tms-gold);
    background: #fff;
}

#app .tms-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

#app .tms-auth-label-row a {
    color: var(--tms-gold-deep);
    font-size: 13px;
    font-weight: 700;
}

#app .tms-auth-card .custom-control-label {
    color: var(--tms-ink-soft);
}

#app .tms-auth-card .text-danger:not(:empty) {
    margin-top: 6px;
    font-size: 13px;
}

#app .tms-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 22px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(201, 144, 46, .32);
    transition: transform .2s;
}

#app .tms-auth-btn:hover {
    transform: translateY(-2px);
}

#app .tms-auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: #8A8690;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

#app .tms-auth-or::before,
#app .tms-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #EEEBE6;
}

#app .tms-auth-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    margin-bottom: 10px;
    border: 1px solid #E7E3DD;
    border-radius: 14px;
    color: var(--tms-ink);
    font-weight: 700;
}

#app .tms-auth-social img {
    width: 20px;
}

#app .tms-auth-switch {
    margin: 24px 0 0;
    color: #8A8690;
    font-size: 14px;
    text-align: center;
}

#app .tms-auth-switch a {
    color: var(--tms-ink);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--tms-gold);
    text-underline-offset: 3px;
}

#app .tms-auth-fine {
    margin: 16px 0 0;
    color: #A9A4AE;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 991.98px) {
    #app .tms-auth-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
    }

    #app .tms-auth-side {
        min-height: 220px;
    }

    #app .tms-auth-side-text ul {
        display: none;
    }

    #app .tms-auth-side-text h2 {
        margin-bottom: 0;
        font-size: 24px;
    }
}

@media (max-width: 575.98px) {
    #app .tms-auth {
        padding-top: 20px;
    }

    #app .tms-auth-side {
        min-height: 170px;
        border-radius: 22px;
    }

    #app .tms-auth-side-text {
        right: 20px;
        bottom: 18px;
        left: 20px;
    }

    #app .tms-auth-side-text h2 {
        font-size: 21px;
    }

    #app .tms-auth-card {
        padding: 26px 20px;
        border-radius: 22px;
    }

    #app .tms-auth-card h1 {
        font-size: 26px;
    }
}

@media (max-width: 991.98px) {
    #app .tms-auth-side-bg {
        object-position: center 42%;
    }
}

/* Customer account (panel/layouts/panel_layout.blade.php, panel/includes/member_nav, panel/dashboard/member). */
#app.tms-member {
    min-height: 100vh;
    background: #FBF8F3;
}

#app .tms-member-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 64px;
}

#app .tms-member-main.panel-content {
    width: auto;
    padding: 0;
}

#app .tms-member-nav {
    position: sticky;
    top: 100px;
    padding: 18px 14px;
    border: 1px solid #EEEBE6;
    border-radius: 22px;
    background: #fff;
}

#app .tms-member-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 6px 14px;
    border-bottom: 1px solid #F1ECE3;
}

#app .tms-member-me .tms-initial {
    width: 42px;
    height: 42px;
}

#app .tms-member-me-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#app .tms-member-me-text strong {
    overflow: hidden;
    color: var(--tms-ink);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app .tms-member-me-text small {
    overflow: hidden;
    color: #8A8690;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app .tms-member-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#app .tms-member-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--tms-ink-soft);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

#app .tms-member-nav a i {
    width: 18px;
    color: #A9A4AE;
    text-align: center;
}

#app .tms-member-nav a:hover {
    background: #FBF8F3;
    color: var(--tms-ink);
}

#app .tms-member-nav a.is-active {
    background: var(--tms-ink);
    color: #fff;
}

#app .tms-member-nav a.is-active i {
    color: var(--tms-gold-light);
}

#app .tms-member-count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tms-gold);
    color: var(--tms-ink);
    font-size: 11px;
}

#app .tms-member-logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #F1ECE3;
}

#app .tms-member-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #FFF3D6;
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 600;
}

#app .tms-member-note i {
    color: var(--tms-gold-deep);
}

#app .tms-member-note a {
    margin-left: auto;
    color: var(--tms-ink);
    font-weight: 800;
    text-decoration: underline;
}

#app .tms-member-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

#app .tms-member-head h1 {
    margin: 0;
    color: var(--tms-ink);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-member-head p {
    margin: 4px 0 0;
    color: #8A8690;
    font-size: 15px;
}

#app .tms-member-browse {
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--tms-gold);
    text-underline-offset: 4px;
}

#app .tms-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

#app .tms-member-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #EEEBE6;
    border-radius: 20px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

#app .tms-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(20, 18, 23, .08);
}

#app .tms-member-thumb {
    position: relative;
    display: block;
}

#app .tms-member-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#app .tms-member-card.is-over .tms-member-thumb img {
    filter: grayscale(.7);
    opacity: .7;
}

#app .tms-member-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(20, 18, 23, .7);
    color: var(--tms-gold-light);
    transform: translate(-50%, -50%);
    transition: transform .2s, background-color .2s;
}

#app .tms-member-card:hover .tms-member-play {
    background: var(--tms-gold);
    color: var(--tms-ink);
    transform: translate(-50%, -50%) scale(1.08);
}

#app .tms-member-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tms-gold-light);
    color: var(--tms-ink);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app .tms-member-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
}

#app .tms-member-label {
    color: var(--tms-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-member-title {
    color: var(--tms-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

#app .tms-member-status {
    margin-bottom: 12px;
    color: #8A8690;
    font-size: 13px;
    font-weight: 600;
}

#app .tms-member-card.is-over .tms-member-status {
    color: #C04848;
}

#app .tms-member-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin-top: auto;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink) !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
}

#app .tms-member-btn.is-light {
    background: #F3EFE8;
}

#app .tms-member-empty {
    padding: 56px 24px;
    border: 1px dashed #DDD5C6;
    border-radius: 24px;
    background: #fff;
    text-align: center;
}

#app .tms-member-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #FFF3D6;
    color: var(--tms-gold-deep);
    font-size: 24px;
}

#app .tms-member-empty h2 {
    margin: 0 0 6px;
    color: var(--tms-ink);
    font-size: 22px;
    font-weight: 900;
}

#app .tms-member-empty p {
    max-width: 380px;
    margin: 0 auto 20px;
    color: #8A8690;
}

@media (max-width: 991.98px) {
    #app .tms-member-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 16px;
    }

    /* Phones and tablets: the menu becomes one scrollable row of pills. */
    #app .tms-member-nav {
        position: static;
        margin: 0 -15px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    #app .tms-member-me {
        display: none;
    }

    #app .tms-member-nav ul {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 15px 4px;
        scrollbar-width: none;
    }

    #app .tms-member-nav ul::-webkit-scrollbar {
        display: none;
    }

    #app .tms-member-nav a {
        padding: 9px 14px;
        border: 1px solid #EEEBE6;
        border-radius: 999px;
        background: #fff;
        white-space: nowrap;
    }

    #app .tms-member-logout {
        margin: 0;
        padding: 0;
        border: 0;
    }

    #app .tms-member-head h1 {
        font-size: 28px;
    }
}

/* Account settings (panel/setting/account.blade.php). */
#app .tms-member-note.is-ok {
    background: #E6F6EC;
}

#app .tms-member-note.is-ok i {
    color: #2E9E5B;
}

#app .tms-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 20px;
}

#app .tms-settings-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #EEEBE6;
    border-radius: 20px;
    background: #fff;
}

#app .tms-settings-card h2 {
    margin: 0 0 18px;
    color: var(--tms-ink);
    font-size: 18px;
    font-weight: 900;
}

#app .tms-settings-card .input-label {
    margin-bottom: 6px;
    color: var(--tms-ink-soft);
    font-size: 13px;
    font-weight: 700;
}

#app .tms-settings-card .input-label span {
    color: #A9A4AE;
    font-weight: 600;
}

#app .tms-settings-card .form-control {
    height: 48px;
    padding: 0 14px;
    border: 1px solid #E7E3DD;
    border-radius: 12px;
    background: #FBF8F3;
    color: var(--tms-ink);
    font-size: 15px;
    box-shadow: none;
}

#app .tms-settings-card .form-control:focus {
    border-color: var(--tms-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 144, 46, .15);
}

#app .tms-settings-card .form-control[readonly] {
    color: #8A8690;
    cursor: default;
}

#app .tms-settings-hint {
    display: block;
    margin-top: 6px;
    color: #8A8690;
    font-size: 12px;
}

#app .tms-settings-hint a,
#app .tms-settings-foot a {
    color: var(--tms-gold-deep);
    font-weight: 700;
}

#app .tms-settings-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 20px;
    cursor: pointer;
}

#app .tms-settings-switch input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--tms-gold-deep);
}

#app .tms-settings-switch span {
    display: flex;
    flex-direction: column;
}

#app .tms-settings-switch strong {
    color: var(--tms-ink);
    font-size: 14px;
}

#app .tms-settings-switch small {
    color: #8A8690;
    font-size: 12px;
}

#app .tms-settings-card .tms-member-btn {
    align-self: flex-start;
    margin-top: 4px;
    border: 0;
    cursor: pointer;
}

#app .tms-settings-foot {
    margin: 24px 0 0;
    color: #8A8690;
    font-size: 13px;
}

/* Header for guests: a single Log in pill (includes/top_nav/user_menu.blade.php). */
#app .tms-login-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--tms-ink);
    border-radius: 999px;
    color: var(--tms-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

#app .tms-login-pill:hover {
    background: var(--tms-ink);
    color: #fff;
}

/* media.css hides .user-auth-btns on small screens; the Log in pill is the only way in, so keep it. */
@media (max-width: 991.98px) {
    #app .user-auth-btns {
        display: flex !important;
    }

    #app .tms-login-pill {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Contact page (pages/contact.blade.php). Form fields and button reuse the .tms-auth-* look. */
#app .tms-contact {
    padding-top: 40px;
    padding-bottom: 64px;
}

#app .tms-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

#app .tms-contact-side {
    position: relative;
    overflow: hidden;
    padding: 36px 32px;
    border-radius: 28px;
    background: var(--tms-ink);
    color: rgba(255, 255, 255, .8);
}

#app .tms-contact-side::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 144, 46, .45), transparent 70%);
}

#app .tms-contact-side .tms-auth-kicker {
    color: var(--tms-gold-light);
}

#app .tms-contact-side h1 {
    position: relative;
    margin: 8px 0 12px;
    color: #fff;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

#app .tms-contact-side p {
    position: relative;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
}

#app .tms-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: var(--tms-gold-light) !important;
    font-weight: 700;
    word-break: break-all;
}

#app .tms-contact-quick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

#app .tms-contact-quick > span {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-contact-quick a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

#app .tms-contact-quick a i:first-child {
    width: 18px;
    color: var(--tms-gold-light);
}

#app .tms-contact-quick a i:last-child {
    margin-left: auto;
    color: rgba(255, 255, 255, .35);
    font-size: 12px;
    transition: transform .2s, color .2s;
}

#app .tms-contact-quick a:hover i:last-child {
    color: var(--tms-gold-light);
    transform: translateX(3px);
}

#app .tms-contact-card {
    padding: 32px;
    border: 1px solid #EEEBE6;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(20, 18, 23, .06);
}

#app .tms-contact-card h2 {
    margin: 0 0 20px;
    color: var(--tms-ink);
    font-size: 22px;
    font-weight: 900;
}

#app .tms-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

#app .tms-contact-card .form-group {
    margin-bottom: 16px;
}

#app .tms-contact-card .input-label {
    margin-bottom: 6px;
    color: var(--tms-ink-soft);
    font-size: 13px;
    font-weight: 700;
}

#app .tms-contact-card .input-label span {
    color: #A9A4AE;
    font-weight: 600;
}

#app .tms-contact-card .form-control {
    height: 50px;
    padding: 0 16px;
    border: 1px solid #E7E3DD;
    border-radius: 14px;
    background: #FBF8F3;
    color: var(--tms-ink);
    font-size: 15px;
    box-shadow: none;
}

#app .tms-contact-card textarea.form-control {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
}

#app .tms-contact-card .form-control:focus {
    border-color: var(--tms-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 144, 46, .15);
}

#app .tms-contact-card .tms-auth-btn {
    margin-top: 8px;
}

#app .tms-contact-sent {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 16px;
    background: #E6F6EC;
}

#app .tms-contact-sent > span {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2E9E5B;
    color: #fff;
}

#app .tms-contact-sent strong {
    color: var(--tms-ink);
}

#app .tms-contact-sent p {
    margin: 2px 0 0;
    color: var(--tms-ink-soft);
    font-size: 14px;
}

@media (max-width: 991.98px) {
    #app .tms-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }

    /* Form first on phones; quick answers below it. */
    #app .tms-contact-card {
        order: -1;
    }

    #app .tms-contact-side h1 {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    #app .tms-contact {
        padding-top: 20px;
    }

    #app .tms-contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #app .tms-contact-card,
    #app .tms-contact-side {
        padding: 24px 20px;
        border-radius: 22px;
    }
}

/* FAQ page (pages/faq_page.blade.php). The accordion itself is the homepage FAQ's (.tms-faq-item). */
#app .tms-faqpage-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 40px;
    background: var(--tms-ink);
    text-align: center;
}

#app .tms-faqpage-hero::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 520px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 144, 46, .35), transparent 70%);
    transform: translateX(-50%);
}

#app .tms-faqpage-hero .container {
    position: relative;
}

#app .tms-faqpage-hero .tms-auth-kicker {
    color: var(--tms-gold-light);
}

#app .tms-faqpage-hero h1 {
    margin: 8px 0 22px;
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -.02em;
}

#app .tms-faqpage-search {
    position: relative;
    display: block;
    max-width: 560px;
    margin: 0 auto 22px;
}

#app .tms-faqpage-search i {
    position: absolute;
    top: 50%;
    left: 20px;
    color: #8A8690;
    transform: translateY(-50%);
}

#app .tms-faqpage-search input {
    width: 100%;
    height: 56px;
    padding: 0 20px 0 50px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--tms-ink);
    font-size: 15px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    outline: none;
}

#app .tms-faqpage-search input:focus {
    box-shadow: 0 0 0 4px rgba(243, 210, 126, .5), 0 16px 40px rgba(0, 0, 0, .3);
}

#app .tms-faqpage-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#app .tms-faqpage-pills a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .15s, border-color .15s;
}

#app .tms-faqpage-pills a:hover {
    border-color: var(--tms-gold);
    background: rgba(201, 144, 46, .15);
}

#app .tms-faqpage-pills span {
    color: var(--tms-gold-light);
    font-size: 12px;
}

#app .tms-faqpage {
    max-width: 820px;
    padding-top: 40px;
    padding-bottom: 64px;
}

#app .tms-faqpage-group {
    margin-bottom: 32px;
    scroll-margin-top: 100px;
}

#app .tms-faqpage-group h2 {
    margin: 0 0 14px;
    color: var(--tms-ink);
    font-size: 22px;
    font-weight: 900;
}

#app .tms-faqpage-group[hidden],
#app .tms-faqpage .tms-faq-item[hidden] {
    display: none;
}

#app .tms-faqpage-none {
    padding: 28px;
    border: 1px dashed #DDD5C6;
    border-radius: 18px;
    color: #8A8690;
    text-align: center;
}

@media (max-width: 575.98px) {
    #app .tms-faqpage-hero {
        padding: 36px 0 28px;
    }

    #app .tms-faqpage-hero h1 {
        font-size: 30px;
    }

    #app .tms-faqpage-search input {
        height: 50px;
        font-size: 14px;
    }
}

/* Info pages from the admin, e.g. terms (pages/other_pages.blade.php). */
#app .tms-doc-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 40px;
    background: var(--tms-ink);
}

#app .tms-doc-hero::before {
    content: "";
    position: absolute;
    top: -120px;
    right: 8%;
    width: 380px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 144, 46, .35), transparent 70%);
}

#app .tms-doc-hero .container {
    position: relative;
}

#app .tms-doc-hero .tms-auth-kicker {
    color: var(--tms-gold-light);
}

#app .tms-doc-hero h1 {
    max-width: 760px;
    margin: 8px 0 0;
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

#app .tms-doc {
    max-width: 820px;
    padding-top: 40px;
    padding-bottom: 72px;
}

#app .tms-doc.has-toc {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    max-width: 1100px;
}

#app .tms-doc-toc {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    border: 1px solid #EEEBE6;
    border-radius: 18px;
    background: #FBF8F3;
}

#app .tms-doc-toc > span {
    margin-bottom: 8px;
    color: #8A8690;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-doc-toc a {
    display: flex;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--tms-ink-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

#app .tms-doc-toc a b {
    color: var(--tms-gold-deep);
}

#app .tms-doc-toc a:hover {
    background: #fff;
    color: var(--tms-ink);
}

#app .tms-doc-body {
    color: var(--tms-ink-soft);
    font-size: 16px;
    line-height: 1.75;
}

#app .tms-doc-body p {
    margin: 0 0 14px;
}

#app .tms-doc-body strong {
    color: var(--tms-ink);
}

#app .tms-doc-body h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 36px 0 14px;
    padding-top: 22px;
    border-top: 1px solid #EEEBE6;
    color: var(--tms-ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    scroll-margin-top: 100px;
}

#app .tms-doc-body h2:first-child {
    margin-top: 0;
}

#app .tms-doc-body h2 span {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tms-ink);
    color: var(--tms-gold-light);
    font-size: 14px;
}

#app .tms-doc-body a {
    color: var(--tms-gold-deep);
    font-weight: 700;
    text-decoration: underline;
}

#app .tms-doc-help {
    margin-top: 32px !important;
    padding: 16px 18px;
    border-radius: 14px;
    background: #FBF8F3;
    font-size: 15px;
}

@media (max-width: 991.98px) {
    #app .tms-doc.has-toc {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        max-width: 820px;
    }

    #app .tms-doc-toc {
        position: static;
    }
}

@media (max-width: 575.98px) {
    #app .tms-doc-hero {
        padding: 32px 0 28px;
    }

    #app .tms-doc-hero h1 {
        font-size: 28px;
    }

    #app .tms-doc {
        padding-top: 24px;
    }

    #app .tms-doc-body {
        font-size: 15px;
    }

    #app .tms-doc-body h2 {
        font-size: 19px;
    }
}

/* ---------- Launch banner (pages/includes/launch_banner.blade.php), instead of the hero while on ---------- */

#app .tms-launch {
    position: relative;
    overflow: hidden;
    height: clamp(480px, 66vh, 660px);
    margin: 8px 15px 0;
    border-radius: 28px;
    background: radial-gradient(circle at 80% 30%, #1B2350, #0B1030 60%);
}

#app .tms-launch-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep her head in view; on wide screens the crop takes her feet instead. */
    object-position: 72% top;
    transform-origin: 72% top;
    animation: tmsLaunchZoom 18s ease-out both;
}

#app .tms-launch-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 12, 40, .92) 0%, rgba(8, 12, 40, .7) 34%, rgba(8, 12, 40, 0) 62%);
}

#app .tms-launch-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

#app .tms-launch-copy {
    max-width: 540px;
    padding: 0 12px;
    animation: tmsHeroUp .7s ease-out both;
}

#app .tms-launch-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border: 1px solid rgba(243, 210, 126, .35);
    border-radius: 999px;
    background: rgba(20, 18, 23, .45);
    color: var(--tms-gold-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#app .tms-launch-kicker .tms-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tms-gold);
    animation: tmsHeroPulse 2s infinite;
}

#app .tms-launch h1 {
    margin: 18px 0 0;
    font-size: 64px;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
    /* gold fade on the headline */
    background: linear-gradient(135deg, #fff 30%, var(--tms-gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .tms-launch-text {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 18px;
    line-height: 1.55;
}

#app .tms-countdown {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

#app .tms-countdown div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(243, 210, 126, .28);
    border-radius: 16px;
    background: rgba(20, 18, 23, .5);
    backdrop-filter: blur(6px);
}

#app .tms-countdown b {
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

#app .tms-countdown span {
    color: var(--tms-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#app .tms-launch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

#app .tms-launch-btn,
#app .tms-launch-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s, background .15s;
}

#app .tms-launch-btn {
    border: 0;
    background: linear-gradient(135deg, var(--tms-gold-light), var(--tms-gold));
    color: var(--tms-ink);
    box-shadow: 0 12px 28px rgba(201, 144, 46, .38);
}

#app .tms-launch-ghost {
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
}

#app .tms-launch-btn i,
#app .tms-launch-ghost i {
    font-size: 13px;
}

#app .tms-launch-btn:hover,
#app .tms-launch-ghost:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

#app .tms-launch-btn:hover {
    color: var(--tms-ink);
    box-shadow: 0 16px 34px rgba(201, 144, 46, .48);
}

#app .tms-launch-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

@keyframes tmsLaunchZoom {
    from { transform: scale(1.06); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #app .tms-launch-bg img,
    #app .tms-launch-copy {
        animation: none;
    }
}

@media (max-width: 1199.98px) {
    #app .tms-launch h1 {
        font-size: 52px;
    }
}

/* Tablet and phone: Malkie and the menorah on top, text over a dark fade at the bottom. */
@media (max-width: 991.98px) {
    #app .tms-launch {
        height: 680px;
        margin: 8px 12px 0;
        border-radius: 22px;
    }

    #app .tms-launch-bg img {
        object-position: 76% top;
    }

    #app .tms-launch-shade {
        background: linear-gradient(0deg, rgba(8, 12, 40, .97) 0%, rgba(8, 12, 40, .9) 40%, rgba(8, 12, 40, 0) 66%);
    }

    #app .tms-launch-inner {
        align-items: flex-end;
        padding-bottom: 28px;
    }

    #app .tms-launch h1 {
        font-size: 44px;
    }

    #app .tms-launch-text {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    #app .tms-launch {
        height: 700px;
    }

    #app .tms-launch-bg img {
        /* Phones show a narrow slice: keep Malkie and the menorah in it. */
        object-position: 85% top;
    }

    #app .tms-launch-copy {
        padding: 0 4px;
    }

    #app .tms-launch-kicker {
        font-size: 11px;
    }

    #app .tms-launch h1 {
        margin-top: 14px;
        font-size: 40px;
    }

    #app .tms-countdown {
        gap: 8px;
        margin-top: 18px;
    }

    #app .tms-countdown div {
        flex: 1;
        min-width: 0;
    }

    #app .tms-countdown b {
        font-size: 24px;
    }

    #app .tms-launch-actions {
        margin-top: 20px;
    }

    #app .tms-launch-btn,
    #app .tms-launch-ghost {
        justify-content: center;
        width: 100%;
    }
}