/* ================================================================
   ManageMyClaw - Main Stylesheet
   Complete design system extracted from the ManageMyClaw landing page.
   Includes CSS reset, custom properties, component styles, and
   all utility classes needed for the WordPress block theme.
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Reset (WordPress-compatible)
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------------- */
:root {
    /* Text Colors */
    --color-ink: #09090B;
    --color-secondary: #3F3F46;
    --color-muted: #71717A;
    --color-faint: #A1A1AA;

    /* Brand / Accent */
    --color-accent: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-success: #16A34A;
    --color-danger: #DC2626;
    --color-warning: #D97706;

    /* Backgrounds */
    --color-white: #FFFFFF;
    --color-stone-50: #FAFAF9;
    --color-stone-100: #F5F5F4;
    --color-stone-200: #E7E5E4;
    --color-zinc-50: #FAFAFA;
    --color-zinc-100: #F4F4F5;
    --color-zinc-200: #E4E4E7;
    --color-zinc-300: #D4D4D8;
    --color-zinc-400: #A1A1AA;
    --color-zinc-600: #52525B;
    --color-zinc-800: #27272A;

    /* Additional colors for pills/cards */
    --color-blue-50: #EFF6FF;
    --color-blue-500: #3B82F6;
    --color-blue-600: #2563EB;
    --color-green-50: #F0FDF4;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-amber-50: #FFFBEB;
    --color-amber-500: #F59E0B;
    --color-amber-600: #D97706;
    --color-violet-50: #F5F3FF;
    --color-violet-500: #8B5CF6;
    --color-violet-600: #7C3AED;
    --color-cyan-50: #ECFEFF;
    --color-cyan-500: #06B6D4;
    --color-cyan-600: #0891B2;
    --color-rose-50: #FFF1F2;
    --color-rose-600: #E11D48;
    --color-sky-50: #F0F9FF;
    --color-sky-500: #0EA5E9;
    --color-sky-600: #0284C7;
    --color-red-500: #EF4444;
    --color-purple-500: #A855F7;
    --color-indigo-500: #6366F1;
    --color-yellow-500: #EAB308;
    --color-orange-500: #F97316;
    --color-emerald-600: #059669;

    /* Typography */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Layout */
    --max-width: 1200px;
}

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

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #09090B;
    background: #FFFFFF;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Smooth scroll offset for fixed nav */
[id] {
    scroll-margin-top: 80px;
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent-hover);
}

/* ----------------------------------------------------------------
   Typography Utility Classes
   ---------------------------------------------------------------- */
.text-ink { color: var(--color-ink); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-muted); }
.text-faint { color: var(--color-faint); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-white { color: #FFFFFF; }

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-tight-2 { letter-spacing: -0.035em; }
.tracking-wide { letter-spacing: 0.025em; }

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

/* ----------------------------------------------------------------
   Background Color Classes
   ---------------------------------------------------------------- */
.bg-white { background-color: var(--color-white); }
.bg-ink { background-color: var(--color-ink); }
.bg-stone-50 { background-color: var(--color-stone-50); }
.bg-zinc-50 { background-color: var(--color-zinc-50); }
.bg-zinc-100 { background-color: var(--color-zinc-100); }
.bg-accent { background-color: var(--color-accent); }

/* ----------------------------------------------------------------
   Layout Utility Classes
   ---------------------------------------------------------------- */
.managemyclaw-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .managemyclaw-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* ----------------------------------------------------------------
   Terminal Window Component
   ---------------------------------------------------------------- */
.terminal-window {
    background: #0C0C0C;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
}

.terminal-bar {
    background: #1A1A1A;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dot-red { background: #FF5F57; }
.terminal-dot-yellow { background: #FEBC2E; }
.terminal-dot-green { background: #28C840; }

.terminal-body {
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.8;
    color: #A1A1AA;
}

.terminal-body .cmd { color: #E4E4E7; }
.terminal-body .flag { color: #60A5FA; }
.terminal-body .check { color: #4ADE80; }
.terminal-body .result { color: #FBBF24; }

/* ----------------------------------------------------------------
   Navigation Component
   ---------------------------------------------------------------- */
.nav-scrolled {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Mobile nav */
.mobile-nav {
    display: none;
}

.mobile-nav.open {
    display: flex;
    flex-direction: column;
}

/* Responsive nav visibility */
@media (max-width: 767px) {
    .managemyclaw-desktop-nav {
        display: none !important;
    }
    .managemyclaw-mobile-toggle {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .managemyclaw-mobile-toggle {
        display: none !important;
    }
    .mobile-nav {
        display: none !important;
    }
}

/* Nav link hover effects */
#nav a:hover {
    color: var(--color-ink);
}

/* ----------------------------------------------------------------
   Card & Hover Effects
   ---------------------------------------------------------------- */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.12);
}

/* ----------------------------------------------------------------
   Pricing Band Component
   ---------------------------------------------------------------- */
.pricing-band {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pricing-band:hover {
    box-shadow: 0 20px 60px -12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   FAQ Accordion Component
   ---------------------------------------------------------------- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
    padding-top: 12px;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}

.faq-chevron {
    transition: transform 0.3s ease;
}

.faq-item {
    transition: background-color 0.2s ease;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
    cursor: pointer;
}

.faq-item:hover {
    background-color: rgba(0,0,0,0.02);
}

/* ----------------------------------------------------------------
   Security Code Block Component
   ---------------------------------------------------------------- */
.security-code {
    background: #111111;
    border-radius: 8px;
    border: 1px solid #222;
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 2;
    color: #888;
}

.security-code .comment { color: #555; }
.security-code .key { color: #7DD3FC; }
.security-code .value { color: #4ADE80; }
.security-code .flag-val { color: #FBBF24; }

/* ----------------------------------------------------------------
   Hero Background Pattern
   ---------------------------------------------------------------- */
.hero-pattern {
    background-image: radial-gradient(circle, #e4e4e7 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ----------------------------------------------------------------
   Scroll-Triggered Fade In
   ---------------------------------------------------------------- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------------
   Integration Pills
   ---------------------------------------------------------------- */
.integration-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FFFFFF;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    color: #52525B;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid var(--color-zinc-100);
    transition: all 0.2s ease;
}

.integration-pill:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-color: var(--color-zinc-200);
}

.integration-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* ----------------------------------------------------------------
   Metrics Bar
   ---------------------------------------------------------------- */
.metrics-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    box-shadow: 0 2px 20px -4px rgba(0,0,0,0.06);
    border: 1px solid var(--color-zinc-100);
}

@media (min-width: 640px) {
    .metrics-bar {
        flex-direction: row;
        gap: 64px;
    }
}

.metrics-divider {
    display: none;
    width: 1px;
    height: 48px;
    background: var(--color-stone-200);
}

@media (min-width: 640px) {
    .metrics-divider {
        display: block;
    }
}

/* ----------------------------------------------------------------
   Section Styles
   ---------------------------------------------------------------- */
.section-standard {
    padding: 64px 0;
}

@media (min-width: 1024px) {
    .section-standard {
        padding: 96px 0;
    }
}

.section-hero {
    padding-top: 112px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {
    .section-hero {
        padding-top: 144px;
        padding-bottom: 112px;
    }
}

/* ----------------------------------------------------------------
   Grid Layouts
   ---------------------------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

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

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

.grid-5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ----------------------------------------------------------------
   Card Styles
   ---------------------------------------------------------------- */
.value-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 12px -2px rgba(0,0,0,0.05);
    border-top: 2px solid transparent;
}

.value-card.border-blue { border-top-color: var(--color-blue-500); }
.value-card.border-green { border-top-color: var(--color-green-500); }
.value-card.border-amber { border-top-color: var(--color-amber-500); }
.value-card.border-violet { border-top-color: var(--color-violet-500); }
.value-card.border-cyan { border-top-color: var(--color-cyan-500); }

.problem-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 20px -4px rgba(0,0,0,0.06);
}

.workflow-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 8px -2px rgba(0,0,0,0.04);
}

.step-card {
    position: relative;
    background: var(--color-stone-50);
    border-radius: 12px;
    padding: 24px;
}

.testimonial-card {
    background: var(--color-stone-50);
    border-radius: 12px;
    padding: 28px;
}

/* ----------------------------------------------------------------
   Icon Boxes
   ---------------------------------------------------------------- */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.icon-box-lg {
    width: 40px;
    height: 40px;
}

.icon-box-sm {
    width: 36px;
    height: 36px;
}

.icon-box-blue { background: var(--color-blue-50); }
.icon-box-green { background: var(--color-green-50); }
.icon-box-amber { background: var(--color-amber-50); }
.icon-box-violet { background: var(--color-violet-50); }
.icon-box-cyan { background: var(--color-cyan-50); }
.icon-box-rose { background: var(--color-rose-50); }
.icon-box-sky { background: var(--color-sky-50); }

/* ----------------------------------------------------------------
   Button Styles
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-accent {
    padding: 14px 24px;
    background: var(--color-accent);
    color: white;
    font-size: 15px;
    box-shadow: 0 10px 15px -3px rgba(37,99,235,0.2);
}

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

.btn-dark {
    padding: 14px 24px;
    background: var(--color-ink);
    color: white;
    font-size: 15px;
}

.btn-dark:hover {
    background: var(--color-secondary);
    color: white;
}

.btn-outline {
    padding: 10px 20px;
    border: 1px solid var(--color-stone-200);
    color: var(--color-ink);
    font-size: 14px;
    background: transparent;
}

.btn-outline:hover {
    background: var(--color-stone-50);
    color: var(--color-ink);
}

.btn-ghost {
    padding: 14px 24px;
    color: var(--color-secondary);
    font-size: 15px;
    font-weight: 500;
    background: transparent;
}

.btn-ghost:hover {
    color: var(--color-ink);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
    background: transparent;
    border: none;
    padding: 0;
}

.btn-text:hover {
    color: var(--color-accent-hover);
}

/* ----------------------------------------------------------------
   All Tables — Light borders, clean design
   ---------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}

table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #3F3F46;
    background: #FAFAFA;
    border-bottom: 1px solid #E4E4E7;
    border-right: 1px solid #F4F4F5;
}

table th:last-child {
    border-right: none;
}

table td {
    padding: 12px 16px;
    color: #3F3F46;
    border-bottom: 1px solid #F4F4F5;
    border-right: 1px solid #F4F4F5;
}

table td:last-child {
    border-right: none;
}

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

table tr:nth-child(even) {
    background: #FAFAFA;
}

table tr:hover {
    background: #F4F4F5;
}

/* Pricing Table (specific overrides) */
.pricing-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.pricing-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-stone-200);
}

.pricing-table th.highlight {
    font-weight: 600;
    color: var(--color-accent);
    background: rgba(37,99,235,0.05);
    border-radius: 8px 8px 0 0;
}

.pricing-table td {
    padding: 12px 16px;
    color: var(--color-secondary);
}

.pricing-table td.highlight {
    background: rgba(37,99,235,0.05);
}

.pricing-table tr.striped {
    background: rgba(250,250,250,0.5);
}

.pricing-table tr:not(:last-child) {
    border-bottom: 1px solid var(--color-stone-100);
}

.pricing-table tr:last-child td.highlight {
    border-radius: 0 0 8px 8px;
}

/* ----------------------------------------------------------------
   Checkmark icon for pricing features
   ---------------------------------------------------------------- */
.check-icon {
    width: 16px;
    height: 16px;
    color: var(--color-success);
    flex-shrink: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-secondary);
}

/* ----------------------------------------------------------------
   Security Section (Dark)
   ---------------------------------------------------------------- */
.section-security {
    background: #09090B;
    color: white;
}

.security-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #1A1A2E;
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 500;
    color: #7DD3FC;
}

/* ----------------------------------------------------------------
   Eyebrow / Pill Badge
   ---------------------------------------------------------------- */
.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-stone-50);
    border-radius: 9999px;
}

.eyebrow-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
}

.eyebrow-pill .label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Trust Badges
   ---------------------------------------------------------------- */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    font-size: 13px;
    color: var(--color-muted);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trust-badge svg {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

/* ----------------------------------------------------------------
   Footer Responsive
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .managemyclaw-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .managemyclaw-footer-brand {
        grid-column: span 2 !important;
    }
}

/* ----------------------------------------------------------------
   Section-specific background colors (applied via inline styles
   in the pattern, but also available as classes)
   ---------------------------------------------------------------- */
.bg-security { background: #09090B; }
.bg-stone-warm { background: #FAFAF9; }
.bg-gradient-cta {
    background: linear-gradient(to bottom, #FFFFFF, rgba(250,250,249,0.5));
}

/* ----------------------------------------------------------------
   Pricing Band Specific Styles
   ---------------------------------------------------------------- */
.pricing-band-standard {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 1px 12px -2px rgba(0,0,0,0.06);
    border-left: 4px solid var(--color-zinc-300);
}

.pricing-band-popular {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 4px 24px -4px rgba(37,99,235,0.15);
    border: 2px solid var(--color-accent);
    border-left: 4px solid var(--color-blue-500);
    position: relative;
}

.pricing-band-popular .badge {
    position: absolute;
    top: -12px;
    left: 32px;
    padding: 4px 12px;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.pricing-band-addon {
    background: var(--color-stone-50);
    border-radius: 12px;
    padding: 24px 32px;
}

/* ----------------------------------------------------------------
   Quote Card Icon
   ---------------------------------------------------------------- */
.quote-icon {
    width: 24px;
    height: 24px;
    color: var(--color-stone-200);
    margin-bottom: 16px;
}

/* ----------------------------------------------------------------
   WordPress Block Overrides
   ---------------------------------------------------------------- */

/* Remove default WordPress block margins/padding that conflict */
.wp-block-group.managemyclaw-section {
    margin: 0;
    padding: 0;
}

/* Ensure wp:html blocks don't get constrained */
.wp-block-html {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Override editor width constraints for full-width sections */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .wp-block-group > main > .wp-block-post-content > .wp-block-html {
    max-width: none;
}

/* Ensure post content doesn't constrain our sections */
.entry-content > .wp-block-html,
.wp-block-post-content > .wp-block-html {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ----------------------------------------------------------------
   Utility Helpers
   ---------------------------------------------------------------- */
.max-w-2xl { max-width: 672px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-14 { margin-top: 56px; }
.mt-16 { margin-top: 64px; }

.p-6 { padding: 24px; }
.p-7 { padding: 28px; }
.p-8 { padding: 32px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-8 > * + * { margin-top: 32px; }
.space-y-10 > * + * { margin-top: 40px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }

.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-flex { display: inline-flex; }

.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

.border-t { border-top: 1px solid var(--color-zinc-200); }
.border-b { border-bottom: 1px solid var(--color-zinc-200); }
.border-stone-200 { border-color: var(--color-stone-200); }

.overflow-x-auto { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.w-full { width: 100%; }
.min-w-0 { min-width: 0; }

.opacity-80 { opacity: 0.8; }

/* ----------------------------------------------------------------
   Responsive Visibility
   ---------------------------------------------------------------- */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:text-right { text-align: right; }
    .md\:col-span-2 { grid-column: span 2; }
    .md\:col-span-3 { grid-column: span 3; }
    .md\:w-48 { width: 192px; }
    .md\:p-8 { padding: 32px; }
    .md\:px-8 { padding-left: 32px; padding-right: 32px; }
    .md\:hidden { display: none; }
    .hidden.md\:flex { display: flex; }
    .hidden.md\:block { display: block; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:col-span-2 { grid-column: span 2; }
    .lg\:py-24 { padding-top: 96px; padding-bottom: 96px; }
    .lg\:text-\[3\.75rem\] { font-size: 3.75rem; }
    .lg\:gap-16 { gap: 64px; }
}

/* ----------------------------------------------------------------
   Additional Tailwind Utility Classes (from original design HTML)
   These mirror the Tailwind CDN classes used in the source markup
   so the WordPress theme renders identically without Tailwind.
   ---------------------------------------------------------------- */

/* --- Arbitrary size classes --- */
.text-\[2\.5rem\] { font-size: 2.5rem; }
.text-\[3\.25rem\] { font-size: 3.25rem; }
.text-\[3\.75rem\] { font-size: 3.75rem; }
.text-\[15px\] { font-size: 15px; }
.text-\[13px\] { font-size: 13px; }
.text-\[12px\] { font-size: 12px; }
.text-\[11px\] { font-size: 11px; }
.text-\[#2563EB\] { color: #2563EB; }
.text-\[#666\] { color: #666; }
.text-\[#A1A1AA\] { color: #A1A1AA; }
.text-\[#7DD3FC\] { color: #7DD3FC; }

.w-\[18px\] { width: 18px; }
.h-\[18px\] { height: 18px; }
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[960px\] { max-width: 960px; }
.max-w-\[640px\] { min-width: 640px; }
.min-w-\[640px\] { min-width: 640px; }
.max-w-\[200px\] { max-width: 200px; }

/* --- Leading / line-height --- */
.leading-\[1\.05\] { line-height: 1.05; }

/* --- Z-index --- */
.z-50 { z-index: 50; }

/* --- Positioning --- */
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.left-8 { left: 32px; }
.-top-3 { top: -12px; }
.-mr-2 { margin-right: -8px; }
.-mx-5 { margin-left: -20px; margin-right: -20px; }

/* --- Width / Height --- */
.w-1\.5 { width: 6px; }
.h-1\.5 { height: 6px; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.w-3\.5 { width: 14px; }
.h-3\.5 { height: 14px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.w-6 { width: 24px; }
.h-6 { height: 24px; }
.w-7 { width: 28px; }
.h-7 { height: 28px; }
.w-9 { width: 36px; }
.h-9 { height: 36px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.w-12 { width: 48px; }
.h-12 { height: 48px; }
.h-16 { height: 64px; }
.w-px { width: 1px; }

/* --- Padding --- */
.p-2 { padding: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-6 { padding-top: 24px; }
.pt-28 { padding-top: 112px; }
.pb-6 { padding-bottom: 24px; }
.pb-16 { padding-bottom: 64px; }
.pb-20 { padding-bottom: 80px; }
.pr-8 { padding-right: 32px; }

/* --- Margin --- */
.mb-1\.5 { margin-bottom: 6px; }
.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.ml-1\.5 { margin-left: 6px; }
.ml-2 { margin-left: 8px; }
.ml-4 { margin-left: 16px; }
.ml-8 { margin-left: 32px; }
.ml-10 { margin-left: 40px; }
.ml-12 { margin-left: 48px; }

/* --- Gap --- */
.gap-0 { gap: 0; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2\.5 { gap: 10px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }
.gap-x-6 { column-gap: 24px; }
.gap-x-8 { column-gap: 32px; }
.gap-x-12 { column-gap: 48px; }
.gap-y-0 { row-gap: 0; }
.gap-y-2 { row-gap: 8px; }

/* --- Flexbox --- */
.flex-1 { flex: 1 1 0%; }
.justify-end { justify-content: flex-end; }
.items-baseline { align-items: baseline; }
.items-start { align-items: flex-start; }

/* --- Grid --- */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.col-span-2 { grid-column: span 2; }

/* --- Background colors (Tailwind exact) --- */
.bg-stone-50 { background-color: #FAFAF9; }
.bg-zinc-50 { background-color: #FAFAFA; }
.bg-zinc-100 { background-color: #F4F4F5; }
.bg-white { background-color: #FFFFFF; }
.bg-ink { background-color: #09090B; }
.bg-accent { background-color: #2563EB; }
.bg-\[\#FAFAF9\] { background-color: #FAFAF9; }
.bg-\[\#09090B\] { background-color: #09090B; }
.bg-\[\#1A1A2E\] { background-color: #1A1A2E; }
.bg-blue-50 { background-color: #EFF6FF; }
.bg-green-50 { background-color: #F0FDF4; }
.bg-amber-50 { background-color: #FFFBEB; }
.bg-violet-50 { background-color: #F5F3FF; }
.bg-cyan-50 { background-color: #ECFEFF; }
.bg-rose-50 { background-color: #FFF1F2; }
.bg-sky-50 { background-color: #F0F9FF; }
.bg-red-500 { background-color: #EF4444; }
.bg-blue-500 { background-color: #3B82F6; }
.bg-sky-500 { background-color: #0EA5E9; }
.bg-purple-500 { background-color: #A855F7; }
.bg-green-500 { background-color: #22C55E; }
.bg-cyan-500 { background-color: #06B6D4; }
.bg-indigo-500 { background-color: #6366F1; }
.bg-zinc-800 { background-color: #27272A; }
.bg-yellow-500 { background-color: #EAB308; }
.bg-blue-600 { background-color: #2563EB; }
.bg-orange-500 { background-color: #F97316; }
.bg-violet-600 { background-color: #7C3AED; }
.bg-emerald-600 { background-color: #059669; }
.bg-success { background-color: #16A34A; }
.bg-accent\/5 { background-color: rgba(37,99,235,0.05); }
.bg-zinc-50\/50 { background-color: rgba(250,250,250,0.5); }

/* --- Text colors --- */
.text-ink { color: #09090B; }
.text-secondary { color: #3F3F46; }
.text-muted { color: #71717A; }
.text-faint { color: #A1A1AA; }
.text-accent { color: #2563EB; }
.text-success { color: #16A34A; }
.text-danger { color: #DC2626; }
.text-white { color: #FFFFFF; }
.text-zinc-600 { color: #52525B; }
.text-zinc-400 { color: #A1A1AA; }
.text-blue-600 { color: #2563EB; }
.text-green-600 { color: #16A34A; }
.text-amber-600 { color: #D97706; }
.text-violet-600 { color: #7C3AED; }
.text-cyan-600 { color: #0891B2; }
.text-rose-600 { color: #E11D48; }
.text-sky-600 { color: #0284C7; }
.text-danger\/80 { color: rgba(220,38,38,0.8); }

/* --- Border colors (Tailwind exact) --- */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-l-4 { border-left: 4px solid; }
.border-t-2 { border-top: 2px solid; }
.border-stone-200 { border-color: #E7E5E4; }
.border-stone-100 { border-color: #F5F5F4; }
.border-zinc-100 { border-color: #F4F4F5; }
.border-zinc-200 { border-color: #E4E4E7; }
.border-zinc-200\/60 { border-color: rgba(228,228,231,0.6); }
.border-zinc-300 { border-color: #D4D4D8; }
.border-t-blue-500 { border-top-color: #3B82F6; }
.border-t-green-500 { border-top-color: #22C55E; }
.border-t-amber-500 { border-top-color: #F59E0B; }
.border-t-violet-500 { border-top-color: #8B5CF6; }
.border-t-cyan-500 { border-top-color: #06B6D4; }
.border-l-zinc-300 { border-left-color: #D4D4D8; }
.border-l-zinc-400 { border-left-color: #A1A1AA; }
.border-l-blue-500 { border-left-color: #3B82F6; }

/* --- Ring utility --- */
.ring-2 { box-shadow: 0 0 0 2px var(--color-accent); }
.ring-accent { --tw-ring-color: #2563EB; }

/* --- Shadow utilities --- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-\[0_2px_20px_-4px_rgba\(0\,0\,0\,0\.06\)\] { box-shadow: 0 2px 20px -4px rgba(0,0,0,0.06); }
.shadow-\[0_1px_12px_-2px_rgba\(0\,0\,0\,0\.06\)\] { box-shadow: 0 1px 12px -2px rgba(0,0,0,0.06); }
.shadow-\[0_1px_12px_-2px_rgba\(0\,0\,0\,0\.05\)\] { box-shadow: 0 1px 12px -2px rgba(0,0,0,0.05); }
.shadow-\[0_1px_8px_-2px_rgba\(0\,0\,0\,0\.04\)\] { box-shadow: 0 1px 8px -2px rgba(0,0,0,0.04); }
.shadow-\[0_4px_24px_-4px_rgba\(37\,99\,235\,0\.15\)\] { box-shadow: 0 4px 24px -4px rgba(37,99,235,0.15); }
.shadow-accent\/20 { --tw-shadow-color: rgba(37,99,235,0.2); }

/* --- Transition utilities --- */
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: ease; transition-duration: 200ms; }
.transition-all { transition-property: all; transition-timing-function: ease; transition-duration: 200ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }

/* --- Misc --- */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.scroll-smooth { scroll-behavior: smooth; }
.whitespace-nowrap { white-space: nowrap; }
.group { /* Tailwind group - used for group-hover */ }

/* --- Gradient backgrounds --- */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-white { --tw-gradient-from: #FFFFFF; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-zinc-50\/50 { --tw-gradient-to: rgba(250,250,250,0.5); }

/* Simplified gradient for final CTA section */
.bg-gradient-to-b.from-white.to-zinc-50\/50 {
    background: linear-gradient(to bottom, #FFFFFF, rgba(250,250,249,0.5));
}

/* --- Hover states (using plain CSS since no JS framework) --- */
.hover\:text-ink:hover { color: #09090B; }
.hover\:bg-secondary:hover { background-color: #3F3F46; }
.hover\:bg-accent-hover:hover { background-color: #1D4ED8; }
.hover\:bg-stone-50:hover { background-color: #FAFAF9; }
.hover\:bg-white:hover { background-color: #FFFFFF; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.hover\:border-zinc-200:hover { border-color: #E4E4E7; }

/* --- Responsive: md (768px) --- */
@media (min-width: 768px) {
    .md\:pt-36 { padding-top: 144px; }
    .md\:pb-20 { padding-bottom: 80px; }
    .md\:pb-28 { padding-bottom: 112px; }
    .md\:gap-16 { gap: 64px; }
    .md\:text-\[2\.5rem\] { font-size: 2.5rem; }
    .md\:text-\[3\.25rem\] { font-size: 3.25rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .md\:col-span-2 { grid-column: span 2; }
    .md\:col-span-3 { grid-column: span 3; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:text-right { text-align: right; }
    .md\:w-48 { width: 192px; }
    .md\:p-8 { padding: 32px; }
    .md\:px-8 { padding-left: 32px; padding-right: 32px; }
    .md\:hidden { display: none; }
    .md\:border-b-0 { border-bottom: 0; }
    .md\:col-span-1 { grid-column: span 1; }
    .md\:mx-0 { margin-left: 0; margin-right: 0; }
    .hidden.md\:flex { display: flex; }
    .hidden.md\:block { display: block; }
}

/* --- Responsive: sm (640px) --- */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:flex { display: flex; }
    .sm\:gap-16 { gap: 64px; }
    .sm\:items-center { align-items: center; }
    .sm\:block { display: block; }
    .hidden.sm\:block { display: block; }
}

/* --- Responsive: lg (1024px) --- */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:col-span-2 { grid-column: span 2; }
    .lg\:py-24 { padding-top: 96px; padding-bottom: 96px; }
    .lg\:text-\[3\.75rem\] { font-size: 3.75rem; }
    .lg\:gap-16 { gap: 64px; }
}

/* --- Space-y helpers (additional) --- */
.space-y-1\.5 > * + * { margin-top: 6px; }
.space-y-2\.5 > * + * { margin-top: 10px; }

/* ================================================================
   ManageMyClaw Homepage Pattern - Responsive Layout Classes
   These target custom class names used in patterns/homepage.php
   ================================================================ */

/* Hero grid: stacked on mobile, 2-col on md+ */
.managemyclaw-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 768px) {
    .managemyclaw-hero-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
    }
    .section-hero {
        padding-top: 144px;
        padding-bottom: 112px;
    }
}

/* Security grid: stacked on mobile, 2-col on lg+ */
.managemyclaw-security-grid {
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .managemyclaw-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FAQ grid: 1-col on mobile, 2-col on md+ */
.managemyclaw-faq-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .managemyclaw-faq-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 48px;
    }
}

/* Pricing row: stacked on mobile, horizontal on md+ */
.managemyclaw-pricing-row {
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 768px) {
    .managemyclaw-pricing-row {
        flex-direction: row;
        align-items: center;
    }
    .managemyclaw-pricing-name {
        width: 192px;
        flex-shrink: 0;
    }
    .managemyclaw-pricing-cta {
        width: 192px;
        flex-shrink: 0;
        text-align: right;
    }
}

/* Wide card spans 2 cols on md+ */
@media (min-width: 768px) {
    .managemyclaw-wide-card {
        grid-column: span 2;
    }
}

/* Section padding responsive upgrade */
@media (min-width: 1024px) {
    .section-standard {
        padding: 96px 0 !important;
    }
}

/* Steps grid: auto-fit on small, 5-col on md+ */
.managemyclaw-steps-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .managemyclaw-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    .managemyclaw-steps-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ----------------------------------------------------------------
   Contact Form 7 — Custom ManageMyClaw Form Design
   ---------------------------------------------------------------- */

/* Custom form layout */
.mmc-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mmc-form-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mmc-form-row-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .mmc-form-row-2col {
        grid-template-columns: 1fr 1fr;
    }
}

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

.mmc-label {
    font-size: 13px;
    font-weight: 600;
    color: #09090B;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

.mmc-required {
    color: #2563EB;
    font-weight: 400;
}

.mmc-form-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

@media (min-width: 640px) {
    .mmc-form-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.mmc-form-note {
    font-size: 12px;
    color: #A1A1AA;
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.mmc-submit-btn,
.mmc-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: #09090B;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mmc-submit-btn:hover,
.mmc-form .wpcf7-submit:hover {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.mmc-submit-btn:active,
.mmc-form .wpcf7-submit:active {
    background: #1D4ED8;
    transform: translateY(0);
}

/* Legacy wrapper (keep for compat) */
.managemyclaw-cf7-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Field row (side-by-side on desktop) */
.cf7-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .cf7-field-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Field group */
.cf7-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* CF7 labels - match ManageMyClaw design */
.wpcf7 .form-label,
.managemyclaw-cf7-form .form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #3F3F46;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    margin-bottom: 2px;
}

/* All form input fields */
.mmc-form input[type="text"],
.mmc-form input[type="email"],
.mmc-form input[type="tel"],
.mmc-form input[type="url"],
.mmc-form textarea,
.mmc-form select,
.wpcf7 .form-input,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    color: #09090B;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}

.mmc-form textarea,
.wpcf7 textarea {
    min-height: 160px;
    resize: vertical;
}

/* Placeholder styling */
.mmc-form input::placeholder,
.mmc-form textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #A1A1AA;
    font-weight: 400;
}

/* Focus states */
.mmc-form input:focus,
.mmc-form textarea:focus,
.mmc-form select:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Select dropdown for mmc-form */
.mmc-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-right: 40px;
    cursor: pointer;
}

/* Form control wraps should be full width */
.mmc-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.wpcf7 select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-right: 40px;
    cursor: pointer;
}

/* Placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #A1A1AA;
    font-weight: 400;
}

/* Focus state */
.wpcf7 .form-input:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Submit button */
.wpcf7 .cf7-submit-btn,
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #09090B;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1.5;
}

.wpcf7 .cf7-submit-btn:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
    background: #3F3F46;
}

.wpcf7 .cf7-submit-btn:active,
.wpcf7 input[type="submit"]:active,
.wpcf7 .wpcf7-submit:active {
    background: #27272A;
}

/* Submit wrap */
.cf7-submit-wrap {
    padding-top: 4px;
}

/* Validation error messages */
.wpcf7-not-valid-tip {
    color: #DC2626;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    margin-top: 4px;
    display: block;
}

/* Invalid field border */
.wpcf7 .wpcf7-not-valid {
    border-color: #DC2626;
}

.wpcf7 .wpcf7-not-valid:focus {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Response output messages */
.wpcf7-response-output {
    margin: 16px 0 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

/* Success message */
.wpcf7 form.sent .wpcf7-response-output {
    color: #16A34A;
    background: #F0FDF4;
    border: 1px solid #BBF7D0 !important;
}

/* Error message */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA !important;
}

/* Validation error message */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    color: #D97706;
    background: #FFFBEB;
    border: 1px solid #FDE68A !important;
}

/* Spam message */
.wpcf7 form.spam .wpcf7-response-output {
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA !important;
}

/* Spinner */
.wpcf7 .wpcf7-spinner {
    margin-left: 12px;
}

/* Remove default CF7 paragraph spacing */
.wpcf7 p {
    margin: 0;
}

/* Ensure CF7 form-control spans do not add unwanted styles */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    position: relative;
    width: 100%;
}

/* CF7 wraps fields in p tags - make them full width */
.managemyclaw-cf7-form p {
    margin: 0;
    width: 100%;
}

/* CF7 inputs should span full width of their container */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* CF7 form should be full width */
.wpcf7 {
    width: 100%;
}

.wpcf7-form {
    width: 100%;
}

/* Loading state on submit */
.wpcf7 form.submitting .wpcf7-submit {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Hide form fields after successful submission */
.wpcf7 form.sent .mmc-form {
    display: none !important;
}

/* Success message - prominent green card */
.wpcf7 form.sent .wpcf7-response-output {
    color: #15803D !important;
    background: #F0FDF4 !important;
    border: 2px solid #BBF7D0 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-align: center;
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Error message - red box */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    color: #DC2626 !important;
    background: #FEF2F2 !important;
    border: 2px solid #FECACA !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
}

/* Validation error - amber box */
.wpcf7 form.invalid .wpcf7-response-output {
    color: #92400E !important;
    background: #FFFBEB !important;
    border: 2px solid #FDE68A !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
}

/* Checkbox grid layout */
.mmc-form .wpcf7-checkbox .wpcf7-list-item,
.mmc-form .wpcf7-acceptance .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 8px 0;
    font-size: 14px;
    color: #3F3F46;
}

.mmc-form .wpcf7-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563EB;
}

/* ----------------------------------------------------------------
   Legal Pages (Privacy, Terms, Refund) — Clean typography
   ---------------------------------------------------------------- */
.legal-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}

.legal-page-content {
    max-width: 800px;
}

.legal-page h1 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #09090B;
    margin-bottom: 16px;
}

.legal-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #09090B;
    margin: 48px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E4E4E7;
}

.legal-page h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #09090B;
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F4F4F5;
}

.legal-page h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #3F3F46;
    margin: 28px 0 10px;
}

.legal-page p {
    font-size: 15px;
    line-height: 1.8;
    color: #3F3F46;
    margin-bottom: 16px;
}

.legal-page ul,
.legal-page ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.legal-page li {
    font-size: 15px;
    line-height: 1.8;
    color: #3F3F46;
    margin-bottom: 8px;
}

.legal-page strong {
    color: #09090B;
    font-weight: 600;
}

.legal-page a {
    color: #2563EB;
    text-decoration: none;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-page hr {
    border: none;
    border-top: 1px solid #E4E4E7;
    margin: 40px 0;
}

.legal-page table {
    margin: 20px 0 28px;
    font-size: 14px;
}

.legal-page table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.legal-page blockquote {
    border-left: 3px solid #2563EB;
    padding: 16px 24px;
    margin: 24px 0;
    background: #FAFAFA;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #3F3F46;
}

/* Legal page notice/alert box */
.legal-notice {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    color: #92400E;
    line-height: 1.6;
}

/* Legal page meta (dates, etc.) */
.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: #A1A1AA;
    margin-bottom: 24px;
}

/* ----------------------------------------------------------------
   Prose Legal — Typography for legal pages using .prose-legal class
   (Used in page content HTML; mirrors .legal-page styles)
   ---------------------------------------------------------------- */
.prose-legal h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #09090B;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E4E4E7;
    line-height: 1.3;
}

.prose-legal h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #3F3F46;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.prose-legal p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #3F3F46;
    margin-bottom: 1rem;
}

.prose-legal ul,
.prose-legal ol {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #3F3F46;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose-legal ul { list-style-type: disc; }
.prose-legal ol { list-style-type: decimal; }

.prose-legal li {
    margin-bottom: 0.5rem;
}

.prose-legal a {
    color: #2563EB;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose-legal a:hover {
    color: #1D4ED8;
}

.prose-legal strong {
    color: #09090B;
}

.prose-legal hr {
    border: none;
    border-top: 1px solid #E4E4E7;
    margin: 2.5rem 0;
}

.prose-legal table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.prose-legal table th {
    text-align: left;
    font-weight: 600;
    color: #09090B;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #E7E5E4;
    background: #FAFAF9;
}

.prose-legal table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #E7E5E4;
    color: #3F3F46;
    vertical-align: top;
}

/* ----------------------------------------------------------------
   Blog — Featured Image: border + shadow treatment
   Scoped to single posts only so blog listing cards (which already
   sit inside a bordered card container) don't get double-shadow.
   ---------------------------------------------------------------- */
.single .wp-block-post-featured-image {
    border-radius: 12px;
    border: 1px solid #D4D4D8;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.08);
}

.single .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    border-radius: 11px;
}

/* ----------------------------------------------------------------
   Blog listing — Equal-height cards
   Grid row height is set by the tallest card; all others must
   stretch to match it. Uses flexbox column so the date is always
   pinned to the bottom regardless of title/excerpt length.
   ---------------------------------------------------------------- */

/* Each <li> in the post template is a grid item — make it a flex column */
.wp-block-post-template > li {
    display: flex;
    flex-direction: column;
}

/* The outer card group fills its <li> */
.wp-block-post-template > li > .wp-block-group {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* The inner content group (title + excerpt + date) grows to fill remaining space */
.wp-block-post-template > li > .wp-block-group > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Pin the date to the bottom of every card */
.wp-block-post-template > li .wp-block-post-date {
    margin-top: auto;
    padding-top: 16px;
}




.mmc-post{max-width:100%\!important;margin:0\!important;padding:0\!important}