/* Khabri custom theme overrides — distinct visual identity */

:root {
    --khabri-accent: #F59E0B;
    --khabri-ink: #0F1724;
}

/* Base readability bump — the cloned base stylesheet runs small (~13-14px)
   throughout; this raises the floor site-wide without having to touch every
   individual component's own font-size declaration. */
html {
    font-size: 106.25%; /* ~17px against a 16px browser default */
}

body {
    font-family: 'Inter', var(--global-font), sans-serif;
    font-size: 17.4px;
    line-height: 1.7;
}

p, li, .container {
    font-size: inherit;
}

p {
    font-size: 18.5px;
    color: #1e1e1e;
    font-weight: 400;
    line-height: 30px;
    margin: 0 0 10px;
}

h1 {
    font-size: 27.6px;
    font-weight: 600;
}

/*
 * Urdu is set in Jameel Noori Nastaleeq where the reader has it installed —
 * common on machines in Pakistan — and falls back to Noto Nastaliq Urdu, which
 * the site loads from Google Fonts, so the script always renders properly.
 *
 * To serve Jameel to everyone, drop the licensed woff2 into public/fonts and
 * add the @font-face here. It is not on Google Fonts and is not redistributed
 * with this project, so it is referenced by name only.
 */
.urdu, .urdu_section_title.urdu .title, .lg_news_card.urdu .title,
.sm_news_card.urdu .title, .finance_news.urdu .title {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif;
    line-height: 2;
}

/* Liquid scrollbar — native scrollbar is only hidden once liquid-scrollbar.js
   has actually built and inserted its replacement (html.kh-scrollbar-ready),
   so a JS failure just leaves the ordinary browser scrollbar in place rather
   than removing the only way to see/grab scroll position. */
html.kh-scrollbar-ready {
    scrollbar-width: none;
}

html.kh-scrollbar-ready::-webkit-scrollbar {
    display: none;
}

.kh-scrollbar-track {
    position: fixed;
    top: 0;
    right: 3px;
    bottom: 0;
    width: 12px;
    z-index: 9998;
    background: rgba(29, 78, 216, .07);
    border-radius: 999px;
}

.kh-scrollbar-thumb {
    position: absolute;
    left: 1px;
    width: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2BD9A8 0%, #17B897 45%, #1D4ED8 100%);
    box-shadow: 0 0 8px rgba(29, 78, 216, .5), inset 0 0 6px rgba(255, 255, 255, .25);
    overflow: hidden;
    cursor: grab;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

.kh-scrollbar-dragging .kh-scrollbar-thumb {
    cursor: grabbing;
}

.kh-scrollbar-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, .35);
    border-radius: 999px;
    filter: blur(.5px);
}

.kh-scrollbar-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, .4) 1px, transparent 1.5px);
    background-size: 8px 16px, 6px 20px;
    background-position: 2px 0, 7px 6px;
    opacity: .85;
    animation: khLiquidBubbles 2.6s linear infinite;
}

@keyframes khLiquidBubbles {
    from { background-position: 2px 0, 7px 6px; }
    to   { background-position: 2px -16px, 7px -20px; }
}

@keyframes khLiquidBounce {
    0%   { transform: scaleY(1) scaleX(1); }
    30%  { transform: scaleY(.8) scaleX(1.5); }
    55%  { transform: scaleY(1.12) scaleX(.82); }
    75%  { transform: scaleY(.95) scaleX(1.1); }
    100% { transform: scaleY(1) scaleX(1); }
}

.kh-scrollbar-thumb.is-bouncing {
    animation: khLiquidBounce .6s cubic-bezier(.34, 1.56, .64, 1);
}

/* Sticky nav gets a subtle gradient instead of flat brand blue */
.header_menu {
    background: linear-gradient(90deg, #1D4ED8 0%, #3B82F6 100%);
}

.topbar, .sm_topbar {
    background: var(--khabri-ink);
}

.nav__menu > li:hover > a {
    background: var(--khabri-accent);
}

/* Rounder, card-based news layout */
.lg_news_card .image, .sm_news_card .image, .finance_news .image {
    border-radius: 14px !important;
    overflow: hidden;
}

.lg_news_card, .sm_news_card, .finance_news {
    display: block;
    transition: transform .2s ease;
}

.lg_news_card:hover, .sm_news_card:hover, .finance_news:hover {
    transform: translateY(-3px);
}

.lg_news_card .title, .sm_news_card .content .title {
    border-left: 3px solid var(--kh-accent);
    padding-left: 10px;
}

/* News/article card — full card chrome (white bg, border, shadow, consistent
   image aspect-ratio) so cards look the same whether they're on the homepage,
   a category listing, or a "Related Articles" strip. */
.sm_news_card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px !important;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sm_news_card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 12px 24px rgba(15, 23, 36, .1);
}

.sm_news_card .image,
.lg_news_card .image,
.finance_news .image {
    padding: 0 !important;
}

.sm_news_card .image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background-color: #F5F8FC;
    object-fit: cover;
    object-position: center;
}

.sm_news_card .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: 14px 16px 16px;
}

.sm_news_card .content .title {
    border-left: none !important;
    padding-left: 0 !important;
    font-size: 16.8px;
    font-weight: 700;
    color: var(--khabri-ink) !important;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sm_news_card .content .excerpt {
    font-size: 15.1px;
    color: #5F6E85;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sm_news_card .content .date {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    color: #5F6E85;
}

/* Compact sidebar list item — deliberately distinct from .sm_news_card, which
   is now a full grid card; this is a thin horizontal row for "More in X" /
   "Latest News" sidebar panels. */
.sidebar-news-item {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    text-decoration: none !important;
}

.sidebar-news-item:last-child {
    margin-bottom: 0;
}

.sidebar-news-item__image {
    display: block;
    width: 70px;
    min-width: 70px;
    height: 60px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    background-color: #F5F8FC;
}

.sidebar-news-item__title {
    font-size: 14.6px;
    line-height: 1.5;
    color: var(--khabri-ink) !important;
    font-weight: 600;
}

.sidebar-news-item:hover .sidebar-news-item__title {
    color: var(--khabri-primary, #1D4ED8) !important;
}

.sidebar-news-item--text {
    display: block !important;
    margin-bottom: 12px;
    font-size: 14.6px;
    line-height: 1.5;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
}

.sidebar-news-item--text:hover {
    color: var(--khabri-primary, #1D4ED8) !important;
}

.sm_news_card .content .category-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 20px;
    background: #DCE7F8;
    color: var(--khabri-primary, #1D4ED8) !important;
    font-size: 11.8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Section titles get an accent underline instead of plain link */
.urdu_section_title .title {
    position: relative;
    padding-bottom: 8px;
}

.urdu_section_title .title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--khabri-accent);
    border-radius: 3px;
}

/* Forex / price cards get a softer, rounded card look */
.forex_item, .content_box {
    border-radius: 12px !important;
    border-color: #e3e4e8 !important;
}

.forex_item span, .content_box .price {
    color: var(--khabri-ink);
}

/* Footer no longer reuses source footer texture — flat brand gradient */
.footer {
    background: linear-gradient(180deg, var(--khabri-ink) 0%, #1D4ED8 100%);
}

.fw_title {
    color: var(--khabri-accent);
}

#back-to-top {
    background: var(--khabri-accent) !important;
}

/* Pagination (used on category and mobiles listing pages) */
.pagination {
    display: flex;
    list-style: none;
    gap: 8px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    background: #fff;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
    font-size: 14.6px;
    font-weight: 600;
    transition: all .15s ease;
}

.pagination .page-item .page-link:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 23, 36, .08);
}

.pagination .page-item.active .page-link {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .3);
}

.pagination .page-item.active .page-link:hover {
    transform: none;
}

.pagination .page-item.disabled .page-link {
    color: #B7C2BE !important;
    background: #FAFCFF;
    pointer-events: none;
    box-shadow: none;
}

/* Single article page */
/*
 * Article text is Inter. It used to default to the Nastaliq face, which is
 * right for Urdu script but turned every Roman-Urdu and English article — car
 * write-ups, phone guides, the explainers — into a laboured serif. Urdu-script
 * bodies keep Nastaliq through the .urdu class, which the view adds only when
 * the text actually is Urdu.
 */
.article-body { font-family: 'Inter', sans-serif; font-size: 18.5px; line-height: 1.9; color: #1E293B; }
.article-body.urdu { font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif; line-height: 2.1; }
.article-body p { margin: 0 0 18px; }
.article-hero-image { display: block; width: 100%; height: 320px; border-radius: 14px; margin-bottom: 20px; object-fit: cover; object-position: center; background-color: #F5F8FC; }
.article-meta { color: #5F6E85; font-size: 14.6px; margin-bottom: 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.article-breadcrumb { font-size: 14.6px; color: #5F6E85; margin-bottom: 14px; }
.article-breadcrumb a { color: var(--khabri-primary, #1D4ED8); }

/* Arabic text blocks — duain, ahadees, Asma-ul-Husna, Islamic names */
.arabic-text {
    font-family: 'Noto Naskh Arabic', serif;
    direction: rtl;
    text-align: center;
    font-size: 27.6px;
    line-height: 2.2;
    color: var(--khabri-ink);
    background: #F5F8FC;
    border: 1px solid #DCE7F8;
    border-radius: 12px;
    padding: 20px 18px;
    margin: 0 0 18px;
}

.article-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15.7px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--khabri-primary, #1D4ED8);
    margin: 20px 0 8px;
}

/* Islamic names table — Boys/Girls Names listings, no images */
.names-table-wrap {
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    overflow: hidden;
}

.names-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.7px;
}

.names-table thead th {
    text-align: right;
    background: #F5F8FC;
    color: var(--khabri-ink);
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid #E3E8EF;
}

.names-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #EEF3FA;
}

.names-table tbody tr:last-child td {
    border-bottom: none;
}

.names-table tbody tr:hover {
    background: #FAFCFF;
}

.names-table a.name-link {
    font-weight: 600;
    color: var(--khabri-ink);
}

.names-table a.name-link:hover {
    color: var(--khabri-primary, #1D4ED8);
}

.names-table td.meaning-cell {
    color: #5F6E85;
}

/* Section sub-navigation — shows a category's subcategories as a nav bar,
   the way clicking "Islam" on Hamariweb reveals a second nav strip. */
.sub-nav {
    background: #fff;
    border-bottom: 1px solid #E3E8EF;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .04);
}

.sub-nav__inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sub-nav__inner::-webkit-scrollbar {
    display: none;
}

/* While the "More" dropdown is open, the container's own overflow-x: auto
   also computes overflow-y to auto (per spec) and clips the dropdown that
   pops out below the row — turn overflow off for that moment instead. */
.sub-nav__inner--menu-open {
    overflow: visible;
}

.sub-nav__label {
    flex-shrink: 0;
    padding: 13px 16px 13px 0;
    font-size: 14.6px;
    font-weight: 700;
    color: var(--khabri-ink);
    border-right: 1px solid #E3E8EF;
    margin-right: 6px;
}

.sub-nav a {
    flex-shrink: 0;
    display: inline-block;
    padding: 13px 16px;
    font-size: 14.6px;
    font-weight: 600;
    color: #475569;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.sub-nav a:hover {
    color: var(--khabri-ink);
}

.sub-nav a.is-active {
    color: var(--kh-accent);
    border-bottom-color: var(--kh-accent);
}

/* Sub-nav "More" overflow menu — items that don't fit the row collapse in here
   via public/js/subnav.js (measures real widths, moves the trailing overflow). */
.sub-nav__more {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}

.sub-nav__more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 13px 16px;
    font-size: 14.6px;
    font-weight: 600;
    color: #475569;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.sub-nav__more-toggle:hover {
    color: var(--khabri-ink);
}

.sub-nav__more-toggle svg {
    transition: transform .15s ease;
}

.sub-nav__more.is-open .sub-nav__more-toggle {
    color: #1D4ED8;
}

.sub-nav__more.is-open .sub-nav__more-toggle svg {
    transform: rotate(180deg);
}

.sub-nav__more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    min-width: 200px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 36, .12);
    padding: 6px;
    z-index: 40;
}

.sub-nav__more.is-open .sub-nav__more-menu {
    display: flex;
}

.sub-nav__more-menu a {
    padding: 10px 12px;
    border-bottom: none;
    border-radius: 6px;
    white-space: normal;
}

.sub-nav__more-menu a:hover {
    background: #F5F8FC;
}

.sub-nav__more-menu a.is-active {
    background: #DCE7F8;
    color: #1D4ED8;
}

/* Names section — search, A-Z filter, hub cards, individual name detail page */
.names-search-box {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-bottom: 20px;
}

.names-search-box input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #E3E8EF;
    font-family: inherit;
    font-size: 15.7px;
}

.names-search-box button {
    padding: 0 22px;
    border: none;
    border-radius: 8px;
    background: var(--khabri-primary, #1D4ED8);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.az-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.az-filter__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: var(--khabri-ink);
    font-size: 14.6px;
    font-weight: 600;
}

.az-filter__item:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8);
}

.az-filter__item.is-active {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff;
}

.names-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.names-hub-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 18px;
    transition: transform .15s ease, border-color .15s ease;
}

.names-hub-card:hover {
    transform: translateY(-3px);
    border-color: var(--khabri-primary, #1D4ED8);
}

.names-hub-card strong {
    color: var(--khabri-ink);
    font-size: 16.8px;
}

.names-hub-card span {
    color: #5F6E85;
    font-size: 14.6px;
}

.name-detail__tag {
    display: inline-block;
    background: #DCE7F8;
    color: var(--khabri-primary, #1D4ED8);
    font-size: 13.4px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.name-detail__title {
    font-size: 29.7px;
    color: var(--khabri-ink);
    margin: 0 0 14px;
}

.name-detail__lead {
    color: #475569;
    line-height: 1.9;
    margin-bottom: 22px;
}

.name-detail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

/* The headline specs, the row a reader looks at before anything else. The
   icon sits in a ring of its own at the top so each tile is recognisable at a
   glance, the figure leads, and the label sits under it in small caps. */
.name-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-width: 108px;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid #DCE7F8;
    border-radius: 14px;
    font-size: 13.4px;
    color: #5F6E85;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.name-badge:hover {
    transform: translateY(-2px);
    border-color: #1D4ED8;
    box-shadow: 0 8px 18px rgba(15, 23, 36, .09);
}

.name-badge .spec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #F1F8F5;
    color: #1D4ED8;
    box-sizing: content-box;
}

.name-badge:hover .spec-icon {
    background: #1D4ED8;
    color: #fff;
}

/* The label under the figure. */
.name-badge em {
    font-style: normal;
    font-size: 12.4px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #5F6E85;
}

.name-badge span {
    font-size: 21.8px;
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 700;
}

.name-badge__fuel {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 17.9px !important;
}

.name-detail__h2 {
    font-size: 18.5px;
    color: var(--khabri-ink);
    margin: 26px 0 12px;
}

.name-meta-table td:first-child {
    width: 160px;
    font-weight: 600;
    color: var(--khabri-ink);
    background: #F5F8FC;
}

.names-related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.names-related-grid a {
    padding: 8px 16px;
    border: 1px solid #E3E8EF;
    border-radius: 20px;
    color: var(--khabri-ink);
    font-size: 14.6px;
    font-weight: 600;
}

.names-related-grid a:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8);
}

/* Ad slots — reserved, admin-manageable ad space on every page */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F5F8FC;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    margin: 24px auto;
    overflow: hidden;
}

.ad-slot__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #9AA9A4;
    text-transform: uppercase;
    padding: 6px 0 0;
}

.ad-slot__unit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ad-slot__placeholder {
    color: #B3BFBB;
    font-size: 14.6px;
    padding: 14px 0 18px;
}

.ad-slot--banner { min-height: 90px; max-width: 970px; }
.ad-slot--rectangle { min-height: 250px; max-width: 336px; }
.ad-slot--sidebar { min-height: 250px; max-width: 300px; }
.ad-slot--infeed { min-height: 100px; max-width: 100%; grid-column: 1 / -1; }
.ad-slot--inline { min-height: 100px; max-width: 100%; }

/* Government Schemes — official website CTA + card badge */
.official-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DCE7F8;
    border: 1px solid var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 700;
    font-size: 14.6px;
    padding: 11px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.official-link-cta:hover {
    background: var(--khabri-primary, #1D4ED8);
    color: #fff;
}

.official-link-badge {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.3px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8);
    background: #DCE7F8;
    padding: 3px 9px;
    border-radius: 12px;
}

/* Mobiles section — brand grid, cards, and full spec sheet */
.mobiles-hero,
.category-bio {
    background: linear-gradient(135deg, #0F1724 0%, #1D4ED8 100%);
    border-radius: 16px;
    padding: 30px 32px;
    margin-bottom: 30px;
}

.mobiles-hero__title,
.category-bio__title {
    font-size: 26.2px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.mobiles-hero__text,
.category-bio__text {
    color: rgba(255, 255, 255, .85);
    line-height: 1.8;
    max-width: 780px;
    margin: 0;
    font-size: 15.7px;
}

.mobiles-section-title {
    font-size: 18.5px;
    color: var(--khabri-ink);
    margin: 30px 0 14px;
}

/* Autos hub — "Select Make / Body Type" quick search bar */
.auto-search-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .05);
}

.auto-search-widget select {
    flex: 1;
    min-width: 160px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid #E3E8EF;
    font-family: inherit;
    font-size: 14.6px;
    color: var(--khabri-ink);
    background: #FAFCFF;
}

.auto-search-widget button {
    padding: 0 26px;
    border: none;
    border-radius: 8px;
    background: var(--khabri-primary, #1D4ED8);
    color: #fff;
    font-weight: 700;
    font-size: 14.6px;
    cursor: pointer;
    transition: background .15s ease;
}

.auto-search-widget button:hover {
    background: #0B6553;
}

.mobiles-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 14px;
    flex-wrap: wrap;
}

.mobiles-section-head .mobiles-section-title {
    margin: 0;
}

.mobiles-view-more {
    font-size: 13.4px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.mobile-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .mobile-brand-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

.mobile-brand-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 12px 6px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 36, .04);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.mobile-brand-card:hover {
    transform: translateY(-3px);
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 8px 20px rgba(15, 23, 36, .08);
}

/*
 * Matches the fallback circle's height so brands with a logo and brands
 * without one line up on the same baseline; object-fit keeps wide wordmarks
 * letterboxed rather than stretched.
 */
.mobile-brand-card img {
    height: 32px;
    max-width: 56px;
    object-fit: contain;
}

.mobile-brand-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #DCE7F8;
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 700;
    font-size: 13.4px;
    text-transform: uppercase;
}

.mobile-brand-card strong {
    display: block;
    font-size: 12.3px;
    font-weight: 700;
    color: var(--khabri-ink) !important;
}

.mobile-brand-card span {
    display: block;
    font-size: 10.5px;
    color: #5F6E85 !important;
}

.mobiles-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    overflow: hidden;
}

.mobiles-news-list li {
    border-bottom: 1px solid #EEF3FA;
}

.mobiles-news-list li:last-child {
    border-bottom: none;
}

.mobiles-news-list a {
    display: block;
    padding: 12px 16px;
    font-size: 14.6px;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
}

.mobiles-news-list a:hover {
    color: var(--khabri-primary, #1D4ED8) !important;
}

.mobile-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .mobile-card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Apple-style product card: neutral "Apple gray" image backdrop, no loud
   colored badges competing with the product photo, plain text price
   instead of a colored chip, near-invisible resting border/shadow that
   only lifts subtly on hover — the product photo does all the talking. */
.mobile-card {
    display: flex !important;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #F0F0F2;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.mobile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
}

.mobile-card:active {
    transform: translateY(-1px);
}

/*
 * Product photos often arrive with a white background rather than a
 * transparent one. On the old near-white panel (#F5F5F7) those washed out into
 * the card. A deeper neutral panel gives white-backed photos a visible edge,
 * and the drop-shadow lifts them off it — on a transparent PNG the same shadow
 * traces the product outline instead, so both kinds of image read clearly.
 */
.mobile-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 30px;
    background: linear-gradient(160deg, #DCE3EB 0%, #E9EEF3 45%, #DFE5EC 100%);
    box-shadow: inset 0 -1px 0 rgba(15, 30, 50, .07);
}

.mobile-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    filter: drop-shadow(0 5px 12px rgba(15, 30, 50, .18));
    transition: transform .3s ease;
}

.mobile-card:hover .mobile-card__image {
    transform: scale(1.03);
}

/*
 * Brand-mark placeholder, used when a listing has specs and a price but no
 * photograph yet. Held well inside the tile and faded back so it reads as a
 * watermark rather than as a product shot that failed to load.
 */
.mobile-card__image--logo {
    padding: 27%;
    opacity: .14;
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

.mobile-card__ribbon {
    position: absolute;
    top: 10px;
    right: -30px;
    transform: rotate(40deg);
    background: var(--khabri-accent, #F59E0B);
    color: #422A04;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 34px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    z-index: 3;
}

.mobile-card__fuel-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    z-index: 3;
}

.mobile-card__fuel-badge--petrol { color: #86868B; }
.mobile-card__fuel-badge--hybrid { color: #127A56; }
.mobile-card__fuel-badge--electric { color: #2D7BE3; }

.mobile-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 16px 20px;
    text-align: center;
}

.mobile-card__brand-pill {
    display: block;
    background: none;
    color: #86868B !important;
    font-size: 12.3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mobile-card__name {
    display: block;
    width: 100%;
    font-size: 16.8px;
    font-weight: 600;
    color: #1D1D1F !important;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-card__specs {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.9px;
    color: #86868B;
}

.mobile-card__specs-dot {
    color: #D2D2D7;
}

.mobile-card__price {
    display: inline-block;
    font-size: 15.7px;
    font-weight: 600;
    color: #1D1D1F !important;
    background: none;
    padding: 0;
    margin-top: 6px;
}

.mobile-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FAFCFF;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}

.mobile-filters__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mobile-filters__label {
    flex-shrink: 0;
    width: 90px;
    font-size: 13.4px;
    font-weight: 700;
    color: var(--khabri-ink);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.mobile-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-filters__chips a {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: all .15s ease;
}

.mobile-filters__chips a:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8) !important;
}

.mobile-filters__chips a.is-active {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff !important;
}

/* Fuel/power-source icons — used in filter chips, cards, and detail badges */
.fuel-icon {
    flex-shrink: 0;
    vertical-align: -2px;
}

.mobile-filters__chips a.mobile-filters__chip--fuel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fuel-icon--petrol { color: #5F6E85; }
.fuel-icon--hybrid { color: #127A56; }
.fuel-icon--electric { color: #2D7BE3; }

.mobile-filters__chips a.mobile-filters__chip--fuel.is-active .fuel-icon {
    color: #fff;
}

.mobile-filters__clear {
    align-self: flex-start;
    font-size: 13.4px;
    font-weight: 700;
    color: #C92A2F !important;
    text-decoration: none !important;
}

.mobile-filters__clear:hover {
    text-decoration: underline !important;
}

.mobile-brand-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.mobile-brand-filter a {
    padding: 8px 16px;
    border: 1px solid #E3E8EF;
    border-radius: 20px;
    font-size: 13.4px;
    font-weight: 600;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
}

.mobile-brand-filter a:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8);
}

.mobile-brand-filter a.is-active {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff;
}

.mobile-detail__price {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8);
    margin-bottom: 18px;
}

.mobile-quick-badges .name-badge {
    min-width: 90px;
}

.mobile-detail__meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14.6px;
    margin-bottom: 8px;
    color: #1E293B;
}

.mobile-detail__meta-row .spec-icon {
    align-self: center;
    color: #1D4ED8;
}

.mobile-detail__meta-row strong {
    flex-shrink: 0;
    color: var(--khabri-ink);
}

.spec-table-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.spec-group {
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    overflow: hidden;
}

.spec-group__title {
    background: #F5F8FC;
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 700;
    font-size: 14.6px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 16px;
    border-bottom: 1px solid #E3E8EF;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.6px;
}

.spec-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #EEF3FA;
    vertical-align: top;
}

.spec-table tr:last-child td {
    border-bottom: none;
}

.spec-table td:first-child {
    width: 140px;
    color: #5F6E85;
    font-weight: 600;
}

.mobile-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-sidebar-links a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14.6px;
    color: var(--khabri-ink) !important;
    text-decoration: none !important;
}

.mobile-sidebar-links a:hover {
    background: #F5F8FC;
}

.brand-long-description {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid #E3E8EF;
}

.brand-long-description .article-body {
    font-family: 'Inter', var(--global-font), sans-serif;
    font-size: 16.8px;
    line-height: 1.9;
    color: #1E293B;
    max-width: 900px;
}

.brand-long-description .article-body h2 {
    font-size: 20.7px;
    color: var(--khabri-ink);
    margin: 26px 0 12px;
}

.brand-long-description .article-body h2:first-child {
    margin-top: 0;
}

.brand-long-description .article-body h3 {
    font-size: 17.9px;
    color: var(--khabri-primary, #1D4ED8);
    margin: 20px 0 10px;
    text-transform: none;
    letter-spacing: normal;
}

.brand-long-description .article-body ul,
.brand-long-description .article-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.mobile-sidebar-links a.is-active {
    background: #DCE7F8;
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 600;
}

/* Individual tool page — centered, professional wrapper shared by all 19
   tools. Only this shared chrome is styled here; each tool's own inline
   markup (buttons, inputs, results) inherits the polish below. */
.tool-page {
    max-width: 640px;
    margin: 0 auto;
}

.tool-page__header {
    text-align: center;
    margin-bottom: 22px;
}

.tool-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #EAF1FD;
    color: var(--khabri-primary, #1D4ED8);
    margin-bottom: 14px;
}

.tool-page__icon svg {
    width: 28px;
    height: 28px;
}

.tool-page__title {
    font-family: 'Inter', var(--global-font), sans-serif;
    font-size: 27.6px;
    font-weight: 700;
    color: var(--khabri-ink);
    margin: 0 0 8px;
}

.tool-page__subtitle {
    font-family: 'Inter', var(--global-font), sans-serif;
    color: #5F6E85;
    font-size: 16.2px;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
}

.tool-card {
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(15, 23, 36, .06);
}

.tool-page__note {
    text-align: center;
    color: #5F6E85;
    font-size: 14px;
    margin: 16px 0 0;
}

/* Generic polish for whatever a tool's own markup drops inside .tool-card —
   buttons, inputs, textareas, selects — without needing to touch each of the
   19 tool partials individually. */
.tool-card button[onclick],
.tool-card button[type="button"] {
    transition: transform .1s ease, opacity .15s ease;
}

.tool-card button[onclick]:hover,
.tool-card button[type="button"]:hover {
    opacity: .92;
}

.tool-card button[onclick]:active,
.tool-card button[type="button"]:active {
    transform: scale(.98);
}

.tool-card input[type="text"],
.tool-card input[type="number"],
.tool-card input[type="date"],
.tool-card input[type="url"],
.tool-card textarea,
.tool-card select {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tool-card input[type="text"]:focus,
.tool-card input[type="number"]:focus,
.tool-card input[type="date"]:focus,
.tool-card input[type="url"]:focus,
.tool-card textarea:focus,
.tool-card select:focus {
    outline: none;
    border-color: var(--khabri-primary, #1D4ED8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

@media (max-width: 576px) {
    .tool-card {
        padding: 20px;
    }

    .tool-page__title {
        font-size: 24px;
    }
}

/* Drag & drop file upload zone — used across all file-based tools */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    background: #FAFCFF;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--khabri-primary, #1D4ED8);
    background: #F5F8FC;
}

.dropzone.is-dragover {
    border-color: var(--khabri-primary, #1D4ED8);
    background: #DCE7F8;
}

.dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone__icon {
    color: var(--khabri-primary, #1D4ED8);
    margin-bottom: 4px;
}

.dropzone__text {
    font-size: 15.7px;
    color: #1E293B;
}

.dropzone__text strong {
    color: var(--khabri-primary, #1D4ED8);
}

.dropzone__hint {
    font-size: 13.4px;
    color: #5F6E85;
}

.dropzone__filename {
    margin-top: 8px;
    font-size: 14.6px;
    font-weight: 600;
    color: var(--khabri-primary, #1D4ED8);
    word-break: break-all;
}

/* ===== World / Weather / World Clock / Currency — shared "explorer" UI ===== */

.region-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.region-filter-pills a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: #495057 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.region-filter-pills a.is-active {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff !important;
}

.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.country-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 16px 10px;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.country-card:hover {
    transform: translateY(-3px);
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 10px 20px rgba(15, 23, 36, .08);
}

.country-card__flag {
    font-size: 33.9px;
    line-height: 1;
}

.country-card__name {
    font-size: 15.1px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724) !important;
}

.country-card__meta {
    font-size: 12.9px;
    color: #5F6E85;
}

.country-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.country-hero__flag {
    font-size: 55.1px;
    line-height: 1;
}

.country-hero__title {
    font-size: 27.6px;
    font-weight: 700;
    margin: 0;
}

.country-hero__subtitle {
    font-size: 15.1px;
    color: #5F6E85;
    margin: 2px 0 0;
}

.country-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

@media (max-width: 900px) {
    .country-layout {
        grid-template-columns: 1fr;
    }
}

.country-weather-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #F5F8FC;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.country-weather-card__icon {
    font-size: 36px;
    line-height: 1;
}

.country-weather-card__temp {
    font-size: 24px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724);
}

.country-weather-card__desc {
    font-size: 14.6px;
    color: #5F6E85;
}

.country-weather-card__link {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8) !important;
    white-space: nowrap;
}

.panel-card {
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}

.panel-card h3 {
    font-size: 15.7px;
    margin: 0 0 12px;
}

.fact-list {
    margin: 0;
}

.fact-list dt {
    font-size: 12.9px;
    color: #5F6E85;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 12px;
}

.fact-list dt:first-child {
    margin-top: 0;
}

.fact-list dd {
    font-size: 15.7px;
    font-weight: 600;
    color: var(--khabri-ink, #0F1724);
    margin: 2px 0 0;
}

.weather-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 14px;
}

.weather-hero__icon {
    font-size: 50.9px;
    line-height: 1;
}

.weather-hero__temp {
    font-size: 36px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724);
}

.weather-hero__desc {
    font-size: 15.7px;
    color: #495057;
    font-weight: 600;
}

.weather-hero__place {
    font-size: 14px;
    color: #5F6E85;
    margin-top: 2px;
}

.weather-hero__wind {
    margin-left: auto;
    text-align: center;
    font-size: 12.9px;
    color: #5F6E85;
}

.weather-hero__wind strong {
    display: block;
    font-size: 16.8px;
    color: var(--khabri-ink, #0F1724);
}

.weather-advice {
    font-size: 15.1px;
    color: #495057;
    background: #F5F8FC;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.weather-forecast {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.weather-forecast__day {
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    padding: 12px 8px;
}

.weather-forecast__date {
    font-size: 12.9px;
    color: #5F6E85;
}

.weather-forecast__icon {
    font-size: 24px;
    margin: 6px 0;
}

.weather-forecast__temps strong {
    color: var(--khabri-ink, #0F1724);
    margin-right: 6px;
}

.weather-forecast__temps span {
    color: #5F6E85;
}

.popular-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.popular-cities a {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: #495057 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.popular-cities a:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    color: var(--khabri-primary, #1D4ED8) !important;
}

.world-clock-hero {
    text-align: center;
    background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
    border-radius: 16px;
    padding: 40px 20px;
    color: #fff;
    margin-bottom: 24px;
}

.world-clock-hero__time {
    font-size: 46.6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.world-clock-hero__date {
    font-size: 15.7px;
    opacity: .9;
    margin-top: 4px;
}

.world-clock-hero__place {
    font-size: 14px;
    opacity: .8;
    margin-top: 8px;
}

.clock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clock-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none !important;
    transition: border-color .2s ease;
}

.clock-card:hover, .clock-card.is-active {
    border-color: var(--khabri-primary, #1D4ED8);
}

.clock-card__time {
    font-size: 17.9px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724);
    font-variant-numeric: tabular-nums;
}

.clock-card__place {
    font-size: 13.4px;
    color: #5F6E85;
}

/* ===== Quran, Holidays, and the "Discover" content pages (Quotes/Facts/Advice) ===== */

/* Mushaf-style reading card — a warm parchment tone, a gold-leaf ayah
   medallion, and a proper Naskh Quranic typeface (Amiri) instead of the
   site's default sans/Nastaliq, so this reads as "the Quran" rather than
   as another plain content page. */
.mushaf-header {
    text-align: center;
    background: linear-gradient(180deg, #FBF6EA 0%, #F6EFDC 100%);
    border: 1px solid #E3D5B0;
    border-radius: 14px;
    padding: 30px 20px 24px;
    margin-bottom: 18px;
}

.mushaf-header__ornament {
    font-size: 21.8px;
    color: #B4922E;
    margin-bottom: 6px;
    letter-spacing: .3em;
}

.mushaf-header__name {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 42.4px;
    font-weight: 700;
    color: #4A3B12;
    margin: 4px 0 8px;
}

.mushaf-header__meta {
    font-size: 15.1px;
    color: #6B5B2E;
    font-weight: 600;
    margin: 0;
}

.mushaf-header__submeta {
    font-size: 13.4px;
    color: #9C8A55;
    margin: 4px 0 0;
}

.quran-ayahs {
    background: #FBF6EA;
    border: 1px solid #E3D5B0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 6px 0;
}

.quran-ayah {
    display: flex;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px dashed #E3D5B0;
}

.quran-ayah:last-child {
    border-bottom: none;
}

.quran-ayah__number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFFCF3;
    border: 1.5px solid #C9A227;
    color: #8A6D14;
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: 700;
}

.quran-ayah__text {
    flex: 1;
}

.quran-ayah__arabic {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 30.7px;
    line-height: 2.3;
    margin: 0 0 10px;
    color: #2B2013;
}

.quran-ayah__urdu {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif;
    font-size: 17.9px;
    line-height: 1.9;
    color: #495057;
    margin: 0;
}

.quran-ayah__urdu--en {
    font-family: inherit;
    font-size: 16.2px;
    line-height: 1.7;
}

.quran-ayah__urdu--hi {
    font-family: 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;
    font-size: 16.8px;
    line-height: 1.8;
}

.quran-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.quran-nav__link {
    font-size: 14.6px;
    font-weight: 700;
    color: #8A6D14 !important;
}

.year-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.year-switcher a {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: #495057 !important;
    font-size: 14.6px;
    font-weight: 600;
}

.year-switcher a.is-active {
    background: var(--khabri-primary, #1D4ED8);
    border-color: var(--khabri-primary, #1D4ED8);
    color: #fff !important;
}

.holiday-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    overflow: hidden;
}

.holiday-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #EEF3FA;
}

.holiday-list__item:last-child {
    border-bottom: none;
}

.holiday-list__date {
    flex-shrink: 0;
    width: 90px;
    font-size: 14px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8);
}

.holiday-list__name {
    flex: 1;
    font-size: 15.7px;
    font-weight: 600;
    color: var(--khabri-ink, #0F1724);
}

.holiday-list__type {
    font-size: 12.3px;
    color: #5F6E85;
}

.discover-card {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 16px;
    padding: 40px 32px;
}

.discover-card__icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 14px;
}

.discover-card__text {
    font-size: 20.7px;
    line-height: 1.6;
    color: var(--khabri-ink, #0F1724);
    font-weight: 500;
}

.discover-card__author {
    color: #5F6E85;
    font-size: 15.7px;
    margin-top: 6px;
}

.discover-card__btn {
    margin-top: 22px;
    padding: 11px 26px;
    border: none;
    border-radius: 8px;
    background: var(--khabri-primary, #1D4ED8);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 15.7px;
}

.discover-card__btn:disabled {
    opacity: .6;
    cursor: default;
}

/* ===== Quran browser: tabs, filters, language switch, PDF button ===== */

.quran-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid #E3E8EF;
}

.quran-tabs__btn {
    padding: 10px 4px;
    margin-right: 20px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 15.7px;
    font-weight: 700;
    color: #5F6E85;
    cursor: pointer;
}

.quran-tabs__btn.is-active {
    color: var(--khabri-primary, #1D4ED8);
    border-bottom-color: var(--khabri-primary, #1D4ED8);
}

.quran-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.quran-filters__search {
    flex: 1;
    min-width: 220px;
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid #E3E8EF;
    font-family: inherit;
    font-size: 15.7px;
}

.quran-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.quran-lang-switch {
    display: flex;
    gap: 6px;
    background: #F6EFDC;
    border-radius: 20px;
    padding: 4px;
}

.quran-lang-switch a {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    color: #6B5B2E !important;
}

.quran-lang-switch a.is-active {
    background: #B4922E;
    color: #fff !important;
}

.quran-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid #B4922E;
    color: #8A6D14 !important;
    font-size: 14px;
    font-weight: 700;
}

.quran-pdf-btn:hover {
    background: #B4922E;
    color: #fff !important;
}

.quran-surah-divider {
    background: #F6EFDC;
    color: #8A6D14;
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 16.8px;
    font-weight: 700;
    text-align: center;
    padding: 8px 14px;
    border-radius: 8px;
    margin: 16px 0 10px;
}

/* ===== Recipes ===== */

.recipe-cuisine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-cuisine-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 20px 10px;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.recipe-cuisine-card:hover {
    transform: translateY(-3px);
    border-color: #E0733C;
    box-shadow: 0 10px 20px rgba(224, 115, 60, .12);
}

.recipe-cuisine-card__flag {
    font-size: 31.8px;
    line-height: 1;
}

.recipe-cuisine-card__name {
    font-size: 15.7px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724) !important;
}

.recipe-cuisine-card__count {
    font-size: 12.9px;
    color: #5F6E85;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.recipe-card:hover {
    transform: translateY(-3px);
    border-color: #E0733C;
    box-shadow: 0 10px 22px rgba(15, 23, 36, .1);
}

.recipe-card__image-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F5F8FC;
    overflow: hidden;
}

.recipe-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.recipe-card__title {
    padding: 12px 14px 14px;
    font-size: 15.1px;
    font-weight: 700;
    color: var(--khabri-ink, #0F1724) !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-hero {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.recipe-hero__image {
    width: 320px;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: #F5F8FC;
}

.recipe-hero__body {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recipe-hero__title {
    font-size: 27.6px;
    font-weight: 700;
    margin: 0 0 12px;
}

.recipe-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recipe-badge {
    padding: 5px 14px;
    border-radius: 20px;
    background: #FDF0E7;
    color: #B0521E;
    font-size: 13.4px;
    font-weight: 700;
}

.recipe-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

@media (max-width: 900px) {
    .recipe-layout {
        grid-template-columns: 1fr;
    }
}

.recipe-steps {
    margin: 0;
    padding-left: 22px;
}

.recipe-steps li {
    margin-bottom: 14px;
    font-size: 16.2px;
    line-height: 1.7;
    color: #333;
}

.recipe-ingredients {
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-ingredients li {
    padding: 8px 0;
    border-bottom: 1px solid #EEF3FA;
    font-size: 15.1px;
    color: #333;
}

.recipe-ingredients li:last-child {
    border-bottom: none;
}

.recipe-ingredients li strong {
    color: var(--khabri-primary, #1D4ED8);
    margin-right: 4px;
}

/* ===== Tools grid (with icons) ===== */

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.tools-grid__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 22px;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tools-grid__card:hover {
    transform: translateY(-3px);
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 12px 24px rgba(15, 23, 36, .1);
}

.tools-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EAF1FD;
    color: var(--khabri-primary, #1D4ED8);
    margin-bottom: 14px;
}

.tools-grid__icon svg {
    width: 22px;
    height: 22px;
}

.tools-grid__name {
    font-size: 16.8px;
    color: var(--khabri-ink, #0F1724) !important;
    margin-bottom: 6px;
}

.tools-grid__desc {
    font-size: 14px;
    color: #5F6E85;
    line-height: 1.6;
}

/* ===== Car body-type cards (Car Categories grid on /autos) ===== */

.body-type-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.body-type-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 20px 10px;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 36, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.body-type-card:hover {
    transform: translateY(-3px);
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 10px 20px rgba(15, 23, 36, .08);
}

.body-type-card__icon {
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.body-type-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #DCE7F8;
    color: var(--khabri-primary, #1D4ED8);
    font-weight: 700;
    font-size: 14.6px;
    text-transform: uppercase;
}

.body-type-card strong {
    display: block;
    font-size: 14.6px;
    font-weight: 700;
    color: var(--khabri-ink) !important;
}

.body-type-card span:not(.body-type-card__fallback) {
    display: block;
    font-size: 12.3px;
    color: #5F6E85 !important;
}

/* ===== Doctors by Speciality (Health) ===== */

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.specialty-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 15.1px;
    font-weight: 600;
    color: var(--khabri-ink, #0F1724) !important;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.specialty-card:hover {
    border-color: var(--khabri-primary, #1D4ED8);
    box-shadow: 0 8px 18px rgba(15, 23, 36, .08);
    transform: translateY(-2px);
}

.specialty-card__count {
    flex-shrink: 0;
    font-size: 12.3px;
    font-weight: 700;
    color: #5F6E85;
    background: #F5F8FC;
    border-radius: 20px;
    padding: 2px 9px;
}

.region-filter-pills__more {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px dashed #CBD5E1;
    background: none;
    color: var(--khabri-primary, #1D4ED8);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.doctor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.doctor-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    padding: 18px;
}

.doctor-card__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #EAF1FD;
    color: var(--khabri-primary, #1D4ED8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21.8px;
    font-weight: 700;
}

.doctor-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.doctor-card__name {
    font-size: 16.8px;
    color: var(--khabri-ink, #0F1724);
}

.doctor-card__qualification {
    font-size: 12.9px;
    color: #5F6E85;
}

.doctor-card__specialty {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    background: #F5F8FC;
    color: var(--khabri-primary, #1D4ED8);
    font-size: 11.8px;
    font-weight: 700;
}

.doctor-card__meta {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.doctor-card__meta li {
    font-size: 14px;
    color: #495057;
    line-height: 1.7;
}

.doctor-card__call {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--khabri-primary, #1D4ED8) !important;
    text-decoration: none !important;
}

/* ---------- Commodity rates ---------- */
.rate-source-note {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 10px;
    padding: 12px 16px;
    color: #5F6E85;
    font-size: 14.6px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.rate-city-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.rate-city-picker__item {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 14.6px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.rate-city-picker__item:hover {
    border-color: var(--kh-primary, #1D4ED8);
    color: var(--kh-primary, #1D4ED8);
}

.rate-city-picker__item.is-active {
    background: var(--kh-primary, #1D4ED8);
    border-color: var(--kh-primary, #1D4ED8);
    color: #fff;
}

.rate-group-title {
    font-size: 18.5px;
    font-weight: 700;
    color: #334155;
    margin: 28px 0 10px;
}

/*
 * Rate tables.
 *
 * These were near-white on white: a pale header, hairline rules and nothing to
 * follow a row by. Now the head carries the brand colour, rows alternate, and
 * the figure column — the reason anyone opens this page — is tinted and set in
 * the brand green so the eye lands on it first.
 */
.rate-table-wrap {
    overflow-x: auto;
    border: 1px solid #D3E3DC;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 36, .06);
}

.rate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.7px;
    min-width: 620px;
}

.rate-table th,
.rate-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #EDF3F0;
}

.rate-table thead th {
    background: #1D4ED8;
    font-size: 14.6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    border-bottom: 0;
    white-space: nowrap;
}

.rate-table tbody tr:nth-child(even) {
    background: #F8FAFD;
}

.rate-table tbody tr:last-child td {
    border-bottom: 0;
}

.rate-table tbody tr:hover {
    background: #EAF1FD;
}

.rate-table tbody td:first-child {
    font-weight: 600;
}

.rate-table a {
    color: #1E3B34;
    text-decoration: none;
    font-weight: 600;
}

.rate-table a:hover {
    color: var(--kh-primary, #1D4ED8);
}

.rate-table__num {
    text-align: right;
    white-space: nowrap;
}

.rate-table__avg {
    font-weight: 700;
    color: #1D4ED8;
}

.rate-table__urdu {
    display: block;
    font-size: 14.6px;
    color: #5F6E85;
    direction: rtl;
}

.rate-change {
    font-size: 14.6px;
    color: #5F6E85;
}

.rate-change--up {
    color: #C92A2F;
}

.rate-change--down {
    color: #127A56;
}

.rate-item-urdu {
    direction: rtl;
    font-size: 19.6px;
    color: #334155;
    margin: -8px 0 12px;
}

.rate-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.rate-summary__box {
    flex: 1 1 180px;
    padding: 14px 16px;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 10px;
    background: #fff;
}

.rate-summary__label {
    display: block;
    font-size: 13.4px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #5F6E85;
    margin-bottom: 4px;
}

.rate-summary__box strong {
    display: block;
    font-size: 19.6px;
    color: #334155;
}

.rate-summary__box small {
    color: #5F6E85;
    font-size: 14.6px;
}

.rate-table__date {
    color: #5F6E85;
    font-size: 13.4px;
}

/* ---------- Finance section ---------- */
.market-watch {
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 24px;
    overflow: hidden;
}

.market-watch__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #F5F8FC;
    border-bottom: 1px solid var(--kh-border, #E2E8F0);
    font-size: 14.6px;
    color: #334155;
}

.market-watch__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.market-watch__item {
    padding: 14px 16px;
    text-align: center;
    border-right: 1px solid var(--kh-border, #E2E8F0);
    text-decoration: none;
    color: #334155;
    transition: background .15s;
}

.market-watch__item:last-child { border-right: 0; }
.market-watch__item:hover { background: #FAFCFF; }

.market-watch__item small {
    display: block;
    font-size: 13.4px;
    color: #5F6E85;
    margin-bottom: 4px;
}

.market-watch__item strong {
    display: block;
    font-size: 18.5px;
    font-variant-numeric: tabular-nums;
}

.finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    align-items: start;
}

.finance-more {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 14.6px;
    font-weight: 600;
    color: var(--kh-primary, #1D4ED8);
    text-decoration: none;
}

.finance-more:hover { text-decoration: underline; }

.psx-ticker-wrap {
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 8px;
    background: #fff;
    padding: 10px 0;
    margin-bottom: 22px;
    font-size: 14.6px;
}

.psx-ticker__item { margin-right: 26px; white-space: nowrap; }
.psx-ticker__item b { color: #334155; }
.changeGreen { color: #127A56; }
.changeRed { color: #C92A2F; }

/* ---------- Post grid (category pages) ---------- */
/*
 * auto-fit rather than auto-fill, and a lower floor: the news strips carry
 * four items and 270px left room for only three across a 1140px container, so
 * the fourth card dropped onto a line of its own with a gap beside it.
 */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/*
 * Recipes keep the wider card. A dish is the whole point of the card, so the
 * picture is worth the extra width even though it means three across.
 */
.post-grid--roomy {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.post-grid__ad {
    grid-column: 1 / -1;
}

.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    border-color: #CFE3DA;
    box-shadow: 0 10px 24px rgba(15, 45, 35, .09);
}

.post-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #F5F8FC;
    overflow: hidden;
}

/*
 * Absolutely filled rather than sized at 100%: a tall image (a portrait from a
 * topic hub, say) resolves its own height against an aspect-ratio box that has
 * not been measured yet, and stretches the card instead of being cropped.
 */
.post-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-card__badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(29, 78, 216, .92);
    color: #fff;
    font-size: 12.3px;
    font-weight: 600;
    letter-spacing: .02em;
}

.post-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    flex: 1;
}

.post-card__title {
    margin: 0;
    font-size: 16.8px;
    font-weight: 700;
    line-height: 1.5;
    color: #16202E;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card:hover .post-card__title {
    color: var(--kh-primary, #1D4ED8);
}

.post-card__excerpt {
    margin: 0;
    font-size: 14.6px;
    line-height: 1.65;
    color: #5F6E85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13.4px;
    color: #5F6E85;
    border-top: 1px solid #F0F4FA;
}

.post-card__official {
    color: var(--kh-primary, #1D4ED8);
    font-weight: 600;
}

/* Urdu titles need a little more line height to stay readable */
.post-card__title:lang(ur) { line-height: 1.9; }

@media (max-width: 480px) {
    .post-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .post-card__body { padding: 10px 12px 12px; }
    .post-card__title { font-size: 14.6px; }
    .post-card__excerpt { display: none; }
}

/* ---------- Empty category state ---------- */
.category-empty {
    background: #fff;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    padding: 24px 26px;
}

.category-empty__lead {
    margin: 0 0 18px;
    font-size: 16.8px;
    color: #334155;
}

.category-empty__label {
    margin: 0 0 10px;
    font-size: 14.6px;
    font-weight: 600;
    color: #5F6E85;
}

.category-empty__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.category-empty__links:last-child { margin-bottom: 0; }

.category-empty__links a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 14.6px;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.category-empty__links a:hover {
    border-color: var(--kh-primary, #1D4ED8);
    color: var(--kh-primary, #1D4ED8);
    background: #F5F8FC;
}

/* ---------- Site-wide footer disclaimer ---------- */
.site-disclaimer {
    margin: 26px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-left: 3px solid #C9D6D1;
    border-radius: 8px;
    background: #FAFCFF;
    color: #5F6E85;
    font-size: 14px;
    line-height: 1.75;
}

.site-disclaimer strong { color: #475569; }

/* ---------- Category long-form intro ---------- */
.category-article {
    background: #fff;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    padding: 26px 30px;
    margin-bottom: 22px;
    color: #334155;
    font-size: 16.8px;
    line-height: 1.85;
}

.category-article h2 {
    margin: 0 0 14px;
    font-size: 21.8px;
    font-weight: 700;
    color: #16202E;
}

.category-article h3 {
    margin: 24px 0 10px;
    font-size: 17.9px;
    font-weight: 700;
    color: #16202E;
}

.category-article p {
    margin: 0 0 14px;
}

.category-article p:last-child { margin-bottom: 0; }

.category-article a {
    color: var(--kh-primary, #1D4ED8);
    font-weight: 600;
}

@media (max-width: 600px) {
    .category-article { padding: 20px 18px; font-size: 16.2px; }
}

/* ---------- Islamic names banner (home page) ---------- */
.names-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding: 26px 30px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1D4ED8 0%, #12A184 55%, #1BBE9B 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

/* Faint geometric motif so the panel reads as a designed banner, not a colour block. */
.names-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 90%, rgba(255,255,255,.10) 0 2px, transparent 3px);
    background-size: 120px 120px, 90px 90px, 150px 150px;
    pointer-events: none;
}

.names-banner__text {
    position: relative;
    z-index: 1;
    flex: 1 1 340px;
}

.names-banner__urdu {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif;
    direction: rtl;
    font-size: 26.2px;
    line-height: 2.15;
    font-weight: 600;
    margin: 0 0 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.names-banner__sub {
    margin: 0 0 16px;
    font-size: 15.7px;
    color: rgba(255, 255, 255, .9);
}

.names-banner__cta {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    color: #1D4ED8;
    font-size: 14.6px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease;
}

.names-banner__cta:hover {
    transform: translateY(-2px);
    color: #0B6B58;
}

.names-banner__art {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    border: 2px solid rgba(255, 255, 255, .35);
}

.names-banner__art span {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif;
    direction: rtl;
    font-size: 31.8px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .95);
}

@media (max-width: 700px) {
    .names-banner { flex-direction: column; text-align: center; padding: 22px 18px; }
    .names-banner__urdu { font-size: 20.7px; line-height: 2.3; }
    .names-banner__art { width: 110px; height: 110px; }
    .names-banner__art span { font-size: 24px; }
}

/* ---------- Name FAQs ---------- */
.name-faqs {
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 26px;
}

.name-faq {
    border-bottom: 1px solid #F0F4FA;
}

.name-faq:last-child { border-bottom: 0; }

.name-faq > summary {
    padding: 14px 18px;
    cursor: pointer;
    font-size: 16.2px;
    font-weight: 600;
    color: #16202E;
    list-style: none;
    position: relative;
    padding-right: 44px;
    transition: background .15s;
}

.name-faq > summary:hover { background: #FAFCFF; }
.name-faq > summary::-webkit-details-marker { display: none; }

.name-faq > summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20.7px;
    font-weight: 400;
    color: var(--kh-primary, #1D4ED8);
}

.name-faq[open] > summary::after { content: '\2212'; }
.name-faq[open] > summary { background: #F5F8FC; }

.name-faq > p {
    margin: 0;
    padding: 4px 18px 16px;
    font-size: 15.7px;
    line-height: 1.85;
    color: #475569;
}

/* ---------- Islam panel (home page) ---------- */
.islam-panel {
    border-radius: 14px;
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 55%, #14A183 100%);
    color: #fff;
    margin-bottom: 24px;
    overflow: hidden;
}

.islam-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px 12px;
}

.islam-panel__label {
    display: block;
    font-size: 13.4px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.islam-panel__hijri {
    display: block;
    font-size: 20.7px;
    font-weight: 700;
    margin-top: 2px;
}

.islam-panel__more {
    color: #fff;
    font-size: 14.6px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    opacity: .9;
}

.islam-panel__more:hover { color: #fff; opacity: 1; }

.islam-panel__meta {
    padding: 0 22px 14px;
    font-size: 15.1px;
    color: rgba(255, 255, 255, .92);
}

.islam-panel__meta strong { display: block; margin-bottom: 2px; }

.islam-panel__times {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.islam-time {
    padding: 12px 6px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.islam-time:last-child { border-right: 0; }

.islam-time__name {
    display: block;
    font-size: 13.4px;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 3px;
}

.islam-time__value {
    display: block;
    font-size: 15.7px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.islam-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px 18px;
    background: rgba(0, 0, 0, .08);
}

.islam-panel__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 14.6px;
    text-decoration: none;
    transition: background .15s;
}

.islam-panel__links a:hover { background: rgba(255, 255, 255, .26); color: #fff; }

@media (max-width: 760px) {
    .islam-panel__times { grid-template-columns: repeat(3, 1fr); }
    .islam-time:nth-child(3n) { border-right: 0; }
    .islam-time:nth-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, .14); }
}

@media (max-width: 420px) {
    .islam-panel__times { grid-template-columns: repeat(2, 1fr); }
    .islam-time:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, .14); }
    .islam-time:nth-child(2n) { border-right: 0; }
}

/* ---------- Home showcase sections (Mobiles, Autos) ---------- */
.showcase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 26px;
    border-radius: 14px;
    margin-bottom: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.showcase-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 88% 20%, rgba(255,255,255,.14) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 85%, rgba(255,255,255,.10) 0 2px, transparent 3px);
    background-size: 110px 110px, 80px 80px;
    pointer-events: none;
}

.showcase-head--mobiles { background: linear-gradient(135deg, #14486B 0%, #1E6C9E 55%, #2A93CE 100%); }
.showcase-head--autos { background: linear-gradient(135deg, #5C3A12 0%, #8A5A1E 55%, #C18232 100%); }

.showcase-head__text { position: relative; z-index: 1; flex: 1 1 320px; }

.showcase-head__label {
    display: block;
    font-size: 13.4px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 3px;
}

.showcase-head__title {
    display: block;
    font-size: 21.8px;
    font-weight: 700;
    line-height: 1.45;
}

.showcase-head__sub {
    margin: 6px 0 0;
    font-size: 15.1px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.showcase-head__cta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    color: #14486B;
    font-size: 14.6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease;
}

.showcase-head--autos .showcase-head__cta { color: #7A4D18; }
.showcase-head__cta:hover { transform: translateY(-2px); }

.showcase-subtitle {
    font-size: 17.9px;
    font-weight: 700;
    color: #16202E;
    margin: 0 0 14px;
}

@media (max-width: 700px) {
    .showcase-head { flex-direction: column; align-items: flex-start; padding: 20px; }
    .showcase-head__title { font-size: 18.5px; }
}

/* ---------- Islamic tools (zakat, hijri converter) ---------- */
.zakat-nisab {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.zakat-nisab__box {
    flex: 1 1 240px;
    padding: 16px 18px;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    background: #fff;
}

.zakat-nisab__box--active {
    border-color: #1D4ED8;
    background: #F5F8FC;
}

.zakat-nisab__box span {
    display: block;
    font-size: 13.4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5F6E85;
    margin-bottom: 4px;
}

.zakat-nisab__box strong {
    display: block;
    font-size: 21.8px;
    color: #16202E;
}

.zakat-nisab__box small {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #5F6E85;
}

.zakat-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
}

.zakat-form {
    background: #fff;
    border: 1px solid var(--kh-border, #E2E8F0);
    border-radius: 12px;
    padding: 22px 24px;
}

.zakat-form__title {
    font-size: 16.8px;
    font-weight: 700;
    color: #16202E;
    margin: 0 0 16px;
}

.zakat-field { margin-bottom: 15px; }

.zakat-field label {
    display: block;
    font-size: 14.6px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.zakat-field input,
.zakat-field select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid #E3E8EF;
    font-family: inherit;
    font-size: 15.7px;
}

.zakat-field input:focus,
.zakat-field select:focus {
    outline: none;
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.zakat-field small {
    display: block;
    margin-top: 5px;
    font-size: 13.4px;
    color: #5F6E85;
}

.zakat-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #1D4ED8;
    color: #fff;
    font-family: inherit;
    font-size: 15.7px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.zakat-btn:hover { background: #0B6B58; }

.zakat-result {
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 60%, #14A183 100%);
    border-radius: 12px;
    padding: 24px;
    color: #fff;
}

.zakat-result__label {
    display: block;
    font-size: 13.4px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .8);
}

.zakat-result__amount {
    display: block;
    font-size: 31.8px;
    font-weight: 700;
    margin: 4px 0 18px;
}

.zakat-result__rows { margin: 0 0 14px; }

.zakat-result__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 15.1px;
}

.zakat-result__rows > div:last-child { border-bottom: 0; }
.zakat-result__rows dt { color: rgba(255, 255, 255, .85); margin: 0; }
.zakat-result__rows dd { margin: 0; font-weight: 600; }

.zakat-result__note {
    margin: 0;
    font-size: 14.6px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .9);
}

.hijri-today {
    display: inline-flex;
    flex-direction: column;
    padding: 16px 22px;
    border-radius: 12px;
    background: #F5F8FC;
    border: 1px solid #CBD5E1;
    margin-bottom: 22px;
}

.hijri-today span {
    font-size: 13.4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5F6E85;
}

.hijri-today strong { font-size: 24px; color: #1D4ED8; margin: 2px 0; }
.hijri-today small { font-size: 14.6px; color: #5F6E85; }

.hijri-out {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #F5F8FC;
    border: 1px solid #CBD5E1;
    font-size: 15.7px;
    color: #334155;
}

.hijri-out strong { display: block; font-size: 19.6px; color: #1D4ED8; }
.hijri-out span { display: block; margin-top: 3px; font-size: 14.6px; color: #5F6E85; }

.showcase-head--recipes { background: linear-gradient(135deg, #6B2135 0%, #9B3550 55%, #C4506C 100%); }
.showcase-head--recipes .showcase-head__cta { color: #8A3049; }

/* Visually hidden but read by search engines and screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Showcase accents ----------
 * Each homepage section carries its own colour through its cards, so the page
 * reads as one design instead of a grey grid between coloured banners.
 */
.home-showcase--mobiles { --showcase-accent: #1E6C9E; --showcase-tint: #EAF2F8; }
.home-showcase--autos { --showcase-accent: #8A5A1E; --showcase-tint: #F8F1E6; }
.home-showcase--recipes { --showcase-accent: #9B3550; --showcase-tint: #FAEDF0; }

.home-showcase .mobile-card__brand-pill,
.home-showcase .mobile-card__price {
    color: var(--showcase-accent, #1D4ED8) !important;
}

.home-showcase .mobile-card:hover,
.home-showcase .post-card:hover {
    border-color: var(--showcase-accent, #1D4ED8);
}

.home-showcase .mobile-brand-card__fallback {
    background: var(--showcase-tint, #DCE7F8);
    color: var(--showcase-accent, #1D4ED8);
}

.home-showcase .mobile-brand-card span { color: var(--showcase-accent, #1D4ED8); }

.home-showcase .mobile-brand-card:hover {
    border-color: var(--showcase-accent, #1D4ED8);
    background: var(--showcase-tint, #DCE7F8);
}

.home-showcase .post-card__badge { background: var(--showcase-accent, #1D4ED8); opacity: .94; }

.home-showcase .showcase-subtitle { display: flex; align-items: center; gap: 10px; }

/* Small colour bar tying each sub-heading to its section. */
.home-showcase .showcase-subtitle::before {
    content: '';
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: var(--showcase-accent, #1D4ED8);
}

/* ---------------------------------------------------------------------------
 * Product card call-to-action
 *
 * The card is already one big link, so this is a visual affordance rather than
 * a nested button — it inherits the section accent, which is why it is defined
 * against the theme variable instead of a fixed blue.
 * ------------------------------------------------------------------------ */
.mobile-card__cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--showcase-accent, var(--khabri-primary, #1D4ED8));
    color: #fff !important;
    font-size: 13.4px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    transition: filter .15s ease;
}

.mobile-card:hover .mobile-card__cta {
    filter: brightness(1.12);
}

/* ---------------------------------------------------------------------------
 * Brand rail
 *
 * One panel ("big card") holding a scrollable row of brand tiles ("small
 * cards"). Each tile carries its own brand colour through --brand-color, set
 * inline from App\Support\BrandColors, with --brand-ink picked for contrast so
 * a pale brand like realme's yellow still reads.
 * ------------------------------------------------------------------------ */
.brand-rail {
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 16px;
    padding: 20px 22px 22px;
    box-shadow: 0 2px 10px rgba(15, 23, 36, .05);
}

.brand-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.brand-rail__title {
    margin: 0 !important;
}

.brand-rail__nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.brand-rail__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E3E8EF;
    background: #fff;
    color: var(--showcase-accent, #1D4ED8);
    font-size: 19.6px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.brand-rail__arrow:hover:not(:disabled) {
    background: var(--showcase-tint, #DCE7F8);
    border-color: var(--showcase-accent, #1D4ED8);
}

.brand-rail__arrow:disabled {
    opacity: .3;
    cursor: default;
}

/* Nothing to scroll to — drop the arrows rather than leave two dead buttons. */
.brand-rail--static .brand-rail__nav {
    display: none;
}

.brand-rail__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.brand-rail__track::-webkit-scrollbar {
    display: none;
}

.brand-tile {
    flex: 0 0 auto;
    width: 152px;
    scroll-snap-align: start;
    text-decoration: none !important;
    text-align: center;
}

.brand-tile__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--brand-color, #1E6C9E);
    color: var(--brand-ink, #fff) !important;
    font-size: 18.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: lowercase;
    box-shadow: 0 3px 10px rgba(15, 30, 50, .14);
    transition: transform .15s ease, box-shadow .15s ease;
}

/*
 * The brand logos are single-colour SVGs on a transparent ground, so knocking
 * them through to flat white (or near-black on a pale tile) keeps them legible
 * on top of the brand colour instead of clashing with it.
 */
.brand-tile__mark img {
    max-height: 30px;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.brand-tile--dark-ink .brand-tile__mark img {
    filter: brightness(0);
}

.brand-tile:hover .brand-tile__mark {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 30, 50, .2);
}

@media (max-width: 575px) {
    .brand-rail {
        padding: 16px 14px 18px;
    }

    .brand-tile {
        width: 128px;
    }

    .brand-tile__mark {
        height: 56px;
        font-size: 16.8px;
    }
}

/* ---------------------------------------------------------------------------
 * Wide product cards (cars, bikes)
 *
 * Phones are portrait, so a square image tile suits them. Vehicles are shot
 * landscape, which left deep empty bands above and below inside that square.
 * ------------------------------------------------------------------------ */
.mobile-card--wide .mobile-card__image-wrap {
    aspect-ratio: 3 / 2;
    padding: 14px 16px;
    overflow: hidden;
}

/*
 * The inset on the watermark is padding on a 100%-sized image, so without
 * border-box it grows past the tile and stretches it — which left the cards
 * that have no photo standing taller than their neighbours in the same row.
 */
.mobile-card__image {
    box-sizing: border-box;
}

.mobile-card--wide .mobile-card__image--logo {
    padding: 14% 28%;
}

/* ---------------------------------------------------------------------------
 * Luxury treatment — cars only
 *
 * A car is the most expensive thing on the site, so its card gets a graphite
 * body with a gold rule instead of the plain white one the phones use. Slate
 * rather than near-black: the gold still reads against it, without turning a
 * whole row of cards into a black wall.
 *
 * The picture tile deliberately stays light — product shots here are mostly
 * photographed on white and would disappear on a dark ground.
 * ------------------------------------------------------------------------ */
:root {
    --kh-luxe-gold: #B08D1E;
    --kh-luxe-gold-light: #E0C46A;
    --kh-luxe-ink: #3C4653;
}

.mobile-card--luxe {
    border-color: #55616F !important;
    background: var(--kh-luxe-ink);
    box-shadow: 0 3px 12px rgba(30, 40, 52, .12);
}

.mobile-card--luxe .mobile-card__image-wrap {
    background: linear-gradient(160deg, #E9ECEF 0%, #F5F7F9 45%, #E6EAEE 100%);
    border-bottom: 2px solid var(--kh-luxe-gold-light);
}

.mobile-card--luxe .mobile-card__body {
    background: var(--kh-luxe-ink);
}

.mobile-card--luxe .mobile-card__name {
    color: #F6F3EC !important;
    font-weight: 700;
    letter-spacing: .01em;
}

.mobile-card--luxe .mobile-card__price {
    color: var(--kh-luxe-gold-light) !important;
    letter-spacing: .02em;
}

.mobile-card--luxe .mobile-card__cta {
    background: linear-gradient(135deg, var(--kh-luxe-gold) 0%, var(--kh-luxe-gold-light) 100%);
    color: #1A1206 !important;
}

.mobile-card--luxe:hover {
    border-color: var(--kh-luxe-gold-light) !important;
    box-shadow: 0 10px 24px rgba(30, 40, 52, .2);
}

/* The section accent must not repaint the price on a dark card. */
.home-showcase .mobile-card--luxe .mobile-card__price {
    color: var(--kh-luxe-gold-light) !important;
}

.home-showcase .mobile-card--luxe:hover {
    border-color: var(--kh-luxe-gold-light) !important;
}

/* ---------------------------------------------------------------------------
 * Autos showcase
 *
 * A warm champagne band rather than a dark one — the graphite cards and the
 * gold carry the premium feel on their own, and a full-width black stripe made
 * the homepage bottom-heavy next to the Mobiles and Recipes sections.
 * ------------------------------------------------------------------------ */
.home-showcase--autos {
    --showcase-accent: #96781F;
    --showcase-tint: rgba(176, 141, 30, .12);
    background: linear-gradient(165deg, #FBF8F1 0%, #F5F0E3 55%, #FCFAF5 100%);
}

.showcase-head--autos {
    background: linear-gradient(135deg, #3C4653 0%, #4E5C6D 55%, #66768A 100%) !important;
    border: 1px solid rgba(224, 196, 106, .4);
}

.showcase-head--autos .showcase-head__label {
    color: var(--kh-luxe-gold-light) !important;
}

.showcase-head--autos .showcase-head__cta {
    background: linear-gradient(135deg, var(--kh-luxe-gold) 0%, var(--kh-luxe-gold-light) 100%);
    color: #1A1206 !important;
}

/* The brand rail stays the white panel it is in every other section. */
.home-showcase--autos .brand-rail {
    border-color: #E6DFCC;
}

/*
 * Car listing hero, in the same graphite-and-gold as the cards. Scoped to the
 * autos views so the green bio banner stays put everywhere else.
 */
.category-bio--luxe {
    background: linear-gradient(135deg, #3C4653 0%, #4E5C6D 55%, #66768A 100%);
    border: 1px solid rgba(224, 196, 106, .4);
    border-left: 3px solid var(--kh-luxe-gold-light, #E0C46A);
}

.category-bio--luxe .category-bio__title {
    color: #F6F3EC;
}


/* ---------------------------------------------------------------------------
 * Section consistency
 *
 * The Autos band picked up a tinted ground, an accent rule under each picture
 * and a bordered header. Mobiles and Recipes looked bare next to it, so they
 * get the same three things in their own accent — enough to read as siblings,
 * not enough to turn the page into a colour chart.
 * ------------------------------------------------------------------------ */
.home-showcase--mobiles.bg_white,
.home-showcase--mobiles {
    background: linear-gradient(165deg, #F8FBFD 0%, #ECF4FA 55%, #F9FCFD 100%);
}

.home-showcase--recipes.bg_white,
.home-showcase--recipes {
    background: linear-gradient(165deg, #FEFAFB 0%, #FAEEF1 55%, #FEFBFC 100%);
}

/* The thin rule that ties a picture to its section's colour. */
.home-showcase--mobiles .mobile-card__image-wrap,
.home-showcase--recipes .post-card__media,
.home-showcase--mobiles .post-card__media {
    border-bottom: 2px solid var(--showcase-accent, #1D4ED8);
}

.showcase-head--mobiles {
    border: 1px solid rgba(255, 255, 255, .28);
}

.showcase-head--recipes {
    border: 1px solid rgba(255, 255, 255, .28);
}

.home-showcase--mobiles .brand-rail {
    border-color: #DCE7EF;
}

/* ---------------------------------------------------------------------------
 * Type scale
 *
 * Everything above was raised one step; these are the two places that were
 * called out by name. Tables share one size so a spec sheet and a rate sheet
 * read alike, and headings sit a step above the usual web default rather than
 * level with body copy.
 * ------------------------------------------------------------------------ */
.rate-table,
.spec-table,
.names-table {
    font-size: 16px;
}

.rate-table th,
.rate-table td,
.spec-table td,
.names-table th,
.names-table td {
    padding-top: 13px;
    padding-bottom: 13px;
}

.rate-table thead th,
.names-table thead th {
    font-size: 14px;
}

.spec-table td:first-child {
    font-size: 15px;
}

h1,
.category-bio__title,
.mobiles-hero__title {
    font-size: 31px;
    line-height: 1.35;
}

h2,
.name-detail__h2 {
    font-size: 24px;
    line-height: 1.4;
}

h3 {
    font-size: 20px;
}

.showcase-subtitle {
    font-size: 19px;
}

.showcase-head__title {
    font-size: 22px;
}

@media (max-width: 700px) {
    h1,
    .category-bio__title,
    .mobiles-hero__title {
        font-size: 25px;
    }

    h2,
    .name-detail__h2 {
        font-size: 21px;
    }
}

/*
 * Spec and name tables get the same treatment as the rate tables: a solid
 * brand-green head instead of a pale tint, and alternating rows so the eye
 * keeps its place across a wide row. Deliberately restrained — one colour,
 * no gradients, no tinted columns.
 */
.spec-group__title {
    background: #1D4ED8;
    color: #fff;
    border-bottom: 0;
    letter-spacing: .04em;
}

.spec-table tbody tr:nth-child(even) {
    background: #F8FAFD;
}

.spec-table tbody tr:hover {
    background: #EAF1FD;
}

.spec-table td:first-child {
    width: 170px;
    color: #4A5C56;
}

.names-table thead th {
    background: #1D4ED8;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 0;
}

.names-table tbody tr:nth-child(even) {
    background: #F8FAFD;
}

.names-table tbody tr:hover {
    background: #EAF1FD;
}

/* ---------------------------------------------------------------------------
 * Tools rail
 *
 * Reuses the brand-rail panel and arrows; only the tiles differ. Each tool
 * carries a colour from App\Support\ToolIcons, grouped by what the tool does,
 * so a row of 23 of them stays scannable instead of reading as one block.
 * ------------------------------------------------------------------------ */
.tool-rail__all {
    align-self: center;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--showcase-accent, #1D4ED8) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.tool-tile {
    flex: 0 0 auto;
    width: 138px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 16px;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    text-decoration: none !important;
    scroll-snap-align: start;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tool-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tool-color, #1D4ED8) 13%, #fff);
    color: var(--tool-color, #1D4ED8);
    line-height: 1;
}

.tool-tile__icon svg {
    width: 24px;
    height: 24px;
}

.tool-tile__name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--khabri-ink, #0F1724) !important;
}

.tool-tile:hover {
    transform: translateY(-3px);
    border-color: var(--tool-color, #1D4ED8);
    box-shadow: 0 8px 20px rgba(15, 23, 36, .1);
}

@media (max-width: 575px) {
    .tool-tile {
        width: 122px;
        padding: 14px 10px 12px;
    }

    .tool-tile__icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }
}

/* ---------------------------------------------------------------------------
 * Generic section band
 *
 * Mobiles, Autos and Recipes each got a hand-written colour. The remaining
 * strips (Pakistan, Technology, Islam, World, Health, Schemes, Tools) build
 * the same banner and tint from one --showcase-accent set inline, so adding a
 * category needs no new CSS.
 * ------------------------------------------------------------------------ */
.home-showcase--generic {
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--showcase-accent) 4%, #fff) 0%,
        color-mix(in srgb, var(--showcase-accent) 11%, #fff) 55%,
        color-mix(in srgb, var(--showcase-accent) 3%, #fff) 100%);
    --showcase-tint: color-mix(in srgb, var(--showcase-accent) 13%, #fff);
}

.showcase-head--generic {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--showcase-accent) 62%, #0A1512) 0%,
        var(--showcase-accent) 58%,
        color-mix(in srgb, var(--showcase-accent) 76%, #fff) 100%);
}

.showcase-head--generic .showcase-head__cta {
    color: var(--showcase-accent);
}

.home-showcase--generic .post-card__media {
    border-bottom: 2px solid var(--showcase-accent);
}

.home-showcase--generic .brand-rail {
    border-color: color-mix(in srgb, var(--showcase-accent) 22%, #E3E8EF);
}

/* No heading in the rail head when the section banner already carries one. */
.brand-rail__head--bare {
    justify-content: flex-end;
    margin-bottom: 12px;
}

/*
 * Picture-less article cards. Rather than a white void where the photo should
 * be, the panel takes a faint wash of the section colour so the card looks
 * deliberate — the badge still names the section on top of it.
 */
.post-card__media--empty {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--showcase-accent, #1D4ED8) 26%, #fff) 0%,
        color-mix(in srgb, var(--showcase-accent, #1D4ED8) 11%, #fff) 100%);
}

/* ---------------------------------------------------------------------------
 * World topic hubs (Profiles, Islamic, Historical, Places, Travel)
 * ------------------------------------------------------------------------ */
.topic-card__extract {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5B6B66;
}

.topic-credit {
    margin: 18px 0 0;
    font-size: 13px;
    color: #5F6E85;
}

.topic-credit a {
    color: var(--showcase-accent, #1D4ED8);
    font-weight: 600;
}

/* Portraits crop better from the top — a centred crop cuts off faces. */
.post-grid--topics .post-card__media img {
    object-position: center 22%;
}

/* A row whose first cell is a link behaves like one — see js/row-link.js. */
tr.is-row-link {
    cursor: pointer;
}

tr.is-row-link:hover {
    background: #EAF1FD;
}

/* ---------------------------------------------------------------------------
 * Article card
 *
 * News stories and World entries read better on white than on the page's own
 * off-white ground — a long block of text needs an edge. The top ad and the
 * breadcrumb stay outside it, so the card starts at the headline.
 * ------------------------------------------------------------------------ */
.article-card {
    display: block;
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 14px;
    padding: 30px 32px 34px;
    box-shadow: 0 2px 10px rgba(15, 23, 36, .05);
    margin-bottom: 22px;
}

.article-card .article-hero-image {
    border-radius: 10px;
}

@media (max-width: 575px) {
    .article-card {
        padding: 20px 18px 24px;
        border-radius: 12px;
    }
}

/* ---------------------------------------------------------------------------
 * Product photos fill their tile
 *
 * The artwork now carries its own margin — a phone shot is supplied already
 * sitting inside the white space it needs. So the tile adds none of its own:
 * no padding, no tinted ground, no rounded inset, no drop shadow. Anything the
 * stylesheet added here would sit on top of the spacing already in the file
 * and show as a double border.
 *
 * The brand-mark placeholder is the exception: that is drawn edge to edge, so
 * it still needs the tile to hold it in.
 * ------------------------------------------------------------------------ */
.mobile-card__image-wrap {
    padding: 0;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.mobile-card__image {
    object-fit: cover;
    border-radius: 0;
    filter: none;
}

.mobile-card--wide .mobile-card__image-wrap {
    padding: 0;
}

.mobile-card--luxe .mobile-card__image-wrap {
    background: #fff;
}

/* Placeholder keeps its inset — it has no built-in margin of its own. */
.mobile-card__image--logo {
    padding: 27%;
    background: linear-gradient(160deg, #DCE3EB 0%, #E9EEF3 45%, #DFE5EC 100%);
    object-fit: contain;
}

.mobile-card--wide .mobile-card__image--logo {
    padding: 14% 28%;
}


/* ---------------------------------------------------------------------------
 * Standing pages — about, contact, terms, privacy
 *
 * These are read top to bottom rather than skimmed, so they sit on the same
 * white card as an article and keep the same measure. The only additions are
 * the numbered headings, the contact form, and the sidebar that carries the
 * other three pages.
 * ------------------------------------------------------------------------ */
.static-page h1 {
    font-size: 30px;
    line-height: 1.35;
    margin: 0 0 10px;
    color: #0F1724;
}

.static-page__updated {
    font-size: 15px;
    color: #5F6E85;
    margin: 0 0 18px;
}

.static-page__lede {
    font-size: 20px;
    line-height: 1.75;
    color: #1E293B;
    padding: 4px 0 4px 18px;
    background: #fff;
    border-left: 4px solid #1D4ED8;
    margin: 0 0 28px;
}

.static-page h2 {
    font-size: 21.5px;
    font-weight: 600;
    color: #0F1724;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E6EBF2;
}

.static-page p {
    font-size: 18.5px;
    line-height: 1.85;
    color: #1E293B;
    margin: 0 0 16px;
}

.static-page ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.static-page li {
    font-size: 18.5px;
    line-height: 1.8;
    color: #1E293B;
    margin-bottom: 10px;
}

.static-page a {
    color: #1D4ED8;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.static-page a:hover {
    color: #F59E0B;
}

/* Why someone would write in — four short cards so the reader picks the right
   subject line before they start typing. */
.contact-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 0 0 30px;
}

.contact-reason {
    background: #FAFCFF;
    border: 1px solid #E6EBF2;
    border-radius: 10px;
    padding: 14px 16px;
}

.contact-reason strong {
    display: block;
    font-size: 16px;
    color: #1D4ED8;
    margin-bottom: 4px;
}

.contact-reason span {
    display: block;
    font-size: 15.5px;
    line-height: 1.6;
    color: #55625E;
}

.static-form {
    margin: 0 0 12px;
}

.static-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

.static-form__group {
    margin-bottom: 16px;
}

.static-form__group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #0F1724;
    margin-bottom: 6px;
}

.static-form__group label span {
    color: #C92A2F;
}

.static-form__group input,
.static-form__group textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 17px;
    color: #1E293B;
    background: #fff;
    border: 1px solid #D8E3DF;
    border-radius: 9px;
    outline: none;
}

.static-form__group input:focus,
.static-form__group textarea:focus {
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.static-form__group textarea {
    resize: vertical;
    line-height: 1.7;
}

/* Off-screen rather than display:none — a bot reading the markup still finds
   it, a reader using a screen reader is told to skip it by aria-hidden. */
.static-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.static-form__submit {
    display: inline-block;
    padding: 13px 32px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: #1D4ED8;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease;
}

.static-form__submit:hover {
    background: #0F1724;
}

.static-form__small {
    font-size: 15px !important;
    color: #5F6E85 !important;
    margin: 12px 0 0 !important;
}

.static-form__note {
    padding: 14px 18px;
    border-radius: 10px;
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.6;
}

.static-form__note--ok {
    background: #E6EFFC;
    border: 1px solid #A9DCCC;
    color: #1E3A8A;
}

.static-form__note--error {
    background: #FBE4E7;
    border: 1px solid #F3B6BD;
    color: #B02A33;
}

.static-form__note ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.static-form__note li {
    font-size: 16px;
    margin-bottom: 4px;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.contact-detail {
    background: #F5F8FC;
    border-radius: 10px;
    padding: 14px 16px;
}

.contact-detail strong {
    display: block;
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5F6E85;
    margin-bottom: 4px;
}

.contact-detail a,
.contact-detail span {
    font-size: 17px;
    color: #0F1724;
    word-break: break-word;
}

/* Sidebar shared by all four pages. */
.static-aside {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 22px;
}

.static-aside__title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5F6E85;
    margin-bottom: 10px;
}

.static-aside__links a {
    display: block;
    padding: 9px 0;
    font-size: 17px;
    color: #0F1724;
    border-bottom: 1px solid #F0F4FA;
}

.static-aside__links a:last-child {
    border-bottom: 0;
}

.static-aside__links a:hover,
.static-aside__links a.is-active {
    color: #1D4ED8;
    font-weight: 600;
}

.static-aside__contact p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px !important;
}

.static-aside__contact strong {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5F6E85;
}

.static-aside__contact a {
    color: #1D4ED8;
    word-break: break-word;
}

.static-aside__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.static-aside__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F5F8FC;
    color: #1D4ED8;
    transition: background .15s ease, color .15s ease;
}

.static-aside__social a:hover {
    background: #1D4ED8;
    color: #fff;
}

@media (max-width: 575px) {
    .static-page h1 {
        font-size: 25px;
    }

    .static-page__lede {
        font-size: 18px;
        padding: 14px 15px;
    }

    .static-page h2 {
        font-size: 19.5px;
    }
}

/* ---------------------------------------------------------------------------
 * Product card names on a phone
 *
 * The catalogue grid is two columns from 576px down, which leaves a card about
 * 180px wide. At the desktop size the name was one clipped line — "Honda Civic
 * 20…", "Toyota Corolla…" — so the model year, the one thing that says which
 * car this is, was the first thing to go. It now wraps to two lines at a size
 * that fits, and the box is held at two lines so cards in a row still line up.
 * ------------------------------------------------------------------------ */
@media (max-width: 575px) {
    .mobile-card__body {
        padding: 12px 10px 16px;
    }

    .mobile-card__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        font-size: 14px;
        line-height: 1.35;
        min-height: 2.7em;
    }

    .mobile-card__brand-pill {
        font-size: 11px;
    }

    .mobile-card__specs {
        font-size: 11.5px;
    }

    .mobile-card__price {
        font-size: 13.8px;
    }
}

/* ---------------------------------------------------------------------------
 * Section labels on a phone
 *
 * At 480px and below the article grid is two columns, so a picture tile is
 * only about 175px across and 110px tall. A badge reading "Government Schemes"
 * was nearly the full width of it, and "Social Welfare Schemes" wrapped onto a
 * second line — between them they covered most of the picture. The badge is
 * now one short line that cannot outgrow its tile.
 *
 * On a card with no photo of its own the badge goes entirely: the section
 * cover standing in for the photo already carries the section name in large
 * type, so the badge was only repeating it, on top of it.
 * ------------------------------------------------------------------------ */
.post-card__media--empty .post-card__badge {
    display: none;
}

@media (max-width: 480px) {
    .post-card__badge {
        left: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        padding: 3px 9px;
        font-size: 10.8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------------------------------------------------------------------------
 * No phantom bar below the footer
 *
 * The base stylesheet this theme sits on reserves a fixed 100px strip at the
 * bottom of every phone screen for #CatFish — the sticky bottom ad bar that
 * template shipped with — by giving the footer a 100px bottom margin and
 * lifting the back-to-top button clear of it.
 *
 * This site has no such element, so the bar never renders, but the space held
 * for it still does: a block of empty white under the footer on every page.
 * ------------------------------------------------------------------------ */
@media (max-width: 991px) {
    .footer {
        margin-bottom: 0;
    }

    #back-to-top {
        bottom: 20px !important;
    }
}

/* A group whose numbers do not come from the official survey says so under
   its own heading, in the same voice as the note at the top of the page. */
.rate-source-note--inline {
    margin-top: 0;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * Rate page prose and questions
 *
 * A rate page used to be a table and nothing else, which told a reader the
 * number but never what it meant. The opening paragraphs and the questions
 * below the table are both written from the figures on the page itself.
 * ------------------------------------------------------------------------ */
/* Sits between the table's own footnote and the questions, on white like
   every other block of reading on the site — the page's own grey ground is
   for the gaps between cards, not for text. */
.rate-intro {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 12px;
    padding: 20px 24px 8px;
    margin: 22px 0 10px;
}

.rate-intro p {
    font-size: 18px;
    line-height: 1.85;
    color: #1E293B;
    margin: 0 0 12px;
}

.rate-faq {
    margin: 30px 0 10px;
}

.rate-faq__title {
    font-size: 22px;
    font-weight: 600;
    color: #0F1724;
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 2px solid #1D4ED8;
}

.rate-faq__item {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.rate-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    font-size: 17.5px;
    font-weight: 600;
    color: #0F1724;
    cursor: pointer;
    list-style: none;
}

/* The default disclosure triangle sits oddly against a full-width row. */
.rate-faq__q::-webkit-details-marker {
    display: none;
}

.rate-faq__q::after {
    content: '+';
    flex-shrink: 0;
    font-size: 21px;
    font-weight: 400;
    color: #1D4ED8;
    line-height: 1;
}

.rate-faq__item[open] .rate-faq__q::after {
    content: '\2212';
}

.rate-faq__item[open] .rate-faq__q {
    background: #F5F8FC;
}

.rate-faq__a {
    padding: 14px 18px 16px;
    font-size: 17px;
    line-height: 1.8;
    color: #3A4844;
    border-top: 1px solid #EEF3F1;
}

@media (max-width: 575px) {
    .rate-intro p {
        font-size: 16.8px;
        line-height: 1.75;
    }

    .rate-faq__title {
        font-size: 19.5px;
    }

    .rate-faq__q {
        font-size: 16px;
        padding: 12px 14px;
    }

    .rate-faq__a {
        font-size: 16px;
        padding: 12px 14px 14px;
    }
}

/* ---------------------------------------------------------------------------
 * Spec icons
 *
 * A page of forty rows reading "Type / Size / Resolution" is hard to scan;
 * a mark beside each one lets the eye find the row it wants without reading
 * every label. Muted by default so the values still lead, and picked up in
 * the section colour on the group headings.
 * ------------------------------------------------------------------------ */
.spec-icon {
    flex-shrink: 0;
    vertical-align: -2px;
    color: #9AA8A3;
}

.spec-group__title .spec-icon {
    color: currentColor;
    opacity: .85;
    margin-right: 7px;
    vertical-align: -3px;
}

.spec-table td:first-child {
    white-space: normal;
}

.spec-table td:first-child .spec-icon {
    margin-right: 8px;
}

.spec-table tr:hover .spec-icon {
    color: #1D4ED8;
}

@media (max-width: 575px) {
    .spec-table td:first-child .spec-icon {
        margin-right: 6px;
    }
}

/* ---------------------------------------------------------------------------
 * Tarka calculator
 *
 * Dividing an estate is a religious duty, not a form to be filled in, so the
 * page opens on the ayah it comes from and carries a green and gold that
 * belongs to the Islam section rather than the site's ordinary grey.
 * ------------------------------------------------------------------------ */
.tarka {
    --tarka-green: #0B5C46;
    --tarka-deep: #063A2C;
    --tarka-gold: #B08833;
    --tarka-gold-soft: #E8D9B5;
    --tarka-ground: #FBF9F4;
}

.tarka-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, var(--tarka-deep) 0%, var(--tarka-green) 55%, #0A6E53 100%);
    border-radius: 18px;
    padding: 34px 36px 32px;
    margin-bottom: 22px;
    color: #fff;
    text-align: center;
}

/* A faint eight-point motif, the geometry of a mosque screen. */
.tarka-hero::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -70px;
    width: 260px;
    height: 260px;
    border: 2px solid rgba(232, 217, 181, .16);
    border-radius: 42px;
    transform: rotate(45deg);
    pointer-events: none;
}

.tarka-hero__ayah {
    font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
    font-size: 27px;
    line-height: 2;
    color: var(--tarka-gold-soft);
    margin: 0 0 4px;
    direction: rtl;
}

.tarka-hero__ayah-ref {
    font-size: 13.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin: 0 0 18px;
}

.tarka-hero__title {
    font-size: 33px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.tarka-hero__urdu {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-size: 19px;
    line-height: 2.1;
    color: var(--tarka-gold-soft);
    margin: 0 0 14px;
    direction: rtl;
}

.tarka-hero__lede {
    max-width: 660px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}

.tarka-definition,
.tarka-panel,
.tarka-disclaimer {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
}

.tarka-definition h2,
.tarka-disclaimer h2 {
    font-size: 21px;
    font-weight: 600;
    color: var(--tarka-deep);
    margin: 0 0 12px;
}

.tarka-definition p {
    font-size: 17.5px;
    line-height: 1.85;
    color: #1E293B;
    margin: 0 0 12px;
}

.tarka-definition__order {
    font-weight: 600;
    color: var(--tarka-deep) !important;
}

.tarka-order {
    counter-reset: tarka;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tarka-order li {
    counter-increment: tarka;
    position: relative;
    padding: 10px 0 10px 46px;
    font-size: 17px;
    line-height: 1.75;
    color: #1E293B;
    border-bottom: 1px solid #F0F4FA;
}

.tarka-order li:last-child {
    border-bottom: 0;
}

.tarka-order li::before {
    content: counter(tarka);
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tarka-green);
    color: var(--tarka-gold-soft);
    font-size: 15px;
    font-weight: 700;
}

.tarka-panel__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--tarka-deep);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tarka-gold-soft);
}

.tarka-panel__hint {
    font-size: 15px;
    color: #5F6E85;
    margin: 10px 0 18px;
}

.tarka-estate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.tarka-estate label {
    display: block;
}

.tarka-estate span {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tarka-deep);
    margin-bottom: 6px;
}

.tarka-estate input {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 17px;
    color: #1E293B;
    background: var(--tarka-ground);
    border: 1px solid #DFE7E3;
    border-radius: 9px;
    outline: none;
}

.tarka-estate input:focus,
.tarka-stepper input:focus {
    border-color: var(--tarka-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 92, 70, .1);
}

.tarka-estate small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #5F6E85;
}

.tarka-group {
    padding: 16px 0;
    border-bottom: 1px solid #F0F4FA;
}

.tarka-group:last-of-type {
    border-bottom: 0;
}

.tarka-group__label {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tarka-gold);
    margin-bottom: 12px;
}

.tarka-group__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.tarka-heir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: var(--tarka-ground);
    border: 1px solid #ECE6D8;
    border-radius: 10px;
}

.tarka-heir__name {
    font-size: 16px;
    font-weight: 600;
    color: #16202E;
    line-height: 1.35;
}

.tarka-heir__urdu {
    display: block;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-size: 15px;
    line-height: 1.9;
    color: #7C8A85;
    direction: rtl;
}

.tarka-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tarka-green);
    cursor: pointer;
}

.tarka-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #0B5C46;
    cursor: pointer;
}

.tarka-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #DFE7E3;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.tarka-stepper button {
    width: 34px;
    height: 36px;
    border: 0;
    background: #fff;
    color: var(--tarka-green);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.tarka-stepper button:hover {
    background: #EAF1FD;
}

.tarka-stepper input {
    width: 46px;
    height: 36px;
    border: 0;
    border-left: 1px solid #EEF3FA;
    border-right: 1px solid #EEF3FA;
    text-align: center;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 600;
    color: #16202E;
    outline: none;
    -moz-appearance: textfield;
}

.tarka-stepper input::-webkit-outer-spin-button,
.tarka-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tarka-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #F0F4FA;
}

.tarka-submit {
    padding: 14px 34px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--tarka-green), #0A6E53);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tarka-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(11, 92, 70, .25);
}

.tarka-reset {
    font-size: 15.5px;
    color: #5F6E85 !important;
}

.tarka-empty {
    background: #FFF7E6;
    border: 1px solid #F0DFB8;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 16.5px;
    color: #8A6100;
}

/* ---------- The answer ---------- */
.tarka-result {
    border-color: var(--tarka-gold-soft);
    box-shadow: 0 4px 18px rgba(11, 92, 70, .07);
}

.tarka-ledger {
    background: var(--tarka-ground);
    border-radius: 11px;
    padding: 16px 20px;
    margin: 18px 0 22px;
}

.tarka-ledger div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 16.5px;
    color: #4A5854;
}

.tarka-ledger__total {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 1px solid #E4DCC8;
    font-weight: 700;
    color: var(--tarka-deep) !important;
    font-size: 18px !important;
}

.tarka-flag {
    background: #FFF7E6;
    border-left: 4px solid var(--tarka-gold);
    border-radius: 0 9px 9px 0;
    padding: 13px 16px;
    font-size: 16px;
    line-height: 1.75;
    color: #7A5A12;
    margin: 0 0 22px;
}

.tarka-shares {
    display: grid;
    gap: 14px;
}

.tarka-share {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        'who figure amount'
        'bar bar bar'
        'reason reason reason';
    align-items: center;
    gap: 6px 18px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #E6EBF2;
    border-left: 4px solid var(--tarka-green);
    border-radius: 11px;
}

.tarka-share__who { grid-area: who; }
.tarka-share__figure { grid-area: figure; text-align: right; }
.tarka-share__amount { grid-area: amount; text-align: right; }
.tarka-share__bar { grid-area: bar; }
.tarka-share__reason { grid-area: reason; }

.tarka-share__who strong {
    font-size: 18px;
    color: #14211D;
}

.tarka-share__count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #EAF1FD;
    font-size: 13px;
    font-weight: 600;
    color: var(--tarka-green);
}

.tarka-share__urdu {
    display: block;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-size: 15px;
    line-height: 2;
    color: #7C8A85;
    direction: rtl;
}

.tarka-share__fraction {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--tarka-green);
    line-height: 1.2;
}

.tarka-share__fraction i {
    font-style: normal;
    margin: 0 1px;
    color: var(--tarka-gold);
}

.tarka-share__percent {
    font-size: 14px;
    color: #5F6E85;
}

.tarka-share__amount {
    font-size: 21px;
    font-weight: 700;
    color: var(--tarka-deep);
    white-space: nowrap;
}

.tarka-share__amount small {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: #5F6E85;
}

.tarka-share__bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: #EEF3FA;
    overflow: hidden;
}

.tarka-share__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tarka-green), var(--tarka-gold));
}

.tarka-share__reason {
    margin: 8px 0 0 !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #5B6B66 !important;
}

.tarka-subhead {
    font-size: 18px;
    font-weight: 600;
    color: var(--tarka-deep);
    margin: 26px 0 12px;
}

.tarka-blocked__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 16px;
    margin-bottom: 8px;
    background: #FAF6F6;
    border-left: 3px solid #C98B8B;
    border-radius: 0 9px 9px 0;
    font-size: 16px;
    color: #6B5A5A;
}

.tarka-blocked__row strong {
    flex-shrink: 0;
    color: #8A4A4A;
}

.tarka-notes {
    margin: 0;
    padding-left: 20px;
}

.tarka-notes li {
    font-size: 16.5px;
    line-height: 1.8;
    color: #4A5854;
    margin-bottom: 10px;
}

/* ---------- Disclaimer ---------- */
.tarka-disclaimer {
    background: #FFFBF2;
    border-color: #EFE2C4;
}

.tarka-disclaimer h2 {
    color: #7A5A12;
}

.tarka-disclaimer ul {
    margin: 0;
    padding-left: 20px;
}

.tarka-disclaimer li {
    font-size: 16.5px;
    line-height: 1.8;
    color: #5A4A28;
    margin-bottom: 11px;
}

@media (max-width: 575px) {
    .tarka-hero {
        padding: 24px 20px 22px;
    }

    .tarka-hero__ayah { font-size: 21px; }
    .tarka-hero__title { font-size: 26px; }
    .tarka-hero__lede { font-size: 16px; }

    .tarka-definition,
    .tarka-panel,
    .tarka-disclaimer {
        padding: 18px 16px;
    }

    .tarka-share {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            'who figure'
            'amount amount'
            'bar bar'
            'reason reason';
    }

    .tarka-share__amount {
        text-align: left;
        font-size: 19px;
    }

    .tarka-share__fraction { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
 * Poetry
 *
 * A naat or a ghazal set as justified prose reads as though the line breaks
 * were an accident. Urdu verse is centred, one line to a line, in Nastaliq —
 * a script that needs room above and below each line to sit properly, which
 * is why the leading here is so much looser than the article default.
 * ------------------------------------------------------------------------ */
.article-body--poetry {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', var(--urdu-font), serif;
    font-size: 24px;
    line-height: 2.5;
    text-align: center;
    direction: rtl;
    color: #16202E;
}

/* Each paragraph is a couplet or a stanza: tight inside, clear between. */
.article-body--poetry p {
    margin: 0 0 26px;
    text-align: center;
}

.article-body--poetry br + br {
    display: none;
}

/* A poet's name, a maqta, or an attribution line at the end. */
.article-body--poetry em,
.article-body--poetry i {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 15px;
    letter-spacing: .02em;
    color: #8B7A6B;
    direction: ltr;
}

.article-body--poetry h2,
.article-body--poetry h3 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-size: 27px;
    line-height: 2.2;
    text-align: center;
    color: #6B3A6E;
    margin: 34px 0 18px;
}

/* A hairline rule between sections, in the manner of a printed diwan. */
.article-body--poetry hr {
    width: 90px;
    height: 1px;
    margin: 30px auto;
    border: 0;
    background: linear-gradient(90deg, transparent, #C9A9CB, transparent);
}

.article-body--poetry blockquote {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    background: none;
}

@media (max-width: 575px) {
    .article-body--poetry {
        font-size: 21px;
        line-height: 2.35;
    }

    .article-body--poetry p {
        margin-bottom: 22px;
    }

    .article-body--poetry h2,
    .article-body--poetry h3 {
        font-size: 23px;
    }
}

/* ---------------------------------------------------------------------------
 * Product photo at the top of a detail page
 *
 * A news cover is landscape and is meant to be cropped: .article-hero-image
 * fills a 320px band with object-fit: cover, and losing the edges of a
 * photograph costs nothing.
 *
 * A product shot is the opposite. It is square or near-square, the subject
 * sits in the middle with margin around it, and the margin is the point — it
 * is what stops the phone touching the frame. Cropping that to a 320px band
 * throws away the top and bottom of the phone and magnifies what is left, so
 * an 800x800 photo arrived on the page as a vertical stripe of screen. The
 * whole object has to be visible or the picture says nothing, which is why
 * these contain rather than cover.
 *
 * The frame is a fixed height so a square photo and a wide one sit at the same
 * place down the page; the artwork carries its own margin, so the frame adds
 * no padding of its own.
 * ------------------------------------------------------------------------ */
.product-hero-image {
    display: block;
    width: 100%;
    height: 380px;
    margin-bottom: 20px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border: 1px solid #DCE7F8;
    border-radius: 14px;
}

@media (max-width: 575px) {
    .product-hero-image {
        height: 280px;
        border-radius: 12px;
        margin-bottom: 16px;
    }
}

/* ---------------------------------------------------------------------------
 * Palette and type
 *
 * One accent, and it is blue. The site previously ran four unrelated accents
 * at once — a green header, a blue Mobiles band, an orange rule over Business,
 * a red Pakistan chip — which is the main reason it read as a template rather
 * than a design. Everything that means "this is a link, this is the action,
 * this is us" now comes from --kh-accent.
 *
 * Two families keep their own colours on purpose:
 *   - the gold of the Quran and Islam pages, and the plum of Poetry. Those are
 *     section identities and are meant to sit apart.
 *   - green for a rate that rose and red for one that fell. Those carry
 *     meaning; a reader should never have to work out whether a green number
 *     is up or just branded.
 *
 * The chrome is deliberately neutral. A saturated full-width brand bar is what
 * dates a portal fastest, and a dark slate header reads the same in Lahore as
 * it does in Lagos — colour is kept for the things a reader can act on.
 * ------------------------------------------------------------------------ */
:root {
    /* Accent */
    --kh-accent: #1D4ED8;
    --kh-accent-hover: #1E40AF;
    --kh-accent-soft: #EAF1FD;
    --kh-accent-line: #DCE7F8;

    /* Ink */
    --kh-ink: #0F1724;
    --kh-ink-soft: #1E293B;
    --kh-muted: #5F6E85;
    --kh-muted-soft: #5F6E85;

    /* Ground */
    --kh-page: #F5F8FC;
    --kh-card: #FFFFFF;
    --kh-line: #E3E8EF;

    /* Chrome — the header and the footer */
    --kh-chrome: #2B3B5C;
    --kh-chrome-2: #33456B;

    /* Meaning, not brand */
    --kh-up: #127A56;
    --kh-down: #C92A2F;
    --kh-warn: #F59E0B;

    /* Type */
    --kh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kh-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* Kept so older rules that still name them keep working. */
    --khabri-accent: #F59E0B;
    --khabri-ink: #0F1724;
    --khabri-primary: #1D4ED8;
}

/* ---------------------------------------------------------------------------
 * The header
 *
 * Was two stacked bands of brand colour, the larger of them a green gradient.
 * Now a single dark slate, with the blue kept for the item you are actually on
 * — so the eye is drawn to your place in the site rather than to the furniture.
 * ------------------------------------------------------------------------ */
.header_menu {
    background: var(--kh-chrome-2);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.topbar,
.sm_topbar {
    background: var(--kh-chrome);
}

.nav__menu > li > a {
    border-radius: 8px;
    transition: background .16s ease, color .16s ease;
}

.nav__menu > li:hover > a {
    background: rgba(255, 255, 255, .08);
}

.nav__menu > li > a.is-active {
    background: var(--kh-accent);
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * Type
 *
 * Inter for reading — it was drawn for screens and carries the Latin, Turkish,
 * Vietnamese and Cyrillic a site read outside one country needs. Plus Jakarta
 * Sans for headlines, tightened, so a headline looks set rather than merely
 * bolded. Urdu and Arabic keep their own faces, which are declared elsewhere
 * and must not be overridden here.
 * ------------------------------------------------------------------------ */
body {
    font-family: var(--kh-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.section_title .title,
.showcase-header__title,
.lg_news_card .title,
.sm_news_card .content .title {
    font-family: var(--kh-font-display);
    letter-spacing: -.017em;
    color: var(--kh-ink);
}

h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* Urdu and Arabic are set in their own scripts; the display face has no
   business there, and letter-spacing actively breaks joined forms. */
.urdu, .urdu *,
.arabic-text, .arabic-text *,
.article-body--poetry, .article-body--poetry *,
[dir="rtl"] {
    letter-spacing: normal;
}

.urdu, .urdu_section_title.urdu .title {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaliq', 'Noto Nastaliq Urdu', serif;
}

/* ---------------------------------------------------------------------------
 * Page headings
 *
 * The class is called urdu_section_title, but every heading using it is in
 * English — Latest Recipes, Countries of the World, Free Online Tools. The
 * base stylesheet set it in Nastaliq and turned it right to left, so on a
 * machine with no Urdu font each one fell back to the browser's default serif
 * and sat against the right margin, looking like a heading from another site.
 *
 * Add .urdu to the same element for a heading that really is Urdu.
 * ------------------------------------------------------------------------ */
.urdu_section_title .title {
    font-family: var(--kh-font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    direction: ltr;
    text-align: left;
    color: var(--kh-ink);
    justify-content: flex-start;
}

/* The accent rule sat on the right because the heading did. */
.urdu_section_title .title::after {
    right: auto;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--kh-accent);
}

.urdu_section_title.urdu .title {
    direction: rtl;
    text-align: right;
    justify-content: flex-end;
}

.urdu_section_title.urdu .title::after {
    right: 0;
    left: auto;
}

@media (max-width: 575px) {
    .urdu_section_title .title {
        font-size: 24px;
    }
}

/* ---------------------------------------------------------------------------
 * The footer
 *
 * The old rule faded from the ink colour into the brand colour, so the bottom
 * of every page ended in a full-strength wash of it. That was loud when the
 * brand was green and louder in blue. The footer is furniture: it stays in the
 * same dark slate as the header, with the accent kept for the links inside it.
 * ------------------------------------------------------------------------ */
.footer {
    background: linear-gradient(180deg, var(--kh-chrome) 0%, var(--kh-chrome-2) 100%);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.fw_title {
    color: #fff;
    font-family: var(--kh-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

.footer a:hover {
    color: #A9C4FC;
}

/* ---------------------------------------------------------------------------
 * Gradients
 *
 * Flat fills are honest but inert; a gradient gives a surface a light source,
 * and that is most of what separates a button that looks pressable from a
 * coloured rectangle. They are used here on the things a reader acts on and on
 * the site's own furniture, and nowhere else — a gradient behind body text or
 * inside a content card is what made mid-2010s templates look busy.
 *
 * Direction is chosen for the shape, not by habit. Anything that repeats
 * across a row — a table header, a set of chips — runs top to bottom so the
 * cells tile without a visible seam. Single blocks run on the diagonal, which
 * is what reads as lit.
 * ------------------------------------------------------------------------ */
:root {
    /* Action */
    --kh-grad: linear-gradient(135deg, #3566EE 0%, #1D4ED8 52%, #1A3FAE 100%);
    --kh-grad-hover: linear-gradient(135deg, #2C5CE8 0%, #1A45C4 52%, #15329A 100%);

    /* The same blue, stacked, for cells that sit side by side */
    --kh-grad-row: linear-gradient(180deg, #2A5CE6 0%, #1D4ED8 100%);

    /* Quiet tinted panels */
    --kh-grad-soft: linear-gradient(135deg, #F3F7FE 0%, #E4EDFC 100%);

    /* Furniture. The centre lifts a little so a full-width bar does not read
       as one dead slab across a wide screen. */
    --kh-grad-chrome: linear-gradient(90deg, #2B3B5C 0%, #35486E 50%, #2B3B5C 100%);
    --kh-grad-chrome-2: linear-gradient(90deg, #33456B 0%, #3E547F 50%, #33456B 100%);
}

/* --- Furniture ---------------------------------------------------------- */
.topbar,
.sm_topbar {
    background: var(--kh-grad-chrome);
}

.header_menu {
    background: var(--kh-grad-chrome-2);
}

.footer {
    background: linear-gradient(180deg, #35486E 0%, #2E3F62 55%, #293754 100%);
}

/* --- Things you press --------------------------------------------------- */
.names-search-box button,
.auto-search-widget button,
.zakat-btn,
.static-form__submit,
.discover-card__btn,
.official-link-cta:hover {
    background: var(--kh-grad);
    border-color: transparent;
}

.names-search-box button:hover,
.auto-search-widget button:hover,
.zakat-btn:hover,
.static-form__submit:hover,
.discover-card__btn:hover {
    background: var(--kh-grad-hover);
}

#back-to-top {
    background: var(--kh-grad) !important;
}

/* --- The one you are on ------------------------------------------------- */
.nav__menu > li > a.is-active,
.pagination .page-item.active .page-link,
.az-filter__item.is-active,
.mobile-filters__chips a.is-active,
.mobile-brand-filter a.is-active,
.region-filter-pills a.is-active,
.year-switcher a.is-active {
    background: var(--kh-grad);
    border-color: transparent;
}

/* --- Cells that tile ---------------------------------------------------- */
.rate-table thead th,
.names-table thead th,
.spec-group__title {
    background: var(--kh-grad-row);
}

/* --- Small round things ------------------------------------------------- */
.name-badge .spec-icon,
.static-aside__social a {
    background: var(--kh-grad-soft);
}

.name-badge:hover .spec-icon,
.static-aside__social a:hover {
    background: var(--kh-grad);
}

/* The section bands mixed their dark end with a near-black green, left over
   from the old palette; it dulled every band on the homepage. */
.showcase-head--generic {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--showcase-accent) 62%, #070C16) 0%,
        var(--showcase-accent) 58%,
        color-mix(in srgb, var(--showcase-accent) 76%, #fff) 100%);
}

/* ---------------------------------------------------------------------------
 * Links, and how long a reader stays
 *
 * No colour makes anyone stay longer — that claim has no evidence behind it.
 * What is measurable is whether a reader can find the link, read the line, and
 * see somewhere to go next. All three were weak here.
 *
 * The arithmetic is worth writing down, because it decides the approach. For a
 * link to be findable by colour alone it needs about 3:1 luminance separation
 * from the text around it (Nielsen Norman Group), while sitting on white it
 * needs 4.5:1 to be readable at all. Against body text at #1E293B, no blue
 * satisfies both: every candidate dark enough to read on white lands between
 * 2.2 and 2.8 against the body text, and every one light enough to separate
 * falls under 4.5 on the page. The two constraints do not overlap.
 *
 * Which is why the underline is not decoration here. It is what carries the
 * link when colour cannot, and it is the one thing that also works for the
 * roughly one man in twelve with a colour vision deficiency.
 * ------------------------------------------------------------------------ */
:root {
    /* Slightly brighter than the UI blue: this one sits inside running text,
       where it has to separate from the words around it, not sit under white
       text on a button. */
    --kh-link: #2563EB;
    --kh-link-hover: #1A3FAE;
    --kh-link-visited: #6D45B8;
}

/* --- Links inside running text ------------------------------------------ */
.article-body a,
.static-page__body a,
.rate-intro a,
.tarka-note a {
    color: var(--kh-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(37, 99, 235, .45);
    transition: text-decoration-color .15s ease, color .15s ease;
}

/* The underline filling in is the whole feedback: it says the target is live
   without moving anything, so a line of text does not reflow under the cursor. */
.article-body a:hover,
.static-page__body a:hover,
.rate-intro a:hover,
.tarka-note a:hover {
    color: var(--kh-link-hover);
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* A visited link the reader cannot recognise costs them the same page twice.
   Applied only in running text — a nav item does not want a memory. */
.article-body a:visited,
.static-page__body a:visited {
    color: var(--kh-link-visited);
    text-decoration-color: rgba(109, 69, 184, .45);
}

/* --- Reading measure ---------------------------------------------------- */
/*
 * A line much longer than about seventy-five characters makes the eye lose its
 * place on the return sweep, and the reader leaves without knowing why. The
 * article body had no limit at all, so on a wide screen it ran the full column.
 * 68ch lands near sixty-six characters in Inter.
 *
 * Urdu and poetry are exempt: Nastaliq sets at a different width per character
 * and verse is broken by the poet, not by the measure.
 */
.article-body {
    max-width: 68ch;
}

.article-body.urdu,
.article-body--poetry,
.article-body table,
.article-body img,
.article-body iframe {
    max-width: 100%;
}

/* --- Somewhere to go next ----------------------------------------------- */
/*
 * Hit target. Anything smaller than about 44px square is measurably harder to
 * hit with a thumb, and a missed tap is a reader deciding the site is fiddly.
 */
@media (max-width: 767px) {
    .nav__menu > li > a,
    .sub-nav a,
    .az-filter__item,
    .pagination .page-link,
    .footer a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* --- Keyboard and screen-reader users ----------------------------------- */
/*
 * There was no visible focus anywhere on the site, so anyone navigating by
 * keyboard had no way of telling where they were. :focus-visible keeps it off
 * the mouse.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Quiet text --------------------------------------------------------- */
/*
 * The two greys here used to be #64748B and #94A3B8. Both sat under the
 * contrast floor on the page background, and the lighter one badly. They are
 * now one colour, because grey text light enough to read as "secondary"
 * cannot pass — so the hierarchy comes from size and weight instead, which
 * costs nothing and works for everyone.
 */
.meta,
.article-meta,
.static-page__updated {
    font-size: .88em;
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * The official source, at the foot of a story
 *
 * This used to be a thin outlined link sitting between the byline and the
 * picture — above the fold, asking the reader to leave before they had read
 * anything. It now closes the article, which is where someone who has finished
 * goes looking for the source.
 *
 * The host name is printed under the button on purpose. "Click Here" says
 * nothing about the destination, so a reader cannot tell whether they are
 * about to be sent somewhere official or somewhere else — and a screen reader
 * moving through a page by its links announces only "Click Here". Naming the
 * domain fixes the trust question and the accessibility one at the same time,
 * and the aria-label carries the full sentence.
 * ------------------------------------------------------------------------ */
.official-source {
    margin: 30px 0 8px;
    padding: 24px;
    text-align: center;
    background: var(--kh-grad-soft, linear-gradient(135deg, #F3F7FE 0%, #E4EDFC 100%));
    border: 1px solid var(--kh-accent-line, #DCE7F8);
    border-radius: 14px;
}

.official-source__lede {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--kh-ink, #0F1724);
}

.official-source__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 34px;
    background: var(--kh-grad, linear-gradient(135deg, #3566EE 0%, #1D4ED8 52%, #1A3FAE 100%));
    color: #fff !important;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(29, 78, 216, .28);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.official-source__btn svg {
    transition: transform .16s ease;
}

.official-source__btn:hover {
    background: var(--kh-grad-hover, linear-gradient(135deg, #2C5CE8 0%, #1A45C4 52%, #15329A 100%));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(29, 78, 216, .34);
}

/* The arrow moves, not the label — so the word stays where the eye left it. */
.official-source__btn:hover svg {
    transform: translateX(3px);
}

.official-source__btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(29, 78, 216, .3);
}

.official-source__host {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--kh-muted, #5F6E85);
    word-break: break-all;
}

@media (max-width: 575px) {
    .official-source {
        padding: 20px 16px;
    }

    /* Full width on a phone: it is the one thing on the page worth tapping at
       that point, and a wide target is an easier one. */
    .official-source__btn {
        display: flex;
        width: 100%;
    }
}

/* The panel, the heading line and the host are gone — just the button. */
.official-source {
    margin: 26px 0 6px;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}

.official-source__lede,
.official-source__host {
    display: none;
}

/* ---------------------------------------------------------------------------
 * The lockup
 *
 * The mark is inline SVG, not an <img>, because the brand sheet gives the
 * plate two shades: the deep navy on a light ground and a lighter navy when it
 * sits on the dark navy itself, where otherwise it would disappear into the
 * header it is standing on. Only markup the page can reach can do that.
 *
 * The word is type rather than artwork: it is a setting someone can change,
 * and it has to recolour with whatever is behind it.
 *
 * Two things about the alignment, because both were wrong before. Tracking
 * adds its space after the last letter as well as between them, so a tracked
 * word sits visually left of its own box and the lockup looks off-centre —
 * the negative margin takes that trailing space back. And "dailica" has
 * ascenders but no descenders, so its visual mass sits low in the line box;
 * centring the boxes leaves the word looking like it has slipped. The nudge
 * lifts it back onto the mark's optical centre.
 * ------------------------------------------------------------------------ */
/*
 * The base has ".topbar .content .logo" at three classes deep, which beats a
 * two-class override on display, width and height — the reason the mark and
 * the word were stacking while the position override was taking. Matched
 * here, not nudged.
 */
.topbar .content .logo.site-logo,
.logo.site-logo,
.site-logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: none;
    white-space: nowrap;
    text-decoration: none !important;
}

.site-logo .brand-mark,
.site-logo .site-logo__mark {
    flex: 0 0 auto;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 0;
}

.brand-mark__plate { fill: #2B3B5C; }
.brand-mark__glyph { fill: #fff; }

/* On the header and the footer the plate would vanish into the navy behind
   it, so it steps up a shade — the pairing the brand sheet shows. */
.site-logo--on-dark .brand-mark__plate { fill: #3D5280; }

.site-logo .site-logo__word {
    font-family: var(--kh-font-display), sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.005em;
    /* Tracking is added after the final letter too; this takes it back so the
       lockup centres on what you can actually see. */
    margin-right: -.005em;
    line-height: 1;
    /* No descenders in "dailica", so the word rides low against a square mark. */
    transform: translateY(-.5px);
    text-transform: lowercase;
    color: #F4F6FA;
}

.site-logo--footer .brand-mark { width: 33px; height: 33px; }
.site-logo--footer .site-logo__word { font-size: 22px; }

@media (max-width: 575px) {
    .site-logo { gap: 9px; }

    .site-logo .brand-mark,
    .site-logo .site-logo__mark { width: 31px; height: 31px; }

    .site-logo .site-logo__word { font-size: 21px; }
}


/* An uploaded logo stands on its own: no name beside it, and room to be wide. */
.site-logo .site-logo__file {
    display: block;
    width: auto;
    height: auto;
    max-height: 42px;
    max-width: 210px;
    object-fit: contain;
}

.site-logo--footer .site-logo__file { max-height: 36px; max-width: 180px; }

@media (max-width: 575px) {
    .site-logo .site-logo__file { max-height: 34px; max-width: 160px; }
}