/* ==========================================================================
   resources.css — design system for the /resources hub
   --------------------------------------------------------------------------
   SCOPING CONTRACT (same as temp-number.css / receive-sms.css): this file
   loads on a site with ~43,000 other PHP pages sharing ONE Bootstrap 4.6.2
   theme. EVERY selector here begins with `.rh-page`. No element selectors,
   no `:root`, no bare utility classes. If you add a rule, it starts with
   `.rh-page` or it does not belong here.

   THE ONE EXCEPTION: `.rh-skip`, the skip link. It has to be the first
   focusable node in the document, which puts it ABOVE the shared navbar and
   therefore outside `.rh-page` — and it must not carry `.rh-page` itself,
   because resources.js takes its scope root from
   `document.querySelector('.rh-page')` and would bind its controls to an
   anchor. Reached through a documented bare `.rh-skip` selector.

   Fonts: the platform system stack. No webfonts, no @import, no CDN, no
   image files. Icons are inline SVG in the markup.

   !important TALLY — three sites, each justified where written:
     1. §2  .rh-page [hidden] / .rh-is-hidden -> must beat every author
            `display` in this file. Bootstrap 4 ships NO `[hidden]` rule, so
            the only one in play is the user-agent's, and any author
            `display` outranks it. Without this the entire filter UI is inert
            while looking fine. (Cost a full rebuild on /receive-sms.)
     2. §3  .rh-sr-only { position }  -> beats Bootstrap's .position-*
     3. §17 prefers-reduced-motion    -> beats every transition above it plus
            Bootstrap's own .fade / .collapsing.
   Nothing else in this file may use it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCOPE ROOT + DESIGN TOKENS
   -------------------------------------------------------------------------- */

.rh-page {
  /* brand ------------------------------------------------------------ */
  --rh-brand: #0f766e;
  --rh-brand-600: #0d5f59;
  --rh-brand-700: #0a4a45;
  --rh-brand-050: #ecfdf9;
  --rh-brand-100: #d2f5ee;
  --rh-brand-200: #a7e8dc;
  --rh-brand-rgb: 15, 118, 110;
  --rh-on-brand: #ffffff;
  --rh-accent: #f5a524;
  --rh-accent-050: #fff8ec;
  --rh-accent-200: #fbdca0;
  --rh-accent-700: #92620c;

  /* ink + surfaces --------------------------------------------------- */
  --rh-ink: #0b1220;
  --rh-ink-2: #475569;
  /* ink-3 carries real content here — reading time, chip counts, the result
     line — so it is darker than the tn-/rs- hubs' #94a3b8, which measures
     2.56:1 on white and fails AA. This clears 4.5:1 on all three surfaces
     (#fff 4.76, --rh-bg 4.51, --rh-surface-2 4.66). Use --rh-ink-4 for
     genuinely decorative marks. */
  --rh-ink-3: #64748b;
  --rh-ink-4: #94a3b8;
  --rh-ink-rgb: 11, 18, 32;
  --rh-surface: #ffffff;
  --rh-surface-2: #fbfdfe;
  --rh-bg: #f7f9fb;
  --rh-line: #e6ebf1;
  --rh-line-2: #d7e0ea;

  /* hero ink --------------------------------------------------------- */
  --rh-hero-base: #060d14;
  --rh-hero-ink: #ffffff;
  --rh-hero-ink-2: rgba(255, 255, 255, 0.76);
  --rh-hero-ink-3: rgba(255, 255, 255, 0.56);
  --rh-hero-line: rgba(255, 255, 255, 0.14);
  --rh-hero-brand: #5eead4;

  /* Category hues — one per taxonomy bucket, used on card tags. Eight
     distinguishable families; each foreground clears AA on its own tint. */
  --rh-cat-get: #0f766e;
  --rh-cat-get-bg: rgba(15, 118, 110, 0.1);
  --rh-cat-app: #1d4ed8;
  --rh-cat-app-bg: rgba(29, 78, 216, 0.09);
  --rh-cat-country: #14713a;
  --rh-cat-country-bg: rgba(20, 113, 58, 0.1);
  --rh-cat-alt: #6d28d9;
  --rh-cat-alt-bg: rgba(109, 40, 217, 0.09);
  --rh-cat-fix: #9a4708;
  --rh-cat-fix-bg: rgba(154, 71, 8, 0.1);
  --rh-cat-privacy: #4338ca;
  --rh-cat-privacy-bg: rgba(67, 56, 202, 0.09);
  --rh-cat-api: #be185d;
  --rh-cat-api-bg: rgba(190, 24, 93, 0.09);
  --rh-cat-start: #475569;
  --rh-cat-start-bg: rgba(71, 85, 105, 0.09);

  /* geometry --------------------------------------------------------- */
  --rh-radius: 14px;
  --rh-radius-sm: 10px;
  --rh-radius-lg: 20px;
  --rh-radius-pill: 999px;
  --rh-maxw: 1180px;

  /* elevation -------------------------------------------------------- */
  --rh-shadow-1: 0 1px 2px rgba(var(--rh-ink-rgb), 0.05),
    0 1px 3px rgba(var(--rh-ink-rgb), 0.05);
  --rh-shadow-2: 0 6px 16px -6px rgba(var(--rh-ink-rgb), 0.16),
    0 2px 6px -2px rgba(var(--rh-ink-rgb), 0.08);
  --rh-shadow-3: 0 24px 48px -18px rgba(var(--rh-ink-rgb), 0.28),
    0 8px 20px -12px rgba(var(--rh-ink-rgb), 0.16);

  /* type scale (fluid) ------------------------------------------------ */
  --rh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --rh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --rh-fs-h1: clamp(1.875rem, 1.3rem + 2.3vw, 2.875rem);
  --rh-fs-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --rh-fs-h3: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --rh-fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --rh-fs-body: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem);
  --rh-fs-sm: 0.8125rem;
  --rh-fs-xs: 0.75rem;
  --rh-fs-micro: 0.6875rem;

  /* rhythm ----------------------------------------------------------- */
  --rh-sp-1: 4px;
  --rh-sp-2: 8px;
  --rh-sp-3: 12px;
  --rh-sp-4: 16px;
  --rh-sp-5: 24px;
  --rh-sp-6: 32px;
  --rh-sp-7: 48px;
  --rh-sp-8: 72px;
  --rh-section-y: clamp(40px, 5.6vw, 72px);

  /* motion ----------------------------------------------------------- */
  --rh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rh-dur: 0.18s;

  /* sticky filter bar height, used as scroll-margin on anchors */
  --rh-bar-h: 64px;

  font-family: var(--rh-font);
  font-size: var(--rh-fs-body);
  line-height: 1.6;
  color: var(--rh-ink);
  background: var(--rh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   2. VISIBILITY PRIMITIVE
   Bootstrap 4 ships no `[hidden]` rule; any author `display` in this file
   would outrank the user-agent one. See the !important tally at the top.
   -------------------------------------------------------------------------- */

.rh-page [hidden],
.rh-page .rh-is-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. A11Y PRIMITIVES
   -------------------------------------------------------------------------- */

.rh-page .rh-sr-only {
  position: absolute !important; /* beats Bootstrap .position-* */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: #0f766e;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}

.rh-skip:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

/* One focus treatment for every interactive element on the page. */
.rh-page a:focus-visible,
.rh-page button:focus-visible,
.rh-page input:focus-visible,
.rh-page select:focus-visible,
.rh-page [tabindex]:focus-visible {
  outline: 2px solid var(--rh-brand);
  outline-offset: 2px;
  border-radius: var(--rh-radius-sm);
}

.rh-page .rh-hero a:focus-visible,
.rh-page .rh-hero button:focus-visible,
.rh-page .rh-hero input:focus-visible {
  outline-color: var(--rh-hero-brand);
}

/* --------------------------------------------------------------------------
   4. SHELL + SECTION RHYTHM
   -------------------------------------------------------------------------- */

.rh-page .rh-shell {
  width: 100%;
  max-width: var(--rh-maxw);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

.rh-page .rh-section {
  padding-top: var(--rh-section-y);
  padding-bottom: var(--rh-section-y);
}

.rh-page .rh-section--tight {
  padding-top: clamp(28px, 3.6vw, 44px);
  padding-bottom: clamp(28px, 3.6vw, 44px);
}

.rh-page .rh-section--alt {
  background: var(--rh-surface);
  border-top: 1px solid var(--rh-line);
  border-bottom: 1px solid var(--rh-line);
}

.rh-page .rh-head {
  max-width: 640px;
  margin: 0 0 var(--rh-sp-6);
}

.rh-page .rh-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.rh-page .rh-eyebrow {
  display: block;
  font-size: var(--rh-fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-brand);
  margin-bottom: var(--rh-sp-2);
}

.rh-page .rh-h2 {
  font-size: var(--rh-fs-h2);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--rh-ink);
  margin: 0 0 var(--rh-sp-3);
}

.rh-page .rh-lead {
  font-size: var(--rh-fs-lead);
  line-height: 1.6;
  color: var(--rh-ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.rh-page .rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rh-sp-2);
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--rh-radius-sm);
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease),
    border-color var(--rh-dur) var(--rh-ease),
    color var(--rh-dur) var(--rh-ease),
    box-shadow var(--rh-dur) var(--rh-ease),
    transform var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-btn:hover {
  text-decoration: none;
}

.rh-page .rh-btn:active {
  transform: translateY(1px);
}

.rh-page .rh-btn[disabled],
.rh-page .rh-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.rh-page .rh-btn--lg {
  padding: 14px 26px;
  font-size: var(--rh-fs-body);
}

.rh-page .rh-btn--primary {
  background: var(--rh-brand);
  border-color: var(--rh-brand);
  color: var(--rh-on-brand);
  box-shadow: var(--rh-shadow-1);
}

.rh-page .rh-btn--primary:hover {
  background: var(--rh-brand-600);
  border-color: var(--rh-brand-600);
  color: var(--rh-on-brand);
  box-shadow: var(--rh-shadow-2);
}

.rh-page .rh-btn--secondary {
  background: var(--rh-surface);
  border-color: var(--rh-line-2);
  color: var(--rh-ink);
}

.rh-page .rh-btn--secondary:hover {
  border-color: var(--rh-brand);
  color: var(--rh-brand);
  background: var(--rh-brand-050);
}

.rh-page .rh-btn--ghost {
  background: transparent;
  border-color: var(--rh-hero-line);
  color: var(--rh-hero-ink);
}

.rh-page .rh-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--rh-hero-ink);
}

.rh-page .rh-btn--onhero {
  background: var(--rh-hero-brand);
  border-color: var(--rh-hero-brand);
  color: #062b26;
}

.rh-page .rh-btn--onhero:hover {
  background: #7ff0dd;
  border-color: #7ff0dd;
  color: #062b26;
}

/* --------------------------------------------------------------------------
   6. HERO — the library front desk. Search is the largest control here on
   purpose: someone landing on /resources arrived with a question.
   -------------------------------------------------------------------------- */

.rh-page .rh-hero {
  position: relative;
  isolation: isolate;
  background: var(--rh-hero-base);
  color: var(--rh-hero-ink);
  overflow: hidden;
}

.rh-page .rh-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      68ch 44ch at 12% -10%,
      rgba(15, 118, 110, 0.5) 0%,
      rgba(15, 118, 110, 0) 62%
    ),
    radial-gradient(
      52ch 40ch at 96% 8%,
      rgba(94, 234, 212, 0.16) 0%,
      rgba(94, 234, 212, 0) 60%
    ),
    linear-gradient(180deg, #08131a 0%, var(--rh-hero-base) 62%);
}

/* Hairline grid — reads as a catalogue/index surface rather than a poster. */
.rh-page .rh-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

.rh-page .rh-hero__inner {
  position: relative;
  padding-top: clamp(28px, 4.4vw, 56px);
  padding-bottom: clamp(32px, 4.8vw, 60px);
}

.rh-page .rh-crumb {
  font-size: var(--rh-fs-sm);
  color: var(--rh-hero-ink-3);
  margin-bottom: var(--rh-sp-5);
}

.rh-page .rh-crumb a {
  color: var(--rh-hero-ink-2);
  text-decoration: none;
}

.rh-page .rh-crumb a:hover {
  color: var(--rh-hero-brand);
  text-decoration: underline;
}

.rh-page .rh-crumb__sep {
  margin: 0 var(--rh-sp-2);
  color: var(--rh-hero-ink-3);
}

.rh-page .rh-hero__title {
  font-size: var(--rh-fs-h1);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.026em;
  margin: 0 0 var(--rh-sp-3);
  max-width: 18ch;
}

.rh-page .rh-hero__title em {
  font-style: normal;
  color: var(--rh-hero-brand);
}

.rh-page .rh-hero__lead {
  font-size: var(--rh-fs-lead);
  line-height: 1.55;
  color: var(--rh-hero-ink-2);
  margin: 0 0 var(--rh-sp-5);
  max-width: 56ch;
}

/* Hero search — the thesis element. */
.rh-page .rh-herosearch {
  max-width: 620px;
}

.rh-page .rh-searchfield {
  position: relative;
  display: flex;
  align-items: center;
}

.rh-page .rh-searchfield__icon {
  position: absolute;
  left: 16px;
  color: var(--rh-ink-4);
  pointer-events: none;
}

.rh-page .rh-searchfield input {
  width: 100%;
  padding: 15px 108px 15px 46px;
  font-family: inherit;
  font-size: var(--rh-fs-body);
  color: var(--rh-ink);
  background: var(--rh-surface);
  border: 1px solid transparent;
  border-radius: var(--rh-radius);
  box-shadow: var(--rh-shadow-3);
  transition: box-shadow var(--rh-dur) var(--rh-ease),
    border-color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-searchfield input::placeholder {
  color: var(--rh-ink-3);
}

.rh-page .rh-searchfield input:focus {
  border-color: var(--rh-brand);
  box-shadow: var(--rh-shadow-3), 0 0 0 4px rgba(var(--rh-brand-rgb), 0.18);
}

/* The clear button only exists while there is something to clear. */
.rh-page .rh-searchfield__clear {
  position: absolute;
  right: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rh-line);
  color: var(--rh-ink-2);
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-searchfield__clear:hover {
  background: var(--rh-line-2);
  color: var(--rh-ink);
}

.rh-page .rh-searchfield__submit {
  position: absolute;
  right: 6px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--rh-radius-sm);
  background: var(--rh-brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-searchfield__submit:hover {
  background: var(--rh-brand-600);
}

/* `/` hint — a pro convention, shown only where a keyboard exists. */
.rh-page .rh-searchfield__kbd {
  position: absolute;
  right: 94px;
  display: none;
  padding: 2px 7px;
  border: 1px solid var(--rh-line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--rh-surface-2);
  color: var(--rh-ink-3);
  font-family: var(--rh-mono);
  font-size: var(--rh-fs-micro);
  line-height: 1.5;
  pointer-events: none;
}

@media (hover: hover) and (min-width: 900px) {
  .rh-page .rh-searchfield__kbd {
    display: block;
  }
}

.rh-page .rh-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rh-sp-2);
  margin-top: var(--rh-sp-4);
}

.rh-page .rh-suggest__label {
  font-size: var(--rh-fs-sm);
  color: var(--rh-hero-ink-3);
  margin-right: var(--rh-sp-1);
}

.rh-page .rh-suggest__chip {
  padding: 5px 12px;
  border: 1px solid var(--rh-hero-line);
  border-radius: var(--rh-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--rh-hero-ink-2);
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease),
    border-color var(--rh-dur) var(--rh-ease),
    color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-suggest__chip:hover {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.4);
  color: var(--rh-hero-brand);
}

/* Hero proof strip — facts, set as data not as marketing. */
.rh-page .rh-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-sp-5);
  margin: var(--rh-sp-6) 0 0;
  padding: var(--rh-sp-5) 0 0;
  border-top: 1px solid var(--rh-hero-line);
  list-style: none;
}

.rh-page .rh-hero__proof li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-page .rh-proof__num {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rh-hero-ink);
  font-variant-numeric: tabular-nums;
}

.rh-page .rh-proof__label {
  font-size: var(--rh-fs-sm);
  color: var(--rh-hero-ink-3);
}

/* --------------------------------------------------------------------------
   7. THE CORPUS MAP — sticky filter bar. Every chip carries its real,
   corpus-wide count, so a chip can never lead to an empty grid.
   -------------------------------------------------------------------------- */

.rh-page .rh-filterbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rh-line);
  transition: box-shadow var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-filterbar.rh-is-stuck {
  box-shadow: var(--rh-shadow-2);
}

.rh-page .rh-filterbar__inner {
  display: flex;
  align-items: center;
  gap: var(--rh-sp-4);
  min-height: var(--rh-bar-h);
  padding-top: var(--rh-sp-3);
  padding-bottom: var(--rh-sp-3);
}

.rh-page .rh-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rh-sp-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.rh-page .rh-chips::-webkit-scrollbar {
  height: 4px;
}

.rh-page .rh-chips::-webkit-scrollbar-thumb {
  background: var(--rh-line-2);
  border-radius: 2px;
}

.rh-page .rh-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--rh-line-2);
  border-radius: var(--rh-radius-pill);
  background: var(--rh-surface);
  color: var(--rh-ink-2);
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease),
    border-color var(--rh-dur) var(--rh-ease),
    color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-chip:hover {
  border-color: var(--rh-brand);
  color: var(--rh-brand);
  background: var(--rh-brand-050);
  text-decoration: none;
}

.rh-page .rh-chip__count {
  padding: 1px 7px;
  border-radius: var(--rh-radius-pill);
  background: var(--rh-bg);
  color: var(--rh-ink-3);
  font-size: var(--rh-fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--rh-dur) var(--rh-ease),
    color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-chip[aria-selected="true"] {
  background: var(--rh-brand);
  border-color: var(--rh-brand);
  color: var(--rh-on-brand);
}

.rh-page .rh-chip[aria-selected="true"] .rh-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.rh-page .rh-sort {
  display: flex;
  align-items: center;
  gap: var(--rh-sp-2);
  flex: 0 0 auto;
}

.rh-page .rh-sort__label {
  font-size: var(--rh-fs-sm);
  color: var(--rh-ink-3);
  white-space: nowrap;
}

.rh-page .rh-sort select {
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--rh-line-2);
  border-radius: var(--rh-radius-sm);
  background-color: var(--rh-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: var(--rh-ink);
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.rh-page .rh-sort select:hover {
  border-color: var(--rh-brand);
}

/* --------------------------------------------------------------------------
   8. RESULT LINE
   -------------------------------------------------------------------------- */

.rh-page .rh-resultline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rh-sp-3);
  margin-bottom: var(--rh-sp-5);
  font-size: var(--rh-fs-sm);
  color: var(--rh-ink-2);
}

.rh-page .rh-resultline strong {
  color: var(--rh-ink);
  font-variant-numeric: tabular-nums;
}

.rh-page .rh-resultline__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rh-brand);
  font-family: inherit;
  font-size: var(--rh-fs-sm);
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}

.rh-page .rh-resultline__reset:hover {
  text-decoration: underline;
  color: var(--rh-brand-600);
}

.rh-page .rh-copylink {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   9. ARTICLE GRID + CARDS
   -------------------------------------------------------------------------- */

.rh-page .rh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--rh-sp-5);
}

.rh-page .rh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rh-surface);
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--rh-shadow-1);
  transition: border-color var(--rh-dur) var(--rh-ease),
    box-shadow var(--rh-dur) var(--rh-ease),
    transform var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-card:hover {
  border-color: var(--rh-brand-200);
  box-shadow: var(--rh-shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.rh-page .rh-card__body {
  flex: 1 1 auto;
  padding: var(--rh-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--rh-sp-2);
}

/* Category tag — all-caps micro label, catalogue register. */
.rh-page .rh-tag {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: var(--rh-fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--rh-bg);
  color: var(--rh-ink-2);
}

.rh-page .rh-tag--get {
  background: var(--rh-cat-get-bg);
  color: var(--rh-cat-get);
}
.rh-page .rh-tag--app {
  background: var(--rh-cat-app-bg);
  color: var(--rh-cat-app);
}
.rh-page .rh-tag--country {
  background: var(--rh-cat-country-bg);
  color: var(--rh-cat-country);
}
.rh-page .rh-tag--alt {
  background: var(--rh-cat-alt-bg);
  color: var(--rh-cat-alt);
}
.rh-page .rh-tag--fix {
  background: var(--rh-cat-fix-bg);
  color: var(--rh-cat-fix);
}
.rh-page .rh-tag--privacy {
  background: var(--rh-cat-privacy-bg);
  color: var(--rh-cat-privacy);
}
.rh-page .rh-tag--api {
  background: var(--rh-cat-api-bg);
  color: var(--rh-cat-api);
}
.rh-page .rh-tag--start {
  background: var(--rh-cat-start-bg);
  color: var(--rh-cat-start);
}

.rh-page .rh-card__title {
  font-size: var(--rh-fs-h3);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--rh-ink);
  margin: 0;
  transition: color var(--rh-dur) var(--rh-ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rh-page .rh-card:hover .rh-card__title {
  color: var(--rh-brand);
}

.rh-page .rh-card__excerpt {
  font-size: var(--rh-fs-sm);
  line-height: 1.58;
  color: var(--rh-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rh-page .rh-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rh-sp-3);
  padding: var(--rh-sp-3) var(--rh-sp-5);
  border-top: 1px solid var(--rh-line);
  background: var(--rh-surface-2);
  font-size: var(--rh-fs-sm);
  color: var(--rh-ink-3);
}

.rh-page .rh-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.rh-page .rh-card__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rh-brand);
  font-weight: 650;
}

.rh-page .rh-card__go svg {
  transition: transform var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-card:hover .rh-card__go svg {
  transform: translateX(3px);
}

/* Search-term highlight inside titles. */
.rh-page .rh-card mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--rh-accent-050);
  color: var(--rh-accent-700);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. SKELETON + BUSY STATE
   -------------------------------------------------------------------------- */

.rh-page .rh-grid.rh-is-busy {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-skel {
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  padding: var(--rh-sp-5);
  box-shadow: var(--rh-shadow-1);
}

.rh-page .rh-skel__line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    var(--rh-line) 25%,
    var(--rh-bg) 37%,
    var(--rh-line) 63%
  );
  background-size: 400% 100%;
  animation: rh-shimmer 1.3s var(--rh-ease) infinite;
}

.rh-page .rh-skel__line--tag {
  width: 84px;
  height: 18px;
  margin-bottom: 16px;
}
.rh-page .rh-skel__line--w70 {
  width: 70%;
}
.rh-page .rh-skel__line--w40 {
  width: 40%;
}

@keyframes rh-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* --------------------------------------------------------------------------
   11. EMPTY STATE — an invitation to act, not a shrug.
   -------------------------------------------------------------------------- */

.rh-page .rh-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--rh-sp-8) var(--rh-sp-5);
  border: 1px dashed var(--rh-line-2);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}

.rh-page .rh-empty__icon {
  color: var(--rh-ink-4);
  margin-bottom: var(--rh-sp-4);
}

.rh-page .rh-empty__title {
  font-size: var(--rh-fs-h3);
  font-weight: 650;
  color: var(--rh-ink);
  margin: 0 0 var(--rh-sp-2);
}

.rh-page .rh-empty__text {
  font-size: var(--rh-fs-sm);
  color: var(--rh-ink-2);
  margin: 0 0 var(--rh-sp-5);
  max-width: 46ch;
}

.rh-page .rh-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rh-sp-2);
}

/* Inline error — replaces the old alert() path. */
.rh-page .rh-error {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rh-sp-3);
  padding: var(--rh-sp-4) var(--rh-sp-5);
  border: 1px solid #fcd9b6;
  border-left: 3px solid var(--rh-accent);
  border-radius: var(--rh-radius-sm);
  background: var(--rh-accent-050);
  color: var(--rh-accent-700);
  font-size: var(--rh-fs-sm);
}

/* --------------------------------------------------------------------------
   12. PAGINATION
   -------------------------------------------------------------------------- */

.rh-page .rh-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rh-sp-3);
  margin-top: var(--rh-sp-7);
}

.rh-page .rh-more__count {
  font-size: var(--rh-fs-sm);
  color: var(--rh-ink-3);
  font-variant-numeric: tabular-nums;
}

.rh-page .rh-more__bar {
  width: 200px;
  height: 4px;
  border-radius: 2px;
  background: var(--rh-line);
  overflow: hidden;
}

.rh-page .rh-more__bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--rh-brand);
  transition: width 0.4s var(--rh-ease);
}

/* --------------------------------------------------------------------------
   13. NAV CARDS ("where to go next") + API QUICKSTART
   -------------------------------------------------------------------------- */

.rh-page .rh-navgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rh-sp-4);
}

.rh-page .rh-navcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rh-sp-3);
  padding: var(--rh-sp-5);
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  box-shadow: var(--rh-shadow-1);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--rh-dur) var(--rh-ease),
    box-shadow var(--rh-dur) var(--rh-ease),
    transform var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-navcard:hover {
  border-color: var(--rh-brand-200);
  box-shadow: var(--rh-shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.rh-page .rh-navcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rh-radius-sm);
  background: var(--rh-brand-050);
  color: var(--rh-brand);
}

.rh-page .rh-navcard__title {
  font-size: var(--rh-fs-h3);
  font-weight: 650;
  color: var(--rh-ink);
  margin: 0;
}

.rh-page .rh-navcard__text {
  font-size: var(--rh-fs-sm);
  line-height: 1.58;
  color: var(--rh-ink-2);
  margin: 0;
}

.rh-page .rh-navcard__go {
  margin-top: auto;
  padding-top: var(--rh-sp-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rh-brand);
  font-size: var(--rh-fs-sm);
  font-weight: 650;
}

.rh-page .rh-navcard__go svg {
  transition: transform var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-navcard:hover .rh-navcard__go svg {
  transform: translateX(3px);
}

/* API quickstart — a real request, copyable. Replaces the fabricated CLI. */
.rh-page .rh-api {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.rh-page .rh-code {
  border: 1px solid #1e293b;
  border-radius: var(--rh-radius);
  background: #0b1220;
  overflow: hidden;
  box-shadow: var(--rh-shadow-3);
}

.rh-page .rh-code__head {
  display: flex;
  align-items: center;
  gap: var(--rh-sp-3);
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  background: #0d1626;
}

.rh-page .rh-code__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.rh-page .rh-code__dot--r {
  background: #f87171;
}
.rh-page .rh-code__dot--y {
  background: #fbbf24;
}
.rh-page .rh-code__dot--g {
  background: #34d399;
}

.rh-page .rh-code__name {
  font-family: var(--rh-mono);
  font-size: var(--rh-fs-xs);
  color: #64748b;
  margin-left: var(--rh-sp-2);
}

.rh-page .rh-code__copy {
  margin-left: auto;
  padding: 4px 11px;
  border: 1px solid #1e293b;
  border-radius: 7px;
  background: #111c2e;
  color: #94a3b8;
  font-family: inherit;
  font-size: var(--rh-fs-micro);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--rh-dur) var(--rh-ease),
    color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-code__copy:hover {
  background: #16233a;
  color: #e2e8f0;
}

.rh-page .rh-code__copy.rh-is-done {
  color: #34d399;
  border-color: #14532d;
}

.rh-page .rh-code pre {
  margin: 0;
  padding: var(--rh-sp-5);
  overflow-x: auto;
  font-family: var(--rh-mono);
  font-size: var(--rh-fs-xs);
  line-height: 1.85;
  color: #cbd5e1;
  background: transparent;
  border: 0;
}

.rh-page .rh-code .rh-c-cmd {
  color: #5eead4;
}
.rh-page .rh-code .rh-c-flag {
  color: #c4b5fd;
}
.rh-page .rh-code .rh-c-str {
  color: #fcd34d;
}
.rh-page .rh-code .rh-c-com {
  color: #64748b;
}
.rh-page .rh-code .rh-c-ok {
  color: #34d399;
}

/* --------------------------------------------------------------------------
   14. STEPS / AUDIENCE / TRUST
   -------------------------------------------------------------------------- */

.rh-page .rh-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--rh-sp-4);
  counter-reset: rh-step;
}

/* Numbering is real information here — this IS an ordered procedure. */
.rh-page .rh-step {
  position: relative;
  padding: var(--rh-sp-5);
  padding-top: var(--rh-sp-6);
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
  counter-increment: rh-step;
}

.rh-page .rh-step::before {
  content: counter(rh-step, decimal-leading-zero);
  position: absolute;
  top: var(--rh-sp-4);
  left: var(--rh-sp-5);
  font-family: var(--rh-mono);
  font-size: var(--rh-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rh-brand);
}

.rh-page .rh-step h3 {
  font-size: var(--rh-fs-h3);
  font-weight: 650;
  color: var(--rh-ink);
  margin: 0 0 var(--rh-sp-2);
}

.rh-page .rh-step p {
  font-size: var(--rh-fs-sm);
  line-height: 1.58;
  color: var(--rh-ink-2);
  margin: 0;
}

.rh-page .rh-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rh-sp-4);
}

.rh-page .rh-tile {
  display: flex;
  gap: var(--rh-sp-4);
  align-items: flex-start;
  padding: var(--rh-sp-5);
  border: 1px solid var(--rh-line);
  border-radius: var(--rh-radius);
  background: var(--rh-surface);
}

.rh-page .rh-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--rh-radius-sm);
  background: var(--rh-brand-050);
  color: var(--rh-brand);
}

.rh-page .rh-tile h3 {
  font-size: var(--rh-fs-h3);
  font-weight: 650;
  color: var(--rh-ink);
  margin: 0 0 var(--rh-sp-1);
}

.rh-page .rh-tile p {
  font-size: var(--rh-fs-sm);
  line-height: 1.58;
  color: var(--rh-ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. FAQ — grid-template-rows so a long answer is never clipped.
   -------------------------------------------------------------------------- */

.rh-page .rh-faq {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--rh-line);
}

.rh-page .rh-faq__item {
  border-bottom: 1px solid var(--rh-line);
}

.rh-page .rh-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rh-sp-4);
  width: 100%;
  padding: var(--rh-sp-5) 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--rh-fs-body);
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  color: var(--rh-ink);
  cursor: pointer;
  transition: color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-faq__q:hover {
  color: var(--rh-brand);
}

.rh-page .rh-faq__sign {
  flex: 0 0 auto;
  color: var(--rh-ink-3);
  transition: transform 0.22s var(--rh-ease),
    color var(--rh-dur) var(--rh-ease);
}

.rh-page .rh-faq__q[aria-expanded="true"] .rh-faq__sign {
  transform: rotate(45deg);
  color: var(--rh-brand);
}

/* 0fr -> 1fr animates to the answer's real height, whatever it is. */
.rh-page .rh-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s var(--rh-ease);
}

.rh-page .rh-faq__item.rh-is-open .rh-faq__a {
  grid-template-rows: 1fr;
}

.rh-page .rh-faq__a > div {
  overflow: hidden;
}

.rh-page .rh-faq__a p {
  font-size: var(--rh-fs-sm);
  line-height: 1.68;
  color: var(--rh-ink-2);
  margin: 0 0 var(--rh-sp-5);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   16. CTA
   -------------------------------------------------------------------------- */

.rh-page .rh-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  border-radius: var(--rh-radius-lg);
  background: var(--rh-hero-base);
  color: var(--rh-hero-ink);
  text-align: center;
}

.rh-page .rh-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      60ch 34ch at 20% 0%,
      rgba(15, 118, 110, 0.55) 0%,
      rgba(15, 118, 110, 0) 62%
    ),
    radial-gradient(
      44ch 30ch at 88% 100%,
      rgba(94, 234, 212, 0.16) 0%,
      rgba(94, 234, 212, 0) 60%
    );
}

.rh-page .rh-cta h2 {
  font-size: var(--rh-fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--rh-sp-3);
  color: var(--rh-hero-ink);
}

.rh-page .rh-cta p {
  font-size: var(--rh-fs-lead);
  color: var(--rh-hero-ink-2);
  margin: 0 auto var(--rh-sp-6);
  max-width: 52ch;
}

.rh-page .rh-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rh-sp-3);
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .rh-page .rh-api {
    grid-template-columns: 1fr;
  }
  .rh-page .rh-filterbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rh-sp-3);
  }
  .rh-page .rh-sort {
    justify-content: space-between;
  }
  .rh-page .rh-copylink {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .rh-page .rh-grid {
    grid-template-columns: 1fr;
  }
  .rh-page .rh-hero__proof {
    gap: var(--rh-sp-4) var(--rh-sp-5);
  }
  .rh-page .rh-searchfield input {
    padding-right: 92px;
  }
  .rh-page .rh-searchfield__clear {
    right: 70px;
  }
  /* The sticky bar eats too much of a short viewport on phones. */
  .rh-page .rh-filterbar {
    position: static;
  }
}

/* Anchors must clear the sticky bar. */
.rh-page [id] {
  scroll-margin-top: calc(var(--rh-bar-h) + 16px);
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION — beats every transition above, plus Bootstrap's own
   .fade / .collapsing. See the !important tally at the top.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rh-page *,
  .rh-page *::before,
  .rh-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rh-page .rh-card:hover,
  .rh-page .rh-navcard:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   19. PRINT — the grid is the only thing worth printing.
   -------------------------------------------------------------------------- */

@media print {
  .rh-page .rh-hero,
  .rh-page .rh-filterbar,
  .rh-page .rh-more,
  .rh-page .rh-cta,
  .rh-page .rh-api {
    display: none;
  }
  .rh-page .rh-card {
    break-inside: avoid;
    box-shadow: none;
  }
}