/* =========================================================================
   All Convert Tools — site styles
   Layered on top of Bootstrap 5. Mobile-first, light/dark aware.
   ========================================================================= */

:root {
    --acc: #2563eb;
    --acc-hover: #1d4ed8;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-hover: 0 2px 4px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .12);
    --ring: rgba(37, 99, 235, .35);
}

[data-bs-theme="dark"] {
    --acc: #3b82f6;
    --acc-hover: #60a5fa;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .5);
}

html {
    overflow-x: hidden;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f6f7f9;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
}

main {
    flex: 1 0 auto;
}

.btn-primary {
    --bs-btn-bg: var(--acc);
    --bs-btn-border-color: var(--acc);
    --bs-btn-hover-bg: var(--acc-hover);
    --bs-btn-hover-border-color: var(--acc-hover);
    --bs-btn-active-bg: var(--acc-hover);
}

a {
    color: var(--acc);
    text-decoration: none;
}

a:hover {
    color: var(--acc-hover);
    text-decoration: underline;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    background: var(--acc);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
}

/* -- Coloured-text utilities for headings (see revert-log) -- */
.text-accent  { color: var(--acc); }
.text-blue    { color: #2563eb; }
.text-violet  { color: #8b5cf6; }
.text-pink    { color: #ec4899; }
.text-emerald { color: #10b981; }
.text-orange  { color: #f97316; }
.text-red     { color: #ef4444; }

.text-gradient {
    background-image: linear-gradient(135deg, #2563eb 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* keep a fallback colour for browsers that don't support background-clip */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .text-gradient { color: var(--acc); }
}

/* ---------- Icons ---------- */

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.icon-sm {
    width: 18px;
    height: 18px;
}

.brand-icon {
    color: var(--acc);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .55rem;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    backdrop-filter: saturate(180%) blur(6px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .03);
}

.site-header .navbar {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.2rem;
}

.navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    border-radius: 8px;
    margin-bottom: .15rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.navbar .dropdown-item:last-child {
    margin-bottom: 0;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:active {
    background-color: color-mix(in srgb, var(--mi-color, var(--acc)) 12%, transparent);
    color: var(--bs-emphasis-color, var(--bs-body-color));
    text-decoration: none !important;
}
.navbar .dropdown-item:hover .menu-label,
.navbar .dropdown-item:focus .menu-label {
    text-decoration: none;
}

.navbar .dropdown-menu {
    min-width: 14rem;
    padding: .35rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* multi-column dropdown for long lists (e.g. Documents Tools) */
.navbar .dropdown-menu-wide {
    min-width: 50rem;
    grid-template-columns: repeat(4, 1fr);
    gap: .15rem .35rem;
}
.navbar .dropdown-menu-wide > li { min-width: 0; }

/* only flip to grid when Bootstrap opens it, so the default display:none stays */
.navbar .dropdown-menu-wide.show {
    display: grid;
}

@media (max-width: 1199.98px) {
    /* mobile collapsed nav — back to a single block column */
    .navbar .dropdown-menu-wide {
        min-width: auto;
    }
    .navbar .dropdown-menu-wide.show {
        display: block;
    }
}

/* Header call-to-action buttons (Login / Sign up / My account).
   Keep them on a single line — long labels like "Sign up free" were
   wrapping over multiple rows in the cramped navbar. */
.header-cta {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Mobile drawer (Android-style side panel) ===== */
@media (max-width: 1199.98px) {
    /* Slide-in drawer from the right, sized like a typical app sidebar. */
    .site-header .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(80vw, 300px);
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;                /* inner nav scrolls instead */
        background: var(--bs-body-bg);
        border-left: 1px solid var(--bs-border-color);
        box-shadow: -16px 0 40px rgba(15, 23, 42, .25);
        padding: 0;
        z-index: 1050;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
        display: flex !important;
        flex-direction: column;
        /* Closed state: pushed fully off the right via translateX AND hidden */
        transform: translateX(110%);
        visibility: hidden;
        pointer-events: none;
    }
    .site-header .navbar-collapse.show,
    .site-header .navbar-collapse.collapsing {
        visibility: visible;
        pointer-events: auto;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }
    .site-header .navbar-collapse.show {
        transform: translateX(0);
    }
    .site-header .navbar-collapse.collapsing {
        transform: translateX(0);
        height: 100vh !important;
    }

    /* ----- Drawer head: brand + close ----- */
    .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: 1rem 1.1rem;
        border-bottom: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        flex: 0 0 auto;
    }
    .drawer-brand {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        text-decoration: none;
        color: var(--bs-body-color);
        font-weight: 700;
        font-size: 1.05rem;
        min-width: 0;
    }
    .drawer-brand:hover { color: var(--bs-body-color); text-decoration: none; }
    .drawer-brand .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg,
            color-mix(in srgb, var(--acc) 88%, #fff 12%) 0%,
            var(--acc) 60%,
            color-mix(in srgb, var(--acc) 88%, #000 12%) 100%);
        box-shadow:
            0 2px 4px rgba(15, 23, 42, .1),
            0 8px 18px color-mix(in srgb, var(--acc) 30%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .25);
        flex: 0 0 auto;
    }
    .drawer-brand .brand-mark .icon {
        width: 20px;
        height: 20px;
        color: #fff;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    }
    .drawer-brand-name {
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drawer-close {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--bs-tertiary-bg);
        border: 1px solid var(--bs-border-color);
        color: var(--bs-body-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        flex: 0 0 auto;
        transition: background-color .15s ease, transform .15s ease;
    }
    .drawer-close:hover {
        background: color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-tertiary-bg));
        transform: rotate(90deg);
    }
    .drawer-close:active { transform: rotate(90deg) scale(.95); }

    /* ----- Scrollable middle: section labels + menu items ----- */
    .navbar-collapse > .navbar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .5rem .65rem 1rem;
        gap: .15rem;
    }
    .navbar-nav.mx-auto { margin: 0 !important; }
    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        scrollbar-width: thin;
    }

    /* Section header label — like the reference's MAIN / INFRASTRUCTURE */
    .drawer-section {
        list-style: none;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--bs-secondary-color);
        padding: 1.1rem .85rem .35rem;
        margin: 0;
        opacity: .85;
    }
    .drawer-section:first-child { padding-top: .35rem; }

    /* Top-level menu rows — rounded pill-style, no per-item divider */
    .navbar-nav .nav-item {
        border-bottom: 0;
    }
    .navbar-nav .nav-link {
        width: 100%;
        padding: .65rem .75rem;
        font-size: .96rem;
        font-weight: 500;
        border-radius: 10px;
        gap: .8rem;
        color: var(--bs-body-color);
        transition: background-color .12s ease, color .12s ease;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.show {
        background-color: color-mix(in srgb, var(--mi-color, var(--acc)) 14%, transparent);
        color: var(--bs-emphasis-color, var(--bs-body-color));
    }
    .navbar .dropdown-toggle::after {
        margin-left: auto;
    }

    /* Coloured icon chip for top-level rows in the drawer (override the flat
       glyph used on desktop so the icons sit in tinted squares like the
       reference). */
    .navbar-nav .nav-link .menu-icon-sm {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        margin: 0;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--mi-color) 22%, var(--bs-body-bg)),
            color-mix(in srgb, var(--mi-color) 14%, var(--bs-body-bg))) !important;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .06),
            inset 0 0 0 1px color-mix(in srgb, var(--mi-color) 28%, transparent) !important;
        color: var(--mi-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0;
    }
    .navbar-nav .nav-link .menu-icon-sm .icon {
        width: 18px;
        height: 18px;
        color: var(--mi-color);
        stroke-width: 2;
        filter: none;
    }

    /* Sub-items (dropdown content) inside drawer */
    .navbar-nav .nav-item .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: 0;
        box-shadow: none;
        padding: .15rem 0 .5rem 3rem;
        background: transparent;
        min-width: 0;
        margin: 0;
    }
    .navbar-nav .nav-item .dropdown-menu-wide.show {
        display: block;
        grid-template-columns: 1fr;
    }
    .navbar .dropdown-item {
        padding: .5rem .65rem;
        font-size: .92rem;
        gap: .6rem;
        border-radius: 8px;
        margin-bottom: 0;
    }
    .navbar .dropdown-item .menu-icon .icon {
        width: 18px;
        height: 18px;
    }

    /* ----- Bottom action row: theme toggle + Login ----- */
    .header-actions {
        padding: .9rem 1.1rem 1.1rem;
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        flex: 0 0 auto;
        margin-top: 0;
        display: flex;
        align-items: stretch;
        gap: .6rem;
    }
    .header-actions #themeToggle {
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
        padding: 0;
        border-radius: 10px;
    }
    .header-actions .btn-primary {
        flex: 1 1 auto;
        padding: .7rem 1rem;
        font-size: 1rem;
        border-radius: 10px;
    }

    /* Backdrop behind the drawer */
    .navbar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    .navbar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* Lock body scroll while drawer is open */
    body.drawer-open {
        overflow: hidden;
    }

    /* The sticky header sets z-index:1030 which creates a stacking context,
       so the drawer (its child) was being trapped *below* the backdrop
       (z-index:1040) — the backdrop's backdrop-filter then blurred the
       drawer itself. While the drawer is open, lift the entire header
       above the backdrop so the drawer reads sharply. */
    body.drawer-open .site-header {
        z-index: 1060;
    }
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--bs-tertiary-bg);
}

/* coloured icon chip for each dropdown item */
.menu-icon {
    /* --mi-color is set per-item via the inline style on the parent <a> tag.
       Don't redeclare it here, otherwise this default value clobbers the
       inherited per-item colour. Add var(--mi-color, #2563eb) fallbacks
       where the value is consumed. */
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--mi-color);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mi-color) 18%, var(--bs-body-bg)),
            color-mix(in srgb, var(--mi-color) 10%, var(--bs-body-bg)));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .08),
        0 4px 10px color-mix(in srgb, var(--mi-color) 30%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--mi-color) 22%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}

.menu-icon .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--mi-color) 45%, transparent));
}

/* Dropdown submenu items use the same flat coloured-glyph style as the
   top-level navbar — no chip, no shadow, just the SVG in its colour. */
.navbar .dropdown-item .menu-icon {
    width: auto;
    height: auto;
    background: none !important;
    box-shadow: none !important;
    color: var(--mi-color);
    border-radius: 0;
    padding: 0;
}
.navbar .dropdown-item .menu-icon .icon {
    width: 22px;
    height: 22px;
    color: var(--mi-color);
    filter: none;
    stroke-width: 1.75;
}

/* top-level navbar icon — flat coloured glyph (no chip / no shadow),
   sized to sit comfortably inline with the label */
.menu-icon-sm {
    width: auto;
    height: auto;
    margin-right: .5rem;
    background: none !important;
    box-shadow: none !important;
    color: var(--mi-color);
    border-radius: 0;
    padding: 0;
}
.menu-icon-sm .icon {
    width: 20px;
    height: 20px;
    color: var(--mi-color);
    filter: none;
    stroke-width: 2;
}
.navbar .nav-link {
    display: inline-flex;
    align-items: center;
}

/* (Previously re-applied the chip box-shadow on hover, which clashed with
   the flat-icon style. Removed.) */

.menu-label {
    flex: 1 1 auto;
    min-width: 0;
}

.navbar .dropdown-item .soon-pill {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    padding: .1rem .4rem;
    border-radius: 999px;
}

/* (Previously re-tinted the chip background in dark mode — removed since
   nav icons are now flat glyphs that don't need a chip.) */

.navbar .nav-link {
    font-weight: 500;
    color: var(--bs-body-color);
    padding: .5rem .8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
    background-color: color-mix(in srgb, var(--mi-color, var(--acc)) 12%, transparent);
    color: var(--bs-emphasis-color, var(--bs-body-color));
    text-decoration: none !important;
}

/* navbar gets busy at xl with 6 dropdowns + search + login — give it a touch of breathing room */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav .nav-link {
        font-size: 1rem;
    }

    /* breathing room before the first menu item and after the last */
    .navbar-expand-xl .navbar-nav > .nav-item:first-child {
        margin-left: 1.25rem;
    }
    .navbar-expand-xl .navbar-nav > .nav-item:last-child {
        margin-right: 1.25rem;
    }
}

#themeToggle .theme-icon-dark {
    display: none;
}

[data-bs-theme="dark"] #themeToggle .theme-icon-light {
    display: none;
}

[data-bs-theme="dark"] #themeToggle .theme-icon-dark {
    display: inline-block;
}

/* ---------- Hero ---------- */

.hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    background:
        radial-gradient(70rem 30rem at 50% -10rem, rgba(37, 99, 235, .12), transparent 70%);
}

.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.hero-subtitle {
    color: var(--bs-secondary-color);
    max-width: 38rem;
    margin: 1rem auto 2rem;
}

.hero-search {
    max-width: 40rem;
    margin: 0 auto;
}

.hero-search .input-group-text,
.hero-search .form-control {
    border: 1px solid var(--bs-border-color);
}

.hero-trust {
    margin-top: 1.5rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.hero-trust .list-inline-item {
    margin: 0 .6rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ---------- Sections ---------- */

.section {
    padding: clamp(2rem, 4vw, 3.25rem) 0;
}

.section-head {
    margin-bottom: 1.75rem;
}

.section-head h2 {
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

/* ---------- Tool grid & cards ---------- */

.tool-grid {
    display: grid;
    /* min(17.5rem, 100%) prevents the 280px minimum from pushing cards
       past the container width on narrow screens. */
    grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
    gap: 1.1rem;
}

.tool-card {
    --tc-color: var(--acc);
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    background: var(--bs-body-bg);
    box-shadow: var(--shadow);
    color: inherit;
    overflow: hidden;                     /* clip inner icon-shadow bleed past the rounded border */
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tool-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: color-mix(in srgb, var(--tc-color) 60%, transparent);
    text-decoration: none;
    color: inherit;
}

/* All-tools page: category section headings */
.tools-section {
    margin-bottom: 3rem;
}
.tools-section:last-child { margin-bottom: 0; }

.tools-section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.tools-section-text { flex: 1 1 auto; min-width: 0; }
.tools-section-head h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.tools-section-head p {
    margin: .15rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.tools-section-icon {
    --cc-color: #2563eb;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--cc-color) 88%, #fff 12%) 0%,
        var(--cc-color) 60%,
        color-mix(in srgb, var(--cc-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 8px 18px color-mix(in srgb, var(--cc-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tools-section-icon .icon { width: 20px; height: 20px; stroke-width: 2; }

.tools-section-count {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cc-color, var(--acc));
    background: color-mix(in srgb, var(--cc-color, var(--acc)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-color, var(--acc)) 30%, transparent);
    padding: .35rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
}
.tools-section-count:hover {
    background: color-mix(in srgb, var(--cc-color, var(--acc)) 18%, transparent);
    color: var(--cc-color, var(--acc));
    text-decoration: none;
    transform: translateX(2px);
}

@media (max-width: 575.98px) {
    .tools-section-head { flex-wrap: wrap; }
    .tools-section-count { margin-left: 0; }
}

/* default chip — small, tinted (matches the menu chips) */
.tool-card .tool-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
}
.tool-card .tool-card-icon .icon {
    width: 18px;
    height: 18px;
}

/* "Featured" variant (used in the Popular tools section on the homepage) —
   bigger square gradient block with a white stroke icon, like a dashboard stat card */
.tool-grid-featured .tool-card {
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.tool-grid-featured .tool-card .tool-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--tc-color) 88%, #fff 12%) 0%,
        var(--tc-color) 60%,
        color-mix(in srgb, var(--tc-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 10px 22px color-mix(in srgb, var(--tc-color) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.tool-grid-featured .tool-card .tool-card-icon .icon {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

.tool-grid-featured .tool-card:hover .tool-card-icon {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .1),
        0 14px 28px color-mix(in srgb, var(--tc-color) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}

.tool-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tool-card-title {
    display: block;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.3;
    color: var(--tc-color);
    letter-spacing: -0.005em;
    transition: opacity .15s ease;
}
.tool-card:hover .tool-card-title {
    opacity: .9;
}

.tool-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
    margin-top: .25rem;
}

/* ---------- Category grid ---------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.category-card {
    --cc-color: var(--acc);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.1rem 1.15rem 1.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    background: var(--bs-body-bg);
    box-shadow: var(--shadow);
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: color-mix(in srgb, var(--cc-color) 60%, transparent);
    text-decoration: none;
    color: inherit;
}

.category-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: .75rem;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--cc-color) 88%, #fff 12%) 0%,
        var(--cc-color) 60%,
        color-mix(in srgb, var(--cc-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 10px 22px color-mix(in srgb, var(--cc-color) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: box-shadow .15s ease;
}
.category-card-icon .icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}
.category-card:hover .category-card-icon {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .1),
        0 14px 28px color-mix(in srgb, var(--cc-color) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* count pill — pinned to the top-right of the card */
.category-card-count {
    position: absolute;
    top: 1.1rem;
    right: 1.15rem;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-color);
    background: color-mix(in srgb, var(--cc-color) 12%, transparent);
    padding: .15rem .55rem;
    border-radius: 999px;
    line-height: 1.3;
}

.category-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
    line-height: 1.3;
}

.category-card-desc {
    color: var(--bs-secondary-color);
    font-size: .88rem;
    line-height: 1.45;
    flex: 1 1 auto;
    margin-top: .1rem;
}

.category-card-link {
    color: var(--cc-color);
    font-weight: 600;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .65rem;
}
.category-card:hover .category-card-link {
    gap: .5rem;
    transition: gap .15s ease;
}

/* ---------- Benefits ---------- */

.benefits-section {
    background: var(--bs-tertiary-bg);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.benefit {
    text-align: center;
    padding: 1rem;
}

.benefit-icon {
    --bi-color: var(--acc);
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: .9rem;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bi-color) 88%, #fff 12%) 0%,
        var(--bi-color) 60%,
        color-mix(in srgb, var(--bi-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 12px 24px color-mix(in srgb, var(--bi-color) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.benefit-icon .icon {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

.benefit h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.benefit p {
    color: var(--bs-secondary-color);
    font-size: .92rem;
    margin-bottom: 0;
}

/* ---------- Page head & breadcrumb ---------- */

.page-head {
    padding: 2rem 0 1rem;
}

.page-head h1 {
    font-weight: 700;
    letter-spacing: -.02em;
}

.page-head-desc {
    color: var(--bs-secondary-color);
    max-width: 42rem;
}

.page-head-icon {
    display: inline-flex;
    color: var(--acc);
    background: rgba(37, 99, 235, .1);
    padding: .7rem;
    border-radius: var(--radius);
    margin-bottom: .75rem;
}

/* ---- Tool page header: inline icon + title with colourful chip ---- */
.tool-page-head {
    padding: 1.5rem 0 1.75rem;
}

.tool-head-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
@media (max-width: 575.98px) {
    .tool-head-row { gap: .85rem; }
}

.tool-page-head .page-head-icon {
    --mi-color: var(--tc-color, var(--acc));
    width: 64px;
    height: 64px;
    border-radius: 13px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--mi-color) 88%, #fff 12%) 0%,
        var(--mi-color) 60%,
        color-mix(in srgb, var(--mi-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 12px 26px color-mix(in srgb, var(--mi-color) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tool-page-head .page-head-icon .icon {
    width: 30px;
    height: 30px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
}
@media (max-width: 575.98px) {
    .tool-page-head .page-head-icon { width: 52px; height: 52px; border-radius: 11px; }
    .tool-page-head .page-head-icon .icon { width: 24px; height: 24px; }
}

.tool-page-head .tool-head-text { min-width: 0; }

.tool-page-head h1 {
    margin: 0;
    color: var(--bs-emphasis-color, #0b0c0e);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    font-size: clamp(1.7rem, 3.5vw, 2.25rem);
}

.tool-page-head .page-head-desc {
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
    max-width: 60ch;
    line-height: 1.5;
}

/* ---- Tighter section spacing inside the tool body ---- */
.tool-page-body .section {
    padding: 1.5rem 0 .5rem;
}
.tool-page-body .section h2 {
    margin-bottom: 1rem;
    color: var(--bs-emphasis-color, #0b0c0e);
    font-weight: 700;
}

/* ---- Tinted dropzone using the tool's accent colour ---- */
.tool-page-wrap .dropzone {
    background: var(--bs-tertiary-bg);
}
.tool-page-wrap .dropzone:hover,
.tool-page-wrap .dropzone.is-dragover {
    border-color: var(--tc-color, var(--acc));
    background: color-mix(in srgb, var(--tc-color, var(--acc)) 6%, var(--bs-body-bg));
}
.tool-page-wrap .dropzone-icon { color: var(--tc-color, var(--acc)); }
.tool-page-wrap .link-like { color: var(--tc-color, var(--acc)); }
.tool-page-wrap .dropzone-title { color: var(--bs-emphasis-color); font-weight: 600; }

.breadcrumb {
    padding-top: 1rem;
    font-size: .9rem;
}

/* ---------- Tool panel & dropzone ---------- */

.tool-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
    padding: 2.5rem 1.25rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover,
.dropzone.is-dragover {
    border-color: var(--acc);
    background: rgba(37, 99, 235, .05);
}

.dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dropzone-icon {
    color: var(--acc);
}

.dropzone-title {
    font-weight: 600;
}

.dropzone-hint {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.link-like {
    color: var(--acc);
    text-decoration: underline;
}

.file-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .85rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-sm);
    margin-bottom: .5rem;
    font-size: .9rem;
}

.tool-options {
    margin: 1.25rem 0;
}

/* Per-tool option fields (resize dimensions, page ranges, etc.) */
.tool-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 0;
}
.tool-option label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}
.tool-option .form-control,
.tool-option .form-select {
    width: 100%;
}
.tool-option-help {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    margin-top: .25rem;
}

.status-area:empty {
    display: none;
}

/* Animated three-dot spinner shown while a job is pending / processing */
.job-spinner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.job-spinner-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acc);
    display: inline-block;
    animation: job-bounce 1s infinite ease-in-out both;
}
.job-spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.job-spinner-dot:nth-child(2) { animation-delay: -0.16s; }
.job-spinner-dot:nth-child(3) { animation-delay: 0s; }

@keyframes job-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: .4; }
    40%           { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .job-spinner-dot { animation: none; opacity: .8; }
}

/* Determinate progress bar shown for FFmpeg jobs while encoding. The API
   returns a `progress` percent (0-99) and main.js renders this markup
   inside the same info alert as the spinner-only state. */
.job-progress-bar {
    height: 10px;
    width: 100%;
    background: color-mix(in srgb, var(--acc) 14%, var(--bs-tertiary-bg));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.job-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
        var(--acc) 0%,
        color-mix(in srgb, var(--acc) 70%, #fff) 100%);
    border-radius: 999px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    /* moving highlight stripe */
    background-image:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .35) 50%,
            transparent 100%),
        linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #fff));
    background-size: 60px 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: job-progress-shine 1.6s linear infinite;
}
@keyframes job-progress-shine {
    0%   { background-position: -60px 0, 0 0; }
    100% { background-position: calc(100% + 60px) 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .job-progress-fill { animation: none; background-image: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #fff)); }
}
.job-progress-num {
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    font-size: .9rem;
    color: var(--acc);
    letter-spacing: -.01em;
}

/* Final "Download" button shown after a successful conversion —
   emerald to match the success alert context */
.status-area .download-btn {
    --bs-btn-bg: #10b981;
    --bs-btn-border-color: #10b981;
    --bs-btn-hover-bg: #059669;
    --bs-btn-hover-border-color: #059669;
    --bs-btn-active-bg: #047857;
    --bs-btn-active-border-color: #047857;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;

    font-weight: 600;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(16, 185, 129, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.status-area .download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, .45);
}

/* Arrow that points the user at the download button */
.status-area .point-arrow {
    color: #10b981;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    animation: point-blink 1.1s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes point-blink {
    0%, 100% { opacity: 1;   transform: translateX(0); }
    50%      { opacity: .35; transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .status-area .point-arrow { animation: none; }
}
@media (max-width: 575.98px) {
    /* On phones the button wraps to its own row; hide the arrow there
       since it would point at the wrong place. */
    .status-area .point-arrow { display: none; }
}

@media (max-width: 575.98px) {
    .status-area .download-btn {
        width: 100%;
        margin-left: 0 !important;
        text-align: center;
    }
}

/* ---------- Browser tool widgets ---------- */

.widget-field {
    margin-bottom: 1rem;
}

.widget-label {
    font-weight: 600;
    margin-bottom: .35rem;
    display: block;
}

.widget-output {
    font-family: var(--bs-font-monospace);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-sm);
    padding: 1rem;
    min-height: 3rem;
}

.widget-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.unit-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: end;
}

.qr-canvas {
    background: #fff;
    padding: 1rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ---------- How-to & FAQ ---------- */

.how-to-list {
    padding-left: 1.1rem;
}

.how-to-list li {
    margin-bottom: .6rem;
}

.faq-accordion .accordion-button {
    font-weight: 600;
}

.faq-accordion .accordion-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: .6rem;
    border: 1px solid var(--bs-border-color);
}

/* ---------- Sidebar ---------- */

.sidebar-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--bs-body-bg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 5rem;
}

.sidebar-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
    margin: 0 0 .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.related-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .25rem;
}

.related-list li { margin: 0; }

.related-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .5rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.related-list a:hover {
    background: color-mix(in srgb, var(--r-color, var(--acc)) 9%, transparent);
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.related-icon {
    --mi-color: var(--r-color, var(--acc));
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--mi-color) 88%, #fff 12%) 0%,
        var(--mi-color) 60%,
        color-mix(in srgb, var(--mi-color) 88%, #000 12%) 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .07),
        0 4px 10px color-mix(in srgb, var(--mi-color) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.related-icon .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}

.related-name {
    font-weight: 500;
    font-size: .92rem;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-arrow {
    color: var(--bs-secondary-color);
    opacity: .35;
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.related-list a:hover .related-arrow {
    opacity: 1;
    color: var(--r-color, var(--acc));
    transform: translateX(2px);
}

/* "All Document Tools" button — picks up the current tool's accent colour */
.btn-all-cat {
    --b-color: var(--tc-color, var(--acc));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
    padding: .65rem 1rem;
    border: 1px solid color-mix(in srgb, var(--b-color) 40%, transparent);
    background: color-mix(in srgb, var(--b-color) 10%, transparent);
    color: var(--b-color);
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-all-cat:hover {
    background: color-mix(in srgb, var(--b-color) 18%, transparent);
    border-color: var(--b-color);
    color: var(--b-color);
    text-decoration: none;
    transform: translateX(2px);
}
.btn-all-cat .icon { transition: transform .15s ease; }
.btn-all-cat:hover .icon { transform: translateX(2px); }

/* ---------- Chips ---------- */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: inherit;
    font-size: .9rem;
}

.chip:hover {
    border-color: var(--acc);
    color: var(--acc);
    text-decoration: none;
}

/* ---------- Footer ---------- */

/* Main footer */
.site-footer {
    background: var(--bs-body-bg);             /* white in light, dark in dark — distinct from page bg */
    border-top: 1px solid var(--bs-border-color);
    padding: 2.5rem 0 1.25rem;                 /* 40px top / 20px bottom — tighter */
    margin-top: 2.5rem;
}

/* ---- Trust row (replaces the old search CTA + bottom trust strip) ---- */
.footer-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) {
    .footer-trust-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
    .footer-trust-row { grid-template-columns: 1fr; }
}

.trust-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
}

.trust-icon {
    --ti-color: #2563eb;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ti-color) 88%, #fff 12%) 0%,
        var(--ti-color) 60%,
        color-mix(in srgb, var(--ti-color) 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 8px 18px color-mix(in srgb, var(--ti-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.trust-icon .icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}

.trust-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    line-height: 1.3;
    color: var(--bs-body-color);
}
.trust-card p {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin: 0;
    line-height: 1.45;
}

/* ---- Footer grid: custom widths roughly 30/20/20/15/15 on lg+ ---- */
.footer-grid {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2rem;
}
.footer-col {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-bottom: 0;
}

/* Mobile / small: each column full width, then 2-up on md, then custom on lg+ */
@media (max-width: 767.98px) {
    .footer-col { flex: 0 0 100%; max-width: 100%; }
    .footer-col-popular,
    .footer-col-cat,
    .footer-col-company,
    .footer-col-legal { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .footer-col          { flex: 0 0 50%; max-width: 50%; }
    .footer-col-popular,
    .footer-col-cat      { flex: 0 0 50%; max-width: 50%; }
    .footer-col-company,
    .footer-col-legal    { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
    .footer-col-brand    { flex: 0 0 30%; max-width: 30%; }
    .footer-col-popular  { flex: 0 0 20%; max-width: 20%; }
    .footer-col-cat      { flex: 0 0 20%; max-width: 20%; }
    .footer-col-company  { flex: 0 0 15%; max-width: 15%; }
    .footer-col-legal    { flex: 0 0 15%; max-width: 15%; }
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1rem;
}
.footer-brand:hover { color: inherit; text-decoration: none; }

.footer-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(160deg,
        color-mix(in srgb, #2563eb 88%, #fff 12%) 0%,
        #2563eb 60%,
        color-mix(in srgb, #2563eb 88%, #000 12%) 100%);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .08),
        0 10px 22px rgba(37, 99, 235, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.footer-mark .icon { width: 22px; height: 22px; stroke-width: 2; }

.footer-brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.footer-tagline {
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: .9rem;
    max-width: 26rem;
}

/* The strong promise line in the brand column */
.footer-promise {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    background: color-mix(in srgb, #10b981 8%, transparent);
    color: var(--bs-body-color);
    border-radius: 999px;
    padding: .35rem .8rem .35rem .55rem;
    font-size: .82rem;
    margin: 0 0 1.25rem;
}
.footer-promise strong { font-weight: 600; }
.footer-promise .footer-status-dot {
    margin-right: 0;
}

/* Contact links in brand column */
.footer-contact-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-links li { margin-bottom: .4rem; }
.footer-contact-links a {
    color: var(--bs-secondary-color);
    font-size: .88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: color .15s ease;
}
.footer-contact-links a:hover { color: var(--acc); }
.footer-contact-links .icon { color: var(--acc); opacity: .7; }
.footer-contact-links a:hover .icon { opacity: 1; }

.footer-heading {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-links li { margin-bottom: .55rem; }
.footer-links a {
    color: var(--bs-secondary-color);
    font-size: .92rem;
    text-decoration: none;
    transition: color .15s ease;
}
.footer-links a:hover {
    color: var(--acc);
}

.footer-cat-links a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.footer-cat-links a:hover {
    color: var(--cl-color, var(--acc));
}
.footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--cl-color, var(--acc));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cl-color, var(--acc)) 18%, transparent),
        0 1px 2px color-mix(in srgb, var(--cl-color, var(--acc)) 40%, transparent);
}

/* Bottom bar — single tidy line of copyright + key legal links */
.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}
.footer-bottom-line {
    margin: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}
.footer-bottom-line a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-bottom-line a:hover { color: var(--acc); }
.footer-sep {
    color: var(--bs-border-color);
    margin: 0 .1rem;
}

.footer-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
    animation: footer-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes footer-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
    50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, .08); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-status-dot { animation: none; }
}

/* ---------- Prose pages ---------- */

.prose {
    max-width: 46rem;
}

.prose h2 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 1.3rem;
}

.prose p,
.prose li {
    color: var(--bs-body-color);
    line-height: 1.7;
}

/* ---------- Error page ---------- */

.error-page {
    padding: 4rem 0;
}

.error-code {
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 800;
    color: var(--acc);
    line-height: 1;
    margin-bottom: .5rem;
}

/* ---------- Mobile sticky action ---------- */

.mobile-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: .75rem 1rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .mobile-action-bar {
        display: none;
    }
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
    .columns-2 {
        columns: 1;
    }

    .hero-trust .list-inline-item {
        display: flex;
        justify-content: center;
        margin: .35rem 0;
    }

    /* Phones — give the page a comfortable side gutter so cards (with their
       outer box-shadow) don't kiss the edge of the screen. */
    .container,
    .container-fluid,
    .container-sm {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
}