/*
  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)
   ========================= */

/* Dark only: EC Tunnel's aMember pages do not follow the visitor's light/dark setting. */
:root {
  color-scheme: dark;

  /* RG4 alternate palette (from XenForo style export) */
  --xf-paletteAccent1: #f0a8a8;
  --xf-paletteAccent2: #c32222;
  --xf-paletteAccent3: #4e0e0e;

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

  /* Base surfaces */
  --xf-pageBg: #0b1220;
  --xf-contentBg: #0f172a;
  --xf-contentAltBg: #111c34;

  /* Text */
  --xf-textColor: #e5e7eb;
  --xf-textColorMuted: #9ca3af;

  /* Links / primary: the lighter "primary" colors, for contrast on dark */
  --xf-linkColor: var(--xf-paletteColor1);
  --xf-linkHoverColor: var(--xf-paletteColor2);

  /* Borders / radii / shadows */
  --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-borderRadiusSmall: 4px;
  --xf-borderRadiusMedium: 8px;
  --xf-borderRadiusLarge: 12px;
  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.35);

  /* 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: rgba(255, 255, 255, 0.05);
  --xf-majorHeadingTextColor: var(--xf-textColor);
  --xf-blockFooterBg: var(--xf-contentAltBg);
  --xf-blockFooterTextColor: var(--xf-textColorMuted);

  /* Focus ring */
  --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;
}

/* The theme's optional "dark mode" logo, when set, is the one shown */
.rg-xfHeader-logo .rg-xfLogo--light:has(~ .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: rgba(255, 255, 255, 0.06);
  border-color: var(--xf-borderColor);
  text-decoration: none;
}

.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: var(--xf-pageBg);
}

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

.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: rgba(255, 255, 255, 0.10);
  color: var(--xf-textColor);
  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: 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: var(--xf-pageBg);
  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: 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: var(--xf-pageBg);
  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);
}

/* 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);
}

/* =========================
   EC Tunnel signup, restyled. The palette, page background, header and footer
   are every aMember page's; the rest is written for the trial copy's page class,
   and build_theme.py widens it to the forms listed there.
   Palette, type and bracket frames are the pricing page's (/community/subscriptions/).
   ========================= */

@font-face {
  font-family: "ECT Montserrat";
  src: url("/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"),
       url("/fonts/Montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ECT Montserrat";
  src: url("/fonts/Montserrat/Montserrat-Bold.woff2") format("woff2"),
       url("/fonts/Montserrat/Montserrat-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Every aMember page is the forum's dark purple */
html {
  color-scheme: dark;
  background: #150f1a;
}

body.rg-xf-shell {
  color-scheme: dark;

  --ect-page: #150f1a;
  --ect-bg-deep: #2d1e2f;
  --ect-bg-mid: #392945;
  --ect-bg-indigo: #3e3b66;
  --ect-cream: #fcecd1;
  --ect-sand: #dbc9b4;
  --ect-gold: #f7cf91;
  --ect-mint: #a0ddd3;
  --ect-green: #aad795;
  --ect-forum-green: #64b082;
  --ect-muted: #c3a79c;
  --ect-no: #d8725e;
  --ect-error: #ff9f8c;
  --ect-line: rgba(252, 236, 209, 0.22);

  --ect-pixel-clip: polygon(0 9px, 3px 9px, 3px 3px, 9px 3px, 9px 0, calc(100% - 9px) 0, calc(100% - 9px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) 100%, 9px 100%, 9px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 9px), 0 calc(100% - 9px));
  --ect-pixel-clip-sm: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));

  /* The pricing page's card frames. The pictures carry no size of their own, so each edge draws as a bracket. */
  --ect-frame-sand: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><path d='M1 0h5v1H1zM0 1h7v1H0zM0 2h2v3H0zM5 2h2v3H5zM0 5h7v1H0zM1 6h5v1H1z' fill='%23dbc9b4'/></svg>");
  --ect-frame-sand-dim: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><path d='M1 0h5v1H1zM0 1h7v1H0zM0 2h2v3H0zM5 2h2v3H5zM0 5h7v1H0zM1 6h5v1H1z' fill='%23dbc9b4' fill-opacity='0.3'/></svg>");
  --ect-frame-gold: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><path d='M1 0h5v1H1zM0 1h7v1H0zM0 2h2v3H0zM5 2h2v3H5zM0 5h7v1H0zM1 6h5v1H1z' fill='%23f7cf91'/></svg>");
  --ect-frame-gold-dim: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><path d='M1 0h5v1H1zM0 1h7v1H0zM0 2h2v3H0zM5 2h2v3H5zM0 5h7v1H0zM1 6h5v1H1z' fill='%23f7cf91' fill-opacity='0.3'/></svg>");

  /* The shared theme's tokens, re-pointed, so fields, messages and popups follow */
  --xf-pageBg: var(--ect-page);
  --xf-contentBg: #291f33;
  --xf-contentAltBg: #22182b;
  --xf-textColor: var(--ect-cream);
  --xf-textColorMuted: var(--ect-muted);
  --xf-linkColor: var(--ect-mint);
  --xf-linkHoverColor: var(--ect-cream);
  --xf-paletteColor1: #a0ddd3;
  --xf-paletteColor2: #64b082;
  --xf-paletteAccent1: #f3b8a8;
  --xf-paletteAccent2: #d8725e;
  --xf-paletteAccent3: #8f3b2c;
  --xf-borderColor: rgba(252, 236, 209, 0.16);
  --xf-borderColorLight: rgba(252, 236, 209, 0.1);
  --xf-borderColorHeavy: rgba(252, 236, 209, 0.3);
  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.45);
  --xf-majorHeadingBg: rgba(252, 236, 209, 0.06);
  --xf-majorHeadingTextColor: var(--ect-cream);
  --xf-blockFooterBg: #22182b;
  --xf-blockFooterTextColor: var(--ect-muted);
  --xf-focusRing: 0 0 0 3px rgba(160, 221, 211, 0.3);
  --xf-fontFamily: "ECT Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Header and footer: the forum's ---------- */

body.rg-xf-shell .rg-xfHeader {
  background: linear-gradient(90deg, #291f33 0%, #291f33 5%, #1e1428 50%, #140a1c 80%, #0a020f 95%, #000 100%);
  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 logo, drawn over the theme's own picture */
body.rg-xf-shell .rg-xfLogoLink {
  display: block;
  width: min(172px, 38vw);
  aspect-ratio: 339 / 75;
  background: url("/community/styles/default/xenforo/logothirdgate.gif") no-repeat 0 50% / contain;
}

body.rg-xf-shell .rg-xfLogoLink img.rg-xfLogo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
}

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

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup {
  flex-wrap: nowrap;
}

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-link {
  padding: 7px 10px;
  border: 1px solid var(--ect-forum-green);
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--ect-forum-green);
  transition: background-color 120ms ease, color 120ms ease;
}

/* A long member name must not push the header wider than a phone */
body.rg-xf-shell .rg-xfHeader-logo {
  flex: 0 1 auto;
  min-width: 0;
}

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-account {
  max-width: 26vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-link:hover {
  background: rgba(100, 176, 130, 0.14);
  color: var(--ect-green);
  text-decoration: none;
}

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary {
  background: var(--ect-forum-green);
  color: var(--ect-page);
}

body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  border-color: var(--ect-green);
  background: var(--ect-green);
  color: var(--ect-page);
}

body.rg-xf-shell .rg-xfFooter {
  background: transparent;
  border-top-color: rgba(252, 236, 209, 0.08);
}

body.rg-xf-shell .rg-xfFooter-inner,
body.rg-xf-shell .rg-xfFooter-link {
  color: var(--ect-forum-green);
}

@media (min-width: 640px) {
  body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-link {
    padding: 7px 14px;
  }

  body.rg-xf-shell .rg-xfLogoLink {
    width: 339px;
  }

  body.rg-xf-shell .rg-xfHeaderAccount .rg-xfNavgroup-account {
    max-width: 16em;
  }
}

/* ---------- The page is one panel, so the usual sheet and its title step aside ---------- */

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-body-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

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

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup {
  max-width: 780px;
  margin: 0 auto;
  counter-reset: ect-step;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup > .am-login-text {
  margin: 0 0 10px 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  text-align: right;
  font-size: var(--xf-fontSizeSmall);
  color: var(--ect-muted);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup > .am-form {
  padding: 24px 16px 20px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(160, 221, 211, 0.08) 0%, transparent 70%),
    linear-gradient(160deg, var(--ect-bg-deep) 0%, var(--ect-bg-mid) 45%, var(--ect-bg-indigo) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-head {
  margin: 0 0 22px 0;
  text-align: center;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-head__title {
  margin: 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ect-cream);
  text-shadow: 0 2px 0 rgba(45, 30, 47, 0.45);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-head__tagline {
  margin: 6px 0 0 0;
  font-size: 15px;
  color: var(--ect-mint);
}

/* Step headings, numbered as they appear. The payment row's own label is the third. */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-step,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form #row-paysys_id div.am-element-title label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ect-cream);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-step::before,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form #row-paysys_id div.am-element-title label::before {
  counter-increment: ect-step;
  content: counter(ect-step);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  clip-path: var(--ect-pixel-clip-sm);
  background: var(--ect-gold);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ect-bg-deep);
}

/* ---------- Fields: labels sit above them ---------- */

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-row {
  border: 0;
  padding: 0 0 16px 0;
  background: transparent;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form form div.am-row div.am-element-title,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .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-default, .am-page-signup-join-trial) .am-form div.am-element-title label {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 700;
}

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .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-default, .am-page-signup-join-trial) .am-form div.am-element input[type=text],
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input[type=email],
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input[type=password] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ect-line);
  border-radius: 0;
  background-color: rgba(45, 30, 47, 0.7);
  font-size: 16px;
  color: var(--ect-cream);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input[type=text]:focus,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input[type=email]:focus,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input[type=password]:focus {
  border-color: var(--ect-mint);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input::placeholder {
  color: rgba(195, 167, 156, 0.6);
}

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

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

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

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

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

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form span.am-error {
  display: block;
  margin-top: 6px;
  font-size: var(--xf-fontSizeSmall);
  color: var(--ect-error);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div.am-element input.am-error {
  border-color: var(--ect-error);
}

/* ---------- Roles: the plans as the pricing page's cards ---------- */

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form [id^="row-product_id"] div.am-element {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px 18px;
  padding-top: 16px;
}

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label {
  --tier: var(--ect-gold);
  --tier-frame: var(--ect-frame-gold);
  --tier-frame-dim: var(--ect-frame-gold-dim);

  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px 16px 14px;
  border: 6px solid transparent;
  border-image-source: var(--tier-frame-dim);
  border-image-slice: 3;
  border-image-width: 6px;
  border-image-repeat: stretch;
  background: rgba(45, 30, 47, 0.45);
  background-clip: padding-box;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input[data-first_price="0.00"]) {
  --tier: var(--ect-sand);
  --tier-frame: var(--ect-frame-sand);
  --tier-frame-dim: var(--ect-frame-sand-dim);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:only-of-type {
  grid-column: 1 / -1;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input[type=hidden]),
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input[type=hidden]):hover {
  cursor: default;
  transform: none;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:hover {
  border-image-source: var(--tier-frame);
  transform: translateY(-3px);
}

/* A member offered a single plan gets it as a hidden field, not a choice: that card shows as picked */
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input:checked),
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input[type=hidden]) {
  border-image-source: var(--tier-frame);
  background-color: rgba(57, 41, 69, 0.92);
  box-shadow: 0 12px 40px rgba(45, 30, 47, 0.55);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input:focus-visible),
body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label:has(input:focus-visible) {
  outline: 2px solid var(--ect-mint);
  outline-offset: 3px;
}

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

/* Picked or not: a slot in the corner that fills with the role's colour */
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  clip-path: var(--ect-pixel-clip-sm);
  background: rgba(21, 15, 26, 0.55);
  box-shadow: inset 0 0 0 2px rgba(252, 236, 209, 0.28);
  font-size: 14px;
  font-weight: 700;
  color: var(--ect-bg-deep);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input:checked)::after,
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:has(input[type=hidden])::after {
  content: "\2713";
  background: var(--tier);
  box-shadow: none;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tier);
  text-shadow: 0 1px 0 rgba(45, 30, 47, 0.55);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-title:has(+ .ect-role__flavor) {
  margin-bottom: 0;
}

/* The price and the portrait share one element in aMember's markup: the portrait moves to the top of the card */
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-terms {
  display: contents;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ect-cream);
  text-shadow: 0 2px 0 rgba(45, 30, 47, 0.35);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-terms img {
  order: -1;
  align-self: flex-start;
  width: 70px;
  height: 70px;
  margin: 0 0 12px 0;
  clip-path: var(--ect-pixel-clip);
  image-rendering: pixelated;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-desc {
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  color: var(--ect-muted);
}

/* The role's own list replaces the plan description every form shares */
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-product-desc:empty,
body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .ect-role .am-product-desc {
  display: none;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 14px;
  clip-path: var(--ect-pixel-clip-sm);
  background: var(--ect-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ect-bg-deep);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__flavor {
  margin: 4px 0 14px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ect-muted);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__gear {
  margin: 18px 0 4px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier);
  opacity: 0.85;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__features {
  display: block;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(252, 236, 209, 0.1);
  font-size: 14px;
  line-height: 1.4;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature:last-child {
  border-bottom: 0;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature::before {
  content: "\2713";
  padding-top: 2px;
  font-size: 12px;
  color: var(--tier);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature--more::before {
  content: "\2026";
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__label {
  color: var(--ect-cream);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__value {
  justify-self: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ect-green);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__value--low {
  color: var(--ect-no);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__note {
  grid-column: 2 / 4;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ect-muted);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature a,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-verified a {
  color: var(--ect-mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-role__feature a:hover,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-verified a:hover {
  color: var(--ect-cream);
}

/* Verified is applied for later, so it is a note under the roles, not a third card */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-verified {
  margin: 0;
  padding: 10px 14px;
  border-left: 4px solid rgba(170, 215, 149, 0.55);
  background: rgba(45, 30, 47, 0.45);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ect-muted);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-verified strong {
  margin-right: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ect-green);
}

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form #row-paysys_id div.am-element-title label {
  margin-bottom: 12px;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form #row-paysys_id div.am-element {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* aMember sets the labels to display:block itself, and puts a hard space in front of the name: font-size 0 drops it */
body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 13px 14px 13px 54px;
  border: 2px solid var(--ect-line);
  background: rgba(45, 30, 47, 0.45);
  font-size: 0;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label:hover {
  border-color: rgba(252, 236, 209, 0.45);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label:has(input:checked) {
  border-color: var(--ect-gold);
  background: rgba(57, 41, 69, 0.92);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label::before {
  content: "\f09d";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 24px;
  text-align: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  color: var(--ect-muted);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label:has(input[value="authorize-cim"])::before { content: "\f19c"; }

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-element > label:has(input:checked)::before {
  color: var(--ect-gold);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-paysystem-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ect-cream);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-paysys_id .am-paysystem-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--xf-fontSizeSmaller);
  font-style: normal;
  color: var(--ect-muted);
}

/* ---------- Captcha, terms, total, button ---------- */

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

/* The captcha is 300px wide whatever the screen: on the narrowest phones it is scaled to fit the panel */
@media (max-width: 363px) {
  body:is(.am-page-signup-default, .am-page-signup-join-trial) #row-grp-captcha .g-recaptcha {
    transform: scale(0.84);
    transform-origin: 0 0;
    margin-bottom: -10px;
  }
}

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

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

/* Tick box, then its label; a "please agree" message goes underneath both */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form div[id^="row-_i_agree"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form form div[id^="row-_i_agree"] div.am-element {
  display: contents;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form form div[id^="row-_i_agree"] div.am-element-title {
  grid-column: 2;
  grid-row: 1;
}

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form [id^="row-_i_agree"] span.am-error {
  grid-column: 1 / -1;
  grid-row: 2;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-_i_agree"] input[type=checkbox] {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;
  accent-color: var(--ect-forum-green);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-invoice-summary {
  border: 1px dashed var(--ect-line);
  border-radius: 0;
  background: rgba(45, 30, 47, 0.5);
  box-shadow: none;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-invoice-summary tr.am-invoice-summary-delimiter td {
  padding: 0;
  border-bottom: 0;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-invoice-summary hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--xf-borderColorLight);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-invoice-summary tr.am-invoice-summary-row-total td {
  border-bottom: 0;
  background: rgba(45, 30, 47, 0.6);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-invoice-summary .am-invoice-summary-price {
  font-variant-numeric: tabular-nums;
}

/* The button takes the picked role's colour */
body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form div.am-row input[type=submit] {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 0;
  clip-path: var(--ect-pixel-clip);
  background: #ab597d;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ect-cream);
  transition: background-color 200ms ease, transform 150ms ease;
}

body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form div.am-row input[type=submit]:hover {
  border: 0;
  background: #7c3d64;
  box-shadow: none;
  transform: translateY(-1px);
}

body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form form:has(input[name^="product_id"][data-first_price="0.00"]:checked) div.am-row input[type=submit] {
  background: #b87e6c;
}

body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form form:has(input[name^="product_id"][data-first_price="0.00"]:checked) div.am-row input[type=submit]:hover {
  background: #8f5252;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form #row-buttons {
  padding-bottom: 0;
}

/* The pricing page's sign-off, under the button */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup > .am-form:has(.ect-join-head)::after {
  content: "See you by torch 1.";
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ect-mint);
}

/* ---------- Members who are upgrading already have an account ---------- */

body:is(.am-page-signup-default, .am-page-signup-join-trial).am-logged-in .ect-join-head,
body:is(.am-page-signup-default, .am-page-signup-join-trial).am-logged-in .ect-join-step--account,
body:is(.am-page-signup-default, .am-page-signup-join-trial).am-logged-in .am-signup > .am-form::after {
  display: none;
}

/* A member who already holds "Registered" is offered Premium alone, so there is no choice to make */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .ect-join-step__single,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form:has([id^="row-product_id"] .am-element > label:only-of-type) .ect-join-step__choose {
  display: none;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form:has([id^="row-product_id"] .am-element > label:only-of-type) .ect-join-step__single {
  display: inline;
}

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

@media (min-width: 480px) {
  body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-form #row-paysys_id div.am-element {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup > .am-form {
    padding: 40px 44px 30px;
    border-radius: 24px;
  }

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

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

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup:not(:has(.ect-join-head)),
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-body-content:not(:has(.ect-join-head)) .am-body-content-top {
  max-width: 640px;
  margin: 0 auto;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-body-content-top > h1 {
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) form#EmailCode [id^="row-email-confirm-message"] .am-element {
  max-width: none;
  padding: 24px 0 8px;
  border: 0;
  background: transparent;
  text-align: center;
  line-height: 1.6;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) form#EmailCode [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(--ect-gold);
}

/* ---------- Popups opened from this page (log in, the terms) borrow the field styles above ---------- */

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup {
  font-family: var(--xf-fontFamily);
}

/* aMember shows the terms as small preformatted text */
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement {
  white-space: normal;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement h1 {
  margin: 0 0 10px 0;
  font-size: 20px;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement h3 {
  margin: 18px 0 6px 0;
  font-size: 15px;
  color: var(--ect-gold);
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement p,
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement ul {
  margin: 0 0 10px 0;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement ul {
  padding-left: 20px;
  list-style: disc;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .agreement li {
  margin: 0 0 6px 0;
}

body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .am-form div.am-element input[type=text],
body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .am-form div.am-element input[type=password] {
  padding-left: 40px;
}

body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .am-form div.am-row input[type=submit] {
  border-color: var(--ect-forum-green);
  background: var(--ect-forum-green);
  font-weight: 700;
  color: var(--ect-page);
}

body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-popup .am-form div.am-row input[type=submit]:hover {
  border-color: var(--ect-green);
  background: var(--ect-green);
}

@media (prefers-reduced-motion: reduce) {
  body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label,
  body:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form div.am-row input[type=submit] {
    transition: none;
  }

  body:is(.am-page-signup-default, .am-page-signup-join-trial) [id^="row-product_id"] .am-element > label:hover,
  body.rg-xf-shell:is(.am-page-signup-default, .am-page-signup-join-trial) .am-signup .am-form div.am-row input[type=submit]:hover {
    transform: none;
  }
}

/* =========================
   EC Tunnel thanks page (thanks.phtml in the theme). A processed order gets one panel like the signup form's:
   the role's portrait and headline in the role's frame, its list, next steps, the receipt and the sign-off.
   Sources: /root/signup-funnel/ectunnel/thanks.
   ========================= */

body.am-page-thanks .am-body-content:has(.ect-thanks) {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

body.am-page-thanks .am-body-content:has(.ect-thanks) .am-body-content-top {
  display: none;
}

body.am-page-thanks .am-body-content:has(.ect-thanks) .am-body-content-content {
  padding: 0;
}

/* ---------- Page background: desktop only ----------
   RedGuides' signal.js draws one of two stock Shaders simulations here (MagneticFilings, Boids), picked at random on
   each load, in the gold and the mint. The body leaves the page colour to html, whose paint sits under this layer; the
   body's own would cover it. The panel stays solid on top. */

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

body.am-page-thanks .ect-thanks-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --signal-a: var(--ect-gold);
  --signal-b: var(--ect-mint);
}

body.am-page-thanks .ect-thanks {
  --tier: var(--ect-sand);
  --tier-frame: var(--ect-frame-sand);

  max-width: 780px;
  margin: 0 auto;
  padding: 20px 16px 22px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(160, 221, 211, 0.08) 0%, transparent 70%),
    linear-gradient(160deg, var(--ect-bg-deep) 0%, var(--ect-bg-mid) 45%, var(--ect-bg-indigo) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

body.am-page-thanks .ect-thanks--premium {
  --tier: var(--ect-gold);
  --tier-frame: var(--ect-frame-gold);
}

/* EverQuest's zone-in line */
body.am-page-thanks .ect-thanks__zone {
  margin: 0 0 18px 0;
  text-align: center;
  font-size: 13px;
  color: var(--ect-gold);
}

/* ---------- The role: portrait and headline, then its list, in the role's frame ---------- */

body.am-page-thanks .ect-thanks__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 24px;
  text-align: center;
}

body.am-page-thanks .ect-thanks__portrait {
  position: relative;
  flex: 0 0 auto;
  padding: 6px;
  border: 6px solid transparent;
  border-image-source: var(--tier-frame);
  border-image-slice: 3;
  border-image-width: 6px;
  border-image-repeat: stretch;
  background: rgba(45, 30, 47, 0.6);
  background-clip: padding-box;
}

/* Twice the signup card's size, whole pixels only */
body.am-page-thanks .ect-thanks__portrait img {
  display: block;
  width: 140px;
  height: 140px;
  clip-path: var(--ect-pixel-clip);
  image-rendering: pixelated;
}

body.am-page-thanks .ect-thanks__badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 12px;
  clip-path: var(--ect-pixel-clip-sm);
  background: var(--ect-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ect-bg-deep);
}

body.am-page-thanks .ect-thanks__words {
  flex: 1 1 280px;
  max-width: 440px;
}

body.am-page-thanks .ect-thanks__eyebrow {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier);
}

body.am-page-thanks .ect-thanks__title {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ect-cream);
  text-shadow: 0 2px 0 rgba(45, 30, 47, 0.45);
}

body.am-page-thanks .ect-thanks__flavor {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--ect-muted);
}

/* The role's list, as on its signup card */
body.am-page-thanks .ect-thanks__gear {
  margin: 26px 0 4px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier);
}

body.am-page-thanks .ect-thanks__features {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.am-page-thanks .ect-thanks__features li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(252, 236, 209, 0.1);
  font-size: 14px;
  line-height: 1.4;
}

body.am-page-thanks .ect-thanks__features li:last-child {
  border-bottom: 0;
}

body.am-page-thanks .ect-thanks__features li::before {
  content: "\2713";
  padding-top: 2px;
  font-size: 12px;
  color: var(--tier);
}

body.am-page-thanks .ect-thanks__label {
  color: var(--ect-cream);
}

body.am-page-thanks .ect-thanks__value {
  justify-self: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ect-green);
}

body.am-page-thanks .ect-thanks__value--low {
  color: var(--ect-no);
}

body.am-page-thanks .ect-thanks__note {
  grid-column: 2 / 4;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ect-muted);
}

/* ---------- Next steps, headed like the signup steps with a quest marker ---------- */

body.am-page-thanks .ect-thanks__step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ect-cream);
}

body.am-page-thanks .ect-thanks__step::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  clip-path: var(--ect-pixel-clip-sm);
  background: var(--ect-gold);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ect-bg-deep);
}

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

body.am-page-thanks .ect-thanks__card {
  --card-frame: var(--ect-frame-sand-dim);
  --card-frame-hover: var(--ect-frame-sand);
  --card-icon: var(--ect-mint);

  position: relative;
  display: block;
  padding: 12px 14px 12px 52px;
  border: 6px solid transparent;
  border-image-source: var(--card-frame);
  border-image-slice: 3;
  border-image-width: 6px;
  border-image-repeat: stretch;
  background: rgba(45, 30, 47, 0.45);
  background-clip: padding-box;
  text-decoration: none;
  color: var(--ect-cream);
}

body.am-page-thanks .ect-thanks__card:hover,
body.am-page-thanks .ect-thanks__card:focus-visible {
  border-image-source: var(--card-frame-hover);
  background-color: rgba(57, 41, 69, 0.92);
  color: var(--ect-cream);
  text-decoration: none;
}

body.am-page-thanks .ect-thanks__card:focus-visible {
  outline: 2px solid var(--ect-mint);
  outline-offset: 2px;
}

body.am-page-thanks .ect-thanks__card--premium,
body.am-page-thanks .ect-thanks__card--verify {
  --card-frame: var(--ect-frame-gold-dim);
  --card-frame-hover: var(--ect-frame-gold);
  --card-icon: var(--ect-gold);
}

body.am-page-thanks .ect-thanks__card strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ect-cream);
}

body.am-page-thanks .ect-thanks__card span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ect-muted);
}

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

body.am-page-thanks .ect-thanks__card--market::before { content: "\f54e"; content: "\f54e" / ""; }
body.am-page-thanks .ect-thanks__card--wtb::before { content: "\f0a1"; content: "\f0a1" / ""; }
body.am-page-thanks .ect-thanks__card--premium::before { content: "\f0e7"; content: "\f0e7" / ""; }
body.am-page-thanks .ect-thanks__card--verify::before { content: "\f3ed"; content: "\f3ed" / ""; }

/* ---------- Receipt ---------- */

body.am-page-thanks .ect-thanks__section {
  margin: 28px 0 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ect-muted);
}

body.am-page-thanks .ect-thanks .am-thanks-status-success {
  margin: 0 0 6px 0;
  color: var(--ect-green);
}

body.am-page-thanks .ect-thanks .am-thanks-payment-details {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--ect-muted);
}

/* The portrait sits in the product's terms text; it is already at the top */
body.am-page-thanks .ect-thanks .am-receipt-terms img {
  display: none;
}

/* ---------- The pricing page's sign-off, with its torch ---------- */

body.am-page-thanks .ect-thanks__signoff {
  margin: 22px 0 0 0;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ect-mint);
}

/* The forum's torch, 17 x 43 art pixels at 2 screen pixels each */
body.am-page-thanks .ect-thanks__signoff::before {
  content: "";
  display: block;
  width: 34px;
  height: 86px;
  margin: 0 auto 10px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAArCAYAAACejGMxAAAB9klEQVR42tVVPUhCURT+7sMlDCcHAyWIFhFBQUi3FkMcXNpdWtuaG8JZXIRocMjdpUEEG9x6gaAQYkSLKOjgJEqjDb57vX/v+Z5Q1IHLe/dy7ne+75zDuQQ7bFyNr9GbAwAitSnR+RC4sPHV0ZptkkFErt+EewbcWjK4Wb25COoJxMEMt1LCxcCWkSTRcC2FB/LChI82qS+8y2EAOhbWGfUju8pJjQeZ1BegvaMwEaLrAA6f1JLzIONqXKBPIwkylgUtsy0TSo9+OSaMhcVErpIhlzJcOVH1a4zPi09uYZ6uU1ltE6sDChcDYkItFpHalFDJPiaD10kvLQsiAJdYVggGIl+22/M5UuRwB7bGseD9I7UpMdi0mt3txJnUFwhfVAQAYbKtP563VTpNipG5IGZ/CLx2kCk3iJIT8+EeODtHOhEFPnsAVGYUQDYG0hyMkEcHppMeC4BnoQzql5vLjaTUgQrQ/WK/MojQbM3BaGdydT6eBrVdEEPryFGnUpxYCh3bnq0AAPmY3rk9W8HsD4kjSDbkR3u2QqbcUADSiai7QV1qdUk25Pf8ePl0h7e5FPKx402ppXyY+7yAMlNP7w6N7qZ3fudB3wuk1OoS2i/Nx3ehfzxZOhFdA2DL2v+sHG2fZEN+ZHMpcSD9z+roOtOuU/+enG/YQ86TLpDUmgAAAABJRU5ErkJggg==") center / 34px 86px no-repeat;
  image-rendering: pixelated;
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  body.am-page-thanks .ect-thanks {
    padding: 16px 12px 18px;
    border-radius: 12px;
  }

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

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

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

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