/*
  RedGuides: XenForo-like aMember theme ("Option 1" shell theme)

  Goal:
  - Make aMember pages look/feel like XenForo (RG4 style) without bootstrapping XF PHP.
  - Keep aMember markup intact; restyle via CSS + light layout chrome.

  Notes:
  - We intentionally use XF-ish token names so future copy/paste from XF CSS is easier.
  - This theme is still pure CSS; no iframe; no XenForo JS is required.
*/

/* =========================
   Design tokens (RG4)
   ========================= */

:root {
  color-scheme: light;

  /* RG4 palette (from XenForo style export) */
  --xf-paletteAccent1: #FFEBEE;
  --xf-paletteAccent2: #F44336;
  --xf-paletteAccent3: #C62828;

  --xf-paletteColor1: #E1F5FE;
  --xf-paletteColor2: #B3E5FC;
  --xf-paletteColor3: #81D4FA;
  --xf-paletteColor4: #0277BD;
  --xf-paletteColor5: #01579B;

  /* Base surfaces */
  --xf-pageBg: #f5f7f9;
  --xf-contentBg: #ffffff;
  --xf-contentAltBg: #f8fafc;

  /* Text */
  --xf-textColor: #111827;
  --xf-textColorMuted: #6b7280;

  /* Links / primary */
  --xf-linkColor: var(--xf-paletteColor4);
  --xf-linkHoverColor: var(--xf-paletteColor5);

  /* Borders / radii / shadows */
  --xf-borderColor: rgba(0, 0, 0, 0.12);
  --xf-borderColorLight: rgba(0, 0, 0, 0.08);
  --xf-borderColorHeavy: rgba(0, 0, 0, 0.20);
  --xf-borderRadiusSmall: 4px;
  --xf-borderRadiusMedium: 8px;
  --xf-borderRadiusLarge: 12px;
  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --xf-shadow2: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* Typography */
  --xf-fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xf-fontSizeNormal: 16px;
  --xf-fontSizeSmall: 13px;
  --xf-fontSizeSmaller: 12px;
  --xf-fontSizeLarge: 18px;
  --xf-fontSizeLarger: 20px;
  --xf-lineHeight: 1.5;

  /* Block headers/footers (roughly aligned to XenForo's defaults) */
  --xf-majorHeadingBg: var(--xf-paletteColor2);
  --xf-majorHeadingTextColor: #0c2331;
  --xf-blockFooterBg: var(--xf-contentAltBg);
  --xf-blockFooterTextColor: var(--xf-textColorMuted);

  /* Focus ring */
  --xf-focusRing: 0 0 0 3px rgba(2, 119, 189, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* RG4 alternate palette */
    --xf-paletteAccent1: #f0a8a8;
    --xf-paletteAccent2: #c32222;
    --xf-paletteAccent3: #4e0e0e;

    --xf-paletteColor1: #85bde0;
    --xf-paletteColor2: #479cd1;
    --xf-paletteColor3: #276e9b;
    --xf-paletteColor4: #16405a;
    --xf-paletteColor5: #0c2331;

    --xf-pageBg: #0b1220;
    --xf-contentBg: #0f172a;
    --xf-contentAltBg: #111c34;

    --xf-textColor: #e5e7eb;
    --xf-textColorMuted: #9ca3af;

    /* In dark mode, use the lighter "primary" colors for links */
    --xf-linkColor: var(--xf-paletteColor1);
    --xf-linkHoverColor: var(--xf-paletteColor2);

    --xf-borderColor: rgba(255, 255, 255, 0.12);
    --xf-borderColorLight: rgba(255, 255, 255, 0.08);
    --xf-borderColorHeavy: rgba(255, 255, 255, 0.18);

    --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.35);

    --xf-majorHeadingBg: rgba(255, 255, 255, 0.05);
    --xf-majorHeadingTextColor: var(--xf-textColor);

    --xf-focusRing: 0 0 0 3px rgba(133, 189, 224, 0.25);
  }
}

/* Optional override: force scheme based on XenForo cookies/localStorage (set by layout.phtml script) */
:root[data-rg-color-scheme="light"] {
  color-scheme: light;

  --xf-paletteAccent1: #FFEBEE;
  --xf-paletteAccent2: #F44336;
  --xf-paletteAccent3: #C62828;

  --xf-paletteColor1: #E1F5FE;
  --xf-paletteColor2: #B3E5FC;
  --xf-paletteColor3: #81D4FA;
  --xf-paletteColor4: #0277BD;
  --xf-paletteColor5: #01579B;

  --xf-pageBg: #f5f7f9;
  --xf-contentBg: #ffffff;
  --xf-contentAltBg: #f8fafc;

  --xf-textColor: #111827;
  --xf-textColorMuted: #6b7280;

  --xf-linkColor: var(--xf-paletteColor4);
  --xf-linkHoverColor: var(--xf-paletteColor5);

  --xf-borderColor: rgba(0, 0, 0, 0.12);
  --xf-borderColorLight: rgba(0, 0, 0, 0.08);
  --xf-borderColorHeavy: rgba(0, 0, 0, 0.20);

  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --xf-shadow2: 0 10px 30px rgba(0, 0, 0, 0.10);

  --xf-majorHeadingBg: var(--xf-paletteColor2);
  --xf-majorHeadingTextColor: #0c2331;
  --xf-blockFooterBg: var(--xf-contentAltBg);
  --xf-blockFooterTextColor: var(--xf-textColorMuted);

  --xf-focusRing: 0 0 0 3px rgba(2, 119, 189, 0.25);
}

:root[data-rg-color-scheme="dark"] {
  color-scheme: dark;

  --xf-paletteAccent1: #f0a8a8;
  --xf-paletteAccent2: #c32222;
  --xf-paletteAccent3: #4e0e0e;

  --xf-paletteColor1: #85bde0;
  --xf-paletteColor2: #479cd1;
  --xf-paletteColor3: #276e9b;
  --xf-paletteColor4: #16405a;
  --xf-paletteColor5: #0c2331;

  --xf-pageBg: #0b1220;
  --xf-contentBg: #0f172a;
  --xf-contentAltBg: #111c34;

  --xf-textColor: #e5e7eb;
  --xf-textColorMuted: #9ca3af;

  --xf-linkColor: var(--xf-paletteColor1);
  --xf-linkHoverColor: var(--xf-paletteColor2);

  --xf-borderColor: rgba(255, 255, 255, 0.12);
  --xf-borderColorLight: rgba(255, 255, 255, 0.08);
  --xf-borderColorHeavy: rgba(255, 255, 255, 0.18);

  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.35);

  --xf-majorHeadingBg: rgba(255, 255, 255, 0.05);
  --xf-majorHeadingTextColor: var(--xf-textColor);

  --xf-focusRing: 0 0 0 3px rgba(133, 189, 224, 0.25);
}

/* =========================
   Base elements
   ========================= */

html, body {
  background: var(--xf-pageBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) {
  margin: 0;
  font-family: var(--xf-fontFamily);
  font-size: var(--xf-fontSizeNormal);
  line-height: var(--xf-lineHeight);
}

body.rg-xf-shell:where(:not(.rg-px)) a {
  color: var(--xf-linkColor);
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) a:hover {
  color: var(--xf-linkHoverColor);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 55%);
}

body.rg-xf-shell:where(:not(.rg-px)) :focus-visible {
  outline: none;
  box-shadow: var(--xf-focusRing);
}

/* =========================
   XenForo-like chrome (header/nav/body/footer)
   ========================= */

.rg-xfPageWrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rg-xfHeader {
  background: var(--xf-contentBg);
  border-bottom: 1px solid var(--xf-borderColor);
}

.rg-xfHeader-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
}

.rg-xfHeader-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.rg-xfHeaderAccount {
  display: flex;
  align-items: center;
}

.rg-xfHeaderAccount .rg-xfNavgroup {
  justify-content: flex-end;
}

.rg-xfHeaderAccount .rg-xfNavgroup-link {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .rg-xfHeaderAccount {
    width: 100%;
    justify-content: flex-end;
  }
}

.rg-xfHeaderAccount .rg-xfNavgroup-account {
  font-weight: 700;
}

.rg-xfHeader-logo img {
  max-height: 90px;
  max-width: 215px;
  height: auto;
  width: auto;
  display: block;
}

.rg-xfLogo--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .rg-xfLogo--light { display: none; }
  .rg-xfLogo--dark { display: block; }
}

:root[data-rg-color-scheme="dark"] .rg-xfLogo--light {
  display: none;
}
:root[data-rg-color-scheme="dark"] .rg-xfLogo--dark {
  display: block;
}
:root[data-rg-color-scheme="light"] .rg-xfLogo--light {
  display: block;
}
:root[data-rg-color-scheme="light"] .rg-xfLogo--dark {
  display: none;
}

.rg-xfNavSticky {
  background: var(--xf-contentBg);
  border-bottom: 1px solid var(--xf-borderColor);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.rg-xfNav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rg-xfNav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.rg-xfNavEl {
  display: block;
}

.rg-xfNavLink {
  display: block;
  padding: 9px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  border: 1px solid transparent;
  text-decoration: none;
}

.rg-xfNavLink:hover {
  background: var(--xf-paletteColor1);
  border-color: var(--xf-borderColor);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .rg-xfNavLink:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.rg-xfNav-opposite {
  display: flex;
  align-items: center;
}

.rg-xfNavgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rg-xfNavgroup-link {
  display: inline-block;
  padding: 7px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColor);
  background: transparent;
  color: var(--xf-textColor);
  text-decoration: none;
  font-size: var(--xf-fontSizeSmall);
}

.rg-xfNavgroup-link:hover {
  background: var(--xf-contentAltBg);
  text-decoration: none;
}

.rg-xfNavgroup-link.rg-xfNavgroup-primary {
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 25%);
  background: var(--xf-linkColor);
  color: #fff;
}

.rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  background: var(--xf-linkHoverColor);
  border-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 20%);
  color: #fff;
  text-decoration: none;
}

/* Dark scheme: avoid white-on-light-blue low contrast (Register + primary submit buttons) */
@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme]) .rg-xfNavgroup-link.rg-xfNavgroup-primary,
  :root:not([data-rg-color-scheme]) .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
    color: var(--xf-pageBg);
  }

  :root:not([data-rg-color-scheme]) body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit] {
    color: var(--xf-pageBg);
  }
}

:root[data-rg-color-scheme="dark"] .rg-xfNavgroup-link.rg-xfNavgroup-primary,
:root[data-rg-color-scheme="dark"] .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  color: var(--xf-pageBg);
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit] {
  color: var(--xf-pageBg);
}

.rg-xfBody {
  flex: 1;
}

.rg-xfBody-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 30px;
}

/* Let aMember's content container be the "surface" so we can round it nicely */
.rg-xfBody-pageContent {
  background: transparent;
  border: 0;
  padding: 0;
}

.rg-xfFooter {
  border-top: 1px solid var(--xf-borderColor);
  background: var(--xf-contentBg);
}

.rg-xfFooter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

.rg-xfFooter-link {
  color: inherit;
  text-decoration: none;
}

.rg-xfFooter-link:hover {
  text-decoration: underline;
}

.rg-xfFooter-sep {
  margin: 0 8px;
  opacity: 0.7;
}

/* =========================
   aMember -> XenForo component mapping
   ========================= */

/* Content surface */
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content {
  min-height: auto;
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content-top {
  padding: 14px 18px 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content-content {
  padding: 0 18px 18px;
}

/* Breadcrumbs */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs .am-breadcrumbs-item,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs .am-breadcrumbs-separator {
  float: none;
  margin: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs .am-breadcrumbs-separator {
  opacity: 0.6;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-breadcrumbs a:hover {
  color: var(--xf-textColor);
  text-decoration: underline;
}

/* Page title */
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content-top > h1 {
  margin: 0 0 12px 0;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Member toolbar (mobile hamburger / language chooser) */
body.rg-xf-shell:where(:not(.rg-px)) .am-account-toolbar {
  margin: 0;
  display: none;
}

@media all and (max-width: 500px) {
  body.rg-xf-shell:where(:not(.rg-px)) .am-account-toolbar {
    display: block;
  }

  /* Contain the floated mobile controls (dashboard + hamburger) so they stay inside the toolbar bar */
  body.rg-xf-shell:where(:not(.rg-px)) .am-account-toolbar-items {
    display: flow-root;
  }

  /* Make the mobile controls readable in dark mode + match our tokenized UI */
  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-dashboard,
  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0 8px 0 0;
    border-radius: var(--xf-borderRadiusMedium);
    border: 1px solid var(--xf-borderColor);
    background: var(--xf-contentBg);
    color: var(--xf-textColor);
    text-decoration: none;
  }

  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-dashboard::before,
  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-switch::before {
    color: currentColor;
  }

  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-dashboard:hover,
  body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-switch:hover {
    background: var(--xf-contentAltBg);
  }
}

body.rg-xf-shell:where(:not(.rg-px)) .am-account-toolbar-items {
  overflow: visible;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
}

/* If the toolbar is empty (common on desktop), don't render an empty bar. */
body.rg-xf-shell:where(:not(.rg-px)) .am-account-toolbar-items:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Avoid duplicate "login/logout" block (we render account links in header nav) */
body.rg-xf-shell:where(:not(.rg-px)) .am-user-identity-block {
  display: none;
}

/* Tabs menu (member area) -> XF-ish pill nav */
body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-wrapper {
  margin: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px;
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: visible;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs > li {
  float: none;
  background: transparent;
}

/* aMember default theme sets a red/orange gradient on the LI on hover/active.
   That bleeds through our rounded A background as "orange corners". Kill it. */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.active,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.normal:hover {
  background: transparent;
  background-image: none;
}

/* Dropdown menus under tabs */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .has-children ul {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow2);
  padding: 6px;
  overflow: hidden;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .has-children ul a {
  padding: 8px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  background: transparent;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .has-children ul a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

/* Make the parent item visually "connected" to the open dropdown */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .has-children:hover > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs a {
  height: auto;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid transparent;
  color: var(--xf-textColorMuted);
  background: transparent;
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.active > a,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.normal > a:hover {
  color: var(--xf-textColor);
  background: var(--xf-contentBg);
  border-color: var(--xf-borderColor);
  box-shadow: var(--xf-shadow1);
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .menu-item-alert {
  background: var(--xf-paletteAccent1);
  color: var(--xf-paletteAccent3);
  border-radius: 999px;
  padding: 0 6px;
  min-width: auto;
  height: auto;
  line-height: 1.4;
}

/* Keep badge styling stable when base theme tries to recolor it on hover. */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.active .menu-item-alert,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.normal:hover .menu-item-alert {
  background: var(--xf-paletteAccent1);
  color: var(--xf-paletteAccent3);
}

@media (prefers-color-scheme: dark) {
  body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs .menu-item-alert {
    background: rgba(255, 255, 255, 0.10);
    color: var(--xf-textColor);
  }

  body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.active .menu-item-alert,
  body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs li.normal:hover .menu-item-alert {
    background: rgba(255, 255, 255, 0.10);
    color: var(--xf-textColor);
  }
}

/* Remove FA "home" icon squash in the first tab */
body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs #menu-member {
  width: auto;
  overflow: visible;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs #menu-member::before {
  display: none;
}

/* Narrow tabs (mobile member menu) */
body.rg-xf-shell:where(:not(.rg-px)) .am-tabs-narrow-wrapper {
  margin: 10px 0 0;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs-narrow {
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  background: var(--xf-contentBg);
  box-shadow: var(--xf-shadow1);
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs-narrow li {
  margin: 0;
  padding: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs-narrow a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs-narrow li.active > a {
  background: var(--xf-contentAltBg);
  font-weight: 600;
}

body.rg-xf-shell:where(:not(.rg-px)) ul.am-tabs-narrow li.normal > a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

/* Buttons */
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content a.button,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content button,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=button] {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  color: var(--xf-textColor);
  padding: 0.55em 1.05em;
  border-radius: var(--xf-borderRadiusMedium);
  box-shadow: none;
  background-image: none;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content a.button:hover,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content button:hover,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=button]:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 30%);
  border-color: var(--xf-borderColorHeavy);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content a.button:active,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content button:active,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=button]:active {
  transform: translateY(0);
}

/* Primary actions: submit buttons */
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit] {
  background: var(--xf-linkColor);
  border: 1px solid color-mix(in srgb, var(--xf-linkColor), transparent 20%);
  color: #fff;
  padding: 0.55em 1.15em;
  border-radius: var(--xf-borderRadiusMedium);
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit]:hover,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit]:active {
  cursor: pointer;
  background: var(--xf-linkHoverColor);
  border-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 20%);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 10px 26px rgba(0, 0, 0, 0.14);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content button:disabled,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=button]:disabled,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=submit]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form controls */
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content textarea,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content select {
  font-family: var(--xf-fontFamily);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content select,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content textarea,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=email],
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=number],
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=text],
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=password] {
  padding: 0.55em 0.75em;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
  background: var(--xf-contentBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content select:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content textarea:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=email]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=number]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=text]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[type=password]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 40%);
  box-shadow: var(--xf-focusRing);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input:disabled,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content input[readonly],
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content textarea:disabled,
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content textarea[readonly],
body.rg-xf-shell:where(:not(.rg-px)) .am-body-content select:disabled {
  background: color-mix(in srgb, var(--xf-contentBg), var(--xf-pageBg) 55%);
  color: var(--xf-textColorMuted);
}

/* Forms (aMember's default form layout -> closer to XF blocks) */
body.rg-xf-shell:where(:not(.rg-px)) .am-form form {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

/* Auth/login forms: aMember defaults are light-only; restyle for our light/dark tokens */
body.rg-xf-shell:where(:not(.rg-px)) .am-auth-form form {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-auth-form div.am-row {
  background: transparent;
}

/* Email confirmation code page (legacy aMember CSS targets #EmailCode with a yellow background).
   In current markup #EmailCode is a FORM id, so override it to match our theme. */
body.rg-xf-shell:where(:not(.rg-px)) form#EmailCode {
  background: transparent;
  font-size: inherit;
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

/* "Confirmation link has been sent..." notice row */
body.rg-xf-shell:where(:not(.rg-px)) form#EmailCode [id^="row-email-confirm-message"] .am-element {
  margin-left: 0;
  padding: 12px 14px;
  border-radius: var(--xf-borderRadiusLarge);
  background: color-mix(in srgb, var(--xf-paletteColor1), var(--xf-contentBg) 70%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteColor2), transparent 50%);
  color: var(--xf-textColor);
  max-width: 75ch;
  margin-inline: auto;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-form fieldset legend,
body.rg-xf-shell:where(:not(.rg-px)) .am-auth-form legend {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
  padding: 0.75em 1rem;
  font-size: var(--xf-fontSizeLarge);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-form div.am-element-title label {
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-form div.am-element-title .comment {
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  opacity: 1;
}

/* Filter/search input wrapper (aMember defaults to white box) */
body.rg-xf-shell:where(:not(.rg-px)) .am-input-filter-wrapper {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-input-filter-wrapper.am-input-filter-wrapper_focus {
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 40%);
  box-shadow: var(--xf-focusRing);
  background: var(--xf-contentBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-input-filter-wrapper .am-input-filter-inner-wrapper {
  background: transparent;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-input-filter-wrapper input[type=text].am-input-filter {
  background-image: none;
  padding-left: 0;
}

/* Reduce hard borders between rows; let spacing do the work */
body.rg-xf-shell:where(:not(.rg-px)) .am-form div.am-row {
  border-top: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-form div.am-row:first-child {
  border-top: 0;
}

/* Make row highlight feel like XF */
body.rg-xf-shell:where(:not(.rg-px)) .am-form .am-row.am-row-highlight {
  background: color-mix(in srgb, var(--xf-paletteColor1), transparent 80%);
}

/* Login page extras */
body.rg-xf-shell:where(:not(.rg-px)) .am-signup-link {
  margin: 14px 0 0;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-signup-link a {
  color: var(--xf-linkColor);
  text-decoration: none;
  font-weight: 600;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-signup-link a:hover {
  text-decoration: underline;
}

/* Notices / messages */
body.rg-xf-shell:where(:not(.rg-px)) .am-info,
body.rg-xf-shell:where(:not(.rg-px)) .am-notice,
body.rg-xf-shell:where(:not(.rg-px)) .am-notification,
body.rg-xf-shell:where(:not(.rg-px)) .am-errors,
body.rg-xf-shell:where(:not(.rg-px)) .am-flash-content,
body.rg-xf-shell:where(:not(.rg-px)) .am-flash-content-error {
  border-radius: var(--xf-borderRadiusMedium);
  box-shadow: none;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-info {
  background: color-mix(in srgb, var(--xf-paletteColor1), var(--xf-contentBg) 70%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteColor2), transparent 50%);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-notice,
body.rg-xf-shell:where(:not(.rg-px)) .am-notification {
  background: color-mix(in srgb, var(--xf-paletteAccent1), var(--xf-contentBg) 75%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteAccent2), transparent 55%);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-flash-content-error,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-error,
body.rg-xf-shell:where(:not(.rg-px)) ul.am-errors {
  background: color-mix(in srgb, var(--xf-paletteAccent2), var(--xf-contentBg) 85%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteAccent2), transparent 40%);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  body.rg-xf-shell:where(:not(.rg-px)) .am-flash-content-error,
  body.rg-xf-shell:where(:not(.rg-px)) ul.am-error,
  body.rg-xf-shell:where(:not(.rg-px)) ul.am-errors {
    color: var(--xf-textColor);
  }
}

/* Member dashboard blocks/widgets */
body.rg-xf-shell:where(:not(.rg-px)) .am-widget > h2 {
  margin: 0 0 10px 0;
  font-size: var(--xf-fontSizeLarge);
  color: var(--xf-majorHeadingTextColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-block {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
}

/* Empty states (aMember defaults to light grey boxes) */
body.rg-xf-shell:where(:not(.rg-px)) .am-block-nodata {
  background: var(--xf-contentAltBg);
  border: 1px dashed var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 16px 18px;
  margin-bottom: 1em;
  text-align: center;
  font-size: var(--xf-fontSizeLarge);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-block-nodata a {
  color: var(--xf-linkColor);
  font-weight: 600;
}

/* Grids/tables (payment history/invoices/etc) */
body.rg-xf-shell:where(:not(.rg-px)) .am-grid-container {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  overflow: hidden;
  background: var(--xf-contentBg);
}

body.rg-xf-shell:where(:not(.rg-px)) table.am-grid {
  border-collapse: collapse;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid th {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid tr.am-grid-row > td {
  border-bottom: 1px solid var(--xf-borderColorLight);
  background: var(--xf-contentBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid tr.am-grid-row.even td {
  background: var(--xf-contentBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid tr.am-grid-row.odd td {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid tr.am-grid-row:hover > td {
  background: color-mix(in srgb, var(--xf-paletteColor1), transparent 70%);
}

/* Links inside grids */
body.rg-xf-shell:where(:not(.rg-px)) .am-grid a {
  color: var(--xf-linkColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-grid a:hover {
  color: var(--xf-linkHoverColor);
}

/* Receipt tables (thank-you page) */
body.rg-xf-shell:where(:not(.rg-px)) .am-receipt {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 0;
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
  background: var(--xf-contentBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt table.am-receipt-table {
  width: 100%;
  border-collapse: collapse;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt th {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt td {
  background: transparent;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt .am-receipt-price,
body.rg-xf-shell:where(:not(.rg-px)) .am-receipt .am-receipt-unit-price,
body.rg-xf-shell:where(:not(.rg-px)) .am-receipt .am-receipt-qty {
  text-align: right;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt .am-receipt-row-delimiter td,
body.rg-xf-shell:where(:not(.rg-px)) .am-receipt td.am-receipt-indent {
  background: transparent;
  border-bottom: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt td.am-receipt-total {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-receipt td.am-receipt-terms {
  background: transparent;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

/* Invoice summary (signup/checkout) */
body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 0;
  overflow: hidden;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary table.am-invoice-summary-items {
  width: 100%;
  border-collapse: collapse;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-item-last td {
  border-bottom: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary .am-invoice-summary-item-num {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-delimeter td {
  padding: 0;
  border-bottom: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-delimeter hr {
  border: 0;
  height: 1px;
  background: var(--xf-borderColorLight);
  margin: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-subtotal td,
body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-discount td,
body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-shipping td,
body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-tax td,
body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-total td {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary tr.am-invoice-summary-row-total td {
  font-weight: 700;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-invoice-summary .am-invoice-summary-terms {
  padding: 10px 12px;
  background: transparent;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  border-top: 1px solid var(--xf-borderColorLight);
}

/* Popups/modals (aMember defaults to white) */
body.rg-xf-shell:where(:not(.rg-px)) .am-popup {
  background-color: var(--xf-contentBg);
  color: var(--xf-textColor);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow2);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup .am-popup-header {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup .am-popup-close-icon:after {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup .am-popup-close-icon:hover:after {
  color: var(--xf-textColor);
}

/* Fields and buttons in popups. Popups sit outside .am-body-content, so without this they keep
   aMember's white fields while the dark scheme makes the typed text near-white. */
body.rg-xf-shell:where(:not(.rg-px)) .am-popup select,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup textarea,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=email],
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=number],
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=text],
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=password] {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
  background-color: var(--xf-contentBg);
  color: var(--xf-textColor);
  font-family: var(--xf-fontFamily);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup select:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup textarea:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=email]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=number]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=text]:focus,
body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=password]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 40%);
  box-shadow: var(--xf-focusRing);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=submit] {
  background: var(--xf-linkColor);
  border: 1px solid color-mix(in srgb, var(--xf-linkColor), transparent 20%);
  color: #fff;
  border-radius: var(--xf-borderRadiusMedium);
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=submit]:hover {
  background: var(--xf-linkHoverColor);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme]) body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=submit] {
    color: var(--xf-pageBg);
  }
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell:where(:not(.rg-px)) .am-popup input[type=submit] {
  color: var(--xf-pageBg);
}

/* Affiliate banner preview (aMember defaults to white box) */
body.rg-xf-shell:where(:not(.rg-px)) .am-aff-banner-preview {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 12px 14px;
  overflow: hidden;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-aff-banner-preview dt {
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-aff-banner-preview dd,
body.rg-xf-shell:where(:not(.rg-px)) .am-aff-banner-preview a {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-aff-banner-note {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColorLight);
  border-radius: var(--xf-borderRadiusLarge);
  color: var(--xf-textColorMuted);
}

/* Invoices (member payment history) */
body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice {
  padding: 0;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  margin: 0 0 12px;
  overflow: hidden;
  background: var(--xf-contentBg);
  box-shadow: var(--xf-shadow1);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice-header {
  padding: 10px 12px;
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice-header a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 65%);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice-header a:hover {
  text-decoration-color: currentColor;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice .am-active-invoice-terms {
  font-style: normal;
  opacity: 0.9;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice .am-active-invoice-rebill-info {
  width: 100%;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice .am-active-invoice-product-list {
  margin: 0;
  padding: 10px 14px 12px 28px;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice .am-active-invoice-product-list li {
  list-style-type: disc;
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-active-invoice .am-active-invoice-item-title {
  color: var(--xf-textColor);
}

/* Pagination */
body.rg-xf-shell:where(:not(.rg-px)) .am-pagination a,
body.rg-xf-shell:where(:not(.rg-px)) .am-pagination span {
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColor);
  background: var(--xf-contentAltBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .am-pagination a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

body.rg-xf-shell:where(:not(.rg-px)) .am-pagination .am-pagination-current {
  background: var(--xf-linkColor);
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 25%);
  color: #fff;
}

/* Two-column login/signup panels */
body.rg-xf-shell:where(:not(.rg-px)) .am-layout-two-coll {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  background: var(--xf-contentAltBg);
}

/* aMember adds top/bottom spacer bars with light backgrounds (and a tiled image on desktop). */
body.rg-xf-shell:where(:not(.rg-px)) .am-layout-two-coll .am-layout-two-coll-top,
body.rg-xf-shell:where(:not(.rg-px)) .am-layout-two-coll .am-layout-two-coll-bottom {
  background: transparent;
  background-image: none;
}

@media all and (min-width: 750px) {
  body.rg-xf-shell:where(:not(.rg-px)) .am-layout-two-coll {
    background: var(--xf-contentAltBg);
  }
}

/* =========================
   Marketing / signup highlights (custom HTML snippets)
   ========================= */

body.rg-xf-shell:where(:not(.rg-px)) .rg-marketing {
  display: grid;
  gap: 14px;
  margin: 0 0 14px 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-stack {
  display: grid;
  gap: 14px;
}

/* Card container used to replace inline-styled <div style="background/border/padding"> blocks */
body.rg-xf-shell:where(:not(.rg-px)) .rg-card {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 14px 16px;
  margin: 0 0 14px 0;
}

/* When cards are placed in a stack/grid, let the gap handle spacing */
body.rg-xf-shell:where(:not(.rg-px)) .rg-stack > .rg-card,
body.rg-xf-shell:where(:not(.rg-px)) .rg-marketing > .rg-card {
  margin: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-card:last-child {
  margin-bottom: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-card--center {
  text-align: center;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-card__title {
  margin: 0;
  max-width: 56ch;
  margin-inline: auto;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-body {
  margin: 0;
  font-size: var(--xf-fontSizeLarge);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-feature__image {
  display: block;
  width: 100%;
  max-width: 389px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColorLight);
  background: var(--xf-contentBg);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-feature__caption {
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--xf-fontSizeNormal);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColorMuted);
}

/* Keep existing markup flexible: allow <em> but don't force italics */
body.rg-xf-shell:where(:not(.rg-px)) .rg-feature__caption em {
  font-style: normal;
}

/* =========================
   Content components (stats / lists / notes)
   ========================= */

body.rg-xf-shell:where(:not(.rg-px)) .rg-divider {
  border: 0;
  height: 1px;
  background: var(--xf-borderColorLight);
  margin: 14px 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-lede {
  margin: 0;
  max-width: 70ch;
  margin-inline: auto;
  font-size: var(--xf-fontSizeLarge);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-kicker {
  margin: 0 0 6px 0;
  font-size: var(--xf-fontSizeSmall);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-stat {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColorLight);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 12px 14px;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-stat__value {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--xf-linkColor);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-stat__label {
  margin: 4px 0 0 0;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  line-height: 1.35;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-list li {
  position: relative;
  padding-left: 22px;
  color: var(--xf-textColor);
  line-height: var(--xf-lineHeight);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--xf-linkColor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-linkColor), transparent 85%);
  transform: translateY(-50%);
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-note {
  margin: 0;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  line-height: var(--xf-lineHeight);
}


/* =========================
   New signup layout: /amember/signup/join only
   ========================= */

body:is(.am-page-signup-join) {
  --rg-join-accent: var(--xf-paletteAccent2);
  --rg-join-tint: color-mix(in srgb, var(--xf-linkColor) 9%, transparent);
  --rg-join-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e53935'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The page is two panels, so the usual single white sheet and its title step aside */
body:is(.am-page-signup-join) .am-body-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* The join form carries its own headline; later steps (email confirmation) keep aMember's title */
body:is(.am-page-signup-join) .am-body-content:has(#html1) .am-body-content-top {
  display: none;
}

body:is(.am-page-signup-join) .am-body-content-content {
  padding: 0;
}

body:is(.am-page-signup-join) .am-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* ---------- Hero ---------- */

body:is(.am-page-signup-join) .rg-join-hero {
  padding: 22px 20px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(41, 182, 246, 0.35) 0%, rgba(41, 182, 246, 0) 60%),
    linear-gradient(160deg, #01579b 0%, #0b2a4a 55%, #0a1a2f 100%);
  box-shadow: var(--xf-shadow2);
}

body:is(.am-page-signup-join) .rg-join-hero__eyebrow {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #81d4fa;
}

body:is(.am-page-signup-join) .rg-join-hero__title {
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

body:is(.am-page-signup-join) .rg-join-hero__title strong {
  display: block;
  color: #ffd54f;
}

body:is(.am-page-signup-join) .rg-join-hero__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

body:is(.am-page-signup-join) .rg-join-hero__points,
body:is(.am-page-signup-join) .rg-join-reel {
  display: none;
}

body:is(.am-page-signup-join) .rg-join-hero__points {
  list-style: none;
  margin: 26px 0 0 0;
  padding: 0;
  gap: 16px;
}

body:is(.am-page-signup-join) .rg-join-hero__points li {
  padding-left: 32px;
  background: var(--rg-join-check) no-repeat 0 2px / 20px 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}

body:is(.am-page-signup-join) .rg-join-hero__points strong {
  display: block;
  font-size: 16px;
  color: #fff;
}

/* The landing page's clips, one after another. Hover enlarges, click fills the screen. */
body:is(.am-page-signup-join) .rg-join-reel {
  position: relative;
  margin: 28px 0 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  cursor: zoom-in;
  transform-origin: left center;
  transition: transform 200ms ease 120ms;
}

body:is(.am-page-signup-join) .rg-join-reel video {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}

body:is(.am-page-signup-join) .rg-join-reel video.is-active {
  opacity: 1;
}

body:is(.am-page-signup-join) .rg-join-reel.is-max {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: rgba(5, 10, 20, 0.92);
  transform: none;
  transition: none;
  cursor: zoom-out;
}

body:is(.am-page-signup-join) .rg-join-reel.is-max video {
  padding: 4vmin;
  object-fit: contain;
}

/* ---------- Header on every aMember page: the forum's blue bar, without its tabs ---------- */

body.rg-xf-shell:where(:not(.rg-px)) {
  --rg-join-header: #01599d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.rg-xf-shell:where(:not(.rg-px)) {
    --rg-join-header: #0c2331;
  }
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell:where(:not(.rg-px)) {
  --rg-join-header: #0c2331;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeader {
  background: var(--rg-join-header);
  border-bottom: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeader-inner {
  padding: 8px 16px;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeader-content {
  flex-wrap: nowrap;
}

/* The forum's animated logo and its shine on hover (RG4's extra.less), drawn over the theme's own picture */
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink {
  position: relative;
  display: block;
  width: 81px;
  height: 34px;
  line-height: 0;
}

/* Invisible and the size of the box: at its own 215 x 90 px the picture covered "Log in" and "Register" on a phone
   and took their taps (found 2026-10-08) */
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  opacity: 0;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::before,
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::before {
  background-image: url("/community/data/assets/logo_default/RGLogo_Light_NormalAnimation.gif");
  transition: opacity 0s linear;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::after {
  background-image: url("/community/data/assets/logo_default/RGLogo_Light_HoverShineAnimation.gif");
  opacity: 0;
  transition: opacity 0.15s ease;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink:hover::after {
  opacity: 1;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink:hover::before {
  opacity: 0;
  transition-delay: 0.15s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::before {
    background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_NormalAnimation.gif");
  }

  :root:not([data-rg-color-scheme="light"]) body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::after {
    background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_HoverShineAnimation.gif");
  }
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::before {
  background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_NormalAnimation.gif");
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink::after {
  background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_HoverShineAnimation.gif");
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount {
  width: auto;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup {
  flex-wrap: nowrap;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* A long member name is cut short rather than pushing "Log out" onto a second line on a phone */
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-account {
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link {
  padding: 7px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: border-color 120ms ease, background-color 120ms ease, filter 120ms ease;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

/* Red, like the forum's Join button */
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary,
body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #ff5a4d 0%, #e53935 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  color: #fff;
}

body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  filter: brightness(1.08);
}

@media (min-width: 640px) {
  body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeader-inner {
    padding: 12px 16px;
  }

  body.rg-xf-shell:where(:not(.rg-px)) .rg-xfLogoLink {
    width: 129px;
    height: 54px;
  }

  body.rg-xf-shell:where(:not(.rg-px)) .rg-xfHeaderAccount .rg-xfNavgroup-link {
    padding: 9px 20px;
  }
}

/* ---------- Form panel ---------- */

body:is(.am-page-signup-join) .am-signup > .am-form {
  padding: 8px 20px 20px;
  border-radius: 18px;
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColorLight);
  box-shadow: var(--xf-shadow1);
}

body:is(.am-page-signup-join) .am-signup > .am-login-text {
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  text-align: right;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

/* Labels sit above their fields */
body:is(.am-page-signup-join) .am-form div.am-row {
  border: 0;
  padding: 0 0 16px 0;
}

body:is(.am-page-signup-join) .am-form form div.am-row div.am-element-title,
body:is(.am-page-signup-join) .am-form form div.am-row div.am-element {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

body:is(.am-page-signup-join) .am-form div.am-element-title label {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
}

body:is(.am-page-signup-join) .am-form div.am-element-title .required {
  display: none;
}

body:is(.am-page-signup-join) .am-form div.am-element-title .comment {
  margin: -2px 0 6px 0;
  font-size: var(--xf-fontSizeSmaller);
  text-align: left;
}

body:is(.am-page-signup-join) .am-form div.am-element input[type=text],
body:is(.am-page-signup-join) .am-form div.am-element input[type=email],
body:is(.am-page-signup-join) .am-form div.am-element input[type=password] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px;
}

body:is(.am-page-signup-join) .am-form div.am-element .am-pass-indicator-wrap {
  display: block;
}

body:is(.am-page-signup-join) .rg-join-step {
  margin: 20px 0 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- What Level 2 unlocks ---------- */

body:is(.am-page-signup-join) .rg-join-levels {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--rg-join-tint);
}

body:is(.am-page-signup-join) .rg-join-levels__title {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 700;
}

body:is(.am-page-signup-join) .rg-join-levels__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body:is(.am-page-signup-join) .rg-join-levels__list li {
  padding-left: 28px;
  background: var(--rg-join-check) no-repeat 0 3px / 17px 17px;
  line-height: 1.45;
}

body:is(.am-page-signup-join) .rg-join-levels__note {
  margin: 12px 0 0 0;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

/* ---------- Plans as cards ----------
   The rank pictures live in the product descriptions, which every form shares, so they are hidden here. */

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element-title {
  display: none;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > br,
body:is(.am-page-signup-join) [id^="row-product_id"] .am-product-desc img,
body:is(.am-page-signup-join) [id^="row-product_id"] .am-product-desc br {
  display: none;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 14px;
  border: 1.5px solid var(--xf-borderColorHeavy);
  border-radius: 14px;
  background: var(--xf-contentBg);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label:hover,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:hover {
  border-color: var(--xf-linkColor);
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label:has(input:checked),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input:checked) {
  border-color: var(--xf-linkColor);
  background: var(--rg-join-tint);
  box-shadow: 0 0 0 1.5px var(--xf-linkColor);
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label:has(input:focus-visible),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input:focus-visible) {
  box-shadow: var(--xf-focusRing);
}

/* The whole card is the control; the radio stays for keyboards and screen readers */
body:is(.am-page-signup-join) [id^="row-product_id"] input[type=radio],
body:is(.am-page-signup-join) #row-paysys_id input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-product-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--xf-textColorMuted);
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-product-terms {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-product-desc {
  margin-top: 4px;
  font-size: var(--xf-fontSizeSmaller);
  font-style: normal;
  line-height: 1.4;
  color: var(--xf-textColorMuted);
}

/* Free sits on its own line, quieter than the paid plans. Matched by price, not position:
   a member who already holds Level 1 is not offered it, and the first card is then a paid plan. */
body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label:has(input[data-first_price="0.00"]) {
  grid-column: 1 / -1;
  border-style: dashed;
}

body:is(.am-page-signup-join) [id^="row-product_id"] .am-element > label[for="product-4-5"]::after {
  content: "Most popular";
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rg-join-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Payment ---------- */

body:is(.am-page-signup-join) #row-paysys_id .am-element-title label {
  margin: 12px 0 12px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Flex, not grid, so the backup processors can share one line under the cards */
body:is(.am-page-signup-join) #row-paysys_id .am-element {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label {
  flex: 1 1 100%;
  box-sizing: border-box;
  min-width: 0;
}

body:is(.am-page-signup-join) #row-paysys_id .am-paysystem-title {
  font-weight: 700;
}

body:is(.am-page-signup-join) #row-paysys_id .am-paysystem-desc {
  font-size: var(--xf-fontSizeSmaller);
  font-style: normal;
  color: var(--xf-textColorMuted);
}

/* Nothing to pay for the free plan */
body:is(.am-page-signup-join) form:has(input[name^="product_id"][data-first_price="0.00"]:checked) #row-paysys_id {
  display: none;
}

/* ---------- Terms, newsletter, total, button ---------- */

body:is(.am-page-signup-join) .am-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

body:is(.am-page-signup-join) .am-form fieldset legend {
  display: none;
}

body:is(.am-page-signup-join) [id^="row-_i_agree"],
body:is(.am-page-signup-join) [id^="row-_newsletter"] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
}

body:is(.am-page-signup-join) [id^="row-_i_agree"] .am-element-title label,
body:is(.am-page-signup-join) [id^="row-_newsletter"] .am-element-title label {
  margin: 0;
  font-weight: 400;
}

body:is(.am-page-signup-join) .am-form div.am-row input[type=submit] {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a4d 0%, #e53935 100%);
  box-shadow: 0 10px 24px rgba(229, 57, 53, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

body:is(.am-page-signup-join) .am-form div.am-row input[type=submit]:hover {
  background: linear-gradient(180deg, #ff5a4d 0%, #e53935 100%);
  border: 0;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(229, 57, 53, 0.42), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

body:is(.am-page-signup-join) .am-form div.am-row input[type=submit]:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(229, 57, 53, 0.35);
}

/* ---------- Members who are upgrading already know the site ---------- */

body:is(.am-page-signup-join).am-logged-in #html1,
body:is(.am-page-signup-join).am-logged-in .rg-join-step--account {
  display: none;
}

/* ---------- Wider screens ---------- */

@media (min-width: 640px) {
  body:is(.am-page-signup-join) .am-signup > .am-form {
    padding: 12px 32px 32px;
  }

  body:is(.am-page-signup-join) #row-paysys_id .am-element > label {
    flex-basis: 30%;
  }
}

@media (min-width: 1000px) {
  body:is(.am-page-signup-join):not(.am-logged-in) .am-signup:has(> #html1) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 24px;
    align-items: start;
  }

  body:is(.am-page-signup-join):not(.am-logged-in) #html1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 16px;
    /* above the form, so the enlarged clip is not cut by it */
    z-index: 5;
  }

  body:is(.am-page-signup-join):not(.am-logged-in) .am-signup:has(> #html1) > .am-login-text,
  body:is(.am-page-signup-join):not(.am-logged-in) .am-signup:has(> #html1) > .am-form {
    grid-column: 2;
  }

  body:is(.am-page-signup-join) .rg-join-hero {
    padding: 36px 32px;
  }

  body:is(.am-page-signup-join) .rg-join-hero__points {
    display: grid;
  }

  body:is(.am-page-signup-join) .rg-join-reel {
    display: block;
  }

  body:is(.am-page-signup-join) .rg-join-reel:hover:not(.is-max) {
    transform: scale(1.45);
  }
}

/* The captcha explains itself */
body:is(.am-page-signup-join) #row-grp-captcha .am-element-title {
  display: none;
}

/* Field icons from the Font Awesome 6 sheet aMember already loads */
body:is(.am-page-signup-join) #row-email-0 .am-element,
body:is(.am-page-signup-join) #row-login-0 .am-element,
body:is(.am-page-signup-join) #row-pass-0 .am-element {
  position: relative;
}

body:is(.am-page-signup-join) #row-email-0 .am-element::before,
body:is(.am-page-signup-join) #row-login-0 .am-element::before,
body:is(.am-page-signup-join) #row-pass-0 .am-element::before {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 1;
  width: 18px;
  line-height: 46px;
  text-align: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  color: var(--xf-textColorMuted);
  pointer-events: none;
  transition: color 120ms ease;
}

body:is(.am-page-signup-join) #row-email-0 .am-element::before { content: "\f0e0"; }
body:is(.am-page-signup-join) #row-login-0 .am-element::before { content: "\f007"; }
body:is(.am-page-signup-join) #row-pass-0 .am-element::before { content: "\f023"; }

body:is(.am-page-signup-join) #row-email-0 .am-element:focus-within::before,
body:is(.am-page-signup-join) #row-login-0 .am-element:focus-within::before,
body:is(.am-page-signup-join) #row-pass-0 .am-element:focus-within::before {
  color: var(--xf-linkColor);
}

body:is(.am-page-signup-join) .am-form div.am-element input#email-0,
body:is(.am-page-signup-join) .am-form div.am-element input#login-0,
body:is(.am-page-signup-join) .am-form div.am-element input#pass-0 {
  padding-left: 44px;
}

/* Payment method icons */
body:is(.am-page-signup-join) #row-paysys_id .am-element > label::before {
  margin-bottom: 6px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--xf-linkColor);
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="stripe"])::before { content: "\f09d"; }
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="offline"])::before { content: "\f3a5"; }

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="paypal-express"])::before {
  content: "\f1ed";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/* Authorize.Net and Square are the backup card processors: one line under the cards, each name a choice */
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:checked),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]:checked) {
  flex: 0 0 auto;
  display: block;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  font-size: var(--xf-fontSizeSmaller);
}

/* Closes the flex gap to a word space */
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]) {
  margin-left: -10px;
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:focus-visible),
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]:focus-visible) {
  box-shadow: var(--xf-focusRing);
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]) > span,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]) > span {
  display: none;
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"])::before {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: var(--xf-textColorMuted);
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before { content: "\2026  or pay through"; }
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"])::before { content: "or"; }

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::after,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"])::after {
  color: var(--xf-linkColor);
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::after { content: "Authorize.Net"; }
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"])::after { content: "Square"; }

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]):hover::after,
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]):hover::after {
  text-decoration: underline;
}

body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:checked)::after { content: "\2713  Authorize.Net"; font-weight: 700; }
body:is(.am-page-signup-join) #row-paysys_id .am-element > label:has(input[value="square-up"]:checked)::after { content: "\2713  Square"; font-weight: 700; }

/* Steps after the form, such as "check your email": one centred panel */
body:is(.am-page-signup-join) .am-signup:not(:has(> #html1)) {
  max-width: 640px;
  margin: 0 auto;
}

body:is(.am-page-signup-join) .am-body-content:not(:has(#html1)) .am-body-content-top {
  max-width: 640px;
  margin: 0 auto;
}

body:is(.am-page-signup-join) [id^="row-email-confirm-message"] .am-element {
  padding: 24px 0 8px;
  text-align: center;
  line-height: 1.6;
}

body:is(.am-page-signup-join) [id^="row-email-confirm-message"] .am-element::before {
  content: "\f0e0";
  display: block;
  margin-bottom: 14px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--rg-join-accent);
}

/* The login popup opened from this page borrows the field and button styles above:
   keep room for aMember's own field icons, and the button's white label */
body:is(.am-page-signup-join) .am-popup .am-form div.am-element input[type=text],
body:is(.am-page-signup-join) .am-popup .am-form div.am-element input[type=password] {
  padding-left: 40px;
}

body:is(.am-page-signup-join) .am-popup .am-form div.am-row input[type=submit] {
  color: #fff;
}

/* =========================
   RedGuides pixel look: every aMember page that carries body.rg-px (layout.phtml leaves it off the pages still on
   the old forum-style layer, legacy.css). Built from the signal form's look (2026-10-08): Alagard (a 16 px pixel
   face, set at 16 or 32 px) for headings and buttons, JetBrains Mono for the rest, Kenney's Fantasy UI Borders (CC0)
   on every box at the tiles' own 2 px pixels, and the pixel logo's red. Hover and selection swap a tile's tint;
   nothing fades, slides, glows or rounds. Legal text and the affiliate area keep a plain proportional face.
   Colours come from legacy.css's --xf-* tokens (light and dark); the site's own values are the --rg-* below.
   ========================= */

@font-face { font-family: "Alagard"; font-display: block; src: url(/signal/fonts/alagard.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/signal/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/signal/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url(/signal/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2"); }

body.rg-px {
  --rg-red: #cc425e;       /* the pixel logo's letters (RGLogo_Light_*), in both schemes */
  --rg-yellow: #ffea00;
  --rg-error-ink: #cc425e;
  --rg-header: #01599d;    /* the forum's blue bar */
  --rg-tint: color-mix(in srgb, var(--xf-linkColor) 9%, transparent);
  --rg-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rg-rpg: "Alagard", "Cinzel", serif;
  --rg-prose: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  /* Frame sizes in CSS px. --rg-px rescales them where a 2 px art pixel would otherwise land on a fraction
     of a device pixel (125 % and 175 % Windows scaling, 90 % and 110 % zoom); see the resolution queries. */
  --rg-px: 1;
  --rg-b12: calc(12px * var(--rg-px));
  --rg-b4: calc(4px * var(--rg-px));
  --rg-rule: calc(2px * var(--rg-px));
  --rg-tile-010-gray: url(/signal/img/kenney-border-010-gray.png);
  --rg-tile-001-gray: url(/signal/img/kenney-border-001-gray.png);
  --rg-tile-001-yellow: url(/signal/img/kenney-border-001-yellow.png);
  --rg-tile-001-red: url(/signal/img/kenney-border-001-logo-red.png);
  --rg-tile-015-red: url(/signal/img/kenney-border-015-logo-red.png);
  /* Frames on the page follow the scheme: slate on the light page, light grey on the dark one */
  --rg-frame: url(/signal/img/kenney-border-010-dim.png);
  --rg-card: url(/signal/img/kenney-border-001-dim.png);
  --rg-card-hover: url(/signal/img/kenney-border-001-blue.png);
  --rg-line: url(/signal/img/kenney-border-015-dim.png);
  --rg-line-hover: url(/signal/img/kenney-border-015-blue.png);
  /* aMember's own stylesheet colours, so its defaults follow the scheme too */
  --color-bg-main: var(--xf-pageBg);
  --color-bg-surface-100: var(--xf-borderColorLight);
  --color-bg-surface-200: var(--xf-borderColorLight);
  --color-text-primary: var(--xf-textColor);
  --color-text-secondary: var(--xf-textColorMuted);
  --color-text-muted-200: var(--xf-textColorMuted);
  --color-text-muted-250: var(--xf-textColorMuted);
  --color-text-muted-300: var(--xf-textColorMuted);
  --color-link: var(--xf-linkColor);
  --color-error-text: var(--rg-error-ink);
  --color-warning: var(--rg-error-ink);
  --color-form-input-bg: var(--xf-contentBg);
  --color-form-input-border: var(--xf-borderColor);
  --color-form-input-disabled: var(--xf-textColorMuted);
  --color-form-border: var(--xf-borderColor);
  --color-form-bg-200: var(--xf-contentAltBg);
  --color-notice-bg: var(--rg-tint);
  --color-highlight: var(--rg-tint);
  margin: 0;
  font: 400 .9rem/1.55 var(--rg-mono);
  color: var(--xf-textColor);
}

@media (0.85dppx <= resolution < 0.95dppx) { body.rg-px { --rg-px: 1.1111; } }   /* 90 %: 1 device px per source px */
@media (1.05dppx <= resolution < 1.2dppx) { body.rg-px { --rg-px: 0.9091; } }   /* 110 % */
@media (1.2dppx <= resolution < 1.3dppx) { body.rg-px { --rg-px: 0.8; } }      /* 125 % */
@media (1.3dppx <= resolution < 1.4dppx) { body.rg-px { --rg-px: 0.75; } }     /* 133 % */
@media (1.6dppx <= resolution < 1.9dppx) { body.rg-px { --rg-px: 1.1429; } }   /* 175 %: 2 device px per source px */
@media (2.1dppx <= resolution < 2.4dppx) { body.rg-px { --rg-px: 0.8889; } }   /* 225 % */

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.rg-px {
    --rg-header: #0c2331;
    --rg-error-ink: #f0a8a8;  /* the logo red is under 4.5:1 on the dark sheet */
    --rg-frame: var(--rg-tile-010-gray);
    --rg-card-hover: var(--rg-tile-001-yellow);
    --rg-line-hover: var(--rg-tile-001-yellow);
  }
}

:root[data-rg-color-scheme="dark"] body.rg-px {
  --rg-header: #0c2331;
  --rg-error-ink: #f0a8a8;
  --rg-frame: var(--rg-tile-010-gray);
  --rg-card-hover: var(--rg-tile-001-yellow);
  --rg-line-hover: var(--rg-tile-001-yellow);
}

/* Light only: legacy.css's muted grey and link blue are 4.3:1 on a chosen card's tint and the page grey; these keep
   4.5:1 on both */
@media not (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="dark"]) body.rg-px {
    --xf-textColorMuted: #646b78;
    --xf-linkColor: #0270b3;
  }
}

:root[data-rg-color-scheme="light"] body.rg-px {
  --xf-textColorMuted: #646b78;
  --xf-linkColor: #0270b3;
}

body.rg-px a {
  color: var(--xf-linkColor);
  text-decoration: none;
}

/* A link inside a sentence is underlined: in the dark scheme its blue is too close to the text around it */
body.rg-px :is(.am-login-text, .am-element-title label, .agreement) a {
  text-decoration: underline;
}

body.rg-px a:hover {
  color: var(--xf-linkHoverColor);
  text-decoration: underline;
}

body.rg-px :focus-visible {
  outline: 2px solid var(--xf-linkColor);
  outline-offset: 2px;
  box-shadow: none;
}

/* Headings in Alagard at its next whole-pixel size, lower case like the signup steps */
body.rg-px .am-body-content-top > h1,
body.rg-px .am-form fieldset > legend,
body.rg-px .am-popup .am-popup-title,
body.rg-px .rg-join-step,
body.rg-px .rg-card__title {
  margin: 6px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 32px/1.2 var(--rg-rpg);
  letter-spacing: 0;
  text-transform: lowercase;
  -webkit-font-smoothing: none;
  color: var(--xf-textColor);
}

/* Section titles inside a page (the dashboard's widgets, the payment history's two lists): Alagard at its own
   16 px, in capitals like the buttons */
body.rg-px .am-widget > h2,
body.rg-px .am-body-content-content h1 {
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 16px/1.25 var(--rg-rpg);
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  color: var(--xf-textColor);
}

/* ---------- Header: the forum's blue bar and animated logo, the account links in Kenney frames ---------- */

body.rg-px .rg-xfHeader {
  background: var(--rg-header);
  border-bottom: 0;
}

body.rg-px .rg-xfHeader-inner {
  padding: 8px 16px;
}

body.rg-px .rg-xfHeader-content {
  flex-wrap: nowrap;
}

/* The forum's animated logo and its shine on hover (RG4's extra.less), drawn over the theme's own picture */
body.rg-px .rg-xfLogoLink {
  position: relative;
  display: block;
  width: 81px;
  height: 34px;
  line-height: 0;
}

/* The picture stays for the link's alt text, invisible and the size of the box: at its own 215 x 90 px it spilled
   over the account links on a phone and took their taps */
body.rg-px .rg-xfLogoLink img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  opacity: 0;
}

body.rg-px .rg-xfLogoLink::before,
body.rg-px .rg-xfLogoLink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

body.rg-px .rg-xfLogoLink::before {
  background-image: url("/community/data/assets/logo_default/RGLogo_Light_NormalAnimation.gif");
}

body.rg-px .rg-xfLogoLink::after {
  background-image: url("/community/data/assets/logo_default/RGLogo_Light_HoverShineAnimation.gif");
  opacity: 0;
}

body.rg-px .rg-xfLogoLink:hover::after {
  opacity: 1;
}

body.rg-px .rg-xfLogoLink:hover::before {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.rg-px .rg-xfLogoLink::before {
    background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_NormalAnimation.gif");
  }

  :root:not([data-rg-color-scheme="light"]) body.rg-px .rg-xfLogoLink::after {
    background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_HoverShineAnimation.gif");
  }
}

:root[data-rg-color-scheme="dark"] body.rg-px .rg-xfLogoLink::before {
  background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_NormalAnimation.gif");
}

:root[data-rg-color-scheme="dark"] body.rg-px .rg-xfLogoLink::after {
  background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_HoverShineAnimation.gif");
}

/* Reduced motion: the animation's first frame (the torch is the only part that moves), and no shine on hover */
@media (prefers-reduced-motion: reduce) {
  body.rg-px .rg-xfLogoLink::before {
    background-image: url("/signal/img/rg-logo-light-still.png");
  }

  body.rg-px .rg-xfLogoLink:hover::before {
    opacity: 1;
  }

  body.rg-px .rg-xfLogoLink::after,
  body.rg-px .rg-xfLogoLink:hover::after {
    display: none;
  }

  :root[data-rg-color-scheme="dark"] body.rg-px .rg-xfLogoLink::before {
    background-image: url("/signal/img/rg-logo-dark-still.png");
  }
}

@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.rg-px .rg-xfLogoLink::before {
    background-image: url("/signal/img/rg-logo-dark-still.png");
  }
}

/* On a narrow phone the member's name gives way first; the logo and the other links keep their size */
body.rg-px .rg-xfHeader-logo {
  flex: none;
}

body.rg-px .rg-xfHeaderAccount {
  width: auto;
  min-width: 0;
}

body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link,
body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
  flex: none;
  padding: 2px 8px;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-tile-001-gray) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  box-shadow: none;
  image-rendering: pixelated;
  font: 400 16px/1 var(--rg-rpg);
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  color: #fff;
  filter: none;
  transition: none;
}

body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
  border-image-source: var(--rg-tile-001-yellow);
  text-decoration: none;
}

/* White in both schemes (4.7:1 on the red): legacy.css's dark-scheme rule for this button isn't scoped to its own
   pages and would make the text dark (4.0:1) */
body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary,
body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  background: var(--rg-red);
  background-clip: border-box;
  color: #fff;
}

/* The member's name keeps its own case, and a long one is cut short rather than pushing "Log out" onto a second line */
body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-account,
body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-account:hover {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
}

@media (min-width: 640px) {
  body.rg-px .rg-xfHeader-inner {
    padding: 12px 16px;
  }

  body.rg-px .rg-xfLogoLink {
    width: 129px;
    height: 54px;
  }
}

@media (max-width: 640px) {
  body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link,
  body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
    padding: 0 2px;
  }
}

/* "Log in" and "Register" side by side on a 320 px phone: less room around them, not a smaller font (Alagard stays
   at its whole-pixel 16 px) */
@media (max-width: 360px) {
  body.rg-px .rg-xfHeader-inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup {
    gap: 6px;
  }

  body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link,
  body.rg-px .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
    letter-spacing: 0;
  }
}

/* Turnstile is 300 px wide on any screen. Below 360 px it is shown at 80 % (zoom, so its layout shrinks too, unlike a
   transform) rather than pushing the page sideways; it is Cloudflare's widget, not pixel art */
@media (max-width: 360px) {
  body.rg-px .rg-xfBody-inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.rg-px :is(.am-recaptcha-element, #row-grp-captcha .am-element) {
    zoom: .8;
  }
}

/* ---------- Footer ---------- */

body.rg-px .rg-xfFooter {
  border-top: var(--rg-rule) solid var(--xf-borderColor);
  background: var(--xf-contentBg);
}

body.rg-px .rg-xfFooter-inner {
  font-size: .75rem;
  color: var(--xf-textColorMuted);
}

/* ---------- The sheet: aMember's content box in the page frame ---------- */

body.rg-px .am-body-content {
  min-height: auto;
  padding: 4px 12px 8px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  overflow: visible;
}

body.rg-px .am-body-content-top,
body.rg-px .am-body-content-content {
  padding: 0;
}

body.rg-px ul.am-breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  font-size: .75rem;
  color: var(--xf-textColorMuted);
}

body.rg-px ul.am-breadcrumbs .am-breadcrumbs-item,
body.rg-px ul.am-breadcrumbs .am-breadcrumbs-separator {
  float: none;
  margin: 0;
}

body.rg-px ul.am-breadcrumbs a {
  color: inherit;
}

/* ---------- Member menu: tabs in line frames, the current one red ---------- */

/* The header already has the account links */
body.rg-px .am-user-identity-block {
  display: none;
}

body.rg-px .am-account-toolbar {
  display: none;
  margin: 0;
}

body.rg-px .am-account-toolbar-items {
  overflow: visible;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.rg-px .am-account-toolbar-items:empty {
  display: none;
}

body.rg-px .am-tabs-wrapper {
  margin: 0 0 18px;
}

body.rg-px ul.am-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.rg-px ul.am-tabs > li,
body.rg-px ul.am-tabs li.active,
body.rg-px ul.am-tabs li.normal:hover {
  float: none;
  background: transparent;
  background-image: none;
}

body.rg-px ul.am-tabs > li > a {
  display: block;
  height: auto;
  padding: 6px 10px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  font: 500 .85rem/1.25 var(--rg-mono);
  color: var(--xf-textColor);
  text-decoration: none;
}

body.rg-px ul.am-tabs > li.normal > a:hover {
  border-image-source: var(--rg-line-hover);
  text-decoration: none;
}

body.rg-px ul.am-tabs > li.active > a,
body.rg-px ul.am-tabs > li.active > a:hover {
  border-image-source: var(--rg-tile-015-red);
  background-color: var(--rg-tint);
}

/* aMember squeezes the first tab down to a house icon */
body.rg-px ul.am-tabs #menu-member {
  width: auto;
  overflow: visible;
}

body.rg-px ul.am-tabs #menu-member::before {
  display: none;
}

body.rg-px ul.am-tabs .has-children ul {
  padding: 4px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px ul.am-tabs .has-children ul a {
  display: block;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 .85rem/1.3 var(--rg-mono);
  color: var(--xf-textColor);
}

body.rg-px ul.am-tabs .has-children ul a:hover {
  background: var(--rg-tint);
  text-decoration: none;
}

body.rg-px ul.am-tabs .menu-item-alert,
body.rg-px ul.am-tabs li.active .menu-item-alert,
body.rg-px ul.am-tabs li.normal:hover .menu-item-alert {
  min-width: auto;
  height: auto;
  padding: 0 4px;
  border-radius: 0;
  background: var(--rg-red);
  color: #fff;
  line-height: 1.4;
}

/* Phones: aMember's dashboard and menu buttons, and the menu they open */
@media all and (max-width: 500px) {
  body.rg-px .am-account-toolbar {
    display: block;
  }

  body.rg-px .am-account-toolbar-items {
    display: flow-root;
  }

  body.rg-px .am-tabs-narrow-dashboard,
  body.rg-px .am-tabs-narrow-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 8px 0 0;
    padding: 0;
    background: var(--xf-contentBg);
    background-clip: border-box;
    border: var(--rg-b4) solid transparent;
    border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
    border-radius: 0;
    image-rendering: pixelated;
    color: var(--xf-textColor);
  }

  body.rg-px .am-tabs-narrow-dashboard::before,
  body.rg-px .am-tabs-narrow-switch::before {
    color: currentColor;
  }

  /* aMember pins the toolbar to the top of the window once the page scrolls */
  body.rg-px .am-account-toolbar-fixed {
    box-sizing: border-box;
    padding: 6px 12px;
    background: var(--xf-contentBg);
    border-bottom: var(--rg-rule) solid var(--xf-borderColor);
    box-shadow: none;
  }

  body.rg-px .am-account-toolbar-fixed .am-account-toolbar-items {
    margin: 0;
  }
}

/* The phone menu opens under the toolbar, inside the sheet; aMember's rotated pointer square is left out */
body.rg-px .am-tabs-narrow-wrapper {
  left: 0;
  right: 0;
  width: auto;
}

/* aMember's script shows the pointer with an inline display, so it is hidden this way */
body.rg-px .am-tabs-narrow-wrapper-tail {
  visibility: hidden;
}

body.rg-px ul.am-tabs-narrow {
  list-style: none;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px ul.am-tabs-narrow li {
  margin: 0;
  padding: 0;
}

body.rg-px ul.am-tabs-narrow a {
  display: block;
  padding: 8px 10px;
  border-radius: 0;
  color: var(--xf-textColor);
}

body.rg-px ul.am-tabs-narrow li.active > a {
  background: var(--rg-tint);
  font-weight: 600;
}

/* ---------- Buttons: the main action red in a grey frame, the rest in line frames ---------- */

body.rg-px .am-body-content input[type=submit],
body.rg-px .am-body-content input[type=submit]:hover,
body.rg-px .am-body-content input[type=submit]:active,
body.rg-px .am-popup input[type=submit],
body.rg-px .am-popup input[type=submit]:hover,
body.rg-px .am-popup input[type=submit]:active {
  box-sizing: border-box;
  height: 46px;
  padding: 0 18px;
  background: var(--rg-red);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-tile-001-gray) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  font: 400 16px/1 var(--rg-rpg);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: none;
  -webkit-font-smoothing: none;
  color: #fff;
  cursor: pointer;
  filter: none;
  transform: none;
  transition: none;
}

body.rg-px .am-body-content input[type=submit]:hover,
body.rg-px .am-popup input[type=submit]:hover {
  border-image-source: var(--rg-tile-001-yellow);
}

body.rg-px .am-body-content a.button,
body.rg-px .am-body-content button,
body.rg-px .am-body-content input[type=button],
body.rg-px .am-popup a.button,
body.rg-px .am-popup button,
body.rg-px .am-popup input[type=button] {
  display: inline-block;
  padding: 6px 12px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  font: 500 .85rem/1.3 var(--rg-mono);
  color: var(--xf-textColor);
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: none;
}

body.rg-px .am-body-content a.button:hover,
body.rg-px .am-body-content button:hover,
body.rg-px .am-body-content input[type=button]:hover,
body.rg-px .am-popup a.button:hover,
body.rg-px .am-popup button:hover,
body.rg-px .am-popup input[type=button]:hover {
  border-image-source: var(--rg-line-hover);
  background: var(--xf-contentBg);
  box-shadow: none;
  transform: none;
  text-decoration: none;
}

body.rg-px .am-body-content :is(button, input[type=button], input[type=submit]):disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- Fields in line frames ---------- */

body.rg-px :is(.am-body-content, .am-popup) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 10px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  font: 400 .9rem/1.4 var(--rg-mono);
  color: var(--xf-textColor);
}

body.rg-px :is(.am-body-content, .am-popup) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], select) {
  width: 100%;
  max-width: 28rem;
  min-height: 44px;
}

body.rg-px :is(.am-body-content, .am-popup) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], select, textarea):focus {
  border-image-source: var(--rg-line-hover);
  box-shadow: none;
  outline: none;
}

body.rg-px .am-body-content :is(input, textarea, select):is(:disabled, [readonly]) {
  background: color-mix(in srgb, var(--xf-contentBg), var(--xf-pageBg) 55%);
  color: var(--xf-textColorMuted);
}

body.rg-px :is(.am-body-content, .am-popup) :is(input[type=checkbox], input[type=radio]) {
  accent-color: var(--rg-red);
}

/* aMember's search-as-you-type box, used for the affiliate links */
body.rg-px .am-input-filter-wrapper {
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px .am-input-filter-wrapper.am-input-filter-wrapper_focus {
  border-image-source: var(--rg-line-hover);
  box-shadow: none;
}

body.rg-px .am-input-filter-wrapper .am-input-filter-inner-wrapper,
body.rg-px .am-input-filter-wrapper input[type=text].am-input-filter {
  border: 0;
  border-image: none;
  background: transparent;
  background-image: none;
}

/* ---------- Forms: labels above their fields ---------- */

body.rg-px .am-form form {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.rg-px .am-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.rg-px .am-form div.am-row {
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  background: transparent;
}

body.rg-px .am-form form div.am-row div.am-element-title,
body.rg-px .am-form form div.am-row div.am-element {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

body.rg-px .am-form div.am-element-title label,
body.rg-px .am-form label.am-element-title {
  display: block;
  margin: 0 0 5px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--xf-textColor);
}

body.rg-px .am-form div.am-element-title .comment {
  margin: -3px 0 5px;
  font-size: .78rem;
  font-weight: 400;
  text-align: left;
  opacity: 1;
  color: var(--xf-textColorMuted);
}

body.rg-px .am-form .required {
  color: var(--rg-error-ink);
}

body.rg-px .am-form .am-row.am-row-highlight {
  background: var(--rg-tint);
}

/* The button row: the main action, then its quiet link ("Forgot password?") */
body.rg-px .am-form .am-row-buttons .am-element {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* ---------- Login and lost password ---------- */

body.rg-px .am-login-form-wrapper,
body.rg-px .am-sendpass-form-wrapper {
  max-width: 28rem;
  margin: 0 auto;
}

body.rg-px .am-auth-form,
body.rg-px .am-auth-form form {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.rg-px .am-auth-form div.am-row {
  background: transparent;
}

body.rg-px .am-signup-link,
body.rg-px .am-login-text {
  margin: 4px 0 12px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: .8rem;
  color: var(--xf-textColorMuted);
}

/* The email confirmation step: legacy aMember CSS gives #EmailCode a yellow box */
body.rg-px form#EmailCode {
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  color: var(--xf-textColor);
}

/* ---------- Messages ---------- */

body.rg-px .am-info,
body.rg-px .am-notice,
body.rg-px .am-notification,
body.rg-px form#EmailCode [id^="row-email-confirm-message"] .am-element {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--rg-tint);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  color: var(--xf-textColor);
}

body.rg-px .am-errors,
body.rg-px ul.am-error,
body.rg-px ul.am-errors,
body.rg-px .am-flash-content-error {
  margin: 0 0 14px;
  padding: 10px 12px 10px 28px;
  background: color-mix(in srgb, var(--rg-red) 8%, var(--xf-contentBg));
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-tile-015-red) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  color: var(--xf-textColor);
}

/* A field's own error, under the field */
body.rg-px .am-element span.am-error,
body.rg-px .am-element .error,
body.rg-px .am-element ul.errors {
  color: var(--rg-error-ink);
  font-size: .8rem;
}

/* aMember's toast */
body.rg-px .am-flash-content {
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  color: var(--xf-textColor);
}

/* ---------- Member dashboard ---------- */

body.rg-px .am-layout-two-coll,
body.rg-px .am-layout-two-coll .am-layout-two-coll-top,
body.rg-px .am-layout-two-coll .am-layout-two-coll-bottom {
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

body.rg-px .am-widget {
  margin: 0 0 18px;
}

body.rg-px .am-block {
  padding: 10px 12px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px .am-block-nodata {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: transparent;
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  text-align: center;
  color: var(--xf-textColorMuted);
}

/* ---------- Tables: payment history, affiliate stats, receipts, the order summary ---------- */

body.rg-px .am-grid-container,
body.rg-px .am-receipt,
body.rg-px .am-invoice-summary,
body.rg-px .am-active-invoice {
  margin: 0 0 14px;
  padding: 0;
  overflow: visible;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

/* A table wider than a phone scrolls inside its frame */
body.rg-px .am-grid-container {
  overflow-x: auto;
}

body.rg-px table.am-grid,
body.rg-px .am-receipt table.am-receipt-table,
body.rg-px .am-invoice-summary table.am-invoice-summary-items {
  width: 100%;
  border-collapse: collapse;
}

body.rg-px .am-grid th,
body.rg-px .am-receipt th {
  padding: 8px 10px;
  border-bottom: var(--rg-rule) solid var(--xf-borderColor);
  background: var(--rg-tint);
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--xf-textColorMuted);
}

body.rg-px .am-grid tr.am-grid-row > td,
body.rg-px .am-grid tr.am-grid-row.even > td,
body.rg-px .am-grid tr.am-grid-row.odd > td,
body.rg-px .am-receipt td,
body.rg-px .am-invoice-summary td {
  padding: 8px 10px;
  border: 0;
  border-bottom: var(--rg-rule) solid var(--xf-borderColorLight);
  background: transparent;
  color: var(--xf-textColor);
}

body.rg-px .am-grid tr.am-grid-row {
  background: transparent;
}

body.rg-px .am-grid tr.am-grid-row.odd > td {
  background: color-mix(in srgb, var(--xf-linkColor) 4%, transparent);
}

body.rg-px .am-grid tr.am-grid-row:hover > td {
  background: var(--rg-tint);
}

body.rg-px .am-grid tr.am-grid-row:last-child > td,
body.rg-px .am-invoice-summary tr.am-invoice-summary-item-last td,
body.rg-px .am-receipt .am-receipt-row-delimiter td,
body.rg-px .am-receipt td.am-receipt-indent {
  border-bottom: 0;
}

body.rg-px .am-receipt .am-receipt-price,
body.rg-px .am-receipt .am-receipt-unit-price,
body.rg-px .am-receipt .am-receipt-qty {
  text-align: right;
}

body.rg-px .am-receipt td.am-receipt-total,
body.rg-px .am-invoice-summary :is(.am-invoice-summary-row-subtotal, .am-invoice-summary-row-discount, .am-invoice-summary-row-shipping, .am-invoice-summary-row-tax, .am-invoice-summary-row-total) td {
  background: var(--rg-tint);
}

body.rg-px .am-invoice-summary tr.am-invoice-summary-row-total td {
  font-weight: 600;
}

body.rg-px .am-invoice-summary .am-invoice-summary-item-num {
  color: var(--xf-textColorMuted);
}

body.rg-px .am-invoice-summary tr.am-invoice-summary-delimeter td {
  padding: 0;
  border-bottom: 0;
}

body.rg-px .am-invoice-summary tr.am-invoice-summary-delimeter hr {
  height: var(--rg-rule);
  margin: 0;
  border: 0;
  background: var(--xf-borderColorLight);
}

body.rg-px .am-receipt td.am-receipt-terms,
body.rg-px .am-invoice-summary .am-invoice-summary-terms {
  padding: 8px 10px;
  border-top: 0;
  background: transparent;
  font-size: .78rem;
  color: var(--xf-textColorMuted);
}

/* An invoice in the payment history: its header line, then the items */
body.rg-px .am-active-invoice-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 10px;
  border-bottom: var(--rg-rule) solid var(--xf-borderColor);
  background: var(--rg-tint);
  color: var(--xf-textColor);
}

body.rg-px .am-active-invoice .am-active-invoice-terms {
  font-style: normal;
}

body.rg-px .am-active-invoice .am-active-invoice-rebill-info {
  width: 100%;
  font-family: inherit;
  font-size: .78rem;
  color: var(--xf-textColorMuted);
}

body.rg-px .am-active-invoice .am-active-invoice-product-list {
  margin: 0;
  padding: 8px 12px 10px 30px;
}

body.rg-px .am-active-invoice .am-active-invoice-product-list li {
  list-style-type: square;
  color: var(--xf-textColorMuted);
}

body.rg-px .am-active-invoice .am-active-invoice-item-title {
  color: var(--xf-textColor);
}

body.rg-px .am-pagination a,
body.rg-px .am-pagination span {
  padding: 2px 8px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  color: var(--xf-textColor);
}

body.rg-px .am-pagination a:hover {
  border-image-source: var(--rg-line-hover);
  text-decoration: none;
}

body.rg-px .am-pagination .am-pagination-current {
  border-image-source: var(--rg-tile-015-red);
  background: var(--rg-tint);
}

/* ---------- Popups: the page frame, an Alagard title; the terms in a plain face ---------- */

body.rg-px .am-popup {
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  color: var(--xf-textColor);
}

body.rg-px .am-popup .am-popup-header {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--xf-textColor);
}

body.rg-px .am-popup .am-popup-title {
  margin: 8px 0 6px;
}

body.rg-px .am-popup .am-popup-close-icon::after {
  color: var(--xf-textColorMuted);
}

body.rg-px .am-popup .am-popup-close-icon:hover::after {
  color: var(--xf-textColor);
}

/* ---------- Legal text and the affiliate area: a plain proportional face ---------- */

body.rg-px .agreement,
body.rg-px.rg-path-aff .am-body-content-content,
body.rg-px.am-page-signup-aff .am-body-content-content {
  font-family: var(--rg-prose);
  font-size: .95rem;
  line-height: 1.6;
}

body.rg-px.rg-path-aff .am-body-content-content :is(input, select, textarea, button),
body.rg-px.am-page-signup-aff .am-body-content-content :is(input, select, textarea, button) {
  font-family: var(--rg-prose);
}

body.rg-px .am-aff-banner-preview {
  padding: 10px 12px;
  overflow: hidden;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px .am-aff-banner-preview dd,
body.rg-px .am-aff-banner-preview a {
  color: var(--xf-textColorMuted);
}

body.rg-px .am-aff-banner-note {
  border: 0;
  border-radius: 0;
  background: var(--rg-tint);
  color: var(--xf-textColorMuted);
}

/* ---------- Content blocks written into aMember's pages (rg-card, rg-stat, rg-list) ---------- */

body.rg-px .rg-marketing,
body.rg-px .rg-stack {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
}

body.rg-px .rg-card,
body.rg-px .rg-stat {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

body.rg-px :is(.rg-stack, .rg-marketing, .rg-statGrid) > :is(.rg-card, .rg-stat) {
  margin: 0;
}

body.rg-px .rg-card--center {
  text-align: center;
}

body.rg-px .rg-statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

body.rg-px .rg-stat__value {
  margin: 0;
  font: 400 32px/1.2 var(--rg-rpg);
  -webkit-font-smoothing: none;
  color: var(--xf-linkColor);
}

body.rg-px .rg-stat__label,
body.rg-px .rg-note,
body.rg-px .rg-kicker {
  margin: 4px 0 0;
  font-size: .8rem;
  color: var(--xf-textColorMuted);
}

body.rg-px .rg-kicker {
  margin: 0 0 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.rg-px .rg-lede,
body.rg-px .rg-body {
  margin: 0 auto;
  max-width: 70ch;
  color: var(--xf-textColor);
}

body.rg-px .rg-divider {
  height: var(--rg-rule);
  margin: 14px 0;
  border: 0;
  background: var(--xf-borderColorLight);
}

body.rg-px .rg-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rg-px .rg-list li {
  position: relative;
  padding-left: 20px;
}

/* A square bullet, one 8 px block */
body.rg-px .rg-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--xf-linkColor);
}

/* =========================
   Signal layout: /amember/signup/signal only
   The signup page's own layer on top of the site's pixel look (theme/base.css, body.rg-px): the join page's navy
   hero with the stage and the spell, the two panels, plan and payment cards. The hero and the stage are dark in
   both schemes, like the join page's hero. The hero and stage rules also serve the thanks page (thanks/thanks.css,
   body.am-page-thanks): their selectors take both pages through :is(), which keeps their specificity.
   ========================= */

body:is(.am-page-signup-signal, .am-page-thanks) {
  --rg-hero-ink: rgba(255, 255, 255, 0.82);
  --rg-hero-gold: #ffd54f;
  --rg-hero-sky: #81d4fa;
  --rg-stage-ground: #070a0f;
}

/* ---------- Page: two panels, so the usual single sheet and its title step aside ---------- */

body.am-page-signup-signal .am-body-content {
  padding: 0;
  background: transparent;
  border: 0;
  border-image: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* The hero carries the headline; later steps (email confirmation) keep aMember's title. Hidden from sight only, so
   screen readers still find the page's heading 1 */
body.am-page-signup-signal .am-body-content:has(#html1) .am-body-content-top {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.am-page-signup-signal .am-body-content-top > h1 {
  font: 400 32px/1.25 var(--rg-rpg);
  letter-spacing: 0;
  -webkit-font-smoothing: none;
}

body.am-page-signup-signal .am-body-content-content {
  padding: 0;
}

body.am-page-signup-signal .am-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.am-page-signup-signal .am-signup > * {
  min-width: 0;
}

body.am-page-signup-signal .am-signup > .am-login-text {
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  text-align: right;
  font-size: .8rem;
  color: var(--xf-textColorMuted);
}

/* ---------- Hero: the join page's navy panel, with the stage and the points ---------- */

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig {
  display: grid;
  gap: 14px;
  padding: 10px 10px 14px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(41, 182, 246, 0.35) 0%, rgba(41, 182, 246, 0) 60%),
    linear-gradient(160deg, #01579b 0%, #0b2a4a 55%, #0a1a2f 100%),
    linear-gradient(var(--xf-pageBg), var(--xf-pageBg));
  /* The frame's line is the tile's outer 2 px and the rest is open, so the gradient stops at the padding edge:
     the line sits on a plain mat of the page colour between it and the navy, instead of a band of brighter blue.
     The mat is painted, so the thanks page's moving background stays outside the frame */
  background-clip: padding-box, padding-box, border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rg-stage-ground);
  cursor: crosshair;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* The picture reaches the box's edges and the frame is drawn over it (a child would cover the element's own border) */
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-tile-010-gray) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
  pointer-events: none;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage canvas,
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .plain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .plain {
  object-fit: cover;
  filter: saturate(.7) brightness(.55);
}

/* The first clip's poster under the canvas, so a slow connection shows a picture until the first frame.
   CSS, because the effect's script arrives too late to set it. It never shows through the effect. */
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage canvas {
  background: url(/images/talendorlava.jpg) center / cover;
}



body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .pips {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 3;
  display: flex;
  gap: 2px;
}

/* The stage's buttons are pixel art: none of the theme's button surface, shadow or lift */
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage button,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage button:hover,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage button:active {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
  color: inherit;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .pips button {
  width: 26px;
  height: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .pips button::before {
  content: "";
  width: 18px;
  height: 3px;
  background: #2d3b4d;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .pips button[aria-pressed="true"]::before {
  background: var(--rg-yellow);
}

/* Spell button and cast bar. Pixel art, so whole pixels only: no smoothing, easing or filters.
   The bar fills red while casting and drains yellow while the spell is up, one pixel per step (176 = its inside width).
   The eye image holds two eyes. The darker one, one art pixel lower, shows while pressed and while the spell is on. */
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem:hover,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem:active,
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .cast {
  box-sizing: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-tile-010-gray) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
}

body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem:hover {
  flex: none;
  width: calc(60px * var(--rg-px));
  height: calc(60px * var(--rg-px));
  cursor: pointer;
  /* The eye sheet is anchored to the border box, not the padding box, so it stays centred whatever the frame's
     scaled width is; the sheet scales with the frame so its art pixels stay whole too */
  background: rgba(7, 10, 15, .85) url(/signal/img/crawl-divinations-press-logo-red.png) center 0 / calc(64px * var(--rg-px)) calc(128px * var(--rg-px)) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem:active,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem[aria-pressed="true"],
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .gem[aria-pressed="true"]:hover {
  background: rgba(7, 10, 15, .85) url(/signal/img/crawl-divinations-press-logo-red.png) center calc(-62px * var(--rg-px)) / calc(64px * var(--rg-px)) calc(128px * var(--rg-px)) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .gem:focus-visible {
  outline: 2px solid #c8c8c8;
  outline-offset: 2px;
  box-shadow: none;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .cast {
  position: relative;
  flex: none;
  width: 200px;
  height: 32px;
  background: rgba(7, 10, 15, .85);
  visibility: hidden;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell.casting .cast,
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell.landed .cast {
  visibility: visible;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .cast .fill {
  position: absolute;
  inset: 0;
  background: var(--rg-red);
  clip-path: inset(0 100% 0 0);
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell.landed .fill {
  background: var(--rg-yellow);
  animation: rg-sig-drain var(--buff) steps(176) forwards;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell.casting .fill {
  animation: rg-sig-fill var(--cast) steps(176) forwards;
}

@keyframes rg-sig-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rg-sig-drain { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }

/* Enlarge, bottom right: no frame, a 16 px icon of 2 px lines on a dark square its own size, corners pointing out, or in
   while enlarged. The effect makes the stage itself the fixed overlay (inline position
   and size, class is-large) and puts a backdrop before it; nothing here may transform or filter an ancestor of the
   stage, or the overlay would pin to that ancestor instead of the window. */
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge:hover,
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge:active {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: 0;
  image-rendering: pixelated;
  background: rgba(7, 10, 15, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges' fill='%23c8c8c8'%3E%3Cpath d='M0 0h6v2H2v4H0zM10 0h6v6h-2V2h-4zM0 10h2v4h4v2H0zM14 10h2v6h-6v-2h4z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  background-clip: border-box;
}

body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge[aria-pressed="true"],
body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge[aria-pressed="true"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges' fill='%23c8c8c8'%3E%3Cpath d='M4 0h2v6H0V4h4zM10 0h2v4h4v2h-6zM0 10h6v6H4v-4H0zM10 10h6v2h-4v4h-2z'/%3E%3C/svg%3E");
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .enlarge:focus-visible {
  outline: 2px solid #c8c8c8;
  outline-offset: 2px;
  box-shadow: none;
}

body:is(.am-page-signup-signal, .am-page-thanks) .signal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 6, 9, .92);
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage.is-large {
  z-index: 10001;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 0;
  white-space: nowrap;
  font: 700 .72rem var(--rg-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rg-hero-sky);
}

/* Kenney's divider-fade-004 on each side, ornament next to the words and the rails fading outward; the right one is
   the same sprite mirrored. Fixed size: a fade can't stretch. When the column is narrow the faded ends are clipped. */
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__eyebrow::before,
body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__eyebrow::after {
  content: "";
  flex: 0 1 96px;
  height: 14px;
  background: url(/signal/img/kenney-divider-fade-004-dim.png) right center / 96px 14px no-repeat;
  image-rendering: pixelated;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__eyebrow::after {
  transform: scaleX(-1);
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__title {
  margin: 0;
  font: 400 32px/1.25 var(--rg-rpg);
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  color: #fff;
  text-wrap: balance;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__title strong {
  display: block;
  font-weight: 400;
  color: var(--rg-hero-gold);
}

body.am-page-signup-signal .rg-sig__lead {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--rg-hero-ink);
}

/* The drop cap is the forum logo's R (logo-r.svg, from logo_r.py) in the text colour, 2 px per art pixel like the
   frames: three lines of the lead, its tail ending on the third baseline. The text wraps its outline, not its box, so
   the first lines sit against the bowl. The real R stays in the text at no width, for copying and screen readers.
   The -4 px bottom margin clips the float area so a larger --rg-px does not reach the fourth line. */
body.am-page-signup-signal .rg-sig__lead::before {
  content: "";
  float: left;
  width: calc(42px * var(--rg-px));
  height: calc(56px * var(--rg-px));
  margin: 4px 0 -4px;
  background: currentColor;
  -webkit-mask: url(/signal/img/logo-r.svg) 0 0 / 100% 100% no-repeat;
  mask: url(/signal/img/logo-r.svg) 0 0 / 100% 100% no-repeat;
  shape-outside: url(/signal/img/logo-r.svg);
  shape-margin: 3px;
}

body.am-page-signup-signal .rg-sig__lead::first-letter {
  font-size: 0;
}

/* Forced colours replace the background it is painted with, and the R would vanish */
@media (forced-colors: active) {
  body.am-page-signup-signal .rg-sig__lead::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* The points, each with its own Font Awesome icon (the sheet aMember already loads). Every icon here and below is
   given twice: the second has empty alt text (`/ ""`) so screen readers skip the glyph, and a browser without CSS alt
   text drops it and keeps the first */
body.am-page-signup-signal .rg-sig__points {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

body.am-page-signup-signal .rg-sig__point {
  position: relative;
  padding-left: 34px;
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

body.am-page-signup-signal .rg-sig__point strong {
  display: block;
  font-size: .92rem;
  color: #fff;
}

body.am-page-signup-signal .rg-sig__point::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  text-align: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 17px;
  line-height: 1.2;
  color: var(--rg-hero-sky);
}

body.am-page-signup-signal .rg-sig__point--fast::before { content: "\f0e7"; content: "\f0e7" / ""; }
body.am-page-signup-signal .rg-sig__point--agent::before { content: "\f544"; content: "\f544" / ""; }
body.am-page-signup-signal .rg-sig__point--vanilla::before { content: "\f810"; content: "\f810" / ""; }
body.am-page-signup-signal .rg-sig__point--scripts::before { content: "\f70e"; content: "\f70e" / ""; }
body.am-page-signup-signal .rg-sig__point--help::before { content: "\e533"; content: "\e533" / ""; }

body.am-page-signup-signal .rg-sig__eyebrow--foot {
  margin: 10px 0 0;
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__credits {
  margin: 0;
  font-size: .66rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__credits a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- Form panel: the content sheet in a frame ---------- */

body.am-page-signup-signal .am-signup > .am-form {
  padding: 8px 16px 4px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
}

body.am-page-signup-signal .am-form div.am-row {
  margin: 0;
  padding: 0 0 14px;
  border: 0;
}

body.am-page-signup-signal .am-form form div.am-row div.am-element-title,
body.am-page-signup-signal .am-form form div.am-row div.am-element {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

body.am-page-signup-signal .am-form div.am-element-title label {
  display: block;
  margin: 0 0 5px;
  font-size: .85rem;
  font-weight: 700;
}

body.am-page-signup-signal .am-form div.am-element-title .required {
  display: none;
}

body.am-page-signup-signal .am-form div.am-element-title .comment {
  margin: -3px 0 5px;
  font-size: .78rem;
  font-weight: 400;
  text-align: left;
  color: var(--xf-textColorMuted);
}

/* Step headings from the form's HTML blocks */
body.am-page-signup-signal .rg-join-step {
  margin: 10px 0 14px;
  font: 400 32px/1.2 var(--rg-rpg);
  letter-spacing: 0;
  text-transform: lowercase;
  -webkit-font-smoothing: none;
}

body.am-page-signup-signal .am-form div.am-element input[type=text],
body.am-page-signup-signal .am-form div.am-element input[type=email],
body.am-page-signup-signal .am-form div.am-element input[type=password] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 44px;
  padding: 0 10px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow: none;
  font: 400 .9rem var(--rg-mono);
  color: var(--xf-textColor);
}

body.am-page-signup-signal .am-form div.am-element input[type=text]:focus,
body.am-page-signup-signal .am-form div.am-element input[type=email]:focus,
body.am-page-signup-signal .am-form div.am-element input[type=password]:focus {
  border-image-source: var(--rg-line-hover);
  box-shadow: none;
  outline: none;
}

body.am-page-signup-signal .am-form div.am-element .am-pass-indicator-wrap {
  display: block;
}

/* ---------- What Level 2 unlocks: the join page's box, framed, with icons ---------- */

body.am-page-signup-signal .rg-join-levels {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--rg-tint);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  image-rendering: pixelated;
}

body.am-page-signup-signal .rg-join-levels__title {
  margin: 0 0 10px;
  font-size: .85rem;
  font-weight: 700;
}

body.am-page-signup-signal .rg-join-levels__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.am-page-signup-signal .rg-join-levels__list li {
  position: relative;
  padding-left: 28px;
  font-size: .8rem;
  line-height: 1.45;
}

body.am-page-signup-signal .rg-join-levels__list li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  text-align: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: var(--xf-linkColor);
}

body.am-page-signup-signal .rg-join-levels__list li:nth-child(1)::before { content: "\f3ed"; content: "\f3ed" / ""; }
body.am-page-signup-signal .rg-join-levels__list li:nth-child(2)::before { content: "\f02d"; content: "\f02d" / ""; }
body.am-page-signup-signal .rg-join-levels__list li:nth-child(3)::before { content: "\f4be"; content: "\f4be" / ""; }

body.am-page-signup-signal .rg-join-levels__note {
  margin: 10px 0 0;
  font-size: .75rem;
  color: var(--xf-textColorMuted);
}

/* ---------- Plans as cards ----------
   The rank pictures live in the product descriptions, which every form shares, so they are hidden here. */

body.am-page-signup-signal [id^="row-product_id"] .am-element-title {
  display: none;
}

body.am-page-signup-signal [id^="row-product_id"] .am-element {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 8px;
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > br,
body.am-page-signup-signal [id^="row-product_id"] .am-product-desc img,
body.am-page-signup-signal [id^="row-product_id"] .am-product-desc br {
  display: none;
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label,
body.am-page-signup-signal #row-paysys_id .am-element > label {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 2px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-card) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .3s ease;
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label:hover,
body.am-page-signup-signal #row-paysys_id .am-element > label:hover {
  border-image-source: var(--rg-card-hover);
  background-color: color-mix(in srgb, var(--xf-linkColor) 4%, var(--xf-contentBg));
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input:checked),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:checked),
body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input:checked):hover,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:checked):hover {
  border-image-source: var(--rg-tile-001-red);
  background-color: var(--rg-tint);
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input:focus-visible),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:focus-visible) {
  outline: 2px solid var(--xf-linkColor);
  outline-offset: -8px;
}

/* The whole card is the control; the radio stays for keyboards and screen readers */
body.am-page-signup-signal [id^="row-product_id"] input[type=radio],
body.am-page-signup-signal #row-paysys_id input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

body.am-page-signup-signal [id^="row-product_id"] .am-product-title {
  font-size: 1rem;
  font-weight: 700;
}

body.am-page-signup-signal [id^="row-product_id"] .am-product-terms {
  color: var(--xf-textColorMuted);
}

body.am-page-signup-signal [id^="row-product_id"] .am-product-desc {
  font-size: .75rem;
  font-style: normal;
  color: var(--xf-textColorMuted);
}

/* Free sits on its own line, a plain frame. Matched by price, not position:
   a member who already holds Level 1 is not offered it, and the first card is then a paid plan. */
body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input[data-first_price="0.00"]) {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-width: var(--rg-b4);
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input[data-first_price="0.00"]):hover {
  border-image-source: var(--rg-line-hover);
}

body.am-page-signup-signal [id^="row-product_id"] .am-element > label:has(input[data-first_price="0.00"]:checked) {
  border-image-source: var(--rg-tile-015-red);
}

/* The chosen frame swaps at once, like a sprite. A -webkit-cross-fade() on border-image-source faded it nicely, but
   Brave on Windows 11 crashed (STATUS_ACCESS_VIOLATION) on Ctrl+C with it in the stylesheet, bisected 2026-10-08. */

body.am-page-signup-signal [id^="row-product_id"] .am-element > label[for="product-4-5"]::after {
  content: "popular";
  position: absolute;
  top: -18px;
  right: 2px;
  padding: 1px 4px;
  background: var(--rg-red);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-tile-015-red) 4 / var(--rg-b4) stretch;
  image-rendering: pixelated;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Payment: icon and name on the card, Krono's description as a tooltip (in the card on touch) ---------- */

body.am-page-signup-signal #row-paysys_id .am-element-title label {
  margin: 10px 0 14px;
  font: 400 32px/1.2 var(--rg-rpg);
  letter-spacing: 0;
  text-transform: lowercase;
  -webkit-font-smoothing: none;
}

/* Flex, not grid, so the backup processors can share one line under the cards */
body.am-page-signup-signal #row-paysys_id .am-element {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

body.am-page-signup-signal #row-paysys_id .am-element > label {
  flex: 1 1 100%;
  box-sizing: border-box;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 24px;
}

body.am-page-signup-signal #row-paysys_id .am-element > label::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: var(--xf-linkColor);
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="stripe"])::before { content: "\f09d"; content: "\f09d" / ""; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="offline"])::before { content: "\f3a5"; content: "\f3a5" / ""; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="mycryptocheckout"])::before { content: "\f379"; content: "\f379" / ""; font-family: "Font Awesome 6 Brands"; font-weight: 400; }

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="paypal-express"])::before {
  content: "\f1ed"; content: "\f1ed" / "";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

body.am-page-signup-signal #row-paysys_id .am-paysystem-title {
  font-weight: 700;
}

body.am-page-signup-signal #row-paysys_id .am-paysystem-desc {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease-in, visibility 0s linear .15s;
  position: absolute;
  left: calc(-1 * var(--rg-b12));
  right: calc(-1 * var(--rg-b12));
  top: calc(100% + var(--rg-b12) + 4px);
  z-index: 5;
  padding: 8px 10px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b4) solid transparent;
  border-image: var(--rg-line) 4 / var(--rg-b4) stretch;
  image-rendering: pixelated;
  font-size: .75rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--xf-textColor);
}

/* Only Krono's needs saying (owner, 2026-10-09). Hidden here rather than emptied in aMember, which puts a
   processor's built-in description back when the setting is empty */
body.am-page-signup-signal #row-paysys_id .am-element > label:not(:has(input[value="offline"])) .am-paysystem-desc {
  display: none;
}

/* Keyboard focus shows it too; a click must not pin it open, so :focus-visible rather than :focus-within */
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:focus-visible) .am-paysystem-desc {
  visibility: visible;
  opacity: 1;
  transition: opacity .22s ease-out .12s, visibility 0s linear .12s;
}

/* Mouse only: a tap leaves :hover on until the next tap elsewhere, so on phones the tooltip sat over the next card */
@media (hover: hover) and (pointer: fine) {
  body.am-page-signup-signal #row-paysys_id .am-element > label:hover .am-paysystem-desc {
    visibility: visible;
    opacity: 1;
    transition: opacity .22s ease-out .12s, visibility 0s linear .12s;
  }
}

/* Touch screens: the chosen card shows its description inside itself, below the name */
@media (hover: none), (pointer: coarse) {
  body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:checked) .am-paysystem-desc {
    position: static;
    margin-top: 2px;
    visibility: visible;
    opacity: 1;
    transition: none;
    padding: 0 0 4px;
    background: none;
    border: 0;
    border-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.am-page-signup-signal [id^="row-product_id"] .am-element > label,
  body.am-page-signup-signal #row-paysys_id .am-element > label,
  body.am-page-signup-signal #row-paysys_id .am-paysystem-desc {
    transition: none;
  }
}

/* Nothing to pay for the free plan */
body.am-page-signup-signal form:has(input[name^="product_id"][data-first_price="0.00"]:checked) #row-paysys_id {
  display: none;
}

/* Authorize.Net and Square are the backup card processors: one line under the cards, each name a choice */
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:checked),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]:checked) {
  flex: 0 0 auto;
  display: block;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-image: none;
  background: none;
  /* aMember leaves a non-breaking space after the hidden radio; only the pseudo-elements' text may show */
  font-size: 0;
}

/* Closes the flex gap to a word space */
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]) {
  margin-left: -10px;
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]) > span,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]) > span {
  display: none;
}

/* One line of text: the cards' inset ring would cross the words */
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:focus-visible),
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]:focus-visible) {
  outline-offset: 2px;
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::before,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::after,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::after {
  font-family: inherit;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.6;
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::before {
  color: var(--xf-textColorMuted);
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before { content: "\2026  or pay through "; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::before { content: "or "; }

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::after,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::after {
  color: var(--xf-linkColor);
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::after { content: "Authorize.Net"; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"])::after { content: "Square"; }

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]):hover::after,
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]):hover::after {
  text-decoration: underline;
}

body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="authorize-cim"]:checked)::after { content: "\2713  Authorize.Net"; font-weight: 700; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="square-up"]:checked)::after { content: "\2713  Square"; font-weight: 700; }

/* ---------- Trivia, captcha, terms, newsletter, total, button ---------- */

body.am-page-signup-signal #row-grp-captcha .am-element-title {
  display: none;
}

body.am-page-signup-signal .am-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

body.am-page-signup-signal .am-form fieldset legend {
  display: none;
}

body.am-page-signup-signal [id^="row-_i_agree"],
body.am-page-signup-signal [id^="row-_newsletter"] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
}

body.am-page-signup-signal [id^="row-_i_agree"] .am-element-title label,
body.am-page-signup-signal [id^="row-_newsletter"] .am-element-title label {
  margin: 0;
  font-size: .8rem;
  font-weight: 400;
}

body.am-page-signup-signal [id^="row-_i_agree"] input[type=checkbox],
body.am-page-signup-signal [id^="row-_newsletter"] input[type=checkbox] {
  margin: 2px 0 0;
  accent-color: var(--rg-red);
}

body.am-page-signup-signal .invoice-summary {
  font-size: .8rem;
}

body.rg-xf-shell.am-page-signup-signal .am-body-content .am-form div.am-row input[type=submit],
body.rg-xf-shell.am-page-signup-signal .am-body-content .am-form div.am-row input[type=submit]:hover,
body.rg-xf-shell.am-page-signup-signal .am-body-content .am-form div.am-row input[type=submit]:active {
  width: 100%;
  height: 46px;
  padding: 0;
  background: var(--rg-red);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-tile-001-gray) 12 / var(--rg-b12) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow: none;
  font: 400 16px/1 var(--rg-rpg);
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  color: #fff;
  cursor: pointer;
  filter: none;
  transform: none;
  transition: none;
}

body.rg-xf-shell.am-page-signup-signal .am-body-content .am-form div.am-row input[type=submit]:hover {
  border-image-source: var(--rg-tile-001-yellow);
}

/* ---------- Members who are upgrading already know the site ---------- */

body.am-page-signup-signal.am-logged-in #html1,
body.am-page-signup-signal.am-logged-in .rg-join-step--account {
  display: none;
}

/* ---------- Steps after the form, such as "check your email": one centred panel ---------- */

body.am-page-signup-signal .am-signup:not(:has(> #html1)),
body.am-page-signup-signal .am-body-content:not(:has(#html1)) .am-body-content-top {
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Widths ---------- */

@media (min-width: 641px) {
  body.am-page-signup-signal .am-signup > .am-form {
    padding: 12px 28px 10px;
  }

  body.am-page-signup-signal #row-paysys_id .am-element > label {
    flex-basis: 30%;
  }
}

@media (min-width: 1000px) {
  body.am-page-signup-signal:not(.am-logged-in) .am-signup:has(> #html1) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 24px;
  }

  body.am-page-signup-signal:not(.am-logged-in) #html1 {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.am-page-signup-signal:not(.am-logged-in) .am-signup:has(> #html1) > .am-login-text,
  body.am-page-signup-signal:not(.am-logged-in) .am-signup:has(> #html1) > .am-form {
    grid-column: 2;
  }

  body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig {
    padding: 14px 14px 18px;
  }
}

@media (max-width: 640px) {
  body:is(.am-page-signup-signal, .am-page-thanks) .rg-sig__stage .spell {
    left: 18px;
    bottom: 18px;
  }

  body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge,
  body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge:hover,
  body.rg-xf-shell:is(.am-page-signup-signal, .am-page-thanks) .am-body-content .rg-sig__stage .enlarge:active {
    right: 18px;
    bottom: 18px;
  }

  body.am-page-signup-signal [id^="row-product_id"] .am-element {
    grid-template-columns: minmax(0, 1fr);
  }

  body.am-page-signup-signal [id^="row-product_id"] .am-element > label[for="product-4-5"]::after {
    top: -8px;
  }
}

/* =========================
   Thanks page: /amember/thanks after a processed order (the theme's thanks.phtml, .rg-thanks)
   The signup page's navy hero with the stage (signal.css styles both pages' hero and stage), then a sheet with the
   next steps and the receipt. Other states of the page (waiting for the payment, manual review) keep the base sheet.
   ========================= */

/* ---------- Page: two panels, so the usual sheet and its title step aside ---------- */

body.am-page-thanks .am-body-content:has(.rg-thanks) {
  padding: 0;
  background: transparent;
  border: 0;
  border-image: none;
  box-shadow: none;
}

/* ---------- Page background: desktop only ----------
   signal.js draws one of two stock Shaders simulations here (MagneticFilings, Boids), picked at random on each load, in
   two colours: the logo red with the header blue, or with the yellow in dark. The body leaves the page colour to html,
   whose paint sits under this layer; the body's own would cover it. The hero and the sheet stay solid on top. */

body.am-page-thanks:has(.rg-thanks) {
  background: transparent;
}

body.am-page-thanks .rg-sig-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --signal-a: var(--rg-red);
  --signal-b: var(--rg-header);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.am-page-thanks .rg-sig-background {
    --signal-b: var(--rg-yellow);
  }
}

:root[data-rg-color-scheme="dark"] body.am-page-thanks .rg-sig-background {
  --signal-b: var(--rg-yellow);
}

/* The hero carries the headline. Hidden from sight only, so screen readers still find the page's heading 1 */
body.am-page-thanks .am-body-content:has(.rg-thanks) .am-body-content-top {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.am-page-thanks .rg-thanks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.am-page-thanks .rg-thanks > * {
  min-width: 0;
}

/* ---------- Hero: the headline under the stage, centred ---------- */

body.am-page-thanks .rg-thanks__hero .rg-sig__title,
body.am-page-thanks .rg-thanks__until {
  text-align: center;
}

body.am-page-thanks .rg-thanks__until {
  margin: -4px 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--rg-hero-ink);
}

body.am-page-thanks .rg-thanks__hero .rg-sig__credits {
  margin-top: 4px;
}

/* ---------- Sheet: next steps, then the receipt ---------- */

body.am-page-thanks .rg-thanks__sheet {
  padding: 8px 16px 6px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-frame) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
}

body.am-page-thanks .rg-thanks__sheet .rg-join-step {
  margin: 10px 0 14px;
}

body.am-page-thanks .rg-thanks__next {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
}

/* Each step is a card like the signup page's plans: Kenney's card frame, the hover tile and tint */
body.am-page-thanks .rg-thanks__card {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 6px 8px 6px 46px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--rg-b12) solid transparent;
  border-image: var(--rg-card) 12 / var(--rg-b12) stretch;
  image-rendering: pixelated;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--xf-textColorMuted);
  text-decoration: none;
  transition: background-color .3s ease;
}

body.am-page-thanks .rg-thanks__card:hover {
  border-image-source: var(--rg-card-hover);
  background-color: color-mix(in srgb, var(--xf-linkColor) 4%, var(--xf-contentBg));
  text-decoration: none;
}

body.am-page-thanks .rg-thanks__card:focus-visible {
  outline: 2px solid var(--xf-linkColor);
  outline-offset: -8px;
}

body.am-page-thanks .rg-thanks__card strong {
  font: 400 16px/1.25 var(--rg-rpg);
  letter-spacing: 1px;
  -webkit-font-smoothing: none;
  color: var(--xf-textColor);
}

/* Font Awesome icons, each given twice: the second has empty alt text so screen readers skip the glyph */
body.am-page-thanks .rg-thanks__card::before {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 26px;
  margin-top: -12px;
  text-align: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  line-height: 24px;
  color: var(--rg-red);
}

body.am-page-thanks .rg-thanks__card--nfo::before { content: "\f70e"; content: "\f70e" / ""; }
body.am-page-thanks .rg-thanks__card--ask::before { content: "\f059"; content: "\f059" / ""; }

body.am-page-thanks .rg-thanks__section {
  margin: 0 0 10px;
  font: 400 16px/1.25 var(--rg-rpg);
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  color: var(--xf-textColor);
}

body.am-page-thanks .rg-thanks .am-thanks-status-success {
  padding: 0 0 4px;
  font-weight: 600;
  color: var(--xf-textColor);
}

body.am-page-thanks .rg-thanks .am-thanks-payment-details {
  padding: 0 0 12px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--xf-textColorMuted);
  overflow-wrap: anywhere;
}

body.am-page-thanks .rg-thanks .am-thanks-payment-details strong {
  font-weight: 600;
  color: var(--xf-textColor);
}

@media (prefers-reduced-motion: reduce) {
  body.am-page-thanks .rg-thanks__card {
    transition: none;
  }
}

/* ---------- Phones: the receipt fits from 340 px wide; narrower, it scrolls in its frame ---------- */

@media (max-width: 640px) {
  body.am-page-thanks .rg-thanks__sheet {
    padding: 4px 6px 4px;
  }

  body.am-page-thanks .rg-thanks .am-receipt-content {
    overflow-x: auto;
  }

  body.am-page-thanks .rg-thanks .am-receipt :is(th, td) {
    padding: 8px 4px;
  }

  body.am-page-thanks .rg-thanks .am-receipt th {
    letter-spacing: 0;
  }

  /* Every RedGuides order has quantity 1. Dropping the indent cell too keeps the totals under the price column. */
  body.am-page-thanks .rg-thanks .am-receipt :is(.am-receipt-qty, td.am-receipt-indent) {
    display: none;
  }
}

/* ---------- Wide windows: the hero beside the sheet, as on the signup page ---------- */

@media (min-width: 1000px) {
  body.am-page-thanks .rg-thanks {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 24px;
  }
}