/*
===============================================================
AURA AGREEMENT CSS - FINAL STRUCTURED VERSION
===============================================================
01. Reset & Global
02. Fonts
03. Shared Utilities
04. Builder Flow (slide1-slide5)
05. Agreement Flow (stage0-stage6)
06. Forms & Inputs
07. Buttons
08. Share / Modal / Messages
09. Certificate Layouts (agree1, agree2, agree3)
10. Dynamic Helpers (conds-*)
11. Responsive

Preserved dynamic selectors:
slide*, stage*, agree1-*, agree2-*, agree3-*,
conds-*, condition-item.active, gadget-item.selected,
flow-msg, share-box.

Removed:
- Obvious duplicate .next-btn-slide2 block
- Commented dead prototype blocks
===============================================================
*/

/* =========================================================
   AURA AGREEMENT WEBSITE
   ORGANIZED CSS VERSION
   =========================================================

   Sections:
   1. Reset & Global
   2. Fonts
   3. Slides (1-5)
   4. Stages (1-6)
   5. Forms & Inputs
   6. Buttons
   7. Scrollbars
   8. Responsive Media Queries

   NOTE:
   This version preserves your existing CSS and adds
   structure comments for easier maintenance.
   ========================================================= */

/* ==========================
   RESET
========================== */
html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

*{
    box-sizing:border-box;
}

@font-face {
    font-family: 'AlphabetSoupPro';
    src: url('fonts/alphabet-soup-pro.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.global-disclaimer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0px 185px;
    /*background: rgba(255,255,255,0.95);*/
    color: #FFF;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
    z-index: 9999;
    box-sizing: border-box;
    display: none; /* Hidden during slide0 */
    pointer-events:none;
}


.slide0{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#000;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide0 video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slide1{
    position:fixed;
    inset:0;
    background:url('images/background.webp')
    center center/cover no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
}

.selection-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:100px;
    width:100%;
    height:100vh;
}

.role-logo{
    width:300px;
    max-width:40vw;
    height:auto;
    display:block;
    cursor:pointer;
    transition:0.3s ease;
}

.role-logo:hover{
    transform:scale(1.05);
}

.slide2{
    position:fixed;
    inset:0;

    background:url('images/background.webp') center center/cover no-repeat;

    display:none;
    justify-content:center;
    align-items:center;
}

.agreement-wrapper{
    position:relative;
    width:380px;   /* smaller */
    max-width:80vw;
}

.agreement-bg{
    width:100%;
    height:auto;
    display:block;
}

.agreement-heading{
    position:absolute;
    top:210px;   /* Move down */
    left:30px;

    font-size:16px;
    font-weight:700;
    color:#111;

    font-family:'Space Mono', monospace;
    letter-spacing:1px;
}

.agreement-content{
    position:absolute;
    inset:0;

    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* FIRST SELECT HOGA... */

.agreement-subtitle{
    position:absolute;
    top:233px;   /* Move down */
    left:50%;
    transform:translateX(-50%);

    width:75%;

    text-align:center;
    font-size:11px;
    line-height:1.2;
    color:#333;

    font-family:'Space Mono', monospace;
    letter-spacing:1px;
}

/* SELECT NEW VYAVHAARS */

.agreement-dropdown{
    position:absolute;
    top:270px;
    left:50%;
    transform:translateX(-50%);
    width:270px;
}

.dropdown-header{
    display:flex;
    /*justify-content:center;*/
    align-items:center;
    position:relative;

    border-top:1px solid #444;
    border-bottom:1px solid #444;

    padding:3px 0;

    font-family:'Space Mono', monospace;
    font-size:18px;   /* Increased */
    font-weight:700;
    color:#111;

    text-align:center;
}

.dropdown-header span:last-child{
    position:absolute;
    right:5px;
    font-size:20px;
}

/* Scroll Area */

.dropdown-content{
    border:1px solid #999;
    border-top:none;

    padding:12px 15px;

    font-family:'Space Mono', monospace;
    font-size:15px;
    line-height:1.4;

    height:210px;
    overflow-y:auto;
    overflow-x:hidden;
}


.dropdown-content ol{
    margin:0;
    padding-left:30px;
}

.dropdown-content li{
    margin-bottom:8px;
}

/* Chrome, Edge */

.dropdown-content::-webkit-scrollbar{
    width:18px;
}

.dropdown-content::-webkit-scrollbar-track{
    background:#e5e5e5;
    border-left:1px solid #9a9a9a;
}

.dropdown-content::-webkit-scrollbar-thumb{
    background:#9c9c9c;
    border-radius:10px;
    border:3px solid #e5e5e5;
}

.dropdown-content::-webkit-scrollbar-button:single-button{
    display:block;
    background:#e5e5e5;
    height:16px;
}

.dropdown-content::-webkit-scrollbar-button:single-button:vertical:decrement{
    background:
    linear-gradient(135deg, transparent 50%, #777 50%) center no-repeat,
    linear-gradient(225deg, transparent 50%, #777 50%) center no-repeat;
    background-size:8px 8px;
}

.dropdown-content::-webkit-scrollbar-button:single-button:vertical:increment{
    background:
    linear-gradient(315deg, transparent 50%, #777 50%) center no-repeat,
    linear-gradient(45deg, transparent 50%, #777 50%) center no-repeat;
    background-size:8px 8px;
}

.custom-rule input{
    width:100%;
    border:none;
    border-bottom:1px solid #666;
    background:transparent;

    font-family:'Space Mono', monospace;
    font-size:15px;
    color:#111;

    padding:3px 0;
    outline:none;
}

.custom-rule input::placeholder{
    color:#777;
    font-size:12px;
    opacity:1;
}

.next-btn-slide2{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);

    background:#f5f5f5;
    color:#111;

    border:1px solid #777;
    border-radius:0;

    width:90px;
    height:32px;

    font-family:'Space Mono', monospace;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.slide3{
    position:fixed;
    inset:0;

    background:url('images/background.webp')
    center center/cover no-repeat;

    display:none;
    justify-content:center;
    align-items:center;
}

.next-btn-slide3{
    position:absolute;
    bottom:-24px;
    left:60%;
    transform:translateX(-50%);

    background:#f5f5f5;
    color:#111;

    border:1px solid #777;
    border-radius:0;

    width:90px;
    height:32px;

    font-family:'Space Mono', monospace;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}


.gadget-wrapper{
    position:relative;
    width:380px;   /* smaller */
    max-width:80vw;
}

.gadget-bg{
    width:100%;
    height:auto;
    display:block;
}

/* Back paper */



/* Front paper */

.paper-front{
    position:relative;

    width:440px;
    height:auto;
    display:block;

    /*z-index:2;*/
}

/* Content */

.gadget-content{
    position:absolute;
    top:265px;
    /*inset:0;*/
    z-index:3;
        /* Move gadget section right */
    padding:0px 0px 0px 66px;
}

/* CONTENT */

.gadget-title{
    position:absolute;
    top:-13px;
    left:55%;
    transform:translateX(-34%);

    font-family:'Space Mono', monospace;
    font-size:12px;
    color:#333;
}

/* ==========================================
   GADGET GRID
========================================== */

.gadget-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    margin-top:8px;
}

/* ==========================================
   GADGET ITEM
========================================== */

.gadget-item{
    text-align:center;

    padding:4px;

    min-height:105px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}

/* Grid Borders */

.gadget-item:nth-child(1),
.gadget-item:nth-child(3){
    border-right:1px solid #8c8c8c;
}

.gadget-item:nth-child(1),
.gadget-item:nth-child(2){
    border-bottom:1px solid #8c8c8c;
    z-index:5;
}

.gadget-item:nth-child(3),
.gadget-item:nth-child(4){
    padding-top:15px;
}


/* ==========================================
   TITLE
========================================== */

.gadget-head{
    font-size:11px;
    font-weight:700;
    line-height:1.1;

    text-align:center;

    margin-bottom:2px;

    min-height:24px;
    font-family:'Space Mono', monospace;
    display:flex;
    align-items:center;
    justify-content:center;
}



/* ==========================================
   IMAGE
========================================== */

.gadget-item img{
    width:72px;
    height:72px;

    object-fit:contain;

    display:block;

    margin-top:0;
}

/* ==========================================
   SECOND ROW UP
========================================== */

.gadget-item:nth-child(3),
.gadget-item:nth-child(4){
    margin-top:-8px;
}

/* ==========================================
   HOVER
========================================== */

.gadget-item:hover{
    background:#f5f5f5;
}

/* ==========================================
   SELECTED
========================================== */



.gadget-item.selected img{
    border:2px solid #2f53d9;
    border-radius:8px;
    padding:4px;
}

.gadget-item.selected .gadget-head{
    color:#2f53d9;
}




.slide4{
    position:fixed;
    inset:0;

    background:url('images/background.webp')
    center center/cover no-repeat;

    display:none;
    justify-content:center;
    align-items:center;
}

.final-wrapper{
    position:relative;

    width:380px;
    max-width:80vw;
}

.final-paper{
    width:100%;
    height:auto;
    display:block;
}

.final-content{
    position:absolute;
    inset:0;
    top: 33px;
    left: 10px;
}

/* Points */

.agreement-points{
    position:absolute;

    top:215px;
    left:49px;

    width:180px;

    font-family:'Space Mono', monospace;
    font-size:11px;
    line-height:1.4;
    color:#444;
}

.agreement-points ol{
    margin:0;
    padding-left:18px;
}

.agreement-points li{
    margin-bottom:12px;
}

/* Gadget */

.selected-gadget{
    position:absolute;

    top:235px;
    right:38px;
}

.selected-gadget img{
    width:95px;
}

/* Names */

.name-fields{
    position:absolute;

    top:359px;
    left:55px;

    width:300px;

    display:flex;
    gap:16px;
}

.name-fields input{
    width:126px;

    border:none;
    border-bottom:1px solid #999;
    font-weight:700; /* Bold */
    background:transparent;

    font-family:'Space Mono', monospace;
    font-size:15px;

    outline:none;
}

.name-fields input::placeholder{
    color:#777;
    font-size:10px;
    opacity:1;
    font-weight:700; /* Bold */
}

/* Save */

.save-btn{
    position:absolute;

    top:471px;
    left:50%;

    transform:translateX(-50%);

    width:75px;
    height:38px;

    background:#1f48d8;
    color:#fff;

    border:none;
    border-radius:8px;

    font-family:'Space Mono', monospace;
    font-size:14px;
    font-weight:700;

    cursor:pointer;
}

/* Share */

.share-text{
    position:absolute;

    top:488px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:6px;

    font-family:'Space Mono', monospace;
    font-size:13px;
    color:#9a9a9a;
}

.share-text img{
    width:16px;
}

/* ==========================
   SLIDE 5
========================== */

.slide5{
    position:relative;
    width:100%;
    min-height:100vh;
    display:none;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:url('images/fadebackground.webp') center center/cover no-repeat;
    
}

/* Blurred paper in background */

.slide5-paper{
    position:absolute;
    width:340px;
    max-width:70%;
    opacity:.55;
    filter:blur(8px);
    z-index:1;
}

/* Main card */

.discount-card{
    position:relative;
    z-index:5;

    width:550px;
    max-width:90%;

    background:#f4f4f4;
    border-radius:22px;

    padding:32px 25px 70px;

    text-align:center;

    box-shadow:
    0 15px 30px rgba(0,0,0,.35);
}

/* Heading */

.offer-text{
    font-family:'Space Mono', monospace;
    font-size:20px;
    font-weight:700;
    color:#222;
    line-height:1.4;
    letter-spacing:1px;
}

.offer-text span{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:24px;
    font-weight:900;
    text-shadow:
    0.5px 0 currentColor,
   -0.5px 0 currentColor;
}

/* Coupon */

.coupon-box{
    width:304px;
    height:42px;

    margin:18px auto 8px;

    background:linear-gradient(
    180deg,
    #4023ff,
    #2400d8
    );

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffd400;

    font-size:32px;
    font-weight:900;
    font-family:'Space Mono', monospace;

    letter-spacing:2px;
    
    cursor:pointer;
}

/* Copy code */

.copy-text{
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:18px;
    color:#111;
    letter-spacing:1px;
    
    cursor:pointer;
}

/* Per-category discount value (below the coupon code) */

.discount-value{
    margin-top:10px;

    font-family:'Space Mono', monospace;
    font-size:16px;
    font-weight:700;

    line-height:1.4;
    color:#2400d8;

}



/* Description */

.description{
    margin-top:35px;

    font-family:'Space Mono', monospace;
    font-size:18px;
    font-weight:700;

    line-height:1.5;
    color:#333;
}

.description a {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px 24px;
    background: #ffd000;
    color: #2d1cff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Continue button */

.continue-btn{
    position:absolute;
    left:50%;
    bottom:-21px;
    transform:translateX(-50%);

    border:none;
    outline:none;

    background:#ffd400;
    color:#1d2cff;

    padding:5px 28px;

    border-radius:30px;

    font-size:25px;
    font-weight:900;

    font-family:'AlphabetSoupPro', sans-serif;
    letter-spacing:2px;

    cursor:pointer;

    box-shadow:
    0 8px 20px rgba(0,0,0,.25);
}

.share-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    background:transparent;
    border:none;
    outline:none;

    padding:0 0 6px 0;

    font-family:'Space Mono', monospace;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    color:#888;

    border-bottom:1px solid #bdbdbd;
    cursor:pointer;
}

.share-btn i{
    color:#25D366;
    font-size:12px;
}

.share-btn:hover{
    color:#555;
}

/* ==========================
   STAGE 1
========================== */

.stage1{
    position:fixed;
    inset:0;

    background:url('images/agreementbg.webp')
    center center/cover no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* ACCEPT */

.stage1-accept-btn{
    width:190px;
    height:77px;

    border:none;
    border-radius:10px;

    background:#f2f2f2;
    color:#1840c8;
    letter-spacing: 1px;
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:30px;
    font-weight:500;

    cursor:pointer;
}

.stage1-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}

/* Agreement */

.agreement-preview{
    position:relative;
    width:350px;
}

.agreement-img{
    width:100%;
    display:block;
}

.agreement-text{
    position:absolute;
    flex-direction:column;
    top:217px;
    left:28px;
    right:28px;

    font-family:'Space Mono', monospace;
    color:#333;
}

.line1{
    font-size:11px;
    margin-bottom:12px;
    letter-spacing:0.5px;
    line-height: 18px;
    font-family:'Space Mono', monospace;
}

/*.line2{*/
/*    font-size:9px;*/
/*    margin-bottom:14px;*/
/*    line-height:1.5;*/
/*}*/

.condition-list{
    margin:0 0 14px 0;
    padding-left:18px;

    font-size:9px;
    line-height:1.3;
    font-family:'Space Mono', monospace;
}

.condition-list li{
    margin-bottom:8px;
    font-weight: 700;
    font-family:'Space Mono', monospace;
}

.line3{
    font-size:10px;
    line-height:1.3;
    font-family:'Space Mono', monospace;
}

.blank{
    color:#9a9a9a;
    border-bottom:1px solid #999;
    padding:0 3px;
    font-weight: 700;
    font-family:'Space Mono', monospace;
}
/* Buttons */

.agreement-actions{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* NEGOTIATE */

.negotiate-btn{
    width:190px;
    height:52px;

    border:none;
    border-radius:10px;

    background:#f8c500;
    color:#1840c8;
    letter-spacing: 1px;
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:30px;
    font-weight:500;

    cursor:pointer;
}

/* ACCEPT */

.accept-btn{
    width:190px;
    height:52px;

    border:none;
    border-radius:10px;

    background:#f2f2f2;
    color:#1840c8;
    letter-spacing: 1px;
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:30px;
    font-weight:500;

    cursor:pointer;
}

/* Hover */

.negotiate-btn:hover,
.accept-btn:hover{
    transform:translateY(-2px);
}

.reward-section{
    position:relative;
    margin-top:12px;
    text-align:center;
}

.reward-laptop{
    width:140px;
    display:block;
    margin:0 auto;
}

.reward-badge{
    position:absolute;
    top:-10px;
    right:25px;

    width:75px;
}

.signature-row{
    margin-top:10px;

    display:flex;
    justify-content:space-between;
    gap:15px;
}

.signature-box{
    flex:1;
    text-align:center;
}

.sign-name{
    font-size:18px;
    margin-bottom:3px;
    font-family: 'Priestacy';
    height:22px;
    line-height:22px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.sign-line{
    border-bottom:1px solid #666;
    margin-bottom:4px;
}

.sign-label{
    font-size:7px;
    letter-spacing:0.5px;
    font-family:'Space Mono', monospace;
}   

.stage2{
    position:fixed;
    inset:0;

    background:url('images/background.webp')
    center center/cover no-repeat;

    display:none; /* Hide initially */

    justify-content:center;
    align-items:center;
}

.stage2-revise-wrap{
    position:relative;
    width:460px;   /* smaller */
    max-width:80vw;
}

.revise-wrap-bg {
    width:100%;
    height:auto;
    display:block;
}

.stage2-condition-box{
    width:100%;

    height:180px;      /* fixed height */

    overflow-y:auto;

    border:1px solid #8c8c8c;

    padding:10px 12px;

    margin-bottom:15px;

    font-family:'Space Mono', monospace;
    font-size:12px;
    line-height:1.5;

    text-align:left;
}

.stage2-condition-box ol{
    margin:0;
    padding-left:20px;
}

.stage2-condition-box li{
    margin-bottom:8px;
}

.stage2-content{
    position:absolute;
 /*border:2px solid red;*/
    top:256px;   /* was 210px */
    left:90px;
    right:90px;

    z-index:2;
}

.stage2-revise-note{
    text-align:center;
    font-family:'Space Mono', monospace;
    font-size:14px;
    line-height:1.2;

    margin-bottom:5px;
}

.stage2-revise-heading{
    position:relative;

    /*text-align:center;*/

    font-family:'Space Mono', monospace;
    font-size:16px;
    font-weight:700;

    border-top:1px solid #333;
    border-bottom:1px solid #333;

    padding:3px 0;
    margin-bottom:6px;
}

.stage2-arrow{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
}

.stage2-custom-rule{
    list-style-position:outside;
}

.stage2-custom-input{
    width:100%;
    height:32px;

    border:none;
    border-bottom:1px solid #777;

    background:transparent;

    font-family:'Space Mono', monospace;
    font-size:12px;
    color:#222;

    outline:none;
}

.stage2-custom-input::placeholder{
    color:#888;
    opacity:1;
}

.stage2-choice-board{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.stage2-choice-card{
    min-height:107px;

    text-align:center;

    border-right:1px solid #777;
    border-bottom:1px solid #777;

    padding:1px;
}

.stage2-choice-card:nth-child(2),
.stage2-choice-card:nth-child(4){
    border-right:none;
}

.stage2-choice-card:nth-child(3),
.stage2-choice-card:nth-child(4){
    border-bottom:none;
}

.stage2-choice-title{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;

    min-height:40px;

    font-family:'Space Mono', monospace;
    font-size:11px;
    font-weight:700;

    margin-bottom:-2px;
}

.stage2-choice-title input{
    width:14px;
    height:14px;
    cursor:pointer;
}

.stage2-choice-image{
    width:74px;
    height:auto;
    object-fit:contain;
}

.stage2-dropdown-body{
    display:block;
}

.stage2-rules-scroll{
    border:1px solid #999;
    border-top:none;

    padding:12px 15px;

    font-family:'Space Mono', monospace;
    font-size:15px;
    line-height:1.4;

    height:210px;
    overflow-y:auto;
    overflow-x:hidden;
}

.stage2-rules-scroll ol{
    margin:0;
    padding-left:30px;

}

.stage2-rules-scroll li{
    margin-bottom:8px;

}

.stage2-rule-text{
    list-style-position:outside;
}

.stage2-rule-text input{
    width:100%;

    border:0 !important;
    border-bottom:1px solid #666 !important;

    background:transparent !important;

    outline:none !important;
    box-shadow:none !important;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

    font-family:'Space Mono', monospace;
    font-size:15px;
    color:#111;

    padding:3px 0;
    border-radius:0 !important;
}

.stage2-rule-text input:focus{
    border:none;
    border-bottom:1px solid #666;
    box-shadow:none;
    outline:none;
}

.stage2-rule-text input::placeholder{
    color:#777;
    font-size:15px;
    opacity:1;
}

.stage2-rule-text input{
    -webkit-appearance:none;
    appearance:none;
}

.stage2-next-btn{
    display:block;
    margin:11px  auto;

    width:76px;
    height:31px;

    border:1px solid #888;
    background:#f5f5f5;

    font-family:'Space Mono', monospace;
    font-size:18px;
    font-weight:700;
}

.stage3{
    position:fixed;
    inset:0;

    background:url('images/background.webp')
    center center/cover no-repeat;

    display:none; /* Hide initially */

    justify-content:center;
    align-items:center;
}

.stage3-paper-wrap{
    position:relative;
    width:460px;   /* smaller */
    max-width:80vw;
}

.stage3-paper-bg{
    width:100%;
    height:auto;
    display:block;
}

.stage3-paper-content{
    position:absolute;
    inset:0;

    /* IMPORTANT */
    padding:250px 38px 31px 92px; /* top right bottom left */
}

.stage3-gadget-panel{
    margin-top:15px;
}

.stage3-title{
    /*text-align:center;*/

    font-family:'Space Mono', monospace;
    font-size:15px;
    font-weight:400;
    padding-left: 62px;
    letter-spacing:1px;

    margin-bottom:5px;
}

.stage3-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:82%;
    margin-top:21px;
}

/* remove all borders first */

.stage3-item{
    height:92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:13px;
}

/* center vertical line */

.stage3-item:nth-child(1),
.stage3-item:nth-child(3){
    border-right:1px solid #8c8c8c;
}

/* center horizontal line */

.stage3-item:nth-child(1),
.stage3-item:nth-child(2){
    border-bottom:1px solid #8c8c8c;
}

.stage3-item-head{
    margin-bottom:2px;

    font-family:'Space Mono', monospace;
    font-size:10px;
    font-weight:700;

    white-space:nowrap;
    text-align:center;
}

.stage3-item-head input{
    width:16px;
    height:16px;
    cursor:pointer;
}

.stage3-item-img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.stage3-next-btn{
    display:block;
    margin:25px  auto;

    width:76px;
    height:31px;

    border:1px solid #888;
    background:#f5f5f5;

    font-family:'Space Mono', monospace;
    font-size:18px;
    font-weight:700;
    
    position:relative;
    left:-22px;   /* adjust as needed */
}


/* =========================
   STAGE 4
========================= */

.stage4{
    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:url('images/background.webp')
    center center/cover no-repeat;

    overflow:hidden;
}

.stage4-paper-wrap{
    position:relative;
    width:460px;   /* smaller */
    max-width:80vw;
}

.stage4-paper-bg{
    width:100%;
    height:auto;
    display:block;
}

.stage4-content{
    position:absolute;
    top:257px;
    left:87px;
    right:87px;
}

.stage4-note{
    text-align:center;
    line-height: 1.2;
    font-family:'Space Mono', monospace;
    font-size:14px;
    color:#444;
    margin-bottom:5px;
}

.stage4-divider{
    height:1px;
    background:#777;
    margin-bottom:18px;
}

.stage4-summary{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:13px;
}

.stage4-rules{
    flex:1;
}

.stage4-rules ol{
    margin:0;
    padding-left:18px;

    font-family:'Space Mono', monospace;
    font-size:11px;
    line-height:1.6;
}

.stage4-rules li{
    margin-bottom:8px;
}

.stage4-gadget{
    width:100px;
    padding-top: 13px;
}

.stage4-gadget img{
    width:100%;
    display:block;
}

.stage4-save-btn{
    display:block;

    margin:10px auto;

    width:95px;
    height:40px;

    border:none;
    border-radius:8px;

    background:#1c46d8;
    color:#fff;

    font-family:'Space Mono', monospace;
    font-size:22px;
    font-weight:700;

    cursor:pointer;
}

.stage4-share{
    position:absolute;

    top:440px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    font-family:'Space Mono', monospace;
}

.stage4-share-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    background:transparent;
    border:none;
    margin-top: -313px;
    padding:0 0 6px 0;

    font-family:'Space Mono', monospace;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;

    color:#888;

    cursor:pointer;
}

.stage4-share-btn i{
    color:#25D366;
    font-size:12px;
}

.stage4-share-btn:hover{
    color:#555;
}

/* =========================
   STAGE 5
========================= */

.stage5{
    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:url('images/background.webp')
    center center/cover no-repeat;
}

.stage5-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
}

.stage5-preview{
    position:relative;
    width:350px;
}

.stage5-agreement-img{
    width:100%;
    display:block;
}

.stage5-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.stage5-icon-btn{
    width:68px;
    height:68px;

    background:#ffc800;

    border:none;
    border-radius:14px;

    cursor:pointer;

    margin-bottom:8px;
}

.stage5-icon-btn i{
    font-size:34px;
    color:#1644d7;
}

.stage5-label{
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:28px;
    color:#fff;
    margin-top:10px;
}

.stage5-proceed-btn{
    width:190px;
    height:52px;

    border:none;
    border-radius:14px;

    background:#f5f5f5;
    color:#1644d7;
    letter-spacing: 1px;
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:30px;
    font-weight:500;

    cursor:pointer;
}

.stage5-agreement-text{
    position:absolute;

    top:217px;
    left:28px;
    right:28px;

    font-family:'Space Mono', monospace;
    color:#333;
}

.stage5-line1{
    font-size:11px;
    margin-bottom:12px;
    letter-spacing:0.5px;
    line-height: 18px;
    font-family:'Space Mono', monospace;
}

/*.line2{*/
/*    font-size:9px;*/
/*    margin-bottom:14px;*/
/*    line-height:1.5;*/
/*}*/

.stage5-condition-list{
    margin:0 0 14px 0;
    padding-left:18px;

    font-size:9px;
    line-height:1.3;
    font-family:'Space Mono', monospace;
}

.stage5-condition-list li{
    margin-bottom:8px;
    font-weight: 700;
    font-family:'Space Mono', monospace;
}

.stage5-line3{
    font-size:10px;
    line-height:1.3;
    font-family:'Space Mono', monospace;
}

.stage5-blank{
    color:#9a9a9a;
    border-bottom:1px solid #999;
    padding:0 3px;
    font-weight: 700;
    font-family:'Space Mono', monospace;
}


.stage5-reward-section{
    position:relative;
    margin-top:12px;
    text-align:center;
}

.stage5-reward-laptop{
    width:140px;
    display:block;
    margin:0 auto;
}

.stage5-reward-badge{
    position:absolute;
    top:-10px;
    right:25px;

    width:75px;
}

.stage5-signature-row{
    margin-top:10px;

    display:flex;
    justify-content:space-between;
    gap:15px;
}

.stage5-signature-box{
    flex:1;
    text-align:center;
}

.stage5-sign-name{
    font-size:18px;
    margin-bottom:3px;
    font-family: 'Priestacy';
    height:22px;
    line-height:22px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.stage5-sign-line{
    border-bottom:1px solid #666;
    margin-bottom:4px;
}

.stage5-sign-label{
    font-size:7px;
    letter-spacing:0.5px;
    font-family:'Space Mono', monospace;
}   



.stage5-action-row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:40px;

    margin-bottom:30px;
}

.stage5-action-box{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
   STAGE 6
========================= */

.stage6{
    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:url('images/plainbluebg.webp')
    center center/cover no-repeat;

    overflow:hidden;
}

.stage6-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:120px;
}

.stage6-ticket-wrap{
    position:relative;
    width:550px;
}

.stage6-ticket-img{
    width:100%;
    display:block;
}

/* Code */

.stage6-code-box{
    position:absolute;

    top:305px;      /* adjust if needed */
    left:50%;

    transform:translateX(-50%);

    width:320px;
    height:75px;

    background:#153fd8;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

.stage6-code-box span{
    display:block;
    padding:0 20px; /* Left & Right Gap */
    max-width:100%;

    font-size:42px; 
    font-weight:700;
    color:#ffcf00;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    font-family:'Arial', sans-serif;
}

.stage6-copy-text{
    position:absolute;
    top:393px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:8px;

    white-space:nowrap;

    color:#153fd8;

    font-family:'Space Mono', monospace;
    font-size:18px;
    font-weight:700;
    
    cursor:pointer;

}

.stage6-copy-text i{
    font-size:22px;
}

/* Per-category discount value text, shown in the ticket's white space */
.stage6-discount{
    position:absolute;
    top:441px;
    left:50%;

    transform:translateX(-50%);

    width:300px;
    max-width:78%;
    text-align:center;

    color:#153fd8;

    font-family:'Space Mono', monospace;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
}


/* Right side */

.stage6-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px; /* increase/decrease as needed */
}


.stage6-redeem-btn{
    width:360px;
    height:55px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    background:#f5f5f5;
    border:none;
    border-radius:12px;
    letter-spacing: 1px;
    font-family:'AlphabetSoupPro', sans-serif;
    font-size:36px;
    font-weight:400;

    color:#1d43d8;

    padding-top:4px;
    cursor:pointer;
}

.stage6-redeem-btn .stage6-arrow{
    color:#1d43d8;
    font-size:34px;
    line-height:1;
}

.stage6-instruction-btn{
    width:280px;
    height:100px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#ffcc00;
    border:none;
    border-radius:14px;

    font-family:'AlphabetSoupPro', sans-serif;
    font-size:37px;
    font-weight:400;

    color:#1d43d8;

    text-align:center;
    line-height:1.15;
    letter-spacing: 1px;
    padding-top:6px;
    cursor:pointer;
}

.stage6-video-wrap{
    margin-top:15px;

    width:320px;
    height:180px;

    border-radius:12px;
    overflow:hidden;
}

.stage6-video-wrap iframe{
    width:100%;
    height:100%;
    border:none;
}


/* ===== Short modal alert ===== */
.app-modal-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
}
.app-modal-box{
    background:#fff;border-radius:10px;
    padding:14px 20px;
    box-shadow:0 6px 28px rgba(0,0,0,.3);
    display:flex;align-items:center;gap:10px;
    font-family:'Space Mono',monospace;
    font-size:13px;font-weight:700;
    max-width:320px;width:90%;
    pointer-events:all;
    border-left:4px solid #1840c8;color:#1840c8;
}

.app-modal-box.err{border-left-color:#b00020;color:#b00020}
.app-modal-box.ok{border-left-color:#0a7d27;color:#0a7d27}
.app-modal-close{
    background:none;border:none;cursor:pointer;
    font-size:18px;padding:0 0 0 4px;
    color:inherit;margin-left:auto;line-height:1;
}
/* Single name field — center it when partner field is hidden */
.name-fields.single-field{justify-content:center}
.name-fields.single-field input{width:220px}


/* ===== Certificate body layouts — from agreement1/2/3.php reference files ===== */
/* one variant per condition count (1 / 2 / 3); custom CSS lives with each */

/* Clickable condition rows (mirrors index.php slide2) */
.condition-item{
    cursor:pointer;
    padding:8px 10px;
    margin-bottom:6px;
    border:2px solid transparent;
    border-radius:6px;
    transition:.2s ease;
}
.condition-item:hover{background:#f3f3f3}
.condition-item.active{
    background:#dfe8ff;
    border-color:#1f48d8;
    color:#1f48d8;
    font-weight:700;
}
/* Gadget selection highlight (mirrors index.php slide3) */
.stage3-item{cursor:pointer}
.stage3-item.selected .stage3-item-img{border:2px solid #2f53d9;border-radius:8px;padding:4px}
.stage3-item.selected .stage3-item-head{color:#2f53d9}
.chosen-item-label{font-size:12px;margin-top:6px;font-weight:700;min-height:16px;text-align:center}
.flow-msg{font-size:13px;margin-top:8px;text-align:center;min-height:18px;font-weight:700}
.flow-msg.err{color:#b00020}.flow-msg.ok{color:#0a7d27}
.share-box{margin-top:12px;text-align:center}
.share-box input{width:90%;padding:8px;border:1px solid #111;border-radius:6px;font-size:12px;text-align:center}
.nego-note{font-size:12px;text-align:center;opacity:.85;margin-top:6px}






/* ==========================================================
   DYNAMIC LAYOUT HELPERS
   ========================================================== */

/* CONDITION HELPERS */
/* ==========================================================
   Per-condition certificate sizing (stage1 + stage5)
   Mirrors agreement1/2/3.php references: the reward image and
   spacing adapt to how many conditions (1/2/3) are listed so
   the certificate stays balanced. Widths are % of the text
   column so they scale across every breakpoint.
   ========================================================== */
.conds-1 .reward-laptop,
.conds-1 .stage5-reward-laptop{width:75%}
.conds-2 .reward-laptop,
.conds-2 .stage5-reward-laptop{width:73%}
.conds-3 .reward-laptop,
.conds-3 .stage5-reward-laptop{width:50%}

.conds-1 .reward-section,
.conds-1 .stage5-reward-section{margin-top:21px}
.conds-2 .reward-section,
.conds-2 .stage5-reward-section,
.conds-3 .reward-section,
.conds-3 .stage5-reward-section{margin-top:12px}

.conds-1 .line3,
.conds-1 .stage5-line3{padding-top:9px}



/* --- agreement1.php (1 condition) --- */
.agree1-line1{font-size:10px;margin-bottom:12px;line-height:18px;font-family:'Space Mono', monospace;}
.agree1-line2{font-size:10px;margin-bottom:12px;line-height:1.5;font-family:'Space Mono', monospace;}
.agree1-condition-list{margin:0 0 14px 0;padding-left:40px;font-size:10px;line-height:2.3;font-family:'Space Mono', monospace;}
.agree1-condition-list li{margin-bottom:0px;font-weight:700;font-family:'Space Mono', monospace;}
.agree1-line3{padding-top:3px;font-size:10px;line-height:1.3;font-family:'Space Mono', monospace;}
.agree1-blank{color:#000000;border-bottom:1px solid #999;padding:0 3px;font-weight:700;font-size:10px;font-family:'Space Mono', monospace;}
.agree1-reward-section{position:relative;margin-top:21px;text-align:center;}
.agree1-reward-laptop{width:185px;display:block;margin:0 auto;}
.agree1-reward-badge{position:absolute;top:-10px;right:25px;width:75px;}
.agree1-signature-row{margin-top:0px;display:flex;justify-content:space-between;gap:120px;}
.agree1-signature-box{flex:1;text-align:center;}
.agree1-sign-name{font-size:18px;margin-bottom:3px;font-family:'Priestacy';height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agree1-sign-line{border-bottom:1px solid #666;margin-bottom:4px;}
.agree1-sign-label{font-size:7px;letter-spacing:0.5px;font-family:'Space Mono', monospace;}



/* --- agreement2.php (2 conditions) --- */
.agree2-line1{font-size:10px;margin-bottom:6px;line-height:18px;font-family:'Space Mono', monospace;color:#000000;}
.agree2-line2{font-size:10px;margin-bottom:6px;line-height:1.5;font-family:'Space Mono', monospace;}
.agree2-condition-list{margin:0 0 7px 0;padding-left:40px;font-size:10px;line-height:2;font-family:'Space Mono', monospace;}
.agree2-condition-list li{margin-bottom:8px;font-weight:700;line-height:1.8;font-family:'Space Mono', monospace;}
.agree2-line3{font-size:10px;line-height:1.3;font-family:'Space Mono', monospace;}
.agree2-blank{color:#000000;border-bottom:1px solid #999;padding:0 3px;font-weight:900;font-size:10px;font-family:'Space Mono', monospace;}
.agree2-reward-section{position:relative;margin-top:4px;text-align:center;}
.agree2-reward-laptop{width:168px;display:block;margin:0 auto;}
.agree2-reward-badge{position:absolute;top:-10px;right:25px;width:75px;}
.agree2-signature-row{margin-top:20px;display:flex;justify-content:space-between;gap:120px;}
.agree2-signature-box{flex:1;text-align:center;}
.agree2-sign-name{font-size:18px;margin-bottom:3px;font-family:'Priestacy';height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agree2-sign-line{border-bottom:1px solid #666;margin-bottom:4px;}
.agree2-sign-label{font-size:7px;letter-spacing:0.5px;font-family:'Space Mono', monospace;}



/* --- agreement3.php (3 conditions) --- */
.agree3-line1{font-size:10px;line-height:18px;font-family:'Space Mono', monospace;}
.agree3-line2{font-size:10px;line-height:2;font-family:'Space Mono', monospace;}
.agree3-condition-list{margin:0 0 7px 0;padding-left:40px;font-size:10px;line-height:2.1;font-family:'Space Mono', monospace;}
.agree3-condition-list li{font-weight:700;font-family:'Space Mono', monospace;}
.agree3-line3{font-size:10px;line-height:1.3;font-family:'Space Mono', monospace;}
.agree3-blank{color:#000000;border-bottom:1px solid #999;padding:0 3px;font-weight:700;font-size:10px;font-family:'Space Mono', monospace;}
.agree3-reward-section{position:relative;margin-top:3px;text-align:center;}
.agree3-reward-laptop{width:143px;display:block;margin:0 auto;}
.agree3-reward-badge{position:absolute;top:-10px;right:25px;width:75px;}
.agree3-signature-row{margin-top:0px;display:flex;justify-content:space-between;gap:120px;}
.agree3-signature-box{flex:1;text-align:center;}
.agree3-sign-name{font-size:18px;margin-bottom:3px;font-family:'Priestacy';height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agree3-sign-line{border-bottom:1px solid #666;margin-bottom:4px;}
.agree3-sign-label{font-size:7px;letter-spacing:0.5px;font-family:'Space Mono', monospace;}

.redeem-link {
    margin-top: 12px;
    text-align: center;
}

.redeem-link a {
    display: inline-block;
    color: #2874f0;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}


/* Large Desktop */
@media (max-width:1366px){
    
    .role-logo{
        width:260px;
    }

    .selection-container{
        gap:60px;
    }
    

    
}


/* Tablet / large phone (481-768) + baseline stacking for all narrow widths.
   Placed before the <=480 block so that block's fine typography still wins;
   this only governs layout direction + overflow so the agreement certificate
   and its action buttons never sit side-by-side wider than the screen. */
@media (max-width:768px){

    /* Stack the certificate above its actions instead of beside it. */
    .stage1-container,
    .stage5-container{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    /* The Stage 1 / Stage 5 action buttons read top-to-bottom on narrow screens. */
    .agreement-actions,
    .stage5-actions{
        flex-direction:column;
        align-items:center;
    }

    /* Keep every stage within the viewport — no horizontal scroll / clipped cards. */
    .stage1,
    .stage2,
    .stage3,
    .stage4,
    .stage5,
    .stage6{
        overflow-x:hidden;
        overflow-y:auto;
        padding:16px 0;
    }

    /* Certificate previews never exceed the screen width. Pin to the desktop
       350px geometry until the viewport is too narrow to hold it, so the
       fixed-px certificate text keeps the same fit it has on desktop and never
       clips on the right edge in the 481-768 band. */
    .agreement-preview,
    .stage5-preview{
        width:350px;
        max-width:92vw;
    }
}

/* Small Mobile (iPhone SE, older iPhones) */
@media (max-width:480px){
    
    .global-disclaimer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 4px 8px;
        /*background: rgba(255,255,255,0.95);*/
        color: #FFF;
        font-size: 6px;
        line-height: 1.2;
        text-align: center;
        z-index: 9999;
        box-sizing: border-box;
    }

    .slide1{
        background:url('images/background-mobile-first.webp')
                   center center / cover no-repeat;
    }
    
    .stage1,
    .stage2,
    .stage3,
    .stage4,
    .stage5,
    .stage6{
        background:url('images/mobile_site_plain_bg.webp')
                   center center / cover no-repeat;
    }
    
    .slide2,
    .slide3,
    .slide4,
    .slide5{
        background:url('images/mobile_site_bg.webp')
                   center center / cover no-repeat;
    }
    
    .selection-container{
        flex-direction:column;
        gap:40px;

        width:100%;
        height:100dvh;

        justify-content:center;
        align-items:center;

        padding:0 20px;
    }

    .role-logo{
        width:180px;      /* Adjust as needed */
        max-width:40vw;
        height:auto;
        display:block;
    }
    
    .agreement-wrapper,
    .stage2-revise-wrap,
    .stage3-paper-wrap,
    .stage4-paper-wrap{
        width:320px;
        max-width:92vw;
    }

    .agreement-heading{
        top:175px;
        font-size:14px;
    }

    .agreement-subtitle{
        top:195px;
        font-size:9px;
        width:80%;
    }

    .agreement-dropdown{
        top:225px;
        width:220px;
    }

    .dropdown-header{
        font-size:14px;
    }

    .dropdown-content{
        height:169px;
        font-size:11px;
        padding:8px;
    }

    
    
    .gadget-wrapper{
        width:331px;
        max-width:90vw;
    }

    .paper-front{
        width:100%;
        height:auto;
    }

    .gadget-content{
        top:205px;
        padding-left:45px;
    }

    .gadget-item{
        min-height:80px;
    }

    .gadget-item img{
        width:50px;
        height:50px;
    }

    .gadget-head{
        font-size:9px;
    }

    .gadget-title{
        font-size:10px;
    }

    .next-btn-slide3{
        width:70px;
        height:25px;
        font-size:10px;
        bottom:-15px;
        left:58%;   /* <-- causing shift */
    }
    
    .final-wrapper{
        width:300px;
        max-width:90vw;
    }

    .final-content{
        top:25px;
        left:0;
    }

    .agreement-points{
        top:170px;
        left:38px;
        width:131px;
        font-size:8px;
        line-height:1.3;
    }

    .selected-gadget{
        top:185px;
        right:28px;
    }

    .selected-gadget img{
        width:70px;
    }

    .name-fields{
        top:282px;
        left:69px;
        width:171px;
        gap:12px;
    }

    .name-fields input{
        width:80px;
        font-size:16px;
    }

    .name-fields input::placeholder{
        font-size:7px;
    }
    
    .consent-checkbox {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: -74px !important; /* adjust as needed */
        width: 85% !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
        margin: 0;
    }

    .consent-checkbox input[type="checkbox"] {
        width: 8px;
        height: 8px;
    }

    /* SAVE button perfectly centered */
    .save-btn{
        top:381px;
        left:50%;
        transform:translateX(-50%);
        width:60px;
        height:25px;
        font-size:10px;
        border-radius:6px;
    }

    .share-text{
        top:375px;
        font-size:8px;
        left:60%;
        width: 206px;
        display: flex;
    }
    
    .discount-card{
        width:280px;
        max-width:90vw;

        padding:18px 15px 45px;
        border-radius:16px;
    }

    .offer-text{
        font-size:12px;
        line-height:1.3;
    }

    .offer-text span{
        font-size:16px;
    }

    .coupon-box{
        width:200px;
        height:34px;

        font-size:18px;
        margin:12px auto 6px;
    }

    .copy-text{
        font-size:10px;
    }

    .description{
        margin-top:15px;

        font-size:11px;
        line-height:1.5;
    }

    .continue-btn{
        bottom:-16px;

        padding:4px 20px;
        font-size:18px;
    }
    
    .stage1-container{
    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:51px;
    min-height:100dvh;
    }

    .agreement-preview{
        width:290px;
        max-width:90vw;
        transform:none !important;
    }

    .agreement-img{
        width:100%;
        height:auto;
    }

    .agreement-text{
        top: 36%;
        left: 8%;
        right: 10%;
    }

    .agreement-actions{
        margin-top:0;
        gap:8px;
    }

    .negotiate-btn,
    .accept-btn{
        width:130px;
        height:36px;
        font-size:18px;
    }
    
    .stage1-accept-btn{
        width:130px;
        height:45px;
        font-size:18px;
    }





    
    
    .agree1-condition-list{
        font-size:8px;
        line-height:1.5;
        padding-left:20px;
    }

    .agree1-sign-name,
    .agree2-sign-name{
        font-size:10px;
    }
    
    .stage2-revise-wrap,
    .stage3-paper-wrap,
    .stage4-paper-wrap{
        transform:scale(.85);
        transform-origin:center center;
    }
    
    
    /* Start Agreement 1 CSS  */
    
    .agree1-line1,
    .agree1-line2,
    .agree1-line3{
        font-size:8px !IMPORTANT;
        line-height:2;
        white-space:nowrap;
    }
    
    .agree1-blank{
        font-size:8px;
        font-weight:700;
        padding:0 1px;
    }
    
    .agree1-line1{
        margin-bottom:2px !important;
    }

    .agree1-line2{
        margin-bottom:0 !important;
    }

    .agree1-line3{
        margin-top:3px !important;
        padding-top: 3px;
    }
    
    .agree1-condition-list{
        margin-top: 8px !important;
        margin-bottom:0px !important;
        font-size:7px !important;
        line-height:2.7 !important;
    }
    
    .agree1-condition-list li{
        margin-bottom:0 !important;
    }
    
    
     /* End Agreement 1 CSS  */
     
    
    
    /* Start Agreement 2 CSS  */
    
    .agree2-line1,
    .agree2-line2,
    .agree2-line3{
        font-size:8px;
        line-height:1.3;
    }
    

    
    .agree2-condition-list{
        margin-top: 15px !important;
        margin-bottom:10px !important;
        font-size:8px !important;
        line-height:2 !important;
    }
    
    .agree2-condition-list li{
        margin-bottom:0 !important;
        font-size:8px !important;
    }
    
    .agree2-blank{
        font-size:8px;
        font-weight:700;
        padding:0 1px;
    }
    
    .agree1-signature-row{
        margin-top:5px;
        gap:70px;
    }
    
    .agree2-reward-laptop{
        width:140px;
    }
    
    
    .agree2-signature-row {
        margin-top: 10px !important; /* Adjust as needed */
        gap: 77px;
    }
    
    /* End Agreement 2 CSS  */ 
     
     
    
    /* Start Agreement 3 CSS  */
    
    .agree3-line1,
    .agree3-line2,
    .agree3-line3{
        font-size: 8px !important;
        line-height: 1.25;
        white-space: nowrap;
        margin-bottom: 5px;
    }
        
    .agree3-reward-section{
        position: relative;
        margin-top: 12px;
        text-align: center;
    }
    
    .agree3-blank{
        font-size: 8px;
        line-height:1.3;
        font-family:'Space Mono', monospace;
    }
    
    .agree3-reward-laptop{
        width: min(34vw, 180px);
    }
    
    .agree3-sign-name{
        font-size: clamp(8px, 2vw, 10px);
    }
    
    .agree3-signature-row{
        margin-top: 4px;
        gap: min(26vw, 83px);
    }
    
    .agree3-condition-list{
        margin:0 0 8px 0;
        padding-left:37px;
        font-size:8px;
        line-height:2;
        font-family:'Space Mono', monospace;}
        
    .agree3-condition-list li{
        margin:0 0 8px 0;
        font-size:8px;
        line-height:1.5;
        font-family:'Space Mono', monospace;}
        
        
         /* End Agreement 3 CSS  */
    

    
    .stage1 .agreement-actions{
        display:flex;
        flex-direction:column-reverse;
        gap:8px;
    }
    
    .stage2-revise-wrap{
        width:320px;
        max-width:92vw;
        transform:none;
    }

    .stage2-content{
        top:175px;
        left:63px;
        right:65px;
    }

    .stage2-revise-note{
        font-size:10px;
        margin-bottom:4px;
    }

    .stage2-revise-heading{
        font-size:11px;
        padding:2px 0;
        margin-bottom:4px;
    }

    .stage2-rules-scroll{
        height:140px;
        padding:8px;
        font-size:10px;
        line-height:1.4;
    }

    .stage2-rules-scroll ol{
        padding-left:18px;
    }

    .condition-item{
        padding:4px 6px;
        margin-bottom:3px;
    }

    .stage2-custom-input{
        font-size:10px;
        height:24px;
    }
    
    .stage2-custom-input::placeholder,
    .stage2-rule-text input::placeholder{
        font-size:8px;
        letter-spacing:0;
    }

    .stage2-next-btn{
        width:60px;
        height:24px;
        font-size:11px;
        margin:6px auto;
    }
    
      .stage3-paper-wrap{
        width:300px;
        max-width:90vw;
        transform:none;
    }

    .stage3-paper-content{
        top:-5px;
        left:30px;
        right:27px;
        padding:175px 20px 15px;
    }

    .stage3-title{
        font-size:10px;
        margin-bottom:13px;
        padding-left: 44px;
    }

    .stage3-grid{
        margin-top:0px;
        width:100%;
        margin:0 auto;
    }

    .stage3-item{
        height:64px;
        padding:2px;
        overflow:hidden;
    }

    .stage3-item-head{
        font-size:6px;
        line-height:1.1;
        min-height:18px;
        margin-bottom:2px;
    }

    .stage3-item-img{
        width:38px;
        height:38px;
    }

    .stage3-item:nth-child(3),
    .stage3-item:nth-child(4){
        margin-top:-8px;
    }

    .stage3-next-btn{
        width:45px;
        height:18px;
        font-size:8px;
        margin-top:12px;
        left:-1%;
    }
    
    .stage3-item:nth-child(3),
    .stage3-item:nth-child(4){
        margin-top:2px;
    }

    .stage3-item:nth-child(3) img,
    .stage3-item:nth-child(4) img{
        width:40px;
        height:40px;
    }
    
      .stage4-paper-wrap{
        width:387px;
        max-width:99vw;
        position:relative;
    }

    .stage4-content{
        position:absolute;
        inset:0;

        padding:214px 67px 19px;

        display:flex;
        flex-direction:column;
        align-items:center;
    }
    
    .stage4-gadget {
        width: 100px;
        padding-top: 30px;
    }
    
    .stage4-gadget img{
        width:79px;
        height:auto;
        margin-left: 15px;
    }

    .stage4-note{
        font-size:8px;
        text-align:center;
        line-height:1.2;
        margin-bottom:5px;
    }

    .stage4-divider{
        width:100%;
        margin:4px 0;
    }

    .stage4-summary{
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:10px;
    }

    .stage4-rules{
        flex:1;
        font-size:6px;
        line-height:1.2;
    }

    .stage4-rules ol{
        margin:0;
        padding-left:14px;
    }

    .stage4-save-btn{
        width:60px;
        height:22px;
        font-size:10px;
        margin:39px auto 0;
        display:block;
    }

    
    .stage4-share-btn {
        font-size:10px;
        margin-top: 12px;
        margin-bottom: 0;
    }
    
    .stage5-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
    }

    .stage5-preview{
        width:280px;
        max-width:90vw;
    }

    .stage5-agreement-img{
        width:100%;
        height:auto;
    }

    .stage5-actions{
        display:flex;
        flex-direction:column;
        align-items:center;
        margin:0;
    }

    .stage5-action-row{
        display:flex;
        gap:20px;
        justify-content:center;
        margin-bottom:9px;
    }

    .stage5-icon-btn{
        width:54px;
        height:54px;
    }

    .stage5-label{
        font-size:10px;
        margin-top: 0px;
    }

    .stage5-proceed-btn{
        margin-top:2px;
        width:120px;
        height:38px;
        font-size:16px;
    }
    
     .stage6-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:15px;
    }

    .stage6-ticket-wrap{
        width:260px;
        max-width:88vw;
        position:relative;
    }

    .stage6-ticket-img{
        width:100%;
        height:auto;
    }

    /* Move code box upward */
    
    .stage6-code-box{
        top:134px; /* adjust */
        width:140px;
        height:36px;

        font-size:10px;
        border-radius:6px;
    }
    
    .stage6-code-box span{
        font-size:18px;
        padding: 0 10px;
    }

    .stage6-copy-text{
        top:180px; /* adjust */
        font-size:8px;
        line-height:1.2;
    }

    .stage6-copy-text i{
        font-size:10px;
    }

    .stage6-actions{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .stage6-redeem-btn{
        width:180px;
        height:40px;
        font-size:12px;
    }

    .stage6-instruction-btn{
        width:180px;
        height:45px;
        font-size:11px;
    }

    .stage6-video-wrap{
        width:280px;
        max-width:90vw;
    }

    .stage6-video-wrap iframe{
        width:100%;
        height:160px;
    }
    
    .stage6-discount{
        top:201px;
        font-size:8px;
        width:138px; 
    }
    
    .agree1-reward-laptop{
        width:157px;
    }
    
        
    #stage5 .stage5-agreement-text{
        top: 35%;
        left: 6%;
        right: 6%;
    }
    
        .description a {
        padding: 8px 16px;
        font-size: 11px;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
        border-radius: 20px;
    }
}

@media (max-width:380px){

    .agreement-preview{
        width:270px;
    }

    .agreement-actions{
        margin-top:-5px;
    }

    .negotiate-btn,
    .accept-btn{
        width:130px;
        height:45px;
        font-size:18px;
    }
    
    .stage1-accept-btn{
        width:130px;
        height:45px;
        font-size:18px;
    }

    .agree3-reward-laptop{
        width: 117px;
    }

    .agree3-signature-row{
        gap: 40px;
    }

    .agree3-line1,
    .agree3-line2,
    .agree3-line3{
        font-size: 8px !important;
    }

    .agree3-sign-name{
        font-size: 8px;
    }
    
    .agree3-reward-section{
        transform: scale(0.92);
        transform-origin: top center;
    }
    
        .stage3-card {
        transform: scale(0.90);
        transform-origin: top center;
    }

    .stage3-actions {
        margin-top: -10px;
    }

    .stage3-accept-btn,
    .stage3-negotiate-btn {
        height: 32px;
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .agree2-reward-laptop{
        width:100px;
        
    }
    
    .agree2-line1,
    .agree2-line2,
    .agree2-line3,
    .agree2-blank,
    .agree2-condition-list{
        font-size: 7px !important;
    }
}