.wpa-test-msg{background: #d1ecf1 !important; border: 1px solid #bee5eb !important; border-radius: 5px !important;color: #0c5460 !important; font-size: 14px !important; padding:.75rem 1.25rem !important; font-family: Arial !important; margin-top:5px !important;}
span.wpa-button{ display: inline-block !important; padding-top: 5px !important; color: #fff !important;background-color: #6c757d !important;border-color: #6c757d !important; padding: 5px 10px !important; border-radius: 5px !important; margin-top:5px !important;  cursor: pointer !important; }
#altEmail_container, .altEmail_container{position:absolute !important; overflow: hidden !important; display: inline !important; height:1px !important; width: 1px !important;z-index:-1000 !important;}.scs-wrapper,
.scs-wrapper * {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
} .scs-wrapper {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
height: 100dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
text-align: center;
padding: 24px 20px; isolation: isolate;
} .scs-wrapper::before,
.scs-wrapper::after {
content: '';
position: fixed;
border-radius: 50%;
pointer-events: none;
filter: blur(90px);
opacity: 0.18;
z-index: 0;
will-change: transform;
}
.scs-wrapper::before {
width: 55vw;
height: 55vw;
max-width: 700px;
max-height: 700px;
background: radial-gradient(circle at center, #818cf8 0%, transparent 70%);
top: -15%;
left: -10%;
animation: scsOrb1 16s ease-in-out infinite alternate;
}
.scs-wrapper::after {
width: 45vw;
height: 45vw;
max-width: 580px;
max-height: 580px;
background: radial-gradient(circle at center, #38bdf8 0%, transparent 70%);
bottom: -12%;
right: -8%;
animation: scsOrb2 20s ease-in-out infinite alternate;
}
@keyframes scsOrb1 {
0%   { transform: translate(0,    0)    scale(1);    }
100% { transform: translate(5vw, 4vh)   scale(1.12); }
}
@keyframes scsOrb2 {
0%   { transform: translate(0,    0)    scale(1);    }
100% { transform: translate(-4vw, -5vh) scale(1.1);  }
} .scs-content {
position: relative;
z-index: 1;
background: #ffffff;
padding: 56px 56px;
border-radius: 20px;
max-width: 760px;
width: 100%; box-shadow:
0 0  0  1px rgba(255,255,255,0.55),
0 2px 4px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.08),
0 24px 56px rgba(0,0,0,0.10); border-top: 1px solid rgba(255,255,255,0.8); animation: scsCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
} .scs-content::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.18) 0%,
transparent 35%
);
pointer-events: none;
z-index: 0;
} .scs-content > * {
position: relative;
z-index: 1;
} .scs-logo {
height: auto;
margin-bottom: 28px;
display: inline-block;
animation: scsChildIn 0.6s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-content h1 {
font-size: clamp(1.8rem, 5vw, 2.75rem);
margin: 0 0 14px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
animation: scsChildIn 0.6s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-content p {
font-size: clamp(0.95rem, 2.5vw, 1.1rem);
line-height: 1.7;
margin: 0;
max-width: 560px;
margin-inline: auto;
animation: scsChildIn 0.6s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
} .scs-divider {
display: block;
width: 36px;
height: 3px;
background: linear-gradient(90deg, #6366f1, #38bdf8);
border-radius: 2px;
margin: 28px auto 0;
animation: scsChildIn 0.6s 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
} #scs-countdown {
display: flex;
justify-content: center;
align-items: stretch;
gap: 10px;
margin: 32px 0;
flex-wrap: wrap;
animation: scsChildIn 0.6s 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-time-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 76px;
padding: 14px 10px;
background: rgba(255,255,255,0.45);
border: 1px solid rgba(255,255,255,0.7);
border-radius: 14px;
box-shadow:
0 1px 3px rgba(0,0,0,0.06),
0 4px 10px rgba(0,0,0,0.05),
inset 0 1px 0 rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.2s ease;
}
.scs-time-box:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 4px 8px rgba(0,0,0,0.06),
0 10px 24px rgba(0,0,0,0.09),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.scs-time-box span {
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
color: inherit;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em; }
.scs-time-box small {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-top: 6px; }
.scs-expired {
font-size: 1.4rem;
font-weight: 700;
color: #047857; animation: scsChildIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
} .scs-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .scs-btn {
display: inline-block;
margin-top: 8px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
line-height: 1;
cursor: pointer;
white-space: nowrap; padding: 14px 32px;
border-radius: 50px;
background-color: #0073aa;
color: #fff;
border: 0 solid transparent; transition:
transform   0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow  0.22s ease,
background-color 0.18s ease,
color 0.18s ease;
will-change: transform;
animation: scsChildIn 0.6s 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-btn:hover {
transform: translateY(-3px) scale(1.02); filter: brightness(1.04);
}
.scs-btn:active {
transform: translateY(-1px) scale(0.99);
filter: brightness(0.97);
} .scs-btn:focus-visible {
outline: 3px solid #6366f1;
outline-offset: 3px;
} .scs-btn:focus:not(:focus-visible) {
outline: 3px solid #2271b1;
outline-offset: 2px;
} .scs-social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
animation: scsChildIn 0.6s 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(255,255,255,0.65);
border: 1px solid rgba(0,0,0,0.07);
color: #5d6778;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
transition:
transform  0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.2s ease,
color      0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
will-change: transform;
}
.scs-icon svg {
width: 18px;
height: 18px;
fill: currentColor;
display: block;
}
.scs-icon:hover {
transform: translateY(-4px) scale(1.12);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.scs-icon:focus-visible {
outline: 3px solid #6366f1;
outline-offset: 2px;
}
.scs-icon:focus:not(:focus-visible) {
outline: 3px solid #2271b1;
outline-offset: 2px;
} .scs-icon.facebook:hover  { background-color: #1877F2; }
.scs-icon.twitter:hover   { background-color: #000000; }
.scs-icon.instagram:hover { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.scs-icon.tiktok:hover    { background-color: #000000; }
.scs-icon.youtube:hover   { background-color: #FF0000; }
.scs-icon.linkedin:hover  { background-color: #0077b5; } @keyframes scsCardIn {
from {
opacity: 0;
transform: translateY(28px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0)   scale(1);
}
}
@keyframes scsChildIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
} @media (max-width: 768px) { .scs-bg-video {
display: none;
}
.scs-bg-video-overlay {
display: none;
}
.scs-wrapper {
padding: 20px 16px;
justify-content: flex-start;
padding-top: 40px;
}
.scs-content {
padding: 36px 28px;
border-radius: 16px;
}
.scs-content h1 {
font-size: clamp(1.55rem, 7vw, 2rem);
letter-spacing: -0.02em;
}
.scs-content p {
font-size: 0.95rem;
}
#scs-countdown {
gap: 8px;
margin: 24px 0;
}
.scs-time-box {
min-width: 64px;
padding: 12px 8px;
border-radius: 12px;
}
.scs-time-box span {
font-size: 1.75rem;
}
.scs-time-box small {
font-size: 0.62rem;
}
.scs-btn {
width: 100%;
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.scs-social-icons {
gap: 10px;
margin-top: 24px;
}
.scs-divider {
margin-top: 22px;
}
}
@media (max-width: 480px) {
.scs-content {
padding: 32px 20px;
}
.scs-content h1 {
font-size: 1.5rem;
}
.scs-social-icons {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
gap: 14px;
}
.scs-icon {
width: 46px;
height: 46px;
margin: auto;
}
#scs-countdown {
gap: 6px;
}
.scs-time-box {
min-width: 58px;
padding: 10px 6px;
}
.scs-time-box span {
font-size: 1.5rem;
}
} @media (max-height: 600px) {
.scs-wrapper {
align-items: flex-start;
justify-content: flex-start;
padding-top: 20px;
padding-bottom: 20px;
}
.scs-content {
padding: 28px 32px;
}
} .scs-bg-video {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
pointer-events: none;
}
.scs-bg-video-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 0;
pointer-events: none;
} .scs-has-video::before,
.scs-has-video::after {
display: none;
} .scs-progress-wrap {
margin: 20px auto 0;
width: 100%;
max-width: 480px;
animation: scsChildIn 0.6s 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scs-progress-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 7px;
}
.scs-progress-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.scs-progress-pct {
font-size: 0.75rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.scs-progress-track {
height: 7px;
background: rgba(255,255,255,0.28);
border: 1px solid rgba(255,255,255,0.45);
border-radius: 100px;
overflow: hidden;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.scs-progress-fill {
height: 100%;
background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
border-radius: 100px;
width: 0;
animation: scsProgressFill 1.1s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes scsProgressFill {
from { width: 0; }
to   { width: var(--scs-progress, 0%); }
} @media (prefers-reduced-motion: reduce) {
.scs-content,
.scs-logo,
.scs-content h1,
.scs-content p,
.scs-divider,
#scs-countdown,
.scs-btn,
.scs-social-icons,
.scs-progress-wrap,
.scs-progress-fill {
animation: none;
opacity: 1;
transform: none;
}
.scs-progress-fill {
width: var(--scs-progress, 0%);
}
.scs-wrapper::before,
.scs-wrapper::after {
animation: none;
}
.scs-time-box,
.scs-icon,
.scs-btn {
transition: none;
}
}