/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal jank/scroll from any component on small viewports */
html, body { overflow-x: hidden; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* --------------------------------------------------
   Design Tokens (Spacing, Typography, Radii, Effects)
   These provide a unified, compact rhythm across pages.
   Adjust values here to globally tune density.
--------------------------------------------------- */
:root {
    /* Computed at runtime via JS to reflect actual fixed header height */
    --header-height: 70px;
    /* Spacing Scale (base = 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 72px;

    /* Section Vertical Paddings (compact vs standard) */
    --section-pad-y: var(--space-10);          /* desktop default 56px */
    --section-pad-y-lg: var(--space-12);       /* hero / prominent 72px */
    --section-pad-y-sm: var(--space-8);        /* reduced 40px */
    --section-pad-y-xs: var(--space-6);        /* tight 24px */

    /* Responsive overrides applied via media queries later */
    --section-pad-y-mobile: var(--space-8);    /* 40px */
    --section-pad-y-mobile-sm: var(--space-6); /* 24px */

    /* Typography (fluid clamps for headline scaling) */
    --font-h1: clamp(2.3rem, 3.8vw + 1rem, 3rem);
    --font-h2: clamp(1.75rem, 2.6vw + 0.9rem, 2.2rem);
    --font-h3: clamp(1.35rem, 1.8vw + 0.7rem, 1.6rem);
    --font-h4: 1.15rem;
    --font-h5: 1rem;
    --font-lead: 1.05rem;
    --font-body: 0.95rem;
    --font-small: 0.8rem;
    --font-card-title: 0.95rem;
    --font-card-desc: 0.78rem; /* was 0.72rem inline; slight increase for readability */
    --font-meta: 0.7rem;
    --font-badge: 0.55rem;
    --lh-tight: 1.15;
    --lh-base: 1.4;
    --lh-relaxed: 1.6;

    /* Radii & Effects */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);

    /* Content Max Width */
    --max-readable: 780px;
}

/* Utility Spacing Classes */
.pad-section     { padding: var(--section-pad-y) 0; }
.pad-section-lg  { padding: var(--section-pad-y-lg) 0; }
.pad-section-sm  { padding: var(--section-pad-y-sm) 0; }
.pad-section-xs  { padding: var(--section-pad-y-xs) 0; }

@media (max-width: 768px) {
    :root {
        --section-pad-y: var(--section-pad-y-mobile);
        --section-pad-y-lg: var(--section-pad-y-mobile); /* hero shrinks */
        --section-pad-y-sm: var(--section-pad-y-mobile-sm);
        --section-pad-y-xs: var(--section-pad-y-mobile-sm);
    }
    .hero { padding: var(--space-6) 0; }
    .team-member { flex-direction: column; padding: var(--space-7); gap: var(--space-6); }
}
/* (Legacy removed) SaaS section wrappers removed with consolidation */
body { background-color: #fff; }

/* Removed previous non-standard global zoom (html { zoom: 0.85; }) to respect user/browser zoom
    and improve accessibility. Layout now renders at true 100% scale. If a smaller overall scale is
    desired in the future, prefer adjusting root font-size (e.g., :root { font-size: 90%; }) and
    converting fixed px spacing to rem units instead of using the non-standard zoom property. */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Announcement Banner */
.announcement-banner {
    position: relative; /* sits in normal flow below fixed header via JS margin-top */
    text-align: center;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 999; /* just below header (1000) so header stays above while measuring */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    overflow: hidden; /* for collapse animation */
}

.announcement-banner.hidden {
    display: none;
}

.announcement-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.announcement-banner .icon {
    font-size: 1rem;
    opacity: 0.9;
}

.announcement-banner .message {
    flex: 1;
    text-align: center;
}

.announcement-banner .close-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    margin-left: auto;
}

.announcement-banner .close-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Banner Types */
.announcement-banner.info {
    /* Teal gradient distinct from purple hero */
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 65%, #0a4f48 100%);
    color: #f0fdfa;
    border-bottom: 2px solid #0b5f57;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 14px -4px rgba(0,0,0,0.18);
}

.announcement-banner.success {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: white;
}

.announcement-banner.warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
}

.announcement-banner.error {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

/* Banner Links */
.announcement-banner a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.announcement-banner a:hover {
    text-decoration: none;
    opacity: 0.9;
}

/* When an announcement banner sits below the fixed header, cancel additional top margins on banners */
header.header + .announcement-banner ~ .hero,
header.header + .announcement-banner ~ .page-header {
    margin-top: 0;
}

/* Docs: when no page-header is used, ensure the first docs section clears the fixed header */
header.header + .docs-section { margin-top: var(--header-height); }
/* If an announcement banner is present, place docs directly under it without extra gap */
header.header + .announcement-banner ~ .docs-section { margin-top: 0; }
/* When a page header precedes docs, no additional top margin is needed */
.page-header + .docs-section { margin-top: 0; }

/* Responsive Design */
@media (max-width: 768px) {
    .announcement-banner {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .announcement-banner-content {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    
    .announcement-banner .close-btn {
        position: absolute;
        top: 8px;
        right: 10px;
        margin-left: 0;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight:600; line-height:1.2; margin:0 0 .85rem; }
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-small); }

/* Typography Utilities */
.section-title { font-size: var(--font-h2); font-weight:700; line-height:1.15; margin:0 0 1.4rem; letter-spacing:-.5px; }
/* Specialized sizing for Timeline heading to sit between h2 and h3, consistent across breakpoints */
.timeline-heading { 
    font-size: clamp(1.4rem, 1.3vw + 1rem, 1.6rem);
    margin-top: 1.1rem; 
    margin-bottom: .35rem;
}
@media (max-width: 640px) {
    .timeline-heading { font-size: 1.28rem; line-height: 1.2; }
}
.section-lead { font-size: var(--font-lead); line-height: var(--lh-relaxed); color:#555; margin:0 0 1.5rem; }
.card-title { font-size: var(--font-card-title); font-weight:600; line-height: var(--lh-tight); margin: .15rem 0 .4rem; }
.meta-text { font-size: var(--font-meta); letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.small-text { font-size: var(--font-small); }
.badge { font-size: var(--font-badge); font-weight:600; letter-spacing:.45px; text-transform:uppercase; display:inline-block; }
.center { text-align:center; }
.muted { color:#666; }
.content-narrow { max-width: var(--max-readable); margin:0 auto; }
.content-tight p { margin-bottom:.85rem; }

/* Solution Card Typography */
.solution-card .solution-info h3 { font-size: var(--font-card-title); line-height: var(--lh-tight); text-align:center; }
.solution-card .solution-info p { font-size: var(--font-card-desc); line-height:1.35; }
.solution-card .solution-links a.solution-docs-link { font-size: .65rem; }
/* Clickable icon link affordance */
.solution-icon-link { 
    transition:.28s ease; 
    background:linear-gradient(135deg,rgba(255,255,255,0.18),rgba(255,255,255,0.06)); 
    border:1px solid rgba(0,0,0,0.06); 
    position:relative; 
}
.solution-icon-link:hover { 
    transform:translateY(-4px) scale(1.05); 
    box-shadow:0 10px 24px -8px rgba(0,0,0,.25),0 4px 8px -4px rgba(0,0,0,.15); 
    background:linear-gradient(135deg,#ffffff,#f1f5f9); 
}
.solution-icon-link:focus { 
    outline:3px solid #3b82f6; 
    outline-offset:4px; 
    transform:translateY(-2px); 
}
.solution-icon-link:active { 
    transform:translateY(0) scale(.97); 
    box-shadow:0 4px 10px -4px rgba(0,0,0,.3); 
}

p { margin-bottom: 1rem; }

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #0056b3;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-secondary {
    background: #f8f9fa;
    color: #495057;
    border: 2px solid #e9ecef;
}

.btn-secondary:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.btn-tertiary {
    background: #6c757d;
    color: white;
    border: 2px solid #6c757d;
}

.btn-tertiary:hover {
    background: #5a6268;
    border-color: #545b62;
}

.btn-outline {
    background: transparent;
    color: #007bff;
    border: 2px solid #007bff;
}

.btn-outline:hover {
    background: #007bff;
    color: white;
}

.btn-donate {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
    font-weight: 600;
}

.btn-donate:hover {
    background: linear-gradient(135deg, #e0a800, #d39e00);
    transform: translateY(-2px);
}

.btn-donate-small {
    background: #ffc107;
    color: #212529;
    padding: 8px 16px;
    font-size: 0.875rem;
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar {
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: #666;
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

/* Dropdown (Products) */
.nav-item.dropdown { position: relative; }
.nav-dropdown-toggle { background:none; border:none; padding:0.5rem 0; font:inherit; cursor:pointer; color:#666; font-weight:500; display:flex; align-items:center; border-bottom:2px solid transparent; }
.nav-item.dropdown:focus-within > .nav-dropdown-toggle,
.nav-dropdown-toggle:hover { color:#007bff; border-bottom-color:#007bff; }
.dropdown-menu { position:absolute; top:100%; left:0; background:#fff; min-width:190px; padding:.65rem 0; box-shadow:0 8px 24px rgba(0,0,0,.08); border:1px solid #e9ecef; border-radius:8px; display:none; z-index:1200; }
.dropdown-menu.open { display:block; animation:fadeDrop .18s ease; }
@keyframes fadeDrop { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
.dropdown-item { display:block; padding:.55rem 1rem; font-size:.85rem; color:#333; text-decoration:none; white-space:nowrap; }
.dropdown-item:hover, .dropdown-item:focus { background:#f1f5f9; color:#007bff; }
.active-parent > .nav-dropdown-toggle { color:#007bff; border-bottom-color:#007bff; }

/* Hero quick platform buttons */
.platform-quick-links { display:flex; justify-content:center; gap:.75rem; margin:.35rem auto 0; flex-wrap:wrap; }
.platform-btn { --btn-bg:#fff; --btn-border:#d0d7e2; --btn-color:#1e293b; position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; border:1px solid var(--btn-border); border-radius:30px; background:var(--btn-bg); color:var(--btn-color); line-height:1.1; box-shadow:0 2px 4px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); backdrop-filter:blur(4px); transition:.25s ease; }
.platform-btn:hover, .platform-btn:focus { border-color:#007bff; color:#0a58ca; box-shadow:0 4px 14px -2px rgba(0,123,255,.35),0 2px 4px rgba(0,0,0,.08); transform:translateY(-2px); }
.platform-btn:active { transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.platform-btn.btn-apps { --btn-bg:linear-gradient(135deg,#eef5ff,#e3f2ff); }
.platform-btn.btn-saas { --btn-bg:linear-gradient(135deg,#f3ecff,#ebe4ff); }
.platform-btn.btn-ext { --btn-bg:linear-gradient(135deg,#e9fdf5,#dcf7ee); }
@media (max-width:600px){ .platform-btn { font-size:.62rem; padding:.5rem .75rem; } }

/* Section header alignment improvements */
.section-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.section-header h2 { flex:1 1 auto; text-align:center; margin:0; }
.section-header .sort-control { flex:0 0 auto; }
@media (max-width:900px){
    .section-header { flex-direction:column; align-items:center; }
    .section-header h2 { text-align:center; }
    .section-header .sort-control { width:100%; display:flex; justify-content:center; }
}

/* Tablet (iPad) specific nav handling (desktop adjustments before collapsing) */
@media (max-width:1400px){ .nav-menu { gap:1.6rem; } }
@media (max-width:1300px){ .nav-menu { gap:1.4rem; } }
@media (max-width:1250px){ .nav-menu { gap:1.2rem; } }
@media (max-width:1220px){ .nav-menu { gap:1rem; } }
/* Expanded breakpoint so tablets (iPad) use the mobile pattern and do not overflow off-screen */
@media (max-width:1200px){
    /* Mobile / tablet stacked nav */
    .nav-menu { position:fixed; left:-100%; top:var(--header-height); flex-direction:column; background:rgba(255,255,255,0.98); width:100%; text-align:center; transition:0.3s; box-shadow:0 10px 27px rgba(0,0,0,0.05); padding:2rem 0; gap:0; }
    .nav-menu.active { left:0; }
    .nav-item.dropdown { width:100%; }
    .nav-dropdown-toggle { width:100%; justify-content:center; }
    .dropdown-menu { position:static; display:none; width:100%; box-shadow:none; border:none; background:transparent; padding:0 0 .5rem; }
    .dropdown-menu.open { display:block; animation:none; }
    .dropdown-item { padding:.6rem 0; font-size:.9rem; }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle .bar {
    width: 25px;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* Re-assert mobile visibility AFTER base rule so earlier declaration isn't overridden */
@media (max-width:1200px){
    .nav-toggle { display:flex; }
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    /* Equal top/bottom padding for consistent banner spacing */
    padding: var(--space-6) 0;
    /* Clear fixed header using margin-top by default */
    margin-top: var(--header-height);
    text-align: center;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1rem; /* reduced from 1.1rem to lower visual weight */
    margin-bottom: 1.35rem; /* slightly tighter spacing under headline */
    opacity: 0.9;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.32;
}
/* Enhanced hero headline for stronger hierarchy */
.hero-headline { 
    font-size: clamp(2.5rem,4.5vw + 1rem,3.6rem); 
    font-weight: 700; 
    line-height: 1.08; 
    letter-spacing: -1px; 
    max-width: 1000px; 
    margin: 0 auto 1rem; 
    background: linear-gradient(95deg,#ffffff 0%,#f5f4ff 45%,#ffe9b0 90%); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color:#fff; /* fallback */
}
@media (max-width:640px){ .hero-headline { font-size: clamp(2rem,6.4vw + .9rem,2.7rem); margin-bottom:.85rem; } }

/* Hero Search */
.hero-search { 
    max-width: 680px; 
    margin: 0 auto .65rem; 
    display: flex; 
    flex-direction: column; 
    gap: .4rem; 
}
.hero-search-field { 
    display: flex; 
    align-items: stretch; 
    background: rgba(255,255,255,.12); 
    backdrop-filter: blur(8px); 
    border: 1px solid rgba(255,255,255,.28); 
    border-radius: 12px; 
    padding: 4px 6px 4px 12px; 
    gap: 6px;
    transition: box-shadow .22s, border-color .22s, background .22s; 
}
.hero-search-shell { 
    background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.05)); 
    padding: 3px; 
    border-radius: 16px; 
    position: relative; 
    box-shadow: 0 8px 26px -10px rgba(0,0,0,.45), 0 4px 8px -4px rgba(0,0,0,.3);
}
.hero-search-shell::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.1)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none; }
.hero-search-field.has-leading-icon { padding-left: 6px; }
.search-leading-icon { display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); padding:0 6px 0 4px; font-size:.95rem; }
.search-leading-icon i { line-height:1; }

/* Platform buttons with icons */
.platform-btn .btn-icon { font-size:.9rem; line-height:1; display:inline-flex; align-items:center; }
.platform-btn .btn-text { display:inline-block; }
.platform-btn { position:relative; }
.platform-btn:hover, .platform-btn:focus { box-shadow:0 6px 18px -4px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15); transform:translateY(-2px); }
.platform-btn:active { transform:translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.18); }
.hero-search-field:focus-within { 
    border-color: #fff; 
    box-shadow: 0 0 0 3px rgba(255,255,255,.25); 
    background: rgba(255,255,255,.22);
}
#hero-search-input { 
    flex: 1; 
    background: transparent; 
    border: none; 
    color: #fff; 
    font-size: .95rem; 
    line-height: 1.3; 
    padding: 8px 2px; 
    outline: none; 
    min-width: 0; 
}
#hero-search-input::placeholder { color: rgba(255,255,255,.7); }

.hero-search button { 
    border: none; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    gap: .45rem; 
    font-weight: 600; 
    font-size: .85rem; 
    letter-spacing: .4px; 
    padding: 8px 14px; 
    border-radius: 9px; 
    background: linear-gradient(135deg,#ffcf33,#ff9900); 
    color: #212529; 
    box-shadow: 0 2px 8px rgba(0,0,0,.25); 
    transition: background .25s, transform .22s, box-shadow .25s; 
    white-space: nowrap; 
}
.hero-search button:hover { 
    background: linear-gradient(135deg,#ffd84f,#ffa41a); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(0,0,0,.35); 
}
.hero-search button:active { 
    transform: translateY(0); 
    box-shadow: 0 3px 10px rgba(0,0,0,.25); 
}

/* Our Journey Timeline */
.journey-timeline {
    position: relative;
    margin: 1rem auto 1.25rem;
    max-width: 980px;
    /* Allow natural overflow; prevent clipping of long titles on small screens */
    overflow: visible;
}
.journey-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #e5e7eb, #d1d5db);
}
.timeline-item {
    position: relative;
    width: 50%;
    margin: 0 0 14px;
    padding: 6px 0 10px;
}
.timeline-item:last-child { margin-bottom: 0; padding-bottom: 0; }
.timeline-item:nth-child(odd) { padding-right: 28px; text-align: right; }
.timeline-item:nth-child(even) { margin-left: 50%; padding-left: 28px; }
.timeline-dot {
    position: absolute;
    top: 12px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3b82f6;
    box-shadow: 0 2px 5px rgba(59,130,246,0.22);
}
.timeline-item:nth-child(odd) .timeline-dot { right: -8px; }
.timeline-item:nth-child(even) .timeline-dot { left: -8px; }
.timeline-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    margin: 0;
    display: inline-block;
    max-width: 92%;
}
.timeline-title {
    font-size: 0.95rem;
    margin: 0 0 4px;
}
.timeline-content p { font-size: var(--font-card-desc); margin: 0; color: #444; }

/* Mobile: collapse to single column with line on the left */
@media (max-width: 768px) {
    .journey-timeline { padding-left: 0; }
    .journey-timeline::before { left: 10px; transform: none; }
    /* Hide center line entirely on small screens to avoid micro overflows */
    .journey-timeline::before { display: none; }
    /* Ensure single-column layout and alignment on small screens */
    .timeline-item { width: 100%; margin-left: 0; padding: 8px 0 12px 24px; text-align: left; overflow: visible; }
    /* Override alternating rules with equal or greater specificity */
    .timeline-item:nth-child(odd) { padding-right: 0; text-align: left; }
    .timeline-item:nth-child(even) { margin-left: 0; padding-left: 24px; text-align: left; }
    .timeline-item:nth-child(odd) .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot { left: 2px; right: auto; }
    /* Force block layout; allow width auto to avoid fractional overflow due to padding/borders */
    .timeline-content { max-width: 100%; width: auto; display: block; overflow: visible; }
    .timeline-title { overflow-wrap: anywhere; word-break: break-word; font-size: 1.1rem; line-height: 1.25; }
}
.hero-search button i { font-size: 1rem; }

.hero-search .clear-btn { 
    background: rgba(255,255,255,.15); 
    color: #fff; 
    padding: 8px 12px; 
    box-shadow: none; 
    backdrop-filter: blur(6px); 
}
.hero-search .clear-btn:hover { 
    background: rgba(255,255,255,.25); 
    transform: none; 
    box-shadow: none; 
}
.hero-search .clear-btn:active { transform: scale(.95); }

.hero-search-help { 
    font-size: .66rem; 
    color: rgba(255,255,255,.8); 
    letter-spacing: .45px; 
    text-transform: uppercase; 
    font-weight: 500; 
    text-align: center; 
}

/* Visually hidden utility for accessible labels */
.visually-hidden { 
    position: absolute !important; 
    height: 1px; width: 1px; 
    overflow: hidden; 
    clip: rect(1px,1px,1px,1px); 
    white-space: nowrap; 
}

/* Mobile adjustments: compress vertical spacing & turn filters into horizontal scroll pills */
@media (max-width: 640px) { 
    .hero { padding: var(--space-5) 0; margin-top: var(--header-height); }
    .hero-subtitle { font-size: .92rem; margin-bottom: .95rem; }
    .hero-search { max-width: 100%; padding: 0 10px; }
    .hero-search-field { flex-wrap: nowrap; padding: 4px 8px 4px 10px; }
    .hero-search button { flex: 0 0 auto; }
    .hero-search .clear-btn { order: 0; width: auto; }
    .platform-quick-links { 
        justify-content: flex-start; 
        gap: .65rem; 
        overflow-x: auto; 
        padding: .25rem 10px .35rem; 
        scrollbar-width: none; 
    }
    .platform-quick-links::-webkit-scrollbar { display: none; }
    .platform-quick-links .platform-btn { 
        padding: .6rem 1.15rem; 
        font-size: .6rem; 
        border-radius: 999px; 
        flex: 0 0 auto; 
    }
}

/* Subtle indicator when search is active */
.apps-grid.search-active, .saas-grid.search-active, .extensions-grid.search-active { 
    transition: background .3s; 
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
    border-radius: 8px; 
    padding-top: .5rem; 
    margin-top: -.5rem; 
}
/* Smooth visual movement for reorder (browser will treat as repaint; subtle fade helps) */
.app-card, .extension-card { transition: opacity .25s ease, outline-color .25s ease, transform .25s ease; }
.app-card[style*="opacity: 0.45"], .extension-card[style*="opacity: 0.45"] { filter: grayscale(25%); }
.card-hidden { display: none !important; }

/* Unified Search Results Section */
body.search-active .apps-section,
body.search-active .saas-section,
body.search-active .extensions-section { display: none; }

.search-results-section { padding: 60px 0 40px; background: #f8f9fa; }
.search-results-section .search-results-heading { text-align: center; font-size: 2.15rem; margin-bottom: 0.5rem; }
.search-results-section .search-query-label { text-align: center; color: #555; margin: 0 0 2rem; font-size: .95rem; letter-spacing: .3px; }
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 2rem; }
.search-results-section .no-search-results { text-align: center; font-size: 1.1rem; color: #666; margin-top: 2rem; }

/* Origin badge for result clone */
.result-origin-badge { 
    display: inline-block; 
    background: #ffd84f; 
    color: #212529; 
    font-size: 0.55rem; 
    font-weight: 700; 
    letter-spacing: 0.6px; 
    padding: 4px 7px 3px; 
    border-radius: 30px; 
    text-transform: uppercase; 
    margin: 0 0 6px; 
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

@media (max-width: 640px) {
    .search-results-section { padding: 50px 0 30px; }
    .search-results-section .search-results-heading { font-size: 1.8rem; }
    .search-results-grid { gap: 1.25rem; }
}

/* Newsletter Modal */
.newsletter-modal[hidden] { display:none !important; }
.newsletter-modal { position: fixed; inset:0; z-index: 2000; font-family: 'Inter', sans-serif; }
.newsletter-modal-backdrop { position:absolute; inset:0; background: rgba(20,24,33,.55); backdrop-filter: blur(4px); animation: modalFade .35s ease; }
.newsletter-modal-dialog { position: relative; max-width: 520px; margin: clamp(40px,8vh,120px) auto; background: linear-gradient(145deg,#ffffff 0%,#f4f7fb 100%); border-radius: 24px; padding: 2.5rem 2.25rem 2.25rem; box-shadow: 0 20px 55px -10px rgba(0,0,0,.35), 0 4px 18px -2px rgba(0,0,0,.15); animation: modalSlide .45s cubic-bezier(.16,.84,.44,1); overflow:hidden; }
.newsletter-modal-close { position:absolute; top:10px; right:10px; background: transparent; border: none; font-size: 2rem; line-height:1; cursor:pointer; color:#555; padding: .25rem .75rem; border-radius: 10px; transition: background .25s, color .25s; }
.newsletter-modal-close:hover { background: rgba(0,0,0,.06); color:#000; }
.newsletter-modal-content h2 { font-size: 2rem; line-height:1.15; margin:0 0 .75rem; background: linear-gradient(90deg,#0d47a1,#5a31d3); -webkit-background-clip:text; background-clip:text; color: transparent; font-weight:700; letter-spacing:.5px; }
.newsletter-modal-content p { margin:0 0 1.25rem; color:#444; font-size:1.05rem; }
.newsletter-modal-form { display:flex; flex-direction:column; gap:1rem; }
.newsletter-modal-field { display:flex; align-items:stretch; gap:.75rem; background:#fff; border:1px solid #d9e2ec; padding:.65rem .75rem .65rem 1rem; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(13,71,161,0.05); transition: box-shadow .25s, border-color .25s, background .25s; }
.newsletter-modal-field:focus-within { border-color:#0d47a1; box-shadow: 0 0 0 3px rgba(13,71,161,.25); background:#fff; }
#newsletter-modal-email { flex:1; border:none; background:transparent; font-size:1rem; padding:.35rem 0; outline:none; color:#212529; min-width:0; }
#newsletter-modal-email::placeholder { color:#94a3b8; }
.newsletter-modal-submit { position:relative; border:none; background: linear-gradient(135deg,#0d47a1,#5a31d3); color:#fff; font-weight:600; font-size:.95rem; padding:.85rem 1.4rem; border-radius: 14px; cursor:pointer; letter-spacing:.5px; display:inline-flex; align-items:center; gap:.5rem; box-shadow: 0 4px 16px -4px rgba(13,71,161,.4); transition: background .35s, transform .25s, box-shadow .3s; }
.newsletter-modal-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -6px rgba(13,71,161,.5); }
.newsletter-modal-submit:active { transform: translateY(0); box-shadow: 0 4px 16px -4px rgba(13,71,161,.4); }
.newsletter-modal-submit[disabled] { cursor:not-allowed; opacity:.65; transform:none; }
.newsletter-modal-message { min-height:1.1rem; font-size:.85rem; font-weight:500; letter-spacing:.3px; color:#0d47a1; }
.newsletter-modal-message.error { color:#c62828; }
.newsletter-modal-message.success { color:#2e7d32; }
.newsletter-modal-privacy { font-size:.65rem; color:#667085; letter-spacing:.35px; line-height:1.3; margin-top:.25rem; }
.newsletter-modal-countdown { display:inline-block; margin-top:.35rem; font-size:.65rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:#5a31d3; background:rgba(90,49,211,.08); padding:.35rem .55rem; border-radius:8px; }
.newsletter-modal-privacy a { color:#0d47a1; font-weight:600; text-decoration:underline; }
.newsletter-modal-actions { display:flex; justify-content:flex-end; margin-top:.25rem; }
.newsletter-modal-dismiss { background: transparent; border:none; font-size:.75rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:#555; cursor:pointer; padding:.35rem .75rem; border-radius: 8px; transition: background .25s, color .25s; }
.newsletter-modal-dismiss:hover { background:#eceff3; color:#222; }

@media (max-width: 600px) {
    .newsletter-modal-dialog { margin: 60px 18px 40px; padding:2.1rem 1.6rem 1.9rem; border-radius:20px; }
    .newsletter-modal-content h2 { font-size:1.65rem; }
    .newsletter-modal-content p { font-size:.95rem; }
    .newsletter-modal-field { flex-direction:column; padding:.75rem .9rem; }
    .newsletter-modal-submit { width:100%; justify-content:center; }
}

@keyframes modalSlide { 0% { opacity:0; transform: translateY(30px) scale(.97); } 100% { opacity:1; transform: translateY(0) scale(1); } }
@keyframes modalFade { 0% { opacity:0; } 100% { opacity:1; } }

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Apps Section */
.apps-section { padding: var(--section-pad-y) 0 calc(var(--section-pad-y-sm) - 8px); background:#f8f9fa; }

.apps-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
}

.apps-grid {
    display: grid;
    /* Adjusted min width from 350px to 260px to allow 4 columns on ~1200px containers */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.app-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.app-icon {
    text-align: center;
    margin-bottom: 1.5rem;
}

.app-icon img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.app-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.app-rating-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-rating, .app-rating-wrap .app-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: #f5a623; /* star color */
    margin: 0.25rem 0 0.75rem;
}

.app-rating .rating-stars i { margin-right: 2px; font-size: 1.1rem; line-height: 1; }

.app-rating .rating-number {
    color: #555;
    font-weight: 600;
    font-size: 1rem;
}

.app-rating .rating-count {
    color: #888;
    font-size: 0.9rem;
}

.app-info p {
    color: #666;
    margin-bottom: 1.5rem;
    text-align: center;
}

.app-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.feature-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.download-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 20px;
    background: #000;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.download-btn:hover {
    background: #333;
    transform: scale(1.05);
}

.download-btn i {
    font-size: 1.5rem;
}

.google-play {
    background: #01875f;
}

.google-play:hover {
    background: #016b4a;
}

.app-store {
    background: #000;
}

.app-store:hover {
    background: #333;
}

/* Browser Extensions Section */
.extensions-section {
    /* Reduced top padding (was 80px) to complement smaller gap after apps section */
    padding: 40px 0 80px;
    background: #f8f9fa;
}

.extensions-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
}

.extensions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.extension-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.extension-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.extension-icon {
    text-align: center;
    margin-bottom: 1.5rem;
}

.extension-icon img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.extension-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.extension-info p {
    color: #666;
    margin-bottom: 1.5rem;
    text-align: center;
}

.extension-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.browser-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.browser-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 20px;
    background: #000;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.browser-btn:hover {
    transform: scale(1.05);
}

.browser-btn i {
    font-size: 1.5rem;
}

.browser-btn.chrome {
    background: #4285F4;
}

.browser-btn.chrome:hover {
    background: #3367D6;
}

.browser-btn.edge {
    background: #0078D4;
}

.browser-btn.edge:hover {
    background: #106ebe;
}

.browser-btn.firefox {
    background: #FF7139;
}

.browser-btn.firefox:hover {
    background: #e55a2b;
}

.browser-btn.safari {
    background: #000;
}

.browser-btn.safari:hover {
    background: #333;
}

/* SaaS Visit Site button (shares visual language with download/browser buttons) */
.saas-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
}

.saas-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px 20px;
    background: #0d47a1;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(13,71,161,0.25);
}

.saas-btn:hover {
    background: #0b3e8f;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13,71,161,0.35);
}

.saas-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(13,71,161,0.25);
}

.saas-btn i {
    font-size: 1rem;
}

/* Category Badge (Improved Readability & Accessibility)
   ------------------------------------------------------------------
   Applies to category labels on app / SaaS / extension cards.
   - Increased contrast (dark background, white text) for WCAG AA.
   - Slightly larger font & padding for legibility.
   - Uppercase with letter-spacing for quick scanning.
   - Unified styling regardless of section-specific legacy rules.
*/
.category-badge {
    background: #0d47a1; /* deep accessible blue */
    color: #fff;
    font-size: 0.75rem; /* was ~0.65rem inside nested rule */
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    border: 1px solid #0b3e8f; /* subtle outline for sharpness on light bg */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.category-badge i {
    font-size: 0.9em;
    opacity: 0.9;
}

.category-badge:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Status Badge (Coming Soon / Beta / etc.) */
.item-status-wrap { 
    display:flex; 
    justify-content:center; 
    margin: .35rem 0 .6rem; 
}
.status-badge { 
    display:inline-block; 
    font-size: 0.6rem; 
    letter-spacing: .6px; 
    text-transform: uppercase; 
    font-weight:700; 
    background:#6c757d; 
    color:#fff; 
    padding: .35rem .65rem; 
    border-radius:12px; 
    border:1px solid rgba(0,0,0,.15); 
    box-shadow:0 2px 4px rgba(0,0,0,.08); 
    line-height:1; 
    white-space:nowrap; 
}
.status-badge.status-coming-soon { background:#ff9800; border-color:#e68900; }
.status-badge.status-beta { background:#673ab7; border-color:#5a2ea3; }
.status-badge.status-upcoming { background:#ff9800; border-color:#e68900; }
.status-badge.status-building { background:#607d8b; border-color:#546e7a; }
.status-badge.status-concept { background:#455a64; border-color:#37474f; }

/* About Section */
.about-section { padding: var(--section-pad-y) 0; }

.about-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.about-content h2 { /* now inherits .section-title or h2 token; keep spacing tweak if needed */ margin-bottom: 1.5rem; }

.about-content p {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 3rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat {
    text-align: center;
}

.stat h3 {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.stat p {
    color: #666;
    font-weight: 500;
}

/* Team Section */
.team-section { padding: var(--section-pad-y) 0; background:#f8f9fa; }

.team-section h2 { text-align:center; margin-bottom:2.2rem; }

.team-content {
    max-width: 900px;
    margin: 0 auto;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.member-photo {
    flex-shrink: 0;
}

.member-photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #007bff;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
}

.member-info h3 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.member-info h4 {
    font-size: 1.125rem;
    color: #007bff;
    font-weight: 500;
    margin-bottom: 1rem;
}

.member-motto {
    font-size: 1.125rem;
    color: #666;
    font-style: italic;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid #007bff;
}

.member-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.member-specialties h5 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.specialty-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.specialty-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #bbdefb;
}

.member-links {
    display: flex;
    gap: 1rem;
}

/* Trusted By (logo strip) */
.trusted-by { padding: var(--section-pad-y-sm) 0; background: #ffffff; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; }
.trusted-logos { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); 
    gap: 1.15rem 2.2rem; 
    align-items: center; 
    justify-items: center; 
    justify-content: center;
}
.trusted-logos .logo { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: .9rem 1.1rem; 
    min-height: 96px; 
    filter: grayscale(90%) contrast(95%); 
    opacity: .9; 
    transition: filter .2s ease, opacity .2s ease, transform .2s ease; 
}
.trusted-logos .logo:hover, .trusted-logos .logo:focus-within { 
    filter: grayscale(0%); 
    opacity: 1; 
    transform: translateY(-2px);
}
.trusted-logos img { 
    display: block;
    height: 56px; /* force a consistent, legible size */
    width: auto;
    max-width: 260px;
    object-fit: contain;
}
@media (max-width: 640px){
    .trusted-logos { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem 1.1rem; }
    .trusted-logos .logo { min-height: 68px; padding: .6rem .8rem; }
    .trusted-logos img { height: 44px; max-width: 200px; }
}
@media (max-width: 380px){
    .trusted-logos img { height: 38px; }
}

.portfolio-link,
.feedback-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio-link {
    background: #007bff;
    color: white;
}

.portfolio-link:hover {
    background: #0056b3;
    color: white;
    transform: translateY(-2px);
}

.feedback-link {
    background: white;
    color: #007bff;
    border: 2px solid #007bff;
}

.feedback-link:hover {
    background: #007bff;
    color: white;
    transform: translateY(-2px);
}

/* Support Section */
.support-section { padding: var(--section-pad-y) 0; background:#f8f9fa; }

.support-section h2 { text-align:center; margin-bottom:1.1rem; }

.support-section > .container > p {
    text-align: center;
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 3rem;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.support-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.support-card:hover {
    transform: translateY(-5px);
}

.support-card i {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 1.5rem;
}

.support-card h3 {
    margin-bottom: 1rem;
}

.support-card p {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Donate Section */
.donate-section { padding: var(--section-pad-y) 0; background: linear-gradient(135deg, #ffc107, #e0a800); text-align:center; }

.donate-content h2 { color:#212529; margin-bottom:1rem; }

.donate-content p {
    font-size: 1.125rem;
    color: #495057;
    margin-bottom: 2rem;
}

/* Footer */
.footer {
    background: #212529;
    color: #adb5bd;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    color: white;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #007bff;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #495057;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.3s ease;
}

.social-link:hover {
    background: #007bff;
}

.footer-bottom {
    border-top: 1px solid #495057;
    padding-top: 2rem;
    text-align: center;
}

/* Newsletter Subscription */
.newsletter-form {
    margin-top: 1rem;
}

.newsletter-input-group {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #495057;
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: #343a40;
    color: white;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.newsletter-input::placeholder {
    color: #adb5bd;
}

.newsletter-input:focus {
    border-color: #007bff;
}

.newsletter-btn {
    padding: 12px 16px;
    background: #007bff;
    color: white;
    border: 2px solid #007bff;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-btn:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateX(2px);
}

.newsletter-btn:disabled {
    background: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.newsletter-message {
    font-size: 0.85rem;
    padding: 8px 0;
    min-height: 1.2rem;
    transition: all 0.3s ease;
}

.newsletter-message.success {
    color: #28a745;
}

.newsletter-message.error {
    color: #dc3545;
}

.newsletter-message.loading {
    color: #007bff;
}

/* Footer responsive adjustments */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .newsletter-input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .newsletter-input,
    .newsletter-btn {
        border-radius: 8px;
        border: 2px solid #495057;
    }
    
    .newsletter-btn:hover {
        transform: translateY(-2px);
    }
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    /* Equal top/bottom padding for consistent banner spacing */
    padding: var(--space-6) 0;
    /* Clear fixed header space similarly to hero */
    margin-top: var(--header-height);
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: white;
}

.page-header p {
    font-size: 1.125rem;
    opacity: 0.9;
}

/* Page / hero header subtitle (section-lead) contrast adjustments
   Ensure subtitles placed on gradient header backgrounds render in white
   rather than the default gray used in body sections. */
.page-header .section-lead,
.hero .section-lead { color: rgba(255,255,255,0.92); }

/* Blog Header Specific */
.blog-header-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.blog-header-main {
    text-align: center;
}

.blog-header-actions {
    position: absolute;
    top: 0;
    right: 0;
}

/* Ensure desktop blog header headline & subtext remain centered while RSS sits right */
.blog-header-content { max-width: 780px; margin: 0 auto; padding-top: .25rem; }
.blog-header-content .blog-header-main h1, 
.blog-header-content .blog-header-main p { text-align: center; }

@media (max-width: 900px) {
    .blog-header-actions { position: static; margin-top: .75rem; }
    .blog-header-content { padding-top: 0; }
}

/* Contact Page */
.contact-section { padding: var(--section-pad-y) 0; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info h2 {
    margin-bottom: 1.5rem;
}

.contact-methods {
    margin: 2rem 0;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-method i {
    font-size: 1.5rem;
    color: #007bff;
    width: 40px;
}

.contact-method h4 {
    margin-bottom: 0.25rem;
    color: #333;
}

.contact-method p {
    color: #666;
    margin: 0;
}

.support-apps {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.app-support-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.app-support-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.app-support-link:hover {
    border-color: #007bff;
    color: #007bff;
}

/* Contact Form */
.contact-form-container {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* reCAPTCHA Styling */
.form-group .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.g-recaptcha > div {
    margin: 0 auto;
}

/* Responsive reCAPTCHA */
@media (max-width: 480px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center;
    }
}

/* Alerts */
.alert {
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f1aeb5;
}

.alert i {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.alert h3 {
    margin-bottom: 0.5rem;
}

/* Legal Content */
.legal-content {
    padding: 60px 0;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
}

.table-of-contents {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 12px;
    height: fit-content;
    position: sticky;
    top: 120px;
}

.table-of-contents h3 {
    margin-bottom: 1rem;
    color: #333;
}

.table-of-contents ul {
    list-style: none;
}

.table-of-contents li {
    margin-bottom: 0.5rem;
}

.table-of-contents a {
    color: #666;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.table-of-contents a:hover {
    color: #007bff;
}

.legal-text {
    max-width: none;
}

.legal-text section {
    margin-bottom: 3rem;
}

.legal-text h2 {
    color: #333;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.legal-text h3 {
    color: #495057;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.legal-text ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

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

.contact-info {
    list-style: none;
    margin-left: 0;
}

.contact-info li {
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Handled above at 860px now */

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

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

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

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .download-buttons {
        flex-direction: column;
    }

    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .table-of-contents {
        position: static;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .team-member {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }

    .member-photo img {
        width: 120px;
        height: 120px;
    }

    .member-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .specialty-tags {
        justify-content: center;
    }

    .member-info h3 {
        font-size: 1.75rem;
    }

    .member-info h4 {
        font-size: 1rem;
    }

    .member-motto {
        font-size: 1rem;
        padding-left: 0.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .apps-section,
    .about-section,
    .team-section,
    .support-section,
    .donate-section {
        padding: 60px 0;
    }

    .app-card,
    .support-card {
        padding: 1.5rem;
    }

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

    .team-member {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .member-photo img {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }

    .member-info h3 {
        font-size: 1.4rem;
        margin-bottom: 0.25rem;
    }

    .member-info h4 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

    .member-motto {
        font-size: 0.95rem;
        padding-left: 0.5rem;
        margin-bottom: 1rem;
    }

    .member-description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .member-specialties h5 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .specialty-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .portfolio-link,
    .feedback-link {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        gap: 0.25rem;
    }

    .member-links {
        gap: 0.75rem;
        margin-top: 1rem;
    }
}

/* Extra small devices (very small phones) */
@media (max-width: 360px) {
    .team-member {
        padding: 1rem;
        gap: 1rem;
    }

    .member-photo img {
        width: 80px;
        height: 80px;
        border-width: 2px;
    }

    .member-info h3 {
        font-size: 1.2rem;
    }

    .member-info h4 {
        font-size: 0.85rem;
    }

    .member-motto {
        font-size: 0.85rem;
        padding-left: 0.25rem;
    }

    .member-description {
        font-size: 0.85rem;
    }

    .specialty-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .portfolio-link,
    .feedback-link {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .member-links {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .portfolio-link,
    .feedback-link {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animation for images */
img {
    transition: opacity 0.3s ease;
}

img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Blog Styles */
.blog-listing { padding: var(--section-pad-y) 0; background:#f8f9fa; }

.blog-content { padding: var(--section-pad-y-sm) 0; background:white; }

.no-posts {
    text-align: center;
    padding: 4rem 0;
    color: #666;
}

.no-posts h3 {
    margin-bottom: 1rem;
    color: #333;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.blog-image {
    width: 100%;
    min-height: 180px;
    max-height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    position: relative;
}

.blog-image img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Image loading and error states */
.blog-image img,
.featured-image {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog-image img.loaded,
.featured-image.loaded {
    opacity: 1;
}

/* Image loading placeholder */
.blog-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #007bff;
    animation: spin 1s linear infinite;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.blog-image.loaded::before {
    opacity: 0;
    pointer-events: none;
    animation: none; /* Stop the spinning animation */
}

.featured-image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #007bff;
    animation: spin 1s linear infinite;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.featured-image-container.loaded::before {
    opacity: 0;
    pointer-events: none;
    animation: none; /* Stop the spinning animation */
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.blog-card:hover .blog-image img {
    transform: scale(1.02);
}

.blog-info {
    padding: 1.5rem;
}

.blog-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 12px;
    font-size: 0.8rem;
}

.blog-meta span i {
    opacity: 0.7;
}

.blog-info h2 {
    margin-bottom: 1rem;
}

.blog-info h2 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-info h2 a:hover {
    color: #007bff;
}

.blog-excerpt {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.read-more:hover {
    color: #0056b3;
    gap: 0.75rem;
}

/* Single Post */
.single-post {
    max-width: 800px;
    margin: 0 auto;
}

.featured-image {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
    display: block;
}

.featured-image:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.featured-image-container {
    position: relative;
    margin-bottom: 2rem;
}

.post-content {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #333;
}

/* Content Typography */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 2rem 0 1rem 0;
    color: #333;
}

.post-content h1 { font-size: 2.5rem; }
.post-content h2 { font-size: 2rem; }
.post-content h3 { font-size: 1.75rem; }
.post-content h4 { font-size: 1.5rem; }
.post-content h5 { font-size: 1.25rem; }
.post-content h6 { font-size: 1.125rem; }

.post-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.post-content ul,
.post-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.post-content blockquote {
    border-left: 4px solid #007bff;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.post-content code {
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9rem;
}

.post-content pre {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.post-content a {
    color: #007bff;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.post-content a:hover {
    color: #0056b3;
}

.post-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #666;
    flex-wrap: wrap;
}

/* Post meta styling when inside page header */
.page-header .post-meta {
    color: #ccc;
    opacity: 0.9;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.post-meta span i {
    opacity: 0.8;
}

.post-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

/* Blog Responsive */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-card {
        margin: 0 -20px;
        border-radius: 0;
    }
    
    .post-content {
        font-size: 1rem;
    }
    
    .post-content h1 { font-size: 2rem; }
    .post-content h2 { font-size: 1.75rem; }
    .post-content h3 { font-size: 1.5rem; }
    .post-content h4 { font-size: 1.25rem; }
    
    .post-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .blog-meta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .featured-image {
        border-radius: 0;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        max-height: 300px;
    }
    
    .featured-image-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 2rem;
    }
    
    /* Blog header mobile adjustments */
    .blog-header-content {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .blog-header-actions {
        position: static;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .page-header h1 {
        font-size: 2.5rem;
    }
}

/* Avoid iOS Safari auto-zoom when focusing inputs (min 16px on mobile) */
@media (max-width: 640px) {
    #hero-search-input { font-size: 16px; }
}

/* --------------------------------------------------
    Unified Component Styles (extracted from inline)
    Helps keep index / legal pages consistent
--------------------------------------------------- */
.all-solutions-section { padding: var(--section-pad-y-sm) 0 var(--section-pad-y-xs); background:#f8f9fa; border-top:1px solid #e9ecef; }
.all-solutions-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

.solution-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.1rem .95rem 1.25rem; display:flex; flex-direction:column; position:relative; box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.solution-card .solution-icon { text-align:center; margin-bottom:.65rem; }
.solution-card .solution-icon img { width:68px; height:68px; object-fit:contain; }
.solution-card .solution-icon { display:flex; justify-content:center; }
.solution-card .solution-icon-link { width:78px; height:78px; border-radius:20px; }
.solution-card .solution-icon-link img { width:64px; height:64px; }
.solution-info.clustered { align-items:stretch; }
.title-rating-cluster { display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom:.05rem; }
.title-rating-cluster .card-title { margin:.1rem 0 0; text-align:center; }
.solution-rating.tight { margin:0; line-height:1; }
.solution-title-link { text-decoration:none; color:inherit; }
.solution-title-link:hover { text-decoration:underline; }
.solution-meta-row { text-align:center; margin-top:-2px; }
.solution-desc.short { min-height:auto; margin:.15rem 0 .4rem; font-size: var(--font-card-desc); line-height:1.3; }
.solution-store-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.btn-slim { display:inline-flex; align-items:center; gap:.35rem; font-size:.56rem; font-weight:600; letter-spacing:.4px; text-transform:uppercase; padding:.45rem .7rem; border-radius:999px; border:1px solid #d0d7de; background:#ffffff; color:#1e293b; text-decoration:none; line-height:1; transition:.22s ease; }
.btn-slim:hover { background:#f1f5f9; border-color:#c5ced6; }
.btn-slim:focus { outline:3px solid #3b82f6; outline-offset:3px; }
.store-btn.play { background:#1ec659; color:#fff; border-color:#18a848; }
.store-btn.play:hover { background:#18a848; }
.store-btn.appstore { background:#0d6efd; color:#fff; border-color:#0b5ed7; }
.store-btn.appstore:hover { background:#0b5ed7; }
.store-btn.chrome { background:#f1f5f9; color:#202124; }
.store-btn.chrome:hover { background:#e2e8f0; }
.store-btn.edge { background:#0ea5e9; color:#fff; border-color:#0284c7; }
.store-btn.edge:hover { background:#0284c7; }
.store-btn.firefox { background:#ff7139; color:#fff; border-color:#ff5a14; }
.store-btn.firefox:hover { background:#ff5a14; }
.store-btn.safari { background:#3b82f6; color:#fff; border-color:#1d4ed8; }
.store-btn.safari:hover { background:#1d4ed8; }
.store-btn.site { background:#6366f1; color:#fff; border-color:#4f46e5; }
.store-btn.site:hover { background:#4f46e5; }
.solution-card .status-badge { margin-top:.1rem; }
.solution-links { gap:.55rem !important; }
.solution-type-badge { position:absolute; top:8px; right:8px; font-size:.55rem; font-weight:600; letter-spacing:.5px; background:#f1f3f5; border:1px solid #dee2e6; padding:2px 6px; border-radius:20px; color:#495057; text-transform:uppercase; }
.solution-card .category-badge, .status-badge { display:inline-block; background:#eef2f6; border:1px solid #d5dae0; color:#495057; padding:3px 8px; border-radius:14px; font-size:.55rem; letter-spacing:.4px; text-transform:uppercase; }
.solution-card .solution-links { margin-top:auto; text-align:center; display:flex; flex-direction:column; gap:.4rem; }
.solution-card .solution-store-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; }
.store-link-pill { font-size:.6rem; background:#fff; border:1px solid #d0d7de; padding:2px 6px; border-radius:10px; text-decoration:none; display:inline-block; }
.store-link-pill:hover { background:#f1f5f9; }
/* Search match highlighting (applied after hero search submit) */
.solution-card.search-match { box-shadow:0 0 0 3px #ffd84f, 0 2px 6px rgba(0,0,0,.08); position:relative; }
@media (max-width:640px){
    .solution-card.search-match { box-shadow:0 0 0 3px #ffd84f, 0 0 0 6px rgba(255,216,79,.45); }
}
.solution-card.search-match[data-search-rank="1"]{ animation: searchFlash 1.3s ease-out; }
@keyframes searchFlash {
    0% { box-shadow:0 0 0 0 #ffd84f, 0 2px 6px rgba(0,0,0,.08); }
    55% { box-shadow:0 0 0 8px rgba(255,216,79,0), 0 2px 10px rgba(0,0,0,.08); }
    100% { box-shadow:0 0 0 3px #ffd84f, 0 2px 6px rgba(0,0,0,.08); }
}
/* Prevent blue focus box on All Solutions heading after search/filter interactions */
#apps h2.section-title:focus { outline:none !important; box-shadow:none !important; }

/* Legal related box / notice extraction */
.legal-related-box { margin-top:1rem; padding:.5rem .65rem; background:#f8f9fa; border-radius:6px; border:1px solid #e9ecef; font-size:var(--font-small); }
.legal-related-box a { color:#007bff; font-weight:600; }
.notice-box { padding:1rem; border-left:4px solid #2196f3; margin:1rem 0; border-radius:6px; background:#e3f2fd; }
.notice-box.warning { background:#fff3cd; border-left-color:#ffc107; }
.notice-box.neutral { background:#f1f5f9; border-left-color:#94a3b8; }
.notice-box h4 { margin:0 0 .5rem; font-size:1rem; display:flex; align-items:center; gap:.45rem; }

/* Table of contents heading normalization */
.toc-heading { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; margin:0 0 .75rem; }

/* Utility margin top variants */
.mt-section { margin-top:2rem !important; }
.mt-section-sm { margin-top:1rem !important; }

/* Solution docs link */
.solution-docs-link { font-size:.65rem; text-decoration:none; font-weight:600; letter-spacing:.4px; color:#0d6efd; }
.solution-docs-link:hover { color:#0a58ca; text-decoration:underline; }

/* Solution description */
.solution-desc { margin:.15rem 0 .25rem; text-align:center; color:#555; min-height:40px; overflow:hidden; font-size: var(--font-card-desc); line-height:1.35; }