/*
Theme Name: SMS Custom
Description: Custom theme for Spot Matching System. Redesigned homepage with classic templates.
Author: Antigravity
Version: 1.0.0
Text Domain: sms-custom
*/

:root {
    /* SMS Color System */
    --sms-bg: #FFFFFF;
    --sms-bg-secondary: #F9F9F9;
    --sms-text-primary: #2C2C2C;
    --sms-text-secondary: #555555;
    --sms-accent: #5D4037;
    /* SMS Brand Brown */
    --sms-accent-dark: #3E2b25;
    --sms-border: #E0E0E0;
    --sms-white: #FFFFFF;
    --sms-font-primary: 'Inter', sans-serif;

    /* Layout */
    --sms-container-width: 1200px;
    --sms-header-height: 80px;
    --sms-border-radius: 8px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: calc(var(--sms-header-height) + 20px);
}

body {
    font-family: var(--sms-font-primary);
    color: var(--sms-text-primary);
    line-height: 1.7;
    background-color: var(--sms-bg);
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

.container {
    max-width: var(--sms-container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    height: var(--sms-header-height);
    display: flex;
    align-items: center;
    background: var(--sms-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for premium feel */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.site-branding .logo-link {
    display: flex;
    align-items: center;
}

.site-branding .site-logo {
    height: 54px;
    /* Desktop height increased for prominence */
    width: auto;
    display: block;
}

@media (max-width: 1023px) {
    .site-branding .site-logo {
        height: 48px;
        /* Tablet height */
    }
}

@media (max-width: 768px) {
    .site-branding .site-logo {
        height: 36px;
        /* Mobile height kept proportional */
    }
}

/* Navigation */
.main-navigation ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    font-weight: 500;
    font-size: 15px;
    color: var(--sms-text-primary);
    transition: color 0.2s;
    display: block;
    line-height: 1.5;
}

.main-navigation a:hover {
    color: var(--sms-accent);
}

/* Dropdown Support */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: var(--sms-white);
    min-width: 220px;
    gap: 0;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Premium shadow */
    border-radius: 4px;
    z-index: 1100;
}

.main-navigation li:hover>ul {
    display: flex;
}

.main-navigation ul ul li a {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--sms-text-secondary);
}

.main-navigation ul ul li a:hover {
    background: var(--sms-bg-secondary);
    color: var(--sms-accent);
}

.menu-toggle {
    display: none;
    /* Hidden on desktop */
}

/* Header CTA */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--sms-border-radius);
    background: var(--sms-accent);
    color: var(--sms-white);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn:hover {
    background: var(--sms-accent-dark);
    color: var(--sms-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn:focus-visible {
    outline: 2px solid var(--sms-accent);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(0);
}

/* Hero Section */
.sms-hero {
    padding: 80px 0;
    background: linear-gradient(to right, #fff 50%, #fdfdfd 50%);
    /* Subtle separation */
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-title {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--sms-accent);
    /* Branding color for headline */
}

.hero-desc {
    font-size: 18px;
    color: var(--sms-text-secondary);
    margin-bottom: 36px;
    max-width: 480px;
}

/* Authority Strip */
.sms-authority-strip {
    background: var(--sms-bg-secondary);
    border-top: 1px solid var(--sms-border);
    border-bottom: 1px solid var(--sms-border);
    padding: 30px 0;
}

.authority-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.auth-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.auth-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--sms-text-primary);
}

.auth-label {
    font-size: 14px;
    color: var(--sms-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Features */
.sms-features {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 36px;
    margin-bottom: 16px;
    font-weight: 600;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    padding: 40px;
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    transition: box-shadow 0.3s;
}

.feature-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.feature-card h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

.feature-card p {
    color: var(--sms-text-secondary);
    margin-bottom: 24px;
}

.learn-more {
    font-weight: 600;
    color: var(--sms-accent);
    font-size: 14px;
}

/* Footer */
.site-footer {
    background: var(--sms-bg-secondary);
    padding: 60px 0;
    text-align: center;
    color: var(--sms-text-secondary);
    font-size: 14px;
}

/* Responsive */
/* Responsive Mobile Navigation (Breakpoint: 1023px) */
@media (max-width: 1023px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        order: 2;
    }

    .hamburger {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--sms-text-primary);
        position: relative;
        transition: background 0.2s;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background: var(--sms-text-primary);
        left: 0;
        transition: transform 0.3s;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        bottom: -8px;
    }

    /* Hamburger Animation when Toggled */
    .main-navigation.toggled .hamburger {
        background: transparent;
    }

    .main-navigation.toggled .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }

    .main-navigation.toggled .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobile Menu Container */
    .main-navigation ul.sms-menu {
        display: none;
        /* Hidden by default */
        position: absolute;
        top: var(--sms-header-height);
        left: 0;
        right: 0;
        background: var(--sms-white);
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        border-top: 1px solid var(--sms-border);
        width: 100%;
        max-height: calc(100vh - var(--sms-header-height));
        overflow-y: auto;
        z-index: 999;
    }

    .main-navigation.toggled ul.sms-menu {
        display: flex;
    }

    .main-navigation li {
        width: 100%;
        display: block;
    }

    .main-navigation a {
        padding: 10px 25px;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        font-size: 16px;
    }

    /* Submenu Accordion Style */
    .main-navigation ul ul {
        display: none;
        /* Controlled by JS */
        position: static;
        width: 100%;
        background: var(--sms-bg-secondary);
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    .main-navigation li.is-open>ul {
        display: flex;
        flex-direction: column;
    }

    .main-navigation ul ul li a {
        padding-left: 45px;
        font-size: 15px;
        border-bottom: none;
    }

    /* Prevent hover dropdowns on mobile */
    .main-navigation li:hover>ul {
        display: none;
    }

    .main-navigation li.is-open:hover>ul {
        display: flex;
    }

    /* Adjust Layout Components */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .authority-grid {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding-left: 20px;
    }
}

/* ------------------------------------------------------------
   SMS HOMEPAGE CUSTOM STYLES (Modular Sections)
   ------------------------------------------------------------ */

/* General Utils */
.section-pad {
    padding: 100px 0;
}

.bg-secondary {
    background-color: var(--sms-bg-secondary);
}

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

.mt-40 {
    margin-top: 40px;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
}

.btn-primary {
    background: var(--sms-accent);
    color: var(--sms-white);
}

.btn-primary:hover {
    background: var(--sms-accent-dark);
    color: var(--sms-white);
}

.btn-primary:active {
    background: #34241f;
    /* Slightly darker for active state */
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--sms-text-primary);
    color: var(--sms-text-primary);
    margin-left: 10px;
}

.btn-secondary:hover {
    background: rgba(44, 44, 34, 0.05);
    /* Match tint requirement for secondary */
    color: var(--sms-text-primary);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--sms-accent);
    color: var(--sms-accent);
}

.btn-outline:hover {
    background: rgba(93, 64, 55, 0.08);
    /* Light brown tint (8%) */
    color: var(--sms-accent);
}

.btn-outline:active {
    background: rgba(93, 64, 55, 0.12);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 18px;
}

/* HERO Section (Refined) */
.sms-home-hero {
    padding: 100px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 550px;
}

.hero-actions {
    display: flex;
    gap: 15px;
}

/* Mobile Adjustments for Hero */
@media (max-width: 1023px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-secondary {
        margin-left: 0;
    }
}


/* TRUST STRIP */
.sms-home-trust-strip {
    background: var(--sms-bg-secondary);
    border-top: 1px solid var(--sms-border);
    border-bottom: 1px solid var(--sms-border);
    padding: 40px 0;
}

.trust-grid {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sms-font-primary);
}

.trust-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--sms-text-primary);
    line-height: 1;
}

.trust-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sms-text-secondary);
    font-weight: 600;
}

.trust-divider {
    width: 1px;
    height: 40px;
    background: var(--sms-border);
}

@media (max-width: 1023px) {
    .trust-grid {
        flex-direction: column;
        gap: 30px;
    }

    .trust-divider {
        width: 100px;
        height: 1px;
    }
}


/* INTRO Section */
.sms-home-intro .section-title {
    font-size: 36px;
    margin-bottom: 30px;
    color: var(--sms-accent);
    font-weight: 600;
}

.intro-content p {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto 20px auto;
    color: var(--sms-text-primary);
    font-weight: 400;
    line-height: 1.7;
}

.text-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--sms-accent);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
}


/* HOW IT WORKS */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
}

.step-card {
    position: relative;
    padding: 30px 20px 0 0;
}

.step-number {
    font-size: 60px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: -20px;
    left: 0;
    line-height: 1;
}

.step-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    position: relative;
}

.step-card p {
    font-size: 15px;
    color: var(--sms-text-secondary);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 480px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}


/* PRODUCTS Ecosystem */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.product-card {
    border: 1px solid var(--sms-border);
    padding: 30px;
    border-radius: var(--sms-border-radius);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.product-icon {
    font-size: 32px;
    margin-bottom: 20px;
    display: block;
}

.product-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.product-card p {
    font-size: 14px;
    color: var(--sms-text-secondary);
    margin-bottom: 20px;
}

.product-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--sms-accent);
}

@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}


/* USE CASES */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.use-case-card {
    display: block;
    background: var(--sms-white);
    padding: 30px;
    border-radius: var(--sms-border-radius);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.use-case-card:hover {
    border-color: var(--sms-accent);
    transform: translateY(-2px);
}

.use-case-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--sms-text-primary);
}

.use-case-card p {
    font-size: 14px;
    color: var(--sms-text-secondary);
    margin-bottom: 15px;
}

.fake-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--sms-accent);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .use-cases-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
}


/* DIFFERENTIATION Accordion */
.sms-home-diff {
    background: #fff;
}

.diff-container {
    display: block;
}

.diff-intro {
    font-size: 20px;
    color: var(--sms-text-secondary);
    margin-bottom: 40px;
}

.diff-accordion details {
    border-bottom: 1px solid var(--sms-border);
    padding: 20px 0;
}

.diff-accordion details[open] {
    padding-bottom: 30px;
}

.diff-accordion summary {
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    /* Hide default arrow */
    position: relative;
    padding-right: 30px;
}

.diff-accordion summary::-webkit-details-marker {
    display: none;
}

.diff-accordion summary::after {
    content: '+';
    position: absolute;
    right: 0;
    font-weight: 300;
    font-size: 24px;
}

.diff-accordion details[open] summary::after {
    content: '−';
}

.details-content {
    margin-top: 15px;
    color: var(--sms-text-secondary);
    line-height: 1.7;
}



@media (max-width: 900px) {
    /* Grid overrides removed as differentiation is now full width */
}


/* CTA Section */
.sms-home-cta h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}

.sms-home-cta p {
    font-size: 18px;
    color: var(--sms-text-secondary);
    margin-bottom: 40px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 600px) {
    .cta-actions {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------
   SYSTEM PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-system-page h1 {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--sms-accent);
}

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 900px) {
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.bullet-list {
    list-style: none;
    margin: 30px 0;
}

.bullet-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: var(--sms-text-secondary);
}

.bullet-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--sms-accent);
    font-weight: bold;
}

.image-placeholder {
    background: var(--sms-bg-secondary);
    border: 1px dashed var(--sms-border);
    border-radius: var(--sms-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sms-text-secondary);
    text-align: center;
    padding: 20px;
}

.aspect-ratio-box {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.intro-details {
    margin: 30px 0;
}

.intro-details p {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--sms-text-secondary);
}

.cta-actions-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.cta-actions-group .secondary-cta {
    margin-top: 0;
}


.sms-system-page .section-pad {
    padding: 120px 0;
}

.sms-system-page h2 {
    font-size: 36px;
    margin-bottom: 25px;
    color: var(--sms-accent);
}

.sms-system-page .step-card {
    transition: transform 0.3s ease;
}

.sms-system-page .step-card:hover {
    transform: translateY(-5px);
}

.sms-system-page .image-placeholder span {
    font-size: 14px;
    opacity: 0.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sms-system-page .text-link:hover {
    color: var(--sms-accent-dark);
}

/* ------------------------------------------------------------
   COLOR SCIENCE PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-science-page .hero-title {
    font-size: 54px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--sms-accent);
}

.sms-science-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
}

.hero-orientation {
    font-size: 16px;
    color: var(--sms-text-secondary);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 0.8;
}

.science-reassurance .reassurance-para {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.summary-box {
    background: var(--sms-bg-secondary);
    border: 1px solid var(--sms-border);
    color: var(--sms-text-primary);
    padding: 60px 40px;
    border-radius: var(--sms-border-radius);
    text-align: center;
}

.summary-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.summary-list li {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
}

.summary-list li:after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--sms-border);
    margin: 24px auto 0;
}

.summary-list li:last-child:after {
    display: none;
}

.tertiary-cta {
    font-size: 15px;
    margin-top: 5px;
    opacity: 0.8;
    font-weight: 500;
}

.highlight-statement {
    font-size: 24px;
    font-weight: 600;
    color: var(--sms-accent);
    margin-top: 30px;
}

.checklist-box {
    background: var(--sms-white);
    padding: 30px;
    border-radius: var(--sms-border-radius);
    border-left: 4px solid var(--sms-accent);
}

.checklist-box .lead-in {
    font-weight: 600;
    margin-bottom: 15px;
}

.checklist {
    list-style: none;
}

.checklist li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: var(--sms-text-secondary);
}

.checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--sms-accent);
    font-weight: bold;
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.concept-card {
    background: var(--sms-white);
    padding: 40px;
    border-radius: var(--sms-border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.concept-card .icon-placeholder {
    width: 32px;
    height: 32px;
    background: var(--sms-bg-secondary);
    border: 1px dashed var(--sms-border);
    border-radius: 4px;
    margin-bottom: 20px;
}

.concept-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--sms-accent);
    font-weight: 700;
}

.concept-card p {
    font-size: 16px;
    color: var(--sms-text-secondary);
    line-height: 1.6;
}

.reassurance-para {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sms-text-secondary);
}

.science-cta .cta-actions-group {
    gap: 24px;
}

.science-cta .secondary-cta,
.science-cta .tertiary-cta {
    font-weight: 500;
    color: var(--sms-text-secondary);
}

.science-cta .btn-primary {
    padding: 18px 36px;
    font-size: 18px;
}

@media (max-width: 1023px) {
    .sms-science-page .section-pad {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .sms-science-page .hero-title {
        font-size: 42px;
    }

    .concept-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Stay 2x2 for tablet */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .sms-science-page .hero-title {
        font-size: 32px;
    }

    .concept-grid {
        grid-template-columns: 1fr;
        /* Stack for mobile */
    }

    .summary-list li {
        font-size: 18px;
    }
}

/* ------------------------------------------------------------
   STANDARDS & ACCURACY PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-standards-page .section-pad {
    padding: 120px 0;
}

.sms-standards-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
    line-height: 1.1;
}

.sms-standards-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
}

.contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
}

.contrast-col {
    background: var(--sms-white);
    padding: 50px 40px;
    border-radius: var(--sms-border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--sms-border);
}

.contrast-title {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--sms-accent);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.editorial-list {
    list-style: none;
    padding: 0;
}

.editorial-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 17px;
    color: var(--sms-text-secondary);
    line-height: 1.5;
}

.editorial-list li::before {
    position: absolute;
    left: 0;
    font-weight: bold;
}

.editorial-list.negative li::before {
    content: '✕';
    color: #cc0000;
    font-size: 14px;
}

.editorial-list.positive li::before {
    content: '✓';
    color: var(--sms-accent);
    font-size: 14px;
}

.editorial-list.centered-list {
    max-width: 400px;
    margin: 0 auto;
}

.editorial-box {
    padding: 30px;
    background: var(--sms-bg-secondary);
    border-radius: var(--sms-border-radius);
    font-style: italic;
    color: var(--sms-text-secondary);
    border-left: 3px solid var(--sms-border);
}

.principle-statement {
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    color: var(--sms-accent);
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sms-border);
}

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

.mb-60 {
    margin-bottom: 60px;
}

.closing-statement {
    font-size: 22px;
    font-weight: 500;
    color: var(--sms-accent);
    margin-top: 40px;
}

.standards-accuracy-def .context-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sms-text-secondary);
    margin-bottom: 10px;
    opacity: 0.7;
}

.standards-accuracy-def .dominant-statement {
    font-size: 42px;
    font-weight: 700;
    color: var(--sms-accent);
    margin: 0;
}

.principles-stack {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.principle-line {
    font-size: 24px;
    font-weight: 500;
    color: var(--sms-text-primary);
    padding: 10px 0;
}

.principle-divider {
    width: 30px;
    height: 1px;
    background: var(--sms-border);
    margin: 15px 0;
}

.proof-statement {
    margin-top: 80px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.proof-statement p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--sms-text-secondary);
}

.standards-cta .cta-actions-group {

    gap: 30px;
}

.standards-cta h2 {
    font-size: 32px;
    margin-bottom: 40px;
    color: var(--sms-accent);
}

@media (max-width: 1023px) {
    .sms-standards-page .section-pad {
        padding: 90px 0;
    }
}

@media (max-width: 768px) {
    .contrast-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sms-standards-page .hero-title {
        font-size: 42px;
    }

    .principle-statement {
        font-size: 24px;
    }
}

/* ------------------------------------------------------------
   GETTING STARTED PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-getting-started-page .section-pad {
    padding: 140px 0;
}

.sms-getting-started-page .hero-title {
    font-size: 54px;
    margin-bottom: 24px;
    color: var(--sms-accent);
    line-height: 1.1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sms-getting-started-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gs-hero-visual .wide-placeholder {
    aspect-ratio: 21 / 9;
    background: var(--sms-bg-secondary);
    border: 1px dashed var(--sms-border);
    margin-top: 80px;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.audience-card {
    background: var(--sms-white);
    padding: 40px 20px;
    border-radius: var(--sms-border-radius);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--sms-border);
    transition: transform 0.3s ease;
}

.audience-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--sms-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.changes-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.change-item p {
    font-size: 24px;
    font-weight: 500;
    color: var(--sms-text-primary);
}

.change-divider {
    width: 60px;
    height: 1px;
    background: var(--sms-border);
}

.subtle-note {
    font-style: italic;
    color: var(--sms-text-secondary);
    font-size: 18px;
    margin-top: 50px;
}

.seq-step {
    background: var(--sms-white);
    padding: 30px;
    border-radius: var(--sms-border-radius);
    border: 1px solid var(--sms-border);
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.seq-step:last-child {
    margin-bottom: 0;
}

.seq-number {
    width: 50px;
    height: 50px;
    background: var(--sms-accent);
    color: var(--sms-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.seq-content p {
    font-size: 18px;
    font-weight: 600;
    color: var(--sms-text-primary);
}

.gs-cta h2 {
    font-size: 32px;
    color: var(--sms-accent);
    margin-bottom: 40px;
}

.gs-cta .cta-actions-group {
    gap: 24px;
    margin-top: 0;
}

@media (max-width: 1023px) {
    .audience-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sms-getting-started-page .hero-title {
        font-size: 42px;
    }

    .audience-grid {
        grid-template-columns: 1fr;
    }

    .audience-card {
        padding: 30px;
    }

    .change-item p {
        font-size: 18px;
    }

    .seq-step {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
}

/* ------------------------------------------------------------
   WHEN TO USE SMS PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-when-to-use-page .section-pad {
    padding: 140px 0;
}

.sms-when-to-use-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
    line-height: 1.1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sms-when-to-use-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.wtu-hero-visual .wide-placeholder {
    aspect-ratio: 21 / 9;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.scenario-card {
    background: var(--sms-white);
    padding: 50px 40px;
    border-radius: var(--sms-border-radius);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--sms-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scenario-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sms-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.wtu-not-necessary .section-title {
    margin-bottom: 15px;
}

.not-necessary-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
}

.not-necessary-item {
    padding: 20px 40px;
    background: var(--sms-bg-secondary);
    border-radius: var(--sms-border-radius);
    border: 1px solid var(--sms-border);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.not-necessary-item p {
    font-size: 18px;
    color: var(--sms-text-secondary);
    font-weight: 500;
}

.advisory-closing {
    font-size: 20px;
    font-weight: 600;
    color: var(--sms-accent);
    font-style: italic;
    margin-top: 40px;
}

.wtu-cost-value .bullet-list {
    margin-top: 40px;
}

.wtu-cost-value .bullet-list li {
    font-size: 18px;
    font-weight: 600;
    color: var(--sms-text-primary);
    margin-bottom: 15px;
    padding-left: 30px;
}

.editorial-note {
    padding: 30px;
    background: var(--sms-white);
    border-radius: var(--sms-border-radius);
    border-left: 4px solid var(--sms-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.wtu-cta h2 {
    font-size: 32px;
    margin-bottom: 40px;
    color: var(--sms-accent);
}

.wtu-cta .cta-actions-group {
    gap: 24px;
    margin-top: 0;
}

@media (max-width: 1023px) {
    .sms-when-to-use-page .section-pad {
        padding: 100px 0;
    }
}

@media (max-width: 768px) {
    .scenario-grid {
        grid-template-columns: 1fr;
    }

    .sms-when-to-use-page .hero-title {
        font-size: 42px;
    }

    .wtu-hero-visual .wide-placeholder {
        margin-top: 50px;
    }
}

/* ------------------------------------------------------------
   USE CASES PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-use-cases-page .section-pad {
    padding: 140px 0;
}

.sms-use-cases-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
    line-height: 1.1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sms-use-cases-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.uc-hero-visual .wide-placeholder {
    aspect-ratio: 21 / 9;
    background: var(--sms-bg-secondary);
    border: 1px dashed var(--sms-border);
    margin-top: 80px;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 80px;
}

.uc-card {
    background: var(--sms-white);
    border-radius: var(--sms-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--sms-border);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uc-card .uc-content {
    padding: 50px 50px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.uc-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--sms-accent);
    font-weight: 700;
}

.uc-card p {
    font-size: 17px;
    color: var(--sms-text-secondary);
    margin-bottom: 30px;
    line-height: 1.7;
    flex-grow: 1;
}

.uc-card .text-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--sms-text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 0.7;
    margin-bottom: 20px;
}

.uc-card .uc-visual {
    padding: 0 50px 50px;
}

.uc-card .uc-visual .image-placeholder {
    aspect-ratio: 16 / 9;
    background: var(--sms-bg-secondary);
    border: 1px dashed var(--sms-border);
    opacity: 0.5;
}

.uc-cta h2 {
    font-size: 32px;
    color: var(--sms-accent);
    margin-bottom: 40px;
}

.uc-cta .cta-actions-group {
    gap: 24px;
    margin-top: 0;
}

@media (max-width: 1023px) {
    .use-cases-grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .sms-use-cases-page .section-pad {
        padding: 90px 0;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }

    .sms-use-cases-page .hero-title {
        font-size: 36px;
    }

    .uc-card .uc-content {
        padding: 40px 30px;
    }

    .uc-card .uc-visual {
        padding: 0 30px 40px;
    }
}

/* ------------------------------------------------------------
   FAQ PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-faq-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
}

.faq-group-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--sms-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.faq-accordion {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    margin-bottom: 10px;
    border-radius: var(--sms-border-radius);
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: var(--sms-accent);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    padding: 24px 30px;
    background: none;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: var(--sms-text-primary);
    line-height: 1.4;
}

.faq-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
    margin-left: 20px;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: var(--sms-accent);
    transition: all 0.3s ease;
}

.faq-icon::before {
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.faq-icon::after {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.faq-item.active .faq-icon::before {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer-inner {
    padding: 0 30px 30px;
}

.faq-answer-inner p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sms-text-secondary);
    margin-bottom: 15px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.cta-mini-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--sms-accent);
}

@media (max-width: 768px) {
    .sms-faq-page .hero-title {
        font-size: 36px;
    }

    .faq-question {
        padding: 20px;
        font-size: 16px;
    }

    .faq-answer-inner {
        padding: 0 20px 20px;
    }
}

/* ------------------------------------------------------------
   TECHNICAL PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-technical-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
}

.tech-hero .tech-intro {
    font-size: 18px;
    color: var(--sms-text-secondary);
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.tech-definition,
.tech-consequences {
    max-width: 650px;
}

.tech-principle {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    /* Almost white */
    border-radius: var(--sms-border-radius);
}

.principle-inner {
    padding: 60px 40px;
}

.principle-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--sms-accent);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

.sms-technical-page h2 {
    font-size: 32px;
    color: var(--sms-accent);
    margin-bottom: 30px;
}

.sms-technical-page p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sms-text-secondary);
    margin-bottom: 20px;
}

.sms-technical-page .bullet-list {
    margin-top: 15px;
}

.sms-technical-page .bullet-list li {
    font-size: 16px;
    color: var(--sms-text-primary);
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

.sms-technical-page .bullet-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--sms-accent);
    font-size: 1.2em;
    top: -2px;
}

@media (max-width: 768px) {
    .sms-technical-page .hero-title {
        font-size: 36px;
    }

    .tech-definition,
    .tech-consequences {
        max-width: 100%;
    }

    .principle-inner {
        padding: 40px 20px;
    }

    .principle-text {
        font-size: 20px;
    }
}

/* ------------------------------------------------------------
   USE CASE DETAIL PAGES
   ------------------------------------------------------------ */

.use-case-detail .hero-title {
    font-size: 48px;
    color: var(--sms-accent);
    margin-bottom: 24px;
}

.use-case-intro p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
}

.use-case-visual .wide-placeholder {
    height: 400px;
    background: var(--sms-border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sms-border-radius);
    color: var(--sms-text-secondary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scenario-item h3 {
    font-size: 24px;
    color: var(--sms-accent);
    margin-bottom: 12px;
}

.scenario-item p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
}

@media (max-width: 768px) {
    .use-case-detail .hero-title {
        font-size: 32px;
    }

    .use-case-intro p {
        font-size: 18px;
    }

    .use-case-visual .wide-placeholder {
        height: 250px;
    }
}

/* ------------------------------------------------------------
   CONTACT PAGE CUSTOM STYLES
   ------------------------------------------------------------ */

.sms-contact-page .contact-hero {
    padding: 100px 0 60px;
}

.sms-contact-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
    font-weight: 700;
}

.sms-contact-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
    opacity: 0.8;
}

.sms-contact-page .contact-intro {
    font-size: 18px;
    color: var(--sms-text-secondary);
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Help Categories Grid */
.help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.help-item {
    background: var(--sms-white);
    padding: 40px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    text-align: left;
    margin-bottom: 0 !important;
}

.help-item h3 {
    font-size: 22px;
    color: var(--sms-accent);
    margin-bottom: 16px;
    font-weight: 600;
}

.help-item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sms-text-secondary);
    margin-bottom: 0;
}

/* Contact Details */
.details-block {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background: none;
    border: none;
    padding: 0;
}

.detail-row {
    font-size: 17px;
    line-height: 1.6;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.detail-row .label {
    font-weight: 600;
    color: var(--sms-text-secondary);
    width: 120px;
    flex-shrink: 0;
}

.detail-row .value {
    color: var(--sms-text-primary);
}

/* Technical Form Styling */
.contact-form-wrapper {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.sms-form .form-group {
    margin-bottom: 25px;
}

.sms-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--sms-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sms-form input[type="text"],
.sms-form input[type="email"],
.sms-form select,
.sms-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    background: var(--sms-white);
    font-family: inherit;
    font-size: 16px;
    color: var(--sms-text-primary);
    transition: all 0.3s ease;
}

.sms-form input:focus,
.sms-form select:focus,
.sms-form textarea:focus {
    outline: none;
    border-color: var(--sms-accent);
    box-shadow: 0 0 0 1px var(--sms-accent);
}

.sms-form .form-submit {
    margin-top: 40px;
}

.sms-form .btn-primary {
    padding: 16px 40px;
    font-size: 16px;
}

.contact-closing {
    padding-bottom: 100px;
}

.expectation-text {
    font-size: 14px;
    color: var(--sms-text-secondary);
    opacity: 0.7;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .sms-contact-page .contact-hero {
        padding: 60px 0 40px;
    }

    .sms-contact-page .hero-title {
        font-size: 36px;
    }

    .help-grid {
        grid-template-columns: 1fr;
    }

    .help-item {
        padding: 30px;
    }

    .detail-row {
        flex-direction: column;
    }

    .detail-row .label {
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ------------------------------------------------------------
   PHILOSOPHY PAGE
   ------------------------------------------------------------ */

.sms-philosophy-page .philosophy-hero {
    padding: 100px 0 60px;
}

.sms-philosophy-page .hero-title {
    font-size: 54px;
    color: var(--sms-accent);
    margin-bottom: 24px;
    font-weight: 700;
}

.sms-philosophy-page .hero-subtitle {
    font-size: 20px;
    color: var(--sms-text-secondary);
    opacity: 0.8;
}

.sms-philosophy-page .phil-intro {
    font-size: 18px;
    color: var(--sms-text-secondary);
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sms-philosophy-page .phil-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sms-text-primary);
}

.sms-philosophy-page .phil-content p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .sms-philosophy-page .philosophy-hero {
        padding: 60px 0 40px;
    }

    .sms-philosophy-page .hero-title {
        font-size: 36px;
    }

    .sms-philosophy-page .phil-intro,
    .sms-philosophy-page .phil-content {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------
   COLORS PAGE
   ------------------------------------------------------------ */

.grid {
    display: grid;
    gap: 30px;
}

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

.grid-2-equal {
    grid-template-columns: repeat(2, 1fr);
}

.col-align-center {
    align-items: center;
}

.library-card {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    display: flex;
    flex-direction: column;
}

.library-card h3 {
    font-size: 24px;
    color: var(--sms-accent);
}

.library-card .meta-list p {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.library-card .meta-list p::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--sms-accent);
}

.formats-list .bullet-list li {
    margin-bottom: 20px;
    font-size: 17px;
}

.note-box {
    border-left: 4px solid var(--sms-accent);
}

.small {
    font-size: 14px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.small.text-muted {
    color: var(--sms-text-secondary);
    opacity: 0.7;
}

@media (max-width: 1023px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

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

    .sms-colors-page .hero-title {
        font-size: 36px;
    }
}

/* ------------------------------------------------------------
   COLORS PAGE POLISH
   ------------------------------------------------------------ */

.sms-colors-page .eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sms-accent);
}

.sms-colors-page h1.hero-title {
    font-size: 64px;
    margin-bottom: 24px;
}

.hero-large-visual {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.muted {
    opacity: 0.7;
}

.mt-80 {
    margin-top: 80px;
}

.mt-50 {
    margin-top: 50px;
}

.spacer-100 {
    height: 100px;
}

/* Highlights */
.highlight-statements {
    border-top: 1px solid var(--sms-border);
    border-bottom: 1px solid var(--sms-border);
    padding: 40px 0;
    max-width: 500px;
    margin: 40px auto;
}

.statement-item {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--sms-accent);
}

.statement-item:last-child {
    margin-bottom: 0;
}

/* Libraries Grid */
.strong-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.short-intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
}

.tight-bullets {
    list-style: none;
    padding: 0;
}

.tight-bullets li {
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

.tight-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--sms-accent);
}

/* Formats Grid */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.icon-placeholder {
    width: 48px;
    height: 48px;
    background: var(--sms-border);
    margin: 0 auto;
    border-radius: 4px;
}

.muted-box {
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    background: #fdfdfd;
}

.italic {
    font-style: italic;
}

/* UsageSection */
.workflow-frame {
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

@media (max-width: 1023px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sms-colors-page h1.hero-title {
        font-size: 40px;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .highlight-statements {
        padding: 30px 20px;
    }
}

/* ------------------------------------------------------------
   SMS STANDARD LIBRARY PAGE
   ------------------------------------------------------------ */

.sms-standard-library-page h1.hero-title {
    font-size: 64px;
    margin-bottom: 24px;
}

.sms-standard-library-page .intro-block {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sms-text-secondary);
}

@media (max-width: 768px) {
    .sms-standard-library-page h1.hero-title {
        font-size: 40px;
    }
}

/* ------------------------------------------------------------
   SMS ECO LIBRARY PAGE
   ------------------------------------------------------------ */

.sms-eco-library-page h1.hero-title {
    font-size: 64px;
    margin-bottom: 24px;
}

.sms-eco-library-page .intro-block {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sms-text-secondary);
}

@media (max-width: 768px) {
    .sms-eco-library-page h1.hero-title {
        font-size: 40px;
    }
}

/* ------------------------------------------------------------
   SMS MAX LIBRARY PAGE
   ------------------------------------------------------------ */

.sms-max-library-page h1.hero-title {
    font-size: 64px;
    margin-bottom: 24px;
}

.sms-max-library-page .intro-block {
    font-size: 18px;
    line-height: 1.8;
    color: var(--sms-text-secondary);
}

@media (max-width: 768px) {
    .sms-max-library-page h1.hero-title {
        font-size: 40px;
    }
}

/* ------------------------------------------------------------
   SMS COLOR SEARCH PAGE - REFINE POLISH
   ------------------------------------------------------------ */

/* Global Section Spacing & Column Alignment */
.sms-color-search-page .section-pad {
    padding: 50px 0;
    /* intentional documentation-style rhythm */
}

.sms-color-search-page .section-title {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    /* Align to same left edge as paragraphs */
}

.sms-color-search-page .tech-block {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero Section Refinement */
.sms-color-search-page .search-hero {
    padding-top: 60px;
    padding-bottom: 30px;
}

.sms-color-search-page .search-hero h1.hero-title {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 24px;
    text-align: center;
    /* Hero title stays centered for balance */
}

/* Normalized Bullet Lists */
.sms-color-search-page .bullet-list {
    margin-top: 25px;
    padding-left: 0;
}

.sms-color-search-page .bullet-list li {
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
    margin-bottom: 12px;
    list-style: none;
    color: var(--sms-text-primary);
}

.sms-color-search-page .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
    color: var(--sms-accent);
}

/* Capability Section - Fixed Alignment & Height */
.sms-color-search-page .search-capability .section-title {
    text-align: center;
    /* Centered as per instruction */
}

.sms-color-search-page .search-capability .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    /* Enforce equal card height */
    max-width: 900px;
    margin: 0 auto;
}

.sms-color-search-page .search-capability .capability-card {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    border-radius: var(--sms-border-radius);
    padding: 50px;
    display: flex;
    flex-direction: column;
}

.sms-color-search-page .search-capability .card-limitations {
    background: #fbfbfb;
    border-style: solid;
    /* Subtle, consistent border */
}

.sms-color-search-page .search-capability .card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    min-height: 1.5em;
    /* Alignment baseline support */
}

.sms-color-search-page .search-capability .bullet-list {
    margin-top: 0;
    /* Align first bullet precisely in both cards */
}

.sms-color-search-page .search-capability .bullet-list li::before {
    content: "•";
    /* Unified bullet style across both cards */
    color: var(--sms-accent);
}

.sms-color-search-page .search-capability .note-box {
    margin-top: 60px;
    opacity: 0.8;
}

/* Global Section Transitions */
.sms-color-search-page section:nth-of-type(even) {
    background-color: var(--sms-bg-secondary);
}

/* Image Placeholder & Diagram Rhythm */
.sms-color-search-page .image-placeholder {
    margin-top: 30px;
    margin-bottom: 0;
    opacity: 0.8;
}

.sms-color-search-page .diagram-placeholder {
    height: 140px;
    /* Precise height */
    width: 100%;
    max-width: 600px;
    /* Restored width constraint */
    margin: 30px auto 0;
    /* Centered with top margin */
    background: #fdfdfd;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sms-color-search-page .diagram-caption {
    display: block;
    max-width: 600px;
    margin: 12px auto 0;
    text-align: center;
    font-size: 13px;
    color: var(--sms-text-secondary);
    opacity: 0.7;
    font-weight: 500;
}

/* CTA Area Tightening */
.sms-color-search-page .search-cta {
    padding: 40px 0 80px;
    /* Reduced vertical gaps */
}

.sms-color-search-page .search-cta .cta-actions-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sms-color-search-page .search-cta .btn-outline {
    border: 1px solid var(--sms-border);
    background: transparent;
}

.sms-color-search-page .search-cta .text-link {
    display: block;
    width: 100%;
    margin-top: 20px;
    opacity: 0.5;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 768px) {
    .sms-color-search-page .section-pad {
        padding: 40px 0;
    }

    .sms-color-search-page .search-cta .cta-actions-group {
        flex-direction: column;
        gap: 15px;
    }

    .sms-color-search-page .search-capability .capability-grid {
        grid-template-columns: 1fr;
    }

    .sms-color-search-page .search-capability .capability-card {
        padding: 30px;
    }

    .sms-color-search-page .two-column-list {
        grid-template-columns: 1fr;
    }

    .sms-color-search-page .search-hero h1.hero-title {
        font-size: 36px;
    }
}

/* ------------------------------------------------------------
   COLORS PAGE - REFINE POLISH
   ------------------------------------------------------------ */

/* Global Section Spacing */
.sms-colors-page .section-pad {
    padding: 120px 0;
}

/* Libraries Section Refinement */
.library-card.card {
    padding: 60px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    transition: box-shadow 0.3s ease;
}

.library-card.card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.library-card .strong-title {
    margin-bottom: 20px;
}

.library-card .short-intro {
    font-size: 16px;
    margin-bottom: 30px;
}

.tight-bullets {
    margin-bottom: 0;
}

.tight-bullets li {
    line-height: 1.5;
    margin-bottom: 12px;
}

.card-footer {
    border-top: none;
    padding-top: 50px;
}

/* Formats Grid Refinement */
.formats-grid {
    row-gap: 60px;
}

.format-item .icon-placeholder {
    margin-bottom: 30px;
}

.format-item h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--sms-accent);
}

.format-item .small {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sms-text-secondary);
}

/* Note Box Clarification */
.muted-box {
    margin-top: 80px;
    border: 1px solid var(--sms-border);
    background-color: #fcfcfc;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Final CTA Hierarchy */
.colors-cta .cta-actions-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.colors-cta .btn-outline {
    background: transparent;
    border: 1px solid var(--sms-border);
    color: var(--sms-text-secondary);
}

.colors-cta .btn-outline:hover {
    border-color: var(--sms-accent);
    color: var(--sms-accent);
}

@media (max-width: 768px) {
    .colors-cta .cta-actions-group {
        flex-direction: column;
        gap: 15px;
    }

    .library-card.card {
        padding: 40px 30px;
    }

    .muted-box {
        margin-top: 40px;
    }
}

/* ------------------------------------------------------------
   SMS SUSTAINABILITY PAGE - POLISHED
   ------------------------------------------------------------ */

/* Global Layout & Rhythm */
.sms-sustainability-page .section-pad {
    padding: 100px 0;
    /* Generous vertical breathing room */
}

/* Ensure consistent reading content width */
.sms-sustainability-page .section-title,
.sms-sustainability-page .tech-block,
.sms-sustainability-page .intro-block {
    max-width: 680px;
    /* Comfortable measure */
    margin-left: auto;
    margin-right: auto;
}

.sms-sustainability-page .section-title {
    text-align: left;
    margin-bottom: 40px;
}

/* Hero Section */
.sms-sustainability-page .sustainability-hero {
    padding-top: 100px;
    padding-bottom: 60px;
    background-color: var(--sms-bg-secondary);
}

.sms-sustainability-page .hero-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-align: center;
}

.sms-sustainability-page .hero-subtitle {
    text-align: center;
    font-size: 20px;
    color: var(--sms-text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.sms-sustainability-page .intro-block {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    text-align: center;
    /* Center intro block text alignment often looks better for isolated intros, checking context */
}

/* Revert intro block text alignment to left if it feels too marketing-y, but usually intro paragraphs in center hero are centered or left. 
   The prompt asks to 'Center-align the hero content visually'. Let's keep the block centered, but text alignment left? 
   "Center-align the hero content visually (not text alignment)" -> Block is centered, text is left. 
*/
.sms-sustainability-page .intro-block p {
    text-align: left;
}


/* Section Transitions */
.sms-sustainability-page section:nth-of-type(even) {
    background-color: var(--sms-bg-secondary);
}

/* Highlighted Section (ECO Library) */
.sms-sustainability-page .sustainability-eco {
    background-color: #f4f6f5;
    /* Very subtle tint */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Bullet Lists Polish */
.sms-sustainability-page .bullet-list {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 0;
}

.sms-sustainability-page .bullet-list li {
    position: relative;
    padding-left: 24px;
    line-height: 1.7;
    /* Relaxed reading */
    margin-bottom: 14px;
    list-style: none;
    color: var(--sms-text-primary);
}

.sms-sustainability-page .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    /* Slightly larger bullet */
    line-height: 1.5;
    /* Align with text vertical center approx */
    color: var(--sms-accent);
}

/* Diagram Placeholder */
.sms-sustainability-page .diagram-placeholder {
    height: 240px;
    /* Increased presence */
    width: 100%;
    max-width: 680px;
    margin: 40px auto 0;
    background: #ffffff;
    border: 1px dashed #d0d0d0;
    /* Subtler border */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--sms-text-secondary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    /* Very subtle depth */
}

.sms-sustainability-page .diagram-caption {
    display: block;
    max-width: 680px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 13px;
    color: var(--sms-text-secondary);
    opacity: 0.6;
    font-style: italic;
}

/* Clarification Section (Cards) */
.sms-sustainability-page .sustainability-clarification .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.sms-sustainability-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* Increased gap */
    align-items: stretch;
    max-width: 900px;
    /* Wider container for cards */
    margin: 0 auto;
}

.sms-sustainability-page .capability-card {
    padding: 60px;
    border-radius: var(--sms-border-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Reuse existing card logic but Ensure strict parity */
.sms-sustainability-page .card-explains {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
}

.sms-sustainability-page .card-limitations {
    background: #fafafa;
    border: 1px dashed #cccccc;
    /* Soft dashed border */
}

.sms-sustainability-page .card-title {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 20px;
    color: var(--sms-text-primary);
}

/* Final CTA Section */
.sms-sustainability-page .sustainability-cta {
    padding-top: 80px;
    padding-bottom: 120px;
    background: var(--sms-bg-secondary);
    text-align: center;
}

.sms-sustainability-page .sustainability-cta .section-title {
    text-align: center;
    margin-bottom: 20px;
}

.sms-sustainability-page .cta-actions-group {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sms-sustainability-page .cta-actions-group .text-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding: 5px 10px;
    transition: opacity 0.2s;
}

.sms-sustainability-page .cta-actions-group .text-link:hover {
    opacity: 0.7;
}

/* Footer Note Spacing */
.sms-sustainability-page+footer {
    margin-top: 0;
    /* Ensure no double spacing if logic exists */
}

@media (max-width: 768px) {
    .sms-sustainability-page .hero-title {
        font-size: 36px;
    }

    .sms-sustainability-page .capability-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sms-sustainability-page .capability-card {
        padding: 30px;
    }

    .sms-sustainability-page .section-pad {
        padding: 60px 0;
    }
}

/* ------------------------------------------------------------
   SMS RESOURCES PAGE
   ------------------------------------------------------------ */

/* Adhering to the Sustainability/Color Search design language */

.sms-resources-page .section-pad {
    padding: 100px 0;
}

.sms-resources-page .section-title,
.sms-resources-page .tech-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sms-resources-page .section-title {
    text-align: left;
    margin-bottom: 40px;
}

.sms-resources-page .resources-hero {
    padding-top: 100px;
    padding-bottom: 60px;
}

.sms-resources-page .hero-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-align: center;
}

.sms-resources-page .intro-block {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    text-align: center;
}

/* Section Transitions */
.sms-resources-page section:nth-of-type(even) {
    background-color: var(--sms-bg-secondary);
}

/* Bullet Lists */
.sms-resources-page .bullet-list {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 0;
}

.sms-resources-page .bullet-list li {
    position: relative;
    padding-left: 24px;
    line-height: 1.7;
    margin-bottom: 14px;
    list-style: none;
    color: var(--sms-text-primary);
}

.sms-resources-page .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    line-height: 1.5;
    color: var(--sms-accent);
}

/* Capability/Clarification Cards (Reused Logic) */
.sms-resources-page .resources-clarification .section-title {
    text-align: center;
}

.sms-resources-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
}

.sms-resources-page .capability-card {
    padding: 60px;
    border-radius: var(--sms-border-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sms-resources-page .card-explains {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
}

.sms-resources-page .card-limitations {
    background: #fafafa;
    border: 1px dashed #cccccc;
}

.sms-resources-page .card-title {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 20px;
    color: var(--sms-text-primary);
}

/* CTA */
.sms-resources-page .resources-cta {
    text-align: center;
    padding-bottom: 120px;
}

.sms-resources-page .resources-cta .section-title {
    text-align: center;
}

/* RESOURCES CTA — match Testimonials layout */
.sms-resources-page .cta-actions-group {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    /* ← FIX */
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    /* safety */
}

/* Mobile fallback */
@media (max-width: 768px) {
    .sms-resources-page .cta-actions-group {
        flex-direction: column;
        gap: 20px;
    }
}

/* Keep your link styling (this was never the problem) */
.sms-resources-page .cta-actions-group .text-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
}

.sms-resources-page .cta-actions-group .text-link:hover {
    opacity: 0.7;
}





@media (max-width: 768px) {
    .sms-resources-page .hero-title {
        font-size: 36px;
    }

    .sms-resources-page .capability-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sms-resources-page .capability-card {
        padding: 30px;
    }
}

/* ------------------------------------------------------------
   SMS RESOURCES NAVIGATION OFFSET
   ------------------------------------------------------------ */

.sms-resources-page section[id] {
    scroll-margin-top: 120px;
}

/* ------------------------------------------------------------
   SMS ABOUT PAGE
   ------------------------------------------------------------ */

/* Reusing structural logic from Resources/Sustainability pages */

.sms-about-page .section-pad {
    padding: 100px 0;
}

.sms-about-page .section-title,
.sms-about-page .tech-block,
.sms-about-page .intro-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sms-about-page .section-title {
    text-align: left;
    margin-bottom: 40px;
}

.sms-about-page .about-hero {
    padding-top: 100px;
    padding-bottom: 60px;
    background-color: var(--sms-bg-secondary);
}

.sms-about-page .hero-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-align: center;
}

.sms-about-page .intro-block {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    text-align: center;
}

.sms-about-page .intro-block p {
    text-align: left;
    /* Keep left alignment for readability */
}


/* Section Transitions */
.sms-about-page section:nth-of-type(even) {
    background-color: var(--sms-bg-secondary);
}

/* Bullet Lists */
.sms-about-page .bullet-list {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 0;
}

.sms-about-page .bullet-list li {
    position: relative;
    padding-left: 24px;
    line-height: 1.7;
    margin-bottom: 14px;
    list-style: none;
    color: var(--sms-text-primary);
}

.sms-about-page .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    line-height: 1.5;
    color: var(--sms-accent);
}

/* Diagram Placeholder */
.sms-about-page .diagram-placeholder {
    width: 100%;
    margin: 40px auto 0;
    background: #ffffff;
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--sms-text-secondary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* Clarification Section (Cards) */
.sms-about-page .about-clarification .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.sms-about-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
}

.sms-about-page .capability-card {
    padding: 60px;
    border-radius: var(--sms-border-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sms-about-page .card-explains {
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
}

.sms-about-page .card-limitations {
    background: #fafafa;
    border: 1px dashed #cccccc;
}

.sms-about-page .card-title {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 20px;
    color: var(--sms-text-primary);
}

/* CTA Section */
.sms-about-page .about-cta .section-title {
    text-align: center;
    margin-bottom: 20px;
}

/* ABOUT PAGE – CTA actions group */
/* Works if sms-about-page exists OR via WP page-id fallback */

/* About page CTA — force horizontal layout */
.sms-about-page .about-cta .cta-actions-group {
    display: flex;
    flex-direction: row !important;
    /* override column */
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 50px;
}

/* Links styling stays same */
.sms-about-page .about-cta .cta-actions-group .text-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding: 5px 10px;
    transition: opacity 0.2s;
}

.sms-about-page .about-cta .cta-actions-group .text-link:hover {
    opacity: 0.7;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .sms-about-page .about-cta .cta-actions-group {
        flex-direction: column;
        gap: 20px;
    }
}



@media (max-width: 768px) {
    .sms-about-page .hero-title {
        font-size: 36px;
    }

    .sms-about-page .capability-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sms-about-page .capability-card {
        padding: 30px;
    }

    .sms-about-page .section-pad {
        padding: 60px 0;
    }
}

/* ------------------------------------------------------------
   SMS ABOUT PAGE - MANIFESTO POLISH
   ------------------------------------------------------------ */

/* Consistent Foundation Reused from Resources + Sustainability */

.sms-about-page .section-pad {
    padding: 120px 0;
    /* Expanded vertical rhythm for manifesto feel */
}

/* Constrained reading width for all text blocks */
.sms-about-page .section-title,
.sms-about-page .tech-block,
.sms-about-page .intro-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Editorial Typography Override for About Page only */
.sms-about-page .section-title {
    text-align: center;
    /* Center aligned for gravitas */
    margin-bottom: 50px;
    font-weight: 500;
    /* Lighter authoritative feel */
    letter-spacing: -0.01em;
    font-size: 32px;
    /* Consistent size definition */
}

/* 1. HERO SECTION */
.sms-about-page .about-hero {
    padding-top: 140px;
    /* Calm headroom */
    padding-bottom: 100px;
    background-color: var(--sms-white);
    /* Clean white start */
}

.sms-about-page .hero-title {
    font-size: 64px;
    /* Slightly larger for impact */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 30px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.sms-about-page .intro-block {
    font-size: 22px;
    /* Larger philosophical text */
    line-height: 1.6;
    color: var(--sms-text-secondary);
    text-align: center;
}

.sms-about-page .intro-block p {
    text-align: center;
    /* Center align manifesto intro */
    margin-bottom: 15px;
}

/* 2. Abstract Visual Placeholder */
.sms-about-page .diagram-placeholder {
    width: 100%;
    margin: 80px auto 0;
    height: 400px;
    /* Larger presence */
    background: #fafafa;
    border: 1px solid #eeeeee;
    /* Minimal border */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sms-text-secondary);
    font-style: italic;
    font-weight: 400;
}

/* 3. SECTION STYLE */
.sms-about-page section {
    background-color: var(--sms-white);
    /* Default white canvas */
}

.sms-about-page section:nth-of-type(even) {
    background-color: #fcfcfc;
    /* Extremely subtle shift */
}

/* 4. STEWARDSHIP (Spot Nordic) Highlight */
.sms-about-page .about-spot-nordic {
    background-color: #f4f6f5;
    /* Slight tint anchored */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* 5. CLARIFICATION CARDS */
.sms-about-page .about-clarification .section-title {
    text-align: center;
}

.sms-about-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.sms-about-page .capability-card {
    padding: 60px;
    border-radius: 6px;
    height: 100%;
    transition: transform 0.3s ease;
    /* Subtle interaction */
}

.sms-about-page .capability-card:hover {
    transform: translateY(-2px);
    /* Gentle lift */
}

.sms-about-page .card-explains {
    background: var(--sms-white);
    border: 1px solid #e0e0e0;
}

.sms-about-page .card-limitations {
    background: #fafafa;
    border: 1px dashed #cccccc;
}

/* 6. CLOSING CTA */
.sms-about-page .about-cta {
    padding-top: 120px;
    padding-bottom: 160px;
    /* Generous footer space */
    background: var(--sms-white);
}

.sms-about-page .about-cta .section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
}

.sms-about-page .cta-actions-group {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.sms-about-page .cta-actions-group .text-link {
    font-size: 16px;
    color: var(--sms-accent);
    opacity: 0.9;
    transition: opacity 0.2s;
    font-weight: 500;
}

.sms-about-page .cta-actions-group .text-link:hover {
    opacity: 0.6;
}

/* Mobile */
@media (max-width: 768px) {
    .sms-about-page .hero-title {
        font-size: 40px;
    }

    .sms-about-page .section-pad {
        padding: 80px 0;
    }

    .sms-about-page .capability-grid {
        grid-template-columns: 1fr;
    }

    .sms-about-page .diagram-placeholder {
        height: 240px;
        margin-top: 40px;
    }
}

/* ------------------------------------------------------------
   SMS TESTIMONIALS PAGE - EDITORIAL POLISH
   ------------------------------------------------------------ */

/* Foundation */
.sms-testimonials-page .section-pad {
    padding: 120px 0;
    /* Significant breathing room */
}

/* Central Column Constraint */
.sms-testimonials-page .section-title,
.sms-testimonials-page .tech-block,
.sms-testimonials-page .intro-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sms-testimonials-page .section-title {
    text-align: center;
    /* Center aligned per request */
    margin-bottom: 50px;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.01em;
}

/* Hero Section */
.sms-testimonials-page .testimonials-hero {
    padding-top: 140px;
    padding-bottom: 80px;
    background-color: var(--sms-white);
    /* Clean canvas */
}

.sms-testimonials-page .hero-title {
    font-size: 52px;
    /* Strong but consistent */
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 30px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

.sms-testimonials-page .intro-block {
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    max-width: 720px;
}

.sms-testimonials-page .divider-line {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    width: 60px;
    /* Small, elegant cue */
    margin: 60px auto 0;
}


/* Testimonial Quote Cards */
.sms-testimonials-page .testimonials-list {
    background-color: var(--sms-white);
}

.sms-testimonials-page .testimonial-block {
    margin-bottom: 120px;
    /* Separated significantly */
    position: relative;
    /* Removed 'tech-block' inherit constraints implicitly by overriding if needed */
}

.sms-testimonials-page .date-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-weight: 600;
    color: var(--sms-text-secondary);
    opacity: 0.8;
    margin-bottom: 24px;
    display: block;
}

.sms-testimonials-page .testimonial-quote {
    font-size: 22px;
    /* Larger editorial size */
    line-height: 1.7;
    /* Breathable reading */
    font-family: var(--sms-font-serif, "Times New Roman", serif);
    font-style: normal;
    /* Cleaner, modern editorial look */
    color: var(--sms-text-primary);
    border-left: none;
    /* Removed heavy border side */
    padding-left: 0;
    margin: 0 0 40px 0;
    position: relative;
}

/* Subtle typographic hanging quote mark */
.sms-testimonials-page .testimonial-quote::before {
    content: "“";
    position: absolute;
    left: -40px;
    top: -10px;
    font-size: 60px;
    line-height: 1;
    color: var(--sms-accent);
    opacity: 0.2;
    font-family: serif;
}

.sms-testimonials-page .testimonial-quote p {
    margin-bottom: 24px;
}

.sms-testimonials-page .testimonial-quote p:last-child {
    margin-bottom: 0;
}

.sms-testimonials-page .testimonial-attribution {
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Very subtle separator */
}

.sms-testimonials-page .testimonial-attribution strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sms-text-primary);
    display: block;
    margin-bottom: 4px;
}

.sms-testimonials-page .testimonial-attribution .text-muted {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sms-text-secondary);
}

/* Why Matter Section */
.sms-testimonials-page .testimonials-why {
    background-color: #fafafa;
    /* Very light gray distinction */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.sms-testimonials-page .testimonials-why .section-title {
    text-align: left;
    /* Keep left for this reading block as requested? Re-reading: "Use a calm subheading style consistent..." */
    /* Let's align center if everything else is center, but standard reading blocks usually left aligned. 
       Let's keep text left, but maybe centering the title looks better with the rest of this page?
       I'll keep it left aligned for the text block itself.
    */
    text-align: left;
}


/* Clarification Cards */
.sms-testimonials-page .testimonials-clarification .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.sms-testimonials-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.sms-testimonials-page .capability-card {
    padding: 60px;
    border-radius: 6px;
    /* Symmetrical */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sms-testimonials-page .card-explains {
    background: var(--sms-white);
    border: 1px solid #e0e0e0;
}

.sms-testimonials-page .card-limitations {
    background: #fbfbfb;
    border: 1px dashed #cfcfcf;
}

.sms-testimonials-page .card-title {
    font-size: 20px;
    margin-bottom: 30px;
    text-align: center;
    /* Center headers */
}

/* CTA */
.sms-testimonials-page .testimonials-cta {
    background-color: var(--sms-white);
    padding-bottom: 160px;
    /* Ample finish */
}

.sms-testimonials-page .testimonials-cta .section-title {
    text-align: center;
    font-size: 36px;
    /* Larger emphasis */
    margin-bottom: 40px;
    max-width: 800px;
}

.sms-testimonials-page .cta-actions-group {
    display: flex;
    flex-direction: row;
    /* Horizontal alignment requested */
    justify-content: center;
    gap: 40px;
    align-items: center;
}

.sms-testimonials-page .cta-actions-group .text-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.sms-testimonials-page .cta-actions-group .text-link:hover {
    opacity: 0.8;
    border-bottom-color: var(--sms-accent);
}

@media (max-width: 768px) {
    .sms-testimonials-page .hero-title {
        font-size: 38px;
    }

    .sms-testimonials-page .capability-grid {
        grid-template-columns: 1fr;
    }

    .sms-testimonials-page .section-pad {
        padding: 80px 0;
        /* Mobile spacing */
    }

    .sms-testimonials-page .cta-actions-group {
        flex-direction: column;
        gap: 20px;
    }

    /* Hide hanging quote on mobile */
    .sms-testimonials-page .testimonial-quote::before {
        display: none;
    }
}

/* ------------------------------------------------------------
   SMS TOOLKIT PAGE - POLISHED LAYOUT
   ------------------------------------------------------------ */

/* Global Adjustments */
.sms-toolkit-page .section-pad {
    padding: 120px 0;
    /* Clear breathing space */
}

.sms-toolkit-page .section-title,
.sms-toolkit-page .tech-block,
.sms-toolkit-page .intro-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure consistent vertical grid alignment */
.sms-toolkit-page .section-title {
    text-align: left;
    margin-bottom: 50px;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.01em;
}

/* Hero Section */
.sms-toolkit-page .toolkit-hero {
    padding-top: 140px;
    padding-bottom: 100px;
    background-color: var(--sms-white);
    /* Clean canvas */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sms-toolkit-page .hero-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    text-align: center;
    max-width: 800px;
    /* Improve readability */
    margin-left: auto;
    margin-right: auto;
}

.sms-toolkit-page .hero-subtitle {
    margin-bottom: 40px;
    line-height: 1.5;
    color: var(--sms-text-secondary);
}

.sms-toolkit-page .intro-block {
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    max-width: 720px;
}

.sms-toolkit-page .divider-line {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    width: 60px;
    margin: 60px auto 0;
}


/* "What the Toolkit provides" Section */
.sms-toolkit-page .toolkit-overview {
    background-color: #fafafa;
    /* Subtle distinct background */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.sms-toolkit-page .toolkit-overview .bullet-list {
    margin-top: 30px;
}

.sms-toolkit-page .toolkit-overview .bullet-list li {
    margin-bottom: 15px;
    /* Increase spacing */
    padding-left: 28px;
}


/* "This toolkit does not include" (Limitations) */
.sms-toolkit-page .toolkit-limitations .section-title {
    text-align: center;
}

.sms-toolkit-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* Generous gap */
    max-width: 960px;
    margin: 0 auto;
    align-items: flex-start;
    /* Better alignment for unequal heights */
}

.sms-toolkit-page .capability-card {
    border-radius: 6px;
    height: auto;
}

.sms-toolkit-page .card-limitations {
    background: var(--sms-white);
    border: 1px solid #e0e0e0;
    padding: 40px;
    /* Internal cushion */
}

.sms-toolkit-page .card-context {
    padding-left: 20px;
    padding-top: 10px;
    /* Optical alignment with card header */
}

/* Components Section */
.sms-toolkit-page .toolkit-components {
    background-color: var(--sms-white);
}

.sms-toolkit-page .toolkit-components .section-title {
    text-align: center;
}

.sms-toolkit-page .components-list {
    max-width: 720px;
}

.sms-toolkit-page .component-item {
    padding: 0;
}

.sms-toolkit-page .component-item h3 {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--sms-text-primary);
}

.sms-toolkit-page .component-item p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
}

.sms-toolkit-page .components-list .divider-line {
    width: 100%;
    margin: 60px 0;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Audience Section */
.sms-toolkit-page .toolkit-audience {
    background-color: var(--sms-bg-secondary);
}

.sms-toolkit-page .toolkit-audience .bullet-list li {
    margin-bottom: 15px;
}

/* Getting Started Section */
.sms-toolkit-page .toolkit-getting-started {
    background-color: var(--sms-white);
}

.sms-toolkit-page .ordered-list li span {
    font-family: var(--sms-font-mono, monospace);
    font-size: 14px;
    top: 4px;
}

.sms-toolkit-page .action-links {
    margin-top: 60px;
    /* More breathing room */
    display: flex;
    gap: 40px;
    /* Matched spacing to bottom CTA */
    align-items: center;
}

/* Apply consistent CTA link style to Getting Started links as well */
.sms-toolkit-page .action-links .text-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.sms-toolkit-page .action-links .text-link:hover {
    opacity: 0.8;
    border-bottom-color: var(--sms-accent);
}

/* CTA Section */
.sms-toolkit-page .toolkit-cta {
    background-color: var(--sms-white);
    padding-bottom: 160px;
}

.sms-toolkit-page .toolkit-cta .section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
}

.sms-toolkit-page .cta-actions-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
}

.sms-toolkit-page .cta-actions-group .text-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.sms-toolkit-page .cta-actions-group .text-link:hover {
    opacity: 0.8;
    border-bottom-color: var(--sms-accent);
}

@media (max-width: 768px) {
    .sms-toolkit-page .hero-title {
        font-size: 38px;
    }

    .sms-toolkit-page .capability-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sms-toolkit-page .section-pad {
        padding: 80px 0;
    }

    .sms-toolkit-page .cta-actions-group,
    .sms-toolkit-page .action-links {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        /* Align left for reading flow / or center? Keeping consistent */
    }

    /* Aligning centered clusters to center on mobile is usually safer */
    .sms-toolkit-page .cta-actions-group {
        align-items: center;
    }

    /* Getting started is left aligned structure, so left align links matches */
    .sms-toolkit-page .action-links {
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------
   SMS DOWNLOADS PAGE
   ------------------------------------------------------------ */

/* Reusing structural logic from Toolkit/About pages */

.sms-downloads-page .section-pad {
    padding: 120px 0;
}

.sms-downloads-page .section-title,
.sms-downloads-page .tech-block,
.sms-downloads-page .intro-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sms-downloads-page .section-title {
    text-align: left;
    margin-bottom: 50px;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.01em;
}

/* Hero */
.sms-downloads-page .downloads-hero {
    padding-top: 140px;
    padding-bottom: 100px;
    background-color: var(--sms-bg-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sms-downloads-page .hero-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sms-downloads-page .intro-block {
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
    max-width: 720px;
}

.sms-downloads-page .divider-line {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    width: 60px;
    margin: 60px auto 0;
}

/* Content List (What Can Be Downloaded) */
.sms-downloads-page .downloads-content {
    background-color: var(--sms-white);
}

.sms-downloads-page .downloads-content .section-title {
    text-align: center;
}

.sms-downloads-page .components-list {
    max-width: 720px;
}

.sms-downloads-page .component-item h3 {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--sms-text-primary);
}

.sms-downloads-page .component-item p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sms-text-secondary);
}

.sms-downloads-page .note-box {
    margin-top: 15px;
    display: inline-block;
}

/* Limitations Section */
.sms-downloads-page .downloads-limitations .section-title {
    text-align: center;
}

/* Reuse existing capability-grid styles from Toolkit if available, 
   but explicitly defined here for safety/scoping */
.sms-downloads-page .capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 960px;
    margin: 0 auto;
    align-items: center;
}

.sms-downloads-page .capability-card {
    border-radius: 6px;
    height: auto;
}

.sms-downloads-page .card-limitations {
    background: var(--sms-white);
    border: 1px solid #e0e0e0;
    padding: 40px;
}

.sms-downloads-page .card-context {
    padding-left: 20px;
}

/* Usage Section */
.sms-downloads-page .downloads-usage {
    background-color: var(--sms-white);
}

.sms-downloads-page .bullet-list li {
    position: relative;
    padding-left: 24px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.sms-downloads-page .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sms-accent);
}

/* Links Section */
.sms-downloads-page .downloads-links {
    background-color: var(--sms-bg-secondary);
    padding-bottom: 160px;
}

.sms-downloads-page .downloads-links .section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
}

.sms-downloads-page .cta-actions-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
}

.sms-downloads-page .cta-actions-group .text-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--sms-accent);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.sms-downloads-page .cta-actions-group .text-link:hover {
    opacity: 0.8;
    border-bottom-color: var(--sms-accent);
}

@media (max-width: 768px) {
    .sms-downloads-page .hero-title {
        font-size: 38px;
    }

    .sms-downloads-page .capability-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sms-downloads-page .section-pad {
        padding: 80px 0;
    }

    .sms-downloads-page .cta-actions-group {
        flex-direction: column;
        gap: 20px;
    }
}


.cta-actions-group.cta-actions-inline {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.cta-actions-group.cta-actions-inline .text-link {
    display: inline-flex;
    white-space: nowrap;
}



/* ======================================================
   SINGLE RESOURCE VIEW (FULLY SCOPED)
   Applies ONLY to: single Resource CPT
====================================================== */

.single-resource .sms-resource {

    /* ---- Local variables (NO GLOBAL LEAK) ---- */
    --bg-soft: #f7f7f6;
    --text-dark: #1c1c1c;
    --text-muted: #6b6b6b;
    --accent: #000000;
    --radius: 18px;
}


/* ======================================================
   HERO
====================================================== */

.single-resource .sms-resource .resource-hero {
    padding: clamp(56px, 7vw, 84px) 0 64px;
    background:
        radial-gradient(1200px 600px at 50% -10%,
            #f8f8f7 0%,
            #ffffff 60%);
}

.single-resource .sms-resource .resource-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

.single-resource .sms-resource .resource-title {
    font-size: clamp(40px, 5.5vw, 60px);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0;
    color: var(--text-dark);
    max-width: 920px;
}

.single-resource .sms-resource .resource-subtitle {
    font-size: 19px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 14px;
    max-width: 760px;
}


/* ======================================================
   HERO IMAGE
====================================================== */

.single-resource .sms-resource .resource-media img {
    margin-top: 32px;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.14);
}


/* ======================================================
   BODY WRAPPER
====================================================== */

.single-resource .sms-resource .resource-body {
    padding: 72px 0 120px;
    background: #ffffff;
}

.single-resource .sms-resource .resource-body>.container>*+* {
    margin-top: 56px;
}


/* ======================================================
   SUMMARY
====================================================== */

.single-resource .sms-resource .resource-summary {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 780px;
}


/* ======================================================
   MAIN CONTENT
====================================================== */

.single-resource .sms-resource .resource-content {
    max-width: 780px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -0.01em;
    color: var(--text-dark);
}

.single-resource .sms-resource .resource-content p {
    margin-bottom: 20px;
}

.single-resource .sms-resource .resource-content h2 {
    font-size: 30px;
    font-weight: 700;
    margin: 64px 0 16px;
}


/* ======================================================
   VIDEO (WEBINAR)
====================================================== */

.single-resource .sms-resource .resource-video {
    margin: 72px 0 96px;
    position: relative;
    padding-top: 56.25%;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.single-resource .sms-resource .resource-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ======================================================
   CTA (DOWNLOAD / EXTERNAL / PRESS)
====================================================== */

.single-resource .sms-resource .resource-cta {
    margin-top: 48px;
}

.single-resource .sms-resource .resource-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    border-radius: 999px;
    background:
        linear-gradient(135deg,
            #111111 0%,
            #2a2a2a 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform .25s cubic-bezier(.2, .8, .2, 1),
        box-shadow .25s ease,
        background .25s ease;
}

.single-resource .sms-resource .resource-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.single-resource .sms-resource .resource-cta .btn:active {
    transform: translateY(0);
}


/* ======================================================
   MOBILE TUNING
====================================================== */

@media (max-width: 768px) {

    .single-resource .sms-resource .resource-hero {
        padding: 48px 0 56px;
    }

    .single-resource .sms-resource .resource-title {
        font-size: 36px;
    }

    .single-resource .sms-resource .resource-body {
        padding: 56px 0 96px;
    }
}