/* ============================================================
   OLTPRO Landing Page  Vanilla CSS
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --color-primary-dark:   #4A1A6B;
    --color-primary-purple: #651d75;
    --color-primary-light:  #6b1c74;
    --color-accent-orange:  #FF6B35;
    --color-accent-coral:   #C07693;
    --color-accent-blue:    #1E90FF;
    --color-accent-green:   #6EAE3F;
    --color-bg-cream:       #FAF8FC;
    --color-bg-light:       #F5F3F7;
    --color-text-dark:      #1A1A2E;
    --color-text-secondary: #4A5568;
    --color-text-light:     #718096;
    --color-border-light:   #E8E4EC;
    --shadow-sm: 0 1px 3px rgba(74,26,107,0.08);
    --shadow-md: 0 4px 12px rgba(74,26,107,0.1);
    --shadow-lg: 0 10px 40px rgba(74,26,107,0.12);
    --shadow-xl: 0 20px 60px rgba(74,26,107,0.15);
    --font-primary-plus: 'Plus Jakarta Sans', sans-serif;
    --font-primary-inter: 'Inter', sans-serif;
    --font-primary-noto: 'Noto Serif', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 1. Plus Jakarta Sans */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../../../partner/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
/* 2. Noto Serif */
@font-face {
    font-family: 'Noto Serif';
    src: url('../../../partner/fonts/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 62.5% 100%; 
    font-style: normal;
    font-display: swap;
}
/* 3. Inter */
@font-face {
    font-family: 'Inter';
    src: url('../../../partner/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
body, h3, h2, h1, p, td, span, div, li, a { font-family: var(--font-primary-plus) !important; }
body {
    margin: 0;
    color: var(--color-text-dark);
    background: var(--color-bg-cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.topbar, .topbar *, .header, .header *, .header__bar, .header__bar * { line-height: normal; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
p { margin: 0; }
ul, ol, li { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Auto-zoom for very large monitors */
@media (min-width: 1800px) {
    html { zoom: 1.2; }
}

/* ---------- Layout Primitives ---------- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hidden { display: none !important; }

/* ---------- Reveal Animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-primary-dark);
    color: #fff;
    padding: 1.25rem;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cookie-banner__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: center;
}
.cookie-banner p { font-size: 0.875rem; flex: 1; }
.cookie-banner__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
.cookie-banner__buttons .btn { width: 100%; }
@media (min-width: 768px) {
    .cookie-banner__inner { flex-direction: row; text-align: left; }
    .cookie-banner__buttons { flex-direction: row; width: auto; }
    .cookie-banner__buttons .btn { width: auto; }
}

.btn-cookie-primary {
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    background: #fff;
    color: var(--color-primary-dark);
    transition: transform 0.15s;
}
.btn-cookie-primary:hover { transform: translateY(-2px); }

.btn-cookie-secondary {
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background 0.15s;
}
.btn-cookie-secondary:hover { background: rgba(255,255,255,0.1); }

/* Cookie Settings Modal  kept as inline styles in HTML to preserve original design */

/* ============================================================
   HEADER / NAV
   ============================================================ */
.topbar {
    background: var(--color-bg-cream);
    position: sticky;
    top: 0;
    z-index: 51;
    margin: 0;
}
.topbar__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 4px;
}
.topbar__item { font-size: 13px; color: var(--color-text-secondary); }
.topbar__item strong { font-weight: 600; color: var(--color-text-dark); }
.topbar__sep { font-size: 13px; color: #D1D5DB; }
@media (max-width: 1023px) {
    .topbar { display: none; }
}

.header {
    position: sticky;
    top: 30px;
    z-index: 50;
    padding: 8px 0;
    background: #FAF8FC;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    margin-top: -1px;
}
.header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
.header__bar {
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--color-border-light);
    border-radius: 9999px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.header__logo { flex-shrink: 0; line-height: 0; }
.header__logo img { height: 36px; }

.nav-desktop {
    display: none;
    gap: 2px;
    align-items: center;
}
.nav-cta-group {
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .nav-desktop, .nav-cta-group { display: flex; }
}

.olt-pill-nav {
    color: var(--color-text-dark);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 9999px;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.olt-pill-nav:hover { background: var(--color-bg-light); color: var(--color-primary-purple); }

.olt-pill-login {
    color: var(--color-text-dark);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9999px;
    transition: background 0.2s;
    white-space: nowrap;
}
.olt-pill-login:hover { background: var(--color-bg-light); }

.olt-pill-cta {
    display: inline-flex;
    align-items: center;
    background: var(--color-text-dark);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 9999px;
    transition: background 0.2s;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.olt-pill-cta:hover { background: var(--color-primary-purple) !important; }
@media (min-width: 1024px) and (max-width: 1200px) {
    .nav-desktop { gap: 0; }
    .olt-pill-nav { font-size: 13px; padding: 8px 10px; }
    .nav-cta-group { gap: 4px; }
    .olt-pill-cta { padding: 10px 14px; font-size: 13px; }
    .header__bar { padding: 8px 12px; }
}
/* Products Dropdown */
.prod-wrap { position: relative; }
.prod-btn { cursor: pointer; }
.prod-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}
.prod-dropdown-item {
    display: block;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark);
    border-bottom: 1px solid #F0EBF5;
    transition: background 0.15s, color 0.15s;
}
.prod-dropdown-item:last-child { border-bottom: none; }
.prod-dropdown-item:hover { background: #F5F0FA; color: var(--color-primary-purple); }

/* Mobile Nav */
.menu-toggle {
    display: block;
    font-size: 1.25rem;
    color: var(--color-text-dark);
    padding: 0.5rem;
}
@media (min-width: 1024px) {
    .menu-toggle { display: none; }
}

.nav-mobile {
    margin-top: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}
@media (min-width: 1024px) {
    .nav-mobile { display: none !important; }
}
.nav-mobile ul { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-mobile a, .nav-mobile > ul > li > button {
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 0.5rem;
    text-align: left;
    color: var(--color-text-dark);
    transition: background 0.15s, color 0.15s;
}
.nav-mobile a:hover, .nav-mobile > ul > li > button:hover {
    background: var(--color-bg-light);
    color: var(--color-primary-purple);
}
.nav-mobile__prod-toggle { display: flex; align-items: center; justify-content: space-between; }
.nav-mobile__prod-toggle i { font-size: 11px; color: var(--color-primary-purple); transition: transform 0.3s; }

#mobProdToggle .olt-chevron-down {
    background-color: var(--color-primary-purple);
}

#mobProdMenu {
    display: none;
    padding-left: 12px;
    border-left: 3px solid #ddd0ea;
    margin: 4px 0 4px 16px;
}
.nav-mobile__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--color-border-light);
}
.nav-mobile__footer a {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}
.nav-mobile__footer a.login {
    border: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
}
.nav-mobile__footer a.login:hover { background: var(--color-bg-light); }
.nav-mobile__footer a.cta {
    background: var(--color-text-dark);
    color: #fff;
}
.nav-mobile__footer a.cta:hover { background: var(--color-primary-purple); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-wrap {
    position: relative;
    background: var(--color-bg-cream);
    overflow: hidden;
    isolation: isolate;
}
.hero-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 96px;
    background: linear-gradient(to bottom, var(--color-bg-cream) 0%, rgba(249,248,252,0) 100%);
    pointer-events: none;
    z-index: 100;
}
.hero-wrap::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,118,147,0.06) 0%, rgba(249,248,252,0) 60%);
    pointer-events: none;
    transform: translateX(-33%);
}

.hero {
    position: relative;
    z-index: 10;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero { padding: 3.5rem 0 4rem; }
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 2rem;
    }
}

.hero__text {
    position: relative;
    z-index: 20;
    text-align: center;
}
@media (min-width: 1024px) {
    .hero__text { text-align: left; }
}

.hero__announce {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 9999px;
    padding: 6px 16px 6px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 1.75rem;
}
.hero__announce:hover {
    border-color: rgba(101,29,117,0.4);
    box-shadow: var(--shadow-sm);
}
.hero__announce-pill {
    background: var(--color-primary-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 9999px;
}
.hero__announce .olt-icon-arrow {
    font-size: 11px;
    background-color: #718096;
    transition: color 0.15s, transform 0.15s;
}
.hero__announce:hover .olt-icon-arrow {
    background-color: #651D75;
    transform: translateX(2px);
}

.hero__title {
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
}
.hero__title .accent { color: var(--color-primary-purple); }

.hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.625;
    margin: 0 auto 2rem;
    max-width: 520px;
}
@media (min-width: 1024px) {
    .hero__subtitle { margin: 0 0 2rem; }
}
.hero__subtitle strong { font-weight: 600; color: var(--color-text-dark); }
.brand-olt { font-style: normal; font-weight: 800; color: var(--color-primary-purple); }
.brand-pro { font-weight: 800; color: var(--color-primary-purple); }

.hero__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    justify-content: center;
}
@media (min-width: 640px) {
    .hero__ctas { flex-direction: row; }
}
@media (min-width: 1024px) {
    .hero__ctas { justify-content: flex-start; }
}

.btn-primary-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-text-dark);
    color: #fff;
    padding: 14px 28px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.2s;
}
.btn-primary-solid:hover { background: var(--color-primary-purple); color: #fff; }

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-light);
    padding: 14px 28px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.2s;
}
.btn-outline:hover { border-color: var(--color-text-dark); }

.hero__support {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    justify-content: center;
    font-size: 13px;
    color: var(--color-text-light);
}
@media (min-width: 1024px) {
    .hero__support { justify-content: flex-start; }
}
.hero__support strong { font-weight: 600; color: var(--color-text-secondary); }
.hero__support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary-purple);
    font-weight: 600;
}
.hero__support-link:hover { text-decoration: underline; color: var(--color-primary-purple); }
.hero__support-link i { font-size: 10px; }

/* Hero right column card area */
.hero__card-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1024px) {
    .hero__card-col {
        min-height: 580px;
        justify-content: flex-end;
    }
}

/* Mobile-only hero pricing card */
.hero-card-mobile {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 1.5rem;
}
@media (min-width: 1024px) {
    .hero-card-mobile { display: none; }
}

/* Desktop-only hero pricing card wrapper */
.hero-card-desktop-wrap {
    display: none;
    position: relative;
    width: 100%;
    max-width: 560px;
}
@media (min-width: 1024px) {
    .hero-card-desktop-wrap { display: block; }
}

/* The Big Purple Card  used in both mobile and desktop variants */
.price-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(107,28,116,0.5),
                0 10px 25px -10px rgba(192,118,147,0.3);
    border-top: 1px solid rgba(255,255,255,0.2);
}
.price-card--desktop {
    z-index: 10;
    border-radius: 1.5rem;
    box-shadow: 0 30px 80px -20px rgba(107,28,116,0.55),
                0 15px 40px -15px rgba(192,118,147,0.3);
}
.price-card__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary-purple), var(--color-primary-dark), #3d1454);
}
.price-card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent, transparent);
    pointer-events: none;
}
.price-card__faint-logo {
    position: absolute;
    opacity: 0.08;
    pointer-events: none;
    background-image: url('../images/bg-price-card-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.price-card__faint-logo--mobile {
    width: 220px;
    height: 220px;
    bottom: -2.5rem;
    right: -2.5rem;
    opacity: 0.08;
}
.price-card__faint-logo--desktop {
    width: 440px;
    height: 440px;
    bottom: -5rem;
    right: -5rem;
    opacity: 0.07;
}
.price-card__ring-tl {
    position: absolute;
    top: -3rem;
    left: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
}
.price-card__glow-r {
    position: absolute;
    top: 33.333%;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    filter: blur(40px);
    pointer-events: none;
}
.price-card__dots {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    opacity: 0.3;
    pointer-events: none;
    background-image: url('../images/bg-dot-pattern.png');
    background-repeat: repeat; 
}
.price-card__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.price-card--mobile .price-card__content { padding: 1.75rem 1.5rem; }
.price-card--desktop .price-card__content { padding: 3.5rem 3rem; }

.price-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    width: fit-content;
    margin-bottom: 1.25rem;
}
.price-card--desktop .price-card__badge {
    padding: 6px 12px;
    font-size: 10px;
    margin-bottom: 2rem;
}
.price-card__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-green);
    animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

.price-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.price-card--desktop .price-card__header {
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.price-card__logo-wrap { position: relative; flex-shrink: 0; }
.price-card__logo-glow {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    filter: blur(12px);
    transform: scale(1.25);
}
.price-card--desktop .price-card__logo-glow { filter: blur(16px); }
.price-card__logo {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url('../images/bg-price-card-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.price-card--desktop .price-card__logo {
    width: 5rem;
    height: 5rem;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.07)) drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
.price-card__eyebrow {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.6);
    line-height: 1;
    margin-bottom: 4px;
}
.price-card--desktop .price-card__eyebrow {
    font-size: 11px;
    margin-bottom: 8px;
}
.price-card__price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #fff;
}
.price-card--desktop .price-card__price { gap: 4px; }
.price-card__dollar {
    font-size: 1.125rem;
    font-weight: 600;
    margin-right: -2px;
}
.price-card--desktop .price-card__dollar {
    font-size: 1.5rem;
    margin-right: -4px;
}
.price-card__amount {
    font-size: 48px;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.025em;
}
.price-card--desktop .price-card__amount { font-size: 84px; }
.price-card__note {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    margin-top: 4px;
}
.price-card--desktop .price-card__note {
    font-size: 14px;
    margin-top: 8px;
    letter-spacing: 0.025em;
}

.price-card__features {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 0.5rem 0 2rem;
}
.price-card--desktop .price-card__features { display: flex; }
.price-card__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}
.price-card__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 9px;
}

.price-card__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.price-card__stat {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.price-card__stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.price-card--desktop .price-card__stat-num { font-size: 28px; }
.price-card__stat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.price-card--desktop .price-card__stat-label {
    font-size: 10px;
    margin-top: 6px;
}
.price-card__stat-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
}
.price-card--desktop .price-card__stat-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.price-card__stat-sep {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.15);
}
.price-card--desktop .price-card__stat-sep { height: 40px; }

/* Desktop card accents (small decorative elements) */
.hero-card-accent-ring,
.hero-card-accent-dot,
.hero-card-accent-sparkle {
    position: absolute;
    pointer-events: none;
}
.hero-card-accent-ring {
    top: 10%;
    left: -2.5rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid rgba(101,29,117,0.25);
}
.hero-card-accent-sparkle-mid {
    position:absolute;
    top: 48%;
    left: -4rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #651d7599;
    -webkit-mask-image: url('../images/sparkle-accent.png');
    mask-image: url('../images/sparkle-accent.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.hero-card-accent-sparkle-bot {
    position:absolute;
    top: 75%;
    left: -5rem;
    width: 1rem;
    height: 1rem;
    background-color: #c07693b3;
    -webkit-mask-image: url('../images/sparkle-accent.png');
    mask-image: url('../images/sparkle-accent.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.hero-card-accent-dot {
    bottom: 18%;
    left: -2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(192,118,147,0.6);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   PRICING SECTION
   ============================================================ */
.pricing-section {
    background: #EDE8F2;
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .pricing-section { padding: 100px 0; }
}
.section-head {
    text-align: center;
    margin-bottom: 4rem;
}
.section-head__title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}
.section-head__desc {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        max-width: none;
        padding: 2rem 0;
    }
}

.pricing-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    border: 1px solid var(--color-border-light);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    order: 2;
}
.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(101,29,117,0.3);
}
.pricing-card--desktop-pkg { order: 3; }
.pricing-card--popular {
    order: 1;
    border: 2px solid var(--color-primary-purple);
    box-shadow: 0 0 0 4px rgba(101,29,117,0.1), 0 25px 50px -12px rgba(0,0,0,0.25);
}

.pricing-card.pricing-card--popular {
    order: 1;
    border: 2px solid var(--color-primary-purple);
    box-shadow: 0 0 0 4px rgba(101,29,117,0.1), 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Mobile/Tablet: Bob up on hover, keeping border and shadow intact */
.pricing-card.pricing-card--popular:hover {
    transform: translateY(-8px); 
    border-color: var(--color-primary-purple);
    box-shadow: 0 0 0 4px rgba(101,29,117,0.1), 0 35px 60px -15px rgba(0,0,0,0.3); 
}

@media (min-width: 1024px) {
    .pricing-card { order: 1; }
    
    .pricing-card.pricing-card--popular {
        order: 2;
        transform: scale(1.12); /* Permanently scaled up, no !important to block the reveal */
        z-index: 20;
    }
    
    /* Desktop: Combines the permanent scale with the bob-up effect */
    .pricing-card.pricing-card--popular:hover { 
        transform: scale(1.12) translateY(-8px); 
    }
    
    .pricing-card--desktop-pkg { order: 3; }
}

.pricing-card__popular-label {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #2f0d52;
    color: #fff;
    padding: 6px 20px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 20;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.pricing-card__header {
    text-align: center;
    color: #fff;
    padding: 1.75rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}
.pricing-card__header--dark { background: linear-gradient(135deg, var(--color-text-dark), var(--color-primary-dark)); }
.pricing-card__header--purple { background: linear-gradient(135deg, var(--color-primary-purple), var(--color-primary-dark)); }
.pricing-card__header--coral { background: linear-gradient(135deg, var(--color-primary-purple), var(--color-accent-coral)); }

.pricing-card__pkg { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.pricing-card__price-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin-bottom: 0.5rem;
}
.pricing-card__price-row .dollar {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 8px;
}
.pricing-card__price-row .amount {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
}
.pricing-card__tagline { font-size: 0.875rem; opacity: 0.9; }

.pricing-card__body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pricing-card__intro {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
    .pricing-card__intro { height: 150px; margin-bottom: 0; }
}
.pricing-card__intro h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark);
}
.pricing-card__intro p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.625;
}

.btn-order {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--color-primary-purple);
    color: #fff;
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 600;
    transition: background 0.2s;
    margin-bottom: 2rem;
    flex-shrink: 0;
}
.btn-order:hover { background: var(--color-primary-dark); color: #fff; }
.pricing-card--popular .btn-order { box-shadow: var(--shadow-md); }
.pricing-card--popular .btn-order:hover { box-shadow: var(--shadow-lg); }

.pricing-features-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.pricing-features-collapse {
    max-height: 165px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
}
.pricing-features-collapse ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}
.pricing-features-collapse li {
    list-style: none;
    position: relative;
    padding: 0 0 12px 28px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
    color: var(--color-text-secondary);
    display: block;
}
.pricing-features-collapse li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-image: url('../images/check.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(61%) sepia(55%) saturate(452%) hue-rotate(54deg) brightness(93%) contrast(89%);
}
.pricing-features-collapse li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.pricing-features-collapse li span {
    display: inline-block;
    line-height: 1.5;
}
.pricing-features-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top, white 20%, transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pricing-features-collapse.expanded .pricing-features-fade { opacity: 0; }

.pricing-card__footer {
    margin-top: auto;
    padding-top: 0.5rem;
    flex-shrink: 0;
}
.toggle-pricing-features {
    color: var(--color-primary-purple);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.15s;
}

.toggle-pricing-features .olt-chevron-down {
    background-color: var(--color-primary-purple); width: 13px; height: 13.6px;
}

.toggle-pricing-features .olt-chevron-up {
    background-color: var(--color-primary-purple); width: 17px; height: 12px;
}

.toggle-pricing-features:hover { background: var(--color-bg-light); }
.pricing-card__learn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-purple);
    padding-top: 1rem;
    transition: gap 0.15s;
    width: fit-content;
}
.pricing-card__learn:hover { gap: 10px; color: var(--color-primary-purple); }
.pricing-card__learn .olt-icon-arrow { width: 12px; height: 12px; }

/* ============================================================
   SUPPORT SECTION
   ============================================================ */
.support-section {
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .support-section { padding: 100px 0; }
}
.support-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem !important;
}
@media (min-width: 1024px) {
    .support-section__container { padding: 0; }
}

.support-image-banner {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 1312px;
    width: 100%;
    border-radius: 28px;
    min-height: 592px;
    transition-duration: 0.5s;
    background-image: url('../images/topnotch-image.jpeg?v=14052026');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-xl);
}
.support-image-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(30,20,15,0.05) 35%, rgba(30,20,15,0.80) 65%, rgba(30,20,15,0.98) 100%);
    z-index: 2;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .support-image-banner {
        margin: 0 auto;
        flex-direction: row;
    }
}

:root {
    --support-mobile-bg-x: 14%;
    --support-mobile-bg-y: 0%;
}
@media (max-width: 1023px) {
    .support-image-banner {
        background-size: auto 100%;
        background-position: var(--support-mobile-bg-x) var(--support-mobile-bg-y);
        min-height: 520px;
    }
    .support-image-banner::after {
        background: linear-gradient(to bottom, rgba(30,20,15,0.15) 0%, rgba(30,20,15,0.7) 35%, rgba(30,20,15,0.92) 100%);
    }
}

.support-image-spacer {
    min-height: 280px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
@media (min-width: 1024px) {
    .support-image-spacer {
        width: 42%;
        min-height: auto;
    }
}

.support-image-banner__text {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.btn-white-pill .olt-icon-arrow{
    background-color: var(--color-primary-dark); width: 14px; height: 14px;
}

@media (min-width: 640px) {
    .support-image-banner__text { padding: 3.5rem 3rem; }
}
@media (min-width: 1024px) {
    .support-image-banner__text {
        padding: 4rem 3.5rem;
        flex: 1;
    }
}
.support-image-banner__text h2 {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.1;
}
.support-image-banner__text p {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.support-image-banner__text p:last-of-type { margin-bottom: 1.75rem; }
.support-image-banner__text strong, .support-image-banner__text b { color: #fff; font-weight: 700; }
.support-image-banner__text .brand-olt-white { font-style: normal; font-weight: 800; color: #fff; }

.btn-white-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--color-primary-dark);
    padding: 14px 32px;
    border-radius: 9999px;
    font-weight: 700;
    border: 1px solid #E5E7EB;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
}
.btn-white-pill:hover {
    background: var(--color-bg-cream);
    box-shadow: var(--shadow-md);
    color: var(--color-primary-dark);
}

/* ============================================================
   UPDATE BAR
   ============================================================ */
.update-bar {
    background: #EFE9F5;
    padding: 1.25rem 0;
}
.update-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}
@media (min-width: 768px) {
    .update-bar__inner { flex-direction: row; }
}
.update-bar__link {
    color: var(--color-primary-purple);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.2s;
}
.update-bar__link:hover { transform: translateX(4px); color: var(--color-primary-purple); }
.update-bar__link .olt-icon-arrow { width: 20px; height: 20px; }
.update-bar__cta {
    background: var(--color-primary-purple);
    color: #fff;
    padding: 12px 28px;
    border-radius: 9999px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}
.update-bar__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
    background: #fff;
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .features-section {
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
}

.features-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 768px) {
    .features-head {
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 3rem;
        text-align: left;
    }
}
.features-head h2 {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark);
}
.features-head p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 500px;
}
.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 2px solid var(--color-border-light);
    border-radius: 9999px;
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.btn-explore:hover {
    border-color: var(--color-primary-purple);
    color: var(--color-primary-purple);
}

.btn-explore .olt-icon-arrow {
     background-color: var(--color-text-dark); width: 13.13px; height: 14px;
}

.btn-explore:hover .olt-icon-arrow {
     background-color: var(--color-primary-purple);
}

/* Mobile accordion */
.features-mobile { display: block; }
.features-mobile > * + * { margin-top: 0.75rem; }
@media (min-width: 1024px) {
    .features-mobile { display: none; }
}
.mobile-feature-accordion {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.mobile-feature-accordion > button {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-weight: 700;
    color: var(--color-text-dark);
    transition: background 0.15s;
}
.mobile-feature-accordion > button:hover { background: var(--color-bg-light); }
.mobile-feature-accordion__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 15px;
}
.mobile-feature-accordion__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(101, 29, 117, 0.1); 
    border-radius: 0.5rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
}
.feature-doc {
    background-image: url('../images/feature-doc.png');
}
.feature-portal {
    background-image: url('../images/feature-portal.png');
}
.feature-client {
    background-image: url('../images/feature-client.png');
}
.feature-client-mng {
    background-image: url('../images/feature-client-mng.png');
}
.feature-esign {
    background-image: url('../images/feature-esign.png');
}
.feature-import {
    background-image: url('../images/feature-import.png');
}
.feature-report {
    background-image: url('../images/feature-report.png');
}
.feature-doc, .feature-portal, .feature-client, .feature-client-mng, .feature-esign, .feature-import, .feature-report {
    filter: brightness(0) saturate(100%) invert(14%) sepia(35%) saturate(5412%) hue-rotate(274deg) brightness(95%) contrast(85%);
}
.mobile-feature-accordion > button i {
    font-size: 0.875rem;
    color: var(--color-text-light);
    transition: transform 0.3s;
}
.mobile-feature-accordion .content-pane {
    padding: 0 1rem 1rem 64px;
}
.mobile-feature-accordion .content-pane p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.625;
}
.mobile-feature-accordion .content-pane a {
    color: var(--color-primary-purple);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Desktop scroll carousel */
.features-container {
    display: none;
    position: relative;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) {
    .features-container { display: block; }
}
.features-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 1.25rem;
    width: 4rem;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    color: var(--color-primary-purple);
}
.features-scroll-btn:hover { color: var(--color-primary-dark); }
.features-container:hover .features-scroll-btn { opacity: 1; }
.features-scroll-btn--left {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0.9), transparent);
    justify-content: flex-start;
    padding-left: 1rem;
}
.features-scroll-btn--right {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0.9), transparent);
    justify-content: flex-end;
    padding-right: 1rem;
}
.features-scroll-btn__inner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
}

.features-scroll-btn__inner .olt-chevron-right {
    width: 20px;
    height: 15px;
    background-color: #000000;
}

.features-scroll-btn__inner .olt-chevron-left {
    width: 20px;
    height: 15px;
    background-color: #000000;
}

#featuresScroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1.25rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;
    z-index: 10;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#featuresScroll::-webkit-scrollbar { display: none; }
.feature-card {
    flex: 0 0 clamp(220px, 75vw, 260px);
    scroll-snap-align: start;
    background: #fff;
    padding: 1.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border-light);
    transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.feature-card:hover {
    border-color: var(--color-primary-purple);
    box-shadow: var(--shadow-md);
}
.feature-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.feature-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.75rem;
    line-height: 1.375;
}
.feature-card p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.625;
    margin-bottom: 1rem;
}
.feature-card__learn {
    color: var(--color-primary-purple);
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.15s;
}
.feature-card:hover .feature-card__learn { gap: 10px; }
.feature-card__learn .olt-icon-arrow { width: 12.25px; height: 14px; }

/* ============================================================
   BANK PRODUCTS SECTION
   ============================================================ */
.bank-section {
    background: #EFE9F5;
    padding: 2rem 0 0;
    overflow: hidden;
}
@media (min-width: 768px) {
    .bank-section { padding-top: 100px; }
}
.bank-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}
.bank-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 3rem;
}
@media (min-width: 1024px) {
    .bank-section__grid {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}
.bank-section__text { text-align: left; }
@media (min-width: 1024px) {
    .bank-section__text { padding-right: 1.25rem; }
}
.bank-section__text h2 {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark);
}
.bank-section__text p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.bank-section__text p:last-of-type { margin-bottom: 0; }
.btn-purple-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-primary-purple);
    color: #fff;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-purple-pill:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

.btn-purple-pill .olt-icon-arrow {
    background-color: #ffffff; width: 14px; height: 14px;
}

.bank-carousel-col {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1024px) {
    .bank-carousel-col { margin-top: 0; }
}
.bank-carousel-wrap { max-width: 100%; width: 100%; max-width: 480px; }
.bank-carousel-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 1.5rem;
}
.bank-carousel-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
}
#bankCarousel {
    display: flex;
    transition: transform 0.7s ease-in-out;
    width: 1000%;
    transform: translateX(-10%);
}
.bank-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    height: 260px;
    background: #fff;
    width: 10%;
}
.bank-slide--dark {
    background: linear-gradient(135deg, #1a2a3a, #0f1c2e);
    border-radius: 0;
}
.bank-slide a, .bank-slide > svg, .bank-slide > img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.bank-slide img {
    max-height: 130px;
    max-width: 90%;
    object-fit: contain;
}
.bank-slide svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    color: var(--color-text-dark);
}
.bank-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
    background: #fff;
}
.bank-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D1D5DB;
    transition: background 0.2s;
}
.bank-dot.is-active { background: var(--color-primary-purple); }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section {
    background: #fff;
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .why-section { padding: 100px 0; }
}
.why-section__head {
    text-align: center;
    margin-bottom: 3rem;
}
.why-section__head h2 {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}
.why-section__head p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.why-box {
    background: linear-gradient(135deg, var(--color-primary-dark), #2d1545);
    border-radius: 28px;
    padding: 2rem;
    margin-top: 1.25rem;
}
@media (min-width: 768px) { .why-box { padding: 60px; } }

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}
@media (min-width: 640px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .why-grid {
        gap: 3rem;
        text-align: left;
    }
}
@media (min-width: 1024px) {
    .why-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
@media (min-width: 768px) {
    .why-item {
        flex-direction: row;
        gap: 1.25rem;
        align-items: flex-start;
    }
}
.why-item__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-coral);
}
.why-item__icon > div {
    width: 1.75rem;
    height: 1.75rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(1914%) hue-rotate(289deg) brightness(89%) contrast(85%);
}
.why-icon-efile   { background-image: url('../images/why-efile.png'); }
.why-icon-security { background-image: url('../images/why-security.png'); }
.why-icon-update   { background-image: url('../images/why-update.png'); }
.why-icon-client   { background-image: url('../images/why-client.png'); }
.why-icon-users    { background-image: url('../images/feature-portal.png'); }
.why-icon-pricing  { background-image: url('../images/why-pricing.png'); }

.why-item h3 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.why-item p {
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
    line-height: 1.625;
}

.why-box__cta { text-align: center; margin-top: 3rem; }
.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--color-primary-dark);
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--color-primary-dark);
}

.btn-white .olt-icon-arrow{
    background-color: var(--color-primary-dark); width: 14px; height: 14px;
}

/* ============================================================
   TAX FORUM SECTION
   ============================================================ */
.taxforum-section {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 4rem 0;
    overflow: hidden;
    text-align: center;
}
@media (min-width: 768px) {
    .taxforum-section {
        padding: 100px 0;
        text-align: left;
    }
}
.taxforum-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}
@media (min-width: 1024px) {
    .taxforum-section__container { grid-template-columns: 1.2fr 1.6fr; }
}
.taxforum-section h2 {
    color: #fff;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    margin-bottom: 1.5rem;
}
.taxforum-section p {
    color: rgba(255,255,255,0.8);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}
.btn-gradient-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-primary-purple), var(--color-primary-light));
    color: #fff;
    padding: 14px 32px;
    border-radius: 9999px;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gradient-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(107,45,155,0.4);
    color: #fff;
}

.btn-gradient-pill .olt-icon-arrow {
   background-color: #fff; width: 14px; height: 14px;
}

.taxforum-section__image {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
    background: var(--color-bg-light);
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .faq-section { padding: 100px 0; }
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .faq-grid {
        grid-template-columns: 5fr 6fr;
        gap: 5rem;
    }
}
.faq-left { text-align: center; }
@media (min-width: 1024px) {
    .faq-left {
        text-align: left;
        position: sticky;
        top: 8rem;
    }
}
.faq-left h2 {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}
.faq-left p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0 auto 2rem;
    max-width: 480px;
}
@media (min-width: 1024px) {
    .faq-left p { margin-left: 0; margin-right: 0; }
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-accordion {
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}

.faq-accordion .olt-chevron-down {
   width: 14px;
   height: 14px;
   background-color: #718096;
}

.faq-toggle {
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}
.faq-toggle > span:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
    padding-right: 1rem;
    line-height: 1.375;
}
.faq-chevron {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-light);
    color: var(--color-text-light);
    transition: background 0.3s, color 0.3s;
}
.faq-toggle:hover .faq-chevron {
    background: rgba(101,29,117,0.1);
    color: var(--color-primary-purple);
}
.faq-chevron i {
    font-size: 0.875rem;
    transition: transform 0.3s;
}
.faq-content {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.625;
}
.faq-content p { margin-bottom: 0.75rem; }
.faq-content p:last-child { margin-bottom: 0; }
.faq-content strong { color: var(--color-text-dark); }
.faq-content a {
    color: var(--color-primary-purple);
    font-weight: 600;
}
.faq-content a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.olt-footer {
    background-color: #FAF8FC;
    color: #1A1A2E;
    padding: 80px 0 40px;
    font-family: var(--font-primary-plus);
}
.olt-footer a { text-decoration: none; color: inherit; }
.olt-footer__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.olt-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}
.olt-footer__col-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A2E;
    margin-bottom: 32px;
}
.olt-footer__logo { height: 50px; display: block; margin-bottom: 24px; }
.olt-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}
.olt-footer__contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #4A5568;
    padding: 6px 0;
}

.olt-footer__contact-row .olt-map-marker-alt {
    background-color: #1A1A2E;
}

.olt-footer__contact-row .olt-phone {
    background-color: #1A1A2E;
}

.olt-footer__contact-row .olt-fax {
    background-color: #1A1A2E;
}

.olt-footer__contact-row .olt-envelope {
    background-color: #1A1A2E;
}

.olt-footer__contact-row i {
    width: 18px;
    color: #1A1A2E;
    font-size: 13px;
    flex-shrink: 0;
}
.olt-footer__contact-row a { color: #4A5568; transition: color 0.15s; }
.olt-footer__contact-row a:hover { color: var(--color-primary-purple); }
.olt-footer__social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.olt-footer__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1A1A2E;
    color: #fff !important;
    font-size: 14px;
    transition: background-color 0.15s, transform 0.15s;
}
.olt-footer__social-btn:hover {
    background-color: var(--color-primary-purple);
    transform: translateY(-4px);
}
.olt-footer__nav-list { display: flex; flex-direction: column; gap: 2px; }
.olt-footer__nav-list li a {
    display: block;
    font-size: 14px;
    color: #4A5568;
    padding: 5px 0;
    transition: color 0.15s;
}
.olt-footer__nav-list li a:hover { color: var(--color-primary-purple); }
.olt-footer__bottom {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.olt-footer__copyright { font-size: 14px; color: #718096; margin: 0; }
.olt-footer__bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
.olt-footer__bottom-links a { font-size: 14px; color: #718096; transition: color 0.15s; }
.olt-footer__bottom-links a:hover { color: var(--color-primary-purple); }
@media (max-width: 900px) {
    .olt-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .olt-footer__brand-col { grid-column: 1 / -1; }
    .olt-footer__contact-list { margin-bottom: 0; }
    .olt-footer__social { margin-top: 20px; }
}
@media (max-width: 580px) {
    .olt-footer { padding: 60px 0 32px; }
    .olt-footer__grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; text-align: center; }
    .olt-footer__logo { margin: 0 auto 20px; }
    .olt-footer__contact-row { justify-content: center; }
    .olt-footer__social { justify-content: center; }
    .olt-footer__nav-list li a { text-align: center; }
    .olt-footer__bottom { flex-direction: column; text-align: center; }
    .olt-footer__bottom-links { justify-content: center; }
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 3rem;
    height: 3rem;
    background: var(--color-primary-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.2s;
    z-index: 998;
}
.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
}
.scroll-top-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-4px);
}
.row { display: flex !important; flex-wrap: wrap !important; margin-left: -16px !important; margin-right: -16px !important; }
.col-lg-9, .col-lg-3, .col-xl-9, .col-md-9, .col-md-3, .col-lg-12, .col-md-12 { padding: 0 16px !important; width: 100% !important; }
@media (min-width: 1024px) {
.col-lg-9, .col-xl-9, .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; }
.col-lg-3, .col-md-3 { flex: none !important; }
.d-none.d-lg-block { display: block !important; }
}
@media (max-width: 1023px) {
.header { top: 0; }
.d-none.d-lg-block { display: none !important; }
.olt-desktop-only { display: none !important; }
}

.inner_page_wrapper { padding-top: 0px !important; }
.inner_page_container { padding-top: 0 !important; }

/* --- SIDEBAR (unchanged) --- */
.col-lg-3 > br, .col-md-3 > br { display: none !important; }
.col-lg-3, .col-md-3 {
padding: 0 !important; margin: 0 !important;
position: fixed !important; top: 0 !important; bottom: 0 !important;
right: calc(-1 * min(300px, 80vw) - 20px) !important; left: auto !important;
width: min(300px, 80vw) !important; max-width: min(300px, 80vw) !important;
flex: none !important; z-index: 200 !important; overflow: hidden !important;
display: flex !important; flex-direction: column !important;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.col-lg-3.olt-sidebar-open, .col-md-3.olt-sidebar-open { right: 0 !important; }
#olt-sidebar-toggle {
position: fixed !important; bottom: 85px !important; top: auto !important;
right: 0 !important; left: auto !important; z-index: 201 !important;
background: #651d75 !important; color: #ffffff !important;
border: none !important; border-radius: 8px 0 0 8px !important;
padding: 12px 8px !important; cursor: pointer !important;
display: none !important; flex-direction: column !important;
align-items: center !important; gap: 6px !important;
box-shadow: -2px 0 12px rgba(74,26,107,0.18) !important;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s !important;
writing-mode: vertical-rl !important;
font-size: 12px !important; font-weight: 700 !important;
font-family: var(--font-primary-plus) !important;
letter-spacing: 0.5px !important; text-transform: uppercase !important;
line-height: 1 !important;
}
#olt-sidebar-toggle:hover { background: #4A1A6B !important; }
#olt-sidebar-toggle.olt-sidebar-open { right: min(300px, 80vw) !important; }
#olt-sidebar-backdrop {
display: none !important; position: fixed !important; inset: 0 !important;
z-index: 199 !important; background: rgba(26, 26, 46, 0.25) !important;
}
#olt-sidebar-backdrop.active { display: block !important; }
.quicklinks {
flex: 1 !important; display: flex !important; flex-direction: column !important;
justify-content: flex-start !important; overflow: hidden !important;
background: #FFFFFF !important; border: 1px solid #E8E4EC !important;
border-right: none !important; border-radius: 16px 0 0 16px !important;
padding: 32px 24px !important;
box-shadow: -6px 0 30px rgba(74, 26, 107, 0.10) !important;
width: 100% !important; height: 100% !important;
}
.quicklinks ul { list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; }
.quicklinks .links_head {
font-size: 14px !important; font-weight: 800 !important;
text-transform: uppercase !important; color: #1A1A2E !important;
border-bottom: 2px solid #FAF8FC !important;
padding-bottom: 12px !important; margin-bottom: 16px !important;
display: block !important;
}
.quicklinks .links_head i { width: 20px; height: 15px; color: #651d75 !important; background-color: #651d75 !important; margin-right: 4px !important; }
.quicklinks .sub a {
display: flex !important; align-items: center !important;
color: #4A5568 !important; font-size: 14px !important;
text-decoration: none !important; padding: 8px 0 !important;
transition: all 0.2s !important;
}
.quicklinks .sub a i { width: 16px; height: 14px; color: #C07693 !important; background-color: #C07693 !important; font-size: 12px !important; margin-right: 8px !important; transition: transform 0.2s !important; }
.quicklinks .sub a:hover { color: #651d75 !important; font-weight: 600 !important; }
.quicklinks .sub a:hover i { transform: translateX(4px) !important; }
.quicklinks br { display: none !important; }

/* --- EDITORIAL BANNER (unchanged) --- */
.banner-opt3 {
padding: 8px 0 32px !important;
border-bottom: 1px solid #E8E4EC;
margin: 25px 0 48px 0;
}
.banner-opt3-breadcrumb {
font-family: var(--font-primary-inter) !important;
font-size: 13px !important; color: #718096 !important;
margin-bottom: 14px;
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.banner-opt3-breadcrumb a { color: #894098 !important; text-decoration: none; font-weight: 500; }
.banner-opt3-breadcrumb a:hover { color: #651d75 !important; }
.banner-opt3-breadcrumb i { font-size: 9px; color: #C4B5D3; }
.banner-opt3-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.banner-opt3-text { flex: 1; min-width: 280px; }
.banner-opt3 h1 {
font-family: var(--font-primary-inter) !important;
font-size: clamp(30px, 4vw, 40px) !important;
font-weight: 800 !important; color: #210038 !important;
margin: 0 0 10px !important;
letter-spacing: -0.025em !important; line-height: 1.1 !important;
}
.
 {
font-family: var(--font-primary-noto) !important;
font-size: 16px !important; color: #4c444f !important;
margin: 0 !important; max-width: 680px; line-height: 1.55 !important;
}
.banner-opt3-logo {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0;
align-self: center;
margin-top: -28px;
}

.banner-opt3 p {
font-family: var(--font-primary-noto) !important;
font-size: 16px !important; color: #4c444f !important;
margin: 0 !important; max-width: 680px; line-height: 1.55 !important;
}

.banner-opt3-logo img {
height: 52px;
width: auto;
display: block;
}
@media (max-width: 767px) {
.banner-opt3-logo { padding: 0; }
.banner-opt3-logo img { height: 40px; }
}

/* -------------------------------------------
NEW: ABOUT PAGE EDITORIAL LAYOUT
------------------------------------------- */

/* ——— Shared section rhythm ——— */
.about-section { margin-bottom: 72px; }
.about-section:last-child { margin-bottom: 40px; }

.section-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 10px;
}
/* Eyebrow inside info-card — override default card paragraph styling */
.info-card .section-eyebrow {
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1;
margin: 0 0 12px;
}
.section-heading {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 30px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 14px;
}

/* ——— SECTION 1: OVERVIEW CARDS ——— */
.overview-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.overview-grid .card-wide { grid-column: 1 / -1; }
.overview-grid--pair {
grid-template-columns: 1fr 1fr;
}

.info-card {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 32px;
transition: all 0.2s ease;
}
.info-card:hover {
border-color: #C4B5D3;
box-shadow: 0 6px 20px rgba(33, 0, 56, 0.06);
}
.info-card--accent {
border-color: #E8D7F0;
background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
}
.info-card--accent:hover { border-color: #894098; }
.info-card h3 {
font-family: var(--font-primary-inter);
font-size: 22px;
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
margin: 0 0 14px;
line-height: 1.25;
}
.info-card p {
color: #4c444f;
font-size: 15px;
line-height: 1.7;
margin: 0;
}
.card-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 10px;
}

/* ——— Value / At-a-Glance pair (Service Bureau accent-bar pattern) ——— */
.about-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
padding: 32px 0 0;
border-top: 1px solid #E8D7F0;
margin-top: 20px;
}
.about-pair-col {
position: relative;
padding-left: 20px;
}
.about-pair-col::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 3px;
height: calc(100% - 16px);
background: linear-gradient(180deg, #894098 0%, #E8D7F0 100%);
border-radius: 3px;
}
.about-pair-col h4 {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.about-pair-col h3 {
font-family: var(--font-primary-inter);
font-size: 20px;
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
margin: 0 0 12px;
line-height: 1.25;
}
.about-pair-col p {
font-family: var(--font-primary-inter);
font-size: 15px;
line-height: 1.7;
color: #4c444f;
margin: 0;
}

/* ——— SECTION 2: MISSION (inline, no box) ——— */
.mission-inline {
padding: 32px 0;
text-align: center;
}
.mission-inline p.mission-label {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.mission-inline p.mission-text {
font-family: var(--font-primary-noto);
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.4;
color: #210038;
font-style: italic;
font-weight: 400;
margin: 0;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

/* ——— SECTION 3: PRODUCTS ——— */
.products-header {
text-align: center;
margin-bottom: 36px;
}
.products-header .section-heading {
margin-bottom: 8px;
}
.products-header .products-sub {
font-family: var(--font-primary-plus);
font-size: 16px;
color: #718096;
margin: 0;
}

.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.product-card {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
transition: all 0.2s ease;
text-decoration: none;
color: inherit;
position: relative;
}
.product-card:hover {
border-color: #894098;
box-shadow: 0 10px 28px rgba(137, 64, 152, 0.10);
transform: translateY(-2px);
}
.product-card--featured {
border-color: #894098;
border-width: 2px;
background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
}
.product-card--dark {
background: linear-gradient(135deg, #3b1058 0%, #651d75 100%);
border-color: #3b1058;
}
.product-card--dark:hover {
border-color: #7d2d8f;
box-shadow: 0 10px 28px rgba(59, 16, 88, 0.30);
}

.product-logo {
height: 36px;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.product-logo img { max-height: 36px; width: auto; }

.product-tag {
display: inline-block;
font-family: var(--font-primary-inter);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 14px;
}
.product-tag--light {
background: #F5EEFA;
color: #651d75;
}
.product-tag--dark {
background: rgba(246, 173, 255, 0.15);
color: #F6ADFF;
border: 1px solid rgba(246, 173, 255, 0.3);
}
.product-desc {
font-size: 14px;
line-height: 1.6;
color: #4c444f;
margin: 0 0 18px;
flex: 1;
}
.product-card--dark .product-desc { color: #E8D7F0; }

.product-link {
font-family: var(--font-primary-inter);
font-size: 13px;
font-weight: 700;
color: #651d75;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
}
.product-card--dark .product-link { color: #F6ADFF; }
.product-card:hover .product-link { gap: 10px; }

/* ——— SECTION 4: LEADERSHIP ——— */
.leadership-card {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 20px;
overflow: hidden;
display: grid;
grid-template-columns: 1.4fr 1fr;
}
.leadership-content {
padding: 40px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.leadership-content p {
color: #4c444f;
font-size: 15px;
line-height: 1.7;
margin: 0 0 28px;
}
.leadership-people {
display: flex;
gap: 40px;
align-items: center;
}
.leader-name {
font-family: var(--font-primary-inter);
font-size: 15px;
font-weight: 800;
color: #210038;
margin: 0 0 2px !important;
}
.leader-role {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 600;
color: #894098;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.leader-divider {
width: 1px;
height: 32px;
background: #E8D7F0;
}
.leadership-panel {
background: linear-gradient(135deg, #3b1058 0%, #651d75 100%);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
/* Logo watermark on the panel */
.leadership-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
-webkit-mask-image: url('../images/olt-logo.png');
mask-image: url('../images/olt-logo.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 45%;
mask-position: 50% 45%;
-webkit-mask-size: 120%;
mask-size: 120%;
opacity: 0.10;
pointer-events: none;
}
.leadership-panel::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.20) 0%, transparent 70%);
border-radius: 50%;
}
.panel-year {
font-family: var(--font-primary-inter);
font-size: 44px;
font-weight: 800;
color: #ffffff;
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 8px;
position: relative;
z-index: 1;
}
.panel-location {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #E8D7F0;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
position: relative;
z-index: 1;
}
.panel-bar {
width: 50px;
height: 3px;
background: #F6ADFF;
margin: 20px auto;
border-radius: 2px;
position: relative;
z-index: 1;
}
.panel-tag {
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 500;
color: #F6ADFF;
margin: 0;
position: relative;
z-index: 1;
}

/* ——— Responsive ——— */
@media (max-width: 1023px) {
.overview-grid { grid-template-columns: 1fr 1fr; }
.overview-grid .card-wide { grid-column: 1 / -1; }
.products-grid { grid-template-columns: 1fr; gap: 14px; }
.leadership-card { grid-template-columns: 1fr; }
.leadership-panel { padding: 32px 24px; }
.panel-year { font-size: 36px; }
.about-pair { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
.overview-grid { grid-template-columns: 1fr; }
.info-card, .leadership-content { padding: 28px 24px; }
.mission-inline { padding: 24px 0; }
.leadership-content { padding: 28px 24px; }
.leadership-people { gap: 24px; }
.about-section { margin-bottom: 48px; }
.about-pair { padding-top: 24px; }
}

/* --- BANNER CTAs --- */
.banner-cta-stack {
display: flex; flex-direction: column; gap: 10px;
flex-shrink: 0; align-items: stretch; min-width: 200px;
}
.banner-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 12px 22px; border-radius: 999px;
font-family: var(--font-primary-inter); font-size: 13px; font-weight: 700;
text-decoration: none; transition: all 0.2s ease;
letter-spacing: 0.02em; white-space: nowrap;
}
.banner-cta--primary {
background: linear-gradient(135deg, #651d75 0%, #894098 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(101, 29, 117, 0.25);
}
.banner-cta--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(101, 29, 117, 0.35);
color: #ffffff;
}
.banner-cta--secondary {
background: #ffffff; color: #210038; border: 1px solid #E8E4EC;
}
.banner-cta--secondary:hover { border-color: #894098; color: #651d75; }
.banner-cta--secondary i { color: #894098; }
@media (max-width: 767px) {
.banner-cta-stack { width: 100%; flex-direction: row; min-width: 0; }
.banner-cta { flex: 1; font-size: 12px; padding: 11px 14px; }
}

/* -------------------------------------------
FEATURES PAGE LAYOUT
------------------------------------------- */
.ft-section { margin-bottom: 80px; }
.ft-section:last-of-type { margin-bottom: 40px; }

.ft-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.ft-heading {
font-family: var(--font-primary-inter);
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 16px;
}
.ft-subheading {
font-size: 16px;
line-height: 1.65;
color: #4c444f;
margin: 0 0 36px;
max-width: 720px;
}
.ft-section-header { margin-bottom: 36px; }

/* -- Features grid (3×3) -- */
.ft-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.ft-card {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 28px 24px;
transition: all 0.25s ease;
}
.ft-card:hover {
border-color: #C4B5D3;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(33, 0, 56, 0.06);
}
.ft-card-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
margin-bottom: 16px;
}
.ft-card h3 {
font-family: var(--font-primary-inter);
font-size: 16px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 0 0 10px;
line-height: 1.25;
}
.ft-card p {
font-family: var(--font-primary-inter);
font-size: 13.5px;
line-height: 1.6;
color: #4c444f;
margin: 0;
}

/* -- Why OLTPRO (2x2 editorial grid) -- */
.ft-why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px 48px;
}
.ft-why-item {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 0;
position: relative;
}
.ft-why-item::before {
content: '';
position: absolute;
left: -16px;
top: 8px;
bottom: 8px;
width: 3px;
background: linear-gradient(180deg, #894098 0%, #E8D7F0 100%);
border-radius: 3px;
display: none;
}
.ft-why-icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.ft-why-item h4 {
font-family: var(--font-primary-inter);
font-size: 17px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 6px 0 8px;
line-height: 1.25;
}
.ft-why-item p {
font-family: var(--font-primary-inter);
font-size: 14.5px;
line-height: 1.6;
color: #4c444f;
margin: 0;
}

/* -- Closing CTA band -- */
.ft-cta-band {
background: linear-gradient(135deg, #3b1058 0%, #651d75 50%, #894098 100%);
border-radius: 24px;
padding: 56px 64px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.ft-cta-band::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.ft-cta-band::after {
content: '';
position: absolute;
bottom: -120px; left: 10%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.ft-cta-content {
flex: 1;
//min-width: 300px;
position: relative;
z-index: 1;
}
.ft-cta-band .ft-eyebrow {
color: #F6ADFF;
margin-bottom: 14px;
}
.ft-cta-band h2 {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
}
.ft-cta-band p {
font-size: 15px;
line-height: 1.65;
color: #E8D7F0;
margin: 0;
max-width: 560px;
}
.ft-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
min-width: 220px;
}
.ft-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.ft-cta-btn--primary {
background: #ffffff;
color: #3b1058;
}
.ft-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
color: #3b1058;
}
.ft-cta-btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.ft-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}

/* -- Responsive -- */
@media (max-width: 1023px) {
.ft-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.ft-section { margin-bottom: 56px; }
.ft-grid { grid-template-columns: 1fr; }
.ft-why-grid { grid-template-columns: 1fr; gap: 24px; }
.ft-cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
.ft-cta-buttons { width: 100%; flex-direction: column; min-width: 0; }
.ft-cta-btn { flex: none; width: 100%; padding: 12px 20px; font-size: 13px; }
}

/* -------------------------------------------
INTERACTIVE TIER SWITCHER
------------------------------------------- */
.tier-switcher-section {
margin-bottom: 60px;
position: relative;
}

/* Floating decorative shapes */
.tier-decor {
position: absolute;
pointer-events: none;
z-index: 0;
}
.tier-decor--1 {
top: -20px; left: -80px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.25) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.tier-decor--2 {
bottom: 40px; right: -100px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(137, 64, 152, 0.18) 0%, transparent 70%);
animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}

/* Tab Switcher — each tab becomes purple when active (no sliding indicator) */
.tier-tabs {
position: relative;
z-index: 2;
display: inline-flex;
background: #ffffff;
padding: 6px;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(33, 0, 56, 0.08), 0 2px 6px rgba(33, 0, 56, 0.04);
border: 1px solid #F0EBF5;
margin-bottom: 40px;
gap: 2px;
}
.tier-tab {
position: relative;
background: transparent;
border: none;
padding: 12px 28px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
color: #718096;
cursor: pointer;
border-radius: 999px;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
}
.tier-tab-price {
font-size: 11px;
font-weight: 600;
color: #A0AEC0;
font-variant-numeric: tabular-nums;
transition: color 0.3s ease;
}
.tier-tab:hover:not(.active) {
color: #4c444f;
background: #FAF8FC;
}
.tier-tab.active {
color: #ffffff;
background: linear-gradient(135deg, #894098 0%, #651d75 100%);
box-shadow: 0 4px 12px rgba(101, 29, 117, 0.35);
}
.tier-tab.active .tier-tab-price { color: #F6ADFF; }
.tier-badge {
position: absolute;
top: -10px;
right: -10px;
background: #F6ADFF;
color: #3b1058;
font-family: var(--font-primary-inter);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
z-index: 3;
box-shadow: 0 4px 12px rgba(246, 173, 255, 0.5);
animation: pulse-badge 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

/* Detail Card */
.tier-card {
position: relative;
z-index: 2;
background: #ffffff;
border-radius: 28px;
padding: 48px;
box-shadow: 0 20px 60px rgba(33, 0, 56, 0.08), 0 4px 16px rgba(33, 0, 56, 0.04);
overflow: hidden;
min-height: 580px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tier-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(246, 173, 255, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.tier-card-decor {
position: absolute;
top: -60px;
right: -60px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(137, 64, 152, 0.08) 0%, transparent 70%);
pointer-events: none;
transition: opacity 0.5s ease;
}

/* Tier Panels */
.tier-panel {
display: none;
animation: fadeSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.tier-panel.active { display: block; }

@keyframes fadeSlideIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}

.tier-panel-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
margin-bottom: 36px;
padding-bottom: 32px;
border-bottom: 1px solid #F0EBF5;
}

.tier-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.tier-title {
font-family: var(--font-primary-inter);
font-size: clamp(28px, 3.5vw, 38px);
font-weight: 800;
color: #210038;
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0 0 14px;
}
.tier-description {
font-family: var(--font-primary-noto);
font-size: 16px;
line-height: 1.6;
color: #4c444f;
margin: 0 0 20px;
max-width: 560px;
font-style: italic;
}

/* Price display */
.tier-price {
text-align: right;
min-width: 200px;
}
.tier-price-amount {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 4px;
margin-bottom: 8px;
}
.tier-price-currency {
font-family: var(--font-primary-inter);
font-size: 28px;
font-weight: 600;
color: #894098;
margin-top: 14px;
}
.tier-price-number {
font-family: var(--font-primary-inter);
font-size: 84px;
font-weight: 800;
color: #210038;
line-height: 0.9;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #651d75 0%, #894098 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tier-price-meta {
font-family: var(--font-primary-inter);
font-size: 13px;
font-weight: 600;
color: #718096;
letter-spacing: 0.02em;
}

.tier-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #1A1A2E 0%, #2d1545 100%);
color: #ffffff;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
padding: 14px 30px;
border-radius: 999px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 6px 20px rgba(26, 26, 46, 0.18);
letter-spacing: 0.02em;
}
.tier-cta:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #651d75 0%, #894098 100%);
box-shadow: 0 10px 28px rgba(101, 29, 117, 0.35);
color: #ffffff;
}
.tier-cta i { transition: transform 0.25s ease; width: 12.25px; height: 13px; }
.tier-cta:hover i { transform: translateX(4px); }

/* Features */
.tier-features-label {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 20px;
}
.tier-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 32px;
margin-bottom: 28px;
}
.tier-feature {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-size: 14px;
line-height: 1.55;
color: #4c444f;
opacity: 0;
transform: translateY(8px);
animation: featureIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tier-feature .olt-icon-check{
background-color:rgb(101, 29, 117);
}

.tier-panel.active .tier-feature:nth-child(1) { animation-delay: 0.15s; }
.tier-panel.active .tier-feature:nth-child(2) { animation-delay: 0.2s; }
.tier-panel.active .tier-feature:nth-child(3) { animation-delay: 0.25s; }
.tier-panel.active .tier-feature:nth-child(4) { animation-delay: 0.3s; }
.tier-panel.active .tier-feature:nth-child(5) { animation-delay: 0.35s; }
.tier-panel.active .tier-feature:nth-child(6) { animation-delay: 0.4s; }
.tier-panel.active .tier-feature:nth-child(7) { animation-delay: 0.45s; }
.tier-panel.active .tier-feature:nth-child(8) { animation-delay: 0.5s; }
.tier-panel.active .tier-feature:nth-child(9) { animation-delay: 0.55s; }
.tier-panel.active .tier-feature:nth-child(10) { animation-delay: 0.6s; }
.tier-panel.active .tier-feature:nth-child(11) { animation-delay: 0.65s; }
.tier-panel.active .tier-feature:nth-child(12) { animation-delay: 0.7s; }

@keyframes featureIn {
to { opacity: 1; transform: translateY(0); }
}

.tier-feature-check {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
margin-top: 1px;
}
.tier-feature strong { color: #210038; font-weight: 700; }

/* Callout at the bottom of each panel */
.tier-callout {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: linear-gradient(135deg, #fdfaff 0%, #faf1f8 100%);
border: 1px solid #E8D7F0;
border-radius: 16px;
margin-top: 8px;
}
.tier-callout-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, #894098 0%, #651d75 100%);
color: #ffffff;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.tier-callout-text {
font-size: 14px;
line-height: 1.6;
color: #4c444f;
margin: 0;
}
.tier-callout-text strong { color: #210038; font-weight: 700; }

/* ---� BANNER CTAs (right-aligned, stacked) ---� */
.banner-cta-stack {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
align-items: stretch;
min-width: 200px;
}
.banner-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.banner-cta--primary {
background: linear-gradient(135deg, #651d75 0%, #894098 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(101, 29, 117, 0.25);
}
.banner-cta--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(101, 29, 117, 0.35);
}
.banner-cta--secondary {
background: #ffffff;
color: #210038;
border: 1px solid #E8E4EC;
}
.banner-cta--secondary:hover {
border-color: #894098;
color: #651d75;
}
.banner-cta--secondary i { color: #894098; }

@media (max-width: 767px) {
.banner-cta-stack {
    width: 100%;
    flex-direction: row;
    min-width: 0;
}
.banner-cta {
    flex: 1;
    font-size: 12px;
    padding: 11px 14px;
}
}

/* ---� MOBILE ---� */
@media (max-width: 900px) {
.tier-panel-header { grid-template-columns: 1fr; gap: 20px; }
.tier-price { text-align: left; min-width: auto; }
.tier-price-amount { justify-content: flex-start; }
.tier-price-number { font-size: 64px; }
.tier-features-grid { grid-template-columns: 1fr; gap: 4px; }
.tier-card { padding: 32px 24px; min-height: auto; }
.tier-tabs { width: 100%; justify-content: stretch; }
.tier-tab { flex: 1; padding: 12px 14px; justify-content: center; font-size: 13px; }
.tier-tab-price { display: none; }
.tier-decor { display: none; }
}

/* ---� CLOSING CTA BAND ---� */
.tier-cta-band {
background: linear-gradient(135deg, #3b1058 0%, #651d75 50%, #894098 100%);
border-radius: 24px;
padding: 56px 64px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
margin: 0 0 40px 0;
}
.tier-cta-band::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.tier-cta-band::after {
content: '';
position: absolute;
bottom: -120px; left: 10%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.tier-cta-content {
flex: 1;
//min-width: 300px;
position: relative;
z-index: 1;
}
.tier-cta-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #F6ADFF;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 14px;
}
.tier-cta-band h2 {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
}
.tier-cta-band p {
font-size: 15px;
line-height: 1.65;
color: #E8D7F0;
margin: 0;
max-width: 560px;
}
.tier-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
min-width: 220px;
}
.tier-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.tier-cta-btn--primary {
background: #ffffff;
color: #3b1058;
}
.tier-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
color: #3b1058;
}
.tier-cta-btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.tier-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767px) {
.tier-cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
.tier-cta-buttons { width: 100%; flex-direction: column; min-width: 0; }
.tier-cta-btn { flex: none; width: 100%; padding: 12px 20px; font-size: 13px; }
}

/* -�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�
SERVICE BUREAU PAGE LAYOUT
-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-� */
.sb-section { margin-bottom: 80px; }
.sb-section:last-of-type { margin-bottom: 40px; }

.sb-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.sb-heading {
font-family: var(--font-primary-inter);
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 16px;
}
.sb-subheading {
font-size: 16px;
line-height: 1.65;
color: #4c444f;
margin: 0 0 36px;
max-width: 720px;
}

/* -- Section 1: Definition -- */
/* Inline italic lead (matching About page "Our Mission" style) */
.sb-definition-lead {
padding: 16px 0 28px;
text-align: center;
}
.sb-definition-lead-text {
font-family: var(--font-primary-noto);
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.4;
color: #210038;
font-style: italic;
font-weight: 400;
margin: 0;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}

/* Supporting paragraphs — left accent bar, no full card */
.sb-definition {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
padding: 8px 0 0;
border-top: 1px solid #E8D7F0;
padding-top: 32px;
position: relative;
}
.sb-definition::before {
content: '';
position: absolute;
top: 32px;
left: 0;
width: 3px;
height: calc(100% - 32px);
background: linear-gradient(180deg, #894098 0%, #E8D7F0 100%);
border-radius: 3px;
display: none; /* repurposed below */
}
.sb-definition-col {
position: relative;
padding-left: 20px;
}
.sb-definition-col::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 3px;
height: calc(100% - 16px);
background: linear-gradient(180deg, #894098 0%, #E8D7F0 100%);
border-radius: 3px;
}
.sb-definition-col h4 {
font-family: var(--font-primary-inter);
font-size: 12px;
font-weight: 700;
color: #894098;
letter-spacing: 1.2px;
text-transform: uppercase;
margin: 0 0 12px;
}
.sb-definition-col p {
font-size: 15px;
line-height: 1.75;
color: #4c444f;
margin: 0;
}
.sb-definition-col strong { color: #210038; font-weight: 700; }

/* -- Section 2: Benefits -- */
.sb-benefits-header { margin-bottom: 36px; }
.sb-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.sb-benefit {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 24px 22px;
transition: all 0.25s ease;
}

.sb-benefit .olt-coins {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-chart-line {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-layer-group {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-tag {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-sliders {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-multiple-user {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-puzzle-piece {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-bullseye {
background-color:rgb(101, 29, 117);
}

.sb-benefit .olt-seedling {
background-color:rgb(101, 29, 117);
}

.sb-benefit:hover {
border-color: #C4B5D3;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(33, 0, 56, 0.06);
}
.sb-benefit-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
margin-bottom: 14px;
}
.sb-benefit h4 {
font-family: var(--font-primary-inter);
font-size: 15px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 0 0 8px;
line-height: 1.25;
}
.sb-benefit p {
font-size: 13.5px;
line-height: 1.6;
color: #4c444f;
margin: 0;
}

/* -- Section 3: Steps -- */
.sb-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sb-step {
position: relative;
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 28px 26px 26px;
transition: all 0.25s ease;
}
.sb-step:hover {
border-color: #C4B5D3;
box-shadow: 0 8px 22px rgba(33, 0, 56, 0.06);
}
.sb-step-num {
position: absolute;
top: -12px;
left: 26px;
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #894098 0%, #651d75 100%);
color: #ffffff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-primary-inter);
font-size: 13px;
font-weight: 800;
box-shadow: 0 4px 10px rgba(101, 29, 117, 0.3);
}
.sb-step h4 {
font-family: var(--font-primary-inter);
font-size: 16px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 12px 0 10px;
line-height: 1.25;
}
.sb-step p {
font-size: 14px;
line-height: 1.65;
color: #4c444f;
margin: 0;
}

/* -- Section 4: Closing CTA band -- */
.sb-cta-band {
background: linear-gradient(135deg, #3b1058 0%, #651d75 50%, #894098 100%);
border-radius: 24px;
padding: 56px 64px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.sb-cta-band::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.sb-cta-band::after {
content: '';
position: absolute;
bottom: -120px; left: 10%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.sb-cta-content {
flex: 1;
//min-width: 300px;
position: relative;
z-index: 1;
}
.sb-cta-band .sb-eyebrow {
color: #F6ADFF;
margin-bottom: 14px;
}
.sb-cta-band h2 {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 10px;
}
.sb-cta-band p {
font-size: 15px;
line-height: 1.55;
color: #E8D7F0;
margin: 0;
max-width: 520px;
}
.sb-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
min-width: 220px;
}
.sb-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.sb-cta-btn--primary {
background: #ffffff;
color: #3b1058;
}
.sb-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
color: #3b1058;
}
.sb-cta-btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.sb-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}

/* -- Responsive -- */
@media (max-width: 1023px) {
.sb-benefits-grid { grid-template-columns: repeat(2, 1fr); }
.sb-steps { grid-template-columns: 1fr; gap: 24px; }
.sb-definition { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
.sb-section { margin-bottom: 56px; }
.sb-benefits-grid { grid-template-columns: 1fr; }
.sb-definition-lead { padding: 8px 0 20px; }
.sb-definition { padding-top: 24px; }
.sb-cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
.sb-cta-buttons { width: 100%; flex-direction: column; min-width: 0; }
.sb-cta-btn { flex: none; width: 100%; padding: 12px 20px; font-size: 13px; white-space: normal; }
}

/* -�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�
PAYROLL & ACCOUNTING PAGE LAYOUT
-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-� */
.pa-section { margin-bottom: 80px; }
.pa-section:last-of-type { margin-bottom: 40px; }

.pa-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.pa-heading {
font-family: var(--font-primary-inter);
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 16px;
}
.pa-subheading {
font-size: 16px;
line-height: 1.65;
color: #4c444f;
margin: 0 0 36px;
max-width: 720px;
}

/* -- Section 1: PISTUS intro with logo lockup -- */
.pa-intro {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 48px;
align-items: center;
background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
border: 1px solid #E8D7F0;
border-radius: 20px;
padding: 48px 52px;
position: relative;
overflow: hidden;
}
.pa-intro::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(137, 64, 152, 0.10) 0%, transparent 70%);
pointer-events: none;
}
.pa-intro-logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 32px;
background: linear-gradient(135deg, #3b1058 0%, #651d75 60%, #7d2d8f 100%);
border-radius: 20px;
border: 1px solid #E8E4EC;
box-shadow: 0 12px 32px rgba(59, 16, 88, 0.28);
min-height: 180px;
transition: all 0.25s ease;
}

.pa-intro-logo:hover {
border-color: #a56ac7;
box-shadow:
0 0 0 3px rgba(142, 75, 179, 0.60),
0 8px 20px rgba(33, 0, 56, 0.10);
}
.pa-intro-logo svg {
width: 100%;
max-width: 280px;
height: auto;
}
.pa-intro-logo-tag {
position: absolute;
bottom: 16px;
left: 0; right: 0;
text-align: center;
font-family: var(--font-primary-inter);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.pa-intro-content {
position: relative;
}
.pa-intro-content .pa-eyebrow {
margin-bottom: 10px;
}
.pa-intro-content h3 {
font-family: var(--font-primary-inter);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
margin: 0 0 14px;
line-height: 1.2;
}
.pa-intro-content p {
font-size: 15px;
line-height: 1.75;
color: #4c444f;
margin: 0;
}

/* -- Section 2: "What You Can Manage" 5-tile grid -- */
.pa-manage-header { margin-bottom: 36px; }
.pa-manage-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.pa-tile {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 24px 20px;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
gap: 12px;
}
.pa-tile:hover {
border-color: #C4B5D3;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(33, 0, 56, 0.06);
}
.pa-tile-icon {
width: 42px; height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
margin-bottom: 2px;
}
.pa-tile h4 {
font-family: var(--font-primary-inter);
font-size: 15px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 0 0 -4px;
line-height: 1.25;
}
.pa-tile p {
font-family: var(--font-primary-inter);
font-size: 13px;
line-height: 1.55;
color: #4c444f;
margin: 0;
font-weight: 400;
}

.pa-tile .olt-money-check-alt {
background-color:rgb(101, 29, 117);
}

.pa-tile .olt-calculator {
width:22px;
height:16px;
background-color:rgb(101, 29, 117);
}

.pa-tile .olt-plug {
background-color:rgb(101, 29, 117);
}

.pa-tile .olt-random {
background-color:rgb(101, 29, 117);
}

.pa-tile .olt-folder-open {
background-color:rgb(101, 29, 117);
}

/* -- Section 3: Closing CTA band -- */
.pa-cta-band {
background: linear-gradient(135deg, #3b1058 0%, #651d75 50%, #894098 100%);
border-radius: 24px;
padding: 56px 64px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.pa-cta-band::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.pa-cta-band::after {
content: '';
position: absolute;
bottom: -120px; left: 10%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.pa-cta-content {
flex: 1;
//min-width: 300px;
position: relative;
z-index: 1;
}
.pa-cta-band .pa-eyebrow {
color: #F6ADFF;
margin-bottom: 14px;
}
.pa-cta-band h2 {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
}
.pa-cta-band p {
font-size: 15px;
line-height: 1.65;
color: #E8D7F0;
margin: 0;
max-width: 560px;
}
.pa-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
min-width: 220px;
}
.pa-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.pa-cta-btn--primary {
background: #ffffff;
color: #3b1058;
}
.pa-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
color: #3b1058;
}
.pa-cta-btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.pa-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}

/* -- Responsive -- */
@media (max-width: 1199px) {
.pa-manage-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
.pa-intro { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
.pa-intro-logo { min-height: 160px; }
}
@media (max-width: 767px) {
.pa-section { margin-bottom: 56px; }
.pa-manage-grid { grid-template-columns: repeat(2, 1fr); }
.pa-intro { padding: 32px 24px; }
.pa-cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
.pa-cta-buttons { width: 100%; flex-direction: column; min-width: 0; }
.pa-cta-btn { flex: none; width: 100%; padding: 12px 20px; font-size: 13px; white-space: normal; }
}
@media (max-width: 480px) {
.pa-manage-grid { grid-template-columns: 1fr; }
}

/* -�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�
COMPARISON TABLE
-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-� */

.cmp-section-header { margin-bottom: 28px; }
.cmp-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px; font-weight: 700;
color: #894098; letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 10px;
}
.cmp-heading {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}

/* Desktop table */
.cmp-table {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(33, 0, 56, 0.05);
margin-bottom: 80px;
}
.cmp-header {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
background: linear-gradient(180deg, #fdfaff 0%, #F5EEFA 100%);
border-bottom: 1px solid #E8D7F0;
}
.cmp-header-cell {
padding: 28px 24px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
border-left: 1px solid #E8D7F0;
}
.cmp-header-cell:first-child {
border-left: none;
justify-content: center;
}
.cmp-header-cell.highlight {
background: linear-gradient(180deg, rgba(137, 64, 152, 0.08) 0%, rgba(137, 64, 152, 0.04) 100%);
position: relative;
}
.cmp-header-cell.highlight::before {
content: 'POPULAR';
position: absolute;
top: 12px;
right: 16px;
font-family: var(--font-primary-inter);
font-size: 9px;
font-weight: 800;
color: #3b1058;
background: #F6ADFF;
padding: 4px 8px;
border-radius: 999px;
letter-spacing: 0.8px;
}
.cmp-header-eyebrow {
font-family: var(--font-primary-inter);
font-size: 10.5px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.cmp-header-title {
font-family: var(--font-primary-inter);
font-size: 22px;
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.15;
}
.cmp-header-sub {
font-size: 13px;
color: #718096;
line-height: 1.5;
margin-top: 2px;
}
.cmp-header-topline {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.cmp-header-topline-main {
font-family: var(--font-primary-inter);
font-size: 17px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
line-height: 1.25;
}

/* Table rows */
.cmp-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
border-bottom: 1px solid #F0EBF5;
transition: background 0.15s ease;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row:hover { background: #fdfaff; }
.cmp-row.alt { background: #fcfbfe; }
.cmp-row.alt:hover { background: #faf5fd; }

.cmp-feature {
padding: 18px 24px;
font-family: var(--font-primary-inter);
font-weight: 700;
font-size: 14px;
color: #210038;
line-height: 1.45;
display: flex;
align-items: center;
}
.cmp-cell {
padding: 18px 22px;
font-family: var(--font-primary-inter);
font-size: 14px;
color: #4c444f;
line-height: 1.45;
border-left: 1px solid #F0EBF5;
display: flex;
align-items: center;
}
.cmp-cell.highlight {
background: rgba(137, 64, 152, 0.035);
}
.cmp-row:hover .cmp-cell.highlight { background: rgba(137, 64, 152, 0.06); }

.cmp-pill {
display: flex;
align-items: center;
gap: 11px;
}
.cmp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
min-width: 24px;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
.cmp-icon.yes {
background: #E6F4EA;
color: #1a7a3f;
}
.cmp-icon.warn {
background: #FDF0D5;
color: #854d0e;
}
.cmp-icon.no {
background: #FDEEEE;
color: #b32828;
}
.cmp-text.muted { color: #a1909f; }

/* Mobile card layout */
.cmp-mobile { display: none; }

@media (max-width: 767px) {
.cmp-table { display: none; }
.cmp-mobile {
display: block;
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(33, 0, 56, 0.05);
margin-bottom: 56px;
}
.cmp-mobile-col-header {
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(180deg, #fdfaff 0%, #F5EEFA 100%);
border-bottom: 1px solid #E8D7F0;
}
.cmp-mobile-col-label {
padding: 20px 14px 18px;
text-align: center;
position: relative;
}
.cmp-mobile-col-label:first-child {
border-right: 1px solid #E8D7F0;
}
.cmp-mobile-col-label.highlight {
background: linear-gradient(180deg, rgba(137, 64, 152, 0.08) 0%, rgba(137, 64, 152, 0.04) 100%);
}
.cmp-mobile-col-eyebrow {
font-family: var(--font-primary-inter);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.3px;
text-transform: uppercase;
color: #894098;
display: block;
margin-bottom: 4px;
}
.cmp-mobile-col-name {
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
display: block;
}
.cmp-mobile-row {
border-bottom: 1px solid #F0EBF5;
}
.cmp-mobile-row:last-child { border-bottom: none; }
.cmp-mobile-row.alt { background: #fcfbfe; }
.cmp-mobile-feature {
padding: 14px 18px 6px;
font-family: var(--font-primary-inter);
font-size: 11.5px;
font-weight: 700;
color: #894098;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.cmp-mobile-cells {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cmp-mobile-cell {
padding: 4px 16px 14px;
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
}
.cmp-mobile-cell:first-child {
border-right: 1px solid #F0EBF5;
}
.cmp-mobile-cell.highlight {
background: rgba(137, 64, 152, 0.035);
}
.cmp-mobile-icon {
width: 19px; height: 19px;
min-width: 19px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
}
.cmp-mobile-icon.yes { background: #E6F4EA; color: #1a7a3f; }
.cmp-mobile-icon.warn { background: #FDF0D5; color: #854d0e; }
.cmp-mobile-icon.no { background: #FDEEEE; color: #b32828; }
.cmp-mobile-text {
font-family: var(--font-primary-inter);
font-size: 12.5px;
color: #382b42;
line-height: 1.4;
}
.cmp-mobile-text.muted { color: #a1909f; }
}

/* -- Closing CTA band -- */
.cmp-cta-band {
background: linear-gradient(135deg, #3b1058 0%, #651d75 50%, #894098 100%);
border-radius: 24px;
padding: 56px 64px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
margin-bottom: 40px;
}
.cmp-cta-band::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.cmp-cta-band::after {
content: '';
position: absolute;
bottom: -120px; left: 10%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(246, 173, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.cmp-cta-content {
flex: 1;
//min-width: 300px;
position: relative;
z-index: 1;
}
.cmp-cta-band .cmp-eyebrow {
color: #F6ADFF;
margin-bottom: 14px;
}
.cmp-cta-band h2 {
font-family: var(--font-primary-inter);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
}
.cmp-cta-band p {
font-size: 15px;
line-height: 1.65;
color: #E8D7F0;
margin: 0;
max-width: 560px;
}
.cmp-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
min-width: 220px;
}
.cmp-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
}
.cmp-cta-btn--primary {
background: #ffffff;
color: #3b1058;
}
.cmp-cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
color: #3b1058;
}
.cmp-cta-btn--secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.cmp-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767px) {
.cmp-cta-band { padding: 40px 28px; flex-direction: column; align-items: flex-start; }
.cmp-cta-buttons { width: 100%; flex-direction: column; min-width: 0; }
.cmp-cta-btn { flex: none; width: 100%; padding: 12px 20px; font-size: 13px; white-space: normal; }
}
.excluded-icon {
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
}
.excluded-icon .olt-times { width: 15px; height: 15px; background-color: #b32828; -webkit-mask-position: center; mask-position: center; }

/* -�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�
CUSTOMER SERVICE PAGE LAYOUT
-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-� */

.cs-section { margin-bottom: 64px; }
.cs-section:last-of-type { margin-bottom: 40px; }

.cs-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.cs-heading {
font-family: var(--font-primary-inter);
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 800;
color: #210038;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
}
.cs-subheading {
font-size: 15px;
line-height: 1.65;
color: #4c444f;
margin: 0 0 28px;
max-width: 680px;
}
.cs-section-header { margin-bottom: 24px; }

/* -- Card base -- */
.cs-card {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 16px;
padding: 32px;
transition: all 0.2s ease;
}
.cs-card:hover {
border-color: #C4B5D3;
box-shadow: 0 6px 20px rgba(33, 0, 56, 0.06);
}
.cs-card--accent {
border-color: #E8D7F0;
background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
}
.cs-card--accent:hover { border-color: #894098; }

/* -- Card sub-title + eyebrow (inside card) -- */
.cs-card-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 10px;
line-height: 1;
}
.cs-card h3 {
font-family: var(--font-primary-inter);
font-size: 20px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 0 0 10px;
line-height: 1.25;
}
.cs-card p {
color: #4c444f;
font-size: 15px;
line-height: 1.65;
margin: 0 0 16px;
}
.cs-card p:last-child { margin-bottom: 0; }
.cs-card p a {
color: #651d75;
font-weight: 700;
text-decoration: none;
border-bottom: 1.5px solid #ddd0ea;
transition: border-color 0.2s;
}
.cs-card p a:hover { border-bottom-color: #651d75; }
.cs-card strong { color: #210038; font-weight: 700; }

/* -- Method row (icon + content) -- */
.cs-method {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 20px 0;
border-bottom: 1px solid #E8D7F0;
}
.cs-method:first-of-type { padding-top: 8px; }
.cs-method:last-child { border-bottom: none; padding-bottom: 4px; }
.cs-method-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #F5EEFA 0%, #E8D7F0 100%);
color: #651d75;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
}

.cs-method-icon .olt-envelope {
  background-color: #651d75;
  width: 40px;
  height: 17px;
  margin-left: 13px;
}

.cs-method-icon .olt-headset {
  background-color: #651d75;
  width: 40px;
  height: 17px;
  margin-left: 13px;
}

.cs-method-icon .olt-file-alt {
  background-color: #651d75;
  width: 40px;
  height: 17px;
  margin-left: 11px;
}

.cs-method-icon .olt-question-circle {
  background-color: #651d75;
  width: 40px;
  height: 17px;
  margin-left: 10px;
}

.cs-method-icon .olt-shield-alt {
  background-color: #651d75;
  width: 40px;
  height: 17px;
  margin-left: 13px;
}

.cs-btn-group  .olt-envelope {
  width: 12px;
  height: 12px;
}

.cs-btn-group  .olt-phone {
  width: 15px;
  height: 15px;
}

.cs-method-body { flex: 1; min-width: 0; }
.cs-method-body h4 {
font-family: var(--font-primary-inter);
font-size: 16px;
font-weight: 800;
color: #210038;
letter-spacing: -0.01em;
margin: 0 0 6px;
line-height: 1.25;
}
.cs-method-body p {
font-size: 14.5px;
line-height: 1.6;
color: #4c444f;
margin: 0 0 12px;
}

/* -- Buttons (unified system) -- */
.cs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
font-family: var(--font-primary-inter);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
white-space: nowrap;
border: 1.5px solid transparent;
}
.cs-btn--primary {
background: linear-gradient(135deg, #651d75 0%, #894098 100%);
color: #ffffff;
box-shadow: 0 4px 12px rgba(101, 29, 117, 0.22);
}
.cs-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(101, 29, 117, 0.32);
}
.cs-btn--secondary {
background: #ffffff;
color: #651d75;
border-color: #E8D7F0;
}
.cs-btn--secondary:hover {
border-color: #894098;
color: #4A1A6B;
}
.cs-btn-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

/* -- Hours panels -- */
.cs-hours-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
}
.cs-hours-panel {
background: #F5EEFA;
border: 1px solid #E8D7F0;
border-radius: 12px;
padding: 16px 18px;
}
.cs-hours-panel-label {
font-family: var(--font-primary-inter);
font-size: 10px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 8px;
}
.cs-hours-panel-title {
font-family: var(--font-primary-inter);
font-size: 14px;
font-weight: 800;
color: #210038;
margin: 0 0 10px;
}
.cs-hours-row {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 10px;
font-size: 13px;
margin-bottom: 4px;
}
.cs-hours-day { color: #4c444f; font-weight: 600; }
.cs-hours-time { color: #4c444f; }
.cs-hours-note {
font-size: 11px;
color: #894098;
margin: 8px 0 0;
font-weight: 600;
letter-spacing: 0.02em;
}

/* -- Two-col section -- */
.cs-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

/* -- IRS info strip -- */
.cs-irs-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.cs-irs-strip-text h3 {
margin: 0 0 8px;
}
.cs-irs-strip-text p {
margin: 0;
max-width: 560px;
}

/* -- Responsive -- */
@media (max-width: 1023px) {
.cs-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.cs-section { margin-bottom: 48px; }
.cs-card { padding: 24px 20px; }
.cs-hours-grid { grid-template-columns: 1fr; }
.cs-method { gap: 14px; }
.cs-method-icon { width: 40px; height: 40px; font-size: 15px; }
.excluded-icon .olt-times { width: 13px; height: 13px; }
}

/* ==========================================
NEW: EDITORIAL CONTENT LAYOUT
========================================== */
.tax-layout {
display: grid !important;
grid-template-columns: 260px 1fr !important;
gap: 56px !important;
align-items: start !important;
margin-bottom: 40px !important;
}

/* --- TOC --- */
.tax-toc {
position: sticky !important;
top: 90px !important;
max-height: calc(100vh - 110px) !important;
overflow-y: auto !important;
padding: 4px 0 !important;
}
.tax-toc-label {
font-family: var(--font-primary-inter) !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #894098 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin: 0 0 16px 0 !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #E8D7F0 !important;
}
.tax-toc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tax-toc-list li { margin: 0 !important; }
.tax-toc-list a {
display: block !important;
font-family: var(--font-primary-inter) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #4c444f !important;
text-decoration: none !important;
padding: 8px 0 8px 14px !important;
border-left: 2px solid transparent !important;
transition: all 0.15s ease !important;
line-height: 1.4 !important;
}
.tax-toc-list a:hover {
color: #651d75 !important;
border-left-color: #894098 !important;
background: rgba(137, 64, 152, 0.04) !important;
}
.tax-toc-list a.is-active {
color: #651d75 !important;
border-left-color: #651d75 !important;
font-weight: 600 !important;
}

/* --- CONTENT STREAM --- */
.tax-content { min-width: 0 !important; }

.tax-section {
padding: 32px 0 !important;
border-bottom: 1px solid #E8E4EC !important;
scroll-margin-top: 90px !important;
}
.tax-section:first-child { padding-top: 0 !important; }
.tax-section:last-child { border-bottom: none !important; }

.tax-eyebrow {
font-family: var(--font-primary-inter) !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #894098 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin: 0 0 10px 0 !important;
display: block !important;
}

.tax-eyebrow-badge {
font-family: var(--font-primary-inter) !important;
font-size: 11px; !important;
font-weight: 700; !important;
color: #651d75;
letter-spacing: 0.15em;  
border-radius: 6px;
text-transform: uppercase;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
padding: 5px 12px;          
background-color: #F5EEFA;
line-height: 1;
}

.tax-heading {
font-family: var(--font-primary-inter) !important;
font-size: clamp(22px, 2.4vw, 28px) !important;
font-weight: 800 !important;
color: #210038 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
margin: 0 0 14px 0 !important;
}
.tax-body {
font-family: var(--font-primary-plus) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #4c444f !important;
line-height: 1.65 !important;
margin: 0 !important;
max-width: 720px !important;
}
.tax-body strong { color: #210038 !important; font-weight: 700 !important; }
.tax-body + .tax-body { margin-top: 14px !important; }

/* --- TABLE (editorial, clean) --- */
.tax-table-wrap {
margin: 20px 0 0 0 !important;
overflow-x: auto !important;
}
.tax-data-table {
width: 100% !important;
border-collapse: collapse !important;
background: transparent !important;
margin: 0 !important;
font-family: var(--font-primary-plus) !important;
}
.tax-data-table thead tr { background: transparent !important; }
.tax-data-table th {
padding: 10px 16px !important;
text-align: left !important;
font-weight: 700 !important;
color: #210038 !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-bottom: 2px solid #E8D7F0 !important;
background: transparent !important;
}
.tax-data-table td {
padding: 14px 16px !important;
text-align: left !important;
color: #4c444f !important;
font-size: 14px !important;
font-weight: 500 !important;
border-bottom: 1px solid #F0EBF5 !important;
background: transparent !important;
vertical-align: middle !important;
}
.tax-data-table tbody tr:nth-child(even) td { background: #fdfbfe !important; }
.tax-data-table tr:last-child td { border-bottom: none !important; }
.tax-data-table td:first-child, .tax-data-table th:first-child {
font-weight: 700 !important;
color: #210038 !important;
}

.tax-data-font-lighter td:first-child { font-weight: 500 !important; color: #4c444f  !important;}

/* --- CALLOUT (for OBBB update) --- */
.tax-callout {
margin: 20px 0 0 0 !important;
padding: 18px 22px !important;
background: #faf4ff !important;
border: 1px solid #E8D7F0 !important;
border-left: 3px solid #894098 !important;
border-radius: 0 12px 12px 0 !important;
font-size: 14px !important;
color: #4c444f !important;
line-height: 1.6 !important;
}
.tax-callout-label {
font-family: var(--font-primary-inter) !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #894098 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin: 0 0 6px 0 !important;
display: block !important;
}
.tax-callout a {
color: #651d75 !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
.tax-callout a:hover { color: #4A1A6B !important; }
.tax-callout strong { color: #210038 !important; }

/* --- RESPONSIVE --- */
@media (max-width: 1023px) {
.tax-layout {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.tax-toc {
position: relative !important;
top: 0 !important;
max-height: none !important;
padding: 20px 24px !important;
background: #ffffff !important;
border: 1px solid #E8E4EC !important;
border-radius: 16px !important;
}
.tax-toc-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 16px !important;
}
.col-lg-3, .col-md-3, #olt-sidebar-toggle, #olt-sidebar-backdrop { display: none !important; }
}
@media (max-width: 640px) {
.tax-toc-list { grid-template-columns: 1fr !important; }
.tax-section { padding: 24px 0 !important; }
.tax-data-table th, .tax-data-table td {
padding: 10px 8px !important;
font-size: 12px !important;
}
}

/* ==========================================
INTERACTIVE MAP
========================================== */
.map-section {
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 20px;
padding: 24px 28px 28px;
margin-bottom: 32px;
position: relative;
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.map-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
}
.map-hint {
font-size: 13px;
color: #718096;
display: flex;
align-items: center;
gap: 6px;
}
.map-hint i { color: #C4B5D3; font-size: 11px; }
.map-wrap {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
#us-map {
width: 100%;
height: auto;
display: block;
}
#us-map path.state-shape {
fill: #F5EEFA;
stroke: #ffffff;
stroke-width: 1.2;
stroke-linejoin: round;
transition: fill 0.15s ease;
cursor: pointer;
}
#us-map path.state-shape:hover,
#us-map path.state-shape.is-hovered {
fill: #894098;
}
#us-map path.state-shape.is-dimmed {
fill: #F0EBF3;
cursor: default;
}
#us-map path.state-shape.is-matched {
fill: #E8D7F0;
}
#us-map path.state-shape.is-matched:hover {
fill: #894098;
}
.map-tooltip {
position: fixed;
background: #210038;
color: #ffffff;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s ease;
white-space: nowrap;
z-index: 10000;
transform: translate(-50%, -130%);
box-shadow: 0 4px 14px rgba(33, 0, 56, 0.25);
}
.map-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #210038;
}
.map-tooltip.show { opacity: 1; }
.map-tooltip .tt-abbr {
display: inline-block;
font-size: 10px;
font-weight: 700;
background: rgba(255,255,255,0.18);
color: #E8D7F0;
padding: 2px 6px;
border-radius: 4px;
margin-right: 6px;
letter-spacing: 0.5px;
}
.map-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
color: #894098;
font-size: 14px;
font-weight: 500;
gap: 10px;
}
.map-loading::before {
content: '';
width: 16px; height: 16px;
border: 2px solid #E8D7F0;
border-top-color: #894098;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================
SEARCH + GRID
========================================== */
.search-section {
margin-bottom: 20px;
}
.search-wrap {
position: relative;
max-width: 420px;
}

.search-wrap .olt-search{
background-color: #894098;
}
.search-wrap i.olt-search {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #894098;
font-size: 14px;
pointer-events: none;
}
#state-search {
width: 100%;
padding: 12px 44px 12px 44px;
border: 1.5px solid #E8D7F0;
border-radius: 12px;
font-size: 15px;
font-family: var(--font-primary-plus);
color: #1A1A2E;
background: #ffffff;
outline: none;
transition: all 0.15s ease;
}
#state-search::placeholder { color: #A0AEC0; }
#state-search:focus {
border-color: #894098;
box-shadow: 0 0 0 3px rgba(137, 64, 152, 0.12);
}
.search-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: #F5EEFA;
border: none;
color: #894098;
width: 24px; height: 24px;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 11px;
transition: background 0.15s;
}
.search-clear:hover { background: #E8D7F0; }
.search-clear.visible { display: flex; }

.search-clear .olt-times{
width:12px;
height:9px;
background-color:#894098;
}

.search-count {
font-size: 13px;
color: #718096;
margin-top: 10px;
}
.search-count strong { color: #210038; font-weight: 700; }

.state-list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
margin-top: 8px;
}
.state-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #ffffff;
border: 1px solid #E8E4EC;
border-radius: 12px;
text-decoration: none;
color: #1A1A2E;
font-size: 14px;
font-weight: 600;
transition: all 0.15s ease;
}
.state-card:hover {
border-color: #894098;
background: #fdfaff;
color: #651d75;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(101, 29, 117, 0.08);
}
.state-card:hover .state-abbr {
background: #894098;
color: #ffffff;
}
.state-abbr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
background: #F5EEFA;
color: #651d75;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
border-radius: 8px;
transition: all 0.15s ease;
}
.state-card.is-highlighted {
border-color: #894098;
background: #fdfaff;
box-shadow: 0 6px 18px rgba(101, 29, 117, 0.14);
}
.state-card.is-highlighted .state-abbr {
background: #894098;
color: #ffffff;
}
.state-card.is-hidden { display: none !important; }

/* Territories special card */
.territories-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #FAF8FC;
border: 1px dashed #C4B5D3;
border-radius: 12px;
color: #718096;
font-size: 14px;
font-weight: 500;
font-style: italic;
}
.territories-card .state-abbr {
background: transparent;
border: 1px dashed #C4B5D3;
color: #894098;
font-style: normal;
}

.no-results {
display: none;
padding: 32px 24px;
text-align: center;
color: #4c444f;
font-size: 14px;
background: #FAF8FC;
border-radius: 12px;
border: 1px dashed #E8D7F0;
grid-column: 1 / -1;
}
.no-results.visible { display: block; }
.no-results strong { color: #210038; }

@media (max-width: 640px) {
.map-section { padding: 20px 16px; }
.state-list-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.state-card { font-size: 13px; padding: 10px 12px; }
}

/* ==========================================
STATE FORMS DRAWER
========================================== */
#forms-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 0, 56, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
#forms-backdrop.active {
opacity: 1;
pointer-events: auto;
}

#forms-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(560px, 92vw);
background: #ffffff;
z-index: 1001;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: -12px 0 40px rgba(33, 0, 56, 0.20);
overflow: hidden;
}
#forms-drawer.open {
transform: translateX(0);
}

.drawer-header {
padding: 24px 28px 20px;
border-bottom: 1px solid #E8E4EC;
background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
flex-shrink: 0;
}
.drawer-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.drawer-eyebrow {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
}
.drawer-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F5EEFA;
border: none;
color: #651d75;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.15s;
}
.drawer-close:hover {
background: #894098;
color: #ffffff;
}

.drawer-close .olt-times {
width:17px;
height:15px;
background-color: #651d75;
}

.drawer-close:hover .olt-times {
background-color: #ffffff;
}

.drawer-title-row {
display: flex;
align-items: center;
gap: 14px;
}
.drawer-abbr {
width: 52px;
height: 52px;
flex-shrink: 0;
background: linear-gradient(135deg, #894098 0%, #651d75 100%);
color: #ffffff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-primary-inter);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.5px;
box-shadow: 0 4px 14px rgba(137, 64, 152, 0.25);
}
.drawer-title {
font-family: var(--font-primary-inter);
font-size: 26px;
font-weight: 800;
color: #210038;
margin: 0;
letter-spacing: -0.02em;
line-height: 1.15;
}
.drawer-subtitle {
font-size: 13px;
color: #718096;
margin: 4px 0 0;
}

.drawer-body {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
}

.drawer-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #894098;
font-size: 14px;
gap: 10px;
}
.drawer-loading::before {
content: '';
width: 18px;
height: 18px;
border: 2px solid #E8D7F0;
border-top-color: #894098;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

.drawer-error {
padding: 32px 20px;
text-align: center;
background: #FFF7ED;
border: 1px solid #FED7AA;
border-radius: 12px;
color: #9A3412;
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drawer-error i { color: #D97706; font-size: 22px; margin-bottom: 10px; display: block; }
.drawer-error strong { color: #7C2D12; display: block; margin-bottom: 4px; }

.forms-section-label {
font-family: var(--font-primary-inter);
font-size: 11px;
font-weight: 700;
color: #894098;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 12px;
}
.forms-count {
display: inline-block;
background: #F5EEFA;
color: #651d75;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
margin-left: 8px;
letter-spacing: 0.5px;
}

.forms-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.forms-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
margin-bottom: 6px;
background: #ffffff;
border: 1px solid #F0EBF5;
border-radius: 10px;
font-size: 14px;
color: #1A1A2E;
line-height: 1.45;
transition: all 0.15s ease;
}
.forms-list li:hover {
border-color: #E8D7F0;
background: #fdfaff;
}
.forms-list li::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #894098;
margin-top: 9px;
}
.form-code {
font-family: var(--font-primary-inter);
font-weight: 700;
color: #210038;
white-space: nowrap;
}
.form-desc {
color: #4c444f;
font-weight: 500;
}
.form-sep { color: #C4B5D3; font-weight: 400; margin: 0 4px; }

.drawer-footer {
padding: 18px 28px;
border-top: 1px solid #E8E4EC;
background: #FAF8FC;
display: flex;
gap: 10px;
flex-shrink: 0;
}
.drawer-btn {
flex: 1;
padding: 12px 18px;
border-radius: 10px;
font-family: var(--font-primary-plus);
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
border: none;
}
.drawer-btn-primary {
background: #1A1A2E;
color: #ffffff;
}
.drawer-btn-primary:hover { background: #651d75; }
.drawer-btn-secondary {
background: #ffffff;
color: #1A1A2E;
border: 1px solid #E8E4EC;
}
.drawer-btn-secondary:hover {
border-color: #894098;
color: #651d75;
}

.drawer-btn-secondary .olt-external-link-alt {
background-color: #1A1A2E;
}

.drawer-btn-secondary:hover .olt-external-link-alt {
background-color: #651d75;
}

@media (max-width: 640px) {
#forms-drawer { width: 100vw; max-width: 100vw; }
.drawer-header { padding: 20px 20px 18px; }
.drawer-body { padding: 20px; }
.drawer-footer { padding: 14px 20px; flex-direction: column; }
.drawer-title { font-size: 22px; }
}

/* -- EVAL HERO -------------------------------------- */
.eval-hero {
margin: 32px 0 48px 0;
/* Soft gradient background to distinguish it from the white form card */
background: linear-gradient(145deg, #ffffff 0%, #FAF6FE 100%);
border: 1.5px solid #E2D7EE; 
border-radius: 24px;
overflow: hidden;
/* Pronounced drop-shadow for extra lift */
box-shadow: 0 16px 40px rgba(101, 29, 117, 0.08), 0 4px 12px rgba(101, 29, 117, 0.03);
}

/* Removed the heavy dark block and made it an elegant, integrated separator */
.hero-top-strip {
background: transparent;
border-bottom: 1.5px solid #EAE3F2;
padding: 20px 32px;
display: flex;
align-items: center;
gap: 14px;
}

.hero-top-strip .strip-logo {
height: 26px;
width: auto;
}

.hero-top-strip .strip-divider {
width: 1px;
height: 20px;
background: #D5C9E3;
}

.hero-top-strip .strip-text {
font-size: 13px;
font-weight: 700;
color: #1A1A2E;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.hero-top-strip .strip-badge-wrapper {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}

.hero-top-strip .strip-badge {
background: #1A1A2E;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 6px 16px;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: 0 4px 12px rgba(26, 26, 46, 0.15);
}

.hero-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
}

.hero-left {
padding: 40px 32px;
border-right: 1.5px solid #EAE3F2;
display: flex;
flex-direction: column;
justify-content: center;
}

.hero-left h1 {
font-size: clamp(26px, 3.2vw, 36px);
font-weight: 700;
color: #1A1A2E;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.hero-left h1 em {
font-style: italic;
color: #651d75;
}

.hero-left .tagline {
font-size: 15px;
color: #4A5568;
line-height: 1.65;
margin: 0 0 28px;
max-width: 95%;
}

.hero-left .phone-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #1A1A2E, #2d2d44);
color: #fff;
border-radius: 9999px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
width: fit-content;
box-shadow: 0 6px 16px rgba(26, 26, 46, 0.2);
}
.hero-left .phone-badge:hover {
background: linear-gradient(135deg, #651d75, #4A1A6B);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(101, 29, 117, 0.25);
}
.hero-left .phone-badge i { font-size: 14px; }

.phone-badge .olt-phone {
   width: 20px;
   height: 14px;
}

.hero-right {
padding: 40px 32px;
background: transparent; /* Lets the soft card gradient show through */
}

.includes-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #651d75;
margin-bottom: 20px;
}

.includes-list {
list-style: none;
padding: 0;
margin: 0;
}
.includes-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #EAE3F2;
}
.includes-list li:first-child {
border-top: 1px solid #EAE3F2;
}
.includes-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.inc-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #EAE3F2;
box-shadow: 0 4px 10px rgba(74, 26, 107, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.inc-icon i {
color: #651d75;
font-size: 14px;
}

.inc-icon .olt-file-alt {
  width:20px;
  height:15px;
  background-color: #651d75;
}

.inc-icon .olt-briefcase {
  width:20px;
  height:15px;
  background-color: #651d75;
}

.inc-icon .olt-globe-americas {
  width:20px;
  height:15px;
  background-color: #651d75;
}

.inc-text strong {
display: block;
font-size: 14px;
font-weight: 700;
color: #1A1A2E;
margin-bottom: 4px;
}
.inc-text span {
font-size: 13px;
color: #4A5568;
line-height: 1.5;
}

.eval-badge {
display: inline-block;
align-self: flex-start; 
background: #f0e8f7;
color: #651d75;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 6px 14px;
border-radius: 9999px;
margin-bottom: 16px;
}

.hero-directive {
background: #f0e8f7;
border: 1px solid #e1dae4ff;
border-radius: 16px;
padding: 24px;
margin: 40px 0;
text-align: center;
}
.hero-directive h3 {
font-size: 18px;
font-weight: 700;
color: #651d75;
margin-bottom: 8px;
}
.hero-directive p {
font-size: 14px;
color: #4A5568;
margin: 0;
}

/* -- FORM CARD -------------------------------------- */
.form-card {
background: #fff;
border: 1.5px solid rgba(33,0,56,0.10);
border-radius: 24px;
box-shadow: 0 8px 30px rgba(74,26,107,0.07);
padding: 40px 44px;
margin-bottom: 48px;
}
.form-section-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: #894098;
margin-bottom: 20px; padding-bottom: 10px;
border-bottom: 1.5px solid #f0e8f7;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 28px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: 13px; font-weight: 600; color: #1A1A2E; }
.form-group label .req { color: #894098; margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="number"],
select {
width: 100%; padding: 10px 14px;
border: 1.5px solid #e2d9ea; border-radius: 10px;
font-size: 14px; font-family: var(--font-primary-plus);
color: #1A1A2E; background: #fdfcfe;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none; appearance: none; -webkit-appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus {
border-color: #894098;
box-shadow: 0 0 0 3px rgba(137,64,152,0.12);
}
.phone-row { display: flex; align-items: center; gap: 8px; }
.phone-row input.area { width: 80px; flex-shrink: 0; }
.phone-row .sep { color: #9CA3AF; font-weight: 500; }
.phone-row input.number { flex: 1; }

.radio-group { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.radio-label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #4A5568; cursor: pointer; }
.radio-label input[type="radio"] { accent-color: #894098; width: 16px; height: 16px; cursor: pointer; }

.conditional-field {
display: none; grid-column: 1 / -1;
background: #f9f5ff; border: 1.5px dashed #ddd0ea;
border-radius: 12px; padding: 18px 20px;
}
.conditional-field.visible { display: block; }
.conditional-field label { font-size: 13px; font-weight: 600; color: #651d75; margin-bottom: 8px; display: block; }
.conditional-field input { background: #fff; }

/* New container class for the submit button */
.submit-container {
display: flex;
justify-content: center; /* Center for mobile */
padding-top: 24px;
border-top: 1.5px solid #f0e8f7;
margin-top: 24px;
}

@media (min-width: 768px) {
.submit-container {
justify-content: flex-end; /* Align right for desktop */
}
}

.submit-btn {
display: inline-flex; 
align-items: center; 
justify-content: center; 
gap: 8px;
background: #F0E8F7;
color: #651d75;
font-size: 15px; 
font-weight: 700;
padding: 14px 40px; 
border: 2px solid #651d75;
border-radius: 9999px;
cursor: pointer; 
transition: all 0.2s ease;
font-family: var(--font-primary-plus);
}

.submit-btn:hover {
background: #E2D7EE; /* Soften hover: just a slight tint adjustment instead of full invert */
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(101, 29, 117, 0.15);
}

/* -- RESPONSIVE ------------------------------------- */

@media (max-width: 768px) {
.form-card { padding: 28px 20px; }
.form-grid { grid-template-columns: 1fr; }
.hero-split { grid-template-columns: 1fr; }
.hero-left { padding: 32px 24px; border-right: none; border-bottom: 1px solid #E8E4EC; }
.hero-right { padding: 32px 24px; }
.hero-top-strip { padding: 12px 20px; }
.hero-top-strip .strip-text, .hero-top-strip .strip-divider { display: none; }
}

.olt-icon-arrow {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: #651D75;
    -webkit-mask-image: url('../images/arrow-right-solid.png');
    mask-image: url('../images/arrow-right-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-shield-alt {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/shield-alt-solid.png');
    mask-image: url('../images/shield-alt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-icon-check {
    display: inline-block;
    width: 11px;
    height: 10px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/check-solid.png');
    mask-image: url('../images/check-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-headset {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/headset-solid.png');
    mask-image: url('../images/headset-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chevron-right {
    display: inline-block;
    width: 13px;
    height: 10px;
    background-color: #C4B5D3;
    -webkit-mask-image: url('../images/chevron-right-solid.png');
    mask-image: url('../images/chevron-right-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chevron-doubleright {
    display: inline-block;
    width: 13px;
    height: 10px;
    background-color: #C4B5D3;
    -webkit-mask-image: url('../images/chevron-doubleright-solid.png');
    mask-image: url('../images/chevron-doubleright-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chevron-left {
    display: inline-block;
    width: 13px;
    height: 10px;
    background-color: #C4B5D3;
    -webkit-mask-image: url('../images/chevron-left-solid.png');
    mask-image: url('../images/chevron-left-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chevron-down {
    display: inline-block;
    width: 13px;
    height: 10px;
    background-color: #C4B5D3;
    -webkit-mask-image: url('../images/chevron-down-solid.png');
    mask-image: url('../images/chevron-down-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chevron-up {
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #C4B5D3;
    -webkit-mask-image: url('../images/chevron-up-solid.png');
    mask-image: url('../images/chevron-up-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-bars {
    display: inline-block;
    width: 32px;
    height: 21px;
    background-color: var(--color-text-dark);
    -webkit-mask-image: url('../images/bars-solid.png');
    mask-image: url('../images/bars-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-times {
    display: inline-block;
    width: 32px;
    height: 21px;
    background-color: var(--color-text-dark);
    -webkit-mask-image: url('../images/times-solid.png');
    mask-image: url('../images/times-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-shopping-cart {
    display: inline-block;
    width: 24px;
    height: 20px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/shopping-cart-solid.png');
    mask-image: url('../images/shopping-cart-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-bookmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/bookmark-solid.png');
    mask-image: url('../images/bookmark-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-external-link-alt {
    display: inline-block;
    width: 24px;
    height: 20px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/external-link-alt-solid.png');
    mask-image: url('../images/external-link-alt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-comment-dots {
    display: inline-block;
    width: 24px;
    height: 20px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/comment-dots-solid.png');
    mask-image: url('../images/comment-dots-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-info-circle {
    display: inline-block;
    width: 17px;
    height: 11px;
    background-color: #9A3412;
    -webkit-mask-image: url('../images/info-circle-solid.png');
    mask-image: url('../images/info-circle-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-exclamation-triangle {
    display: inline-block;
    width: 40px;
    height: 22px;
    background-color: #D97706;
    -webkit-mask-image: url('../images/exclamation-triangle-solid.png');
    mask-image: url('../images/exclamation-triangle-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-map-marker-alt {
    display: inline-block;
    width: 5px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/map-marker-alt-solid.png');
    mask-image: url('../images/map-marker-alt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-phone {
    display: inline-block;
    width: 5px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/phone-solid.png');
    mask-image: url('../images/phone-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-fax {
    display: inline-block;
    width: 5px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/fax-solid.png');
    mask-image: url('../images/fax-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-envelope {
    display: inline-block;
    width: 5px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/envelope-solid.png');
    mask-image: url('../images/envelope-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-file-alt {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/file-alt-solid.png');
    mask-image: url('../images/file-alt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-briefcase {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/briefcase-solid.png');
    mask-image: url('../images/briefcase-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-globe-americas {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/globe-americas-solid.png');
    mask-image: url('../images/globe-americas-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-single-user {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/single-user-solid.png');
    mask-image: url('../images/single-user-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-question-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/question-circle-solid.png');
    mask-image: url('../images/question-circle-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-facebook-f-brands {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/facebook-f-brands.png');
    mask-image: url('../images/facebook-f-brands.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-twitter-brands {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/twitter-logo.png');
    mask-image: url('../images/twitter-logo.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-linkedin-in-brands {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/linkedin-in-brands.png');
    mask-image: url('../images/linkedin-in-brands.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-play {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/play-solid.png');
    mask-image: url('../images/play-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-star {
    display: inline-block;
    width: 17px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/star-solid.png');
    mask-image: url('../images/star-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-lightbulb {
    display: inline-block;
    width: 17px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/lightbulb-solid.png');
    mask-image: url('../images/lightbulb-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-server {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/server-solid.png');
    mask-image: url('../images/server-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-file-import {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/file-import-solid.png');
    mask-image: url('../images/file-import-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-user-shield {
    display: inline-block;
    width: 24px;
    height: 21px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/user-shield-solid.png');
    mask-image: url('../images/user-shield-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-file-text {
    display: inline-block;
    width: 24px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/file-text-solid.png');
    mask-image: url('../images/file-text-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-list-check {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/list-check-solid.png');
    mask-image: url('../images/list-check-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-download {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/download-solid.png');
    mask-image: url('../images/download-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-gear-solid {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/users-gear-solid.png');
    mask-image: url('../images/users-gear-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-bolt {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/bolt-solid.png');
    mask-image: url('../images/bolt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-signature {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/signature-solid.png');
    mask-image: url('../images/signature-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-chart-line {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/chart-line-solid.png');
    mask-image: url('../images/chart-line-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-cloud {
    display: inline-block;
    width: 27px;
    height: 22px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/cloud-solid.png');
    mask-image: url('../images/cloud-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-layer-group {
    display: inline-block;
    width: 27px;
    height: 22px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/layer-group-solid.png');
    mask-image: url('../images/layer-group-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-calculator {
    display: inline-block;
    width: 27px;
    height: 22px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/calculator-solid.png');
    mask-image: url('../images/calculator-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-coins {
    display: inline-block;
    width: 27px;
    height: 22px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/coins-solid.png');
    mask-image: url('../images/coins-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-tag {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/tag-solid.png');
    mask-image: url('../images/tag-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-sliders {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/sliders-solid.png');
    mask-image: url('../images/sliders-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-multiple-user {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/multiple-user-solid.png');
    mask-image: url('../images/multiple-user-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-puzzle-piece {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/puzzle-piece-solid.png');
    mask-image: url('../images/puzzle-piece-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-bullseye {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/bullseye-solid.png');
    mask-image: url('../images/bullseye-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-seedling {
    display: inline-block;
    width: 20px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/seedling-solid.png');
    mask-image: url('../images/seedling-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-money-check-alt {
    display: inline-block;
    width: 20px;
    height: 14px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/money-check-alt-solid.png');
    mask-image: url('../images/money-check-alt-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-plug {
    display: inline-block;
    width: 22px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/plug-solid.png');
    mask-image: url('../images/plug-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-random {
    display: inline-block;
    width: 22px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/random-solid.png');
    mask-image: url('../images/random-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-folder-open {
    display: inline-block;
    width: 22px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/folder-open-solid.png');
    mask-image: url('../images/folder-open-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-hand-pointer {
    display: inline-block;
    width: 15px;
    height: 13px;
    background-color: rgb(196, 181, 211);;
    -webkit-mask-image: url('../images/hand-pointer-solid.png');
    mask-image: url('../images/hand-pointer-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.olt-search {
    display: inline-block;
    width: 22px;
    height: 15px;
    background-color: #ffffff;
    -webkit-mask-image: url('../images/search-solid.png');
    mask-image: url('../images/search-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.error-icon {
    margin-left: 8px;
    flex-shrink: 0;
}
.OLTPROBodyError, .OLTPROBodyError .req { color: #FF0000 !important; }
.OLTPROTxtBoxErrBackground { background-color: #FFDDD5 !important; border: 1px solid #FF8989 !important; }
.OLTPROBodyTextInfo { color: #052D5A; font-family: var(--font-primary-plus); font-size: 12px; text-align: left; }
.OLTPROMainButton { background-color: #784783; color: #FFFFFF; font-weight: 600; font-size: 11px; font-family: var(--font-primary-plus); border: 1px solid #784783; padding: 4px 8px; cursor: pointer; text-transform: Uppercase; }

.cs-tax-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.cs-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #210038;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-input-group select, 
.cs-input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #E8D7F0;
  border-radius: 8px;
  font-size: 14px;
  color: #4c444f;
  outline: none;
}

.cs-tax-result {
  margin-top: 10px;
  padding: 12px;
  background: #F5EEFA;
  border-radius: 8px;
  text-align: center;
  color: #651d75;
}

.cs-data p a {
color: #651d75;
font-weight: 700;
text-decoration: none;
border-bottom: 1.5px solid #ddd0ea;
transition: border-color 0.2s;
}
.cs-data p a:hover { border-bottom-color: #651d75; }

.bank-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px;
}

.cs-method-patch ul {
padding:5px 0px 5px 20px !important;
font-family: var(--font-primary-plus) !important;
}

.cs-method-patch ul li {
padding:5px 0px 5px 20px !important;
font-family: var(--font-primary-plus) !important;
font-weight: 400;
}

.cs-method-patch li a {
color: #651d75;
font-weight: 700;
text-decoration: none;
border-bottom: 1.5px solid #ddd0ea;
transition: border-color 0.2s;
}

.cs-method-patch li a:hover { border-bottom-color: #651d75; }

.cs-method-patch ul a {
color: #651d75;
font-weight: 700;
text-decoration: none;
border-bottom: 1.5px solid #ddd0ea;
transition: border-color 0.2s;
}

.cs-method-patch ul a:hover { border-bottom-color: #651d75; }

.cs-method-icon .olt-external-link-alt { background-color: var(--color-primary-purple); width: 20px; height: 16px; display: block; margin: 0 auto; }
.cs-method:hover { background-color: rgba(101, 29, 117, 0.02); border-radius: 8px; }
.cs-btn--secondary { transition: all 0.2s ease-in-out; }

/* Mobile View */
@media (max-width: 768px) {
    .tier-tabs {
        display: flow;
        width: 100%;
        padding: 15px;
        border-radius: 16px;
        margin-bottom: 24px;
        gap: 4px;
        overflow-x: auto;
        justify-content: space-between;
    }
}

.pa-intro-img {
width: 100%; height: auto; margin-left: 60px;
}

/* Mobile View */
@media (max-width: 768px) {
  .pa-intro-logo {
    padding: 24px 10px;
    border-radius: 16px;
    min-height: 140px;
    box-shadow: 0 8px 20px rgba(59, 16, 88, 0.22);
  }
  
  .pa-intro-img {
    margin-left: 70px;
    width: 90%;
  }
  
  .cs-btn-mobile {
        white-space: unset !important;
    }
}

/* Mobile View */
@media (max-width: 480px) {
  .pa-intro-img {
    margin-left: 32px;
    width: 100%;
    display: block;
    margin-right: auto;
  }
}

.olt-arrow-left {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: #651D75;
    -webkit-mask-image: url('../images/arrow-left-solid.png');
    mask-image: url('../images/arrow-left-solid.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---------- Tax Estimation 2025 Begins ---------- */

.olt_row{
	display:flex !important;
	flex-wrap:wrap !important;
	align-items:center;
	margin-bottom:20px;
	margin-left: 0px !important;
	margin-right: 0px !important;
	padding-right: 8px;
	font-size: 14px !important;
}
    
.olt_row_wrap {
	flex-wrap:unset !important;
}

.col-left{
	width:60%;
	padding-right:15px;
}

.col-right{
	width:40%;
}


/* Switch Field */
.switch-field {
	font-family: var(--font-primary-inter);
	overflow: hidden;
}

.switch-title {
  	margin-bottom: 6px;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
	display: inline-block;
	width: 80px;
	background-color: #EFE9F5;
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	font-weight: 600 !important;
	text-align: center;
	text-shadow: none;
	padding: 6px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #894098;
	-webkit-box-shadow: none;
	box-shadow: none;
	color:#ffffff;
}

.switch-field label:first-of-type {
  	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  	border-radius: 0 4px 4px 0;
}

@media(max-width:600px){
	.col-left,
	.col-right{
	    width:100%;
	}
}

.olt_row_data {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 5px;
	padding-right: 8px;
	font-size: 14px !important;
}

.olt-col-6 {
	width: 50%;
}

.olt-col-3 {
	width: 25%;
}

.text-center {
	text-align: center;
}

.input-group {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	margin-right: 13px;
}

.input-group span {
	padding: 10px;
	background: #894098;
	border-right: 1px solid #ccc;
	color:#ffffff;
}

.input-group input {
	flex: 1;
	padding: 10px;
	border: none;
	outline: none;
}

.mobile-label {
	display: none;
	text-align: center;
	margin-bottom: 10px;
}

.label-block {
	color: #217821;
	text-align: left;
	font-size: 12px;
	display: block;
	white-space: pre-wrap;
	margin-top: 5px;
	padding: 0;
	line-height: 1.4;
}

.tier-card-tax-es {
	width:28%;
	float:left;
	margin-left:15px;
	padding:5px 15px;
}

.cs-tax-form-tax-es {
	width:50%;
	float:left;
}

.cs-tax-form-tax-bracket {
	margin-left:50px;
	width:40%;
	float:left;
}

.tier-card-panel {
	width:70%;
	float:left;
}

@media (max-width: 768px) {
        .olt-col-6,
        .olt-col-3 {
            width: 100%;
        }

        .desktop-only {
            display: none;
        }

        .mobile-label {
            display: block;
        }
        
        .tier-card-tax-es {
            width:82%;
        }
        
        .cs-tax-form-tax-es {
	    width:90%;
	}
	
	.cs-tax-form-tax-bracket {
	    margin-left:40px;
	    width:62%;
	}
	
	.tier-card-panel {
	   width:100%;
	}
}

@media (max-width: 344px) {
        .tier-card-tax-es {
            width:44%;
        }     
}

@media (max-width: 820px) {
        .tier-card-tax-es {
            width:44%;
        }     
}

@media (max-width: 912px) {
        .tier-card-tax-es {
            width:44%;
        }     
}

@media (max-width: 640px) {
        .tax-data-font td {
            font-size: 7px !important;
        }
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    text-align: right;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    text-align: right;
}


/* ---------- Tax Estimation 2025 Ends ---------- */

/* popup layout start*/
.form-card {
	position: relative !important;
}

#object1 {
	position: absolute !important;
	z-index: 990;
	width: 290px;
	background: #ffffff;
	border: 1px solid var(--color-primary-dark) !important;
	border-radius: 12px;
	font-family: var(--font-primary-plus) !important;
	text-align: left;
	box-shadow: var(--shadow-lg);
	visibility: hidden;
	margin: 0;
	padding: 0 !important;
}

#object1::after {
	content: "";
	position: absolute;
	top: 10px;
	right: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--color-primary-purple);
	border-right: none;
	z-index: 991;
}

#object1.flip-right::after {
	right: auto;
	left: -8px;
	border-left: none;
	border-right: 8px solid var(--color-primary-purple);
}

#object1 .popup-header {
	margin: 0;
	padding: 5px 8px;
	color: #ffffff;
	font-family: var(--font-primary-inter);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	background: linear-gradient(135deg, var(--color-primary-purple) 0%, var(--color-primary-dark) 100%);
	letter-spacing: -0.01em;
	border-top-left-radius: 11px;
	border-top-right-radius: 11px;
}

#object1 .popup-body {
	padding: 6px 8px;
	background: #ffffff;
}

#object1 .error-badge {
	display: inline-block;
	font-family: var(--font-primary-inter);
	font-size: 10px;
	font-weight: 700;
	color: #b32828;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 6px;
	padding: 2px 6px;
	background: #FDEEEE;
	border-radius: 4px;
	line-height: 1;
}

#object1 .error-content {
	font-family: var(--font-primary-plus);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-secondary);
}

#object1 .error-content br {
	content: "";
	margin: 4px 0;
	display: block;
}

#object1 .popup-footer {
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid var(--color-border-light);
	padding: 4px 8px;
	background: var(--color-bg-light);
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}

#object1 .OLTPROMainButton {
	height: 28px;
	padding: 0 7px;
	background: var(--color-primary-purple) !important;
	color: #ffffff !important;
	border: 1px solid var(--color-primary-dark) !important;
	border-radius: 6px;
	font-family: var(--font-primary-inter);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	box-shadow: 0 2px 5px rgba(101, 29, 117, 0.2);
	transition: none !important;
}

#object1 .OLTPROMainButton:hover,
#object1 .OLTPROMainButton:active,
#object1 .OLTPROMainButton:focus {
	background: var(--color-primary-purple) !important;
	color: #ffffff !important;
	border: 1px solid var(--color-primary-dark) !important;
	box-shadow: 0 2px 5px rgba(101, 29, 117, 0.2) !important;
	transform: none !important;
}

@media (max-width: 767px) {
	#object1 {
		width: calc(100% - 32px) !important; 
		box-shadow: var(--shadow-md) !important;
	}
	#object1::after, 
	#object1.flip-right::after {
		display: none !important;
	}
}
/* popup layout end*/

/* Createaccount layout start*/
.pwd-wrapper { 
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

input[type="text"].AccountInput,
input[type="password"].AccountInput,
input[type="text"].pwd-input-field,
input[type="password"].pwd-input-field {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	height: 44px;
	padding: 10px 42px 10px 16px;
	background: #FAFAFC;
	border: 1.5px solid #E2D9EA;
	border-radius: 12px;
	font-size: 15px;
	font-family: var(--font-primary-plus);
	color: #1A1A2E;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	display: block;
	letter-spacing: normal;
}

input[type="password"].AccountInput,
input[type="password"].pwd-input-field {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

input[type="text"].AccountInput:focus,
input[type="password"].AccountInput:focus,
input[type="text"].pwd-input-field:focus,
input[type="password"].pwd-input-field:focus {
	background: #FFFFFF;
	border-color: #651D75;
	box-shadow: 0 0 0 4px rgba(101, 29, 117, 0.12);
}

.help-icon-container {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	line-height: 1;
	margin: 0;
	padding: 0;
}

.help-icon-container .form-help-icon-node {
	width: 20px;
	height: 20px;
	display: inline-block;
	-webkit-mask-image: url('../../../main/pro/images/info-circle-solid.png');
	mask-image: url('../../../main/pro/images/info-circle-solid.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: #651D75; 
	filter: none;
	transition: background-color 0.15s ease-in-out;
}

.help-icon-container:hover .form-help-icon-node {
	background-color: #894098;
}

.pwd-toggle-btn {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 14px;
	cursor: pointer;
	z-index: 5;
	opacity: 0.6;
	margin: 0;
	padding: 0;
	transition: opacity 0.15s;
}
.pwd-toggle-btn:hover {
	opacity: 1;
}

.security-panel-box {
	width: 100%;
	background: #FDFBFF;
	border: 1px dashed #D5C9E3;
	border-radius: 14px;
	padding: 18px;
	margin-top: 4px;
	margin-bottom: 28px;
	box-sizing: border-box;
}
.security-panel-title {
	font-family: var(--font-primary-inter);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #651D75;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.security-panel-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, #D5C9E3, transparent);
}
.security-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}
@media (max-width: 640px) {
	.security-grid {
	grid-template-columns: 1fr;
	gap: 10px;
	}
}
.security-pill-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #4A5568;
	padding: 4px 0;
}
.security-pill-item img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex-shrink: 0;
}
.security-panel-notice {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid #EAE3F2;
	font-size: 12.5px;
	font-weight: 600;
	color: #210038;
	display: flex;
	align-items: center;
	gap: 6px;
}
.error-message-wrapper { font-size: 11.5px; color: var(--error); margin-top: 2px; display: block; font-weight: 500; }

#accName_spanid div[style*="color:#ff0000"],
#accName_spanid div[style*="color: rgb(255, 0, 0)"] {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background-color: #FFF7ED !important;
	border: 1px solid #FFEDD5 !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	margin-top: 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	font-family: var(--font-primary-inter), Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #C2410C !important;
	line-height: 1.4 !important;
	text-align: left !important;
}

#accName_spanid div[style*="color:#ff0000"]::before,
#accName_spanid div[style*="color: rgb(255, 0, 0)"]::before {
	content: "" !important;
	display: inline-block !important;
	width: 6px !important;
	height: 6px !important;
	background-color: #EA580C !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	margin-right: 2px !important;
}

#password_spanid table {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #FAF8FC !important;
	border: 1.5px dashed #C5B5D3 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin: 8px 0 25px 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 10px 30px -10px rgba(101, 29, 117, 0.08), 
	            0 4px 12px -4px rgba(74, 26, 107, 0.04) !important;
	transition: box-shadow 0.25s ease-in-out !important;
}

#password_spanid table:hover {
	box-shadow: 0 16px 36px -8px rgba(101, 29, 117, 0.12), 
	            0 6px 16px -4px rgba(74, 26, 107, 0.06) !important;
}

#password_spanid tbody, 
#password_spanid tr, 
#password_spanid td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-sizing: border-box !important;
}

#password_spanid .OLTPROSummaryHead {
	margin-bottom: 6px !important;
	text-align: left !important;
}

#password_spanid .OLTPROSummaryHead span {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #651D75 !important;
	text-decoration: none !important;
}

#password_spanid .OLTPROBodyTextInfo {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

#password_spanid .OLTPROBodyTextInfo > div {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: system-ui, sans-serif !important;
	font-size: 13px !important;
	color: #4A5568 !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 1px 0 !important;
}

#password_spanid .OLTPROBodyTextInfo > div:nth-of-type(5),
#password_spanid #SpaceRegion,
#password_spanid #StrongNoteRegion,
#password_spanid #pwd_strong_container {
	grid-column: 1 / -1 !important;
}

#password_spanid .OLTPROBodyTextInfo img {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	object-fit: contain !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	filter: none !important;
}

#password_spanid #StrongNoteRegion {
	margin-top: 6px !important;
	padding-top: 5px !important;
	border-top: 1px dashed #E2D9EA !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	color: #210038 !important;
	line-height: 1.4 !important;
}

#password_spanid #StrongNoteRegion B, 
#password_spanid #StrongNoteRegion U {
	text-decoration: none !important;
	font-weight: 700 !important;
}

#password_spanid #pwd_strong_container {
	margin-top: 7px !important;
	padding-top: 6px !important;
	border-top: 1px solid #E2D9EA !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column-reverse !important;
	gap: 1px !important;
}

#password_spanid #StrongRegion {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: #4A5568 !important;
	float: none !important;
	display: block !important;
	margin: 0 !important;
}

#password_spanid #StrengthText {
	font-weight: 800 !important;
}

#password_spanid #PwdMeter {
	width: 100% !important;
	height: 6px !important;
	background: #EFE9F5 !important;
	border-radius: 9999px !important;
	border: none !important;
	overflow: hidden !important;
	margin: 0 !important;
	position: relative !important;
	top: 0 !important;
}

#password_spanid #StrongMeter {
	height: 100% !important;
	display: block !important;
	border-radius: 9999px !important;
	top: 0 !important;
	position: absolute !important;
	transition: width 0.25s ease-in-out !important;
}

#password_spanid #SpaceRegion[style*="display: block"],
#password_spanid #SpaceRegion[style*="display: block;"] {
	display: flex !important;
}
/* Createaccount layout end*/