/* ═══════════════════════════════════════════════════════════════════════════
   public.css — the marketing site.
   ═══════════════════════════════════════════════════════════════════════════

   Written fresh, not ported. redmeto2's public layout loads Bootstrap from
   jsdelivr, Font Awesome from cdnjs and DM Sans from Google Fonts; this site's
   CSP is default-src 'self' with no CDN allowance, so that stylesheet would
   render an unstyled page and a console full of violations.

   Loaded after rs-tokens.css and Bootstrap, and WITHOUT rsflow.css — the admin
   shell sets html{font-size:87.5%} and .btn{font-size:.78rem !important}, which
   a hero cannot be built on top of. Here the browser's 16px default stands.

   MINIMALISTIC BUT MODERN, stated as rules so it stays that way:
     · white and --pub-bg-alt in alternating bands; no third background
     · one accent colour, used sparingly — buttons, a card numeral, the 3px
       rule on an active nav item. If everything is accented, nothing is
     · 1px borders at rest, shadow only on hover
     · no gradients except one very subtle charcoal in hero and footer
     · generous vertical rhythm via --pub-section-y, never ad-hoc margins
     · tabular numerals on every figure that sits in a column
     · prefers-reduced-motion respected on every transition, no exceptions
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Typeface ───────────────────────────────────────────────────────────────
   Open Sans, and it is NOT declared here any more.

   This file used to carry the @font-face block and redefine --rs-font /
   --rs-font-display, on the reasoning that the public site wanted Open Sans and
   the back office wanted to keep Inter — so changing the shared token would
   have re-typeset every admin screen as a side effect of a marketing decision.

   That reasoning held right up until the back office was asked for Open Sans
   too. Now both faces want the same font, so it is declared once in
   rs-tokens.css, which all four layouts load. Declaring the same six @font-face
   rules in two sheets is how one of them quietly goes stale.
   ────────────────────────────────────────────────────────────────────────── */



/* ── Reset and base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--rs-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pub-body);
    background: var(--pub-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--pub-accent-dk); text-decoration: none; }
a:hover { color: var(--pub-ink); text-decoration: underline; }

/* Visible focus, always. Removing it to tidy the design locks out anyone
   navigating by keyboard, which includes every screen-reader user. */
:focus-visible {
    outline: 2px solid var(--pub-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--pub-ink); color: #fff;
    padding: .7rem 1.1rem; border-radius: 0 0 var(--pub-radius) 0;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

[v-cloak] { display: none !important; }


/* ── Type scale ─────────────────────────────────────────────────────────────
   clamp() throughout, so the page is set for the viewport rather than stepping
   at three breakpoints. The negative tracking on large sizes is what stops a
   big heading in a geometric face looking loose. */

h1, h2, h3, h4, .h-display {
    font-family: var(--rs-font-display);
    color: var(--pub-ink);
    line-height: 1.15;
    margin: 0 0 .6em;
    font-weight: 700;
}

h1, .h-display {
    font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.022em;
}
h2 { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.4rem); letter-spacing: -.016em; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);    letter-spacing: -.01em; }
h4 { font-size: 1.05rem; letter-spacing: -.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead-sub {
    font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
    color: var(--pub-muted);
    max-width: 62ch;
    line-height: 1.6;
}

/* An eyebrow above a section heading — the one place small caps earn their
   keep, because it labels without competing. */
.eyebrow {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--pub-accent-dk);
    margin: 0 0 .7rem;
}

.muted { color: var(--pub-muted); }
.num   { font-variant-numeric: tabular-nums; }


/* ── Layout primitives ──────────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: var(--pub-maxw);
    margin-inline: auto;
    padding-inline: var(--pub-gutter);
}

.section     { padding-block: var(--pub-section-y); }
.section-alt { background: var(--pub-bg-alt); }
.section-ink { background: var(--pub-ink); color: rgba(255,255,255,.82); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }

.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Wide content must scroll inside its own box — the page body never scrolls
   sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn-rs {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--rs-font);
    font-size: .95rem; font-weight: 600; line-height: 1;
    padding: .85rem 1.4rem;
    border-radius: var(--pub-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    text-decoration: none;
}
.btn-rs:hover { text-decoration: none; }

.btn-rs-primary { background: var(--pub-accent); color: #fff; }
.btn-rs-primary:hover { background: var(--pub-accent-dk); color: #fff; transform: translateY(-1px); }

.btn-rs-ink { background: var(--pub-ink); color: #fff; }
.btn-rs-ink:hover { background: var(--pub-ink-2); color: #fff; transform: translateY(-1px); }

.btn-rs-ghost { background: transparent; color: var(--pub-ink); border-color: var(--pub-line); }
.btn-rs-ghost:hover { background: var(--pub-wash); border-color: var(--pub-accent); color: var(--pub-ink); }

.btn-rs-on-ink { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.24); }
.btn-rs-on-ink:hover { background: rgba(255,255,255,.18); color: #fff; }

.btn-rs-lg { font-size: 1rem; padding: 1rem 1.7rem; }


/* ── Cards ──────────────────────────────────────────────────────────────── */

.card-rs {
    background: var(--pub-bg);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-lg);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Equal heights ONLY where the card is itself a grid cell.
   ─────────────────────────────────────────────────────────────────────────
   This was `height: 100%` on .card-rs unconditionally, which is right for a
   row of service cards and wrong everywhere else.

   A grid item stretches to the tallest cell in its row. So a card NESTED
   inside a grid item — /contact puts one under a heading and a paragraph —
   resolved 100% against that already-full-height parent and then started
   partway down it. The card overflowed the section by exactly the height of
   whatever sat above it, and bled into the footer.

   The child combinator is the whole fix: a card that IS a cell stretches, a
   card that merely lives in one takes its natural height. */
.grid > .card-rs { height: 100%; }
.card-rs:hover { border-color: var(--pub-accent); box-shadow: var(--pub-shadow); transform: translateY(-2px); }

/* The numeral on a service card. Large, low-contrast, decorative — it gives the
   grid a reading order without another heading level. */
.card-rs .card-num {
    font-family: var(--rs-font-display);
    font-size: 1.6rem; font-weight: 700; line-height: 1;
    color: var(--pub-accent); opacity: .42;
    font-variant-numeric: tabular-nums;
}
.card-rs h3 { margin: .75rem 0 .4rem; }
.card-rs p  { color: var(--pub-muted); font-size: .95rem; }


/* ── Photographs ────────────────────────────────────────────────────────────
   A frame, a caption, and a height cap.

   The cap matters: real photographs arrive in whatever shape the phone was
   held, and a 3:4 portrait dropped into a two-column band will tower over the
   text beside it. object-fit: cover lets the frame decide the shape without
   distorting the image — which is the alternative, and is the single most
   obvious amateur tell on a website. */

.photo-frame {
    margin: 0;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-lg);
    overflow: hidden;
    background: var(--pub-bg);
}
.photo-frame img {
    width: 100%;
    height: clamp(260px, 38vw, 420px);
    object-fit: cover;
    object-position: center 38%;   /* bias up — the interesting half is the top */
    display: block;
}
.photo-frame figcaption {
    padding: 1rem 1.15rem 1.15rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--pub-muted);
}
.section-alt .photo-frame { background: var(--pub-bg); }


/* ── Header ─────────────────────────────────────────────────────────────── */

.rs-topbar {
    background: var(--pub-ink);
    color: rgba(255,255,255,.72);
    font-size: .82rem;
}
.rs-topbar a { color: rgba(255,255,255,.82); }
.rs-topbar a:hover { color: #fff; text-decoration: none; }
.rs-topbar .wrap {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    align-items: center; justify-content: space-between;
    padding-block: .5rem;
}

.rs-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--pub-line);
}
.rs-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: .8rem;
}
.rs-brand { display: flex; align-items: center; gap: .6rem; }
.rs-brand img { height: 34px; width: 34px; object-fit: contain; }
.rs-brand .brand-word {
    font-family: var(--rs-font-display);
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--pub-ink); line-height: 1;
}

.rs-nav { display: flex; align-items: center; gap: .25rem; }
.rs-nav a {
    position: relative;
    padding: .55rem .8rem;
    font-size: .93rem; font-weight: 500;
    color: var(--pub-ink); border-radius: 8px;
}
.rs-nav a:hover { background: var(--pub-wash); text-decoration: none; }
.rs-nav a.is-active { color: var(--pub-accent-dk); font-weight: 600; }
.rs-nav a.is-active::before {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
    height: 3px; border-radius: 3px; background: var(--pub-accent);
}

.rs-nav-toggle {
    display: none;
    background: none; border: 1px solid var(--pub-line);
    border-radius: 8px; padding: .5rem .65rem; cursor: pointer;
    color: var(--pub-ink);
}

@media (max-width: 991.98px) {
    .rs-nav-toggle { display: inline-flex; }
    .rs-nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--pub-bg);
        border-bottom: 1px solid var(--pub-line);
        padding: .5rem var(--pub-gutter) 1rem;
    }
    .rs-nav.is-open { display: flex; }
    .rs-nav a { padding: .8rem .25rem; border-radius: 0; }
    .rs-nav a.is-active::before { left: .25rem; right: auto; width: 1.5rem; }
    .rs-header .wrap { position: relative; }
}


/* ── Hero ───────────────────────────────────────────────────────────────── */

.rs-hero {
    position: relative;
    background: linear-gradient(170deg, var(--pub-ink) 0%, var(--pub-ink-2) 100%);
    color: rgba(255,255,255,.80);
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    overflow: hidden;
}

/* ── Hero backdrop ──────────────────────────────────────────────────────────
   A photograph under the charcoal, at low opacity. It is texture, not subject:
   the headline has to stay the thing you read, so the overlay is heavy and the
   image is only ever felt rather than seen.

   Loaded as a separate layer rather than a background on .rs-hero itself, so
   the media query below can switch it off outright without touching the
   gradient.

   NOT LOADED BELOW 768px, deliberately. On a phone this is a 254 KB download
   for an effect that is, at 14% opacity behind a headline on a 6-inch screen,
   invisible. A good part of this audience is on mobile data, and that cost is
   completely hidden on a development machine plugged into fibre. The gradient
   alone carries the design perfectly well.

   Also off for prefers-reduced-data, which is the browser saying the same
   thing out loud. */
.rs-hero-bg {
    display: none;
    position: absolute; inset: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    opacity: .14;
    pointer-events: none;
}

@media (min-width: 768px) {
    .rs-hero-bg {
        display: block;
        background-image: url('../images/backdrops/dar-es-salaam.jpg');
        background-image: image-set(
            url('../images/backdrops/dar-es-salaam.webp') type('image/webp'),
            url('../images/backdrops/dar-es-salaam.jpg')  type('image/jpeg')
        );
    }
}

/* The RS Flow page is the exception: its photograph (images/heroes/rsflow) is
   meant to be SEEN, so it is at full opacity under a shade baked into the same
   layer — heaviest on the left under the headline, lightest on the right. The
   600px copy (~22 KB) on phones, under an even shade. */
.rs-hero-bg.is-rsflow {
    display: block;
    opacity: 1;
    --hero-shade: linear-gradient(180deg, rgba(28,40,54,.84), rgba(28,40,54,.90));
    background-image: var(--hero-shade), url('../images/heroes/rsflow-sm.webp?v=1791789567');
}
@media (min-width: 768px) {
    .rs-hero-bg.is-rsflow {
        --hero-shade: linear-gradient(90deg,
            rgba(28,40,54,.93) 0%, rgba(28,40,54,.84) 50%, rgba(28,40,54,.58) 100%);
        background-image: var(--hero-shade), url('../images/heroes/rsflow.webp?v=1791789566');
    }
}

@media (prefers-reduced-data: reduce) {
    .rs-hero-bg, .rs-hero-bg.is-rsflow { display: none; }
}
.rs-hero h1 { color: #fff; max-width: 20ch; }
.rs-hero .lead-sub { color: rgba(255,255,255,.72); }
.rs-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* One decorative element, and it is the brand's own idea: the flow line from
   the logo, drawn very faintly across the hero. */
.rs-hero::after {
    content: ""; position: absolute; inset: auto 0 -1px 0; height: 160px;
    background: radial-gradient(60% 100% at 78% 100%, var(--rs-accent) 0%, transparent 70%);
    opacity: .16; pointer-events: none;
}
.rs-hero .wrap { position: relative; z-index: 1; }


/* ── Footer ─────────────────────────────────────────────────────────────── */

.rs-footer {
    background: var(--pub-ink-2);
    color: rgba(255,255,255,.62);
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    font-size: .92rem;
}
.rs-footer h4 {
    color: #fff; font-size: .8rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem;
}
.rs-footer a { color: rgba(255,255,255,.62); }
.rs-footer a:hover { color: #fff; text-decoration: none; }
.rs-footer ul { list-style: none; margin: 0; padding: 0; }
.rs-footer li { margin-bottom: .55rem; }
.rs-footer-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
    font-size: .85rem;
}
.rs-footer-brand img { height: 48px; width: auto; margin-bottom: 1rem; }


/* ── Status pill (hero widget, and the /status page) ────────────────────── */

.rs-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .85rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
}
.rs-pill .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pub-ok); }
.rs-pill.is-degraded .dot { background: var(--pub-warn); }
.rs-pill.is-down     .dot { background: var(--pub-bad); }

/* The live dot pulses — but only for people who have not asked it not to. */
@media (prefers-reduced-motion: no-preference) {
    .rs-pill .dot { animation: rs-pulse 2.4s ease-in-out infinite; }
    @keyframes rs-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
}


/* ── Reveal on scroll ───────────────────────────────────────────────────────
   Driven by a single IntersectionObserver in js/Rooka/site.js — no library.
   Elements start visible and are only hidden once JS confirms it can reveal
   them, so the page is readable with JS off or broken. */

.reveal { opacity: 1; }
.js-reveal-ready .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}
.js-reveal-ready .reveal.is-in { opacity: 1; transform: none; }


/* ── Respect the setting. All of it. ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js-reveal-ready .reveal { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — the components the real pages need.

   Same rules as the header of this file: one accent, 1px borders at rest,
   shadow on hover only, no third background colour, and nothing that moves for
   a visitor who has asked for reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Page head ──────────────────────────────────────────────────────────── */
/* The band under the nav on every page that is not the homepage. Charcoal, so
   the white nav above it has an edge and the h1 has room to breathe. */

.rs-page-head {
    position: relative;
    background: var(--pub-ink);
    color: #fff;
    padding: calc(var(--pub-section-y) * .62) 0 calc(var(--pub-section-y) * .55);
    overflow: hidden;
}
.rs-page-head h1 { color: #fff; margin: 0; max-width: 24ch; }
.rs-page-head .lead-sub { color: rgba(255,255,255,.72); max-width: 60ch; margin-top: .9rem; }
.rs-page-head .eyebrow  { color: var(--rs-accent); }
.rs-page-head .wrap     { position: relative; z-index: 1; }

/* A photograph behind it — images/heroes/, chosen per section by hero_photo().
   The shade is darkest on the LEFT, where the heading and lead sit, so white
   text clears WCAG AA over ANY part of the image (worst case, a pure-white
   pixel under the end of the lead at ~55% across, still gives the 72%-white
   lead about 5.9:1). The right half, where there is no text, is where the
   photograph actually shows.

   Phones get the 600px copy (--ph-bg-sm, ~30 KB) under an even shade, because
   there the text runs the full width. */
.rs-page-head-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-image: var(--ph-bg-sm);
}
.rs-page-head.has-image::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(28,40,54,.82), rgba(28,40,54,.90));
}
.rs-page-head.has-image .wrap { z-index: 2; }

@media (min-width: 768px) {
    .rs-page-head-bg { background-image: var(--ph-bg); }
    .rs-page-head.has-image::after {
        background: linear-gradient(90deg,
            rgba(28,40,54,.92) 0%, rgba(28,40,54,.82) 50%, rgba(28,40,54,.50) 100%);
    }
}

@media (prefers-reduced-data: reduce) {
    .rs-page-head-bg { display: none; }
}


/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.rs-crumbs { margin-bottom: 1.2rem; font-size: .8rem; }
.rs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rs-crumbs li { color: rgba(255,255,255,.55); }
.rs-crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.rs-crumbs a { color: rgba(255,255,255,.72); }
.rs-crumbs a:hover { color: #fff; text-decoration: none; }
.rs-crumbs [aria-current="page"] { color: #fff; }


/* ── Prose ──────────────────────────────────────────────────────────────── */
/* Editor-authored HTML. Constrained rather than designed: the CMS emits plain
   tags, and the job here is to make them readable without trying to anticipate
   every one somebody might paste in. */

.prose { font-size: 1.02rem; line-height: 1.75; color: var(--pub-body); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }
.prose h2 { margin: 2.4rem 0 .8rem; font-size: 1.5rem; }
.prose h3 { margin: 1.8rem 0 .6rem; font-size: 1.2rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose img { border-radius: var(--pub-radius); margin: 1.6rem 0; }
.prose blockquote {
    margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
    border-left: 3px solid var(--pub-accent);
    color: var(--pub-muted); font-style: italic;
}
.prose code { background: var(--pub-wash); padding: .12em .38em; border-radius: 4px; font-size: .9em; }
.prose pre {
    background: var(--pub-ink); color: #e6ecf3;
    padding: 1rem 1.2rem; border-radius: var(--pub-radius);
    overflow-x: auto; font-size: .85rem;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .93rem; }
.prose th, .prose td { padding: .6rem .8rem; border-bottom: 1px solid var(--pub-line); text-align: left; }
.prose th { font-weight: 600; background: var(--pub-wash); }


/* ── Cards, the extra shapes ────────────────────────────────────────────── */

.card-rs .card-sub   { color: var(--pub-muted); font-size: .82rem; margin: -.2rem 0 .5rem; }
.card-rs .card-meta  { color: var(--pub-muted); font-size: .78rem; margin: 0 0 .5rem; }
.card-rs .card-price { color: var(--pub-ink); font-size: .88rem; margin: .8rem 0 0; }

.card-rs .card-metric { margin: 1rem 0 0; display: flex; align-items: baseline; gap: .5rem; }
.card-rs .card-metric strong { font-size: 1.7rem; color: var(--pub-accent-dk); line-height: 1; }
.card-rs .card-metric span   { color: var(--pub-muted); font-size: .82rem; }

/* An image bleeding to the card's edges. The negative margins undo the card's
   own padding, so this needs no variant of .card-rs to sit in. */
.card-case-img {
    margin: -1.6rem -1.6rem 1.1rem;
    border-radius: var(--pub-radius) var(--pub-radius) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--pub-wash);
}
.card-case-img img { width: 100%; height: 100%; object-fit: cover; }

.card-person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: .9rem; }
.card-partner { text-align: center; }
.card-partner img { max-height: 44px; width: auto; margin: 0 auto .7rem; object-fit: contain; }


/* ── Chips ──────────────────────────────────────────────────────────────── */

.rs-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.rs-chip-row.is-centred { justify-content: center; }

.rs-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pub-ink);
    font-size: .85rem;
    transition: border-color .15s ease, background .15s ease;
}
.rs-chip:hover { border-color: var(--pub-accent); background: var(--pub-wash); text-decoration: none; }
.rs-chip.is-current { background: var(--pub-accent); border-color: var(--pub-accent); color: #fff; }
.rs-chip.is-static { cursor: default; }
.rs-chip.is-static:hover { border-color: var(--pub-line); background: #fff; }
.rs-chip-n { color: var(--pub-muted); font-size: .72rem; }
.rs-chip.is-current .rs-chip-n { color: rgba(255,255,255,.7); }


/* ── Tags ───────────────────────────────────────────────────────────────── */

.rs-tag {
    display: inline-block; padding: .18rem .55rem;
    border-radius: 4px; font-size: .68rem; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase;
    background: var(--pub-accent); color: #fff;
}
.rs-tag.is-muted { background: var(--pub-wash); color: var(--pub-muted); }


/* ── Facts ──────────────────────────────────────────────────────────────── */

.rs-facts { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.rs-facts li {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .7rem 0; border-bottom: 1px solid var(--pub-line);
    font-size: .95rem;
}
.rs-facts li:last-child { border-bottom: 0; }
.rs-facts i { color: var(--pub-accent); margin-top: .22rem; }
.rs-facts-note { color: var(--pub-muted); font-size: .8rem; margin-left: .4rem; }

/* The horizontal version, at the top of a case study. */
.rs-facts-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1px;
    background: var(--pub-line);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    overflow: hidden;
}
.rs-facts-strip > div { background: #fff; padding: 1.1rem 1.3rem; }
.rs-facts-strip span {
    display: block; color: var(--pub-muted); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem;
}
.rs-facts-strip strong { font-size: 1.02rem; color: var(--pub-ink); }
.rs-facts-strip .is-metric strong { font-size: 1.6rem; color: var(--pub-accent-dk); }


/* ── List with a description under each item ────────────────────────────── */

.rs-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.rs-list li { padding: .7rem 0; border-bottom: 1px solid var(--pub-line); }
.rs-list li:last-child { border-bottom: 0; }
.rs-list li span { display: block; color: var(--pub-muted); font-size: .88rem; margin-top: .15rem; }
.rs-list.is-on-ink li { border-bottom-color: rgba(255,255,255,.12); }
.rs-list.is-on-ink li span { color: rgba(255,255,255,.72); }


/* ── Quotes ─────────────────────────────────────────────────────────────── */

.rs-quote {
    margin: 0; padding: 1.6rem;
    background: #fff;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
}
.rs-quote blockquote {
    margin: 0 0 1rem; padding: 0; border: 0;
    font-size: 1.02rem; line-height: 1.65; color: var(--pub-ink);
}
.rs-quote blockquote::before {
    content: "\201C"; color: var(--pub-accent); font-size: 1.6em;
    line-height: 0; vertical-align: -.3em; margin-right: .1em;
}
.rs-quote figcaption { font-size: .85rem; }
.rs-quote figcaption strong { display: block; color: var(--pub-ink); }
.rs-quote figcaption span   { display: block; color: var(--pub-muted); }
.rs-quote.is-large blockquote { font-size: 1.25rem; line-height: 1.55; }


/* ── Accordion ──────────────────────────────────────────────────────────── */
/* <details>, not JavaScript. It is keyboard-operable, announced correctly by a
   screen reader, findable by the browser's own in-page search, and works with
   scripting off — none of which a div-and-click version gets for free. */

.rs-accordion details {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: #fff;
    margin-bottom: .6rem;
    overflow: hidden;
}
.rs-accordion summary {
    cursor: pointer; padding: 1rem 2.8rem 1rem 1.2rem;
    font-weight: 600; color: var(--pub-ink);
    list-style: none; position: relative;
}
.rs-accordion summary::-webkit-details-marker { display: none; }
.rs-accordion summary::after {
    content: "\002B";
    position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
    color: var(--pub-accent); font-size: 1.2rem; line-height: 1;
}
.rs-accordion details[open] summary::after { content: "\2212"; }
.rs-accordion summary:hover { background: var(--pub-wash); }
.rs-accordion details > .prose { padding: 0 1.2rem 1.2rem; font-size: .96rem; }


/* ── Empty state ────────────────────────────────────────────────────────── */

.rs-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-wash);
}
.rs-empty i { font-size: 1.8rem; color: var(--pub-muted); opacity: .6; }
.rs-empty h3 { margin: 1rem 0 .5rem; }
.rs-empty p  { color: var(--pub-muted); max-width: 44ch; margin: 0 auto; }


/* ── Notice ─────────────────────────────────────────────────────────────── */

.rs-notice {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 1.2rem; margin-bottom: 1.5rem;
    background: var(--pub-wash);
    border-left: 3px solid var(--pub-accent);
    border-radius: 0 var(--pub-radius) var(--pub-radius) 0;
    font-size: .92rem;
}
.rs-notice i { color: var(--pub-accent); margin-top: .18rem; }


/* ── Forms ──────────────────────────────────────────────────────────────── */

.rs-field { margin-bottom: 1rem; }
.rs-field label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--pub-ink); margin-bottom: .35rem;
}
.rs-field input, .rs-field textarea, .rs-field select {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    font: inherit; font-size: .95rem;
    color: var(--pub-body); background: #fff;
    transition: border-color .15s ease;
}
.rs-field input:focus, .rs-field textarea:focus, .rs-field select:focus {
    border-color: var(--pub-accent); outline: none;
    box-shadow: 0 0 0 3px rgba(107,143,190,.16);
}
.rs-field input:disabled, .rs-field textarea:disabled {
    background: var(--pub-wash); color: var(--pub-muted); cursor: not-allowed;
}
.rs-field textarea { resize: vertical; min-height: 6rem; }

.form-note { color: var(--pub-muted); font-size: .82rem; line-height: 1.55; }

/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   hidden inputs, and a field that is never focusable and never announced is
   invisible to a person either way. */
.rs-hp {
    position: absolute !important;
    left: -9999px !important; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}


/* ── Logo strip ─────────────────────────────────────────────────────────── */

.rs-logo-strip { padding: 2.5rem 0; border-bottom: 1px solid var(--pub-line); background: #fff; }
.rs-logos {
    display: flex; flex-wrap: wrap; gap: 2.5rem;
    align-items: center; justify-content: center; margin-top: 1.2rem;
}
.rs-logos img {
    max-height: 32px; width: auto;
    /* Grey at rest, so eight different brand palettes do not fight the one
       accent colour this design is built on. Colour returns on hover. */
    filter: grayscale(100%); opacity: .55;
    transition: filter .2s ease, opacity .2s ease;
}
.rs-logos img:hover { filter: none; opacity: 1; }


/* ── Footer additions ───────────────────────────────────────────────────── */

.rs-footer-social { display: flex; gap: .6rem; margin: 1rem 0; }
.rs-footer-social a {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.72);
    transition: background .15s ease, color .15s ease;
}
.rs-footer-social a:hover { background: var(--pub-accent); color: #fff; }

.rs-footer-address {
    font-style: normal; color: rgba(255,255,255,.55);
    font-size: .85rem; line-height: 1.6; margin: 0;
}


/* ── Product hero (RS Flow) ─────────────────────────────────────────────── */

.rs-hero.is-product { padding: calc(var(--pub-section-y) * .8) 0; }
.rs-hero.is-product h1 { max-width: 22ch; }


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6 — the interactive forms.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Question blocks ────────────────────────────────────────────────────── */
/* A <fieldset> with a <legend>, because that is what a group of related radio
   buttons IS — and a screen reader announces the legend with every option in
   the group, which a styled <div><h3> never does. */

.rs-question {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: #fff;
    padding: 1.5rem;
    margin: 0 0 1.2rem;
}
.rs-question legend {
    float: none;              /* Bootstrap makes legends full-width blocks */
    width: auto;
    padding: 0;
    margin: 0 0 .3rem;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pub-ink);
    display: flex;
    gap: .7rem;
    align-items: baseline;
}
.rs-question legend:focus { outline: none; }   /* focused by the stepper only */

.rs-question-n {
    flex: 0 0 auto;
    min-width: 1.7rem; height: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--pub-wash);
    color: var(--pub-accent-dk);
    font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rs-question-help { color: var(--pub-muted); font-size: .88rem; margin: .1rem 0 1rem 2.4rem; }


/* ── Options ────────────────────────────────────────────────────────────── */
/* The whole row is the label, so the hit area is the full width — which is what
   makes this usable with a thumb rather than only with a mouse. */

.rs-options { display: flex; flex-direction: column; gap: .5rem; }

.rs-option {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .8rem 1rem;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    cursor: pointer;
    font-size: .95rem;
    transition: border-color .12s ease, background .12s ease;
}
.rs-option:hover { border-color: var(--pub-accent); background: var(--pub-wash); }
.rs-option input { margin-top: .22rem; flex: 0 0 auto; accent-color: var(--pub-accent); }
.rs-option span  { flex: 1 1 auto; }

/* :has is well supported now, and the fallback is simply no highlight — the
   radio itself still shows which is chosen. */
.rs-option:has(input:checked) {
    border-color: var(--pub-accent);
    background: var(--pub-wash);
    box-shadow: inset 0 0 0 1px var(--pub-accent);
}
.rs-option:has(input:focus-visible) { outline: 2px solid var(--pub-accent); outline-offset: 2px; }

.rs-options.is-checks .rs-option span strong { display: block; }
.rs-options.is-checks .rs-option span em {
    display: block; font-style: normal;
    color: var(--pub-muted); font-size: .86rem; margin-top: .15rem;
}

.rs-opt { color: var(--pub-muted); font-weight: 400; font-size: .8rem; }


/* ── The stepper ────────────────────────────────────────────────────────── */

.rs-progress { margin-bottom: 1.4rem; }
.rs-progress-track { height: 5px; background: var(--pub-line); border-radius: 999px; overflow: hidden; }
.rs-progress-fill {
    height: 100%; width: 0;
    background: var(--pub-accent);
    transition: width .3s ease;
}
.rs-progress-label {
    margin: .5rem 0 0; font-size: .8rem; color: var(--pub-muted);
    font-variant-numeric: tabular-nums;
}

.rs-stepper-nav { display: flex; gap: .6rem; justify-content: space-between; }
/* Hidden until the script decides otherwise, so a page with scripting off never
   shows Back and Next buttons that do nothing. */
.rs-stepper-nav [data-back], .rs-stepper-nav [data-next] { display: none; }
.is-stepped .rs-stepper-nav [data-back],
.is-stepped .rs-stepper-nav [data-next] { display: inline-flex; }
.is-stepped .rs-stepper-nav [hidden] { display: none !important; }


/* ── The scorecard ──────────────────────────────────────────────────────── */

.rs-score {
    display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
    padding: 1.8rem;
    border: 1px solid var(--pub-line);
    border-left-width: 5px;
    border-radius: var(--pub-radius);
    background: #fff;
}
.rs-score.is-bad  { border-left-color: var(--pub-bad); }
.rs-score.is-warn { border-left-color: var(--pub-warn); }
.rs-score.is-ok   { border-left-color: var(--pub-accent); }
.rs-score.is-good { border-left-color: var(--pub-ok); }

.rs-score-number { flex: 0 0 auto; display: flex; align-items: baseline; gap: .2rem; }
.rs-score-number strong { font-size: 3.6rem; line-height: 1; color: var(--pub-ink); }
.rs-score-number span   { font-size: 1.1rem; color: var(--pub-muted); }
.rs-score-words { flex: 1 1 16rem; }
.rs-score-words h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.rs-score-words p  { margin: 0; color: var(--pub-muted); font-size: .95rem; }

.rs-bars { margin-top: 1.2rem; }
.rs-bar { margin-bottom: 1rem; }
.rs-bar-head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .35rem; }
.rs-bar-track { height: 8px; background: var(--pub-line); border-radius: 999px; overflow: hidden; }
.rs-bar-fill  { height: 100%; border-radius: 999px; background: var(--pub-accent); }
.rs-bar-fill.is-bad  { background: var(--pub-bad); }
.rs-bar-fill.is-warn { background: var(--pub-warn); }
.rs-bar-fill.is-ok   { background: var(--pub-accent); }
.rs-bar-fill.is-good { background: var(--pub-ok); }

.rs-actions { counter-reset: none; padding-left: 1.3rem; margin-top: 1.2rem; }
.rs-actions li { margin-bottom: 1rem; }
.rs-actions li strong { display: block; color: var(--pub-ink); }
.rs-actions li span   { display: block; color: var(--pub-muted); font-size: .88rem; margin-top: .2rem; }

.rs-answers { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .8rem; }
.rs-answers td { padding: .6rem .5rem; border-bottom: 1px solid var(--pub-line); vertical-align: top; }
.rs-answers td:last-child { text-align: right; white-space: nowrap; color: var(--pub-muted); }


/* ── Newsletter, in the footer ──────────────────────────────────────────── */

.rs-subscribe { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.rs-subscribe input {
    flex: 1 1 11rem; min-width: 0;
    padding: .6rem .8rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--pub-radius);
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: .9rem;
}
.rs-subscribe input::placeholder { color: rgba(255,255,255,.45); }
.rs-subscribe input:focus {
    outline: none; border-color: var(--pub-accent);
    background: rgba(255,255,255,.1);
}
.rs-subscribe button { flex: 0 0 auto; }
.rs-footer .form-note { color: rgba(255,255,255,.45); margin-top: .6rem; }


/* ── Print ──────────────────────────────────────────────────────────────── */

/* ── The work register ──────────────────────────────────────────────────────
   /work is generated from the application register rather than from
   hand-written content, so its cards need a shape of their own.

   `card-client` is deliberately quiet when a client is anonymised and solid
   when they are named. The difference between the two permissions should be
   visible on the page, not only in the database.
   ────────────────────────────────────────────────────────────────────────── */

.card-app { display: flex; flex-direction: column; }

.card-app .card-client {
    font-size: .92rem;
    margin: -.15rem 0 .8rem;
    color: var(--pub-ink);
}
.card-app .card-client .is-anon {
    color: var(--pub-muted);
    font-style: italic;
}

.card-app .card-tag {
    color: var(--pub-muted);
    font-size: .95rem;
    margin: 0;
}

.rs-app-modules {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--pub-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem .9rem;
    font-size: .85rem;
}
.rs-app-modules li {
    position: relative;
    padding-left: .95rem;
    color: var(--pub-ink-soft);
}
.rs-app-modules li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: .32rem; height: .32rem;
    border-radius: 50%;
    background: var(--pub-accent);
}
.rs-app-modules li.is-more { color: var(--pub-muted); font-style: italic; }
.rs-app-modules li.is-more::before { display: none; }

@media (max-width: 720px) {
    .rs-app-modules { grid-template-columns: 1fr; }
}


/* ── Panels and kickers ─────────────────────────────────────────────────────
   A boxed aside inside a section — used for "why this is empty", "read more",
   an example in the glossary. Distinct from .rs-notice, which is a one-line
   flash with an icon; this one holds a heading and a paragraph.
   ────────────────────────────────────────────────────────────────────────── */

.rs-panel {
    background: var(--pub-wash);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-lg);
    padding: clamp(1.25rem, 2.6vw, 1.9rem);
}
.rs-panel p:last-child { margin-bottom: 0; }
.rs-panel-accent {
    background: var(--pub-bg);
    border-left: 3px solid var(--pub-accent);
}

.rs-kicker {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pub-accent-dk);
    margin: 0 0 .5rem;
}


/* ── Card internals used by the knowledge base ──────────────────────────────
   .card-rs already styles h3 and p. These name the parts explicitly so a card
   can carry a meta line, a title and body text without relying on element
   order.
   ────────────────────────────────────────────────────────────────────────── */

.card-title { margin: .4rem 0 .45rem; font-size: 1.08rem; line-height: 1.3; }
.card-text  { color: var(--pub-muted); font-size: .93rem; margin: 0; }

.card-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border-radius: var(--pub-radius);
    background: var(--pub-wash);
    color: var(--pub-accent-dk);
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.card-kbcat .card-meta { margin-top: .8rem; }
.card-path .card-meta  { margin-bottom: .2rem; }


/* ── Search box ─────────────────────────────────────────────────────────── */

.rs-kb-search {
    display: flex;
    gap: .6rem;
    max-width: 38rem;
}
.rs-kb-search input {
    flex: 1 1 auto;
    padding: .8rem 1rem;
    font: inherit;
    font-size: .98rem;
    color: var(--pub-ink);
    background: var(--pub-bg);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
}
.rs-kb-search input:focus {
    outline: 2px solid var(--pub-accent);
    outline-offset: 1px;
    border-color: var(--pub-accent);
}


/* ── A–Z ────────────────────────────────────────────────────────────────── */

.rs-az { display: flex; flex-wrap: wrap; gap: .3rem; }
.rs-az-l {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 2.1rem; height: 2.1rem;
    padding: 0 .5rem;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    color: var(--pub-ink-soft);
    font-size: .85rem;
    text-decoration: none;
}
.rs-az-l:hover { border-color: var(--pub-accent); color: var(--pub-accent-dk); }
.rs-az-l.is-current {
    background: var(--pub-accent);
    border-color: var(--pub-accent);
    color: #fff;
}


/* ── Glossary ───────────────────────────────────────────────────────────── */

.rs-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1.4rem;
}
.rs-term {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--pub-line);
}
.rs-term h2 { margin: 0 0 .45rem; }
.rs-term h2 a { text-decoration: none; }
.rs-term-full {
    display: block;
    font-size: .78rem; font-weight: 400;
    color: var(--pub-muted);
    text-transform: none; letter-spacing: 0;
}
.rs-term p { font-size: .92rem; margin: 0 0 .5rem; }
.rs-term-sw { color: var(--pub-ink-soft); }
.rs-term-eg {
    padding-left: .85rem;
    border-left: 2px solid var(--pub-line);
    color: var(--pub-muted);
    font-size: .88rem !important;
}

/* The one badge that marks Swahili content. Small, and never the only cue —
   the text beside it is in Swahili, which is the real signal. */
.rs-badge-sw {
    display: inline-block;
    padding: .1rem .42rem;
    border-radius: 999px;
    background: var(--pub-wash);
    color: var(--pub-accent-dk);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .03em;
    vertical-align: .08em;
}


/* ── Article ────────────────────────────────────────────────────────────── */

.rs-article-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
    margin: 0 0 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--pub-line);
    font-size: .82rem;
    color: var(--pub-muted);
}

.rs-prose { font-size: 1.02rem; line-height: 1.75; color: var(--pub-ink-soft); }
.rs-prose h2 { margin: 2rem 0 .7rem; font-size: 1.35rem; color: var(--pub-ink); }
.rs-prose h3 { margin: 1.5rem 0 .5rem; font-size: 1.12rem; color: var(--pub-ink); }
.rs-prose p, .rs-prose ul, .rs-prose ol { margin: 0 0 1rem; }
.rs-prose ul, .rs-prose ol { padding-left: 1.3rem; }
.rs-prose li { margin-bottom: .35rem; }
.rs-prose code {
    background: var(--pub-wash);
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .9em;
}
.rs-prose blockquote {
    margin: 1.2rem 0;
    padding: .2rem 0 .2rem 1.1rem;
    border-left: 3px solid var(--pub-accent);
    color: var(--pub-muted);
}

.rs-aside {
    background: var(--pub-wash);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-lg);
    padding: 1.3rem;
    margin-bottom: 1.2rem;
}
.rs-aside h2 { margin: 0 0 .7rem; }
.rs-aside p  { font-size: .9rem; color: var(--pub-muted); }
.rs-aside-accent { border-left: 3px solid var(--pub-accent); }

.rs-aside-list { list-style: none; margin: 0; padding: 0; }
.rs-aside-list li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--pub-line);
    font-size: .9rem;
}
.rs-aside-list li:last-child { border-bottom: 0; }
.rs-aside-list a { text-decoration: none; }
.rs-aside-list span { display: block; font-size: .76rem; color: var(--pub-muted); }


/* ── "Was this helpful?" ────────────────────────────────────────────────────
   The only reliable signal a knowledge base gives you, so it gets a box rather
   than a footnote — a control nobody notices is a control nobody uses.
   ────────────────────────────────────────────────────────────────────────── */

.rs-helpful {
    margin: 2.5rem 0 0;
    padding: 1.4rem;
    background: var(--pub-wash);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-lg);
}
.rs-helpful h2 { margin: 0 0 .8rem; }
.rs-helpful-buttons { display: flex; gap: .6rem; flex-wrap: wrap; }
.rs-helpful-more { margin-top: 1rem; }
.rs-helpful-more label {
    display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem;
}
.rs-helpful-more textarea {
    width: 100%;
    padding: .7rem .9rem;
    font: inherit; font-size: .93rem;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    margin-bottom: .7rem;
}
.rs-helpful-thanks { margin: .8rem 0 0; color: var(--pub-accent-dk); font-weight: 600; }


/* ── Reading paths ──────────────────────────────────────────────────────── */

.rs-path { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.rs-path-step {
    display: flex; gap: 1.1rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--pub-line);
}
.rs-path-step:last-child { border-bottom: 0; }
.rs-path-n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: var(--pub-accent);
    color: #fff;
    font-weight: 700; font-size: .9rem;
}
.rs-path-body { flex: 1 1 auto; }
.rs-path-body h2 { margin: .15rem 0 .4rem; }
.rs-path-body h2 a { text-decoration: none; }
.rs-path-body p { font-size: .93rem; color: var(--pub-muted); margin: 0 0 .3rem; }
.rs-path-note {
    padding-left: .8rem;
    border-left: 2px solid var(--pub-line);
    font-style: italic;
}


/* ── Resource list ──────────────────────────────────────────────────────── */

.rs-res-list { list-style: none; margin: 0; padding: 0; }
.rs-res-list li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--pub-line);
    font-size: .93rem;
}
.rs-res-list li:last-child { border-bottom: 0; }
.rs-res-list a { text-decoration: none; font-weight: 600; }
.rs-res-list a i { font-size: .68rem; opacity: .6; margin-left: .2rem; }
.rs-res-list span { color: var(--pub-muted); margin-left: .5rem; font-size: .85rem; }


/* ── IT tools ───────────────────────────────────────────────────────────── */

.rs-tool-out {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem .9rem;
    font-size: .88rem;
    padding-top: .9rem;
    border-top: 1px solid var(--pub-line);
}
.rs-tool-out dt { color: var(--pub-muted); font-weight: 400; }
.rs-tool-out dd { margin: 0; color: var(--pub-ink); font-weight: 600; }

.rs-tool-table { font-size: .9rem; }
.rs-tool-table th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pub-muted); font-weight: 600;
    border-bottom: 1px solid var(--pub-line);
    padding: .5rem 0;
}
.rs-tool-table td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--pub-line); }
.rs-tool-table tr:last-child td { border-bottom: 0; }


/* ── Inline sign-up ─────────────────────────────────────────────────────── */

.rs-inline-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.rs-inline-form input[type="email"] {
    flex: 1 1 14rem;
    padding: .75rem .9rem;
    font: inherit; font-size: .95rem;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg);
}
.rs-inline-form .form-note { flex: 1 1 100%; margin: 0; }
@media print {
    .rs-topbar, .rs-header, .rs-footer, .rs-hero-actions, .skip-link { display: none !important; }
    /* A scorecard is a document somebody takes to a board meeting, so it has to
       print. The stepper's buttons and the form controls must not. */
    .rs-stepper-nav, .rs-progress { display: none !important; }
    .rs-question[hidden] { display: block !important; }
    .rs-score, .rs-question { border: 1px solid #ccc; break-inside: avoid; }
    .rs-bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* The page head is charcoal on screen; on paper that is a solid black bar
       across the top of every printed page. */
    .rs-page-head { background: #fff; color: #000; padding: 0 0 1rem; }
    .rs-page-head h1, .rs-page-head .lead-sub { color: #000; }
    .rs-page-head-bg, .rs-page-head.has-image::after { display: none !important; }
    /* A printed FAQ with every answer collapsed is a printed list of questions. */
    .rs-accordion details { border: 0; }
    .rs-accordion details > .prose { display: block !important; }
    body { color: #000; background: #fff; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}