/* ---------------------------------------------------------------------------
   Tools4Browser

   Direction-neutral by construction: this file uses CSS logical properties
   (margin-inline-start, padding-inline, border-inline-start, text-align: start)
   rather than left/right, so one stylesheet serves both the Arabic RTL layout
   and the English LTR one. Bootstrap's own RTL build is swapped in _Layout.

   If you add a rule here, resist writing `left` or `right` — use the logical
   equivalent, or the Arabic layout will quietly break.
--------------------------------------------------------------------------- */

/* Palette sampled from the logo artwork rather than eyeballed — these are the
   two dominant blues in the mark (the gear and the wordmark), with neutrals
   tinted toward the same hue.

   Every foreground/background pair here was checked against WCAG 2.1 and
   clears 4.5:1 for body text; the lowest is the primary link colour on white
   at 6.36:1. If you change --t4-primary, re-check it — a lighter blue will
   fail on white. */
:root {
    --t4-primary: #1a61a6;        /* gear blue        6.36:1 on white */
    --t4-primary-dark: #15345e;   /* wordmark navy   12.47:1 on white */
    --t4-primary-soft: #e8f1fa;   /* tint for chips, badges, icon wells */
    --t4-accent: #2e8cc3;         /* highlight blue, decorative only */
    --t4-ink: #13243b;
    --t4-muted: #5a6b80;          /* 5.46:1 on white */
    --t4-line: #dce5ef;
    --t4-surface: #ffffff;
    --t4-canvas: #f4f8fc;
    --t4-radius: 14px;
    --t4-shadow: 0 1px 2px rgba(19, 36, 59, .05), 0 8px 24px rgba(19, 36, 59, .07);

    --t4-font-ar: "Tajawal", "Segoe UI", system-ui, sans-serif;
    --t4-font-en: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--t4-canvas);
    color: var(--t4-ink);
    font-family: var(--t4-font-en);
    line-height: 1.7;
}

/* Arabic needs a real webfont and a little more line-height: the script has
   taller ascenders and deeper descenders than Latin, and system fallbacks
   render it poorly on Windows and inconsistently on Android. */
html[dir="rtl"] body {
    font-family: var(--t4-font-ar);
    line-height: 1.9;
}

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

a:hover {
    color: var(--t4-primary-dark);
    text-decoration: underline;
}

h1, h2, h3 {
    color: var(--t4-ink);
    font-weight: 700;
    line-height: 1.35;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.2em;
}

.skip-link {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 1100;
    background: var(--t4-surface);
    padding: .5rem 1rem;
    border-radius: 8px;
}

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

/* The logo artwork has a flat white background rather than transparency, which
   is fine because every surface it sits on is white. If the header or footer
   ever gains a colour or a dark mode, a transparent PNG/SVG of the mark will
   be needed — the JPG will show a white box. */
/* Height-driven, width auto: the lockup is a vertical composition (badge above
   wordmark), so its height is what decides whether the wordmark is readable. */
.brand-logo {
    height: 4.5rem;
    width: auto;
    border-radius: 8px;
    object-fit: contain;
    flex: none;
}

.navbar {
    /* Tight padding because the logo itself now sets the bar's height. The
       navbar is sticky, so every extra pixel is taken from the viewport on
       every page — the mobile rule below keeps it in proportion. */
    --bs-navbar-padding-y: .35rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
    margin-inline-end: .5rem;
}

@media (max-width: 575.98px) {
    .brand-logo {
        height: 3.25rem;
    }

    .navbar {
        --bs-navbar-padding-y: .25rem;
    }
}

.footer-logo {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    object-fit: contain;
}

.navbar .dropdown-menu {
    border-color: var(--t4-line);
    border-radius: var(--t4-radius);
    box-shadow: var(--t4-shadow);
    padding: .4rem;
}

.navbar .dropdown-item {
    border-radius: 8px;
    padding-block: .45rem;
}

.lang-switch {
    border: 1px solid var(--t4-line);
    border-radius: 999px;
    padding-inline: .9rem !important;
    padding-block: .25rem !important;
    font-weight: 600;
}

/* The privacy promise is the site's whole positioning, so it sits in the
   chrome on every page rather than only in the marketing copy. */
.privacy-strip {
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    font-size: .875rem;
    padding-block: .45rem;
    border-block-end: 1px solid rgba(26, 97, 166, .12);
}

/* ---------------------------- Tool page --------------------------------- */

.tool-hero {
    background: var(--t4-surface);
    border-block-end: 1px solid var(--t4-line);
    padding-block: 1.75rem 2rem;
}

.tool-title {
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    margin-block-end: .5rem;
}

.tool-tagline {
    color: var(--t4-muted);
    max-width: 60ch;
    margin-block-end: 0;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--t4-muted);
}

.tool-surface {
    margin-block-start: -1rem;
}

.tool-card {
    background: var(--t4-surface);
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    box-shadow: var(--t4-shadow);
    padding: clamp(1rem, .6rem + 1.6vw, 1.75rem);
}

/* ---------------------------- Drop zone --------------------------------- */

.dropzone {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 200px;
    padding: 2rem 1rem;
    text-align: center;
    border: 2px dashed var(--t4-line);
    border-radius: var(--t4-radius);
    background: var(--t4-canvas);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.dropzone:hover,
.dropzone:focus-visible {
    border-color: var(--t4-primary);
    background: var(--t4-primary-soft);
}

.dropzone.is-dragging {
    border-color: var(--t4-primary);
    background: var(--t4-primary-soft);
}

.dropzone .icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--t4-primary);
}

.dropzone-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.dropzone-hint,
.dropzone-formats {
    color: var(--t4-muted);
    font-size: .875rem;
}

.dropzone input[type="file"] {
    display: none;
}

/* ------------------------------ Controls -------------------------------- */

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

.form-label {
    font-weight: 600;
    font-size: .875rem;
    margin-block-end: .35rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--t4-primary);
    box-shadow: 0 0 0 .2rem rgba(26, 97, 166, .15);
}

.btn-primary {
    --bs-btn-bg: var(--t4-primary);
    --bs-btn-border-color: var(--t4-primary);
    --bs-btn-hover-bg: var(--t4-primary-dark);
    --bs-btn-hover-border-color: var(--t4-primary-dark);
    --bs-btn-active-bg: var(--t4-primary-dark);
    --bs-btn-active-border-color: var(--t4-primary-dark);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--t4-primary);
    --bs-btn-border-color: var(--t4-primary);
    --bs-btn-hover-bg: var(--t4-primary);
    --bs-btn-hover-border-color: var(--t4-primary);
    --bs-btn-active-bg: var(--t4-primary-dark);
    font-weight: 600;
}

/* Numeric inputs stay LTR even in the Arabic layout: dimensions, sizes and
   percentages read left-to-right in Saudi interfaces, and so do their digits. */
input[type="number"],
input[type="text"].is-numeric,
.numeric {
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

html[dir="rtl"] input[type="number"],
html[dir="rtl"] .numeric {
    text-align: end;
}

/* ------------------------------- Results -------------------------------- */

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

.result-card {
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    overflow: hidden;
    background: var(--t4-surface);
}

.result-preview {
    display: grid;
    place-items: center;
    background: var(--t4-canvas);
    min-height: 160px;
    padding: .75rem;
}

.result-preview img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.result-meta {
    padding: .75rem;
    border-block-start: 1px solid var(--t4-line);
    font-size: .875rem;
}

.result-name {
    font-weight: 600;
    word-break: break-all;
    /* File names are usually Latin; keep them readable inside an RTL page. */
    direction: ltr;
    text-align: start;
}

.size-drop {
    color: var(--t4-primary-dark);
    font-weight: 600;
}

.file-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--t4-line);
    border-radius: 10px;
    background: var(--t4-surface);
}

.file-row + .file-row {
    margin-block-start: .5rem;
}

/* Merge order is shown as a number, not just a position. Under RTL the visual
   order of a row flips, so "first in the list" needs to be stated, not implied. */
.queue-position {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    font-size: .8rem;
    font-weight: 700;
}

.result-preview-file .icon {
    width: 3rem;
    height: 3rem;
    color: var(--t4-muted);
}

.page-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .85rem;
    font-weight: 600;
}

.notice {
    border: 1px solid #f0dcb4;
    background: #fdf8ec;
    color: #6b5220;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .9rem;
}

/* ------------------------------ Text tools ------------------------------ */

.text-field + .text-field {
    margin-block-start: 1.25rem;
}

.text-area {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: .95rem;
    line-height: 1.7;
    resize: vertical;
}

/* Arabic in a monospace stack renders poorly — most monospace fonts have no
   Arabic coverage, so the browser falls back mid-string and the line jumps.
   Prose fields opt out of monospace; code-shaped fields (JSON, Base64) keep it. */
.text-area.is-prose {
    font-family: inherit;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
    margin-block-start: 1.25rem;
}

.stat-tile {
    background: var(--t4-canvas);
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    padding: .9rem .75rem;
    text-align: center;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--t4-primary-dark);
}

.stat-label {
    font-size: .8rem;
    color: var(--t4-muted);
    margin-block-start: .15rem;
}

.option-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block-start: 1rem;
}

.limit-list {
    display: grid;
    gap: .75rem;
}

.limit-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    margin-block-end: .25rem;
}

.limit-track {
    height: 6px;
    border-radius: 999px;
    background: var(--t4-line);
    overflow: hidden;
}

.limit-fill {
    height: 100%;
    background: var(--t4-primary);
    /* The bar grows from the reading edge, so it fills right-to-left in
       Arabic and left-to-right in English without any extra rules. */
    transition: width .15s ease-out;
}

.limit-fill.is-over {
    background: #c0392b;
}

.limit-over {
    color: #c0392b;
    font-weight: 600;
}

/* ----------------------------- Lookup tools ----------------------------- */

.privacy-strip.is-server {
    background: #eef2f7;
    color: #3d4c5f;
    border-block-end-color: rgba(61, 76, 95, .12);
}

.lookup-row {
    display: flex;
    gap: .5rem;
}

.lookup-row .form-control {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
}

.lookup-row .btn {
    flex: none;
    min-width: 7rem;
}

.lookup-summary {
    color: var(--t4-muted);
    font-size: .875rem;
}

.lookup-table {
    --bs-table-border-color: var(--t4-line);
    margin-block-end: 0;
}

.lookup-table th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--t4-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.record-type {
    display: inline-block;
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    border-radius: 6px;
    padding: .1rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.record-value {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9rem;
    word-break: break-all;
    /* Long DNSKEY and RRSIG blobs must not force the table sideways. */
    overflow-wrap: anywhere;
}

.record-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-block-start: .35rem;
}

.record-chip {
    background: var(--t4-canvas);
    border: 1px solid var(--t4-line);
    border-radius: 999px;
    padding: .05rem .55rem;
    font-size: .75rem;
    color: var(--t4-muted);
    font-family: ui-monospace, Consolas, monospace;
}

/* --------------------------- Upload disclosure -------------------------- */

/* Deliberately more prominent than the header strip: this is the one place a
   visitor's file leaves their device, and it must be read before they pick
   the file, not discovered afterwards. */
.upload-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border: 1px solid #f0dcb4;
    border-inline-start: 4px solid #d9a441;
    border-radius: 10px;
    background: #fdf8ec;
    color: #5c4718;
}

.upload-notice .icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-block-start: .1rem;
    color: #9a6b12;
}

/* ---------------------------- Blacklist check --------------------------- */

.verdict {
    border-radius: var(--t4-radius);
    padding: 1rem 1.25rem;
    border: 1px solid;
}

.verdict.is-good {
    background: var(--t4-primary-soft);
    border-color: rgba(26, 97, 166, .25);
    color: var(--t4-primary-dark);
}

.verdict.is-bad {
    background: #fdf1f1;
    border-color: #f0c2c2;
    color: #8c2b2b;
}

.verdict-headline {
    font-weight: 700;
    font-size: 1.1rem;
}

.verdict-detail {
    font-size: .85rem;
    opacity: .85;
    margin-block-start: .2rem;
}

.target-block {
    margin-block-start: 1.75rem;
}

.target-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-block-end: .6rem;
}

.target-value {
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
}

.target-note {
    font-size: .8rem;
    color: var(--t4-muted);
    font-family: ui-monospace, Consolas, monospace;
}

.bl-list {
    display: grid;
    gap: .5rem;
}

.bl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    align-items: center;
    padding: .65rem .85rem;
    border: 1px solid var(--t4-line);
    border-radius: 10px;
    background: var(--t4-surface);
    /* A coloured edge on the reading side, so the state is visible at a glance
       without relying on colour alone — the status word is always present. */
    border-inline-start: 4px solid var(--t4-line);
}

.bl-row.is-listed {
    border-inline-start-color: #c0392b;
    background: #fdf6f5;
}

.bl-row.is-unavailable {
    border-inline-start-color: #d9a441;
    background: #fdfaf3;
}

.bl-row.is-clean {
    border-inline-start-color: var(--t4-primary);
}

.bl-name {
    font-weight: 600;
    font-size: .95rem;
}

.bl-zone {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .75rem;
    color: var(--t4-muted);
    font-weight: 400;
}

.bl-status {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.is-listed .bl-status { color: #c0392b; }
.is-unavailable .bl-status { color: #9a6b12; }
.is-clean .bl-status { color: var(--t4-primary-dark); }

.bl-reason,
.bl-link {
    grid-column: 1 / -1;
    font-size: .85rem;
}

.bl-reason {
    color: var(--t4-muted);
}

.ip-display {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    font-weight: 700;
    color: var(--t4-primary-dark);
    word-break: break-all;
    direction: ltr;
    text-align: center;
}

.valid-banner {
    border: 1px solid rgba(26, 97, 166, .25);
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    border-radius: 10px;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 600;
}

/* ------------------------------ Content --------------------------------- */

.content-block {
    margin-block-start: 2.25rem;
}

.content-block h2 {
    font-size: 1.35rem;
    margin-block-end: 1rem;
}

.lead-copy {
    color: #26384f;
    margin-block-start: 1.1rem;
    max-width: 68ch;
}

.steps {
    padding-inline-start: 1.25rem;
    max-width: 68ch;
}

.steps li {
    margin-block-end: .6rem;
}

.accordion {
    --bs-accordion-border-color: var(--t4-line);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(26, 97, 166, .15);
    --bs-accordion-active-bg: var(--t4-primary-soft);
    --bs-accordion-active-color: var(--t4-primary-dark);
    --bs-accordion-border-radius: var(--t4-radius);
}

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

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

/* "Why use this tool?" — a bold lead, then the reason on its own line. */
.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
    max-width: 68ch;
}

.why-list li {
    display: grid;
    gap: .2rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--t4-primary-soft);
}

.why-list strong {
    color: var(--t4-primary-dark);
}

.why-list span {
    color: #26384f;
}

.tool-content .lead-copy a,
.tool-content .why-list a,
.tool-content .privacy-detail a,
.tool-content .content-table a,
.tool-content .steps a,
.tool-content .accordion-body a {
    text-decoration: underline;
    text-decoration-color: rgba(26, 97, 166, .35);
    text-underline-offset: .2em;
}

/* Same look as the guide tables, for the format section on tool pages. */
.content-table {
    max-width: 68ch;
}

.content-table table {
    width: 100%;
    margin: 0;
    font-size: .92rem;
    border-collapse: collapse;
}

.content-table th,
.content-table td {
    padding: .6rem .85rem;
    text-align: start;
    border-block-end: 1px solid var(--t4-line);
    vertical-align: top;
}

.content-table thead th {
    background: var(--t4-canvas);
    color: var(--t4-ink);
    font-weight: 700;
}

.content-table tbody tr:last-child td {
    border-block-end: 0;
}

.privacy-detail {
    max-width: 68ch;
    background: var(--t4-primary-soft);
    border: 1px solid rgba(26, 97, 166, .18);
    border-radius: var(--t4-radius);
    padding: 1rem 1.25rem;
    color: #26384f;
}

.privacy-detail p {
    margin-block-end: .6rem;
}

.privacy-detail p:last-child {
    margin-block-end: 0;
}

.privacy-detail ul {
    padding-inline-start: 1.25rem;
    margin-block-end: .6rem;
}

.privacy-detail li {
    margin-block-end: .35rem;
}

.privacy-card {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--t4-primary-soft);
    border: 1px solid rgba(26, 97, 166, .18);
    border-radius: var(--t4-radius);
    padding: 1rem;
    color: var(--t4-primary-dark);
}

.privacy-card .icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-block-start: .15rem;
}

.related-list {
    display: grid;
    gap: .5rem;
}

.related-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border: 1px solid var(--t4-line);
    border-radius: 10px;
    background: var(--t4-surface);
    color: var(--t4-ink);
}

.related-item:hover {
    border-color: var(--t4-primary);
    background: var(--t4-primary-soft);
    text-decoration: none;
}

.related-item .icon {
    color: var(--t4-primary);
}

.related-item.is-soon {
    opacity: .6;
    cursor: default;
}

.related-item .badge {
    margin-inline-start: auto;
}

/* ------------------------------ Home ------------------------------------ */

.home-hero {
    background: var(--t4-surface);
    border-block-end: 1px solid var(--t4-line);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    text-align: center;
}

.home-hero h1 {
    font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
    margin-block-end: .75rem;
}

.home-hero p {
    color: var(--t4-muted);
    max-width: 58ch;
    margin-inline: auto;
    font-size: 1.05rem;
}

/* ------------------------------ Search ---------------------------------- */

.tool-search {
    position: relative;
    max-width: 30rem;
    margin: 1.5rem auto 0;
}

.tool-search .form-control {
    /* Room for the icon at the reading edge and the clear button at the other,
       expressed logically so the two swap automatically under RTL. */
    padding-inline-start: 2.9rem;
    padding-inline-end: 2.5rem;
    padding-block: .7rem;
    font-size: 1.05rem;
    border-radius: 999px;
    border-color: var(--t4-line);
    box-shadow: var(--t4-shadow);
}

.tool-search-icon {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--t4-muted);
    pointer-events: none;
    display: flex;
}

.tool-search-clear {
    position: absolute;
    inset-inline-end: .75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--t4-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .35rem;
    cursor: pointer;
    border-radius: 50%;
}

.tool-search-clear:hover {
    color: var(--t4-ink);
}

/* Browsers add their own clear affordance to type=search; ours is already
   positioned and localised, so the native one is redundant. */
.tool-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.tool-search-count {
    text-align: center;
    font-size: .85rem;
    color: var(--t4-muted);
    min-height: 1.2rem;
    margin-block-start: .5rem;
}

/* Filtering hides nodes rather than removing them, so clearing the box is
   instant and nothing needs re-rendering. */
.is-filtered {
    display: none !important;
}

/* ------------------------------ Tool grid ------------------------------- */

/* Category shortcuts under the search box. */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-block-start: 1.25rem;
}

.category-chips a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--t4-line);
    border-radius: 999px;
    background: var(--t4-canvas);
    color: var(--t4-ink);
    font-size: .92rem;
    font-weight: 600;
}

.category-chips a:hover {
    border-color: var(--t4-primary);
    background: var(--t4-primary-soft);
    text-decoration: none;
}

.category-chips .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--t4-primary);
}

.chip-count {
    color: var(--t4-muted);
    font-weight: 500;
    font-size: .82rem;
}

.home-lead {
    color: var(--t4-muted);
    max-width: 68ch;
    margin-block: -.5rem 1.25rem;
}

/* The three processing modes. */
.how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem;
}

.how-card {
    background: var(--t4-surface);
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    padding: 1.1rem 1.2rem;
}

.how-card > .icon {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--t4-primary);
}

.how-card h3 {
    font-size: 1.05rem;
    margin-block: .6rem .4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
}

.how-count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--t4-primary-dark);
    background: var(--t4-primary-soft);
    border-radius: 999px;
    padding: .1rem .5rem;
}

.how-card p {
    color: #26384f;
    font-size: .95rem;
    margin-block-end: .5rem;
}

.how-examples {
    font-size: .88rem !important;
    margin-block-end: 0 !important;
}

/* Trust: plain facts, no decoration. */
.trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 2rem;
}

.trust-list li {
    display: grid;
    gap: .2rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--t4-primary-soft);
}

.trust-list strong {
    color: var(--t4-primary-dark);
}

.trust-list span {
    color: #26384f;
    font-size: .95rem;
}

.trust-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-block: 1.5rem 0;
    font-weight: 600;
}

.home-section + .home-section {
    margin-block-start: .5rem;
}

.category-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    margin-block: 2.5rem 1.25rem;
}

.category-title .icon {
    color: var(--t4-primary);
}

.category-more {
    margin-inline-start: auto;
    font-size: .85rem;
    font-weight: 600;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .85rem;
}

.tool-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .95rem 1rem;
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    background: var(--t4-surface);
    color: var(--t4-ink);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

a.tool-tile:hover,
a.tool-tile:focus-visible {
    border-color: var(--t4-primary);
    box-shadow: var(--t4-shadow);
    transform: translateY(-2px);
    text-decoration: none;
}

.tool-tile-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border-radius: 10px;
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
}

.tool-tile-icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}

a.tool-tile:hover .tool-tile-icon {
    background: var(--t4-primary);
    color: #fff;
}

.tool-tile-body {
    min-width: 0;
}

.tool-tile-name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.tool-tile-desc {
    display: block;
    color: var(--t4-muted);
    font-size: .82rem;
    line-height: 1.5;
    margin-block-start: .15rem;
}

/* Marks the tools that query our server, so the distinction is visible while
   browsing rather than only once you're on the page. */
.tool-tile-flag {
    position: absolute;
    inset-block-start: .6rem;
    inset-inline-end: .6rem;
    color: var(--t4-line);
}

.tool-tile-flag .icon {
    width: 1rem;
    height: 1rem;
}

a.tool-tile:hover .tool-tile-flag {
    color: var(--t4-muted);
}

.tool-tile.is-soon {
    opacity: .6;
    background: transparent;
}

.tool-tile.is-soon .tool-tile-icon {
    background: var(--t4-canvas);
    color: var(--t4-muted);
}

/* ------------------------------ Guides ---------------------------------- */

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: .85rem;
}

.guide-card {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    background: var(--t4-surface);
    color: var(--t4-ink);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.guide-card:hover,
.guide-card:focus-visible {
    border-color: var(--t4-primary);
    box-shadow: var(--t4-shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--t4-ink);
}

.guide-card:hover .tool-tile-icon {
    background: var(--t4-primary);
    color: #fff;
}

.guide-card-body {
    min-width: 0;
}

.guide-card-title {
    display: block;
    font-weight: 700;
    line-height: 1.4;
}

.guide-card-summary {
    display: block;
    color: var(--t4-muted);
    font-size: .88rem;
    line-height: 1.6;
    margin-block-start: .35rem;
}

.guide-card-meta {
    display: block;
    color: var(--t4-primary);
    font-size: .8rem;
    font-weight: 600;
    margin-block-start: .6rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--t4-muted);
    font-size: .88rem;
    margin: .75rem 0 0;
}

/* Long-form reading: a measure of ~70 characters, generous spacing between
   sections, and headings that sit closer to the text they introduce than to
   the text before them. */
.article-body {
    font-size: 1.05rem;
    color: #26384f;
}

.article-body > * {
    max-width: 70ch;
}

.article-body h2 {
    font-size: 1.4rem;
    margin-block: 2.4rem .8rem;
}

.article-body h3 {
    font-size: 1.12rem;
    margin-block: 1.6rem .5rem;
}

.article-body > :first-child {
    margin-block-start: 1.5rem;
}

.article-body p,
.article-body ul,
.article-body ol {
    margin-block-end: 1.1rem;
}

.article-body li {
    margin-block-end: .45rem;
}

.article-body ul,
.article-body ol {
    padding-inline-start: 1.4rem;
}

.article-body a {
    text-decoration: underline;
    text-decoration-color: rgba(26, 97, 166, .35);
    text-underline-offset: .2em;
}

.article-body a:hover {
    text-decoration-color: currentColor;
}

.article-body code,
.article-body kbd {
    font-size: .88em;
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    border-radius: 5px;
    padding: .1em .35em;
}

.article-body pre {
    direction: ltr;
    text-align: left;
    background: var(--t4-ink);
    color: #e8f1fa;
    border-radius: 10px;
    padding: .9rem 1rem;
    font-size: .85rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.article-body pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Tables scroll inside their own box on phones instead of widening the page. */
.table-scroll {
    overflow-x: auto;
    margin-block-end: 1.25rem;
    border: 1px solid var(--t4-line);
    border-radius: 10px;
    background: var(--t4-surface);
}

.article-body table {
    width: 100%;
    margin: 0;
    font-size: .92rem;
    border-collapse: collapse;
}

.article-body th,
.article-body td {
    padding: .6rem .85rem;
    text-align: start;
    border-block-end: 1px solid var(--t4-line);
    vertical-align: top;
}

.article-body thead th {
    background: var(--t4-canvas);
    color: var(--t4-ink);
    font-weight: 700;
    white-space: nowrap;
}

.article-body tbody tr:last-child td {
    border-block-end: 0;
}

.article-body caption {
    caption-side: bottom;
    padding: .6rem .85rem;
    color: var(--t4-muted);
    font-size: .82rem;
}

.callout {
    border-inline-start: 4px solid var(--t4-primary);
    background: var(--t4-primary-soft);
    color: var(--t4-primary-dark);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1.1rem;
}

html[dir="rtl"] .callout {
    border-radius: 10px 0 0 10px;
}

.callout.is-warning {
    border-inline-start-color: #c98a1b;
    background: #fdf8ec;
    color: #5c4518;
}

.callout > :last-child {
    margin-block-end: 0;
}

.callout-title {
    display: block;
    font-weight: 700;
    margin-block-end: .25rem;
}

/* A pointer to one of our tools, inside the article text. */
.tool-cta {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    background: var(--t4-surface);
    color: var(--t4-ink);
    text-decoration: none !important;
}

.tool-cta:hover {
    border-color: var(--t4-primary);
    box-shadow: var(--t4-shadow);
    color: var(--t4-ink);
}

.tool-cta-text {
    display: block;
    font-size: .88rem;
    color: var(--t4-muted);
}

.tool-cta-name {
    display: block;
    font-weight: 700;
    color: var(--t4-primary);
}

.article-aside {
    position: sticky;
    inset-block-start: 6.5rem;
}

.aside-title {
    font-weight: 700;
    color: var(--t4-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-block: 1.5rem .75rem;
}

@media (max-width: 991.98px) {
    .article-aside {
        position: static;
    }
}

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

.site-footer {
    background: var(--t4-surface);
    border-block-start: 1px solid var(--t4-line);
    padding-block: 2.5rem 1.5rem;
}

.site-footer a {
    color: var(--t4-muted);
}

.site-footer a:hover {
    color: var(--t4-primary);
}

.site-footer li {
    margin-block-end: .35rem;
}

/* ---------------------------- Cookie banner ----------------------------- */

.cookie-banner {
    position: fixed;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    z-index: 1080;
    max-width: 46rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--t4-surface);
    color: var(--t4-ink);
    border: 1px solid var(--t4-line);
    border-radius: var(--t4-radius);
    box-shadow: 0 10px 40px rgba(19, 36, 59, .18);
    font-size: .9rem;
    line-height: 1.6;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-text {
    flex: 1 1 18rem;
}

.cookie-banner-actions {
    display: flex;
    gap: .6rem;
    flex: 0 0 auto;
}

.cookie-banner-actions .btn {
    min-width: 6.5rem;
}

/* Room to scroll past the banner, so it never hides the end of the footer. */
body.has-cookie-banner {
    padding-block-end: 11rem;
}

@media (max-width: 575.98px) {
    .cookie-banner {
        inset-inline: .5rem;
        inset-block-end: .5rem;
    }

    .cookie-banner-actions {
        flex: 1 1 100%;
    }

    .cookie-banner-actions .btn {
        flex: 1;
    }
}

/* ------------------------------- Utility -------------------------------- */

.is-hidden {
    display: none !important;
}

.alert-error {
    border: 1px solid #f0c2c2;
    background: #fdf1f1;
    color: #8c2b2b;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}