/* ============================================================
   Teachers Box v1 ? Main Stylesheet
   Clean Apple light theme ? Off-white & Charcoal
   ============================================================ */

/* --- CSS Variables --------------------------------------- */
:root {
    /* Backgrounds */
    --bg-base:     #F5F5F7;   /* Apple off-white page background */
    --bg-raised:   #FFFFFF;   /* White surfaces */
    --bg-elevated: #FAFAFA;   /* Slightly lifted surfaces */
    --bg-overlay:  #EBEBED;   /* Hover states */
    --bg-glass:    rgba(245, 245, 247, 0.82); /* Frosted header */

    /* Charcoal text scale */
    --charcoal:        #1D1D1F;   /* Primary ? Apple near-black */
    --charcoal-mid:    #3A3A3C;   /* Body text */
    --charcoal-light:  #6E6E73;   /* Secondary / nav */
    --charcoal-muted:  #98989D;   /* Placeholders, hints */

    /* Borders */
    --border:   rgba(0, 0, 0, 0.09);
    --border-md: rgba(0, 0, 0, 0.14);

    /* Radius */
    --radius:      16px;
    --radius-sm:   10px;
    --radius-pill: 100px;

    /* Apple easing */
    --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --t-fast: 0.18s;
    --t-base: 0.32s;
    --t-slow: 0.55s;

    /* Palette accent colours */
    --c-yellow:  #f9f871;
    --c-orange:  #ffc75f;
    --c-coral:   #ff9671;
    --c-pink:    #ff6f91;
    --c-fuchsia: #d65db1;
    --c-purple:  #845ec2;
    --c-green:   #a8e000;
}

/* --- Reset ----------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background-color: var(--bg-base);
    color: var(--charcoal-mid);
    /* Apple SF Pro system font stack — renders exactly like Apple sites */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: var(--charcoal);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--charcoal-mid); }

img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-glass);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--t-fast) var(--ease);
}

/* Push content below the fixed header */
body {
    padding-top: 90px;
}

/* Mobile subscribe bar — hidden on desktop */
.mobile-subscribe-bar {
    display: none;
}

/* When WordPress admin bar is visible (logged in), shift down */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* -- Logo -- */
.site-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo-img {
    height: 64px;
    width: auto;
    object-fit: contain;
    transition: opacity var(--t-fast) var(--ease);
}

.site-logo-link:hover .site-logo-img { opacity: 0.75; }

/* -- Nav -- */
.site-nav .nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    position: relative;       /* anchor for the drip pill */
}

.site-nav .nav-list a {
    color: var(--charcoal-light);
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    position: relative;
    z-index: 1;               /* stay above the pill */
    transition: color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}

.site-nav .nav-list a:hover {
    color: var(--charcoal);
    background: var(--bg-overlay);
}

.site-nav .nav-list .current-menu-item > a {
    color: var(--charcoal);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1.5px rgba(132, 94, 194, 0.40);
}

/* ── Drip pill (JS-driven, desktop only) ─────────────────── */
.nav-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 34px;
    width: 0;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 1.5px rgba(132, 94, 194, 0.32),
        0 2px 12px rgba(132, 94, 194, 0.12);
    pointer-events: none;
    z-index: 0;
    will-change: left, width;
}

/* When pill is active, let it own the active/hover visuals */
.site-nav.has-pill .nav-list a:hover {
    background: transparent;
}

.site-nav.has-pill .nav-list .current-menu-item > a {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* -- Auth group (top-right) -- */
.header-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-login {
    display: inline-block;
    color: var(--charcoal-light);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-md);
    transition: color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.btn-login:hover {
    color: var(--c-purple);
    border-color: var(--c-purple);
    background: rgba(132, 94, 194, 0.07);
}

.btn-signup {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring);
}

.btn-signup:hover {
    opacity: 0.88;
    color: #fff;
    transform: scale(1.03) translateY(-1px);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.22);
}

/* Profile icon */
.profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-overlay);
    border: 1px solid var(--border-md);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.profile-btn:hover { background: #DCDCE0; }

.profile-icon {
    width: 18px;
    height: 18px;
    color: var(--charcoal-light);
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--charcoal);
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease),
                opacity var(--t-fast) var(--ease);
}

/* ============================================================
   BACKGROUND SHAPES
   ============================================================ */
.bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.bg-shape {
    position: absolute;
    font-size: 3.2rem;
    opacity: 0.13;
    user-select: none;
    line-height: 1;
    filter: saturate(0.9);
}

/* Individual positions & animations ? no two same speed/delay */
.bg-shape.s1  { top: 8%;   left: 4%;   animation: floatA 13s ease-in-out infinite; }
.bg-shape.s2  { top: 15%;  right: 7%;  animation: floatB 17s ease-in-out infinite; animation-delay: -4s; }
.bg-shape.s3  { top: 55%;  left: 2%;   animation: floatC 11s ease-in-out infinite; animation-delay: -2s; }
.bg-shape.s4  { top: 72%;  right: 5%;  animation: floatA 15s ease-in-out infinite; animation-delay: -7s; }
.bg-shape.s5  { top: 35%;  left: 10%;  animation: floatB 19s ease-in-out infinite; animation-delay: -5s; }
.bg-shape.s6  { top: 20%;  left: 42%;  animation: floatC 14s ease-in-out infinite; animation-delay: -9s; }
.bg-shape.s7  { bottom: 8%;  left: 18%;  animation: floatA 16s ease-in-out infinite; animation-delay: -3s; }
.bg-shape.s8  { bottom: 12%; right: 15%; animation: floatB 12s ease-in-out infinite; animation-delay: -6s; }
.bg-shape.s9  { top: 45%;  right: 3%;  animation: floatC 18s ease-in-out infinite; animation-delay: -11s; }
.bg-shape.s10 { bottom: 22%; left: 48%;  animation: floatA 21s ease-in-out infinite; animation-delay: -8s; }

@keyframes floatA {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    33%       { transform: translateY(-16px) rotate(4deg); }
    66%       { transform: translateY(-8px)  rotate(-3deg); }
}
@keyframes floatB {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    40%       { transform: translateY(-20px) rotate(-5deg); }
    70%       { transform: translateY(-6px)  rotate(3deg); }
}
@keyframes floatC {
    0%, 100% { transform: translateY(0)    rotate(0deg) scale(1); }
    50%       { transform: translateY(-14px) rotate(6deg) scale(1.04); }
}

/* ============================================================
   HERO ? Welcome screen
   ============================================================ */
.hero {
    min-height: calc(100vh - 90px);
    background: transparent;
    display: flex;
    align-items: center;
    padding: 24px 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.hero-container {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /* Frosted window panel */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    padding: 36px 44px 32px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 8px 40px rgba(0, 0, 0, 0.08);
}

.hero-title {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.16;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.hero-title-sub {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--charcoal-light);
}

/* Logo under the welcome heading */
.hero-logo {
    margin-top: -8px;
    margin-bottom: 6px;
}

.hero-logo-img {
    height: 72px;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
}

.hero-sub {
    font-size: 0.90rem;
    color: var(--charcoal-light);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.5;
    max-width: 380px;
    margin: 0 auto 18px;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-getstarted {
    margin-top: 12px;
}

/* Hidden on desktop; shown only inside @media (max-width: 680px) */
.mobile-desktop-notice { display: none; }

.btn-getstarted {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--charcoal);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-bottom: 1.5px solid var(--charcoal);
    padding-bottom: 2px;
    transition: gap var(--t-base) var(--ease-spring),
                color var(--t-fast) var(--ease);
}

.btn-getstarted:hover {
    color: var(--charcoal-mid);
    gap: 16px;
}

.btn-arrow {
    font-size: 1.1rem;
    transition: transform var(--t-base) var(--ease-spring);
}

.btn-getstarted:hover .btn-arrow {
    transform: translateX(4px);
}

/* ============================================================
   BUTTONS (page-level)
   ============================================================ */
.btn-primary {
    display: inline-block;
    background: var(--charcoal);
    color: var(--bg-base);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
    padding: 15px 40px;
    min-width: 172px;
    text-align: center;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring);
}

.btn-primary:hover {
    background: var(--charcoal-mid);
    color: var(--bg-base);
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.14),
                0 0 0 3px rgba(132, 94, 194, 0.22);
}

.btn-ghost {
    display: inline-block;
    background: rgba(255, 255, 255, 0.45) padding-box,
                linear-gradient(135deg, var(--c-purple), var(--c-fuchsia), var(--c-pink), var(--c-coral), var(--c-orange), var(--c-yellow)) border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--charcoal);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
    padding: 13.5px 40px;
    min-width: 172px;
    text-align: center;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.68) padding-box,
                linear-gradient(135deg, var(--c-purple), var(--c-fuchsia), var(--c-pink), var(--c-coral), var(--c-orange), var(--c-yellow)) border-box;
    color: var(--charcoal);
    transform: scale(1.02) translateY(-1px);
}

/* ============================================================
   TOOL CARDS
   ============================================================ */
.tool-cards {
    padding: 48px 0 64px;
}

.tool-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 168px;
    height: 168px;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 26px;
    text-decoration: none;
    color: var(--charcoal);
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
    transition: transform var(--t-base) var(--ease-spring),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}

.tool-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.68);
}

.tool-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 17px;
    background: rgba(245, 245, 247, 0.55);
}

.tool-card__icon svg {
    width: 29px;
    height: 29px;
    color: var(--charcoal);
}

/* ============================================================
   CERT CARD ? futuristic 3D pop-out-of-the-box
   ============================================================ */

@keyframes cert-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-7px) rotate(-0.8deg); }
    66%       { transform: translateY(-4px) rotate(0.6deg); }
}

@keyframes cert-icon-spin {
    0%   { transform: scale(1)    rotate(0deg); }
    40%  { transform: scale(1.30) rotate(210deg); }
    70%  { transform: scale(1.24) rotate(345deg); }
    100% { transform: scale(1.22) rotate(360deg); }
}

@keyframes cert-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px  rgba(132,94,194,0.50),
            0 0 18px 2px rgba(132,94,194,0.28),
            0 0 40px 6px rgba(132,94,194,0.12),
            0 24px 48px  rgba(132,94,194,0.30),
            6px 12px 0   rgba(132,94,194,0.20),
            12px 22px 0  rgba(132,94,194,0.08);
    }
    50% {
        box-shadow:
            0 0 0 1px  rgba(214,93,177,0.75),
            0 0 26px 4px rgba(214,93,177,0.42),
            0 0 55px 10px rgba(214,93,177,0.18),
            0 28px 56px  rgba(132,94,194,0.36),
            6px 12px 0   rgba(132,94,194,0.22),
            12px 22px 0  rgba(132,94,194,0.10);
    }
}

.tool-card--cert {
    position: relative;
    overflow: hidden;
    border-color: rgba(132,94,194,0.25);
    box-shadow:
        0 1px 4px  rgba(0,0,0,0.05),
        0 0 0 1px  rgba(132,94,194,0.06),
        4px 6px 0  rgba(132,94,194,0.11),
        7px 11px 0 rgba(132,94,194,0.05);
    transition:
        transform  0.44s cubic-bezier(.34,1.56,.64,1),
        box-shadow 0.38s ease,
        border-color 0.30s ease,
        background   0.30s ease;
}

.tool-card--cert:not(:hover) {
    animation: cert-float 4s ease-in-out infinite;
}

/* Shimmer sweep */
.tool-card--cert::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        106deg,
        transparent 26%,
        rgba(255,255,255,0.08) 38%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.08) 62%,
        transparent 74%
    );
    transform: translateX(-130%);
    transition: transform 0s linear;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
}

.tool-card--cert:hover::after {
    transform: translateX(130%);
    transition: transform 0.62s cubic-bezier(.4,0,.2,1);
}

/* 3D perspective lift + breathing neon glow */
.tool-card--cert:hover {
    transform: perspective(480px) translateY(-20px) rotateX(9deg) scale(1.07);
    border-color: rgba(132,94,194,0.30);
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

/* Press: snap back */
.tool-card--cert:active {
    transform: perspective(480px) translateY(-4px) rotateX(1deg) scale(1.01);
    animation: none;
    box-shadow:
        0 0 0 1px rgba(132,94,194,0.50),
        0 6px 20px rgba(132,94,194,0.28),
        3px 5px 0  rgba(132,94,194,0.15);
    transition-duration: 0.08s;
}

.tool-card--cert .tool-card__icon {
    background: linear-gradient(140deg, #f3eeff 0%, #e8d4ff 100%);
    border: 1px solid rgba(132,94,194,0.18);
    position: relative;
    z-index: 1;
    transition:
        background    0.32s ease,
        border-color  0.32s ease,
        transform     0.44s cubic-bezier(.34,1.56,.64,1);
}

.tool-card--cert:hover .tool-card__icon {
    transform: translateY(-5px) scale(1.08);
}

.tool-card--cert .tool-card__icon svg {
    color: #845ec2;
    position: relative;
    z-index: 1;
    transition: filter 0.32s ease;
}

.tool-card--cert:hover .tool-card__icon svg {
    filter: drop-shadow(0 3px 7px rgba(132,94,194,0.50));
    animation: cert-icon-spin 0.65s cubic-bezier(.34,1.56,.64,1) forwards;
}

.tool-card--cert .tool-card__label {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.tool-card--cert:hover .tool-card__label {
    color: #845ec2;
    letter-spacing: 0.02em;
}

.tool-card__label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--charcoal);
    line-height: 1.2;
    padding: 0 8px;
}

/* ============================================================
   TIMETABLE CARD ? futuristic 3D pop-out, orange theme
   ============================================================ */

@keyframes tt-sway {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25%       { transform: translateY(-5px) rotate(1.2deg); }
    75%       { transform: translateY(-3px) rotate(-0.9deg); }
}

@keyframes tt-icon-bounce {
    0%   { transform: scale(1)    translateY(0px); }
    25%  { transform: scale(0.88) translateY(5px); }
    55%  { transform: scale(1.32) translateY(-11px); }
    78%  { transform: scale(1.18) translateY(-2px); }
    100% { transform: scale(1.22) translateY(0px); }
}

@keyframes timetable-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px  rgba(255,150,113,0.50),
            0 0 18px 2px rgba(255,150,113,0.26),
            0 0 40px 6px rgba(255,150,113,0.10),
            0 24px 48px  rgba(255,150,113,0.28),
            6px 12px 0   rgba(255,150,113,0.18),
            12px 22px 0  rgba(255,150,113,0.07);
    }
    50% {
        box-shadow:
            0 0 0 1px  rgba(255,199,95,0.75),
            0 0 26px 4px rgba(255,199,95,0.40),
            0 0 55px 10px rgba(255,199,95,0.16),
            0 28px 56px  rgba(255,150,113,0.34),
            6px 12px 0   rgba(255,150,113,0.20),
            12px 22px 0  rgba(255,150,113,0.09);
    }
}

.tool-card--timetable {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,150,113,0.25);
    box-shadow:
        0 1px 4px  rgba(0,0,0,0.05),
        0 0 0 1px  rgba(255,150,113,0.06),
        4px 6px 0  rgba(255,150,113,0.10),
        7px 11px 0 rgba(255,150,113,0.05);
    transition:
        transform    0.44s cubic-bezier(.34,1.56,.64,1),
        box-shadow   0.38s ease,
        border-color 0.30s ease,
        background   0.30s ease;
}

.tool-card--timetable:not(:hover) {
    animation: tt-sway 3.4s ease-in-out infinite 0.8s;
}

/* Shimmer sweep */
.tool-card--timetable::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        106deg,
        transparent 26%,
        rgba(255,255,255,0.08) 38%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.08) 62%,
        transparent 74%
    );
    transform: translateX(-130%);
    transition: transform 0s linear;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
}

.tool-card--timetable:hover::after {
    transform: translateX(130%);
    transition: transform 0.62s cubic-bezier(.4,0,.2,1);
}

/* 3D perspective lift + breathing orange glow */
.tool-card--timetable:hover {
    transform: perspective(480px) translateY(-20px) rotateX(9deg) scale(1.07);
    border-color: rgba(255,150,113,0.30);
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

/* Press: snap back */
.tool-card--timetable:active {
    transform: perspective(480px) translateY(-4px) rotateX(1deg) scale(1.01);
    animation: none;
    box-shadow:
        0 0 0 1px rgba(255,150,113,0.50),
        0 6px 20px rgba(255,150,113,0.26),
        3px 5px 0  rgba(255,150,113,0.14);
    transition-duration: 0.08s;
}

.tool-card--timetable .tool-card__icon {
    background: linear-gradient(140deg, #fff3ef 0%, #ffe4d9 100%);
    border: 1px solid rgba(255,150,113,0.22);
    position: relative;
    z-index: 1;
    transition:
        background    0.32s ease,
        border-color  0.32s ease,
        transform     0.44s cubic-bezier(.34,1.56,.64,1);
}

.tool-card--timetable:hover .tool-card__icon {
    transform: translateY(-5px) scale(1.08);
}

.tool-card--timetable .tool-card__icon svg {
    color: #ff9671;
    position: relative;
    z-index: 1;
    transition: filter 0.32s ease;
}

.tool-card--timetable:hover .tool-card__icon svg {
    filter: drop-shadow(0 3px 7px rgba(255,150,113,0.50));
    animation: tt-icon-bounce 0.55s cubic-bezier(.34,1.56,.64,1) forwards;
}

.tool-card--timetable .tool-card__label {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.tool-card--timetable:hover .tool-card__label {
    color: #ff9671;
    letter-spacing: 0.02em;
}

/* ============================================================
   COMING SOON CARDS ? faded, non-interactive
   ============================================================ */
.tool-card--soon {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.tool-card--soon .tool-card__label {
    font-style: italic;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
}

/* ============================================================
   PDF ORGANISER CARD — pink theme
   ============================================================ */

@keyframes po-drift {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    30%       { transform: translateY(-6px) rotate(-0.8deg); }
    70%       { transform: translateY(-4px) rotate(0.6deg); }
}

@keyframes po-icon-pop {
    0%   { transform: scale(1)    rotate(0deg); }
    25%  { transform: scale(0.88) rotate(-8deg); }
    55%  { transform: scale(1.30) rotate(6deg); }
    78%  { transform: scale(1.18) rotate(-2deg); }
    100% { transform: scale(1.22) rotate(0deg); }
}

.tool-card--pdf-organiser {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,111,145,0.25);
    box-shadow:
        0 1px 4px  rgba(0,0,0,0.05),
        0 0 0 1px  rgba(255,111,145,0.06),
        4px 6px 0  rgba(255,111,145,0.11),
        7px 11px 0 rgba(255,111,145,0.05);
    transition:
        transform  0.44s cubic-bezier(.34,1.56,.64,1),
        box-shadow 0.38s ease,
        border-color 0.30s ease,
        background   0.30s ease;
}

.tool-card--pdf-organiser:not(:hover) {
    animation: po-drift 3.8s ease-in-out infinite 0.4s;
}

.tool-card--pdf-organiser::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        106deg,
        transparent 26%,
        rgba(255,255,255,0.08) 38%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.08) 62%,
        transparent 74%
    );
    transform: translateX(-130%);
    transition: transform 0s linear;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
}
.tool-card--pdf-organiser:hover::after {
    transform: translateX(130%);
    transition: transform 0.62s cubic-bezier(.4,0,.2,1);
}

.tool-card--pdf-organiser:hover {
    transform: perspective(480px) translateY(-20px) rotateX(9deg) scale(1.07);
    border-color: rgba(255,111,145,0.30);
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

.tool-card--pdf-organiser:active {
    transform: perspective(480px) translateY(-4px) rotateX(1deg) scale(1.01);
    animation: none;
    box-shadow:
        0 0 0 1px rgba(255,111,145,0.50),
        0 6px 20px rgba(255,111,145,0.26),
        3px 5px 0  rgba(255,111,145,0.14);
    transition-duration: 0.08s;
}

.tool-card--pdf-organiser .tool-card__icon {
    background: linear-gradient(140deg, #fff0f4 0%, #ffd6e0 100%);
    border: 1px solid rgba(255,111,145,0.22);
    position: relative;
    z-index: 1;
    transition:
        background    0.32s ease,
        border-color  0.32s ease,
        transform     0.44s cubic-bezier(.34,1.56,.64,1);
}
.tool-card--pdf-organiser:hover .tool-card__icon {
    transform: translateY(-5px) scale(1.08);
}
.tool-card--pdf-organiser .tool-card__icon svg {
    color: #ff6f91;
    position: relative;
    z-index: 1;
    transition: filter 0.32s ease;
}
.tool-card--pdf-organiser:hover .tool-card__icon svg {
    filter: drop-shadow(0 3px 7px rgba(255,111,145,0.52));
    animation: po-icon-pop 0.55s cubic-bezier(.34,1.56,.64,1) forwards;
}
.tool-card--pdf-organiser .tool-card__label {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.tool-card--pdf-organiser:hover .tool-card__label {
    color: #ff6f91;
    letter-spacing: 0.02em;
}

@keyframes sport-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}

@keyframes sport-icon-wobble {
    0%   { transform: scale(1)    rotate(0deg); }
    20%  { transform: scale(1.10) rotate(-14deg); }
    50%  { transform: scale(1.32) rotate(12deg); }
    75%  { transform: scale(1.22) rotate(-4deg); }
    100% { transform: scale(1.22) rotate(0deg); }
}

@keyframes sport-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px  rgba(168,224,0,0.60),
            0 0 18px 2px rgba(168,224,0,0.30),
            0 0 40px 6px rgba(168,224,0,0.12),
            0 24px 48px  rgba(168,224,0,0.28),
            6px 12px 0   rgba(168,224,0,0.18),
            12px 22px 0  rgba(168,224,0,0.07);
    }
    50% {
        box-shadow:
            0 0 0 1px  rgba(168,224,0,0.90),
            0 0 26px 4px rgba(168,224,0,0.50),
            0 0 55px 10px rgba(168,224,0,0.20),
            0 28px 56px  rgba(168,224,0,0.34),
            6px 12px 0   rgba(168,224,0,0.20),
            12px 22px 0  rgba(168,224,0,0.09);
    }
}

.tool-card--sport {
    position: relative;
    overflow: hidden;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    opacity: 0.45;
    border-color: rgba(168,224,0,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    animation: none !important;
    transform: none !important;
}

.tool-card--sport::after { display: none; }
.tool-card--sport:hover { transform: none !important; background: none; border-color: rgba(168,224,0,0.25); animation: none !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
.tool-card--sport:hover .tool-card__icon { transform: none; background: linear-gradient(140deg, #e6fff9 0%, #ccf7ef 100%); border-color: rgba(168,224,0,0.30); }
.tool-card--sport:hover .tool-card__icon svg { filter: none; animation: none; }
.tool-card--sport:hover .tool-card__label { color: inherit; letter-spacing: normal; }

.tool-card--sport .tool-card__icon {
    background: linear-gradient(140deg, #e6fff9 0%, #ccf7ef 100%);
    border: 1px solid rgba(168,224,0,0.30);
    transition: none;
}

.tool-card--sport .tool-card__icon svg {
    color: #a8e000;
    transition: none;
}

.tool-card--sport .tool-card__label {
    position: relative;
    z-index: 1;
    font-weight: 600;
}

.tool-card__coming-soon {
    display: block;
    font-size: 0.68rem;
    font-style: italic;
    font-weight: 400;
    color: #6B7280;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}

/* Teal */
.tool-card--soon-teal {
    border-color: rgba(13,148,136,0.22);
}
.tool-card--soon-teal .tool-card__icon {
    background: linear-gradient(140deg, #F0FDFA 0%, #CCFBF1 100%);
    border: 1px solid rgba(13,148,136,0.20);
    color: #0F766E;
}

/* Rose */
.tool-card--soon-rose {
    border-color: rgba(225,29,72,0.22);
}
.tool-card--soon-rose .tool-card__icon {
    background: linear-gradient(140deg, #FFF1F2 0%, #FFE4E6 100%);
    border: 1px solid rgba(225,29,72,0.20);
    color: #BE123C;
}

/* Amber */
.tool-card--soon-amber {
    border-color: rgba(217,119,6,0.22);
}
.tool-card--soon-amber .tool-card__icon {
    background: linear-gradient(140deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid rgba(217,119,6,0.20);
    color: #B45309;
}

/* Sky */
.tool-card--soon-sky {
    border-color: rgba(2,132,199,0.22);
}
.tool-card--soon-sky .tool-card__icon {
    background: linear-gradient(140deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid rgba(2,132,199,0.20);
    color: #0369A1;
}

/* Emerald */
.tool-card--soon-emerald {
    border-color: rgba(5,150,105,0.22);
}
.tool-card--soon-emerald .tool-card__icon {
    background: linear-gradient(140deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid rgba(5,150,105,0.20);
    color: #047857;
}

/* ============================================================
   EMPTY PAGE (Get Started etc.)
   ============================================================ */
.page-empty {
    min-height: calc(100vh - 90px);
    background: var(--bg-base);
}

/* ============================================================
   DEFAULT PAGE (PMPro checkout, account, etc.)
   ============================================================ */
.default-page {
    min-height: calc(100vh - 90px);
    background: var(--bg-base);
    padding: 48px 0 80px;
}

.default-page__inner {
    max-width: 800px;
}

/* ============================================================
   PMPRO — GLOBAL THEME INTEGRATION
   Applies to all PMPro pages: checkout, account, confirmation,
   levels, billing, cancel, login
   ============================================================ */

/* ── Typography baseline ─────────────────────────────────── */
.pmpro h1, .pmpro h2, .pmpro h3,
#pmpro_checkout h1, #pmpro_checkout h2, #pmpro_checkout h3,
.pmpro_content_block h1, .pmpro_content_block h2 {
    color: var(--charcoal);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* ── Page-level wrapper ──────────────────────────────────── */
#pmpro_checkout,
.pmpro_content_block,
.pmpro_account,
#pmpro_levels_page,
#pmpro_invoice {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    color: var(--charcoal-mid);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Section heading bars ────────────────────────────────── */
.pmpro_checkout_heading,
.pmpro_checkout_heading2 {
    margin: 32px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-md);
}

.pmpro_checkout_heading h2,
.pmpro_checkout_heading2 h2,
.pmpro_checkout_heading h3,
.pmpro_checkout_heading2 h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--charcoal-light);
    margin: 0;
}

/* ── Card panels ─────────────────────────────────────────── */
#pmpro_checkout_box,
.pmpro_box,
#pmpro_level_cost,
.pmpro_invoice,
#pmpro_invoice,
.pmpro_account_panel,
.pmpro_content_block > div {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

/* ── Level / cost summary pill ───────────────────────────── */
.pmpro_level_cost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(132, 94, 194, 0.08);
    border: 1px solid rgba(132, 94, 194, 0.18);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-size: 0.9rem;
    color: var(--c-purple);
    font-weight: 600;
    margin: 0 0 24px;
}

/* ── Form labels ─────────────────────────────────────────── */
#pmpro_checkout label,
#pmpro_checkout .pmpro_label,
.pmpro label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal-light);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Form fields ─────────────────────────────────────────── */
#pmpro_checkout input[type="text"],
#pmpro_checkout input[type="email"],
#pmpro_checkout input[type="password"],
#pmpro_checkout input[type="tel"],
#pmpro_checkout input[type="number"],
#pmpro_checkout select,
#pmpro_checkout textarea,
.pmpro input[type="text"],
.pmpro input[type="email"],
.pmpro input[type="password"],
.pmpro select {
    width: 100%;
    background: var(--bg-raised);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--charcoal);
    outline: none;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

#pmpro_checkout input[type="text"]:focus,
#pmpro_checkout input[type="email"]:focus,
#pmpro_checkout input[type="password"]:focus,
#pmpro_checkout input[type="tel"]:focus,
#pmpro_checkout select:focus,
.pmpro input:focus,
.pmpro select:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.14);
}

#pmpro_checkout input::placeholder,
.pmpro input::placeholder {
    color: var(--charcoal-muted);
}

/* ── Checkbox / radio ────────────────────────────────────── */
#pmpro_checkout input[type="checkbox"],
#pmpro_checkout input[type="radio"] {
    width: auto;
    accent-color: var(--c-purple);
    margin-right: 8px;
}

/* ── Field rows ──────────────────────────────────────────── */
.pmpro_checkout-field,
.pmpro_payment-field {
    margin-bottom: 18px;
}

/* ── Submit button ───────────────────────────────────────── */
#pmpro_submit_span,
.pmpro_submit_span {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Override PMPro's flex-direction:row so button and processing stack vertically centred */
#pmpro_checkout .pmpro_form_submit,
.pmpro_content_block .pmpro_form_submit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 24px;
}

#pmpro_checkout .pmpro_form_submit #pmpro_processing_message,
.pmpro_content_block .pmpro_form_submit #pmpro_processing_message {
    text-align: center;
    margin-top: 8px;
    width: 100%;
}

#pmpro_submit_span input[type="submit"],
#pmpro_submit_span button[type="submit"],
.pmpro_btn-submit-checkout,
.pmpro .pmpro_btn,
.pmpro input[type="submit"],
input#pmpro_btn-submit {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 13px 36px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease);
}

#pmpro_submit_span input[type="submit"]:hover,
#pmpro_submit_span button[type="submit"]:hover,
.pmpro_btn-submit-checkout:hover,
.pmpro .pmpro_btn:hover,
input#pmpro_btn-submit:hover {
    opacity: 0.88;
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 6px 20px rgba(132, 94, 194, 0.32);
}

#pmpro_submit_span input[type="submit"]:disabled,
#pmpro_submit_span button[type="submit"]:disabled,
.pmpro_btn-submit-checkout:disabled,
input#pmpro_btn-submit:disabled {
    opacity: 0.58 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ── Messages / notices ──────────────────────────────────── */
#pmpro_message,
.pmpro_message,
.pmpro .pmpro_message,
.pmpro_error,
.pmpro .pmpro_error,
.pmpro_success,
.pmpro .pmpro_success {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid;
}

.pmpro_success,
.pmpro .pmpro_success,
.pmpro_message.pmpro_success {
    background: rgba(168, 224, 0, 0.10);
    border-color: rgba(168, 224, 0, 0.30);
    color: #3a5a00;
}

.pmpro_error,
.pmpro .pmpro_error,
.pmpro_message.pmpro_error {
    background: rgba(255, 111, 145, 0.10);
    border-color: rgba(255, 111, 145, 0.30);
    color: #8b1a1a;
}

#pmpro_message,
.pmpro_message {
    background: rgba(132, 94, 194, 0.07);
    border-color: rgba(132, 94, 194, 0.22);
    color: var(--charcoal-mid);
}

/* ── Order / receipt table ───────────────────────────────── */
.pmpro table,
#pmpro_invoice table,
.pmpro_invoice_table,
table.pmpro_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.pmpro table th,
#pmpro_invoice table th,
.pmpro_invoice_table th,
table.pmpro_table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal-light);
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-md);
}

.pmpro table td,
#pmpro_invoice table td,
.pmpro_invoice_table td,
table.pmpro_table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--charcoal-mid);
    vertical-align: top;
}

.pmpro table tr:last-child td,
#pmpro_invoice table tr:last-child td {
    border-bottom: none;
    font-weight: 600;
    color: var(--charcoal);
}

/* ── Account page ────────────────────────────────────────── */
.pmpro_account-membership,
.pmpro_account-profile,
.pmpro_account-invoices,
.pmpro_account-links {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.pmpro_account-membership h3,
.pmpro_account-profile h3,
.pmpro_account-invoices h3,
.pmpro_account-links h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal-light);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.pmpro_account-membership p,
.pmpro_account-profile p,
.pmpro_account-links ul,
.pmpro_account-invoices ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--charcoal-mid);
    font-size: 0.93rem;
}

.pmpro_account-links a,
.pmpro a,
#pmpro_checkout a {
    color: var(--c-purple);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--t-fast) var(--ease);
}

.pmpro_account-links a:hover,
.pmpro a:hover,
#pmpro_checkout a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* ── Membership level badge on account page ──────────────── */
.pmpro_account-membership .pmpro_account-membership-level-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--charcoal);
}

/* ── Levels page ─────────────────────────────────────────── */
#pmpro_levels_page .pmpro_level {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* ── Confirmation page specific ──────────────────────────── */
.pmpro_content_block {
    color: var(--charcoal-mid);
    font-size: 0.95rem;
    line-height: 1.65;
}

.pmpro_content_block h1 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.pmpro_content_block h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 28px 0 12px;
}

/* ── "View your membership account" link ─────────────────── */
.pmpro_content_block a.pmpro_btn,
.pmpro_content_block a.button {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring);
    margin-top: 8px;
}

.pmpro_content_block a.pmpro_btn:hover,
.pmpro_content_block a.button:hover {
    opacity: 0.88;
    transform: scale(1.02) translateY(-1px);
}

/* ── Paystack / gateway payment section ──────────────────── */
#pmpro_payment_information_fields {
    margin-top: 8px;
}

/* ── Small print / description text ─────────────────────── */
.pmpro_small,
.pmpro_description,
#pmpro_checkout .pmpro_description {
    font-size: 0.8rem;
    color: var(--charcoal-muted);
    line-height: 1.5;
    margin-top: 4px;
}

/* ── Waiting / spinner text ──────────────────────────────── */
.pmpro_processing,
#pmpro_checkout .pmpro_processing {
    color: var(--charcoal-light);
    font-style: italic;
    font-size: 0.88rem;
}

/* ── Print button ────────────────────────────────────────── */
.pmpro_print_btn,
a.pmpro_print_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--charcoal-light);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-pill);
    padding: 7px 18px;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.pmpro_print_btn:hover,
a.pmpro_print_link:hover {
    color: var(--c-purple);
    border-color: var(--c-purple);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: transparent;
    border-top: none;
    padding: 40px 0;
    position: relative;
    z-index: 2;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--c-yellow),
        var(--c-orange),
        var(--c-coral),
        var(--c-pink),
        var(--c-fuchsia),
        var(--c-purple),
        var(--c-green));
    opacity: 0.55;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.70) inset,
        0 8px 40px rgba(0, 0, 0, 0.08);
}

.footer-brand .site-name {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--charcoal);
}

.footer-tagline {
    font-size: 0.85rem;
    color: var(--charcoal-muted);
    margin-top: 4px;
}

.footer-nav ul {
    display: flex;
    gap: 24px;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav a {
    font-size: 0.88rem;
    color: var(--charcoal-light);
    transition: color var(--t-fast) var(--ease);
}

.footer-nav a:hover { color: var(--charcoal); }

.footer-copy {
    font-size: 0.78rem;
    color: var(--charcoal-muted);
    letter-spacing: 0.1px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-slow) var(--ease),
                transform var(--t-slow) var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }

/* ============================================================
   PAGE TRANSITIONS  —  directional SPA slide
   ============================================================ */
#page-slide {
    position: relative;
    z-index: 2;
    /* will-change applied only while animating (see classes below)
       so backdrop-filter on child panels can blur the lava lamp */
}

/* Forward: Home → Box (left-to-right motion) */
@keyframes slide-out-left {
    from { opacity: 1; transform: translateX(0);     }
    to   { opacity: 0; transform: translateX(-64px); }
}
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(64px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* Backward: Box → Home (right-to-left motion) */
@keyframes slide-out-right {
    from { opacity: 1; transform: translateX(0);    }
    to   { opacity: 0; transform: translateX(64px); }
}
@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-64px); }
    to   { opacity: 1; transform: translateX(0);     }
}

#page-slide.leaving-forward   { will-change: transform, opacity; animation: 220ms cubic-bezier(0.4,0,1,1)      both slide-out-left;  pointer-events: none; }
#page-slide.entering-forward  { will-change: transform, opacity; animation: 420ms cubic-bezier(0.22,1,0.36,1)  both slide-in-right; }
#page-slide.leaving-backward  { will-change: transform, opacity; animation: 220ms cubic-bezier(0.4,0,1,1)      both slide-out-right; pointer-events: none; }
#page-slide.entering-backward { will-change: transform, opacity; animation: 420ms cubic-bezier(0.22,1,0.36,1)  both slide-in-left; }

@media (prefers-reduced-motion: reduce) {
    #page-slide.leaving-forward,  #page-slide.entering-forward,
    #page-slide.leaving-backward, #page-slide.entering-backward { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px) {
    .nav-toggle { display: flex; }

    /* Hide WP admin bar on phones so header sits flush at the very top */
    #wpadminbar { display: none !important; }
    .admin-bar .site-header { top: 0 !important; }
    .admin-bar body { margin-top: 0 !important; }

    /* Push body below header + subscribe bar */
    body { padding-top: 110px; }

    /* Show the mobile subscribe bar */
    .mobile-subscribe-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        height: 46px;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(132, 94, 194, 0.15);
        z-index: 198;
    }

    /* Hide subscribe button inside main header-auth on mobile */
    .header-auth .btn-subscribe { display: none; }

    .site-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-bottom: 1px solid var(--border);
        padding: 12px 20px 20px;
        z-index: 199;
    }

    .site-nav.is-open { display: block; }

    .site-nav .nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    .site-nav .nav-list a {
        font-size: 0.9rem;
        padding: 9px 14px;
        border-radius: var(--radius-sm);
    }

    /* Active item in mobile column menu */
    .site-nav .current-menu-item > a,
    .site-nav .nav-list a.is-active {
        background: rgba(131, 71, 255, 0.10);
        color: var(--c-purple);
        font-weight: 700;
        border-radius: var(--radius-sm);
        box-shadow: none;
    }

    /* Suppress desktop pill indicator on mobile */
    .nav-pill { display: none !important; }

    .btn-login { display: none; }

    .site-logo-img { height: 44px; }

    /* Mobile header layout: CSS grid — logo | ☰ centre | profile */
    .header-inner {
        padding: 0 16px;
        height: 64px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0;
    }

    .site-logo-link { order: 1; justify-self: start; }

    .nav-toggle {
        order: 2;
        justify-self: center;
        flex: none;
    }

    .header-auth {
        order: 3;
        justify-self: end;
        flex-shrink: 0;
        gap: 6px;
    }

    /* Slightly smaller subscribe button on mobile to keep it tidy */
    .btn-subscribe { padding: 8px 14px; font-size: 0.8rem; }
    .btn-subscribe svg { width: 13px; height: 13px; }

    .hero-logo-img { height: 140px; }
    .bg-shape { font-size: 2.2rem; opacity: 0.09; }

    .container { padding: 0 22px; }
    .footer-inner { padding: 0 22px; }

    .hero { min-height: calc(100vh - 64px); padding: 16px 20px; }

    /* Bigger welcome text on mobile */
    .hero-title { font-size: clamp(2.4rem, 10vw, 3rem); }
    .hero-title-sub { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }

    /* Frosted hero panel - tighter padding on small screens */
    .hero-container { padding: 28px 20px 24px; border-radius: 20px; }

    /* Box hero frosted panel */
    .box-hero .container { padding: 24px 20px 20px; border-radius: 20px; }

    /* Tool panel */
    .tool-panel { padding: 20px 14px; border-radius: 20px; }

    /* Desktop-mode notice - visible on mobile only */
    .mobile-desktop-notice {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        padding: 18px 20px;
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 18px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06),
                    0 1px 0 rgba(255,255,255,0.7) inset;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--charcoal-light);
        line-height: 1.6;
        text-align: center;
    }

    .mobile-desktop-notice::before {
        content: "💻";
        font-size: 1.6rem;
        flex-shrink: 0;
        line-height: 1;
    }

    .mobile-desktop-notice p {
        margin: 0;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal, [class*="reveal-delay"] {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .btn-primary:hover,
    .btn-ghost:hover,
    .btn-signup:hover { transform: none; }
}

/* ============================================================
   LAVA LAMP BACKGROUND
   ============================================================ */
#lava-lamp {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.lava-icon {
    position: absolute;
    bottom: -80px;
    line-height: 0;
}

.lava-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes lava-rise {
    0% {
        transform: translateY(0) rotate(-6deg) scale(0.92);
        opacity: 0;
    }
    8% {
        opacity: var(--icon-opacity, 0.35);
    }
    90% {
        opacity: var(--icon-opacity, 0.35);
    }
    100% {
        transform: translateY(-112vh) rotate(8deg) scale(1.06);
        opacity: 0;
    }
}

/* ============================================================
   PAGE: THE BOX ? Vibrant Dashboard
   ============================================================ */

/* --- Page Wrapper ------------------------------------------ */
.box-page {
    min-height: calc(100vh - 90px);
    background: transparent;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* --- Animated Gradient Orbs ------------------------------- */
.box-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.box-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.42;
}

.box-orb--1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, #7c3aed 0%, #4f46e5 100%);
    top: -180px; left: -120px;
    animation: box-orb-a 15s ease-in-out infinite;
}

.box-orb--2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #ec4899 0%, #f43f5e 100%);
    top: 25%; right: -100px;
    animation: box-orb-b 11s ease-in-out infinite;
    animation-delay: -4s;
}

.box-orb--3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #06b6d4 0%, #3b82f6 100%);
    bottom: -80px; left: 25%;
    animation: box-orb-a 18s ease-in-out infinite;
    animation-delay: -8s;
}

.box-orb--4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #f59e0b 0%, #f97316 100%);
    top: 55%; left: 5%;
    animation: box-orb-b 12s ease-in-out infinite;
    animation-delay: -2s;
}

@keyframes box-orb-a {
    0%, 100% { transform: translate(0px,    0px)   scale(1);    }
    33%       { transform: translate(40px,  -40px)  scale(1.08); }
    66%       { transform: translate(-25px,  25px)  scale(0.93); }
}

@keyframes box-orb-b {
    0%, 100% { transform: translate(0px,    0px)   scale(1);    }
    40%       { transform: translate(-35px, -20px)  scale(1.10); }
    70%       { transform: translate(20px,   30px)  scale(0.95); }
}

/* --- Floating Icons --------------------------------------- */
.box-float-icon {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
    animation: box-icon-bob 8s ease-in-out infinite;
}

.box-float-icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.box-float-icon--1 { width:42px;  top:8%;   left:6%;   color:rgba(167,139,250,.22); animation-duration:7s;   animation-delay:0s;    }
.box-float-icon--2 { width:58px;  top:18%;  right:10%; color:rgba(251,191,36,.18);  animation-duration:9s;   animation-delay:-2.5s; }
.box-float-icon--3 { width:34px;  top:48%;  left:4%;   color:rgba(244,114,182,.24); animation-duration:6.5s; animation-delay:-4s;   }
.box-float-icon--4 { width:50px;  top:12%;  left:40%;  color:rgba(129,140,248,.20); animation-duration:11s;  animation-delay:-1s;   }
.box-float-icon--5 { width:46px;  top:62%;  right:7%;  color:rgba(52,211,153,.20);  animation-duration:8.5s; animation-delay:-5.5s; }
.box-float-icon--6 { width:28px;  top:78%;  left:18%;  color:rgba(248,113,113,.22); animation-duration:7.5s; animation-delay:-3s;   }
.box-float-icon--7 { width:38px;  top:32%;  right:24%; color:rgba(251,191,36,.18);  animation-duration:10s;  animation-delay:-6s;   }
.box-float-icon--8 { width:32px;  top:72%;  right:32%; color:rgba(167,139,250,.16); animation-duration:9.5s; animation-delay:-1.5s; }

@keyframes box-icon-bob {
    0%, 100% { transform: translateY(0px)   rotate(0deg);   opacity: 0.9;  }
    50%       { transform: translateY(-20px) rotate(10deg);  opacity: 0.50; }
}

/* --- Hero Section ----------------------------------------- */
.box-hero {
    position: relative;
    z-index: 1;
    padding: 36px 0 20px;
    text-align: center;
}

/* Frosted window panel around the hero text */
.box-hero .container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    padding: 28px 44px 24px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 8px 40px rgba(0, 0, 0, 0.08);
    max-width: 640px;
}

.box-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(132,94,194,0.28);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--charcoal);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 14px;
}

.box-hero__title {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.16;
    color: var(--charcoal);
    letter-spacing: -0.035em;
    margin-bottom: 10px;
}

.box-hero__title-grad {
    display: block;
    background: linear-gradient(90deg,
        var(--c-purple),
        var(--c-fuchsia),
        var(--c-pink),
        var(--c-coral),
        var(--c-orange),
        var(--c-yellow),
        var(--c-green),
        var(--c-yellow),
        var(--c-orange),
        var(--c-coral),
        var(--c-pink),
        var(--c-fuchsia),
        var(--c-purple)
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: box-grad-shift 96s linear infinite;
}

@keyframes box-grad-shift {
    0%   { background-position: 0%   center; }
    100% { background-position: 400% center; }
}

/* Home page hero title gradient — reuses same keyframe */
.hero-title-grad {
    display: inline;
    background: linear-gradient(90deg,
        var(--c-purple),
        var(--c-fuchsia),
        var(--c-pink),
        var(--c-coral),
        var(--c-orange),
        var(--c-yellow),
        var(--c-green),
        var(--c-yellow),
        var(--c-orange),
        var(--c-coral),
        var(--c-pink),
        var(--c-fuchsia),
        var(--c-purple)
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: box-grad-shift 96s linear infinite;
}

.box-hero__sub {
    font-size: 0.90rem;
    color: var(--charcoal-light);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-top: 0;
}

/* --- Tool Cards ? The Box overrides ---------------------- */
.box-page .tool-cards {
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 0 0 40px;
}

/* Frosted window panel wrapping the tool grid */
.tool-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    padding: 28px 32px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 8px 40px rgba(0, 0, 0, 0.08);
}

.box-page .tool-grid {
    gap: 16px;
}

.box-page .tool-tile {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.box-page .tool-card {
    width: 160px;
    height: 160px;
    border-radius: 24px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.50);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--charcoal);
    gap: 8px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 4px 20px rgba(0,0,0,0.07);
    transition:
        transform  0.44s cubic-bezier(.34,1.56,.64,1),
        box-shadow 0.38s ease,
        border-color 0.30s ease,
        background   0.30s ease,
        color        0.25s ease;
}

.box-page .tool-card__label {
    color: #1D1D1F;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
}

/* "Open →" action text */
.tool-card__action {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(0,0,0,0.32);
    display: block;
    position: relative;
    z-index: 1;
    transition: color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}

.tool-card:hover .tool-card__action {
    color: rgba(0,0,0,0.60);
    transform: translateX(4px);
}

/* -- Cert card (palette purple/fuchsia) -- */
.box-page .tool-card--cert {
    background: rgba(243,238,255,0.32);
    border-color: rgba(132,94,194,0.40);
}

.box-page .tool-card--cert:hover {
    background: rgba(132,94,194,0.13);
    border-color: rgba(132,94,194,0.42);
    color: var(--charcoal);
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 14px 40px rgba(132,94,194,0.16),
        0 4px 16px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.75);
}

.box-page .tool-card--cert:hover .tool-card__label {
    color: #6b48a8;
}

.box-page .tool-card--cert .tool-card__action {
    color: rgba(132,94,194,0.48);
}

.box-page .tool-card--cert:hover .tool-card__action {
    color: #845ec2;
}

.box-page .tool-card--cert .tool-card__icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg, #f3eeff, #e8d4ff);
    border: 1px solid rgba(132,94,194,0.22);
    transition: background 0.30s ease, border-color 0.30s ease, transform 0.44s cubic-bezier(.34,1.56,.64,1);
}

.box-page .tool-card--cert:hover .tool-card__icon {
    background: linear-gradient(140deg, #ede0ff, #d8bcf7);
    border-color: rgba(132,94,194,0.38);
    transform: translateY(-4px) scale(1.06);
}

.box-page .tool-card--cert .tool-card__icon svg {
    color: #845ec2;
    width: 26px; height: 26px;
    transition: color 0.25s ease, filter 0.28s ease;
}

.box-page .tool-card--cert:hover .tool-card__icon svg {
    color: #845ec2;
    filter: drop-shadow(0 2px 7px rgba(132,94,194,0.45));
}

/* -- Timetable card (palette coral/orange) -- */
.box-page .tool-card--timetable {
    background: rgba(255,243,239,0.32);
    border-color: rgba(255,150,113,0.40);
}

.box-page .tool-card--timetable:hover {
    background: rgba(255,150,113,0.13);
    border-color: rgba(255,150,113,0.42);
    color: var(--charcoal);
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 14px 40px rgba(255,150,113,0.16),
        0 4px 16px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.75);
}

.box-page .tool-card--timetable:hover .tool-card__label {
    color: #e07a55;
}

.box-page .tool-card--timetable .tool-card__action {
    color: rgba(255,150,113,0.48);
}

.box-page .tool-card--timetable:hover .tool-card__action {
    color: #ff9671;
}

.box-page .tool-card--timetable .tool-card__icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg, #fff3ef, #ffe4d9);
    border: 1px solid rgba(255,150,113,0.22);
    transition: background 0.30s ease, border-color 0.30s ease, transform 0.44s cubic-bezier(.34,1.56,.64,1);
}

.box-page .tool-card--timetable:hover .tool-card__icon {
    background: linear-gradient(140deg, #ffe8df, #ffd0b5);
    border-color: rgba(255,150,113,0.38);
    transform: translateY(-4px) scale(1.06);
}

.box-page .tool-card--timetable .tool-card__icon svg {
    color: #ff9671;
    width: 26px; height: 26px;
    transition: color 0.25s ease, filter 0.28s ease;
}

.box-page .tool-card--timetable:hover .tool-card__icon svg {
    color: #ff9671;
    filter: drop-shadow(0 2px 7px rgba(255,150,113,0.48));
}

/* -- PDF Organiser card (palette pink) -- */
.box-page .tool-card--pdf-organiser {
    background: rgba(255,240,244,0.32);
    border-color: rgba(255,111,145,0.40);
}

.box-page .tool-card--pdf-organiser:hover {
    background: rgba(255,111,145,0.13);
    border-color: rgba(255,111,145,0.42);
    color: var(--charcoal);
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 14px 40px rgba(255,111,145,0.16),
        0 4px 16px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.75);
}

.box-page .tool-card--pdf-organiser:hover .tool-card__label {
    color: #e5527b;
}

.box-page .tool-card--pdf-organiser .tool-card__action {
    color: rgba(255,111,145,0.48);
}

.box-page .tool-card--pdf-organiser:hover .tool-card__action {
    color: #ff6f91;
}

.box-page .tool-card--pdf-organiser .tool-card__icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg, #fff0f4, #ffd6e0);
    border: 1px solid rgba(255,111,145,0.22);
    transition: background 0.30s ease, border-color 0.30s ease, transform 0.44s cubic-bezier(.34,1.56,.64,1);
}

.box-page .tool-card--pdf-organiser:hover .tool-card__icon {
    background: linear-gradient(140deg, #ffe4ec, #ffbfcf);
    border-color: rgba(255,111,145,0.38);
    transform: translateY(-4px) scale(1.06);
}

.box-page .tool-card--pdf-organiser .tool-card__icon svg {
    color: #ff6f91;
    width: 26px; height: 26px;
    transition: color 0.25s ease, filter 0.28s ease;
}

.box-page .tool-card--pdf-organiser:hover .tool-card__icon svg {
    color: #ff6f91;
    filter: drop-shadow(0 2px 7px rgba(255,111,145,0.50));
}

/* -- Sport card (palette green, coming soon) -- */
.box-page .tool-card--sport {
    background: rgba(230,255,249,0.32);
    border-color: rgba(168,224,0,0.40);
    opacity: 0.55;
}

.box-page .tool-card--sport .tool-card__icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg, #e6fff9, #ccf7ef);
    border: 1px solid rgba(168,224,0,0.28);
}

.box-page .tool-card--sport .tool-card__icon svg {
    color: #a8e000;
    width: 26px; height: 26px;
}

.box-page .tool-card__coming-soon {
    color: rgba(0,0,0,0.38);
}

.box-page .tool-tutorial-btn {
    --tool-tutorial-accent-rgb: 132,94,194;
    --tool-tutorial-accent-solid: #845ec2;
    width: 40px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.68);
    border-radius: 999px;
    background: rgba(255,255,255,0.44);
    color: var(--charcoal-mid);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    padding: 0 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.74) inset,
        0 6px 16px rgba(0,0,0,0.07);
    transition:
        width var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease-spring),
        box-shadow var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
}

.box-page .tool-tutorial-btn__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.box-page .tool-tutorial-btn__icon svg {
    width: 18px;
    height: 18px;
}

.box-page .tool-tutorial-btn__text {
    max-width: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        max-width var(--t-fast) var(--ease),
        opacity var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.box-page .tool-tutorial-btn:hover,
.box-page .tool-tutorial-btn:focus-visible {
    width: 154px;
    border-color: rgba(var(--tool-tutorial-accent-rgb),0.45);
    background: rgba(255,255,255,0.66);
    color: var(--tool-tutorial-accent-solid);
    box-shadow:
        0 0 0 3px rgba(var(--tool-tutorial-accent-rgb),0.18),
        0 8px 18px rgba(var(--tool-tutorial-accent-rgb),0.16);
    transform: translateY(-2px);
    outline: none;
}

.box-page .tool-tutorial-btn--cert {
    --tool-tutorial-accent-rgb: 132,94,194;
    --tool-tutorial-accent-solid: #845ec2;
}

.box-page .tool-tutorial-btn--timetable {
    --tool-tutorial-accent-rgb: 255,150,113;
    --tool-tutorial-accent-solid: #ff9671;
}

.box-page .tool-tutorial-btn--pdf-organiser {
    --tool-tutorial-accent-rgb: 255,111,145;
    --tool-tutorial-accent-solid: #ff6f91;
}

.box-page .tool-tutorial-btn:hover .tool-tutorial-btn__text,
.box-page .tool-tutorial-btn:focus-visible .tool-tutorial-btn__text {
    max-width: 108px;
    opacity: 1;
    transform: translateX(0);
}

/* Touch devices don't have reliable hover, so keep tutorial controls expanded */
@media (hover: none), (pointer: coarse) {
    .box-page .tool-tutorial-btn {
        width: 100%;
        min-height: 36px;
        height: auto;
        justify-content: center;
        padding: 8px 10px;
        gap: 7px;
    }

    .box-page .tool-tutorial-btn__text {
        max-width: 110px;
        opacity: 1;
        transform: none;
    }

    .tool-video-modal {
        padding: 12px;
    }

    .tool-video-modal__dialog {
        width: min(940px, 100%);
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
        padding: 14px 12px 12px;
        overflow: auto;
    }

    .tool-video-modal__close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .tool-video-modal__player-wrap {
        border-radius: 14px;
    }

    .tool-video-modal__player {
        max-height: min(62dvh, 440px);
    }
}

.box-page .tool-tutorial-btn--disabled {
    opacity: 0.66;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- The Box Tutorial Video Modal ------------------------ */
.tool-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at 16% 18%, rgba(132,94,194,0.34), transparent 46%),
        radial-gradient(circle at 82% 12%, rgba(255,111,145,0.28), transparent 44%),
        rgba(29,29,31,0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease);
}

.tool-video-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.tool-video-modal__dialog {
    width: min(940px, 100%);
    background: linear-gradient(145deg, rgba(255,255,255,0.90), rgba(255,255,255,0.80));
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 28px;
    box-shadow:
        0 26px 60px rgba(0,0,0,0.26),
        0 1px 0 rgba(255,255,255,0.78) inset;
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
}

.tool-video-modal__dialog::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(132,94,194,0.14),
        rgba(214,93,177,0.10),
        rgba(255,150,113,0.08),
        rgba(168,224,0,0.08)
    );
}

.tool-video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.88);
    color: var(--charcoal-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-spring),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.tool-video-modal__close:hover,
.tool-video-modal__close:focus-visible {
    color: var(--charcoal);
    border-color: rgba(132,94,194,0.44);
    transform: scale(1.06);
    outline: none;
}

.tool-video-modal__close svg {
    width: 17px;
    height: 17px;
}

.tool-video-modal__title {
    position: relative;
    z-index: 1;
    margin: 2px 0 12px;
    padding-right: 44px;
    font-size: clamp(1.05rem, 1.8vw, 1.32rem);
    color: var(--charcoal);
    letter-spacing: -0.01em;
}

.tool-video-modal__player-wrap {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    background: #0f0f12;
    border: 1px solid rgba(0,0,0,0.18);
}

.tool-video-modal__player {
    display: block;
    width: 100%;
    max-height: min(74vh, 700px);
    background: #0f0f12;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 680px) {
    .box-hero { padding: 24px 0 16px; }

    .box-page .tool-grid {
        gap: 14px;
    }

    .box-page .tool-tile {
        width: 130px;
        gap: 8px;
    }

    .box-page .tool-card {
        width: 130px;
        height: 130px;
    }

    .box-page .tool-tutorial-btn {
        width: 100%;
        min-height: 34px;
        height: auto;
        justify-content: center;
        font-size: 0.70rem;
        padding: 8px 10px;
        gap: 7px;
    }

    .box-page .tool-tutorial-btn__text {
        max-width: 110px;
        opacity: 1;
        transform: none;
    }

    .tool-video-modal {
        padding: 12px;
    }

    .tool-video-modal__dialog {
        border-radius: 18px;
        padding: 14px 12px 12px;
    }

    .tool-video-modal__close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
    }

    .tool-video-modal__title {
        margin-bottom: 10px;
        padding-right: 38px;
    }

    .tool-video-modal__player-wrap {
        border-radius: 14px;
    }

    .box-page .tool-card--cert .tool-card__icon,
    .box-page .tool-card--timetable .tool-card__icon,
    .box-page .tool-card--pdf-organiser .tool-card__icon,
    .box-page .tool-card--sport .tool-card__icon {
        width: 42px; height: 42px;
    }

    .box-page .tool-card--cert .tool-card__icon svg,
    .box-page .tool-card--timetable .tool-card__icon svg,
    .box-page .tool-card--pdf-organiser .tool-card__icon svg,
    .box-page .tool-card--sport .tool-card__icon svg {
        width: 20px; height: 20px;
    }
}

/* Respect reduced-motion on box page animations */
@media (prefers-reduced-motion: reduce) {
    .box-orb,
    .box-float-icon,
    .box-hero__title-grad,
    .lava-icon { animation: none !important; }
}


/* ============================================================
   AUTH BUTTONS (as <button> elements)
   ============================================================ */
.btn-login,
.btn-signup {
    font-family: inherit;
    cursor: pointer;
}

.btn-login {
    background: none;
}


/* ============================================================
   PROFILE WRAP + DROPDOWN
   ============================================================ */
.profile-wrap {
    position: relative;
}

/* Override the old generic .profile-btn when it has an initial */
.profile-wrap .profile-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--c-purple);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast) var(--ease-spring),
                background var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.profile-wrap .profile-btn:hover {
    background: rgba(132, 94, 194, 0.08);
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.18);
}

.profile-initial {
    color: var(--c-purple);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    pointer-events: none;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
    min-width: 268px;
    background: rgba(245, 245, 247, 0.9);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 16px;
    box-shadow: 0 14px 42px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.05);
    padding: 8px;
    z-index: 250;
    animation: dropdown-in 0.18s var(--ease-spring) both;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: scale(0.94) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.profile-dropdown[hidden] { display: none; }

.profile-dropdown__info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-radius: 13px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg,
            var(--c-yellow),
            var(--c-orange),
            var(--c-coral),
            var(--c-pink),
            var(--c-fuchsia),
            var(--c-purple),
            var(--c-green)
        ) border-box;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.profile-dropdown__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f1f22;
    display: block;
}

.profile-dropdown__email {
    font-size: 0.8rem;
    color: #5d5d66;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown__country {
    font-size: 0.8rem;
    color: #34343b;
    font-weight: 600;
    display: block;
    margin-top: 4px;
}


/* ============================================================
   PMPRO — CHANGE PASSWORD PAGE
   ============================================================ */
#pmpro_change_password .pmpro_card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

#pmpro_change_password .pmpro_card_content {
    padding: 24px 28px;
}

#pmpro_change_password .pmpro_form_legend {
    margin-bottom: 14px;
}

#pmpro_change_password .pmpro_form_heading {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--charcoal);
}

#pmpro_change_password .pmpro_cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

#pmpro_change_password .pmpro_form_field {
    margin-bottom: 14px;
}

#pmpro_change_password .pmpro_form_label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5d5d66;
    margin-bottom: 6px;
}

#pmpro_change_password .pmpro_form_field-password-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#pmpro_change_password .pmpro_btn-password-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(29, 29, 31, 0.14);
    background: #fff;
    color: #1d1d1f !important;
    font-size: 0.78rem;
    font-weight: 700;
}

#pmpro_change_password .pmpro_btn-password-toggle:hover {
    background: rgba(29, 29, 31, 0.05);
    color: #000 !important;
}

#pmpro_change_password .pmpro_btn-password-toggle .pmpro_form_field-password-toggle-state {
    color: #1d1d1f !important;
}

#pmpro_change_password .pmpro_btn-password-toggle .pmpro_icon-eye svg {
    stroke: #1d1d1f !important;
}

#pmpro_change_password .pmpro_form_input {
    width: 100%;
    border: 1.5px solid rgba(29, 29, 31, 0.14);
    border-radius: 11px;
    background: #fff;
    color: var(--charcoal);
    padding: 11px 13px;
    font-size: 0.95rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

#pmpro_change_password #pass1,
#pmpro_change_password #pass2 {
    min-height: 46px;
    padding-top: 12px;
    padding-bottom: 12px;
}

#pmpro_change_password .pmpro_form_input:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.14);
}

#pmpro_change_password .pmpro_form_hint {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(132, 94, 194, 0.08);
    border: 1px solid rgba(132, 94, 194, 0.18);
    color: #4d3f72;
    font-size: 0.82rem;
    line-height: 1.45;
}

#pmpro_change_password #pass-strength-result {
    margin-top: 10px;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(29, 29, 31, 0.10);
    background: rgba(29, 29, 31, 0.04);
}

#pmpro_change_password #pass-strength-result.short,
#pmpro_change_password #pass-strength-result.bad {
    border-color: rgba(194, 48, 88, 0.28);
    background: rgba(255, 111, 145, 0.12);
    color: #8a3055;
}

#pmpro_change_password #pass-strength-result.good {
    border-color: rgba(194, 113, 26, 0.28);
    background: rgba(255, 199, 95, 0.18);
    color: #815000;
}

#pmpro_change_password #pass-strength-result.strong {
    border-color: rgba(72, 152, 34, 0.28);
    background: rgba(168, 224, 0, 0.16);
    color: #2f6b1b;
}

#pmpro_change_password .pmpro_form_submit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 16px;
}

#pmpro_change_password .pmpro_btn-submit-change-password {
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

#pmpro_change_password .pmpro_btn-submit-change-password:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 22px rgba(132, 94, 194, 0.28);
    opacity: 0.92;
}

#pmpro_change_password .pmpro_btn-cancel {
    background: rgba(29, 29, 31, 0.04);
    color: #43434a !important;
    border: 1px solid rgba(29, 29, 31, 0.14);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 0.88rem;
    font-weight: 600;
}

#pmpro_change_password .pmpro_btn-cancel:hover {
    background: rgba(29, 29, 31, 0.07);
    color: #2f2f35 !important;
}

@media (max-width: 760px) {
    #pmpro_change_password .pmpro_cols-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.profile-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: 4px 6px 6px;
}

.profile-dropdown__item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--charcoal);
    font-weight: 600;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.profile-dropdown__item:hover {
    background: rgba(132, 94, 194, 0.12);
    color: var(--charcoal);
}

.profile-dropdown__account {
    color: var(--charcoal);
}

.profile-dropdown__account:hover {
    background: rgba(29, 29, 31, 0.08);
    color: var(--charcoal);
}

.profile-dropdown__logout {
    color: var(--charcoal);
}

.profile-dropdown__logout:hover {
    background: rgba(29, 29, 31, 0.08);
    color: var(--charcoal);
}

/* Account page: deletion action lives here instead of header dropdown. */
.tb-account-danger {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(193, 56, 93, 0.24);
    background: linear-gradient(180deg, rgba(255, 111, 145, 0.08), rgba(255, 111, 145, 0.03));
}

.tb-account-danger__title {
    margin: 0 0 6px;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a3256;
    font-weight: 700;
}

.tb-account-danger__text {
    margin: 0;
    color: #5c4a52;
    font-size: 0.9rem;
    line-height: 1.5;
}

.tb-account-danger__actions {
    margin-top: 12px;
}

.tb-account-danger__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #ff7a9d, #f25d86);
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-spring), filter var(--t-fast) var(--ease);
}

.tb-account-danger__btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.97);
}


/* ============================================================
   AUTH MODAL OVERLAY + PANEL
   ============================================================ */
body.modal-open { overflow: hidden; }

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}

.auth-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal {
    position: relative;
    background: rgba(252, 252, 252, 0.97);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 24px;
    box-shadow:
        0 20px 64px rgba(0, 0, 0, 0.16),
        0 8px 32px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 600px;
    max-height: calc(100dvh - 40px);     /* never taller than the viewport */
    padding: 20px 24px 0;                /* bottom padding lives on the panel */
    display: flex;
    flex-direction: column;
    overflow: hidden;                    /* clips children, tabs stay pinned */
    transform: scale(0.94) translateY(10px);
    transition: transform var(--t-base) var(--ease-spring);
}

.auth-modal-overlay.is-open .auth-modal {
    transform: scale(1) translateY(0);
}

/* ── Top bar: tabs + close in one row ── */
.auth-modal__topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* ── Tabs ── */
.auth-modal__tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-overlay);
    border-radius: var(--radius-pill);
    padding: 4px;
    flex: 1;                             /* tabs fill available width */
}

/* ── Panel (scrollable body) ── */
.auth-panel {
    flex: 1;
    min-height: 0;                       /* required for flex overflow to work */
    overflow-y: auto;
    padding: 0 8px 28px;
    margin: 0 -8px;
    /* thin custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}

.auth-panel::-webkit-scrollbar { width: 4px; }
.auth-panel::-webkit-scrollbar-track { background: transparent; }
.auth-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }

.auth-modal__tab {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--charcoal-light);
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.auth-modal__tab.is-active {
    background: var(--bg-raised);
    color: var(--charcoal);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Close button ── */
.auth-modal__close {
    flex-shrink: 0;
    background: var(--bg-overlay);
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--charcoal-light);
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.auth-modal__close:hover {
    background: #dcdce0;
    color: var(--charcoal);
}

.auth-modal__close svg { width: 16px; height: 16px; }

/* ── Panel headings ── */
.auth-modal__title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--charcoal);
    margin-bottom: 6px;
    line-height: 1.2;
}

.auth-modal__sub {
    font-size: 0.88rem;
    color: var(--charcoal-light);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ── Back button (forgot password) ── */
.auth-modal__back {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-purple);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0;
    margin-bottom: 18px;
    display: inline-block;
    transition: opacity var(--t-fast) var(--ease);
}

.auth-modal__back:hover { opacity: 0.72; }

/* ── Form fields ── */
.auth-form__field {
    margin-bottom: 14px;
}

.auth-form__field label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}

.auth-form__field input {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--charcoal);
    background: var(--bg-base);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.auth-form__field input::placeholder { color: var(--charcoal-muted); }

.auth-form__field input:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.14);
}

/* ── Password visibility toggle ── */
.auth-form__password-wrap { position: relative; }

.auth-form__password-wrap input { padding-right: 44px; }

.auth-form__eye {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--charcoal-muted);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    transition: color var(--t-fast) var(--ease);
}

.auth-form__eye:hover { color: var(--charcoal-light); }
.auth-form__eye svg { width: 18px; height: 18px; }

/* ── Message (error / success) ── */
.auth-form__message {
    font-size: 0.84rem;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    min-height: 0;
}

.auth-form__message:not(:empty) {
    padding: 10px 14px;
    margin-bottom: 10px;
}

.auth-form__message.is-error {
    background: rgba(255, 59, 48, 0.07);
    color: #b02020;
    border: 1px solid rgba(255, 59, 48, 0.18);
}

.auth-form__message.is-success {
    background: rgba(52, 199, 89, 0.08);
    color: #1a7a35;
    border: 1px solid rgba(52, 199, 89, 0.20);
}

/* ── Submit button ── */
.auth-form__submit {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 6px;
    background: var(--charcoal);
    color: var(--bg-base);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease);
}

.auth-form__submit:hover {
    background: var(--charcoal-mid);
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.14),
                0 0 0 3px rgba(132, 94, 194, 0.18);
}

.auth-form__submit:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

/* ── Forgot password link ── */
.auth-form__forgot {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--charcoal-muted);
    font-size: 0.83rem;
    margin-top: 12px;
    padding: 4px;
    transition: color var(--t-fast) var(--ease);
}

.auth-form__forgot:hover { color: var(--charcoal-light); }

/* ── Terms line ── */
.auth-form__terms {
    font-size: 0.78rem;
    color: var(--charcoal-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.4;
}

.auth-form__terms a { color: var(--c-purple); }
.auth-form__terms a:hover { text-decoration: underline; }


/* ============================================================
   DELETE PROFILE MODAL
   ============================================================ */
.delete-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 12% 18%, rgba(132, 94, 194, 0.18), transparent 45%),
        radial-gradient(circle at 88% 85%, rgba(255, 111, 145, 0.16), transparent 46%),
        rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}

.delete-profile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.delete-profile-modal {
    position: relative;
    width: 100%;
    max-width: 540px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    background: rgba(248, 248, 250, 0.95);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255,255,255,0.74) inset;
    padding: 24px;
    overflow: hidden;
}

.delete-profile-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-purple), var(--c-fuchsia), var(--c-pink));
}

.delete-profile-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-overlay);
    cursor: pointer;
    color: var(--charcoal-light);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.delete-profile-modal__close:hover {
    background: rgba(132, 94, 194, 0.15);
    color: var(--charcoal);
}

.delete-profile-modal__close svg {
    width: 16px;
    height: 16px;
}

.delete-profile-modal__title {
    margin: 0;
    font-size: 1.35rem;
    color: var(--charcoal);
    letter-spacing: -0.02em;
}

.delete-profile-modal__sub {
    margin: 8px 0 14px;
    font-size: 0.9rem;
    color: var(--charcoal-light);
}

.delete-profile-modal__status {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--charcoal);
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 14px;
    white-space: pre-wrap;
}

.delete-profile-modal__status.is-error {
    border-color: rgba(255, 111, 145, 0.4);
    background: rgba(255, 111, 145, 0.12);
    color: #84264b;
}

.delete-profile-modal__label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.delete-profile-modal__reason {
    width: 100%;
    resize: vertical;
    min-height: 92px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border-md);
    background: var(--bg-base);
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--charcoal);
}

.delete-profile-modal__reason:focus {
    outline: none;
    border-color: var(--c-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.14);
}

.delete-profile-modal__actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.delete-profile-modal__btn {
    border: none;
    border-radius: 999px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}

.delete-profile-modal__btn--ghost {
    color: var(--charcoal);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--border);
}

.delete-profile-modal__btn--ghost:hover {
    background: #fff;
    transform: translateY(-1px);
}

.delete-profile-modal__btn--danger {
    color: #fff;
    background: linear-gradient(135deg, #ca4068, #9b3fa6);
    box-shadow: 0 8px 20px rgba(155, 63, 166, 0.28);
}

.delete-profile-modal__btn--danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(155, 63, 166, 0.34);
}

.delete-profile-modal__btn--danger:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .auth-modal { padding: 18px 14px 0; }
    .auth-panel {
        padding: 0 6px 24px;
        margin: 0 -6px;
    }
    .auth-modal__title { font-size: 1.35rem; }

    .delete-profile-overlay {
        align-items: flex-end;
        padding: 10px;
    }

    .delete-profile-modal {
        max-width: none;
        border-radius: 16px;
        padding: 18px;
    }

    .delete-profile-modal__actions {
        flex-direction: column-reverse;
    }

    .delete-profile-modal__btn {
        width: 100%;
    }
}


/* ============================================================
   LOCKED TOOL CARDS
   ============================================================ */
.tool-card-wrap--locked {
    cursor: not-allowed;
    display: inline-flex; /* keeps it tight around the card */
}

.tool-card--locked,
.tool-card--locked:not(:hover) {
    pointer-events: none;
    opacity: 0.48;
    filter: grayscale(55%);
    animation: none !important;
    transform: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
}


/* ============================================================
   T&C CHECKBOX — signup form
   ============================================================ */
.auth-form__field--terms {
    margin-top: 14px;
    margin-bottom: 2px;
}

.auth-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.80rem;
    color: var(--charcoal-muted);
    line-height: 1.45;
    text-align: left;
}

.auth-form__checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--c-purple);
    cursor: pointer;
}

.auth-form__checkbox-label a {
    color: var(--c-purple);
}

.auth-form__checkbox-label a:hover {
    text-decoration: underline;
}

/* ── Register form: side-by-side row ── */
.auth-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Optional label badge ── */
.auth-form__optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--charcoal-muted);
    margin-left: 4px;
}

/* ── Country dropdown ── */
.auth-form__country-wrap {
    position: relative;
}

.auth-form__country-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-input, #fff);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--charcoal);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-fast) var(--ease);
}

.auth-form__country-btn:focus-visible {
    outline: 2px solid var(--c-purple);
    outline-offset: 2px;
}

.auth-form__country-btn:hover {
    border-color: var(--c-purple);
}

.country-flag { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.country-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-chevron {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--charcoal-muted);
    transition: transform var(--t-fast) var(--ease);
}
.auth-form__country-btn[aria-expanded="true"] .country-chevron {
    transform: rotate(180deg);
}

.auth-form__country-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 9000;
    background: var(--bg-raised);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    overflow: hidden;
}

.country-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.country-search-wrap svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--charcoal-muted); }

.country-search {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    color: var(--charcoal);
    font-family: inherit;
}

.country-search::placeholder { color: var(--charcoal-muted); }

.country-list {
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.country-option:hover { background: var(--bg-elevated); }
.co-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.co-name { flex: 1; color: var(--charcoal); }
.co-cur  { font-size: 0.75rem; color: var(--charcoal-muted); font-weight: 500; }

.country-no-results {
    padding: 12px 14px;
    font-size: 0.85rem;
    color: var(--charcoal-muted);
    text-align: center;
}

/* ── Currency hint ── */
.auth-form__currency-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--charcoal-muted);
    line-height: 1.5;
    padding: 6px 10px;
    background: rgba(132,94,194,0.06);
    border-radius: 6px;
    border-left: 3px solid var(--c-purple);
}

/* ── Cancel reason block ── */
.tb-cancel-reason {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.tb-cancel-sorry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.tb-cancel-sorry__icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.tb-cancel-sorry strong {
    display: block;
    font-size: 0.96rem;
    color: var(--charcoal);
    margin-bottom: 3px;
}

.tb-cancel-sorry p {
    font-size: 0.84rem;
    color: var(--charcoal-muted);
    margin: 0;
}

.tb-cancel-reason__label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--charcoal-mid);
    margin-bottom: 8px;
}

.tb-cancel-optional {
    font-weight: 400;
    color: var(--charcoal-muted);
    font-size: 0.78rem;
}

.tb-cancel-reason__textarea {
    width: 100%;
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--charcoal);
    background: var(--bg-raised);
    resize: vertical;
    line-height: 1.55;
    transition: border-color var(--t-fast) var(--ease);
}

.tb-cancel-reason__textarea:focus {
    outline: none;
    border-color: var(--c-purple);
}


/* ============================================================
   POLICY PAGES (Terms, Privacy, Refund)
   ============================================================ */
.policy-page {
    padding: 60px 20px 80px;
    min-height: 60vh;
}

.policy-container {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 52px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.policy-page__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.policy-page__updated {
    font-size: 0.82rem;
    color: var(--charcoal-muted);
    margin-bottom: 6px;
}

.policy-page__operator {
    font-size: 0.90rem;
    color: var(--charcoal-mid);
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    line-height: 1.6;
}

.policy-section {
    margin-bottom: 28px;
}

.policy-section h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.policy-section p {
    font-size: 0.92rem;
    color: var(--charcoal-mid);
    line-height: 1.72;
    margin-bottom: 10px;
}

.policy-section p:last-child {
    margin-bottom: 0;
}

.policy-section ul {
    padding-left: 20px;
    margin-bottom: 10px;
}

.policy-section ul li {
    font-size: 0.92rem;
    color: var(--charcoal-mid);
    line-height: 1.72;
    margin-bottom: 4px;
}

.policy-section a {
    color: var(--c-purple);
    text-decoration: none;
}

.policy-section a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .policy-container {
        padding: 32px 24px;
    }

    .policy-page__title {
        font-size: 1.55rem;
    }
}


/* ============================================================
   SUBSCRIBE BUTTON — header
   ============================================================ */
.btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
    white-space: nowrap;
}

.btn-subscribe:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-subscribe svg {
    flex-shrink: 0;
}


/* ============================================================
   PRICING MODAL
   ============================================================ */
.pricing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
    overflow-y: auto;
}

.pricing-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.pricing-modal {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 26px 24px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    transform: translateY(20px) scale(0.97);
    transition: transform var(--t-base) var(--ease-spring);
    margin: auto 0;
}

.pricing-overlay.is-open .pricing-modal {
    transform: translateY(0) scale(1);
}

.pricing-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    background: var(--bg-overlay);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--charcoal-light);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pricing-modal__close:hover {
    background: var(--border-md);
    color: var(--charcoal);
}

.pricing-modal__close svg {
    width: 16px;
    height: 16px;
}

.pricing-modal__title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.pricing-modal__sub {
    font-size: 0.86rem;
    color: var(--charcoal-muted);
    margin-bottom: 18px;
}

/* ── Billing Toggle ── */
.pricing-toggle {
    display: inline-flex;
    background: var(--bg-overlay);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
    margin-bottom: 18px;
}

.pricing-toggle-wrap {
    text-align: center;
    margin-bottom: 0;
}

.pricing-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--charcoal-light);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.pricing-toggle__btn.is-active {
    background: var(--bg-raised);
    color: var(--charcoal);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    font-weight: 600;
}

.pricing-toggle__badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-green), #6dbf00);
    color: #1a3800;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

/* ── Plan Cards ── */
.pricing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.pricing-card {
    position: relative;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.pricing-card:hover {
    border-color: var(--border-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.pricing-card--featured {
    border-color: var(--c-purple);
    background: linear-gradient(160deg, rgba(132, 94, 194, 0.06) 0%, var(--bg-elevated) 60%);
}

.pricing-card--featured:hover {
    border-color: var(--c-fuchsia);
    box-shadow: 0 4px 24px rgba(132, 94, 194, 0.18);
}

.pricing-card__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    color: #fff;
    font-size: 0.70rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-card__header {
    margin-bottom: 14px;
}

.pricing-card__name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    letter-spacing: -0.01em;
}

.pricing-card__desc {
    display: block;
    font-size: 0.78rem;
    color: var(--charcoal-muted);
    margin-top: 2px;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 6px;
}

.pricing-card__amount {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--charcoal);
}

.pricing-card__per {
    font-size: 0.84rem;
    color: var(--charcoal-muted);
}

.pricing-card__yearly-note {
    font-size: 0.75rem;
    color: var(--charcoal-muted);
    margin-bottom: 14px;
    margin-top: -2px;
}

.pricing-card__features {
    list-style: none;
    margin: 14px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex-grow: 1;
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--charcoal-mid);
    line-height: 1.4;
}

.pricing-card__features li svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--c-purple);
}

.pricing-card__cta {
    display: block;
    width: 100%;
    padding: 11px 0;
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--charcoal);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    margin-top: auto;
}

.pricing-card__cta:hover {
    background: var(--bg-overlay);
    border-color: var(--charcoal-light);
}

.pricing-card__cta--featured {
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    border-color: transparent;
    color: #fff;
}

.pricing-card__cta--featured:hover {
    opacity: 0.88;
    background: linear-gradient(135deg, var(--c-purple), var(--c-fuchsia));
    border-color: transparent;
    color: #fff;
}

/* ── Coming Soon Notice ── */
.pricing-coming-soon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(132, 94, 194, 0.08), rgba(214, 93, 177, 0.08));
    border: 1px solid rgba(132, 94, 194, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.pricing-coming-soon svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--c-purple);
}

.pricing-coming-soon strong {
    display: block;
    font-size: 0.92rem;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.pricing-coming-soon p {
    font-size: 0.84rem;
    color: var(--charcoal-mid);
    line-height: 1.5;
    margin: 0;
}

.pricing-modal__note {
    font-size: 0.75rem;
    color: var(--charcoal-muted);
    text-align: center;
    margin-top: 8px;
}

.pricing-modal__currency-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.80rem;
    color: var(--charcoal-mid);
    background: #fff;
    border: 1.5px solid rgba(132, 94, 194, 0.22);
    border-radius: 10px;
    text-align: left;
    padding: 10px 14px;
    margin: 10px 0 4px;
    line-height: 1.55;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.pricing-modal__currency-hint[hidden] { display: none; }

.pricing-modal__currency-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #845ec2;
}

.pricing-card__conv {
    align-self: flex-start;
    font-size: 0.79rem;
    font-weight: 600;
    color: #5a3d99;
    background: rgba(132, 94, 194, 0.10);
    border: 1px solid rgba(132, 94, 194, 0.22);
    border-radius: 100px;
    padding: 3px 12px;
    margin: 6px 0 2px;
    letter-spacing: 0.01em;
}
.pricing-card__conv[hidden] { display: none; }

/* ── Promo Code ── */
.pricing-promo {
    margin-bottom: 14px;
    text-align: center;
}

.pricing-promo__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.80rem;
    color: var(--charcoal-muted);
    padding: 0;
    transition: color var(--t-fast) var(--ease);
}

.pricing-promo__toggle:hover {
    color: var(--c-purple);
}

.pricing-promo__toggle svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pricing-promo__row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.pricing-promo__input {
    flex: 1;
    padding: 9px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--charcoal);
    background: var(--bg-base);
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.pricing-promo__input::placeholder {
    color: var(--charcoal-muted);
    text-transform: none;
    letter-spacing: normal;
}

.pricing-promo__input:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.14);
}

.pricing-promo__apply {
    padding: 9px 18px;
    background: var(--charcoal);
    color: var(--bg-base);
    font-size: 0.84rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease);
}

.pricing-promo__apply:hover {
    background: var(--charcoal-mid);
}

.pricing-promo__msg {
    font-size: 0.78rem;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
}

.pricing-promo__msg.is-error {
    background: rgba(255, 59, 48, 0.07);
    color: #b02020;
    border: 1px solid rgba(255, 59, 48, 0.18);
}

.pricing-promo__msg.is-success {
    background: rgba(52, 199, 89, 0.08);
    color: #1a7a35;
    border: 1px solid rgba(52, 199, 89, 0.20);
}

/* ── Discounted price display ── */
.pricing-card__amount .price-original {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--charcoal-muted);
    text-decoration: line-through;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 1px;
}

.pricing-card__amount .price-discounted {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #1a7a35;
    line-height: 1;
}

/* ── Promo acknowledgment overlay ── */
.promo-ack-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.promo-ack-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* ═══════════════════════════════════════════════
   ORG SETUP MODAL
═══════════════════════════════════════════════ */
.org-setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.org-setup-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.org-setup-modal {
    background: #fff;
    border-radius: 20px;
    padding: 32px 30px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.org-setup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
}
.org-setup-header svg {
    color: #845ec2;
    flex-shrink: 0;
}
.org-setup-intro {
    font-size: 0.93rem;
    color: #555;
    line-height: 1.55;
    margin: 0 0 18px;
}
.org-setup-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.org-setup-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1a1a2e;
    outline: none;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.org-setup-field input:focus {
    border-color: #845ec2;
    box-shadow: 0 0 0 3px rgba(132,94,194,0.12);
}
.org-setup-msg {
    font-size: 0.85rem;
    min-height: 20px;
    margin-top: 8px;
}
.org-setup-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}
.org-setup-skip {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color 0.15s;
}
.org-setup-skip:hover { color: #444; }
.org-setup-save {
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
}
.org-setup-save:hover { opacity: 0.9; transform: translateY(-1px); }
.org-setup-save:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════
   GROUP ADMIN PAGE
═══════════════════════════════════════════════ */
.group-admin-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}
.group-admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.group-admin-header__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
    line-height: 1.2;
}
.group-admin-header__sub {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}
.ga-seat-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   DOWNLOAD SUCCESS MODAL
═══════════════════════════════════════════════ */
.tb-dl-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.tb-dl-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.tb-dl-modal {
    background: #fff;
    border-radius: 22px;
    padding: 36px 32px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}
.tb-dl-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a8e000, #6dbf00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.tb-dl-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
    line-height: 1.2;
}
.tb-dl-body {
    width: 100%;
    margin-bottom: 20px;
}
.tb-dl-msg {
    font-size: 0.92rem;
    color: #444;
    line-height: 1.6;
    margin: 0 0 10px;
}
.tb-dl-hint {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 14px;
}
.tb-dl-tools {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.tb-dl-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid #e0d4f8;
    background: #f9f5ff;
    color: #845ec2;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.tb-dl-tool-btn:hover {
    background: #f0e8ff;
    border-color: #c3a0f0;
    transform: translateY(-1px);
    color: #6a3faf;
}
.tb-dl-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tb-dl-btn {
    flex: 1;
    min-width: 130px;
    max-width: 200px;
    padding: 11px 20px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.12s;
    border: none;
}
.tb-dl-btn--primary {
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
}
.tb-dl-btn--secondary {
    background: transparent;
    border: 1.5px solid #ddd;
    color: #555;
}
.tb-dl-btn:hover { opacity: 0.88; transform: translateY(-1px); color: inherit; }
.tb-dl-btn--primary:hover { color: #fff; }

/* ═══════════════════════════════════════════════
   DEV TOOLBAR (admin-only, home page)
═══════════════════════════════════════════════ */
.dev-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(20, 20, 30, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1.5px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}
.dev-toolbar__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 4px;
    flex-shrink: 0;
}
.dev-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.dev-toolbar__btn:hover { opacity: 0.85; transform: translateY(-1px); color: #fff; }
.dev-toolbar__btn--primary {
    background: linear-gradient(135deg, #845ec2, #d65db1);
    border-color: transparent;
}
.dev-toolbar__btn--danger {
    background: rgba(214, 45, 45, 0.7);
    border-color: transparent;
}

.ga-dev-banner {
    background: #fffbe6;
    border: 1.5px solid #f0d060;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #7a6000;
    margin-bottom: 24px;
    line-height: 1.5;
}

.ga-notice {
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1.5px solid transparent;
}
.ga-notice--info {
    background: #edf6ff;
    border-color: #b8dfff;
    color: #1f4f7a;
}
.ga-notice--success {
    background: #eefbf2;
    border-color: #bfe6cb;
    color: #1f6238;
}
.ga-notice--warning {
    background: #fff8e8;
    border-color: #f1d49a;
    color: #7a590f;
}

/* Seat list */
.ga-seats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.ga-seat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    background: #fff;
    transition: background 0.15s, box-shadow 0.15s;
}
.ga-seat--owner {
    border-color: #e0d4f8;
    background: #f9f5ff;
}
.ga-seat--active {
    border-color: #c8ecd4;
    background: #f4fbf7;
}
.ga-seat--pending {
    border-color: #fdecc3;
    background: #fffbf0;
}
.ga-seat--empty {
    border: 1.5px dashed #ccc;
    background: #fafafa;
}

/* Avatar circle */
.ga-seat__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ga-seat__avatar--empty,
.ga-seat__avatar--pending {
    background: linear-gradient(135deg, #c9c9c9, #aaa);
}

/* Info text */
.ga-seat__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ga-seat__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ga-seat__email {
    font-size: 0.8rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ga-seat__empty-label {
    font-size: 0.88rem;
    color: #aaa;
    font-style: italic;
}

/* State tags */
.ga-seat__tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.ga-seat__tag--owner  { background: #e9deff; color: #5e35b1; }
.ga-seat__tag--active { background: #d4f1df; color: #1e6e3e; }
.ga-seat__tag--pending { background: #fff0c2; color: #8a6100; }

/* Remove / revoke icon buttons */
.ga-seat__remove,
.ga-seat__revoke {
    background: transparent;
    border: none;
    color: #bbb;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.ga-seat__remove:hover,
.ga-seat__revoke:hover {
    color: #d62d2d;
    background: rgba(214,45,45,0.08);
}
.ga-seat__remove:disabled,
.ga-seat__revoke:disabled { opacity: 0.4; cursor: not-allowed; }

/* Invite CTA button on empty seat */
.ga-seat__invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.12s;
}
.ga-seat__invite-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* Invite form card */
.ga-invite-form {
    background: #fff;
    border: 1.5px solid #e5e5ea;
    border-radius: 16px;
    padding: 24px 20px 20px;
    margin-top: 8px;
}
.ga-invite-form__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}
.ga-invite-form__sub {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}
.ga-invite-form__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ga-invite-form__input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.93rem;
    outline: none;
    transition: border-color 0.18s;
    color: #1a1a2e;
}
.ga-invite-form__input:focus {
    border-color: #845ec2;
    box-shadow: 0 0 0 3px rgba(132,94,194,0.12);
}
.ga-invite-form__send {
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.ga-invite-form__send:hover { opacity: 0.88; }
.ga-invite-form__send:disabled { opacity: 0.5; cursor: not-allowed; }
.ga-invite-form__msg {
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 20px;
}
.ga-invite-form__msg--error   { color: #d62d2d; }
.ga-invite-form__msg--success { color: #1e6e3e; }
.ga-invite-form__dev-link {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fffbea;
    border: 1px solid #f0d060;
    border-radius: 10px;
    font-size: 0.82rem;
}
.ga-invite-form__dev-link p { margin: 0 0 6px; color: #7a6000; }
.ga-invite-form__dev-link a { color: #845ec2; word-break: break-all; }

/* ═══════════════════════════════════════════════
   JOIN TEAM PAGE
═══════════════════════════════════════════════ */
.join-team-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 40px 20px;
}
.join-team-card {
    background: #fff;
    border: 1.5px solid #e5e5ea;
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.join-team-card--error {
    border-color: #fad4d4;
    background: #fff8f8;
}
.join-team-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #845ec2, #d65db1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    color: #fff;
}
.join-team-card--error .join-team-icon {
    background: linear-gradient(135deg, #e55, #c33);
}
.join-team-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}
.join-team-card__sub {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.55;
    margin: 0 0 24px;
}
.join-team-login,
.join-team-register {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.join-team-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.join-team-row .join-team-field { flex: 1; min-width: 120px; }
.join-team-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.join-team-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
}
.join-team-field__hint {
    font-weight: 400;
    color: #999;
}
.join-team-field input {
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 0.93rem;
    color: #1a1a2e;
    outline: none;
    transition: border-color 0.18s;
    background: #fff;
}
.join-team-field input[readonly] {
    background: #f5f5f7;
    color: #888;
    cursor: default;
}
.join-team-field input:focus {
    border-color: #845ec2;
    box-shadow: 0 0 0 3px rgba(132,94,194,0.12);
}
.join-team-msg {
    font-size: 0.85rem;
    min-height: 18px;
}
.join-team-msg--error   { color: #d62d2d; }
.join-team-msg--success { color: #1e6e3e; }
.join-team-card__btn {
    display: inline-block;
    background: linear-gradient(135deg, #845ec2, #d65db1);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 26px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.12s;
    align-self: stretch;
    text-align: center;
    margin-top: 4px;
}
.join-team-card__btn:hover { opacity: 0.88; transform: translateY(-1px); }
.join-team-card__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════
   HERO ORG BADGE (home page)
═══════════════════════════════════════════════ */
.hero-org-badge {
    font-size: 0.9rem;
    color: #666;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hero-org-badge strong { color: #1a1a2e; }
.hero-org-badge__link {
    color: #845ec2;
    text-decoration: none;
    font-weight: 600;
}
.hero-org-badge__link:hover { text-decoration: underline; }

.promo-ack-modal {
    background: #ffffff;
    border-radius: 20px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.22);
    overflow: hidden;                        /* clips header radius */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 32px);         /* never taller than the screen */
    transform: scale(0.95) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-ack-overlay.is-open .promo-ack-modal {
    transform: scale(1) translateY(0);
}

/* ── Gradient header bar ── */
.promo-ack-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--c-purple, #845ec2), var(--c-fuchsia, #d65db1));
    color: #fff;
    flex-shrink: 0;
}

.promo-ack-header svg {
    flex-shrink: 0;
    opacity: 0.92;
}

.promo-ack-header span {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ── Scrollable body ── */
.promo-ack-body {
    padding: 22px 22px 8px;
    overflow-y: auto;
    flex: 1;
}

/* ── Code badge ── */
.promo-ack-code-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.promo-ack-code-label-text {
    font-size: 0.83rem;
    color: #6e6e73;
}

.promo-ack-code-pill {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(135deg, rgba(132,94,194,0.12), rgba(214,93,177,0.12));
    border: 1.5px solid rgba(132, 94, 194, 0.35);
    border-radius: 100px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-purple, #845ec2);
    text-transform: uppercase;
}

/* ── Terms list ── */
.promo-ack-terms {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 16px;
    background: #f5f5f7;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.promo-ack-terms li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.855rem;
    color: #3a3a3c;
    line-height: 1.55;
}

.promo-ack-terms li svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin-top: 3px;
    color: var(--c-purple, #845ec2);
}

.promo-ack-terms li span {
    display: block;
}

.promo-ack-terms li strong {
    color: #1d1d1f;
}

/* ── Checkbox label ── */
.promo-ack-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.855rem;
    color: #3a3a3c;
    line-height: 1.55;
    cursor: pointer;
    padding: 13px 15px;
    background: rgba(132, 94, 194, 0.06);
    border: 1.5px solid rgba(132, 94, 194, 0.2);
    border-radius: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.promo-ack-check:has(input:checked) {
    background: rgba(132, 94, 194, 0.11);
    border-color: var(--c-purple, #845ec2);
}

.promo-ack-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: var(--c-purple, #845ec2);
    cursor: pointer;
}

/* ── Action buttons — always pinned to bottom ── */
.promo-ack-actions {
    display: flex;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e5ea;
    flex-shrink: 0;
    background: #ffffff;
}

.promo-ack-cancel {
    flex: 1;
    padding: 11px 0;
    background: transparent;
    border: 1.5px solid #d1d1d6;
    border-radius: 100px;
    color: #6e6e73;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.promo-ack-cancel:hover {
    background: #f5f5f7;
    border-color: #aeaeb2;
}

.promo-ack-confirm {
    flex: 2;
    padding: 11px 0;
    background: linear-gradient(135deg, var(--c-purple, #845ec2), var(--c-fuchsia, #d65db1));
    border: none;
    border-radius: 100px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.promo-ack-confirm:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
}

.promo-ack-confirm:not(:disabled):hover {
    opacity: 0.88;
    transform: scale(1.02) translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .pricing-overlay {
        padding: 10px;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-modal {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .pricing-modal__title {
        font-size: 1.15rem;
    }

    .pricing-card__badge {
        top: -10px;
    }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.contact-page {
    padding: 56px 20px 88px;
    min-height: 60vh;
}

.contact-container {
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Hero ──────────────────────────────────────────────────── */
.contact-hero {
    text-align: center;
    margin-bottom: 48px;
}

/* Frosted glass panel matching the box-hero style */
.contact-hero__glass {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    padding: 28px 48px 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.70) inset,
        0 8px 40px rgba(0, 0, 0, 0.08);
    max-width: 600px;
}

.contact-hero__badge {
    display: none;
}

.contact-hero__title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
    display: inline-block;
    background: linear-gradient(90deg,
        var(--c-purple),
        var(--c-fuchsia),
        var(--c-pink),
        var(--c-coral),
        var(--c-orange),
        var(--c-yellow),
        var(--c-green),
        var(--c-yellow),
        var(--c-orange),
        var(--c-coral),
        var(--c-pink),
        var(--c-fuchsia),
        var(--c-purple)
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: box-grad-shift 96s linear infinite;
}

.contact-hero__sub {
    font-size: 1rem;
    color: var(--charcoal-light);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Two-column layout ─────────────────────────────────────── */
.contact-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Reason cards (left column) ────────────────────────────── */
.contact-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-reason-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px;
    transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.contact-reason-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    border-color: rgba(132, 94, 194, 0.4);
}

.contact-reason-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(132, 94, 194, 0.10);
    border: 1px solid rgba(132, 94, 194, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #845ec2;
}

.contact-reason-card__icon svg {
    width: 18px;
    height: 18px;
}

.contact-reason-card__body h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.contact-reason-card__body p {
    font-size: 0.82rem;
    color: var(--charcoal-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Direct contact info below reason cards ────────────────── */
.contact-direct-info {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px;
    margin-top: 4px;
}

.contact-direct-info__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--charcoal-muted);
    margin-bottom: 8px;
}

.contact-direct-info__email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0071E3;
    text-decoration: none;
    transition: opacity var(--t-fast) var(--ease);
}

.contact-direct-info__email:hover {
    opacity: 0.75;
}

/* ── Social icons ──────────────────────────────────────────── */
.contact-socials {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.contact-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-md);
    color: var(--charcoal-light);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}

.contact-social-link--instagram:hover { color: #e1306c; border-color: #e1306c; background: rgba(225,48,108,0.06); }
.contact-social-link--facebook:hover  { color: #1877f2; border-color: #1877f2; background: rgba(24,119,242,0.06); }
.contact-social-link--youtube:hover   { color: #ff0000; border-color: #ff0000; background: rgba(255,0,0,0.06); }

/* Contact page requirement: only Instagram should be shown */
.contact-page .contact-social-link--facebook,
.contact-page .contact-social-link--youtube {
    display: none !important;
}

/* ── Teams reason card accent ──────────────────────────────── */
.contact-reason-card__icon--teams {
    background: rgba(98, 100, 167, 0.10);
    border-color: rgba(98, 100, 167, 0.22);
    color: #6264A7;
}
.contact-reason-card--teams:hover {
    border-color: rgba(98, 100, 167, 0.40);
}

/* ── Contact aside social section ─────────────────────────── */
.contact-aside-social {
    margin-top: 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
}
.contact-aside-social__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--charcoal-muted);
    margin: 0 0 10px;
}

/* ── Instagram banner (top of aside) ──────────────────────── */
.contact-instagram-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(225, 48, 108, 0.28);
    background: linear-gradient(120deg, rgba(253,244,249,0.9) 0%, rgba(255,248,240,0.9) 100%);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease-spring);
    margin-bottom: 0;
}
.contact-instagram-banner:hover {
    border-color: rgba(225, 48, 108, 0.55);
    box-shadow: 0 4px 18px rgba(225, 48, 108, 0.14);
    transform: translateY(-2px);
}
.contact-instagram-banner__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(188, 24, 136, 0.25);
}
.contact-instagram-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.contact-instagram-banner__handle {
    font-size: 0.88rem;
    font-weight: 700;
    color: #C13584;
    line-height: 1.2;
}
.contact-instagram-banner__cta {
    font-size: 0.76rem;
    color: var(--charcoal-muted);
    line-height: 1.3;
}
.contact-instagram-banner__arrow {
    flex-shrink: 0;
    color: #C13584;
    opacity: 0.6;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.contact-instagram-banner:hover .contact-instagram-banner__arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* ── Field-level validation errors ────────────────────────── */
.cf-input-wrap--error input,
.cf-input-wrap--error textarea {
    border-color: #F87171 !important;
    background: #FFF5F5 !important;
}
.cf-field-error {
    font-size: 0.78rem;
    color: #DC2626;
    margin-top: 5px;
    display: none;
}
.cf-field-error.is-visible {
    display: block;
}

/* ── Form card (right column) ──────────────────────────────── */
.contact-form-wrap {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
    /* Purple top accent bar */
    border-top: 3px solid #845ec2;
}

.contact-form-wrap__header {
    padding: 28px 36px 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 0;
}

.contact-form-wrap__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.contact-form-wrap__sub {
    font-size: 0.86rem;
    color: var(--charcoal-light);
    margin: 0;
}

.contact-form {
    padding: 24px 36px 32px;
}

/* ── Form field base ───────────────────────────────────────── */
.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Labels ────────────────────────────────────────────────── */
.cf-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--charcoal-mid);
    letter-spacing: 0.1px;
}

.cf-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cf-char-count {
    font-size: 0.75rem;
    color: var(--charcoal-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast) var(--ease);
}

.cf-char-count--warn {
    color: #d65db1;
    font-weight: 600;
}

/* ── Topic chips ───────────────────────────────────────────── */
.cf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.cf-chip-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-md);
    background: var(--bg-base);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--charcoal-light);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
    user-select: none;
}

.cf-chip:hover {
    border-color: #845ec2;
    color: var(--charcoal);
    background: rgba(132, 94, 194, 0.06);
}

.cf-chip-radio:checked + .cf-chip {
    border-color: #845ec2;
    background: rgba(132, 94, 194, 0.12);
    color: #5a3d99;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.18);
}

/* ── Input wrapper (holds icon + input) ────────────────────── */
.cf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cf-input-wrap--textarea {
    align-items: flex-start;
}

.cf-input-icon {
    position: absolute;
    left: 13px;
    color: var(--charcoal-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: color var(--t-fast) var(--ease);
}

.cf-input-icon--textarea {
    top: 13px;
}

.cf-input-wrap input,
.cf-input-wrap select,
.cf-input-wrap textarea {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--charcoal);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
    appearance: none;
    -webkit-appearance: none;
}

.cf-input-wrap textarea {
    resize: vertical;
    min-height: 148px;
    line-height: 1.6;
    padding-top: 12px;
}

/* Icon becomes purple on focus */
.cf-input-wrap:focus-within .cf-input-icon {
    color: #845ec2;
}

.cf-input-wrap input:focus,
.cf-input-wrap select:focus,
.cf-input-wrap textarea:focus {
    outline: none;
    border-color: #845ec2;
    background: #faf8ff;
    box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.15);
}

/* ── Status message ────────────────────────────────────────── */
.contact-form__message {
    min-height: 0;
    font-size: 0.875rem;
    border-radius: 10px;
    transition: all var(--t-fast) var(--ease);
}

.contact-form__message:not(:empty) {
    padding: 12px 16px;
    margin-bottom: 16px;
}

.contact-form__message.is-error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
}

.contact-form__message.is-success {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #166534;
}

/* ── Submit button ─────────────────────────────────────────── */
.contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #845ec2 0%, #d65db1 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease);
    box-shadow: 0 4px 16px rgba(132, 94, 194, 0.28);
    letter-spacing: 0.1px;
}

.contact-form__submit:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(132, 94, 194, 0.38);
}

.contact-form__submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(132, 94, 194, 0.22);
}

.contact-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Contact success popup ────────────────────────────────── */
.contact-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(29, 29, 31, 0.58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease);
}

.contact-success-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.contact-success-modal {
    position: relative;
    width: min(460px, 100%);
    padding: 28px 26px 24px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
    border: 1px solid rgba(255,255,255,0.74);
    box-shadow:
        0 28px 60px rgba(0,0,0,0.24),
        0 1px 0 rgba(255,255,255,0.78) inset;
    text-align: center;
}

.contact-success-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    color: var(--charcoal-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-spring),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.contact-success-modal__close:hover,
.contact-success-modal__close:focus-visible {
    transform: scale(1.05);
    color: var(--charcoal);
    border-color: rgba(132, 94, 194, 0.44);
    outline: none;
}

.contact-success-modal__close svg {
    width: 17px;
    height: 17px;
}

.contact-success-modal__icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(240,253,244,0.92));
    box-shadow:
        0 0 0 8px rgba(34,197,94,0.10),
        0 16px 28px rgba(34,197,94,0.16);
}

.contact-success-modal__icon svg {
    width: 34px;
    height: 34px;
}

.contact-success-modal__title {
    margin: 0 0 10px;
    color: var(--charcoal);
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    letter-spacing: -0.02em;
}

.contact-success-modal__text {
    margin: 0;
    color: var(--charcoal-light);
    font-size: 0.97rem;
    line-height: 1.6;
}

.contact-success-modal__btn {
    margin-top: 18px;
    min-width: 160px;
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    background: linear-gradient(135deg, #845ec2 0%, #d65db1 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(132, 94, 194, 0.26);
    transition: transform var(--t-fast) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease),
                opacity var(--t-fast) var(--ease);
}

.contact-success-modal__btn:hover,
.contact-success-modal__btn:focus-visible {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(132, 94, 194, 0.32);
    outline: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-reasons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .contact-direct-info {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .contact-hero__glass {
        padding: 22px 24px 20px;
        border-radius: 20px;
    }

    .contact-reasons {
        grid-template-columns: 1fr;
    }

    .contact-form-wrap__header,
    .contact-form {
        padding-left: 22px;
        padding-right: 22px;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
    }

    .cf-chips {
        gap: 6px;
    }

    .cf-chip {
        padding: 7px 13px;
        font-size: 0.81rem;
    }

    .contact-hero__title {
        font-size: 1.7rem;
    }

    .contact-success-overlay {
        padding: 14px;
    }

    .contact-success-modal {
        padding: 24px 18px 18px;
        border-radius: 22px;
    }
}

/* ============================================================
   Freemium / Subscribe Notice  (shared across all tools)
============================================================ */

.tb-freemium-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #9A3412;
    line-height: 1.5;
}

.tb-freemium-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #EA580C;
}

.tb-freemium-notice a {
    color: #C2410C;
    font-weight: 600;
    text-decoration: underline;
}

.tb-freemium-notice a:hover {
    color: #9A3412;
}

/* ============================================================
   Freemium Banner  (friendly notice inside preview panels)
============================================================ */

.tb-freemium-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1.5px solid #FCD34D;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    color: #78350F;
    line-height: 1.55;
}

.tb-freemium-banner__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.tb-freemium-banner a {
    color: #B45309;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tb-freemium-banner a:hover {
    color: #78350F;
}

/* ============================================================
   Subscribe Popup  (shared across Certificate, Timetable, PDF)
============================================================ */

.tb-sub-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.60);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: tb-fade-in 0.18s ease;
}

@keyframes tb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tb-sub-modal {
    background: #fff;
    border-radius: 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
    position: relative;
    overflow: hidden;
    animation: tb-slide-up 0.24s cubic-bezier(0.34, 1.44, 0.64, 1);
}

@keyframes tb-slide-up {
    from { transform: translateY(32px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Close button ── */
.tb-sub-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255,255,255,0.25);
    border: none;
    font-size: 1.25rem;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 8px;
    line-height: 1;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
}
.tb-sub-close:hover {
    background: rgba(255,255,255,0.40);
    color: #fff;
}

/* ── Hero band (gradient top section with face + headline) ── */
.tb-sub-hero {
    background: linear-gradient(135deg, #845ec2 0%, #c94b8a 60%, #ff6f91 100%);
    padding: 36px 32px 28px;
    text-align: center;
}

.tb-sub-hero__face {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.tb-sub-hero__face svg {
    width: 80px;
    height: 80px;
    display: block;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.25));
}

.tb-sub-hero__title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.tb-sub-hero__sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.55;
}

/* ── Body (perks list + buttons) ── */
.tb-sub-body {
    padding: 24px 28px 28px;
}

.tb-sub-perks {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.tb-sub-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

.tb-sub-perks li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Subscribe button ── */
.tb-sub-btn {
    display: block;
    background: linear-gradient(135deg, #845ec2 0%, #c94b8a 60%, #ff6f91 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.025rem;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 18px rgba(201, 75, 138, 0.40);
}
.tb-sub-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(201, 75, 138, 0.50);
    color: #fff !important;
}
.tb-sub-btn:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* ── Already subscribed ghost button ── */
.tb-sub-already {
    display: block;
    width: 100%;
    background: none;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.815rem;
    color: #6B7280;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-align: center;
    box-sizing: border-box;
}
.tb-sub-already:hover {
    border-color: #845ec2;
    color: #845ec2;
    background: #FAF5FF;
}
.tb-sub-already:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .tb-sub-hero { padding: 28px 20px 22px; }
    .tb-sub-body  { padding: 18px 18px 22px; }
    .tb-sub-hero__title { font-size: 1.2rem; }
}