/* Cache Bust: 2026-06-24 v2 */
@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #0f172a;
    --textDark: #0f172a;
    --textMedium: #334155;
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #00adef;
    --accentDarker: #009ad5;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.24) sepia(1) hue-rotate(138deg) contrast(6) brightness(1.6) !important;}

/*------------------------*/
/* dark mode support
/*------------------------*/

html.dark-mode {
    --textDarker: #ffffff;
    --textDark: #f4f4f5;
    --textMedium: #d4d4d8;
    --borderMedium: #3f3f46;
    --borderLight: #27272a;
    --light: #09090b;
    --accent: #38bdf8;
    --accentDarker: #0ea5e9;
}

html.dark-mode body,
html.dark-mode .innerbody {
    background: var(--light);
    color: #d4d4d8;
}

/* ===== Force all text elements to be readable ===== */
html.dark-mode h1,
html.dark-mode h2 {
    color: #ffffff !important;
}
html.dark-mode h3 {
    color: #f4f4f5 !important;
}
html.dark-mode h4 {
    color: #d4d4d8 !important;
}
html.dark-mode p {
    color: #d4d4d8 !important;
}
html.dark-mode li {
    color: #d4d4d8 !important;
}
html.dark-mode section {
    color: #d4d4d8 !important;
}
html.dark-mode a {
    color: #d4d4d8 !important;
}
html.dark-mode a:hover {
    color: var(--accent) !important;
}
/* Section intro heading is often the Hero - make it white */
html.dark-mode section.intro h1,
html.dark-mode section.intro h2,
html.dark-mode section.bgimage h1,
html.dark-mode section.bgimage h2 {
    color: #d4d4d8 !important;
}
/* Services, features cards */
html.dark-mode section.services li .summary p,
html.dark-mode section.features li p,
html.dark-mode section.features li h3,
html.dark-mode .box p,
html.dark-mode .box h3,
html.dark-mode .box h4,
html.dark-mode .box li {
    color: #d4d4d8 !important;
}
/* All section backgrounds - dark */
html.dark-mode section:not(.bgimage) {
    background: var(--light) !important;
}
html.dark-mode section.image.alt,
html.dark-mode section.hasbackgroundcolor:not(.bgimage) {
    background: #0d0d10 !important;
    border-top: 1px solid var(--borderLight) !important;
    border-bottom: 1px solid var(--borderLight) !important;
}
html.dark-mode .box {
    background: #18181b !important;
    border-color: var(--borderLight) !important;
}
/* White innerbody must also go dark */
html.dark-mode .innerbody {
    background: var(--light) !important;
}

/* FAQ background */
html.dark-mode details {
    background: #18181b !important;
    border-color: var(--borderMedium) !important;
}
html.dark-mode details[open] summary {
    border-color: var(--borderMedium) !important;
}
html.dark-mode details summary {
    color: #d4d4d8 !important;
}

/* Header and Footer adjustments */
html.dark-mode header {
    background: var(--light) !important;
    border-bottom: 1px solid var(--borderLight) !important;
}
html.dark-mode header a,
html.dark-mode header .navnav > ul > li > a {
    color: #e4e4e7 !important;
}
html.dark-mode header .navnav > ul > li > ul {
    background: #18181b !important;
    border: 1px solid var(--borderMedium) !important;
}
html.dark-mode header .navnav > ul > li > ul li a {
    color: #d4d4d8 !important;
}
html.dark-mode header .navnav > ul > li > ul li.active a, 
html.dark-mode header .navnav > ul > li > ul li a:hover {
    color: #d4d4d8 !important;
}
html.dark-mode header.sticky {
    background: rgba(9, 9, 11, 0.95) !important;
    box-shadow: 0 0 1rem rgba(0,0,0,0.5) !important;
}
html.dark-mode header #togglemenu span, 
html.dark-mode header #togglemenu::after, 
html.dark-mode header #togglemenu::before {
    background-color: #a1a1aa !important;
}
html.dark-mode a.logo,
html.dark-mode a.logo span {
    color: #d4d4d8 !important;
}

/* Invert filter on black icons */
html.dark-mode .black_2_textDark, 
html.dark-mode .black_2_textMedium {
    filter: invert(1) brightness(1.2) !important;
}

/* Preheader */
html.dark-mode .preheader {
    background: #0d0d10 !important;
    border-bottom: 1px solid var(--borderLight) !important;
}
html.dark-mode .preheader,
html.dark-mode .preheader a {
    color: #d4d4d8 !important;
}

/* Inputs & Forms */
html.dark-mode input[type="text"], 
html.dark-mode input[type="email"], 
html.dark-mode textarea, 
html.dark-mode select {
    background: #18181b !important;
    color: #e4e4e7 !important;
    border: 1px solid var(--borderMedium) !important;
}
html.dark-mode label {
    color: #a1a1aa;
}
html.dark-mode label.inborder {
    background: #18181b !important;
    color: #a1a1aa !important;
}
html.dark-mode div.box label.inborder::after {
    background: linear-gradient(#18181b 50%, #18181b 50%) !important;
}

/* Service/post cards */
html.dark-mode section.services ul li,
html.dark-mode section.services ul li .summary,
html.dark-mode .posts li.item,
html.dark-mode .posts li.item .summary,
html.dark-mode .webshop-brick li.item {
    background: #18181b !important;
    border: 1px solid var(--borderLight) !important;
}

/* Pricing Boxes */
html.dark-mode ul.prices > li div.box {
    background: #18181b !important;
    border-color: var(--borderLight) !important;
}
html.dark-mode .prices .box h3,
html.dark-mode .prices .box h4 {
    color: #d4d4d8 !important;
}
html.dark-mode .prices .box ul li {
    color: #d4d4d8 !important;
    border-bottom: 1px solid var(--borderLight) !important;
}
html.dark-mode ul.prices > li:nth-child(2) div.box::before, 
html.dark-mode ul.prices > li:nth-child(2) div.box::after {
    background: var(--light) !important;
}
/* The badge on the middle pricing card */
html.dark-mode ul.prices li div.box p:first-child strong {
    color: #d4d4d8 !important;
    background: #0ea5e9 !important;
}

/* Buttons in Dark Mode */
html.dark-mode .button {
    color: #d4d4d8 !important;
}
html.dark-mode .button.ghost {
    background: transparent !important;
    color: #38bdf8 !important;
    box-shadow: inset 0 0 0 0.1rem #38bdf8 !important;
}
html.dark-mode .button.ghost:hover {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}
html.dark-mode .button.secondary {
    background: #3f3f46 !important;
    color: #ffffff !important;
}
html.dark-mode .button.secondary.ghost {
    background: transparent !important;
    color: #e4e4e7 !important;
    box-shadow: inset 0 0 0 0.1rem #e4e4e7 !important;
}

ul.buttons.social .button.social-button {
    background: var(--textDark);
}

ul.buttons.social .button.social-button img.social-button__icon {
    filter: invert(1) brightness(1.35) contrast(1.1) !important;
}

html.dark-mode ul.buttons.social .button.social-button {
    background: var(--accent) !important;
    box-shadow: none !important;
}

html.dark-mode ul.buttons.social .button.social-button img.social-button__icon {
    filter: invert(1) brightness(1.15) contrast(1.15) !important;
}

/* Footer */
html.dark-mode footer,
html.dark-mode footer.dark {
    background: #000000 !important;
    border-top: 1px solid var(--borderLight) !important;
}
html.dark-mode footer a,
html.dark-mode footer ul li a {
    color: #d4d4d8 !important;
}
html.dark-mode footer a:hover,
html.dark-mode footer ul li a:hover {
    color: var(--accent) !important;
}
html.dark-mode footer > div:last-child {
    border-top: 1px solid var(--borderLight) !important;
}
html.dark-mode footer select {
    background: transparent !important;
    color: #d4d4d8 !important;
}

/* HR separator */
html.dark-mode hr {
    background: var(--borderLight) !important;
}

/* Code blocks */
html.dark-mode pre,
html.dark-mode :not(pre) > code {
    background: #18181b !important;
    border-color: var(--borderLight) !important;
    color: #e4e4e7 !important;
}

/* Map contact box */
html.dark-mode section.map div.map > .container > div {
    background: #18181b !important;
    color: #d4d4d8 !important;
}

/* Custom Logo Size */
header a.logo img,
header a.logo img.inline {
    height: 4.5rem !important;
    max-height: none !important;
    width: auto !important;
}

footer a.logo > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

footer a.logo img {
    height: 2.5rem !important;
    max-height: none !important;
    width: auto !important;
    margin-top: 0 !important;
}

footer .container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 3rem !important;
}

footer .container > div:first-child {
    flex: 0 0 auto !important;
    min-width: 20rem !important;
}

footer .container > div:nth-child(2) {
    flex: 1 1 auto !important;
}

footer .container > div:last-child {
    flex: 0 0 auto !important;
}

@media (max-width: 1100px) {
    header a.logo img,
    header a.logo img.inline {
        height: 3.5rem !important;
        max-height: none !important;
        width: auto !important;
    }
}

/* ==========================================================================
   Logo Layout & Header Overlap Fixes
   ========================================================================== */

/* 1. Logo Subtitle wrapping */
a.logo > div.has_subtitle > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
a.logo > div.has_subtitle > div span:nth-child(2) {
    max-width: 250px;
    white-space: normal;
    line-height: 1.3;
    display: block;
}

/* 2. Hide logo subtitle on mobile */
@media (max-width: 768px) {
    a.logo > div.has_subtitle > div span:nth-child(2) {
        display: none !important;
    }
}

/* 3. Header column widths to prevent collisions */
header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header > .container > div:first-child {
    flex: 0 0 auto !important;
}
header > .container > div.nav {
    flex: 1 1 auto !important;
}
@media (min-width: 1100px) {
    header > .container > div.nav {
        display: flex !important;
        justify-content: center !important;
    }
}
header > .container > div:nth-child(3) {
    flex: 0 0 auto !important;
}

/* 4. Responsive menu gaps on smaller desktops */
@media (min-width: 1100px) and (max-width: 1300px) {
    header ul {
        gap: 1rem !important;
    }
    header .navnav > ul > li a {
        font-size: 0.95rem !important;
    }
}

/* 5. Compact Header padding */
header > .container {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
header.sticky > .container {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* 6. First Section Offset to Prevent Overlaps */
header + section:not(.bgimage) {
    padding-top: 14rem !important;
}
body:not(.transparent_header) header + section.bgimage .container {
    padding-top: 14.5rem !important;
}
body.transparent_header header + section.bgimage .container {
    padding-top: 16rem !important;
}

@media (max-width: 1100px) {
    header + section:not(.bgimage) {
        padding-top: 13rem !important;
    }
    body:not(.transparent_header) header + section.bgimage .container {
        padding-top: 13.5rem !important;
    }
    body.transparent_header header + section.bgimage .container {
        padding-top: 15rem !important;
    }
}

/* 7. Mobile logo title sizing and gaps to prevent toggle overlaps */
@media (max-width: 600px) {
    a.logo {
        font-size: 1.3rem !important;
    }
    a.logo > div {
        gap: 0.4rem !important;
    }
}

@media (max-width: 400px) {
    header a.logo img,
    header a.logo img.inline {
        height: 3.0rem !important;
    }
    a.logo {
        font-size: 1.15rem !important;
    }
}

/* 8. Dark Mode Mobile Menu Layout & Colors */
html.dark-mode body.mobilemenu header div.nav {
    background: #18181b !important; /* dark panel background */
    border-left: 1px solid var(--borderMedium) !important;
}
html.dark-mode body.mobilemenu header .navnav > ul > li a {
    color: #d4d4d8 !important; /* readable light grey text */
}
html.dark-mode body.mobilemenu header .navnav > ul > li.active > a {
    color: var(--accent) !important; /* active item accent color */
}
html.dark-mode body.mobilemenu header .navnav > ul > li > ul {
    background: transparent !important; /* transparent nested menu background */
}
html.dark-mode body.mobilemenu header .navnav > ul > li > ul li a {
    color: #d4d4d8 !important; /* nested menu items light grey */
}
html.dark-mode body.mobilemenu header .navnav > ul > li > ul li.active a {
    color: var(--accent) !important;
}

html.dark-mode header #togglemenu span {
    filter: invert(1) !important;
    background-color: transparent !important;
}

html.dark-mode .consent-banner__inner {
    background: rgba(24, 24, 27, 0.94);
    border-color: var(--borderMedium);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.35);
}
html.dark-mode .consent-banner__inner p {
    color: #d4d4d8;
}
html.dark-mode .consent-banner__inner a {
    color: #f4f4f5;
}
html.dark-mode .consent-banner__button {
    background: #f4b500;
    color: #18181b;
}
html.dark-mode .consent-banner__button--secondary {
    background: transparent;
    color: #d4d4d8;
    border-color: var(--borderMedium);
}

/* ==========================================================================
   Hero Image Layout Enlargement
   ========================================================================== */

section.hero-illustration-section {
    padding: 0 0 5rem;
    margin-top: -3rem;
}

section.hero-illustration-section .container {
    max-width: 84rem; /* matches standard container */
    text-align: center;
}

section.hero-illustration-section img.hero-illustration {
    width: 100%;
    max-width: 1150px; /* much larger and readable */
    margin: 0 auto;
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    display: block;
}

/* Dark mode adjustment for shadow and image inversion */
html.dark-mode section.hero-illustration-section img.hero-illustration {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

html.dark-mode section.hero-illustration-section img.hero-illustration,
html.dark-mode section.image .twocols .image img:not(.is_svg),
html.dark-mode img.featuredimage {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(1.05);
}

html.dark-mode body.filename__index section.hero-illustration-section img.hero-illustration {
    filter: none;
}

html.dark-mode body.filename_cloud-devops img.featuredimage {
    filter: none;
}

@media (max-width: 768px) {
    section.hero-illustration-section {
        padding: 0 0 3rem;
        margin-top: -1.5rem;
    }
    section.hero-illustration-section img.hero-illustration {
        border-radius: 1rem;
    }
}

/* ==========================================================================
   Pricing Table Layout Adjustments (Odd vs Even Column Counts)
   ========================================================================== */

@media (min-width: 65rem) {
    /* Reset child 2 styles by default (so 2 columns don't scale child 2) */
    ul.prices > li:nth-child(2) {
        transform: none;
        z-index: auto;
    }
    ul.prices > li:nth-child(2) div.box {
        padding: 3.5rem clamp(2rem, 5vw, 5rem); /* matches standard box padding */
    }
    ul.prices > li:nth-child(2) div.box::before,
    ul.prices > li:nth-child(2) div.box::after {
        content: none;
    }
    ul.prices > li:nth-child(2) div.box > div {
        transform: none;
    }
    ul.prices > li:nth-child(2) div.box p:first-child strong {
        position: relative;
        left: auto;
        bottom: 2rem;
        margin-top: 0;
        transform: none;
    }

    /* Only apply the highlighted middle column styling when there are exactly 3 children */
    ul.prices > li:nth-child(2):nth-last-child(2) {
        transform: scale(1.15);
        z-index: 2;
    }
    ul.prices > li:nth-child(2):nth-last-child(2) div.box {
        padding: 4rem 2rem 2rem;
    }
    ul.prices > li:nth-child(2):nth-last-child(2) div.box::before, 
    ul.prices > li:nth-child(2):nth-last-child(2) div.box::after {
        content: "";
        position: absolute;
        background: white;
        top: 0;
        right: 0;
        width: 0.25rem;
        height: 100%;
        transform: translateX(calc(100% + 0.1rem));
    }
    html.dark-mode ul.prices > li:nth-child(2):nth-last-child(2) div.box::before, 
    html.dark-mode ul.prices > li:nth-child(2):nth-last-child(2) div.box::after {
        background: var(--light) !important;
    }
    ul.prices > li:nth-child(2):nth-last-child(2) div.box::before {
        right: auto;
        left: 0;
        transform: translateX(calc(-100% - 0.1rem));
    }
    ul.prices > li:nth-child(2):nth-last-child(2) div.box > div {
        transform: scale(0.9);
    }
    ul.prices > li:nth-child(2):nth-last-child(2) div.box p:first-child strong {
        position: absolute;
        left: 50%;
        bottom: auto;
        margin-top: -5rem;
        transform: translateX(-50%);
    }

    /* Adjust border radiuses for 2-column pricing block */
    ul.prices > li:nth-child(2):last-child div.box {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    ul.prices > li:first-child:nth-last-child(2) div.box {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* ==========================================================================
   TreeStack Premium AI Gateway Pricing Table Styling
   ========================================================================== */

/* Pricing box container & animations */
ul.prices > li {
    perspective: 1000px;
}

ul.prices > li div.box {
    border-radius: 1rem !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
    position: relative;
    overflow: visible;
    padding: 2.25rem 1.5rem !important; /* COMPRESSED PADDING to fit screen */
}

/* Hover effects for regular cards */
ul.prices > li div.box:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.1), 0 10px 10px -5px rgba(14, 165, 233, 0.04) !important;
}

/* Dark Mode Overrides for Pricing Cards */
html.dark-mode ul.prices > li div.box {
    background: linear-gradient(135deg, #18181b 0%, #0f0f11 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode ul.prices > li div.box:hover {
    border-color: rgba(14, 165, 233, 0.4) !important;
    box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.1) !important;
}

/* Featured card highlight overrides (middle element in 3-column layout) */
@media (min-width: 65rem) {
    ul.prices > li:nth-child(2):nth-last-child(2) div.box {
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
        border: 2px solid #0ea5e9 !important;
        box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15) !important;
        padding: 2.75rem 1.5rem 1.75rem !important; /* COMPRESSED PADDING */
    }
    
    html.dark-mode ul.prices > li:nth-child(2):nth-last-child(2) div.box {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
        border: 2px solid #38bdf8 !important;
        box-shadow: 0 15px 40px rgba(14, 165, 233, 0.25), 0 0 20px rgba(14, 165, 233, 0.1) !important;
        padding: 2.75rem 1.5rem 1.75rem !important; /* COMPRESSED PADDING */
    }
    
    /* Remove default white connectors that style.css sets, to allow beautiful separate cards */
    ul.prices > li:nth-child(2):nth-last-child(2) div.box::before, 
    ul.prices > li:nth-child(2):nth-last-child(2) div.box::after {
        display: none !important;
    }
    
    /* Ensure border radius is correct for all cards */
    ul.prices > li:first-child:nth-last-child(2) div.box,
    ul.prices > li:nth-child(2):last-child div.box,
    ul.prices > li:nth-child(2):nth-last-child(2) div.box {
        border-radius: 1rem !important;
    }
}

/* Pricing Typography styling */
.prices .box h3 {
    margin-top: 1rem;
    font-size: 1.3rem !important; /* COMPRESSED TITLE SIZE */
    font-weight: 700;
    color: var(--textDarker) !important;
}

.prices .box h3 strong {
    font-size: 2.75rem !important; /* COMPRESSED PRICE SIZE */
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.05rem;
}

html.dark-mode .prices .box h3 strong {
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Benefits list checkmark styling */
ul.prices li div.box ul {
    margin: 1.25rem 0 !important; /* COMPRESSED MARGIN */
    padding: 0;
    width: 100%;
}

ul.prices li div.box ul li {
    padding: 0.45rem 0 !important; /* COMPRESSED PADDING */
    font-size: 0.9rem !important; /* COMPRESSED FONT SIZE */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
}

html.dark-mode ul.prices li div.box ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

ul.prices li div.box ul li::before {
    content: "✓" !important;
    color: #10b981 !important;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Pricing Badges: collapse the wrapper paragraph to align headers */
ul.prices li div.box p:first-child {
    margin: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

ul.prices li div.box p:first-child strong {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important; /* CRITICAL: overrides theme's bottom: 2rem which stretches the height */
    height: auto !important;
    padding: 0.35rem 1rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap;
    line-height: 1 !important;
    z-index: 5 !important;
}

/* Ensure consistent alignment of pricing card headers */
ul.prices li div.box > div > h3:first-child,
ul.prices li div.box > div > p:first-child + h3 {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Custom badge colors based on child placement / column layouts */
/* Blue/Sky gradient for Pro Token (Middle package in 3 columns) */
ul.prices > li:nth-child(2):nth-last-child(2) div.box p:first-child strong {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

/* Amber gradient for Pro Developer (First package in 2 columns) */
ul.prices > li:first-child:nth-last-child(2) div.box p:first-child strong {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Purple gradient for Corporate Dedicated (Second package in 2 columns) */
ul.prices > li:nth-child(2):last-child div.box p:first-child strong {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Buttons inside Pricing boxes */
.prices .box .button {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0.7rem 1.25rem !important; /* COMPRESSED PADDING */
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important; /* COMPRESSED FONT SIZE */
    transition: all 0.3s ease !important;
    margin-top: 1.25rem !important; /* COMPRESSED MARGIN */
}

/* Primary Button Styling */
.prices .box .button:not(.ghost) {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

.prices .box .button:not(.ghost):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
    filter: brightness(1.1) !important;
}

/* Ghost Button Styling */
.prices .box .button.ghost {
    background: transparent !important;
    border: 2px solid #0ea5e9 !important;
    color: #0ea5e9 !important;
    box-shadow: none !important;
}

.prices .box .button.ghost:hover {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3) !important;
}

/* Ghost Button in Dark Mode */
html.dark-mode .prices .box .button.ghost {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

html.dark-mode .prices .box .button.ghost:hover {
    background: #38bdf8 !important;
    color: #0f172a !important;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================================================
   AI API Hero Section Layout & Typography Overrides
   ========================================================================== */

/* Target only the AI API page and clear the absolute header */
body.filename_ai-api section.title {
    padding-top: 15rem !important; /* 14rem to clear header + 1rem vertical padding */
    padding-bottom: 2rem !important;
}

@media (max-width: 1100px) {
    body.filename_ai-api section.title {
        padding-top: 13.5rem !important; /* 13rem to clear header + 0.5rem vertical padding */
        padding-bottom: 1.5rem !important;
    }
}

body.filename_ai-api section.title ul.breadcrumbs {
    margin-top: -0.5rem !important;
    margin-bottom: 0.5rem !important;
}

body.filename_ai-api section.title h1 {
    font-size: clamp(2.2rem, 4.5vw, 2.85rem) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1rem !important;
}

body.filename_ai-api section.title p {
    max-width: 45rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.7 !important;
    font-size: 1.05rem !important;
    color: var(--textMedium) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.dark-mode body.filename_ai-api section.title p {
    color: #d4d4d8 !important;
}

/* Reduce spacing of the section immediately following the hero title section */
body.filename_ai-api section.title + section {
    padding-top: 2rem !important;
}

/* Make the first pricing row on AI API easier to scan and less cramped */
body.filename_ai-api ul.prices:first-of-type > li div.box {
    padding: 2.1rem 1.35rem !important;
}

body.filename_ai-api ul.prices:first-of-type > li:nth-child(2):nth-last-child(2) {
    transform: scale(1.08) !important;
}

body.filename_ai-api ul.prices:first-of-type > li:nth-child(2):nth-last-child(2) div.box {
    padding: 2.55rem 1.35rem 1.65rem !important;
}

body.filename_ai-api ul.prices:first-of-type .box p:not(:first-child) {
    max-width: 19rem;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

body.filename_ai-api ul.prices:first-of-type li div.box ul li {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    gap: 0.65rem;
}

body.filename_ai-api ul.prices:first-of-type li div.box ul li::before {
    margin-top: 0.25rem;
}

/* Maintain middle pricing card scale on hover */
@media (min-width: 65rem) {
    ul.prices > li:nth-child(2):nth-last-child(2) div.box:hover {
        transform: translateY(-8px) scale(1.15) !important;
    }

    body.filename_ai-api ul.prices:first-of-type > li:nth-child(2):nth-last-child(2) div.box:hover {
        transform: translateY(-8px) scale(1.08) !important;
    }
}

/* ==========================================================================
   Premium PDPA / Cookie Consent Banner Styles
   ========================================================================== */
.consent-banner {
    position: fixed !important;
    left: 2rem !important;
    right: auto !important;
    bottom: 2rem !important;
    width: 100% !important;
    max-width: 22rem !important;
    z-index: 99999 !important;
}

@media (max-width: 500px) {
    .consent-banner {
        right: 1rem !important;
        left: 1rem !important;
        bottom: 1rem !important;
        max-width: none !important;
        width: auto !important;
    }
}

.consent-banner__inner {
    display: block !important;
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html.dark-mode .consent-banner__inner {
    background: rgba(18, 18, 18, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.consent-banner__content {
    margin-bottom: 1.25rem !important;
}

.consent-banner__content h2,
#consent-banner h2 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
    color: var(--textDarker) !important;
    font-family: var(--fontTitles) !important;
}

html.dark-mode .consent-banner__content h2,
html.dark-mode #consent-banner h2 {
    color: #ffffff !important;
}

.consent-banner__content p,
#consent-banner p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: var(--textMedium) !important;
    margin: 0 !important;
}

html.dark-mode .consent-banner__content p,
html.dark-mode #consent-banner p {
    color: #d4d4d8 !important;
}

.consent-banner__content a,
#consent-banner a {
    color: var(--textDarker) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

html.dark-mode .consent-banner__content a,
html.dark-mode #consent-banner a {
    color: var(--accent) !important;
}

.consent-banner__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
}

.consent-banner__button {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border-radius: 2rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    background: var(--accent) !important;
    color: #18181b !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

.consent-banner__button:hover {
    background: var(--accentDarker) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(244, 181, 0, 0.25) !important;
}

.consent-banner__button--secondary {
    background: transparent !important;
    color: var(--textMedium) !important;
    border: 1px solid var(--borderMedium) !important;
}

html.dark-mode .consent-banner__button--secondary {
    color: #d4d4d8 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.consent-banner__button--secondary:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--textDarker) !important;
}

html.dark-mode .consent-banner__button--secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Light mode dark footer link contrast improvement */
footer.dark select, 
footer.dark, 
footer.dark > div:last-child a, 
footer.dark ul li a {
    color: rgba(255, 255, 255, 0.7) !important;
}
footer.dark ul li a:hover,
footer.dark > div:last-child a:hover {
    color: #ffffff !important;
}