/* ==========================================================================
   THEME — 04 shell
   --------------------------------------------------------------------------
   Site header with the reference's utility strip, sticky nav with dropdowns,
   the mobile drawer, the theme toggle and the four-column footer.
   ========================================================================== */

/* ------------------------------------------------------------------ Header */
.t-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--bg-body) 88%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    transition: box-shadow var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}

.t-header.is-stuck {
    box-shadow: var(--sh-md);
}

.t-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
    transition: min-height var(--dur-base) var(--ease-out);
}

/* Once the page has scrolled the bar tightens up and the utility strip rolls
   away, so the sticky header gives more of the viewport back to the content. */
.t-header.is-stuck .t-header__bar {
    min-height: calc(var(--header-h) - .75rem);
}

/* Logo ------------------------------------------------------------------- */
.t-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    font-size: var(--fs-xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
}

.t-logo:hover { color: var(--text-strong); }

.t-logo img {
    height: 2.25rem;
    width: auto;
    /* An operator-uploaded logo can be any aspect ratio; cap the width so it
       can never squeeze the navigation off the bar. */
    max-width: 9rem;
    object-fit: contain;
    object-position: left center;
}

.t-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-sm);
    background: var(--grad-brand);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--sh-brand);
}

/* Desktop navigation ------------------------------------------------------ */
.t-nav {
    display: none;
    align-items: center;
    gap: var(--sp-1);
}

@media (min-width: 992px) {
    .t-nav { display: flex; }
}

.t-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

/* Active-page indicator (plan §8). The bar scales out from the left rather than
   growing, which keeps it on the compositor: no width, no layout. */
.t-nav__link::after {
    content: '';
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: .3rem;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.t-nav__link:hover::after,
.t-nav__link:focus-visible::after,
.t-nav__link.is-active::after,
.t-nav__link[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

.t-nav__link:hover,
.t-nav__link:focus-visible {
    background: var(--bg-surface-2);
    color: var(--text-strong);
}

.t-nav__link.is-active {
    color: var(--brand);
}

/* A dropdown that is open reads as current even before you pick from it. */
.t-nav__link[aria-expanded="true"]::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Dropdown ---------------------------------------------------------------- */
.t-nav__item { position: relative; }

.t-nav__link[aria-expanded="true"] {
    color: var(--brand);
    background: var(--bg-surface-2);
}

.t-nav__caret {
    font-size: .6rem;
    transition: transform var(--dur-base) var(--ease-out);
}

.t-nav__link[aria-expanded="true"] .t-nav__caret {
    transform: rotate(180deg);
}

.t-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: var(--z-drawer);
    min-width: 16rem;
    padding: var(--sp-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
}

.t-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.t-dropdown__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.t-dropdown__link i {
    flex: none;
    width: 1.1rem;
    text-align: center;
    color: var(--text-muted);
    transition: color var(--dur-fast);
}

/* Label over description. The description is a plain text node wrapped in a
   block so the two stay stacked whether or not one of them is present. */
.t-dropdown__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.t-dropdown__desc {
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
}

.t-dropdown__link:hover,
.t-dropdown__link:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}

.t-dropdown__link:hover i { color: var(--brand); }
.t-dropdown__link:hover .t-dropdown__desc,
.t-dropdown__link:focus-visible .t-dropdown__desc { color: var(--brand); }

/* An entry with no description still lines up with its neighbours, because the
   icon sits on a fixed column rather than on the first line of text. */
.t-dropdown__link.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.t-dropdown__sep {
    height: 1px;
    margin: var(--sp-2) 0;
    background: var(--border-subtle);
}

/* Header actions ---------------------------------------------------------- */
.t-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* On narrow screens the header keeps only the essentials — theme toggle,
   primary CTA and the menu button. "Sign in" lives in the drawer there, so
   nothing is lost, and the action row cannot push the bar wider than the
   viewport. */
.t-header__link-secondary {
    display: none;
}

@media (min-width: 992px) {
    .t-header__link-secondary {
        display: inline-flex;
    }
}

@media (max-width: 359.98px) {
    .t-header__actions .t-btn {
        display: none;
    }
}

.t-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-body);
    transition: background-color var(--dur-fast), color var(--dur-fast),
                border-color var(--dur-fast);
}

.t-theme-toggle:hover {
    background: var(--bg-surface-2);
    color: var(--text-strong);
    border-color: var(--border-default);
}

.t-theme-toggle .t-icon-sun { display: none; }
[data-theme="dark"] .t-theme-toggle .t-icon-sun { display: inline-block; }
[data-theme="dark"] .t-theme-toggle .t-icon-moon { display: none; }

.t-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-strong);
    font-size: 1.1rem;
}

@media (min-width: 992px) {
    .t-burger { display: none; }
}

/* Notifications ---------------------------------------------------------- */
.t-bell { position: relative; }

.t-bell__count {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--danger);
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    line-height: 1;
}

/* ------------------------------------------------------------ Mobile drawer */
.t-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-drawer);
    width: min(88vw, 22rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--sh-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out),
                visibility var(--dur-slow);
}

.t-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.t-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}

/* The drawer is the whole navigation on a phone, so its controls are sized to
   the 44px touch target the plan asks for rather than the 38px header size. */
.t-drawer__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.t-drawer__tools .t-theme-toggle {
    width: 2.75rem;
    height: 2.75rem;
}

.t-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5) var(--sp-8);
}

.t-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 2.75rem;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}

.t-drawer__link i {
    width: 1.25rem;
    text-align: center;
    color: var(--text-muted);
}

.t-drawer__link:hover,
.t-drawer__link.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.t-drawer__link:hover i,
.t-drawer__link.is-active i { color: var(--brand); }

.t-drawer__group {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

.t-drawer__heading {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.t-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.t-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------- Footer */
.t-footer {
    margin-top: var(--sp-16);
    padding-top: var(--sp-16);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.t-footer__grid {
    display: grid;
    gap: var(--sp-10);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.t-footer__brand { grid-column: span 2; }
@media (max-width: 991.98px) {
    .t-footer__brand { grid-column: span 1; }
}

.t-footer__about {
    margin-top: var(--sp-4);
    max-width: 26rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.t-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.t-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-body);
    transition: background-color var(--dur-fast), color var(--dur-fast),
                border-color var(--dur-fast), transform var(--dur-fast);
}

.t-footer__social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

.t-footer__heading {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-strong);
}

.t-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

.t-footer__list a { color: var(--text-muted); }
.t-footer__list a:hover { color: var(--brand); }

.t-footer__note {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.t-footer__bottom {
    margin-top: var(--sp-12);
    padding-block: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ------------------------------------------------------------- Scroll to top */
.t-to-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-toast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--sh-brand);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
}

.t-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.t-to-top:hover {
    background: var(--brand-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------- Page heading */
.t-pagehead {
    padding-block: var(--sp-10) var(--sp-8);
    background: var(--grad-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.t-pagehead__title { margin-bottom: var(--sp-2); }

.t-pagehead__lead {
    max-width: 42rem;
    color: var(--text-body);
    font-size: var(--fs-md);
}

.t-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    padding: 0;
}

.t-breadcrumb li::after {
    content: "/";
    margin-left: var(--sp-2);
    opacity: .5;
}

.t-breadcrumb li:last-child::after { content: none; }
.t-breadcrumb a { color: var(--text-muted); }
.t-breadcrumb a:hover { color: var(--brand); }
.t-breadcrumb [aria-current="page"] { color: var(--text-strong); }

/* --------------------------------------------------------------- Auth pages */
.t-auth {
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--header-h));
    padding-block: var(--sp-10);
    background:
        radial-gradient(900px 500px at 15% -10%, var(--brand-soft), transparent 60%),
        radial-gradient(700px 500px at 85% 110%, var(--accent-soft), transparent 60%),
        var(--bg-body);
}

.t-auth__card {
    width: min(100%, 28rem);
    padding: var(--sp-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.t-auth__head { text-align: center; margin-bottom: var(--sp-6); }

.t-auth__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-3xl);
}

.t-auth__lead { color: var(--text-muted); font-size: var(--fs-sm); }

.t-auth__foot {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.t-auth__foot a { font-weight: 700; }

/* ---- Auth split layout: marketing panel + form (plan §8.8.2) ---- */
.t-auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
    max-width: 72rem;
    margin-inline: auto;
}

.t-auth__grid .t-auth__card { width: 100%; }

.t-auth__aside-inner {
    padding: var(--sp-8);
    border-radius: var(--r-xl);
    color: #fff;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
        var(--grad-brand);
    box-shadow: var(--sh-lg);
}

.t-auth__aside-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.t-auth__aside-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.t-auth__aside-lead {
    margin: 0 0 var(--sp-6);
    color: rgba(255, 255, 255, .85);
    font-size: var(--fs-md);
}

.t-auth__steps {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    display: grid;
    gap: var(--sp-3);
    font-weight: 600;
}

.t-auth__steps li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.t-auth__steps li > span {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.t-auth__earn { margin-bottom: var(--sp-6); }

.t-auth__earn-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.t-auth__earn ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.t-auth__earn li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.t-auth__earn li i {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: var(--fs-2xs);
}

.t-auth__proof {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: 2px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, .4);
    transition: border-color var(--dur-fast), gap var(--dur-fast);
}

.t-auth__proof:hover {
    color: #fff;
    border-bottom-color: #fff;
    gap: var(--sp-3);
}

@media (min-width: 900px) {
    .t-auth__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        gap: var(--sp-10);
    }
}

/* Below the split the form leads and the marketing panel follows it. */
@media (max-width: 899.98px) {
    .t-auth__grid { max-width: 30rem; }
    .t-auth__grid .t-auth__card { order: -1; }
}
/* Premium glass header on scroll */
.t-header.is-stuck {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--sh-xs);
}

.t-header__bar {
    transition: background-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .t-header.is-stuck {
        backdrop-filter: none;
    }
}

/* ==========================================================================
   THEME — shell v2 (utility strip, mega-menu, mega-footer)
   --------------------------------------------------------------------------
   Appended by the premium redesign (plan §8.1). Everything below extends the
   rules above; nothing here is required for the layout to read correctly if it
   is stripped out, so it can be rolled back safely.
   ========================================================================== */

/* ------------------------------------------------------------ Utility strip */
.t-utility {
    /* Hidden until the head script (or app.js) opt in with data-utility="on"
       on <html>. Keeps a dismissed bar from flashing after first paint. */
    display: none;
    overflow: hidden;
    max-height: 3.5rem;
    background: var(--grad-brand);
    color: #fff;
    transition: max-height var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
}

html[data-utility="on"] .t-utility { display: block; }

.t-header.is-collapsed .t-utility {
    max-height: 0;
    opacity: 0;
}

.t-utility__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 2.5rem;
    padding-block: var(--sp-1);
    font-size: var(--fs-xs);
}

.t-utility__lead {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.t-utility__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.t-utility__tag--soft { opacity: .92; }

.t-utility__tag i { font-size: .8em; }

/* The ticker: two identical groups sharing a track, so the -50% keyframe lands
   exactly on the seam. Hidden on phones, where there is no room for it. */
.t-utility__rail {
    display: none;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@media (min-width: 992px) {
    .t-utility__rail { display: block; }
}

.t-utility__track,
.t-utility__rail {
    overflow: hidden;
}

.t-utility__group {
    display: flex;
    gap: var(--sp-5);
    width: max-content;
    animation: t-utility-x var(--marquee-duration, 34s) linear infinite;
}

.t-utility__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
    opacity: .95;
}

.t-utility__item strong { font-weight: 700; }

.t-utility__item span {
    padding-left: var(--sp-2);
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-variant-numeric: tabular-nums;
}

.t-utility__rail:hover .t-utility__group,
.t-utility__rail:focus-within .t-utility__group,
.t-utility__rail.is-paused .t-utility__group {
    animation-play-state: paused;
}

@keyframes t-utility-x {
    to { transform: translateX(-50%); }
}

.t-utility__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: none;
}

.t-utility__link {
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

.t-utility__link:hover { color: #fff; }

.t-utility__link--strong {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.t-utility__link--strong:hover { background: rgba(255, 255, 255, .28); }

.t-utility__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .9);
    transition: background-color var(--dur-fast), color var(--dur-fast);
}

.t-utility__close:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* The sign-in link is the first thing to go when space runs short. */
@media (max-width: 1199.98px) {
    .t-utility__link[href*="login"] { display: none; }
}

/* -------------------------------------------------------- Scroll progress */
.t-scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* ------------------------------------------------------------- Mega-menu */
/* A mega panel drops out of flow to the header itself (the item becomes
   static), so it can span the content width instead of being pinned to a nav
   item that may sit near the right edge and get clipped. */
.t-nav__item--mega { position: static; }

.t-dropdown--mega {
    left: var(--sp-5);
    right: var(--sp-5);
    min-width: 0;
    padding: var(--sp-4);
}

.t-dropdown__grid {
    display: grid;
    gap: var(--sp-1);
    grid-template-columns: 1fr;
}

.t-dropdown--mega .t-dropdown__grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* A hairline of brand colour along the top of an open panel. */
.t-dropdown::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.t-dropdown.is-open::before { opacity: 1; }

.t-dropdown__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.t-dropdown__all:hover { color: var(--brand-hover); }

.t-dropdown__all i {
    font-size: .65rem;
    transition: transform var(--dur-fast) var(--ease-out);
}

.t-dropdown__all:hover i { transform: translateX(3px); }

/* ------------------------------------------------------------ Mega-footer */
/* A live-status pill in the brand column. */
.t-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: 4px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--text-body);
}

.t-status__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
}

/* Payout currencies row. */
.t-footer__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
}

.t-footer__trust-label {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.t-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.t-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
}

.t-footer__bottom-links a { color: var(--text-muted); }
.t-footer__bottom-links a:hover { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    .t-utility__group { animation: none; }
    .t-scroll-progress { transition: none; }
}