/* ==========================
TERMS / PRIVACY LINKS
========================== */
 
.popup-modal {
color: white; 
box-shadow: 0 0 15px rgba(0,0,0,0.5); 
}
 
.popup-content {
max-height: 200px;
overflow-y: auto;
}
 
.checkbox-group a,
.checkbox-group a:link,
.checkbox-group a:visited,
.checkbox-group a:hover,
.checkbox-group a:active{
 
color:#9ffcff !important;
 
text-decoration:none !important;
 
font-weight:700 !important;
 
-webkit-text-fill-color:#bdf7fc !important;
 
opacity:1 !important;
}
 
.checkbox-group a:hover{
 
color:#ffffff !important;
 
text-decoration:underline;
 
text-shadow:
0 0 12px rgba(255,255,255,0.95),
0 0 20px rgba(159,252,255,0.95);
}
 
/* ==========================
MODAL WINDOWS
========================== */
 
.modal-overlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.75);
  display: none;      /* JS sets to 'flex' */
  padding: 20px;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-sizing: border-box;
}
 
.modal-window{
  width: 100%;
  max-width: 700px;
  background: #101722;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 35px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
 
.modal-window h2{
color:#ffffff;
margin-bottom:24px;
}
 
.checkbox-group-wrapper {
    position: relative;
    display: inline-block; /* or block if full width */
}
 
 
.modal-content{
max-height:400px;
bottom: 100%;
overflow-y:auto;
color:#c2cfdd;
line-height:1.8;
margin-bottom:12px;
padding-left: 8px;
}

.modal-content p{
padding-left: 20px;
margin-bottom: 4px;
}

.modal-section-title{
margin-top: 20px;
margin-bottom: 8px;
padding-left: 8px;
}

.modal-section-title:first-child{
margin-top: 0;
}

.modal-bullet{
padding-left: 32px;
margin-bottom: 4px;
}

.modal-body-text{
padding-left: 20px;
}
 
.modal-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap: wrap;
}
 
.modal-btn{
border:none;
padding:14px 22px;
border-radius:12px;
font-weight:700;
cursor:pointer;
transition:0.25s ease;
width: 160px;
text-align: center;
}

}
.modal-overlay.is-open {
  display: flex;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions button {
  padding: 10px 20px;         /* more breathing room around label */
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #d1d1d1;
  background: #fff;
  color: #1a1a1a;
}

.modal-actions .danger-btn {
  background: #d33;
  border-color: #d33;
  color: #fff;
}

.modal-actions .danger-btn:hover {
  background: #b82929;
}

.modal-actions button:not(.danger-btn):hover {
  background: #f5f5f5;
}


.modal-box {
  background: #ffffff;      /* solid, not rgba */
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 380px;
  width: 100%;
}

.modal-box h2 {
  color: #1a1a1a;            /* solid dark text, not gray/muted */
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.modal-box p {
  color: #333333;            /* solid, readable body text */
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}
 
.accept-btn{
background:linear-gradient(90deg,#00aaff,#0077ff);
color:#ffffff;
}
 
.cancel-btn{
    margin: top 0;;
    padding:14px 22px;
    font-size: clamp(12px, 2vw, 14px);
    font-weight:bold;
    border:none;
    border-radius:10px;
    background:red;
    color:white;
    cursor:pointer;
    transition:0.2s ease;
}

.cancel-btn:hover{
    opacity:0.75;
}
 
.modal-btn:hover{
transform:translateY(-1px);
}
 
/* Container */
.legal-controls {
font-family: Arial, sans-serif;
color: #fff;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
 
/* Remove ALL default link/button weird inheritance issues */
.link-button {
all: unset; /* important: removes inherited link/button styles */
cursor: pointer;
text-decoration: underline;
color: #4FC3FF; /* light blue readable on dark background */
font-weight: 500;
padding: 6px 10px;
border-radius: 6px;
transition: background-color 0.2s ease, color 0.2s ease;
}
 
/* Hover state */
.link-button:hover {
background-color: rgba(79, 195, 255, 0.15);
color: #B3E5FF;
}
 
/* Focus accessibility */
.link-button:focus {
outline: 2px solid #4FC3FF;
outline-offset: 2px;
} 

.savings{
    font-size: clamp(11px, 2.5vw, 17px);
    color:#189f10;
    margin-bottom:10px;
}

.plan-description{
    font-size: clamp(13px, 1.2vw, 15px);
    line-height:1.8;
    color:#c9d1d9;
    margin-bottom:25px;
}

.plan-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:20px;
}

.plan-checkbox input[type="radio"]{
    transform:scale(1.4);
    cursor:pointer;
}

.plan-checkbox label{
    cursor:pointer;
    font-weight:bold;
}


#save-status {
            display: inline-block;
            margin-left: 14px;
            font-size: 0.9rem;
            opacity: 0;
            transition: opacity 0.3s;
        }
        #save-status.visible  { opacity: 1; }
        #save-status.success  { color: #4caf50; }
        #save-status.error    { color: #e05c5c; }

/* Separator text */
.separator {
color: #ccc;
}
 
/* Checkbox label */
.agree-box {
display: flex;
align-items: center;
gap: 8px;
color: #ddd;
font-size: 14px;
}
 
/* Checkbox always enabled but visually consistent */
.agree-box input {
accent-color: #4FC3FF;
}
 
/* ==========================
SITE HEADER
========================== */
 
.site-header {
background-color: #0b1f3a;
color: white;
padding: 15px 40px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
border-bottom: 3px solid #caa64b;
}
 
.valid-icon{
color:#7dff9b;
margin-right:6px;
}
 
.invalid-icon{
color:#ff6b6b;
margin-right:6px;
}
 
.check-item.valid{
color:#7dff9b;
}
 
.check-item.invalid{
color:#ff6b6b;
}
 
.match-message.valid{
color:#7dff9b;
font-weight:600;
text-shadow:0 0 8px rgba(125,255,155,0.35);
}
 
.match-check{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border:2px solid rgba(125,255,155,0.45);
border-radius:50%;
color:#7dff9b;
font-size:0.9rem;
font-weight:700;
margin-right:8px;
box-shadow:0 0 10px rgba(125,255,155,0.18);
}
 
.logo-container {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
 
.logo {
width: 90px;
height: auto;
max-width: 100%;
}
 
.company-text h1 {
margin: 0;
font-size: 32px;
letter-spacing: 2px;
}
 
.company-text p {
margin: 0;
color: #4caf50;
font-size: 14px;
letter-spacing: 1px;
}
 
nav {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
}
 
nav a {
color: white;
text-decoration: none;
font-weight: 500;
}
 
nav a:hover {
color: #4caf50;
}
 
/* PASSWORD VALIDATION */
 
.password-checklist{
margin-top:15px;
display:flex;
flex-direction:column;
gap:8px;
}
 
.check-item{
font-size:0.92rem;
transition:0.2s ease;
}
 
.match-message{
margin-top:12px;
font-size:0.92rem;
font-weight:600;
}
 
.match-message.invalid{
color:#ff6b6b;
}
 
.notice-box{
    margin-top:50px;
    padding:25px;
    align-items: center;
    border-radius:12px;
    background:#161b22;
    border:1px solid #30363d;
    font-size: clamp(13px, 1.1vw, 15px);
    line-height:1.8;
    color:#c9d1d9;
}

.notice-box h3{
    margin-top:0;
    color:#58a6ff;
}

.input-valid{
border-color:#52d273 !important;
box-shadow:0 0 0 4px rgba(82,210,115,0.12);
}
 
.input-invalid{
border-color:#ff6b6b !important;
box-shadow:0 0 0 4px rgba(255,107,107,0.12);
}
 
.signup-section{
text-align: center;
background:
radial-gradient(circle at top left, rgba(0,140,255,0.12), transparent 30%),
linear-gradient(180deg,#05070b,#0b1220);
padding: 60px 20px;
}
 
.signup-header{
text-align:center;
margin-bottom:40px;
}
 
.signup-header h2{
font-size:2.4rem;
margin-bottom:18px;
color:#ffffff;
}
 
.signup-header p{
color:#b6c3d4;
font-size:1.05rem;
}
 
.signup-form{
display:flex;
flex-direction:column;
gap:24px;
}
 
.form-group{
display:flex;
flex-direction:column;
}
 
.form-group label{
margin-bottom:10px;
font-weight:600;
color:#dce6f2;
}
 
.form-group input{
background:#101722;
border:1px solid rgba(255,255,255,0.08);
color:#ffffff;
padding:16px 18px;
border-radius:14px;
font-size:1rem;
transition:0.3s ease;
width: 100%;
box-sizing: border-box;
}
 
.form-group input:focus{
outline:none;
border-color:#00aaff;
box-shadow:0 0 0 4px rgba(0,170,255,0.12);
}
 
.password-requirements{
margin-top:14px;
font-size:0.9rem;
color:#9fb0c6;
}
 
.password-requirements ul{
margin-top:10px;
padding-left:20px;
}
 
.password-requirements li{
margin-bottom:6px;
}
 
.signup-btn,
.verify-btn{
background:linear-gradient(90deg,#00aaff,#0077ff);
color:#ffffff;
border:none;
padding:18px;
border-radius:14px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:0.3s ease;
box-shadow:0 10px 25px rgba(0,119,255,0.25);
width: 100%;
}
 
.signup-btn:hover,
.verify-btn:hover{
transform:translateY(-2px);
}
 
.mfa-section{
margin-top:45px;
padding:35px;
background:rgba(255,255,255,0.03);
border-radius:20px;
border:1px solid rgba(0,170,255,0.15);
}
 
.mfa-section h3{
margin-bottom:16px;
color:#ffffff;
}
 
.mfa-section p{
margin-bottom:24px;
color:#c0ccda;
}
 
.mfa-section input{
width:100%;
padding:16px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.08);
background:#101722;
color:#ffffff;
font-size:1.2rem;
text-align:center;
letter-spacing:5px;
margin-bottom:20px;
box-sizing: border-box;
}
 
.countdown-timer{
margin-top:18px;
color:#7ad8ff;
font-weight:700;
text-align:center;
}
 
.hidden{
display:none;
}
 
/* ==========================
GLOBAL / RESET
========================== */
 
body {
margin: 0;
padding:0;
background-color: #05070b;
color: #e9eef7;
font-family:Arial, Helvetica, sans-serif;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.7;
overflow-x: hidden;
}
 
*{
margin:0;
padding:0;
box-sizing:border-box;
}
 
img, svg {
max-width: 100%;
height: auto;
}
 
.container{
width:90%;
max-width:1200px;
margin:auto;
}
 
/* ==========================
HERO (top logo / CTA section)
========================== */
 
.hero-section {
display: flex;
flex-wrap: wrap;
min-height: 300px;
align-items: center;
justify-content: space-between;
padding: 40px;
gap: 30px;
background: linear-gradient(to right, #ffffff, #eef3f8);
}
 
.hero-left {
flex: 1 1 320px;
min-width: 280px;
padding-right: 0;
text-align: left;
}
 
.hero-left h2 {
font-size: clamp(28px, 5vw, 48px);
color: #0b1f3a;
margin-bottom: 20px;
}
 
.hero-left p {
font-size: clamp(16px, 2.2vw, 20px);
line-height: 1.6;
color: #333;
margin-bottom: 30px;
}
 
.subscribe-cancel {
align-content: center;
}

.subscribe-btn {
background-color: #1d7c3f;
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
}
 
.subscribe-btn:hover {
background-color: #145c2d;
opacity:0.92;
}

.subscribe-btn.is-disabled,
.subscribe-btn:disabled {
    background-color: #cfcfcf;
    color: #6b6b6b;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.75;
}

.subscribe-btn.is-disabled:hover,
.subscribe-btn:disabled:hover {
    background-color: #cfcfcf; /* prevent hover state from implying it's clickable */
    transform: none;
}

 
.hero-right {
flex: 1 1 280px;
display: flex;
justify-content: center;
align-items: center;
}
 
.hero-logo {
width: 80%;
max-width: 500px;
height: auto;
}
 
/* ==========================
HERO (headline / intro section)
========================== */
 
.hero{
min-height:60vh;
display:flex;
align-items:center;
position:relative;
background:
radial-gradient(circle at top right, rgba(0,120,255,0.20), transparent 35%),
radial-gradient(circle at bottom left, rgba(0,200,255,0.15), transparent 35%),
linear-gradient(135deg,#05070b 0%,#0b1220 100%);
}
 
.hero::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size:50px 50px;
opacity:0.3;
}
 
.hero-content{
position:relative;
z-index:2;
max-width:850px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 60px 40px 40px 40px;
text-align: left;
}
 
.badge{
display:inline-block;
padding:10px 18px;
border:2px solid rgba(0,170,255,0.4);
background:rgba(0,170,255,0.08);
color:#76d4ff;
border-radius:999px;
font-size:clamp(1rem, 2vw, 1.4rem);
font-weight:600;
letter-spacing:0.5px;
margin-bottom:28px;
}
 
.hero h1{
font-size: clamp(2rem, 6vw, 4rem);
line-height:1.1;
font-weight:800;
margin-bottom: clamp(30px, 8vw, 100px);
letter-spacing:-2px;
}
 
.hero h1 span{
background:linear-gradient(90deg,#4fc3ff,#91f0ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
 
.hero p{
font-size:clamp(1rem, 2.2vw, 1.2rem);
color:#b9c7da;
max-width:760px;
margin-bottom:40px;
}
 
.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}
 
.btn-primary{
background:linear-gradient(90deg,#00aaff,#0077ff);
color:white;
padding:16px 32px;
border-radius:12px;
text-decoration:none;
font-weight:700;
transition:0.3s ease;
box-shadow:0 10px 30px rgba(0,119,255,0.35);
display: inline-block;
}
 
.btn-primary:hover{
transform:translateY(-2px);
}
 
.btn-secondary{
border:1px solid rgba(255,255,255,0.15);
color:white;
padding:16px 32px;
border-radius:12px;
text-decoration:none;
font-weight:600;
background:rgba(255,255,255,0.03);
display: inline-block;
}

.div-centered {
            text-align: center;
            max-width: 900px;   /* adjust to taste */
            margin: 0 auto;
        }

        .div-centered .plan-grid {
            justify-content: center;  /* centers the grid itself if it doesn't span full width */
        }
 
/* ==========================
SECTIONS / GRID / CARDS
========================== */
 
section{
padding: 40px 20px;
}
 
.section-title{
font-size: clamp(1.6rem, 4vw, 2.6rem);
font-weight:800;
margin-bottom:22px;
text-align:center;
}
 
.section-subtitle{
color:#aab7cb;
text-align:center;
max-width:850px;
margin:0 auto 60px;
}
 
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
}
 
.card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
border-radius:20px;
padding:32px;
transition:0.3s ease;
backdrop-filter:blur(10px);
text-align: left;
}
 
.card:hover{
transform:translateY(-5px);
border-color:rgba(0,170,255,0.4);
box-shadow:0 15px 35px rgba(0,0,0,0.3);
}
 

.plan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:25px;
}

.plan-card{
    background:#161b22;
    border:1px solid #30363d;
    border-radius:14px;
    padding:28px;
    transition:0.25s ease;
    position:relative;
}

.plan-card:hover{
    transform:translateY(-4px);
    border-color:#2f81f7;
}

.plan-title{
    /* font-size:28px; */
    font-size: clamp(20px, 2vw, 28px);
    font-weight:bold;
    margin-bottom:10px;
}

.plan-price{
    /* font-size:34px; */
    font-size: clamp(22px, 2.5vw, 34px);
    color:#58a6ff;
    margin-bottom:10px;
}

.card h3{
font-size:1.2rem;
margin-bottom:14px;
color:#7fd9ff;
}
 
.card p{
color:#c4d0df;
font-size:0.97rem;
}
 
.feature-list{
margin-top:18px;
text-align: left;
list-style-position: inside;
}
 
.feature-list li{
margin-bottom:10px;
color:#d9e2ef;
}
 
.highlight-section{
background:linear-gradient(180deg,#0b1220,#06090f);
}
 
.two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
 
.text-block{
text-align: left;
}
 
.text-block h2{
font-size: clamp(1.6rem, 4vw, 2.5rem);
margin-bottom:24px;
}
 
.text-block p{
color:#c5cfdd;
margin-bottom:20px;
}
 
.glow-box{
background:linear-gradient(145deg, rgba(0,170,255,0.10), rgba(255,255,255,0.03));
border:1px solid rgba(0,170,255,0.15);
border-radius:24px;
padding:40px;
position:relative;
overflow:hidden;
text-align: left;
}
 
.glow-box::after{
content:'';
position:absolute;
width:300px;
height:300px;
background:rgba(0,170,255,0.12);
border-radius:50%;
top:-120px;
right:-120px;
filter:blur(40px);
}
 
/* ── Report list ── */
        .report-list {
            list-style: none;
            padding: 0;
            margin: 0 0 40px;
        }
        .report-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid #2a2a2a;
            gap: 16px;
        }
        .report-list li:last-child { border-bottom: none; }

        .report-list .report-date {
            font-size: 0.82rem;
            color: #888;
            white-space: nowrap;
        }
        .report-list a {
            color: #2f81f7;
            text-decoration: none;
            font-weight: 500;
        }
        .report-list a:hover { text-decoration: underline; }

        .no-reports {
            text-align: center;
            padding: 40px 20px;
            color: #888;
            font-size: 1rem;
        }

        #reports-loading {
            text-align: center;
            padding: 30px;
            color: #888;
            display: none;
        }


.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
margin-top:20px;
}
 
.stat{
padding:24px;
background:rgba(255,255,255,0.04);
border-radius:16px;
border:1px solid rgba(255,255,255,0.05);
}
 
.stat h3{
font-size:clamp(1.4rem, 3vw, 2rem);
color:#67d4ff;
}
 
.stat p{
color:#c9d5e4;
margin-top:8px;
font-size: 0.92rem;
}
 
.disclaimer{
background:#03050a;
border-top:1px solid rgba(255,255,255,0.08);
padding:70px 20px;
}
 
.disclaimer h2{
margin-bottom:25px;
font-size: clamp(1.5rem, 3vw, 2rem);
}
 
.disclaimer p{
color:#9eaec2;
margin-bottom:18px;
font-size:0.95rem;
text-align: left;
}
 
.footer{
padding:30px 20px;
border-top:1px solid rgba(255,255,255,0.06);
text-align:center;
color:#7f8ea3;
font-size:0.9rem;
}
 
/* ==========================
SIGNUP CARD
========================== */
 
.signup-container{
max-width:720px;
margin:auto;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:28px;
padding:50px;
backdrop-filter:blur(12px);
box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
 
.signup-badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
border:1px solid rgba(0,170,255,0.3);
background:rgba(0,170,255,0.08);
color:#7ad8ff;
font-size:0.85rem;
font-weight:700;
margin-bottom:20px;
}
 
.subscription-section{
    padding:60px 20px;
}

.subscription-container{
    max-width:720px;
    margin:0 auto;
}

.subscription-header{
    text-align:center;
    margin-bottom:50px;
}

.subscription-header h1{
    /* font-size:42px; */
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    margin-bottom:15px;
}

.subscription-header p{
    max-width:800px;
    margin:0 auto;
    line-height:1.7;
    color:#c9d1d9;
}


.subscription-badge{
display:inline-block;
padding:8px 14px;
border:1px solid #2f81f7;
border-radius:30px;
color:#2f81f7;
font-size: clamp(10px, 1vw, 12px);
letter-spacing:1px;
margin-bottom:15px;
}
 
.page-wrapper {
    min-height: calc(100vh - var(--header-height, 80px));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
}

.parent {
display: flex;
justify-content: center;
text-align: center;
}
 
/* ==========================
RESPONSIVE BREAKPOINTS
========================== */
 
/* Tablets and small laptops */
@media (max-width: 900px){
  .subscription-header h1{
        font-size:34px;
    }

.two-column{
    grid-template-columns:1fr;
}
 
.hero{
min-height:auto;
}
 
.hero-content,
.text-block,
.glow-box{
text-align: center;
align-items: center;
}
 
.hero-buttons,
.feature-list{
justify-content: center;
}
 
.hero-section{
padding: 30px 20px;
text-align: center;
}
 
.hero-left,
.hero-right{
text-align: center;
}
 
}
 
/* Phones */
@media (max-width: 600px){
 
.container{
width: 94%;
}
 
.site-header{
padding: 15px 20px;
justify-content: center;
text-align: center;
}
 
.logo-container{
justify-content: center;
}
 
nav{
justify-content: center;
}
 
.hero-section{
min-height: auto;
padding: 30px 16px;
}
 
.hero-right{
order: -1; /* show logo before text on very small screens */
}
 
.hero-logo{
width: 60%;
max-width: 260px;
}
 
.hero-content{
padding: 40px 20px 30px 20px;
}
 
.stats{
grid-template-columns: 1fr;
}
 
.signup-container{
padding: 30px 18px;
}
 
.signup-header h2{
font-size: 1.7rem;
}
 
.mfa-section{
padding: 22px;
}
 
.modal-window{
padding: 22px;
border-radius: 16px;
}

.card{
padding: 24px;
}
 
}