/* =========================
   CSS Variables
========================= */
:root {--cgt-green:#00796B;--cgt-purple:#5C6BC0;--cgt-light:#F3F6F9;--text-dark:#2E2E2E;--text-light:#6B6B6B;--border-radius:12px;--font-main:'Inter',sans-serif;}
/* =========================
   Global Reset & Typography
========================= */
*,*::before,*::after{box-sizing:border-box;}
body,html{margin:0;padding:0;height:100%;font-family:'Roboto',Arial,sans-serif;scroll-behavior:smooth;background-color:#f9fafb;color:#222;user-select:none;}
/* =========================
   Header & Navigation
========================= */
header{position:fixed;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,#185a9d,#43cea2);box-shadow:0 1px 3px rgba(0,0,0,0.1);z-index:1000;display:flex;align-items:center;}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;height:60px;}
nav{display:flex;gap:20px;justify-content:flex-end;align-items:center;}
nav a{color:white;text-decoration:none;font-weight:500;font-size:20px;cursor:pointer;padding:4px 8px 4px 10px;border-radius:4px;transition:background-color 0.25s ease;position:relative;}
nav a:hover{background-color:#333;}
nav a i{margin-right:6px;font-size:1em;vertical-align:middle;}
/* Tooltip styles */
nav a::after{content:attr(title);position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:white;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;}
nav a:hover::after{opacity:1;}
.nav-right{display:flex;align-items:center;gap:20px;}
/* =========================
   Containers & Layouts
========================= */
.container{max-width:1200px;width:100%;margin:0 auto;padding:0 2rem;}
section{min-height:100vh;padding-top:60px;box-sizing:border-box;transition:background-color 0.3s ease;color:#222;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;}
/* =========================
   Pages
========================= */
#homePage{background-color:#f9fafb;color:#222;padding-top:100px;}
#homePage .container{display:flex;justify-content:center;align-items:center;gap:2rem;}
#homePage .hero-image{display:flex;justify-content:center;align-items:center;}
#homePage .hero-image img{max-width:100%;height:auto;user-select:none;}
#homePage .hero-text{flex:2 1 600px;}
#homePage .hero-text h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;margin-bottom:20px;line-height:1.1;color:#222;}
#homePage .hero-text p{font-size:18px;line-height:1.6;color:#444;}
#homePage .signup-btn{display:inline-block;background-color:var(--cgt-green);color:white;font-size:22px;font-weight:700;padding:15px 0;border-radius:28px;text-align:center;width:100%;cursor:pointer;transition:background 0.3s;box-shadow:0 6px 12px rgba(76,175,80,0.4);}
#homePage .signup-btn:hover{background-color:#004d40;}
#homePage .disclaimer{font-size:12px;line-height:1.5;color:#555;max-width:1200px;background:white;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1);margin-bottom:1.5rem;}
#homePage .disclaimer h3{margin-top:0;margin-bottom:0.8rem;font-size:14px;font-weight:600;color:#333;user-select:none;}
#homePage .disclaimer p{margin-bottom:0.8rem;}
#homePage .disclaimer b{color:#222;}
.column.right{display:flex;flex-direction:column;align-items:center;}
.option-group{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:1em;gap:0em;}
#appVersion{display:block;width:100%;max-width:400px;text-align:center;align-self:center;}
#downloadBtn{display:inline-block;text-align:center;margin-top:1em;width:100%;max-width:400px;box-sizing:border-box;padding:0.8em;border:none;border-radius:24px;background-color:#00796B;color:white;font-size:1em;cursor:pointer;align-self:center;}
#downloadBtn:hover{background-color:#00665a;}
#reportoptions{display:none;margin-top:2em;width:100%;max-width:600px;text-align:center;}
section{min-height:100vh;padding-top:60px;box-sizing:border-box;transition:background-color 0.3s ease;color:#222;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;}
#loadPage, #toolsPage{color:white;display:flex;justify-content:center;align-items:center;padding:40px 0;min-height:100vh;}
.loadPage-box{background:white;color:black;box-shadow:0 4px 20px rgba(0,0,0,0.3);border-radius:10px;padding:30px;min-height:60vh;box-sizing:border-box;}
.loadPage-box .column{flex:1;}
#toolsPage{scroll-margin-top: 60px;}
#loadPage h2,#optionsPage h2,#faqPage h2,#toolsPage h2{font-size:32px;margin-bottom:40px;text-align:center;font-weight:700;user-select:none;color:#000;}
.two-column{display:flex;gap:2rem;flex-wrap:wrap;}
.two-column > *{flex:1 1 400px;min-width:300px;}
.bounce-icon{animation:bounce 2s infinite;display:inline-block;font-size:1.4em;vertical-align:middle;color:#1abc9c;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.upload{margin-top:0em;text-align:center;display:flex;flex-direction:column;align-items:center;}
#fileName{margin-top:1em;font-weight:500;display:none;font-size:0.8em;}
#summary{width:100%;max-width:400px;text-align:left;}
#donationMicrocopy{display:block;margin-top:8px;margin-bottom:5px;color:#555;text-align:center;}
#viewPdfBtn{width:100%;max-width:600px;padding:0.75em 2.5em;font-size:1em;font-weight:600;background-color:var(--cgt-green);color:white;border:none;border-radius:24px;cursor:pointer;margin:-0.5em auto 1em auto;box-shadow:0 4px 14px rgba(0,0,0,0.1);display:block;transition:opacity 0.8s ease;}
.hidden-btn{opacity:0;pointer-events:none;}
.show-btn{opacity:1;pointer-events:auto;}
#viewPdfBtn:hover{background-color:#004d40;transform:translateY(-2px);}
#viewPdfBtn:active{transform:translateY(1px);}
#report-actions{height:40px;min-height:40px;display:block;text-align:center;margin-top:16px;}
#section4,#optionsPage{display:none;width:100%;align-items:center;flex-direction:column;min-height:calc(100vh - 60px);}
.donation-card,donation-card *{text-decoration:none;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:transform 0.3s ease,box-shadow 0.3s ease;text-align:center;color:#333;font-family:'Roboto',sans-serif;display:flex;flex-direction:column;position:relative;max-width:320px;width:100%;}
.donation-card:hover{transform:translateY(-6px);box-shadow:0 6px 18px rgba(0,0,0,0.15);}
.donation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;justify-items:center;max-width:1000px;margin:0 auto;}
.card-top{display:flex;justify-content:center;align-items:center;height:120px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;}
.icon{width:75px;height:75px;display:flex;justify-content:center;align-items:center;font-size:5rem;}
.title-price-wrapper{display:flex;flex-direction:column;margin-top:16px;}
.tier-title{font-size:1.5rem;font-weight:600;margin-top:-5px;}
.tier-price{font-size:2.5em;font-weight:700;color:#00796B;margin-top:-20px;}
.tier-description{background:#f9f9f9;border-radius:10px;margin:20px auto 20px;font-size:15px;line-height:1.5;display:flex;align-items:center;justify-content:center;text-align:center;padding:5px 10px;max-width:90%;box-shadow:inset 0 2px 6px rgba(0,0,0,0.15),inset 0 -2px 4px rgba(255,255,255,0.6);}
.gradient-green{background:linear-gradient(to top right,transparent,#00A482),linear-gradient(to bottom left,transparent,rgba(0,0,0,0.8));}
.popular{border:2px solid #00796B;}
.popular-banner{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background-color:#00796B;color:white;padding:6px 14px;font-size:14px;font-weight:600;text-transform:uppercase;border-radius:6px;z-index:1;}
.report-title{font-weight:bold;color:black;}

.burger,.burger-menu button{all:unset;display:flex;align-items:center;cursor:pointer;}
.burger .tooltip,.support-btn .tooltip{font-size:12px;font-weight:500;font-family:inherit;padding:4px 8px;background:rgba(0,0,0,0.8);color:white;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;position:absolute;left:50%;transform:translateX(-50%);transition:opacity 0.2s ease;}
.burger .tooltip{line-height:1.2;transition:opacity 0.2s ease;bottom:-24px;transform:translateX(-50%);}
.support-btn .tooltip{line-height:1;font-family:inherit;bottom:-28px;}
.burger{position:relative;justify-content:center;width:40px;height:40px;font-size:1.5rem;color:white;background:transparent !important;border:none;padding:0;margin:0;}
.burger i{font-size:1.25rem;line-height:1;display:block;color:white;background:transparent !important;}
.burger:hover{background:#333;}
.burger:focus{outline:none;background:transparent;}
.burger:active{background:transparent;}
.burger-container{position:relative;display:none;}
.burger-overlay{position:fixed;top:60px;left:0;width:100%;height:calc(100% - 60px);background:rgba(0,0,0,0.4);display:none;z-index:999;}
.burger-overlay.active{display:block;}
.burger-menu{position:fixed;top:60px;right:0;width:60%;max-width:360px;height:100%;background:#fff;display:none;flex-direction:column;padding:2rem 1.5rem;z-index:1000;opacity:0;transform:translateX(20px);transition:all 0.3s ease;box-shadow:-2px 0 10px rgba(0,0,0,0.1);}
.burger-menu.active{display:flex;opacity:1;transform:translateX(0);}
.burger-menu button{font-size:1.2rem;color:#333;padding:2rem 1rem;width:90%;border-radius:8px;background:transparent;transition:background 0.2s ease;}
.burger-menu button i{margin-right:12px;font-size:1.3rem;color:#444;}
.burger-menu button:hover{background:rgba(0,0,0,0.05);}
.burger-menu button:hover i{color:#1abc9c;}
.menu-divider{width:90%;height:2px;background-color:#444;margin:1rem auto;border-radius:1px;pointer-events:none;}
@keyframes fadeInMenu{0%{opacity:0;transform:translateY(-10px);}100%{opacity:1;transform:translateY(0);}}
.support-btn{all:unset;display:flex;align-items:center;justify-content:center;gap:0.4rem;font-size:1.25rem;font-weight:500;color:white;background:transparent;cursor:pointer;padding:0.25em 0.6em;border-radius:4px;position:relative;transition:none !important;transform:none !important;box-shadow:none !important;}
.support-btn:hover{background:#333;transform:none !important;box-shadow:none !important;}

#guide{position:relative;width:100%;overflow:hidden;max-width:400px;background-color:#f6f9fc;border-radius:12px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,0.15);margin:15px 0 2px;}
#guide p{font-size:0.8em;margin:15px 0 -15px 0;line-height:1.2;}
.guide-header{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;font-size:75%;line-height:1.2;margin:0 0 16px 0;}
.guide-header i{color:#1abc9c;margin-right:8px;}

.carousel{position:relative;width:100%;max-width:360px;aspect-ratio:2/1;margin:20px auto;overflow:hidden;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.2);border:1px;border-color:black;}
.carousel img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out;}
.carousel img.active{opacity:1;}
.carousel-indicators{position:absolute;bottom:10px;width:100%;text-align:center;}
.carousel-indicators span{display:inline-block;width:12px;height:4px;margin:0 4px;background-color:#ccc;border-radius:2px;cursor:pointer;transition:background-color 0.3s;}
.carousel-indicators span.active{background-color:#1abc9c;}

#faqPage{background-color:#1abc9c;color:white;padding:3rem 0;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;transition:background-color 0.3s ease;}
#faqPage .container{max-width:900px;width:100%;color:white;display:flex;flex-direction:column;gap:16px;margin:auto;}
.faq-category{background-color:#e6f7f3;border:1px solid #00796b;border-radius:12px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:box-shadow 0.3s ease,transform 0.2s ease;}
.faq-category:hover{box-shadow:0 8px 20px rgba(67,206,162,0.3);transform:translateY(-2px);}
.faq-category details{background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin:8px 0;padding:16px 20px;border:1px solid #e2e8f0;cursor:pointer;transition:box-shadow 0.3s ease,border-color 0.3s ease;color:#222;}
.faq-category details:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.faq-category details[open]{border-color:#43cea2;box-shadow:0 6px 16px rgba(67,206,162,0.3);}
.faq-category a{color:inherit;text-decoration:none;}
.faq-category a:hover{color:#43cea2;text-decoration:none;}
.faq-category summary{list-style:none;cursor:pointer;font-weight:600;font-size:20px;outline:none;position:relative;padding-left:36px;user-select:none;color:#222;}
.faq-category summary::-webkit-details-marker{display:none;}
.faq-category summary::before{content:"›";position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(0deg);color:#00796b;font-weight:bold;font-size:26px;line-height:1;transition:transform 0.3s ease;}
.faq-category[open]>summary::before{transform:translateY(-50%) rotate(90deg);}
.faq-category details[open]>summary::before{transform:translateY(-50%) rotate(90deg);color:#00796b;}
.faq-item{position:relative;padding-left:18px;margin-top:10px;margin-bottom:10px;}
.faq-item::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background-color:#4CAF50;border-radius:2px;}
.faq-item p,.faq-item ul,.faq-item ol{margin-left:10px;line-height:1.5;font-size:16px;color:#444;}
.faq-item ul li,.faq-item ol li{margin-bottom:5px;}
.faq-item ol{padding-left:20px;}
.faq-item ul{padding-left:20px;}
.faq-category details>details>.faq-item{padding-left:18px;border-left:3px solid #4CAF50;margin-left:0;}
.upload-card{background:white;color:black;box-shadow:0 2px 6px rgba(0,0,0,0.3);border-radius:10px;padding:20px;width:100%;max-width:420px;margin:0 auto 2em auto;box-sizing:border-box;display:flex;flex-direction:column;gap:1.5em;}

#addPortfolioOptions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px;margin:13px auto 20px;}
#addPortfolioOptions .btn-add-portfolio{width:100%;max-width:400px;padding:8px;font-size:1rem;font-weight:500;background-color:#00796B;color:white;border:none;border-radius:24px;cursor:pointer;margin-top:10px;transition:transform 0.15s ease,background-color 0.15s ease;display:flex;align-items:center;justify-content:center;gap:5px;}
#addPortfolioOptions .btn-add-portfolio:hover{background-color:#005a4d;transform:translateY(-2px);}
#addPortfolioOptions .btn-add-portfolio:active{transform:translateY(0);background-color:#00796B;}
#addPortfolioOptions .btn-add-portfolio:focus{outline:none;transform:translateY(0);}

#portfolio-list-container{display:none;max-height:100px;width:100%;max-width:400px;overflow-y:auto;margin-top:13px;border:1px solid #1abc9c;padding:12px 10px;border-radius:8px;}
#portfolio-list-container h4{margin:0 0 10px 0;font-size:1em;font-color:#1abc9c;}
#portfolio-list{list-style:none;padding:0;margin:0;}
.portfolio-item{display:flex;justify-content:space-between;align-items:center;padding:1px 0;}
.portfolio-item i{margin-right:5px;}
.portfolio-type{font-size:0.8em;color:#888;margin-left:5px;position:relative;top:-1px;}
.remove-portfolio{cursor:pointer;color:red;}
.subaccount{display:inline-block;margin-left:1.5em;color:#555;}

.viewreport-card{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;margin:5px auto;padding:10px 15px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9;cursor:pointer;position:relative;}
.viewreport-left-icon{font-size:30px;color:purple;width:36px;display:inline-block;text-align:center;margin-right:10px;}
.viewreport-text{display:flex;flex-direction:column;justify-content:center;flex:1;}
.viewreport-name{font-weight:bold;font-size:18px;color:#333;text-align:left;}
.viewreport-dots{font-size:10px;display:flex;gap:4px;margin-top:2px;position:relative;}
.viewreport-dots i{width:10px;height:10px;line-height:10px;}
.viewreport-tooltip{display:none;position:absolute;top:-32px;left:58px;background:rgba(0,0,0,0.7);color:white;padding:5px;border-radius:8px;font-size:9px;white-space:nowrap;z-index:10;text-align:left;min-width:230px;}
.viewreport-dots:hover .viewreport-tooltip{display:block;}
.viewreport-right-icon{font-size:30px;color:#00796b;}

#report-container{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;overflow:auto;}
.report-inner{margin:10px 0 0 0;width:100%;display:flex;flex-direction:column;align-items:center;max-height:100%;min-height:calc(100% - 10px);justify-content:center;}
.portfolio-summary input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #00796B;border-radius:4px;cursor:pointer;position:relative;outline:none;}
.portfolio-summary input[type="checkbox"]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;color:#00796B;}
.preflight-instructions{width:100%;max-width:400px;color:#333;font-size:15px;line-height:1.2;margin-top:-30px;}
.preflight-instructions a{color:#00796B;text-decoration:none;}
.preflight-instructions a:hover{text-decoration:underline;}

/* =========================
   Forms & Uploads
========================= */
.drop-zone{width:100%;max-width:400px;border:2px dashed var(--cgt-purple);border-radius:var(--border-radius);padding:1em;background-color:var(--cgt-light);cursor:pointer;text-align:center;position:relative;transition:all 0.3s ease;}
.drop-zone:hover,.drop-zone.dragover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(0,121,107,0.2);background-color:#e8f5e9;border-color:var(--cgt-green);}
.drop-zone input[type="file"]{display:none;}
.drop-zone p:first-child{font-size:1.25em;font-weight:600;display:flex;justify-content:center;align-items:center;gap:8px;}
.drop-zone::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-size:40px;background-repeat:no-repeat;background-position:center 20px;opacity:0.1;pointer-events:none;}
.drop-zone p{margin:1.5em 0 0;font-weight:500;font-size:1em;position:relative;z-index:1;}
progress{width:100%;height:12px;border-radius:20px;overflow:hidden;background:#e0e0e0;box-shadow:inset 6px 6px 10px #bebebe,inset -6px -6px 10px #ffffff;appearance:none;border:none;margin-top:1.5em;}
progress::-webkit-progress-bar{background:#e0e0e0;border-radius:20px;}
progress::-webkit-progress-value{background:var(--cgt-green);border-radius:20px;transition:width 0.3s ease;}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;color:#333;padding:0.5em 2.5em 0.5em 1em;font-size:1em;border-radius:12px;margin-top:0em;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg fill="%236b6b6b" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 1em center;background-size:1em;transition:border-color 0.3s ease;}
select:hover,select:focus{border-color:var(--cgt-green);outline:none;}
button{padding:0.75em 8.5em;font-size:1em;font-weight:600;background-color:var(--cgt-green);color:white;border:none;border-radius:24px;cursor:pointer;margin-top:1.5em;box-shadow:0 4px 14px rgba(0,0,0,0.1);transition:background-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;}
button:hover,button:focus{background-color:#004d40;transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,77,64,0.3);outline:none;}
/* =========================
   Cards & Reports
========================= */
.report-card,.portfolio-card,.file-card,.note-box{display:flex;flex-direction:column;background:white;border-radius:var(--border-radius);padding:12px 16px;box-shadow:0 2px 6px rgba(0,0,0,0.3);max-width:400px;width:100%;margin:0 auto 1em auto;box-sizing:border-box;}
.report-card{flex-direction:row;align-items:center;justify-content:space-between;margin:0 auto 1em;}
.report-card i,.report-card .switch-label{display:flex;align-items:center;}
.note-box{padding:0 16px;margin-bottom:30px;box-shadow:0 2px 8px rgba(0,0,0,0.3);max-width:1000px;text-align:center;overflow:visible;min-height:200px;transition:none;justify-content:flex-start;}
.note-box h1{font-size:clamp(1.2rem,4vw,2.4rem);font-weight:700;margin-bottom:0px;line-height:1.1;color:#222;margin-top:15px;}
.note-box p{font-size:18px;line-height:1.4;color:#444;margin-bottom:auto;}
.portfolio-card{box-sizing:border-box;gap:0.75em;display:flex;align-items:left;justify-content:space-between;border:1px solid #ccc;box-shadow:0px 2px 6px rgba(0,0,0,0.3);margin:15px auto;}
.portfolio-card h3{font-weight:600;font-size:1em;margin:0;text-align:left;}
.portfolio-card input[type="text"]{width:100%;padding:0.5em 2.5em 0.5em 1em;font-size:16px;border-radius:12px;border:1px solid #ccc;box-sizing:border-box;color:333;}
.portfolio-card input[type="text"]:focus{outline:none;border-color:var(--cgt-green);box-shadow:0 0 10px rgba(26,188,156,0.3);background-color:#e8f5e9;}
.file-card{display:block;padding:1em;background-color:#e8f5e9;border:1px solid #1abc9c;position:relative;}
.file-card h3{margin-top:0;margin-bottom:0.5em;}
.file-card .file-name{font-weight:600;}
.file-card .remove-file{position:absolute;top:8px;right:8px;cursor:pointer;font-size:1.2em;color:#ff0000;transition:color 0.2s ease;}
.file-card .remove-file:hover{color:#ff7875;}
.switch-label{align-items:center;gap:0.8em;font-weight:500;color:var(--text-dark);position:relative;display:inline-block;width:40px;height:20px;}
.switch-label input[type="checkbox"]{opacity:0;width:0;height:0;}
.switch-label input{opacity:0;width:0;height:0;}
.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:20px;transition:.4s;}
.switch-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:white;border-radius:50%;transition:.4s;}
.switch-label input:checked + .switch-slider{background-color:#00796B;}
.switch-label input:checked + .switch-slider:before{transform:translateX(20px);}
/* =========================
   Media Queries
========================= */
@media (max-width:420px){.drop-zone{max-width:100%;padding:1.5em 1em;}button{padding:1em;font-size:1.1em;}}
@media (max-width:600px){.container{padding:0 1rem;margin:0;}h1.page-title{font-size:2em;}.drop-zone{padding:2em 1em;}.drop-zone p{text-align:center;}button{width:100%;}.two-column{flex-direction:column;gap:1rem;}.two-column > *{flex:1 1 100%;min-width:0;} .burger-container{display:block;}nav{display:none;}#addPortfolioOptions .btn-add-portfolio{flex-direction:column;gap:3px;}}
@media (max-width:768px){.burger-container{display:block;}nav{display:none;}#homePage .container{flex-direction:column;align-items:center;text-align:center;}#homePage .hero-image{width:85%;}#homePage .hero-text{flex:none;height:auto;max-height:none;max-width:90%;margin-bottom:1rem;text-align:left;}#homePage .disclaimer{max-width:90%;margin-top:1.5rem;padding:1rem;box-sizing:border-box;}section{padding-top:60px;box-sizing:border-box;}.loadPage-box{flex-direction:column;}.two-column{flex-direction:column;}.donation-grid{grid-template-columns:1fr;justify-items:center;}.donation-card{width:90%;max-width:400px;}}
@media (min-width:769px){.support-btn:hover .tooltip{opacity:1;}}
@media (max-width:1200px){.burger-container{display:block;}.burger .tooltip{display:none;}header nav{display:none !important;}}
@media (min-width:1201px){.burger:hover .tooltip{display:inline-block;opacity:1;}}
@media (max-width:600px) {.tool-card { flex:1 1 100%; }.tool-row { flex-direction:row; align-items:flex-start; }.tool-row img { width:80px; height:80px; margin-right:10px; margin-bottom:0; }}
/* =========================
   Tool Page
========================= */
.tool-grid { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.tool-card { position:relative; border:1px solid #ddd; border-radius:12px; padding:15px; background:#f7f7f7; max-width:400px; flex:1 1 calc(33% - 1rem); box-sizing:border-box; cursor:pointer; text-decoration:none; color:inherit; transition:transform 0.2s ease, box-shadow 0.2s ease; }
.tool-card:hover { transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,0.15); }
.card-pill { position:absolute; top:12px; right:12px; padding:4px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; color:white; text-transform:uppercase; letter-spacing:0.5px; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,0.2); transition:transform 0.2s ease, box-shadow 0.2s ease; }
.card-pill.future { background-color:#e4972c; }
.card-pill.future:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(255,149,0,0.4); }
.card-pill.beta { background-color:#673ab7; }
.card-pill.beta:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(255,149,0,0.4); }
.card-pill.improved { background-color:#42cba2; }
.card-pill.improved:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,164,130,0.4); }
.tool-card h3 { margin-top:25px; margin-bottom:12px; font-size:1.2em; font-weight:600; }
.tool-row { display:flex; align-items:center; gap:15px; }
.tool-row img { width:100px; height:100px; border-radius:0; object-fit:cover; }
.tool-content p { margin:0; font-size:0.95em; line-height:1.3; }
.tool-card .card-footer { margin-top:10px; }
.tool-card .card-footer p { font-size:0.85em; color:#555; text-align:center; }

.video-wrapper { position: relative; width: 80%; margin: 60px auto 0; aspect-ratio: 16/9; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 -4px 4px rgba(255,255,255,0.2); z-index: 1; display: none; }
.hero-badge { position: absolute; top: -85px; left: 0; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; rotate: -10deg; font: 700 0.9rem sans-serif; color: #fff; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); background: radial-gradient(circle at top left,#43cea2,#00796B); border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 -4px 4px rgba(255,255,255,0.2); z-index: 3; }
.play-overlay::before, .play-overlay::after { content: ""; position: absolute; top: 80%; left: 50%; }
.play-overlay::before { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 4px 8px rgba(0,0,0,0.4); transform: translate(-50%, -50%); }
.play-overlay::after { transform: translate(-45%, -50%); border-left: 20px solid #00796B; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; cursor: pointer; display: flex; justify-content: center; align-items: flex-start; z-index: 2; overflow: hidden; } 
.overlay-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }