/* ==========================================================
   eSignare RC1
   Public Website Standard Stylesheet
   PART 1
========================================================== */

:root{

    --navy:#0b2c4d;
    --blue:#1e63b5;
    --green:#16a34a;
    --green2:#22c55e;

    --gold:#f59e0b;

    --bg:#f4f7fb;
    --white:#ffffff;

    --text:#0f172a;
    --muted:#64748b;

    --border:#dbe4ef;
    --soft:#eef4fb;

    --shadow:0 18px 45px rgba(11,44,77,.12);

}

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,sans-serif;

    background:var(--bg);

    color:var(--text);

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

main{

    min-height:calc(100vh - 250px);

}

/* ==========================================================
   LAYOUT
========================================================== */

.wrap{

    width:100%;
    max-width:1180px;

    margin:auto;

    padding:0 24px;

}

.section{

    padding:60px 0;

}

.section-tight{

    padding:26px 0;

}

/* ==========================================================
   HEADER
========================================================== */

.public-header{

    background:#fff;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:999;

}

.public-header-inner{
    max-width:1280px;
    margin:auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

/* ==========================================================
   LOGO
========================================================== */

.logo-link{

    display:flex;

    align-items:center;

}

.logo-link img{

    height:48px;

    width:auto;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.public-menu{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    justify-content:center;
}

.public-menu a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid var(--border);
    color:var(--navy);
    font-size:15px;
    font-weight:900;
    transition:.25s;
}

.public-menu a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    min-height:42px;
    min-width:max-content;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
    flex-shrink:0;
    transition:.25s;
}

.public-menu a:hover,
.public-menu a.active{
    background:var(--soft);
    border-color:var(--blue);
    color:var(--blue);
    border-width:1px;      /* never become 2px */
    padding:10px 16px;     /* keep identical */
}

/* ==========================================================
   HEADER ACTIONS
========================================================== */

.public-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

/* Prevent header items from shifting */
.customer-header-nav{
    display:flex;
    align-items:center;
    gap:10px;
}

.customer-header-nav a,
.customer-header-nav button{
    flex-shrink:0;
}

.customer-header-nav a.active,
.customer-header-nav a[aria-current="page"]{
    border-width:1px;
    font-weight:800;
}

.customer-language-button{
    min-width:92px;
    justify-content:center;
    white-space:nowrap;
    flex-shrink:0;
}

/* ==========================================================
   SIGN IN
========================================================== */

.login-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 16px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--navy);

    font-weight:900;

    transition:.25s;

}

.login-link:hover{

    border-color:var(--blue);

    color:var(--blue);

}

/* ==========================================================
   START FREE TRIAL
========================================================== */

.trial-btn{
animation:trialPulse 1.4s infinite;
    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    background:linear-gradient(135deg,var(--green),var(--green2));

    color:#fff;

    font-weight:900;

    animation:trialPulse 1.8s infinite;

    transition:.25s;

}

.trial-btn:hover{

    transform:translateY(-1px);

}

@keyframes trialPulse{

0%{
box-shadow:0 0 0 0 rgba(22,163,74,.45);
}

70%{
box-shadow:0 0 0 12px rgba(22,163,74,0);
}

100%{
box-shadow:0 0 0 0 rgba(22,163,74,0);
}

}
/* ==========================================================
   BUTTONS
========================================================== */

.btn,
.btn-blue{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 22px;

    border-radius:999px;

    background:linear-gradient(135deg,var(--navy),var(--blue));

    color:#fff;

    font-weight:900;

    font-size:15px;

    border:0;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 12px 30px rgba(30,99,181,.20);

}

.btn:hover,
.btn-blue:hover{

    transform:translateY(-2px);

}

.btn.green{

    background:linear-gradient(135deg,var(--green),var(--green2));

    box-shadow:0 12px 30px rgba(22,163,74,.20);

}

.btn.outline-blue{

    background:#fff;

    color:var(--blue);

    border:1px solid var(--blue);

    box-shadow:none;

}

.btn.outline-blue:hover{

    background:var(--soft);

}

/* ==========================================================
   PAGE TOOLBAR
========================================================== */

.page-toolbar{

    max-width:1180px;

    margin:24px auto 10px;

    padding:0 24px;

    display:flex;

    align-items:center;

    gap:22px;

}

.back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:999px;

    color:var(--navy);

    font-weight:900;

    box-shadow:0 8px 18px rgba(11,44,77,.08);

}

.back-btn:hover{

    color:var(--blue);

}

.page-title{

    flex:1;

}

.page-title h1{

    color:var(--navy);

    font-size:34px;

    line-height:1.1;

}

.page-title p{

    margin-top:6px;

    color:var(--muted);

    font-size:17px;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:70px 0 45px;

}

.hero-main{

    text-align:center;

}

.hero-main h1{

    color:var(--navy);

    font-size:56px;

    line-height:1.05;

    letter-spacing:-2px;

}

.hero-main p{

    max-width:780px;

    margin:22px auto 0;

    color:#334155;

    font-size:19px;

    line-height:1.75;

}

/* ==========================================================
   ACCESS CARDS
========================================================== */

.path-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-top:55px;

}

.path-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:28px;

    padding:34px;

    box-shadow:var(--shadow);

    text-align:center;

}

.path-card.signer{

    background:linear-gradient(#fff,#eef6ff);

}

.path-card.workspace{

    background:linear-gradient(#fff,#edfdf4);

}

.path-icon{

    width:76px;

    height:76px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    margin:-68px auto 20px;

    box-shadow:var(--shadow);

}

.path-card h2{

    color:var(--navy);

    font-size:30px;

    margin-bottom:14px;

}

.path-card p{

    color:#334155;

    line-height:1.7;

    max-width:470px;

    margin:auto auto 24px;

}

.btn-row{

    display:grid;

    gap:14px;

}

/* ==========================================================
   TITLES
========================================================== */

.section-title{

    text-align:center;

    margin-bottom:30px;

}

.section-title h2{

    color:var(--navy);

    font-size:38px;

}

.section-title p{

    max-width:760px;

    margin:14px auto 0;

    color:var(--muted);

    line-height:1.7;

}
/* ==========================================================
   INFO CARDS
========================================================== */

.card-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

.info-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:28px;

    box-shadow:var(--shadow);

}

.info-card h3{

    color:var(--navy);

    font-size:22px;

    margin-bottom:12px;

}

.info-card p{

    color:var(--muted);

    line-height:1.7;

}

/* ==========================================================
   CONTENT CARD
========================================================== */

.content-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:28px;

    padding:36px;

    box-shadow:var(--shadow);

    line-height:1.8;

}

.content-card h2,
.content-card h3{

    color:var(--navy);

    margin-bottom:16px;

}

.content-card p,
.content-card li{

    color:#334155;

}

.content-card ul{

    padding-left:22px;

}

/* ==========================================================
   TRUST CENTER
========================================================== */

.trust-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.trust-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:28px;

    box-shadow:var(--shadow);

}

.trust-card h3{

    color:var(--navy);

    margin-bottom:12px;

}

.trust-card p{

    color:var(--muted);

    line-height:1.7;

}

/* ==========================================================
   PRICING
========================================================== */

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:26px;

    align-items:stretch;

}

.pricing-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:28px;

    padding:30px;

    display:flex;

    flex-direction:column;

    box-shadow:var(--shadow);

}

.pricing-card.featured{

    border:2px solid var(--blue);

    transform:translateY(-5px);

}

.plan-badge{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 14px;

    border-radius:999px;

    background:#eef4fb;

    color:var(--blue);

    font-size:12px;

    font-weight:900;

    margin-bottom:18px;

}

.pricing-card h2{

    color:var(--navy);

    margin-bottom:10px;

}

.price{

    color:var(--navy);

    font-size:42px;

    font-weight:900;

    margin:16px 0;

}

.price small{

    font-size:15px;

    color:var(--muted);

}

.pricing-card ul{

    padding-left:20px;

    color:var(--muted);

    line-height:1.9;

    margin-bottom:28px;

}

.pricing-card .btn{

    margin-top:auto;

}

/* ==========================================================
   FORMS
========================================================== */

label{

    display:block;

    margin-bottom:8px;

    color:var(--navy);

    font-weight:900;

}

input,
select,
textarea{

    width:100%;

    padding:14px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#ffffff;

    font-size:15px;

    margin-bottom:18px;

}

textarea{

    min-height:140px;

    resize:vertical;

}
/* ==========================================================
   FOOTER
========================================================== */

.es-footer{

    margin-top:70px;

    background:#071d35;

    color:#cbd5e1;

    text-align:center;

    padding:48px 24px 24px;

}

.es-footer-logo{
    height:72px;
    width:auto;
    margin:0 auto 22px;
}

.es-footer-title{

    color:#ffffff;

    font-size:22px;

    font-weight:900;

    margin-bottom:18px;

}

.es-footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:22px;

}

.es-footer-links a{

    color:#cbd5e1;

    font-weight:800;

}

.es-footer-links a:hover{

    color:#ffffff;

}

.es-footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:20px;

    color:#94a3b8;

    font-size:13px;

}

.es-footer-logo{
    height:42px;
    width:auto;
    margin:0 auto 20px;
}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1024px){

    .card-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .trust-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .public-header-inner{

        flex-direction:column;

        gap:18px;

    }

    .public-menu{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }

    .public-actions{

        width:100%;

        flex-direction:column;

    }

    .login-link,
    .trial-btn{

        width:100%;

    }

    .page-toolbar{

        flex-direction:column;

        align-items:flex-start;

        padding:0 18px;

        gap:14px;

    }

    .hero{

        padding:44px 0 26px;

    }

    .hero-main h1{

        font-size:38px;

    }

    .hero-main p{

        font-size:16px;

    }

    .path-grid{

        grid-template-columns:1fr;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

    .trust-grid{

        grid-template-columns:1fr;

    }

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .pricing-card.featured{

        transform:none;

    }

    .path-card{

        margin-top:36px;

    }

    .btn,
    .btn-blue,
    .btn.green,
    .btn.outline-blue,
    .back-btn{

        width:100%;

    }

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media(max-width:420px){

    .hero-main h1{

        font-size:32px;

    }

    .page-title h1{

        font-size:28px;

    }

    .price{

        font-size:34px;

    }

}
/* ==========================================
   CONTACT SALES
========================================== */

.contact-sales-hero .wrap{
    text-align:left;
}

.contact-sales-hero .hero-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.contact-sales-hero .badge,
.contact-sales-hero h1,
.contact-sales-hero p{
    text-align:left;
    margin-left:0;
    margin-right:0;
}