/* ============================================================================
   AIToolsay — Related Content (§RCX)                      redesigned 2026-09-24
   ----------------------------------------------------------------------------
   Markup: components/resources/views/partials/related-content.blade.php,
   included by components/public/premium-article.blade.php under every blog
   post and tool page that App\Support\RelatedContent::forPage() feeds
   (§LINKX):
       post page → up to 5 curated tools ("Free AI tools to try"), then up to
                   3 related posts ("Keep reading")
       tool page → up to 3 posts that list the tool (one group, no group head)

   ONE design with the author box directly above it (§AAB, author-box.css):
   the same tokens (brand ramp, §DKSYS tone plates, ground/card/ink/line),
   the home-hero sky, the house eyebrow + four-point sparkle, the accent-
   gradient word and the soft brand pill that fills on hover. Change both
   together.

   LAYOUT answers to container widths, never the viewport: the rail sits in
   a 9/12 column beside the blog sidebar at one width and much wider at
   another, so a viewport breakpoint would be wrong in one of them.
     GROUP (container `rcxg`) decides the columns, §6:
         < 560   one column
         ≥ 560   two columns; an odd last card spans both
         ≥ 720   by count: 3 → 3 · 4 → 2 × 2 · 5 → 3 over 2 (six tracks)
         ≥ 1180  4 → 4 across
         ≥ 1400  5 → 5 across
       No count ever leaves an orphan beside an empty track.
     CELL (container `rcxc`) decides how a card lays itself out, §8/§9:
         tool card  tile (plate + kicker, title, text, pill); ≥ 480 a row
         post card  stack (cover on top); ≥ 540 a row (cover | text)
     PHONES (group < 560, §12) override both: compact rows, so five tools
     and three posts stay a short scroll.
   Text is never clamped or ellipsised — every title and line wraps.

   SPECIFICITY — the traps this file is written around (same as §AAB):
     · custom.ltr.css styles h2/h3 at (0,2,2): the headings are `.rcx-h`,
       styled at (0,4,0).
     · floating-widgets paints `.card a:hover` #2060C0 at (0,2,1) and
       `body.theme-dark .card a:hover` #60A4F5 at (0,3,2), and this rail
       lives inside the content `.card`. §2 locks each link's colour at
       (0,4,0); every text element also carries its own colour.
     · custom.ltr.css rings every a at (0,2,2) and in LIGHT mode adds
       `border-radius:6px` at (0,3,2); premium-article.css adds (0,2,0) +
       8px. §11 answers at (0,4,1) and keeps each element's own radius.
     · custom.ltr.css `#content-box img:not(.img-fluid)…` (1,3,3) rounds,
       shadows and height:auto's every article image: covers carry
       `img-fluid`, its built-in opt-out.
     · premium-article.css switches off every animation and transition in
       `.pa-modules` under prefers-reduced-motion, this rail included.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   0. Tokens — light (dark twin in §14). Brand values mirror author-box.css §0.
   ------------------------------------------------------------------------ */
.rcx {
    --rcx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --rcx-brand: #3680ED;
    --rcx-brand-ink: #1B5BB5;
    --rcx-brand-plate: #1C6FEB;
    --rcx-sky: #60A4F5;
    --rcx-soft: #EAF2FD;
    --rcx-line-brand: #CFE0FA;
    --rcx-fill: linear-gradient(135deg, #2C6FD6 0%, #2865C5 34%, #1B4E9C 100%);
    --rcx-fill-glow: rgba(53, 127, 236, .40);
    --rcx-accent-text: linear-gradient(100deg, #3680ED 6%, #2060C0 58%, #1B5BB5 100%);
    --rcx-focus-ring: 0 0 0 3px var(--rcx-ground), 0 0 0 5.5px var(--rcx-brand);

    --rcx-ground: #FFFFFF;
    --rcx-ground-tint: linear-gradient(180deg, #F4F8FE 0, rgba(244, 248, 254, 0) 360px);
    --rcx-card: #FFFFFF;
    --rcx-media: #EAF2FD;

    --rcx-ink: #0B1220;
    --rcx-ink-2: #3D4757;
    --rcx-ink-3: #56616F;

    --rcx-line: #E7ECF3;
    --rcx-line-strong: #D6DEE9;

    --rcx-sh-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
    --rcx-sh-card: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 20px -12px rgba(16, 24, 40, .14);
    --rcx-sh-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 46px -20px rgba(16, 24, 40, .26);

    --rcx-glow-1: rgba(54, 128, 237, .16);
    --rcx-glow-2: rgba(14, 165, 233, .12);
    --rcx-spark: #3680ED;
    --rcx-dot: rgba(54, 128, 237, .16);

    --rcx-ease: cubic-bezier(.22, .61, .36, 1);
    --rcx-spring: cubic-bezier(.34, 1.56, .64, 1);
    --rcx-dir: 1;

    /* The section's own tone: what the group icons and any card without a
       `data-tone` read. */
    --plate: var(--rcx-brand-plate);
    --tink: var(--rcx-brand-ink);
    --wash: rgba(54, 128, 237, .10);
    --edge: #3680ED;
    --edge-2: #8CBEFA;

    container: rcx / inline-size;
    position: relative;
    isolation: isolate;
    /* 14px at phone widths: the rail sits inside the page gutter AND the
       article card's padding, so every pixel here is a pixel of card text. */
    padding: clamp(14px, 3vw, 40px);
    border-radius: 26px;
    background-color: var(--rcx-ground);
    background-image: var(--rcx-ground-tint);
    border: 1px solid var(--rcx-line);
    box-shadow: var(--rcx-sh-soft);
    color: var(--rcx-ink-2);
    font-family: var(--rcx-font);
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}
.rcx *, .rcx *::before, .rcx *::after { box-sizing: border-box; }
.rcx ul { list-style: none; margin: 0; padding: 0; }
.rcx p { margin: 0; }
.rcx a { text-decoration: none; }
.rcx svg { flex: none; }


/* ---------------------------------------------------------------------------
   1. Tones — the §DKSYS plates (white glyph ≥ 4.6:1 on every one) plus the
   text ink, hover wash and edge light that go with each. Tool cards take one
   each in turn, the way the homepage library cycles its cards; posts stay on
   the brand blue.
   ------------------------------------------------------------------------ */
.rcx [data-tone="blue"]    { --plate: var(--dk-tone-blue-plate, #1B5BB5);    --tink: #1B5BB5; --wash: rgba(54, 128, 237, .10); --edge: #3680ED; --edge-2: #8CBEFA; }
.rcx [data-tone="violet"]  { --plate: var(--dk-tone-violet-plate, #5B33C4);  --tink: #5B33C4; --wash: rgba(124, 58, 237, .09); --edge: #7C5CE6; --edge-2: #C4B1F8; }
.rcx [data-tone="emerald"] { --plate: var(--dk-tone-emerald-plate, #08795A); --tink: #08795A; --wash: rgba(16, 185, 129, .11); --edge: #10B981; --edge-2: #7FD9B0; }
.rcx [data-tone="amber"]   { --plate: var(--dk-tone-amber-plate, #A85B08);   --tink: #9A5307; --wash: rgba(245, 158, 11, .12); --edge: #F59E0B; --edge-2: #F5C77E; }
.rcx [data-tone="cyan"]    { --plate: var(--dk-tone-cyan-plate, #0A6E88);    --tink: #0A6E88; --wash: rgba(6, 182, 212, .11);  --edge: #06B6D4; --edge-2: #86D8EA; }
.rcx [data-tone="rose"]    { --plate: var(--dk-tone-rose-plate, #B31D3C);    --tink: #B31D3C; --wash: rgba(225, 29, 72, .08);  --edge: #F43F5E; --edge-2: #F7A8B8; }


/* ---------------------------------------------------------------------------
   2. Colour LOCKS for :hover, outside any (hover:hover) query and FIRST in
   the file. On touch a tap leaves :hover set, and floating-widgets'
   `.card a:hover` (0,2,1) / `body.theme-dark .card a:hover` (0,3,2) would
   repaint these links. Each lock has the same specificity as its real hover
   rule further down, which therefore wins wherever a mouse exists.
   ------------------------------------------------------------------------ */
.rcx .rcx-grid .rcx-cell .rcx-card:hover { color: var(--rcx-ink-2); }
.rcx .rcx-head .rcx-btn:hover            { color: var(--rcx-brand-ink); }


/* ---------------------------------------------------------------------------
   3. Sky — glows, dot texture and sparkles (the home hero's, kept to the
   header band so the cards sit on a calm ground). The layer clips itself;
   the section does not, so a lifted card's shadow is never cut off.
   ------------------------------------------------------------------------ */
.rcx .rcx-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.rcx .rcx-glow { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.rcx .rcx-glow--1 {
    width: min(620px, 90%);
    left: -16%;
    top: -300px;
    background: radial-gradient(closest-side, var(--rcx-glow-1), rgba(54, 128, 237, 0));
    animation: rcx-breathe 9s ease-in-out infinite;
}
.rcx .rcx-glow--2 {
    width: min(520px, 76%);
    right: -12%;
    top: -260px;
    background: radial-gradient(closest-side, var(--rcx-glow-2), rgba(14, 165, 233, 0));
    animation: rcx-breathe 12s ease-in-out -5s infinite;
}
.rcx .rcx-dots {
    position: absolute;
    inset: 0 0 auto 0;
    height: 340px;
    background-image: radial-gradient(var(--rcx-dot) 1.2px, transparent 1.7px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(60% 90% at 14% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
    mask-image: radial-gradient(60% 90% at 14% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
}
.rcx .rcx-spark {
    position: absolute;
    width: var(--s, 13px);
    height: var(--s, 13px);
    color: var(--rcx-spark);
    opacity: .2;
    animation: rcx-twinkle var(--t, 4.4s) ease-in-out var(--dl, 0s) infinite;
}
.rcx .rcx-spark svg { display: block; width: 100%; height: 100%; }
.rcx .rcx-spark--1 { --s: 15px; left: 3%;   top: 16px; --dl: -.4s; }
.rcx .rcx-spark--2 { --s: 10px; left: 44%;  top: 12px; --dl: -1.6s; --t: 5.2s; }
.rcx .rcx-spark--3 { --s: 12px; right: 4%;  top: 22px; --dl: -2.4s; }
.rcx .rcx-spark--4 { --s: 17px; right: 27%; top: 10px; --dl: -.9s; --t: 5.6s; }
.rcx .rcx-spark--5 { --s: 9px;  left: 62%;  top: 70px; --dl: -3.1s; }


/* ---------------------------------------------------------------------------
   4. Header — eyebrow, title with the accent word, lead, the hub button
   ------------------------------------------------------------------------ */
.rcx .rcx-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 28px;
    margin-bottom: clamp(22px, 3cqi, 34px);
}
.rcx .rcx-head-copy { flex: 1 1 420px; min-width: 0; }
.rcx .rcx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px 6px 11px;
    border-radius: 999px;
    background: var(--rcx-soft);
    border: 1px solid var(--rcx-line-brand);
    color: var(--rcx-brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rcx .rcx-eyebrow svg { width: 13px; height: 13px; color: var(--rcx-brand); }

.rcx .rcx-head .rcx-h.rcx-title {
    max-width: 100%;
    margin: 14px 0 0;
    font-family: inherit;
    font-size: clamp(26px, 4.2cqi, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--rcx-ink);
    overflow-wrap: break-word;
}
.rcx .rcx-accent {
    color: var(--rcx-brand);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .rcx .rcx-accent {
        background-image: var(--rcx-accent-text);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/* The homepage band heading's sparkle cluster, scaled to the title. It is
   glued to the accent word (`.rcx-nowrap`) so it never wraps onto a line
   of its own. */
.rcx .rcx-nowrap { white-space: nowrap; }
.rcx .rcx-title-spark {
    position: relative;
    display: inline-block;
    width: .95em;
    height: .8em;
    margin-inline-start: .22em;
    vertical-align: .1em;
    color: var(--rcx-brand);
}
.rcx .rcx-title-spark svg { position: absolute; display: block; }
.rcx .rcx-title-spark svg:nth-child(1) { width: .56em; height: .56em; left: 0;    top: .16em; animation: rcx-twinkle 3.6s ease-in-out infinite; }
.rcx .rcx-title-spark svg:nth-child(2) { width: .32em; height: .32em; left: .52em; top: -.1em; animation: rcx-twinkle 4.4s ease-in-out -1.2s infinite; }
.rcx .rcx-title-spark svg:nth-child(3) { width: .2em;  height: .2em;  left: .62em; top: .56em; animation: rcx-twinkle 5s ease-in-out -2.4s infinite; }

.rcx .rcx-lead {
    max-width: 62ch;
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--rcx-ink-2);
}

/* Hub button — the homepage "View all tools" pill: tinted at rest, filled
   with the brand gradient on hover, the arrow dot tips forward. */
.rcx .rcx-head .rcx-btn {
    --rcx-fr: 999px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    min-height: 48px;
    padding: 0 6px 0 20px;
    border-radius: 999px;
    background-color: var(--rcx-soft);
    box-shadow: inset 0 0 0 1px var(--rcx-line-brand);
    color: var(--rcx-brand-ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform .3s var(--rcx-ease), box-shadow .3s var(--rcx-ease), color .22s ease;
}
.rcx .rcx-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--rcx-fill);
    opacity: 0;
    transition: opacity .25s ease;
}
.rcx .rcx-btn-dot {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rcx-brand-plate);
    color: #FFFFFF;
    transition: transform .45s var(--rcx-spring), background-color .25s ease;
}
.rcx .rcx-btn-dot svg { width: 16px; height: 16px; }
.rcx .rcx-btn:active { transform: translateY(0) scale(.98); }
@media (hover: hover) {
    .rcx .rcx-head .rcx-btn:hover {
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), 0 16px 30px -12px var(--rcx-fill-glow);
    }
    .rcx .rcx-btn:hover::before { opacity: 1; }
    .rcx .rcx-btn:hover .rcx-btn-dot { background: rgba(255, 255, 255, .22); transform: rotate(-14deg) scale(1.06); }
}


/* ---------------------------------------------------------------------------
   5. Group head — plate, title, count, a hairline that runs to the edge
   ------------------------------------------------------------------------ */
.rcx .rcx-group { container: rcxg / inline-size; }
.rcx .rcx-group + .rcx-group { margin-top: clamp(26px, 3.4cqi, 40px); }
.rcx .rcx-ghead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.rcx .rcx-gico {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #FFFFFF;
    background-color: var(--plate);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 18px -8px var(--rcx-fill-glow);
}
.rcx .rcx-gico svg { width: 18px; height: 18px; }
.rcx .rcx-ghead .rcx-h.rcx-gtitle {
    min-width: 0;
    margin: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--rcx-ink);
}
.rcx .rcx-gcount {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--rcx-soft);
    box-shadow: inset 0 0 0 1px var(--rcx-line-brand);
    color: var(--rcx-brand-ink);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* The hairline gives way first: it has no minimum, so on a phone it
   vanishes before the heading beside it is forced onto two lines. */
.rcx .rcx-gline {
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--rcx-line-strong), transparent);
}


/* ---------------------------------------------------------------------------
   6. Grid — columns by the GROUP's width and the item COUNT (`data-n`)
   ------------------------------------------------------------------------ */
.rcx .rcx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.rcx .rcx-cell {
    container: rcxc / inline-size;
    display: flex;
    min-width: 0;
}
@container rcxg (min-width: 560px) {
    .rcx .rcx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rcx .rcx-grid > .rcx-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 720, not wider: a 1280px laptop beside the blog sidebar gives the group
   ~780px, and three 240px columns read better there than two tall ones. */
@container rcxg (min-width: 720px) {
    .rcx .rcx-grid { gap: 18px; }
    .rcx .rcx-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rcx .rcx-grid[data-n="3"] > .rcx-cell:last-child:nth-child(odd) { grid-column: auto; }
    /* Five = three over two: six tracks, the first row spans 2 each, the
       second 3 each — both rows full, no orphan. */
    .rcx .rcx-grid[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rcx .rcx-grid[data-n="5"] > .rcx-cell { grid-column: span 2; }
    .rcx .rcx-grid[data-n="5"] > .rcx-cell:nth-child(n+4) { grid-column: span 3; }
}
@container rcxg (min-width: 1180px) {
    .rcx .rcx-grid[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container rcxg (min-width: 1400px) {
    .rcx .rcx-grid[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rcx .rcx-grid[data-n="5"] > .rcx-cell,
    .rcx .rcx-grid[data-n="5"] > .rcx-cell:nth-child(n+4) { grid-column: auto; }
}


/* ---------------------------------------------------------------------------
   7. Card chassis — one link per card. Two pseudo-elements carry the hover:
      ::before  a spotlight wash in the card's tone that follows the pointer
                (--rcx-mx / --rcx-my, set by the partial's script; without
                JS it sits top-left)
      ::after   a light that runs round the edge (conic + @property; a
                browser without @property shows the static arc)
   ------------------------------------------------------------------------ */
@property --rcx-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.rcx .rcx-grid .rcx-card {
    --rcx-fr: 20px;
    position: relative;
    isolation: isolate;
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 20px;
    background: var(--rcx-card);
    border: 1px solid var(--rcx-line);
    box-shadow: var(--rcx-sh-card);
    color: var(--rcx-ink-2);
    -webkit-tap-highlight-color: transparent;
    transition: transform .45s var(--rcx-ease), box-shadow .45s var(--rcx-ease), border-color .3s ease;
}
.rcx .rcx-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle 340px at var(--rcx-mx, 16%) var(--rcx-my, 0%), var(--wash), transparent 64%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.rcx .rcx-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--rcx-ang), transparent 0 56%, var(--edge) 76%, var(--edge-2) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    animation: rcx-border-run 4.5s linear infinite paused;
    transition: opacity .45s ease;
    pointer-events: none;
}
.rcx .rcx-grid .rcx-card:active { transform: scale(.985); }

/* Hover and keyboard focus share one "lifted" state. */
@media (hover: hover) {
    .rcx .rcx-grid .rcx-cell .rcx-card:hover {
        color: var(--rcx-ink-2);
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--edge) 34%, var(--rcx-line));
        box-shadow: var(--rcx-sh-lift), 0 26px 50px -32px var(--edge);
    }
    .rcx .rcx-card:hover::before { opacity: 1; }
    .rcx .rcx-card:hover::after { opacity: 1; animation-play-state: running; }
}

/* Title — the underline sweeps in under the words in the card's tone. */
.rcx .rcx-card .rcx-ctitle {
    display: block;
    margin: 0;
    font-size: 16.5px;
    font-weight: 750;
    line-height: 1.38;
    letter-spacing: -.012em;
    color: var(--rcx-ink);
    overflow-wrap: break-word;
}
.rcx .rcx-card .rcx-u {
    padding-bottom: 2px;
    background: linear-gradient(90deg, var(--edge), var(--edge-2)) 0 100% / 0 2px no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size .55s var(--rcx-ease);
}
.rcx .rcx-card .rcx-desc {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rcx-ink-2);
    overflow-wrap: break-word;
}
@media (hover: hover) {
    .rcx .rcx-card:hover .rcx-u { background-size: 100% 2px; }
}


/* ---------------------------------------------------------------------------
   8. Tool card — the tool's own glyph on a tone plate
        tile (default)   [plate] KICKER
                         Title
                         Text
                         [ Try it free          (→) ]
        row (cell ≥ 480) [plate] | kicker, title, text | [Try it free (→)]
   ------------------------------------------------------------------------ */
.rcx .rcx-card--tool {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "plate kicker"
        "body  body"
        "go    go";
    grid-template-rows: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 14px;
    padding: 18px;
}
.rcx .rcx-card--tool .rcx-plate  { grid-area: plate; }
.rcx .rcx-card--tool .rcx-kicker { grid-area: kicker; }
.rcx .rcx-card--tool .rcx-body   { grid-area: body; align-self: start; }
.rcx .rcx-card--tool .rcx-go     { grid-area: go; align-self: end; }
.rcx .rcx-card--tool .rcx-desc   { margin-top: 6px; }

.rcx .rcx-plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #FFFFFF;
    background-color: var(--plate);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 22px -10px var(--plate);
    transition: transform .55s var(--rcx-spring), box-shadow .4s ease;
}
.rcx .rcx-plate svg { position: relative; z-index: 1; width: 24px; height: 24px; }
/* A glint crosses the plate on hover. */
.rcx .rcx-plate::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
    transform: translateX(-100%);
    transition: transform .8s var(--rcx-ease);
    pointer-events: none;
}
.rcx .rcx-kicker {
    display: block;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tink);
    overflow-wrap: anywhere;
}
.rcx .rcx-body { display: block; min-width: 0; }
@media (hover: hover) {
    .rcx .rcx-card:hover .rcx-plate {
        transform: rotate(-7deg) scale(1.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 14px 26px -10px var(--plate);
    }
    .rcx .rcx-card:hover .rcx-plate::after { transform: translateX(100%); }
}

@container rcxc (min-width: 480px) {
    .rcx .rcx-card--tool {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "plate kicker go"
            "plate body   go";
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 18px;
        row-gap: 4px;
        padding: 18px 18px 18px 20px;
    }
    .rcx .rcx-card--tool .rcx-plate  { width: 56px; height: 56px; border-radius: 16px; }
    .rcx .rcx-card--tool .rcx-plate svg { width: 26px; height: 26px; }
    .rcx .rcx-card--tool .rcx-kicker { align-self: end; }
    .rcx .rcx-card--tool .rcx-go     { align-self: center; justify-self: end; }
    .rcx .rcx-card--tool .rcx-ctitle { font-size: 17px; }
}


/* ---------------------------------------------------------------------------
   9. Post card — the cover, set into the card
        stack (default)  [ cover 16:9 ]
                         TAG · 7 min read · date
                         Title / text
                         [ Read article         (→) ]
        row (cell ≥ 540) [ cover ] | meta, title, text, pill
   ------------------------------------------------------------------------ */
.rcx .rcx-card--post {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "info" "desc" "go";
    grid-template-rows: auto auto 1fr auto;
    padding: 8px 8px 16px;
}
.rcx .rcx-card--post .rcx-media { grid-area: media; aspect-ratio: 16 / 9; }
.rcx .rcx-card--post .rcx-info  { grid-area: info; padding: 16px 10px 0; }
.rcx .rcx-card--post .rcx-desc  { grid-area: desc; align-self: start; padding: 8px 10px 0; }
.rcx .rcx-card--post .rcx-go    { grid-area: go; align-self: end; margin: 16px 10px 0; }
.rcx .rcx-card--post .rcx-ctitle { font-size: 17px; }

.rcx .rcx-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    min-width: 0;
    border-radius: 12px;            /* concentric: card 20px − 8px inset */
    background: var(--rcx-media);
}
.rcx .rcx-media .rcx-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.001);
    transition: transform .9s var(--rcx-ease);
}
/* A post without a cover: its own glyph on the brand sky, never a blank box. */
.rcx .rcx-media.is-empty {
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(96, 164, 245, .35), rgba(96, 164, 245, 0) 60%),
        linear-gradient(135deg, #2C6FD6 0%, #1B4E9C 100%);
    color: #FFFFFF;
}
.rcx .rcx-media-ico { position: relative; z-index: 1; display: grid; place-items: center; }
.rcx .rcx-media-ico svg { width: 32px; height: 32px; opacity: .92; }
/* ::before = a glint that sweeps the cover · ::after = a shade that rises
   from the foot so the corner badge always reads. */
.rcx .rcx-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .26) 50%, transparent 66%);
    transform: translateX(-110%);
    transition: transform 1s var(--rcx-ease);
    pointer-events: none;
}
.rcx .rcx-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0) 42%, rgba(11, 18, 32, .42) 100%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.rcx .rcx-media-go {
    position: absolute;
    z-index: 3;
    inset-inline-end: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(11, 18, 32, .58);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    opacity: 0;
    transform: translate(calc(-6px * var(--rcx-dir)), 6px) scale(.8);
    transition: opacity .35s ease, transform .5s var(--rcx-spring), background-color .3s ease;
}
.rcx .rcx-media-go svg { width: 16px; height: 16px; }
@media (hover: hover) {
    .rcx .rcx-card:hover .rcx-media .rcx-img { transform: scale(1.06); }
    .rcx .rcx-card:hover .rcx-media::before { transform: translateX(110%); }
    .rcx .rcx-card:hover .rcx-media::after { opacity: 1; }
    .rcx .rcx-card:hover .rcx-media-go { opacity: 1; transform: none; background: var(--rcx-brand-plate); }
}

.rcx .rcx-info { display: block; min-width: 0; }
.rcx .rcx-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rcx-ink-3);
}
.rcx .rcx-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--rcx-soft);
    box-shadow: inset 0 0 0 1px var(--rcx-line-brand);
    color: var(--rcx-brand-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.rcx .rcx-fact { display: inline-flex; align-items: center; gap: 5px; }
.rcx .rcx-fact svg { width: 13px; height: 13px; color: var(--rcx-brand); }

/* The cover keeps 16:9 in every layout and is never cropped to fill a
   taller or wider box: the featured images carry their headline IN the
   picture, and `object-fit: cover` on another ratio cut it off at the
   edges ("2 CLAUDE AI" for "12 CLAUDE AI"). In the row it is centred
   against the text instead. */
@container rcxc (min-width: 540px) {
    .rcx .rcx-card--post {
        grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
        grid-template-areas:
            "media info"
            "media desc"
            "media go";
        grid-template-rows: auto 1fr auto;
        column-gap: 14px;
        padding: 8px;
    }
    .rcx .rcx-card--post .rcx-media { align-self: center; }
    .rcx .rcx-card--post .rcx-info  { padding: 18px 16px 0 6px; }
    .rcx .rcx-card--post .rcx-desc  { padding: 10px 16px 0 6px; }
    .rcx .rcx-card--post .rcx-go    { justify-self: start; margin: 18px 12px 12px 6px; }
    .rcx .rcx-card--post .rcx-ctitle { font-size: clamp(18px, 2.6cqi, 22px); line-height: 1.3; }
}


/* ---------------------------------------------------------------------------
   10. The pill — every card's button, the author box's soft brand pill.
   It fills with the brand gradient while its card is hovered or focused.
   ------------------------------------------------------------------------ */
.rcx .rcx-go {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 42px;
    padding: 0 5px 0 16px;
    border-radius: 999px;
    background-color: var(--rcx-soft);
    box-shadow: inset 0 0 0 1px var(--rcx-line-brand);
    color: var(--rcx-brand-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
    transition: color .25s ease, box-shadow .35s var(--rcx-ease);
}
.rcx .rcx-go::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--rcx-fill);
    opacity: 0;
    transition: opacity .3s ease;
}
.rcx .rcx-go-label { min-width: 0; }
.rcx .rcx-go-dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--rcx-brand-plate);
    box-shadow: 0 6px 14px -6px var(--rcx-fill-glow);
    transition: background-color .25s ease, box-shadow .3s ease;
}
.rcx .rcx-go-dot svg { width: 15px; height: 15px; transition: transform .45s var(--rcx-spring); }
@media (hover: hover) {
    .rcx .rcx-card:hover .rcx-go {
        color: #FFFFFF;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), 0 12px 24px -12px var(--rcx-fill-glow);
    }
    .rcx .rcx-card:hover .rcx-go::before { opacity: 1; }
    .rcx .rcx-card:hover .rcx-go-dot { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
    /* No --rcx-dir here: RTL mirrors the glyph with `scale`, which also
       mirrors this step, so +3px already points forward in both. */
    .rcx .rcx-card:hover .rcx-go-dot svg { transform: translateX(3px); }
}


/* ---------------------------------------------------------------------------
   11. Focus — beats the site's (0,2,2) ring, its light-mode (0,3,2) 6px
   radius and premium-article.css's (0,2,0) 8px radius. The keyboard gets
   the same lifted state as the mouse.
   ------------------------------------------------------------------------ */
body:not(.admin-shell) .rcx .rcx-card:focus-visible,
body:not(.admin-shell) .rcx .rcx-btn:focus-visible {
    outline: none;
    box-shadow: var(--rcx-focus-ring);
    border-radius: var(--rcx-fr, 20px);
}
body:not(.admin-shell) .rcx .rcx-card:focus-visible { transform: translateY(-4px); }
.rcx .rcx-card:focus-visible::before { opacity: 1; }
.rcx .rcx-card:focus-visible::after { opacity: 1; animation-play-state: running; }
.rcx .rcx-card:focus-visible .rcx-u { background-size: 100% 2px; }
.rcx .rcx-card:focus-visible .rcx-go { color: #FFFFFF; }
.rcx .rcx-card:focus-visible .rcx-go::before { opacity: 1; }
.rcx .rcx-card:focus-visible .rcx-go-dot { background: rgba(255, 255, 255, .2); }
.rcx .rcx-card:focus-visible .rcx-media-go { opacity: 1; transform: none; background: var(--rcx-brand-plate); }
body:not(.admin-shell) .rcx .rcx-btn:focus-visible { color: #FFFFFF; }
.rcx .rcx-btn:focus-visible::before { opacity: 1; }


/* ---------------------------------------------------------------------------
   12. Phones — group < 560. Placed AFTER the cell rules on purpose: at this
   width these win even where a card is wide enough for a row.
        tool  [plate] | kicker, title, text | (→)
        post  [thumb] | meta, title   then the text and the pill below
   ------------------------------------------------------------------------ */
@container rcxg (max-width: 559.98px) {
    .rcx .rcx-grid { gap: 12px; }
    .rcx .rcx-grid .rcx-card { border-radius: 18px; --rcx-fr: 18px; }

    .rcx .rcx-card--tool {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "plate kicker go"
            "plate body   go";
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 14px;
        row-gap: 3px;
        padding: 14px 12px 14px 14px;
    }
    .rcx .rcx-card--tool .rcx-plate  { align-self: start; width: 44px; height: 44px; border-radius: 13px; }
    .rcx .rcx-card--tool .rcx-plate svg { width: 22px; height: 22px; }
    .rcx .rcx-card--tool .rcx-kicker { align-self: end; font-size: 11px; }
    .rcx .rcx-card--tool .rcx-ctitle { font-size: 15.5px; }
    .rcx .rcx-card--tool .rcx-desc   { margin-top: 3px; font-size: 13.5px; line-height: 1.55; }
    /* The pill folds to its arrow: the whole card is the link. */
    .rcx .rcx-card--tool .rcx-go {
        align-self: center;
        justify-self: end;
        min-height: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }
    .rcx .rcx-card--tool .rcx-go::before { content: none; }
    .rcx .rcx-card--tool .rcx-go-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .rcx .rcx-card--tool .rcx-go-dot { width: 30px; height: 30px; }
    /* With no pill behind it, the dot must NOT take the pill's "on a fill"
       state (white at 20% — the arrow would vanish on a white card). */
    .rcx .rcx-card--tool:hover .rcx-go { box-shadow: none; }
    .rcx .rcx-card--tool:hover .rcx-go-dot,
    .rcx .rcx-card--tool:focus-visible .rcx-go-dot {
        background: var(--rcx-brand-plate);
        box-shadow: 0 8px 16px -6px var(--rcx-fill-glow);
    }
}
/* The thumb row needs ~340px, or the title column beside the thumbnail
   shrinks to a word or two per line; narrower groups keep the stack. */
@container rcxg (min-width: 340px) and (max-width: 559.98px) {
    .rcx .rcx-card--post {
        grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
        grid-template-areas:
            "media info"
            "desc  desc"
            "go    go";
        grid-template-rows: auto 1fr auto;
        column-gap: 14px;
        padding: 10px 10px 14px;
    }
    .rcx .rcx-card--post .rcx-media { align-self: start; border-radius: 10px; }
    .rcx .rcx-card--post .rcx-media-go { display: none; }
    .rcx .rcx-card--post .rcx-info  { padding: 2px 4px 0 0; }
    .rcx .rcx-card--post .rcx-meta  { gap: 5px 10px; margin-bottom: 7px; }
    .rcx .rcx-card--post .rcx-ctitle { font-size: 15.5px; line-height: 1.35; }
    .rcx .rcx-card--post .rcx-desc  { padding: 12px 4px 0; font-size: 13.5px; }
    .rcx .rcx-card--post .rcx-go    { justify-self: stretch; margin: 14px 4px 0; }
}
/* Narrow phones (most of them: a 360–430px screen leaves the group
   ~240–300px). The tool text drops under the plate row and takes the full
   width, instead of a sliver between the plate and the arrow. */
@container rcxg (max-width: 399.98px) {
    .rcx .rcx-card--tool {
        grid-template-areas:
            "plate kicker go"
            "body  body   body";
        column-gap: 12px;
        row-gap: 12px;
    }
    .rcx .rcx-card--tool .rcx-plate,
    .rcx .rcx-card--tool .rcx-kicker { align-self: center; }
}
/* …and below the thumb row's 340px a post keeps the stack, with slightly
   tighter type. Scoped to < 340 so it never reaches the thumb row. */
@container rcxg (max-width: 339.98px) {
    .rcx .rcx-card--post .rcx-info   { padding: 14px 8px 0; }
    .rcx .rcx-card--post .rcx-ctitle { font-size: 16px; }
    .rcx .rcx-card--post .rcx-desc   { padding: 7px 8px 0; font-size: 13.5px; }
    .rcx .rcx-card--post .rcx-go     { margin: 14px 8px 0; min-height: 40px; }
}


/* ---------------------------------------------------------------------------
   13. Motion
   ------------------------------------------------------------------------ */
@keyframes rcx-border-run { to { --rcx-ang: 360deg; } }
@keyframes rcx-breathe {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes rcx-twinkle {
    0%, 100% { opacity: .18; transform: scale(.62) rotate(0deg); }
    50%      { opacity: .95; transform: scale(1) rotate(45deg); }
}
@keyframes rcx-rise {
    from { opacity: .08; translate: 0 22px; }
    to   { opacity: 1;   translate: 0 0; }
}
/* Cards rise into place as they scroll into view — CSS-only, driven by the
   scroll position, so nothing waits on a script or an observer: a browser
   without scroll timelines simply shows them. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .rcx .rcx-grid > .rcx-cell {
            animation: rcx-rise auto linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}


/* ---------------------------------------------------------------------------
   14. Dark mode — a token swap (brand values = author-box.css §11)
   ------------------------------------------------------------------------ */
body.theme-dark .rcx {
    --rcx-brand: #60A4F5;
    --rcx-brand-ink: #8CBEFA;
    --rcx-brand-plate: #2572DF;
    --rcx-soft: rgba(54, 128, 237, .16);
    --rcx-line-brand: rgba(96, 164, 245, .30);
    --rcx-fill:
        linear-gradient(0deg, rgba(9, 18, 33, .34), rgba(9, 18, 33, .34)),
        linear-gradient(135deg, #357FEC 0%, #2B6BCC 34%, #1B4E9C 100%);
    --rcx-fill-glow: rgba(53, 127, 236, .52);
    --rcx-accent-text: linear-gradient(100deg, #60A4F5 6%, #4A8FE8 58%, #8CBEFA 100%);

    --rcx-ground: var(--dk-bg, #0E0E11);
    --rcx-ground-tint: linear-gradient(180deg, rgba(54, 128, 237, .07) 0, rgba(54, 128, 237, 0) 360px);
    --rcx-card: var(--dk-surface-2, #17171B);
    --rcx-media: var(--dk-surface-3, #1D1D22);

    --rcx-ink: var(--dk-text, #F4F5F7);
    --rcx-ink-2: var(--dk-text-2, #C7CAD1);
    --rcx-ink-3: var(--dk-text-3, #9AA0AB);

    --rcx-line: var(--dk-line, rgba(255, 255, 255, .10));
    --rcx-line-strong: var(--dk-line-strong, rgba(255, 255, 255, .16));

    --rcx-sh-soft: 0 1px 2px rgba(0, 0, 0, .40);
    --rcx-sh-card: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 22px -14px rgba(0, 0, 0, .55);
    --rcx-sh-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 26px 48px -18px rgba(0, 0, 0, .66);

    --rcx-glow-1: rgba(54, 128, 237, .20);
    --rcx-glow-2: rgba(56, 189, 248, .10);
    --rcx-spark: #A9CCFB;
    --rcx-dot: rgba(96, 164, 245, .14);

    --tink: var(--rcx-brand-ink);
    --wash: rgba(54, 128, 237, .16);
}
/* Label ink inverts with the surface (the pastel end of each ramp, all
   ≥ 7:1 on the card); the plates stay — they carry white in both themes. */
body.theme-dark .rcx [data-tone="blue"]    { --tink: #8CBEFA; --wash: rgba(54, 128, 237, .16); }
body.theme-dark .rcx [data-tone="violet"]  { --tink: #C4B1F8; --wash: rgba(139, 92, 246, .15); }
body.theme-dark .rcx [data-tone="emerald"] { --tink: #7FD9B0; --wash: rgba(16, 185, 129, .14); }
body.theme-dark .rcx [data-tone="amber"]   { --tink: #F5C77E; --wash: rgba(245, 158, 11, .13); }
body.theme-dark .rcx [data-tone="cyan"]    { --tink: #86D8EA; --wash: rgba(6, 182, 212, .13); }
body.theme-dark .rcx [data-tone="rose"]    { --tink: #F7A8B8; --wash: rgba(244, 63, 94, .13); }
@media (hover: hover) {
    body.theme-dark .rcx .rcx-grid .rcx-cell .rcx-card:hover { background-color: var(--dk-surface-3, #1D1D22); }
}
body.theme-dark .rcx .rcx-card:focus-visible { background-color: var(--dk-surface-3, #1D1D22); }
body.theme-dark .rcx .rcx-btn-dot,
body.theme-dark .rcx .rcx-go-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
body.theme-dark .rcx .rcx-media .rcx-img { filter: brightness(.92); }


/* ---------------------------------------------------------------------------
   15. RTL, reduced motion, forced colours
   ------------------------------------------------------------------------ */
[dir="rtl"] .rcx { --rcx-dir: -1; }
[dir="rtl"] .rcx .rcx-go-dot svg,
[dir="rtl"] .rcx .rcx-btn-dot svg,
[dir="rtl"] .rcx .rcx-media-go svg { scale: -1 1; }
[dir="rtl"] .rcx .rcx-gline { background: linear-gradient(270deg, var(--rcx-line-strong), transparent); }

@media (prefers-reduced-motion: reduce) {
    .rcx, .rcx *, .rcx *::before, .rcx *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .rcx .rcx-grid .rcx-cell .rcx-card:hover,
    body:not(.admin-shell) .rcx .rcx-card:focus-visible,
    .rcx .rcx-card:hover .rcx-plate,
    .rcx .rcx-card:hover .rcx-media .rcx-img,
    .rcx .rcx-head .rcx-btn:hover { transform: none; }
}
@media (forced-colors: active) {
    .rcx .rcx-accent { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
    .rcx .rcx-sky, .rcx .rcx-card::before, .rcx .rcx-card::after, .rcx .rcx-title-spark { display: none; }
    .rcx .rcx-grid .rcx-card, .rcx .rcx-go, .rcx .rcx-btn { border: 1px solid CanvasText; }
}
@media (max-width: 479.98px) {
    .rcx { border-radius: 22px; }
}