/* ================================================================
   DjimanBo Web 2026 — Brand foundation / Public commercial shell
   Loaded LAST so legacy AppKit-era rules cannot override the system.
   ================================================================ */
:root {
    --djb-navy: #0D1B3D;
    --djb-navy-2: #06375A;
    --djb-teal: #00A79D;
    --djb-teal-dark: #00877F;
    --djb-red: #E53935;
    --djb-orange: #FF8C00;
    --djb-bg: #F2F3F5;
    --djb-surface: #FFFFFF;
    --djb-text: #101828;
    --djb-muted: #667085;
    --djb-line: #E6EAF0;
    --djb-soft-teal: #E9F8F6;
    --djb-soft-navy: #EFF3F9;
    --djb-radius-sm: 12px;
    --djb-radius: 18px;
    --djb-radius-lg: 28px;
    --djb-shadow-sm: 0 8px 22px rgba(13,27,61,.06);
    --djb-shadow: 0 20px 55px rgba(13,27,61,.10);
    --djb-gradient: linear-gradient(135deg, #0D1B3D 0%, #073A57 58%, #007D79 100%);

    --sk-header: var(--djb-navy);
    --sk-action: var(--djb-teal);
    --sk-provider: var(--djb-teal-dark);
    --sk-soft: var(--djb-soft-teal);
    --sk-bg: var(--djb-bg);
    --sk-card: var(--djb-surface);
    --sk-text: var(--djb-text);
    --sk-muted: var(--djb-muted);
    --sk-border: rgba(13,27,61,.10);
    --sk-shadow: var(--djb-shadow-sm);
    --sk-hero: var(--djb-gradient);
    --sk-button: linear-gradient(135deg, #009E95, #007A78);
}

html { scroll-behavior: smooth; }
body {
    background: var(--djb-bg);
    color: var(--djb-text);
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ---------- public header ---------- */
.sk-public-nav {
    position: sticky;
    top: 0;
    z-index: 10020;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid rgba(13,27,61,.07) !important;
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 8px 30px rgba(13,27,61,.035);
}
.sk-public-nav__inner {
    width: min(1240px, calc(100% - 40px));
    min-height: 78px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
.djb-web-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    text-decoration: none;
}
.djb-web-brand__mark {
    width: 47px;
    height: 47px;
    object-fit: contain;
    display: block;
}
.djb-web-brand__copy { display: grid; line-height: 1; }
.djb-web-brand__name {
    color: var(--djb-navy);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
}
.djb-web-brand__tag {
    margin-top: 6px;
    color: var(--djb-teal-dark);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.sk-public-nav__links {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px !important;
}
.sk-public-nav__links > a {
    padding: 10px 13px;
    border-radius: 999px;
    color: #475467 !important;
    font-size: 13px;
    font-weight: 650 !important;
    text-decoration: none;
    transition: .18s ease;
}
.sk-public-nav__links > a:hover,
.sk-public-nav__links > a.active {
    color: var(--djb-navy) !important;
    background: var(--djb-soft-navy);
}
.sk-public-nav__actions { display:flex; align-items:center; gap:9px; }
.sk-link-btn, .sk-join-btn {
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    text-decoration: none;
}
.sk-link-btn { color:var(--djb-navy)!important; background:#fff; border:1px solid var(--djb-line); }
.sk-join-btn { color:#fff!important; background:linear-gradient(135deg,var(--djb-teal),var(--djb-teal-dark))!important; box-shadow:0 8px 22px rgba(0,167,157,.19); }

/* ---------- homepage hero ---------- */
.sk-home-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 0 82px !important;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(0,167,157,.23), transparent 31%),
        radial-gradient(circle at 7% 100%, rgba(0,167,157,.12), transparent 28%),
        var(--djb-gradient) !important;
}
.sk-home-hero::before {
    content:"";
    position:absolute;
    width:480px;height:480px;
    right:-180px;top:-260px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    box-shadow:0 0 0 54px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.018);
}
.sk-home-hero__inner {
    position:relative;
    z-index:1;
    width:min(1240px,calc(100% - 40px)) !important;
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.82fr) !important;
    gap:72px !important;
    align-items:center;
}
.sk-eyebrow span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#E8FFFC;
    background:rgba(255,255,255,.08);
    font-size:12px;
    font-weight:700;
    backdrop-filter: blur(12px);
}
.sk-home-hero__content h1 {
    max-width:780px !important;
    margin:20px 0 18px !important;
    color:#fff !important;
    font-size:clamp(2.9rem,5.1vw,5.25rem) !important;
    line-height:.99 !important;
    letter-spacing:-.055em !important;
    font-weight:800 !important;
}
.sk-home-hero__content h1 span { display:block; color:#88E2DC; }
.sk-hero-lead {
    max-width:700px !important;
    margin:0;
    color:rgba(255,255,255,.79)!important;
    font-size:1.04rem!important;
    line-height:1.76!important;
}
.sk-hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
.sk-btn-hero-primary,.sk-btn-hero-secondary {
    min-height:50px;
    padding:0 20px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:750!important;
    text-decoration:none;
}
.sk-btn-hero-primary { color:#fff!important; background:linear-gradient(135deg,#03B8AD,#008E87)!important; box-shadow:0 14px 30px rgba(0,0,0,.16); }
.sk-btn-hero-secondary { color:#fff!important; border:1px solid rgba(255,255,255,.22)!important; background:rgba(255,255,255,.08)!important; backdrop-filter:blur(10px); }
.sk-hero-assurances { display:flex; flex-wrap:wrap; gap:18px; margin-top:25px; color:rgba(255,255,255,.73); font-size:12px; font-weight:600; }
.sk-hero-assurances span { display:inline-flex; align-items:center; gap:7px; }
.sk-hero-assurances i { color:#72DDD6; }

.sk-home-hero__visual { min-height:430px; position:relative; }
.sk-visual-card {
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 28px 70px rgba(1,10,30,.24)!important;
    backdrop-filter:blur(18px);
}
.sk-visual-card-main {
    position:absolute;
    inset:54px 22px auto 22px;
    min-height:270px;
    padding:26px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    color:var(--djb-text)!important;
}
.sk-visual-card-main h2 { color:var(--djb-navy)!important; font-size:1.55rem!important; line-height:1.2!important; }
.sk-visual-card-main small { color:#667085!important; }
.sk-visual-icon { background:var(--djb-soft-teal)!important; color:var(--djb-teal-dark)!important; }
.sk-status-pill { color:#087B67!important; background:#E9F8F2!important; }
.sk-visual-progress { background:#EDF1F5!important; }
.sk-visual-progress span { background:linear-gradient(90deg,var(--djb-teal),#2FC7BE)!important; }
.sk-visual-card-profile {
    position:absolute!important;
    left:-6px!important;
    bottom:25px!important;
    width:260px!important;
    padding:15px 16px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.96)!important;
    color:var(--djb-text)!important;
}
.sk-visual-card-profile small { color:#667085!important; }
.sk-visual-card-message {
    position:absolute!important;
    right:-6px!important;
    top:0!important;
    max-width:230px!important;
    padding:13px 15px!important;
    border-radius:17px!important;
    color:#fff!important;
    background:rgba(0,167,157,.90)!important;
}

/* ---------- public sections ---------- */
.sk-home-intro,.sk-home-providers,.sk-app-showcase,.sk-trust-section,.sk-audience-inner {
    width:min(1180px,calc(100% - 40px))!important;
    margin-inline:auto!important;
}
.sk-home-intro { padding:88px 0 70px!important; }
.sk-section-heading > span,.sk-trust-kicker,.sk-app-showcase__copy > span {
    color:var(--djb-teal-dark)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.10em!important;
    text-transform:uppercase;
}
.sk-section-heading h2,.sk-trust-copy h2,.sk-app-showcase__copy h2,.sk-final-cta h2 {
    color:var(--djb-navy)!important;
    font-weight:800!important;
    letter-spacing:-.04em!important;
}
.sk-section-heading p,.sk-step-card p,.sk-audience-card p,.sk-trust-copy p,.sk-app-showcase__copy p { color:var(--djb-muted)!important; }
.sk-steps-grid { gap:16px!important; }
.sk-step-card {
    border:1px solid var(--djb-line)!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:var(--djb-shadow-sm)!important;
    transition:transform .18s ease,box-shadow .18s ease;
}
.sk-step-card:hover { transform:translateY(-3px); box-shadow:var(--djb-shadow)!important; }
.sk-step-number { color:#98A2B3!important; font-size:11px!important; letter-spacing:.12em; }
.sk-step-icon,.sk-audience-icon { background:var(--djb-soft-teal)!important; color:var(--djb-teal-dark)!important; }

.sk-audience-section { background:#fff!important; padding:82px 0!important; }
.sk-audience-grid { gap:16px!important; }
.sk-audience-card {
    border:1px solid var(--djb-line)!important;
    border-radius:22px!important;
    box-shadow:none!important;
    background:#fff!important;
}
.sk-audience-card::before { display:none!important; }
.sk-audience-card a { color:var(--djb-navy)!important; font-weight:750!important; }
.sk-audience-card:hover { border-color:rgba(0,167,157,.30)!important; box-shadow:var(--djb-shadow-sm)!important; }

.sk-trust-section { margin-top:80px!important; padding:42px!important; border-radius:28px!important; background:var(--djb-navy)!important; color:#fff!important; box-shadow:var(--djb-shadow); }
.sk-trust-copy h2,.sk-trust-copy p { color:#fff!important; }
.sk-trust-copy p { color:rgba(255,255,255,.72)!important; }
.sk-trust-kicker { color:#75DDD6!important; }
.sk-text-link { color:#78DDD7!important; }
.sk-trust-list article { background:rgba(255,255,255,.075)!important; border-color:rgba(255,255,255,.10)!important; }
.sk-trust-list article i { color:#62D8D0!important; }
.sk-trust-list article strong { color:#fff!important; }
.sk-trust-list article span { color:rgba(255,255,255,.68)!important; }

.sk-home-providers { padding:84px 0!important; }
.sk-app-showcase { margin:0 auto 80px!important; padding:48px!important; border-radius:30px!important; border:1px solid var(--djb-line)!important; background:#fff!important; box-shadow:var(--djb-shadow-sm)!important; }
.sk-phone-preview { border-color:rgba(13,27,61,.10)!important; box-shadow:var(--djb-shadow)!important; }
.sk-phone-screen { background:#F8FAFC!important; }
.sk-phone-card,.sk-phone-row { background:#EAF4F5!important; }

.sk-final-cta {
    width:min(1180px,calc(100% - 40px))!important;
    margin:0 auto 82px!important;
    padding:44px 48px!important;
    border-radius:30px!important;
    background:linear-gradient(135deg,#0D1B3D 0%,#063A55 68%,#007B77 100%)!important;
    box-shadow:var(--djb-shadow)!important;
}
.sk-final-cta h2 { color:#fff!important; }

/* ---------- footer ---------- */
.sk-footer {
    margin-top:0!important;
    padding:60px 0 24px!important;
    background:#081633!important;
    color:#B8C4D6!important;
}
.sk-footer-main { display:grid!important; grid-template-columns:minmax(260px,1.05fr) minmax(0,1.7fr)!important; gap:72px!important; }
.djb-footer-brand { display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:18px; }
.djb-footer-brand img { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.15)); }
.djb-footer-brand strong { color:#fff; font-size:20px; line-height:1; }
.djb-footer-brand span { display:block; margin-top:6px; color:#5DD6CE; font-size:8px; font-weight:700; letter-spacing:.23em; text-transform:uppercase; }
.sk-footer-about p { max-width:440px; color:#A7B5CA!important; line-height:1.75!important; }
.sk-footer-links { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; }
.sk-footer h4 { font-size:12px!important; text-transform:uppercase; letter-spacing:.08em; color:#fff!important; }
.sk-footer a { color:#A7B5CA!important; text-decoration:none; font-size:13px; }
.sk-footer a:hover { color:#fff!important; }
.sk-footer-promises span { color:#C9D4E3!important; background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.08)!important; }
.sk-footer-bottom { margin-top:42px!important; padding-top:20px!important; border-top:1px solid rgba(255,255,255,.08)!important; color:#7789A5!important; font-size:12px!important; }

@media(max-width:1024px){
    .sk-public-nav__inner,.sk-home-hero__inner { width:min(100% - 28px,1240px)!important; }
    .sk-home-hero__inner { grid-template-columns:1fr!important; gap:34px!important; }
    .sk-home-hero__visual { width:min(100%,600px); min-height:390px; }
    .sk-footer-main { grid-template-columns:1fr!important; gap:38px!important; }
}
@media(max-width:820px){
    .sk-public-nav__inner { min-height:68px; }
    .djb-web-brand__mark { width:42px;height:42px; }
    .djb-web-brand__copy { display:none; }
    .sk-public-nav__links { display:none!important; }
    .sk-home-hero { padding:52px 0 58px!important; }
    .sk-home-hero__content h1 { font-size:clamp(2.55rem,11vw,4rem)!important; }
    .sk-home-hero__visual { display:none; }
    .sk-home-intro,.sk-home-providers,.sk-app-showcase,.sk-trust-section,.sk-audience-inner,.sk-final-cta { width:min(100% - 24px,1180px)!important; }
    .sk-trust-section,.sk-app-showcase,.sk-final-cta { padding:28px!important; border-radius:24px!important; }
    .sk-footer { padding-bottom:104px!important; }
    .sk-footer-links { grid-template-columns:1fr 1fr!important; }
}
@media(max-width:560px){
    .sk-public-nav__actions .sk-auth-label { display:none; }
    .sk-auth-icon { display:inline-block!important; }
    .sk-link-btn,.sk-join-btn { width:42px!important; min-width:42px!important; height:42px!important; min-height:42px!important; padding:0!important; }
    .sk-home-hero__content h1 { font-size:clamp(2.3rem,12vw,3.2rem)!important; }
    .sk-hero-lead { font-size:.95rem!important; }
    .sk-hero-actions { display:grid; grid-template-columns:1fr; }
    .sk-btn-hero-primary,.sk-btn-hero-secondary { width:100%; }
    .sk-hero-assurances { gap:10px 16px; }
    .sk-footer-links { grid-template-columns:1fr!important; }
    .sk-footer-bottom { display:grid!important; gap:8px!important; }
}

/* ================================================================
   Phase 2 — Public directory gallery + Authentication / onboarding
   2026-09-02
   ================================================================ */

/* ---------- Provider / seller directories: compact marketplace gallery ---------- */
.provider-directory-page,
.seller-directory-page {
    padding-bottom: 72px;
}

.provider-grid,
.seller-grid,
.provider-directory-page .sk-grid-cards,
.seller-directory-page .sk-grid-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch;
}

.provider-grid .sk-profile-card,
.seller-grid .sk-profile-card,
.provider-directory-page .sk-profile-card,
.seller-directory-page .sk-profile-card {
    min-width: 0 !important;
    min-height: 280px !important;
    height: 100%;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column;
    border: 1px solid rgba(13,27,61,.085) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(13,27,61,.055) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.provider-grid .sk-profile-card:hover,
.seller-grid .sk-profile-card:hover,
.provider-directory-page .sk-profile-card:hover,
.seller-directory-page .sk-profile-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,167,157,.24) !important;
    box-shadow: 0 18px 40px rgba(13,27,61,.09) !important;
}

.provider-grid .sk-profile-head,
.seller-grid .sk-profile-head,
.provider-directory-page .sk-profile-head,
.seller-directory-page .sk-profile-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
}

.provider-grid .sk-avatar,
.seller-grid .sk-avatar,
.provider-directory-page .sk-avatar,
.seller-directory-page .sk-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--djb-navy), #075967) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.provider-grid .sk-profile-head h3,
.seller-grid .sk-profile-head h3,
.provider-directory-page .sk-profile-head h3,
.seller-directory-page .sk-profile-head h3 {
    margin: 0 !important;
    color: var(--djb-navy) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.provider-grid .sk-profile-head p,
.seller-grid .sk-profile-head p,
.provider-directory-page .sk-profile-head p,
.seller-directory-page .sk-profile-head p {
    margin: 3px 0 0 !important;
    color: var(--djb-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.provider-grid .sk-tags,
.seller-grid .sk-tags,
.provider-directory-page .sk-tags,
.seller-directory-page .sk-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 14px !important;
}

.provider-grid .sk-tags span,
.seller-grid .sk-tags span,
.provider-directory-page .sk-tags span,
.seller-directory-page .sk-tags span {
    min-height: 26px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(0,167,157,.11) !important;
    border-radius: 999px !important;
    background: var(--djb-soft-teal) !important;
    color: #087B74 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

.provider-grid .sk-card-text,
.seller-grid .sk-card-text,
.provider-directory-page .sk-card-text,
.seller-directory-page .sk-card-text {
    flex: 1;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 13px 0 14px !important;
    border-top: 1px solid rgba(13,27,61,.065);
    color: #667085 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
}

.provider-grid .sk-card-footer,
.seller-grid .sk-card-footer,
.provider-directory-page .sk-card-footer,
.seller-directory-page .sk-card-footer {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(13,27,61,.065) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 7px !important;
}

.provider-grid .sk-card-footer strong,
.seller-grid .sk-card-footer strong,
.provider-directory-page .sk-card-footer strong,
.seller-directory-page .sk-card-footer strong {
    color: var(--djb-navy) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.provider-grid .sk-card-footer span,
.seller-grid .sk-card-footer span,
.provider-directory-page .sk-card-footer span,
.seller-directory-page .sk-card-footer span {
    color: #98A2B3 !important;
    font-size: 10.5px !important;
}

.provider-grid .sk-card-footer a,
.seller-grid .sk-card-footer a,
.provider-directory-page .sk-card-footer a,
.seller-directory-page .sk-card-footer a {
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--djb-navy), #075967) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.provider-directory-page .pd-result-bar,
.seller-directory-page .pd-result-bar {
    margin: 16px 0 12px !important;
}

@media (max-width: 1180px) {
    .provider-grid,
    .seller-grid,
    .provider-directory-page .sk-grid-cards,
    .seller-directory-page .sk-grid-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .provider-grid,
    .seller-grid,
    .provider-directory-page .sk-grid-cards,
    .seller-directory-page .sk-grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 580px) {
    .provider-grid,
    .seller-grid,
    .provider-directory-page .sk-grid-cards,
    .seller-directory-page .sk-grid-cards {
        grid-template-columns: 1fr !important;
    }
    .provider-grid .sk-profile-card,
    .seller-grid .sk-profile-card,
    .provider-directory-page .sk-profile-card,
    .seller-directory-page .sk-profile-card {
        min-height: 0 !important;
        padding: 17px !important;
    }
}

/* ---------- Authentication and onboarding: unified DjB production shell ---------- */
:root {
    --sk-auth-bg: var(--djb-bg);
    --sk-auth-card: #fff;
    --sk-auth-text: var(--djb-text);
    --sk-auth-muted: var(--djb-muted);
    --sk-auth-soft: var(--djb-soft-teal);
    --sk-auth-primary: var(--djb-teal-dark);
    --sk-auth-primary-dark: var(--djb-navy);
    --sk-auth-provider: var(--djb-teal-dark);
    --sk-auth-provider-dark: var(--djb-navy);
    --sk-auth-border: rgba(13,27,61,.105);
    --sk-auth-shadow: 0 18px 50px rgba(13,27,61,.08);
    --sk-auth-radius: 26px;
}

.skan-auth-page,
.sk-auth-page {
    min-height: calc(100vh - 78px) !important;
    padding: 46px 20px 78px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(0,167,157,.07), transparent 28%),
        radial-gradient(circle at 92% 84%, rgba(13,27,61,.055), transparent 30%),
        var(--djb-bg) !important;
}

.skan-auth-card,
.skan-auth-card-wide,
.sk-auth-card {
    border: 1px solid rgba(13,27,61,.085) !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: var(--djb-shadow) !important;
}

.skan-auth-card {
    width: min(100%, 540px) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
}

.skan-auth-card-wide {
    width: min(100%, 920px) !important;
}

.skan-auth-head {
    position: relative;
    padding: 30px 34px 18px !important;
    text-align: left !important;
}

.skan-auth-head::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 54px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--djb-teal), #43C7BF);
}

.skan-auth-head.text-center {
    text-align: center !important;
}
.skan-auth-head.text-center::before {
    left: 50%;
    transform: translateX(-50%);
}

.skan-auth-kicker {
    min-height: 30px !important;
    margin-bottom: 14px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0,167,157,.12) !important;
    background: var(--djb-soft-teal) !important;
    color: var(--djb-teal-dark) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.skan-auth-title {
    max-width: 760px;
    color: var(--djb-navy) !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

.skan-auth-subtitle {
    max-width: 720px !important;
    margin: 10px 0 0 !important;
    color: var(--djb-muted) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}

.skan-auth-head.text-center .skan-auth-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
}

.skan-auth-body {
    padding: 14px 34px 34px !important;
}

.skan-auth-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap: 18px !important;
    row-gap: 2px !important;
}

.skan-auth-field {
    min-width: 0;
    margin-bottom: 16px !important;
}

.skan-auth-label {
    margin-bottom: 7px !important;
    color: #475467 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
}

.skan-auth-input,
.skan-auth-select,
.skan-auth-textarea,
.skan-auth-phone {
    min-height: 50px !important;
    border-color: rgba(13,27,61,.11) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.02) !important;
}

.skan-auth-input,
.skan-auth-select,
.skan-auth-textarea {
    padding: 12px 14px !important;
    color: #1D2939 !important;
    font-size: 13px !important;
    font-weight: 550 !important;
}

.skan-auth-phone-prefix {
    min-width: 86px !important;
    padding: 0 12px !important;
    border-right-color: rgba(13,27,61,.09) !important;
    background: #F5F8FA !important;
    color: var(--djb-navy) !important;
    font-size: 12px !important;
}

.skan-auth-input:focus,
.skan-auth-select:focus,
.skan-auth-textarea:focus,
.skan-auth-phone:focus-within {
    border-color: rgba(0,167,157,.55) !important;
    box-shadow: 0 0 0 4px rgba(0,167,157,.09) !important;
    background: #fff !important;
}

.skan-auth-progress {
    margin: 2px 0 28px !important;
    padding: 0 4px !important;
}
.skan-auth-progress-line {
    left: 36px !important;
    right: 36px !important;
    top: 17px !important;
    background: #E9EDF2 !important;
}
.skan-auth-progress-fill {
    left: 36px !important;
    top: 17px !important;
    background: linear-gradient(90deg, var(--djb-navy), var(--djb-teal)) !important;
}
.skan-auth-step-bubble {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #E5EAF0;
    background: #F3F5F7 !important;
    color: #98A2B3 !important;
    font-size: 11px !important;
}
.skan-auth-step.active .skan-auth-step-bubble,
.skan-auth-step.done .skan-auth-step-bubble {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--djb-navy), var(--djb-teal-dark)) !important;
}
.skan-auth-step-title {
    font-size: 10.5px !important;
    font-weight: 750 !important;
}

.skan-auth-btn-primary,
.skan-auth-actions button[type="submit"] {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--djb-navy), #075967 62%, var(--djb-teal-dark)) !important;
    box-shadow: 0 10px 24px rgba(13,27,61,.15) !important;
}
.skan-auth-btn-secondary {
    min-height: 48px !important;
    border: 1px solid rgba(13,27,61,.10) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--djb-navy) !important;
    box-shadow: none !important;
}

.skan-auth-alert-error,
.skan-auth-alert-success {
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Account type selector: clean SaaS tile grid */
.skan-auth-account-grid {
    padding: 8px 34px 22px !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
}
.skan-auth-account-card {
    min-height: 172px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    border-color: rgba(13,27,61,.085) !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(13,27,61,.035) !important;
}
.skan-auth-account-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0,167,157,.28) !important;
    box-shadow: 0 14px 30px rgba(13,27,61,.075) !important;
}
.skan-auth-account-icon,
.skan-auth-account-card.sk-provider .skan-auth-account-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    margin-bottom: 12px !important;
    color: var(--djb-teal-dark) !important;
    background: var(--djb-soft-teal) !important;
    box-shadow: none !important;
}
.skan-auth-account-title {
    color: var(--djb-navy) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
.skan-auth-account-description {
    color: var(--djb-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}
.skan-auth-account-footer,
.skan-auth-account-card.sk-provider .skan-auth-account-footer {
    color: var(--djb-teal-dark) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}
.skan-auth-bottom-link {
    padding: 0 34px 30px !important;
    color: var(--djb-muted) !important;
    font-size: 12.5px !important;
}
.skan-auth-bottom-link a,
.skan-auth-link {
    color: var(--djb-teal-dark) !important;
}

/* Legacy /register choice page mapped to the same system */
.sk-auth-page .sk-auth-card {
    width: min(100%, 820px) !important;
    margin: 0 auto;
    padding: 30px !important;
    border-radius: 26px !important;
}
.sk-auth-page .sk-auth-head span {
    color: var(--djb-teal-dark) !important;
}
.sk-auth-page .sk-auth-head h1 {
    color: var(--djb-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}
.sk-auth-page .sk-auth-head p {
    color: var(--djb-muted) !important;
}
.sk-role-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
}
.sk-role-card {
    min-height: 170px !important;
    padding: 20px !important;
    border: 1px solid rgba(13,27,61,.09) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(13,27,61,.04) !important;
    text-align: left !important;
}
.sk-role-card:hover {
    border-color: rgba(0,167,157,.26) !important;
    box-shadow: 0 14px 30px rgba(13,27,61,.07) !important;
}
.sk-role-card strong { color: var(--djb-navy) !important; }
.sk-role-card small { color: var(--djb-muted) !important; }
.sk-auth-bottom a { color: var(--djb-teal-dark) !important; }

@media (max-width: 760px) {
    .skan-auth-page,
    .sk-auth-page {
        padding: 20px 12px 52px !important;
    }
    .skan-auth-card,
    .skan-auth-card-wide,
    .sk-auth-page .sk-auth-card {
        border-radius: 20px !important;
    }
    .skan-auth-head {
        padding: 25px 20px 14px !important;
    }
    .skan-auth-head::before { left: 20px; }
    .skan-auth-body { padding: 12px 20px 24px !important; }
    .skan-auth-grid,
    .skan-auth-account-grid,
    .sk-role-grid {
        grid-template-columns: 1fr !important;
    }
    .skan-auth-account-grid { padding: 6px 20px 18px !important; }
    .skan-auth-bottom-link { padding: 0 20px 24px !important; }
    .sk-auth-page .sk-auth-card { padding: 22px 18px !important; }
}