/* Compensate for the fixed global header (90px) since this Ads landing
           page omits the product-header-placeholder. Without this, the hero H1
           tucks under the nav bar. */
        .hero-container { padding-top: 180px; }
        @media (max-width: 1024px) { .hero-container { padding-top: 150px; } }
        @media (max-width: 768px)  { .hero-container { padding-top: 120px; } }

        /* ===== Features section: 3 alternating groups (visual + items) ===== */
        .tt-acc-section { padding-top: 80px; padding-bottom: 80px; }
        .tt-acc-groups { display: flex; flex-direction: column; gap: 80px; margin-top: 48px; }
        .tt-acc-group {
            display: flex;
            gap: 56px;
            align-items: center;
        }
        .tt-acc-group.tt-acc-reverse { flex-direction: row-reverse; }
        .tt-acc-group > .tt-acc-visual { flex: 1.05 1 0; min-width: 0; align-self: center; }
        .tt-acc-group > .tt-acc-list   { flex: 1 1 0; min-width: 0; align-self: center; }
        @media (max-width: 960px) {
            .tt-acc-groups { gap: 56px; }
            .tt-acc-group, .tt-acc-group.tt-acc-reverse {
                flex-direction: column;
                gap: 32px;
                align-items: stretch;
            }
        }

        /* Visual area: stacked visuals, only active is shown */
        .tt-acc-visual {
            background: linear-gradient(140deg, #EEF2FF 0%, #F5F7FF 60%, #FFFFFF 100%);
            border-radius: 24px;
            padding: 28px 24px;
            position: relative;
            overflow: hidden;
            min-height: 420px;
        }
        .tt-acc-visual::before {
            content: '';
            position: absolute;
            top: -60px; right: -60px;
            width: 220px; height: 220px;
            background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, transparent 70%);
            pointer-events: none;
        }
        .tt-acc-vis {
            position: absolute;
            inset: 28px 24px;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .tt-acc-vis.tt-acc-vis-active { opacity: 1; visibility: visible; z-index: 2; }

        /* Shared card styling for every visual */
        .vis-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
            padding: 22px;
            width: 100%;
            max-width: 440px;
            font-family: 'Ubuntu', sans-serif;
            color: #0F172A;
        }
        .vis-card-title {
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 14px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .vis-card-title small { font-size: 11px; font-weight: 500; color: #64748B; }
        .vis-row {
            display: grid; grid-template-columns: auto 1fr auto auto;
            align-items: center; gap: 10px; padding: 9px 0;
            border-bottom: 1px solid #F8FAFC; font-size: 13px;
        }
        .vis-row:last-child { border-bottom: none; }
        .vis-dot { width: 8px; height: 8px; border-radius: 50%; }
        .vis-name { font-weight: 500; color: #1E293B; }
        .vis-name small { display: block; font-size: 11px; color: #94A3B8; font-weight: 400; margin-top: 2px; }
        .vis-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
        .vis-pill.high { background: #FEE2E2; color: #DC2626; }
        .vis-pill.med { background: #FEF3C7; color: #B45309; }
        .vis-pill.low { background: #D1FAE5; color: #059669; }
        .vis-pill.crit { background: #FCE7F3; color: #BE185D; }
        .vis-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 600; flex-shrink: 0; }
        .vis-due { font-size: 11px; color: #64748B; font-variant-numeric: tabular-nums; }

        /* Visual 1: views (tabs + task rows) */
        .vis-tabs { display: flex; gap: 4px; margin: -4px 0 12px; padding-bottom: 4px; border-bottom: 1px solid #F1F5F9; }
        .vis-tab { font-size: 12px; font-weight: 500; color: #64748B; padding: 6px 10px; border-bottom: 2px solid transparent; }
        .vis-tab.active { color: #6366F1; border-color: #6366F1; }

        /* Visual 2: assignment */
        .vis-search { background: #F8FAFC; border: 1px solid #E2E8F0; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #475569; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .vis-search i { color: #94A3B8; }
        .vis-suggest { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13px; color: #1E293B; }
        .vis-suggest.active { background: rgba(99,102,241,0.08); }
        .vis-suggest .check { margin-left: auto; color: #6366F1; font-size: 12px; }
        .vis-meta { display: flex; gap: 14px; padding: 12px 6px 0; margin-top: 8px; border-top: 1px solid #F1F5F9; font-size: 11px; color: #64748B; }
        .vis-meta strong { color: #0F172A; font-weight: 600; }
        .vis-cta { margin-top: 14px; width: 100%; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; border: none; border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }

        /* Visual 3: burndown */
        .vis-stats-row { display: flex; gap: 20px; font-size: 11px; color: #64748B; margin-bottom: 12px; }
        .vis-stats-row strong { display: block; font-size: 18px; color: #0F172A; font-weight: 700; margin-top: 2px; }
        .vis-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid #F1F5F9; display: flex; justify-content: space-between; font-size: 12px; color: #64748B; }
        .vis-foot strong { color: #059669; font-weight: 600; }

        /* Visual 4: phone mockup (sized to fit the 420px visual panel) */
        .vis-phone { width: 220px; height: 360px; background: #0F172A; border-radius: 32px; padding: 7px; box-shadow: 0 28px 56px rgba(15,23,42,0.2); position: relative; box-sizing: border-box; }
        .vis-phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 62px; height: 14px; background: #0F172A; border-radius: 999px; z-index: 2; }
        .vis-phone-screen { background: linear-gradient(180deg, #F1F5F9, #fff); border-radius: 25px; height: 100%; padding: 30px 12px 12px; position: relative; overflow: hidden; box-sizing: border-box; }
        .vis-phone-title { font-size: 12.5px; font-weight: 700; color: #0F172A; margin-bottom: 10px; }
        .vis-phone-task { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #fff; border-radius: 9px; margin-bottom: 5px; font-size: 11px; color: #1E293B; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
        .vis-phone-task .vis-checkbox { width: 13px; height: 13px; border-radius: 4px; border: 1.4px solid #CBD5E1; flex-shrink: 0; }
        .vis-phone-task.done .vis-checkbox { background: #10B981; border-color: #10B981; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; }
        .vis-phone-task.done .vis-task-name { color: #94A3B8; text-decoration: line-through; }
        .vis-phone-notif { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(99,102,241,0.95); color: #fff; padding: 9px 11px; border-radius: 9px; font-size: 10px; line-height: 1.4; backdrop-filter: blur(8px); }
        .vis-phone-notif strong { display: block; font-size: 10.5px; margin-bottom: 2px; }

        /* Visual 5: workload bars */
        .vis-bar-row { display: grid; grid-template-columns: 100px 1fr 48px; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; }
        .vis-bar-name { display: flex; align-items: center; gap: 6px; color: #1E293B; font-weight: 500; }
        .vis-bar-track { background: #F1F5F9; height: 10px; border-radius: 999px; overflow: hidden; position: relative; }
        .vis-bar-fill { height: 100%; border-radius: 999px; }
        .vis-bar-pct { text-align: right; font-weight: 600; font-size: 12px; color: #475569; font-variant-numeric: tabular-nums; }
        .vis-bar-pct.red { color: #DC2626; }
        .vis-bar-pct.green { color: #059669; }

        /* Visual 6: reports KPIs */
        .vis-kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
        .vis-kpi { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 10px; }
        .vis-kpi small { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
        .vis-kpi h3 { font-size: 18px; font-weight: 700; margin: 4px 0 2px; color: #0F172A; }
        .vis-kpi .trend { font-size: 10px; font-weight: 600; }
        .vis-kpi .trend.up { color: #059669; }
        .vis-spark { padding: 8px 4px 0; }

        /* Visual 7: pipeline */
        .vis-pipeline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .vis-stage { background: #F1F5F9; color: #475569; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
        .vis-stage.active { background: rgba(99,102,241,0.12); color: #6366F1; }
        .vis-stage.done { background: rgba(16,185,129,0.12); color: #059669; }
        .vis-arrow { color: #CBD5E1; font-size: 12px; }
        .vis-pipeline-meta { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1F5F9; font-size: 11px; color: #64748B; }
        .vis-pipeline-meta strong { color: #0F172A; }

        /* Visual 8: subtasks */
        .vis-check-list { list-style: none; padding: 0; margin: 0; }
        .vis-check-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #1E293B; }
        .vis-check-list li.done { color: #94A3B8; text-decoration: line-through; }
        .vis-check-list li i { color: #CBD5E1; font-size: 13px; }
        .vis-check-list li.done i { color: #10B981; }
        .vis-check-list ul { list-style: none; padding-left: 26px; margin: 0; }
        .vis-check-list .progress-bar { margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1F5F9; font-size: 11px; color: #64748B; display: flex; justify-content: space-between; }
        .vis-check-list .progress-bar strong { color: #6366F1; }

        /* Visual 9: comments */
        .vis-comment { display: flex; gap: 10px; padding: 10px 0; font-size: 13px; }
        .vis-comment + .vis-comment { border-top: 1px solid #F8FAFC; }
        .vis-comment-body strong { font-size: 12px; color: #0F172A; }
        .vis-comment-body small { font-size: 10px; color: #94A3B8; margin-left: 6px; }
        .vis-comment-body p { margin: 4px 0 0; color: #475569; font-size: 12px; line-height: 1.45; }
        .vis-mention { color: #6366F1; font-weight: 600; }

        /* Items list: single column of clickable buttons (active one expands) */
        .tt-acc-list { display: flex; flex-direction: column; gap: 14px; }
        .tt-acc-item {
            background: #FAFBFE;
            border: 1px solid #ECEEF5;
            border-radius: 16px;
            padding: 24px 26px;
            display: flex;
            align-items: flex-start;
            gap: 18px;
            cursor: pointer;
            transition: background .2s, border-color .2s, box-shadow .2s;
            text-align: left;
            font-family: 'Ubuntu', sans-serif;
            width: 100%;
        }
        .tt-acc-item:hover {
            background: #fff;
            border-color: rgba(99, 102, 241, 0.18);
        }
        .tt-acc-item.tt-acc-active {
            background: #fff;
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 10px 32px rgba(99, 102, 241, 0.12);
        }
        .tt-acc-ico {
            width: 48px; height: 48px;
            border-radius: 12px;
            background: rgba(99, 102, 241, 0.1);
            color: #6366F1;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
            transition: background .25s, color .25s;
            margin-top: 2px;
        }
        .tt-acc-item.tt-acc-active .tt-acc-ico {
            background: linear-gradient(135deg, #6366F1, #8B5CF6);
            color: #fff;
        }
        .tt-acc-content { flex: 1; min-width: 0; }
        .tt-acc-title {
            font-size: 18px;
            font-weight: 700;
            color: #0F172A;
            line-height: 1.4;
            display: block;
        }
        .tt-acc-desc {
            font-size: 15px;
            color: #475569;
            line-height: 1.65;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
        }
        .tt-acc-item.tt-acc-active .tt-acc-desc {
            max-height: 180px;
            opacity: 1;
            margin-top: 10px;
        }
        @media (max-width: 600px) {
            .tt-acc-visual { padding: 22px 16px; min-height: 360px; }
            .tt-acc-vis { inset: 22px 16px; }
            .tt-acc-item { padding: 18px 18px; gap: 14px; }
            .tt-acc-ico { width: 42px; height: 42px; font-size: 15px; }
            .tt-acc-title { font-size: 16px; }
            .tt-acc-desc { font-size: 13.5px; }
            .vis-phone { width: 200px; height: 340px; }
        }
        /* Universal: prevent any section from causing horizontal scroll */
        html, body { overflow-x: hidden; max-width: 100%; }
        img, svg, video { max-width: 100%; height: auto; }

        /* === Hero: floating widgets hide cleanly on cramped screens === */
        @media (max-width: 1280px) {
            .pm-widget { transform: scale(0.85); }
        }
        @media (max-width: 1100px) {
            .pm-widget { display: none; }
        }
        @media (max-width: 1024px) {
            .hero-container { grid-template-columns: 1fr; gap: 36px; padding-bottom: 60px; }
            .hero-content { text-align: left; }
            .hero-visual { margin: 0 auto; max-width: 560px; }
            .hero-title { font-size: 38px; }
        }
        @media (max-width: 768px) {
            .hero-title { font-size: 30px; line-height: 1.2; }
            .hero-subtitle { font-size: 15px; }
            .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
            .hero-actions .tt-btn-primary, .hero-actions .hero-cta { width: 100%; max-width: 320px; justify-content: center; }
            .tl-panel { padding: 12px; }
            .tl-quick-stats { flex-wrap: wrap; gap: 8px; }
            .tl-qs { font-size: 11px; }
        }
        @media (max-width: 480px) {
            .hero-title { font-size: 26px; }
            .tl-cards .tl-task { flex-basis: calc(50% - 4px); }
            .tl-bottom { flex-direction: column; gap: 10px; }
            .tl-timer-value { font-size: 26px; }
        }

        /* === Feature Highlight (Team Task Tracker section) === */
        @media (max-width: 1024px) {
            .tt-fh-container { grid-template-columns: 1fr !important; gap: 36px; }
            .tt-fh-visual { max-width: 600px; margin: 0 auto; }
        }
        @media (max-width: 768px) {
            .tt-fh-title { font-size: 28px !important; }
            .tt-fh-desc { font-size: 15px; }
            .tt-fh-table { font-size: 11px; }
            .tt-fh-table th, .tt-fh-table td { padding: 6px 4px; }
            .tt-fh-lists { grid-template-columns: 1fr; gap: 18px; }
        }

        /* === Banner: prevent mockup squish at intermediate sizes === */
        @media (max-width: 1280px) and (min-width: 1101px) {
            .tt-jb-wrap { gap: 32px; }
            .tt-jb-h { font-size: 34px; }
        }

        /* === "Is Jesto perfect?" floating badges: avoid overlap at intermediate === */
        @media (max-width: 1280px) {
            .tt-jpt-float-1 { top: 12px; left: -8px; }
            .tt-jpt-float-2 { bottom: 24px; right: -8px; }
        }
        @media (max-width: 1024px) {
            .tt-jpt-top { grid-template-columns: 1fr; }
            .tt-jpt-visual { min-height: 340px; }
            .tt-jpt-float-1 { top: 8px; left: 4px; }
            .tt-jpt-float-2 { bottom: 12px; right: 4px; }
            .tt-jpt-content h2 { font-size: 30px; }
        }
        @media (max-width: 600px) {
            .tt-jpt-float-1 { position: static; margin: 0 auto 12px; }
            .tt-jpt-float-2 { position: static; margin: 12px auto 0; }
            .tt-jpt-visual { flex-direction: column; min-height: auto; }
        }

        /* === Pricing cards: cleaner stacking on tablet/mobile === */
        @media (max-width: 1024px) {
            .pricing-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
        }
        @media (max-width: 640px) {
            .pricing-cards { grid-template-columns: 1fr !important; }
            .price-card-featured { transform: none; }
            .billing-toggle { flex-wrap: wrap; }
        }

        /* === Compare table inside pricing: horizontal scroll on small === */
        @media (max-width: 768px) {
            .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .compare-table { min-width: 600px; }
        }

        /* === Work Smarter cards === */
        @media (max-width: 960px) {
            .smarter-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
        }
        @media (max-width: 600px) {
            .smarter-cards { grid-template-columns: 1fr !important; }
            .smarter-title { font-size: 26px !important; }
        }

        /* === Support stats === */
        @media (max-width: 960px) {
            .support-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
            .support-title { font-size: 28px !important; }
        }
        @media (max-width: 600px) {
            .support-stats { grid-template-columns: repeat(2, 1fr); }
            .support-stat-number { font-size: 24px !important; }
        }

        /* === Steps cards (if present anywhere) === */
        @media (max-width: 768px) {
            .steps-cards { grid-template-columns: 1fr !important; gap: 14px; }
        }

        /* === Featured trust strip: avoid awkward 5-in-row at intermediate === */
        @media (max-width: 1280px) and (min-width: 1025px) {
            .tt-feat-grid { grid-template-columns: repeat(3, 1fr); }
        }

        /* === FAQ items === */
        @media (max-width: 600px) {
            .faq-q { font-size: 14px !important; padding: 16px 18px !important; }
            .faq-a p { font-size: 13.5px; }
        }

        /* === Final CTA: tighten on mobile === */
        @media (max-width: 768px) {
            .final-cta-headline { font-size: 24px !important; line-height: 1.3 !important; }
            .final-cta-btn { width: 100%; max-width: 320px; justify-content: center; }
        }

        /* === Integrations marquee: prevent overflow === */
        .integrations-marquee { overflow: hidden; }

        /* === Section padding consistency on mobile === */
        @media (max-width: 600px) {
            .tt-section { padding-left: 14px; padding-right: 14px; }
        }

        /* === Geo shapes (animated bg decorations): hide on tiny screens === */
        @media (max-width: 600px) {
            .geo-shapes { display: none; }
        }
            .tt-feat {
                padding: 60px 20px 50px;
                background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
                border-top: 1px solid #F1F5F9;
                border-bottom: 1px solid #F1F5F9;
            }
            .tt-feat-inner { max-width: 1200px; margin: 0 auto; }
            .tt-feat-head { text-align: center; margin-bottom: 36px; }
            .tt-feat-eyebrow {
                font-family: 'Ubuntu', sans-serif;
                font-size: 11px;
                font-weight: 600;
                color: #6366F1;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                background: rgba(99, 102, 241, 0.08);
                padding: 6px 14px;
                border-radius: 999px;
                display: inline-block;
                margin-bottom: 14px;
            }
            .tt-feat-h {
                font-family: 'Ubuntu', sans-serif;
                font-size: 24px;
                font-weight: 700;
                color: #0F172A;
                margin: 0;
                letter-spacing: -0.4px;
                line-height: 1.3;
            }
            .tt-feat-grid {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 14px;
            }
            .tt-feat-badge {
                background: #fff;
                border: 1px solid #E2E8F0;
                border-radius: 14px;
                padding: 18px 16px;
                display: flex;
                align-items: center;
                gap: 12px;
                transition: transform .2s ease, border-color .2s, box-shadow .2s;
                font-family: 'Ubuntu', sans-serif;
            }
            .tt-feat-badge:hover {
                transform: translateY(-3px);
                border-color: rgba(99, 102, 241, 0.3);
                box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
            }
            .tt-feat-ico {
                width: 40px; height: 40px;
                border-radius: 10px;
                display: flex; align-items: center; justify-content: center;
                font-size: 16px;
                flex-shrink: 0;
            }
            .tt-feat-meta { display: flex; flex-direction: column; min-width: 0; }
            .tt-feat-meta small {
                font-size: 10px;
                font-weight: 600;
                color: #94A3B8;
                text-transform: uppercase;
                letter-spacing: .6px;
                line-height: 1.1;
            }
            .tt-feat-meta strong {
                font-size: 14.5px;
                font-weight: 700;
                color: #0F172A;
                margin-top: 4px;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            @media (max-width: 1024px) {
                .tt-feat-grid { grid-template-columns: repeat(3, 1fr); }
            }
            @media (max-width: 600px) {
                .tt-feat { padding: 48px 16px 40px; }
                .tt-feat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
                .tt-feat-h { font-size: 19px; }
                .tt-feat-badge { padding: 14px 12px; gap: 10px; }
                .tt-feat-ico { width: 36px; height: 36px; font-size: 14px; }
                .tt-feat-meta strong { font-size: 13px; }
            }
            .tt-jb {
                background: linear-gradient(135deg, #2E1FB0 0%, #4F46E5 28%, #6366F1 55%, #8B5CF6 82%, #A855F7 100%);
                padding: 24px 60px;
                position: relative;
                overflow: hidden;
                max-width: 1320px;
                margin: 24px auto;
                border-radius: 24px;
                box-shadow: 0 30px 80px rgba(79, 70, 229, 0.18);
            }
            .tt-jb::before {
                content: '';
                position: absolute;
                top: 0; left: 0; bottom: 0;
                width: 55%;
                background:
                    radial-gradient(circle at 25% 50%, rgba(255,255,255,0.08) 0%, transparent 40%),
                    radial-gradient(circle at 10% 80%, rgba(168,85,247,0.35) 0%, transparent 45%);
                pointer-events: none;
            }
            .tt-jb::after {
                content: '';
                position: absolute;
                top: 0; left: 0;
                width: 600px; height: 100%;
                background-image:
                    radial-gradient(circle at 80px 80px, rgba(255,255,255,0.08), transparent 4px),
                    radial-gradient(circle at 200px 250px, rgba(255,255,255,0.05), transparent 6px),
                    radial-gradient(circle at 350px 150px, rgba(255,255,255,0.07), transparent 5px),
                    radial-gradient(circle at 450px 400px, rgba(255,255,255,0.05), transparent 4px),
                    radial-gradient(circle at 100px 450px, rgba(255,255,255,0.06), transparent 5px),
                    radial-gradient(circle at 280px 550px, rgba(255,255,255,0.04), transparent 4px);
                pointer-events: none;
            }
            .tt-jb-wave {
                position: absolute;
                top: 0; left: 0; bottom: 0;
                width: 600px;
                opacity: 0.18;
                pointer-events: none;
            }
            .tt-jb-wrap {
                max-width: 1320px;
                margin: 0 auto;
                position: relative;
                z-index: 2;
                display: grid;
                grid-template-columns: 1fr 1.2fr;
                gap: 48px;
                align-items: center;
            }
            .tt-jb-content { font-family: 'Ubuntu', sans-serif; }
            .tt-jb-h {
                font-size: 38px;
                font-weight: 700;
                color: #fff;
                line-height: 1.2;
                letter-spacing: -0.6px;
                margin: 0 0 14px;
            }
            .tt-jb-sub {
                font-size: 15px;
                color: rgba(255,255,255,0.88);
                line-height: 1.55;
                margin: 0 0 20px;
                max-width: 440px;
            }
            .tt-jb-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
            .tt-jb-btn {
                font-family: 'Ubuntu', sans-serif;
                font-size: 15px;
                font-weight: 600;
                padding: 14px 32px;
                border-radius: 10px;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border: 2px solid transparent;
                transition: transform .2s, background .2s, color .2s;
                cursor: pointer;
            }
            .tt-jb-btn-primary { background: #0F172A; color: #fff; }
            .tt-jb-btn-primary:hover { background: #000; transform: translateY(-2px); }
            .tt-jb-btn-ghost {
                background: transparent;
                color: #fff;
                border-color: rgba(255,255,255,0.5);
            }
            .tt-jb-btn-ghost:hover {
                background: rgba(255,255,255,0.12);
                transform: translateY(-2px);
            }

            /* Product mockup */
            .tt-jb-mockup {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35), 0 6px 20px rgba(15, 23, 42, 0.2);
                overflow: hidden;
                font-family: 'Ubuntu', sans-serif;
            }
            .tt-jb-mk-notice {
                background: #0F172A;
                color: #fff;
                font-size: 10.5px;
                padding: 7px 14px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }
            .tt-jb-mk-notice .pill {
                background: #F97316;
                color: #fff;
                font-size: 9.5px;
                font-weight: 600;
                padding: 2px 8px;
                border-radius: 4px;
            }
            .tt-jb-mk-notice a {
                color: #fff;
                text-decoration: underline;
            }
            .tt-jb-mk-header {
                display: flex;
                align-items: center;
                padding: 10px 14px;
                border-bottom: 1px solid #E5E7EB;
                gap: 10px;
            }
            .tt-jb-mk-logo {
                font-size: 13px;
                font-weight: 700;
                color: #0F172A;
                letter-spacing: -0.2px;
                display: flex;
                align-items: center;
                gap: 6px;
                line-height: 1;
            }
            .tt-jb-mk-logo img {
                height: 16px;
                width: auto;
                display: block;
            }
            .tt-jb-mk-crumb {
                font-size: 10px;
                color: #64748B;
                margin-left: 8px;
            }
            .tt-jb-mk-crumb strong { color: #0F172A; }
            .tt-jb-mk-spacer { flex: 1; }
            .tt-jb-mk-icons {
                display: flex;
                gap: 10px;
                font-size: 10px;
                color: #94A3B8;
            }
            .tt-jb-mk-add {
                background: #6366F1;
                color: #fff;
                font-size: 9px;
                font-weight: 600;
                padding: 4px 9px;
                border-radius: 4px;
            }
            .tt-jb-mk-body {
                display: grid;
                grid-template-columns: 130px 1fr;
            }
            .tt-jb-mk-nav {
                background: #F8FAFC;
                padding: 12px 8px;
                border-right: 1px solid #E5E7EB;
                font-size: 9.5px;
            }
            .tt-jb-mk-nav-item {
                padding: 5px 8px;
                border-radius: 4px;
                color: #64748B;
                margin-bottom: 2px;
                display: flex;
                align-items: center;
                gap: 7px;
            }
            .tt-jb-mk-nav-item i { width: 10px; font-size: 9px; }
            .tt-jb-mk-nav-item.active {
                background: rgba(99,102,241,0.1);
                color: #6366F1;
                font-weight: 600;
            }
            .tt-jb-mk-content { padding: 12px; }
            .tt-jb-mk-tabs {
                display: flex;
                gap: 14px;
                font-size: 9.5px;
                color: #64748B;
                margin-bottom: 10px;
                padding-bottom: 8px;
                border-bottom: 1px solid #F1F5F9;
            }
            .tt-jb-mk-tab.active { color: #0F172A; font-weight: 700; }
            .tt-jb-board {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 6px;
            }
            .tt-jb-col {
                background: #F8FAFC;
                border-radius: 6px;
                padding: 8px 6px;
            }
            .tt-jb-col-title {
                font-size: 9px;
                font-weight: 700;
                margin-bottom: 8px;
                padding: 0 2px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            .tt-jb-col-title .dots {
                color: #CBD5E1;
                font-size: 11px;
                font-weight: 400;
            }
            .tt-jb-col-1 .tt-jb-col-title { color: #DC2626; }
            .tt-jb-col-2 .tt-jb-col-title { color: #2563EB; }
            .tt-jb-col-3 .tt-jb-col-title { color: #059669; }
            .tt-jb-col-4 .tt-jb-col-title { color: #7C3AED; }
            .tt-jb-col-5 .tt-jb-col-title { color: #475569; }
            .tt-jb-card {
                background: #fff;
                border-radius: 5px;
                padding: 6px 7px;
                margin-bottom: 6px;
                box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            }
            .tt-jb-card-title {
                font-weight: 600;
                color: #0F172A;
                margin-bottom: 4px;
                font-size: 8.5px;
                line-height: 1.3;
            }
            .tt-jb-card-tag {
                display: inline-block;
                font-size: 7.5px;
                font-weight: 600;
                padding: 1px 5px;
                border-radius: 3px;
            }
            .tt-jb-card-tag.green { background: rgba(16,185,129,0.15); color: #059669; }
            .tt-jb-card-tag.red { background: rgba(239,68,68,0.15); color: #DC2626; }
            .tt-jb-card-tag.blue { background: rgba(37,99,235,0.15); color: #2563EB; }
            .tt-jb-card-tag.orange { background: rgba(245,158,11,0.15); color: #B45309; }
            .tt-jb-card-tag.purple { background: rgba(139,92,246,0.15); color: #7C3AED; }
            .tt-jb-card-foot {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 5px;
                font-size: 7px;
                color: #94A3B8;
            }
            .tt-jb-card-avatar {
                width: 13px; height: 13px; border-radius: 50%;
                display: inline-flex; align-items: center; justify-content: center;
                color: #fff; font-size: 6.5px; font-weight: 700;
            }
            .tt-jb-col-add {
                font-size: 8px;
                color: #94A3B8;
                font-weight: 500;
                padding: 4px;
                text-align: center;
                margin-top: 4px;
            }
            .tt-jb-col-5 .tt-jb-col-add {
                background: rgba(99,102,241,0.06);
                border-radius: 4px;
                color: #6366F1;
            }

            @media (max-width: 1100px) {
                .tt-jb { padding: 28px 40px; }
                .tt-jb-wrap { grid-template-columns: 1fr; gap: 20px; }
                .tt-jb-h { font-size: 30px; }
            }
            @media (max-width: 768px) {
                .tt-jb { padding: 22px 20px; margin: 16px 16px; border-radius: 18px; }
                .tt-jb-h { font-size: 24px; }
                .tt-jb-sub { font-size: 15px; }
                .tt-jb-btn { padding: 12px 22px; font-size: 14px; }
                .tt-jb-mk-body { grid-template-columns: 1fr; }
                .tt-jb-mk-nav { display: none; }
                .tt-jb-mk-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
                .tt-jb-board {
                    display: flex;
                    gap: 8px;
                    grid-template-columns: none;
                    min-width: 700px;
                }
                .tt-jb-col { min-width: 120px; flex: 0 0 auto; }
                .tt-jb-card-title { font-size: 9px; }
                .tt-jb-card-tag { font-size: 7.5px; }
            }
            .tt-vs {
                padding: 90px 20px 90px;
                background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 50%, #EEF2FF 100%);
            }
            .tt-vs-wrap { max-width: 1200px; margin: 0 auto; }
            .tt-vs-head { text-align: center; margin-bottom: 50px; }
            .tt-vs-head h2 {
                font-family: 'Ubuntu', sans-serif;
                font-size: 34px; font-weight: 700;
                color: #0F172A; letter-spacing: -0.5px;
                line-height: 1.25; margin: 0 0 18px;
                max-width: 880px; margin-left: auto; margin-right: auto;
            }
            .tt-vs-head h2 .em { color: #6366F1; }
            .tt-vs-head p {
                font-family: 'Ubuntu', sans-serif;
                font-size: 16px; color: #475569;
                line-height: 1.7; max-width: 780px;
                margin: 0 auto;
            }
            .tt-vs-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 24px;
            }
            .tt-vs-card {
                border-radius: 22px;
                padding: 44px 38px 40px;
                position: relative;
                overflow: hidden;
            }
            .tt-vs-old {
                background: #fff;
                border: 1px solid #E2E8F0;
                box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
            }
            .tt-vs-new {
                background: linear-gradient(135deg, #4F46E5 0%, #6366F1 35%, #8B5CF6 70%, #A78BFA 100%);
                box-shadow: 0 30px 60px rgba(79, 70, 229, 0.25);
                color: #fff;
            }
            .tt-vs-new::before {
                content: ''; position: absolute;
                top: -120px; right: -120px;
                width: 320px; height: 320px;
                background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 65%);
                pointer-events: none;
            }
            .tt-vs-new::after {
                content: ''; position: absolute;
                bottom: -100px; left: -80px;
                width: 280px; height: 280px;
                background: radial-gradient(circle, rgba(14,165,233,0.25) 0%, transparent 65%);
                pointer-events: none;
            }
            .tt-vs-title {
                font-family: 'Ubuntu', sans-serif;
                font-size: 26px; font-weight: 700;
                text-align: center;
                margin: 0 0 36px;
                letter-spacing: -0.4px;
                line-height: 1.3;
                position: relative; z-index: 1;
            }
            .tt-vs-old .tt-vs-title { color: #0F172A; }
            .tt-vs-new  .tt-vs-title { color: #fff; }
            .tt-vs-list {
                list-style: none; padding: 0; margin: 0;
                display: flex; flex-direction: column; gap: 16px;
                position: relative; z-index: 1;
            }
            .tt-vs-li {
                display: flex; align-items: flex-start; gap: 14px;
                font-family: 'Ubuntu', sans-serif;
                font-size: 15px; line-height: 1.55;
            }
            .tt-vs-li-ico {
                width: 36px; height: 36px;
                border-radius: 10px;
                display: flex; align-items: center; justify-content: center;
                font-size: 14px;
                flex-shrink: 0;
            }
            .tt-vs-old .tt-vs-li { color: #1E293B; }
            .tt-vs-old .tt-vs-li-ico {
                background: rgba(99, 102, 241, 0.08);
                color: #6366F1;
            }
            .tt-vs-new .tt-vs-li { color: rgba(255,255,255,0.95); font-weight: 500; }
            .tt-vs-new .tt-vs-li-ico {
                background: rgba(255, 255, 255, 0.18);
                color: #fff;
                backdrop-filter: blur(8px);
            }
            .tt-vs-li-text { padding-top: 7px; }

            @media (max-width: 960px) {
                .tt-vs { padding: 70px 16px 70px; }
                .tt-vs-head h2 { font-size: 26px; }
                .tt-vs-head p { font-size: 15px; }
                .tt-vs-grid { grid-template-columns: 1fr; gap: 20px; }
                .tt-vs-card { padding: 32px 26px; }
                .tt-vs-title { font-size: 22px; margin-bottom: 28px; }
            }
            @media (max-width: 600px) {
                .tt-vs { padding: 60px 14px 60px; }
                .tt-vs-head h2 { font-size: 22px; }
                .tt-vs-card { padding: 28px 22px; }
                .tt-vs-li { font-size: 14px; gap: 12px; }
                .tt-vs-li-ico { width: 32px; height: 32px; font-size: 12px; }
            }
            .tt-uc { padding: 90px 20px 90px; background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%); }
            .tt-uc-wrap { max-width: 1200px; margin: 0 auto; }
            .tt-uc-head { text-align: center; margin-bottom: 50px; }
            .tt-uc-eyebrow {
                font-family: 'Ubuntu', sans-serif;
                font-size: 11px; font-weight: 600;
                color: #6366F1; text-transform: uppercase;
                letter-spacing: 1.5px;
                background: rgba(99, 102, 241, 0.08);
                padding: 6px 14px; border-radius: 999px;
                display: inline-block; margin-bottom: 16px;
            }
            .tt-uc-h {
                font-family: 'Ubuntu', sans-serif;
                font-size: 34px; font-weight: 700;
                color: #0F172A; letter-spacing: -0.5px;
                line-height: 1.25; margin: 0 0 16px;
                max-width: 760px; margin-left: auto; margin-right: auto;
            }
            .tt-uc-h .em { color: #6366F1; }
            .tt-uc-sub {
                font-family: 'Ubuntu', sans-serif;
                font-size: 16px; color: #475569;
                line-height: 1.65; max-width: 720px;
                margin: 0 auto;
            }
            .tt-uc-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .tt-uc-card {
                background: #FAFBFE;
                border: 1px solid #ECEEF5;
                border-radius: 18px;
                padding: 28px 26px;
                font-family: 'Ubuntu', sans-serif;
                transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
                position: relative;
                overflow: hidden;
            }
            .tt-uc-card:hover {
                transform: translateY(-4px);
                background: #fff;
                border-color: rgba(99, 102, 241, 0.25);
                box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
            }
            .tt-uc-ico {
                width: 52px; height: 52px;
                border-radius: 14px;
                display: flex; align-items: center; justify-content: center;
                font-size: 20px;
                margin-bottom: 20px;
            }
            .tt-uc-title {
                font-size: 18px; font-weight: 700;
                color: #0F172A;
                margin: 0 0 10px;
                letter-spacing: -0.2px;
            }
            .tt-uc-desc {
                font-size: 14.5px; color: #475569;
                line-height: 1.65;
                margin: 0 0 16px;
            }
            .tt-uc-tags {
                display: flex; gap: 6px; flex-wrap: wrap;
            }
            .tt-uc-tag {
                font-size: 11px; font-weight: 600;
                color: #6366F1;
                background: rgba(99, 102, 241, 0.08);
                padding: 4px 10px; border-radius: 999px;
            }
            @media (max-width: 960px) {
                .tt-uc { padding: 70px 16px 70px; }
                .tt-uc-h { font-size: 26px; }
                .tt-uc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            }
            @media (max-width: 600px) {
                .tt-uc-h { font-size: 22px; }
                .tt-uc-grid { grid-template-columns: 1fr; }
                .tt-uc-card { padding: 24px 22px; }
            }
            .tt-jpt { padding: 90px 20px 0; background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FF 60%, #EEF2FF 100%); position: relative; }
            .tt-jpt-wrap { max-width: 1200px; margin: 0 auto; }
            .tt-jpt-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; margin-bottom: 48px; }
            .tt-jpt-content { font-family: 'Ubuntu', sans-serif; }
            .tt-jpt-content h2 {
                font-size: 36px; font-weight: 700; line-height: 1.25;
                color: #0F172A; letter-spacing: -0.6px; margin: 0 0 20px;
            }
            .tt-jpt-content h2 .em { color: #6366F1; }
            .tt-jpt-content p {
                font-size: 16px; color: #475569; line-height: 1.7;
                margin: 0 0 14px;
            }
            .tt-jpt-content .lead { font-weight: 600; color: #0F172A; margin-top: 6px; }

            /* Right visual */
            .tt-jpt-visual { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; }
            .tt-jpt-card {
                background: #fff; border-radius: 20px;
                box-shadow: 0 30px 60px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.04);
                padding: 26px 24px; width: 100%; max-width: 380px;
                font-family: 'Ubuntu', sans-serif; position: relative; z-index: 2;
            }
            .tt-jpt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
            .tt-jpt-card-title { font-size: 13px; font-weight: 700; color: #0F172A; }
            .tt-jpt-card-trend { font-size: 11px; font-weight: 700; color: #059669; background: rgba(16,185,129,0.1); padding: 4px 9px; border-radius: 999px; }
            .tt-jpt-big {
                display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
            }
            .tt-jpt-big-num { font-size: 56px; font-weight: 800; color: #0F172A; line-height: 1; letter-spacing: -1.5px; }
            .tt-jpt-big-lbl { font-size: 14px; color: #64748B; font-weight: 500; }
            .tt-jpt-bar-mini { background: #F1F5F9; height: 6px; border-radius: 999px; margin: 18px 0 6px; overflow: hidden; }
            .tt-jpt-bar-fill { height: 100%; background: linear-gradient(90deg, #6366F1, #8B5CF6); border-radius: 999px; width: 78%; }
            .tt-jpt-bar-row { display: flex; justify-content: space-between; font-size: 11px; color: #94A3B8; font-weight: 500; }
            .tt-jpt-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #F1F5F9; }
            .tt-jpt-kpi { text-align: center; }
            .tt-jpt-kpi strong { display: block; font-size: 18px; font-weight: 700; color: #0F172A; }
            .tt-jpt-kpi small { font-size: 10px; color: #94A3B8; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

            /* Floating elements */
            .tt-jpt-float { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(15,23,42,0.1); padding: 12px 14px; font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; gap: 10px; z-index: 3; }
            .tt-jpt-float-1 { top: 20px; left: 0; }
            .tt-jpt-float-2 { bottom: 40px; right: 8px; }
            .tt-jpt-float-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
            .tt-jpt-float strong { font-size: 13px; color: #0F172A; line-height: 1.2; display: block; }
            .tt-jpt-float small { font-size: 11px; color: #64748B; }

            /* Benefits row */
            .tt-jpt-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 60px; }
            .tt-jpt-benefit {
                background: #fff; border: 1px solid #E2E8F0;
                border-radius: 16px; padding: 28px 26px;
                box-shadow: 0 4px 14px rgba(15,23,42,0.04);
                transition: transform .2s, box-shadow .2s;
            }
            .tt-jpt-benefit:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 40px rgba(15,23,42,0.08);
            }
            .tt-jpt-benefit-ico {
                width: 52px; height: 52px;
                border-radius: 14px;
                background: rgba(99,102,241,0.1);
                color: #6366F1;
                display: flex; align-items: center; justify-content: center;
                font-size: 20px;
                margin-bottom: 22px;
            }
            .tt-jpt-benefit h3 {
                font-family: 'Ubuntu', sans-serif;
                font-size: 18px; font-weight: 700;
                color: #6366F1;
                margin: 0 0 12px;
                line-height: 1.35;
            }
            .tt-jpt-benefit p {
                font-family: 'Ubuntu', sans-serif;
                font-size: 14.5px; color: #475569;
                line-height: 1.65; margin: 0;
            }

            /* Bottom CTA banner */
            .tt-jpt-banner {
                background: linear-gradient(95deg, #4F46E5 0%, #6366F1 45%, #8B5CF6 100%);
                border-radius: 18px; padding: 22px 32px;
                display: flex; justify-content: center; align-items: center;
                gap: 28px;
                position: relative; overflow: hidden;
                margin-bottom: 0;
                transform: translateY(50%);
                box-shadow: 0 30px 60px rgba(79, 70, 229, 0.25);
                text-align: center;
            }
            .tt-jpt-banner::before {
                content: ''; position: absolute; inset: 0;
                background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%);
                pointer-events: none;
            }
            .tt-jpt-banner-text {
                font-family: 'Ubuntu', sans-serif;
                font-size: 22px; font-weight: 700;
                color: #fff; letter-spacing: -0.3px;
                position: relative; z-index: 1;
                line-height: 1.3;
                text-align: center;
            }
            .tt-jpt-banner-btn {
                background: #0F172A; color: #fff;
                font-family: 'Ubuntu', sans-serif;
                font-size: 15px; font-weight: 600;
                padding: 14px 26px; border-radius: 12px;
                text-decoration: none;
                display: inline-flex; align-items: center; gap: 8px;
                position: relative; z-index: 1;
                transition: background .2s, transform .2s;
                white-space: nowrap;
            }
            .tt-jpt-banner-btn:hover { background: #000; transform: translateY(-2px); }

            @media (max-width: 960px) {
                .tt-jpt-top { grid-template-columns: 1fr; gap: 36px; }
                .tt-jpt-benefits { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
                .tt-jpt-content h2 { font-size: 28px; }
                .tt-jpt-banner { flex-direction: column; text-align: center; padding: 24px 22px; transform: translateY(40%); }
                .tt-jpt-banner-text { font-size: 18px; }
                .tt-jpt-visual { min-height: 320px; }
                .tt-jpt-big-num { font-size: 46px; }
            }
            @media (max-width: 600px) {
                .tt-jpt { padding: 60px 16px 0; }
                .tt-jpt-content h2 { font-size: 24px; }
                .tt-jpt-card { max-width: 320px; padding: 22px 20px; }
                .tt-jpt-float-1 { top: 0; left: -4px; }
                .tt-jpt-float-2 { bottom: 16px; right: -4px; }
            }
            .tt-int {
                padding: 90px 20px 90px;
                background: #FAFBFE;
            }
            .tt-int-wrap { max-width: 1280px; margin: 0 auto; }
            .tt-int-head { text-align: center; margin-bottom: 48px; }
            .tt-int-eyebrow {
                font-family: 'Ubuntu', sans-serif;
                font-size: 11px; font-weight: 700;
                color: #6366F1;
                text-transform: uppercase;
                letter-spacing: 2px;
                display: block;
                margin-bottom: 18px;
            }
            .tt-int-h {
                font-family: 'Ubuntu', sans-serif;
                font-size: 38px; font-weight: 700;
                color: #0F172A; letter-spacing: -0.6px;
                line-height: 1.2; margin: 0 0 18px;
            }
            .tt-int-h .em { color: #6366F1; }
            .tt-int-sub {
                font-family: 'Ubuntu', sans-serif;
                font-size: 16px; color: #475569;
                line-height: 1.7;
                max-width: 640px;
                margin: 0 auto;
            }
            .tt-int-grid {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 16px;
            }
            .tt-int-card {
                background: #fff;
                border: 1px solid #ECEEF5;
                border-radius: 16px;
                padding: 30px 22px 24px;
                text-align: center;
                font-family: 'Ubuntu', sans-serif;
                transition: transform .2s, border-color .2s, box-shadow .2s;
            }
            .tt-int-card:hover {
                transform: translateY(-4px);
                border-color: rgba(99, 102, 241, 0.22);
                box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
            }
            .tt-int-logo {
                height: 52px;
                display: flex; align-items: center; justify-content: center;
                margin-bottom: 18px;
            }
            .tt-int-logo img {
                max-height: 48px;
                max-width: 60px;
                width: auto;
                height: auto;
                object-fit: contain;
            }
            .tt-int-name {
                font-size: 17px;
                font-weight: 700;
                color: #0F172A;
                letter-spacing: -0.2px;
                margin-bottom: 6px;
            }
            .tt-int-desc {
                font-size: 13.5px;
                color: #64748B;
                line-height: 1.45;
            }
            @media (max-width: 1100px) {
                .tt-int-grid { grid-template-columns: repeat(4, 1fr); }
            }
            @media (max-width: 900px) {
                .tt-int-grid { grid-template-columns: repeat(3, 1fr); }
                .tt-int-h { font-size: 30px; }
            }
            @media (max-width: 640px) {
                .tt-int { padding: 70px 16px 70px; }
                .tt-int-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
                .tt-int-h { font-size: 24px; }
                .tt-int-card { padding: 22px 16px 18px; }
                .tt-int-name { font-size: 15px; }
                .tt-int-desc { font-size: 12.5px; }
            }
        .tt-mobile-cta{display:none}
        @media(max-width:768px){
            .tt-mobile-cta{
                display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9998;
                background:#0066FF;color:#fff;padding:14px 16px;
                font-family:'Ubuntu',sans-serif;font-size:15px;font-weight:600;
                text-decoration:none;justify-content:center;align-items:center;gap:10px;
                box-shadow:0 -6px 20px rgba(0,102,255,0.25);
                letter-spacing:.3px;
            }
            .tt-mobile-cta i{font-size:13px}
            body{padding-bottom:60px}
        }

        /* =========================================================
           MOBILE & NARROW-VIEWPORT FIXES
           Prevents H2 overflow, fixes Features visual collapse,
           and ensures every section renders cleanly down to 320px.
           ========================================================= */

        /* Universal: kill any horizontal overflow risk */
        body, main, section { max-width: 100%; }
        h1, h2, h3 {
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        /* Features section H2 — was clipping on both sides on mobile */
        @media (max-width: 768px) {
            .features-section.tt-acc-section {
                padding-left: 16px;
                padding-right: 16px;
            }
            .features-header {
                padding: 0 4px;
            }
            .features-title {
                font-size: clamp(22px, 5.5vw, 32px) !important;
                line-height: 1.25 !important;
                padding: 0;
                word-break: break-word;
            }
            .features-title .hero-highlight {
                display: inline;
                white-space: normal;
            }
        }

        /* Features section: ensure both columns are full-width on mobile.
           Without this the flex: 1.05 sizing from desktop stays applied
           and the visual panel can overflow horizontally — what you saw
           in the screenshot (only dot fragments visible). */
        @media (max-width: 960px) {
            .tt-acc-group > .tt-acc-visual,
            .tt-acc-group > .tt-acc-list {
                flex: 0 0 auto;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }
        }

        /* Features section: visual area at small widths
           — was showing fragments because absolute-positioned
             mockups overflow when the container shrinks too much. */
        @media (max-width: 768px) {
            .tt-acc-visual {
                min-height: 380px;
                padding: 22px 16px;
                width: 100%;
                box-sizing: border-box;
            }
            .tt-acc-vis {
                inset: 22px 16px;
                width: auto;
            }
            .vis-card {
                max-width: 100%;
                width: 100%;
                font-size: 12px;
                box-sizing: border-box;
            }
            .vis-card-title {
                font-size: 13px;
            }
            .vis-row {
                font-size: 11px;
                gap: 8px;
            }
            .vis-pill, .vis-due {
                font-size: 9.5px;
            }
            .vis-avatar {
                width: 20px; height: 20px; font-size: 9px;
            }
            .vis-tabs { flex-wrap: wrap; gap: 6px; }
            .vis-tab { padding: 4px 8px; font-size: 10.5px; }
        }
        @media (max-width: 480px) {
            .tt-acc-visual { min-height: 340px; padding: 18px 12px; }
            .tt-acc-vis { inset: 18px 12px; }
            .features-title { font-size: 20px !important; }
            .vis-card { padding: 16px; }
            .vis-bar-row { grid-template-columns: 70px 1fr 36px; gap: 6px; font-size: 10px; }
            .vis-bar-name { font-size: 10px; }
            .vis-kpi-grid { gap: 6px; }
            .vis-kpi { padding: 8px; }
            .vis-kpi h3 { font-size: 14px; }
        }

        /* Every other H2 across the page — same overflow protection */
        @media (max-width: 600px) {
            .tt-fh-title,
            .tt-vs-head h2,
            .tt-uc-h,
            .tt-jpt-content h2,
            .tt-int-h,
            .tt-jb-h,
            .support-title,
            .pricing-title,
            .smarter-title,
            .faq-title,
            .final-cta-headline {
                word-break: break-word;
                hyphens: auto;
                padding-left: 4px;
                padding-right: 4px;
            }
        }

        /* Pricing title: allow wrap on every screen (override nowrap from time-tracker/style.css) */
        main .pricing-section h2.pricing-title {
            white-space: normal !important;
            overflow-wrap: anywhere;
            max-width: 100%;
        }
        .pricing-header {
            width: 100%;
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;
        }

        /* Container padding: ensure no section hugs the edge on mobile */
        @media (max-width: 600px) {
            .tt-container,
            .tt-feat-inner,
            .tt-jpt-wrap,
            .tt-vs-wrap,
            .tt-uc-wrap,
            .tt-int-wrap,
            .tt-cmp-wrap {
                padding-left: 4px;
                padding-right: 4px;
            }
        }

        /* =========================================================
           PRICING — project-management-matched structure
           4 paid cards + separate Free bar + Save 20% badge + tier subtitle
           ========================================================= */

        /* Plan category subtitle (e.g., "Small Teams", "Scaling Teams") */
        .price-card-category {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #6366F1;
            margin-top: -4px;
            margin-bottom: 16px;
            letter-spacing: 0.3px;
        }

        /* Save 20% badge inside Yearly button */
        .billing-btn .save-badge {
            display: inline-block;
            background: rgba(99, 102, 241, 0.15);
            color: #6366F1;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 999px;
            margin-left: 6px;
            letter-spacing: 0.2px;
        }
        .billing-btn.billing-active .save-badge {
            background: rgba(255, 255, 255, 0.28);
            color: #fff;
        }

        /* "On Request" label for Enterprise tier */
        .price-enterprise {
            font-size: 30px;
            font-weight: 700;
            color: #0F172A;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        /* Features section inside each card */
        .price-features-section {
            margin-top: 22px;
            padding-top: 22px;
            border-top: 1px solid #F1F5F9;
        }
        .price-features-label {
            font-size: 13px;
            font-weight: 700;
            color: #0F172A;
            margin: 0 0 14px;
        }

        /* Outlined CTA variant for Enterprise "Contact us" */
        .price-cta-outline {
            background: transparent !important;
            color: #6366F1 !important;
            border: 1.5px solid #6366F1 !important;
        }
        .price-cta-outline:hover {
            background: rgba(99, 102, 241, 0.06) !important;
        }

        /* 4-card paid grid (replaces default 4-equal grid for proper spacing) */
        .pricing-cards-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        /* Free plan bar — horizontal layout below paid cards */
        .pricing-free-bar {
            display: grid;
            grid-template-columns: 220px 1fr 220px;
            gap: 30px;
            align-items: center;
            background: #FAFBFE;
            border: 1px solid #E2E8F0;
            border-radius: 18px;
            padding: 28px 36px;
            margin-top: 30px;
            font-family: 'Ubuntu', sans-serif;
        }
        .free-bar-left h3 {
            font-size: 24px;
            font-weight: 700;
            margin: 0;
            color: #0F172A;
        }
        .free-category {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #6366F1;
            margin: 4px 0 10px;
            letter-spacing: 0.3px;
        }
        .free-bar-amount {
            font-size: 28px;
            font-weight: 700;
            color: #0F172A;
            line-height: 1;
            margin-bottom: 6px;
        }
        .free-bar-amount .price-currency {
            font-size: 18px;
            color: #64748B;
            margin-right: 2px;
        }
        .free-features-label {
            font-size: 11px;
            font-weight: 700;
            color: #64748B;
            margin: 0 0 10px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .free-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .free-features-grid ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .free-features-grid li {
            font-size: 13.5px;
            color: #475569;
            padding: 5px 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.4;
        }
        .free-features-grid li i {
            color: #10B981;
            font-size: 11px;
            margin-top: 4px;
            flex-shrink: 0;
        }
        .free-bar-right {
            text-align: right;
        }

        /* Responsive: pricing grid + free bar */
        @media (max-width: 1100px) {
            .pricing-cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 900px) {
            .pricing-free-bar {
                grid-template-columns: 1fr;
                gap: 22px;
                text-align: center;
                padding: 24px 22px;
            }
            .free-bar-right { text-align: center; }
            .free-features-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
            .pricing-cards-4 { grid-template-columns: 1fr !important; }
            .free-features-grid { grid-template-columns: 1fr; gap: 8px; }
            .price-enterprise { font-size: 24px; }
        }

        /* =========================================================
           CURRENCY TOGGLE — INR / USD selector in pricing section
           ========================================================= */
        .curr-toggle {
            display: inline-flex;
            gap: 4px;
            background: #F1F5F9;
            border-radius: 999px;
            padding: 4px;
            margin: 0 auto 14px;
            font-family: 'Ubuntu', sans-serif;
        }
        .pricing-container .curr-toggle {
            display: flex;
            justify-content: center;
            max-width: max-content;
            margin-left: auto;
            margin-right: auto;
        }
        .curr-btn {
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 600;
            color: #64748B;
            padding: 8px 18px;
            border-radius: 999px;
            cursor: pointer;
            transition: background .2s, color .2s, box-shadow .2s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .curr-btn .curr-sym {
            font-weight: 700;
            font-size: 14px;
        }
        .curr-btn:hover {
            color: #0F172A;
        }
        .curr-btn.curr-active {
            background: #fff;
            color: #6366F1;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
        }
        /* Animate price value change */
        .price-value.price-changing {
            opacity: 0.3;
            transform: translateY(-3px);
            transition: opacity .15s ease, transform .15s ease;
        }
        .price-value {
            transition: opacity .2s ease, transform .2s ease;
            display: inline-block;
        }

        /* =========================================================
           HERO TASK PANEL — fix name truncation + polish
           Overrides time-tracker/style.css which has white-space:nowrap
           on .tl-task-name (causing "Q2 Launch P..." truncation).
           ========================================================= */
        .tl-task-card {
            padding: 14px 9px 12px;
            min-height: 130px;
            justify-content: flex-start;
        }
        .tl-task-icon {
            width: 36px;
            height: 36px;
            font-size: 14px;
            margin-bottom: 2px;
        }
        .tl-task-name {
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: center;
            font-size: 12px;
            line-height: 1.3;
            min-height: 32px;
            padding: 0 2px;
            word-break: break-word;
            hyphens: auto;
        }
        .tl-task-dur {
            font-size: 11px;
            text-align: center;
            justify-content: center;
            color: #64748B;
        }
        .tl-task-badge {
            font-size: 9.5px;
            padding: 3px 8px;
            margin-top: 2px;
        }
        .tl-cards {
            gap: 8px;
            padding: 0 2px;
        }
        .tl-task-stem {
            margin-top: 4px;
        }
        /* Hover lift slightly more subtle */
        .tl-task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
        }
        @media (max-width: 480px) {
            .tl-task-card { padding: 10px 6px 8px; min-height: 110px; }
            .tl-task-icon { width: 30px; height: 30px; font-size: 12px; }
            .tl-task-name { font-size: 10.5px; min-height: 26px; }
            .tl-task-dur { font-size: 9.5px; }
        }