:root {
    /* Brand Identity (Authority Navy) */
    --primary-color: #0A2540;
    --secondary-color: #334E68;
    --accent-color: #2E5C8A;
    --main-bg: #ffffff;
    --alt-bg: #F0F4F8; /* Soft Blue/White */
    --main-text: #1a1a1a;
    --muted-text: #627D98;
    --border-stroke: #e1e8ed;
    --sharp-radius: 2px;
}


/* BASE STYLES */
body.marketing-site {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--main-text);
    background-color: var(--main-bg);
    line-height: 1.6;
}

/* BASE TEMPLATE OVERRIDES */
body.bg-light {
    background-color: var(--alt-bg) !important;
}

/* BETA WARNING BAR */
.bg-dark.text-white {
    background-color: var(--primary-color) !important;
}

/* NAVIGATION */
.navbar {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border-stroke);
    background-color: var(--main-bg);
}

.navbar-brand img {
    max-height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.navbar-brand span {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.nav-link {
    color: var(--secondary-color);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

/* BUTTONS */
.btn {
    border-radius: var(--sharp-radius);
    padding: 0.8rem 1.8rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}

/* Bootstrap Overrides */
.rounded-pill {
    border-radius: 50rem !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--main-bg);
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
}

.btn-outline-primary {
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--main-bg);
}

.btn-outline-secondary {
    border: 1.5px solid var(--border-stroke);
    color: var(--secondary-color);
    background-color: var(--main-bg);
}

.btn-outline-secondary:hover {
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

/* HERO BENTO (Layout) */
.hero-bento {
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 5rem 0 4rem;
    position: relative;
    background-image: url("../images/hero-image.fbab46a8478d.webp");
    background-size: cover;
    background-position: center;
}

.features-section-bg {
    background-image: url("../images/home-background.3e11bdee024b.webp");
    background-size: cover;
    background-position: center;
}

/* Specific text context for hero background */
.hero-bento-dark-text .hero-headline,
.hero-bento-dark-text .hero-sub {
    color: white;
}
.hero-bento-dark-text .text-muted {
    color: white !important;
    opacity: 0.7;
}
.hero-bento-dark-text .hero-sub { opacity: 0.85; }


.hero-headline {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.hero-sub {
    font-size: 1.15rem;
    color: var(--secondary-color);
    max-width: 480px; /* constrained for landing page alongside bento grid */
    line-height: 1.6;
}

/* Full-width variant — used on pages where text spans the whole container */
.hero-sub-wide {
    max-width: 100%;
}


/* BENTO GRID */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem; 
}

/* Base Bento Card */
.bento-card {
    background: white;
    border: 1px solid var(--border-stroke);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform, box-shadow;
}

/* Hover lift effect */
.bento-card:hover {
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.1);
    transform: translateY(-2px);
}

/* Bento utilities */
.bento-card-dark {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.bento-card-accent {
    background: var(--alt-bg);
}

/* Spanning classes */
.bento-span-2-col { grid-column: span 2; }
.bento-span-2-row { grid-row: span 2; }
.bento-span-3-col { grid-column: span 3; }


/* Bento Content Styles */
.bento-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* Dark card icon color variation */
.bento-card-dark .bento-icon {
    color: rgba(255,255,255,0.8);
}

.bento-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted-text);
    margin-bottom: 0.3rem;
}

/* Dark card label color variation */
.bento-card-dark .bento-label {
    color: rgba(255,255,255,0.6);
}

.bento-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.bento-title-light {
    color: white;
}

.bento-title-lg {
    font-size: 1.3rem;
    line-height: 1.25;
    color: white;
}

/* Body text on dark bento cards */
.bento-body-muted {
    color: rgba(255, 255, 255, 0.75);
}

/* Icon on dark bento cards */
.mosaic-icon-light {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Wide bento card — used for the pricing banner; inner div handles padding */
.bento-card-wide {
    padding: 0;
}

/* Accent-dark card — accent-color background, white text */
.bento-card-accent-dark {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.bento-card-accent-dark .bento-label { color: rgba(255,255,255,0.6); }
.bento-card-accent-dark .bento-title { color: white; }
.bento-card-accent-dark .bento-body-muted { color: rgba(255,255,255,0.75); }

/* Mini job preview card (used on dark bento cards) */
.mini-job-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.mini-job-title {
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.mini-job-meta {
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Skeleton loader bars */
.bento-bar {
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    margin-top: 0.5rem;
}

.bento-bar-short {
    width: 70%;
    margin-top: 0.25rem;
}


/* Bootstrap utility overrides */
.bg-white { background-color: var(--main-bg) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.text-white { color: white !important; }
.text-success { color: #28a745 !important; }
.text-info { color: #17a2b8 !important; }

/* Radii overrides */
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 2rem !important; }

/* shadows */
.shadow { box-shadow: 0 1rem 3rem rgba(10, 37, 64, 0.1) !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(10, 37, 64, 0.05) !important; }


/* FEATURE LABELS */
.feature-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--muted-text);
    letter-spacing: 1.5px;
    display: block;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

.brand-title {
    color: var(--primary-color);
    font-weight: 700;
}

.lead {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* BRAND LINK — inline link style */
.brand-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.brand-link:hover {
    color: var(--primary-color);
}


/* FEATURE LISTS (About Page) */
.feature-title { color: var(--accent-color); font-weight: 700; }
.feature-list { list-style: none; padding-left: 0; }
.feature-list li { font-size: 1.05rem; padding: 0.8rem 0; color: var(--primary-color); font-weight: 500;}
.feature-list li::before { content: "•"; color: var(--accent-color); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;}


/* BOOTSTRAP FORM OVERRIDES */
.form-control {
    border: 1px solid var(--border-stroke);
    border-radius: var(--sharp-radius);
    padding: 0.8rem 1rem;
}

.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: none;
}


/* LANDING PAGE SECTIONS */
.member-section {
    background-color: var(--main-bg);
    border-top: 1px solid var(--border-stroke);
    border-bottom: 1px solid var(--border-stroke);
}


/* SIGNUP / AUTH PAGE LAYOUTS */
.signup-page-wrapper {
    padding: 4rem 0;
}

/* Progress bar height variants used on signup page */
.progress-strength { height: 6px; }
.progress-signup   { height: 10px; }

.login-max-width {
    max-width: 500px;
}

.signup-card, .system-note {
    background: var(--main-bg);
    border: 1px solid var(--border-stroke);
    border-radius: var(--sharp-radius);
    padding: 2rem;
}

.success-icon { color: #28a745; }
.text-danger { color: #dc3545 !important; }


/* LEGAL HUB STYLES */
.legal-header {
    background-color: var(--alt-bg);
    border-bottom: 1px solid var(--border-stroke);
    padding: 4rem 0;
}

.legal-title {
    color: var(--primary-color);
    font-weight: 700;
}

.legal-sidebar {
    background-color: var(--alt-bg);
    border: 1px solid var(--border-stroke);
    padding: 1.5rem;
    border-radius: var(--sharp-radius);
    position: sticky;
    top: 2rem;
}

.legal-body {
    line-height: 1.8;
    color: var(--main-text);
}

.legal-body h2, .legal-body h3 {
    color: var(--primary-color);
    margin-top: 2.5rem;
    font-weight: 600;
}


/* FAQ PAGE */
.faq-section-heading {
    color: var(--primary-color);
}


/* SITE FOOTER */
.site-footer {
    background-color: var(--alt-bg);
    border-top: 1px solid var(--border-stroke);
    padding: 4rem 0 2rem;
}

.footer-heading {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.footer-link {
    color: var(--muted-text);
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-color);
}

.footer-email {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: block;
    /* The address carries a <wbr> after the @ so it breaks there first. This is
       the backstop for a column narrower still: only 'anywhere' reduces the
       element's min-content width, which is what forces the column open and
       scrolls the page sideways. */
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-stroke);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--muted-text);
    margin-bottom: 0;
}


/* SECTION HEADINGS */
.main-grid-headline {
    color: var(--primary-color);
    letter-spacing: -0.03em;
}

/* CTA MAX WIDTH */
.cta-max-width {
    max-width: 400px;
}


/* ABOUT PAGE — bento grid section with brick background */
.bento-bg-section {
    position: relative;
    background-image: url("../images/hero-image.fbab46a8478d.webp");
    background-position: center;
    background-size: cover;
}

/* CTA BOX MAX WIDTH */
.cta-max-width-lg {
    max-width: 600px;
}


/* TEMPLATE SELECT PAGE */
/* Column flex so .template-card-body can absorb the spare height a shorter
   card gains from its taller row siblings, and push its CTAs to the bottom.
   Without it the two buttons sit at a different height in every card as soon
   as one description wraps. */
.template-card-new {
    border: 1px solid var(--border-stroke);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.template-grid-section {
    background-image: url("../images/home-background.3e11bdee024b.webp");
    background-size: cover;
    background-position: center;
    position: relative;
}

.template-grid-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.template-grid-section .container {
    position: relative;
}

.template-card-new:hover {
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.12);
    transform: translateY(-2px);
}

/* Square, to match the 900x900 preview_*.webp design pictures exactly.
   A square image in a square box means object-fit: cover crops nothing —
   the whole screenshot shows at every breakpoint, just scaled down. That
   matters most on mobile, where the card is the full viewport width and a
   hero-only crop reads as a colour field rather than a website.
   cover/top are kept as the safe failure mode if a non-square image is
   ever dropped in; marketing/tests/test_design_preview_images.py guards
   the squareness so that fallback should never be needed. */
.template-thumb-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;          /* never squash the picture to fit a flex card */
    aspect-ratio: 1 / 1;
    background: var(--alt-bg);
    display: block;
}

.template-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: filter 0.2s ease;
    background: var(--alt-bg);
}

.template-thumb-wrap:hover .template-thumb {
    filter: brightness(1.05);
}

.template-card-body {
    padding: 1.25rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* margin-top: auto pins the CTAs to the bottom of the card; padding-top keeps
   a minimum gap from the description when there is no spare height to absorb.
   Deliberately not Bootstrap's `mt-3 mt-auto` — those two set the same
   property and the winner would depend on utility source order. */
.template-card-actions {
    margin-top: auto;
    padding-top: 1rem;
}

.template-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.1rem;
}

/* Feature badges on intro section */
.badge-feature {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.badge-single-page {
    display: inline-block;
    background: var(--alt-bg);
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.text-brand { color: var(--primary-color); }

.intro-sub { max-width: 520px; }

/* FEATURES SECTION — feature cards on brick background */

.features-section {
    position: relative;
}

/* Subtle overlay so text reads cleanly against the brick texture */
.features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.features-section .container {
    position: relative;
}

.features-intro-sub {
    max-width: 520px;
    font-size: 1.05rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.feature-card-span-2 { grid-column: span 2; }

/* Base feature card */
.feature-card {
    border-radius: 12px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.15);
}

/* Dark variant — matches bento-card-dark */
.feature-card-dark {
    background: var(--primary-color);
    color: white;
}

/* Light variant — matches bento-card-accent */
.feature-card-light {
    background: white;
    border: 1px solid var(--border-stroke);
}

.feature-card-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-card-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.feature-card-icon-accent {
    color: var(--primary-color);
}

.feature-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.1rem;
}

.feature-card-light .feature-card-label {
    color: var(--muted-text);
}

.feature-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: white;
    margin-bottom: 0;
    letter-spacing: -0.02em;
}

.feature-card-title-dark {
    color: var(--primary-color);
}

.feature-card-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.feature-card-body-dark {
    color: var(--secondary-color);
}

/* Decorative rule at bottom of dark cards */
.feature-card-rule {
    height: 3px;
    width: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    margin-top: 1.5rem;
}

/* HOW IT WORKS STEPS */

.how-it-works-step { padding: 2rem; height: 100%; }
.step-number-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; background: var(--primary-color);
    color: white; border-radius: 50%; font-weight: 700; margin-bottom: 1rem;
}


/* RESPONSIVE DESIGN (Media Queries) */

@media (max-width: 991px) {
    .hero-bento { padding: 3rem 0; min-height: auto; }
    
    /* Stack bento cards in 2 columns on tablets */
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Reset row span so cards don't overlap strangely */
    .bento-span-2-row { grid-row: span 1; }
    .bento-span-3-col { grid-column: span 2; }
}

@media (max-width: 575px) {
    /* Stack cards in a single column on mobile */
    .bento-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    
    /* Reset all spans */
    .bento-span-2-col { grid-column: span 1; }
    .bento-span-2-row { grid-row: span 1; }
    .bento-span-3-col { grid-column: span 1; }
    .feature-card-span-2 { grid-column: span 1; }
    
    .feature-card { min-height: auto; }
}


/* SCROLL REVEAL — JS-driven (scroll-reveal-marketing.js adds .is-visible)
 * .fade-up starts hidden and translated; .fade-up.is-visible transitions to visible.
 * Stagger delay is set via data-reveal-delay attribute (read by the JS).
 * prefers-reduced-motion is handled in the JS — no transition fires at all. */

.fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Honeypot field — hidden from real users, bots auto-fill it.
   position:absolute + left:-9999px moves it off-screen without
   display:none, which some bots detect and skip. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.last-used-badge {
    font-size: 0.65rem;
}

.template-preview-iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

/* Bootstrap sizes a .row's negative side margins from --bs-gutter-x, and .g-5
   raises it to 3rem, so the row pulls 24px wider than its column box on each
   side while the .container's own 1.5rem gives only 12px of padding to absorb
   it. Below 576px the container is full-bleed with no slack and the page
   scrolls sideways by 12px. These columns stack at this width, so the
   horizontal gutter is unused; .g-5's vertical gutter is untouched. The tenant
   and Aldenvere stylesheets carry the same rule for their own scopes. */
@media (max-width: 575.98px) {
    .container > .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}