/* --- SCOPED PARENT WRAPPER --- */
#ssm-simple-steps{    /* Color Palette */
--step-bg:#f8fafc;--step-card-bg:#ffffff;--step-primary:#0f305c;--step-accent:#3780d4;--step-gold:#ffffff;--step-text:#334155;--step-border:#e2e8f0;background-color:var(--step-bg);font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--step-text);line-height:1.6;padding:5rem 0;width:100%;box-sizing:border-box;}
#ssm-simple-steps *,
#ssm-simple-steps *::before,
#ssm-simple-steps *::after{box-sizing:inherit;}
/* Container */
#ssm-simple-steps .container{max-width:1200px;margin:0 auto;padding:0 24px;}
/* --- HEADINGS --- */
#ssm-simple-steps .intro-block h2{color:var(--step-primary);font-size:2.1rem;margin-bottom:1.5rem;line-height:1.2;}
#ssm-simple-steps h3{color:var(--step-primary);font-size:1rem;margin-top:0;margin-bottom:0.5rem;}
#ssm-simple-steps .secondary-header{font-size:1rem;margin-bottom:2rem;margin-top:50px;}
#ssm-simple-steps .intro-block{margin-bottom:3rem;padding-bottom:2rem;}
#ssm-simple-steps .highlight-text{font-weight:600;color:var(--step-primary);font-size:1.4rem;padding-bottom:10px;display:flex;margin:0;}
#ssm-simple-steps .highlight-text-guide{font-weight:500;color:var(--step-primary);font-size:1.3rem;padding-bottom:34px;display:flex;margin:0;}
/* --- TIMELINE STEPS --- */
#ssm-simple-steps .timeline-item{display:flex;gap:24px;margin-bottom:2rem;position:relative;align-items:center;}
#ssm-simple-steps .timeline-item:last-child{align-items:flex-start;}
#ssm-simple-steps .timeline-item:last-child .step-number{margin-top:35px;}
#ssm-simple-steps .timeline-item:nth-child(2) .step-number{margin-bottom:35px;}
/* The Vertical Line */
#ssm-simple-steps .timeline-item::before{content: '';position:absolute;left:20px;top:50%;bottom:-100px;width:2px;background-color:#cfd6df;z-index:0;}
#ssm-simple-steps .timeline-item:last-child::before{display:none!important;}
/* The Number Circle */
#ssm-simple-steps .step-number{width:42px;height:42px;background-color:var(--step-primary);color:var(--step-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;position:relative;z-index:1;}
/* The Content Card */
#ssm-simple-steps .step-content{background-color:var(--step-card-bg);border:1px solid var(--step-border);border-radius:12px;padding:2rem;flex-grow:1;box-shadow:0 2px 4px rgba(0,0,0,0.03);    /* Ensure content doesn't overflow card */min-width:0;}
#ssm-simple-steps .step-content p{margin:0;font-size:1rem;}
#ssm-simple-steps .step-content p strong{font-weight:600;}
/* --- PROMPT BOX STYLES --- */
#ssm-simple-steps .prompt-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem;}
#ssm-simple-steps .prompt-box{background-color:#f1f5f9;border-left:4px solid var(--step-accent);padding:1rem 1.5rem 1rem 1rem;border-radius:0 4px 4px 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative;min-height:75px;font-style:italic;}
/* The Text inside the box */
#ssm-simple-steps .prompt-text{padding-right:150px;font-size:0.9rem;color:#1e293b;line-height:1.5;width:100%;position:relative;word-wrap:break-word;    /* Prevents long words breaking layout */}
/* The Copy Button */
#ssm-simple-steps .copy-btn{background-color:white;border:1px solid #b7c2d1;color:var(--step-primary);font-size:0.75rem;font-weight:500;text-transform:revert;padding:6px 12px;border-radius:4px;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;min-width:81px;text-align:center;right:10px;top:11px;display:none;}
#ssm-simple-steps .copy-btn:hover{background-color:var(--step-primary);color:white;border-color:var(--step-primary);}
#ssm-simple-steps .copy-btn.copied{background-color:#ffffff;border:1px solid #b7c2d1;color:var(--step-primary);}
/* --- OUTRO --- */
#ssm-simple-steps .outro-text{margin-top:3rem;display:flex;width:100%;justify-content:center;display:block;max-width:100%;}
.note-text{font-size:1.1rem;color:#5f5f5f;margin-bottom:1.5rem;text-align:center;font-weight:500;}
/* ----------------------------------------------------------------- */
/* --- RESPONSIVE MEDIA QUERIES (New Addition) --- */
/* ----------------------------------------------------------------- */
/* Tablet Portrait & Small Desktop (Max width 1024px) */
@media screen and (max-width:1024px){
#ssm-simple-steps{padding:3rem 0;        /* Reduce vertical white space */}
#ssm-simple-steps .container{padding:0 32px;        /* Ensure content doesn't hit edges on iPad */}
#ssm-simple-steps .step-content{padding:1.5rem;        /* Slightly tighter card padding */}
}
/* Mobile & Small Tablets (Max width 768px) */
@media screen and (max-width:768px){
/* Adjust Container */
#ssm-simple-steps{padding:2rem 0;}
#ssm-simple-steps .container{padding:0 20px;}
/* Font Sizes */
#ssm-simple-steps .intro-block h2{font-size:1.75rem;}
#ssm-simple-steps .highlight-text,
#ssm-simple-steps .highlight-text-guide{font-size:1.2rem;padding-bottom:15px;}
/* Timeline Adjustments */
#ssm-simple-steps .timeline-item{gap:16px;        /* Bring circle closer to card */align-items:flex-start;        /* Align circle to top of card on mobile */}
/* Fix circle alignment when text wraps */
#ssm-simple-steps .step-number{margin-top:0;width:36px;        /* Slightly smaller circle */height:36px;font-size:0.9rem;}
/* Adjust the vertical line position for the smaller circle */
#ssm-simple-steps .timeline-item::before{left:17px;        /* Center of 36px circle */top:36px;        /* Start line below circle */bottom:-50px;        /* Adjust line length */}
#ssm-simple-steps .timeline-item:nth-child(2) .step-number{margin-bottom:0;        /* Remove specific desktop quirks */}
#ssm-simple-steps .timeline-item:last-child .step-number{margin-top:0;}
/* Card Content */
#ssm-simple-steps .step-content{padding:1.25rem;}
/* IMPORTANT: Fix Prompt Box Text Crushing */
#ssm-simple-steps .prompt-box{flex-direction:column;        /* Stack button under text */align-items:flex-start;padding:1rem;}
#ssm-simple-steps .prompt-text{padding-right:0;        /* Remove the 150px gap so text fills width */margin-bottom:12px;}
#ssm-simple-steps .copy-btn{width:100%;        /* Make button full width or easier to tap */display:none;        /* Ensure visibility if logic allows */margin-top:5px;}
}