/* Guides — search-facing article pages.
   Kept separate from docs.css: the library is a manual read by customers, these
   are landing pages read by strangers, and the two will drift on purpose. */

.guides-page {
    --guides-max-width: 820px;
    --guides-border: #e6e9ef;
    --guides-muted: #667085;
    --guides-accent: #3498db;
    padding-bottom: 3rem;
}

/* ── breadcrumb ─────────────────────────────────────────────── */

.guides-breadcrumb {
    background: #f7f9fc;
    border-bottom: 1px solid var(--guides-border);
    padding: 0.85rem 0;
    margin-bottom: 2rem;
}

.guides-breadcrumb .breadcrumb {
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.guides-breadcrumb .breadcrumb-item a {
    color: var(--guides-accent);
    text-decoration: none;
}

.guides-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

.guides-breadcrumb .breadcrumb-item.active {
    color: var(--guides-muted);
}

/* RTL breadcrumb.
   Bootstrap positions the "/" divider with float:left + padding-right, which in
   RTL puts the separator on the wrong side and collapses the gap, so the two
   crumbs render glued together ("الأدلةبديل جدول العرف") with a stray slash at
   the far edge. docs.css carries the same fix for the library breadcrumb; this
   copy is scoped to .guides-breadcrumb so it cannot affect any other page. */
html[dir="rtl"] .guides-breadcrumb .breadcrumb {
    direction: rtl;
}

html[dir="rtl"] .guides-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0.5rem;
}

html[dir="rtl"] .guides-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* ── two-column layout ──────────────────────────────────────── */

/* Grid columns follow the writing direction, so the article lands on the RIGHT
   in Arabic and on the LEFT in English with no direction-specific rules. */
.guides-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 991px) {
    .guides-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

/* ── article ────────────────────────────────────────────────── */

.guides-article {
    max-width: var(--guides-max-width);
    min-width: 0;   /* let long code/tables shrink instead of blowing the grid */
    margin: 0 auto;
}

/* ── sidebar ────────────────────────────────────────────────── */

/* The sticky element is the WRAPPER, not each card: two sticky siblings resolve
   to the same `top` and stack on top of each other. */
.guides-sidebar-sticky {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.guides-sidebar-inner {
    background: #f7f9fc;
    border: 1px solid var(--guides-border);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
}

.guides-sidebar-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--guides-border);
}

.guides-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guides-sidebar-list li + li {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--guides-border);
}

.guides-sidebar-list a {
    color: #1d2939;
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1.75;
    display: block;
}

.guides-sidebar-list a:hover {
    color: var(--guides-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guides-article-header {
    border-bottom: 1px solid var(--guides-border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
}

.guides-article-title {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.guides-article-lead {
    font-size: 1.1rem;
    color: #344054;
    line-height: 1.9;
    margin-bottom: 0.5rem;
}

.guides-article-meta {
    font-size: 0.85rem;
    color: var(--guides-muted);
    margin-bottom: 0;
}

.guides-draft-badge {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 600;
    background: #fef0c7;
    color: #b54708;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    margin-inline-start: 0.5rem;
}

/* ── article body ───────────────────────────────────────────── */

.guides-article-body {
    font-size: 1.05rem;
    line-height: 2;
    color: #1d2939;
}

.guides-article-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    scroll-margin-top: 5rem;
}

.guides-article-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.guides-article-body p,
.guides-article-body li {
    margin-bottom: 0.9rem;
}

.guides-article-body ul,
.guides-article-body ol {
    padding-inline-start: 1.5rem;
    margin-bottom: 1.25rem;
}

.guides-article-body a {
    color: var(--guides-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guides-article-body blockquote {
    border-inline-start: 4px solid var(--guides-accent);
    background: #f7f9fc;
    padding: 0.7rem 1rem;
    margin: 1.25rem 0;
    border-radius: 0 8px 8px 0;
}

/* Callouts are one short line, so the paragraph's own bottom margin was adding
   0.9rem UNDER the text that the top had no match for — the box read as
   bottom-heavy and much taller than its content, which is why it looked
   over-padded no matter what `padding` said. */
.guides-article-body blockquote p:last-child {
    margin-bottom: 0;
}

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

.guides-article-body th,
.guides-article-body td {
    border: 1px solid var(--guides-border);
    padding: 0.6rem 0.8rem;
    text-align: start;
}

.guides-article-body th {
    background: #f7f9fc;
    font-weight: 600;
}

/* Wide tables must scroll inside their own box, never the page. */
.guides-table-scroll {
    overflow-x: auto;
    margin: 1.5rem 0;
}

/* ── figures ────────────────────────────────────────────────── */

.guides-figure {
    margin: 2rem 0;
    text-align: center;
}

.guides-figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--guides-border);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.07);
}

.guides-figure figcaption {
    font-size: 0.88rem;
    color: var(--guides-muted);
    margin-top: 0.65rem;
    line-height: 1.7;
}

/* ── FAQ ────────────────────────────────────────────────────── */

.guides-faq {
    max-width: var(--guides-max-width);
    margin: 3rem auto 0;
    border-top: 1px solid var(--guides-border);
    padding-top: 2rem;
}

.guides-faq h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.guides-faq-item {
    border: 1px solid var(--guides-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.guides-faq-item summary {
    font-weight: 600;
    cursor: pointer;
    line-height: 1.7;
}

.guides-faq-answer {
    margin-top: 0.75rem;
    line-height: 1.9;
    color: #344054;
}

/* ── index ──────────────────────────────────────────────────── */

.guides-index-header {
    background: #f7f9fc;
    border-bottom: 1px solid var(--guides-border);
    padding: 2.5rem 0;
    margin-bottom: 2.5rem;
    text-align: center;
}

.guides-index-header h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.guides-index-lead {
    color: var(--guides-muted);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.9;
}

.guides-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.guides-card {
    display: block;
    border: 1px solid var(--guides-border);
    border-radius: 12px;
    padding: 1.4rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.guides-card:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1);
    transform: translateY(-2px);
    color: inherit;
}

.guides-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.guides-card-description {
    font-size: 0.95rem;
    color: var(--guides-muted);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.guides-card-date {
    font-size: 0.8rem;
    color: var(--guides-muted);
    display: inline-flex;
    align-items: center;
}

/* Icons are decoration next to text, so they must not grow with the heading
   or drag the baseline around. */
.guides-sidebar-title i,
.guides-faq h2 i {
    font-size: 0.9em;
}

.guides-sidebar-list a i {
    color: var(--guides-muted);
    font-size: 0.85em;
}

.guides-sidebar-list a:hover i {
    color: var(--guides-accent);
}

/* ── sidebar video box ──────────────────────────────────────── */

/* On mobile the box LEADS the stacked sidebar (owner, 2026-08-07 — it was
   desktop-only before that).

   `order`, not a second copy in the markup: the DOM keeps one sequence —
   article + CTA, then related guides, then videos — which is what a crawler
   reads and what determines the desktop column. Flipping the visual order for
   the narrow layout costs one line and cannot drift out of step with the
   desktop one.

   Below 992px the sidebar sits under the whole article, so by the time either
   card is on screen the reader has already passed the conversion block; the
   ordering constraint that keeps this box last on desktop is satisfied either
   way here. */
@media (max-width: 991.98px) {
    .guides-video-box {
        order: -1;
    }
}

.guides-video-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.guides-video-list a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: #1d2939;
}

/* Fixed basis + the intrinsic 16:9 ratio: the tile never stretches to the
   text's height and never shrinks when a title wraps to three lines. */
.guides-video-list img {
    flex: 0 0 84px;
    width: 84px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--guides-border);
    background: #fff;
}

/* The channel row's tile. Same footprint as the <img> above it so all three
   titles start on the same line, but filled with the brand mark instead of a
   video still — the channel is not one video.

   Light tile with the red mark. A dark filled version was tried on 2026-08-07
   and rejected by the owner: it took over the box. Keep it quiet. */
.guides-video-icon {
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--guides-border);
    background: #fff;
}

.guides-video-icon i {
    font-size: 2.1rem;
    line-height: 1;
    color: #ff0000;
}

/* The mark in the box heading sits at text size, so it is coloured but not
   scaled — a full-red glyph at heading size would outweigh the words. */
.guides-video-brand {
    color: #ff0000;
}

/* The same mark inline in article prose, where each guide's closing line
   offers the channel. Written into the markdown (there is no template around
   that sentence) and decorative — the link text already says اليوتيوب. */
.guides-yt-icon {
    color: #ff0000;
    margin-inline-end: 0.15rem;
}

.guides-video-item-title {
    font-size: 0.86rem;
    line-height: 1.55;
    min-width: 0;
}

.guides-video-list a:hover .guides-video-item-title,
.guides-video-list a:focus-visible .guides-video-item-title {
    color: var(--guides-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guides-empty {
    text-align: center;
    color: var(--guides-muted);
    padding: 3rem 0;
}

/* The card grid is as wide as the container; the CTA is a single block of copy
   and reads badly at that width, so it keeps the article measure. */
.guides-index-cta {
    max-width: var(--guides-max-width);
    margin: 2.5rem auto 0;
}

/* ── video ──────────────────────────────────────────────────── */

/* 16:9 without the padding-top hack, and it must never overflow the column. */
.guides-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 2rem 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--guides-border);
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.07);
}

.guides-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── facade video (thumbnail that becomes the player) ────────── */

/* The thumbnail fills the same 16:9 box the iframe will occupy, so swapping
   one for the other on click moves nothing on the page. */
.guides-video[data-video-facade] a,
.guides-video-link a {
    display: block;
    position: absolute;
    inset: 0;
}

/* The box already draws the border, radius and shadow (.guides-video), so the
   thumbnail inside it must drop the ones .guides-figure img gives every article
   image — otherwise the facade renders with two nested frames. */
.guides-video[data-video-facade] img,
.guides-video-link img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── playlist block (thumbnail that LINKS OUT, no player) ─────
   Same 16:9 box as the facade above, but the click leaves for a YouTube
   playlist instead of swapping in an iframe — so it carries no
   data-video-facade and the facade script ignores it. */

.guides-playlist {
    margin: 2rem 0;
}

/* The box carries its own 2rem margins for when it stands alone in an article.
   Inside this figure the title and lead already space it, so zero them or the
   cover drifts away from the words that introduce it. */
.guides-playlist .guides-video {
    margin: 0;
}

.guides-playlist-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

/* The title is a second door to the same playlist: readers aim at the words at
   least as often as at the cover. It must not LOOK like one, though — the
   accent colour and underline that .guides-article-body gives every anchor
   would turn a block heading into a sentence-shaped link. So the resting state
   is byte-identical to the plain <p> it replaced, and only the pointer and the
   hover underline say it is clickable. */
.guides-playlist-title a {
    color: inherit;
    text-decoration: none;
}

.guides-playlist-title a:hover,
.guides-playlist-title a:focus-visible {
    text-decoration: underline;
}

.guides-playlist-lead {
    color: var(--guides-muted);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

/* The play mark this ONE thumbnail needs.
   The rule three blocks up explains why there is no global overlay: video
   stills are exported from a template with a play button already drawn in,
   and a second one on top reads as a rendering bug. A playlist cover is not
   that template — it is a marketing card with no play affordance at all, so
   without this the strongest link in the article looks like a static banner.
   Scoped to .guides-video-link for exactly that reason: it applies where the
   image has no button of its own, and nowhere else. */
.guides-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(52px, 9%, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.35);
    pointer-events: none;          /* the whole image is the link */
    transition: transform 0.18s ease, background 0.18s ease;
}

.guides-video-play i {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    /* The glyph's own whitespace sits on its left, so centring the box leaves
       the triangle looking shifted. Nudge it back, not the box. */
    margin-inline-start: 0.15em;
}

.guides-video-link a:hover .guides-video-play,
.guides-video-link a:focus-visible .guides-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #ff0000;
}

/* NO play-button overlay here, on purpose.
   The video thumbnails are produced from a template that already has a play
   button drawn into the image (see the .webp files under guides/img/). An
   overlay on top of that renders a SECOND button over the first — a rounded
   rect across the image's own circle — which is what shipped for one revision
   and read as a rendering bug. If a future thumbnail ever arrives without one
   baked in, add the overlay to that guide's markup rather than globally.

   Do not write a glob like img/<star>/ in a comment here: the star-slash ends
   the comment early, and the CSS parser then discards rules until it recovers.
   That is exactly how this file silently lost every rule below this point,
   including .guides-brand, for one revision. */

/* ── section icons ───────────────────────────────────────────── */

/* One glyph per H2, so a reader skimming on a phone can tell the stages of
   the article apart without reading every heading.

   PURELY DECORATIVE. The heading text is untouched and each <i> carries
   aria-hidden, so Google and a screen reader get exactly the words that
   shipped without icons. An icon never replaces a word — that would trade a
   ranking phrase for a picture nothing can index.

   Scoped with :has() rather than applied to every h2: five other guides ship
   iconless headings, and switching their layout mode for a feature they do
   not use is a change with no upside. Browsers without :has() fall back to a
   plain inline icon, which still looks right — only the hanging indent below
   is lost. */
.guides-article-body h2:has(.guides-section-icon) {
    display: flex;
    align-items: baseline;
    /* `gap` spaces along the writing direction, so one rule serves RTL and
       LTR — no margin-left/right pair to get backwards in Arabic. */
    gap: 0.55rem;
}

/* Flex, not inline: an Arabic H2 wraps to three lines on a 390px screen, and
   as an inline glyph the icon would let line two start underneath it. As its
   own flex item the icon keeps a column and the text wraps against itself. */
.guides-section-icon {
    color: var(--guides-accent);
    /* Never larger than the words it labels. */
    font-size: 0.8em;
    /* A fixed box so glyphs of different intrinsic widths (a balance scale vs
       a bolt) all start at the same place down the page. 1.25em is Font
       Awesome's own fixed-width measure (`fa-fw`), reproduced here rather than
       added to the markup: it is wide enough for the widest glyph in the set,
       so nothing overflows the box and gets pushed out of column. */
    flex: 0 0 1.25em;
    text-align: center;
}

/* The one emphasised line that is NOT a heading: the "you have tried other
   programs" recognition. It sits between two callout blockquotes, so it is
   styled as a strong line rather than a third box — one more bordered panel
   there would read as a features list, which is the opposite of the calm
   the section needs. */
.guides-recognition {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 1.1rem;
    margin-top: 1.75rem;
}

/* ── mid-article CTA ─────────────────────────────────────────── */

/* A real, clickable button inside the prose — used once, at the risk-reversal
   section of a problem landing page ("judge the result on your own data").
   Not a general licence: the END-of-article ask is the shared CTA component,
   and a second full block would split the click.

   The colour override is required, not decorative. `.guides-article-body a`
   paints every anchor with the accent colour and an underline, and it
   out-specifies Bootstrap's `.btn`, so a bare btn here renders as an
   underlined blue link wearing a button's padding. */
.guides-inline-cta {
    text-align: center;
    margin: 2rem 0 0.75rem;
}

.guides-article-body .guides-inline-cta a {
    color: #fff;
    text-decoration: none;
}

.guides-inline-cta-note {
    text-align: center;
    color: var(--guides-muted);
    font-size: 0.95rem;
}

/* ── secondary link, below the conversion block ──────────────── */

/* Deliberately quiet: one line of body text, muted, with only the link itself
   carrying colour. See the comment on it in guides/templates/guides/detail.html
   for why it may exist there and nowhere earlier on the page. */
.guides-secondary-link {
    text-align: center;
    color: var(--guides-muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.guides-secondary-link a {
    color: var(--guides-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── brand lockup (index header) ─────────────────────────────── */

/* inline-flex + margin auto: the link is exactly as wide as its contents and
   sits centred, instead of a full-width invisible hit area across the header. */
.guides-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 0 auto 1rem;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.guides-brand:hover,
.guides-brand:focus-visible {
    background: rgba(52, 152, 219, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.guides-brand:focus-visible {
    outline: 2px solid var(--guides-accent);
    outline-offset: 2px;
}

.guides-brand img {
    width: 56px;
    height: 56px;
}

.guides-brand-wordmark {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--guides-accent);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

/* ── card thumbnails ─────────────────────────────────────────── */

/* The card is a link, so the thumb bleeds to the card edges: padding moves to
   the text below it. */
.guides-card {
    padding: 0;
    overflow: hidden;
}

.guides-card-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    object-position: top center;   /* screenshots carry their meaning up top */
    border-bottom: 1px solid var(--guides-border);
}

.guides-card-title,
.guides-card-description,
.guides-card-date {
    padding-inline: 1.4rem;
}

.guides-card-title {
    padding-top: 1.2rem;
}

.guides-card-date {
    padding-bottom: 1.3rem;
}

/* A card with no image still needs its top padding. */
.guides-card > .guides-card-title:first-child {
    padding-top: 1.4rem;
}

/* ── comparison table ────────────────────────────────────────
   The ✓/✕ marks and the column tint are CSS, never characters in the markdown:
   content files stay clean prose, and a reviewer editing copy cannot
   accidentally break the visual language. Column order in source is
   المهمة | الطريقة المعتادة | مع جداول برو, so nth-child is stable in RTL too. */

.guides-compare {
    margin: 1.75rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(16, 24, 40, 0.08);
    border: 1px solid var(--guides-border);
    /* The page carries a grid-paper background. Every cell colour below is
       therefore OPAQUE — an rgba tint let the grid show through the table and
       made it read as a floating overlay instead of a solid panel. */
    background: #fff;
}

.guides-compare table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.95rem;
}

.guides-compare th {
    background: var(--guides-accent);
    color: #fff;
    font-weight: 600;
    padding: 0.85rem 1rem;
    text-align: start;
    border: 0;
}

/* The hero column earns a heavier header and a tinted body. */
.guides-compare th:nth-child(3) {
    background: #2b83bd;
    font-weight: 800;
}

/* Our mark, on a white chip so it stays legible on the blue header instead of
   fighting it. Relative url(): ManifestStaticFilesStorage rewrites it during
   collectstatic, so the hashed filename resolves in production too. */
.guides-compare th:nth-child(3)::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-inline-end: 0.5rem;
    vertical-align: -6px;
    background-color: #fff;
    background-image: url("../../home/icons/logo.f64732741d5d.png");
    background-size: 17px 17px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}

.guides-compare td {
    padding: 0.75rem 1rem;
    border: 0;
    border-top: 1px solid #eef2f7;
    vertical-align: top;
    line-height: 1.8;
}

/* Opaque by default so nothing behind the table shows through. */
.guides-compare td {
    background: #fff;
}

.guides-compare tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

.guides-compare tbody tr:hover td {
    background: #eef4f9;
}

/* 1 — the label column */
.guides-compare td:nth-child(1) {
    font-weight: 700;
    color: #1d2939;
    width: 26%;
}

/* Row icons, written into the markdown cell itself (there is no template to
   inject them from, and td::before is already spent on the mobile card
   layout). A FIXED width matters more than the glyph: eleven rows of similar
   Arabic phrases are hard to scan, and icons of varying width would leave the
   labels ragged instead of forming a column the eye can run down.
   Because they live in td:nth-child(1) they appear in the mobile card heading
   for free — which is where the scanning problem is worst. */
.guides-compare-icon {
    display: inline-block;
    width: 1.25em;
    text-align: center;
    margin-inline-end: 0.45rem;
    color: var(--guides-accent);
    font-size: 0.95em;
}

/* 2 — the status quo. Grey, not red: eleven red rows read as an attack ad,
   and the point is "dated", not "shameful". */
.guides-compare td:nth-child(2) {
    color: #7f8c8d;
}

.guides-compare td:nth-child(2)::before {
    content: "\2715\00a0";
    color: #b6bfc6;
    font-weight: 700;
}

/* 3 — the hero column */
/* Flat equivalents of a 7%/11% brand tint over white — same look, no
   transparency. */
.guides-compare td:nth-child(3) {
    background: #f1f8fc;
    font-weight: 500;
    color: #14304a;
}

.guides-compare tbody tr:nth-child(even) td:nth-child(3) {
    background: #e9f4fb;
}

.guides-compare tbody tr:hover td:nth-child(3) {
    background: #dfeff9;
}

.guides-compare td:nth-child(3)::before {
    content: "\2713\00a0";
    color: #27ae60;
    font-weight: 800;
}

/* Phones: a three-column table cannot shrink honestly, so each row becomes a
   card. Horizontal scrolling on a comparison is how readers miss the payoff
   column entirely. */
@media (max-width: 640px) {
    .guides-compare { border-radius: 12px; }
    .guides-compare table,
    .guides-compare tbody,
    .guides-compare tr,
    .guides-compare td { display: block; width: auto; }

    .guides-compare thead { display: none; }

    .guides-compare tbody tr {
        border-top: 1px solid var(--guides-border);
        padding: 0.9rem 1rem;
        background: #fff;
    }
    .guides-compare tbody tr:first-child { border-top: 0; }
    .guides-compare tbody tr:nth-child(even) { background: #f7f9fc; }

    .guides-compare td,
    .guides-compare tbody tr:nth-child(even) td,
    .guides-compare tbody tr:hover td {
        border: 0;
        padding: 0;
        background: transparent;
    }

    .guides-compare td:nth-child(1) {
        width: auto;
        font-size: 1.02rem;
        margin-bottom: 0.5rem;
    }

    .guides-compare td:nth-child(2)::before { content: "\2715\00a0الطريقة المعتادة"; }
    .guides-compare td:nth-child(3)::before { content: "\2713\00a0مع جداول برو"; }

    .guides-compare td:nth-child(2)::before,
    .guides-compare td:nth-child(3)::before {
        display: block;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        margin-bottom: 0.1rem;
    }

    .guides-compare td:nth-child(3) {
        background: #eaf4fb;
        border-radius: 8px;
        padding: 0.5rem 0.7rem;
        margin-top: 0.45rem;
    }
}