/*
  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 {
  margin: 0;
  font-family: var(--xf-fontFamily);
  font-size: var(--xf-fontSizeNormal);
  line-height: var(--xf-lineHeight);
}

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

body.rg-xf-shell 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 :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 .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 .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 .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 .am-body-content-top {
  padding: 14px 18px 0;
}

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

/* Breadcrumbs */
body.rg-xf-shell 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 ul.am-breadcrumbs .am-breadcrumbs-item,
body.rg-xf-shell ul.am-breadcrumbs .am-breadcrumbs-separator {
  float: none;
  margin: 0;
}

body.rg-xf-shell ul.am-breadcrumbs .am-breadcrumbs-separator {
  opacity: 0.6;
}

body.rg-xf-shell ul.am-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

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

/* Page title */
body.rg-xf-shell .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 .am-account-toolbar {
  margin: 0;
  display: none;
}

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

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

  /* Make the mobile controls readable in dark mode + match our tokenized UI */
  body.rg-xf-shell .am-tabs-narrow-dashboard,
  body.rg-xf-shell .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 .am-tabs-narrow-dashboard::before,
  body.rg-xf-shell .am-tabs-narrow-switch::before {
    color: currentColor;
  }

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

body.rg-xf-shell .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 .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 .am-user-identity-block {
  display: none;
}

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

body.rg-xf-shell 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 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 ul.am-tabs li.active,
body.rg-xf-shell ul.am-tabs li.normal:hover {
  background: transparent;
  background-image: none;
}

/* Dropdown menus under tabs */
body.rg-xf-shell 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 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 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 ul.am-tabs .has-children:hover > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.rg-xf-shell 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 ul.am-tabs li.active > a,
body.rg-xf-shell 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 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 ul.am-tabs li.active .menu-item-alert,
body.rg-xf-shell 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 ul.am-tabs .menu-item-alert {
    background: rgba(255, 255, 255, 0.10);
    color: var(--xf-textColor);
  }

  body.rg-xf-shell ul.am-tabs li.active .menu-item-alert,
  body.rg-xf-shell 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 ul.am-tabs #menu-member {
  width: auto;
  overflow: visible;
}

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

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

body.rg-xf-shell 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 ul.am-tabs-narrow li {
  margin: 0;
  padding: 0;
}

body.rg-xf-shell 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 ul.am-tabs-narrow li.active > a {
  background: var(--xf-contentAltBg);
  font-weight: 600;
}

body.rg-xf-shell 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 .am-body-content a.button,
body.rg-xf-shell .am-body-content button,
body.rg-xf-shell .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 .am-body-content a.button:hover,
body.rg-xf-shell .am-body-content button:hover,
body.rg-xf-shell .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 .am-body-content a.button:active,
body.rg-xf-shell .am-body-content button:active,
body.rg-xf-shell .am-body-content input[type=button]:active {
  transform: translateY(0);
}

/* Primary actions: submit buttons */
body.rg-xf-shell .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 .am-body-content input[type=submit]:hover,
body.rg-xf-shell .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 .am-body-content button:disabled,
body.rg-xf-shell .am-body-content input[type=button]:disabled,
body.rg-xf-shell .am-body-content input[type=submit]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

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

body.rg-xf-shell .am-body-content select,
body.rg-xf-shell .am-body-content textarea,
body.rg-xf-shell .am-body-content input[type=email],
body.rg-xf-shell .am-body-content input[type=number],
body.rg-xf-shell .am-body-content input[type=text],
body.rg-xf-shell .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 .am-body-content select:focus,
body.rg-xf-shell .am-body-content textarea:focus,
body.rg-xf-shell .am-body-content input[type=email]:focus,
body.rg-xf-shell .am-body-content input[type=number]:focus,
body.rg-xf-shell .am-body-content input[type=text]:focus,
body.rg-xf-shell .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 .am-body-content input:disabled,
body.rg-xf-shell .am-body-content input[readonly],
body.rg-xf-shell .am-body-content textarea:disabled,
body.rg-xf-shell .am-body-content textarea[readonly],
body.rg-xf-shell .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 .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 .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 .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 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 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 .am-form fieldset legend,
body.rg-xf-shell .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 .am-form div.am-element-title label {
  color: var(--xf-textColor);
}

body.rg-xf-shell .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 .am-input-filter-wrapper {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
}

body.rg-xf-shell .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 .am-input-filter-wrapper .am-input-filter-inner-wrapper {
  background: transparent;
}

body.rg-xf-shell .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 .am-form div.am-row {
  border-top: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-form div.am-row:first-child {
  border-top: 0;
}

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

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

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

body.rg-xf-shell .am-signup-link a:hover {
  text-decoration: underline;
}

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

body.rg-xf-shell .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 .am-notice,
body.rg-xf-shell .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 .am-flash-content-error,
body.rg-xf-shell ul.am-error,
body.rg-xf-shell 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 .am-flash-content-error,
  body.rg-xf-shell ul.am-error,
  body.rg-xf-shell ul.am-errors {
    color: var(--xf-textColor);
  }
}

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

body.rg-xf-shell .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 .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 .am-block-nodata a {
  color: var(--xf-linkColor);
  font-weight: 600;
}

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

body.rg-xf-shell table.am-grid {
  border-collapse: collapse;
}

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

body.rg-xf-shell .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 .am-grid tr.am-grid-row.even td {
  background: var(--xf-contentBg);
}

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

body.rg-xf-shell .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 .am-grid a {
  color: var(--xf-linkColor);
}

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

/* Receipt tables (thank-you page) */
body.rg-xf-shell .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 .am-receipt table.am-receipt-table {
  width: 100%;
  border-collapse: collapse;
}

body.rg-xf-shell .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 .am-receipt td {
  background: transparent;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

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

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

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

body.rg-xf-shell .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 .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 .am-invoice-summary table.am-invoice-summary-items {
  width: 100%;
  border-collapse: collapse;
}

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

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

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

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

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

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

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

body.rg-xf-shell .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 .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 .am-popup .am-popup-header {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
}

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

body.rg-xf-shell .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 .am-popup select,
body.rg-xf-shell .am-popup textarea,
body.rg-xf-shell .am-popup input[type=email],
body.rg-xf-shell .am-popup input[type=number],
body.rg-xf-shell .am-popup input[type=text],
body.rg-xf-shell .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 .am-popup select:focus,
body.rg-xf-shell .am-popup textarea:focus,
body.rg-xf-shell .am-popup input[type=email]:focus,
body.rg-xf-shell .am-popup input[type=number]:focus,
body.rg-xf-shell .am-popup input[type=text]:focus,
body.rg-xf-shell .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 .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 .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 .am-popup input[type=submit] {
    color: var(--xf-pageBg);
  }
}

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

/* Affiliate banner preview (aMember defaults to white box) */
body.rg-xf-shell .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 .am-aff-banner-preview dt {
  color: var(--xf-textColor);
}

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

body.rg-xf-shell .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 .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 .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 .am-active-invoice-header a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 65%);
}

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

body.rg-xf-shell .am-active-invoice .am-active-invoice-terms {
  font-style: normal;
  opacity: 0.9;
}

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

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

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

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

/* Pagination */
body.rg-xf-shell .am-pagination a,
body.rg-xf-shell .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 .am-pagination a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

body.rg-xf-shell .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 .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 .am-layout-two-coll .am-layout-two-coll-top,
body.rg-xf-shell .am-layout-two-coll .am-layout-two-coll-bottom {
  background: transparent;
  background-image: none;
}

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

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

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

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

/* Card container used to replace inline-styled <div style="background/border/padding"> blocks */
body.rg-xf-shell .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 .rg-stack > .rg-card,
body.rg-xf-shell .rg-marketing > .rg-card {
  margin: 0;
}

body.rg-xf-shell .rg-card:last-child {
  margin-bottom: 0;
}

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

body.rg-xf-shell .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 .rg-body {
  margin: 0;
  font-size: var(--xf-fontSizeLarge);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

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

body.rg-xf-shell .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 .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 .rg-feature__caption em {
  font-style: normal;
}

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

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

body.rg-xf-shell .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 .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 .rg-statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

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

body.rg-xf-shell .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 .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 .rg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

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

body.rg-xf-shell .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 .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 {
  --rg-join-header: #01599d;
}

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

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

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

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

body.rg-xf-shell .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 .rg-xfLogoLink {
  position: relative;
  display: block;
  width: 81px;
  height: 34px;
  line-height: 0;
}

body.rg-xf-shell .rg-xfLogoLink img {
  opacity: 0;
}

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

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

body.rg-xf-shell .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 .rg-xfLogoLink:hover::after {
  opacity: 1;
}

body.rg-xf-shell .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 .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 .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 .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 .rg-xfLogoLink::after {
  background-image: url("/community/data/assets/logo_alternate/RGLogo_Dark_HoverShineAnimation.gif");
}

body.rg-xf-shell .rg-xfHeaderAccount {
  width: auto;
}

body.rg-xf-shell .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 .rg-xfHeaderAccount .rg-xfNavgroup-account {
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.rg-xf-shell .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 .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 .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary,
body.rg-xf-shell .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 .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  filter: brightness(1.08);
}

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

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

  body.rg-xf-shell .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;
}

/* =========================
   Signal layout: /amember/signup/signal only
   The join page's new look (direction E) on a dev copy of the join form. The join page's colours, light and dark
   (the forum's blue bar, its navy hero, the content sheet), with the Signal pieces on top: JetBrains Mono for
   everything that reads as data, Alagard (a 16 px pixel face, set at 16 or 32 px) for titles and buttons, and
   Kenney's Fantasy UI Borders on every box at the tiles' own 2 px pixels, edges tiled rather than stretched so a
   box can change width without rescaling the art. Hover and selection swap a tile's tint; nothing fades, slides
   or glows. The hero and the stage are dark in both schemes, like the join page's hero.
   ========================= */

@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.am-page-signup-signal {
  --sig-red: #ff1744;      /* the RedGuides logo's letters */
  --sig-yellow: #ffea00;   /* and its outline */
  --sig-hero-ink: rgba(255, 255, 255, 0.82);
  --sig-hero-gold: #ffd54f;
  --sig-hero-sky: #81d4fa;
  --sig-stage-ground: #070a0f;
  --sig-tint: color-mix(in srgb, var(--xf-linkColor) 9%, transparent);
  --sig-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sig-rpg: "Alagard", "Cinzel", serif;
  /* Frame sizes in CSS px. --sig-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. */
  --sig-px: 1;
  --sig-b12: calc(12px * var(--sig-px));
  --sig-b4: calc(4px * var(--sig-px));
  --sig-tile-010-gray: url(/signal/img/kenney-border-010-gray.png);
  --sig-tile-001-gray: url(/signal/img/kenney-border-001-gray.png);
  --sig-tile-001-yellow: url(/signal/img/kenney-border-001-yellow.png);
  --sig-tile-001-red: url(/signal/img/kenney-border-001-red.png);
  --sig-tile-015-red: url(/signal/img/kenney-border-015-red.png);
  /* Frames on the hero and the sheet follow the scheme: slate on the light page, light grey on the dark one */
  --sig-frame: url(/signal/img/kenney-border-010-dim.png);
  --sig-card: url(/signal/img/kenney-border-001-dim.png);
  --sig-card-hover: url(/signal/img/kenney-border-001-blue.png);
  --sig-line: url(/signal/img/kenney-border-015-dim.png);
  --sig-line-hover: url(/signal/img/kenney-border-015-blue.png);
  font-family: var(--sig-mono);
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme="light"]) body.am-page-signup-signal {
    --sig-frame: var(--sig-tile-010-gray);
    --sig-card-hover: var(--sig-tile-001-yellow);
    --sig-line-hover: var(--sig-tile-001-yellow);
  }
}

:root[data-rg-color-scheme="dark"] body.am-page-signup-signal {
  --sig-frame: var(--sig-tile-010-gray);
  --sig-card-hover: var(--sig-tile-001-yellow);
  --sig-line-hover: var(--sig-tile-001-yellow);
}

/* ---------- Header: the join page's blue bar and animated logo, the pills in Kenney frames ---------- */

body.am-page-signup-signal .rg-xfHeaderAccount .rg-xfNavgroup {
  gap: 10px;
}

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

body.rg-xf-shell.am-page-signup-signal .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
  border-image-source: var(--sig-tile-001-yellow);
  text-decoration: none;
}

body.rg-xf-shell.am-page-signup-signal .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary,
body.rg-xf-shell.am-page-signup-signal .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  background: var(--sig-red);
  background-clip: border-box;
}

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

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

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

body.am-page-signup-signal .am-body-content-top > h1 {
  font: 400 32px/1.25 var(--sig-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.am-page-signup-signal .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%);
  /* 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 the page colour with a plain mat between it and the navy, instead of a band of brighter blue */
  background-clip: padding-box;
  border: var(--sig-b12) solid transparent;
  border-image: var(--sig-frame) 12 / var(--sig-b12) stretch;
  image-rendering: pixelated;
}

body.am-page-signup-signal .rg-sig__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sig-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.am-page-signup-signal .rg-sig__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--sig-b12) solid transparent;
  border-image: var(--sig-tile-010-gray) 12 / var(--sig-b12) stretch;
  image-rendering: pixelated;
  pointer-events: none;
}

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

body.am-page-signup-signal .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.am-page-signup-signal .rg-sig__stage canvas {
  background: url(/images/talendorlava.jpg) center / cover;
}



body.am-page-signup-signal .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.am-page-signup-signal .am-body-content .rg-sig__stage button,
body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage button:hover,
body.rg-xf-shell.am-page-signup-signal .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.am-page-signup-signal .rg-sig__stage .pips button {
  width: 26px;
  height: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

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

body.am-page-signup-signal .rg-sig__stage .pips button[aria-pressed="true"]::before {
  background: var(--sig-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.am-page-signup-signal .rg-sig__stage .spell {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage .gem,
body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage .gem:hover {
  flex: none;
  width: calc(60px * var(--sig-px));
  height: calc(60px * var(--sig-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.png) center 0 / calc(64px * var(--sig-px)) calc(128px * var(--sig-px)) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

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

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

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

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

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

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

body.am-page-signup-signal .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.am-page-signup-signal .am-body-content .rg-sig__stage .enlarge,
body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage .enlarge:hover,
body.rg-xf-shell.am-page-signup-signal .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.am-page-signup-signal .am-body-content .rg-sig__stage .enlarge[aria-pressed="true"],
body.rg-xf-shell.am-page-signup-signal .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.am-page-signup-signal .rg-sig__stage .enlarge:focus-visible {
  outline: 2px solid #c8c8c8;
  outline-offset: 2px;
  box-shadow: none;
}

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

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

body.am-page-signup-signal .rg-sig__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 0;
  white-space: nowrap;
  font: 700 .72rem var(--sig-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sig-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.am-page-signup-signal .rg-sig__eyebrow::before,
body.am-page-signup-signal .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.am-page-signup-signal .rg-sig__eyebrow::after {
  transform: scaleX(-1);
}

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

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

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

body.am-page-signup-signal .rg-sig__lead::first-letter {
  float: left;
  margin: 3px 6px 0 0;
  font: 400 32px/.85 var(--sig-rpg);
  -webkit-font-smoothing: none;
  color: var(--sig-hero-gold);
}

/* The points, each with its own Font Awesome icon (the sheet aMember already loads) */
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(--sig-hero-sky);
}

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

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

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

body.am-page-signup-signal .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(--sig-b12) solid transparent;
  border-image: var(--sig-frame) 12 / var(--sig-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(--sig-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(--sig-b4) solid transparent;
  border-image: var(--sig-line) 4 / var(--sig-b4) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow: none;
  font: 400 .9rem var(--sig-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(--sig-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(--sig-tint);
  background-clip: border-box;
  border: var(--sig-b4) solid transparent;
  border-image: var(--sig-line) 4 / var(--sig-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"; }
body.am-page-signup-signal .rg-join-levels__list li:nth-child(2)::before { content: "\f02d"; }
body.am-page-signup-signal .rg-join-levels__list li:nth-child(3)::before { 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(--sig-b12) solid transparent;
  border-image: var(--sig-card) 12 / var(--sig-b12) stretch;
  image-rendering: pixelated;
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
  --sig-sel: 0%;
  transition: background-color .3s ease, --sig-sel .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(--sig-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 {
  --sig-sel: 100%;
  border-image-source: var(--sig-tile-001-red);
  background-color: var(--sig-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(--sig-b4);
  border-image: var(--sig-line) 4 / var(--sig-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(--sig-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(--sig-tile-015-red);
}

/* A border-image cannot animate, but Chromium and Safari can cross-fade the frame image itself as a registered
   property moves 0 → 100 %. That is painted in place each frame, so the pixels never drift; browsers without
   cross-fade keep the instant swap above. */
@property --sig-sel {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@supports (border-image-source: -webkit-cross-fade(url(a.png), url(b.png), 50%)) {
  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 [id^="row-product_id"] .am-element > label:has(input:checked),
  body.am-page-signup-signal #row-paysys_id .am-element > label:has(input:checked) {
    border-image-source: -webkit-cross-fade(var(--sig-card), var(--sig-tile-001-red), var(--sig-sel));
  }

  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,
  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: -webkit-cross-fade(var(--sig-card-hover), var(--sig-tile-001-red), var(--sig-sel));
  }

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

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

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(--sig-red);
  background-clip: border-box;
  border: var(--sig-b4) solid transparent;
  border-image: var(--sig-tile-015-red) 4 / var(--sig-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, the description as a tooltip ---------- */

body.am-page-signup-signal #row-paysys_id .am-element-title label {
  margin: 10px 0 14px;
  font: 400 32px/1.2 var(--sig-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"; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="offline"])::before { content: "\f3a5"; }
body.am-page-signup-signal #row-paysys_id .am-element > label:has(input[value="mycryptocheckout"])::before { 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";
  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(--sig-b12));
  right: calc(-1 * var(--sig-b12));
  top: calc(100% + var(--sig-b12) + 4px);
  z-index: 5;
  padding: 8px 10px;
  background: var(--xf-contentBg);
  background-clip: border-box;
  border: var(--sig-b4) solid transparent;
  border-image: var(--sig-line) 4 / var(--sig-b4) stretch;
  image-rendering: pixelated;
  font-size: .75rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--xf-textColor);
}

/* 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:hover .am-paysystem-desc,
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;
}

@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;
}

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(--sig-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(--sig-red);
  background-clip: border-box;
  border: var(--sig-b12) solid transparent;
  border-image: var(--sig-tile-001-gray) 12 / var(--sig-b12) stretch;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow: none;
  font: 400 16px/1 var(--sig-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(--sig-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.am-page-signup-signal .rg-sig {
    padding: 14px 14px 18px;
  }
}

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

  body.am-page-signup-signal .rg-sig__stage .spell {
    left: 18px;
    bottom: 18px;
  }

  body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage .enlarge,
  body.rg-xf-shell.am-page-signup-signal .am-body-content .rg-sig__stage .enlarge:hover,
  body.rg-xf-shell.am-page-signup-signal .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;
  }
}