<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Primary Meta Tags -->
    <title>IV by InstantViews — the YouTube growth coach that works on your channel</title>
    <meta name="title" content="IV by InstantViews — the YouTube growth coach that works on your channel">
    <meta name="description" content="Connect your YouTube channel. IV finds the exact seconds viewers leave, rewrites underperforming titles, tests thumbnails, decodes competitor uploads and does the fixes — from your own data. Free video decode included.">
        <meta name="keywords" content="youtube video analyzer, pre upload seo, youtube timestamps, click potential, hook analysis, video seo, youtube optimization, content analysis">
    
    <!-- Canonical -->
    <link rel="canonical" href="https://instantviews.net/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://instantviews.net/">
    <meta property="og:title" content="IV by InstantViews — the YouTube growth coach that works on your channel">
    <meta property="og:description" content="Connect your YouTube channel. IV finds the exact seconds viewers leave, rewrites underperforming titles, tests thumbnails, decodes competitor uploads and does the fixes — from your own data. Free video decode included.">
    <meta property="og:image" content="https://instantviews.net/assets/images/og-default.jpg">
    <meta property="og:site_name" content="InstantViews">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://instantviews.net/">
    <meta property="twitter:title" content="IV by InstantViews — the YouTube growth coach that works on your channel">
    <meta property="twitter:description" content="Connect your YouTube channel. IV finds the exact seconds viewers leave, rewrites underperforming titles, tests thumbnails, decodes competitor uploads and does the fixes — from your own data. Free video decode included.">
    <meta property="twitter:image" content="https://instantviews.net/assets/images/og-default.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32.png?v=2">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16.png?v=2">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png?v=2">

    <!-- Theme Color -->
    <meta name="theme-color" content="#FF0000" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#09090B" media="(prefers-color-scheme: dark)">

    <!-- Prevent FOUC - Must be first -->
    <script>
    (function(){
        const t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');
        document.documentElement.setAttribute('data-theme',t);
    })();
    </script>

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="preconnect" href="https://www.google-analytics.com">

    <!-- Google Analytics 4 (Async - Non-blocking) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WB1JQTY2ZL"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-WB1JQTY2ZL', {
        'send_page_view': true,
        'cookie_flags': 'SameSite=None;Secure'
    });
    </script>

    <!-- Fonts: Plus Jakarta Sans + Space Mono (with font-display: swap) -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- Critical CSS - Inlined for fastest FCP -->
    <style>
    /**
 * Critical CSS - Inlined in <head>
 * Matches current index.php design exactly
 * Contains: Variables, Base, Nav, Buttons, Hero, Analyzer, Stats
 */

/* ============================================
   DESIGN SYSTEM VARIABLES
   ============================================ */
:root {
    /* Brand Colors */
    --brand-primary: #FF0000;
    --brand-dark: #CC0000;
    --brand-light: #FF4444;

    /* Semantic Colors */
    --success: #10B981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #EF4444;
    --error-bg: rgba(239, 68, 68, 0.1);

    /* Fonts */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', 'SF Mono', 'Fira Code', monospace;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}

/* Light Theme (Default) */
[data-theme="light"], :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --bg-elevated: #FFFFFF;
    --bg-hover: #F1F5F9;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;

    --border-light: #E2E8F0;
    --border-default: #CBD5E1;
    --border-strong: #94A3B8;

    --brand-glow: rgba(255, 0, 0, 0.1);
    --brand-bg: rgba(255, 0, 0, 0.05);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.2);

    --nav-bg: rgba(255, 255, 255, 0.95);
    --card-bg: #FFFFFF;
    --input-bg: #F8FAFC;
    --input-focus-bg: #FFFFFF;

    --hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --section-alt-bg: #F8FAFC;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-elevated: #1E293B;
    --bg-hover: #334155;

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-muted: #64748B;
    --text-inverse: #0F172A;

    --border-light: #334155;
    --border-default: #475569;
    --border-strong: #64748B;

    --brand-glow: rgba(255, 68, 68, 0.15);
    --brand-bg: rgba(255, 68, 68, 0.1);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.6);

    --nav-bg: rgba(15, 23, 42, 0.95);
    --card-bg: #1E293B;
    --input-bg: #334155;
    --input-focus-bg: #1E293B;

    --hero-gradient: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    --section-alt-bg: #1E293B;
}

/* Legacy variable mapping */
:root, [data-theme="light"], [data-theme="dark"] {
    --red-primary: var(--brand-primary);
    --red-dark: var(--brand-dark);
    --red-light: var(--brand-light);
    --red-glow: var(--brand-glow);
    --red-bg: var(--brand-bg);
    --gray-50: var(--bg-secondary);
    --gray-100: var(--bg-tertiary);
    --gray-200: var(--border-light);
    --gray-300: var(--border-default);
    --gray-400: var(--text-muted);
    --gray-500: var(--text-tertiary);
    --gray-600: var(--text-secondary);
    --gray-700: var(--text-secondary);
    --gray-800: var(--text-primary);
    --gray-900: var(--text-primary);
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ============================================
   THEME TOGGLE
   ============================================ */
.theme-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    font-size: 18px;
}
.theme-toggle:hover { background: var(--bg-hover); transform: scale(1.05); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-controls-mobile { display: flex; align-items: center; gap: 8px; }
.nav-controls-mobile .theme-toggle { display: flex; }
@media (min-width: 768px) {
    .nav-cta .theme-toggle { display: flex; }
    .nav-controls-mobile { display: none; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
.animate-in { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-logo, a.nav-logo { font-size: 20px; font-weight: 800; color: var(--text-primary) !important; text-decoration: none !important; }
.nav-logo span { color: var(--brand-primary) !important; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-link, .nav .nav-link, a.nav-link {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 8px;
    background: transparent;
    position: relative;
}
.nav-link:hover, .nav .nav-link:hover, a.nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-secondary);
}
.nav-link.active, .nav .nav-link.active, a.nav-link.active {
    color: var(--brand-primary) !important;
    font-weight: 600;
}
.nav-cta { display: none; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 20px; font-size: 14px; }
.nav-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: var(--bg-tertiary); border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-md); transition: var(--transition); gap: 5px; }
.nav-hamburger:hover { background: var(--bg-hover); }
.nav-hamburger span { display: block; width: 22px; height: 3px; background: var(--text-primary); border-radius: 2px; flex-shrink: 0; transition: var(--transition); }
.nav-hamburger.active { background: var(--brand-primary); }
.nav-hamburger.active span { background: var(--text-inverse); }
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); box-shadow: var(--shadow-lg); padding: 8px; flex-direction: column; gap: 4px; z-index: 999; }
.nav-mobile.active { display: flex; animation: slideDown 0.3s ease; }
.nav-mobile a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-md); transition: var(--transition); }
.nav-mobile a:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-mobile a .nav-icon { font-size: 18px; width: 24px; text-align: center; }
.nav-mobile-divider { height: 1px; background: var(--border-light); margin: 8px 0; }
.nav-mobile .nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-lg); margin-top: 4px; }
.nav-mobile .nav-mobile-cta .btn { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; border-radius: var(--radius-md); }
.nav-mobile .nav-mobile-cta .btn.btn-primary { color: var(--text-inverse) !important; background: var(--brand-primary); }
.nav-mobile .nav-mobile-cta .btn.btn-primary:hover { color: var(--text-inverse) !important; background: var(--brand-dark); }
@media (min-width: 768px) {
    .nav-container { padding: 0 24px; height: 72px; }
    .nav-logo { font-size: 24px; }
    .nav-links { display: flex; }
    .nav-cta { display: flex; }
    .nav-hamburger { display: none; }
    .nav-mobile { display: none !important; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 10px 30px var(--brand-glow); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-outline { background: transparent; border: 2px solid var(--border-light); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--border-default); background: var(--bg-secondary); }
.btn-dark { background: var(--text-primary); color: var(--bg-primary); }
.btn-dark:hover { opacity: 0.9; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-lg); }

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 140px 24px 60px;
    text-align: center;
    background: var(--hero-gradient);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}
.hero-content { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; padding: 0 24px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-glow);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 24px;
}
.hero-badge-dot { width: 8px; height: 8px; background: var(--brand-primary); border-radius: 50%; animation: pulse 2s infinite; }
.hero-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.hero-title span { color: var(--brand-primary); }
.hero-subtitle {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* ============================================
   ANALYZER CARD
   ============================================ */
.analyzer-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-light);
}
.analyzer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.analyzer-icon {
    width: 40px;
    height: 40px;
    background: var(--brand-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.analyzer-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.analyzer-subtitle { font-size: 13px; color: var(--text-tertiary); }
.analyzer-input-wrapper { display: flex; flex-direction: column; gap: 12px; }
.analyzer-input {
    width: 100%;
    padding: 16px 18px;
    font-family: var(--font-sans);
    font-size: 15px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    outline: none;
    transition: var(--transition);
    background: var(--input-bg);
    color: var(--text-primary);
}
.analyzer-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-glow);
    background: var(--input-focus-bg);
}
.analyzer-input::placeholder { color: var(--text-muted); }
.analyzer-btn { width: 100%; padding: 16px 32px; font-size: 15px; border-radius: var(--radius-lg); }
.analyzer-hint { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-top: 12px; }
@media (min-width: 640px) { .analyzer-input-wrapper { flex-direction: row; } .analyzer-btn { width: auto; white-space: nowrap; } }

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar-modern {
    padding: 40px 24px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.stats-container { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 24px; }
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-default);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stat-icon.purple { background: rgba(139, 92, 246, 0.15); }
.stat-icon.blue { background: rgba(59, 130, 246, 0.15); }
.stat-icon.green { background: rgba(16, 185, 129, 0.15); }
.stat-card .stat-value {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-card.live .stat-value { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stat-card .live-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--success-bg);
}
@media (max-width: 640px) { .stats-container { grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-card { padding: 16px 12px; gap: 8px; } .stat-icon { width: 36px; height: 36px; font-size: 16px; } .stat-card .stat-value { font-size: 22px; } .stat-card .stat-label { font-size: 10px; } }

/* ============================================
   LOADING STATES
   ============================================ */
.analyzer-loading { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 32px; }
.analyzer-loading.active { display: flex; }
.analyzer-form.loading .analyzer-input-wrapper { display: none; }
.analyzer-form.loading .analyzer-hint { display: none; }
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-light);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.loading-text { font-size: 14px; color: var(--text-secondary); }

/* ============================================
   UTILITIES
   ============================================ */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Pro Tips Grid - 3 columns desktop, 1 column mobile */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}
    </style>

    <!-- Non-critical CSS - All Deferred for Performance -->
    <link rel="preload" href="https://instantviews.net/assets/css/main.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://instantviews.net/assets/css/components.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://instantviews.net/assets/css/tools-responsive.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://instantviews.net/assets/css/main.css?v=1.0.3">
        <link rel="stylesheet" href="https://instantviews.net/assets/css/components.css?v=1.0.3">
        <link rel="stylesheet" href="https://instantviews.net/assets/css/tools-responsive.css?v=1.0.3">
    </noscript>

    <!-- Schema.org Structured Data -->
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"InstantViews","url":"https://instantviews.net","logo":"https://instantviews.net/assets/images/logo.svg","description":"Free YouTube tools for creators - analytics, calculators, SEO optimization, and growth tools.","sameAs":["https://twitter.com/instantviews","https://youtube.com/@instantviews"]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"InstantViews","url":"https://instantviews.net","description":"Connect your YouTube channel. IV finds the exact seconds viewers leave, rewrites underperforming titles, tests thumbnails, decodes competitor uploads and does the fixes — from your own data. Free video decode included.","potentialAction":{"@type":"SearchAction","target":"https://instantviews.net/search?q={search_term_string}","query-input":"required name=search_term_string"}}</script>

    </head>
<body>
<!-- Mega Menu CSS -->
<style>
/* Brand logo icon — inline before the wordmark; does NOT alter the text/font */
.nav-logo-icon { height: 28px; width: auto; vertical-align: middle; margin-right: 8px; }
.nav-logo-icon-dark { display: none; }
[data-theme="dark"] .nav-logo-icon-light { display: none; }
[data-theme="dark"] .nav-logo-icon-dark { display: inline; }
/* Mega Menu Styles */
.nav-item {
    position: relative;
}
.nav-item-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}
.nav-item-link:hover,
.nav-item:hover .nav-item-link {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.nav-item-link .arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.nav-item:hover .arrow {
    transform: rotate(180deg);
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-light);
    padding: 20px;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
}
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
    display: grid;
    gap: 4px;
}
.mega-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.mega-menu-item:hover {
    background: var(--bg-secondary);
}
.mega-menu-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mega-menu-content {
    flex: 1;
}
.mega-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.mega-menu-desc {
    font-size: 12px;
    color: var(--text-tertiary);
}
.mega-menu-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.mega-menu-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--brand-bg);
    color: var(--brand-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.mega-menu-footer a:hover {
    background: var(--brand-primary);
    color: white;
}

/* Blog Mega Menu - Platform-segregated, 6 categories per row */
.blog-mega-menu {
    min-width: 900px;
    max-width: min(940px, 94vw);
    padding: 22px 24px;
}
.blog-platform-section { margin-bottom: 18px; }
.blog-platform-section:last-of-type { margin-bottom: 0; }
.blog-platform-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-platform-head .platform-icon { font-size: 15px; }
.blog-platform-head .platform-total {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}
.blog-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.blog-cat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.blog-cat-card:hover {
    background: var(--bg-secondary);
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}
.blog-cat-icon { font-size: 18px; line-height: 1; }
.blog-cat-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.blog-cat-count { font-size: 11px; color: var(--text-tertiary); }
@media (max-width: 1100px) {
    .blog-mega-menu { min-width: 720px; }
    .blog-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .blog-mega-menu { min-width: 280px; }
    .blog-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile Blog Expandable Section */
.nav-mobile-section {
    display: flex;
    flex-direction: column;
}
.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}
.nav-mobile-header:hover {
    background: var(--bg-secondary);
}
.nav-mobile-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.nav-mobile-section.active .nav-mobile-arrow {
    transform: rotate(180deg);
}
.nav-mobile-submenu {
    display: none;
    padding: 0 20px 10px 35px;
}
.nav-mobile-section.active .nav-mobile-submenu {
    display: block;
}
.nav-mobile-submenu a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.nav-mobile-submenu a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.nav-mobile-platform {
    padding: 10px 12px 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nav-mobile-view-all {
    margin-top: 10px;
    padding: 10px 12px !important;
    background: var(--brand-bg) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    text-align: center;
}
</style>

<!-- Navigation -->
<nav class="nav" id="nav">
    <div class="nav-container">
        <a href="/" class="nav-logo">
            <img src="/assets/images/logo-icon.png?v=2" class="nav-logo-icon nav-logo-icon-light" alt="InstantViews logo" width="24" height="30">
            <img src="/assets/images/logo-icon-white.png?v=2" class="nav-logo-icon nav-logo-icon-dark" alt="InstantViews logo" width="24" height="30">
            Instant<span>Views</span>
        </a>

        <!-- Desktop Links -->
        <div class="nav-links">
            <a href="/" class="nav-link active">Home</a>

            <!-- Tools Dropdown -->
            <div class="nav-item">
                <span class="nav-item-link">
                    Tools <span class="arrow">▼</span>
                </span>
                <div class="mega-menu">
                    <div class="mega-menu-grid">
                                                <a href="/youtube-channel-audit" class="mega-menu-item">
                            <div class="mega-menu-icon">📊</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Channel Audit</div>
                                <div class="mega-menu-desc">Analyze your channel performance</div>
                            </div>
                        </a>
                                                <a href="/youtube-subscriber-count" class="mega-menu-item">
                            <div class="mega-menu-icon">👥</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Subscriber Count</div>
                                <div class="mega-menu-desc">Live subscriber counter</div>
                            </div>
                        </a>
                                                <a href="/youtube-money-calculator" class="mega-menu-item">
                            <div class="mega-menu-icon">💰</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Money Calculator</div>
                                <div class="mega-menu-desc">Estimate your earnings</div>
                            </div>
                        </a>
                                                <a href="/youtube-monetization-checker" class="mega-menu-item">
                            <div class="mega-menu-icon">✅</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Monetization Checker</div>
                                <div class="mega-menu-desc">Check monetization status</div>
                            </div>
                        </a>
                                                <a href="/youtube-timestamp-generator" class="mega-menu-item">
                            <div class="mega-menu-icon">⏱️</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Timestamp Generator</div>
                                <div class="mega-menu-desc">Create video chapters</div>
                            </div>
                        </a>
                                                <a href="/tools/revenue-calculator" class="mega-menu-item">
                            <div class="mega-menu-icon">📈</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Revenue Calculator</div>
                                <div class="mega-menu-desc">Calculate potential revenue</div>
                            </div>
                        </a>
                                            </div>
                    <div class="mega-menu-footer">
                        <a href="/tools">View All Tools →</a>
                    </div>
                </div>
            </div>

            <a href="/blogs/" class="nav-link">Blog</a>
            <a href="/about" class="nav-link">About</a>
            <a href="/contact" class="nav-link">Contact</a>
        </div>

        <!-- Desktop CTA Buttons -->
        <div class="nav-cta">
            
            <a href="/" class="btn btn-primary">Try Free Tool</a>
        </div>

        <!-- Mobile Theme Toggle + Hamburger -->
        <div class="nav-controls-mobile">
            
            <button class="nav-hamburger" onclick="toggleMobileMenu()" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>

    <!-- Mobile Dropdown Menu -->
    <div class="nav-mobile" id="navMobile">
        <a href="/" onclick="closeMobileMenu()">
            <span class="nav-icon">🏠</span> Home
        </a>
        <a href="/tools" onclick="closeMobileMenu()">
            <span class="nav-icon">🔧</span> Tools
        </a>
        <a href="/blogs" onclick="closeMobileMenu()">
            <span class="nav-icon">📝</span> Blog
        </a>
        <a href="/about" onclick="closeMobileMenu()">
            <span class="nav-icon">ℹ️</span> About
        </a>
        <a href="/contact" onclick="closeMobileMenu()">
            <span class="nav-icon">📧</span> Contact
        </a>

        <div class="nav-mobile-divider"></div>

        <div class="nav-mobile-cta">
            <a href="/" onclick="closeMobileMenu()" class="btn btn-primary">Try Free Tool</a>
        </div>
    </div>
</nav>

<style>
/* Timestamp Generator Styles */
.timestamp-output {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.timestamp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.timestamp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.timestamp-actions {
    display: flex;
    gap: 8px;
}

.timestamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.timestamp-btn-primary {
    background: var(--brand-primary);
    color: white;
}

.timestamp-btn-primary:hover {
    background: var(--brand-secondary);
}

.timestamp-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.timestamp-btn-secondary:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.timestamp-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timestamp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    transition: all 0.2s;
}

.timestamp-item:hover {
    border-color: var(--brand-primary);
}

.timestamp-time {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary);
    background: rgba(239, 68, 68, 0.1);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 70px;
    text-align: center;
}

.timestamp-label {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
}

.timestamp-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: all 0.2s;
}

.timestamp-item:hover .timestamp-edit-btn {
    opacity: 1;
}

.timestamp-edit-btn:hover {
    color: var(--brand-primary);
}

.timestamp-preview {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    font-family: monospace;
    font-size: 14px;
    white-space: pre-wrap;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}

/* Video Info Card */
.video-info-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 16px;
    margin-bottom: 20px;
}

.video-thumbnail {
    width: 160px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.video-details {
    flex: 1;
    min-width: 0;
}

.video-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.video-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Manual Input Section */
.manual-input-section {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.manual-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.manual-input-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.add-timestamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-timestamp-btn:hover {
    background: rgba(34, 197, 94, 0.2);
}

.timestamp-input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.timestamp-input-time {
    width: 100px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: monospace;
    font-size: 14px;
    text-align: center;
}

.timestamp-input-label {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.timestamp-input-remove {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.timestamp-input-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.2s;
}

.feature-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.feature-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Tips Box */
.tips-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-top: 40px;
}

.tips-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-list {
    display: grid;
    gap: 12px;
}

.tip-item {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tip-icon {
    color: #3b82f6;
    font-weight: bold;
}

@media (max-width: 768px) {
    .video-info-card {
        flex-direction: column;
    }
    .video-thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    .timestamp-input-row {
        flex-wrap: wrap;
    }
    .timestamp-input-time {
        width: 100%;
    }
    .timestamp-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .timestamp-actions {
        width: 100%;
    }
    .timestamp-actions .timestamp-btn {
        flex: 1;
        justify-content: center;
    }
}
</style>

<!-- Hero Section -->
<section class="hero" id="generator">
    <div class="hero-content animate-in">
        <div class="hero-badge">
            <span class="hero-badge-dot"></span>
            IV &bull; For YouTube creators &bull; Works on your connected channel
        </div>
        <h1 class="hero-title">Your channel already has the answers.<br><span>IV reads them.</span></h1>
        <p class="hero-subtitle">Connect your YouTube channel. IV watches your videos, finds the exact seconds viewers leave, rewrites what is underperforming, and does the fixes &mdash; from your own data, never a guess.</p>

        <div class="hero-stats" style="display: flex; justify-content: center; gap: 32px; margin-bottom: 28px; flex-wrap: wrap;">
            <div style="text-align: center;"><div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">10</div><div style="font-size: 13px; color: var(--text-muted);">Tools, one plan</div></div>
            <div style="text-align: center;"><div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">Yours</div><div style="font-size: 13px; color: var(--text-muted);">The only data source</div></div>
            <div style="text-align: center;"><div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">Every</div><div style="font-size: 13px; color: var(--text-muted);">Change reversible</div></div>
            <div style="text-align: center;"><div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">$12</div><div style="font-size: 13px; color: var(--text-muted);">First week</div></div>
        </div>

        <div class="cta-buttons" style="justify-content:center;margin-bottom:34px;">
            <a href="https://growth.instantviews.net/signup" class="btn btn-primary btn-lg">Start IV &mdash; $12 first week</a>
            <a href="#tools" class="btn btn-secondary btn-lg">See what it does</a>
        </div>

        <div class="analyzer-card">
            <div class="analyzer-header">
                <div class="analyzer-icon" style="display:flex;align-items:center;justify-content:center;color:var(--brand-primary)"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49 49 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49 49 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg></div>
                <div>
                    <div class="analyzer-title">Free Video Decode</div>
                    <div class="analyzer-subtitle">IV watches the whole video and breaks down the hook, the structure with timestamps, the pacing and the formula</div>
                </div>
            </div>
            <div class="analyzer-form" id="analyzerForm">
                <div class="analyzer-input-wrapper">
                    <input type="text" id="videoUrl" class="analyzer-input" placeholder="Paste any YouTube video link…" autocomplete="off">
                    <button class="btn btn-primary analyzer-btn" onclick="if(window.ivpOpen){ivpOpen(document.getElementById('videoUrl').value);}else{analyzeVideo();}">Decode it free</button>
                </div>
                <div class="analyzer-hint">One free decode a day, no login. Takes about two minutes — it is a real watch, not an estimate.</div>
                <div class="analyzer-loading" id="analyzerLoading">
                    <div class="spinner"></div>
                    <div class="loading-text">Analyzing video...</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Inline results (stories.gwaa.net pattern) -->
<div id="ivResults" class="iv-results"></div>

<!-- What You Get Section -->
<section class="section section-white" id="tools">
    <div class="section-header">
        <span class="section-badge">What IV does</span>
        <h2 class="section-title">Ten tools. Four things you actually want.</h2>
        <p class="section-subtitle">Every tool works from your connected channel or from the video itself. Nothing is estimated, and every change to your channel is reviewed by you and can be rolled back.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="features-grid iv-grid-2">
            <div class="feature-card iv-group">
                <div class="feature-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M12 6a6 6 0 0 1 6 6"/><path d="M12 2a10 10 0 0 1 10 10"/></svg></div>
                <div class="feature-title">Know what's working — before you shoot</div>
                <div class="feature-desc">See the formula behind videos that are already winning, rewritten for your channel.</div>
                <ul class="iv-tools"><li><b>Channel Radar</b><span>Watch any channel. Every new upload is decoded automatically — their formula, and your version.</span></li><li><b>Video Decode</b><span>Paste any video for the same breakdown, on demand.</span></li></ul>
                <div class="iv-proof"><i></i>Radar found a new upload from a channel you watch — decoded, your version ready.</div>
            </div>
            <div class="feature-card iv-group">
                <div class="feature-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 8-5 5-3-3-4 4"/></svg></div>
                <div class="feature-title">Fix the videos you already have</div>
                <div class="feature-desc">Your back-catalog is your biggest untapped traffic. IV finds what is underperforming and fixes it.</div>
                <ul class="iv-tools"><li><b>Retention</b><span>The exact seconds viewers leave, what is on screen there, and the fix.</span></li><li><b>Back-Catalog</b><span>Old titles, descriptions and tags rewritten. Review, edit, apply, roll back.</span></li><li><b>Thumbnail Test</b><span>A new thumbnail in your style, swapped live, measured against the rest of your channel.</span></li></ul>
                <div class="iv-proof"><i></i>Thumbnail test, day 9: +38% views/day against the channel's +4%. Net +34%.</div>
            </div>
            <div class="feature-card iv-group">
                <div class="feature-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
                <div class="feature-title">Run the channel without the grind</div>
                <div class="feature-desc">The daily work that eats your creating time — done in your voice, with you in control.</div>
                <ul class="iv-tools"><li><b>Comments</b><span>Replies drafted in your voice, moderation, and viewer questions mined into video ideas.</span></li><li><b>Playlists</b><span>Every video filed where it belongs. Dead playlists flagged. Descriptions written.</span></li><li><b>Upload &amp; Schedule</b><span>Publish through IV.</span></li></ul>
                <div class="iv-proof"><i></i>14 viewer questions this week &rarr; 3 video ideas, ranked by how often they were asked.</div>
            </div>
            <div class="feature-card iv-group">
                <div class="feature-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div>
                <div class="feature-title">Learn from every upload</div>
                <div class="feature-desc">Each video you publish teaches the next one. IV makes sure the lesson lands.</div>
                <ul class="iv-tools"><li><b>Upload Autopsy</b><span>New upload detected &rarr; craft review the same day &rarr; retention follow-up once the data settles.</span></li><li><b>Best Time</b><span>Your real best hour and day from your own uploads, in your timezone. Shorts and long-form read separately.</span></li></ul>
                <div class="iv-proof"><i></i>Long-form: Tuesday 6 pm. Shorts: Saturday 11 am. Two patterns, not one.</div>
            </div>
        </div>

        <div class="iv-proofrow">
            <div class="iv-shot">
                <div class="iv-shot-bar"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 8-5 5-3-3-4 4"/></svg> Retention &nbsp;&middot;&nbsp; <b>How I Edit Faster (12:48)</b></div>
                <svg class="iv-curve" viewBox="0 0 400 110" preserveAspectRatio="none"><path d="M0 8 C40 14,60 26,90 30 S140 40,160 42 L175 44 L182 76 C200 80,240 84,280 88 S360 98,400 106" fill="none" stroke="var(--text-primary)" stroke-width="2.5"/><line x1="178" y1="0" x2="178" y2="110" stroke="var(--brand-primary)" stroke-width="1.5" stroke-dasharray="4 4"/><circle cx="178" cy="60" r="5" fill="var(--brand-primary)"/></svg>
                <div class="iv-cliff"><div class="iv-cliff-t">4:12<small>31% left here</small></div><p><b>You cut to a static slide and read it aloud for 40 seconds.</b> The energy of the first four minutes drops to zero and the eye has nothing to hold.</p></div>
                <div class="iv-fix"><b>Fix</b> Keep the camera on you and put the three points on screen as overlays, one at a time, while you talk.</div>
            </div>
            <div class="iv-chat">
                <div class="iv-chat-k"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg> In every tool</div>
                <h3>An analyst that sees exactly what you see.</h3>
                <p>Every tool has its own chat. It reads the data on your screen &mdash; the real seconds, titles and numbers &mdash; and remembers that tool's history.</p>
                <div class="iv-msg u">Why is 4:12 the biggest drop and not the intro?</div>
                <div class="iv-msg a">The intro loses 9% across 0:00&ndash;0:30, normal for a 12-minute video. <b>4:12 loses 31% in 40 seconds</b> &mdash; the static slide. Fix that first; the intro is fine.</div>
            </div>
        </div>
    </div>
</section>

<!-- 99 Languages Section -->
<section class="section section-gray">
    <div class="section-header">
        <span class="section-badge">Multilingual</span>
        <h2 class="section-title">Timestamp Generator: 99 Languages + Mixed Mode</h2>
        <p class="section-subtitle">The only timestamp tool that truly understands multilingual content</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 32px; margin-bottom: 24px;">
            <p style="color: var(--text-secondary); line-height: 1.8; margin-bottom: 24px;">Perfect for creators who mix languages in their videos. Our AI understands context across languages and generates accurate chapters regardless of the language spoken.</p>
            <div style="display: grid; gap: 16px;">
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;"><span id="localLangLabel">Local Language</span> Output</div>
                    <code style="font-size: 14px; color: var(--brand-primary);" id="localLangExample">0:00 - Introduction | 1:30 - Ingredients Needed</code>
                </div>
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;">English Output</div>
                    <code style="font-size: 14px; color: var(--brand-primary);">0:00 - Introduction | 1:30 - Ingredients Needed</code>
                </div>
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;">Mixed (Best for SEO)</div>
                    <code style="font-size: 14px; color: var(--brand-primary);" id="mixedLangExample">0:00 - Introduction | Intro</code>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
// Language examples based on region/state
const langExamples = {
    // Indian States/Regions
    'ta': { name: 'Tamil', local: '0:00 - அறிமுகம் | 1:30 - பொருட்கள் தேவை', mixed: '0:00 - Introduction | அறிமுகம்' },
    'hi': { name: 'Hindi', local: '0:00 - परिचय | 1:30 - सामग्री', mixed: '0:00 - Introduction | परिचय' },
    'te': { name: 'Telugu', local: '0:00 - పరిచయం | 1:30 - పదార్థాలు', mixed: '0:00 - Introduction | పరిచయం' },
    'bn': { name: 'Bengali', local: '0:00 - ভূমিকা | 1:30 - উপকরণ', mixed: '0:00 - Introduction | ভূমিকা' },
    'mr': { name: 'Marathi', local: '0:00 - परिचय | 1:30 - साहित्य', mixed: '0:00 - Introduction | परिचय' },
    'gu': { name: 'Gujarati', local: '0:00 - પરિચય | 1:30 - સામગ્રી', mixed: '0:00 - Introduction | પરિચય' },
    'kn': { name: 'Kannada', local: '0:00 - ಪರಿಚಯ | 1:30 - ಪದಾರ್ಥಗಳು', mixed: '0:00 - Introduction | ಪರಿಚಯ' },
    'ml': { name: 'Malayalam', local: '0:00 - ആമുഖം | 1:30 - ചേരുവകൾ', mixed: '0:00 - Introduction | ആമുഖം' },
    'pa': { name: 'Punjabi', local: '0:00 - ਜਾਣ-ਪਛਾਣ | 1:30 - ਸਮੱਗਰੀ', mixed: '0:00 - Introduction | ਜਾਣ-ਪਛਾਣ' },
    'or': { name: 'Odia', local: '0:00 - ପରିଚୟ | 1:30 - ସାମଗ୍ରୀ', mixed: '0:00 - Introduction | ପରିଚୟ' },
    'as': { name: 'Assamese', local: '0:00 - পৰিচয় | 1:30 - সামগ্ৰী', mixed: '0:00 - Introduction | পৰিচয়' },
    // European
    'es': { name: 'Spanish', local: '0:00 - Introducción | 1:30 - Ingredientes', mixed: '0:00 - Introduction | Introducción' },
    'fr': { name: 'French', local: '0:00 - Introduction | 1:30 - Ingrédients', mixed: '0:00 - Introduction | Intro' },
    'de': { name: 'German', local: '0:00 - Einleitung | 1:30 - Zutaten', mixed: '0:00 - Introduction | Einleitung' },
    'it': { name: 'Italian', local: '0:00 - Introduzione | 1:30 - Ingredienti', mixed: '0:00 - Introduction | Introduzione' },
    'pt': { name: 'Portuguese', local: '0:00 - Introdução | 1:30 - Ingredientes', mixed: '0:00 - Introduction | Introdução' },
    'ru': { name: 'Russian', local: '0:00 - Введение | 1:30 - Ингредиенты', mixed: '0:00 - Introduction | Введение' },
    'pl': { name: 'Polish', local: '0:00 - Wstęp | 1:30 - Składniki', mixed: '0:00 - Introduction | Wstęp' },
    'nl': { name: 'Dutch', local: '0:00 - Introductie | 1:30 - Ingrediënten', mixed: '0:00 - Introduction | Introductie' },
    'tr': { name: 'Turkish', local: '0:00 - Giriş | 1:30 - Malzemeler', mixed: '0:00 - Introduction | Giriş' },
    // East Asian
    'ja': { name: 'Japanese', local: '0:00 - はじめに | 1:30 - 材料', mixed: '0:00 - Introduction | はじめに' },
    'ko': { name: 'Korean', local: '0:00 - 소개 | 1:30 - 재료', mixed: '0:00 - Introduction | 소개' },
    'zh': { name: 'Chinese', local: '0:00 - 介绍 | 1:30 - 食材', mixed: '0:00 - Introduction | 介绍' },
    'th': { name: 'Thai', local: '0:00 - บทนำ | 1:30 - ส่วนผสม', mixed: '0:00 - Introduction | บทนำ' },
    'vi': { name: 'Vietnamese', local: '0:00 - Giới thiệu | 1:30 - Nguyên liệu', mixed: '0:00 - Introduction | Giới thiệu' },
    'id': { name: 'Indonesian', local: '0:00 - Pendahuluan | 1:30 - Bahan', mixed: '0:00 - Introduction | Pendahuluan' },
    // Middle Eastern
    'ar': { name: 'Arabic', local: '0:00 - مقدمة | 1:30 - المكونات', mixed: '0:00 - Introduction | مقدمة' },
    'fa': { name: 'Persian', local: '0:00 - مقدمه | 1:30 - مواد لازم', mixed: '0:00 - Introduction | مقدمه' },
    'he': { name: 'Hebrew', local: '0:00 - הקדמה | 1:30 - מרכיבים', mixed: '0:00 - Introduction | הקדמה' },
    // Default
    'en': { name: 'English', local: '0:00 - Introduction | 1:30 - Ingredients Needed', mixed: '0:00 - Introduction | Intro' }
};

// Map Indian states/regions to languages
const stateToLang = {
    // Tamil Nadu
    'tamil nadu': 'ta', 'tamilnadu': 'ta', 'chennai': 'ta', 'coimbatore': 'ta', 'madurai': 'ta', 'trichy': 'ta', 'salem': 'ta',
    // Andhra Pradesh & Telangana
    'andhra pradesh': 'te', 'telangana': 'te', 'hyderabad': 'te', 'vijayawada': 'te', 'visakhapatnam': 'te',
    // Karnataka
    'karnataka': 'kn', 'bangalore': 'kn', 'bengaluru': 'kn', 'mysore': 'kn', 'mangalore': 'kn',
    // Kerala
    'kerala': 'ml', 'kochi': 'ml', 'cochin': 'ml', 'trivandrum': 'ml', 'thiruvananthapuram': 'ml', 'kozhikode': 'ml',
    // Maharashtra
    'maharashtra': 'mr', 'mumbai': 'mr', 'pune': 'mr', 'nagpur': 'mr',
    // Gujarat
    'gujarat': 'gu', 'ahmedabad': 'gu', 'surat': 'gu', 'vadodara': 'gu',
    // West Bengal
    'west bengal': 'bn', 'kolkata': 'bn', 'calcutta': 'bn',
    // Punjab
    'punjab': 'pa', 'chandigarh': 'pa', 'ludhiana': 'pa', 'amritsar': 'pa',
    // Odisha
    'odisha': 'or', 'orissa': 'or', 'bhubaneswar': 'or',
    // Assam
    'assam': 'as', 'guwahati': 'as',
    // Hindi belt
    'delhi': 'hi', 'new delhi': 'hi', 'uttar pradesh': 'hi', 'madhya pradesh': 'hi', 'rajasthan': 'hi',
    'bihar': 'hi', 'jharkhand': 'hi', 'haryana': 'hi', 'lucknow': 'hi', 'jaipur': 'hi', 'bhopal': 'hi', 'patna': 'hi'
};

// Map countries to languages
const countryToLang = {
    'in': 'hi', // India default to Hindi, will be overridden by state detection
    'us': 'en', 'gb': 'en', 'uk': 'en', 'au': 'en', 'ca': 'en',
    'es': 'es', 'mx': 'es', 'ar': 'es', 'co': 'es', 'pe': 'es', 'cl': 'es',
    'fr': 'fr', 'be': 'fr',
    'de': 'de', 'at': 'de', 'ch': 'de',
    'it': 'it',
    'br': 'pt', 'pt': 'pt',
    'ru': 'ru',
    'jp': 'ja',
    'kr': 'ko',
    'cn': 'zh', 'tw': 'zh', 'hk': 'zh',
    'th': 'th',
    'vn': 'vi',
    'id': 'id',
    'sa': 'ar', 'ae': 'ar', 'eg': 'ar',
    'ir': 'fa',
    'il': 'he',
    'tr': 'tr',
    'pl': 'pl',
    'nl': 'nl'
};

// Update examples based on detected location
function updateLanguageExamples(langCode) {
    const langData = langExamples[langCode] || langExamples['en'];

    const labelEl = document.getElementById('localLangLabel');
    const localEl = document.getElementById('localLangExample');
    const mixedEl = document.getElementById('mixedLangExample');

    if (labelEl) labelEl.textContent = langData.name;
    if (localEl) localEl.textContent = langData.local;
    if (mixedEl) mixedEl.textContent = langData.mixed;
}

// Detect user location using IP geolocation
async function detectUserLocation() {
    try {
        // Try multiple geolocation APIs for reliability
        const response = await fetch('https://ipapi.co/json/', { timeout: 3000 });
        const data = await response.json();

        if (data) {
            // Check if in India and detect state
            if (data.country_code && data.country_code.toLowerCase() === 'in') {
                const region = (data.region || '').toLowerCase();
                const city = (data.city || '').toLowerCase();

                // Check state first, then city
                if (stateToLang[region]) {
                    updateLanguageExamples(stateToLang[region]);
                    return;
                }
                if (stateToLang[city]) {
                    updateLanguageExamples(stateToLang[city]);
                    return;
                }
                // Default to Hindi for other Indian regions
                updateLanguageExamples('hi');
                return;
            }

            // For other countries
            if (data.country_code) {
                const countryLang = countryToLang[data.country_code.toLowerCase()];
                if (countryLang) {
                    updateLanguageExamples(countryLang);
                    return;
                }
            }
        }
    } catch (e) {
        console.log('Geolocation fallback to browser language');
    }

    // Fallback to browser language
    const browserLang = (navigator.language || navigator.userLanguage || 'en').split('-')[0].toLowerCase();
    updateLanguageExamples(langExamples[browserLang] ? browserLang : 'en');
}

// Run on page load
detectUserLocation();
</script>


<!-- Timestamp Format Guide -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Guide</span>
        <h2 class="section-title">YouTube Timestamp Format Rules</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="tips-box">
            <div class="tips-title">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                Timestamp Requirements
            </div>
            <div class="tips-list">
                <div class="tip-item">
                    <span class="tip-icon">1.</span>
                    <span>First timestamp MUST be <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">0:00</code> for chapters to work</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">2.</span>
                    <span>Minimum of 3 timestamps required for chapters to appear</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">3.</span>
                    <span>Each chapter must be at least 10 seconds long</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">4.</span>
                    <span>Format: <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">MM:SS</code> or <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">H:MM:SS</code> for videos over 1 hour</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">5.</span>
                    <span>Timestamps must be in ascending order (chronological)</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">6.</span>
                    <span>Add timestamps to your video description, not comments</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section class="section section-gray" id="how-it-works">
    <div class="section-header">
        <span class="section-badge">How It Works</span>
        <h2 class="section-title">Connect. Read. Approve.</h2>
    </div>
    <div class="steps-container">
        <div class="steps-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <h3 class="step-title">Connect your channel</h3>
                <p class="step-desc">One click with your YouTube account. IV reads your videos, retention, comments and playlists &mdash; it never posts, deletes or publishes on its own.</p>
            </div>
            <div class="step-card">
                <div class="step-number">2</div>
                <h3 class="step-title">IV reads and watches</h3>
                <p class="step-desc">Not just the numbers &mdash; the actual video, frame by frame. Where viewers left, what was on screen, which titles are underperforming, what competitors just published.</p>
            </div>
            <div class="step-card">
                <div class="step-number">3</div>
                <h3 class="step-title">You approve the fixes</h3>
                <p class="step-desc">Rewrites, thumbnail swaps, playlist filing, comment replies &mdash; each one shown to you first. Apply when ready. Roll back any time.</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Bar - Hidden for now
<section class="stats-bar-modern">
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-icon purple">🎬</div>
            <div class="stat-value" id="stat-total">0</div>
            <div class="stat-label">Videos Analyzed</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue">📊</div>
            <div class="stat-value" id="stat-today">0</div>
            <div class="stat-label">Today</div>
        </div>
        <div class="stat-card live">
            <div class="stat-icon green">👥</div>
            <div class="stat-value">
                <span class="live-dot"></span>
                <span id="stat-users">0</span>
            </div>
            <div class="stat-label">Active Now</div>
        </div>
    </div>
</section>
-->

<!-- Related Blog Posts -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Learn More</span>
        <h2 class="section-title">YouTube Chapters Guides</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            <a href="/how-to-add-chapters-to-youtube-videos" style="text-decoration: none;">
                <div class="feature-card" style="height: 100%;">
                    <div class="feature-icon">📚</div>
                    <div class="feature-title">How to Add Chapters to YouTube Videos</div>
                    <div class="feature-desc">Complete step-by-step guide to adding chapters that work. Learn the format, rules, and best practices.</div>
                </div>
            </a>
            <a href="/" style="text-decoration: none;">
                <div class="feature-card" style="height: 100%;">
                    <div class="feature-icon">📈</div>
                    <div class="feature-title">YouTube Video Analyzer</div>
                    <div class="feature-desc">Get a complete analysis of any YouTube video including engagement metrics and optimization tips.</div>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Comparison Table -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Why IV</span>
        <h2 class="section-title">Dashboards show numbers. Research tools find ideas. IV works on your channel.</h2>
        <p class="section-subtitle">Reads it, watches it, fixes it &mdash; with you approving every change.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="table-responsive" style="border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light);">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead><tr>
                    <th style="background: #1a1a2e; color: white; padding: 16px; text-align: left; font-weight: 600; width: 40%;">What you get</th>
                    <th style="background: #1a1a2e; color: white; padding: 16px; text-align: center; width: 20%;">Analytics dashboards</th>
                    <th style="background: #1a1a2e; color: white; padding: 16px; text-align: center; width: 20%;">Research tools</th>
                    <th style="background: #e63946; color: white; padding: 16px; text-align: center; font-weight: 700; width: 20%;">IV</th>
                </tr></thead>
                <tbody><tr style="background: var(--card-bg);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Shows views, subs, a retention graph</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><span style="color: var(--text-muted); font-size: 13px;">Partial</span></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td></tr><tr style="background: var(--bg-secondary);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Tells you <b>why</b> viewers left at that second</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> watches the video</td></tr><tr style="background: var(--card-bg);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Rewrites titles, descriptions, tags &mdash; with rollback</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td></tr><tr style="background: var(--bg-secondary);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Swaps a thumbnail and measures it against your channel</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td></tr><tr style="background: var(--card-bg);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Decodes competitor uploads into <b>your</b> version</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><span style="color: var(--text-muted); font-size: 13px;">Partial</span></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> automatic</td></tr><tr style="background: var(--bg-secondary);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Replies to comments in your voice</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td></tr><tr style="background: var(--card-bg);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Analyst chat inside every tool</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></td></tr><tr style="background: var(--bg-secondary);"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Ever claims click-through or impressions</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><span style="color: var(--text-muted); font-size: 13px;">Partial</span></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><span style="color: var(--text-muted); font-size: 13px;">Partial</span></td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg> <span style="color:var(--text-muted);font-size:13px">no tool can see them</span></td></tr></tbody>
            </table>
        </div>
    </div>
</section>

<!-- Pricing Section -->
<section class="section section-gray" id="pricing">
    <div class="section-header">
        <span class="section-badge">Pricing</span>
        <h2 class="section-title">One plan. Everything in it.</h2>
        <p class="section-subtitle">Try a full week for $12. Stay monthly when it earns its place.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="pricing-toggle-wrapper">
            <div class="pricing-toggle">
                <button id="toggleCredits" class="pricing-toggle-btn active" onclick="togglePricing('credits')"><span>Weekly</span><span class="toggle-desc">Try it on your real channel</span></button>
                <button id="toggleRecurring" class="pricing-toggle-btn" onclick="togglePricing('recurring')"><span>Monthly</span><span class="toggle-desc">Best value</span></button>
            </div>
        </div>
        <div id="pricingCredits" class="pricing-grid iv-grid-1"><div class="pricing-card pricing-card-featured iv-plan">
                <div class="pricing-badge">One plan &mdash; everything in it</div>
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">IV</h3>
                    <p class="pricing-plan-desc">A full week of everything, on your channel</p>
                </div>
                <div class="pricing-price"><span class="price-amount">$12</span> <span class="iv-was">$15</span><span class="iv-per">/ week</span></div>
                <div class="pricing-credits">Included each month</div>
                <div class="pricing-per-video">5 decodes a day &middot; 20 retention reports &middot; 20 back-catalog rewrites &middot; 10 thumbnail tests &middot; 20 upload autopsies &middot; 8 playlist plans &middot; 50 comment drafts a day</div>
                <ul class="pricing-features"><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>All ten tools, on your connected channel</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Channel Radar with automatic decodes of every new competitor upload</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Analyst chat in every tool, with memory</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Every change reviewed by you, and reversible</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Cancel anytime</li></ul>
                <a href="https://growth.instantviews.net/signup" class="pricing-btn pricing-btn-primary">Start IV &mdash; $12 for the first week</a>
            </div></div>
        <div id="pricingRecurring" class="pricing-grid iv-grid-1" style="display:none;"><div class="pricing-card pricing-card-featured iv-plan">
                <div class="pricing-badge">One plan &mdash; everything in it</div>
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">IV</h3>
                    <p class="pricing-plan-desc">For creators publishing every week</p>
                </div>
                <div class="pricing-price"><span class="price-amount">$29</span> <span class="iv-was">$39</span><span class="iv-per">/ month</span></div>
                <div class="pricing-credits">Included each month</div>
                <div class="pricing-per-video">5 decodes a day &middot; 20 retention reports &middot; 20 back-catalog rewrites &middot; 10 thumbnail tests &middot; 20 upload autopsies &middot; 8 playlist plans &middot; 50 comment drafts a day</div>
                <ul class="pricing-features"><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>All ten tools, on your connected channel</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Channel Radar with automatic decodes of every new competitor upload</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Analyst chat in every tool, with memory</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Every change reviewed by you, and reversible</li><li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Cancel anytime</li></ul>
                <a href="https://growth.instantviews.net/signup" class="pricing-btn pricing-btn-primary">Start IV &mdash; $29 a month</a>
            </div></div>
        <p class="pricing-note">Nothing here is a guess. Everything comes from your channel's own data or from the video itself &mdash; and no tool can see click-through rate or impressions, so IV never claims to.</p>

        <details class="iv-packs">
            <summary>Just want the Timestamp Generator? Credit packs from $2 a video <span>+</span></summary>
            <div id="ivAnalyzerPacks" class="pricing-grid pricing-grid-4">
            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Test</h3>
                    <p class="pricing-plan-desc">Try it out</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$2</span>
                    <span class="price-amount price-inr">₹99</span>
                </div>
                <div class="pricing-credits">1 video analysis</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Full 200+ data points</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Click Potential %</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>YouTube Studio ready</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>

            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Starter</h3>
                    <p class="pricing-plan-desc">For casual creators</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$9.99</span>
                    <span class="price-amount price-inr">₹299</span>
                </div>
                <div class="pricing-credits">5 video credits</div>
                <div class="pricing-per-video price-usd">$2.00 per video</div>
                <div class="pricing-per-video price-inr">₹60 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Test</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Credits never expire</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Email support</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>

            <div class="pricing-card pricing-card-featured">
                <div class="pricing-badge">Most Popular</div>
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Creator</h3>
                    <p class="pricing-plan-desc">For active creators</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$24.99</span>
                    <span class="price-amount price-inr">₹699</span>
                </div>
                <div class="pricing-credits">15 video credits</div>
                <div class="pricing-per-video price-usd">$1.67 per video</div>
                <div class="pricing-per-video price-inr">₹47 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Starter</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Priority support</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>17% savings</li>
                </ul>
                <a href="/signup" class="pricing-btn pricing-btn-primary">Get Started</a>
            </div>

            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Pro</h3>
                    <p class="pricing-plan-desc">For power users</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$49.99</span>
                    <span class="price-amount price-inr">₹1,499</span>
                </div>
                <div class="pricing-credits">40 video credits</div>
                <div class="pricing-per-video price-usd">$1.25 per video</div>
                <div class="pricing-per-video price-inr">₹37 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Creator</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Best per-video price</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>38% savings</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>
        </div>
            <p class="pricing-note">Free signup includes 1 video analysis. No credit card required.</p>
        </details>
    </div>
</section>

<style>
/* Professional Pricing Styles */
.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}
.pricing-toggle {
    display: inline-flex;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pricing-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}
.pricing-toggle-btn span:first-child {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-secondary);
}
.pricing-toggle-btn .toggle-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.pricing-toggle-btn.active {
    background: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pricing-toggle-btn.active span:first-child {
    color: white;
}
.pricing-toggle-btn.active .toggle-desc {
    color: rgba(255,255,255,0.7);
}

.pricing-grid {
    display: grid;
    gap: 24px;
}
.pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    transition: all 0.2s ease;
}
.pricing-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.pricing-card-featured {
    border: 2px solid var(--brand-primary);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, var(--card-bg) 100%);
}
.pricing-card-featured:hover {
    border-color: var(--brand-primary);
}

.pricing-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(135deg, var(--brand-primary) 0%, #dc2626 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.pricing-card-header {
    margin-bottom: 20px;
}
.pricing-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.pricing-plan-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.pricing-price {
    margin-bottom: 8px;
}
.price-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px;
    line-height: 1;
}
.price-period {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
}
.price-inr {
    display: none;
}

.pricing-credits {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.pricing-per-video {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.check-icon {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
}

.pricing-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.pricing-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}
.pricing-btn-primary {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}
.pricing-btn-primary:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.pricing-note {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pricing-grid-4, .pricing-grid-3 { grid-template-columns: 1fr; }
    .pricing-toggle-btn { min-width: 120px; padding: 10px 20px; }
    .price-amount { font-size: 36px; }
}
</style>

<script>
function togglePricing(type) {
    const credits = document.getElementById('pricingCredits');
    const recurring = document.getElementById('pricingRecurring');
    const btnCredits = document.getElementById('toggleCredits');
    const btnRecurring = document.getElementById('toggleRecurring');

    if (type === 'credits') {
        credits.style.display = 'grid';
        recurring.style.display = 'none';
        btnCredits.classList.add('active');
        btnRecurring.classList.remove('active');
    } else {
        credits.style.display = 'none';
        recurring.style.display = 'grid';
        btnRecurring.classList.add('active');
        btnCredits.classList.remove('active');
    }
}

// Detect India and show INR pricing
async function detectPricingRegion() {
    try {
        const response = await fetch('https://ipapi.co/json/', { timeout: 3000 });
        const data = await response.json();
        if (data && data.country_code && data.country_code.toLowerCase() === 'in') {
            document.querySelectorAll('.price-usd').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.price-inr').forEach(el => el.style.display = 'inline');
        }
    } catch (e) {}
}
detectPricingRegion();
</script>

<!-- Pro Tips Section -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Pro Tips</span>
        <h2 class="section-title">Maximize Your Video Performance</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🎯</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Analyze Before Upload</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Fix issues before posting, not after you lose views</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🎣</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Perfect Your Hook</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Aim for 80+ Hook Score — first 30 seconds are crucial</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">📈</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Use Emotional Peaks</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Create thumbnails from high-emotion moments</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">📋</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Copy-Paste Metadata</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Use our YouTube Studio ready output directly</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">✅</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Fix High-Impact First</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Focus on "High" priority improvements only</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🔄</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Re-analyze After Edits</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Upload revised video to confirm improvements</div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="section section-gray" id="faq">
    <div class="section-header">
        <span class="section-badge">FAQ</span>
        <h2 class="section-title">Before you connect</h2>
    </div>
    <div class="faq-list">
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Is it safe to connect my channel?<span class="faq-icon">+</span></button><div class="faq-answer"><p>IV reads your channel to analyse it. It only changes something &mdash; a title, a thumbnail, a playlist, a reply &mdash; when you approve that specific change, and every change can be rolled back from inside the tool. <strong>It never posts, deletes or publishes on its own.</strong></p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">What can't IV see?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Click-through rate and impressions. YouTube does not expose them to any outside tool, so IV never claims to know them &mdash; and neither should anything else.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Does it work for Shorts?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Yes. Decodes, back-catalog, comments, playlists and best-time all cover Shorts, and Best Time reads Shorts and long-form as <strong>two separate patterns</strong>. Retention reports are for long-form.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Will it publish or reply without asking?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Never. Comment replies are drafts until you send them. Uploads go out when you say. Metadata edits apply when you press apply.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Why is there a weekly price?<span class="faq-icon">+</span></button><div class="faq-answer"><p>So you can try the whole thing on your real channel without committing to a month. Weekly is $12, monthly is $29 &mdash; same plan, everything included, cancel anytime.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">Can I cancel?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Any time, from your account. Weekly stops at the end of the week you paid for; monthly at the end of the month.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="toggleFaq(this)">What is the free decode at the top?<span class="faq-icon">+</span></button><div class="faq-answer"><p>A real Video Decode &mdash; the same one IV members run &mdash; on any public video, once a day, no login. You get the formula: hook, structure with timestamps, pacing and why it works. Your version of it, and the channel tools, are what IV opens.</p></div></div>
    </div>
</section>

<!-- Bottom CTA -->
<section class="section section-dark cta-section">
    <div class="cta-content">
        <h2 class="cta-title">Connect your channel. See what it has been trying to tell you.</h2>
        <p class="cta-subtitle">Ten tools. Your data. Your call on every change. $12 for the first week.</p>
        <div class="cta-buttons">
            <a href="https://growth.instantviews.net/signup" class="btn btn-primary btn-lg">Start IV &mdash; $12 first week</a>
            <a href="#generator" class="btn btn-outline btn-lg" onclick="if(window.ivpOpen){event.preventDefault();ivpOpen();}">Decode a video free</a>
        </div>
    </div>
</section>


<style>
/* IV components — built on the page's own tokens so light/dark both hold */
.iv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.iv-grid-1{grid-template-columns:minmax(0,520px);justify-content:center;}
.iv-group{text-align:left;}
.iv-group .feature-icon{display:flex;align-items:center;justify-content:center;color:var(--brand-primary);}
.iv-tools{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.iv-tools li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-light);}
.iv-tools b{font-size:14px;color:var(--text-primary);}
.iv-tools span{font-size:13px;color:var(--text-secondary);}
.iv-proof{margin-top:12px;font-size:12.5px;color:var(--text-secondary);display:flex;gap:9px;align-items:center;padding:10px 12px;border-radius:var(--radius-md);background:var(--brand-bg);}
.iv-proof i{width:7px;height:7px;border-radius:50%;background:var(--brand-primary);flex:none;}
.iv-proofrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;align-items:stretch;}
.iv-shot{background:var(--card-bg);border:1px solid var(--border-light);border-radius:16px;padding:18px;box-shadow:var(--shadow-lg);}
.iv-shot-bar{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text-tertiary);padding-bottom:12px;border-bottom:1px solid var(--border-light);margin-bottom:12px;}
.iv-shot-bar svg{width:15px;height:15px;}
.iv-shot-bar b{color:var(--text-primary);}
.iv-curve{width:100%;height:110px;display:block;margin-bottom:12px;}
.iv-cliff{display:flex;gap:14px;padding:14px;border:1px solid rgba(255,0,0,.18);background:var(--brand-bg);border-radius:12px;align-items:flex-start;}
.iv-cliff-t{font-size:22px;font-weight:800;color:var(--brand-primary);line-height:1;font-variant-numeric:tabular-nums;}
.iv-cliff-t small{display:block;font-size:11px;color:var(--text-muted);font-weight:600;margin-top:4px;}
.iv-cliff p{font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin:0;}
.iv-cliff p b{display:block;color:var(--text-primary);margin-bottom:2px;}
.iv-fix{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:10px;background:var(--bg-secondary);display:flex;gap:8px;color:var(--text-secondary);}
.iv-fix b{color:var(--success);}
.iv-chat{background:var(--card-bg);border:1px solid var(--border-light);border-radius:16px;padding:22px;box-shadow:var(--shadow-lg);}
.iv-chat-k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-primary);}
.iv-chat-k svg{width:16px;height:16px;}
.iv-chat h3{font-size:22px;font-weight:800;margin:10px 0 6px;color:var(--text-primary);letter-spacing:-.01em;}
.iv-chat p{font-size:14px;color:var(--text-secondary);margin:0 0 14px;}
.iv-msg{max-width:90%;padding:11px 14px;border-radius:12px;font-size:13.5px;margin:8px 0;line-height:1.5;}
.iv-msg.u{background:var(--text-primary);color:var(--text-inverse);margin-left:auto;border-bottom-right-radius:4px;}
.iv-msg.a{background:var(--bg-secondary);color:var(--text-secondary);border-bottom-left-radius:4px;}
.iv-msg.a b{color:var(--brand-primary);}
.iv-plan .pricing-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.iv-was{font-size:18px;color:var(--text-muted);text-decoration:line-through;}
.iv-per{font-size:14px;color:var(--text-tertiary);}
.iv-plan .pricing-per-video{line-height:1.7;}
.iv-packs{max-width:1140px;margin:34px auto 0;border-top:1px solid var(--border-light);padding-top:18px;}
.iv-packs summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;padding:8px 0;}
.iv-packs summary::-webkit-details-marker{display:none;}
.iv-packs summary span{font-size:20px;color:var(--text-muted);transition:transform .2s;}
.iv-packs[open] summary span{transform:rotate(45deg);}
.iv-packs .pricing-grid{margin-top:18px;}
@media (max-width: 900px){.iv-grid-2,.iv-proofrow{grid-template-columns:1fr;}}
</style>
<style id="ivp-ivw-css">
#ivw,#ivw *{box-sizing:border-box}
#ivw{position:fixed;inset:0;z-index:99999;display:none;overflow-x:hidden;overflow-y:auto;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0F172A;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 760px at 18% -12%,rgba(255,68,68,.16) 0%,transparent 58%),
             radial-gradient(950px 640px at 92% 6%,rgba(204,0,0,.12) 0%,transparent 55%),
             radial-gradient(700px 700px at 60% 108%,rgba(6,182,212,.08) 0%,transparent 60%),
             rgba(244,246,251,.64);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
#ivw.on{display:block;animation:ivwFade .32s ease}
@keyframes ivwFade{from{opacity:0}to{opacity:1}}
#ivw.on .ivw-card{animation:ivwCardIn .55s cubic-bezier(.16,.84,.32,1) both}
@keyframes ivwCardIn{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
#ivw .ivw-aurora{position:fixed;inset:0;pointer-events:none;opacity:.9;
  background:radial-gradient(560px 380px at 15% 22%,rgba(255,68,68,.16),transparent 62%),
             radial-gradient(680px 480px at 85% 82%,rgba(6,182,212,.10),transparent 62%);
  animation:ivwDrift 18s ease-in-out infinite alternate}
@keyframes ivwDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.07)}}
#ivw .ivw-close{position:fixed;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;
  border:1px solid #e6ebf1;background:#fff;color:#425466;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -4px rgba(50,50,93,.2);transition:.2s}
#ivw .ivw-close:hover{color:#0F172A;transform:rotate(90deg);box-shadow:0 6px 18px -4px rgba(50,50,93,.28)}
#ivw .ivw-wrap{position:relative;z-index:2;min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,34px) clamp(14px,4vw,32px)}
#ivw .ivw-card{width:100%;max-width:760px;border-radius:24px;position:relative;background:#fff;
  border:1px solid #e6ebf1;box-shadow:0 30px 80px -28px rgba(50,50,93,.35),0 0 0 1px rgba(50,50,93,.03);
  padding:clamp(20px,3.6vw,38px)}
#ivw .ivw-screen{display:none;animation:ivwIn .5s cubic-bezier(.2,.7,.2,1) both}
#ivw .ivw-screen.show{display:block}
@keyframes ivwIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
#ivw .ivw-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:#cc0000;background:#ebe9fe;border:1px solid #dad6ff;padding:7px 13px;border-radius:99px}
#ivw .ivw-dot{width:7px;height:7px;border-radius:50%;background:#e60000;animation:ivwPulse 1.8s infinite}
@keyframes ivwPulse{0%{box-shadow:0 0 0 0 rgba(230,0,0,.5)}70%{box-shadow:0 0 0 9px rgba(230,0,0,0)}100%{box-shadow:0 0 0 0 rgba(230,0,0,0)}}
#ivw h2.ivw-h{font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1.08;color:#0F172A;
  font-size:clamp(1.3rem,3.6vw,1.95rem);margin:10px 0 6px;letter-spacing:-.02em}
#ivw .ivw-grad{background:linear-gradient(100deg,#ff4444,#cc0000);-webkit-background-clip:text;background-clip:text;color:transparent}
#ivw .ivw-sub{color:#425466;font-size:clamp(.92rem,2.2vw,1.02rem);line-height:1.5;margin:0 0 14px;max-width:54ch}
/* input */
#ivw .ivw-inwrap{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:12px;
  background:#fff;border:1.5px solid #e6ebf1;border-radius:12px;padding:5px 5px 5px 16px;transition:.25s;box-shadow:none}
#ivw .ivw-inwrap:focus-within{border-color:#e60000;box-shadow:0 0 0 3px rgba(230,0,0,.12)}
#ivw .ivw-at{color:#94a3b8;font-size:1.2rem;font-weight:700}
#ivw .ivw-input,#ivw .ivw-input:focus,#ivw .ivw-input:hover{flex:1;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;color:#0F172A;font-size:clamp(1rem,2.6vw,1.2rem);
  font-weight:600;padding:11px 4px;font-family:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
#ivw .ivw-input::placeholder{color:#aab3c5}
#ivw .ivw-btn{border:0;cursor:pointer;font-family:inherit;font-weight:700;border-radius:12px;
  background:linear-gradient(135deg,#ff4444 0%,#e60000 55%,#cc0000 100%);color:#fff;font-size:.97rem;padding:11px 20px;min-height:44px;
  box-shadow:0 8px 20px -6px rgba(230,0,0,.5);transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px}
#ivw .ivw-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -6px rgba(230,0,0,.6)}
#ivw .ivw-btn:active{transform:translateY(0)}
#ivw .ivw-btn.block{width:100%}
#ivw .ivw-btn.ghost{background:#fff;border:1.5px solid #e6ebf1;box-shadow:none;color:#425466}
#ivw .ivw-btn.ghost:hover{background:#f8fafc}
#ivw .ivw-trust{display:flex;flex-wrap:wrap;gap:8px 18px;color:#64748b;font-size:.82rem;margin-top:8px}
#ivw .ivw-trust span{display:inline-flex;align-items:center;gap:6px}
#ivw .ivw-pubonly{display:flex;align-items:flex-start;gap:7px;margin-top:10px;color:#64748b;
  font-size:.79rem;line-height:1.5;max-width:52ch}
#ivw .ivw-pubonly svg{flex:0 0 auto;margin-top:2px;opacity:.75}
#ivw .ivw-err{color:#e11d48;font-size:.9rem;margin:10px 2px 0;min-height:1.1em}
/* profile head */
#ivw .ivw-phead{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
#ivw .ivw-av{width:76px;height:76px;border-radius:50%;flex:none;object-fit:cover;background:#eef2f7;
  border:3px solid #fff;box-shadow:0 8px 22px -6px rgba(230,0,0,.5),0 0 0 2px #e6ebf1;transform:scale(.6);opacity:0;transition:.6s cubic-bezier(.2,.8,.2,1)}
#ivw .ivw-av.in{transform:scale(1);opacity:1}
#ivw .ivw-pname{font-weight:800;font-size:1.15rem;color:#0F172A;display:flex;align-items:center;gap:7px}
#ivw .ivw-puser{color:#64748b;font-size:.9rem}
#ivw .ivw-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
#ivw .ivw-cbox{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:12px 8px;text-align:center}
#ivw .ivw-cnum{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(1.1rem,4vw,1.5rem);line-height:1;color:#0F172A}
#ivw .ivw-clab{color:#94a3b8;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
/* analysis stage */
#ivw .ivw-stageline{display:flex;align-items:center;gap:11px;color:#334155;font-size:1rem;font-weight:600;margin:4px 0 14px;min-height:26px}
#ivw .ivw-spin{width:20px;height:20px;flex:none;border-radius:50%;border:2.5px solid rgba(230,0,0,.2);border-top-color:#e60000;animation:ivwSpin .8s linear infinite}
@keyframes ivwSpin{to{transform:rotate(360deg)}}
#ivw .ivw-prog{height:7px;border-radius:99px;background:#eef2f7;overflow:hidden;margin-bottom:14px}
#ivw .ivw-prog>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ff4444,#e60000);transition:width .7s cubic-bezier(.3,.7,.2,1)}
/* film / posts */
#ivw .ivw-film{position:relative;min-height:96px;margin-bottom:8px}
#ivw .ivw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#ivw .ivw-tile{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#eef2f7;
  border:1px solid #e6ebf1;transform:translateY(26px) scale(.86);opacity:0;box-shadow:0 6px 14px -8px rgba(50,50,93,.3);
  transition:filter .55s ease,box-shadow .32s ease}
#ivw .ivw-tile.in{animation:ivwTileIn .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ivwTileIn{to{transform:none;opacity:1}}
#ivw .ivw-tile img,#ivw .ivw-tile video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
#ivw .ivw-tile img.loaded,#ivw .ivw-tile video.loaded{opacity:1}
#ivw .ivw-tile.noimg{background:linear-gradient(135deg,#e5e2fb,#eef2f7)}
/* scan sweep */
#ivw .ivw-tile.scan-dim{filter:grayscale(.9) brightness(.68)}
#ivw .ivw-tile.scan-hit{box-shadow:0 0 0 3px rgba(255,68,68,.8),0 12px 26px -6px rgba(230,0,0,.5);z-index:4}
#ivw .ivw-scanline{position:absolute;left:0;right:0;top:0;height:0;border-radius:12px;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(180deg,rgba(255,68,68,.04),rgba(255,68,68,.24) 50%,rgba(255,68,68,.04));
  box-shadow:0 0 24px 6px rgba(255,68,68,.4);border-top:2px solid rgba(255,68,68,.85);border-bottom:2px solid rgba(255,68,68,.4);
  transition:transform .42s cubic-bezier(.3,.7,.2,1),opacity .3s;animation:ivwScanPulse 1.15s ease-in-out infinite}
@keyframes ivwScanPulse{0%,100%{box-shadow:0 0 18px 3px rgba(255,68,68,.32)}50%{box-shadow:0 0 34px 9px rgba(255,68,68,.62)}}
/* #4 laser beam across the scan band + drifting spark particles */
#ivw .ivw-scanline::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(180,175,255,.9) 18%,#fff 50%,rgba(180,175,255,.9) 82%,transparent);
  box-shadow:0 0 12px 2px rgba(160,150,255,.9)}
#ivw .ivw-spark{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(circle,#fff 0%,rgba(160,150,255,.6) 70%,transparent 100%);
  box-shadow:0 0 6px 2px rgba(160,150,255,.75);animation:ivwSpark .8s ease-out forwards}
@keyframes ivwSpark{0%{opacity:0;transform:translateY(0) scale(.4)}18%{opacity:1;transform:translateY(-2px) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(.3)}}
/* richer scan: checkmark stamp + ken-burns zoom + live tally */
#ivw .ivw-tile img,#ivw .ivw-tile video{transition:opacity .5s,transform 1.3s ease}
#ivw .ivw-tile.scan-hit img,#ivw .ivw-tile.scan-hit video{transform:scale(1.08)}
#ivw .ivw-tile .ivw-check{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:#10b981;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3);z-index:5;
  box-shadow:0 3px 9px rgba(16,185,129,.55);transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1)}
#ivw .ivw-tile.checked .ivw-check{opacity:1;transform:scale(1)}
#ivw .ivw-tally{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
#ivw .ivw-tally .gtc{background:#f1f0fe;border:1px solid #e3e0fb;border-radius:8px;padding:4px 10px;font-size:.76rem;font-weight:600;color:#475569;white-space:nowrap}
#ivw .ivw-tally .gtc b{color:#cc0000;font-weight:800}
#ivw .ivw-tile .ivw-badge{position:absolute;top:5px;right:5px;background:rgba(10,37,64,.5);border-radius:6px;padding:2px 4px;line-height:0}
#ivw .ivw-tile .ivw-eng{position:absolute;left:0;right:0;bottom:0;padding:12px 6px 5px;font-size:.66rem;font-weight:700;color:#fff;
  background:linear-gradient(transparent,rgba(10,37,64,.82));display:flex;align-items:center;gap:4px}
/* hero best post + carousel fan */
#ivw .ivw-hero{position:relative;display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#faf9ff,#f4f3ff);
  border:1px solid #e5e2fb;border-radius:16px;padding:11px;margin:10px 0 12px;overflow:hidden}
#ivw .ivw-fan{position:relative;width:92px;height:116px;flex:none}
#ivw .ivw-fan .ivw-slide{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#eef2f7;
  border:3px solid #fff;box-shadow:0 10px 24px -8px rgba(50,50,93,.4);
  transform-origin:bottom center;transform:rotate(0deg) translateY(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#ivw .ivw-fan .ivw-slide img,#ivw .ivw-fan .ivw-slide video{width:100%;height:100%;object-fit:cover;display:block}
#ivw .ivw-herometa .ivw-hlab{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#cc0000;font-weight:700}
#ivw .ivw-herometa .ivw-hnum{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.35rem;margin-top:2px;color:#0F172A}
#ivw .ivw-herometa .ivw-hsub{color:#64748b;font-size:.85rem;margin-top:2px}
/* insight cards */
#ivw .ivw-ins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
#ivw .ivw-ic{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:12px}
#ivw .ivw-ic h4{margin:0 0 4px;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:700;display:flex;align-items:center;gap:7px}
#ivw .ivw-ic .ivw-big{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;line-height:1.05;color:#0F172A}
#ivw .ivw-ic .ivw-note{color:#64748b;font-size:.82rem;margin-top:4px}
#ivw .ivw-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:7px}
#ivw .ivw-bars i{flex:1;background:#d6d3fb;border-radius:4px 4px 2px 2px;height:8%;transition:height .8s cubic-bezier(.2,.8,.2,1);min-height:4px}
#ivw .ivw-bars i.hot{background:linear-gradient(180deg,#ff4444,#cc0000)}
#ivw .ivw-blab{display:flex;gap:5px;margin-top:5px;color:#94a3b8;font-size:.6rem;justify-content:space-between}
#ivw .ivw-donut{width:74px;height:74px;border-radius:50%;flex:none}
#ivw .ivw-mixrow{display:flex;align-items:center;gap:14px}
#ivw .ivw-leg{font-size:.78rem;color:#425466;line-height:1.7}
#ivw .ivw-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
#ivw svg.ivw-trend{width:100%;height:52px;display:block;margin-top:6px}
#ivw .ivw-trend path.line{fill:none;stroke:url(#ivwTrendGrad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:ivwDraw 1.4s .15s ease forwards}
@keyframes ivwDraw{to{stroke-dashoffset:0}}
/* locked / reveal */
#ivw .ivw-locked{position:relative;border-radius:14px;overflow:hidden;border:1px solid #d9d5fb;margin-bottom:12px;background:#faf9ff}
/* LOCKCARD-FLOW: blurred rows are the BACKDROP -- absolute so they no longer
   dictate card height. The overlay below is what sizes the card. */
#ivw .ivw-locked .ivw-linner{position:absolute;inset:0;padding:13px 14px;filter:blur(6px);opacity:.55;user-select:none;pointer-events:none}
#ivw .ivw-lockrow{display:flex;justify-content:space-between;font-size:.92rem;font-weight:700;color:#0F172A;padding:5px 0}
/* LOCKCARD-FLOW: in normal flow, so however far the copy wraps the card grows
   with it. min-height keeps the desktop proportions the absolute version had. */
#ivw .ivw-lockover{position:relative;z-index:1;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;background:linear-gradient(180deg,rgba(248,250,252,.55),rgba(255,255,255,.86));padding:16px 14px}
#ivw .ivw-lockover .ivw-lk{font-weight:800;font-size:1.02rem;color:#0F172A}
#ivw .ivw-lockover .ivw-lksub{color:#425466;font-size:.82rem;max-width:min(38ch,100%);line-height:1.45}
#ivw .ivw-lockicon{width:34px;height:34px;border-radius:50%;background:#ebe9fe;border:1px solid #dad6ff;color:#cc0000;
  display:flex;align-items:center;justify-content:center;margin-bottom:2px}
/* offer / price */
#ivw .ivw-offer{text-align:center;background:linear-gradient(180deg,#f4f3ff,#fff);
  border:1px solid #e0dcfb;border-radius:16px;padding:11px 14px;margin-bottom:5px}
#ivw .ivw-band{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#cc0000;font-weight:700}
#ivw .ivw-price{display:flex;align-items:baseline;justify-content:center;gap:11px;margin:2px 0 2px}
#ivw .ivw-now{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(1.8rem,6vw,2.4rem);line-height:1;
  background:linear-gradient(100deg,#ff4444,#cc0000);-webkit-background-clip:text;background-clip:text;color:transparent}
#ivw .ivw-was{color:#94a3b8;font-size:1.25rem;text-decoration:line-through;font-weight:600}
#ivw .ivw-save{display:inline-block;background:#ecfdf5;border:1px solid #a7f3d0;color:#059669;
  border-radius:99px;font-size:.74rem;font-weight:700;padding:3px 10px;margin-top:1px}
#ivw .ivw-incl{color:#425466;font-size:.82rem;margin:6px auto 0;max-width:46ch;line-height:1.45}
/* size select (unavailable) */
#ivw .ivw-sizesel{width:100%;font-family:inherit;font-size:1rem;font-weight:600;color:#0F172A;background:#fff;
  border:1.5px solid #e6ebf1;border-radius:12px;padding:14px 16px;margin:6px 0 14px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
/* account step */
#ivw .ivw-oauth{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:#fff;color:#1a1f36;
  font-weight:700;border:1.5px solid #e6ebf1;border-radius:12px;padding:11px;font-size:.95rem;cursor:pointer;font-family:inherit;min-height:44px;transition:.2s}
#ivw .ivw-oauth:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(50,50,93,.28);border-color:#ffb3b3}
#ivw .ivw-divider{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:.8rem;margin:8px 0}
#ivw .ivw-divider:before,#ivw .ivw-divider:after{content:'';flex:1;height:1px;background:#e6ebf1}
#ivw .ivw-note2{color:#64748b;font-size:.78rem;text-align:center;margin-top:8px;line-height:1.45}
#ivw .ivw-screen[data-s="account"] .ivw-inwrap{margin-bottom:0}
#ivw .ivw-screen[data-s="account"] .ivw-back,#ivw .ivw-screen[data-s="over100k"] .ivw-back{margin-top:10px}
#ivw .ivw-back{background:none;border:0;color:#64748b;cursor:pointer;font-family:inherit;font-size:.86rem;margin-top:14px;
  display:inline-flex;align-items:center;gap:6px;padding:6px}
#ivw .ivw-back:hover{color:#0F172A}
@media (max-width:560px){
  #ivw .ivw-grid{grid-template-columns:repeat(3,1fr)}
  #ivw .ivw-ins{grid-template-columns:1fr}
  #ivw .ivw-inwrap{flex-wrap:wrap;padding:12px}
  #ivw .ivw-input{width:100%;padding:8px 4px}
  #ivw .ivw-inwrap .ivw-btn{width:100%}
  #ivw .ivw-hero{flex-direction:column;text-align:center}
}
/* ============ DARK MODE ============ */
html[data-theme="dark"] #ivw{background:radial-gradient(1100px 760px at 18% -12%,rgba(255,68,68,.18) 0%,transparent 58%),radial-gradient(950px 640px at 92% 6%,rgba(204,0,0,.14) 0%,transparent 55%),radial-gradient(700px 700px at 60% 108%,rgba(6,182,212,.09) 0%,transparent 60%),rgba(8,12,20,.62)}
html[data-theme="dark"] #ivw .ivw-card{background:#131a2a;border-color:#243049;box-shadow:0 30px 80px -28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03)}
html[data-theme="dark"] #ivw .ivw-close{background:#1a2236;border-color:#2c3a55;color:#c7d2e0}
html[data-theme="dark"] #ivw .ivw-close:hover{color:#f7fafc}
html[data-theme="dark"] #ivw h2.ivw-h,html[data-theme="dark"] #ivw .ivw-pname,html[data-theme="dark"] #ivw .ivw-cnum,html[data-theme="dark"] #ivw .ivw-ic .ivw-big,html[data-theme="dark"] #ivw .ivw-lockrow,html[data-theme="dark"] #ivw .ivw-lockover .ivw-lk,html[data-theme="dark"] #ivw .ivw-herometa .ivw-hnum{color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-sub,html[data-theme="dark"] #ivw .ivw-stageline,html[data-theme="dark"] #ivw .ivw-incl,html[data-theme="dark"] #ivw .ivw-lockover .ivw-lksub,html[data-theme="dark"] #ivw .ivw-leg{color:#c7d2e0}
html[data-theme="dark"] #ivw .ivw-puser,html[data-theme="dark"] #ivw .ivw-clab,html[data-theme="dark"] #ivw .ivw-trust,html[data-theme="dark"] #ivw .ivw-ic h4,html[data-theme="dark"] #ivw .ivw-ic .ivw-note,html[data-theme="dark"] #ivw .ivw-note2,html[data-theme="dark"] #ivw .ivw-back,html[data-theme="dark"] #ivw .ivw-divider,html[data-theme="dark"] #ivw .ivw-blab{color:#8a96a6}
html[data-theme="dark"] #ivw .ivw-kicker{background:rgba(255,68,68,.16);border-color:rgba(255,68,68,.3);color:#ffb3b3}
html[data-theme="dark"] #ivw .ivw-inwrap{background:#0f1626;border-color:#243049}
html[data-theme="dark"] #ivw .ivw-inwrap:focus-within{border-color:#e60000}
html[data-theme="dark"] #ivw .ivw-input{color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-input::placeholder{color:#5c6b82}
html[data-theme="dark"] #ivw .ivw-oauth{background:#1a2236;border-color:#2c3a55;color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-oauth:hover{border-color:#e60000}
html[data-theme="dark"] #ivw .ivw-divider:before,html[data-theme="dark"] #ivw .ivw-divider:after{background:#243049}
html[data-theme="dark"] #ivw .ivw-cbox,html[data-theme="dark"] #ivw .ivw-ic,html[data-theme="dark"] #ivw .ivw-locked,html[data-theme="dark"] #ivw .ivw-sizesel{background:#0f1626;border-color:#243049}
html[data-theme="dark"] #ivw .ivw-sizesel{color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-tile,html[data-theme="dark"] #ivw .ivw-prog,html[data-theme="dark"] #ivw .ivw-fan .ivw-slide{background:#1a2236;border-color:#243049}
html[data-theme="dark"] #ivw .ivw-tally .gtc{background:rgba(255,68,68,.14);border-color:rgba(255,68,68,.28);color:#c7d2e0}
html[data-theme="dark"] #ivw .ivw-tally .gtc b{color:#ffb3b3}
html[data-theme="dark"] #ivw .ivw-hero{background:linear-gradient(135deg,#161d2e,#141a2b);border-color:#2a2f52}
html[data-theme="dark"] #ivw .ivw-offer{background:linear-gradient(180deg,#171d33,#131a2a);border-color:#2a2f52}
html[data-theme="dark"] #ivw .ivw-was{color:#8a96a6}
html[data-theme="dark"] #ivw .ivw-lockover{background:linear-gradient(180deg,rgba(19,26,42,.55),rgba(19,26,42,.9))}
html[data-theme="dark"] #ivw .ivw-pubonly{color:#8b9bb4}
html[data-theme="dark"] #ivw .ivw-lockicon,html[data-theme="dark"] #ivw .ivw-herometa .ivw-hlab{color:#ffb3b3}
html[data-theme="dark"] #ivw .ivw-lockicon{background:rgba(255,68,68,.16);border-color:rgba(255,68,68,.3)}
html[data-theme="dark"] #ivw .ivw-av{border-color:#131a2a;box-shadow:0 8px 22px -6px rgba(230,0,0,.5),0 0 0 2px #243049}
html[data-theme="dark"] #ivw .ivw-bars i{background:#2c3350}
html[data-theme="dark"] #ivw .ivw-donut>circle:first-child{stroke:#243049}
/* private / not-found / unavailable kickers carry inline light colours — override */
html[data-theme="dark"] #ivw section[data-s="private"] .ivw-kicker,html[data-theme="dark"] #ivw section[data-s="notfound"] .ivw-kicker{background:rgba(245,158,11,.15)!important;border-color:rgba(245,158,11,.32)!important;color:#fbbf24!important}
html[data-theme="dark"] #ivw section[data-s="unavail"] .ivw-kicker{background:rgba(148,163,184,.15)!important;border-color:rgba(148,163,184,.3)!important;color:#cbd5e1!important}
@media (prefers-reduced-motion:reduce){
  #ivw *{animation-duration:.001s!important;transition-duration:.05s!important}
  #ivw .ivw-aurora{animation:none}
}
</style>
<style id="ivp-pay-css">
/* Checkout screen — same visual language as the cloned card, new pieces only. */
#ivw .ivp-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0 12px}
#ivw .ivp-tier{cursor:pointer;text-align:center;padding:11px 4px;border-radius:12px;border:1.5px solid #e6ebf1;
  background:#fff;font-family:inherit;transition:.18s;position:relative}
#ivw .ivp-tier:hover{border-color:#ffb3b3;transform:translateY(-1px)}
#ivw .ivp-tier .vt-a{display:block;font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;color:#0F172A;line-height:1}
#ivw .ivp-tier .vt-c{display:block;font-size:.68rem;color:#94a3b8;margin-top:4px;font-weight:600}
#ivw .ivp-tier.sel{border-color:#e60000;background:#fff5f5;box-shadow:0 0 0 3px rgba(230,0,0,.12)}
#ivw .ivp-tier.sel .vt-a{color:#cc0000}
#ivw .ivp-tier .vt-b{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#10b981;color:#fff;
  font-size:.58rem;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:99px;white-space:nowrap}
#ivw .ivp-mail{width:100%;font-family:inherit;font-size:1rem;font-weight:600;color:#0F172A;background:#fff;
  border:1.5px solid #e6ebf1;border-radius:12px;padding:13px 15px;margin-bottom:10px;-webkit-appearance:none;appearance:none}
#ivw .ivp-mail:focus{outline:0;border-color:#e60000;box-shadow:0 0 0 3px rgba(230,0,0,.12)}
#ivw .ivp-mail::placeholder{color:#aab3c5}
#ivw #ivpPayEl{margin:4px 0 12px;min-height:0}
#ivw #ivpExpress{margin:2px 0 0}
#ivw .ivp-or{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:.8rem;margin:14px 0 12px}
#ivw .ivp-or:before,#ivw .ivp-or:after{content:'';flex:1;height:1px;background:#e6ebf1}
html[data-theme="dark"] #ivw .ivp-or:before,html[data-theme="dark"] #ivw .ivp-or:after{background:#243049}
#ivw .ivp-payerr{color:#e11d48;font-size:.88rem;margin:8px 2px 0;display:none}
#ivw .ivp-payerr.show{display:block}
@media(max-width:560px){
  #ivw .ivp-tiers{grid-template-columns:repeat(3,1fr)}
}
html[data-theme="dark"] #ivw .ivp-tier{background:#0f1626;border-color:#243049}
html[data-theme="dark"] #ivw .ivp-tier .vt-a{color:#f7fafc}
html[data-theme="dark"] #ivw .ivp-tier.sel{background:rgba(255,68,68,.12);border-color:#e60000}
html[data-theme="dark"] #ivw .ivp-tier.sel .vt-a{color:#ffb3b3}
html[data-theme="dark"] #ivw .ivp-mail{background:#0f1626;border-color:#243049;color:#f7fafc}
</style>

<style id="ivp-iv-css">
/* IV-specific pieces, in the cloned card's language */
#ivw .ivw-vid{display:flex;gap:14px;align-items:center;text-align:left;margin:6px 0 14px}
#ivw .ivw-vthumb{width:132px;aspect-ratio:16/9;border-radius:12px;object-fit:cover;background:#e6ebf1;flex:none;box-shadow:0 8px 22px -10px rgba(50,50,93,.35)}
#ivw .ivw-vtitle{font-weight:800;font-size:1rem;line-height:1.3;color:#0F172A}
#ivw .ivw-vmeta{font-size:.8rem;color:#64748b;margin-top:4px}
#ivw .ivw-scan{position:relative;border-radius:14px;overflow:hidden;background:#0F172A;aspect-ratio:16/9;margin:8px 0 12px}
#ivw .ivw-scan img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.8)}
#ivw .ivw-scan .ivw-line{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#ff4444,transparent);box-shadow:0 0 18px #ff4444;animation:ivwScan 2.6s ease-in-out infinite}
@keyframes ivwScan{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0}}
#ivw .ivw-scan .ivw-tc{position:absolute;left:12px;bottom:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:.78rem;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px;letter-spacing:.04em}
#ivw .ivw-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;text-align:left}
#ivw .ivw-stages li{font-size:.82rem;color:#94a3b8;display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:9px;background:#f8fafc;border:1px solid #eef2f7}
#ivw .ivw-stages li.on{color:#0F172A;border-color:#ffd1d1;background:#fff5f5}
#ivw .ivw-stages li.done{color:#0F172A}
#ivw .ivw-stages li i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex:none}
#ivw .ivw-stages li.on i{background:#e60000;box-shadow:0 0 0 4px rgba(230,0,0,.14);animation:ivwPulse 1.2s ease-in-out infinite}
#ivw .ivw-stages li.done i{background:#10b981}
@keyframes ivwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
/* mode toggle — the question they are asking, chosen before they paste */
#ivw .ivw-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
#ivw .ivw-mode{cursor:pointer;font-family:inherit;text-align:left;padding:11px 13px;border-radius:12px;border:1.5px solid #e6ebf1;
  background:#fff;transition:.18s;font-weight:800;font-size:.9rem;color:#0F172A}
#ivw .ivw-mode span{display:block;font-weight:600;font-size:.75rem;color:#94a3b8;margin-top:2px}
#ivw .ivw-mode:hover{border-color:#ffb3b3}
#ivw .ivw-mode.sel{border-color:#e60000;background:#fff5f5;box-shadow:0 0 0 3px rgba(230,0,0,.10)}
#ivw .ivw-mode.sel span{color:#cc0000}
/* the verdict — the punch line, before anything else */
#ivw .ivw-verdict{text-align:left;font-size:1.06rem;line-height:1.5;font-weight:700;color:#0F172A;
  border-left:3px solid #e60000;background:#fff5f5;border-radius:0 12px 12px 0;padding:14px 16px;margin:4px 0 14px}
/* the one free finding, shown in full — a usable fix sells better than a promise of one */
#ivw .ivw-find{text-align:left;border:1px solid #ffd1d1;border-radius:14px;padding:14px 16px;background:#fff;margin-bottom:12px}
#ivw .ivw-find-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#ivw .ivw-find-h b{font-family:'Space Mono',ui-monospace,monospace;font-size:.9rem;color:#fff;background:#e60000;padding:3px 9px;border-radius:7px}
#ivw .ivw-find-h span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;font-weight:800}
#ivw .ivw-find-i{margin:0;font-size:.94rem;line-height:1.55;color:#0F172A;font-weight:600}
#ivw .ivw-find-c{margin:6px 0 0;font-size:.88rem;line-height:1.5;color:#64748b}
#ivw .ivw-fix{margin-top:11px;padding:11px 13px;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0;
  font-size:.9rem;line-height:1.5;color:#065f46}
#ivw .ivw-fix span{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#059669;font-weight:800;margin-bottom:3px}
/* where the locked problems are — located, not described */
#ivw .ivw-ats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0 2px}
#ivw .ivw-ats span{font-family:'Space Mono',ui-monospace,monospace;font-size:.78rem;font-weight:700;color:#e60000;
  background:#fff;border:1px solid #ffd1d1;border-radius:7px;padding:3px 9px}
#ivw .ivw-good{margin-top:12px}
#ivw .ivw-good h4{color:#059669}
#ivw .ivw-good .ivw-beats li{grid-template-columns:24px 1fr}
#ivw .ivw-good .ivw-beats li b{padding-top:1px}
#ivw .ivw-screen[data-s="diag"] .ivw-sticky{position:sticky;bottom:0;z-index:3;margin:0 -4px;
  padding:14px 4px calc(20px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 24%)}
#ivw .ivw-formula{text-align:left;display:grid;gap:10px;margin:8px 0 12px}
#ivw .ivw-fbox{border:1px solid #e6ebf1;border-radius:14px;padding:14px 16px;background:#fff}
#ivw .ivw-fbox h4{margin:0 0 6px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#e60000;font-weight:800;display:flex;gap:7px;align-items:center}
#ivw .ivw-fbox p{margin:0;font-size:.92rem;line-height:1.55;color:#334155}
#ivw .ivw-fbox p b{color:#0F172A}
#ivw .ivw-beats{list-style:none;margin:0;padding:0}
#ivw .ivw-beats li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:7px 0;border-top:1px solid #f1f5f9;font-size:.9rem;line-height:1.45;color:#334155}
#ivw .ivw-beats li:first-child{border-top:0}
#ivw .ivw-beats li b{font-family:'Space Mono',ui-monospace,monospace;font-size:.78rem;color:#e60000;font-weight:700;padding-top:2px}
#ivw .ivw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#ivw .ivw-chips span{font-size:.78rem;padding:5px 10px;border-radius:99px;background:#f1f5f9;color:#334155;border:1px solid #e6ebf1}
/* "+N more beats" — counted, not printed: shorter page, and the rest is the sell */
#ivw .ivw-more{margin-top:8px;padding:9px 12px;border-radius:10px;border:1px dashed #ffb3b3;background:#fff5f5;
  font-size:.82rem;font-weight:700;color:#e60000;text-align:center}
/* three short reads in one box instead of three tall boxes */
#ivw .ivw-glance{display:grid;gap:9px}
#ivw .ivw-grow{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:baseline;font-size:.86rem;line-height:1.45}
#ivw .ivw-grow b{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;font-weight:800}
#ivw .ivw-grow span{color:#334155;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the price stays on screen while they read — it used to be six screens down */
/* bottom:0 with padding under the button lifts it off the edge while the fade
   still covers to the very bottom, so nothing peeks through beneath it.
   env() keeps it clear of the iPhone home indicator. */
#ivw .ivw-screen[data-s="reveal"] .ivw-sticky{position:sticky;bottom:0;z-index:3;margin:0 -4px;
  padding:14px 4px calc(20px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 24%)}
#ivw .ivw-formline span{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#e60000;font-weight:800;margin-bottom:4px}
#ivw .ivw-formline{border-left:3px solid #e60000;background:#fff5f5;border-radius:0 12px 12px 0;padding:12px 14px;font-size:.95rem;line-height:1.5;color:#0F172A;font-weight:600}
#ivw .ivw-plan{border:2px solid #0F172A;border-radius:16px;padding:16px 18px;text-align:left;margin:8px 0 12px;background:#fff}
#ivw .ivw-plan .ivw-pt{display:flex;align-items:baseline;gap:8px}
#ivw .ivw-plan .ivw-pt b{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:#0F172A}
#ivw .ivw-plan .ivw-pt s{color:#94a3b8;font-size:1rem}
#ivw .ivw-plan .ivw-pt span{color:#64748b;font-size:.85rem}
#ivw .ivw-plan ul{list-style:none;margin:10px 0 0;padding:0}
#ivw .ivw-plan li{display:flex;gap:8px;font-size:.86rem;color:#334155;padding:5px 0;align-items:flex-start}
#ivw .ivw-plan li svg{flex:none;margin-top:3px}
#ivw .ivp-tiers.iv2{grid-template-columns:repeat(2,1fr)}
#ivw .ivp-tier .vt-c{font-size:.72rem}
html[data-theme="dark"] #ivw .ivw-vtitle,html[data-theme="dark"] #ivw .ivw-fbox p b,html[data-theme="dark"] #ivw .ivw-formline,html[data-theme="dark"] #ivw .ivw-plan .ivw-pt b{color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-fbox,html[data-theme="dark"] #ivw .ivw-plan{background:#0f1626;border-color:#243049}
html[data-theme="dark"] #ivw .ivw-fbox p,html[data-theme="dark"] #ivw .ivw-beats li,html[data-theme="dark"] #ivw .ivw-plan li{color:#cbd5e1}
html[data-theme="dark"] #ivw .ivw-stages li{background:#0f1626;border-color:#243049}
html[data-theme="dark"] #ivw .ivw-stages li.on{background:rgba(230,0,0,.10);border-color:rgba(230,0,0,.35)}
html[data-theme="dark"] #ivw .ivw-chips span{background:#1e293b;border-color:#334155;color:#cbd5e1}
html[data-theme="dark"] #ivw .ivw-formline{background:rgba(230,0,0,.10)}
html[data-theme="dark"] #ivw .ivw-more{background:rgba(230,0,0,.10);border-color:rgba(230,0,0,.4)}
html[data-theme="dark"] #ivw .ivw-grow span{color:#cbd5e1}
html[data-theme="dark"] #ivw .ivw-mode{background:#0f1626;border-color:#243049;color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-mode.sel{background:rgba(230,0,0,.10);border-color:#e60000}
html[data-theme="dark"] #ivw .ivw-verdict{background:rgba(230,0,0,.10);color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-find{background:#0f1626;border-color:rgba(230,0,0,.35)}
html[data-theme="dark"] #ivw .ivw-find-i{color:#f7fafc}
html[data-theme="dark"] #ivw .ivw-fix{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35);color:#6ee7b7}
html[data-theme="dark"] #ivw .ivw-ats span{background:#0f1626;border-color:rgba(230,0,0,.35)}
html[data-theme="dark"] #ivw .ivw-screen[data-s="diag"] .ivw-sticky{background:linear-gradient(180deg,rgba(15,22,38,0) 0%,#0f1626 24%)}
html[data-theme="dark"] #ivw .ivw-screen[data-s="reveal"] .ivw-sticky{background:linear-gradient(180deg,rgba(15,22,38,0) 0%,#0f1626 24%)}
@media(max-width:560px){#ivw .ivw-stages{grid-template-columns:1fr}#ivw .ivw-vthumb{width:104px}}
</style>

<div id="ivw" role="dialog" aria-modal="true" aria-label="Free video decode">
  <div class="ivw-aurora"></div>
  <button class="ivw-close" type="button" aria-label="Close" onclick="ivpClose()">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
  <div class="ivw-wrap">
    <div class="ivw-card">

      <!-- 1. INPUT -->
      <section class="ivw-screen" data-s="input">
        <span class="ivw-kicker"><span class="ivw-dot"></span><span id="ivwKick">Free video read</span></span>
        <h2 class="ivw-h" id="ivwInH">Why didn&rsquo;t your last video land? <span class="ivw-grad">Find out in two minutes.</span></h2>
        <p class="ivw-sub" id="ivwInSub">Paste your own video. IV watches the whole thing &mdash; not the stats, the video &mdash; and tells you what is holding it back, second by second, with the exact change to make.</p>
        <div class="ivw-modes" id="ivwModes">
          <button type="button" class="ivw-mode sel" data-m="mine"   onclick="ivwMode('mine')">My video<span>what is holding it back</span></button>
          <button type="button" class="ivw-mode"     data-m="theirs" onclick="ivwMode('theirs')">Someone else&rsquo;s<span>why theirs works</span></button>
        </div>
        <div class="ivw-inwrap">
          <span class="ivw-at"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49 49 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49 49 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg></span>
          <input class="ivw-input" id="ivwInput" type="url" inputmode="url" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="youtube.com/watch?v=…" aria-label="YouTube video link">
          <button class="ivw-btn" type="button" onclick="ivwStart()"><span id="ivwGoTxt">Read my video</span> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
        </div>
        <div class="ivw-err" id="ivwErr"></div>
        <div class="ivw-trust">
          <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>IV actually watches the video</span>
          <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>No login, no card</span>
          <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>About two minutes</span>
        </div>
        <div class="ivw-pubonly">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
          <span>Public videos up to an hour. One free read a day &mdash; IV members run five, on every video they have.</span>
        </div>
      </section>

      <!-- 2. CHECKING -->
      <section class="ivw-screen" data-s="checking">
        <span class="ivw-kicker"><span class="ivw-dot"></span>Finding the video</span>
        <h2 class="ivw-h">Opening <span class="ivw-grad" id="ivwChkUser">the link</span>&hellip;</h2>
        <div class="ivw-stageline"><span class="ivw-spin"></span><span id="ivwChkLine">Reaching YouTube&hellip;</span></div>
        <div class="ivw-prog"><i id="ivwChkBar"></i></div>
      </section>

      <!-- 2b. NOT FOUND -->
      <section class="ivw-screen" data-s="notfound">
        <span class="ivw-kicker" style="background:#fff7ed;border-color:#fed7aa;color:#c2410c"><span class="ivw-dot" style="background:#f59e0b"></span>Couldn&rsquo;t open that</span>
        <h2 class="ivw-h" id="ivwNfH">We couldn&rsquo;t open <span class="ivw-grad">that video</span></h2>
        <p class="ivw-sub" id="ivwNfSub">It may be private, deleted, or the link is not a YouTube video link. Try another.</p>
        <button class="ivw-btn block" type="button" onclick="ivwEdit()">Try another link</button>
      </section>

      <!-- 2c. LIMIT / UNAVAILABLE — honest, never a sales screen -->
      <section class="ivw-screen" data-s="unavail">
        <span class="ivw-kicker" style="background:#f1f5f9;border-color:#e2e8f0;color:#475569"><span class="ivw-dot" style="background:#94a3b8"></span>Not right now</span>
        <h2 class="ivw-h" id="ivwUnH">That one didn&rsquo;t go through</h2>
        <p class="ivw-sub" id="ivwUnSub">Give it another go in a moment.</p>
        <button class="ivw-btn block" type="button" onclick="ivwRetry()">Try again</button>
        <button class="ivw-back" type="button" onclick="ivwEdit()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Try another link</button>
      </section>

      <!-- 3. ANALYZE — a REAL decode is running; this screen tracks it -->
      <section class="ivw-screen" data-s="analyze">
        <span class="ivw-kicker"><span class="ivw-dot"></span><span id="ivwAnKick">Watching your video</span></span>
        <div class="ivw-vid">
          <img class="ivw-vthumb" id="ivwAnThumb" alt="" referrerpolicy="no-referrer">
          <div><div class="ivw-vtitle" id="ivwAnTitle">&nbsp;</div><div class="ivw-vmeta" id="ivwAnMeta"></div></div>
        </div>
        <div class="ivw-scan"><img id="ivwScanImg" alt="" referrerpolicy="no-referrer"><div class="ivw-line"></div><div class="ivw-tc" id="ivwTc">00:00</div></div>
        <div class="ivw-stageline"><span class="ivw-spin"></span><span id="ivwAnLine">Loading the video&hellip;</span></div>
        <div class="ivw-prog"><i id="ivwAnBar"></i></div>
        <ul class="ivw-stages" id="ivwStages">
          <li><i></i>Watching the opening</li><li><i></i>Following the attention</li>
          <li><i></i>Reading the pacing</li><li><i></i>Promise vs payoff</li>
          <li><i></i>Title and thumbnail</li><li><i></i>Writing the fixes</li>
        </ul>
        <div class="ivw-note2" style="margin-top:10px">This is a real watch, not an estimate &mdash; it usually takes one to three minutes.</div>
      </section>

      <!-- 4a. DIAGNOSIS — the verdict + ONE real fix free. The rest, located but locked. -->
      <section class="ivw-screen" data-s="diag">
        <span class="ivw-kicker"><span class="ivw-dot"></span>Your video, watched</span>
        <h2 class="ivw-h">What&rsquo;s <span class="ivw-grad">holding it back</span></h2>
        <div class="ivw-verdict" id="ivwVerdict"></div>
        <div class="ivw-vid"><img class="ivw-vthumb" id="ivwDgThumb" alt="" referrerpolicy="no-referrer"><div><div class="ivw-vtitle" id="ivwDgTitle"></div><div class="ivw-vmeta" id="ivwDgMeta"></div></div></div>
        <div id="ivwDgBody"></div>
        <div class="ivw-sticky">
          <button class="ivw-btn block" type="button" onclick="ivwUnlock()" style="font-size:1.05rem;padding:14px">Start IV &mdash; $12 for the first week</button>
        </div>
        <button class="ivw-back" type="button" onclick="ivwEdit()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Read a different video</button>
      </section>

      <!-- 4b. REVEAL — the formula, free. Your version, locked. -->
      <section class="ivw-screen" data-s="reveal">
        <span class="ivw-kicker"><span class="ivw-dot"></span>Decoded</span>
        <h2 class="ivw-h">Here&rsquo;s <span class="ivw-grad">why it works</span></h2>
        <p class="ivw-sub">Everything below comes from IV watching the video a moment ago. Nothing is estimated.</p>
        <div class="ivw-vid"><img class="ivw-vthumb" id="ivwRvThumb" alt="" referrerpolicy="no-referrer"><div><div class="ivw-vtitle" id="ivwRvTitle"></div><div class="ivw-vmeta" id="ivwRvMeta"></div></div></div>
        <div class="ivw-formula" id="ivwFormula"></div>

        <div class="ivw-locked">
          <div class="ivw-linner">
            <div class="ivw-lockrow"><span>Your version of this video</span><span id="ivwLkA">script, titles, thumbnail concept</span></div>
            <div class="ivw-lockrow"><span>Run this on <b>your</b> channel</span><span>retention, back-catalog, thumbnails</span></div>
            <div class="ivw-lockrow"><span>Every new upload from channels you watch</span><span>decoded automatically</span></div>
          </div>
          <div class="ivw-lockover">
            <div class="ivw-lockicon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div>
            <div class="ivw-lk">Your version &mdash; and the nine channel tools</div>
            <div class="ivw-lksub" id="ivwLkSub">IV rewrites this formula as a script you could shoot tomorrow, with titles and a thumbnail concept. Then it does the same for the videos you already have.</div>
          </div>
        </div>

        <div class="ivw-sticky">
          <button class="ivw-btn block" type="button" onclick="ivwUnlock()" id="ivwUnlockBtn" style="font-size:1.05rem;padding:14px">Start IV &mdash; $12 for the first week</button>
        </div>
        <button class="ivw-back" type="button" onclick="ivwEdit()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Decode a different video</button>
      </section>

      <!-- 5. CHECKOUT — the one IV plan, paid inside the widget -->
      <section class="ivw-screen" data-s="pay">
        <span class="ivw-kicker"><span class="ivw-dot"></span>One step from your version</span>
        <div class="ivw-plan">
          <div class="ivw-pt"><b id="ivpNow">$12</b><s id="ivpWas">$15</s><span id="ivpCredits">first week &middot; cancel anytime</span></div>
          <ul>
            <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>All ten tools on your connected channel</li>
            <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Your version of this decode &mdash; and five decodes a day</li>
            <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Every change reviewed by you, and reversible</li>
          </ul>
        </div>
        <div class="ivp-tiers iv2" id="ivpTiers">
          <button class="ivp-tier sel" type="button" data-tier="wk" onclick="ivpTier('wk')"><span class="vt-a">$12</span><span class="vt-c">a week &middot; try it on your real channel</span></button>
          <button class="ivp-tier"     type="button" data-tier="mo" onclick="ivpTier('mo')"><span class="vt-a">$29</span><span class="vt-c">a month &middot; best value</span></button>
        </div>
        <div id="ivpExpress"></div>
        <div class="ivp-or" id="ivpOr" style="display:none"><span>or pay by card</span></div>
        <label for="ivpEmail" style="display:block;text-align:left;font-weight:700;font-size:.86rem;color:#0F172A;margin:2px 0 4px">Account email</label>
        <input class="ivp-mail" id="ivpEmail" type="email" inputmode="email" autocomplete="email" placeholder="you@email.com" aria-label="Email">
        <div class="ivw-note2" style="margin:4px 0 8px;text-align:left">Your IV account is created on this email. You connect your channel on the other side.</div>
        <div id="ivpPayEl"></div>
        <button class="ivw-btn block" type="button" id="ivpPayBtn" onclick="ivpPay()" style="font-size:1.02rem;padding:14px"><span id="ivpPayTxt">Start IV &mdash; $12 for the first week</span></button>
        <div class="ivp-payerr" id="ivpPayErr"></div>
        <div class="ivw-note2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Secure payment. Your dashboard opens the moment it clears &mdash; no signup form.</div>
        <div class="ivw-note2" style="margin-top:4px"><a href="https://growth.instantviews.net/login" style="color:#e60000;text-decoration:none;font-weight:600">Already a member? Open your dashboard &rarr;</a></div>
        <button class="ivw-back" type="button" onclick="ivwGo('reveal')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Back to the decode</button>
      </section>

    </div>
  </div>
</div>

<script id="ivp-ivw-js">
(function(){
  "use strict";
  var RM = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
  var API = 'https://growth.instantviews.net/api/public/decode.php'; /* LEAK SWEEP 2026-09-03: clean alias, no internal folder names in the browser */

  // The one plan, two cadences. Keys must match /api/pay/create-intent.php, which
  // is what actually prices the charge. Labels are display only.
  var TIERS={'wk':['$12',1200,' for the first week','$15','first week · cancel anytime'],
             'mo':['$29',2900,' a month','$39','a month · cancel anytime']};
  var IVP_PK='pk_live_siBTiR1JWxVjK8XnJTYhVFm0';
  var state={vid:'',video:null,id:0,t:'',data:null,tier:'wk',busy:false,order:'',poll:null,mode:'mine'};
  var stripe=null, elements=null, mounted=false;

  var $=function(id){return document.getElementById(id);};
  function q(s){return document.querySelector(s);}
  function sleep(ms){return new Promise(function(r){setTimeout(r,RM?Math.min(ms,60):ms);});}
  function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
  function mmss(s){s=Math.max(0,Math.round(Number(s)||0));var m=Math.floor(s/60),x=s%60;return (m<10?'0':'')+m+':'+(x<10?'0':'')+x;}
  function vidOf(v){v=String(v||'').trim();var m=v.match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|shorts\/|embed\/|live\/|v\/)|youtu\.be\/)([0-9A-Za-z_-]{11})/);if(m)return m[1];return /^[0-9A-Za-z_-]{11}$/.test(v)?v:'';}

  // 'mine' = what is holding YOUR video back (the default, and the stronger hook:
  // a creator's own flop is a live problem, a stranger's hit is only curiosity).
  // 'theirs' = why that video works. Same watch, different question.
  window.ivwMode=function(m){
    state.mode = (m==='theirs') ? 'theirs' : 'mine';
    var b=document.querySelectorAll('#ivwModes .ivw-mode');
    for(var i=0;i<b.length;i++) b[i].classList.toggle('sel', b[i].getAttribute('data-m')===state.mode);
    var mine = state.mode==='mine';
    $('ivwKick').textContent  = mine ? 'Free video read' : 'Free video decode';
    $('ivwGoTxt').textContent = mine ? 'Read my video'   : 'Decode it';
    $('ivwInH').innerHTML = mine
      ? 'Why didn\u2019t your last video land? <span class="ivw-grad">Find out in two minutes.</span>'
      : 'Paste any YouTube video. <span class="ivw-grad">See why it works.</span>';
    $('ivwInSub').textContent = mine
      ? 'Paste your own video. IV watches the whole thing \u2014 not the stats, the video \u2014 and tells you what is holding it back, second by second, with the exact change to make.'
      : 'IV watches the whole video and breaks down the hook, the structure with timestamps, the pacing and the repeatable formula. Then it writes your version.';
    $('ivwInput').placeholder = mine ? 'Paste your video link\u2026' : 'youtube.com/watch?v=\u2026';
    $('ivwAnKick').textContent = mine ? 'Watching your video' : 'Watching the video';
    $('ivwErr').textContent='';
  };

  function ivwGo(name){
    var scr=document.querySelectorAll('#ivw .ivw-screen');
    for(var i=0;i<scr.length;i++){scr[i].classList.toggle('show',scr[i].getAttribute('data-s')===name);}
    var w=q('#ivw .ivw-wrap');if(w)w.scrollTop=0;var g=$('ivw');if(g)g.scrollTop=0;
  }
  window.ivwGo=ivwGo;

  // Entry point — the page's hero form / buttons call ivpOpen(url?).
  window.ivpOpen=function(prefill){
    if(!window.Stripe && !window.__ivpSj){ window.__ivpSj=1;
      var sc=document.createElement('script'); sc.src='https://js.stripe.com/v3/'; sc.async=true; document.head.appendChild(sc); }
    $('ivw').classList.add('on');document.body.style.overflow='hidden';ivwGo('input');
    ivwMode(state.mode);   // sync every mode-dependent string on open, not only on click
    var inp=$('ivwInput');if(inp){if(prefill)inp.value=prefill;setTimeout(function(){try{inp.focus();}catch(e){}},250);}
    if(prefill && vidOf(prefill)) setTimeout(ivwStart, 300);
  };
  window.ivwOpen=window.ivpOpen;
  window.ivpClose=function(){$('ivw').classList.remove('on');document.body.style.overflow='';if(state.poll){clearTimeout(state.poll);state.poll=null;}};
  document.addEventListener('keydown',function(e){if(e.key==='Escape'&&$('ivw').classList.contains('on'))window.ivpClose();});

  function ivwStart(){
    if(state.busy)return;
    var raw=$('ivwInput').value; $('ivwErr').textContent='';
    var v=vidOf(raw);
    if(!v){$('ivwErr').textContent='Paste a YouTube video link — watch, Shorts or youtu.be.';return;}
    state.vid=v; resolve(v);
  }
  window.ivwStart=ivwStart;
  function ivwRetry(){if(state.vid)resolve(state.vid);else ivwGo('input');}
  window.ivwRetry=ivwRetry;
  function ivwEdit(){if(state.poll){clearTimeout(state.poll);state.poll=null;}state.busy=false;ivwGo('input');var i=$('ivwInput');if(i)setTimeout(function(){try{i.focus();i.select();}catch(e){}},120);}
  window.ivwEdit=ivwEdit;
  $('ivwInput')&&$('ivwInput').addEventListener('keydown',function(e){if(e.key==='Enter')ivwStart();});

  function unavail(h,sub){ $('ivwUnH').textContent=h||'That one didn’t go through'; $('ivwUnSub').textContent=sub||'Give it another go in a moment.'; ivwGo('unavail'); }

  // ── 1. resolve: ask the door to start (or hand back an existing) decode ──
  async function resolve(v){
    state.busy=true; ivwGo('checking');
    $('ivwChkUser').textContent='the video'; $('ivwChkLine').textContent='Reaching YouTube…'; $('ivwChkBar').style.width='18%';
    var d=null;
    try{
      var r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'start',video:v,mode:state.mode})});
      d=await r.json();
    }catch(e){ state.busy=false; return unavail('We couldn’t reach the decoder','Check your connection and try again in a moment.'); }
    if(!d||!d.ok){
      state.busy=false;
      var err=(d&&d.error)||'';
      if(err==='bad_link'||err==='not_found'){ $('ivwNfSub').textContent=(d&&d.message)||'It may be private, deleted, or not a YouTube link.'; return ivwGo('notfound'); }
      if(err==='ip_cap'||err==='day_cap') return unavail('Today’s free decode is used', (d&&d.message)||'');
      if(err==='too_long') return unavail('That video is longer than an hour', (d&&d.message)||'');
      return unavail('That one didn’t go through', (d&&d.message)||'Try again in a moment.');
    }
    state.id=d.id; state.t=d.t; state.video=d.video||{id:v};
    $('ivwChkBar').style.width='100%'; $('ivwChkLine').textContent='Found it.';
    await sleep(350);
    if(d.status==='ready'){ state.data=d; return show(); }
    runAnalysis();
  }

  // ── 2. analyze: a REAL decode is running on the server; poll it honestly ──
  var STAGE_AT=[0,25,55,85,115,150];   // seconds after start when each stage lights (typical chain ~1-3 min)
  function paintStages(age){
    var li=document.querySelectorAll('#ivwStages li'), on=-1;
    for(var i=0;i<li.length;i++){ if(age>=STAGE_AT[i]) on=i; }
    for(var j=0;j<li.length;j++){ li[j].classList.toggle('done',j<on); li[j].classList.toggle('on',j===on); }
    var lines = state.mode==='mine'
      ? ['Loading your video…','Watching the opening seconds…','Following where attention slips…','Reading the pacing and cuts…','Checking the promise against the payoff…','Reading your title and thumbnail…','Writing the fixes…']
      : ['Loading the video…','Watching the opening seconds…','Mapping the structure with timestamps…','Reading the pacing and cuts…','Finding what keeps people watching…','Reading title and thumbnail…','Writing the formula…'];
    $('ivwAnLine').textContent=lines[Math.min(lines.length-1,on+1)];
    // the bar creeps to 92% and only completes on 'ready' — never lies about being done
    $('ivwAnBar').style.width=Math.min(92, 8+age*0.55)+'%';
    var dur=Number(state.video&&state.video.duration_s)||0;
    $('ivwTc').textContent=mmss(dur>0?Math.min(dur, age*(dur/150)):age);
  }
  function runAnalysis(){
    var v=state.video||{};
    $('ivwAnThumb').src=v.thumb||''; $('ivwScanImg').src=v.thumb||'';
    $('ivwAnTitle').textContent=v.title||''; $('ivwAnMeta').textContent=(v.channel?v.channel+' · ':'')+(v.duration_s?mmss(v.duration_s):'');
    ivwGo('analyze'); paintStages(0);
    var t0=Date.now();
    (function tick(){
      var age=Math.round((Date.now()-t0)/1000);
      paintStages(age);
      state.poll=setTimeout(async function(){
        var d=null;
        try{ var r=await fetch(API+'?action=status&mode='+state.mode+'&id='+encodeURIComponent(state.id)+'&t='+encodeURIComponent(state.t)); d=await r.json(); }catch(e){}
        if(d&&d.ok&&d.status==='ready'){ state.poll=null; state.data=d; $('ivwAnBar').style.width='100%'; await sleep(450); return show(); }
        if(d&&d.ok&&d.status==='failed'){ state.poll=null; state.busy=false; return unavail('IV couldn’t watch that one', d.message||''); }
        if(age>600){ state.poll=null; state.busy=false; return unavail('That one is taking too long','The decode is still running — paste the same link again in a few minutes and it opens instantly.'); }
        tick();
      }, age<20?3000:5000);
    })();
  }

  function show(){ return state.mode==='mine' ? renderDiag() : renderReveal(); }

  // ── 3a. diagnosis: the verdict, one real fix, and where the rest are ──
  function renderDiag(){
    var d=state.data||{}, v=d.video||state.video||{}, f=d.finding||null, lk=d.locked||{};
    state.busy=false;
    $('ivwDgThumb').src=v.thumb||''; $('ivwDgTitle').textContent=v.title||'';
    $('ivwDgMeta').textContent=(v.duration_s?mmss(v.duration_s):'')+(v.is_short?' · Short':'');
    $('ivwVerdict').textContent=d.verdict||'';
    var h='';
    if(f){
      h+='<div class="ivw-find"><div class="ivw-find-h"><b>'+esc(f.at||'')+'</b><span>Biggest thing costing you views</span></div>'
        + '<p class="ivw-find-i">'+esc(f.issue||'')+'</p>'
        + (f.cost?'<p class="ivw-find-c">'+esc(f.cost)+'</p>':'')
        + (f.fix?'<div class="ivw-fix"><span>The fix</span>'+esc(f.fix)+'</div>':'')
        + '</div>';
    }
    // ⛔ The rest are LOCATED, not described. Seeing "2 more, at 1:42 and 4:08"
    // is a sharper want than a sentence promising there is more.
    var n=Number(lk.count)||0;
    if(n>0){
      var at=(lk.at||[]).map(function(t){return '<span>'+esc(t)+'</span>';}).join('');
      h+='<div class="ivw-locked"><div class="ivw-linner">'
        + '<div class="ivw-lockrow"><span>Problem 2</span><span>found</span></div>'
        + '<div class="ivw-lockrow"><span>Problem 3</span><span>found</span></div>'
        + (lk.packaging?'<div class="ivw-lockrow"><span>Your title &amp; thumbnail</span><span>reviewed</span></div>':'')
        + '</div><div class="ivw-lockover"><div class="ivw-lockicon">'+LOCKSVG+'</div>'
        + '<div class="ivw-lk">'+n+' more problem'+(n===1?'':'s')+' found in this video</div>'
        + (at?'<div class="ivw-ats">'+at+'</div>':'')
        + '<div class="ivw-lksub">Each one comes with the exact change to make &mdash; and IV then does this on every video you already have, not just this one.</div>'
        + '</div></div>';
    } else if(lk.packaging){
      h+='<div class="ivw-locked"><div class="ivw-linner"><div class="ivw-lockrow"><span>Your title &amp; thumbnail</span><span>reviewed</span></div></div>'
        + '<div class="ivw-lockover"><div class="ivw-lockicon">'+LOCKSVG+'</div><div class="ivw-lk">Your title and thumbnail, reviewed</div>'
        + '<div class="ivw-lksub">Whether what they promise matches what the video delivers &mdash; and what to change.</div></div></div>';
    }
    if((d.strengths||[]).length){
      h+='<div class="ivw-fbox ivw-good"><h4>'+I_GOOD+'What is already working</h4><ul class="ivw-beats">'
        + d.strengths.map(function(x,i){return '<li><b>'+CHKSM+'</b><span>'+esc(x)+'</span></li>';}).join('')+'</ul></div>';
    }
    $('ivwDgBody').innerHTML=h;
    ivwGo('diag');
  }

  function box(title,icon,inner){ return '<div class="ivw-fbox"><h4>'+icon+esc(title)+'</h4>'+inner+'</div>'; }
  var I_HOOK='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>';
  var I_LIST='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>';
  var I_PACE='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>';
  var I_WHY='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>';
  var LOCKSVG='<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>';
  var CHKSM='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
  var I_GOOD='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
  var I_PKG='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
  // ⛔ SHOW LESS THAN WE HAVE. The full decode ran to six screens of scrolling —
  // which buried the price AND handed over so much that there was little left to
  // want. The reveal now proves the depth (real hook, real timestamps, the
  // formula) and stops: the remaining beats are counted, not printed, and the
  // secondary reads are compressed to one line each.
  var BEATS_SHOWN = 4, WHY_SHOWN = 2;
  function renderReveal(){
    var d=state.data||{}, f=d.formula||{}, v=d.video||state.video||{};
    state.busy=false;
    $('ivwRvThumb').src=v.thumb||''; $('ivwRvTitle').textContent=v.title||''; $('ivwRvMeta').textContent=(v.duration_s?mmss(v.duration_s):'')+(v.is_short?' · Short':'');
    var h='';
    if(f.hook){ h+=box('The hook',I_HOOK,'<p><b>'+esc(f.hook.technique||'')+'</b>'+(f.hook.technique?'<br>':'')+esc(f.hook.opening_seconds||'')+'</p>'); }
    if(f.structure&&f.structure.length){
      var st=f.structure, shown=st.slice(0,BEATS_SHOWN), rest=st.length-shown.length;
      h+=box('The structure',I_LIST,
        '<ul class="ivw-beats">'+shown.map(function(b){return '<li><b>'+esc(b.t||'')+'</b><span>'+esc(b.beat||'')+'</span></li>';}).join('')+'</ul>'
        + (rest>0 ? '<div class="ivw-more">'+rest+' more beat'+(rest===1?'':'s')+' mapped, through to the end</div>' : ''));
    }
    // pacing + devices + packaging: three short reads, one compact box
    var g='';
    if(f.pacing)   g+='<div class="ivw-grow"><b>Pacing</b><span>'+esc(f.pacing)+'</span></div>';
    if(f.packaging)g+='<div class="ivw-grow"><b>Packaging</b><span>'+esc(f.packaging)+'</span></div>';
    if(f.retention_devices&&f.retention_devices.length) g+='<div class="ivw-grow"><b>Holds attention</b><span>'+f.retention_devices.slice(0,3).map(esc).join(' · ')+'</span></div>';
    if(g) h+=box('At a glance',I_PACE,'<div class="ivw-glance">'+g+'</div>');
    if(f.why_it_works&&f.why_it_works.length){ h+=box('Why it works',I_WHY,'<ul class="ivw-beats">'+f.why_it_works.slice(0,WHY_SHOWN).map(function(x,i){return '<li><b>'+(i+1)+'</b><span>'+esc(x)+'</span></li>';}).join('')+'</ul>'); }
    if(f.formula){ h+='<div class="ivw-formline"><span>The formula</span>'+esc(f.formula)+'</div>'; }
    $('ivwFormula').innerHTML=h||'<div class="ivw-fbox"><p>The decode came back empty — try another video.</p></div>';
    var lk=d.locked||{}; if(lk.titles) $('ivwLkA').textContent='script, '+lk.titles+' titles, thumbnail concept';
    ivwGo('reveal');
  }

  // ── 4. pay: the one plan ──
  function ivwUnlock(){ ivpTier(state.tier); ivwGo('pay'); mountPay(); }
  window.ivwUnlock=ivwUnlock;
  window.ivpTier=function(t){
    if(!TIERS[t])return; state.tier=t;
    var b=document.querySelectorAll('#ivpTiers .ivp-tier');
    for(var i=0;i<b.length;i++)b[i].classList.toggle('sel',b[i].getAttribute('data-tier')===t);
    $('ivpNow').textContent=TIERS[t][0]; $('ivpWas').textContent=TIERS[t][3]; $('ivpCredits').textContent=TIERS[t][4];
    $('ivpPayTxt').textContent='Start IV — '+TIERS[t][0]+TIERS[t][2];
    if(mounted && elements){ try{ elements.update({amount:CENTS[t]}); }catch(e){} }
    $('ivpPayErr').classList.remove('show');
  };

  function payErr(m){var e=$('ivpPayErr');e.textContent=m;e.classList.add('show');payErrShow();}
  // TEMP diagnostics (2026-08-07): beacon every express/pay stage so the
  // Link-popup self-close can be named from the server log. Fire-and-forget.
  function ivpLog(stage,msg){ try{ if(window.gtk)gtk(stage,String(msg||'').slice(0,180)); }catch(_){} try{ fetch('/api/pay/client-log.php',{method:'POST',keepalive:true,
    headers:{'Content-Type':'application/json'},body:JSON.stringify({stage:stage,msg:String(msg||'').slice(0,300)})}); }catch(_){}}
  window.addEventListener('error',function(ev){ ivpLog('js_error',(ev&&ev.message)||''); });
  window.addEventListener('unhandledrejection',function(ev){ ivpLog('js_reject',(ev&&ev.reason&&(ev.reason.message||ev.reason))||''); });
  function payClear(){$('ivpPayErr').classList.remove('show');}
  function payErrShow(){ try{ $('ivpPayErr').scrollIntoView({behavior:'smooth',block:'center'}); }catch(_){} }

  // Amount in CENTS for the wallet sheet + the Payment Element's display only.
  // ⛔ The real charge is priced server-side in create-intent.php from `tier`.
  var CENTS={'wk':1200,'mo':2900}; /* REAL PRICING — launched 2026-10-11 */

  /**
   * Build the elements group in DEFERRED mode and mount both elements.
   * Deferred = no intent yet; the amount lives on the group, so a tier change is
   * elements.update({amount}) rather than a teardown, and the intent is created
   * at confirm time from whatever tier is selected THEN.
   */
  function mountPay(){
    if(!window.Stripe){ payErr('Payment library did not load. Please refresh.'); return; }
    if(mounted) return;
    stripe = Stripe(IVP_PK);
    elements = stripe.elements({
      mode:'payment', amount:CENTS[state.tier], currency:'usd', setupFutureUsage:'off_session',
      /* SUBSCRIPTION FIX 2026-09-20: card integration — Link still appears here, but
         the saved method comes back as a CARD, which is what the weekly / monthly
         renewal charges. Must match payment_method_types on the intent. */
      allowedPaymentMethodTypes:['card'],
      appearance:{theme:'stripe',variables:{colorPrimary:'#e60000',borderRadius:'12px'}}
    });

    // Wallet row. emailRequired: the wallet hands us the buyer's email, which is
    // what the account is created from -- without it a one-tap purchase would
    // have nothing to provision against.
    var ece = elements.create('expressCheckout', {
      buttonTheme:{applePay:'black', googlePay:'black'},
      buttonHeight:48,
      /* SUBSCRIPTION FIX 2026-09-20: the Link express button pays with a LINK payment
         method, and Link cannot be charged off-session — every renewal on one was
         declined (uid 93, 3-6 Sep). Our plan intent is card-only, so this button could
         not be confirmed against it either. Apple Pay / Google Pay stay: they produce
         CARD methods. Link itself stays available inside the card form below, where a
         card integration yields a card method the renewal can charge. */
      paymentMethods:{ link:'never' }
    });
    ece.on('ready', function(e){
      ivpLog('ece_ready', JSON.stringify((e&&e.availablePaymentMethods)||{}));
      // No wallet available on this device/browser -> hide the divider so the
      // card form does not sit under a dangling "or".
      var has = e && e.availablePaymentMethods && Object.keys(e.availablePaymentMethods).length;
      $('ivpOr').style.display = has ? '' : 'none';
    });
    var ivpEceWatch = null;
    function ivpEceSettled(){ if(ivpEceWatch){ clearTimeout(ivpEceWatch); ivpEceWatch = null; } }
    ece.on('click', function(e){
      ivpLog('ece_click', (e&&e.expressPaymentType)||'');
      e.resolve();
      // Strict-cookie browsers kill the wallet popup without any event. Do not
      // let that read as a dead button: after 8s of silence, say so and point
      // at the card form that always works.
      ivpEceSettled();
      ivpEceWatch = setTimeout(function(){
        ivpEceWatch = null;
        ivpLog('ece_watchdog','popup silent 8s');
        payErr('The wallet window did not finish \u2014 nothing was charged. You can pay by card below, or tap the wallet button again.');
      }, 8000);
    });
    ece.on('cancel', function(){ ivpEceSettled(); ivpLog('ece_cancel',''); });
    ece.on('loaderror', function(e){ ivpLog('ece_loaderror', (e&&e.error&&e.error.message)||''); });
    ece.on('confirm', function(e){ /* ivp-pay-express */
      ivpEceSettled();
      ivpLog('ece_confirm', JSON.stringify((e&&e.billingDetails)||{}));
      var em = (e && e.billingDetails && e.billingDetails.email) || '';
      if(!em && !(($('ivpEmail').value||'').trim())){
        payErr('One more step: type your email above, then tap the wallet button again \u2014 your IV account is created from it.');
        try{ $('ivpEmail').scrollIntoView({behavior:'smooth',block:'center'}); $('ivpEmail').focus({preventScroll:true}); }catch(_){}
        return;
      }
      payGo(em || null);
    });
    /* ECE back ON 2026-08-08: the earlier suspicion was wrong — the lost buyer was
       the verify-intent crash (charges succeeded, delivery failed), not this row.
       Apple Pay is ~40% of revenue; the wallet row stays. */
    ece.mount('#ivpExpress');

    elements.create('payment',{layout:'tabs'}).mount('#ivpPayEl');
    mounted = true;
  }

  /**
   * ONE path for both wallet and card.
   *  walletEmail set  -> came from Apple/Google Pay, no typed email needed.
   *  walletEmail null -> card form, use the typed email.
   */
  function payGo(walletEmail){
    var email = (walletEmail || ($('ivpEmail').value||'')).trim();
    if(!email || email.indexOf('@')<1){
      payErr('Please enter your email address.'); $('ivpEmail').focus(); return;
    }
    payClear();
    var btn=$('ivpPayBtn'); btn.disabled=true; $('ivpPayTxt').textContent='Processing…';

    // Deferred flow: validate the mounted fields BEFORE spending a server call.
    ivpLog('paygo_start', email);
    elements.submit().then(function(res){
      ivpLog('submit_done', res&&res.error?res.error.message:'ok');
      if(res.error){ throw new Error(res.error.message || 'Please check your details.'); }
      return fetch('/api/pay/create-intent.php',{method:'POST',headers:{'Content-Type':'application/json'},
        body:JSON.stringify({email:email,video:state.vid,tier:state.tier})}).then(function(r){return r.json();});
    }).then(function(d){
      if(!d||!d.success) throw new Error((d&&d.error)||'Could not start payment');
      state.order = d.order_uuid||'';
      return stripe.confirmPayment({
        elements:elements, clientSecret:d.client_secret,
        confirmParams:{return_url:'https://instantviews.net/unlocked.php?v='+encodeURIComponent(state.vid)
                                  +'&o='+encodeURIComponent(state.order)},
        redirect:'always'
      });
    }).then(function(res){
      if(res && res.error){ throw new Error(res.error.message || 'Payment could not be completed.'); }
    }).catch(function(err){
      try{ console.error('[ivp-pay]', err); }catch(_){}
      ivpLog('pay_error', err&&err.message);
      payErr(err.message||'Something went wrong.');
      btn.disabled=false; $('ivpPayTxt').textContent='Start IV \u2014 '+TIERS[state.tier][0]+TIERS[state.tier][2];
    });
  }

  window.ivpPay=function(){ payGo(null); };
  window.ivpPay=function(){ payGo(null); };

})();
</script>

<!-- Modal Styles -->
<style>
/* ============================================
   GLOBAL MODAL SYSTEM
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}

/* Modal Container */
.modal-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    background: var(--card-bg, #fff);
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

/* Wider on large screens */
@media (min-width: 1200px) {
    .modal-container {
        max-width: 1000px;
    }
}

@media (min-width: 1400px) {
    .modal-container {
        max-width: 1100px;
    }
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
}

.modal-title-icon {
    font-size: 24px;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--brand-primary, #ef4444);
    color: white;
}

/* Modal Body */
.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.modal-footer .btn {
    flex: 1;
}

/* ============================================
   RESULT MODAL SPECIFIC STYLES
   ============================================ */

/* Channel Info */
.modal-channel-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.modal-channel-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-light, #e5e7eb);
}

.modal-channel-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 4px;
}

.modal-channel-meta {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Status Badge */
.modal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 24px;
}

.modal-status-badge.success {
    background: var(--success-bg, rgba(16, 185, 129, 0.1));
    color: var(--success, #10b981);
}

.modal-status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.modal-status-badge.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Stats Grid - 4 columns large, 2 columns small */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Video Grid - 3 columns large, 1 column small */
.modal-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.modal-video-card {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-video-card:hover {
    border-color: var(--brand-primary, #ef4444);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modal-video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.modal-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-video-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.modal-video-body {
    padding: 8px 10px;
}

.modal-video-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #111);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.modal-video-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
}

.modal-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 16px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-stat-card {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.modal-stat-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.modal-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #111);
    margin-bottom: 4px;
}

.modal-stat-label {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

/* Progress Section */
.modal-progress-section {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.modal-progress-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-progress-item {
    margin-bottom: 16px;
}

.modal-progress-item:last-child {
    margin-bottom: 0;
}

.modal-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.modal-progress-label {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-progress-values {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111);
}

.modal-progress-bar {
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.modal-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.modal-progress-fill.green { background: var(--success, #10b981); }
.modal-progress-fill.yellow { background: #f59e0b; }
.modal-progress-fill.red { background: #ef4444; }

/* Error State */
.modal-error {
    text-align: center;
    padding: 40px 20px;
}

.modal-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.modal-error-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 8px;
}

.modal-error-message {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Loading State */
.modal-loading {
    text-align: center;
    padding: 60px 20px;
}

.modal-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light, #e5e7eb);
    border-top-color: var(--brand-primary, #ef4444);
    border-radius: 50%;
    animation: modalSpin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes modalSpin {
    to { transform: rotate(360deg); }
}

.modal-loading-text {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-video-grid {
        grid-template-columns: 1fr;
    }
    .modal-container {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }
    .modal-body {
        padding: 20px;
    }
}

/* 2-Column Layout for monetization results */
.modal-2col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .modal-2col-layout {
        grid-template-columns: 1fr;
    }
}

/* 2x2 Stats Grid */
.modal-stats-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 3-column video grid that becomes 2 on tablet, 1 on mobile */
.modal-video-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .modal-video-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .modal-video-grid-3 {
        grid-template-columns: 1fr;
    }
}
</style>

<!-- Result Modal Container -->
<div class="modal-overlay" id="resultModal">
    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">
                <span class="modal-title-icon" id="modalTitleIcon">📊</span>
                <span id="modalTitleText">Results</span>
            </div>
            <button class="modal-close" onclick="closeResultModal()">&times;</button>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- Populated by JavaScript -->
        </div>
        <div class="modal-footer" id="modalFooter">
            <button class="btn btn-outline" onclick="closeResultModal()">Close</button>
            <button class="btn btn-primary" onclick="checkAnother()" id="modalCheckAnotherBtn">Check Another</button>
        </div>
    </div>
</div>

<!-- Modal JavaScript -->
<script>
// Global Modal Functions
function openResultModal(title = 'Results', icon = '📊') {
    document.getElementById('modalTitleText').textContent = title;
    document.getElementById('modalTitleIcon').textContent = icon;
    document.getElementById('resultModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeResultModal() {
    document.getElementById('resultModal').classList.remove('active');
    document.body.style.overflow = '';
}

function setModalContent(html) {
    document.getElementById('modalBody').innerHTML = html;
}

function setModalLoading(text = 'Loading...') {
    document.getElementById('modalBody').innerHTML = `
        <div class="modal-loading">
            <div class="modal-loading-spinner"></div>
            <div class="modal-loading-text">${text}</div>
        </div>
    `;
}

function setModalError(message) {
    document.getElementById('modalBody').innerHTML = `
        <div class="modal-error">
            <div class="modal-error-icon">⚠️</div>
            <div class="modal-error-title">Unable to Process</div>
            <div class="modal-error-message">${message}</div>
        </div>
    `;
}

function checkAnother() {
    closeResultModal();
    const input = document.getElementById('videoUrl');
    if (input) {
        input.value = '';
        input.focus();
    }
}

// Close on overlay click
document.getElementById('resultModal').addEventListener('click', function(e) {
    if (e.target === this) closeResultModal();
});

// Close on ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeResultModal();
});
</script>
<style>
/* ===== InstantViews inline results — stories.gwaa.net premium pattern ===== */
.iv-results { max-width: 1140px; margin: 4px auto 48px; padding: 0 20px; }
.iv-result-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e6ebf1);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 18px 40px -22px rgba(50,50,93,.30), 0 0 0 1px rgba(50,50,93,.03);
    animation: iv-fade-up .42s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes iv-fade-up { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.iv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 768px) { .iv-2col { grid-template-columns: 1fr; } }
.iv-panel { background: var(--bg-secondary); border:1px solid var(--border-light); border-radius: 14px; padding: 16px; }
.iv-accent-bar { height:4px; width:46px; border-radius:99px; background: linear-gradient(135deg,#7a73ff,#574fe0); margin-bottom:14px; }

/* Skeleton (shimmer) */
.ig-skel-bar { background: linear-gradient(90deg, var(--bg-hover,#eef0f3) 0%, var(--border-light,#e2e5ea) 50%, var(--bg-hover,#eef0f3) 100%); background-size: 200% 100%; animation: ig-skel-shimmer 1.4s linear infinite; border-radius: 6px; height: 14px; }
.ig-skel-bar.title { height: 18px; width: 32%; }
.ig-skel-bar.line  { height: 14px; width: 100%; }
.ig-skel-bar.short { height: 14px; width: 62%; }
.ig-skel-card { background: var(--bg-secondary,#f7f8fa); border: 1px solid var(--border-light,#e6ebf1); border-radius: 14px; padding: 16px; display:flex; flex-direction:column; gap: 11px; }
.iv-skel-head { display:flex; align-items:center; gap: 16px; margin-bottom: 18px; }
.iv-skel-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:768px){ .iv-skel-2col { grid-template-columns:1fr; } }
@keyframes ig-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
[data-theme="dark"] .ig-skel-bar { background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 100%); background-size: 200% 100%; }

/* Inline error card */
.iv-error { text-align:center; padding: 44px 28px; }
.iv-error-icon { font-size: 42px; line-height:1; }
.iv-error-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 12px 0 5px; }
.iv-error-msg { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
</style>
<script>
(function(){
    var _t = {};
    function el(id){ return document.getElementById(id || 'ivResults'); }
    function lines(n){ var s=''; for(var i=0;i<n;i++) s+='<div class="ig-skel-bar line"></div>'; return s; }
    function esc(s){ return (''+(s==null?'':s)).replace(/[<>&]/g, function(c){ return {'<':'&lt;','>':'&gt;','&':'&amp;'}[c]; }); }

    window.ivResultsEl = el;

    window.ivSkeleton = function(type){
        type = type || 'audit';
        if (type === 'counter') {
            return '<div class="iv-result-card" style="text-align:center;padding:48px 28px;">'
                + '<div class="ig-skel-bar" style="width:74px;height:74px;border-radius:50%;margin:0 auto 20px;"></div>'
                + '<div class="ig-skel-bar" style="height:58px;width:58%;margin:0 auto 14px;border-radius:12px;"></div>'
                + '<div class="ig-skel-bar short" style="margin:0 auto;"></div></div>';
        }
        if (type === 'simple') {
            return '<div class="iv-result-card"><div class="ig-skel-bar title"></div>' + lines(5) + '</div>';
        }
        return '<div class="iv-result-card">'
            + '<div class="iv-skel-head"><div class="ig-skel-bar" style="width:72px;height:72px;border-radius:50%;flex:none;"></div>'
            + '<div style="flex:1;display:flex;flex-direction:column;gap:11px;"><div class="ig-skel-bar title" style="width:42%"></div><div class="ig-skel-bar short"></div></div>'
            + '<div class="ig-skel-bar" style="width:70px;height:70px;border-radius:50%;flex:none;"></div></div>'
            + '<div class="ig-skel-bar" style="height:54px;border-radius:12px;"></div>'
            + '<div class="iv-skel-2col"><div class="ig-skel-card"><div class="ig-skel-bar title"></div>' + lines(6) + '</div>'
            + '<div class="ig-skel-card"><div class="ig-skel-bar title"></div>' + lines(6) + '</div></div></div>';
    };

    function setBtnBusy(busy){ var b = document.querySelector('.analyzer-btn'); if(b) b.disabled = !!busy; }

    window.ivShowSkeleton = function(type, id){
        var e = el(id); if(!e) return; id = id || 'ivResults';
        setBtnBusy(true);
        _t[id] = setTimeout(function(){ e.innerHTML = ivSkeleton(type); }, 220);
        setTimeout(function(){ e.scrollIntoView({behavior:'smooth', block:'start'}); }, 60);
    };
    window.ivClearSkeleton = function(id){
        id = id||'ivResults';
        if(_t[id]){ clearTimeout(_t[id]); _t[id]=null; }
        setBtnBusy(false);
        // remove a lingering skeleton if loading ended without a rendered result
        var e = el(id);
        if(e && e.querySelector('.ig-skel-bar')) e.innerHTML = '';
    };

    window.ivRenderResult = function(html, id){
        ivClearSkeleton(id); var e = el(id); if(!e) return;
        e.innerHTML = '<div class="iv-result-card">' + html + '</div>';
        e.scrollIntoView({behavior:'smooth', block:'start'});
    };
    window.ivRenderResultRaw = function(html, id){
        ivClearSkeleton(id); var e = el(id); if(!e) return;
        e.innerHTML = html;
        e.scrollIntoView({behavior:'smooth', block:'start'});
    };
    window.ivRenderError = function(msg, retryFn, id){
        ivClearSkeleton(id); var e = el(id); if(!e) return;
        e.innerHTML = '<div class="iv-result-card iv-error"><div class="iv-error-icon">⚠️</div>'
            + '<div class="iv-error-title">Something went wrong</div>'
            + '<div class="iv-error-msg">' + esc(msg) + '</div>'
            + (retryFn ? '<button class="btn btn-primary" onclick="' + retryFn + '()">Try again</button>' : '')
            + '</div>';
        e.scrollIntoView({behavior:'smooth', block:'start'});
    };
})();
</script>

<!-- Footer -->
<footer class="footer">
    <div class="footer-container">
        <div class="footer-grid">
            <div>
                <div class="footer-brand">Instant<span>Views</span></div>
                <p class="footer-desc">AI-powered YouTube optimization for creators who want more views, more subscribers, and more impact.</p>
            </div>
                        <div>
                <div class="footer-title">YouTube Tools</div>
                <ul class="footer-links">
                                        <li><a href="/youtube-channel-audit">Channel Audit</a></li>
                                        <li><a href="/youtube-subscriber-count">Subscriber Count</a></li>
                                        <li><a href="/youtube-money-calculator">Money Calculator</a></li>
                                        <li><a href="/youtube-monetization-checker">Monetization Checker</a></li>
                                        <li><a href="/youtube-timestamp-generator">Timestamp Generator</a></li>
                                        <li><a href="/tools">All Tools</a></li>
                                    </ul>
            </div>
                        <div>
                <div class="footer-title">Company</div>
                <ul class="footer-links">
                                        <li><a href="/about">About</a></li>
                                        <li><a href="/blogs">Blog</a></li>
                                        <li><a href="/contact">Contact</a></li>
                                    </ul>
            </div>
                        <div>
                <div class="footer-title">Legal</div>
                <ul class="footer-links">
                                        <li><a href="/privacy-policy">Privacy Policy</a></li>
                                        <li><a href="/terms-of-service">Terms of Service</a></li>
                                        <li><a href="/refund-policy">Refund Policy</a></li>
                                        <li><a href="/disclaimer">Disclaimer</a></li>
                                        <li><a href="/cookie-policy">Cookie Policy</a></li>
                                        <li><a href="/dmca">DMCA</a></li>
                                        <li><a href="/sitemap">Sitemap</a></li>
                                    </ul>
            </div>
                    </div>
        <style>.theme-toggle-footer{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;padding:0;margin:0;font:inherit;font-size:1rem;line-height:1;color:var(--text-secondary,#64748b);cursor:pointer;width:auto;height:auto;box-shadow:none;transition:color .15s}.theme-toggle-footer:hover{color:var(--text-primary,#0f172a)}.theme-toggle-footer .icon-moon,.theme-toggle-footer .icon-sun{font-size:1.05rem;line-height:1}.theme-toggle-footer .icon-sun,.theme-toggle-footer .tm-label-light{display:none}[data-theme="dark"] .theme-toggle-footer .icon-moon,[data-theme="dark"] .theme-toggle-footer .tm-label-dark{display:none}[data-theme="dark"] .theme-toggle-footer .icon-sun,[data-theme="dark"] .theme-toggle-footer .tm-label-light{display:inline}</style><div class="footer-bottom" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px">
            <div><div class="footer-copyright">&copy; 2026 InstantViews.net. All rights reserved. A product of Media Experts Pro LLC.</div><div class="footer-attribution" style="margin-top: 8px; font-size: 12px; color: var(--text-muted);">
                YouTube data powered by <a href="https://www.youtube.com" target="_blank" rel="nofollow noopener" style="color: var(--text-tertiary);">YouTube</a> |
                <a href="https://www.youtube.com/t/terms" target="_blank" rel="nofollow noopener" style="color: var(--text-tertiary);">YouTube Terms</a> |
                <a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noopener" style="color: var(--text-tertiary);">Google Privacy</a>
            </div></div>
            <button class="theme-toggle-footer" onclick="toggleTheme()" type="button" aria-label="Toggle dark mode"><span class="tm-label-dark">Dark mode</span><span class="tm-label-light">Light mode</span></button>
        </div>
    </div>
</footer>

<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<!-- Core JavaScript -->
<script>
// ============================================
// THEME SYSTEM
// ============================================
(function initTheme() {
    const savedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
})();

function toggleTheme() {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme') || 'light';
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    html.style.transition = 'background-color 0.3s ease, color 0.3s ease';
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (!localStorage.getItem('theme')) {
        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
    }
});

// ============================================
// NAVIGATION
// ============================================
// Scroll effect
window.addEventListener('scroll', () => {
    const nav = document.getElementById('nav');
    nav.classList.toggle('scrolled', window.scrollY > 50);
}, { passive: true });

// Mobile menu
function toggleMobileMenu() {
    const hamburger = document.querySelector('.nav-hamburger');
    const mobileMenu = document.getElementById('navMobile');
    hamburger.classList.toggle('active');
    mobileMenu.classList.toggle('active');
}

function closeMobileMenu() {
    const hamburger = document.querySelector('.nav-hamburger');
    const mobileMenu = document.getElementById('navMobile');
    hamburger.classList.remove('active');
    mobileMenu.classList.remove('active');
}

// Toggle mobile expandable section
function toggleMobileSection(element) {
    const section = element.parentElement;
    section.classList.toggle('active');
}

// Close mobile menu when clicking outside
document.addEventListener('click', function(e) {
    const nav = document.getElementById('nav');
    const mobileMenu = document.getElementById('navMobile');
    if (mobileMenu && mobileMenu.classList.contains('active') && !nav.contains(e.target)) {
        closeMobileMenu();
    }
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function(e) {
        e.preventDefault();
        const t = document.querySelector(this.getAttribute('href'));
        if (t) t.scrollIntoView({ behavior: 'smooth' });
    });
});

// ============================================
// TOAST NOTIFICATIONS
// ============================================
function showToast(type, title, message, duration = 5000) {
    const container = document.getElementById('toastContainer');
    const icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
    const toast = document.createElement('div');
    toast.className = 'toast toast-' + type;
    toast.innerHTML = `
        <span class="toast-icon">${icons[type] || icons.info}</span>
        <div class="toast-content">
            <div class="toast-title">${title}</div>
            <div class="toast-message">${message}</div>
        </div>
        <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
    `;
    container.appendChild(toast);
    requestAnimationFrame(() => toast.classList.add('show'));
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

// ============================================
// FAQ TOGGLE
// ============================================
function toggleFaq(btn) {
    const item = btn.parentElement;
    const isOpen = item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
    if (!isOpen) item.classList.add('open');
}

// ============================================
// CURRENCY TOGGLE (for pricing)
// ============================================
function toggleCurrency(currency) {
    document.querySelectorAll('.currency-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.currency === currency);
    });
    document.querySelectorAll('.pricing-amount[data-inr]').forEach(e => {
        e.textContent = currency === 'inr' ? e.dataset.inr : e.dataset.usd;
    });
    document.querySelectorAll('.pricing-currency[data-inr]').forEach(e => {
        e.textContent = currency === 'inr' ? e.dataset.inr : e.dataset.usd;
    });
}

// Auto-detect country for currency
(async function() {
    try {
        const response = await fetch('https://ipapi.co/json/');
        const data = await response.json();
        const isIndia = data.country_code === 'IN';
        toggleCurrency(isIndia ? 'inr' : 'usd');
    } catch (e) {
        toggleCurrency('inr');
    }
})();

console.log('✅ InstantViews loaded');
</script>

<!-- Enterprise Analytics (Deferred for Performance) -->
<script src="https://instantviews.net/assets/js/analytics.js?v=1.0.3" defer></script>

<script>
const API_URL = 'https://instantviews.net/api/youtube-api-enhanced.php';
const STATS_API_URL = '/api/stats.php';
const TOOL_SLUG = 'timestamp-generator';

// Load stats
async function loadStats() {
    try {
        const r = await fetch(`${STATS_API_URL}?action=get&tool=${TOOL_SLUG}`);
        const d = await r.json();
        if (d.success) {
            document.getElementById('stat-total').textContent = formatStatNumber(d.stats.total_uses);
            document.getElementById('stat-today').textContent = formatStatNumber(d.stats.today_uses);
            document.getElementById('stat-users').textContent = formatStatNumber(d.stats.users_today);
        }
    } catch (e) {}
}

function formatStatNumber(n) {
    if (!n) return '0';
    n = parseInt(n);
    if (n >= 1000000) return (n/1000000).toFixed(1)+'M';
    if (n >= 1000) return (n/1000).toFixed(1)+'K';
    return n.toString();
}

loadStats();

function setLoading(loading, msg = 'Analyzing...') {
    const form = document.getElementById('analyzerForm');
    const loader = document.getElementById('analyzerLoading');
    if (loading) {
        loader.querySelector('.loading-text').textContent = msg;
        form.classList.add('loading');
        loader.classList.add('active');
    } else {
        form.classList.remove('loading');
        loader.classList.remove('active');
    }
}

document.getElementById('videoUrl').addEventListener('keydown', e => { if (e.key === 'Enter') analyzeVideo(); });

async function analyzeVideo() {
    const input = document.getElementById('videoUrl');
    const url = input.value.trim();
    if (!url) { showToast('warning', 'URL Required', 'Please enter a YouTube video URL.'); input.focus(); return; }

    const btn = document.querySelector('.analyzer-btn');
    if (btn) btn.disabled = true;
    ivShowSkeleton('audit');

    try {
        const response = await fetch(`${API_URL}?url=${encodeURIComponent(url)}`);
        if (!response.ok) throw new Error(`Server error (${response.status})`);

        const result = await response.json();
        if (!result.success) throw new Error(result.message || 'Failed to fetch video');

        const data = result.data;

        // Generate suggested timestamps based on video duration
        const duration = parseDuration(data.contentDetails?.duration || 'PT0S');
        const timestamps = generateSuggestedTimestamps(duration, data.snippet?.title || 'Video');

        ivClearSkeleton();
        displayTimestampResult(data, timestamps);

    } catch (e) {
        ivRenderError(e.message || 'Network error. Please try again.', 'analyzeVideo');
    } finally {
        if (btn) btn.disabled = false;
    }
}

function parseDuration(duration) {
    const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
    if (!match) return 0;
    const hours = parseInt(match[1] || 0);
    const minutes = parseInt(match[2] || 0);
    const seconds = parseInt(match[3] || 0);
    return hours * 3600 + minutes * 60 + seconds;
}

function formatTime(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    if (h > 0) {
        return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
    return `${m}:${s.toString().padStart(2, '0')}`;
}

function generateSuggestedTimestamps(duration, title) {
    const timestamps = [];

    // Always start with 0:00
    timestamps.push({ time: 0, label: 'Introduction' });

    if (duration < 120) {
        // Short video (under 2 min) - just intro and outro
        if (duration > 30) {
            timestamps.push({ time: Math.floor(duration * 0.7), label: 'Summary' });
        }
    } else if (duration < 600) {
        // Medium video (2-10 min) - 3-4 chapters
        timestamps.push({ time: Math.floor(duration * 0.25), label: 'Main Topic' });
        timestamps.push({ time: Math.floor(duration * 0.6), label: 'Key Points' });
        if (duration > 300) {
            timestamps.push({ time: Math.floor(duration * 0.85), label: 'Conclusion' });
        }
    } else if (duration < 1800) {
        // Long video (10-30 min) - 5-6 chapters
        timestamps.push({ time: Math.floor(duration * 0.12), label: 'Overview' });
        timestamps.push({ time: Math.floor(duration * 0.3), label: 'Section 1' });
        timestamps.push({ time: Math.floor(duration * 0.5), label: 'Section 2' });
        timestamps.push({ time: Math.floor(duration * 0.7), label: 'Section 3' });
        timestamps.push({ time: Math.floor(duration * 0.9), label: 'Conclusion' });
    } else {
        // Very long video (30+ min) - more chapters
        const numChapters = Math.min(10, Math.floor(duration / 300) + 2);
        const interval = duration / numChapters;

        for (let i = 1; i < numChapters; i++) {
            timestamps.push({
                time: Math.floor(interval * i),
                label: `Part ${i}`
            });
        }
        timestamps.push({ time: Math.floor(duration * 0.95), label: 'Conclusion' });
    }

    return timestamps;
}

function displayTimestampResult(data, timestamps) {
    const thumbnail = data.snippet?.thumbnails?.medium?.url || data.snippet?.thumbnails?.default?.url || '';
    const title = data.snippet?.title || 'Video';
    const duration = parseDuration(data.contentDetails?.duration || 'PT0S');
    const views = parseInt(data.statistics?.viewCount || 0);
    const channelTitle = data.snippet?.channelTitle || 'Channel';

    let timestampText = timestamps.map(t => `${formatTime(t.time)} ${t.label}`).join('\n');

    const html = `
        <div class="video-info-card">
            <img src="${thumbnail}" class="video-thumbnail" alt="Video thumbnail">
            <div class="video-details">
                <div class="video-title">${escapeHtml(title)}</div>
                <div class="video-meta">
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        ${formatTime(duration)}
                    </div>
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        ${formatNumber(views)} views
                    </div>
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        ${escapeHtml(channelTitle)}
                    </div>
                </div>
            </div>
        </div>

        <div class="timestamp-output">
            <div class="timestamp-header">
                <div class="timestamp-title">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    Generated Timestamps
                </div>
                <div class="timestamp-actions">
                    <button class="timestamp-btn timestamp-btn-primary" onclick="copyTimestamps()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        Copy
                    </button>
                </div>
            </div>

            <div class="timestamp-list" id="timestampList">
                ${timestamps.map((t, i) => `
                    <div class="timestamp-item" data-index="${i}">
                        <span class="timestamp-time">${formatTime(t.time)}</span>
                        <input type="text" class="timestamp-label" value="${escapeHtml(t.label)}" style="flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 15px; outline: none;">
                    </div>
                `).join('')}
            </div>

            <div class="timestamp-preview" id="timestampPreview">${timestampText}</div>
        </div>

        <div style="margin-top: 20px; padding: 16px; background: rgba(34, 197, 94, 0.1); border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.2);">
            <div style="display: flex; align-items: center; gap: 10px; color: #22c55e; font-weight: 600; margin-bottom: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                How to Use
            </div>
            <ol style="margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.8;">
                <li>Click "Copy" to copy the timestamps</li>
                <li>Go to your YouTube video and click "Edit"</li>
                <li>Paste the timestamps in your video description</li>
                <li>Save changes - chapters will appear within a few hours!</li>
            </ol>
        </div>
    `;

    ivRenderResult(html);

    // Update preview when labels change
    document.querySelectorAll('#timestampList .timestamp-label').forEach((input, i) => {
        input.addEventListener('input', updatePreview);
    });
}

function updatePreview() {
    const items = document.querySelectorAll('#timestampList .timestamp-item');
    let text = '';
    items.forEach(item => {
        const time = item.querySelector('.timestamp-time').textContent;
        const label = item.querySelector('.timestamp-label').value;
        text += `${time} ${label}\n`;
    });
    document.getElementById('timestampPreview').textContent = text.trim();
}

function copyTimestamps() {
    const preview = document.getElementById('timestampPreview');
    navigator.clipboard.writeText(preview.textContent).then(() => {
        showToast('success', 'Copied!', 'Timestamps copied to clipboard');
    });
}

// Manual Timestamp Functions
function addTimestampRow() {
    const container = document.getElementById('timestampInputs');
    const rows = container.querySelectorAll('.timestamp-input-row');
    const lastRow = rows[rows.length - 1];

    // Get the last time and increment by 1 minute
    let lastTime = '0:00';
    if (lastRow) {
        lastTime = lastRow.querySelector('.timestamp-input-time').value || '0:00';
    }
    const nextTime = incrementTime(lastTime);

    const row = document.createElement('div');
    row.className = 'timestamp-input-row';
    row.innerHTML = `
        <input type="text" class="timestamp-input-time" placeholder="${nextTime}" value="${nextTime}">
        <input type="text" class="timestamp-input-label" placeholder="Chapter title...">
        <button class="timestamp-input-remove" onclick="removeTimestampRow(this)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    `;
    container.appendChild(row);
    row.querySelector('.timestamp-input-label').focus();
}

function incrementTime(timeStr) {
    const parts = timeStr.split(':').map(Number);
    let seconds = 0;
    if (parts.length === 3) {
        seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
    } else if (parts.length === 2) {
        seconds = parts[0] * 60 + parts[1];
    }
    seconds += 60; // Add 1 minute
    return formatTime(seconds);
}

function removeTimestampRow(btn) {
    const row = btn.closest('.timestamp-input-row');
    const container = document.getElementById('timestampInputs');
    if (container.children.length > 1) {
        row.remove();
    }
}

function clearManualInputs() {
    const container = document.getElementById('timestampInputs');
    container.innerHTML = `
        <div class="timestamp-input-row">
            <input type="text" class="timestamp-input-time" placeholder="0:00" value="0:00">
            <input type="text" class="timestamp-input-label" placeholder="Introduction">
            <button class="timestamp-input-remove" onclick="removeTimestampRow(this)" style="visibility: hidden;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
    `;
    document.getElementById('manualOutput').style.display = 'none';
}

function generateManualOutput() {
    const rows = document.querySelectorAll('#timestampInputs .timestamp-input-row');
    let output = '';

    rows.forEach(row => {
        const time = row.querySelector('.timestamp-input-time').value.trim() || '0:00';
        const label = row.querySelector('.timestamp-input-label').value.trim() || 'Chapter';
        output += `${time} ${label}\n`;
    });

    document.getElementById('manualPreview').textContent = output.trim();
    document.getElementById('manualOutput').style.display = 'block';
}

function copyManualOutput() {
    const text = document.getElementById('manualPreview').textContent;
    navigator.clipboard.writeText(text).then(() => {
        showToast('success', 'Copied!', 'Timestamps copied to clipboard');
    });
}

function formatNumber(n) {
    if (!n) return '0';
    if (n >= 1000000000) return (n/1000000000).toFixed(1)+'B';
    if (n >= 1000000) return (n/1000000).toFixed(1)+'M';
    if (n >= 1000) return (n/1000).toFixed(1)+'K';
    return n.toString();
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}
</script>
<!-- Blog image zoom / lightbox -->
<style>
/* CLS fix: reserve image space so there's no layout shift (all blog images are 1376x768) */
.blog-single-content .blog-image img,.article-featured-image img{aspect-ratio:1376/768;width:100%;height:auto;display:block}
.blog-image.zoomable,.article-featured-image.zoomable{cursor:zoom-in}
.article-featured-image.zoomable{position:relative}
.article-featured-image.zoomable:hover .image-zoom-icon{opacity:1}
.iv-lightbox{position:fixed;inset:0;background:rgba(8,10,18,.93);z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;opacity:0;transition:opacity .18s}
.iv-lightbox.open{display:flex;opacity:1}
.iv-lightbox img{max-width:96vw;max-height:90vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55);cursor:default}
.iv-lightbox .iv-lb-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iv-lightbox .iv-lb-close:hover{background:rgba(255,255,255,.28)}
.iv-lightbox .iv-lb-cap{position:absolute;bottom:64px;left:0;right:0;text-align:center;color:rgba(255,255,255,.9);font-size:14px;padding:0 24px;pointer-events:none}
.iv-lb-share{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;padding:0 16px}
.iv-lb-share a,.iv-lb-share button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:0;border-radius:9px;font:600 13px/1 -apple-system,Arial,sans-serif;color:#fff;text-decoration:none;cursor:pointer}
.iv-lb-share a:hover,.iv-lb-share button:hover{filter:brightness(1.12)}
.iv-lb-share .s-pin{background:#e60023}.iv-lb-share .s-x{background:#111}.iv-lb-share .s-wa{background:#25d366}.iv-lb-share .s-copy{background:#374151}.iv-lb-share .s-embed{background:#1f2937}
.iv-lb-share .copied{background:#16a34a !important}
.blog-share-pinterest{background:#e60023}
.blog-share-reddit{background:#ff4500}
.blog-share-telegram{background:#0088cc}
.blog-share-email{background:#6b7280}
.blog-share-copy{background:#374151;border:0;cursor:pointer}
.blog-share-copy.copied{background:#16a34a}
</style>
<script>
(function(){
  var figs = document.querySelectorAll('.blog-image, .article-featured-image');
  if(!figs.length) return;
  var ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>';
  var lb = document.createElement('div'); lb.className = 'iv-lightbox';
  lb.innerHTML = '<button class="iv-lb-close" aria-label="Close">&times;</button><img alt=""><div class="iv-lb-cap"></div><div class="iv-lb-share"></div>';
  document.body.appendChild(lb);
  var lbImg = lb.querySelector('img'), lbCap = lb.querySelector('.iv-lb-cap'), lbShare = lb.querySelector('.iv-lb-share');
  function meta(p){ var m=document.querySelector('meta[property="'+p+'"]'); return m?m.content:''; }
  var pageUrl = meta('og:url') || (document.querySelector('link[rel="canonical"]')||{}).href || location.href.split('#')[0];
  function copyTo(text, el){
    var done=function(){ var o=el.textContent; el.classList.add('copied'); el.childNodes[el.childNodes.length-1].nodeValue=' Copied'; setTimeout(function(){ el.classList.remove('copied'); el.childNodes[el.childNodes.length-1].nodeValue=o.replace('Copied','').trim()||o; }, 1500); };
    if(navigator.clipboard){ navigator.clipboard.writeText(text).then(done).catch(function(){}); }
    else { var ta=document.createElement('textarea'); ta.value=text; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');done();}catch(e){} document.body.removeChild(ta); }
  }
  function shareLink(cls,label,href){ var a=document.createElement('a'); a.className=cls; a.href=href; a.target='_blank'; a.rel='noopener'; a.appendChild(document.createTextNode(label)); a.addEventListener('click',function(e){e.stopPropagation();}); return a; }
  function shareBtn(cls,label,fn){ var b=document.createElement('button'); b.type='button'; b.className=cls; b.appendChild(document.createTextNode(label)); b.addEventListener('click',function(e){e.stopPropagation();fn(b);}); return b; }
  function openLb(src, cap){
    lbImg.src = src; lbCap.textContent = cap || '';
    var u=encodeURIComponent(pageUrl), t=encodeURIComponent(cap||document.title), im=encodeURIComponent(src);
    lbShare.innerHTML='';
    lbShare.appendChild(shareLink('s-pin','Pin','https://pinterest.com/pin/create/button/?url='+u+'&media='+im+'&description='+t));
    lbShare.appendChild(shareLink('s-x','Post','https://twitter.com/intent/tweet?url='+u+'&text='+t));
    lbShare.appendChild(shareLink('s-wa','WhatsApp','https://api.whatsapp.com/send?text='+t+'%20'+im));
    lbShare.appendChild(shareBtn('s-copy','Copy image link',function(b){ copyTo(src,b); }));
    lbShare.appendChild(shareBtn('s-embed','Embed',function(b){ copyTo('<a href="'+pageUrl+'"><img src="'+src+'" alt="'+(cap||'').replace(/"/g,'')+'" loading="lazy"></a>', b); }));
    lb.classList.add('open'); document.body.style.overflow = 'hidden';
  }
  function closeLb(){ lb.classList.remove('open'); document.body.style.overflow = ''; setTimeout(function(){ lbImg.src=''; }, 200); }
  lb.addEventListener('click', function(e){ if(e.target === lb || e.target.classList.contains('iv-lb-close')) closeLb(); });
  document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeLb(); });
  figs.forEach(function(fig){
    var img = fig.querySelector('img'); if(!img) return;
    fig.classList.add('zoomable');
    if(!fig.querySelector('.image-zoom-icon')){
      var ic = document.createElement('span'); ic.className = 'image-zoom-icon'; ic.innerHTML = ICON;
      fig.appendChild(ic);
    }
    fig.addEventListener('click', function(){
      var cap = fig.querySelector('figcaption');
      openLb(img.currentSrc || img.src, cap ? cap.textContent : '');
    });
  });
})();

// Extra share buttons: Pinterest, Reddit, Telegram, Email, Copy-link (appended to existing share bar)
(function(){
  var bar = document.querySelector('.blog-share-buttons');
  if(!bar) return;
  function meta(p){ var m=document.querySelector('meta[property="'+p+'"]'); return m?m.content:''; }
  var url = meta('og:url') || (document.querySelector('link[rel="canonical"]')||{}).href || location.href;
  var title = meta('og:title') || document.title;
  var image = meta('og:image') || '';
  var u=encodeURIComponent(url), t=encodeURIComponent(title), im=encodeURIComponent(image);
  var SVG={
    pinterest:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.137.893 2.739a.36.36 0 01.083.345c-.091.378-.293 1.193-.333 1.36-.052.22-.173.267-.4.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12C24 5.372 18.627 0 12 0z"/></svg>',
    reddit:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.747-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.95c.072 1.097.97 1.962 2.087 1.962 1.155 0 2.094-.937 2.094-2.088 0-1.152-.939-2.088-2.094-2.088-.819 0-1.519.473-1.864 1.161l-4.471-1.058a.484.484 0 00-.575.335l-1.657 5.219c-2.759.073-5.25.832-7.087 2.043-.477-.464-1.128-.753-1.846-.753C1.192 9.134 0 10.32 0 11.779c0 1.073.652 1.995 1.578 2.392-.05.27-.077.546-.077.825 0 4.171 4.755 7.553 10.604 7.553 5.852 0 10.607-3.382 10.607-7.553 0-.273-.026-.545-.074-.81C23.347 13.79 24 12.866 24 11.779z"/></svg>',
    telegram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>',
    email:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 010 19.366V5.457c0-.762.566-1.382 1.296-1.487.105-.015.21-.022.314-.022.708 0 1.36.328 1.787.866L12 11.084l8.603-6.27a2.262 2.262 0 011.787-.866c.104 0 .209.007.314.022.73.105 1.296.725 1.296 1.487z"/></svg>',
    copy:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg>'
  };
  function btn(cls,href,title,html){var a=document.createElement('a');a.className='blog-share-btn '+cls;a.href=href;a.target='_blank';a.rel='noopener';a.title=title;a.innerHTML=html;return a;}
  bar.appendChild(btn('blog-share-pinterest','https://pinterest.com/pin/create/button/?url='+u+'&media='+im+'&description='+t,'Pin on Pinterest',SVG.pinterest));
  bar.appendChild(btn('blog-share-reddit','https://www.reddit.com/submit?url='+u+'&title='+t,'Share on Reddit',SVG.reddit));
  bar.appendChild(btn('blog-share-telegram','https://t.me/share/url?url='+u+'&text='+t,'Share on Telegram',SVG.telegram));
  bar.appendChild(btn('blog-share-email','mailto:?subject='+t+'&body='+t+'%20'+u,'Share by Email',SVG.email));
  var copy=document.createElement('button');copy.type='button';copy.className='blog-share-btn blog-share-copy';copy.title='Copy link';copy.innerHTML=SVG.copy;
  copy.addEventListener('click',function(){var d=url;(navigator.clipboard?navigator.clipboard.writeText(d):Promise.reject()).then(function(){copy.classList.add('copied');setTimeout(function(){copy.classList.remove('copied');},1500);}).catch(function(){var ta=document.createElement('textarea');ta.value=d;document.body.appendChild(ta);ta.select();try{document.execCommand('copy');copy.classList.add('copied');setTimeout(function(){copy.classList.remove('copied');},1500);}catch(e){}document.body.removeChild(ta);});});
  bar.appendChild(copy);
})();
</script>
</body>
</html>
