/* ==========================================================
   Portal2 Enterprise Design System
   Shared foundation for eSignare, RON, Yadi and Portal2
   Backward-compatible with the eSignare RC1 public website
========================================================== */

:root{
    /* Brand */
    --navy:#0b2c4d;
    --blue:#1e63b5;
    --green:#16a34a;
    --green2:#22c55e;
    --gold:#f59e0b;
    --red:#dc2626;
    --purple:#7c3aed;

    /* Semantic brand aliases */
    --brand-primary:var(--navy);
    --brand-secondary:var(--blue);
    --brand-accent:var(--green);

    /* Surfaces and text */
    --bg:#f4f7fb;
    --surface:#ffffff;
    --surface-subtle:#eef4fb;
    --surface-muted:#e8eef6;
    --white:#ffffff;
    --text:#0f172a;
    --text-soft:#334155;
    --muted:#64748b;
    --border:#dbe4ef;
    --border-strong:#c5d2e3;

    /* Status */
    --success:#15803d;
    --success-bg:#ecfdf3;
    --warning:#b45309;
    --warning-bg:#fff7ed;
    --danger:#b91c1c;
    --danger-bg:#fef2f2;
    --info:#1d4ed8;
    --info-bg:#eff6ff;

    /* Typography */
    --font-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --text-xs:.75rem;
    --text-sm:.875rem;
    --text-md:1rem;
    --text-lg:1.125rem;
    --text-xl:1.375rem;
    --text-2xl:1.875rem;
    --text-3xl:2.375rem;
    --display-1:clamp(2.375rem,5vw,3.5rem);
    --display-2:clamp(2rem,4vw,2.75rem);
    --line-tight:1.12;
    --line-normal:1.5;
    --line-relaxed:1.7;

    /* Spacing */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:28px;
    --space-8:32px;
    --space-9:40px;
    --space-10:48px;
    --space-12:64px;
    --space-14:72px;

    /* Radius */
    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:28px;
    --radius-pill:999px;

    /* Shadows */
    --shadow-xs:0 2px 8px rgba(11,44,77,.06);
    --shadow-sm:0 8px 20px rgba(11,44,77,.08);
    --shadow-md:0 12px 30px rgba(11,44,77,.10);
    --shadow:0 18px 45px rgba(11,44,77,.12);
    --shadow-lg:0 24px 60px rgba(11,44,77,.16);

    /* Layout */
    --container:1180px;
    --container-wide:1280px;
    --header-height:82px;

    /* Motion */
    --transition-fast:150ms ease;
    --transition:250ms ease;
}

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

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

html{
    scroll-behavior:smooth;
    text-size-adjust:100%;
}

body{

    font-family:var(--font-sans);

    background:var(--bg);

    color:var(--text);

}

img{

    max-width:100%;
    display:block;

}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(30,99,181,.25);
    outline-offset:2px;
}

main{

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

}

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

.wrap{

    width:100%;
    max-width:var(--container);

    margin:auto;

    padding:0 24px;

}

.section{

    padding:60px 0;

}

.section-tight{

    padding:26px 0;

}

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

.public-header{

    background:var(--surface);

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

    position:sticky;

    top:0;

    z-index:999;

}

.public-header-inner{
    max-width:var(--container-wide);
    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;
    min-height:42px;
    min-width:max-content;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    background:var(--surface);
    color:var(--navy);
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
    flex-shrink:0;
    transition:var(--transition);
}

.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:var(--radius-pill);

    background:var(--surface);

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

    color:var(--navy);

    font-weight:900;

    transition:var(--transition);

}

.login-link:hover{

    border-color:var(--blue);

    color:var(--blue);

}

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

.trial-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:var(--radius-pill);

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

    color:#fff;

    font-weight:900;

    animation:trialPulse 1.8s infinite;

    transition:var(--transition);

}

.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:var(--radius-pill);

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

    color:#fff;

    font-weight:900;

    font-size:15px;

    border:0;

    cursor:pointer;

    transition:var(--transition);

    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:var(--surface);

    color:var(--blue);

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

    box-shadow:none;

}

.btn.outline-blue:hover{

    background:var(--soft);

}

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

.page-toolbar{

    max-width:var(--container);

    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:var(--surface);

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

    border-radius:var(--radius-pill);

    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:var(--text-soft);

    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:var(--surface);

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

    border-radius:var(--radius-xl);

    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:var(--surface);

    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:var(--text-soft);

    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:var(--surface);

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

    border-radius:var(--radius-lg);

    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:var(--surface);

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

    border-radius:var(--radius-xl);

    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:var(--text-soft);

}

.content-card ul{

    padding-left:22px;

}

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

.trust-grid{

    display:grid;

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

    gap:24px;

}

.trust-card{

    background:var(--surface);

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

    border-radius:var(--radius-lg);

    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:var(--surface);

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

    border-radius:var(--radius-xl);

    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:var(--radius-pill);

    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:var(--radius-sm);

    background:var(--surface);

    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-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;
}


/* ==========================================================
   PORTAL2 ENTERPRISE COMPONENT LAYER
========================================================== */

.portal-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:var(--bg);
}

.portal-shell > main{
    flex:1;
}

.portal-container,
.portal-wrap{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-6);
}

.portal-section{
    padding-block:var(--space-12);
}

.portal-section--compact{
    padding-block:var(--space-8);
}

.portal-stack{
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
}

.portal-cluster{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-3);
}

.portal-grid{
    display:grid;
    gap:var(--space-6);
}

.portal-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.portal-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.portal-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

.portal-card,
.portal-widget,
.portal-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.portal-card{
    padding:var(--space-7);
    height:100%;
}

.portal-card--compact{padding:var(--space-5);}
.portal-card--hero{padding:var(--space-9);border-radius:var(--radius-xl);box-shadow:var(--shadow);}
.portal-card--flat{box-shadow:none;}
.portal-card--interactive{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.portal-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.portal-card--success{border-color:#86efac;background:var(--success-bg);}
.portal-card--warning{border-color:#fdba74;background:var(--warning-bg);}
.portal-card--danger{border-color:#fca5a5;background:var(--danger-bg);}
.portal-card--info{border-color:#93c5fd;background:var(--info-bg);}

.portal-card__header,
.portal-panel__header,
.portal-widget__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.portal-card__title,
.portal-panel__title,
.portal-widget__title{
    color:var(--navy);
    font-size:var(--text-xl);
    line-height:var(--line-tight);
}

.portal-card__description,
.portal-panel__description,
.portal-widget__description{
    color:var(--muted);
    line-height:var(--line-relaxed);
}

.portal-hero{
    padding:var(--space-14) 0 var(--space-10);
}

.portal-hero--compact{
    padding:var(--space-9) 0 var(--space-7);
}

.portal-hero__content{
    max-width:820px;
}

.portal-hero--center .portal-hero__content{
    margin-inline:auto;
    text-align:center;
}

.portal-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-bottom:var(--space-4);
    color:var(--blue);
    font-size:var(--text-sm);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.portal-hero h1,
.portal-display{
    color:var(--navy);
    font-size:var(--display-1);
    line-height:var(--line-tight);
    letter-spacing:-.035em;
}

.portal-hero p,
.portal-lead{
    margin-top:var(--space-5);
    color:var(--text-soft);
    font-size:var(--text-lg);
    line-height:var(--line-relaxed);
}

.portal-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-3);
    margin-top:var(--space-6);
}

.portal-btn,
.btn,
.btn-blue,
.back-btn,
.login-link,
.trial-btn{
    min-height:44px;
    line-height:1;
}

.portal-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    min-height:44px;
    padding:12px 20px;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:var(--white);
    font-size:var(--text-sm);
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(30,99,181,.18);
    transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition);
}

.portal-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(30,99,181,.24);}
.portal-btn--secondary{background:var(--surface);color:var(--navy);border-color:var(--border);box-shadow:var(--shadow-xs);}
.portal-btn--success{background:linear-gradient(135deg,var(--green),var(--green2));box-shadow:0 10px 24px rgba(22,163,74,.18);}
.portal-btn--danger{background:linear-gradient(135deg,#b91c1c,#dc2626);box-shadow:0 10px 24px rgba(220,38,38,.18);}
.portal-btn--ghost{background:transparent;color:var(--blue);border-color:transparent;box-shadow:none;}
.portal-btn--sm{min-height:36px;padding:8px 14px;font-size:var(--text-xs);}
.portal-btn--lg{min-height:50px;padding:14px 26px;font-size:var(--text-md);}
.portal-btn:disabled,.portal-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}

.portal-badge,
.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:28px;
    padding:5px 10px;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    font-size:var(--text-xs);
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.portal-badge--neutral,.status-pending{color:#475569;background:#f1f5f9;border-color:#cbd5e1;}
.portal-badge--success,.status-success,.status-completed{color:var(--success);background:var(--success-bg);border-color:#86efac;}
.portal-badge--warning,.status-warning,.status-processing{color:var(--warning);background:var(--warning-bg);border-color:#fdba74;}
.portal-badge--danger,.status-danger{color:var(--danger);background:var(--danger-bg);border-color:#fca5a5;}
.portal-badge--info,.status-info{color:var(--info);background:var(--info-bg);border-color:#93c5fd;}
.portal-badge--enterprise{color:#5b21b6;background:#f5f3ff;border-color:#c4b5fd;}
.portal-badge--notary{color:#92400e;background:#fffbeb;border-color:#fcd34d;}
.portal-badge--archived,.status-archived{color:#475569;background:#e2e8f0;border-color:#cbd5e1;}

.portal-alert,
.portal-banner,
.portal-inline-message{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-5);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    color:var(--text-soft);
    line-height:var(--line-normal);
}

.portal-alert--success{background:var(--success-bg);border-color:#86efac;color:var(--success);}
.portal-alert--warning{background:var(--warning-bg);border-color:#fdba74;color:var(--warning);}
.portal-alert--danger{background:var(--danger-bg);border-color:#fca5a5;color:var(--danger);}
.portal-alert--info{background:var(--info-bg);border-color:#93c5fd;color:var(--info);}

.portal-form-group{margin-bottom:var(--space-5);}
.portal-label{display:block;margin-bottom:var(--space-2);color:var(--navy);font-size:var(--text-sm);font-weight:800;}
.portal-help{margin-top:var(--space-2);color:var(--muted);font-size:var(--text-sm);line-height:var(--line-normal);}
.portal-error{margin-top:var(--space-2);color:var(--danger);font-size:var(--text-sm);font-weight:700;}

.portal-input,
.portal-select,
.portal-textarea,
.portal-search{
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}

.portal-textarea{min-height:140px;resize:vertical;}
.portal-input:hover,.portal-select:hover,.portal-textarea:hover,.portal-search:hover{border-color:var(--border-strong);}
.portal-input:focus,.portal-select:focus,.portal-textarea:focus,.portal-search:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,99,181,.10);outline:0;}
.portal-input[aria-invalid="true"],.portal-select[aria-invalid="true"],.portal-textarea[aria-invalid="true"]{border-color:var(--danger);}

.portal-check{
    display:inline-flex;
    align-items:flex-start;
    gap:var(--space-3);
    color:var(--text-soft);
    cursor:pointer;
}

.portal-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);}

.portal-table-shell{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}

.portal-table-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-5);
    border-bottom:1px solid var(--border);
    background:var(--surface);
}

.portal-table-scroll{overflow:auto;max-width:100%;}

.portal-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    color:var(--text-soft);
    font-size:var(--text-sm);
}

.portal-table th,
.portal-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:middle;
}

.portal-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:#f8fafc;
    color:var(--navy);
    font-size:var(--text-xs);
    font-weight:900;
    letter-spacing:.035em;
    text-transform:uppercase;
    white-space:nowrap;
}

.portal-table tbody tr:hover{background:#f8fbff;}
.portal-table tbody tr:last-child td{border-bottom:0;}
.portal-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);white-space:nowrap;}

.portal-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-5);
    border-top:1px solid var(--border);
}

.portal-metric{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-5);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}

.portal-metric__label{color:var(--muted);font-size:var(--text-sm);font-weight:800;}
.portal-metric__value{color:var(--navy);font-size:var(--text-2xl);font-weight:900;line-height:1;}
.portal-metric__change{font-size:var(--text-sm);font-weight:700;}

.portal-divider{height:1px;background:var(--border);border:0;margin:var(--space-6) 0;}
.portal-muted{color:var(--muted)!important;}
.portal-text-soft{color:var(--text-soft)!important;}
.portal-text-center{text-align:center!important;}
.portal-text-right{text-align:right!important;}
.portal-hidden{display:none!important;}
.portal-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

.fade-in{animation:portalFadeIn .35s ease both;}
.slide-up{animation:portalSlideUp .4s ease both;}
.skeleton-loading{position:relative;overflow:hidden;background:#e7edf5;color:transparent!important;}
.skeleton-loading::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:portalSkeleton 1.4s infinite;}

@keyframes portalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes portalSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes portalSkeleton{100%{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

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

@media(max-width:1024px){

    .portal-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .portal-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}

    .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){

    .portal-container,
    .portal-wrap{padding-inline:18px;}

    .portal-section{padding-block:var(--space-9);}

    .portal-grid--2,
    .portal-grid--3,
    .portal-grid--4{grid-template-columns:1fr;}

    .portal-hero{padding:var(--space-10) 0 var(--space-8);}

    .portal-actions{align-items:stretch;flex-direction:column;}

    .portal-actions .portal-btn{width:100%;}

    .portal-table-toolbar,
    .portal-pagination{align-items:stretch;flex-direction:column;}

    .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){

    .portal-card,
    .portal-card--hero{padding:var(--space-5);}

    .portal-container,
    .portal-wrap{padding-inline:14px;}

    .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;
}