/* =====================================================================
   MAIN.CSS -- styles shared by EVERY page on the site.
   ---------------------------------------------------------------------
   Beginner-friendly guide to this file:

   1. SITE-WIDE RESET     -- tiny rules every page needs (box-sizing,
                              smooth scrolling, the default dark
                              background/text color).
   2. PAGE LOADER          -- the full-screen spinner shown while a
                              page is loading (static/js/loader.js
                              controls when it shows/hides).
   3. NAVBAR + FOOTER       -- the top navigation bar and footer that
                              appear on every page (from navbar.html /
                              footer.html).
   4. SMALL SHARED HELPERS -- little fixes used in more than one place
                              (dropdown alignment, flash-message
                              animations, etc).

   Anything that only belongs to ONE page (like the login page's
   card design) lives in "pages.css" instead, not here. That split is
   what lets the browser download this file ONCE and reuse it on every
   page, instead of re-downloading a giant stylesheet every time you
   click a link.
===================================================================== */

/* ---- 1. Site-wide reset -------------------------------------------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: #08090C;
    color: #F5F5F3;
    font-family: 'Manrope', sans-serif;
}
ul {
    list-style: none;
    padding-left: 0;
}

/* ---- 1b. Consistent keyboard-focus visibility ---------------------------
   Previously there was no site-wide focus style, so keyboard/assistive-tech
   users navigating with Tab had no visible indicator on most links, buttons
   and form fields (or fell back to the browser default, which is low-
   contrast on this dark background). :focus-visible only shows the ring
   for keyboard/programmatic focus, not every mouse click, so it doesn't
   change how the site looks for mouse/touch users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--t2c-flame, #FF5A36);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- 2. Page loader spinner ---------------------------------------------- */
#page-loader{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:#08090C;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease,visibility .32s ease}
#page-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
html.t2c-loading,body.t2c-loading{overflow:hidden!important}
.loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.loader-brand{font-family:Anton,sans-serif;font-size:clamp(20px,3vw,28px);letter-spacing:.04em;line-height:1}
.loader-brand span{color:#F5F5F3}.loader-brand strong{color:#FF512F;font-weight:400}
.loader-spinner{width:58px;height:58px;border-radius:50%;border:4px solid rgba(255,255,255,.1);border-top-color:#FF512F;border-right-color:#D7AA48;animation:t2cLoaderSpin .75s linear infinite;box-shadow:0 0 28px rgba(255,81,47,.12)}
.loader-text{color:#8E929D;font-family:Manrope,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@keyframes t2cLoaderSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#page-loader{transition:none}.loader-spinner{animation-duration:1.5s}}

/* =====================================================================
   SHARED FLASH-MESSAGE SYSTEM
   ---------------------------------------------------------------------
   One consistent, compact flash-message design used by every page.
   Markup contract: <div data-flash-message class="alert alert-{{category}}">
   Individual pages may still add a body.page-xyz [data-flash-message]
   override for layout context (e.g. sitting inside a narrow auth card),
   but the look/feel below is the shared baseline so nothing needs to
   reinvent its own flash design.
===================================================================== */
[data-flash-message].alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    max-width:520px;
    margin:0 auto 18px;
    padding:13px 16px;
    border-radius:12px;
    border:1px solid var(--t2c-line);
    background:var(--t2c-surface-2);
    color:var(--t2c-text);
    font-family:'Manrope',sans-serif;
    font-size:13.5px;
    font-weight:600;
    line-height:1.5;
    box-shadow:0 12px 28px rgba(0,0,0,.28);
    animation:t2cFlashIn .3s ease both;
}
[data-flash-message].alert-success{ border-color:rgba(70,214,145,.4); background:rgba(70,214,145,.08); color:#8FE9BC; }
[data-flash-message].alert-danger{ border-color:rgba(255,104,96,.42); background:rgba(255,104,96,.09); color:#FFAFA9; }
[data-flash-message].alert-warning{ border-color:rgba(240,184,75,.4); background:rgba(240,184,75,.09); color:#F5CD82; }
[data-flash-message].alert-info{ border-color:rgba(90,170,255,.4); background:rgba(90,170,255,.09); color:#9CC7FF; }

@keyframes t2cFlashIn{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
}

@media (max-width:600px){
    [data-flash-message].alert{
        max-width:100%;
        font-size:13px;
        padding:12px 14px;
        border-radius:10px;
    }
}

@media (prefers-reduced-motion:reduce){
    [data-flash-message].alert{ animation:none; }
}

/* Global flash-message dismissal */
[data-flash-message]{
    transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease;
}
[data-flash-message].t2c-flash-hide{
    opacity:0 !important;
    transform:translateY(-6px);
    max-height:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    overflow:hidden !important;
}

/* ---- 2b. Delete-account confirmation modal --------------------------------
   Lives in navbar.html (shared on every page) so the modal is unscoped
   to any single page's body class -- it must work everywhere the
   navbar's Delete Account button is rendered. -------------------------- */
.t2c-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
    z-index: 99999;
}

.t2c-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.t2c-confirm-box {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 28px;
    text-align: center;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.25s ease;
}

.t2c-confirm-overlay.active .t2c-confirm-box {
    transform: translateY(0) scale(1);
}

.t2c-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff1f1;
    font-size: 28px;
}

.t2c-confirm-box h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: #1f1f1f;
}

.t2c-confirm-box p {
    margin: 0 auto 8px;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.t2c-confirm-warning {
    font-weight: 600;
    color: #d64545 !important;
}

.t2c-confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.t2c-confirm-actions button {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.t2c-confirm-actions button:hover {
    transform: translateY(-1px);
}

.t2c-confirm-actions button:active {
    transform: translateY(0);
}

.t2c-confirm-cancel {
    background: #f1f1f1;
    color: #333;
}

.t2c-confirm-cancel:hover {
    background: #e7e7e7;
}

.t2c-confirm-delete {
    background: #dc3545;
    color: white;
}

.t2c-confirm-delete:hover {
    background: #c82333;
}

@media (max-width: 480px) {
    .t2c-confirm-box {
        padding: 26px 20px;
        border-radius: 18px;
    }
    .t2c-confirm-box h3 {
        font-size: 20px;
    }
    .t2c-confirm-actions {
        flex-direction: column-reverse;
    }
    .t2c-confirm-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .t2c-confirm-overlay,
    .t2c-confirm-box {
        transition: none;
    }
}

/* ---- 3. Navbar + footer (and other shared components) ------------------- */
/* ===== extracted from navbar.html ===== */

        :root{
            --t2c-ink:        #07080A;
            --t2c-surface:    #101216;
            --t2c-surface-2:  #181B21;
            --t2c-line:       rgba(255,255,255,0.09);
            --t2c-text:       #F7F7F5;
            --t2c-text-dim:   #8B909B;
            --t2c-flame:      #FF5A36;
            --t2c-flame-dim:  rgba(255,75,38,0.14);
            --t2c-gold:       #F0B84B;
            --t2c-danger:     #FF6860;
            --t2c-nav-h:      76px;
        }

        .t2c-nav *{ box-sizing:border-box; }

        .t2c-nav{
            position: sticky;
            top: 0;
            z-index: 1000;
            height: var(--t2c-nav-h);
            display: flex;
            align-items: center;
            background: rgba(11,12,15,0.86);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--t2c-line);
            font-family: 'Manrope', system-ui, sans-serif;
            color: var(--t2c-text);
        }

        .t2c-nav-inner{
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        /* ---------- Brand ---------- */
        .t2c-brand{
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--t2c-text);
            flex-shrink: 0;
        }
        .t2c-brand-mark{
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .t2c-brand-mark svg{ width: 100%; height: 100%; display:block; }
        .t2c-brand-word{
            font-family: 'Anton', sans-serif;
            font-weight: 400;
            font-size: 22px;
            letter-spacing: 0.03em;
            line-height: 1;
            white-space: nowrap;
        }
        .t2c-brand-word span{ color: var(--t2c-flame); }

        /* ---------- Center links ---------- */
        .t2c-links{
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .t2c-links li{ position: relative; }
        .t2c-link-mobile-login{ display: none; }
        .t2c-link{
            display: inline-flex;
            align-items: center;
            height: 40px;
            padding: 0 17px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--t2c-text-dim);
            text-decoration: none;
            border-radius: 10px;
            transition: color .18s ease, background-color .18s ease;
        }
        .t2c-link:hover{
            color: var(--t2c-text);
            background: rgba(255,255,255,0.045);
        }
        /* fill-bar underline — nods to a training progress bar */
        .t2c-link::after{
            content:"";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 4px;
            height: 2px;
            border-radius: 2px;
            background: var(--t2c-flame);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .28s cubic-bezier(.4,0,.2,1);
        }
        .t2c-link:hover::after{ transform: scaleX(1); }
        .t2c-link.active{ color: var(--t2c-text); }
        .t2c-link.active::after{
            transform: scaleX(1);
            background: var(--t2c-gold);
        }

        /* ---------- Right side / auth ---------- */
        .t2c-right{
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .t2c-btn{
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-decoration: none;
            padding: 10px 18px;
            border-radius: 10px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
        }
        .t2c-btn:active{ transform: scale(0.97); }
        .t2c-btn-ghost{
            color: var(--t2c-text);
            border-color: var(--t2c-line);
            background: transparent;
        }
        .t2c-btn-ghost:hover{ border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); }
        .t2c-btn-solid{
            color: #17110C;
            background: var(--t2c-flame);
        }
        .t2c-btn-solid:hover{ background: #ff5f3d; }

        /* ---------- Profile trigger ---------- */
        .t2c-profile{ position: relative; }
        .t2c-profile-trigger{
            display: flex;
            align-items: center;
            gap: 10px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px 10px 6px 6px;
            border-radius: 999px;
            color: var(--t2c-text);
            transition: background-color .15s ease;
        }
        .t2c-profile-trigger:hover{ background: rgba(255,255,255,0.05); }
        .t2c-avatar{
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-family: 'Anton', sans-serif;
            font-size: 14px;
            color: #17110C;
            background: linear-gradient(140deg, var(--t2c-gold), var(--t2c-flame));
            flex-shrink: 0;
        }
        .t2c-profile-name{
            font-size: 13px;
            font-weight: 700;
        }
        .t2c-caret{
            width: 10px; height: 10px;
            color: var(--t2c-text-dim);
            transition: transform .18s ease;
        }
        .t2c-profile-trigger[aria-expanded="true"] .t2c-caret{ transform: rotate(180deg); }

        /* ---------- Dropdown ---------- */
        .t2c-dropdown{
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 250px;
            background: var(--t2c-surface);
            border: 1px solid var(--t2c-line);
            border-radius: 16px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.60);
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity .16s ease, transform .16s ease, visibility .16s;
        }
        .t2c-dropdown.open{
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .t2c-dropdown-header{
            padding: 10px 12px 8px;
            font-size: 12px;
            color: var(--t2c-text-dim);
            word-break: break-all;
        }
        .t2c-dropdown-divider{
            height: 1px;
            background: var(--t2c-line);
            margin: 6px 4px;
            border: none;
        }
        .t2c-dropdown-item{
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            text-align: left;
            padding: 9px 12px;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 600;
            color: var(--t2c-text);
            text-decoration: none;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .t2c-dropdown-item:hover{ background: var(--t2c-surface-2); }
        .t2c-dropdown-item.danger{ color: var(--t2c-danger); }
        .t2c-dropdown-item.danger:hover{ background: rgba(255,98,89,0.1); }
        .t2c-dropdown form{ margin: 0; }

        /* ---------- Mobile toggle ---------- */
        .t2c-toggle{
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            border: 1px solid var(--t2c-line);
            background: transparent;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .t2c-toggle span, .t2c-toggle span::before, .t2c-toggle span::after{
            content:"";
            display: block;
            width: 18px;
            height: 2px;
            background: var(--t2c-text);
            position: relative;
            transition: transform .2s ease, opacity .2s ease;
        }
        .t2c-toggle span::before{ position:absolute; top:-6px; }
        .t2c-toggle span::after{ position:absolute; top:6px; }
        .t2c-toggle.open span{ background: transparent; }
        .t2c-toggle.open span::before{ transform: translateY(6px) rotate(45deg); }
        .t2c-toggle.open span::after{ transform: translateY(-6px) rotate(-45deg); }

        @media (max-width: 900px){
            .t2c-toggle{ display: flex; }
            .t2c-links{
                position: fixed;
                top: var(--t2c-nav-h);
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 2px;
                background: var(--t2c-ink);
                /* Border only shows once the menu is actually open (below) --
                   otherwise, at max-height:0, the border itself still renders
                   as a stray 1px line under the navbar even while "closed". */
                border-bottom: 1px solid transparent;
                padding: 0 16px;
                max-height: 0;
                overflow: hidden;
                transition: max-height .25s ease, padding .25s ease, border-color .25s ease;
            }
            .t2c-links.open{
                max-height: 320px;
                padding: 10px 16px 16px;
                border-bottom-color: var(--t2c-line);
            }
            .t2c-link{ width: 100%; height: 46px; padding: 0 12px; }
            .t2c-link::after{ display: none; }
            .t2c-right .t2c-btn-ghost{ display:none; }
            .t2c-link-mobile-login{
                display: block;
                margin-top: 8px;
                padding-top: 10px;
                border-top: 1px solid var(--t2c-line);
            }
        }

        /* ---------- Premium dark refinements ---------- */
        .t2c-nav-inner{ min-height: var(--t2c-nav-h); }
        .t2c-brand:hover .t2c-brand-mark{ transform: translateY(-1px) scale(1.04); }
        .t2c-brand-mark{ transition: transform .18s ease, filter .18s ease; }
        .t2c-brand:hover .t2c-brand-mark{ filter: drop-shadow(0 0 8px rgba(255,90,54,.28)); }
        .t2c-link.active{ font-weight: 800; }
        .t2c-btn{ box-shadow: 0 6px 18px rgba(0,0,0,.18); }
        .t2c-btn-solid{ box-shadow: 0 8px 22px rgba(255,90,54,.18); }
        .t2c-profile-trigger{ border: 1px solid transparent; }
        .t2c-profile-trigger:hover{ border-color: var(--t2c-line); }
        .t2c-avatar{ box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 6px 18px rgba(255,90,54,.16); }
        .t2c-dropdown::before{
            content:""; position:absolute; top:-6px; right:28px; width:11px; height:11px;
            background:var(--t2c-surface); border-left:1px solid var(--t2c-line); border-top:1px solid var(--t2c-line);
            transform:rotate(45deg);
        }
        .t2c-dropdown-item{ transition: background .15s ease, transform .15s ease; }
        .t2c-dropdown-item:hover{ transform: translateX(2px); }
        @media (max-width: 900px){
            .t2c-nav-inner{ padding: 0 18px; }
            .t2c-brand-word{ font-size: 20px; }
            .t2c-right{ margin-left:auto; }
        }
        @media (max-width: 520px){
            .t2c-nav-inner{ gap: 10px; }
            .t2c-brand-word{ font-size: 18px; }
            .t2c-brand-mark{ width: 32px; height: 32px; }
            .t2c-profile-name, .t2c-profile-trigger .t2c-caret{ display:none; }
            .t2c-profile-trigger{ padding:4px; }
            .t2c-avatar{ width:36px; height:36px; }
            /* Let the brand/right side shrink instead of forcing an overflow
               that pushes "Sign up" off screen on narrow phones. */
            .t2c-brand{ flex-shrink: 1; min-width: 0; }
            .t2c-brand-word{ overflow:hidden; text-overflow:ellipsis; }
            .t2c-right{ flex-shrink: 0; gap: 6px; }
            .t2c-right .t2c-btn{ padding: 8px 12px; font-size: 12px; white-space: nowrap; }
        }

        @media (max-width: 360px){
            .t2c-nav-inner{ padding: 0 12px; gap: 6px; }
            .t2c-brand-word{ font-size: 15px; max-width: 128px; }
        }

        @media (prefers-reduced-motion: reduce){
            .t2c-nav, .t2c-link, .t2c-link::after, .t2c-dropdown, .t2c-toggle span, .t2c-toggle span::before, .t2c-toggle span::after{
                transition: none !important;
            }
        }

/* ===== extracted from footer.html ===== */

        :root{
            --t2c-ink:        #0B0C0F;
            --t2c-line:       rgba(255,255,255,0.09);
            --t2c-text:       #F4F3EF;
            --t2c-text-dim:   #9496A1;
            --t2c-flame:      #FF4B26;
            --t2c-gold:       #D9A83B;
        }

        .t2c-footer *{ box-sizing: border-box; }

        .t2c-footer{
            background: var(--t2c-ink);
            border-top: 1px solid var(--t2c-line);
            font-family: 'Manrope', system-ui, sans-serif;
            color: var(--t2c-text-dim);
            padding: 40px 0 24px;
        }

        .t2c-footer-inner{
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 28px;
        }

        /* ---------- top row: brand + links ---------- */
        .t2c-footer-top{
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 28px;
            padding-bottom: 24px;
        }

        .t2c-footer-brand{
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--t2c-text);
        }
        .t2c-footer-mark{
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .t2c-footer-mark svg{ width: 100%; height: 100%; display: block; }
        .t2c-footer-word{
            font-family: 'Anton', sans-serif;
            font-weight: 400;
            font-size: 17px;
            letter-spacing: 0.03em;
            line-height: 1;
            white-space: nowrap;
        }
        .t2c-footer-word span{ color: var(--t2c-flame); }

        .t2c-footer-tagline{
            font-size: 13px;
            color: var(--t2c-text-dim);
            margin: 8px 0 0;
            max-width: 260px;
            line-height: 1.5;
        }

        .t2c-footer-links{
            display: flex;
            gap: 28px;
            list-style: none;
            margin: 4px 0 0;
            padding: 0;
            flex-wrap: wrap;
        }
        .t2c-footer-link{
            position: relative;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--t2c-text-dim);
            text-decoration: none;
            transition: color .18s ease;
        }
        .t2c-footer-link::after{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            border-radius: 2px;
            background: var(--t2c-flame);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .22s cubic-bezier(.4,0,.2,1);
        }
        .t2c-footer-link:hover{ color: var(--t2c-text); }
        .t2c-footer-link:hover::after{ transform: scaleX(1); }

        /* ---------- bottom row ---------- */
        .t2c-footer-bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            padding-top: 20px;
            border-top: 1px solid var(--t2c-line);
        }
        .t2c-footer-copy{
            font-size: 12px;
            color: var(--t2c-text-dim);
            margin: 0;
        }
        .t2c-footer-signature{
            font-size: 12px;
            color: var(--t2c-text-dim);
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;
        }
        .t2c-footer-signature .dot{
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--t2c-gold);
            display: inline-block;
        }

        @media (max-width: 640px){
            .t2c-footer-top{ flex-direction: column; }
            .t2c-footer-links{ gap: 18px; }
            .t2c-footer-bottom{ flex-direction: column; align-items: flex-start; }
        }

/* ---- 4. Small shared helpers -------------------------------------------- */
nav{
    min-height: 40px;
}
#resend-btn {
    width: fit-content !important;
}