*{box-sizing:border-box}
html,body{ font-weight:400;}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--ink);
    background:
            radial-gradient(900px 380px at 20% -10%, rgba(44,138,136,.12), transparent 55%),
            radial-gradient(900px 380px at 85% 10%, rgba(59,130,246,.10), transparent 55%),
            var(--bg);
    font-weight:400;}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 68px;}
.shell{
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.55);
    box-shadow: var(--shadow);
    border-radius: 34px;
    overflow:hidden;
    backdrop-filter: blur(10px);
}

/* Common */
.hidden { display: none !important; }

.spinner {
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.4);
    border-top:2px solid white;
    border-radius:50%;
    display:inline-block;
    animation:spin .6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* Header */
.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px;
    border-bottom:1px solid rgba(15,23,42,.06);
    background: rgba(255,255,255,.55);
}
.brand{display:flex; align-items:center; gap:12px; min-width:190px}
.logo{display:block; width:190px; height:auto}
.nav{
    display:flex; align-items:center; gap:18px; color:var(--muted);
    font-weight:600;
}
.nav a{ text-decoration:none; padding:10px 10px; border-radius:999px}
.nav a:hover{ background: rgba(15,23,42,.05); color:var(--ink) }

.actions{display:flex; align-items:center; gap:10px}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    height:44px; padding:0 16px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.btn.primary{
    background: var(--btn-soft);
    border-color: var(--btn-soft-border);
    color: var(--accent-ink);
    box-shadow: 0 10px 22px rgba(44,138,136,.18);
}
.btn.primary:hover{ background: rgba(223,240,239,.85); border-color: rgba(44,138,136,.28) }
.btn.ghost{
    background:transparent;
    border-color: rgba(15,23,42,.14);
    color:var(--ink);
    font-weight:700;
}
.btn.ghost:hover{ background: rgba(15,23,42,.05) }

.hamburger{
    width:44px; height:44px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.65);
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.hamburger span{
    display:block; width:18px; height:2px; background:var(--ink);
    position:relative;
}
.hamburger span:before,.hamburger span:after{
    content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.hamburger span:before{ top:-6px }
.hamburger span:after{ top:6px }

/* Mobile menu drawer */
.drawer{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:50;
}
.drawer .backdrop{
    position:absolute; inset:0;
    background: rgba(2,6,23,.45);
    opacity:0;
    transition: opacity .18s ease;
}
.drawer .panel{
    position:absolute; top:0; right:0; height:100%; width:min(360px, 88vw);
    background: rgba(255,255,255,.92);
    border-left:1px solid rgba(15,23,42,.10);
    backdrop-filter: blur(12px);
    transform: translateX(102%);
    transition: transform .22s ease;
    padding:18px;
    display:flex; flex-direction:column; gap:10px;
}
.drawer.open{ pointer-events:auto; }
.drawer.open .backdrop{ opacity:1; }
.drawer.open .panel{ transform: translateX(0); }
.drawer .panel a{
    text-decoration:none;
    padding:12px 12px;
    border-radius:14px;
    font-weight:750;
    color:var(--ink);
    border:1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.7);
}
.drawer .panel a:hover{ background: rgba(15,23,42,.05) }
.drawer .panel .row{ display:flex; gap:10px; margin-top:auto; }

/* Hero */
.hero{ padding: 34px 24px 6px; }
.headline{
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 6px 0 14px;
}
.subhead{
    font-size: clamp(16px, 1.35vw, 20px);
    color: var(--muted);
    max-width: 66ch;
    margin: 0 0 18px;
}
.pillrow{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.10);
    color:var(--muted);
    background: rgba(255,255,255,.55);
    font-weight:700;
    font-size: 14px;
}
.pill strong{ color: var(--ink) }
.divider{ height:1px; background: rgba(15,23,42,.08); margin: 22px 0 0; }

/* Two lanes */
.lanes{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
}
.lane{
    padding: 28px 24px 26px;
    border-right:1px solid rgba(15,23,42,.08);
}
.lane:last-child{ border-right:0; }
.tag{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(44,138,136,.22);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight:850;
    font-size: 14px;
    margin-bottom: 12px;
}
.lane h3{
    margin:0 0 10px;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing:-0.02em;
}
.lane p{
    margin:0 0 16px;
    color: var(--muted);
    font-size: 16px;
    line-height:1.55;
    max-width: 50ch;
}
.checks{ display:grid; gap:10px; margin: 14px 0 18px; }
.check{
    display:flex; gap:10px; align-items:flex-start;
    color: var(--ink);
    font-weight:650;
}
.check .dot{
    width:22px; height:22px; border-radius:8px;
    display:grid; place-items:center;
    background: var(--accent-soft);
    border:1px solid rgba(44,138,136,.20);
    flex:0 0 22px;
    margin-top:1px;
}
.check svg{ width:14px; height:14px; fill: var(--accent-ink); }
.lane .ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.btn.soft{
    background: var(--btn-soft);
    border-color: var(--btn-soft-border);
    color: var(--accent-ink);
}
.btn.soft:hover{ background: rgba(223,240,239,.85); }

/* Sections */
.section{
    padding: 34px 24px 0;
}
.section h2{
    margin:0 0 10px;
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing:-0.02em;
}
.section p.lead{
    margin:0 0 18px;
    color: var(--muted);
    max-width: 72ch;
    line-height:1.6;
    font-size: 16px;
}
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.card{
    background: rgba(255,255,255,.62);
    border:1px solid rgba(15,23,42,.10);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.card h4{ margin: 2px 0 6px; font-size: 16px; letter-spacing:-0.01em; }
.card p{ margin:0; color: var(--muted); line-height:1.55; font-size: 14px; }

.how{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; }
.steps{ display:grid; gap:12px; }
.step{
    display:flex; gap:12px; align-items:flex-start;
    padding:14px;
    background: rgba(255,255,255,.62);
    border:1px solid rgba(15,23,42,.10);
    border-radius: var(--radius-sm);
}
.num{
    width:28px; height:28px; border-radius:10px;
    background: var(--accent-soft-2);
    border:1px solid rgba(44,138,136,.22);
    display:grid; place-items:center;
    font-weight:900; color: var(--accent-ink);
    flex:0 0 28px;
}
.step b{ display:block; margin:1px 0 2px; }
.step span{ color: var(--muted); font-size: 14px; line-height:1.45; }

.quotes{ display:grid; gap:12px; }
.quote{
    padding:16px;
    background: rgba(255,255,255,.62);
    border:1px solid rgba(15,23,42,.10);
    border-radius: var(--radius);
}
.quote p{ margin:0 0 10px; color: var(--ink); line-height:1.55; }
.quote .by{ color: var(--subtle); font-weight:700; font-size: 13px; }

.pricing{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.price{
    padding:18px;
    background: rgba(255,255,255,.62);
    border:1px solid rgba(15,23,42,.10);
    border-radius: var(--radius);
}
.price .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.badge{
    display:inline-flex; padding:6px 10px; border-radius:999px;
    border:1px solid rgba(44,138,136,.22);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight:900; font-size: 12px;
}
.price h3{ margin:0 0 6px; letter-spacing:-0.02em; }
.price .amt{ font-size: 34px; font-weight:950; letter-spacing:-0.03em; margin: 8px 0 6px;}
.price .amt small{ font-size: 14px; font-weight:800; color: var(--muted); }
.price ul{ margin:10px 0 14px; padding:0; list-style:none; display:grid; gap:10px; }
.price li{ display:flex; gap:10px; align-items:flex-start; color: var(--muted); }
.price li svg{ width:18px; height:18px; fill: var(--accent-ink); margin-top:1px;}
footer{
    padding: 26px 24px 30px;
    margin-top: 24px;
    border-top:1px solid rgba(15,23,42,.08);
    color: var(--subtle);
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
    font-size: 13px;
}
footer a{ color: var(--subtle); text-decoration:none }
footer a:hover{ text-decoration:underline }

/* Responsive */

@media (max-width: 768px){
    h1{
        font-size:24px;
        line-height:1.3;
    }
}
@media (max-width: 960px){
    .nav{ display:none; }
    .actions{ display:none; }
    .hamburger{ display:flex; }
    .brand{ min-width:auto }
    .logo{ width:168px }
    .lanes{ grid-template-columns: 1fr; }
    .lane{ border-right:0; border-bottom:1px solid rgba(15,23,42,.08); }
    .lane:last-child{ border-bottom:0; }
    .grid3{ grid-template-columns: 1fr; }
    .how{ grid-template-columns: 1fr; }
    .pricing{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
    h1{
        font-size:24px;
        line-height:1.3;
    }
}
@media (max-width: 520px){
    .wrap{ padding:14px 12px 44px; }
    .topbar{ padding:14px 14px; }
    .hero{ padding: 24px 16px 4px; }
    .lane,.section,footer{ padding-left:16px; padding-right:16px; }
    .logo{ width:150px }
}

/* LOGIN SECTION */

.login-wrapper{
    display:flex;
    justify-content:center;
    padding:60px 20px;
}

.login-card{
    width:100%;
    max-width:420px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.10);
    border-radius:var(--radius);
    padding:32px;
    box-shadow:0 10px 26px rgba(15,23,42,.06);
}

.login-card h1{
    margin:0 0 8px;
    font-size:28px;
    letter-spacing:-0.02em;
}

.login-card p{
    margin:0 0 24px;
    color:var(--muted);
    font-size:14px;
}

.form-group{
    margin-bottom:18px;
}

label{
    display:block;
    font-weight:700;
    margin-bottom:6px;
    font-size:13px;
}

input{
    width:100%;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.15);
    padding:0 14px;
    font-size:14px;
    outline:none;
}

input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}

.input-error{
    border-color:#b42318 !important;
    box-shadow:0 0 0 3px rgba(180,35,24,.12) !important;
}

.login-actions{
    margin-top:8px;
}

.login-actions button{
    width:100%;
}

.login-links{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    font-size:13px;
}

.login-links a{
    color:var(--accent-ink);
    text-decoration:none;
    font-weight:600;
}

.login-links a:hover{
    text-decoration:underline;
}

.footer-note{
    text-align:center;
    font-size:12px;
    color:var(--subtle);
    margin-top:40px;
}

/* Responsive */
@media (max-width:480px){
    .login-card{
        padding:24px;
    }
}

/* ===============================
   BookATime PRO Notifications
   =============================== */

#response-message{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:360px;
}

.bt-alert{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border-radius:18px;
    backdrop-filter: blur(12px);
    background:rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 18px 45px rgba(15,23,42,.15);
    font-size:14px;
    font-weight:600;
    animation: btSlideIn .35s ease forwards;
}

.bt-alert.success{
    border-left:4px solid var(--accent);
    background:linear-gradient(
            to right,
            rgba(44,138,136,.10),
            rgba(255,255,255,.90)
    );
    color:var(--accent-ink);
}

.bt-alert.error{
    border-left:4px solid #b42318;
    background:linear-gradient(
            to right,
            rgba(180,35,24,.08),
            rgba(255,255,255,.90)
    );
    color:#7a1d16;
}

.bt-alert button{
    background:transparent;
    border:none;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    opacity:.6;
    color:inherit;
}

.bt-alert button:hover{
    opacity:1;
}

.bt-alert.fade-out{
    animation: btSlideOut .35s ease forwards;
}

/* Animations */

@keyframes btSlideIn{
    from{
        opacity:0;
        transform:translateY(-20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes btSlideOut{
    from{
        opacity:1;
        transform:translateY(0);
    }
    to{
        opacity:0;
        transform:translateY(-20px);
    }
}

/* Mobile */
@media(max-width:480px){
    #response-message{
        left:12px;
        right:12px;
        top:12px;
        max-width:unset;
    }
}

/* REGISTRATION */

.register-wrapper{
    display:flex;
    justify-content:center;
    padding:60px 20px;
}

.register-card{
    width:100%;
    max-width:520px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(15,23,42,.10);
    border-radius:var(--radius);
    padding:36px;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.register-card h1{
    margin:0 0 8px;
    font-size:30px;
    letter-spacing:-0.02em;
}

.register-card p.lead{
    margin:0 0 24px;
    color:var(--muted);
    font-size:14px;
}

/* ACCOUNT TYPE */
.account-types{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.account-types label{
    flex:1;
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.12);
    background:rgba(255,255,255,.6);
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    text-align:center;
}

.account-types input{
    display:none;
}

.account-types input:checked + label{
    border-color:var(--accent);
    background:var(--accent-soft);
    color:var(--accent-ink);
}

/* FORM */
.form-group{
    margin-bottom:18px;
}

label{
    display:block;
    font-weight:700;
    margin-bottom:6px;
    font-size:13px;
}

input{
    width:100%;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.15);
    padding:0 14px;
    font-size:14px;
    outline:none;
}

input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}

.password-note{
    font-size:12px;
    color:var(--subtle);
    margin-top:6px;
}

.form-footer{
    margin-top:24px;
}

.form-footer button{
    width:100%;
}

.field-note{
    font-size:12px;
    color:var(--subtle);
    margin-top:6px;
}

.terms{
    font-size:12px;
    color:var(--subtle);
    margin-top:16px;
    text-align:center;
}

.terms a{
    color:var(--accent-ink);
    text-decoration:none;
}

.switch-login{
    margin-top:24px;
    text-align:center;
    font-size:14px;
}

.switch-login a{
    color:var(--accent-ink);
    font-weight:600;
    text-decoration:none;
}

/* MOBILE */
@media(max-width:480px){
    .register-card{ padding:26px; }
    .account-types{ flex-direction:column; }
}

/* ======================================
   Extra Sections (Reviews + FAQ)
====================================== */

.extra-section{
    padding:60px 24px;
    border-top:1px solid rgba(15,23,42,.06);
}

.extra-section h2{
    text-align:center;
    margin-bottom:8px;
    font-size:26px;
    letter-spacing:-0.02em;
}

.section-lead{
    text-align:center;
    color:var(--muted);
    margin-bottom:32px;
    font-size:14px;
}

/* Reviews */

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:1000px;
    margin:0 auto;
}

.review-card{
    background:rgba(255,255,255,.8);
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    font-size:14px;
    line-height:1.5;
}

.review-author{
    margin-top:14px;
    font-size:12px;
    font-weight:700;
    color:var(--subtle);
}

/* FAQ */

.faq{
    max-width:800px;
    margin:30px auto 0;
}

.faq-item{
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    margin-bottom:12px;
    background:rgba(255,255,255,.75);
    overflow:hidden;
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    padding:16px;
    text-align:left;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}

.faq-answer{
    padding:0 16px 16px;
    font-size:14px;
    color:var(--muted);
    display:none;
}

.faq-item.active .faq-answer{
    display:block;
}

/* Mobile */
@media(max-width:768px){
    .review-grid{
        grid-template-columns:1fr;
    }
}


/* ===========================
   Verification Page
=========================== */

.verify-wrapper{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
}

.verify-card{
    max-width:520px;
    width:100%;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.10);
    border-radius:28px;
    padding:40px;
    text-align:center;
    box-shadow:0 18px 55px rgba(15,23,42,.10);
    backdrop-filter:blur(12px);
}

.verify-icon{
    margin-bottom:20px;
}

.verify-icon img{
    width:80px;
}

.verify-card h2{
    margin:0 0 12px;
    font-size:26px;
    letter-spacing:-0.02em;
    color:var(--accent-ink);
}

.verify-message{
    font-size:14px;
    margin-bottom:24px;
    color:var(--muted);
}

.verify-message.error{
    color:#b42318;
}

.verify-btn{
    width:100%;
    height:46px;
}

.verify-footer{
    margin-top:18px;
    font-size:12px;
    color:var(--subtle);
}

/* ===========================
   Verification Page Upgrade
=========================== */

.fade-in {
    animation: fadeInUp .6s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.countdown-text {
    margin-top: 12px;
    font-size: 13px;
    color: var(--subtle);
}

.verify-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* ===========================
   Activation Result Page
=========================== */

.verify-wrapper{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
}

.verify-card{
    max-width:520px;
    width:100%;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.10);
    border-radius:28px;
    padding:40px;
    text-align:center;
    box-shadow:0 18px 55px rgba(15,23,42,.10);
    backdrop-filter:blur(12px);
}

.verify-icon{
    margin-bottom:20px;
}

.verify-icon img{
    width:80px;
}

.verify-card h2{
    margin:0 0 12px;
    font-size:26px;
    letter-spacing:-0.02em;
    color:var(--accent-ink);
}

.verify-message{
    font-size:15px;
    margin-bottom:28px;
    color:var(--muted);
}

.verify-message.error{
    color:#b42318;
}

.verify-btn{
    width:100%;
    height:46px;
}

/* Animation */
.fade-in{
    animation: fadeInUp .6s ease forwards;
    opacity:0;
}

@keyframes fadeInUp{
    from{
        transform:translateY(20px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* ===========================
   BookATime PRO Auth Pages
=========================== */

.auth-body{
    padding: 44px 18px 54px;
    display:flex;
    justify-content:center;
}

.auth-card{
    width: min(520px, 100%);
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 28px;
    padding: 36px;
    text-align:center;
    box-shadow: 0 18px 55px rgba(15,23,42,.10);
    backdrop-filter: blur(12px);
}

.auth-icon img{
    width: 76px;
    height: auto;
    margin-bottom: 10px;
}

.auth-title{
    margin: 6px 0 10px;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--accent-ink);
}

.auth-subtitle{
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.auth-error{
    color: #b42318;
}

.field{
    text-align:left;
    margin-bottom: 16px;
}

.field label{
    display:block;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ink);
}

.req{ color:#b42318; }

.auth-input{
    width:100%;
    height:44px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.15);
    padding: 0 14px;
    background: rgba(255,255,255,.95);
    font-size: 14px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.auth-input:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-note{
    margin-top: 6px;
    font-size: 12px;
    color: var(--subtle);
}

.w-100{ width:100%; }

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 900;
    cursor:pointer;
    text-decoration:none;
    user-select:none;
}

.btn.primary{
    background: var(--btn-soft);
    border-color: var(--btn-soft-border);
    color: var(--accent-ink);
    box-shadow: 0 10px 22px rgba(44,138,136,.18);
}

.btn.primary:hover{
    background: rgba(223,240,239,.85);
    border-color: rgba(44,138,136,.28);
}

.btn.ghost{
    background: transparent;
    border-color: rgba(15,23,42,.14);
    color: var(--ink);
}

.auth-divider{
    height:1px;
    background: rgba(15,23,42,.08);
    margin: 18px 0 14px;
}

.auth-bottom-links{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
    font-size: 13px;
}

.auth-bottom-links a{
    color: var(--accent-ink);
    text-decoration:none;
    font-weight: 700;
}

.auth-bottom-links a:hover{ text-decoration: underline; }

/* animation */
.fade-in{
    animation: fadeInUp .6s ease forwards;
    opacity:0;
}
@keyframes fadeInUp{
    from{ transform: translateY(18px); opacity:0; }
    to{ transform: translateY(0); opacity:1; }
}

@media(max-width:520px){
    .auth-card{ padding: 26px; }
    .auth-bottom-links{ justify-content:center; }
}

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    padding-right:44px;
}

.toggle-password{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    cursor:pointer;
    font-size:16px;
    opacity:.6;
}

.toggle-password:hover{
    opacity:1;
}