/*
Theme Name: COT
Theme URI: https://codeoftalent.com
Author: Code of Talent
Author URI: https://codeoftalent.com
Description: Custom WordPress theme for Code of Talent platform.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: cot
*/

/* =============================================================================
   1. CSS Custom Properties
   ============================================================================= */
:root {
    /* Ocean palette */
    --color-ocean-50: #EBF8FF;
    --color-ocean-100: #D1EEFC;
    --color-ocean-200: #A7D8F0;
    --color-ocean-300: #7CC4E8;
    --color-ocean-400: #2A9ED4;
    --color-ocean-500: #1E88C7;
    --color-ocean-600: #1570A6;
    --color-ocean-700: #0F5A85;
    --color-ocean-800: #0A4464;
    --color-ocean-900: #062F44;

    /* Sky palette */
    --color-sky-50: #F0F9FF;
    --color-sky-100: #E0F2FE;
    --color-sky-200: #BAE6FD;
    --color-sky-400: #38BDF8;
    --color-sky-500: #0EA5E9;
    --color-sky-600: #0284C7;
    --color-sky-700: #0369A1;

    /* Mint/Emerald palette */
    --color-mint-50: #ECFDF5;
    --color-mint-100: #D1FAE5;
    --color-mint-400: #34D399;
    --color-mint-500: #10B981;
    --color-mint-600: #059669;

    /* Emerald aliases (same values as mint, used in inline styles) */
    --color-emerald-400: #34D399;
    --color-emerald-500: #10B981;
    --color-emerald-600: #059669;

    /* Slate palette */
    --color-slate-50:  #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-slate-200: #E2E8F0;
    --color-slate-300: #CBD5E1;
    --color-slate-400: #94A3B8;
    --color-slate-500: #64748B;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1E293B;
    --color-slate-900: #0F172A;

    /* Warm/Orange */
    --color-warm-400: #FB923C;
    --color-warm-500: #F97316;
    --color-warm-600: #EA580C;

    /* Coral/Rose */
    --color-coral-400: #FB7185;
    --color-coral-500: #F43F5E;

    /* Amber */
    --color-amber-400: #FBBF24;
    --color-amber-500: #F59E0B;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --max-width: 80rem;
    --px: 1rem;
}

@media (min-width: 640px) { :root { --px: 1.5rem; } }
@media (min-width: 1024px) { :root { --px: 2rem; } }

/* =============================================================================
   2. Reset & Base
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-slate-900);
    background-color: #ffffff;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   3. Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-slate-900);
}
p { margin: 0; }

/* =============================================================================
   4. Layout Helpers
   ============================================================================= */
.cot-container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--px);
}

.cot-main { min-height: 100vh; }

.cot-section { padding-block: 5rem; }
@media (min-width: 1024px) { .cot-section { padding-block: 7rem; } }

/* Page offset for fixed nav */
.cot-page-offset { padding-top: 4rem; }
@media (min-width: 1024px) { .cot-page-offset { padding-top: 4.5rem; } }

/* Generic page content (page.php) */
.cot-page-content { font-size: 1.0625rem; line-height: 1.75; color: var(--color-slate-700); }
.cot-page-content h2, .cot-page-content h3, .cot-page-content h4 { color: var(--color-slate-900); font-weight: 700; margin-block: 1.5rem 0.75rem; }
.cot-page-content p { margin-bottom: 1.25rem; }
.cot-page-content a { color: var(--color-sky-600); }
.cot-page-content ul, .cot-page-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.cot-page-content li { margin-bottom: 0.375rem; }

/* =============================================================================
   5. Utility Classes
   ============================================================================= */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(135deg, #0EA5E9, #10B981);
}

.text-gradient-warm {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(135deg, #F97316, #F43F5E);
}

.bg-gradient-primary { background-image: linear-gradient(135deg, #0EA5E9, #10B981); }

.bg-mesh {
    background-color: #ffffff;
    background-image:
        radial-gradient(at 40% 20%, rgba(14,165,233,0.08) 0px, transparent 50%),
        radial-gradient(at 80% 0%,  rgba(16,185,129,0.08) 0px, transparent 50%),
        radial-gradient(at 0%  50%, rgba(56,189,248,0.06) 0px, transparent 50%);
}

.bg-mesh-dark {
    background-color: #0F172A;
    background-image:
        radial-gradient(at 40% 20%, rgba(14,165,233,0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%,  rgba(16,185,129,0.15) 0px, transparent 50%);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border-width: 0;
}

/* =============================================================================
   6. Reusable Component Classes
   ============================================================================= */
.modern-card {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid rgba(226,232,240,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 30px -5px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.modern-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 15px 40px -10px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.glass-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(24px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

.feature-card {
    background: linear-gradient(to bottom right, #fff, rgba(248,250,252,0.5));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(226,232,240,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}
.feature-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

.metric-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--color-slate-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(16,185,129,0.1));
    border: 1px solid rgba(14,165,233,0.2);
    color: var(--color-sky-700);
}

.icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(16,185,129,0.1));
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.icon-container:hover {
    background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(16,185,129,0.15));
    transform: scale(1.05);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-ocean-500), var(--color-sky-500));
    color: #fff;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(14,165,233,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    border: none;
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(14,165,233,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
    color: #fff;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #fff;
    color: var(--color-slate-900);
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    border: 2px solid var(--color-slate-200);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}
.btn-secondary:hover {
    border-color: var(--color-ocean-500);
    color: var(--color-ocean-600);
    box-shadow: 0 4px 14px rgba(14,165,233,0.15);
}

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--color-slate-900);
    color: #fff;
    font-weight: 500;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    transition: background 0.15s;
    text-decoration: none;
    cursor: pointer;
    border: none;
}
.btn-dark:hover { background: var(--color-slate-800); color: #fff; }

/* Scroll animation base */
.cot-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.cot-animate.cot-animate--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulse dot */
.pulse-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--color-sky-500);
    animation: pulseSlow 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* =============================================================================
   7. Navigation
   ============================================================================= */
.cot-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* Push nav below WordPress admin bar when logged in */
@media screen {
    .admin-bar .cot-nav { top: 32px; }
}
@media screen and (max-width: 782px) {
    .admin-bar .cot-nav { top: 46px; }
}
.cot-nav--scrolled {
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--color-slate-100);
}
.cot-nav__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
@media (min-width: 1024px) { .cot-nav__inner { height: 4.5rem; } }

.cot-nav__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    text-decoration: none;
}
.cot-nav__logo img { width: 2rem; height: 2rem; }
.cot-nav__logo-text {
    color: var(--color-slate-900);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.025em;
}

.cot-nav__links {
    display: none;
    align-items: center;
    gap: 0.25rem;
}
@media (min-width: 1024px) { .cot-nav__links { display: flex; } }

.cot-nav__links a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-600);
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    text-decoration: none;
}
.cot-nav__links a:hover { color: var(--color-slate-900); background: var(--color-slate-50); }

.cot-nav__actions { display: none; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) { .cot-nav__actions { display: flex; } }

.cot-nav__login {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-600);
    padding: 0.5rem 0.75rem;
    transition: color 0.15s;
    text-decoration: none;
}
.cot-nav__login:hover { color: var(--color-slate-900); }

.cot-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--color-slate-900);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: pointer;
    font-family: var(--font-sans);
    border: none;
}
.cot-nav__cta:hover {
    background: var(--color-slate-800);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.cot-nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--color-slate-600);
    transition: color 0.15s;
}
.cot-nav__hamburger:hover { color: var(--color-slate-900); }
@media (min-width: 1024px) { .cot-nav__hamburger { display: none; } }

.cot-nav__mobile {
    display: none;
    background: #fff;
    border-top: 1px solid var(--color-slate-100);
    padding: 1rem var(--px);
}
.cot-nav__mobile.is-open { display: block; }

.cot-nav__mobile a {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-700);
    border-radius: 0.5rem;
    transition: all 0.15s;
    text-decoration: none;
}
.cot-nav__mobile a:hover { color: var(--color-slate-900); background: var(--color-slate-50); }

.cot-nav__mobile-actions {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--color-slate-100);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cot-nav__mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--color-slate-900);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-sans);
    border: none;
    cursor: pointer;
}

/* =============================================================================
   8. Footer
   ============================================================================= */
.cot-footer { background: var(--color-slate-900); color: #fff; }
.cot-footer__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--px);
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.cot-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 1024px) { .cot-footer__grid { grid-template-columns: 1fr 3fr; } }

.cot-footer__brand-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    text-decoration: none;
}
.cot-footer__brand-logo img { width: 2rem; height: 2rem; filter: invert(1); }
.cot-footer__brand-logo span { font-weight: 600; font-size: 0.9375rem; }
.cot-footer__tagline { color: var(--color-slate-400); font-size: 0.875rem; line-height: 1.6; max-width: 18rem; }

.cot-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 640px) { .cot-footer__columns { grid-template-columns: repeat(4, 1fr); } }

.cot-footer__col-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.cot-footer__col ul { display: flex; flex-direction: column; gap: 0.625rem; }
.cot-footer__col a { font-size: 0.875rem; color: var(--color-slate-400); transition: color 0.15s; text-decoration: none; }
.cot-footer__col a:hover { color: #fff; }

.cot-footer__bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
@media (min-width: 640px) { .cot-footer__bottom { flex-direction: row; justify-content: space-between; } }

.cot-footer__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
@media (min-width: 640px) { .cot-footer__badges { justify-content: flex-start; } }
.cot-footer__badges img { height: 2.5rem; width: auto; border-radius: 0.25rem; }

.cot-footer__legal { display: flex; align-items: center; gap: 1.25rem; }
.cot-footer__legal a { font-size: 0.875rem; color: var(--color-slate-500); transition: color 0.15s; text-decoration: none; }
.cot-footer__legal a:hover { color: var(--color-slate-300); }

.cot-footer__copyright { padding-top: 1rem; font-size: 0.875rem; color: var(--color-slate-500); text-align: center; }
@media (min-width: 640px) { .cot-footer__copyright { text-align: left; } }

/* =============================================================================
   9. Blog — Archive & Single
   ============================================================================= */

/* ── Page shell ── */
.cot-blog-page { padding-top: 4rem; min-height: 100vh; background: var(--color-slate-50); }

/* ── Header ── */
.cot-blog-header {
    padding: 4rem var(--px) 3rem;
    text-align: center;
    border-bottom: 1px solid var(--color-slate-100);
    background: var(--color-slate-50);
    padding-top:100px;
}
.cot-blog-eyebrow {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; font-weight: 700; color: var(--color-sky-600);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.cot-blog-header h1 {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
    color: var(--color-slate-900); margin-bottom: 1rem; line-height: 1.15;
}
.cot-blog-header h1 em { font-style: italic; }
.cot-blog-header p { font-size: 1.125rem; color: var(--color-slate-500); max-width: 40rem; margin-inline: auto; }

/* ── Container ── */
.cot-blog-container { max-width: var(--max-width); margin-inline: auto; padding: 3rem var(--px); }

/* ── Search ── */
.cot-blog-search-wrap {
    display: flex; justify-content: center; margin-bottom: 1.75rem;
}
.cot-blog-search-form {
    position: relative; display: flex; align-items: center;
    width: 100%; max-width: 48rem;
    border: 1px solid var(--color-slate-200); border-radius: 0.75rem;
    background: #fff; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cot-blog-search-form:focus-within {
    border-color: var(--color-sky-400); box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.cot-blog-search-icon {
    position: absolute; left: 0.875rem; pointer-events: none;
    color: var(--color-slate-400); flex-shrink: 0;
}
.cot-blog-search-input {
    flex: 1; border: none; outline: none;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 0.875rem; color: var(--color-slate-700);
    font-family: var(--font-sans); background: transparent;
}
.cot-blog-search-input::placeholder { color: var(--color-slate-400); }

/* ── Pill category filters ── */
.cot-blog-pill-filters {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.5rem; margin-bottom: 2.5rem;
}
.cot-blog-pill {
    display: inline-flex; align-items: center;
    padding: 0.375rem 1rem; border-radius: 9999px;
    font-size: 0.875rem; font-weight: 500;
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-600); background: #fff;
    text-decoration: none;
    transition: all 0.15s;
}
.cot-blog-pill:hover { border-color: var(--color-sky-300); color: var(--color-sky-700); }
.cot-blog-pill.is-active {
    background: var(--color-sky-600); color: #fff;
    border-color: var(--color-sky-600);
    box-shadow: 0 1px 4px rgba(2,132,199,0.2);
}

/* ── Featured post card ── */
.cot-blog-featured-wrap { margin-bottom: 2rem; }
.cot-blog-featured-card {
    display: grid; grid-template-columns: 1fr;
    background: #fff; border-radius: 1rem;
    border: 1px solid var(--color-slate-100);
    overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}
@media (min-width: 768px) {
    .cot-blog-featured-card { grid-template-columns: 1fr 1fr; }
}
.cot-blog-featured-card:hover {
    border-color: var(--color-sky-200);
    box-shadow: 0 20px 50px rgba(14,165,233,0.1);
}
.cot-blog-featured-card__img {
    aspect-ratio: 4/3; overflow: hidden; background: var(--color-slate-100);
}
@media (min-width: 768px) { .cot-blog-featured-card__img { aspect-ratio: unset; min-height: 300px; } }
.cot-blog-featured-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.cot-blog-featured-card:hover .cot-blog-featured-card__img img { transform: scale(1.04); }
.cot-blog-featured-card__body {
    padding: 2rem 2rem 2rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1024px) { .cot-blog-featured-card__body { padding: 2.5rem; } }
.cot-blog-featured-label {
    display: inline-flex; align-items: center;
    font-size: 0.75rem; font-weight: 700; color: var(--color-sky-600);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem;
}
.cot-blog-featured-card__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700;
    color: var(--color-slate-900); line-height: 1.3; margin-bottom: 0.75rem;
    transition: color 0.15s;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cot-blog-featured-card:hover .cot-blog-featured-card__title { color: var(--color-sky-700); }
.cot-blog-featured-card__excerpt {
    font-size: 1rem; color: var(--color-slate-500); line-height: 1.65; margin-bottom: 1.5rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cot-blog-featured-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    padding-top: 1.25rem; border-top: 1px solid var(--color-slate-100);
}

/* ── Tag pills (on cards) ── */
.cot-blog-tag-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.cot-blog-tag-pill {
    display: inline-flex; align-items: center;
    padding: 0.125rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500;
    background: var(--color-sky-50); color: var(--color-sky-700);
    border: 1px solid var(--color-sky-100);
}

/* ── Meta with icons ── */
.cot-blog-meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ── Cards grid ── */
.cot-blog-cards-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px) { .cot-blog-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-blog-cards-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Regular card ── */
.cot-blog-card {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-slate-100);
    text-decoration: none; color: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cot-blog-card:hover {
    border-color: var(--color-sky-200);
    box-shadow: 0 20px 50px rgba(14,165,233,0.1);
}

.cot-blog-card__cover {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9; background: var(--color-slate-100);
}
.cot-blog-card__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.cot-blog-card:hover .cot-blog-card__cover img { transform: scale(1.05); }
.cot-blog-card__overlay { display: none; }
.cot-blog-card__cover-placeholder {
    width: 100%; height: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-sky-50), var(--color-slate-100));
    color: var(--color-slate-300);
}

.cot-blog-card__body {
    display: flex; flex-direction: column;
    padding: 1.25rem 1.5rem 1.5rem; flex: 1;
}
.cot-blog-card__title {
    font-size: 1.0625rem; font-weight: 600; color: var(--color-slate-900);
    line-height: 1.4; margin: 0 0 0.5rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.15s;
}
.cot-blog-card:hover .cot-blog-card__title { color: var(--color-sky-700); }
.cot-blog-card__excerpt {
    font-size: 0.875rem; color: var(--color-slate-500); line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cot-blog-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-slate-50);
}
.cot-blog-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; color: var(--color-slate-400);
}
.cot-blog-card__author { font-weight: 600; color: var(--color-slate-500); }
.cot-blog-card__sep { line-height: 1; }
.cot-blog-card__read-more {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--color-sky-600);
    transition: gap 0.2s;
}
.cot-blog-card:hover .cot-blog-card__read-more,
.cot-blog-featured-card:hover .cot-blog-card__read-more { gap: 0.6rem; }

/* ── Empty state ── */
.cot-blog-empty {
    text-align: center; padding: 5rem var(--px);
    color: var(--color-slate-400);
}
.cot-blog-empty svg { margin-inline: auto; margin-bottom: 1rem; }
.cot-blog-empty h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-slate-700); margin-bottom: 0.25rem; }
.cot-blog-empty p { font-size: 0.875rem; }

/* ── Pagination ── */
.cot-pagination { display: flex; justify-content: center; gap: 0.5rem; padding: 3rem var(--px); }
.cot-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding-inline: 0.75rem;
    border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
    border: 1px solid var(--color-slate-200); color: var(--color-slate-600);
    background: #fff; transition: all 0.15s; text-decoration: none;
}
.cot-pagination .page-numbers:hover { background: var(--color-slate-50); border-color: var(--color-sky-300); }
.cot-pagination .page-numbers.current { background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900); }

/* =============================================================================
   Single post
   ============================================================================= */

/* ── Page shell ── */
.cot-single {
    padding-top: 4rem; min-height: 100vh;
    background: var(--color-slate-50);
}

/* ── Narrow content column ── */
.cot-single__wrap {
    max-width: 60rem; margin-inline: auto;
    padding: 3rem var(--px) 4rem;
}

/* ── Back link ── */
.cot-single__back {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; font-weight: 500; color: var(--color-slate-400);
    text-decoration: none; margin-bottom: 2rem;
    transition: color 0.15s, gap 0.2s;
}
.cot-single__back:hover { color: var(--color-slate-700); gap: 0.75rem; }
.cot-single__back svg { transition: transform 0.2s; flex-shrink: 0; }
.cot-single__back:hover svg { transform: translateX(-2px); }

/* ── Tag pills ── */
.cot-single__tags {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.cot-single__tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.75rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    background: var(--color-sky-50); color: var(--color-sky-700);
    border: 1px solid var(--color-sky-100);
    text-decoration: none; transition: background 0.15s;
}
.cot-single__tag:hover { background: var(--color-sky-100); }

/* ── Title ── */
.cot-single__title {
    font-size: clamp(1.625rem, 3.5vw, 2.25rem); font-weight: 800;
    color: var(--color-slate-900); line-height: 1.2;
    letter-spacing: -0.02em; margin-bottom: 0.75rem;
}

/* ── Excerpt ── */
.cot-single__excerpt {
    font-size: 1.125rem; color: var(--color-slate-500);
    line-height: 1.65; margin-bottom: 1.5rem;
}

/* ── Meta row ── */
.cot-single__meta-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-slate-100);
    margin-bottom: 2rem;
}
.cot-single__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
    font-size: 0.875rem; color: var(--color-slate-400);
}
.cot-single__meta-author { font-weight: 600; color: var(--color-slate-700); }
.cot-single__meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ── Share / copy-link button ── */
.cot-single__share-btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.875rem; border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 500; color: var(--color-slate-500);
    background: transparent; border: none; cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: var(--font-sans);
}
.cot-single__share-btn:hover { color: var(--color-slate-700); background: var(--color-slate-100); }
.cot-single__share-btn.is-copied { color: #16a34a; }

/* ── Cover image ── */
.cot-single__cover {
    margin-bottom: 2.5rem;
    border-radius: 1rem; overflow: hidden;
    border: 1px solid var(--color-slate-100);
    box-shadow: 0 1px 8px rgba(15,23,42,0.06);
}
.cot-single__cover img {
    width: 100%; display: block; height: auto;
    max-height: 480px; object-fit: cover;
}

/* ── Prose content ── */
.cot-single__content h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-slate-900); margin: 2.5rem 0 1rem; letter-spacing: -0.01em; }
.cot-single__content h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-slate-900); margin: 2rem 0 0.75rem; }
.cot-single__content h4 { font-size: 1.125rem; font-weight: 600; color: var(--color-slate-900); margin: 1.75rem 0 0.5rem; }
.cot-single__content p { font-size: 1.0625rem; color: var(--color-slate-700); line-height: 1.8; margin-bottom: 1.25rem; }
.cot-single__content ul, .cot-single__content ol { font-size: 1.0625rem; color: var(--color-slate-700); line-height: 1.8; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.cot-single__content ul { list-style: disc; }
.cot-single__content ol { list-style: decimal; }
.cot-single__content li { margin-bottom: 0.375rem; }
.cot-single__content img { border-radius: 0.75rem; margin-block: 1.5rem; max-width: 100%; }
.cot-single__content a { color: var(--color-sky-600); text-decoration: underline; text-underline-offset: 2px; }
.cot-single__content strong { color: var(--color-slate-900); }
.cot-single__content blockquote {
    border-left: 3px solid var(--color-sky-300); padding: 0.875rem 1.25rem;
    margin: 1.75rem 0; background: var(--color-sky-50); border-radius: 0 0.5rem 0.5rem 0;
    color: var(--color-slate-600); font-style: italic;
}

/* ── Social share pills ── */
.cot-single__socials {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-slate-100);
}
.cot-single__socials-label {
    font-size: 0.8125rem; font-weight: 600; color: var(--color-slate-400);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.cot-single__socials-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cot-social-pill {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.875rem; border-radius: 9999px;
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    color: #fff;
}
.cot-social-pill:hover { opacity: 0.88; transform: translateY(-1px); }
.cot-social-pill--linkedin  { background: #0a66c2; }
.cot-social-pill--twitter   { background: #000; }
.cot-social-pill--facebook  { background: #1877f2; }
.cot-social-pill--whatsapp  { background: #25d366; }

/* ── Back link (bottom) ── */
.cot-single__back-bottom {
    margin-top: 3.5rem; padding-top: 2rem;
    border-top: 1px solid var(--color-slate-100);
}

/* ── Related posts ── */
.cot-related { background: var(--color-slate-50); padding: 4rem var(--px) 5rem; }
.cot-related__inner { max-width: var(--max-width); margin-inline: auto; }
.cot-related__title {
    font-size: 1.375rem; font-weight: 700; color: var(--color-slate-900);
    margin-bottom: 2rem; text-align: center; letter-spacing: -0.01em;
}

/* =============================================================================
   10. Homepage — Hero
   ============================================================================= */
.cot-hero {
    position: relative;
    padding-top: 6rem;
    padding-bottom: 4rem;
    overflow: hidden;
    background: #fff;
}
@media (min-width: 1024px) { .cot-hero { padding-top: 8rem; padding-bottom: 6rem; } }

.cot-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(14,165,233,0.08), transparent);
    pointer-events: none;
}
.cot-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(16,185,129,0.06), transparent 70%);
    pointer-events: none;
}

.cot-hero__inner {
    position: relative;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .cot-hero__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.cot-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: var(--color-sky-50);
    border: 1px solid var(--color-sky-200);
    color: var(--color-sky-700);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cot-hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    color: var(--color-slate-900);
}

.cot-hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-slate-600);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 32rem;
}

.cot-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }

.cot-hero__note { font-size: 0.75rem; color: var(--color-slate-400); margin-bottom: 2.5rem; }

.cot-hero__social-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; }

.cot-hero__stars { display: flex; align-items: center; gap: 0.375rem; color: var(--color-slate-600); }
.cot-hero__stars-icons { display: flex; }
.cot-hero__stars-icons svg { color: #FBBF24; fill: #FBBF24; }
.cot-hero__stars-score { font-weight: 600; color: var(--color-slate-800); }
.cot-hero__stars-source { color: var(--color-slate-500); }

.cot-hero__divider { color: var(--color-slate-200); }

.cot-hero__trust { color: var(--color-slate-600); display: flex; align-items: center; gap: 0.375rem; }
.cot-hero__trust-icon { color: var(--color-sky-500); }

.cot-hero__brands { color: var(--color-slate-500); }
.cot-hero__brands strong { color: var(--color-slate-700); }

/* Hero platform visual */
.cot-hero__visual { position: relative; }
@media (min-width: 1024px) { .cot-hero__visual { padding-left: 2rem; } }

.cot-hero__visual-glow {
    position: absolute;
    inset: -1rem;
    background: linear-gradient(to right, rgba(224,242,254,0.5), rgba(209,250,229,0.5));
    border-radius: 2rem;
    filter: blur(24px);
}

.cot-hero__platform {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(226,232,240,0.6);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
}

.cot-hero__platform-bar {
    background: linear-gradient(to right, var(--color-slate-800), var(--color-slate-900));
    padding: 1rem 1.25rem;
}
.cot-hero__platform-dots { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; }
.cot-hero__platform-dots span { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }

.cot-hero__platform-body { padding: 1.25rem; }

.cot-hero__issue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-slate-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 0.625rem;
}
.cot-hero__issue-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-slate-700); }
.cot-hero__issue-score { font-size: 0.75rem; font-weight: 600; border-radius: 9999px; padding: 0.2rem 0.625rem; }
.cot-hero__issue-score--rose { background: rgba(251,113,133,0.1); color: #e11d48; }
.cot-hero__issue-score--orange { background: rgba(251,146,60,0.1); color: #c2410c; }
.cot-hero__issue-score--amber { background: rgba(251,191,36,0.1); color: #b45309; }

/* =============================================================================
   11. Homepage — Sections
   ============================================================================= */

/* Solutions */
.cot-solutions { padding: 5rem 0; background: var(--color-slate-50); }
@media (min-width: 1024px) { .cot-solutions { padding: 7rem 0; } }

.cot-solutions__header { text-align: center; max-width: 48rem; margin-inline: auto; margin-bottom: 4rem; }
.cot-solutions__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 1rem; }
.cot-solutions__subtitle { font-size: 1.125rem; color: var(--color-slate-600); line-height: 1.7; }

.cot-solutions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .cot-solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-solutions__grid { grid-template-columns: repeat(3, 1fr); } }

/* Pain section */
.cot-pain { padding: 5rem 0; background: #fff; }
@media (min-width: 1024px) { .cot-pain { padding: 7rem 0; } }
.cot-pain__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .cot-pain__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* How it works */
.cot-how-it-works { padding: 5rem 0; background: var(--color-slate-50); }
@media (min-width: 1024px) { .cot-how-it-works { padding: 7rem 0; } }

.cot-steps { display: flex; flex-direction: column; gap: 2rem; }
.cot-step {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--color-slate-100);
}
.cot-step__number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--color-sky-500), var(--color-mint-500));
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Platform */
.cot-platform { padding: 5rem 0; background: #fff; }
@media (min-width: 1024px) { .cot-platform { padding: 7rem 0; } }

/* Microlearning */
.cot-microlearning { padding: 5rem 0; background: linear-gradient(to bottom right, var(--color-slate-50), rgba(224,242,254,0.3)); }
@media (min-width: 1024px) { .cot-microlearning { padding: 7rem 0; } }

/* Mid CTA */
.cot-mid-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-slate-800) 100%);
    color: #fff;
}
.cot-mid-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 1rem; }
.cot-mid-cta__subtitle { font-size: 1.125rem; color: var(--color-slate-400); margin-bottom: 2rem; }

/* Proof / Social */
.cot-proof { padding: 5rem 0; background: var(--color-slate-50); }
@media (min-width: 1024px) { .cot-proof { padding: 7rem 0; } }

.cot-proof__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
    margin-top: 3rem;
    opacity: 0.5;
    filter: grayscale(1);
}

/* Primary CTA */
.cot-primary-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(14,165,233,0.05), rgba(16,185,129,0.05));
    text-align: center;
}
.cot-primary-cta__title { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 800; margin-bottom: 1rem; }
.cot-primary-cta__subtitle { font-size: 1.125rem; color: var(--color-slate-600); margin-bottom: 2rem; }

/* Recommendations */
.cot-recommendations { padding: 5rem 0; background: #fff; }
@media (min-width: 1024px) { .cot-recommendations { padding: 7rem 0; } }
.cot-rec-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .cot-rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-rec-grid { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================================
   12. Modal
   ============================================================================= */
.cot-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15,23,42,0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cot-modal.cot-modal--active { display: flex; }

.cot-modal__overlay { position: absolute; inset: 0; }

.cot-modal__box {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 32rem;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    animation: scaleIn 0.3s ease-out;
}
.cot-modal__close {
    position: absolute;
    top: 1rem; right: 1rem;
    padding: 0.5rem;
    color: var(--color-slate-400);
    transition: color 0.15s;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cot-modal__close:hover { color: var(--color-slate-600); }

/* Industry option cards inside the diagnostic modal */
.cot-modal__industry-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 2px solid #f1f5f9;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.cot-modal__industry-option:hover {
    border-color: var(--hover-border, #e2e8f0);
    background: var(--hover-bg, #f8fafc);
}
.cot-modal__industry-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--icon-bg, #f1f5f9);
    color: var(--icon-color, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cot-modal__industry-text { flex: 1; min-width: 0; }
.cot-modal__industry-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-slate-900);
    margin: 0;
}
.cot-modal__industry-desc {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
    margin: 0.125rem 0 0;
}
.cot-modal__industry-arrow {
    color: var(--color-slate-400);
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.cot-modal__industry-option:hover .cot-modal__industry-arrow {
    transform: translateX(2px);
    color: var(--icon-color, #475569);
}

/* =============================================================================
   13. Contact Page
   ============================================================================= */
.cot-contact-bg-glow {
    pointer-events: none;
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,165,233,0.08), transparent 70%);
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* Contact page — two-column grid */
.cot-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 64em) {
    .cot-contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* Trust strip dividers — visible on sm+ */
@media (min-width: 40em) {
    .cot-trust-divider { display: block !important; }
}

/* CF7 light theme for contact page */
.page-template-template-contact .wpcf7-form input[type="text"],
.page-template-template-contact .wpcf7-form input[type="email"],
.page-template-template-contact .wpcf7-form select,
.page-template-template-contact .wpcf7-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-900);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: block;
    margin-bottom: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.page-template-template-contact .wpcf7-form input[type="text"]::placeholder,
.page-template-template-contact .wpcf7-form input[type="email"]::placeholder,
.page-template-template-contact .wpcf7-form textarea::placeholder {
    color: var(--color-slate-400);
}
.page-template-template-contact .wpcf7-form input:focus,
.page-template-template-contact .wpcf7-form select:focus,
.page-template-template-contact .wpcf7-form textarea:focus {
    border-color: var(--color-slate-400);
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}
.page-template-template-contact .wpcf7-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 2.5rem;
}
.page-template-template-contact .wpcf7-form textarea {
    resize: none;
    min-height: 7rem;
    line-height: 1.6;
}
.page-template-template-contact .wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-700);
    margin-bottom: 0.375rem;
}
.page-template-template-contact .cot-cf7-field { margin-bottom: 1.25rem; }
.page-template-template-contact .wpcf7-form input[type="submit"] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--color-slate-900);
    color: #fff;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    margin-top: 0.5rem;
}
.page-template-template-contact .wpcf7-form input[type="submit"]:hover {
    background: var(--color-slate-800);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

/* =============================================================================
   14. Industry Landing Pages — Common
   ============================================================================= */
.cot-landing-hero {
    padding: 5rem var(--px) 4rem;
    max-width: var(--max-width);
    margin-inline: auto;
}
@media (min-width: 1024px) { .cot-landing-hero { padding-top: 7rem; padding-bottom: 5rem; } }

.cot-landing-hero__badge { margin-bottom: 1.5rem; }
.cot-landing-hero__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 1.25rem; }
.cot-landing-hero__subtitle { font-size: 1.125rem; color: var(--color-slate-600); line-height: 1.7; max-width: 38rem; margin-bottom: 2rem; }
.cot-landing-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }

.cot-landing-section { padding: 5rem 0; }
@media (min-width: 1024px) { .cot-landing-section { padding: 7rem 0; } }

.cot-landing-section__header { text-align: center; max-width: 48rem; margin-inline: auto; margin-bottom: 3.5rem; }
.cot-landing-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; margin-bottom: 1rem; }
.cot-landing-section__subtitle { font-size: 1.0625rem; color: var(--color-slate-600); line-height: 1.7; }

.cot-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .cot-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.cot-outcome-strip {
    background: var(--color-slate-900);
    color: #fff;
    padding: 3rem 0;
}
.cot-outcome-strip__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) { .cot-outcome-strip__inner { grid-template-columns: repeat(4, 1fr); } }

.cot-outcome-stat { text-align: center; }
.cot-outcome-stat__value { font-size: 2rem; font-weight: 800; color: var(--color-sky-400); }
.cot-outcome-stat__label { font-size: 0.875rem; color: var(--color-slate-400); margin-top: 0.25rem; }

/* FAQ accordion */
.cot-faq { padding: 5rem 0; background: var(--color-slate-50); }
.cot-faq__item { border-bottom: 1px solid var(--color-slate-200); }
.cot-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-slate-900);
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    gap: 1rem;
}
.cot-faq__answer {
    display: none;
    padding-bottom: 1.25rem;
    color: var(--color-slate-600);
    line-height: 1.7;
    font-size: 0.9375rem;
}
.cot-faq__item.is-open .cot-faq__answer { display: block; }
/* .cot-faq__body is an alias for .cot-faq__answer used in some templates */
.cot-faq__body { display: none; }
.cot-faq__item.is-open .cot-faq__body { display: block; }
.cot-faq__icon { flex-shrink: 0; transition: transform 0.2s; }
.cot-faq__item.is-open .cot-faq__icon { transform: rotate(45deg); }

/* Final CTA section */
.cot-final-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-slate-900), var(--color-slate-800));
    color: #fff;
    text-align: center;
}
.cot-final-cta__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 1rem; }
.cot-final-cta__subtitle { font-size: 1.125rem; color: var(--color-slate-400); margin-bottom: 2rem; }

/* =============================================================================
   15. Animations & Keyframes
   ============================================================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}
@keyframes pulseSlow {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.animate-fade-in    { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-up   { animation: slideUp 0.6s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.6s ease-out forwards; }
.animate-slide-right{ animation: slideInRight 0.6s ease-out forwards; }
.animate-scale-in   { animation: scaleIn 0.5s ease-out forwards; }
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulseSlow 3s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ==========================================================================
   16. Pricing page
   ========================================================================== */

.cot-pricing-page {
    background: #fff;
}

/* Hero */
.cot-pricing-hero {
    position: relative;
    padding: 7rem var(--px) 3rem;
    overflow: hidden;
}

.cot-pricing-hero__bg-top {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14,165,233,0.07), transparent);
    pointer-events: none;
}

.cot-pricing-hero__bg-right {
    position: absolute;
    top: 5rem;
    right: 0;
    width: 31rem;
    height: 31rem;
    background: radial-gradient(circle, rgba(16,185,129,0.05), transparent 70%);
    pointer-events: none;
}

/* Two-column grid: benefits + pricing card */
.cot-pricing-tiers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 0;
}

@media (min-width: 64em) {
    .cot-pricing-tiers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        margin-bottom: 0;
    }
}

/* Features grid: 2 columns on medium+ */
.cot-pricing-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 40em) {
    .cot-pricing-features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Early Access form section grid */
.cot-pricing-early-access-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 64em) {
    .cot-pricing-early-access-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}

/* Form panel card */
.cot-pricing-form-panel {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--color-slate-200);
    padding: 2rem 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.07);
}

/* =============================================================================
   18. Responsive — Mobile & Tablet
   ============================================================================= */

/* ── Hero main grid ── */
.cot-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .cot-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}
/* Hide platform visual on mobile — text content takes priority */
@media (max-width: 1023px) {
    .cot-hero__grid > div:last-child { display: none; }
}

/* ── How it works — 5-step grid ── */
.cot-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 640px) {
    .cot-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cot-steps-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
}

/* ── Proof — stats (4-col) ── */
.cot-proof__stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 4rem;
}
@media (min-width: 768px) {
    .cot-proof__stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Proof — testimonials (3-col) ── */
.cot-proof__testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 4rem;
}
@media (min-width: 640px) {
    .cot-proof__testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cot-proof__testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Microlearning section grid ── */
.cot-microlearning__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .cot-microlearning__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
@media (max-width: 1023px) {
    .cot-microlearning__grid > div:last-child { display: none; }
}

/* ── Platform stats row ── */
.cot-platform__stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .cot-platform__stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Landing page hero grid (retail, branch-retail, become-partner) ── */
.cot-landing-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .cot-landing-hero__grid { grid-template-columns: 3fr 2fr; gap: 4rem; }
}
@media (max-width: 1023px) {
    .cot-landing-hero__grid > div:last-child,
    .cot-retail-hero__grid > div:last-child { display: none; }
}

/* ── 2-column cards grid ── */
.cot-cards-grid--2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cot-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
}

/* ── 3-column cards grid ── */
.cot-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cot-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cot-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ── Metrics grid (4-col) ── */
.cot-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 1024px) {
    .cot-metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* ── Fix existing classes — override previous CSS definitions ── */
.cot-solutions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (min-width: 768px) { .cot-solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-solutions__grid { grid-template-columns: repeat(3, 1fr); } }

.cot-pain__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 1024px) { .cot-pain__grid { grid-template-columns: 1fr 1fr; } }

.cot-rec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 4rem;
}
@media (min-width: 768px) { .cot-rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cot-rec-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Section padding — reduce on mobile ── */
@media (max-width: 767px) {
    .cot-section { padding-block: 3rem; }
    .cot-landing-section { padding-block: 3rem; }
    .cot-solutions,
    .cot-proof,
    .cot-how-it-works,
    .cot-platform,
    .cot-microlearning,
    .cot-recommendations,
    .cot-primary-cta { padding: 3rem 0 !important; }
    .cot-mid-cta { padding: 2rem 0 !important; }
}

/* ── Modal — full screen on mobile ── */
@media (max-width: 639px) {
    .cot-modal__box {
        margin: 1rem;
        width: calc(100% - 2rem);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        border-radius: 1rem;
    }
}

/* ── Blog single post ── */
@media (max-width: 767px) {
    .cot-single__hero-inner { padding-top: 5rem; }
    .cot-single__content { padding-inline: var(--px); }
}

/* =============================================================================
   17. Contact Form 7 — shared styles
   ============================================================================= */

/* ── Layout helpers (used in the CF7 "Form" tab markup) ── */
.cot-cf7-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cot-cf7-row--2col {
        flex-direction: row;
    }
    .cot-cf7-row--2col .cot-cf7-field {
        flex: 1 1 0;
    }
}

.cot-cf7-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cot-cf7-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-slate-700);
}

.cot-cf7-required {
    color: var(--color-coral-500);
    margin-left: 0.125rem;
}

.cot-cf7-optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-slate-400);
    margin-left: 0.25rem;
}

.cot-cf7-submit {
    margin-top: 0.5rem;
}

/* ── CF7 native controls ── */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-spinner) {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--color-slate-900);
    background: #fff;
    border: 1.5px solid var(--color-slate-200);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-spinner):focus {
    border-color: var(--color-sky-500);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}

.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-spinner)::placeholder {
    color: var(--color-slate-400);
}

/* Select arrow */
.wpcf7-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Textarea */
.wpcf7-textarea {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.6;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--color-slate-900);
    background: #fff;
}

/* Submit button — inherits .btn-primary style */
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    width: 100%;
    background: linear-gradient(135deg, var(--color-ocean-500), var(--color-sky-500));
    color: #fff;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(14,165,233,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.2s ease;
}
.wpcf7-submit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(14,165,233,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
}
.wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.wpcf7-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Inline validation error */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-coral-500);
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--color-coral-500);
    box-shadow: 0 0 0 3px rgba(244,63,94,0.1);
}

/* Response output (success / error message) */
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    border: none !important;
}

.wpcf7 .sent .wpcf7-response-output {
    background: rgba(16,185,129,0.08);
    color: var(--color-mint-600);
    border-left: 3px solid var(--color-mint-500) !important;
}

.wpcf7 .failed .wpcf7-response-output,
.wpcf7 .aborted .wpcf7-response-output,
.wpcf7 .spam .wpcf7-response-output {
    background: rgba(244,63,94,0.07);
    color: var(--color-coral-500);
    border-left: 3px solid var(--color-coral-500) !important;
}

/* ── Contact page form wrapper ── */
.cot-contact-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cot-contact-form-wrap .wpcf7 {
    width: 100%;
}

/* ── Pricing early access form wrapper ── */
.cot-pricing-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cot-pricing-form-wrap .wpcf7 {
    width: 100%;
}

/* ── Pricing CTA button ── */
.cot-pricing-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    background: var(--color-slate-900);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    font-family: var(--font-sans);
}
.cot-pricing-cta-btn:hover {
    background: var(--color-slate-800);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transform: translateY(-1px);
    color: #fff;
}

/* ── Early Access value bullets ── */
.cot-ea-bullet {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.cot-ea-bullet__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.cot-cf7-field br{
    display:none!important;
}
.wpcf7-form-control.wpcf7-textarea{
    height:106px;
}
/* ── Early Access form fields ── */
.cot-ea-honeypot { display: none !important; }
.cot-ea-form__field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 15px; }
.cot-ea-form__label { font-size: 0.875rem; font-weight: 500; color: var(--color-slate-700); display:block; margin-bottom:5px;}
.cot-ea-form__label-optional { font-weight: 400; color: var(--color-slate-400); }
.cot-ea-form__required { color: #f43f5e; }
.cot-ea-form__input,
.cot-ea-form__select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-slate-200);
    font-size: 0.875rem;
    color: var(--color-slate-900);
    font-family: var(--font-sans);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    appearance: none;
    box-sizing: border-box;
}
.cot-ea-form__input::placeholder { color: var(--color-slate-400); }
.cot-ea-form__input:focus,
.cot-ea-form__select:focus {
    border-color: var(--color-slate-400);
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}
.cot-ea-form__select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 2.5rem;
}
.cot-ea-form__error {
    font-size: 0.875rem;
    color: #e11d48;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
}
.cot-ea-form__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cot-spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes cot-spin { to { transform: rotate(360deg); } }

/* ── Pricing form — override global wpcf7 specificity ── */
.page-template-template-pricing .wpcf7-form-control.cot-ea-form__input,
.page-template-template-pricing .wpcf7-form-control.cot-ea-form__select {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-slate-200);
    font-size: 0.875rem;
    color: var(--color-slate-900);
    background: #fff;
}
.page-template-template-pricing .wpcf7-form-control.cot-ea-form__input:focus,
.page-template-template-pricing .wpcf7-form-control.cot-ea-form__select:focus {
    border-color: var(--color-slate-400);
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}
/* Submit button arrow via sibling label trick — use → in button value in CF7 admin */
.page-template-template-pricing .wpcf7-submit.cot-pricing-cta-btn {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 0.875rem;
    background: var(--color-slate-900);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.page-template-template-pricing .wpcf7-submit.cot-pricing-cta-btn:hover {
    background: var(--color-slate-800);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

/* ── Pricing FAQ — React-style toggle (Plus/Minus in circle) ── */
.cot-pricing-faq .cot-faq__item {
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.15s;
}
.cot-pricing-faq .cot-faq__item:hover { border-color: var(--color-slate-300); }
.cot-pricing-faq .cot-faq__question { padding: 1.25rem 1.5rem; }
.cot-pricing-faq .cot-faq__answer {
    padding: 0 1.5rem 1.25rem;
    display: none;
}
.cot-pricing-faq .cot-faq__item.is-open .cot-faq__answer { display: block; }
.cot-pricing-faq .cot-faq__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-slate-100);
    color: var(--color-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    transform: none !important;
    flex-shrink: 0;
}
.cot-pricing-faq .cot-faq__item.is-open .cot-faq__icon {
    background: var(--color-slate-900);
    color: #fff;
}
.cot-pricing-faq .cot-faq__icon-plus  { display: block; }
.cot-pricing-faq .cot-faq__icon-minus { display: none;  }
.cot-pricing-faq .cot-faq__item.is-open .cot-faq__icon-plus  { display: none;  }
.cot-pricing-faq .cot-faq__item.is-open .cot-faq__icon-minus { display: block; }

/* =============================================================================
   Retail page — tab panels & microlearning responsive
   ============================================================================= */

/* Use-cases tab panels: single column on mobile */
.cot-retail-tab-panel {
    grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
    .cot-retail-tab-panel { grid-template-columns: 1fr 1fr !important; }
}

/* Microlearning inner grid: stack on mobile */
.cot-retail-microlearning__grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 1024px) {
    .cot-retail-microlearning__grid { grid-template-columns: 1fr 1fr !important; }

}
@media (max-width: 1024px) {
    .cot-blog-hero{
        min-height:unset!important;
    }
}