/* =======================================================================
   Trixloop — Shared Design System
   Used by: index-v4.html, privacy-policy.html
   Breakpoints:
     Mobile  : ≤ 599 px  (base styles, no @media needed)
     Tablet  : 600 – 1023 px
     Laptop  : 1024 – 1439 px  (covers 1280, 1366, 1440 laptop widths)
     Desktop : ≥ 1440 px (covers 1440 HD, 1536, 1680, 1920+)
   Font scale:
     Mobile → Tablet → Laptop → Desktop
   ======================================================================= */


/* -----------------------------------------------------------------------
   1. RESET & BASE
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #eceefb;
    color: #2a2545;
    font-family: Nunito, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    font-size: 15px;
    line-height: 1.6;
}

a {
    color: #4a3ab5;
    text-decoration: none;
}

a:hover {
    color: #0a6f66;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* -----------------------------------------------------------------------
   2. COLOUR TOKENS
   ----------------------------------------------------------------------- */
:root {
    --color-ink: #241f42;
    --color-body: #2a2545;
    --color-muted: #5b5677;
    --color-subtle: #524d6b;
    --color-faint: #8a86a0;
    --color-surface: #f7f8ff;
    --color-bg: #eceefb;
    --color-card: #eef0fb;
    --color-purple-light: #e4e1f4;
    --color-purple-mid: #c9c4ff;
    --color-purple: #4a3ab5;
    --color-teal-light: #a9ece5;
    --color-teal: #0a6f66;
    --color-teal-glow: #10c0b0;
    --color-blue-light: #bcd9f2;
    --color-danger: #c0392b;
    --color-danger-dark: #a53324;
    --color-nav-text: #4c465f;
}


/* -----------------------------------------------------------------------
   3. TYPOGRAPHY — base (mobile, ≤599px)
   ----------------------------------------------------------------------- */
.tl-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tl-eyebrow--purple {
    color: var(--color-purple);
}

.tl-eyebrow--teal {
    color: var(--color-teal);
}

.tl-h1 {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 900;
    color: var(--color-ink);
}

.tl-h2 {
    margin: 14px 0 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 900;
    color: var(--color-ink);
}

.tl-h3 {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: var(--color-ink);
}

.tl-h3-card {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-ink);
}

.tl-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-subtle);
}

.tl-small {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
}

.tl-stat-num {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: var(--color-ink);
}

.tl-price-num {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: var(--color-ink);
}


/* -----------------------------------------------------------------------
   4. ANIMATIONS & REVEALS
   ----------------------------------------------------------------------- */
@keyframes tl-fly {
    0% {
        transform: translate(0, 0) scale(0.72);
        opacity: 0;
    }

    10% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    62% {
        opacity: 1;
    }

    88% {
        transform: translate(calc(var(--dx) * 0.92), calc(var(--dy) * 0.92)) scale(0.42);
        opacity: 0.55;
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.16);
        opacity: 0;
    }
}

@keyframes tl-absorb {

    0%,
    52% {
        opacity: 0.07;
        transform: scale(1);
    }

    82% {
        opacity: 0.26;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.07;
        transform: scale(1);
    }
}

@keyframes tl-ring {

    0%,
    60% {
        opacity: 0;
        transform: scale(0.82);
    }

    84% {
        opacity: 0.5;
        transform: scale(1.12);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes tl-stage {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    22% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes tl-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 192, 176, 0.55);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 26px rgba(16, 192, 176, 0);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px) scale(0.988);
    transition: opacity .6s ease, transform .72s cubic-bezier(.16, .8, .28, 1);
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

.tl-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.tl-head {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #10c0b0;
    box-shadow: 0 0 0 6px rgba(16, 192, 176, 0.18), 6px 8px 16px -6px rgba(10, 111, 102, 0.6);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 1;
}

.tl-bubble {
    opacity: 0.65;
}

[data-endpoint].is-in {
    animation: tl-dot 1.4s ease-out .25s 1 both;
}


/* -----------------------------------------------------------------------
   5. INBOX PILL
   ----------------------------------------------------------------------- */
.tl-pill {
    position: relative;
    display: inline-flex;
    margin-left: auto;
    flex-shrink: 0;
}

.tl-pill .tl-size {
    visibility: hidden;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.tl-pill .tl-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    animation: tl-stage 6s linear infinite both;
}


/* -----------------------------------------------------------------------
   6. CARDS & SECTIONS
   ----------------------------------------------------------------------- */
/* Standard light neumorphic card (used for stats, features, FAQ, content blocks) */
.tl-card {
    padding: 34px;
    border-radius: 34px;
    background: var(--color-surface);
    box-shadow: 16px 20px 40px -20px rgba(42, 37, 69, 0.32), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1);
}

/* Privacy policy document table of contents card */
.tl-toc-card {
    padding: 28px 30px;
    border-radius: 32px;
    background: var(--color-surface);
    box-shadow: 16px 20px 40px -20px rgba(42, 37, 69, 0.32), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1);
}

/* Page headers (Legal, Privacy Policy page) */
.tl-page-header {
    padding: 56px 0 32px;
}

/* Privacy policy articles grid container */
.tl-policy-article {
    padding: 48px 0 56px;
    display: grid;
    gap: 28px;
}

/* Feature item card (extends td-card with transition) */
.tl-feature-card {
    transition: opacity .6s ease, transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
    flex: 0 1 calc(33.333% - 14px);
    min-width: 280px;
}

.tl-feature-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 900;
}

.tl-feature-title {
    margin: 20px 0 0;
    font-size: 22px;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #241f42
}

.tl-feature-body {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: #524d6b
}

/* Stat card (smaller padding) */
.tl-stat-card {
    padding: 26px 28px;
    border-radius: 30px;
    background: var(--color-surface);
    box-shadow: 14px 18px 36px -18px rgba(42, 37, 69, 0.32), inset -6px -6px 14px rgba(255, 255, 255, 0.95), inset 6px 6px 14px rgba(74, 58, 181, 0.1);
}

.tl-stat-card-title {
    margin: 0;
    font-size: clamp(30px, 2.2vw, 38px);
    font-weight: 900;
    letter-spacing: -0.03em
}

.tl-stat-body {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 600;
    color: #5b5677
}

.tl-title-cap {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a6f66
}


/* Inbox widget wrapper card */
.tl-inbox-widget-card {
    padding: 24px;
    border-radius: 38px;
    background: var(--color-surface);
    box-shadow: 20px 26px 50px -22px rgba(42, 37, 69, 0.34), inset -8px -8px 18px rgba(255, 255, 255, 0.95), inset 8px 8px 18px rgba(74, 58, 181, 0.1);
}

/* Pricing box / tiers */
.tl-pricing-card {
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Growth featured pricing box */
.tl-pricing-growth-card {
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 34px;
    border-radius: 34px;
    background: var(--color-teal);
    color: #fff;
    box-shadow: 20px 26px 48px -20px rgba(10, 111, 102, 0.65), inset -8px -8px 18px rgba(0, 0, 0, 0.22), inset 8px 8px 18px rgba(255, 255, 255, 0.22);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tl-pricing-card>a,
.tl-pricing-growth-card>a {
    margin-top: auto !important;
}

/* FAQ single question card */
.tl-faq-card {
    transition: opacity .6s ease, transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
    padding: 30px 34px;
    border-radius: 32px;
    background: var(--color-surface);
    box-shadow: 16px 20px 40px -20px rgba(42, 37, 69, 0.32), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1);
    cursor: pointer;
}

.tl-faq-icon {
    font-size: 22px;
    color: #0a6f66;
    margin-left: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
    font-weight: bold;
}

.tl-faq-title {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: #241f42;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tl-faq-answer {
    margin: 0;
    font-size: 16px;
    /* line-height: 1.6; */
    /* color: #524d6b; */
    /* overflow: hidden; */
    transition: max-height 0.3s ease, margin-top 0.3s ease;
}

.tl-inbox-card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px 14px 54px;
    border-radius: 24px;
    background: var(--color-card);
    box-shadow: inset 6px 6px 14px rgba(74, 58, 181, 0.12), inset -6px -6px 14px rgba(255, 255, 255, 0.95);
}

.tl-inbox-card::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dot-color, #c9c4ff);
    box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.12), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
}

.tl-inbox-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tl-inbox-body-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tl-inbox-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.tl-inbox-name {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-inbox-msg {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
}


/* -----------------------------------------------------------------------
   7. NAVIGATION
   ----------------------------------------------------------------------- */

.tl-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 26px;
    padding: 14px 16px 14px 24px;
    background: #f7f8ff;
    border-radius: 34px;
    box-shadow: 14px 16px 34px -16px rgba(42, 37, 69, 0.28), inset -6px -6px 14px rgba(255, 255, 255, 0.95), inset 6px 6px 14px rgba(74, 58, 181, 0.1);
}

.tl-logo-wrap {
    height: 30px;
    width: auto;
}

.tl-logo-wrap svg {
    height: 100%;
    width: 100%;
    display: block;
}

.tl-nav-links a,
.tl-nav-links span {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-nav-text);
    display: inline-block;
    transition: color .2s ease, transform .2s ease;
}


/* -----------------------------------------------------------------------
   8. FOOTER
   ----------------------------------------------------------------------- */
.tl-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding: 0 0 48px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
}

.tl-footer a {
    color: var(--color-muted);
}

.tl-footer a:hover {
    color: var(--color-teal);
}


/* -----------------------------------------------------------------------
   9. INTERACTION STATES
   ----------------------------------------------------------------------- */
.tl-int-1:hover,
.tl-int-2:hover,
.tl-int-3:hover,
.tl-int-20:hover {
    color: var(--color-teal) !important;
    transform: translateY(-1px) !important;
}

.tl-int-4:hover {
    transform: translateY(-3px) !important;
    box-shadow: 10px 16px 30px -8px rgba(10, 111, 102, 0.8), inset -4px -4px 10px rgba(0, 0, 0, 0.18), inset 4px 4px 10px rgba(255, 255, 255, 0.3) !important;
}

.tl-int-4:active {
    transform: translateY(1px) !important;
    box-shadow: 4px 5px 12px -6px rgba(10, 111, 102, 0.7), inset 5px 5px 12px rgba(0, 0, 0, 0.28), inset -5px -5px 12px rgba(255, 255, 255, 0.2) !important;
}

.tl-int-5:hover {
    transform: translateY(-4px) !important;
    box-shadow: 14px 22px 40px -12px rgba(10, 111, 102, 0.75), inset -6px -6px 14px rgba(0, 0, 0, 0.18), inset 6px 6px 14px rgba(255, 255, 255, 0.28) !important;
}

.tl-int-5:active {
    transform: translateY(2px) !important;
    box-shadow: 6px 8px 18px -10px rgba(10, 111, 102, 0.6), inset 7px 7px 16px rgba(0, 0, 0, 0.28), inset -7px -7px 16px rgba(255, 255, 255, 0.18) !important;
}

.tl-int-6:hover {
    transform: translateY(-4px) !important;
    box-shadow: 14px 22px 40px -14px rgba(42, 37, 69, 0.36), inset -6px -6px 14px rgba(255, 255, 255, 0.95), inset 6px 6px 14px rgba(74, 58, 181, 0.12) !important;
}

.tl-int-6:active {
    transform: translateY(2px) !important;
    box-shadow: 6px 8px 18px -12px rgba(42, 37, 69, 0.28), inset 7px 7px 16px rgba(74, 58, 181, 0.18), inset -7px -7px 16px rgba(255, 255, 255, 0.95) !important;
}

.tl-int-7:hover,
.tl-int-8:hover,
.tl-int-9:hover,
.tl-int-10:hover,
.tl-int-11:hover {
    transform: translateY(-5px) !important;
    box-shadow: 18px 26px 48px -20px rgba(42, 37, 69, 0.4) !important;
}

.tl-int-12:hover,
.tl-int-16:hover {
    transform: translateY(-4px) !important;
    box-shadow: 18px 26px 48px -20px rgba(42, 37, 69, 0.4), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1) !important;
}

.tl-int-13:hover,
.tl-int-17:hover {
    transform: translateY(-3px) !important;
    box-shadow: 10px 14px 28px -12px rgba(42, 37, 69, 0.36), inset -5px -5px 12px rgba(255, 255, 255, 0.95), inset 5px 5px 12px rgba(74, 58, 181, 0.14) !important;
}

.tl-int-13:active,
.tl-int-17:active {
    transform: translateY(1px) !important;
    box-shadow: inset 6px 6px 14px rgba(74, 58, 181, 0.2), inset -6px -6px 14px rgba(255, 255, 255, 0.95) !important;
}

.tl-int-14:hover {
    transform: translateY(-4px) !important;
    box-shadow: 22px 32px 56px -20px rgba(10, 111, 102, 0.7), inset -8px -8px 18px rgba(0, 0, 0, 0.22), inset 8px 8px 18px rgba(255, 255, 255, 0.22) !important;
}

.tl-int-15:hover {
    transform: translateY(-3px) !important;
    box-shadow: 10px 14px 28px -12px rgba(0, 0, 0, 0.4), inset -5px -5px 12px rgba(74, 58, 181, 0.12), inset 5px 5px 12px rgba(255, 255, 255, 0.9) !important;
}

.tl-int-15:active {
    transform: translateY(1px) !important;
    box-shadow: inset 6px 6px 14px rgba(74, 58, 181, 0.18), inset -6px -6px 14px rgba(255, 255, 255, 0.95) !important;
}

.tl-int-18:hover {
    transform: translateY(-4px) !important;
    box-shadow: 12px 18px 34px -14px rgba(0, 0, 0, 0.55), inset -5px -5px 12px rgba(74, 58, 181, 0.12), inset 5px 5px 12px rgba(255, 255, 255, 0.9) !important;
}

.tl-int-18:active {
    transform: translateY(2px) !important;
    box-shadow: inset 6px 6px 14px rgba(74, 58, 181, 0.2), inset -6px -6px 14px rgba(255, 255, 255, 0.92) !important;
}

.tl-int-19:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.26) !important;
}

.tl-int-19:active {
    transform: translateY(2px) !important;
}

.tl-faq-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 18px 26px 48px -20px rgba(42, 37, 69, 0.4), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1) !important;
}

.tl-toc-link:hover {
    color: var(--color-teal) !important;
    transform: translateX(3px) !important;
}

.tl-feature-glow.tl-glow-active {
    box-shadow: 16px 20px 40px -20px rgba(42, 37, 69, 0.32), inset -7px -7px 16px rgba(255, 255, 255, 0.95), inset 7px 7px 16px rgba(74, 58, 181, 0.1), 0 0 32px 8px rgba(16, 192, 176, 0.55) !important;
}

.tl-cta-card {
    transition: box-shadow 0.4s ease !important;
}

.tl-cta-card.tl-glow-active {
    box-shadow: 0 0 32px 10px rgba(16, 192, 176, 0.85), 24px 30px 60px -24px rgba(74, 58, 181, 0.6), inset -10px -10px 22px rgba(0, 0, 0, 0.2), inset 10px 10px 22px rgba(255, 255, 255, 0.2) !important;
}


/* -----------------------------------------------------------------------
   10. LAYOUT & SECTIONS
   ----------------------------------------------------------------------- */
/* Standard section padding */
.tl-section {
    padding: 48px 0 0;
}

/* Two-column responsive section layout */
.tl-grid-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    padding: 48px 0 0;
}

.tl-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tl-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


/* -----------------------------------------------------------------------
   11. FORM / MODAL
   ----------------------------------------------------------------------- */
.tl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 31, 66, 0.55);
    z-index: 1000;
    opacity: 0;
    transition: opacity .22s ease;
}

.tl-modal-backdrop.is-open {
    opacity: 1;
}

.tl-modal {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    width: min(600px, calc(100vw - 32px));
    max-height: min(88vh, 720px);
    overflow-y: auto;
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
    background: var(--color-surface);
    border-radius: 34px;
    padding: 28px;
    box-shadow: 30px 40px 80px -30px rgba(42, 37, 69, 0.5), inset -8px -8px 18px rgba(255, 255, 255, 0.9), inset 8px 8px 18px rgba(74, 58, 181, 0.08);
}

.tl-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.tl-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--color-card);
    color: #4c465f;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 3px 3px 7px rgba(74, 58, 181, 0.14), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
    transition: transform .18s ease, color .18s ease;
}

.tl-modal-close:hover {
    color: var(--color-teal);
    transform: translateY(-1px);
}

.tl-modal h2 {
    margin: 0;
    padding-right: 40px;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 900;
    color: var(--color-ink);
}

.tl-modal-sub {
    margin: 10px 0 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
}

.tl-field {
    position: relative;
    margin-bottom: 18px;
}

.tl-field input,
.tl-field textarea {
    width: 100%;
    padding: 22px 16px 9px;
    border: none;
    border-radius: 18px;
    background: #dddddd;
    font-family: inherit;
    font-size: 15px;
    color: var(--color-body);
    outline: none;
    transition: box-shadow .2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.tl-field textarea {
    min-height: 88px;
    resize: vertical;
    padding-top: 24px;
}

.tl-field input:focus,
.tl-field textarea:focus {
    box-shadow: 0 0 0 3px rgba(16, 192, 176, 0.35);
}

.tl-field label {
    position: absolute;
    left: 17px;
    top: 15px;
    font-size: 15px;
    font-weight: 600;
    color: #7a7690;
    pointer-events: none;
    transition: top .16s ease, font-size .16s ease, color .16s ease;
}

.tl-field input:focus+label,
.tl-field input:not(:placeholder-shown)+label,
.tl-field textarea:focus+label,
.tl-field textarea:not(:placeholder-shown)+label {
    top: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--color-teal);
}

.tl-field .tl-req {
    color: var(--color-danger);
    margin-left: 2px;
}

.tl-field-error {
    margin: 6px 2px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-danger);
    display: none;
}

.tl-field.has-error input,
.tl-field.has-error textarea {
    box-shadow: inset 4px 4px 10px rgba(192, 57, 43, 0.16), inset -4px -4px 10px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(192, 57, 43, 0.4);
}

.tl-field.has-error .tl-field-error {
    display: block;
}

.tl-phone-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.tl-combobox {
    position: relative;
}

.tl-combobox-input {
    cursor: text;
}

.tl-combobox-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-height: 236px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border-radius: 16px;
    box-shadow: 14px 18px 36px -16px rgba(42, 37, 69, 0.35), 0 0 0 1px rgba(74, 58, 181, 0.08);
}

.tl-combobox-list[hidden] {
    display: none;
}

.tl-combobox-option {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-body);
    cursor: pointer;
}

.tl-combobox-option.is-active {
    background: var(--color-card);
    color: var(--color-teal);
}

.tl-combobox-empty {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-faint);
}

.tl-form-general-error {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(192, 57, 43, 0.1);
    color: var(--color-danger-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.tl-modal-submit {
    width: 100%;
    margin-top: 4px;
    padding: 16px 22px;
    border: none;
    border-radius: 26px;
    background: var(--color-teal);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 10px 14px 28px -12px rgba(10, 111, 102, 0.65), inset -5px -5px 12px rgba(0, 0, 0, 0.16), inset 5px 5px 12px rgba(255, 255, 255, 0.26);
    transition: transform .2s ease, opacity .2s ease;
}

.tl-modal-submit:hover:not(:disabled) {
    transform: translateY(-2px);
}

.tl-modal-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.tl-modal-privacy {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-faint);
    text-align: center;
}

.tl-modal-success {
    text-align: center;
    padding: 22px 4px 8px;
}

.tl-modal-success-dot {
    display: inline-flex;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-teal-light);
    margin-bottom: 18px;
    position: relative;
    box-shadow: inset 3px 3px 8px rgba(10, 111, 102, 0.25), inset -3px -3px 8px rgba(255, 255, 255, 0.85);
}

.tl-modal-success-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 11px;
    border-left: 3px solid var(--color-teal);
    border-bottom: 3px solid var(--color-teal);
    transform: translate(-50%, -60%) rotate(-45deg);
}

.tl-modal-success h2 {
    margin: 0 0 10px;
}

.tl-modal-success p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-subtle);
}

/* Banner glassmorphic wrap — applied only on ≤ laptop (see media query below) */
.tl-banner-text-wrap {
    /* no wrap by default */
}

.tl-section.testimonial blockquote {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.32;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #241f42
}

.tl-inbox-widget-card .tl-inbox-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.tl-hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    z-index: 10;
}

.tl-hamburger-btn span {
    display: block;
    width: 100%;
    height: 2.5px;
    background-color: var(--color-nav-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Sidebar Menu */
.tl-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 31, 66, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 950;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.tl-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 80vw);
    background: #f7f8ff;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
    z-index: 951;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.tl-sidebar.is-open {
    transform: translateX(0);
}

body.tl-no-scroll {
    overflow: hidden !important;
}

.tl-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.tl-sidebar-close {
    background: none;
    border: none;
    color: var(--color-nav-text);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tl-sidebar-close:hover {
    background: rgba(74, 58, 181, 0.1);
    transform: scale(1.05);
}

.tl-sidebar-close:active {
    transform: scale(0.95);
}

.tl-sidebar-links {
    display: flex;
    flex-direction: column;
}

.tl-sidebar-link {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-nav-text);
    text-decoration: none;
    padding: 10px 10px;
    transition: color 0.2s ease, transform 0.2s ease;
    border-bottom: 1px solid #cccccc;
}

.tl-sidebar-link.active {
    color: var(--color-teal);
    border-bottom: 1px solid var(--color-teal);
}

.tl-sidebar-link:nth-child(1) {
    border-top: 1px solid #cccccc;
}

.tl-sidebar-link:hover {
    color: var(--color-teal);
    transform: translateX(4px);
}

.tl-sidebar-footer {
    margin-top: auto;
    padding-top: 24px;
}

.tl-sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 26px;
    background: #0a6f66;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 8px 10px 22px -8px rgba(10, 111, 102, 0.7), inset -4px -4px 10px rgba(0, 0, 0, 0.18), inset 4px 4px 10px rgba(255, 255, 255, 0.28);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.2s ease;
}

.tl-sidebar-cta:hover {
    transform: translateY(-2px);
    box-shadow: 8px 12px 24px -6px rgba(10, 111, 102, 0.8), inset -4px -4px 10px rgba(0, 0, 0, 0.18), inset 4px 4px 10px rgba(255, 255, 255, 0.28);
}

.tl-sidebar-cta:active {
    transform: translateY(1px);
}


/* Privacy Policy Cards Content Styling */
.tl-policy-article .tl-card h2 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #241f42;
}

.tl-policy-article .tl-card h3 {
    margin: 24px 0 0;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: #241f42;
}

.tl-policy-article .tl-card p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: #524d6b;
}

.tl-policy-article .tl-card h3+p {
    margin-top: 10px;
}

.tl-policy-article .tl-card ul {
    margin: 14px 0 0;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #524d6b;
}

.tl-policy-article .tl-card ul li {
    font-size: 16px;
    line-height: 1.6;
    color: #524d6b;
}

.tl-policy-article .tl-card p a {
    color: var(--color-teal);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.tl-policy-article .tl-card p a:hover {
    color: #085a53;
}

/* Consolidated Pricing Card Styles */
.tl-pricing-card h3,
.tl-pricing-growth-card h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.tl-pricing-card h3 {
    color: #241f42;
}

.tl-pricing-card .tl-price,
.tl-pricing-growth-card .tl-price {
    margin: 14px 0 0;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.tl-pricing-card .tl-price {
    color: #241f42;
}

.tl-pricing-card .tl-price-sub,
.tl-pricing-growth-card .tl-price-sub {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 600;
}

.tl-pricing-card .tl-price-sub {
    color: #5b5677;
}

.tl-pricing-growth-card .tl-price-sub {
    color: rgba(255, 255, 255, 0.78);
}

.tl-pricing-card .tl-pricing-features,
.tl-pricing-growth-card .tl-pricing-features {
    display: grid;
    gap: 10px;
    margin: 26px 0 30px;
    font-size: 15.5px;
    line-height: 1.5;
}

.tl-pricing-card .tl-pricing-features {
    color: #524d6b;
}

.tl-pricing-growth-card .tl-pricing-features {
    color: rgba(255, 255, 255, 0.92);
}

.tl-pricing-card .tl-pricing-cta,
.tl-pricing-growth-card .tl-pricing-cta {
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
    display: block;
    margin-top: 28px;
    padding: 15px 22px;
    border-radius: 24px;
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
}

.tl-pricing-card .tl-pricing-cta {
    background: #eef0fb;
    color: #2a2545;
    box-shadow: 8px 10px 22px -12px rgba(42, 37, 69, 0.3), inset -5px -5px 12px rgba(255, 255, 255, 0.95), inset 5px 5px 12px rgba(74, 58, 181, 0.12);
}

.tl-pricing-growth-card .tl-pricing-cta {
    background: #fff;
    color: #0a6f66;
    box-shadow: 8px 10px 22px -12px rgba(0, 0, 0, 0.35), inset -5px -5px 12px rgba(74, 58, 181, 0.12), inset 5px 5px 12px rgba(255, 255, 255, 0.9);
}

/* TOC Accordion Styling */
.tl-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tl-toc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(74, 58, 181, 0.05);
    color: var(--color-nav-text);
    transition: transform 0.3s ease, background 0.25s ease;
}

.tl-toc-toggle:hover .tl-toc-icon {
    background: rgba(74, 58, 181, 0.1);
}

.tl-toc-card.is-open .tl-toc-icon {
    transform: rotate(180deg);
    background: var(--color-teal-light);
    color: var(--color-teal);
}

.tl-toc-content {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    max-height: 1000px;
    opacity: 1;
}

.tl-toc-card:not(.is-open) .tl-toc-content {
    max-height: 0;
    opacity: 0;
}

.tl-toc-content .tl-toc-link {
    color: #4c465f
}

/* Powered by Techrish link styles & animations */
.tl-powered-link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tl-powered-link:hover {
    color: var(--color-teal) !important;
    transform: scale(1.05) translateY(-1px);
}


/* =======================================================================
   MEDIA QUERIES — all breakpoints consolidated
   ======================================================================= */

/* -----------------------------------------------------------------------
   A. TABLET  600 – 1023 px
   ----------------------------------------------------------------------- */
@media (min-width: 600px) {
    .tl-nav {
        background: none;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
    }

    .tl-logo-wrap {
        height: 45px;
    }

    .tl-eyebrow {
        font-size: 13px;
    }

    .tl-h1 {
        font-size: 40px;
    }

    .tl-h2 {
        font-size: 26px;
    }

    .tl-h3 {
        font-size: 18px;
    }

    .tl-h3-card {
        font-size: 17px;
    }

    .tl-body {
        font-size: 15px;
    }

    .tl-stat-num {
        font-size: 38px;
    }

    .tl-price-num {
        font-size: 42px;
    }

    .tl-inbox-name {
        font-size: 15px;
    }

    .tl-inbox-msg {
        font-size: 14px;
    }

    .tl-pill .tl-size {
        font-size: 12px;
    }

    .tl-pill .tl-stage {
        font-size: 12px;
    }

    .tl-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tl-phone-row {
        grid-template-columns: 200px 1fr;
    }

    .tl-modal {
        padding: 36px;
    }

    .tl-modal h2 {
        font-size: 23px;
    }

    .tl-modal-sub {
        font-size: 15px;
    }

    .tl-inbox-card {
        padding: 16px 18px 16px 58px;
    }

    .tl-inbox-card::before {
        width: 32px;
        height: 32px;
        left: 14px;
    }

    /* Sections */
    .tl-section {
        padding: 72px 0 0;
    }

    .tl-grid-section {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 36px;
        padding: 72px 0 0;
    }

    .tl-page-header {
        padding: 62px 0 40px;
    }

    .tl-policy-article {
        padding: 64px 0 72px;
        gap: 32px;
    }
}

/* Banner background: only on tablet + mobile */
@media (max-width: 1023px) {
    .tl-banner-text-wrap {
        background: rgba(255, 255, 255, 0.45);
        padding: 24px;
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 10px 30px -10px rgba(74, 58, 181, 0.08);
    }

    .tl-feature-card {
        flex-basis: calc(50% - 14px);
    }
}

/* -----------------------------------------------------------------------
   B. LAPTOP  1024 – 1439 px
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
    body {
        font-size: 16px;
    }

    .tl-logo-wrap {
        height: 55px;
    }

    .tl-eyebrow {
        font-size: 13px;
    }

    .tl-h1 {
        font-size: 54px;
    }

    .tl-h2 {
        font-size: 30px;
    }

    .tl-h3 {
        font-size: 20px;
    }

    .tl-h3-card {
        font-size: 18px;
    }

    .tl-body {
        font-size: 16px;
    }

    .tl-stat-num {
        font-size: 44px;
    }

    .tl-price-num {
        font-size: 46px;
    }

    .tl-inbox-name {
        font-size: 15px;
    }

    .tl-inbox-msg {
        font-size: 14px;
    }

    .tl-pill .tl-size {
        font-size: 12.5px;
    }

    .tl-pill .tl-stage {
        font-size: 12.5px;
    }

    .tl-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tl-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tl-phone-row {
        grid-template-columns: 220px 1fr;
    }

    .tl-modal {
        padding: 44px;
    }

    .tl-modal h2 {
        font-size: 25px;
    }

    .tl-modal-sub {
        font-size: 15px;
    }

    /* Sections */
    .tl-section {
        padding: 96px 0 0;
    }

    .tl-grid-section {
        gap: 48px;
        padding: 96px 0 0;
    }

    .tl-page-header {
        /* padding: 88px 0 44px; */
    }

    .tl-policy-article {
        padding: 80px 0 88px;
        gap: 36px;
    }
}

@media (min-width: 1440px) {
    .tl-eyebrow {
        font-size: 13.5px;
    }

    .tl-h1 {
        font-size: 66px;
    }

    .tl-h2 {
        font-size: 34px;
    }

    .tl-h3 {
        font-size: 21px;
    }

    .tl-h3-card {
        font-size: 19px;
    }

    .tl-body {
        font-size: 16.5px;
    }

    .tl-stat-num {
        font-size: 48px;
    }

    .tl-price-num {
        font-size: 46px;
    }

    .tl-modal h2 {
        font-size: 27px;
    }

    /* Sections */
    .tl-section {
        padding: 120px 0 0;
    }

    .tl-grid-section {
        gap: 64px;
        padding: 120px 0 0;
    }

    .tl-policy-article {
        padding: 96px 0 110px;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .tl-nav-links {
        display: none !important;
    }

    .tl-nav-cta {
        display: none !important;
    }

    .tl-hamburger-btn {
        display: flex !important;
    }
}

@media (max-width: 680px) {
    .tl-stat-card {
        text-align: center;
    }

    .tl-feature-card {
        flex-basis: 100%;
    }

    .tl-section.testimonial blockquote {
        letter-spacing: 0em;
    }
}

/* -----------------------------------------------------------------------
   E. INBOX CARD MOBILE  <= 599 px
   ----------------------------------------------------------------------- */
@media (max-width: 599px) {
    .tl-inbox-card {
        flex-direction: column;
        padding: 44px 16px 16px;
    }

    .tl-inbox-card::before {
        top: 12px;
        left: 12px;
        transform: none;
        width: 24px;
        height: 24px;
    }

    .tl-inbox-header,
    .tl-inbox-body,
    .tl-inbox-body-row,
    .tl-inbox-msg {
        width: 100%;
    }

    .tl-inbox-msg {
        margin-top: 6px;
    }

    .tl-pill {
        margin-left: 0;
    }
}

/* -----------------------------------------------------------------------
   F. PHONE ROW SMALL  <= 480 px
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
    .tl-phone-row {
        grid-template-columns: 1fr;
    }

    .tl-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .tl-footer>*:nth-child(1) {
        order: 1;
    }

    .tl-footer>*:nth-child(3) {
        order: 2;
    }

    .tl-footer>*:nth-child(2) {
        order: 3;
        margin: 0 auto;
    }

    .tl-footer span {
        justify-content: center;
    }
}

/* -----------------------------------------------------------------------
   G. REDUCED MOTION
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .tl-pill .tl-stage {
        animation: none !important;
    }

    .tl-pill .tl-stage:nth-child(3) {
        opacity: 1;
    }

    [data-endpoint] {
        animation: none !important;
    }

    .tl-bubble,
    .tl-mark,
    .tl-ring {
        animation: none !important;
    }

    .tl-bubble {
        opacity: 0.9;
    }

    .tl-modal-backdrop,
    .tl-modal {
        transition: none !important;
    }
}