/* ==========================================================================
   PureBDInfo public theme — "editorial" look on Bootstrap 5.3.
   Deep teal + amber, paper-white surfaces, serif display type, hairline rules
   instead of soft shadows. No build step: design tokens + component overrides.
   The "SHARED THEME" block is duplicated in admin.css — keep them in sync.
   ========================================================================== */

/* ─── SHARED THEME: tokens ─────────────────────────────────────────────── */

:root {
    --pbi-primary: #0f766e;
    --pbi-primary-hover: #0b5b55;
    --pbi-primary-active: #08423e;
    --pbi-primary-soft: #eaf5f3;
    --pbi-primary-line: #bcdcd7;

    --pbi-accent: #d97706;
    --pbi-accent-hover: #b45309;
    --pbi-accent-soft: #fdf3e3;
    --pbi-accent-line: #f0d5a8;

    --pbi-ink: #1a2422;
    --pbi-ink-soft: #3d4b48;
    --pbi-muted: #6b7c78;
    --pbi-paper: #fff;
    --pbi-bg: #f7f9f8;
    --pbi-border: #e2e8e6;
    --pbi-border-strong: #cbd6d3;

    /* Editorial = tighter corners than the old rounded-blob look. */
    --pbi-radius: .5rem;
    --pbi-radius-sm: .375rem;
    --pbi-radius-lg: .75rem;

    --pbi-shadow-sm: 0 1px 2px rgba(15, 42, 38, .05);
    --pbi-shadow-lg: 0 12px 32px -16px rgba(15, 42, 38, .28);

    --pbi-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --pbi-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Height of the sticky .site-header (2.1rem top bar + ~3.7rem main bar) — the
       tool page's sticky right rail offsets itself by this so it never slides
       under the header. Keep in step if the navbar's padding changes. */
    --pbi-header-h: 5.8rem;

    /* Width of the tool page's RIGHT rail (the old theme put it on the left). */
    --pbi-rail-w: 19rem;

    --bs-primary: var(--pbi-primary);
    --bs-primary-rgb: 15, 118, 110;
    --bs-body-bg: var(--pbi-bg);
    --bs-body-bg-rgb: 247, 249, 248;
    --bs-body-color: var(--pbi-ink);
    --bs-body-color-rgb: 26, 36, 34;
    --bs-secondary-color: var(--pbi-muted);
    --bs-tertiary-bg: #eef3f1;
    --bs-tertiary-bg-rgb: 238, 243, 241;
    --bs-border-color: var(--pbi-border);
    --bs-border-radius: var(--pbi-radius-sm);
    --bs-link-color-rgb: 11, 91, 85;
    --bs-link-hover-color-rgb: 8, 66, 62;
}

body {
    font-family: var(--pbi-sans);
    -webkit-font-smoothing: antialiased;
    color: var(--pbi-ink);
}

/* Display type is the loudest signal that this is not the old theme. */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: var(--pbi-serif);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--pbi-ink);
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--pbi-ink);
}

/* Small caps label used above headings throughout the site. */
.eyebrow {
    display: inline-block;
    font-family: var(--pbi-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pbi-accent-hover);
}

.text-gradient {
    /* Kept for markup compatibility; the editorial theme underlines instead. */
    color: var(--pbi-primary);
    box-shadow: inset 0 -.32em 0 var(--pbi-accent-soft);
}

/* ─── SHARED THEME: buttons ────────────────────────────────────────────── */

.btn {
    --bs-btn-border-radius: var(--pbi-radius-sm);
    font-weight: 600;
    letter-spacing: -.005em;
    padding: .5rem 1.05rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--pbi-primary);
    --bs-btn-border-color: var(--pbi-primary);
    --bs-btn-hover-bg: var(--pbi-primary-hover);
    --bs-btn-hover-border-color: var(--pbi-primary-hover);
    --bs-btn-active-bg: var(--pbi-primary-active);
    --bs-btn-active-border-color: var(--pbi-primary-active);
    --bs-btn-disabled-bg: var(--pbi-primary);
    --bs-btn-disabled-border-color: var(--pbi-primary);
    box-shadow: none;
}

/* Amber is the "do the thing" colour — reserved for primary actions. */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--pbi-accent);
    --bs-btn-border-color: var(--pbi-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pbi-accent-hover);
    --bs-btn-hover-border-color: var(--pbi-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pbi-accent-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--pbi-accent);
    --bs-btn-disabled-border-color: var(--pbi-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pbi-ink-soft);
    --bs-btn-border-color: var(--pbi-border-strong);
    --bs-btn-hover-color: var(--pbi-ink);
    --bs-btn-hover-bg: var(--pbi-primary-soft);
    --bs-btn-hover-border-color: var(--pbi-primary-line);
    --bs-btn-active-color: var(--pbi-ink);
    --bs-btn-active-bg: var(--pbi-primary-soft);
    --bs-btn-active-border-color: var(--pbi-primary-line);
}

.btn-outline-danger {
    --bs-btn-color: #b42318;
    --bs-btn-border-color: #f0c2bd;
    --bs-btn-hover-bg: #b42318;
    --bs-btn-hover-border-color: #b42318;
}

.btn-outline-success {
    --bs-btn-color: var(--pbi-primary-hover);
    --bs-btn-border-color: var(--pbi-primary-line);
    --bs-btn-hover-bg: var(--pbi-primary);
    --bs-btn-hover-border-color: var(--pbi-primary);
}

/* ─── SHARED THEME: forms ──────────────────────────────────────────────── */

.form-control,
.form-select {
    border-color: var(--pbi-border-strong);
    border-radius: var(--pbi-radius-sm);
    padding: .55rem .75rem;
    color: var(--pbi-ink);
    background-color: var(--pbi-paper);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pbi-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.form-control::placeholder {
    color: #9aa8a4;
}

.form-check-input:checked {
    background-color: var(--pbi-primary);
    border-color: var(--pbi-primary);
}

.form-check-input:focus {
    border-color: var(--pbi-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--pbi-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--pbi-primary);
}

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--pbi-ink-soft);
    margin-bottom: .35rem;
}

/* ─── SHARED THEME: cards, badges, alerts, dropdowns, pagination ───────── */

.card {
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    background-color: var(--pbi-paper);
}

/* The editorial look leans on rules, not drop shadows. */
.shadow-sm {
    box-shadow: var(--pbi-shadow-sm) !important;
}

.badge {
    font-weight: 650;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: .32em .7em;
}

.text-bg-primary {
    background-color: var(--pbi-primary-soft) !important;
    color: var(--pbi-primary-active) !important;
}

.text-bg-success {
    background-color: #e6f4ec !important;
    color: #14683f !important;
}

.text-bg-secondary {
    background-color: #eef2f1 !important;
    color: var(--pbi-ink-soft) !important;
}

.text-bg-warning {
    background-color: var(--pbi-accent-soft) !important;
    color: var(--pbi-accent-hover) !important;
}

.text-bg-danger {
    background-color: #fdecea !important;
    color: #b42318 !important;
}

.text-bg-light {
    background-color: #f2f6f5 !important;
    color: var(--pbi-ink-soft) !important;
}

.alert {
    border-radius: var(--pbi-radius);
    border-width: 1px;
    border-left-width: 3px;
}

.alert-success {
    background-color: #eef7f2;
    border-color: #bfe0cd;
    border-left-color: #14683f;
    color: #14683f;
}

.alert-danger {
    background-color: #fdf0ee;
    border-color: #f3cdc8;
    border-left-color: #b42318;
    color: #b42318;
}

.alert-warning {
    background-color: var(--pbi-accent-soft);
    border-color: var(--pbi-accent-line);
    border-left-color: var(--pbi-accent);
    color: var(--pbi-accent-hover);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--pbi-border);
    --bs-dropdown-border-radius: var(--pbi-radius);
    --bs-dropdown-link-active-bg: var(--pbi-primary-soft);
    --bs-dropdown-link-active-color: var(--pbi-primary-active);
    --bs-dropdown-link-hover-bg: var(--pbi-primary-soft);
    box-shadow: var(--pbi-shadow-lg);
    padding: .35rem;
}

.dropdown-item {
    border-radius: var(--pbi-radius-sm);
    font-size: .925rem;
}

.pagination {
    --bs-pagination-color: var(--pbi-ink-soft);
    --bs-pagination-border-color: var(--pbi-border);
    --bs-pagination-border-radius: var(--pbi-radius-sm);
    --bs-pagination-active-bg: var(--pbi-primary);
    --bs-pagination-active-border-color: var(--pbi-primary);
    --bs-pagination-hover-bg: var(--pbi-primary-soft);
    --bs-pagination-hover-color: var(--pbi-primary-active);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: header — two tier (utility strip + main bar), left brand, flat.
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
    background: var(--pbi-paper);
    border-bottom: 1px solid var(--pbi-border);
    z-index: 1040;
}

/* Slim teal utility strip above the nav — new to this theme. */
.site-topbar {
    background: var(--pbi-primary-active);
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    letter-spacing: .01em;
}

.site-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.1rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.site-topbar-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
}

.site-topbar-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: #fbbf24;
    flex: none;
}

.site-topbar-links {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-topbar a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.site-topbar a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}

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

.site-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0;
    margin-right: 2rem;
}

.brand-mark {
    flex: none;
    display: block;
}

.brand-text {
    font-family: var(--pbi-serif);
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: -.02em;
    color: var(--pbi-ink);
    line-height: 1;
}

.brand-text b {
    font-weight: 600;
    color: var(--pbi-primary);
}

.site-header .nav-link {
    font-size: .935rem;
    font-weight: 550;
    color: var(--pbi-ink-soft);
    padding: .4rem .1rem;
    margin-inline: .55rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .15s ease, border-color .15s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
    color: var(--pbi-primary-active);
    border-bottom-color: var(--pbi-accent);
}

.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"] {
    color: var(--pbi-primary-active);
    border-bottom-color: var(--pbi-accent);
}

.site-header .dropdown-toggle::after {
    margin-left: .35em;
    vertical-align: .12em;
}

.navbar-toggler {
    border-color: var(--pbi-border-strong);
    border-radius: var(--pbi-radius-sm);
    padding: .35rem .55rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

/* Header search: a bordered pill that widens on focus. */
.nav-search {
    min-width: 13rem;
}

.nav-search-input {
    border: 1px solid var(--pbi-border-strong);
    border-radius: 999px;
    background: var(--pbi-bg);
    padding: .4rem 2.1rem .4rem 2.1rem;
    font-size: .875rem;
    width: 100%;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nav-search-input:focus {
    background: var(--pbi-paper);
    border-color: var(--pbi-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.nav-search-icon {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pbi-muted);
    display: flex;
    pointer-events: none;
}

.nav-search-kbd {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border-strong);
    border-radius: .3rem;
    color: var(--pbi-muted);
    font-family: var(--pbi-sans);
    font-size: .68rem;
    line-height: 1;
    padding: .2rem .35rem;
    pointer-events: none;
}

.nav-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* AI badge pill in the nav. */
.site-header .nav-link.ai-pill {
    border: 1px solid var(--pbi-accent-line);
    border-radius: 999px;
    background: var(--pbi-accent-soft);
    color: var(--pbi-accent-hover);
    padding: .3rem .8rem;
    font-weight: 650;
}

.site-header .nav-link.ai-pill:hover {
    background: var(--pbi-accent);
    border-color: var(--pbi-accent);
    color: #fff;
}

.nav-categories-dd {
    min-width: 17rem;
}

.nav-categories-dd .dropdown-header {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pbi-muted);
    padding: .5rem .65rem .35rem;
}

/* ─── Live search dropdown (markup is built by assets/js/app.js) ────────── */

.live-search-results {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    box-shadow: var(--pbi-shadow-lg);
    padding: .35rem;
    max-height: 24rem;
    overflow-y: auto;
    min-width: 19rem;
}

.live-search-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pbi-muted);
    padding: .45rem .6rem .3rem;
}

.live-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: var(--pbi-radius-sm);
    color: var(--pbi-ink);
    text-decoration: none;
    font-size: .9rem;
    border-left: 2px solid transparent;
}

.live-search-item small {
    color: var(--pbi-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.live-search-item:hover,
.live-search-item.active {
    background: var(--pbi-primary-soft);
    border-left-color: var(--pbi-accent);
    color: var(--pbi-primary-active);
}

.live-search-item mark {
    background: var(--pbi-accent-soft);
    color: inherit;
    padding: 0 .1em;
    border-radius: .15rem;
}

.live-search-all {
    display: block;
    text-align: center;
    padding: .5rem;
    margin-top: .2rem;
    border-top: 1px solid var(--pbi-border);
    color: var(--pbi-primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--pbi-radius-sm);
}

.live-search-all:hover,
.live-search-all.active {
    background: var(--pbi-primary-soft);
    color: var(--pbi-primary-active);
}

.live-search-empty {
    padding: .8rem .6rem;
    color: var(--pbi-muted);
    font-size: .875rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: homepage — asymmetric split hero (was a centred hero).
   ══════════════════════════════════════════════════════════════════════════ */

body.is-home {
    background: var(--pbi-paper);
}

.home-hero {
    position: relative;
    background: var(--pbi-paper);
    border-bottom: 1px solid var(--pbi-border);
    padding: 3.25rem 0 3rem;
    overflow: hidden;
}

/* Faint ruled paper behind the hero — replaces the old purple glow. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--pbi-border) 1px, transparent 1px);
    background-size: 100% 2.5rem;
    opacity: .5;
    mask-image: linear-gradient(180deg, transparent, #000 35%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, transparent);
    pointer-events: none;
}

.home-hero .container {
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3.5rem;
    align-items: center;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pbi-accent-hover);
    margin-bottom: 1rem;
}

.home-eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: var(--pbi-accent);
}

.home-title {
    font-family: var(--pbi-serif);
    font-size: clamp(2.35rem, 4.6vw, 3.6rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.028em;
    color: var(--pbi-ink);
    margin-bottom: 1.1rem;
}

.home-title em {
    font-style: italic;
    color: var(--pbi-primary);
}

.home-lede {
    font-size: 1.075rem;
    line-height: 1.62;
    color: var(--pbi-muted);
    max-width: 34rem;
    margin-bottom: 1.75rem;
}

/* Search bar: squared-off, bordered, amber submit. */
.home-search {
    display: flex;
    align-items: center;
    background: var(--pbi-paper);
    border: 1.5px solid var(--pbi-border-strong);
    border-radius: var(--pbi-radius);
    padding: .35rem .35rem .35rem .9rem;
    gap: .5rem;
    max-width: 30rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.home-search:focus-within {
    border-color: var(--pbi-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.home-search-ic {
    color: var(--pbi-muted);
    flex: none;
}

.home-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .975rem;
    color: var(--pbi-ink);
    padding: .5rem 0;
}

.home-search-input::placeholder {
    color: #9aa8a4;
}

.home-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.home-search-btn {
    flex: none;
    border: 0;
    border-radius: var(--pbi-radius-sm);
    background: var(--pbi-accent);
    color: #fff;
    font-weight: 650;
    font-size: .9rem;
    padding: .58rem 1.15rem;
    transition: background-color .15s ease;
}

.home-search-btn:hover {
    background: var(--pbi-accent-hover);
}

.home-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.15rem;
}

.home-chips-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pbi-muted);
    margin-right: .15rem;
}

.home-chips a {
    font-size: .84rem;
    font-weight: 550;
    color: var(--pbi-ink-soft);
    text-decoration: none;
    padding: .3rem .7rem;
    border: 1px solid var(--pbi-border);
    border-radius: 999px;
    background: var(--pbi-bg);
    transition: all .15s ease;
}

.home-chips a:hover {
    color: var(--pbi-primary-active);
    border-color: var(--pbi-primary-line);
    background: var(--pbi-primary-soft);
}

/* ─── Hero right: a mock "generation" panel that shows what the site does ── */

.hero-demo {
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-lg);
    background: var(--pbi-paper);
    box-shadow: var(--pbi-shadow-lg);
    overflow: hidden;
}

.hero-demo-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    background: var(--pbi-bg);
    border-bottom: 1px solid var(--pbi-border);
}

.hero-demo-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--pbi-border-strong);
    flex: none;
}

.hero-demo-dot:first-child {
    background: var(--pbi-accent);
}

.hero-demo-title {
    font-size: .78rem;
    font-weight: 650;
    color: var(--pbi-muted);
    margin-left: .35rem;
}

.hero-demo-body {
    padding: 1.1rem 1.15rem 1.25rem;
}

.hero-demo-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pbi-muted);
    display: block;
    margin-bottom: .4rem;
}

.hero-demo-prompt {
    font-size: .9rem;
    color: var(--pbi-ink-soft);
    background: var(--pbi-bg);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-sm);
    padding: .6rem .75rem;
    margin-bottom: 1rem;
}

.hero-demo-out {
    border-left: 2px solid var(--pbi-accent);
    padding-left: .85rem;
}

.hero-demo-out p {
    font-family: var(--pbi-serif);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--pbi-ink);
    margin: 0 0 .55rem;
}

.hero-demo-out p:last-child {
    margin-bottom: 0;
    color: var(--pbi-muted);
}

/* The caret keeps "being typed" so the panel reads as live. */
.hero-demo-caret {
    display: inline-block;
    width: .5ch;
    background: var(--pbi-accent);
    color: transparent;
    animation: pbi-caret 1.1s steps(1) infinite;
}

@keyframes pbi-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ─── Trust strip: numbers separated by rules, not cards ─────────────────── */

.home-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 2rem 0;
    border-bottom: 1px solid var(--pbi-border);
}

.home-trust li {
    padding: 0 1.5rem;
    border-left: 1px solid var(--pbi-border);
}

.home-trust li:first-child {
    padding-left: 0;
    border-left: 0;
}

.home-trust strong {
    display: block;
    font-family: var(--pbi-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pbi-ink);
    margin-bottom: .2rem;
}

.home-trust span {
    display: block;
    font-size: .845rem;
    line-height: 1.5;
    color: var(--pbi-muted);
}

/* ─── Section headers: rule + label, magazine style ──────────────────────── */

.home-section {
    margin-top: 3.25rem;
}

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .7rem;
    margin-bottom: 1.35rem;
    border-bottom: 2px solid var(--pbi-ink);
}

.home-section-head h2 {
    font-family: var(--pbi-serif);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
}

.home-section-head a {
    font-size: .85rem;
    font-weight: 650;
    color: var(--pbi-primary);
    text-decoration: none;
    white-space: nowrap;
}

.home-section-head a:hover {
    color: var(--pbi-accent-hover);
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* ─── How it works: numbered rules ───────────────────────────────────────── */

.home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pbi-step;
}

.home-steps li {
    border-top: 2px solid var(--pbi-accent);
    padding-top: 1rem;
}

.home-step-n {
    display: block;
    font-family: var(--pbi-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pbi-accent);
    margin-bottom: .55rem;
}

.home-steps h3 {
    font-size: 1.075rem;
    margin-bottom: .45rem;
}

.home-steps p {
    font-size: .9rem;
    line-height: 1.62;
    color: var(--pbi-muted);
    margin: 0;
}

/* ─── Long-form copy blocks ──────────────────────────────────────────────── */

.home-prose {
    max-width: 44rem;
}

.home-prose h2 {
    font-size: 1.45rem;
    padding-bottom: .7rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--pbi-ink);
}

.home-prose h3 {
    font-size: 1.1rem;
    margin-top: 1.75rem;
    margin-bottom: .55rem;
}

.home-prose p {
    font-size: .975rem;
    line-height: 1.72;
    color: var(--pbi-ink-soft);
    margin-bottom: 1rem;
}

.home-prose p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: tool + category cards — flat, ruled, amber stripe on hover.
   ══════════════════════════════════════════════════════════════════════════ */

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.15rem 1.15rem;
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Left stripe wipes in on hover — the theme's signature card move. */
.tool-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pbi-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .2s ease;
}

.tool-card:hover {
    border-color: var(--pbi-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--pbi-shadow-lg);
}

.tool-card:hover::before {
    transform: scaleY(1);
}

.tool-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .8rem;
}

.tool-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--pbi-radius-sm);
    background: var(--pbi-primary-soft);
    color: var(--pbi-primary);
    flex: none;
    transition: background-color .15s ease, color .15s ease;
}

.tool-card-ic svg {
    width: 1.2rem;
    height: 1.2rem;
}

.tool-card:hover .tool-card-ic {
    background: var(--pbi-primary);
    color: #fff;
}

.tool-card-arrow {
    color: var(--pbi-border-strong);
    flex: none;
    transition: color .15s ease, transform .15s ease;
}

.tool-card:hover .tool-card-arrow {
    color: var(--pbi-accent);
    transform: translate(2px, -2px);
}

.tool-card-title {
    font-family: var(--pbi-sans);
    font-size: .955rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--pbi-ink);
    margin: 0 0 .35rem;
}

.tool-card:hover .tool-card-title {
    color: var(--pbi-primary-active);
}

.tool-card-text {
    font-size: .825rem;
    line-height: 1.5;
    color: var(--pbi-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Category cards ─────────────────────────────────────────────────────── */

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

.cat-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.cat-card:hover {
    border-color: var(--pbi-primary-line);
    background: var(--pbi-primary-soft);
}

.cat-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--pbi-radius-sm);
    background: var(--pbi-primary);
    color: #fff;
    flex: none;
}

.cat-card-ic svg {
    width: 1.3rem;
    height: 1.3rem;
}

.cat-card-tx {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cat-card-name {
    font-family: var(--pbi-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pbi-ink);
    line-height: 1.3;
}

.cat-card-count {
    font-size: .8rem;
    color: var(--pbi-muted);
    margin-top: .1rem;
}

.cat-card-arrow {
    color: var(--pbi-border-strong);
    flex: none;
    transition: color .15s ease, transform .15s ease;
}

.cat-card:hover .cat-card-arrow {
    color: var(--pbi-accent);
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: tool page — content LEFT, rail RIGHT (the old theme had it left).
   ══════════════════════════════════════════════════════════════════════════ */

.tool-container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 992px) {
    .tool-layout {
        grid-template-columns: minmax(0, 1fr) var(--pbi-rail-w);
        align-items: start;
    }

    /* The rail is a normal grid column now — no fixed positioning, no body offset. */
    .tool-rail {
        position: sticky;
        top: calc(var(--pbi-header-h) + 1rem);
        max-height: calc(100vh - var(--pbi-header-h) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .tool-rail::-webkit-scrollbar {
        width: 6px;
    }

    .tool-rail::-webkit-scrollbar-thumb {
        background: var(--pbi-border-strong);
        border-radius: 999px;
    }
}

/* The workspace panel that holds the tool itself. */
.tool-panel {
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-lg);
    padding: 1.35rem 1.4rem 1.5rem;
}

.tool-breadcrumb {
    margin-bottom: .75rem;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--pbi-border-strong);
    --bs-breadcrumb-item-padding-x: .5rem;
    font-size: .82rem;
    margin-bottom: 0;
}

.breadcrumb a {
    color: var(--pbi-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--pbi-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.breadcrumb-item.active {
    color: var(--pbi-ink-soft);
}

.tool-hero {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.tool-hero-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--pbi-radius);
    background: var(--pbi-primary);
    color: #fff;
    flex: none;
}

.tool-hero-ic svg {
    width: 1.45rem;
    height: 1.45rem;
}

.tool-eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pbi-accent-hover);
    text-decoration: none;
    margin-bottom: .15rem;
}

.tool-eyebrow:hover {
    color: var(--pbi-accent);
}

.tool-title {
    font-family: var(--pbi-serif);
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    font-weight: 600;
    letter-spacing: -.022em;
    line-height: 1.15;
    margin: 0;
}

.tool-sub {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--pbi-muted);
    margin-bottom: 0;
    max-width: 46rem;
}

/* Ruled separator between the title block and the tool. */
.tool-divider {
    height: 1px;
    background: var(--pbi-border);
    margin: 1.15rem 0 1.25rem;
}

/* ─── Right rail cards ───────────────────────────────────────────────────── */

.rail-card {
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    padding: .35rem;
}

.tools-sidebar-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pbi-muted);
    padding: .7rem .75rem .5rem;
}

/* Promo block for the AI category. */
.ai-promo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .9rem;
    margin-bottom: 1rem;
    background: var(--pbi-primary-active);
    border-radius: var(--pbi-radius);
    text-decoration: none;
    transition: background-color .15s ease;
}

.ai-promo:hover {
    background: var(--pbi-primary-hover);
}

.ai-promo-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--pbi-radius-sm);
    background: rgba(255, 255, 255, .14);
    color: #fbbf24;
    flex: none;
}

.ai-promo-ic svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ai-promo-tx {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.ai-promo-title {
    font-size: .92rem;
    font-weight: 650;
    color: #fff;
    line-height: 1.25;
}

.ai-promo-sub {
    font-size: .76rem;
    color: rgba(255, 255, 255, .68);
    margin-top: .1rem;
}

.ai-promo-arrow {
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, .55);
    flex: none;
    transition: transform .15s ease;
}

.ai-promo:hover .ai-promo-arrow {
    transform: translateX(3px);
    color: #fff;
}

/* ─── Sidebar category accordion ─────────────────────────────────────────── */

.tsb-accordion {
    --bs-accordion-border-width: 0;
}

.tsb-item {
    border: 0;
    background: transparent;
}

.tsb-item + .tsb-item {
    border-top: 1px solid var(--pbi-border);
}

.tsb-cat {
    display: flex;
    align-items: center;
    border-radius: var(--pbi-radius-sm);
    transition: background-color .15s ease;
}

.tsb-cat:hover,
.tsb-cat.is-current {
    background: var(--pbi-primary-soft);
}

.tsb-cat-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .3rem .6rem .65rem;
    text-decoration: none;
}

.tsb-cat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: .3rem;
    background: var(--pbi-bg);
    color: var(--pbi-muted);
    flex: none;
}

.tsb-cat-ic svg {
    width: .95rem;
    height: .95rem;
}

.tsb-cat.is-current .tsb-cat-ic {
    background: var(--pbi-primary);
    color: #fff;
}

.tsb-cat-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pbi-ink-soft);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsb-cat.is-current .tsb-cat-name {
    color: var(--pbi-primary-active);
}

.tsb-count {
    font-size: .72rem;
    font-weight: 650;
    color: var(--pbi-muted);
    background: var(--pbi-bg);
    border-radius: 999px;
    padding: .1rem .45rem;
    flex: none;
}

.tsb-cat.is-current .tsb-count {
    background: var(--pbi-paper);
    color: var(--pbi-primary);
}

.tsb-toggle {
    border: 0;
    background: transparent;
    color: var(--pbi-muted);
    padding: .5rem .6rem;
    display: flex;
    align-items: center;
    flex: none;
}

.tsb-toggle svg {
    width: .9rem;
    height: .9rem;
    transition: transform .2s ease;
}

.tsb-toggle.collapsed svg {
    transform: rotate(-90deg);
}

.tsb-tools {
    list-style: none;
    margin: 0;
    padding: .15rem 0 .5rem 1.45rem;
    border-left: 1px solid var(--pbi-border);
    margin-left: 1.4rem;
}

.tsb-tool {
    display: block;
    font-size: .825rem;
    color: var(--pbi-muted);
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: .3rem;
    line-height: 1.4;
}

.tsb-tool:hover {
    color: var(--pbi-primary);
    background: var(--pbi-primary-soft);
}

.tsb-tool.active {
    color: var(--pbi-primary-active);
    background: var(--pbi-primary-soft);
    font-weight: 650;
    box-shadow: inset 2px 0 0 var(--pbi-accent);
}

/* ─── Tool long-form copy ────────────────────────────────────────────────── */

.tool-prose {
    max-width: 46rem;
    margin-top: 2.25rem;
}

.tool-prose h2 {
    font-size: 1.3rem;
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--pbi-ink);
}

.tool-prose h3 {
    font-size: 1.05rem;
    margin-top: 1.6rem;
    margin-bottom: .5rem;
}

.tool-prose > *:first-child,
.tool-prose > section:first-child > *:first-child {
    margin-top: 0;
}

.tool-prose p,
.tool-prose li {
    font-size: .955rem;
    line-height: 1.72;
    color: var(--pbi-ink-soft);
}

.tool-prose p {
    margin-bottom: 1rem;
}

.tool-prose p:last-child {
    margin-bottom: 0;
}

/* The short_description opens the copy as a pull-quote style lede. */
.tool-prose-lead {
    font-family: var(--pbi-serif);
    font-size: 1.075rem !important;
    line-height: 1.6 !important;
    color: var(--pbi-ink) !important;
    border-left: 3px solid var(--pbi-accent);
    padding-left: 1rem;
}

.tool-prose ul,
.tool-prose ol {
    padding-left: 1.15rem;
    margin-bottom: 1rem;
}

.tool-prose li {
    margin-bottom: .4rem;
}

.tool-prose li:last-child {
    margin-bottom: 0;
}

.tool-prose li::marker {
    color: var(--pbi-accent);
}

.tool-prose strong {
    color: var(--pbi-ink);
    font-weight: 650;
}

.tool-prose a {
    color: var(--pbi-primary);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.tool-prose a:hover {
    color: var(--pbi-accent-hover);
}

/* ─── Share row ──────────────────────────────────────────────────────────── */

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pbi-ink-soft);
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: 999px;
    padding: .35rem .85rem;
    text-decoration: none;
    position: relative;
    transition: all .15s ease;
}

.share-btn:hover {
    border-color: var(--pbi-primary-line);
    background: var(--pbi-primary-soft);
    color: var(--pbi-primary-active);
}

.share-btn.is-copied {
    border-color: var(--pbi-accent-line);
    background: var(--pbi-accent-soft);
    color: var(--pbi-accent-hover);
}

.share-btn.is-copied::after {
    content: "Copied";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pbi-accent-soft);
    border-radius: inherit;
    font-size: .8rem;
}

/* ─── Related tools ──────────────────────────────────────────────────────── */

.related-tools {
    margin-top: 2.25rem;
}

.related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--pbi-ink);
}

.related-head h2 {
    font-size: 1.2rem;
    margin: 0;
}

.related-head a {
    font-size: .82rem;
    font-weight: 650;
    color: var(--pbi-primary);
    text-decoration: none;
    white-space: nowrap;
}

.related-head a:hover {
    color: var(--pbi-accent-hover);
    text-decoration: underline;
    text-underline-offset: .25em;
}

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

.rcard {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-sm);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.rcard:hover {
    border-color: var(--pbi-primary-line);
    background: var(--pbi-primary-soft);
}

.rcard-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .3rem;
    background: var(--pbi-primary-soft);
    color: var(--pbi-primary);
    flex: none;
}

.rcard:hover .rcard-ic {
    background: var(--pbi-primary);
    color: #fff;
}

.rcard-ic svg {
    width: 1rem;
    height: 1rem;
}

.rcard-tx {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rcard-name {
    font-size: .855rem;
    font-weight: 600;
    color: var(--pbi-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcard-cat {
    font-size: .74rem;
    color: var(--pbi-muted);
    margin-top: .05rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: category page
   ══════════════════════════════════════════════════════════════════════════ */

.cat-head-block {
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-lg);
    padding: 1.35rem 1.4rem;
    margin-bottom: 1.5rem;
}

.cat-subchips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.cat-subchips a {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pbi-ink-soft);
    text-decoration: none;
    padding: .3rem .75rem;
    border: 1px solid var(--pbi-border);
    border-radius: 999px;
    transition: all .15s ease;
}

.cat-subchips a:hover {
    color: var(--pbi-primary-active);
    background: var(--pbi-primary-soft);
    border-color: var(--pbi-primary-line);
}

.category-seo-content {
    margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: AI tool form
   ══════════════════════════════════════════════════════════════════════════ */

.ai-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.ai-actions .ai-field {
    flex: 1 1 10rem;
    min-width: 0;
}

.ai-actions .ai-field-check {
    flex: 0 0 auto;
    align-self: center;
}

.ai-actions .ai-generate {
    margin-left: auto;
    background: var(--pbi-accent);
    border-color: var(--pbi-accent);
    padding-inline: 1.5rem;
}

.ai-actions .ai-generate:hover:not(:disabled),
.ai-actions .ai-generate:active {
    background: var(--pbi-accent-hover);
    border-color: var(--pbi-accent-hover);
}

.ai-actions .ai-generate:disabled {
    background: var(--pbi-accent);
    border-color: var(--pbi-accent);
}

@media (max-width: 575.98px) {
    .ai-actions .ai-generate {
        margin-left: 0;
        width: 100%;
    }
}

.ai-spinner {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .45rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ai-spin .6s linear infinite;
    vertical-align: -.1em;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-loading {
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius);
    background: var(--pbi-bg);
    padding: 1rem 1.1rem;
}

.ai-loading-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pbi-ink-soft);
    margin-bottom: .85rem;
}

.ai-loading-orb {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--pbi-accent);
    flex: none;
    animation: ai-orb 1.4s ease-in-out infinite;
}

@keyframes ai-orb {
    0%, 100% { transform: scale(.75); opacity: .55; }
    50% { transform: scale(1); opacity: 1; }
}

.ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ai-skeleton span {
    display: block;
    height: .6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pbi-border) 25%, #eef3f1 37%, var(--pbi-border) 63%);
    background-size: 400% 100%;
    animation: ai-shimmer 1.4s ease infinite;
}

.ai-skeleton span:nth-child(1) { width: 38%; }
.ai-skeleton span:nth-child(2) { width: 100%; animation-delay: .1s; }
.ai-skeleton span:nth-child(3) { width: 94%; animation-delay: .2s; }
.ai-skeleton span:nth-child(4) { width: 97%; animation-delay: .3s; }
.ai-skeleton span:nth-child(5) { width: 88%; animation-delay: .4s; }
.ai-skeleton span:nth-child(6) { width: 62%; animation-delay: .5s; }

@keyframes ai-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC: accordion, page content, ads, footer, auth
   ══════════════════════════════════════════════════════════════════════════ */

.accordion {
    --bs-accordion-border-color: var(--pbi-border);
    --bs-accordion-border-radius: var(--pbi-radius);
    --bs-accordion-active-bg: var(--pbi-primary-soft);
    --bs-accordion-active-color: var(--pbi-primary-active);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    --bs-accordion-body-padding-y: 1rem;
}

.accordion-button {
    font-weight: 600;
    font-size: .95rem;
}

.accordion-body {
    font-size: .935rem;
    line-height: 1.68;
    color: var(--pbi-ink-soft);
}

.page-content {
    max-width: 46rem;
    font-size: .975rem;
    line-height: 1.72;
    color: var(--pbi-ink-soft);
}

.page-content h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pbi-border);
}

.page-content h3 {
    font-size: 1.075rem;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.page-content a {
    color: var(--pbi-primary);
    text-underline-offset: .18em;
}

.ad-slot {
    margin: 2rem 0;
}

.ad-slot::before {
    content: "Advertisement";
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #a7b4b1;
    text-align: center;
    margin-bottom: .4rem;
}

/* ─── Footer: dark teal, four columns, ruled ─────────────────────────────── */

.site-footer {
    background: var(--pbi-primary-active);
    color: rgba(255, 255, 255, .68);
    margin-top: 4rem;
}

.site-footer .fw-bold,
.site-footer strong {
    color: #fff;
}

.site-footer .brand-text {
    color: #fff;
    font-size: 1.2rem;
}

.site-footer .text-body-secondary {
    color: rgba(255, 255, 255, .58) !important;
}

.site-footer-head {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fbbf24;
    margin-bottom: .85rem;
}

.site-footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .15s ease;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.site-footer .border-top {
    border-color: rgba(255, 255, 255, .14) !important;
}

/* ─── Auth pages (login/register share app.css) ──────────────────────────── */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pbi-bg);
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 25rem;
    background: var(--pbi-paper);
    border: 1px solid var(--pbi-border);
    border-radius: var(--pbi-radius-lg);
    padding: 2rem;
    box-shadow: var(--pbi-shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    :root {
        --pbi-header-h: 4rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }

    .home-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 0;
    }

    .home-trust li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .home-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .site-topbar {
        display: none;
    }

    .nav-search {
        min-width: 100%;
        margin-top: .5rem;
    }
}

@media (max-width: 767.98px) {
    .home-hero {
        padding: 2.25rem 0 2rem;
    }

    .tool-panel,
    .cat-head-block {
        padding: 1.1rem 1rem 1.25rem;
        border-radius: var(--pbi-radius);
    }

    .home-section {
        margin-top: 2.5rem;
    }

    .site-footer {
        margin-top: 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .home-trust {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-trust li {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--pbi-border);
        padding-top: 1rem;
    }

    .home-trust li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .home-search {
        flex-wrap: wrap;
        padding: .6rem;
    }

    .home-search-btn {
        width: 100%;
    }

    .tool-hero {
        gap: .7rem;
    }

    .tool-hero-ic {
        width: 2.4rem;
        height: 2.4rem;
    }

    .tool-prose-lead {
        font-size: 1rem !important;
    }

    .related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .tool-card:hover {
        transform: none;
    }
}