/**
 * ARABIC TOOLS — MONETISATION SURFACES
 *
 * Affiliate recommendations and advertising slots. Both are deliberately
 * quiet: they sit in the margins of a page whose job is to be a tool.
 *
 * Scoped under .at-aff / .at-ad, with !important only on the properties
 * Astra reliably hijacks (background, colour, list-style, ::marker).
 *
 * Changelog
 * 2026-08-10  Created.
 * 2026-08-11  Made the recommendation block visible. At a 1.5%-black fill
 *             behind a 9%-black border it was the same colour as the page
 *             and read as furniture; nobody was seeing it, let alone
 *             clicking it. It now sits on the warm apricot accent, against
 *             tools that are indigo throughout, with a rule down its
 *             leading edge and a heading of its own — so it is legible as
 *             a recommendation rather than mistakable for part of the
 *             tool. Quiet still means outside the working surface, never
 *             inside a panel or an app frame, and never on paper; it does
 *             not mean invisible.
 * 2026-08-12  Styles for the rebuilt comparison table: per-tool group
 *             headings and a note under each row label. Both need
 *             `white-space: normal`, because the mobile rule at the foot
 *             of this file puts `nowrap` on the whole table to keep the
 *             value columns from wrapping — which would have printed
 *             every explanatory sentence on one enormous line.
 * 2026-08-12  Indented the capability rows under their group heading and
 *             put a bullet on each, so the table reads as a list of what
 *             a tool gives you rather than a flat run of rows with
 *             headings scattered through it. The bullet is a drawn
 *             pseudo-element, not a list marker — Astra restyles
 *             ::marker site-wide, and a dot that is not a marker cannot
 *             be hijacked by it.
 */

.at-aff {
    margin: 2rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--at-accent, #E8926A);
    border-inline-start: 4px solid var(--at-accent, #E8926A);
    border-radius: var(--at-radius-sm, .75rem);
    background: var(--at-accent-tint, #FDF0E8) !important;
    box-shadow: var(--at-shadow-xs, 0 1px 2px rgba(46, 43, 63, .05));
}

/* The block says what it is. It carried an aria-label and nothing a
   sighted reader could see. */
.at-aff__eyebrow {
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase !important;
    color: var(--at-accent-deep, #CE7049) !important;
}

.at-aff__disclosure {
    margin: 0 0 .85rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--at-ink-soft, #6E698A) !important;
}

.at-aff__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid;
    gap: .75rem;
}

.at-aff__list > li::marker { content: none !important; }

.at-aff__item { margin: 0 !important; }

.at-aff__link {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .7rem .75rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    background: var(--at-surface, #fff) !important;
    text-decoration: none !important;
    color: var(--at-ink, #4A4661) !important;
    transition: border-color .15s var(--at-ease, ease), box-shadow .15s var(--at-ease, ease), transform .15s var(--at-ease, ease);
}

.at-aff__link:hover,
.at-aff__link:focus-visible {
    border-color: var(--at-accent, #E8926A);
    box-shadow: var(--at-shadow-sm, 0 2px 8px rgba(46, 43, 63, .07));
    transform: translateY(-1px);
}

.at-aff__img {
    flex: 0 0 auto;
    width: 62px;
    height: auto;
    border-radius: .3rem;
    box-shadow: var(--at-shadow-xs, 0 1px 2px rgba(46, 43, 63, .05));
}

.at-aff__text { display: grid; gap: .2rem; }

.at-aff__label {
    font-weight: 700;
    text-transform: none !important;
    color: var(--at-ink-deep, #2E2B3F) !important;
}

.at-aff__blurb {
    font-size: .87rem;
    line-height: 1.5;
    color: var(--at-ink, #4A4661) !important;
}

/* The merchant is the one line a reader is entitled to notice before
   clicking away to somebody else's site. It was at 60% opacity. */
.at-aff__merchant {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--at-accent-deep, #CE7049) !important;
}

@media (prefers-reduced-motion: reduce) {
    .at-aff__link { transition: none; }
    .at-aff__link:hover, .at-aff__link:focus-visible { transform: none; }
}

/* ── Advertising ─────────────────────────────────────────────────── */

.at-ad {
    margin: 2rem 0;
    padding: .9rem;
    border: 1px solid var(--at-line, #E9E5F1);
    border-radius: var(--at-radius-sm, .75rem);
    background: var(--at-paper, #FBF9F6) !important;
    text-align: center;
}

/* An ad has to be labelled as one, and the label has to be readable —
   an unreadable "advertisement" mark is the thing the label exists to
   prevent. */
.at-ad__mark {
    display: block;
    margin-bottom: .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase !important;
    color: var(--at-ink-muted, #9E9AB4) !important;
}

/* An ad must never straddle the working surface of a tool. Belt and
   braces behind the PHP allow-list: if one is ever nested inside a
   panel or an app frame by mistake, it is not shown. */
.at-panel .at-ad,
.at-appframe .at-ad,
.at-appframe .at-aff { display: none !important; }

@media print {
    .at-ad, .at-aff { display: none !important; }
}

@media (prefers-color-scheme: dark) {
    .at-aff {
        background: rgba(232, 146, 106, .10) !important;
        border-color: rgba(232, 146, 106, .55);
    }
    .at-aff__eyebrow,
    .at-aff__merchant { color: #F0A882 !important; }
    .at-aff__disclosure { color: rgba(255, 255, 255, .72) !important; }
    .at-aff__link { background: rgba(255, 255, 255, .05) !important; color: rgba(255, 255, 255, .9) !important; }
    .at-aff__label { color: #fff !important; }
    .at-aff__blurb { color: rgba(255, 255, 255, .82) !important; }
    .at-aff__link:hover, .at-aff__link:focus-visible { border-color: #F0A882; }
    .at-ad { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .12); }
}

/* ── Pricing table ───────────────────────────────────────────────
   Generated from the capability map, so it cannot drift from what
   the code enforces. Styled here rather than in the theme so the
   comparison survives a theme change.

   2026-08-11  Restyled. It had been rendering with none of this
   applied — see the enqueue note in pricing.php — and the flat grey
   cards underneath were not worth much once it did. Plans now have a
   recommended one, a line saying who each is for, the two or three
   points that decide it, and a comparison whose yes/no cells read as
   marks. The featured column is tinted the whole way down so the eye
   can follow it. */

.at-pricing { margin: 2.5rem 0; }

.at-pricing__lede {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--at-ink, #4A4661) !important;
}

.at-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
    align-items: start;
}

.at-pricing__plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.4rem 1.5rem;
    border: 1px solid var(--at-line, #E9E5F1);
    border-radius: var(--at-radius, 16px);
    background: var(--at-surface, #fff) !important;
    box-shadow: var(--at-shadow-sm, 0 2px 8px rgba(46, 43, 63, .07));
}

/* The plan the page argues for. Raised, outlined and flagged — a
   pricing page that recommends nothing makes the reader do the work. */
.at-pricing__plan.is-featured {
    border: 2px solid var(--at-primary, #6F63C9);
    box-shadow: var(--at-shadow-md, 0 8px 24px rgba(46, 43, 63, .09));
}

.at-pricing__plan.is-current {
    border-color: var(--at-green, #5FAE87);
    box-shadow: 0 0 0 3px rgba(95, 174, 135, .18);
}

.at-pricing__flag {
    position: absolute;
    top: -0.72rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: .2rem .75rem;
    border-radius: var(--at-radius-pill, 999px);
    background: var(--at-primary, #6F63C9) !important;
    color: #fff !important;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase !important;
}

.at-pricing__name {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none !important;
    color: var(--at-ink-deep, #2E2B3F) !important;
}

.at-pricing__price { margin: 0 0 .75rem; }

.at-pricing__amount {
    display: block;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--at-ink-deep, #2E2B3F) !important;
    font-variant-numeric: tabular-nums;
}

.at-pricing__period {
    display: block;
    margin-top: .15rem;
    font-size: .82rem;
    color: var(--at-ink-soft, #6E698A) !important;
}

.at-pricing__blurb {
    margin: 0 0 1.15rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--at-ink-soft, #6E698A) !important;
    min-height: 2.6em;
}

.at-pricing__cta {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: .7rem 1rem;
    font-weight: 700;
}

.at-pricing__current {
    margin: 0;
    padding: .7rem 1rem;
    text-align: center;
    border-radius: var(--at-radius-sm, 10px);
    background: rgba(95, 174, 135, .12) !important;
    color: #2f7355 !important;
    font-weight: 700;
}

.at-pricing__sells {
    margin: 1.15rem 0 0 !important;
    padding: 1.15rem 0 0 !important;
    border-top: 1px solid var(--at-line, #E9E5F1);
    list-style: none !important;
    display: grid;
    gap: .55rem;
    text-align: left;
}

.at-pricing__sells > li::marker { content: none !important; }

.at-pricing__sells li {
    margin: 0 !important;
    padding-left: 1.5rem;
    position: relative;
    font-size: .87rem;
    line-height: 1.45;
    color: var(--at-ink, #4A4661) !important;
}

.at-pricing__sells li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -.05em;
    font-weight: 800;
    color: var(--at-primary, #6F63C9);
}

/* ── The comparison ── */

.at-pricing__tablehead {
    margin: 2.5rem 0 .4rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--at-ink-deep, #2E2B3F) !important;
    text-transform: none !important;
}

.at-pricing__tablelede {
    margin: 0 0 1.1rem;
    max-width: 62ch;
    font-size: .93rem;
    color: var(--at-ink-soft, #6E698A) !important;
}

.at-pricing__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    border: 1px solid var(--at-line, #E9E5F1);
    border-radius: var(--at-radius-sm, 10px);
    overflow: hidden;
}

.at-pricing__table th,
.at-pricing__table td {
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--at-line, #E9E5F1);
    text-align: center;
}

.at-pricing__table th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: var(--at-ink, #4A4661) !important;
}

.at-pricing__table thead th {
    font-weight: 700;
    text-transform: none !important;
    background: var(--at-paper, #FBF9F6) !important;
    color: var(--at-ink-deep, #2E2B3F) !important;
}

.at-pricing__table tbody tr:nth-child(even) th[scope="row"],
.at-pricing__table tbody tr:nth-child(even) td {
    background: rgba(46, 43, 63, .022) !important;
}

.at-pricing__table tbody tr:last-child th,
.at-pricing__table tbody tr:last-child td { border-bottom: 0; }

/* Tint the recommended column top to bottom, so the eye can follow it
   down the table instead of counting across on every row. */
.at-pricing__table th.is-featured,
.at-pricing__table td.is-featured {
    background: var(--at-primary-tint, #EFEDFC) !important;
}

.at-pricing__table thead th.is-featured {
    box-shadow: inset 0 3px 0 var(--at-primary, #6F63C9);
}

/* ── Group headings, and the note under each row ──────────────────
   The table used to be a flat run of capability names with no subject.
   The heading says which tool the next few rows are about; the note
   says what the row means to someone who has never opened that tool.

   The zebra rule above counts tbody rows, so a group heading shifts the
   stripes by one every time it appears. Give the headings their own
   solid background and the stripe underneath them stops mattering. */

.at-pricing__table tbody tr.at-pricing__group th {
    text-align: left;
    padding: 1.15rem .9rem .7rem;
    background: var(--at-paper, #FBF9F6) !important;
    border-top: 1px solid var(--at-line, #E9E5F1);
    white-space: normal;
    font-weight: 400;
}

.at-pricing__table tbody tr.at-pricing__group:first-child th { border-top: 0; }

.at-pricing__grouptitle {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--at-ink-deep, #2E2B3F) !important;
}

.at-pricing__grouptitle a {
    color: inherit !important;
    text-decoration: none;
    border-bottom: 1px solid var(--at-primary, #6F63C9);
}

.at-pricing__grouptitle a:hover,
.at-pricing__grouptitle a:focus { color: var(--at-primary, #6F63C9) !important; }

.at-pricing__grouplede {
    display: block;
    margin-top: .2rem;
    max-width: 70ch;
    font-size: .86rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--at-ink-soft, #6E698A) !important;
    white-space: normal;
}

/* Indent every capability under its group heading and give it a bullet,
   so the table reads as a list of things per tool rather than as a flat
   run of rows that happens to have headings in it.

   The bullet is a positioned pseudo-element rather than a list marker.
   Astra restyles ::marker and list-style across the site, and the house
   rule is to put !important on any visual property a theme hijacks —
   but a drawn dot is not hijackable in the first place, and it lines up
   with the first line of the label rather than the middle of the cell. */

.at-pricing__table tbody tr:not(.at-pricing__group) th[scope="row"] {
    position: relative;
    padding-left: 2.2rem;
}

.at-pricing__table th[scope="row"] { vertical-align: top; }

.at-pricing__rowlabel {
    display: block;
    font-weight: 600;
    color: var(--at-ink-deep, #2E2B3F) !important;
    white-space: normal;
}

.at-pricing__table tbody tr:not(.at-pricing__group) th[scope="row"]::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1.42rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--at-primary, #6F63C9);
}

.at-pricing__rownote {
    display: block;
    margin-top: .18rem;
    max-width: 58ch;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--at-ink-soft, #6E698A) !important;
    white-space: normal;
}

/* The value columns are short — "Unlimited", a number, a tick — so
   centre them against the top of a label that is now two lines tall. */
.at-pricing__table td { vertical-align: top; padding-top: .95rem; }

.at-pricing__yes { color: var(--at-green, #5FAE87); font-weight: 800; font-size: 1.05rem; }
.at-pricing__no  { color: var(--at-ink-muted, #9E9AB4); }

.at-pricing__foot {
    margin-top: 1.75rem;
    text-align: center;
    font-size: .87rem;
    color: var(--at-ink-soft, #6E698A) !important;
}

/* The comparison is the one thing on the page that may scroll
   sideways on a phone — the page body never should. */
@media (max-width: 640px) {
    .at-pricing__table { display: block; overflow-x: auto; white-space: nowrap; }
    .at-pricing__blurb { min-height: 0; }
    .at-pricing__flag { top: -0.7rem; }

    /* The label column now holds a sentence, so it has to be allowed to
       wrap and has to be given a width to wrap inside — otherwise it
       either runs off the side or collapses to one word per line. The
       value columns keep nowrap and the table keeps scrolling. */
    .at-pricing__table th[scope="row"] { min-width: 16rem; max-width: 18rem; }
    .at-pricing__table tbody tr.at-pricing__group th { min-width: 0; max-width: none; }
    .at-pricing__rownote,
    .at-pricing__grouplede { max-width: none; }
}

@media (prefers-color-scheme: dark) {
    .at-pricing__plan { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .12); }
    .at-pricing__name, .at-pricing__amount { color: #fff !important; }
    .at-pricing__blurb, .at-pricing__period { color: rgba(255, 255, 255, .7) !important; }
    .at-pricing__sells li { color: rgba(255, 255, 255, .85) !important; }
    .at-pricing__table thead th { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
    .at-pricing__table th.is-featured,
    .at-pricing__table td.is-featured { background: rgba(111, 99, 201, .22) !important; }
    .at-pricing__table tbody tr:nth-child(even) th[scope="row"],
    .at-pricing__table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03) !important; }

    .at-pricing__tablehead { color: #fff !important; }
    .at-pricing__tablelede { color: rgba(255, 255, 255, .7) !important; }
    .at-pricing__table tbody tr.at-pricing__group th {
        background: rgba(255, 255, 255, .07) !important;
        border-top-color: rgba(255, 255, 255, .12);
    }
    .at-pricing__grouptitle { color: #fff !important; }
    .at-pricing__grouplede,
    .at-pricing__rownote { color: rgba(255, 255, 255, .68) !important; }
    .at-pricing__rowlabel { color: #fff !important; }
}