/*
Theme Name: Simply Operational Custom Theme
Theme URI: https://simply-operational.com
Author: Teri Moody
Description: A bespoke, lightning-fast custom theme built from scratch.
Version: 1.0.0
*/

/* ==========================================================================
   GLOBAL BRAND STYLES
   ========================================================================== */

:root {
    --so-pink: #e882a5;
    --so-dark: #333333;
    --so-light: #fef2f5;
    --so-font: 'Inter', sans-serif;
}

/* STYLESHEET CONNECTION AND LAYOUT FIXES */
html, body {
    overflow-x: visible !important;
}

#page, .site, .site-header {
    overflow: visible !important;
    height: auto !important;
}

body {
    font-family: var(--so-font);
    color: var(--so-dark);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

/* Force all headers to look structured and intentional */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--so-font);
    color: var(--so-dark);
    font-weight: 700;
}

/* Intercept core button blocks to match your specific layout style */
.wp-block-button__link {
    background-color: var(--so-pink) !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-weight: 600;
    transition: background 0.2s ease-in-out;
}

.wp-block-button__link:hover {
    background-color: #d46f92 !important;
}

/* ==========================================================================
   HOMEPAGE CONTAINER & BACKGROUND LAYOUT
   ========================================================================== */

.front-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 600px);
}

.front-page-content > * {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.front-page-content > .alignwide {
    max-width: 1300px;
}

.front-page-content > .alignfull {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.wp-block-group.alignfull {
    padding-top: 80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignfull > * {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ==========================================================================
   NEW STREAMLINED INLINE HEADER SYSTEM
   ========================================================================== */

.custom-site-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid var(--so-light);
    box-sizing: border-box;
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    z-index: 9999; 
    box-shadow: 0 4px 20px rgba(232, 130, 165, 0.03); 
}

.header-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.site-logo a {
    font-family: var(--so-font);
    font-size: 22px;
    font-weight: 300;
    color: var(--so-dark);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.site-logo a .accent-text {
    font-weight: 700;
    color: var(--so-pink);
    margin-left: 2px;
}

.main-navigation-menu {
    display: flex;
    align-items: center;
}

.nav-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
}

.nav-menu-list li a {
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--so-dark);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.nav-menu-list li a:hover,
.nav-menu-list .current-menu-item a {
    color: var(--so-pink);
}

.menu-cta-button {
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 600;
    background-color: var(--so-pink);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: inline-block;
}

.menu-cta-button:hover {
    background-color: #d46f92;
    transform: translateY(-1px);
}

/* ==========================================================================
   DYNAMIC SIDEBAR GRID SYSTEM
   ========================================================================== */

.content-sidebar-layout-wrapper {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;
    box-sizing: border-box;
}

.sidebar-layout-content {
    width: 70%;
    font-family: var(--so-font);
    font-size: 17px;
    line-height: 1.6;
}

.theme-sidebar {
    width: 30%;
    font-family: var(--so-font);
    color: var(--so-dark);
}

@media (max-width: 820px) {
    .content-sidebar-layout-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .sidebar-layout-content,
    .theme-sidebar {
        width: 100%;
    }
}

/* ==========================================================================
   GLOBAL SITE FOOTER STYLES
   ========================================================================== */

.site-footer {
    width: 100%;
    background-color: #ffffff;
    padding: 30px 0;
    margin-top: 60px;
    border-top: 1px solid var(--so-light);
    box-sizing: border-box;
}

.footer-inside-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-credits {
    margin: 0;
    font-family: var(--so-font);
    font-size: 14px;
    color: #777777;
    line-height: 1.5;
}

.dev-separator {
    color: var(--so-pink);
    margin: 0 8px;
    font-weight: bold;
}

.creator-name {
    color: var(--so-pink);
    font-weight: 600;
}

@media (max-width: 600px) {
    .dev-separator {
        display: none;
    }
    .footer-credits span {
        display: block;
        margin-top: 5px;
    }
}

/* ==========================================================================
   DESKTOP & MOBILE ADMIN BAR FIXES
   ========================================================================== */

.admin-bar .custom-site-header {
    top: 32px;
}

@media (max-width: 768px) {
    .admin-bar .custom-site-header {
        top: 46px;
    }
}

/* ==========================================================================
   MOBILE HEADER RESPONSIVE RULES
   ========================================================================== */

@media (max-width: 768px) {
    .header-inner-container {
        padding: 12px 20px;
    }
    .main-navigation-menu {
        display: none;
    }
}

/* ==========================================================================
   HOMEPAGE TWO-COLUMN HERO COMPONENT
   ========================================================================== */

.homepage-hero-section {
    padding: 60px 20px;
    box-sizing: border-box;
}

.hero-grid-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-image-column {
    flex: 1;
    max-width: 45%;
}

.hero-image-column img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: block;
}

.hero-text-column {
    flex: 1;
    max-width: 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-hook-headline {
    font-size: 34px;
    line-height: 1.25;
    color: var(--so-dark);
    margin: 0 0 20px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.hero-bio-paragraph {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 30px 0;
}

.hero-primary-button {
    display: inline-block;
    background-color: var(--so-pink);
    color: #ffffff !important;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 30px;
    font-family: var(--so-font);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(232, 130, 165, 0.2);
    transition: all 0.2s ease-in-out;
}

.hero-primary-button:hover {
    background-color: #d46f92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 130, 165, 0.3);
}

@media (max-width: 860px) {
    .hero-grid-container {
        flex-direction: column;
        gap: 30px;
    }
    .hero-image-column, 
    .hero-text-column {
        max-width: 100%;
        width: 100%;
    }
    .hero-hook-headline {
        font-size: 26px;
    }
}
/* ==========================================================================
   HOMEPAGE PORTFOLIO MATRIX & IMPACT BANNER
   ========================================================================== */

.homepage-matrix-section {
    padding: 80px 20px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.matrix-header-block {
    text-align: center;
    margin-bottom: 50px;
}

.matrix-section-title {
    font-size: 28px;
    color: var(--so-dark);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.matrix-section-subtitle {
    font-size: 16px;
    color: #555555;
    margin: 0 auto;
    max-width: 700px;
}

.matrix-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Minimalist Card Design */
.matrix-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.matrix-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232, 130, 165, 0.06);
}

.matrix-card h3 {
    font-size: 20px;
    color: var(--so-dark);
    margin: 15px 0 12px 0;
}

.matrix-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

/* Functional Skill Tags */
.matrix-tech-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #f7fafc;
    color: #718096;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 6px;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Status Badges */
.matrix-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.pink-badge {
    background-color: var(--so-light);
    color: var(--so-pink);
}

.dark-badge {
    background-color: #f2f2f2;
    color: var(--so-dark);
}

/* High-End Split Alignment Impact Banner */
.homepage-impact-banner {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-left: 5px solid var(--so-pink);
    padding: 35px 40px;
    border-radius: 4px 12px 12px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.impact-left {
    flex: 2;
}

.impact-left h3 {
    font-size: 20px;
    margin: 0 0 8px 0;
    color: var(--so-dark);
}

.impact-left p {
    margin: 0;
    font-size: 15px;
    color: #4a5568;
    line-height: 1.5;
}

.impact-right {
    flex: 1;
    text-align: right;
}

.matrix-secondary-button {
    display: inline-block;
    border: 2px solid var(--so-pink);
    color: var(--so-pink) !important;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.matrix-secondary-button:hover {
    background-color: var(--so-pink);
    color: #ffffff !important;
}

/* Mobile Alignment Adjustments */
@media (max-width: 860px) {
    .homepage-impact-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 25px;
    }
    .impact-right {
        text-align: left;
    }
}
/* ==========================================================================
   THE EXECUTIVE RECRUITMENT PORTAL STYLES
   ========================================================================== */

.corporate-recruiter-portal {
    background-color: var(--so-dark);
    padding: 80px 20px;
    box-sizing: border-box;
    margin-top: 40px;
    margin-bottom: -60px; /* Pulls flush down against the footer element boundary */
}

.portal-inner-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.portal-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.portal-text-block h2 {
    color: #ffffff;
    font-size: 32px;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.portal-text-block p {
    color: #cbd5e0; /* Clean, highly legible off-white text color code */
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 35px auto;
    max-width: 750px;
}

/* Button Configurations */
.portal-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.portal-button-primary {
    display: inline-block;
    background-color: var(--so-pink);
    color: #ffffff !important;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s ease-in-out;
}

.portal-button-primary:hover {
    background-color: #d46f92;
}

.portal-button-secondary {
    display: inline-block;
    border: 2px solid #ffffff;
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.portal-button-secondary:hover {
    background-color: #ffffff;
    color: var(--so-dark) !important;
}

/* Mobile alignment fix */
@media (max-width: 600px) {
    .portal-button-row {
        flex-direction: column;
        width: 100%;
    }
    .portal-button-primary,
    .portal-button-secondary {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}
/* ==========================================================================
   DEDICATED SERVICES PAGE STYLING
   ========================================================================== */

.services-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 80px;
}

/* Header Text Framing */
.services-hero-header {
    text-align: center;
    padding: 80px 20px 40px 20px;
    box-sizing: border-box;
}

.services-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.services-hero-header h1 {
    font-size: 36px;
    color: var(--so-dark);
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.services-hero-header p {
    font-size: 17px;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2x2 Clean Minimal Grid Layout */
.detailed-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 40px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 60px;
}

.detailed-service-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
    box-sizing: border-box;
}

.detailed-service-card:hover {
    border-color: var(--so-pink);
    box-shadow: 0 15px 35px rgba(232, 130, 165, 0.05);
    transform: translateY(-2px);
}

.service-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.service-icon {
    font-size: 24px;
}

.detailed-service-card h2 {
    font-size: 22px;
    color: var(--so-dark);
    margin: 0;
}

.service-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 25px 0;
}

/* Custom Bullet List Design featuring soft pink indicators */
.service-bullet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-bullet-list li {
    font-size: 14.5px;
    color: #2d3748;
    position: relative;
    padding-left: 22px;
    line-height: 1.5;
}

.service-bullet-list li::before {
    content: "•";
    color: var(--so-pink);
    font-size: 18px;
    position: absolute;
    left: 4px;
    top: -2px;
    font-weight: bold;
}

/* Premium Community Investment Callout Banner */
.services-discount-banner {
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 60px;
}

.services-discount-box {
    background-color: var(--so-light);
    border-left: 5px solid var(--so-pink);
    padding: 40px;
    border-radius: 0 12px 12px 0;
    text-align: left;
    box-sizing: border-box;
}

.discount-badge {
    display: inline-block;
    background-color: var(--so-pink);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.services-discount-box h2 {
    font-size: 24px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
}

.services-discount-box p {
    margin: 0;
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
    max-width: 850px;
}

/* Centered Bottom Conversion Anchor Box */
.services-footer-cta {
    text-align: center;
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
    max-width: 800px !important;
}

.services-footer-cta h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 0 0 12px 0;
}

.services-footer-cta p {
    font-size: 16px;
    color: #555555;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.services-final-cta-btn {
    display: inline-block;
    background-color: var(--so-pink);
    color: #ffffff !important;
    text-decoration: none;
    padding: 15px 36px;
    border-radius: 30px;
    font-family: var(--so-font);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(232, 130, 165, 0.2);
    transition: all 0.2s ease-in-out;
}

.services-final-cta-btn:hover {
    background-color: #d46f92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 130, 165, 0.3);
}

/* Responsive Grid Rules for Mobile/Tablet Screens */
@media (max-width: 1024px) {
    .detailed-services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .detailed-service-card {
        padding: 25px;
    }
    .services-discount-box {
        padding: 30px 20px;
    }
    .services-hero-header h1 {
        font-size: 28px;
    }
}
/* ==========================================================================
   UTILITY & POLICY PAGE STYLING
   ========================================================================== */

.utility-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 300px);
    padding-top: 60px;
    padding-bottom: 90px;
}

.utility-document-wrapper {
    max-width: 800px !important; /* Forces text rows to stay narrow and highly readable */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.utility-header {
    border-bottom: 2px solid var(--so-light);
    padding-bottom: 25px;
    margin-bottom: 40px;
}

.utility-title {
    font-size: 32px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.utility-meta {
    font-size: 13px;
    color: #718096;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Document Inner Copy Configurations */
.utility-entry-content h2 {
    font-size: 20px;
    color: var(--so-dark);
    margin: 35px 0 15px 0;
    position: relative;
}

.utility-entry-content p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #2d3748;
    margin: 0 0 20px 0;
}

.utility-entry-content ul {
    margin: 0 0 25px 0;
    padding-left: 20px;
}

.utility-entry-content ul li {
    font-size: 15px;
    line-height: 1.6;
    color: #2d3748;
    margin-bottom: 10px;
}

.utility-entry-content strong {
    color: var(--so-dark);
}

/* Callout highlights inside the policies */
.policy-highlight-box {
    background-color: var(--so-light);
    border-left: 4px solid var(--so-pink);
    padding: 25px;
    border-radius: 0 8px 8px 0;
    margin: 30px 0;
}

.policy-highlight-box p {
    margin: 0;
    font-weight: 500;
    color: var(--so-dark);
}
/* ==========================================================================
   HOMEPAGE HERO TRUST ACCENT LAYOUT
   ========================================================================== */

.hero-trust-microcopy {
    font-size: 13.5px;
    color: #64748b; /* A soft, premium slate gray */
    margin: 14px 0 0 0;
    line-height: 1.4;
    font-weight: 500;
}

.hero-trust-microcopy .trust-icon {
    margin-right: 2px;
    font-size: 14px;
}

.hero-trust-microcopy a {
    color: var(--so-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.15s ease-in-out;
}

.hero-trust-microcopy a:hover {
    color: var(--so-pink);
}

/* Ensure mobile layout handles stacking text boundaries beautifully */
@media (max-width: 860px) {
    .hero-trust-microcopy {
        text-align: center;
        margin-top: 16px;
    }
}
/* ==========================================================================
   CONTACT PAGE SIDE-BY-SIDE MATRIX LAYOUT
   ========================================================================== */

.contact-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 90px;
}

.contact-hero-header {
    text-align: center;
    padding: 70px 20px 30px 20px;
    box-sizing: border-box;
}

.contact-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.contact-hero-header h1 {
    font-size: 36px;
    color: var(--so-dark);
    margin: 0 0 15px 0;
}

.contact-hero-header p {
    font-size: 16.5px;
    color: #4a5568;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Flex layout splits columns evenly */
.contact-grid-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 20px;
    box-sizing: border-box;
}

.contact-column {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.01);
    box-sizing: border-box;
}

.general-inquiry-box {
    flex: 1;
    max-width: 42%;
}

.scheduler-box {
    flex: 1.4;
    max-width: 55%;
}

.contact-column h2 {
    font-size: 23px;
    margin: 0 0 12px 0;
    color: var(--so-dark);
}

.contact-column p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 25px 0;
}

/* Custom Inquiry Form UI Input Elements */
#so-general-contact-form input,
#so-general-contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: var(--so-font);
    font-size: 14px;
}

#so-general-contact-form input:focus,
#so-general-contact-form textarea:focus {
    border-color: var(--so-pink);
    outline: none;
}

.contact-submit-btn {
    width: 100%;
    background-color: var(--so-pink);
    color: #ffffff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.contact-submit-btn:hover {
    background-color: #d46f92;
}

/* Clean override adjustments to ensure the embedded scheduling plugin looks cohesive inside its card */
.embedded-shortcode-wrapper #so-booking-modern {
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile viewport layout constraints */
@media (max-width: 1024px) {
    .contact-grid-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .general-inquiry-box,
    .scheduler-box {
        max-width: 100%;
        width: 100%;
    }
}
/* ==========================================================================
   ABOUT PAGE STYLES
   Append to the bottom of style.css
   ========================================================================== */

.about-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 80px;
}

/* ── Hero Section ── */
.about-hero-section {
    padding: 80px 20px 60px 20px;
    box-sizing: border-box;
}

.about-hero-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-hero-image-col {
    flex: 1;
    max-width: 42%;
}

/* Photo placeholder — delete this block once your real image is in */
.about-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--so-light);
    border: 2px dashed var(--so-pink);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 14px;
}

.about-photo-placeholder span {
    font-size: 40px;
}

/* Once you add a real image, target it like this: */
.about-hero-image-col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: block;
}

.about-hero-text-col {
    flex: 1;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-hero-text-col h1 {
    font-size: 34px;
    line-height: 1.25;
    color: var(--so-dark);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.about-hero-intro {
    font-size: 16.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 30px 0;
}

@media (max-width: 860px) {
    .about-hero-grid {
        flex-direction: column;
        gap: 30px;
    }
    .about-hero-image-col,
    .about-hero-text-col {
        max-width: 100%;
        width: 100%;
    }
    .about-hero-text-col h1 {
        font-size: 26px;
    }
}

/* ── Story & Who I Help (two-col label layout) ── */
.about-story-section,
.about-who-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-story-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.about-story-label-col {
    width: 200px;
    flex-shrink: 0;
    padding-top: 6px;
}

.about-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
}

.about-story-content-col {
    flex: 1;
}

.about-story-content-col h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 0 0 18px 0;
    letter-spacing: -0.3px;
}

.about-story-content-col p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 18px 0;
}

@media (max-width: 768px) {
    .about-story-inner {
        flex-direction: column;
        gap: 16px;
    }
    .about-story-label-col {
        width: auto;
    }
}

/* ── Why Section ── */
.about-why-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.about-why-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.about-why-inner h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 16px 0;
    letter-spacing: -0.4px;
    max-width: 720px;
}

.about-why-lead {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    max-width: 750px;
    margin: 0 0 40px 0;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.about-value-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
}

.about-value-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232, 130, 165, 0.06);
}

.about-value-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}

.about-value-card h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
}

.about-value-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Section ── */
.about-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-tools-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-tools-inner h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
}

.about-tools-lead {
    font-size: 15.5px;
    color: #4a5568;
    margin: 0 auto 36px auto;
    line-height: 1.6;
    max-width: 600px;
}

.about-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.about-tool-pill {
    background-color: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--so-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.about-tool-pill:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
    transform: translateY(-1px);
}
/* ==========================================================================
   ABOUT PAGE STYLES
   Append to the bottom of style.css
   ========================================================================== */

.about-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 80px;
}

/* ── Hero Section ── */
.about-hero-section {
    padding: 80px 20px 60px 20px;
    box-sizing: border-box;
}

.about-hero-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-hero-image-col {
    flex: 1;
    max-width: 42%;
}

/* Photo placeholder — delete this block once your real image is in */
.about-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--so-light);
    border: 2px dashed var(--so-pink);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 14px;
}

.about-photo-placeholder span {
    font-size: 40px;
}

/* Once you add a real image, target it like this: */
.about-hero-image-col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: block;
}

.about-hero-text-col {
    flex: 1;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-hero-text-col h1 {
    font-size: 34px;
    line-height: 1.25;
    color: var(--so-dark);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.about-hero-intro {
    font-size: 16.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 30px 0;
}

@media (max-width: 860px) {
    .about-hero-grid {
        flex-direction: column;
        gap: 30px;
    }
    .about-hero-image-col,
    .about-hero-text-col {
        max-width: 100%;
        width: 100%;
    }
    .about-hero-text-col h1 {
        font-size: 26px;
    }
}

/* ── Story & Who I Help (two-col label layout) ── */
.about-story-section,
.about-who-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-story-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.about-story-label-col {
    width: 200px;
    flex-shrink: 0;
    padding-top: 6px;
}

.about-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
}

.about-story-content-col {
    flex: 1;
}

.about-story-content-col h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 0 0 18px 0;
    letter-spacing: -0.3px;
}

.about-story-content-col p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 18px 0;
}

@media (max-width: 768px) {
    .about-story-inner {
        flex-direction: column;
        gap: 16px;
    }
    .about-story-label-col {
        width: auto;
    }
}

/* ── Why Section ── */
.about-why-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.about-why-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.about-why-inner h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 16px 0;
    letter-spacing: -0.4px;
    max-width: 720px;
}

.about-why-lead {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    max-width: 750px;
    margin: 0 0 40px 0;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.about-value-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
}

.about-value-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232, 130, 165, 0.06);
}

.about-value-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}

.about-value-card h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
}

.about-value-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Section ── */
.about-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-tools-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-tools-inner h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
}

.about-tools-lead {
    font-size: 15.5px;
    color: #4a5568;
    margin: 0 auto 36px auto;
    line-height: 1.6;
    max-width: 600px;
}

.about-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.about-tool-pill {
    background-color: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--so-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.about-tool-pill:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
    transform: translateY(-1px);
}

/* ── Credentials Grid ── */
.about-certs-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}

.about-cert-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 10px;
    transition: border-color 0.2s ease-in-out;
}

.about-cert-item:hover {
    border-color: var(--so-pink);
}

.about-cert-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.about-cert-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-cert-item strong {
    font-size: 15px;
    color: var(--so-dark);
    font-weight: 600;
}

.about-cert-item span {
    font-size: 13px;
    color: #718096;
}
/* ==========================================================================
   ABOUT PAGE STYLES
   Append to the bottom of style.css
   ========================================================================== */

.about-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 80px;
}

/* ── Hero Section ── */
.about-hero-section {
    padding: 80px 20px 60px 20px;
    box-sizing: border-box;
}

.about-hero-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-hero-image-col {
    flex: 1;
    max-width: 42%;
}

/* Photo placeholder — delete this block once your real image is in */
.about-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--so-light);
    border: 2px dashed var(--so-pink);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 14px;
}

.about-photo-placeholder span {
    font-size: 40px;
}

/* Once you add a real image, target it like this: */
.about-hero-image-col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: block;
}

.about-hero-text-col {
    flex: 1;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-hero-text-col h1 {
    font-size: 34px;
    line-height: 1.25;
    color: var(--so-dark);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.about-hero-intro {
    font-size: 16.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 30px 0;
}

@media (max-width: 860px) {
    .about-hero-grid {
        flex-direction: column;
        gap: 30px;
    }
    .about-hero-image-col,
    .about-hero-text-col {
        max-width: 100%;
        width: 100%;
    }
    .about-hero-text-col h1 {
        font-size: 26px;
    }
}

/* ── Story & Who I Help (two-col label layout) ── */
.about-story-section,
.about-who-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-story-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.about-story-label-col {
    width: 200px;
    flex-shrink: 0;
    padding-top: 6px;
}

.about-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
}

.about-story-content-col {
    flex: 1;
}

.about-story-content-col h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 0 0 18px 0;
    letter-spacing: -0.3px;
}

.about-story-content-col p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 18px 0;
}

@media (max-width: 768px) {
    .about-story-inner {
        flex-direction: column;
        gap: 16px;
    }
    .about-story-label-col {
        width: auto;
    }
}

/* ── Why Section ── */
.about-why-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.about-why-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.about-why-inner h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 16px 0;
    letter-spacing: -0.4px;
    max-width: 720px;
}

.about-why-lead {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    max-width: 750px;
    margin: 0 0 40px 0;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.about-value-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
}

.about-value-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232, 130, 165, 0.06);
}

.about-value-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}

.about-value-card h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
}

.about-value-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Section ── */
.about-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-tools-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-tools-inner h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
}

.about-tools-lead {
    font-size: 15.5px;
    color: #4a5568;
    margin: 0 auto 36px auto;
    line-height: 1.6;
    max-width: 600px;
}

.about-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.about-tool-pill {
    background-color: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--so-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.about-tool-pill:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
    transform: translateY(-1px);
}

/* ── Credentials Grid ── */
.about-certs-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}

.about-cert-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 10px;
    transition: border-color 0.2s ease-in-out;
}

.about-cert-item:hover {
    border-color: var(--so-pink);
}

.about-cert-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.about-cert-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-cert-item strong {
    font-size: 15px;
    color: var(--so-dark);
    font-weight: 600;
}

.about-cert-item span {
    font-size: 13px;
    color: #718096;
}

/* ── Cert category label ── */
.about-certs-category-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--so-pink);
    margin: 24px 0 12px 0;
}
/* ==========================================================================
   ABOUT PAGE STYLES
   Append to the bottom of style.css
   ========================================================================== */

.about-page-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, var(--so-light) 0%, #ffffff 400px);
    padding-bottom: 80px;
}

/* ── Hero Section ── */
.about-hero-section {
    padding: 80px 20px 60px 20px;
    box-sizing: border-box;
}

.about-hero-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-hero-image-col {
    flex: 1;
    max-width: 42%;
}

/* Photo placeholder — delete this block once your real image is in */
.about-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--so-light);
    border: 2px dashed var(--so-pink);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 14px;
}

.about-photo-placeholder span {
    font-size: 40px;
}

/* Once you add a real image, target it like this: */
.about-hero-image-col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: block;
}

.about-hero-text-col {
    flex: 1;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-mini-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-hero-text-col h1 {
    font-size: 34px;
    line-height: 1.25;
    color: var(--so-dark);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.about-hero-intro {
    font-size: 16.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 30px 0;
}

@media (max-width: 860px) {
    .about-hero-grid {
        flex-direction: column;
        gap: 30px;
    }
    .about-hero-image-col,
    .about-hero-text-col {
        max-width: 100%;
        width: 100%;
    }
    .about-hero-text-col h1 {
        font-size: 26px;
    }
}

/* ── Story & Who I Help (two-col label layout) ── */
.about-story-section,
.about-who-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-story-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.about-story-label-col {
    width: 200px;
    flex-shrink: 0;
    padding-top: 6px;
}

.about-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--so-pink);
    letter-spacing: 1.5px;
}

.about-story-content-col {
    flex: 1;
}

.about-story-content-col h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 0 0 18px 0;
    letter-spacing: -0.3px;
}

.about-story-content-col p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 18px 0;
}

@media (max-width: 768px) {
    .about-story-inner {
        flex-direction: column;
        gap: 16px;
    }
    .about-story-label-col {
        width: auto;
    }
}

/* ── Why Section ── */
.about-why-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.about-why-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.about-why-inner h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 16px 0;
    letter-spacing: -0.4px;
    max-width: 720px;
}

.about-why-lead {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    max-width: 750px;
    margin: 0 0 40px 0;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.about-value-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.25s ease-in-out;
}

.about-value-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232, 130, 165, 0.06);
}

.about-value-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}

.about-value-card h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 10px 0;
}

.about-value-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Section ── */
.about-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--so-light);
}

.about-tools-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-tools-inner h2 {
    font-size: 26px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
}

.about-tools-lead {
    font-size: 15.5px;
    color: #4a5568;
    margin: 0 auto 36px auto;
    line-height: 1.6;
    max-width: 600px;
}

.about-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.about-tool-pill {
    background-color: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--so-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.about-tool-pill:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
    transform: translateY(-1px);
}

/* ── Credentials Grid ── */
.about-certs-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}

.about-cert-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 10px;
    transition: border-color 0.2s ease-in-out;
}

.about-cert-item:hover {
    border-color: var(--so-pink);
}

.about-cert-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.about-cert-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-cert-item strong {
    font-size: 15px;
    color: var(--so-dark);
    font-weight: 600;
}

.about-cert-item span {
    font-size: 13px;
    color: #718096;
}

/* ── Cert category label ── */
.about-certs-category-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--so-pink);
    margin: 24px 0 12px 0;
}

/* ── Credly Badge Row ── */
.about-credly-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.about-credly-item {
    flex-shrink: 0;
}
/* ── Homepage Hero Badge Strip ── */
.homepage-badge-strip {
    margin-top: 28px;
}
 
.homepage-badge-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #64748b;
    margin: 0 0 12px 0;
}
 
.homepage-badge-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ==========================================================================
   HOMEPAGE CREDENTIALS BAR
   Add this to style.css (or append to your existing about-page-styles block)
   ========================================================================== */
 
.homepage-credentials-bar {
    padding: 36px 20px;
    background-color: #ffffff;
    border-top: 1px solid var(--so-light);
    border-bottom: 1px solid var(--so-light);
    box-sizing: border-box;
}
 
.credentials-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
 
.credentials-bar-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--so-pink);
    white-space: nowrap;
    flex-shrink: 0;
}
 
.credentials-badge-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
 
@media (max-width: 600px) {
    .credentials-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
/* ==========================================================================
   SERVICES PAGE — COLLAPSIBLE COURSES ACCORDION
   Add to style.css
   Also: find and delete the stray line that reads "dentials bar · CSS"
   around line 2460 in your style.css — it's a copy-paste artifact.
   ========================================================================== */

.services-courses-section {
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
}

.services-courses-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Toggle Button ── */
.courses-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    padding: 18px 24px;
    cursor: pointer;
    font-family: var(--so-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--so-dark);
    text-align: left;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.courses-toggle-btn:hover {
    border-color: var(--so-pink);
    box-shadow: 0 4px 16px rgba(232, 130, 165, 0.08);
}

.courses-toggle-btn[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--so-pink);
    background-color: var(--so-light);
}

.courses-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.courses-toggle-icon {
    font-size: 18px;
}

.courses-toggle-arrow {
    font-size: 12px;
    color: var(--so-pink);
    transition: transform 0.25s ease-in-out;
    flex-shrink: 0;
}

/* ── Expandable Panel ── */
.courses-panel {
    border: 1px solid var(--so-pink);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
}

.courses-panel[hidden] {
    display: none;
}

.courses-panel-inner {
    padding: 24px 28px 28px 28px;
}

.courses-panel-intro {
    font-size: 14.5px;
    color: #4a5568;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* ── Course List Items ── */
.courses-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background-color: var(--so-light);
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

.course-item:hover {
    background-color: #fce8ef;
}

.course-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.course-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.course-item strong {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--so-dark);
}

.course-item span {
    font-size: 12.5px;
    color: #718096;
}
/* ==========================================================================
   ABOUT PAGE — HERO REDESIGN & STORY PHOTO
   Add to style.css
   ========================================================================== */

/* ── Centered Pull-Quote Hero ── */
.about-hero-centered {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 70px 20px 50px 20px;
}

.about-hero-centered .about-mini-label {
    display: block;
    margin-bottom: 24px;
}

.about-hero-pullquote {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--so-dark);
    letter-spacing: -0.4px;
    margin: 0 0 20px 0;
    font-style: italic;
}

.about-hero-byline {
    font-size: 14px;
    font-weight: 600;
    color: var(--so-pink);
    letter-spacing: 0.3px;
    margin: 0 0 36px 0;
}

.about-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.about-hero-actions .hero-trust-microcopy {
    margin: 0;
    font-size: 13px;
    color: #718096;
}

/* ── Story Section Photo (in label column) ── */
.about-story-photo {
    margin-top: 24px;
}

.about-story-photo img {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    display: block;
}

@media (max-width: 768px) {
    .about-hero-pullquote {
        font-size: 22px;
    }
    .about-story-photo img {
        max-width: 160px;
    }
}
/* ==========================================================================
   STATIC CREDLY BADGE STYLES
   Replaces iframe embeds on both front-page and about page.
   Add to style.css. Also remove any old .about-credly-item rules.
   ========================================================================== */

/* ── Shared badge link wrapper ── */
.static-badge-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.static-badge-link:hover {
    transform: translateY(-3px);
    opacity: 0.85;
}

/* ── Badge image ── */
.static-badge-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
}

/* ── Label under badge ── */
.static-badge-label {
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    text-align: center;
    letter-spacing: 0.3px;
    max-width: 100px;
    line-height: 1.3;
}

/* ── Homepage credentials bar with static badges ── */
.homepage-credentials-bar .credentials-badge-row {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── About page badge row with static badges ── */
.about-credly-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin: 16px 0 24px 0;
}
/* ==========================================================================
   SERVICE DETAIL PAGE — PROCESS AUTOMATION
   Add to style.css
   ========================================================================== */

.service-detail-content {
    background-color: #ffffff;
    padding-bottom: 0;
}

/* ── Hero ── */
.service-detail-hero {
    padding: 60px 20px 50px 20px;
    background-color: var(--so-light);
    border-bottom: 1px solid #f0d9e2;
    box-sizing: border-box;
}

.service-detail-hero-inner {
    max-width: 780px;
}

.service-detail-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

.service-detail-back:hover {
    text-decoration: underline;
}

.service-detail-hero h1 {
    font-size: 36px;
    line-height: 1.2;
    color: var(--so-dark);
    margin: 10px 0 18px 0;
    letter-spacing: -0.5px;
}

.service-detail-hero-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 32px 0;
    max-width: 680px;
}

.service-detail-hero-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.service-detail-trust {
    font-size: 13px;
    color: #718096;
    font-weight: 500;
}

/* ── Shared section inner ── */
.service-detail-section-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.service-detail-how,
.service-detail-demo-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--so-light);
}

.service-detail-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.service-detail-how h2,
.service-detail-tools-section h2,
.service-detail-demo-section h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
    letter-spacing: -0.3px;
}

.service-detail-section-lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 40px 0;
    max-width: 700px;
}

/* ── How It Works Steps ── */
.service-detail-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-detail-step {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 28px 0;
    border-bottom: 1px solid var(--so-light);
}

.service-detail-step:last-child {
    border-bottom: none;
}

.step-number {
    font-size: 36px;
    font-weight: 800;
    color: #f0d9e2;
    line-height: 1;
    flex-shrink: 0;
    width: 56px;
    letter-spacing: -1px;
}

.step-content h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.step-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Grid ── */
.service-detail-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.service-detail-tool-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.service-detail-tool-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
}

.service-detail-tool-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.service-detail-tool-card strong {
    font-size: 15px;
    color: var(--so-dark);
}

.service-detail-tool-card span {
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
}

/* ── Demo Layout ── */
.demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Demo Form ── */
.demo-form-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.demo-form-header {
    background: var(--so-light);
    padding: 24px 28px 20px 28px;
    border-bottom: 1px solid #f0d9e2;
}

.demo-form-org {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--so-pink);
    display: block;
    margin-bottom: 8px;
}

.demo-form-header h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.demo-form-header p {
    font-size: 13px;
    color: #718096;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

.demo-form-body {
    padding: 24px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--so-dark);
}

.demo-field input,
.demo-field select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--so-font);
    color: var(--so-dark);
    background: #fff;
    transition: border-color 0.2s ease-in-out;
    appearance: auto;
}

.demo-field input:focus,
.demo-field select:focus {
    outline: none;
    border-color: var(--so-pink);
}

.demo-submit-btn {
    background: var(--so-pink);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--so-font);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 6px;
}

.demo-submit-btn:hover:not(:disabled) {
    background: var(--so-dark);
    transform: translateY(-1px);
}

.demo-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.demo-shake {
    animation: shake 0.4s ease-in-out;
    background: #e53e3e !important;
}

/* ── Demo Flow ── */
.demo-flow-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.demo-flow-title {
    font-size: 17px;
    color: var(--so-dark);
    margin: 0 0 4px 0;
}

.demo-flow-subtitle {
    font-size: 13px;
    color: #718096;
    margin: 0 0 24px 0;
}

.demo-steps-list {
    display: flex;
    flex-direction: column;
}

.demo-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    opacity: 0.4;
}

.demo-step-active {
    opacity: 1;
    border-color: #e2f5ee;
    background-color: #f0faf6;
}

.demo-step-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 2px;
}

.demo-step-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-step-text strong {
    font-size: 13.5px;
    color: var(--so-dark);
}

.demo-step-text span {
    font-size: 12px;
    color: #718096;
    line-height: 1.4;
}

.demo-step-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    color: #a0aec0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.demo-step-connector {
    width: 1px;
    height: 10px;
    background: #e2e8f0;
    margin: 0 0 0 27px;
}

.demo-result-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 18px;
    background: #f0faf6;
    border: 1px solid #10b981;
    border-radius: 10px;
}

.demo-result-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.demo-result-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.demo-result-text strong {
    font-size: 14px;
    color: var(--so-dark);
}

.demo-result-text span {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.4;
}

.demo-disclaimer {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    margin-top: 20px;
    font-style: italic;
}

@media (max-width: 860px) {
    .demo-wrapper {
        grid-template-columns: 1fr;
    }

    .service-detail-hero h1 {
        font-size: 26px;
    }

    .service-detail-hero-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Service Card Learn More Link ── */
.service-learn-more {
    display: inline-block;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease-in-out;
}

.service-learn-more:hover {
    color: var(--so-dark);
    text-decoration: underline;
}
/* ==========================================================================
   SERVICE DETAIL PAGE — PROCESS AUTOMATION
   Add to style.css
   ========================================================================== */

.service-detail-content {
    background-color: #ffffff;
    padding-bottom: 0;
}

/* ── Hero ── */
.service-detail-hero {
    padding: 60px 20px 50px 20px;
    background-color: var(--so-light);
    border-bottom: 1px solid #f0d9e2;
    box-sizing: border-box;
}

.service-detail-hero-inner {
    max-width: 780px;
}

.service-detail-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

.service-detail-back:hover {
    text-decoration: underline;
}

.service-detail-hero h1 {
    font-size: 36px;
    line-height: 1.2;
    color: var(--so-dark);
    margin: 10px 0 18px 0;
    letter-spacing: -0.5px;
}

.service-detail-hero-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 32px 0;
    max-width: 680px;
}

.service-detail-hero-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.service-detail-trust {
    font-size: 13px;
    color: #718096;
    font-weight: 500;
}

/* ── Shared section inner ── */
.service-detail-section-inner {
    max-width: 1060px;
    margin: 0 auto;
}

.service-detail-how,
.service-detail-demo-section {
    padding: 60px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--so-light);
}

.service-detail-tools-section {
    padding: 60px 20px;
    box-sizing: border-box;
    background-color: var(--so-light);
    border-top: 1px solid #f0d9e2;
    border-bottom: 1px solid #f0d9e2;
}

.service-detail-how h2,
.service-detail-tools-section h2,
.service-detail-demo-section h2 {
    font-size: 28px;
    color: var(--so-dark);
    margin: 10px 0 12px 0;
    letter-spacing: -0.3px;
}

.service-detail-section-lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 40px 0;
    max-width: 700px;
}

/* ── How It Works Steps ── */
.service-detail-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-detail-step {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 28px 0;
    border-bottom: 1px solid var(--so-light);
}

.service-detail-step:last-child {
    border-bottom: none;
}

.step-number {
    font-size: 36px;
    font-weight: 800;
    color: #f0d9e2;
    line-height: 1;
    flex-shrink: 0;
    width: 56px;
    letter-spacing: -1px;
}

.step-content h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.step-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* ── Tools Grid ── */
.service-detail-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.service-detail-tool-card {
    background: #ffffff;
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.service-detail-tool-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
}

.service-detail-tool-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.service-detail-tool-card strong {
    font-size: 15px;
    color: var(--so-dark);
}

.service-detail-tool-card span {
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
}

/* ── Demo Layout ── */
.demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Demo Form ── */
.demo-form-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.demo-form-header {
    background: var(--so-light);
    padding: 24px 28px 20px 28px;
    border-bottom: 1px solid #f0d9e2;
}

.demo-form-org {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--so-pink);
    display: block;
    margin-bottom: 8px;
}

.demo-form-header h3 {
    font-size: 18px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.demo-form-header p {
    font-size: 13px;
    color: #718096;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

.demo-form-body {
    padding: 24px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--so-dark);
}

.demo-field input,
.demo-field select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--so-font);
    color: var(--so-dark);
    background: #fff;
    transition: border-color 0.2s ease-in-out;
    appearance: auto;
}

.demo-field input:focus,
.demo-field select:focus {
    outline: none;
    border-color: var(--so-pink);
}

.demo-submit-btn {
    background: var(--so-pink);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--so-font);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 6px;
}

.demo-submit-btn:hover:not(:disabled) {
    background: var(--so-dark);
    transform: translateY(-1px);
}

.demo-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.demo-shake {
    animation: shake 0.4s ease-in-out;
    background: #e53e3e !important;
}

/* ── Demo Flow ── */
.demo-flow-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.demo-flow-title {
    font-size: 17px;
    color: var(--so-dark);
    margin: 0 0 4px 0;
}

.demo-flow-subtitle {
    font-size: 13px;
    color: #718096;
    margin: 0 0 24px 0;
}

.demo-steps-list {
    display: flex;
    flex-direction: column;
}

.demo-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    opacity: 0.4;
}

.demo-step-active {
    opacity: 1;
    border-color: #e2f5ee;
    background-color: #f0faf6;
}

.demo-step-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 2px;
}

.demo-step-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-step-text strong {
    font-size: 13.5px;
    color: var(--so-dark);
}

.demo-step-text span {
    font-size: 12px;
    color: #718096;
    line-height: 1.4;
}

.demo-step-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    color: #a0aec0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.demo-step-connector {
    width: 1px;
    height: 10px;
    background: #e2e8f0;
    margin: 0 0 0 27px;
}

.demo-result-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 18px;
    background: #f0faf6;
    border: 1px solid #10b981;
    border-radius: 10px;
}

.demo-result-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.demo-result-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.demo-result-text strong {
    font-size: 14px;
    color: var(--so-dark);
}

.demo-result-text span {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.4;
}

.demo-disclaimer {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    margin-top: 20px;
    font-style: italic;
}

@media (max-width: 860px) {
    .demo-wrapper {
        grid-template-columns: 1fr;
    }

    .service-detail-hero h1 {
        font-size: 26px;
    }

    .service-detail-hero-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Service Card Learn More Link ── */
.service-learn-more {
    display: inline-block;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease-in-out;
}

.service-learn-more:hover {
    color: var(--so-dark);
    text-decoration: underline;
}

/* ── Dual-Audience CTA Portal (matches homepage dark portal) ── */
.service-detail-portal {
    background-color: var(--so-dark);
    padding: 70px 20px;
    box-sizing: border-box;
}

.service-detail-portal-inner {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}

.service-detail-portal-col {
    padding: 0 48px;
}

.service-detail-portal-col:first-child {
    padding-left: 0;
}

.service-detail-portal-col:last-child {
    padding-right: 0;
}

.service-detail-portal-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    align-self: stretch;
    min-height: 180px;
}

.service-detail-portal .portal-mini-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--so-pink);
    margin-bottom: 14px;
}

.service-detail-portal h2 {
    font-size: 22px;
    color: #ffffff;
    margin: 0 0 14px 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.service-detail-portal p {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 28px 0;
}

@media (max-width: 768px) {
    .service-detail-portal-inner {
        grid-template-columns: 1fr;
    }
    .service-detail-portal-divider {
        width: 100%;
        height: 1px;
        min-height: unset;
        margin: 32px 0;
    }
    .service-detail-portal-col {
        padding: 0;
    }
}
/* ==========================================================================
   DATA ANALYSIS PAGE — DASHBOARD STYLES
   Append to style.css
   ========================================================================== */

/* ── Dashboard container ── */
.da-dashboard {
    margin-top: 8px;
}

/* ── Loading state ── */
.da-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: #718096;
    font-size: 14px;
}

.da-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--so-light);
    border-top-color: var(--so-pink);
    border-radius: 50%;
    animation: da-spin 0.8s linear infinite;
}

@keyframes da-spin {
    to { transform: rotate(360deg); }
}

/* ── Error state ── */
.da-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    font-size: 14px;
    color: #c53030;
}

/* ── Filter bar ── */
.da-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--so-light);
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    margin-bottom: 24px;
}

.da-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.da-filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--so-pink);
}

.da-filter-group select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--so-font);
    color: var(--so-dark);
    background: #ffffff;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
}

.da-filter-group select:focus {
    outline: none;
    border-color: var(--so-pink);
}

.da-filter-reset {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    cursor: pointer;
    font-family: var(--so-font);
    transition: all 0.2s ease-in-out;
    align-self: flex-end;
}

.da-filter-reset:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
}

/* ── KPI Cards ── */
.da-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.da-kpi-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s ease-in-out;
}

.da-kpi-card:hover {
    border-color: var(--so-pink);
}

.da-kpi-highlight {
    border-color: #10b981;
    background: #f0faf6;
}

.da-kpi-alert {
    border-color: #feb2b2;
    background: #fff5f5;
}

.da-kpi-icon {
    font-size: 22px;
}

.da-kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--so-dark);
    line-height: 1;
    letter-spacing: -1px;
}

.da-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #718096;
}

/* ── Chart cards ── */
.da-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.da-chart-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    padding: 24px;
}

.da-chart-wide {
    margin-bottom: 20px;
}

.da-chart-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--so-dark);
    margin: 0 0 4px 0;
}

.da-chart-sub {
    font-size: 12px;
    color: #718096;
    margin: 0 0 20px 0;
}

/* ── Program bar chart ── */
.da-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.da-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.da-bar-label {
    font-size: 12px;
    color: var(--so-dark);
    min-width: 140px;
    flex-shrink: 0;
}

.da-bar-track {
    flex: 1;
    height: 10px;
    background: var(--so-light);
    border-radius: 50px;
    overflow: hidden;
}

.da-bar-fill {
    height: 100%;
    border-radius: 50px;
    transition: width 0.6s ease-in-out;
}

.da-bar-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--so-dark);
    min-width: 24px;
    text-align: right;
}

/* ── Donut chart ── */
.da-donut-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.da-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.da-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4a5568;
}

.da-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Trend chart ── */
.da-trend-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.da-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding-bottom: 4px;
}

.da-trend-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.da-trend-rate {
    font-size: 9px;
    color: #718096;
    white-space: nowrap;
}

.da-trend-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.da-trend-bar {
    width: 100%;
    background: var(--so-pink);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.5s ease-in-out;
    opacity: 0.85;
}

.da-trend-month {
    font-size: 9px;
    color: #a0aec0;
    white-space: nowrap;
}

.da-trend-legend {
    font-size: 11px;
    color: #718096;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* ── Data table ── */
.da-table-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.da-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 0 24px;
}

.da-table-count {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
}

.da-table-wrapper {
    overflow-x: auto;
    padding: 12px 0 0 0;
}

.da-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.da-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #718096;
    border-bottom: 1px solid var(--so-light);
    white-space: nowrap;
}

.da-table td {
    padding: 10px 16px;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
    white-space: nowrap;
}

.da-table tr:last-child td {
    border-bottom: none;
}

.da-table tr:hover td {
    background: #fdf4f7;
}

/* ── Badges ── */
.da-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
}

.da-badge-crisis   { background: #fff5f5; color: #c53030; }
.da-badge-priority { background: #fffbeb; color: #92400e; }
.da-badge-standard { background: #f0faf6; color: #276749; }
.da-badge-resolved { background: #f0faf6; color: #276749; }
.da-badge-closed   { background: #f7fafc; color: #718096; }
.da-badge-new      { background: #ebf8ff; color: #2b6cb0; }
.da-badge-progress { background: #fffbeb; color: #92400e; }
.da-badge-pending  { background: #faf5ff; color: #553c9a; }

@media (max-width: 768px) {
    .da-charts-row {
        grid-template-columns: 1fr;
    }
    .da-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .da-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .da-filter-group select {
        min-width: unset;
        width: 100%;
    }
    .da-donut-wrapper {
        flex-direction: column;
    }
}
/* ==========================================================================
   WORDPRESS CUSTOMIZATION PAGE
   Append to style.css
   ========================================================================== */

/* ── Example cards grid ── */
.wp-example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.wp-example-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 14px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.wp-example-card:hover {
    border-color: var(--so-pink);
    transform: translateY(-2px);
}

.wp-example-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: 50px;
    background: var(--so-light);
    color: var(--so-pink);
    width: fit-content;
}

.wp-example-card h3 {
    font-size: 17px;
    color: var(--so-dark);
    margin: 0;
    line-height: 1.3;
}

.wp-example-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #4a5568;
    margin: 0;
    flex: 1;
}

.wp-example-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.wp-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.wp-download-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 20px;
    background: var(--so-pink);
    color: #ffffff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: fit-content;
}

.wp-download-btn:hover {
    background: var(--so-dark);
    transform: translateY(-1px);
}

.wp-download-note {
    font-size: 11px !important;
    color: #a0aec0 !important;
    font-style: italic;
    margin: 0 !important;
}

.wp-view-btn {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.wp-view-btn:hover {
    color: var(--so-dark);
    text-decoration: underline;
}

/* ── Code block ── */
.wp-code-block {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}

.wp-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #2C2C2A;
    border-bottom: 1px solid #3d3d3b;
}

.wp-code-filename {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    font-family: "Courier New", monospace;
}

.wp-code-lang {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--so-pink);
    padding: 2px 8px;
    border: 1px solid var(--so-pink);
    border-radius: 4px;
}

.wp-code-pre {
    margin: 0;
    padding: 24px;
    background: #1a1a18;
    overflow-x: auto;
}

.wp-code-pre code {
    font-family: "Courier New", Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #a8d8a8;
    white-space: pre;
    display: block;
}

@media (max-width: 768px) {
    .wp-example-grid {
        grid-template-columns: 1fr;
    }
    .wp-code-pre code {
        font-size: 11px;
    }
}
/* ==========================================================================
   SUPPORT PAGE STYLES
   Append to style.css
   ========================================================================== */

.support-page-content {
    background-color: #ffffff;
    padding-bottom: 80px;
}

/* ── Main layout ── */
.support-main-section {
    padding: 50px 20px 60px 20px;
    box-sizing: border-box;
}

.support-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

/* ── Form card ── */
.support-form-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 16px;
    padding: 36px 32px;
}

.support-form-card h2 {
    font-size: 22px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.support-form-intro {
    font-size: 14px;
    color: #718096;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* ── Success / Error messages ── */
.support-success-msg,
.support-error-msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 14px;
}

.support-success-msg {
    background: #f0faf6;
    border: 1px solid #10b981;
}

.support-success-msg span,
.support-error-msg span {
    font-size: 20px;
    flex-shrink: 0;
}

.support-success-msg strong {
    display: block;
    color: var(--so-dark);
    margin-bottom: 4px;
}

.support-success-msg p,
.support-error-msg p {
    margin: 0;
    color: #4a5568;
}

.support-error-msg {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
    align-items: center;
}

/* ── Form fields ── */
.support-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.support-field:last-of-type {
    margin-bottom: 0;
}

.support-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--so-dark);
}

.req {
    color: var(--so-pink);
}

.support-optional {
    font-weight: 400;
    color: #a0aec0;
    font-size: 12px;
}

.support-field input,
.support-field select,
.support-field textarea {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--so-font);
    color: var(--so-dark);
    background: #ffffff;
    transition: border-color 0.2s ease-in-out;
    appearance: auto;
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    outline: none;
    border-color: var(--so-pink);
    box-shadow: 0 0 0 3px rgba(192, 69, 106, 0.08);
}

.support-field textarea {
    resize: vertical;
    min-height: 120px;
}

.support-submit-btn {
    width: 100%;
    padding: 14px 28px;
    background: var(--so-pink);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--so-font);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 8px;
}

.support-submit-btn:hover:not(:disabled) {
    background: var(--so-dark);
    transform: translateY(-1px);
}

.support-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.support-disclaimer {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}

/* ── Sidebar ── */
.support-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.support-info-card {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    padding: 22px 20px;
}

.support-info-card h3 {
    font-size: 15px;
    color: var(--so-dark);
    margin: 0 0 8px 0;
}

.support-info-card p {
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.support-email-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.support-email-link:hover {
    color: var(--so-dark);
    text-decoration: underline;
}

/* ── Meta card (how this form works) ── */
.support-meta-card {
    background: var(--so-light);
    border: 1px solid #f0d9e2;
    border-radius: 12px;
    padding: 22px 20px;
}

.support-meta-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--so-pink);
    margin-bottom: 10px;
}

.support-meta-card p {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.support-meta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-meta-list li {
    font-size: 12.5px;
    color: #4a5568;
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.support-meta-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--so-pink);
    font-weight: 700;
}

.support-meta-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--so-pink);
    text-decoration: none;
}

.support-meta-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
    .support-sidebar-col {
        order: -1;
    }
    .support-field-row {
        grid-template-columns: 1fr;
    }
    .support-form-card {
        padding: 24px 20px;
    }
}
/* ==========================================================================
   AIRTABLE DATABASE DESIGN PAGE
   Append to style.css
   ========================================================================== */

/* ── Tab navigation ── */
.atdb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.atdb-tab {
    padding: 10px 18px;
    border: 1px solid var(--so-light);
    border-radius: 50px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--so-font);
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.atdb-tab:hover {
    border-color: var(--so-pink);
    color: var(--so-pink);
}

.atdb-tab.active {
    background: var(--so-pink);
    border-color: var(--so-pink);
    color: #ffffff;
}

/* ── Loading / error ── */
.atdb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 14px;
    color: #718096;
    font-size: 14px;
}

.atdb-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    font-size: 14px;
    color: #c53030;
}

/* ── Table description ── */
.atdb-meta-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #4a5568;
    padding: 16px 20px;
    background: var(--so-light);
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 3px solid var(--so-pink);
}

/* ── Schema strip ── */
.atdb-schema-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.atdb-field-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: default;
    transition: border-color 0.15s ease-in-out;
}

.atdb-field-pill:hover {
    border-color: var(--so-pink);
}

.atdb-field-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--so-dark);
}

.atdb-field-type {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Data table ── */
.atdb-data-wrapper {
    background: #ffffff;
    border: 1px solid var(--so-light);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.atdb-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--so-light);
}

.atdb-record-count {
    font-size: 12px;
    font-weight: 600;
    color: #718096;
}

.atdb-live-badge {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background: #f0faf6;
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid #10b981;
}

.atdb-table-scroll {
    overflow-x: auto;
}

.atdb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.atdb-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #718096;
    border-bottom: 1px solid var(--so-light);
    white-space: nowrap;
    background: #fafafa;
}

.atdb-table td {
    padding: 10px 16px;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atdb-table tr:last-child td {
    border-bottom: none;
}

.atdb-table tr:hover td {
    background: #fdf4f7;
}

.atdb-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
}

.atdb-linked {
    font-size: 11px;
    font-weight: 600;
    color: #1e40af;
    background: #dbeafe;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Relationships ── */
.atdb-relationships {
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.atdb-rel-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--so-pink);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

.atdb-rel-text {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .atdb-tabs {
        gap: 6px;
    }
    .atdb-tab {
        padding: 8px 14px;
        font-size: 12px;
    }
    .atdb-relationships {
        flex-direction: column;
        gap: 6px;
    }
}