/* =====================================================================
   BQ ARTICLES — resources.css  (v3.0.0)
   Stylesheet for /resources AND /learn. Loaded on those two sections only,
   under one handle ('bq-resources-style') because it is one file.

   /learn ARRIVED IN v3.0.0
   ------------------------
   It used to render in article.css on a blue accent, with a sticky topic
   rail. Everything it needs is here now, and three things were added for
   it rather than found already present:

     section 11b   code blocks — bar, copy button, syntax tokens. /learn is
                   developer tutorials; /resources ships no code at all.
     section 13b   bare prose tables. /resources hand-writes .bq-rs-cmp on
                   every table; /learn content ships plain <table>.
     section 23    topic tiles. /resources is flat and has no hub level.

   Nothing else changed for it, which is the point: the hero, rail, TOC,
   prose, FAQ, CTA, prev/next, related cards, bio, promo and listing feed
   are the same components /resources already had.

   THIS IS A FULL RESTYLE, from a reference the client approved
   (dribbble.com/shots/25427507 — "Chore Blog Article", Dario Ferrando).
   Reading the reference and this page side by side, the gap was NOT the
   palette. It was five things, and they are the contract now:

     1. TWO SURFACE LEVELS: a WHITE page, and ONE warm cream tint used for
        the hero card and the sidebar cards. Body copy sits on the white,
        with no content panel. Near-black type, NO chromatic accent —
        colour comes from photography, never from chrome.

        v2.0 got this wrong and it was the last thing to fix: it used a
        cream page PLUS a white content panel PLUS cream cards, so every
        element had an edge against something and the page read busier than
        the reference even once type and radii matched. See section 1.
     2. SERIF display headline. The single most "editorial" signal on the
        reference, and the biggest single change here.
     3. ROUNDED corners — 14px panels, 10px media. The old 0-radius
        "edgy" idiom read as a data terminal, not an article.
     4. SOFT FILLS instead of hairline borders. A tinted panel with no
        border looks composed; the same panel with a 1px grey edge looks
        like a form field.
     5. SENTENCE CASE. The old design had UPPERCASE LETTERSPACED MONO on
        every label — eyebrow, "ON THIS PAGE", "MORE IN TOOLS",
        "ADVERTISEMENT", "DISCLOSURE", every table head. That is what made
        it feel like a spreadsheet. Mono is now reserved for numerics and
        code, and nothing is uppercased.

   Palette history — five earlier attempts, all rejected, kept so none is
   retried: warm ochre accent (deep, fought the navy frame); near-black hero
   (read as a second header); navy tint (still blue, which the global frame
   owns — and which /learn owned too, until it moved onto this file); flat
   neutral grey (lifeless); sage applied across ground/panels/rules/text
   (turned the whole page green).

   The lesson in one line: the frame owns navy, so these sections stay warm
   and neutral, and hue belongs to images rather than to surfaces.

   Contrast is measured against the WORST surface each token lands on (the
   tint, not white). Every text token clears WCAG AA; --rs-muted clears
   6.03:1, and #7a776f was rejected at 3.79.

   !important appears twice, both unavoidable: global-styles.css sets
   `* { font-family:'Lato' !important }`, so the serif and mono stacks need
   it to win; and section 0 overrides two body properties, where the
   overflow one is load-bearing for the sticky columns.
   ===================================================================== */


/* =====================================================================
   0a. FONT FACES  — why nothing on this page looked bold
   ---------------------------------------------------------------------
   global-styles.css declares exactly ONE Lato face, at weight 400, and
   then sets `* { font-family:'Lato' !important }`. So every rule in this
   file asking for font-weight:700 (h3, strong, table heads, the byline,
   the rail's active item) had no bold face to resolve to. Chrome fell
   back to synthesising bold from the 400 file, and synthetic bold on Lato
   is so slight that the page read as though nothing were emphasised at
   all. Headings looked like body copy.

   The font files were already shipping in assets/fonts/; they had simply
   never been declared. Declaring them here fixes every weight on any page
   that loads this stylesheet.

   /learn now loads this file, so it is fixed there too. The editorial
   templates still are not: they load article.css, which declares no faces.
   The durable fix is to move these declarations into bq-global-layout so
   the whole site gets them.
   ===================================================================== */

/* LATO IS NOT DECLARED HERE ANY MORE. The whole site now loads it from one
   place per plugin: this plugin's own assets/css/lato.css, enqueued as the
   'bq-lato' dependency of this stylesheet. The comment above asked for that -
   "the durable fix is to move these declarations" out of here - and it is
   done. Every plugin that renders Lato ships its own copy under the same
   handle, so each is standalone and only one loads when they combine.

   THE 600 HERE WAS NOT A SEMIBOLD. It pointed at Lato-Bold.ttf, so all 39
   font-weight:600 rules in this file rendered Bold while /stocks, which had
   the real Lato-Semibold cut, rendered a genuine 600. Same token, two weights,
   decided by which plugin owned the URL. The shared file declares the real
   Semibold, so these 39 rules will now render slightly lighter than before -
   that is the correction, not a regression.

   Also gained: woff2 instead of .ttf (Bold 73KB -> 23KB), latin/latin-ext
   subsetting, font-display block instead of swap so no other typeface is ever
   painted, and invisible metric-matched fallbacks so nothing reflows. */


/* =====================================================================
   0. GLOBAL OVERRIDES  — the only rules that escape .bq-rs-page
   ===================================================================== */

body.bq-resources-body{
    /* Keep in sync with --rs-page. It cannot use the token: the tokens live
       on .bq-rs-page and this has to paint <body> itself. Without it,
       global-styles.css's #f9f8f3 shows through under short pages. */
    background:#ffffff !important;

    /* ------------------------------------------------------------------
       THIS RULE IS WHY THE STICKY COLUMNS WORK. DO NOT REMOVE IT.

       global-styles.css:28 sets `body { overflow-x: hidden }`. Per spec, when
       one overflow axis is `visible` and the other is anything except
       `visible` or `clip`, the visible one computes to `auto` — so that single
       declaration silently turns <body> into a SCROLL CONTAINER.

       Every position:sticky descendant then sticks relative to body's
       scrollport instead of the viewport. Because the document actually
       scrolls on <html> (overflow-y:scroll), body's scrollport never moves,
       so sticky never engages and the rail and ad just scroll away. The
       sticky declarations below are correct; an ancestor was disabling them.

       `clip` clips exactly like `hidden` but does NOT create a scroll
       container, and pairs legally with `visible`, so sticky is restored
       while horizontal overflow stays clipped. Unsupported browsers drop
       this as invalid and fall back to `hidden` — sticky degrades to static
       rather than the layout breaking.
       ------------------------------------------------------------------ */
    overflow-x:clip !important;
}


/* =====================================================================
   1. TOKENS
   ===================================================================== */

.bq-rs-page{
    /* ---- surfaces: TWO LEVELS ONLY. White ground, one cream tint. ----
       The reference works on exactly two: a WHITE page, and a single warm
       cream used for the hero card and the sidebar cards. Body copy sits
       directly on the white — there is no content panel.

       v2.0 of this file had THREE levels (cream page + white content panel +
       cream cards), which is why it read busier than the reference even after
       the type and radii matched: every element had a visible edge against
       something. If you find yourself needing a third surface, you almost
       certainly want padding or a rule instead.

       --rs-tint-2 is not a third level in that sense — it exists only for
       fills NESTED inside a tinted card (a table head, the ad box inside the
       ad panel, a hover), where tint-on-tint would vanish. */
    /* Conversion green. Lives here rather than inside .bq-rs-promo because
       TWO surfaces now use it: the sidebar promo widget (section 21) and the
       inline CTA panel (section 16). One definition, so they cannot drift.
       Measured on --promo-bg: white 7.98:1, --promo-dim 5.81:1. */
    --promo-bg:#125c40;
    --promo-bg-hover:#0d4a33;
    --promo-ink:#ffffff;
    --promo-dim:#c8e2d5;

    --rs-page:#ffffff;             /* the ground */
    --rs-surface:#ffffff;          /* == page; kept so table bodies read white */
    --rs-tint:#f5f2ea;             /* hero card, sidebar cards, feed cards */
    --rs-tint-2:#eeeae0;           /* nested fills, table heads, hovers */
    --rs-hero-card:#f9f8f3; /* one hue for hero and sidebar, as in the ref */
    --rs-soft:#f9f8f3;      /* legacy alias — same tint */

    /* ---- rules. Used sparingly: soft fills do most of the separating. ---- */
    --rs-line:#e6e2d9;
    --rs-line-strong:#dcd7cb;
    --rs-line-dash:#cfc9ba;

    /* ---- type colours: warm near-black through warm greys ---- */
    --rs-ink:#1a1a18;              /* headings — 14.76:1 worst case */
    --rs-ink-2:#26251f;            /* 13.01:1 */
    --rs-body:#4a4845;             /* body copy — 7.72:1 */
    --rs-muted:#5a5852;            /* meta — 6.03:1, the lightest text here */
    --rs-rule:#9b978e;             /* DECORATIVE ONLY. Never text. */

    /* ---- there is no accent hue. Emphasis is ink, weight and fill. ---- */
    --rs-accent:#1a1a18;
    --rs-accent-hover:#000000;
    --rs-accent-soft:#f4f2ec;
    --rs-accent-line:#dcd7cb;
    --rs-on-accent:#ffffff;

    /* ---- semantic. Only inside comparison tables. ---- */
    --rs-pos:#1a1a18;              /* "yes" is ink — see section 13 */
    --rs-neg:#a8301c;              /* 5.73:1 worst case */

    /* ---- type ----
       Serif for display, sans for everything else. Georgia is chosen over a
       webfont deliberately: it ships on every target OS, is well hinted at
       display sizes, and adds zero bytes and zero render-blocking to a page
       whose whole job is to load fast and rank. */
    --rs-serif:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --rs-sans:var(--bq-lato);
    --rs-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

    --rs-h1:44px;                  /* serif display */
    --rs-h2:27px;                  /* serif */
    --rs-h3:18px;                  /* sans */
    --rs-fs:15px;                  /* body copy */
    --rs-dek:17px;                 /* standfirst — a clear step above body */
    /* --rs-sm came down with the body. At the old 14.5px against a 15px body
       there was effectively no step, so disclosures, FAQ answers and card deks
       would have read as body copy rather than as secondary text. */
    --rs-sm:13.5px;
    --rs-meta:12.5px;
    --rs-label:12.5px;             /* was 10.5px UPPERCASE MONO. Now plain. */
    --rs-lh:1.75;                  /* nudged up: shorter type wants more leading */

    /* ---- code. /learn ships runnable code in every article; /resources
       ships none, so this whole group arrived with the /learn migration.

       THE CODE BLOCK IS DARK. IT IS THE ONE EXCEPTION, AND IT IS DELIBERATE.

       The first version of this migration made it light — cream surface,
       warm ink tokens — on the reasoning that "nothing on this page is dark"
       (see the contract at the top of this file) admits no exceptions. That
       was wrong, and it was rejected. The rule exists so that no SURFACE
       competes with the navy header for the page's visual weight: heroes,
       bands, panels, rails. A code block is not a surface, it is a quoted
       artifact, and a developer reading a tutorial expects an editor.

       So these are article.css's values, unchanged, because the dark code
       treatment was the part of /learn's old design worth keeping:
       VS Code Dark+ / PyCharm Darcula — blue keywords, green strings.

       Two things nearby are NOT dark and must not be pointed at these
       tokens: the inline `code` chip inside a sentence (--rs-code-inline),
       and the table head in section 13b. Both are cream.
       ---- */
    --rs-code-bg:#111b27;
    --rs-code-bar:#0b131d;
    --rs-code-border:#22303f;
    --rs-code-ink:#d6e2ee;
    --rs-code-inline:#f9f8f3;     /* the INLINE chip. Cream, not the slab. */
    --tok-comment:#7b8b9b;
    --tok-keyword:#569cd6;        /* blue */
    --tok-string:#6cc78f;         /* green */
    --tok-number:#d8a36a;
    --tok-fn:#c8b6ff;
    --tok-builtin:#4ec9b0;
    --tok-key:#9cdcfe;            /* JSON keys */
    --tok-punc:#93a4b5;

    /* ---- geometry ---- */
    --rs-radius:14px;              /* panels + cards */
    --rs-radius-sm:10px;           /* media, chips, buttons */
    --rs-radius-xs:8px;
    --rs-header-h:54px;
    --rs-stick:calc(var(--rs-header-h) + 24px);
    --rs-shell:1600px;
    --rs-rail:290px;
    --rs-ad:332px;                 /* 300px creative + padding + border */
    --rs-ad-inner:300px;
    --rs-measure:820px;
    --rs-pad:44px;                 /* generous. The reference's whitespace is
                                      most of why it reads as composed. */

    background:var(--rs-page);
    color:var(--rs-body);
    font-family:var(--rs-sans);
    font-size:var(--rs-fs);
    line-height:var(--rs-lh);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:block;
}
.bq-rs-page *{ box-sizing:border-box; }
.bq-rs-page :focus-visible{ outline:2px solid var(--rs-ink); outline-offset:3px; }
.bq-rs-page img{ max-width:100%; height:auto; }

.bq-rs-page .bq-rs-hero__t,
.bq-rs-page .bq-rs-prose h2,
.bq-rs-page .bq-rs-faq__head,
.bq-rs-page .bq-rs-related__head,
.bq-rs-page .bq-rs-indexblock__title,
.bq-rs-page .bq-rs-card--lead .bq-rs-card__t{
    font-weight:700;
    letter-spacing:-.01em;
}

/* Mono, now ONLY for numerics and code — not for labels. */
.bq-rs-page .bq-rs-cmp .num,
.bq-rs-page .bq-rs-rail-link__n,
.bq-rs-page .bq-rs-toc__n,
.bq-rs-page .bq-rs-index__n,
.bq-rs-page pre,
.bq-rs-page code{
    font-family:var(--rs-mono) !important;
}


/* =====================================================================
   2. SHELL + LAYOUT
   ---------------------------------------------------------------------
   Article is THREE columns: nav rail, content, ad. Both outer columns are
   sticky. Three things must hold for that: the grid is align-items:start
   (a stretched item has no free space to stick in), no ancestor is a scroll
   container (section 0), and a sticky element is not taller than the
   viewport (hence the rail's max-height + internal scroll).
   ===================================================================== */

.bq-rs-page .bq-rs-shell{
    max-width:var(--rs-shell); margin:0 auto; padding:0 32px;
}

.bq-rs-page .bq-rs-layout{
    display:grid;
    grid-template-columns:var(--rs-rail) minmax(0,1fr) var(--rs-ad);
    gap:48px; align-items:start; padding:44px 0 96px;
}

/* The rail is a bare column, not a panel — its TOC card provides the fill. */
.bq-rs-page .bq-rs-rail{
    grid-column:1; grid-row:1; min-width:0;
    position:sticky; top:var(--rs-stick);
    max-height:calc(100vh - var(--rs-stick) - 24px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:var(--rs-line-strong) transparent;
}
.bq-rs-page .bq-rs-rail::-webkit-scrollbar{ width:6px; }
.bq-rs-page .bq-rs-rail::-webkit-scrollbar-thumb{
    background:var(--rs-line-strong); border-radius:3px;
}

/* Article body: a white card, rounded, NO border — the page tint separates it. */
.bq-rs-page .bq-rs-main{
    grid-column:2; grid-row:1; min-width:0; max-width:var(--rs-measure);
    /* No panel: the page is white and so is this, so a background and a
       radius here would draw nothing. Body copy sits on the ground, as in
       the reference. Padding is horizontal breathing room only. */
    padding:4px 0 48px;
}

/* ---------------------------------------------------------------------
   The right column holds a promo widget that scrolls AWAY and an ad that
   STAYS. That needs the sticky to move off the column and onto the ad:

     - align-self:stretch  makes this column as tall as the grid row. The
       grid is align-items:start, so without it the column would only be as
       tall as its own content and a sticky child would have nowhere to
       travel — it would unstick almost immediately.
     - position:static     the column itself no longer sticks, so the promo
       widget at its top scrolls out of view normally.
     - .bq-rs-ad is sticky (section 20), so it pins once it reaches the
       offset and rides the rest of the article.
   --------------------------------------------------------------------- */
.bq-rs-page .bq-rs-adcol{
    grid-column:3; grid-row:1;
    align-self:stretch; position:static;
}

/* Listing: feed + in-content index, then the sticky ad column. The feed's
   cards are their own panels, so this column is not itself panelled. */
.bq-rs-page .bq-rs-listing-layout{
    display:grid; grid-template-columns:minmax(0,1fr) var(--rs-ad);
    gap:48px; align-items:start; padding:40px 0 96px;
}
.bq-rs-page .bq-rs-listing-main{ grid-column:1; min-width:0; }
/* Same arrangement as the article's ad column: the rail is NOT sticky and
   stretches to the row height, so the promo widget inside scrolls away while
   the ad — which carries the sticky — pins. */
.bq-rs-page .bq-rs-listing-rail{
    grid-column:2; min-width:0;
    align-self:stretch; position:static;
}


/* =====================================================================
   3. HERO — an inset cream CARD with the headline and image side by side
   ---------------------------------------------------------------------
   The reference sets the headline against the image rather than stacking a
   full-bleed banner above the article, and that pairing is what makes the
   top of the page look designed. When an article has no image the text
   simply spans the card, so the same markup covers both.
   ===================================================================== */

.bq-rs-page .bq-rs-hero{ padding:32px 0 0; }
/* The text column STRETCHES to the media's height, then splits internally:
   breadcrumb pinned to the top, headline block centred in what is left.

   Two wrong answers were tried first. `align-items:start` left the text column
   at its natural 207px against a 384px image, pooling 177px of dead cream in
   one block under the byline. `align-items:center` fixed that but moved the
   breadcrumb 89px down the card, which is not what centring the title means:
   the trail belongs at the top edge, level with the image.

   Stretching the column and giving .bq-rs-hero__lead auto block margins does
   both at once, and it stays correct at any image ratio. */
.bq-rs-page .bq-rs-hero__card{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,40%);
    gap:52px; align-items:stretch;
    background:#f9f8f3; border-radius:var(--rs-radius);
    padding:44px 48px;
}
/* A hero with no image is a single column with nothing to stretch against, so
   the block collapses to its natural height and sits at the top. */
.bq-rs-page .bq-rs-hero__card--noimg{ align-items:start; }
.bq-rs-page .bq-rs-hero__card--noimg .bq-rs-hero__lead{ margin-block:0; }
/* No featured image -> one column. No measure cap: on a card with no image to
   share width with, the title and dek fill the card and the card fills the
   shell, so text reflows at whatever the viewport gives it. The 80ch cap
   that used to sit here was computed at the body font-size (15px, ~8.5px/ch),
   which made it roughly 680px — less than half the card on a 1500px viewport,
   and the title word-wrapped from the middle with the right half empty. */
.bq-rs-page .bq-rs-hero__card--noimg{
    grid-template-columns:minmax(0,1fr);
    padding:38px 48px;
}
.bq-rs-page .bq-rs-hero__card--noimg .bq-rs-hero__text{ max-width:none; }
.bq-rs-page .bq-rs-hero__card--noimg .bq-rs-hero__dek{ max-width:none; }

.bq-rs-page .bq-rs-hero__text{
    min-width:0;
    display:flex; flex-direction:column;
}
/* Auto block margins centre this in the space left under the breadcrumb. */
.bq-rs-page .bq-rs-hero__lead{ margin-block:auto; }
.bq-rs-page .bq-rs-hero__media{ min-width:0; }
/* 3:2 rather than 4:3 — at 40% of a 1600px shell a 4:3 crop is ~400px tall,
   which overshoots the text column and drags the card's height up. */
.bq-rs-page .bq-rs-hero__media img{
    display:block; width:100%; height:auto;
    aspect-ratio:3 / 2; object-fit:cover;
    border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-hero__cap{
    margin:10px 0 0; font-size:var(--rs-meta); line-height:1.5; color:var(--rs-muted);
}

.bq-rs-page .bq-rs-hero__t{
    margin:14px 0 0; color:var(--rs-ink);
    font-size:var(--rs-h1); line-height:1.1;
}
.bq-rs-page .bq-rs-hero__dek{
    margin:18px 0 0; color:var(--rs-body);
    font-size:var(--rs-dek); line-height:1.6; max-width:58ch;
}

/* Listing hero: no image, wider measure, plus the stat line. */
.bq-rs-page .bq-rs-hero--tall .bq-rs-hero__card{ padding:44px 48px; }
.bq-rs-page .bq-rs-hero__stats{
    display:flex; flex-wrap:wrap; gap:22px; margin:24px 0 0;
    font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-hero__stat b{ color:var(--rs-ink); font-weight:700; }


/* =====================================================================
   4. BREADCRUMBS  — sentence case, chevrons, understated
   ===================================================================== */

.bq-rs-page .bq-rs-crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-crumbs a{ color:var(--rs-muted); text-decoration:none; }
.bq-rs-page .bq-rs-crumbs a:hover{ color:var(--rs-ink); text-decoration:underline; }
.bq-rs-page .bq-rs-crumbs__current{ color:var(--rs-ink); }
.bq-rs-page .bq-rs-crumbs__sep{ color:var(--rs-rule); }


/* =====================================================================
   5. EYEBROW  — a small pill, not an uppercase mono stamp
   ===================================================================== */

.bq-rs-page .bq-rs-eyebrow{
    display:inline-flex; align-items:center; gap:7px;
    margin:0; padding:5px 12px;
    background:rgba(0,0,0,.05); border-radius:100px;
    font-size:var(--rs-label); font-weight:600; color:var(--rs-ink-2);
}
.bq-rs-page .bq-rs-dot{
    width:6px; height:6px; flex:0 0 6px; display:inline-block;
    border-radius:50%; background:var(--rs-ink);
}
.bq-rs-page .bq-rs-dot--neg{ background:var(--rs-neg); }


/* =====================================================================
   6. BYLINE  — tiny, one line, like the reference
   ===================================================================== */

.bq-rs-page .bq-rs-byline{
    display:flex; align-items:center; gap:10px; margin:24px 0 0;
    font-size:var(--rs-meta);
}
.bq-rs-page .bq-rs-byline__av{
    width:26px; height:26px; flex:0 0 26px; border-radius:50%; object-fit:cover;
}
.bq-rs-page .bq-rs-byline__av--txt{
    display:grid; place-items:center;
    background:var(--rs-ink); color:#fff; font-size:10px; font-weight:700;
}
.bq-rs-page .bq-rs-byline__txt{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; min-width:0;
}
.bq-rs-page .bq-rs-byline__by{ color:var(--rs-ink); font-weight:600; }
.bq-rs-page .bq-rs-byline__by a{ color:var(--rs-ink); text-decoration:none; }
.bq-rs-page .bq-rs-byline__by a:hover{ text-decoration:underline; }
.bq-rs-page .bq-rs-byline__meta{
    display:flex; align-items:center; gap:7px; color:var(--rs-muted);
}
.bq-rs-page .bq-rs-byline__meta i{ color:var(--rs-rule); font-style:normal; }


/* =====================================================================
   7. DISCLOSURE  — a soft fill, still unmissable, no shouty label
   ===================================================================== */

.bq-rs-page .bq-rs-disclosure{
    margin:0 0 36px; padding:18px 20px;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-disclosure__tag{
    display:block; margin:0 0 6px;
    font-size:var(--rs-label); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-disclosure p{
    margin:0; font-size:var(--rs-sm); line-height:1.65; color:var(--rs-ink-2);
}


/* =====================================================================
   8. TOC  — a soft rounded card, numbered, with an active marker
   ===================================================================== */

.bq-rs-page .bq-rs-toc{
    margin:0 0 24px; padding:20px 22px;
    background:#f9f8f3; border-radius:var(--rs-radius);
}
.bq-rs-page .bq-rs-toc__label{
    display:block; margin:0 0 12px;
    font-size:var(--rs-label); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-toc__list{ margin:0; padding:0; list-style:none; }
.bq-rs-page .bq-rs-toc__list li{ margin:0; }
.bq-rs-page .bq-rs-toc__list a{
    display:flex; gap:8px; align-items:baseline; padding:6px 0;
    font-size:13.5px; line-height:1.5; color:var(--rs-muted); text-decoration:none;
    transition:color .14s;
}
.bq-rs-page .bq-rs-toc__n{ flex:0 0 auto; font-size:11.5px; color:var(--rs-rule); }
.bq-rs-page .bq-rs-toc__list a:hover{ color:var(--rs-ink); }
/* Scroll-spy state, set by resources.js. Degrades to nothing with JS off. */
.bq-rs-page .bq-rs-toc__list a.is-current{ color:var(--rs-ink); font-weight:700; }
.bq-rs-page .bq-rs-toc__list a.is-current .bq-rs-toc__n{ color:var(--rs-ink); }
.bq-rs-page .bq-rs-toc__toggle{ display:none; }


/* =====================================================================
   9. RAIL SIBLINGS  — plain list, no card, so it reads as secondary
   ===================================================================== */

.bq-rs-page .bq-rs-rail-panel{ margin:0; padding:0 22px; }
.bq-rs-page .bq-rs-rail-panel__head{
    display:block; margin:0 0 10px;
    font-size:var(--rs-label); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-rail-panel__list{ margin:0; padding:0; list-style:none; }
.bq-rs-page .bq-rs-rail-link{
    display:flex; gap:9px; align-items:baseline; padding:7px 0; text-decoration:none;
}
.bq-rs-page .bq-rs-rail-link__n{ flex:0 0 auto; font-size:11.5px; color:var(--rs-rule); }
.bq-rs-page .bq-rs-rail-link__t{
    font-size:13.5px; line-height:1.5; color:var(--rs-muted); transition:color .14s;
}
.bq-rs-page .bq-rs-rail-link:hover .bq-rs-rail-link__t{ color:var(--rs-ink); }
.bq-rs-page .bq-rs-rail-link.is-active .bq-rs-rail-link__t{ color:var(--rs-ink); font-weight:700; }


/* =====================================================================
   10. IN-CONTENT INDEX
   ---------------------------------------------------------------------
   In <main>, not the sidebar. A list repeated in a sidebar on every page
   reads as boilerplate and carries less weight per link than the same list
   inside the main content — and on the listing page this index IS the
   content. It also outlives pagination: the feed shows per_page cards while
   this links every guide from the section's hub, which matters here because
   bq-global-layout links no article section at all.
   ===================================================================== */

.bq-rs-page .bq-rs-indexblock{
    margin:36px 0 0; padding:36px 40px 40px;
    background:#f9f8f3; border-radius:var(--rs-radius);
}
.bq-rs-page .bq-rs-indexblock__title{
    margin:0 0 6px; font-size:var(--rs-h2); color:var(--rs-ink);
}
.bq-rs-page .bq-rs-indexblock__lede{
    margin:0 0 28px; font-size:var(--rs-sm); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-index{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:32px;
}
.bq-rs-page .bq-rs-index__group{ min-width:0; }
.bq-rs-page .bq-rs-index__head{
    display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font-size:var(--rs-label); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-index__n{
    font-size:11px; font-weight:600; font-style:normal; color:var(--rs-muted);
    background:#f9f8f3; padding:2px 7px; border-radius:100px;
}
.bq-rs-page .bq-rs-index ul{ margin:0; padding:0; list-style:none; }
.bq-rs-page .bq-rs-index li a{
    display:block; padding:7px 0;
    font-size:14.5px; line-height:1.5; color:var(--rs-body); text-decoration:none;
    transition:color .14s;
}
.bq-rs-page .bq-rs-index li a:hover{ color:var(--rs-ink); text-decoration:underline; }
.bq-rs-page .bq-rs-index li a.is-active{ color:var(--rs-ink); font-weight:700; }


/* =====================================================================
   11. PROSE
   ===================================================================== */

.bq-rs-page .bq-rs-prose{ color:var(--rs-body); }
.bq-rs-page .bq-rs-prose > *:first-child{ margin-top:0; }

.bq-rs-page .bq-rs-prose h2{
    margin:52px 0 18px; font-size:var(--rs-h2); line-height:1.22;
    color:var(--rs-ink); scroll-margin-top:var(--rs-stick);
}
.bq-rs-page .bq-rs-prose h3{
    margin:34px 0 12px; font-size:var(--rs-h3); font-weight:700;
    line-height:1.4; color:var(--rs-ink); scroll-margin-top:var(--rs-stick);
}
.bq-rs-page .bq-rs-prose p{ margin:0 0 20px; }

/* Overview box — the bulleted "what this article covers" panel at the top of
   a /learn article, from the content file's `highlights` key. Body font-size,
   cream box, same rounded corners as every other panel on the page.
   /resources has no equivalent key and never renders this. */
.bq-rs-page .bq-rs-overview{
    margin:0 0 30px; padding:22px 26px;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
    font-size:var(--rs-fs); line-height:var(--rs-lh); color:var(--rs-body);
}
.bq-rs-page .bq-rs-overview p{ margin:0 0 8px; }
.bq-rs-page .bq-rs-overview ul{ margin:0; padding:0; list-style:none; }
.bq-rs-page .bq-rs-overview li{
    position:relative; padding-left:18px; margin:0 0 4px;
}
.bq-rs-page .bq-rs-overview li::before{
    content:""; position:absolute; left:0; top:.66em;
    width:5px; height:5px; border-radius:50%; background:var(--rs-rule);
}
.bq-rs-page .bq-rs-overview li:last-child{ margin-bottom:0; }

/* Links carry the conversion green, the same --promo-bg the CTA panel and
   the sidebar widget use, so one hue means "interactive" across the whole
   section.

   They were ink with a --rs-line-dash underline, on the theory that a
   dense guide would look tinted if its links were coloured. In practice
   that underline was #cfc9ba under #1a1a18 text, a shade away from
   nothing: links were invisible until hovered, and the internal linking on
   these pages does real work.

   Green rather than blue because the navy frame owns blue, and a blue body
   link here reads as another site's furniture. Measured 7.98:1
   on white and 7.14:1 on the cream tint, so it clears AA for body text on
   every surface it lands on. The underline stays, because colour alone is
   never the only signal. */
.bq-rs-page .bq-rs-prose a{
    color:var(--promo-bg); text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:3px;
    text-decoration-color:rgba(18,92,64,.42);
    transition:text-decoration-color .14s, color .14s;
}
.bq-rs-page .bq-rs-prose a:hover{
    color:var(--promo-bg-hover); text-decoration-color:var(--promo-bg-hover);
}
/* Links inside the green CTA panel have to invert. */
.bq-rs-page .bq-rs-cta a{ color:#ffffff; text-decoration-color:rgba(255,255,255,.5); }

/* A <strong> inside a link must not steal the link colour back. The rule
   below sets strong to --rs-ink, and as a descendant it beats the colour
   inherited from the anchor, so every bolded link in the vendor bullet list
   rendered as plain black text with an underline. */
.bq-rs-page .bq-rs-prose a strong,
.bq-rs-page .bq-rs-prose a b{ color:inherit; }
.bq-rs-page .bq-rs-prose strong,
.bq-rs-page .bq-rs-prose b{ color:var(--rs-ink); font-weight:700; }

.bq-rs-page .bq-rs-prose ul,
.bq-rs-page .bq-rs-prose ol{ margin:0 0 22px; padding-left:22px; }
.bq-rs-page .bq-rs-prose li{ margin:0 0 10px; }
.bq-rs-page .bq-rs-prose ul{ list-style:none; padding-left:20px; }
.bq-rs-page .bq-rs-prose ul > li{ position:relative; }
/* Round bullet now, matching the rounded vocabulary. */
.bq-rs-page .bq-rs-prose ul > li::before{
    content:""; position:absolute; left:-18px; top:.66em;
    width:5px; height:5px; border-radius:50%; background:var(--rs-rule);
}

.bq-rs-page .bq-rs-prose blockquote{
    margin:32px 0; padding:4px 0 4px 24px;
    border-left:2px solid var(--rs-line-strong);
    font-size:21px; line-height:1.5; color:var(--rs-ink-2);
}
.bq-rs-page .bq-rs-prose blockquote p:last-child{ margin-bottom:0; }

.bq-rs-page .bq-rs-prose hr{
    margin:44px 0; border:0; border-top:1px solid var(--rs-line);
}

/* Anchor link, revealed on heading hover. Added by resources.js. */
.bq-rs-page .bq-rs-anchor{
    margin-left:10px; font-size:.6em; font-weight:400; color:var(--rs-rule);
    text-decoration:none; opacity:0; transition:opacity .14s, color .14s;
}
.bq-rs-page .bq-rs-prose h2:hover .bq-rs-anchor,
.bq-rs-page .bq-rs-prose h3:hover .bq-rs-anchor,
.bq-rs-page .bq-rs-anchor:focus-visible{ opacity:1; }
.bq-rs-page .bq-rs-anchor:hover{ color:var(--rs-ink); }

/* INLINE code, inside a sentence: a cream chip, never the dark slab. A
   dark inline chip in a line of body copy reads as a redaction. */
.bq-rs-page .bq-rs-prose code{
    font-size:.86em; padding:2px 6px; border-radius:5px;
    background:var(--rs-code-inline); color:var(--rs-ink-2);
}
/* BLOCK code: the dark surface. This rule is also the no-JS state, so a
   code block looks the same with the script off — it just has no bar and
   no highlighting. */
.bq-rs-page .bq-rs-prose pre{
    margin:0 0 26px; padding:18px 22px; overflow-x:auto;
    background:var(--rs-code-bg); border-radius:var(--rs-radius-sm);
    font-size:13px; line-height:1.65; color:var(--rs-code-ink);
    scrollbar-width:thin; scrollbar-color:#33465a var(--rs-code-bg);
}
.bq-rs-page .bq-rs-prose pre::-webkit-scrollbar{ height:10px; }
.bq-rs-page .bq-rs-prose pre::-webkit-scrollbar-track{ background:var(--rs-code-bar); }
.bq-rs-page .bq-rs-prose pre::-webkit-scrollbar-thumb{ background:#33465a; }
.bq-rs-page .bq-rs-prose pre code{
    padding:0; background:none; border-radius:0; color:inherit; font-size:inherit;
}
/* The dark surface needs its own selection colour or the text disappears. */
.bq-rs-page .bq-rs-prose pre ::selection{ background:#2a4a68; color:#fff; }


/* =====================================================================
   11b. CODE BLOCKS  — the language bar, the copy button, the tokens
   ---------------------------------------------------------------------
   .bq-rs-code is the wrapper resources.js builds around every <pre> in the
   prose. The <pre> rules above are the no-JS state and are already dark, so
   with the script off a code block still looks like a code block — it just
   has no bar and no highlighting.

   /learn is why this exists. Its articles are developer tutorials and 124
   of the blocks under content/learn/ are runnable code, so "a <pre> with a
   background" was never going to be enough there. /resources ships no code
   at all and is untouched by every rule below.

   THE DARK SURFACE IS THE POINT — see the token note in section 1 for why
   it is the one exception to this file's no-dark-surfaces rule, and why the
   light version that shipped first was wrong. The geometry is this design's,
   not article.css's: 10px radius, no border, a filled bar instead of a
   hairline.
   ===================================================================== */

.bq-rs-page .bq-rs-code{
    margin:0 0 26px; overflow:hidden;
    background:var(--rs-code-bg); border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-code__bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:7px 16px; background:var(--rs-code-bar);
    border-bottom:1px solid var(--rs-code-border);
}
/* Sans, and !important for the same reason the serif stack needs it:
   section 1 maps every pre/code to mono, and these two are chrome around
   the code rather than code. Both sit on the dark bar, so both take light
   ink — 5.9:1 and 6.6:1 on #0b131d. */
.bq-rs-page .bq-rs-code__lang{
    font-family:var(--rs-sans) !important;
    font-size:var(--rs-meta); font-weight:600; color:#8fa2b4;
}
.bq-rs-page .bq-rs-code__copy{
    font-family:var(--rs-sans) !important;
    font-size:var(--rs-meta); font-weight:600; color:#9db0c2;
    background:transparent; border:0; border-radius:100px;
    padding:4px 12px; cursor:pointer;
    transition:color .14s, background-color .14s;
}
.bq-rs-page .bq-rs-code__copy:hover{ color:#fff; background:rgba(255,255,255,.08); }
.bq-rs-page .bq-rs-code__copy.is-done{ color:var(--tok-string); }

/* The <pre> is already styled above; inside the wrapper it gives up its own
   margin and radius so the bar and the code read as one object. */
.bq-rs-page .bq-rs-code pre{ margin:0; border-radius:0; }
.bq-rs-page .bq-rs-code pre code{ display:block; white-space:pre; tab-size:4; }

/* Syntax tokens. Unprefixed, exactly as resources.js emits them, which is
   safe because every rule in this file is scoped to .bq-rs-page. */
.bq-rs-page .tok-comment{ color:var(--tok-comment); font-style:italic; }
.bq-rs-page .tok-string { color:var(--tok-string); }
.bq-rs-page .tok-keyword{ color:var(--tok-keyword); font-weight:600; }
.bq-rs-page .tok-builtin{ color:var(--tok-builtin); }
.bq-rs-page .tok-number { color:var(--tok-number); }
.bq-rs-page .tok-fn     { color:var(--tok-fn); }
.bq-rs-page .tok-key    { color:var(--tok-key); }
.bq-rs-page .tok-punc,
.bq-rs-page .tok-op     { color:var(--tok-punc); }
.bq-rs-page .tok-tag    { color:var(--tok-keyword); }
.bq-rs-page .tok-attr   { color:var(--tok-fn); }


/* =====================================================================
   12. IMAGES  — featured is in the hero; these are inline figures
   ---------------------------------------------------------------------
   aspect-ratio plus explicit width/height on the <img> reserve the box
   before the file arrives, so an image can never shift the prose under it.
   ===================================================================== */

.bq-rs-page .bq-rs-fig{ margin:0 0 30px; padding:0; }
.bq-rs-page .bq-rs-fig img{
    display:block; width:100%; height:auto;
    aspect-ratio:16 / 9; object-fit:cover;
    border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-fig--tall img{ aspect-ratio:4 / 3; }
.bq-rs-page .bq-rs-fig--free img{ aspect-ratio:auto; object-fit:contain; }
.bq-rs-page .bq-rs-fig__cap{
    margin:12px 0 0; font-size:var(--rs-meta); line-height:1.55; color:var(--rs-muted);
}
/* Image credits block at the foot of an article. Credits belong here rather
   than under the hero, where they compete with the headline for attention. */
.bq-rs-page .bq-rs-prose p.bq-rs-credits{
    font-size:var(--rs-meta); line-height:1.6; color:var(--rs-muted);
}
.bq-rs-page .bq-rs-fig__credit{ margin-left:8px; color:var(--rs-rule); }
.bq-rs-page .bq-rs-prose > img,
.bq-rs-page .bq-rs-prose p > img{
    display:block; margin:0 0 26px; width:100%; height:auto;
    border-radius:var(--rs-radius-sm);
}


/* =====================================================================
   13. COMPARISON TABLE
   ---------------------------------------------------------------------
   The one place mono survives, on the numeric column, because aligned
   figures are the entire point of a comparison table.
   ===================================================================== */

.bq-rs-page .bq-rs-tablewrap{
    margin:0 0 30px; overflow-x:auto;
    background:var(--rs-surface); border-radius:var(--rs-radius-sm);
    box-shadow:inset 0 0 0 1px var(--rs-line);
}
/* Tabular data reads a step down from prose, not level with it.

   Cells were 14.5px against 15px body copy, with 14px of vertical padding
   and a 1.55 line-height, which produced 51px rows and a table that took
   more vertical space than the prose explaining it. Because the size was
   within half a pixel of the surrounding text, the table also failed to
   read as a distinct object: it looked like loosely spaced paragraphs in
   columns.

   13.5px with 9px of padding brings rows to roughly 36px and lets a 7-row
   comparison sit in one screen, which is the whole point of a comparison
   table. */
.bq-rs-page .bq-rs-cmp{
    width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;
}
.bq-rs-page .bq-rs-cmp thead th{
    position:sticky; top:0; z-index:1;
    background:#f9f8f3;
    font-size:11.5px; font-weight:700; color:var(--rs-ink);
    letter-spacing:.03em; text-transform:uppercase;
    padding:9px 14px; text-align:left; white-space:nowrap;
}
.bq-rs-page .bq-rs-cmp tbody td{
    padding:9px 14px; border-top:1px solid var(--rs-line);
    vertical-align:top; line-height:1.45;
}
.bq-rs-page .bq-rs-cmp tbody tr:hover{ background:#f9f8f3; }
.bq-rs-page .bq-rs-cmp td:first-child{ font-weight:700; color:var(--rs-ink); }
.bq-rs-page .bq-rs-cmp .num{ text-align:right; }
/* Our own row, marked rather than hidden. Hover keeps the same fill so the
   green/red never drop below 4.5:1 against a darker surface. */
.bq-rs-page .bq-rs-cmp tr.is-ours,
.bq-rs-page .bq-rs-cmp tr.is-ours:hover{ background:#f9f8f3; }
.bq-rs-page .bq-rs-cmp tr.is-ours td{ font-weight:600; }
/* Verdict colours. These were ink for yes and one dark red for no, on the
   theory that only the gaps should carry colour. That was written for cells
   holding words. In a table that is nothing but glyphs, a black tick and a
   brick-red cross read as the same grey speck at arm's length, so both now
   carry a bright signal colour. Measured against all 3 surfaces the marks land
   on: white, the cream hover/is-ours tint #f9f8f3, and the row tint #f7fafd.
     green #0b8043  5.02 : 4.72 : 4.79
     red   #d32f2f  4.98 : 4.68 : 4.75
   Both clear AA for normal-size text everywhere, with the brightest values
   that still do. Do not lighten either without re-measuring all 3. */
.bq-rs-page .bq-rs-cmp .yes{ color:#0b8043; font-weight:700; }
.bq-rs-page .bq-rs-cmp .no{ color:#d32f2f; font-weight:700; }
.bq-rs-page .bq-rs-cmp .part{ color:var(--rs-muted); font-weight:600; }
/* The glyph carries the verdict, so it is smaller than it was and heavier.
   Weight alone does almost nothing here: ✓ and ✗ are not in Lato, so they fall
   back to a symbol font that ships one weight and Chrome synthesises the rest.
   text-stroke thickens the actual outline, which is what makes a 13.5px mark
   read as bold rather than as a hairline. */
.bq-rs-page .bq-rs-cmp .mk{
    font-size:13.5px; font-weight:900; line-height:1;
    -webkit-text-stroke:0.5px currentColor;
}
.bq-rs-page .bq-rs-scrollnote .mk{ font-size:12px; -webkit-text-stroke:0.4px currentColor; }

/* Two-row column headings. thead th is nowrap by default, which is right for a
   3-column table and wrong for a 6-column one: the headings are the widest
   thing in a tick/cross column and they were setting the table's width. A <br>
   in the th halves the horizontal cost. Vertical-align keeps a 1-line heading
   sitting on the same baseline as a 2-line one. */
.bq-rs-page .bq-rs-cmp thead th.wrap{ white-space:normal; line-height:1.3; vertical-align:bottom; }
/* The platform name is the row's identity, so it never wraps and never
   truncates. "Financial Modeling Prep" was breaking across 3 lines and taking
   the row height with it. */
.bq-rs-page .bq-rs-cmp td:first-child,
.bq-rs-page .bq-rs-cmp thead th:first-child{ white-space:nowrap; }
/* Verdict columns hold one glyph, so they only need room for the heading. */
.bq-rs-page .bq-rs-cmp td.tick{ text-align:center; }
.bq-rs-page .bq-rs-cmp thead th.tick{ text-align:center; }

.bq-rs-page .bq-rs-scrollnote{
    display:none; margin:-20px 0 30px;
    font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-scrollnote.is-on{ display:block; }


/* =====================================================================
   13b. PROSE TABLES  — the same object, without the comparison vocabulary
   ---------------------------------------------------------------------
   /resources content hand-writes its tables as
   `<div class="bq-rs-tablewrap"><table class="bq-rs-cmp">`, because those
   tables carry ticks, crosses, an is-ours row and two-line headings — the
   whole apparatus above.

   /learn content ships a bare <table>: 24 of them across 25 articles, and
   re-marking every one to earn the styling above would be a content
   migration to achieve a visual result. So a plain table in the prose picks
   up the same look, minus the verdict classes it never uses. `.num` is the
   one it does use, so that rule is repeated here.

   resources.js wraps these in a .bq-rs-tablewrap at runtime, which is where
   the scroll container and the hairline come from. min-width is on the
   WRAPPED table only: unwrapped (JS off) it has to be free to fit whatever
   width it has, or the page scrolls sideways instead of the table.
   ===================================================================== */

.bq-rs-page .bq-rs-prose table{
    width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 30px;
}
.bq-rs-page .bq-rs-tablewrap > table{ min-width:520px; margin:0; }
/* Cream, NOT --rs-code-bg. These two pointed at that token while it was a
   light tint; it is the dark slab now, and a table head is not a code
   block. Section 13's own head uses the same literal. */
.bq-rs-page .bq-rs-prose thead th{
    background:#f9f8f3;
    font-size:11.5px; font-weight:700; color:var(--rs-ink);
    letter-spacing:.03em; text-transform:uppercase;
    padding:9px 14px; text-align:left; white-space:nowrap;
}
.bq-rs-page .bq-rs-prose tbody td{
    padding:9px 14px; border-top:1px solid var(--rs-line);
    vertical-align:top; line-height:1.45;
}
.bq-rs-page .bq-rs-prose tbody tr:hover{ background:#f9f8f3; }
.bq-rs-page .bq-rs-prose tbody td:first-child{ color:var(--rs-ink); font-weight:700; white-space:nowrap; }
.bq-rs-page .bq-rs-prose td.num,
.bq-rs-page .bq-rs-prose th.num{ text-align:right; font-family:var(--rs-mono) !important; }


/* =====================================================================
   14. CALLOUT  — the "where we fall short" admissions
   ===================================================================== */

.bq-rs-page .bq-rs-note{
    margin:0 0 30px; padding:22px 24px;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-note__t{
    margin:0 0 10px; font-size:var(--rs-label); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-note p{ margin:0 0 12px; font-size:var(--rs-sm); line-height:1.65; }
.bq-rs-page .bq-rs-note p:last-child{ margin-bottom:0; }
.bq-rs-page .bq-rs-note--caution{ box-shadow:inset 3px 0 0 var(--rs-neg); }


/* =====================================================================
   15. FAQ
   ===================================================================== */

.bq-rs-page .bq-rs-faq{ margin:56px 0 0; }
.bq-rs-page .bq-rs-faq__head{
    margin:0 0 8px; font-size:var(--rs-h2); color:var(--rs-ink);
}
.bq-rs-page .bq-rs-faq__item{ padding:22px 0; border-top:1px solid var(--rs-line); }
.bq-rs-page .bq-rs-faq__q{
    margin:0 0 8px; font-size:var(--rs-h3); font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-faq__a{ margin:0; font-size:var(--rs-sm); line-height:1.7; }


/* =====================================================================
   16. CTA  — the deep green panel, matching the sidebar promo
   ---------------------------------------------------------------------
   This was a cream panel and it disappeared into the page: the same tint
   as the pull-quotes and the prev/next cards, at the one point in the
   article where we ask for something. It now uses the sidebar promo's
   green (section 21), so the two conversion surfaces read as one system
   and the panel separates cleanly from the warm body copy above it.

   Contrast on --promo-bg: white 7.98:1, the dim tone 5.81:1, and the
   white button's green label 7.98:1. Those are the sidebar's measured
   figures and they carry over unchanged, since the colours are identical.
   ===================================================================== */

.bq-rs-page .bq-rs-cta{
    display:flex; flex-wrap:wrap; gap:26px; align-items:center;
    justify-content:space-between;
    margin:44px 0 0; padding:28px 30px;
    background:var(--promo-bg, #125c40); border-radius:var(--rs-radius);
}
.bq-rs-page .bq-rs-cta__copy{ min-width:0; flex:1 1 300px; }
.bq-rs-page .bq-rs-cta__t{
    margin:0 0 6px; font-size:18px; font-weight:700; color:#ffffff; line-height:1.35;
}
.bq-rs-page .bq-rs-cta__d{
    margin:0; font-size:var(--rs-sm); line-height:1.6;
    color:var(--promo-dim, #c8e2d5); max-width:56ch;
}
.bq-rs-page .bq-rs-cta__btns{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* On green, the solid button inverts to white with a green label and the
   ghost button takes a light border. Both rules sit here rather than in the
   shared .bq-rs-btn block so nothing else that uses those buttons moves. */
.bq-rs-page .bq-rs-cta .bq-rs-btn--solid{
    background:#ffffff; color:var(--promo-bg, #125c40); border-color:#ffffff;
}
.bq-rs-page .bq-rs-cta .bq-rs-btn--solid:hover{
    background:var(--promo-dim, #c8e2d5); border-color:var(--promo-dim, #c8e2d5);
    color:var(--promo-bg-hover, #0d4a33);
}
.bq-rs-page .bq-rs-cta .bq-rs-btn--ghost{
    background:transparent; color:#ffffff; border-color:rgba(255,255,255,.45);
}
.bq-rs-page .bq-rs-cta .bq-rs-btn--ghost:hover{ border-color:#ffffff; }

.bq-rs-page .bq-rs-btn{
    display:inline-block; padding:11px 22px; border-radius:100px;
    font-size:14px; font-weight:600; text-decoration:none; cursor:pointer;
    border:1px solid transparent; white-space:nowrap;
    transition:background-color .16s, color .16s, border-color .16s;
}
.bq-rs-page .bq-rs-btn--solid{
    background:var(--rs-ink); color:var(--rs-on-accent); border-color:var(--rs-ink);
}
.bq-rs-page .bq-rs-btn--solid:hover{ background:#000; border-color:#000; }
.bq-rs-page .bq-rs-btn--ghost{
    background:transparent; color:var(--rs-ink); border-color:var(--rs-line-dash);
}
.bq-rs-page .bq-rs-btn--ghost:hover{ border-color:var(--rs-ink); }


/* =====================================================================
   17. PREV / NEXT
   ===================================================================== */

.bq-rs-page .bq-rs-seq{
    display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:44px 0 0;
}
.bq-rs-page .bq-rs-seq__link{
    display:flex; flex-direction:column; gap:8px;
    padding:20px 22px; text-decoration:none;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
    transition:background-color .16s;
}
.bq-rs-page .bq-rs-seq__link:hover{ background:#f9f8f3; }
.bq-rs-page .bq-rs-seq__link--next{ text-align:right; align-items:flex-end; }
.bq-rs-page .bq-rs-seq__link.is-empty{ background:none; pointer-events:none; }
.bq-rs-page .bq-rs-seq__dir{ font-size:var(--rs-meta); color:var(--rs-muted); }
.bq-rs-page .bq-rs-seq__t{
    font-size:15px; font-weight:700; line-height:1.45; color:var(--rs-ink);
}


/* =====================================================================
   18. RELATED CARDS
   ===================================================================== */

.bq-rs-page .bq-rs-related{ margin:56px 0 0; }
.bq-rs-page .bq-rs-related__head{
    margin:0 0 22px; font-size:var(--rs-h2); color:var(--rs-ink);
}
.bq-rs-page .bq-rs-related__grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px;
}
.bq-rs-page .bq-rs-relcard{
    display:flex; flex-direction:column; gap:12px;
    padding:22px; text-decoration:none;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
    transition:background-color .16s;
}
.bq-rs-page .bq-rs-relcard:hover{ background:#f9f8f3; }
.bq-rs-page .bq-rs-relcard__tag{ font-size:var(--rs-meta); color:var(--rs-muted); }
/* v3.7: the /learn -> /resources block (bq_rs_comparisons) reuses the related
   cards and adds one lede line, whose link has to read as a link. */
.bq-rs-page .bq-rs-compare__lede{
    margin:-10px 0 22px; max-width:76ch; font-size:var(--rs-sm); line-height:1.6; color:var(--rs-muted);
}
.bq-rs-page .bq-rs-compare__lede a{ color:var(--rs-ink); text-decoration:underline; text-underline-offset:2px; }
.bq-rs-page .bq-rs-relcard__t{
    font-size:15.5px; font-weight:700; line-height:1.45; color:var(--rs-ink); flex:1 1 auto;
}
/* Card foot: the freshness stamp on the left, the affordance on the right.
   Both come from the cached index, so neither costs a file read. */
.bq-rs-page .bq-rs-relcard__foot{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin-top:auto;
}
.bq-rs-page .bq-rs-relcard__date,
.bq-rs-page .bq-rs-seq__date{
    font-size:var(--rs-label); color:var(--rs-muted); white-space:nowrap;
}
.bq-rs-page .bq-rs-relcard__go{ font-size:var(--rs-meta); color:var(--rs-muted); }
.bq-rs-page .bq-rs-relcard:hover .bq-rs-relcard__go{ color:var(--rs-ink); }


/* =====================================================================
   19. AUTHOR BIO
   ===================================================================== */

.bq-rs-page .bq-rs-bio{
    display:flex; gap:18px; align-items:flex-start;
    margin:48px 0 0; padding:26px;
    background:#f9f8f3; border-radius:var(--rs-radius);
}
.bq-rs-page .bq-rs-bio__av{
    width:56px; height:56px; flex:0 0 56px; border-radius:50%; object-fit:cover;
}
.bq-rs-page .bq-rs-bio__av--txt{
    display:grid; place-items:center;
    background:var(--rs-ink); color:#fff; font-size:17px; font-weight:700;
}
.bq-rs-page .bq-rs-bio__txt{ min-width:0; }
.bq-rs-page .bq-rs-bio__name{
    display:block; font-size:15.5px; font-weight:700; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-bio__role{
    display:block; margin:3px 0 10px; font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-bio__bio{
    margin:0; font-size:var(--rs-sm); line-height:1.7; color:var(--rs-body);
}


/* =====================================================================
   20. SIDEBAR AD  — placeholder; data-bq-ad-slot is the hook for a real tag
   ---------------------------------------------------------------------
   The label stays: an ad beside editorial content has to be identifiable
   as one, and on a page comparing products where one is ours, being
   unambiguous about what is paid is the basis of the section's credibility.
   min-height is reserved so a creative loading cannot shift the column.
   ===================================================================== */

/* Sticky lives HERE, not on the column — see the note in section 2. The promo
   widget above it scrolls away; this pins and rides the article. */
.bq-rs-page .bq-rs-ad{
    position:sticky; top:var(--rs-stick);
    background:#f9f8f3; border-radius:var(--rs-radius);
    padding:18px; margin:0 0 22px;
}
/* Below 1400px the ad column leaves the grid and goes full width, where
   sticking makes no sense. Unset there (see section 22). */
.bq-rs-page .bq-rs-ad__label{
    display:block; margin:0 0 12px;
    font-size:var(--rs-label); color:var(--rs-muted); text-align:center;
}
.bq-rs-page .bq-rs-ad__box{
    display:grid; place-items:center;
    width:100%; max-width:var(--rs-ad-inner); margin:0 auto;
    min-height:600px;
    background:#f9f8f3; border-radius:var(--rs-radius-sm);
    color:var(--rs-rule);
}
.bq-rs-page .bq-rs-ad__box span{ font-size:var(--rs-meta); }
.bq-rs-page .bq-rs-ad--mrec .bq-rs-ad__box{ min-height:250px; }


/* =====================================================================
   20b. PROMO WIDGET  — the ONE portable component in this file
   ---------------------------------------------------------------------
   Everything else here is scoped under .bq-rs-page so it cannot leak. This
   block deliberately is NOT, because the whole point is that other pages and
   other plugins can call bq_rs_promo_widget() and get a styled widget.

   It stays safe to unscope because:
     - every selector is under .bq-rs-promo, a class nothing else uses;
     - every token has an inline fallback — var(--rs-tint, #f5f2ea) — so it
       renders correctly OUTSIDE .bq-rs-page, where the token block does not
       apply, and inherits the page's tokens when it is inside one.

   TO USE IT ON ANOTHER PAGE: enqueue the 'bq-resources-style' handle, and if
   that page is routed by the mu-plugin, add the handle to that branch's
   asset keep-list or WP Rocket's deregister pass will strip it.
   ===================================================================== */

.bq-rs-promo{
    /* ----------------------------------------------------------------
       GREEN, and green ONLY here. These tokens are declared on the widget
       itself, not on .bq-rs-page, so the hue cannot leak into the page
       theme — which is the mistake an earlier revision made when a green
       accent was put in the page tokens and turned every surface, rule and
       link green. One small element carrying a hue is an accent; the same
       hue on the ground is a theme.

       #125c40 is deliberately NOT /learn's teal (#0e7c74) — 52 points less
       blue — so the two widgets read as different components rather than
       one being a broken copy of the other.

       Measured: white on it 7.98:1, the dim tone 5.81:1, and the white
       button's green label 7.98:1. It clears the cream tint it sits beside
       by 7.14:1, which is what "stands out" means here.
       ---------------------------------------------------------------- */
    /* Tokens hoisted to the root block in section 2, since the inline CTA
       panel shares them. Values unchanged; the contrast note above still
       applies to both surfaces. */

    background:var(--promo-bg);
    border-radius:var(--rs-radius, 14px);
    padding:22px 24px; margin:0 0 22px;
    font-family:var(--rs-sans, 'Lato', -apple-system, sans-serif);
}
.bq-rs-promo__t{
    margin:0 0 8px;
    font-size:16px; font-weight:700; line-height:1.35;
    color:var(--promo-ink);
}
.bq-rs-promo__d{
    margin:0 0 18px;
    font-size:var(--rs-meta, 13px); line-height:1.65;
    color:var(--promo-dim);
}
.bq-rs-promo__btns{ display:flex; flex-direction:column; gap:10px; }
/* White fill with a green label: the highest-contrast pairing available on
   the panel, so the primary action is unmistakable. */
.bq-rs-promo__btn{
    display:block; padding:11px 18px; border-radius:100px;
    background:var(--promo-ink); color:var(--promo-bg);
    border:1px solid var(--promo-ink);
    font-size:14px; font-weight:700; text-align:center; text-decoration:none;
    cursor:pointer; transition:background-color .16s, border-color .16s, color .16s;
}
.bq-rs-promo__btn:hover{
    background:var(--promo-dim); border-color:var(--promo-dim); color:var(--promo-bg-hover);
}
.bq-rs-promo__link{
    display:block; text-align:center;
    font-size:var(--rs-meta, 13px); font-weight:600;
    color:var(--promo-dim); text-decoration:none;
}
.bq-rs-promo__link:hover{ color:var(--promo-ink); text-decoration:underline; }

/* Wider variant, for when the widget is used in a content column rather than
   a ~300px rail. Buttons go side by side instead of stacking. */
.bq-rs-promo--wide{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.bq-rs-promo--wide .bq-rs-promo__copy{ flex:1 1 300px; min-width:0; }
.bq-rs-promo--wide .bq-rs-promo__d{ margin-bottom:0; max-width:56ch; }
.bq-rs-promo--wide .bq-rs-promo__btns{ flex-direction:row; align-items:center; flex:0 0 auto; }
.bq-rs-promo--wide .bq-rs-promo__btn{ padding:10px 20px; }

@media (prefers-reduced-motion:reduce){
    .bq-rs-promo *{ transition:none !important; }
}


/* ---------------------------------------------------------------------
   TALL VARIANT — the sidebar panel.

   Same green surface as the short widget, with an eyebrow, a ticked list
   and a footnote added. It replaced a separate ink signup banner that sat
   underneath the short promo. Two conversion panels in one 300px rail
   split the click and forced the second to restate the first, so the two
   were folded into one longer panel.

   An earlier attempt made that second panel a cream card with green
   trim. It looked wrong and the reason is worth keeping: on this warm
   ochre section a hue either owns a whole surface, the way --promo-bg
   owns this one, or it does not appear. Small green marks scattered on a
   yellow ground read as a mistake rather than an accent. Everything here
   sits ON the green, so the question does not arise.
   --------------------------------------------------------------------- */
.bq-rs-promo--tall{ padding:24px 24px 20px; }
.bq-rs-promo__eyebrow{
    margin:0 0 10px;
    font-size:var(--rs-label, 11.5px); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--promo-dim);
}
.bq-rs-promo__list{
    margin:0 0 18px; padding:14px 0 0; list-style:none;
    border-top:1px solid rgba(255,255,255,.18);
}
.bq-rs-promo__list li{
    display:flex; align-items:flex-start; gap:9px;
    margin:0 0 9px; padding:0;
    font-size:var(--rs-meta, 13px); line-height:1.5;
    color:var(--promo-ink);
}
.bq-rs-promo__list li:last-child{ margin-bottom:0; }
/* 0.5px stroke for the same reason the verdict glyphs carry one, see
   section 13: the tick is not in Lato, falls back to a symbol font that
   ships one weight, and reads as a hairline without it. */
.bq-rs-promo__tick{
    flex:0 0 auto; margin-top:1px;
    color:var(--promo-ink); font-weight:900;
    -webkit-text-stroke:.5px currentColor;
}
.bq-rs-promo__foot{
    margin:12px 0 0; text-align:center;
    font-size:var(--rs-label, 11.5px); color:var(--promo-dim);
}

/* Sticky belongs to the CONTEXT, not the component, so it is scoped to the
   two rails rather than set on .bq-rs-promo--tall itself: the same panel
   dropped into a content column should not pin. .bq-rs-ad used to carry
   this and the behaviour was lost when it was swapped out. */
.bq-rs-page .bq-rs-adcol .bq-rs-promo--tall,
.bq-rs-page .bq-rs-listing-rail .bq-rs-promo--tall{
    position:sticky; top:var(--rs-stick);
}


/* =====================================================================
   21. LISTING — chips, feed cards, pager
   ===================================================================== */

.bq-rs-page .bq-rs-chips{
    display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px;
}
.bq-rs-page .bq-rs-chip{
    padding:8px 16px; text-decoration:none; border-radius:100px;
    background:#f9f8f3;
    font-size:var(--rs-label); font-weight:600; color:var(--rs-muted);
    transition:color .14s, background-color .14s;
}
.bq-rs-page .bq-rs-chip:hover{ color:var(--rs-ink); background:#f9f8f3; }
.bq-rs-page .bq-rs-chip.is-active{ background:var(--rs-ink); color:#fff; }

.bq-rs-page .bq-rs-feed{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px;
}
.bq-rs-page .bq-rs-card--lead{ grid-column:1 / -1; }

.bq-rs-page .bq-rs-card{
    background:#f9f8f3; border-radius:var(--rs-radius);
    overflow:hidden; transition:transform .18s ease;
}
.bq-rs-page .bq-rs-card:hover{ transform:translateY(-3px); }
.bq-rs-page .bq-rs-card__hit{
    display:flex; flex-direction:column; gap:12px; height:100%;
    padding:24px 26px 22px; text-decoration:none;
}
.bq-rs-page .bq-rs-card--img .bq-rs-card__hit{ padding-top:0; }
/* Wrapper around everything except the thumbnail. Inherits the column layout
   the hit used to own, so a grid card is unchanged, and gives the lead card
   something to sit beside its image. */
.bq-rs-page .bq-rs-card__body{
    display:flex; flex-direction:column; gap:12px;
    flex:1 1 auto; min-width:0;
}
.bq-rs-page .bq-rs-card__thumb{
    display:block; margin:0 -26px 6px; overflow:hidden; background:#f9f8f3;
}
.bq-rs-page .bq-rs-card__thumb img{
    display:block; width:100%; height:auto;
    aspect-ratio:16 / 9; object-fit:cover;
    transition:transform .3s ease;
}
.bq-rs-page .bq-rs-card:hover .bq-rs-card__thumb img{ transform:scale(1.03); }

/* ---------------------------------------------------------------------
   LEAD CARD: image to the RIGHT of the headline, not above it.

   It used to run the thumbnail full-bleed across the top at 21:9. On a
   card that already spans the full feed width that produced a very large
   picture sitting above the title, so the first thing on /resources was
   an image rather than the name of the newest guide. The card keeps its
   wide box, the text leads, and the picture supports it from the right.

   row-reverse rather than reordering the markup: the thumbnail stays
   first in the DOM, where it is aria-hidden decoration, so the heading
   is still the first thing a screen reader meets inside the link.
   --------------------------------------------------------------------- */
.bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__hit{
    flex-direction:row-reverse; align-items:center;
    gap:34px; padding:26px 28px;
}
.bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__thumb{
    flex:0 0 38%; max-width:400px;
    margin:0; border-radius:var(--rs-radius-sm);
}
.bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__thumb img{
    aspect-ratio:4 / 3;
}
/* Non-lead cards and any lead card without an image keep the old crop. */
.bq-rs-page .bq-rs-card--lead:not(.bq-rs-card--img) .bq-rs-card__thumb img{ aspect-ratio:21 / 9; }

.bq-rs-page .bq-rs-card__top{
    display:flex; align-items:center; gap:10px;
    font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-card__tag{ color:var(--rs-ink); font-weight:600; }
.bq-rs-page .bq-rs-card__read::before{ content:"· "; color:var(--rs-rule); }
.bq-rs-page .bq-rs-card__t{
    margin:0; font-weight:700; line-height:1.35; color:var(--rs-ink); font-size:18px;
}
.bq-rs-page .bq-rs-card--lead .bq-rs-card__t{ font-size:31px; font-weight:400; line-height:1.18; }
.bq-rs-page .bq-rs-card__dek{
    margin:0; font-size:var(--rs-sm); line-height:1.65; color:var(--rs-body); flex:1 1 auto;
}
.bq-rs-page .bq-rs-card--lead .bq-rs-card__dek{ font-size:16px; max-width:70ch; }
.bq-rs-page .bq-rs-card__foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:auto; padding-top:14px;
    font-size:var(--rs-meta); color:var(--rs-muted);
}
.bq-rs-page .bq-rs-card__go{ color:var(--rs-ink); font-weight:600; }

.bq-rs-page .bq-rs-empty{
    padding:40px 24px; text-align:center; color:var(--rs-muted);
    background:#f9f8f3; border-radius:var(--rs-radius);
}

.bq-rs-page .bq-rs-pager{
    display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:32px 0 0;
    font-size:var(--rs-label); font-weight:600;
}
.bq-rs-page .bq-rs-pager__n,
.bq-rs-page .bq-rs-pager__step{
    display:inline-grid; place-items:center; min-width:38px; padding:9px 14px;
    background:#f9f8f3; border-radius:100px;
    color:var(--rs-muted); text-decoration:none;
}
.bq-rs-page .bq-rs-pager__n:hover,
.bq-rs-page .bq-rs-pager__step:hover{ color:var(--rs-ink); background:#f9f8f3; }
.bq-rs-page .bq-rs-pager__n.is-active{ background:var(--rs-ink); color:#fff; }

.bq-rs-page .bq-rs-railcta{
    margin:0; padding:22px;
    background:#f9f8f3; border-radius:var(--rs-radius);
}
.bq-rs-page .bq-rs-railcta__t{
    margin:0 0 8px; font-size:15px; font-weight:700; color:var(--rs-ink); line-height:1.4;
}
.bq-rs-page .bq-rs-railcta__d{
    margin:0 0 16px; font-size:var(--rs-meta); line-height:1.6; color:var(--rs-body);
}
.bq-rs-page .bq-rs-railcta .bq-rs-btn{ display:block; text-align:center; }


/* =====================================================================
   23. TOPIC TILES + SECTION BLOCKS  — the /learn hub, and nothing else
   ---------------------------------------------------------------------
   /resources is flat: one listing page, no hub. /learn is clustered, so it
   has a level this section never needed — /learn lists TOPICS, and each
   topic then lists its articles.

   A tile is a feed card with the article furniture removed: a count where
   the read time would be, the topic name, its tagline, and the way in. It
   reuses the card's tint, radius and hover lift deliberately, rather than
   inventing a second card shape for the one page that needs it.
   ===================================================================== */

.bq-rs-page .bq-rs-topics{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px;
}
.bq-rs-page .bq-rs-topic{
    display:flex; flex-direction:column; gap:10px;
    padding:26px 28px; text-decoration:none;
    background:#f9f8f3; border-radius:var(--rs-radius);
    transition:transform .18s ease;
}
.bq-rs-page .bq-rs-topic:hover{ transform:translateY(-3px); }
.bq-rs-page .bq-rs-topic__n{ font-size:var(--rs-meta); color:var(--rs-muted); }
.bq-rs-page .bq-rs-topic__t{
    margin:0; font-weight:700;
    font-size:25px; line-height:1.2; letter-spacing:-.01em; color:var(--rs-ink);
}
.bq-rs-page .bq-rs-topic__d{
    margin:0; font-size:var(--rs-sm); line-height:1.65; color:var(--rs-body);
    flex:1 1 auto;
}
.bq-rs-page .bq-rs-topic__go{
    margin-top:6px; font-size:var(--rs-meta); font-weight:600; color:var(--rs-ink);
}

/* The "show more" control under a folded feed. The button itself is the
   generic .bq-rs-btn pill from section 16; this only places it.

   .is-folded is set by resources.js, never by PHP — the server always
   renders every card, so with the script off there is nothing folded and
   nothing to reveal. See the note in templates/learn-hub.php. */
/* [hidden] HAS TO BE SPELLED OUT AGAINST EVERY CLASS THAT SETS display.
   The UA stylesheet's `[hidden]{display:none}` is specificity 0,1,0 and
   loses to `.bq-rs-page .bq-rs-btn{display:inline-block}` at 0,2,0 — so the
   button stayed on screen with the attribute correctly set, which is a
   confusing failure to debug because the DOM looks right. Naming the class
   alongside the attribute puts it at 0,3,0 and settles it.

   Do not replace these with a bare `.bq-rs-page [hidden]`: that ties at
   0,2,0 with .bq-rs-btn and would then depend on source order. */
.bq-rs-page .bq-rs-feed .bq-rs-card[hidden],
.bq-rs-page .bq-rs-btn[hidden]{ display:none; }

.bq-rs-page .bq-rs-foldmore{
    display:flex; justify-content:center; margin:30px 0 0;
}

/* A titled block in a listing column — the topic grid and the "recently
   updated" feed under it. Same serif head as the FAQ and related sections,
   so the hub has one heading treatment rather than a third. */
.bq-rs-page .bq-rs-block{ margin:52px 0 0; }
.bq-rs-page .bq-rs-block:first-child{ margin-top:0; }
.bq-rs-page .bq-rs-block__head{
    margin:0 0 20px; font-weight:700;
    font-size:var(--rs-h2); line-height:1.22; letter-spacing:-.01em;
    color:var(--rs-ink);
}


/* =====================================================================
   22. RESPONSIVE
   ---------------------------------------------------------------------
   1400px is where three columns stop fitting: a rail, a 300px creative and
   a readable measure need about that much. Below it the ad leaves the grid
   and goes full width under the content, where it is no longer sticky — a
   300px column squeezed beside a 480px measure serves neither.
   ===================================================================== */

@media (max-width:1400px){
    .bq-rs-page .bq-rs-layout{ grid-template-columns:var(--rs-rail) minmax(0,1fr); }
    .bq-rs-page .bq-rs-adcol{
        grid-column:1 / -1; grid-row:2;
        align-self:auto; display:flex; justify-content:center;
        flex-wrap:wrap; align-items:flex-start; gap:22px;
    }
    /* Full-width row now, so there is nothing to stick within. */
    .bq-rs-page .bq-rs-adcol .bq-rs-ad{ position:static; margin-bottom:0; }
    .bq-rs-page .bq-rs-adcol .bq-rs-promo{ max-width:340px; margin-bottom:0; }
    /* Full-width row now, so nothing sticks and the panel takes the same cap
       the short promo does rather than stretching to 1400px. */
    .bq-rs-page .bq-rs-adcol .bq-rs-promo--tall{
        position:static; max-width:340px; margin-bottom:0;
    }
    /* Lead card: below this width the feed column is narrow enough that a
       38% image leaves the headline in a gutter, so it goes back on top. */
    .bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__hit{
        flex-direction:column; align-items:stretch; gap:12px; padding:24px 26px 22px;
        padding-top:0;
    }
    .bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__thumb{
        flex:0 0 auto; max-width:none; margin:0 -26px 6px; border-radius:0;
    }
    .bq-rs-page .bq-rs-card--lead.bq-rs-card--img .bq-rs-card__thumb img{ aspect-ratio:21 / 9; }
}

@media (max-width:1180px){
    .bq-rs-page{ --rs-pad:32px; --rs-h1:37px; --rs-h2:24px; }
    .bq-rs-page .bq-rs-layout{ gap:34px; }
    .bq-rs-page .bq-rs-hero__card{ padding:38px 34px; gap:36px; }
    .bq-rs-page .bq-rs-listing-layout{ gap:34px; grid-template-columns:minmax(0,1fr) 300px; }
    .bq-rs-page .bq-rs-listing-rail .bq-rs-ad__box{ min-height:250px; }
}

@media (max-width:980px){
    /* Hero stacks: text first, then the image. */
    .bq-rs-page .bq-rs-hero__card{ grid-template-columns:minmax(0,1fr); gap:28px; }
    .bq-rs-page .bq-rs-hero__media img{ aspect-ratio:16 / 9; }

    .bq-rs-page .bq-rs-layout,
    .bq-rs-page .bq-rs-listing-layout{ grid-template-columns:1fr; gap:26px; }
    .bq-rs-page .bq-rs-listing-rail{ position:static; grid-column:1; }
    .bq-rs-page .bq-rs-main{ grid-column:1; grid-row:2; max-width:none; }

    /* ------------------------------------------------------------------
       MOBILE READING ORDER. On desktop the rail is one sticky <aside>
       holding the TOC and the sibling list. Stacked naively that puts BOTH
       above the article, so a reader arriving from search meets a list of
       other guides before a word of the one they clicked.

       display:contents dissolves the aside so its children become grid
       items and can be ordered independently:
           row 1  TOC (collapsed behind a toggle)
           row 2  article
           row 3  more-in-group
           row 4  ad
       ------------------------------------------------------------------ */
    .bq-rs-page .bq-rs-rail{
        display:contents; position:static; max-height:none; overflow:visible;
    }
    .bq-rs-page .bq-rs-rail > .bq-rs-toc{ grid-column:1; grid-row:1; margin:0; padding:0; background:none; }
    .bq-rs-page .bq-rs-rail > .bq-rs-rail-panel{
        grid-column:1; grid-row:3; margin:0; padding:22px 24px;
        background:#f9f8f3; border-radius:var(--rs-radius);
    }
    .bq-rs-page .bq-rs-adcol{ grid-column:1; grid-row:4; }

    .bq-rs-page .bq-rs-toc__toggle{
        display:flex; align-items:center; justify-content:space-between; gap:10px;
        width:100%; padding:14px 20px; cursor:pointer;
        background:#f9f8f3; border:0; border-radius:var(--rs-radius);
        font-family:var(--rs-sans); font-size:var(--rs-label); font-weight:700;
        color:var(--rs-ink); text-align:left;
    }
    .bq-rs-page .bq-rs-toc__toggle::after{ content:"+"; font-size:17px; line-height:1; }
    .bq-rs-page .bq-rs-toc__toggle[aria-expanded="true"]::after{ content:"\2212"; }
    .bq-rs-page .bq-rs-toc__label{ display:none; }
    .bq-rs-page .bq-rs-toc__list{
        display:none; margin-top:6px; padding:16px 20px;
        background:#f9f8f3; border-radius:var(--rs-radius);
    }
    .bq-rs-page .bq-rs-toc.is-open .bq-rs-toc__list{ display:block; }

    .bq-rs-page .bq-rs-feed,
    .bq-rs-page .bq-rs-topics{ grid-template-columns:1fr; }
    .bq-rs-page .bq-rs-card--lead .bq-rs-card__t{ font-size:25px; }
}

@media (max-width:680px){
    .bq-rs-page{ --rs-h1:29px; --rs-h2:22px; --rs-h3:17px; --rs-dek:16px; --rs-pad:22px; }
    .bq-rs-page .bq-rs-shell{ padding:0 16px; }
    .bq-rs-page .bq-rs-hero{ padding:16px 0 0; }
    .bq-rs-page .bq-rs-hero__card{ padding:26px 22px; border-radius:var(--rs-radius-sm); }
    .bq-rs-page .bq-rs-hero--tall .bq-rs-hero__card{ padding:30px 22px; }
    .bq-rs-page .bq-rs-layout{ padding:22px 0 60px; }
    .bq-rs-page .bq-rs-main{ border-radius:var(--rs-radius-sm); }
    .bq-rs-page .bq-rs-indexblock{ padding:24px 22px 26px; }
    .bq-rs-page .bq-rs-seq{ grid-template-columns:1fr; }
    .bq-rs-page .bq-rs-seq__link--next{ text-align:left; align-items:flex-start; }
    .bq-rs-page .bq-rs-seq__link.is-empty{ display:none; }
    .bq-rs-page .bq-rs-related__grid{ grid-template-columns:1fr; }
    .bq-rs-page .bq-rs-index{ grid-template-columns:1fr; gap:24px; }
    .bq-rs-page .bq-rs-ad__box{ min-height:250px; }
}

@media (prefers-reduced-motion:reduce){
    .bq-rs-page *{ transition:none !important; }
    .bq-rs-page .bq-rs-card:hover,
    .bq-rs-page .bq-rs-topic:hover{ transform:none; }
    .bq-rs-page .bq-rs-card:hover .bq-rs-card__thumb img{ transform:none; }
}

@media print{
    .bq-rs-page .bq-rs-rail,
    .bq-rs-page .bq-rs-listing-rail,
    .bq-rs-page .bq-rs-adcol,
    .bq-rs-page .bq-rs-cta,
    .bq-rs-page .bq-rs-seq{ display:none; }
    .bq-rs-page .bq-rs-hero__card{ background:none; padding:0; }
    .bq-rs-page .bq-rs-main{ padding:0; max-width:none; background:none; }
    .bq-rs-page .bq-rs-layout,
    .bq-rs-page .bq-rs-listing-layout{ grid-template-columns:1fr; }
}