.guide-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 50px 20px;
    }

    /* 🌟 HERO BANNER 🌟 */
    .guide-hero {
        background: linear-gradient(135deg, var(--pk_up_primary-dark) 0%, var(--pk_up_primary) 100%);
        border-radius: 24px;
        padding: 60px 40px;
        text-align: center;
        color: var(--pk_up_white);
        margin-bottom: 60px;
        box-shadow: 0 20px 40px rgba(18, 35, 59, 0.15);
    }

    .guide-hero i {
        font-size: 55px;
        color: var(--pk_up_secondary);
        margin-bottom: 25px;
    }

    .guide-hero h1 {
        font-size: 42px;
        margin: 0 0 15px 0;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .guide-hero p {
        font-size: 18px;
        color: var(--pk_up_gray-200);
        max-width: 750px;
        margin: 0 auto;
    }

    /* 🌟 SECTION TITLES 🌟 */
    .section-title {
        font-size: 26px;
        color: var(--pk_up_primary-dark);
        margin-top: 0;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
    }

    .section-title i {
        background: var(--pk_up_secondary);
        color: white;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 18px;
    }

    /* 🌟 DYNAMIC VIDEO SECTION 🌟 */
    .example-section {
        background: var(--pk_up_white);
        border: 1px solid var(--pk_up_gray-200);
        border-radius: 20px;
        padding: 40px;
        margin-bottom: 60px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    }

    .example-grid {
        display: flex;
        gap: 40px;
        align-items: stretch;
    }

    /* Real HTML5 Video Player */
    .video-player-box {
        flex: 1.3;
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        display: flex;
        position: relative;
    }

    .video-player-box video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16/9;
        outline: none;
    }

    .video-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(255, 69, 0, 0.9);
        color: var(--pk_up_white);
        padding: 6px 15px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        z-index: 10;
        pointer-events: none;
    }

    /* Transcript Box */
    .transcript-box {
        flex: 1;
        background: var(--pk_up_gray-50);
        border-radius: 16px;
        padding: 30px;
        border: 1px solid var(--pk_up_gray-200);
        display: flex;
        flex-direction: column;
    }

    .transcript-box h4 {
        margin: 0 0 20px 0;
        color: var(--pk_up_primary-dark);
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .transcript-box h4 i { color: var(--pk_up_secondary); }

    .transcript-text {
        font-size: 15px;
        color: var(--pk_up_gray-700);
        line-height: 1.8;
    }

    .transcript-text span {
        display: block;
        margin-bottom: 15px;
        padding-left: 15px;
        border-left: 3px solid var(--pk_up_gray-300);
    }

    .highlight-text {
        color: var(--pk_up_primary-dark);
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 4px;
    }

    /* 🌟 STEP-BY-STEP GUIDE 🌟 */
    .steps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        margin-bottom: 60px;
    }

    .step-card {
        background: var(--pk_up_white);
        border: 1px solid var(--pk_up_gray-200);
        border-radius: 16px;
        padding: 35px 30px 30px 30px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
        position: relative;
    }

    .step-card:hover {
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: var(--pk_up_primary-light);
        transform: translateY(-5px);
    }

    .step-badge {
        position: absolute;
        top: -20px;
        left: 30px;
        background: var(--pk_up_primary);
        color: var(--pk_up_white);
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 800;
        border-radius: 12px;
    }

    .step-card h3 {
        margin: 10px 0 12px 0;
        color: var(--pk_up_primary-dark);
        font-size: 22px;
        font-weight: 700;
    }

    .step-card p {
        color: var(--pk_up_gray-600);
        margin-bottom: 25px;
        font-size: 15px;
    }

    .script-hint {
        background: var(--pk_up_primary-light);
        border-radius: 8px;
        padding: 18px;
        font-size: 14.5px;
        color: var(--pk_up_primary-dark);
        border-left: 4px solid var(--pk_up_primary);
    }

    .script-hint strong {
        color: var(--pk_up_secondary);
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
        text-transform: uppercase;
    }

    /* 🌟 DO'S AND DON'TS 🌟 */
    .rules-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .rule-card {
        background: var(--pk_up_white);
        padding: 35px;
        border-radius: 20px;
        border: 1px solid var(--pk_up_gray-200);
    }

    .rule-card.dos { border-top: 5px solid var(--pk_up_success); }
    .rule-card.donts { border-top: 5px solid var(--pk_up_danger); }

    .rule-card h3 {
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        margin-bottom: 25px;
    }

    .rule-card.dos h3 { color: var(--pk_up_success); }
    .rule-card.donts h3 { color: var(--pk_up_danger); }

    .rule-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rule-list li {
        margin-bottom: 18px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        color: var(--pk_up_gray-700);
        font-size: 16px;
    }

    .rule-list.dos li i { color: var(--pk_up_success); margin-top: 4px; font-size: 18px; }
    .rule-list.donts li i { color: var(--pk_up_danger); margin-top: 4px; font-size: 18px; }

    /* =========================================
       🌟 ADVANCED RESPONSIVE MEDIA QUERIES 🌟
       ========================================= */

    /* Tablet Landscape & Small Laptops */
    @media (max-width: 1024px) {
        .guide-container { padding: 40px 15px; }
        .steps-grid, .rules-grid { gap: 20px; }
        .example-grid { gap: 20px; }
    }

    /* Tablet Portrait */
    @media (max-width: 992px) {
        .example-grid { flex-direction: column; gap: 25px; }
        .video-player-box, .transcript-box { width: 100%; flex: none; }
        .guide-hero h1 { font-size: 36px; }
        .guide-hero i { font-size: 45px; margin-bottom: 15px; }
    }

    /* Mobile Phones (Standard) */
    @media (max-width: 768px) {
        .steps-grid, .rules-grid { grid-template-columns: 1fr; gap: 30px; }
        
        .guide-hero { padding: 40px 20px; margin-bottom: 40px; border-radius: 16px; }
        .guide-hero h1 { font-size: 30px; }
        .guide-hero p { font-size: 15px; }
        
        .example-section { padding: 25px; margin-bottom: 40px; border-radius: 16px; }
        .section-title { font-size: 22px; margin-bottom: 25px; }
        
        .step-card { padding: 30px 20px 20px 20px; }
        .step-badge { left: 20px; width: 40px; height: 40px; font-size: 18px; top: -20px; }
        .step-card h3 { font-size: 20px; }
        
        .rule-card { padding: 25px; }
        .rule-card h3 { font-size: 20px; }
        .rule-list li { font-size: 15px; }
    }

    /* Very Small Screens (e.g., older iPhones) */
    @media (max-width: 480px) {
        .guide-hero h1 { font-size: 26px; }
        .guide-hero i { font-size: 40px; }
        
        .section-title { font-size: 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
        .section-title i { width: 35px; height: 35px; font-size: 16px; }
        
        .transcript-box { padding: 20px; }
        .video-badge { top: 10px; left: 10px; font-size: 10px; padding: 4px 10px; }
    }