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