/* =====================================================================
   Group Buy AI Tools — "Notion Mono" member-panel theme  (v1)
   ---------------------------------------------------------------------
   One stylesheet for the whole aMember member area. Uploaded to the
   web root of app.groupbuyaitools.com and linked from
   application/default/views/layout.phtml (<link href="/gb-theme.css?v=N">).

   DESIGN: white Notion-style app shell — persistent left sidebar for
   logged-in members, centered auth card for guests. Black is the only
   accent; colour is reserved for status (ok / warn / err).

   COMPAT: token names are kept from the previous "cream skin"
   (--cr-*) because signup/signup-cards.phtml and thanks.phtml still
   reference them from their own <style> blocks. Changing values here
   reskins those pages without touching their files.
   ===================================================================== */

:root{
  /* SURFACES */
  --cr-canvas: #FFFFFF;   /* main app background                        */
  --cr-side:   #FBFBFA;   /* sidebar background (Notion off-white)      */
  --cr-card:   #FFFFFF;   /* card surface                               */
  --cr-sunk:   #F1F1EF;   /* hover / pressed / segmented bg             */
  --cr-scan:   #FFFFFF;   /* QR quiet zone (legacy)                     */

  /* INK */
  --cr-ink:    #191918;   /* primary text + the accent                  */
  --cr-ink-2:  #37352F;   /* body copy (classic Notion ink)             */
  --cr-muted:  #6F6E6B;   /* secondary text — 5.10:1 on #FFF, 4.75:1 on #F7F7F5 */

  /* ON-BLACK (buttons, selected pills) */
  --cr-on-ink:   #FFFFFF;
  --cr-on-ink-2: #D5D5D3;
  --cr-on-ink-ok:#6FDB9C;

  /* EDGES */
  --cr-line:          #E0DFDC;  /* strong border (decorative)           */
  --cr-line-input:    #949390;  /* form-control edges — 3.07:1 on white  */
  --cr-line-soft:     #ECEBE8;  /* soft border                          */
  --cr-line-ink:      rgba(255,255,255,.35);
  --cr-line-ink-soft: rgba(255,255,255,.16);

  /* STATUS — soft chips, saturated text (Untitled-UI-ish, Notion-calm) */
  --cr-ok:   #087443; --cr-ok-bg:  #EDF7F0; --cr-ok-line:  #ABE3C1;
  --cr-err:  #B42318; --cr-err-bg: #FEF3F2; --cr-err-line: #F4C6C2;
  --cr-warn: #B54708; --cr-warn-bg:#FFFAEB; --cr-warn-line:#F6DE9C;

  --cr-radius:14px; --cr-radius-sm:8px; --cr-radius-pill:999px;

  --cr-shadow:    0 1px 2px rgba(16,24,40,.05);
  --cr-shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --cr-shadow-up: 0 10px 24px -12px rgba(16,24,40,.14);

  --cr-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cr-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* LEGACY ALIASES — signup-cards.phtml + thanks.phtml consume these. */
  --cr-bg:       #F7F7F5;          /* recessed strips (th, nodata, offers) */
  --cr-bg-2:     var(--cr-sunk);
  --cr-white:    var(--cr-card);
  --cr-border:   var(--cr-line);
  --cr-border-2: var(--cr-line-soft);

  /* shell metrics */
  --gb-side-w: 264px;
  --gb-topbar-h: 64px;
  --gb-content-max: 1080px;
}

/* aMember's stock theme.css hardcodes these; keep the override. */
:root{ --am_page_bg:var(--cr-canvas)!important; --am_bg:var(--cr-canvas)!important;
       --am_header_bg:var(--cr-canvas)!important; }

/* ---------- Base ---------- */
*:focus-visible{outline:2px solid var(--cr-ink);outline-offset:2px;border-radius:inherit}
::placeholder{color:var(--cr-muted);opacity:1}
html,body{background:var(--cr-canvas)!important;color:var(--cr-ink-2)!important;
  font-family:var(--cr-font)!important;color-scheme:light;
  -webkit-font-smoothing:antialiased;margin:0;min-height:100%}
img{max-width:100%}

/* Neutralise the old chrome wherever it still renders. */
.am-header,.am-header-line,.am-account-toolbar,
.am-tabs-wrapper,.am-tabs-narrow-wrapper{display:none!important}
.am-layout,.am-common,.am-body,.am-body-content,.am-body-content-content,
.am-body-content-top,.am-body-content-wrapper{background:transparent!important;
  border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* =====================================================================
   APP SHELL (logged-in)
   ===================================================================== */
.gb-shell{display:flex;flex-wrap:wrap;min-height:100vh;align-items:stretch}
/* Safety net: only the sidebar and the main column are meant to be flex items
   here. If anything else ends up as a direct child (a footer that escaped its
   wrapper, a plugin injecting markup at body-start), it must drop onto its own
   full-width row rather than silently stealing horizontal space from the
   content column — which is exactly how a stray footer once shrank every page
   from 1016px to 576px without erroring. */
/* Basis is calc(100% + 1px), not 100%: a flex line only breaks when the sum of
   hypothetical sizes EXCEEDS the line, and .gb-maincol's basis is 0 — so a flat
   100% would not break when .gb-side is out of flow (gb-side-collapsed, and
   every width <= 1020px where the sidebar is position:fixed). */
.gb-shell > *:not(.gb-side):not(.gb-scrim):not(.gb-maincol){
  flex:0 1 calc(100% + 1px);order:99;box-sizing:border-box}

/* ---------- Sidebar ---------- */
.gb-side{width:var(--gb-side-w);flex:0 0 var(--gb-side-w);
  background:var(--cr-side);border-right:1px solid var(--cr-line-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow-y:auto;z-index:40}
.gb-side-head{display:flex;align-items:center;gap:10px;
  padding:20px 18px 14px;min-height:64px;box-sizing:border-box}
.gb-side-head img,.gb-side-head .am-header-content-logo{height:30px;width:30px;
  max-height:none;object-fit:contain;display:block;flex:0 0 30px}
/* A 1x1 transparent placeholder ships with stock aMember themes; if that is
   still the configured logo it simply collapses and the title carries the
   header on its own. */
.gb-side-head img[width="1"]{display:none}
.gb-side-title{font-size:15.5px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.02em;line-height:1.15;min-width:0}
.gb-logo-mark{width:26px;height:26px;border-radius:8px;background:var(--cr-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;
  color:#fff;font-weight:800;font-size:13px}

.gb-nav-wrap{flex:1;padding:6px 0 12px}
ul.gb-nav{list-style:none;margin:0;padding:0 10px}
ul.gb-nav li{margin:2px 0;padding:0}
ul.gb-nav li a{display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--cr-radius-sm);
  color:var(--cr-ink-2);font-size:14px;font-weight:500;text-decoration:none;
  transition:background .12s,color .12s;position:relative}
ul.gb-nav li a:hover{background:var(--cr-sunk);color:var(--cr-ink)}
ul.gb-nav li.active>a,ul.gb-nav li.current>a{background:#ECECEA;
  color:var(--cr-ink);font-weight:600}

/* Nav icons — Feather outlines as CSS masks keyed off the href, so the
   PHP menu needs no markup changes. Default dot first; specific after. */
ul.gb-nav li a::before{content:'';width:18px;height:18px;flex:0 0 18px;
  background:currentColor;opacity:.75;
  -webkit-mask:var(--gb-ic) center/contain no-repeat;
          mask:var(--gb-ic) center/contain no-repeat;
  --gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E")}
ul.gb-nav li.active>a::before{opacity:1}
ul.gb-nav a[href*="member"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="payment-history"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="signup"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.83z'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="aff"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="helpdesk"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="profile"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="logout"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}

/* Helpdesk unread badge — aMember emits ((N)) → span.menu-item-alert. */
.menu-item-alert{margin-left:auto;background:var(--cr-err);color:#fff;
  font-size:11px;font-weight:700;line-height:1;min-width:18px;height:18px;
  border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 5px}
.menu-item-alert span{display:none}

/* Sidebar footer — user identity block. */
.gb-side-foot{border-top:1px solid var(--cr-line-soft);padding:12px 14px}
/* amember.css:1389 floats this block, indents it 25px and paints a base64 grey
   "user" PNG behind it — which surfaces as a stray icon in the sidebar footer. */
.gb-side-foot .am-user-identity-block{display:flex!important;align-items:center;
  gap:8px;font-size:13px;color:var(--cr-muted);flex-wrap:wrap;
  float:none!important;padding-left:0!important;background-image:none!important;
  font-weight:400!important}
.gb-side-foot .am-user-identity-block_login{font-weight:600;color:var(--cr-ink-2);
  overflow:hidden;text-overflow:ellipsis;max-width:130px;white-space:nowrap}
.gb-side-foot .am-user-identity-block a{margin-left:auto;color:var(--cr-muted);
  font-weight:600;text-decoration:none;font-size:12.5px;
  padding:4px 10px;border:1px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card)}
.gb-side-foot .am-user-identity-block a:hover{color:var(--cr-ink);border-color:var(--cr-ink)}

/* ---------- Main column ---------- */
.gb-maincol{flex:1;min-width:0;display:flex;flex-direction:column}
.gb-topbar{height:var(--gb-topbar-h);display:flex;align-items:center;gap:12px;
  padding:0 28px;border-bottom:1px solid var(--cr-line-soft);
  position:sticky;top:0;background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);z-index:30}
.gb-menu-btn{border:1px solid var(--cr-line);background:var(--cr-card);
  border-radius:var(--cr-radius-sm);width:34px;height:34px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--cr-ink-2);padding:0}
.gb-menu-btn:hover{background:var(--cr-sunk)}
.gb-topbar-spacer{flex:1}
.gb-avatar{width:36px;height:36px;border-radius:50%;background:var(--cr-ink);
  color:#fff;font-weight:700;font-size:14px;display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none;
  border:2px solid var(--cr-card);box-shadow:0 0 0 1.5px var(--cr-line)}
.gb-avatar:hover{box-shadow:0 0 0 1.5px var(--cr-ink)}

/* NB: do NOT put `max-width` + `margin:0 auto` on this element. It is a flex
   item in .gb-maincol, and an auto cross-axis margin cancels align-self:stretch
   — the column then shrink-wraps its content, so page width silently changed
   with whatever was on the page (a narrow widget produced a narrow panel).
   Keep this full-width and centre the block-level .am-layout inside it. */
.gb-content{flex:1;width:100%;box-sizing:border-box;padding:34px 44px 60px}
.gb-content > .am-layout{max-width:var(--gb-content-max)!important;
  margin:0 auto!important;width:100%}
/* amember.css:749 `.am-main{max-width:800px;margin:0 auto;padding:0 20px}` is a
   second class on .am-body-content-wrapper / .am-footer-content-wrapper /
   .am-header-content-wrapper. The base reset strips its padding and margin but
   NOT its max-width, so without this the reading column is 800px flush-left
   inside a 1080px shell. */
.am-main{max-width:none!important}

/* Mobile scrim */
.gb-scrim{display:none}

/* ---------- Page headings ---------- */
.am-body-content-top h1,.am-body-content h1{font-size:26px;font-weight:800;
  color:var(--cr-ink);letter-spacing:-.02em;margin:2px 0 22px;line-height:1.2}
.am-body-content h2{font-size:17px;font-weight:700;color:var(--cr-ink);
  letter-spacing:-.01em}
.am-widget{margin:0 0 30px}
.am-widget h2{margin:0 0 12px}

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* ---------- Cards / blocks ---------- */
.am-block{background:var(--cr-card)!important;
  border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-radius)!important;box-shadow:var(--cr-shadow-sm)!important;
  padding:6px 0!important;margin-bottom:14px!important;overflow:hidden}
/* .am-block's 6px padding is tuned for edge-to-edge list widgets; a block
   that wraps a form needs real padding instead. */
.am-block > form,.am-block > .am-form{padding:22px 24px;display:block}
.am-block-nodata,.member-subscriptions-no{background:var(--cr-bg)!important;
  border:1px dashed var(--cr-line)!important;border-radius:var(--cr-radius)!important;
  color:var(--cr-muted);padding:30px!important;text-align:center;font-size:13.5px}
.member-subscriptions-no h3{color:var(--cr-ink);margin:0 0 6px}
.member-subscriptions-no a{color:var(--cr-ink);font-weight:600}

/* ---------- Notices (admin-entered content + system messages) ---------- */
.am-info{background:var(--cr-bg)!important;border:1px solid var(--cr-line-soft)!important;
  color:var(--cr-ink-2)!important;padding:13px 18px!important;
  border-radius:var(--cr-radius-sm)!important;font-size:13.5px}
.am-error,.am-errors{background:var(--cr-err-bg)!important;
  border:1px solid var(--cr-err-line)!important;color:var(--cr-err)!important;
  padding:13px 18px!important;border-radius:var(--cr-radius-sm)!important}
.am-flash-content{background:var(--cr-ink)!important;color:#fff!important;
  border-radius:var(--cr-radius-sm)!important;border:0!important;
  padding:13px 18px!important;font-weight:600}
/* Reusable banner for admin-page announcements (like the price notice). */
.gb-notice{background:var(--cr-warn-bg);border:1px solid var(--cr-warn-line);
  border-left:4px solid #F0A22E;border-radius:var(--cr-radius-sm);
  padding:16px 20px;margin:0 0 26px;font-size:14px;color:var(--cr-ink-2)}
.gb-notice strong{color:var(--cr-warn)}
.gb-notice-title{display:flex;gap:9px;align-items:center;font-weight:700;
  color:var(--cr-warn);margin-bottom:6px;font-size:14.5px}

/* ---------- Status pills ---------- */
.gb-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  font-size:12px;font-weight:600;padding:4px 11px;line-height:1.3;white-space:nowrap}

/* ---------- Subscriptions list ---------- */
.am-widget-list{background:transparent;border:0;border-radius:0;
  overflow:hidden;padding:0;margin:0;list-style:none}
.am-widget-list>li{list-style:none;padding:15px 20px;display:flex;
  align-items:center;flex-wrap:wrap;gap:6px 12px;
  border-bottom:1px solid var(--cr-line-soft)}
.am-widget-list>li:last-child{border-bottom:0}
.am-list-subscriptions-title{font-weight:600;color:var(--cr-ink);font-size:14.5px;
  display:inline-flex;align-items:center;gap:10px}
.am-list-subscriptions-title::before{content:'';width:8px;height:8px;
  border-radius:50%;background:#12B76A;flex:0 0 8px}
/* amember.css:3174 appends content:" –" after the title as an inline separator.
   This theme pushes the date to the far side with margin-auto, so that dash
   lands as a stray glyph mid-row. */
.am-list-subscriptions .am-list-subscriptions-title::after{content:none}
.am-list-subscriptions-title a{color:var(--cr-ink);text-decoration:none}
.am-list-subscriptions-title a:hover{text-decoration:underline}
.am-list-subscriptions-date{margin-left:auto}
.am-list-subscriptions-date_expires{background:var(--cr-err-bg);color:var(--cr-err);
  border:1px solid var(--cr-err-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px;white-space:nowrap}
.am-list-subscriptions-date_rebill{background:var(--cr-ok-bg);color:var(--cr-ok);
  border:1px solid var(--cr-ok-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px;white-space:nowrap}
.am-list-subscriptions-date_lifetime{background:var(--cr-sunk);color:var(--cr-ink-2);
  border:1px solid var(--cr-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px}
.am-list-subscriptions-date_future{background:var(--cr-bg);color:var(--cr-muted);
  border:1px solid var(--cr-line-soft);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px}
.am-list-subscriptions-link{display:inline-flex;gap:10px}
.am-list-subscriptions-link a{color:var(--cr-muted);font-size:12.5px;font-weight:600}
.am-list-subscriptions-link a:hover{color:var(--cr-ink)}
/* amember.css:3190 renders this as a literal "|" character; we draw a rule. */
.am-list-subscriptions_divider{border-left:1px solid var(--cr-line);height:12px}
.am-list-subscriptions_divider::before{content:none}
.am-list-subscriptions-desc{flex-basis:100%;color:var(--cr-muted);
  font-size:12.5px;padding-left:18px}

/* Links widget */
.am-list-links a{color:var(--cr-ink);font-weight:500;text-decoration:none;font-size:14px}
.am-list-links a:hover{text-decoration:underline}

/* ---------- Resource (tool) cards ----------
   blocks/member-main-resources.phtml carries its own legacy <style>;
   these #id-scoped rules out-rank it, so that file stays untouched. */
#member-resources.am-grid-resources{display:flex;flex-wrap:wrap;gap:18px;
  background:transparent;border:0}
#member-resources .resource-card{background:var(--cr-card)!important;
  border:1px solid var(--cr-line)!important;border-radius:var(--cr-radius)!important;
  box-shadow:var(--cr-shadow-sm)!important;padding:0!important;
  width:calc(25% - 14px)!important;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
#member-resources .resource-card:hover{transform:translateY(-3px)!important;
  box-shadow:var(--cr-shadow-up)!important;border-color:var(--cr-ink)!important}
#member-resources .resource-card img{width:100%;height:96px;object-fit:contain;
  margin:22px 0 14px;padding:0 18px;box-sizing:border-box}
#member-resources .resource-card a{display:block;text-decoration:none;
  background:var(--cr-ink)!important;color:#fff!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  padding:12px 8px!important;margin-top:auto;
  font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  transition:background .15s}
#member-resources .resource-card a:hover{background:#000!important;color:#fff!important}
#member-resources .fav-toggle{color:var(--cr-line-input);top:10px;right:12px}
/* State must not rest on a 2.12:1 amber. Ink reads at any size and matches
   the rest of the panel; the filled ★ glyph already carries the meaning. */
#member-resources .fav-toggle:hover,#member-resources .fav-toggle.fav-on{color:var(--cr-ink)}

/* Tool search */
.card-search-wrapper{margin:2px 0 22px}
/* amember.css caps inputs with a (0,2,1) `max-width:100%`, which beats a bare
   `.card-search`. Any width cap we set on an input has to be !important. */
.card-search{width:100%;max-width:460px!important;padding:11px 16px 11px 42px!important;
  border:1px solid var(--cr-line-input)!important;border-radius:10px!important;
  font-size:14px!important;font-family:var(--cr-font);background:var(--cr-card)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6E6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E")
  14px center/17px no-repeat!important;box-sizing:border-box;color:var(--cr-ink)}
.card-search:focus{border-color:var(--cr-ink)!important;outline:none;
  box-shadow:0 0 0 3px rgba(25,25,24,.07)}
.card-search-empty{margin-top:12px;color:var(--cr-muted);display:none}

/* ---------- Forms ---------- */
.am-form{background:transparent}
.am-row{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0 0 16px!important}
.am-element-title,.am-element>label,.am-form label{color:var(--cr-ink-2);
  font-weight:600;font-size:13px}
.am-element-title{margin-bottom:6px;display:block}
/* amember.css:2272/:2309 lay every .am-form out as a 35% right-aligned, floated
   label column beside a 65% field column above 500px, at (0,2,1). This theme
   never declares width/float/text-align, so that legacy two-column form wins on
   every desktop viewport unless it is explicitly unwound. */
.am-form div.am-element-title{width:auto!important;float:none!important;
  text-align:left!important;padding:0!important}
.am-form div.am-element{margin-left:0!important;padding:0}
.am-form input[type=text],.am-form input[type=email],.am-form input[type=password],
.am-form input[type=tel],.am-form select,.am-form textarea{width:100%;max-width:440px!important}
.am-form .am-row-buttons{margin-top:22px!important}
input:disabled,select:disabled,textarea:disabled{background:var(--cr-sunk)!important;
  color:var(--cr-muted)!important;cursor:not-allowed;border-color:var(--cr-line)!important}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],select,textarea{
  padding:10px 14px!important;border:1px solid var(--cr-line-input)!important;
  border-radius:var(--cr-radius-sm)!important;font-size:14.5px!important;
  font-family:var(--cr-font)!important;background:var(--cr-card)!important;
  color:var(--cr-ink)!important;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s}
/* Suppressing the UA outline is only acceptable if what replaces it is
   actually visible. A 7%-alpha halo composites to ~#F0F0F0 on white (~1.1:1);
   this ring is --cr-ink at 22% plus a full-strength inner edge, which reads at
   a glance and still looks like the rest of the panel. */
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=tel]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:none!important;border-color:var(--cr-ink)!important;
  box-shadow:0 0 0 1px var(--cr-ink),0 0 0 4px rgba(25,25,24,.22)!important}

input[type=submit],button[type=submit],.button,a.button{
  background:var(--cr-ink)!important;color:#fff!important;
  border:1px solid var(--cr-ink)!important;padding:12px 26px!important;
  border-radius:10px!important;font-weight:600!important;font-size:14.5px!important;
  font-family:var(--cr-font)!important;letter-spacing:-.01em;cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background .14s,transform .14s,box-shadow .14s}
input[type=submit]:hover,button[type=submit]:hover,.button:hover,a.button:hover{
  background:#000!important;transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.gb-btn-ghost{background:var(--cr-card)!important;color:var(--cr-ink)!important;
  border:1px solid var(--cr-line)!important}
.gb-btn-ghost:hover{border-color:var(--cr-ink)!important;background:var(--cr-card)!important}

/* ---------- Auth (login / forgot password / logged-out pages) ---------- */
/* align-items MUST stay stretch. With `center`, .am-layout is a flex item on
   the cross axis and shrink-wraps to its content width — the 420px auth card
   rendered at 281px, and the footer resolved to a third width again (444px),
   so nothing on /login lined up with anything else. Stretch the column and
   centre the CARD instead, with its own margin:0 auto. */
body.am-logged-out .gb-auth-wrap{min-height:100vh;display:flex;
  flex-direction:column;align-items:stretch;justify-content:flex-start;
  padding:8vh 20px 40px;box-sizing:border-box}
body.am-logged-out .gb-auth-wrap > .am-layout{width:100%}
/* The footer is the other flex child; keep it on the same axis as the card. */
/* border-box, or the 28px side padding is added ON TOP of width:100% and the
   footer overflows the viewport by 56px. */
body.am-logged-out .gb-auth-wrap > .am-footer{width:100%;text-align:center;
  box-sizing:border-box}
body.am-logged-out .am-footer-content{justify-content:center}
body.am-logged-out .am-header{display:block!important;background:transparent!important;
  border:0!important;text-align:center;padding:0 0 26px!important}
/* amember.css:772 paints this wrapper #355873 with a tiled gradient and grey
   side borders — a navy rectangle above the auth card on /login and /signup. */
body.am-logged-out .am-header .am-header-content-wrapper{background:none!important;
  border:0!important;padding:0!important;max-width:none!important}
/* amember.css:777 floats the logo left with a 1em margin, pushing it ~8px off
   centre even once the block above is cleared. */
body.am-logged-out .am-header-content-logo{height:48px;width:auto;max-height:none;
  display:block;margin:0 auto!important;float:none!important}
/* Brand lockup (layout.phtml): mark + site title on one line, tagline under.
   The logo keeps its auto margins above, which a flex row simply ignores. */
body.am-logged-out .am-header-logo-wrapper{display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:wrap;float:none!important}
body.am-logged-out .am-header-logo-wrapper .am-header-content-logo{margin:0!important}
.gb-auth-brand{font-family:var(--cr-font);font-size:25px;font-weight:800;
  letter-spacing:-.03em;line-height:1.1;color:var(--cr-ink)}
/* Both need the font set: amember.css gives the header and layout Tahoma. */
.gb-auth-tag{margin:10px 0 0!important;font-family:var(--cr-font);font-size:14px;
  color:var(--cr-muted);text-align:center}
/* Login-only trust row; same chip look as signup's .sc-trust. 520px fits all
   three chips on one line on desktop; phones wrap them. */
.gb-auth-trust{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  max-width:520px;margin:14px auto 28px;font-family:var(--cr-font);font-size:12.5px}
.gb-auth-trust span,.gb-auth-trust a{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:999px;padding:6px 13px;
  font-weight:600;color:var(--cr-ink-2);text-decoration:none}
.gb-auth-trust a:hover{border-color:var(--cr-ink);color:var(--cr-ink)}
.am-auth-form{background:var(--cr-card)!important;width:100%;
  border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-radius)!important;box-shadow:var(--cr-shadow)!important;
  padding:30px!important;max-width:420px!important;margin:0 auto 16px!important;
  box-sizing:border-box}
.am-auth-form .am-row{margin:0 0 16px!important}
.am-auth-form form,.am-auth-form fieldset{border:0!important;padding:0!important;
  margin:0!important;background:transparent!important;box-shadow:none!important}
/* A fieldset defaults to min-width:min-content, so the fixed 304px reCAPTCHA
   widened the whole form past the card on phones and the inputs followed it
   out. Release the floor, and slim the card padding so the widget still fits. */
.am-auth-form fieldset{min-width:0!important}
/* amember.css also insets the widget 13px a side. Drop that on phones and let
   the 304px iframe spill a few px into the card padding instead of being
   clipped by the overflow:hidden further down; under 360px, shrink it. */
@media (max-width:420px){
  .am-auth-form{padding:24px 16px!important}
  .am-auth-form .am-element-recaptcha{padding-left:0!important;padding-right:0!important}
  .am-auth-form .am-recaptcha-element{overflow:visible!important}
}
@media (max-width:359px){
  .am-auth-form .am-recaptcha-element > div{transform:scale(.8);transform-origin:0 0;
    height:62px!important}
}
.am-auth-form legend,.am-auth-form .am-form-title{background:transparent!important;
  border:0!important;color:var(--cr-ink);font-size:20px!important;font-weight:800;
  letter-spacing:-.02em;text-align:center;width:100%;padding:0 0 18px!important;
  margin:0}
.am-auth-form input[type=text],.am-auth-form input[type=password]{width:100%}
.am-auth-form input[type=submit]{width:100%}
.am-auth-form .am-row-buttons{display:flex;flex-direction:column;gap:12px;
  align-items:center}
.am-form-login-switch-wrapper a,.am-signup-link a{color:var(--cr-ink);font-weight:600}
.am-signup-link{text-align:center;margin-top:14px;font-size:13.5px;color:var(--cr-muted)}
#am-form-login-remember{display:inline-flex;gap:7px;align-items:center;
  font-weight:500;color:var(--cr-muted);margin-top:8px}

/* ---------- Tables (payment history, invoices) ---------- */
.am-grid-container,.am-grid-wrap{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  overflow-x:auto;box-shadow:var(--cr-shadow-sm)}
table.am-grid,table{border-collapse:collapse;width:100%;background:transparent}
/* The wrapper is an overflow-x scroller, but a table pinned to width:100% can
   never exceed it — the columns squeeze to unreadable instead of scrolling.
   Give tables inside a scroller a floor so the scroller actually engages. */
.am-grid-container table,.am-grid-wrap table{min-width:640px}
/* amember.css:1119 `.am-grid th{text-transform:lowercase;font-variant:small-caps}`
   is (0,1,1) and beats a bare `th`, so both need !important here. */
th{background:var(--cr-bg)!important;color:var(--cr-muted)!important;
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase!important;font-variant-caps:normal!important;
  letter-spacing:.06em;text-align:left;padding:11px 16px!important;
  border-bottom:1px solid var(--cr-line)!important}
td{padding:13px 16px!important;border-bottom:1px solid var(--cr-line-soft)!important;
  color:var(--cr-ink-2);font-size:13.5px}
tr:last-child td{border-bottom:0!important}
/* amember.css paints the CELLS — `.am-grid tr.am-grid-row > td{background:#f6f7f8}`
   and `.am-grid tr.am-grid-row.odd td{background-color:#d3dce3}` — and an opaque
   td background always covers the row's. Neutralise at the td, not the tr.
   background-COLOR, not the shorthand: some Am_Grid cells carry a background
   image (td.record-sort) the shorthand would erase.
   ORDER MATTERS: the hover rule ties at (0,3,2) with the .odd rule and wins
   only on source order, so it must stay second. */
.am-grid tr.am-grid-row > td,
.am-grid tr.am-grid-row.odd > td,
.am-grid tr.am-grid-row.even > td,
.am-grid tr.am-grid-row > td.sorted{background-color:transparent!important}
.am-grid tr.am-grid-row:hover > td{background-color:#FAFAF9!important}
.am-member-payment-history-amount{font-weight:700;color:var(--cr-ink);
  font-variant-numeric:tabular-nums}
/* A refund is money going the other way — never render it as a charge. */
.am-member-payment-history-row-refund td{color:var(--cr-muted)}
.am-member-payment-history-row-refund .am-member-payment-history-amount{
  color:var(--cr-err);font-weight:700}
.am-member-payment-history-invoice_id a{color:var(--cr-ink);font-weight:600}
.am-grid-total{font-weight:800;color:var(--cr-ink)}

/* ---------- Thanks / receipt ---------- */
.am-thanks-status-success{background:var(--cr-ok-bg);color:var(--cr-ok);
  border:1px solid var(--cr-ok-line);border-radius:var(--cr-radius-sm);
  padding:16px 18px;font-weight:700}
.am-thanks-awaiting-payment,.am-thanks-awaiting-refresh{
  background:var(--cr-warn-bg);color:var(--cr-warn);
  border:1px solid var(--cr-warn-line);border-radius:var(--cr-radius-sm);
  padding:16px 18px}
.am-thanks-payment-details{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:20px;margin-top:16px}
.am-thanks-login-offer{background:var(--cr-bg);border:1px solid var(--cr-line-soft);
  border-radius:var(--cr-radius);padding:22px;margin-top:16px;text-align:center}
.gb-thanks-actions{margin-top:14px}
.gb-dash-btn{background:var(--cr-ink);color:#fff!important;border-radius:10px;
  padding:12px 26px;font-weight:600;font-size:14.5px;text-decoration:none;
  display:inline-block;transition:background .14s,transform .14s}
.gb-dash-btn:hover{background:#000;transform:translateY(-1px)}

/* signup-cards.phtml hides the page <h1>: both audiences get their own title
   in its .sc-head (since 2026-10-06; before that members fell back on this
   page title, which sat outside the form's column). */
body.am-signup-cards .am-body-content-top > h1{display:none!important}

/* .bp-shine is added by signup-cards.phtml's JS to a UPI payment option.
   The old skin painted a cream gradient here and drew an "INSTANT ACCESS"
   badge as a ::after. The gradient is still gone, and ::after is still kept
   empty on purpose — with two UPI options on the row it was drawn on both.

   The activation claim itself came BACK on 2026-10-01 as .sc-pay-live (a real
   element, injected by the JS, not a pseudo-element), because the plugin now
   confirms payments automatically. See the history note at the top of
   signup-cards.phtml's payment-system IIFE before changing either.

   Keep this rule as a plain emphasis border; do not reintroduce ::after
   content without checking which paysystems the JS is matching. */
.am-signup-cards .bp-shine{background:var(--cr-card)!important;
  border:1.5px solid var(--cr-ink)!important;animation:none!important;
  position:relative;border-radius:var(--cr-radius-sm)}
.am-signup-cards .bp-shine::after{content:none!important;display:none!important}

/* Guest-signup chrome. GEOMETRY OWNED HERE for the same reason as the plan
   rows: signup-cards.phtml declares layout in its own <style>, and relying on
   it would make this stylesheet un-previewable in isolation. */
.am-signup-cards .am-signup{max-width:900px;margin:4px auto 0;padding:0;
  font-family:var(--cr-font)}
/* Signup header (signup-cards.phtml .sc-head): members get "Buy & Renew" and
   one "Signed in as" line, guests the black .gb-hero band + trust badges.
   Replaced the centred .sc-hero and the guest Home/Sign Up/Login pill
   (.sc-topnav) on 2026-10-06.
   content-box ON PURPOSE: .am-signup below is content-box (900px + its 20px
   padding), so this must do the same math or the two left edges drift apart
   once the column is wider than 900px. */
.sc-head{max-width:900px;margin:0 auto 26px;padding:0 20px;
  box-sizing:content-box;font-family:var(--cr-font)}
.sc-head h1{font-size:28px!important;font-weight:800;letter-spacing:-.03em;
  line-height:1.15;color:var(--cr-ink);margin:0 0 6px!important}
.sc-head-member{margin-bottom:22px}
.sc-head-who{margin:0;font-size:14px;color:var(--cr-muted)}
.sc-head-who strong{font-weight:600}
.sc-head .sc-head-who a{color:var(--cr-muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--cr-line)}
.sc-head .sc-head-who a:hover{color:var(--cr-ink);text-decoration-color:currentColor}
.sc-trust{display:flex;gap:8px;justify-content:flex-start;margin-top:14px;
  flex-wrap:wrap;font-size:12.5px;color:var(--cr-ink-2)}
.sc-trust span{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:999px;padding:6px 13px;font-weight:600;color:var(--cr-ink-2)}
/* Two classes to beat signup-cards.phtml's own centred .sc-trust. */
.sc-head .sc-trust{justify-content:flex-start}
/* Guest hero: the black brand band (signup-cards.phtml .gb-hero, NOT .sc-band:
   the signup JS already builds .sc-band plan groups; "bold black
   hero", picked 2026-10-06). Same ink + white as the homepage's dark CTA band.
   It carries the brand, so the layout's logo header is hidden on this page. */
body.am-logged-out.am-signup-cards .am-header{display:none!important}
.gb-hero{position:relative;overflow:hidden;background:#111110;color:#fff;
  border-radius:20px;padding:28px 34px 30px;box-shadow:0 24px 48px -28px rgba(0,0,0,.55)}
/* one soft light in the corner so the black reads as a surface, not a hole */
.gb-hero::before{content:"";position:absolute;top:-180px;right:-140px;width:460px;
  height:460px;background:radial-gradient(closest-side,rgba(255,255,255,.11),transparent);
  pointer-events:none}
.gb-hero > *{position:relative}
.gb-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:30px}
.gb-hero-brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;
  font-weight:700;letter-spacing:-.01em;color:#fff}
/* the mark is black strokes on transparent, so it sits on a white tile */
.gb-hero-brand img{width:34px;height:34px;padding:2px;box-sizing:border-box;
  background:#fff;border-radius:10px}
.gb-hero .gb-hero-wa{font-size:13px;font-weight:600;color:#D6D6D2;text-decoration:none;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;
  transition:border-color .14s,color .14s}
.gb-hero .gb-hero-wa:hover{color:#fff;border-color:#fff}
.gb-hero-wa{white-space:nowrap}
.gb-hero-wa-short{display:none}
.sc-head .gb-hero h1{color:#fff!important;font-size:clamp(32px,5vw,50px)!important;
  line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:0 0 14px!important}
.gb-hero h1 span{display:block;color:#8F8F8B}
.gb-hero > p{margin:0 0 28px;max-width:560px;font-size:16px;line-height:1.5;color:#C9C9C5}
.gb-hero-stats{display:flex;margin:0 0 26px;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14)}
.gb-hero-stats > div{flex:1;padding:16px 0 16px 20px;border-left:1px solid rgba(255,255,255,.14)}
.gb-hero-stats > div:first-child{padding-left:0;border-left:0}
/* signup-cards.phtml's inline `.am-signup-cards strong{color:ink!important}`
   loads later at equal weight, so this needs the extra .sc-head to stay white. */
.sc-head .gb-hero-stats strong{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:#fff!important}
.gb-hero-stats span{display:block;margin-top:3px;font-size:12.5px;color:#8F8F8B}
.gb-hero-login{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;color:#C9C9C5}
.gb-hero .gb-hero-btn{background:#fff;color:#111110;font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:999px;text-decoration:none;transition:background .14s}
.gb-hero .gb-hero-btn:hover{background:#E9E9E6;color:#111110}
.sc-head-guest .sc-trust{margin-top:16px}
/* Phones: stats become a 2 x 2 grid. */
@media (max-width:560px){
  .gb-hero{padding:22px 20px 24px;border-radius:16px}
  .gb-hero-top{margin-bottom:24px}
  .gb-hero-wa-full{display:none}
  .gb-hero-wa-short{display:inline}
  .gb-hero-stats{display:grid;grid-template-columns:1fr 1fr}
  .gb-hero-stats > div,.gb-hero-stats > div:first-child{padding:14px 0 14px 14px;
    border-left:1px solid rgba(255,255,255,.14)}
  .gb-hero-stats > div:nth-child(odd){padding-left:0;border-left:0}
  .gb-hero-stats > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .gb-hero-stats strong{font-size:24px}
}

/* Phones: left-aligned, full-size chips went one per line at 375px; this fits two. */
@media (max-width:560px){
  .sc-head .sc-trust{gap:6px}
  .sc-head .sc-trust span{padding:5px 10px;font-size:12px}
}

/* Guest signup is a marketing page: give it room and full-width fields. */
body.am-logged-out.am-signup-cards .gb-auth-wrap{padding:5vh 20px 40px;
  align-items:stretch}
/* NB: the base reset sets margin:0!important on .am-body-content, so the
   centering here must also be !important or the page hugs the left edge. */
body.am-logged-out.am-signup-cards .am-body-content{max-width:900px;
  margin:0 auto!important;width:100%}
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=text],
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=email],
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=password]{
  width:100%;max-width:460px!important}

/* ---------- Signup / Order-Renew (overrides for signup-cards.phtml) ----
   That file keeps its own <style>; two-class selectors below out-rank its
   single-class rules, so it needs no server edit for the new look. */
.am-signup-cards .sc-section-title{font-size:17px;font-weight:700;color:var(--cr-ink)}

/* Buy & Renew: catalogue tiles, then the order section, then billing.
   GEOMETRY IS OWNED HERE, not in signup-cards.phtml's own <style>, so the
   local preview cannot drift from live.

   PALETTE: black, white, green. Black is type and actions. Green is the
   chosen state and the two "you pay less" signals — a longer-term saving and
   a confirmed coupon. Nothing else is coloured.

   THREE SURFACES, IN PAGE ORDER:
     .sc-tile     catalogue card. Uniform height, no duration picker. Name,
                  price, a FIXED-HEIGHT 3-line teaser, Read more, Buy now.
     .sc-product  order row, one per product, DISPLAY:NONE until chosen. The
                  duration lives here, so a buyer sees a picker only for the
                  tools actually bought. Carries data-pid and the .sc-duration
                  pills, which is why the selection regression suite still
                  drives the real path.
     .sc-summary  billing. One line per tool with its saving, then the total.

   WHY THE PICKER IS NOT ON THE TILE: four durations made one card four times
   the height of its neighbours and left the rest of the row blank. The teaser
   now has a fixed height and every tile in a row ends level. Do not put
   variable-height content back on the tile. */

.am-signup-cards .sc-products{display:block;border-top:0!important;margin-bottom:26px}
.am-signup-cards .sc-band{margin:0 0 6px}
.am-signup-cards .sc-band-head{display:flex;align-items:baseline;gap:10px;
  margin:0 0 12px;flex-wrap:wrap}
.am-signup-cards .sc-band-title{font-size:15px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.01em}
.am-signup-cards .sc-band-sub{font-size:12.5px;color:var(--cr-muted);font-weight:500}

.am-signup-cards .sc-rule3{margin:26px 0 22px}
.am-signup-cards .sc-rule3 i{display:block;height:1px;border:0;margin:0 0 3px;
  background:var(--cr-line-soft)}
.am-signup-cards .sc-rule3 i:nth-child(1){background:var(--cr-ink);opacity:.45}
.am-signup-cards .sc-rule3 i:nth-child(2){background:var(--cr-line)}
.am-signup-cards .sc-rule3 i:nth-child(3){background:var(--cr-line-soft);margin-bottom:0}

/* NO grid-auto-rows:1fr here, and no height:100% on the tile — that pair is
   circular: 1fr sizes the row from the item while height:100% sizes the item
   from the row. The browser breaks the loop with a row SHORTER than the
   content (measured live: 215.23px rows holding 248px cards), every card
   overflowed by 33px and sat on top of the row below it — 30 overlapping
   pairs on one page. Plain `align-items:stretch` already levels every card in
   a row, and the fixed-height teaser makes them equal across rows too. */
.am-signup-cards .sc-products-bundles{display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;gap:14px!important;
  align-items:stretch}
.am-signup-cards .sc-products-tools{display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;gap:12px!important;
  align-items:stretch}

/* ---------- Catalogue tile ---------- */
.am-signup-cards .sc-tile{position:relative;
  display:flex;flex-direction:column;
  background:var(--cr-card);border:1.5px solid var(--cr-line-soft);
  border-radius:var(--cr-radius);padding:15px 16px;margin:0;cursor:pointer;
  box-shadow:var(--cr-shadow-sm);
  transition:border-color .15s,box-shadow .15s,background .15s}
.am-signup-cards .sc-tile-bundle{padding:18px 18px}
.am-signup-cards .sc-tile:hover{border-color:var(--cr-ink)}
.am-signup-cards .sc-tile.active{border-color:var(--cr-ok);
  background:var(--cr-ok-bg);box-shadow:0 0 0 2px rgba(8,116,67,.12)}

.am-signup-cards .sc-badge-best{position:absolute;top:-9px;left:16px;
  background:var(--cr-ink);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.am-signup-cards .sc-tile-check{position:absolute;top:14px;right:14px;
  width:21px;height:21px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:transparent;
  border:1.5px solid var(--cr-line-input);border-radius:6px;
  background:var(--cr-canvas,#fff);transition:all .15s}
.am-signup-cards .sc-tile.active .sc-tile-check{background:var(--cr-ok);
  border-color:var(--cr-ok);color:#fff}

.am-signup-cards .sc-tile-head{display:block;padding-right:30px}
.am-signup-cards .sc-tile-name{font-size:15.5px;font-weight:700;color:var(--cr-ink);
  line-height:1.25;letter-spacing:-.01em}
.am-signup-cards .sc-tile-bundle .sc-tile-name{font-size:17px}
.am-signup-cards .sc-tile-from{color:var(--cr-ink);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:4px}
.am-signup-cards .sc-tile-from b{font-weight:800;font-size:14.5px}
.am-signup-cards .sc-tile-from .sc-term{color:var(--cr-muted);font-weight:500}

/* FIXED height, not just a clamp: three lines whether the text is long,
   short or missing, so every tile in the grid is the same height. */
.am-signup-cards .sc-tile-desc{color:var(--cr-ink-2);font-size:12.5px;
  line-height:1.5;margin-top:9px;white-space:pre-line;overflow-wrap:anywhere;
  height:56px;overflow:hidden}
.am-signup-cards .sc-tile-desc.sc-clamped{display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.am-signup-cards .sc-tile-desc.sc-desc-empty{color:var(--cr-muted);font-style:italic}
/* margin-bottom here is load-bearing. .sc-buy below is pinned with
   margin-top:auto, and auto resolves to 0 as soon as the tile's content fills
   the column — so on a tall card the underlined "Read more" sat flush against
   the Buy button. Flex items do not collapse margins, so this sets a floor of
   12px between them no matter how tall the description runs. */
.am-signup-cards .sc-readmore{align-self:flex-start;margin-top:8px;margin-bottom:12px;
  background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;
  color:var(--cr-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.am-signup-cards .sc-readmore:hover{opacity:.65}
.am-signup-cards .sc-tile > .sc-tile-detail{display:none}
.am-signup-cards .sc-modal-body .sc-tile-detail{display:block}
.am-signup-cards .sc-detail-desc{font-size:13.5px;line-height:1.6;color:var(--cr-ink-2);
  white-space:pre-line;overflow-wrap:anywhere}
.am-signup-cards .sc-detail-desc b{color:var(--cr-ink);font-weight:700}

/* margin-top:auto pins the button to the foot of every tile. */
.am-signup-cards .sc-buy{margin-top:auto;padding-top:0;width:100%;
  border:1.5px solid var(--cr-ink);border-radius:var(--cr-radius-pill);
  background:var(--cr-ink);color:#fff;font-family:inherit;font-size:13px;
  font-weight:700;min-height:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .14s,border-color .14s,color .14s}
.am-signup-cards .sc-tile > .sc-buy{margin-top:auto;padding:10px 14px}
.am-signup-cards .sc-buy:hover{background:#000;border-color:#000}
.am-signup-cards .sc-buy.on{background:var(--cr-ok);border-color:var(--cr-ok);color:#fff}
.am-signup-cards .sc-buy.on:hover{background:var(--cr-canvas,#fff);color:var(--cr-ok)}

/* ---------- Order section ---------- */
.am-signup-cards .sc-order{border:1.5px solid var(--cr-line);
  border-radius:var(--cr-radius);background:var(--cr-canvas,#fff);
  padding:16px 18px;margin:0 0 18px}
.am-signup-cards .sc-order-head{margin-bottom:4px}
.am-signup-cards .sc-order-title{font-size:16px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.01em}
.am-signup-cards .sc-order-sub{font-size:12.5px;color:var(--cr-muted);margin-top:2px}
.am-signup-cards .sc-order-empty{font-size:13px;color:var(--cr-muted);
  padding:14px 0 4px;font-style:italic}
.am-signup-cards .sc-order.sc-has-items .sc-order-empty{display:none}
.am-signup-cards .sc-order-list{display:block}

/* A row exists for every product from the start but is only shown once that
   product is in the order — selection needs one stable home in the DOM. */
.am-signup-cards .sc-product{display:none!important;
  border:0!important;border-top:1px solid var(--cr-line-soft)!important;
  border-radius:0!important;background:none!important;
  margin:0!important;padding:13px 2px!important;box-shadow:none!important}
.am-signup-cards .sc-product.active{display:block!important}
.am-signup-cards .sc-order-list > .sc-product.active:first-child{border-top:0!important}
.am-signup-cards .sc-product.sc-flash{background:var(--cr-ok-bg)!important;
  box-shadow:inset 3px 0 0 var(--cr-ok)!important}
.am-signup-cards .sc-row-top{display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;margin-bottom:8px}
.am-signup-cards .sc-product-name{font-size:14px;font-weight:700;color:var(--cr-ink);
  margin:0;line-height:1.3}
.am-signup-cards .sc-row-remove{background:none;border:0;padding:0;font:inherit;
  font-size:12px;font-weight:600;color:var(--cr-muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.am-signup-cards .sc-row-remove:hover{color:var(--cr-ink)}

.am-signup-cards .sc-durations-inline{display:flex;gap:6px;flex-wrap:wrap;margin-top:0}
.am-signup-cards .sc-duration{flex:0 1 auto;min-width:104px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-canvas,#fff);padding:7px 8px;cursor:pointer;
  font-size:11.5px;line-height:1.25;font-weight:600;color:var(--cr-ink-2);
  font-family:inherit;transition:border-color .15s,background .15s,color .15s}
.am-signup-cards .sc-duration:hover{border-color:var(--cr-ok);color:var(--cr-ink)}
.am-signup-cards .sc-duration.active{border-color:var(--cr-ok);
  background:var(--cr-ok-bg);color:var(--cr-ok)}
.am-signup-cards .sc-dur-term{display:block;font-weight:600;white-space:nowrap}
.am-signup-cards .sc-dur-price{display:block;font-weight:800;color:var(--cr-ink);
  font-size:13px;font-variant-numeric:tabular-nums}
.am-signup-cards .sc-duration.active .sc-dur-price{color:var(--cr-ok)}
.am-signup-cards .sc-save{background:var(--cr-ok);color:#fff;border:0;
  border-radius:999px;font-size:9.5px;font-weight:800;padding:1px 6px;
  display:inline-block;white-space:nowrap;margin-top:2px;letter-spacing:.02em}

/* ---------- Billing ---------- */
.am-signup-cards .sc-summary{background:var(--cr-bg);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:16px 20px;margin:0 0 24px}
.am-signup-cards .sc-summary-title{font-size:16px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.01em;margin-bottom:10px}
.am-signup-cards .sc-bill{display:block;margin-bottom:12px}
.am-signup-cards .sc-bill-empty{font-size:13px;color:var(--cr-muted);font-style:italic}
.am-signup-cards .sc-bill-row{display:grid;grid-template-columns:1fr auto;
  gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--cr-line-soft)}
.am-signup-cards .sc-bill-row:last-child{border-bottom:0}
.am-signup-cards .sc-bill-name{font-size:13.5px;font-weight:700;color:var(--cr-ink);
  grid-column:1}
.am-signup-cards .sc-bill-term{font-size:12px;font-weight:500;color:var(--cr-muted);
  margin-left:7px}
.am-signup-cards .sc-bill-amt{grid-column:2;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.am-signup-cards .sc-bill-was{color:var(--cr-muted);text-decoration:line-through;
  font-size:12.5px;margin-right:7px}
.am-signup-cards .sc-bill-now{color:var(--cr-ink);font-weight:800;font-size:14px}
.am-signup-cards .sc-bill-save{grid-column:1/-1;font-size:11.5px;font-weight:700;
  color:var(--cr-ok)}

.am-signup-cards .sc-summary-head{display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding-top:12px;border-top:1.5px solid var(--cr-line)}
.am-signup-cards .sc-summary-head > span:first-child{font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cr-muted)}
.am-signup-cards .sc-total{font-weight:800;color:var(--cr-ink);font-size:26px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.am-signup-cards .sc-summary-items{margin-top:6px;font-size:12px;color:var(--cr-muted);
  background:none;border:0;padding:0;line-height:1.7}
.am-signup-cards .sc-summary-items:empty{display:none}
.am-signup-cards .sc-summary-item{background:none;border:0;padding:0;font-weight:600;
  color:var(--cr-muted)}
.am-signup-cards .sc-summary-item:not(:last-child)::after{content:" \00B7 ";color:var(--cr-muted)}
.am-signup-cards .sc-priceline{margin-top:2px;display:flex;align-items:baseline;
  gap:8px;font-size:13px;justify-content:flex-end}
.am-signup-cards .sc-priceline:empty{display:none}
.am-signup-cards .sc-was{color:var(--cr-muted);text-decoration:line-through}
.am-signup-cards .sc-off{color:var(--cr-ok);font-weight:800}
.am-signup-cards .sc-coupon-note{margin-top:8px;font-size:12.5px;font-weight:600;
  padding:7px 10px;border-radius:var(--cr-radius-sm)}
.am-signup-cards .sc-coupon-note:empty{display:none;padding:0}
.am-signup-cards .sc-coupon-note.ok{color:var(--cr-ok);background:var(--cr-ok-bg);
  border:1px solid var(--cr-ok-line)}
.am-signup-cards .sc-coupon-note.bad{color:#B3261E;background:#FFF5F5;
  border:1px solid #F3C9C5}

/* ---------- Detail dialog ---------- */
.am-signup-cards .sc-modal{position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(17,17,17,.55)}
.am-signup-cards .sc-modal[hidden]{display:none}
.am-signup-cards .sc-modal-box{background:var(--cr-canvas,#fff);
  border-radius:var(--cr-radius);max-width:560px;width:100%;max-height:85vh;
  display:flex;flex-direction:column;border-top:3px solid var(--cr-ink);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
.am-signup-cards .sc-modal-head{display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;padding:16px 18px 10px;
  border-bottom:1px solid var(--cr-line-soft)}
.am-signup-cards .sc-modal-title{font-size:17px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.01em}
.am-signup-cards .sc-modal-price{font-size:12.5px;color:var(--cr-muted);
  font-weight:600;margin-top:2px}
.am-signup-cards .sc-modal-close{background:none;border:0;font-size:24px;line-height:1;
  color:var(--cr-muted);cursor:pointer;padding:0 2px;font-family:inherit}
.am-signup-cards .sc-modal-close:hover{color:var(--cr-ink)}
.am-signup-cards .sc-modal-body{padding:14px 18px 16px;overflow-y:auto}
.am-signup-cards .sc-modal-foot{display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 18px;
  border-top:1px solid var(--cr-line-soft);background:var(--cr-bg)}
.am-signup-cards .sc-modal-state{font-size:12.5px;font-weight:600;color:var(--cr-muted)}
.am-signup-cards .sc-modal-state.on{color:var(--cr-ok)}
.am-signup-cards .sc-modal-buy{border:1.5px solid var(--cr-ink);
  border-radius:var(--cr-radius-pill);background:var(--cr-ink);color:#fff;
  font-family:inherit;font-size:13px;font-weight:700;padding:8px 22px;cursor:pointer}
.am-signup-cards .sc-modal-buy:hover{background:#000}
.am-signup-cards .sc-modal-buy.off{background:var(--cr-canvas,#fff);color:var(--cr-ink)}

@media (max-width:900px){
  .am-signup-cards .sc-products-bundles{grid-template-columns:repeat(2,1fr)!important}
  .am-signup-cards .sc-products-tools{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:600px){
  .am-signup-cards .sc-products-bundles{grid-template-columns:1fr!important}
  .am-signup-cards .sc-products-tools{grid-template-columns:1fr!important}
  .am-signup-cards .sc-tile-desc{height:auto;max-height:56px}
}

/* Payment systems.
   PRODUCTION TRUTH (read off the live /signup page 2026-08-28): aMember has
   TWO render modes and the panel is currently in the first one.
     1. SINGLE paysystem (today — UPI only): plain spans, no radio —
        <span class="am-paysystem-title">UPI Payment</span>
        <span class="am-paysystem-desc">Pay via any UPI app (GPay…)</span>
     2. MULTIPLE paysystems (the moment a second one is enabled): each option
        becomes <label><input type=radio name=paysys_id> …the same spans.
   Both are styled below, so enabling Stripe/PayPal/crypto later needs NO
   theme change — the row just becomes a 2-up grid of selectable cards. */
.am-signup-cards [id^="row-paysys_id"]{display:block!important;margin-bottom:26px!important}
.am-signup-cards [id^="row-paysys_id"] > .am-element-title{margin-bottom:10px}
.am-signup-cards [id^="row-paysys_id"] > .am-element-title label{font-size:17px;
  font-weight:700;color:var(--cr-ink)!important}

/* Mode 1 — single system: a plain bordered card, nothing to choose. */
.am-signup-cards [id^="row-paysys_id"] > .am-element{
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card);padding:15px 17px}
.am-signup-cards .am-paysystem-title{display:block;font-weight:700;
  color:var(--cr-ink);font-size:14.5px;margin-bottom:3px}
/* The desc is a full sentence ("Pay via any UPI app…"), never a chip. */
/* amember.css:2961 sets font-style:italic here and nothing below declares
   font-style, so it survives. Unscoped on purpose: PayController and
   CancelController emit the same span outside /signup. */
.am-paysystem-desc{font-style:normal}
.am-signup-cards .am-paysystem-desc{display:block;color:var(--cr-muted);
  font-size:13px;line-height:1.5;font-style:normal}
.am-signup-cards .am-paysystem-desc:empty{display:none}

/* Mode 2 — several systems: the .am-element becomes a grid of radio cards.
   :has() scopes this to the multi-option case only, so mode 1 is unaffected. */
.am-signup-cards [id^="row-paysys_id"] > .am-element:has(input[type=radio]){
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  border:0;background:none;padding:0}
.am-signup-cards [id^="row-paysys_id"] .am-element > label{display:flex;
  align-items:flex-start;gap:11px;flex-wrap:wrap;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card);padding:15px 17px;cursor:pointer;margin:0;
  font-weight:600!important;color:var(--cr-ink-2)!important;font-size:14px;
  transition:border-color .15s,background .15s}
.am-signup-cards [id^="row-paysys_id"] .am-element > label:hover{border-color:var(--cr-ink)}
.am-signup-cards [id^="row-paysys_id"] .am-element > label:has(input:checked){
  border-color:var(--cr-ink);border-width:2px;background:var(--cr-bg);
  box-shadow:0 0 0 1px var(--cr-ink)}
.am-signup-cards [id^="row-paysys_id"] input[type=radio]{accent-color:var(--cr-ink);
  width:17px;height:17px;margin:2px 0 0;flex:0 0 17px}
.am-signup-cards [id^="row-paysys_id"] .am-element > label .am-paysystem-title,
.am-signup-cards [id^="row-paysys_id"] .am-element > label .am-paysystem-desc{
  flex:1 1 calc(100% - 28px);margin-left:0}

/* Coupon + UPI. The billing block itself is styled up in the catalogue
   section, next to the order rows whose prices it totals. */
.am-signup-cards [id^="row-coupon"] input[type=text]:focus{border-color:var(--cr-ink);
  box-shadow:0 0 0 3px rgba(17,17,17,.10)}
/* UPI: say what it buys, under the badge the plugin page already draws. */
.am-signup-cards .sc-paynote{margin-top:8px;font-size:12.5px;color:var(--cr-ink-2);
  background:var(--cr-card);border:1px solid var(--cr-line-soft);
  border-left:3px solid var(--cr-ok);
  border-radius:var(--cr-radius-sm);padding:9px 12px;line-height:1.55}
.am-signup-cards .sc-paynote b{color:var(--cr-ink);font-weight:800}

/* ---------- Payment card: selected marker + live activation badge ----------
   The single-method row has NOTHING to choose: aMember emits a hidden input,
   not a radio (verified in the live markup). So the tick is a STATE indicator,
   not a control — it tells the buyer which method their order will use, the
   same reassurance the tick on a product tile gives. Do not wire a click
   handler to it; there is no second option to switch to.

   The card needs position:relative for the tick. .bp-shine already sets it,
   but the tick must not escape to the page if the JS text-match ever misses,
   so mode 1 declares it too. */
.am-signup-cards [id^="row-paysys_id"] > .am-element{position:relative}
.am-signup-cards .sc-pay-check{position:absolute;top:13px;right:14px;
  width:22px;height:22px;border-radius:50%;background:var(--cr-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;line-height:1;pointer-events:none}
/* Keep the title clear of the tick on narrow cards. */
.am-signup-cards [id^="row-paysys_id"] .am-paysystem-title{padding-right:30px}

/* Pulsing "live" badge. Two layers: the dot itself breathes, and a halo
   expands out of it and fades — that reads as a live signal rather than a
   static sticker. The global prefers-reduced-motion block already stops both
   (animation-iteration-count:1), and the halo is additionally hidden there. */
.am-signup-cards .sc-pay-live{display:inline-flex;align-items:center;gap:8px;
  margin-top:11px;padding:5px 12px 5px 10px;border-radius:var(--cr-radius-pill);
  background:var(--cr-ok-bg);border:1px solid var(--cr-ok-line);
  color:var(--cr-ok);font-size:12.5px;font-weight:700;line-height:1.25}
.am-signup-cards .sc-pay-dot{width:8px;height:8px;border-radius:50%;
  background:var(--cr-ok);flex:0 0 8px;position:relative;
  animation:sc-pay-pulse 1.7s ease-in-out infinite}
.am-signup-cards .sc-pay-dot::after{content:"";position:absolute;inset:0;
  border-radius:50%;background:var(--cr-ok);
  animation:sc-pay-halo 1.7s ease-out infinite}
@keyframes sc-pay-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes sc-pay-halo{0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(2.8);opacity:0}}

/* Section headings need air between the stacked steps. */
.am-signup-cards .sc-section-title{margin:28px 0 4px}
.am-signup-cards .sc-section-title:first-child{margin-top:0}
.am-signup-cards .sc-hint{margin:0 0 14px;color:var(--cr-muted);font-size:13.5px}

/* =====================================================================
   COVERAGE: pieces that exist on the live panel but not in the mocks.
   Ported from the outgoing skin (it learned these the hard way) plus the
   render modes read off the live /signup and /login pages.
   ===================================================================== */

/* Prose links only. NEVER add a blanket `.am-body-content a` rule — it has
   broken button labels twice: any link painting its own dark background
   (tool-page "Access Tool Now", .btn-action) inherits ink-on-ink and the
   label vanishes. Those come from admin-entered HTML, so they can't be
   enumerated — recolour running-text links and leave components alone. */
.am-body-content p a:not([class]),
.am-body-content li a:not([class]),
.am-info a,
.am-auth-form .am-row-buttons a,
.am-form-login-switch-wrapper a,
.am-signup-link a,
.am-thanks-login-offer a,
.am-thanks-payment-details a{color:var(--cr-ink);text-decoration-color:currentColor;text-decoration-thickness:1px;
  text-underline-offset:2px}
.am-body-content p a:not([class]):hover,.am-info a:hover,
.am-auth-form .am-row-buttons a:hover,
.am-form-login-switch-wrapper a:hover,
.am-signup-link a:hover{color:#000;text-decoration-color:var(--cr-ink)}

/* amember.css `.am-common a{color:#3f7fb0}` is (0,1,1) and outranks a bare
   `.btn-action{color:#fff}` (0,1,0), repainting those labels blue. Restore
   white at (0,1,2). Same for the admin-entered support/WhatsApp buttons. */
.am-body-content a.btn-action,
.am-body-content a.btn-action:visited,
.am-body-content a.btn-action:hover,
.am-body-content a.support-button,
.am-body-content a.whatsapp-button,
.am-body-content a.whatsapp-floating-button{color:#fff}
/* amember.css uses !important here, so matching it is unavoidable. */
.am-credits a{color:var(--cr-muted)!important}

/* Headings inside admin-entered tool pages. */
.am-body-content h3{font-size:16px;font-weight:700;color:var(--cr-ink)}
.am-body-content h4{font-size:14.5px;font-weight:700;color:var(--cr-ink-2)}

/* "If you already have an account…" notice above the signup form. */
.am-login-text{text-align:center}

/* Required-field asterisk. */
.required{color:var(--cr-err);font-weight:700}

/* Validation errors (aMember renders these inline per row). */
.am-error-label,.am-form-el-error-text{color:var(--cr-err)!important;
  font-weight:600;font-size:12.5px;margin-top:5px;display:block}
.am-row.error input,.am-row.error select,.am-row.error textarea,
input.error,select.error,textarea.error{border-color:var(--cr-err)!important}

/* --- FUTURE-PROOFING -------------------------------------------------
   None of the following is on the panel today. Each is styled now so that
   turning it on in aMember admin needs no theme change. */

/* reCAPTCHA / hCaptcha row (aMember emits .am-row-recaptcha + an element
   div that the widget iframe drops into; the checkbox widget is 302x76). */
.am-row-recaptcha,.am-row-login-recaptcha{margin-bottom:18px!important}
.am-recaptcha-element,.g-recaptcha,.h-captcha{max-width:100%;overflow:hidden}
.am-recaptcha-element iframe,.g-recaptcha iframe{max-width:100%}
.am-auth-form .am-recaptcha-element,.am-auth-form .g-recaptcha{
  display:flex;justify-content:center}

/* Coupon / discount-code row (present but empty-styled today). */
[id^="row-coupon"] input[type=text]{max-width:280px!important}
.am-coupon-applied,.am-coupon-ok{color:var(--cr-ok);font-weight:600;font-size:13px}

/* aMember's own CTA class on the signup submit. */
input.am-cta-signup{width:auto}

/* Native product markup — what aMember emits BEFORE signup-cards.phtml's JS
   transforms it into .sc-product cards, and what a JS-off or JS-error visitor
   actually sees. Styled so the page is never unusable. */
.am-signup-cards [id^="row-product_id"] .am-element > label{
  display:grid;grid-template-columns:1fr 22px;gap:4px 14px;align-items:start;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius);
  background:var(--cr-card);padding:16px 18px;margin:0 0 12px;cursor:pointer;
  transition:border-color .15s}
.am-signup-cards [id^="row-product_id"] .am-element > label:hover{border-color:var(--cr-ink)}
.am-signup-cards [id^="row-product_id"] .am-element > label:has(input:checked){
  border-color:var(--cr-ink);border-width:2px;box-shadow:0 0 0 1px var(--cr-ink)}
.am-signup-cards [id^="row-product_id"] input[type=checkbox]{
  grid-column:2;grid-row:1/span 3;accent-color:var(--cr-ink);
  width:19px;height:19px;margin:2px 0 0;align-self:center}
.am-product-title{grid-column:1;font-weight:700;color:var(--cr-ink);font-size:16px}
.am-product-terms{grid-column:1;font-weight:800;color:var(--cr-ink);font-size:14.5px;
  font-variant-numeric:tabular-nums}
/* Plan descriptions are long emoji tool-lists entered in admin; clamp them so
   one plan can't push the next off the fold, and keep the line breaks. */
.am-product-desc{grid-column:1;color:var(--cr-muted);font-size:12.5px;
  line-height:1.5;white-space:pre-line;max-height:7.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);
          mask-image:linear-gradient(#000 72%,transparent)}
.am-signup-cards [id^="row-product_id"] .am-element > label:has(input:checked)
  .am-product-desc{max-height:none;-webkit-mask-image:none;mask-image:none}

/* =====================================================================
   MODULE COVERAGE — every remaining user-facing area of the panel.
   Derived by scanning all 69 non-admin .phtml templates on the server for
   the classes they emit, then styling the ones that carry visual meaning.
   ===================================================================== */

/* ---------- Dashboard two-column shell (member/main.phtml) ----------
   Restoring the missing <div class="am-layout-two-coll"> wrapper (see the
   theme's member/main.phtml override) also switches ON aMember's own
   two-column chrome, which had been dormant while the wrapper was absent:
     amember.css:1464  .am-layout-two-coll{border:1px solid #d9d9d9;
                       background-color:#f5f5f5;box-shadow:0 1px 3px #e3e3e3}
     amember.css:1472  + a tiled vertical divider background image
     amember.css:1502  .am-coll-left,.am-coll-right{float:left;width:50%}
   Every dashboard widget on this install lives in the LEFT column, so that
   renders as half-width content beside an empty grey panel. Flatten it. */
.am-layout-two-coll{border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;display:block}
.am-layout-two-coll .am-coll-left,
.am-layout-two-coll .am-coll-right{float:none!important;width:auto!important;
  min-width:0}
.am-layout-two-coll .am-coll-left .am-coll-content,
.am-layout-two-coll .am-coll-right .am-coll-content{margin:0!important;min-width:0}
/* Spacers that only existed to clear the floats. */
.am-layout-two-coll .am-layout-two-coll-top,
.am-layout-two-coll .am-layout-two-coll-bottom{display:none!important}
/* If the admin ever does put widgets in the right column, give it a real 2-up
   instead of floats. :has() keeps the common single-column case untouched. */
@media (min-width:1000px){
  .am-layout-two-coll:has(.am-coll-right .am-widget:not(:has(.am-list-links))){display:grid!important;
    grid-template-columns:1.6fr 1fr;gap:0 28px;align-items:start}
  .am-layout-two-coll:has(.am-coll-right .am-widget:not(:has(.am-list-links))) .am-coll-right{grid-column:2}
}

/* ---------- Breadcrumbs ---------- */
.am-breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  padding:0;margin:0 0 14px;font-size:12.5px;color:var(--cr-muted)}
.am-breadcrumbs-item{list-style:none}
/* DO NOT add a ::after separator here — _breadcrumbs.phtml emits its own
   <li class="am-breadcrumbs-separator">&gt;</li>, so a generated one would
   render "Home / > Signup". Style theirs instead. */
.am-breadcrumbs-separator{list-style:none;color:var(--cr-line);
  font-size:11px;user-select:none}
.am-breadcrumbs a{color:var(--cr-muted);text-decoration:none}
.am-breadcrumbs a:hover{color:var(--cr-ink)}

/* ---------- Inline filter ("Type to Filter…" over subscriptions) ---------- */
.am-input-filter-wrapper{padding:14px 20px 4px}
.am-input-filter{width:100%;max-width:340px!important;padding:9px 14px!important;
  border:1px solid var(--cr-line-input)!important;border-radius:var(--cr-radius-sm)!important;
  font-size:13.5px!important;background:var(--cr-card)!important;box-sizing:border-box}
.am-input-filter-empty{color:var(--cr-muted);font-size:13px;padding:6px 0}

/* ---------- Cancel / upgrade popups ---------- */
.cancel-subscription-popup,.upgrade-subscription-popup{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  box-shadow:0 24px 60px -24px rgba(16,24,40,.35);padding:26px}
/* aMember puts .am-popup-close on two different nodes: the ✕ icon user.js
   builds (also carrying .am-popup-close-icon) and the plain text escape links
   in member/_cancel.phtml and _upgrade.phtml. Only the first is an icon. */
.am-popup .am-popup-close-icon{position:absolute;top:12px;right:14px;
  color:var(--cr-muted);font-size:20px;line-height:1;text-decoration:none;
  cursor:pointer}
.am-popup .am-popup-close-icon:hover{color:var(--cr-ink)}
.am-popup a.am-popup-close:not(.am-popup-close-icon){color:var(--cr-muted);
  font-weight:600;text-decoration:underline;cursor:pointer}
.am-popup a.am-popup-close:not(.am-popup-close-icon):hover{color:var(--cr-ink)}
.cancel-subscription,.upgrade-subscription,.am-active-invoice-cancel{
  color:var(--cr-muted);font-weight:600}
.cancel-subscription:hover,.upgrade-subscription:hover{color:var(--cr-ink)}

/* ---------- Receipt / invoice tables ---------- */
.am-receipt,.am-invoice-summary{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:22px;margin-top:16px;overflow-x:auto}
.am-receipt-table{width:100%;border-collapse:collapse}
.am-receipt-am-row-head th{background:var(--cr-bg)!important}
.am-receipt-product{font-weight:600;color:var(--cr-ink)}
.am-receipt-product-options{color:var(--cr-muted);font-size:12.5px}
.am-receipt-qty,.am-receipt-unit-price,.am-receipt-price,
.am-invoice-summary-price,.am-receipt-discounted-price{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.am-receipt-discounted-price{color:var(--cr-muted);text-decoration:line-through}
.am-receipt-total{font-weight:800;color:var(--cr-ink);font-size:15px;
  border-top:2px solid var(--cr-line)!important}
.am-receipt-indent{padding-left:26px!important;color:var(--cr-muted)}
/* The generic td/th rules above give receipt cells grid borders and padding
   they were never meant to have. NB: no background reset on .am-receipt th —
   .am-receipt-am-row-head th above has equal specificity and would lose. */
.am-receipt td{background:transparent!important;border:0!important;
  border-bottom:1px solid var(--cr-line-soft)!important}
.am-receipt th{border:0!important;border-bottom:1px solid var(--cr-line)!important}
.am-receipt td.am-receipt-total{background:transparent!important}

/* ---------- Thanks page: generated login details ---------- */
.am-thanks-password{font-family:var(--cr-mono);background:var(--cr-sunk);
  border:1px solid var(--cr-line);border-radius:6px;padding:3px 9px;
  font-size:13.5px;color:var(--cr-ink)}
.am-toggle-on-click{cursor:pointer;user-select:none}

/* ---------- Flash message overlay ---------- */
.am-flash-mask{position:fixed;inset:0;background:rgba(15,15,15,.28);z-index:60}
.am-flash-content{position:relative;z-index:61}

/* ---------- Login page wrappers (two stacked auth cards; aMember's JS
     shows one at a time — the hidden one must stay hidden). ---------- */
.am-login-form-wrapper,.am-sendpass-form-wrapper{width:100%}
.am-pass-reveal{padding-right:40px!important}
.am-row-wide{width:100%}

/* ---------- Help Desk module ---------- */
.am-helpdesk{color:var(--cr-ink-2)}
.am-helpdesk-ticket,.am-helpdesk-message{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:18px 20px;margin-bottom:14px}
.am-helpdesk-message-header,.am-helpdesk-ticket-header{display:flex;
  flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  border-bottom:1px solid var(--cr-line-soft);padding-bottom:10px;margin-bottom:12px}
.am-helpdesk-message-user,.am-helpdesk-ticket-subject{font-weight:700;color:var(--cr-ink)}
.am-helpdesk-message-date,.am-helpdesk-ticket-date{color:var(--cr-muted);
  font-size:12.5px;margin-left:auto}
.am-helpdesk-message-body{line-height:1.6;white-space:pre-wrap}
.am-helpdesk-ticket-status,.am-helpdesk-status{display:inline-flex;
  align-items:center;border-radius:999px;font-size:12px;font-weight:600;
  padding:4px 11px;background:var(--cr-sunk);color:var(--cr-ink-2);
  border:1px solid var(--cr-line)}
.am-helpdesk-status-awaiting_admin,.am-helpdesk-status-open{
  background:var(--cr-warn-bg);color:var(--cr-warn);border-color:var(--cr-warn-line)}
.am-helpdesk-status-closed{background:var(--cr-ok-bg);color:var(--cr-ok);
  border-color:var(--cr-ok-line)}
.am-helpdesk-reply-panel{margin-top:12px}
.am-helpdesk-action-active a{color:var(--cr-ink);font-weight:700}
.am-helpdesk textarea{width:100%;min-height:120px;line-height:1.55}

/* ---------- Newsletter / category / misc member lists ---------- */
.am-list-newsletters-item_title{font-weight:600;color:var(--cr-ink)}
.am-category-title{font-weight:700;color:var(--cr-ink);font-size:16px}

/* ---------- Error page ---------- */
.trace{font-family:var(--cr-mono);font-size:12px;color:var(--cr-muted);
  background:var(--cr-sunk);border-radius:var(--cr-radius-sm);padding:14px;
  overflow-x:auto;white-space:pre}

/* ---------- Active invoice card (member/_invoice.phtml) ---------- */
.am-active-invoice{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:20px;margin-bottom:14px}
.am-active-invoice-header{display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:baseline;border-bottom:1px solid var(--cr-line-soft);
  padding-bottom:11px;margin-bottom:12px}
.am-active-invoice-num{font-weight:700;color:var(--cr-ink)}
.am-active-invoice-date,.am-active-invoice-paysys,
.am-active-invoice-terms{color:var(--cr-muted);font-size:12.5px}
.am-active-invoice-date{margin-left:auto}
.am-active-invoice-product-list{list-style:none;padding:0;margin:0 0 12px}
.am-active-invoice-product{padding:7px 0;border-bottom:1px solid var(--cr-line-soft);
  display:flex;justify-content:space-between;gap:12px}
.am-active-invoice-product:last-child{border-bottom:0}
.am-active-invoice-item-title{font-weight:600;color:var(--cr-ink-2)}
.am-active-invoice-rebill-info{color:var(--cr-muted);font-size:13px}
.am-active-invoice-rebill-date{font-weight:600;color:var(--cr-ink-2)}
.am-active-invoice-failed{background:var(--cr-err-bg);color:var(--cr-err);
  border:1px solid var(--cr-err-line);border-radius:var(--cr-radius-sm);
  padding:11px 14px;font-weight:600;font-size:13px;margin:10px 0}
.am-active-invoice-footer{display:flex;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--cr-line-soft);padding-top:12px;margin-top:12px;
  font-size:12.5px}
.am-active-invoice-manual-rebill,.am-active-invoice-restore,
.am-active-invoice-update-cc,.am-active-invoice-upgrade{display:inline-flex}
.am-active-invoice-footer a,.manual-rebill,.restore-subscription,.update-cc{
  color:var(--cr-muted);font-weight:600}
.am-active-invoice-footer a:hover,.manual-rebill:hover,
.restore-subscription:hover,.update-cc:hover{color:var(--cr-ink)}

/* ---------- Upgrade / cancel dialogs ---------- */
.am-upgrade-options{margin:14px 0}
.am-upgrade-options-comment{color:var(--cr-muted);font-size:13px;margin-bottom:10px}
.am-upgrade-coupon{margin:12px 0}
.cancel-subscription-popup-text{color:var(--cr-ink-2);line-height:1.6;margin-bottom:18px}
.cancel-subscription-buttons,.am-upgrade-buttons{display:flex;gap:12px;
  flex-wrap:wrap;margin-top:8px}
/* The destructive choice must not look like the primary action. */
.am-cta-cancel,.upgrade-subscription-no{background:var(--cr-card)!important;
  color:var(--cr-ink)!important;border:1px solid var(--cr-line-input)!important}
.am-cta-cancel:hover,.upgrade-subscription-no:hover{
  border-color:var(--cr-ink)!important;background:var(--cr-card)!important;
  transform:none;box-shadow:none}
.am-cta-upgrade,.upgrade-subscription-yes,.make-payment-button{
  background:var(--cr-ink)!important;color:#fff!important}

/* Stored-card reuse page. Inert today (UPI is the only paysystem), styled
   now so enabling Stripe doesn't ship an unthemed screen. */
.am-reuse-card-confirmation{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:22px;max-width:520px}
.tb-btn{background:var(--cr-card);color:var(--cr-ink);border:1px solid var(--cr-line-input);
  border-radius:10px;padding:11px 22px;font-weight:600;font-size:14px;
  font-family:var(--cr-font);cursor:pointer;text-decoration:none;display:inline-block}
.tb-btn:hover{border-color:var(--cr-ink)}
.tb-btn-primary{background:var(--cr-ink);color:#fff;border-color:var(--cr-ink)}
.tb-btn-primary:hover{background:#000}

/* ---------- Invoice summary totals ---------- */
.am-invoice-summary-items{width:100%;border-collapse:collapse}
.am-invoice-summary-item-title{font-weight:600;color:var(--cr-ink-2)}
.am-invoice-summary-item-num,.am-invoice-summary-item-qty{color:var(--cr-muted);
  font-size:12.5px}
.am-invoice-summary-item-total,.am-invoice-summary-subtotal,
.am-invoice-summary-discount,.am-invoice-summary-shipping,
.am-invoice-summary-tax,.am-invoice-summary-total{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.am-invoice-summary-discount{color:var(--cr-ok)}
.am-invoice-summary-row-total{border-top:2px solid var(--cr-line)}
.am-invoice-summary-total{font-weight:800;color:var(--cr-ink);font-size:15.5px}
.am-invoice-summary-delimeter,.am-receipt-row-delimiter{border-top:1px solid var(--cr-line-soft)}
.am-invoice-summary-terms,.am-receipt-terms,.am-receipt-row-terms{
  color:var(--cr-muted);font-size:12.5px}
.am-receipt-row-total{border-top:2px solid var(--cr-line)}
.am-receipt-content{min-width:0}

/* ---------- Thanks: generated login details ---------- */
.am-thanks-login-details{background:var(--cr-bg);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:18px 20px;margin-top:14px}
.am-thanks-login-details-login,.am-thanks-login-details-pass{
  font-family:var(--cr-mono);font-weight:600;color:var(--cr-ink)}

/* ---------- Category page ---------- */
.am-category-search-wrapper{margin-bottom:18px}
.am-block-category-resource{margin-bottom:14px}

/* ---------- Unsubscribe / flash / language chooser ---------- */
.am-unsubscribe{max-width:620px}
.grid-no-highlight:hover{background:transparent!important}
.am-info-msg-flash{margin-bottom:18px}
.am-lang-choice{display:flex;gap:8px;align-items:center;font-size:12.5px;
  color:var(--cr-muted)}
.am-lang-choice_list{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.am-lang-val{list-style:none}
.am-lang-val a{color:var(--cr-muted);text-decoration:none;padding:3px 8px;
  border-radius:6px}
.am-lang-val a:hover{background:var(--cr-sunk);color:var(--cr-ink)}
.am-lang-val-code{text-transform:uppercase;font-weight:600}

/* ---------- Sendpass (forgot password) rows ---------- */
.am-row-sendpass-notice{color:var(--cr-muted);font-size:13px;
  line-height:1.55;margin-bottom:16px!important}
.am-row-sendpass-email input{width:100%}

/* ---------- Signup login-offer ---------- */
.am-login-text_login{font-weight:600;color:var(--cr-ink)}

/* A tool page renders aMember's page title (the slug, e.g. "chatgpt") and then
   the widget's own <h1> with the proper tool name — two h1s, one of them ugly.
   Suppress the page title only where the widget is actually mounted. */
.am-body-content:has(#gb-portal) .am-body-content-top > h1{display:none}

/* ---------- Footer ---------- */
/* amember.css:823/828 paint the inner wrapper #325069 and pin BOTH elements to
   height:30px, so stock aMember's navy band survives and our footer content
   overflows it. The old solid-color skin carried the same counter-rule; a new
   theme has to bring its own. */
.am-footer,
.am-footer .am-footer-content-wrapper{background:transparent!important;
  color:var(--cr-muted)!important;height:auto!important;max-width:none!important}
.am-footer .am-footer-content-wrapper{padding:0!important}
.am-footer{border:0!important;border-top:1px solid var(--cr-line-soft)!important;
  margin-top:auto!important;padding:18px 28px 26px!important;font-size:12.5px}
.am-footer a{color:var(--cr-muted)!important}
.am-footer a:hover{color:var(--cr-ink)!important}
.am-credits,.am-footer-text{color:var(--cr-muted)!important}
.am-footer-content{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#am-action-move-to-top{display:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  #member-resources .resource-card{width:calc(33.333% - 12px)!important}
}
@media (max-width:1020px){
  .gb-side{position:fixed;left:0;top:0;bottom:0;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:none}
  body.gb-nav-open .gb-side{transform:translateX(0);
    box-shadow:0 0 0 100vmax rgba(15,15,15,.28)}
  .gb-scrim{display:none}
  body.gb-nav-open .gb-scrim{display:block;position:fixed;inset:0;z-index:35}
  .gb-content{padding:26px 20px 48px}
}
@media (max-width:760px){
  #member-resources .resource-card{width:calc(50% - 9px)!important}
  .am-widget-list>li{padding:14px 16px}
  .am-list-subscriptions-date{margin-left:0;flex-basis:100%}
  
}
@media (max-width:480px){
  #member-resources .resource-card{width:100%!important}
  .gb-content{padding:20px 14px 40px}
}
/* Desktop "collapsed" = an icon-only rail, not a hidden sidebar. The state is
   remembered per browser (localStorage 'gb-side', restored at <body> start in
   layout.phtml), so tool pages open the way the member left the sidebar. */
@media (min-width:1021px){
  body.gb-side-collapsed{--gb-side-w:68px}
  /* visible, not auto: the hover labels have to reach past the rail's edge */
  body.gb-side-collapsed .gb-side{overflow:visible}
  body.gb-side-collapsed .gb-side-head{justify-content:center;padding:20px 0 14px}
  body.gb-side-collapsed .gb-side-title{display:none}
  body.gb-side-collapsed ul.gb-nav{padding:0 12px}
  /* the label is a bare text node, so font-size:0 hides it; the icon (::before)
     and the unread badge carry their own sizes */
  body.gb-side-collapsed ul.gb-nav li a{justify-content:center;gap:0;
    padding:10px 0;font-size:0}
  body.gb-side-collapsed .gb-nav .menu-item-alert{position:absolute;top:2px;right:2px;
    min-width:16px;height:16px;font-size:10px;padding:0 4px;margin:0}
  body.gb-side-collapsed .gb-side-foot{display:none}
  /* hover label — text comes from data-label, set by layout.phtml */
  body.gb-side-collapsed ul.gb-nav li a::after{content:attr(data-label);
    position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
    white-space:nowrap;background:var(--cr-ink);color:#fff;font-size:12.5px;
    font-weight:600;line-height:1;padding:7px 10px;border-radius:6px;
    box-shadow:var(--cr-shadow-up);opacity:0;pointer-events:none;
    transition:opacity .12s ease;z-index:50}
  body.gb-side-collapsed ul.gb-nav li a:hover::after,
  body.gb-side-collapsed ul.gb-nav li a:focus-visible::after{opacity:1}
}

/* =====================================================================
   ACCESS PASS — the tool-page widget (/page/chatgpt, /page/semrush, …)
   ---------------------------------------------------------------------
   This markup is produced by public/js/gb-portal.js from the GB_CONFIG
   block on each aMember tool page. Previously BOTH the CSS and the JS were
   pasted into every one of those ~25 pages; they now live here, so the
   design has one source of truth.

   THE STRUCTURE BELOW IS UNCHANGED from the version in the pages — same
   selectors, same layout, same boarding-pass concept. What changed is the
   palette: the widget was built for the old cream skin (canvas #efece4,
   cream accent #efe7d4) and read as a beige slab dropped into the white
   panel. The tokens now come from the theme, so the black ticket sits on
   the panel's own surface instead of its own background.
   ===================================================================== */
.gbA{
  /* Retuned to the panel. Old value in the comment for reference. */
  --bg-1:transparent;              /* was #efece4 — the panel supplies the canvas */
  --bg-2:transparent;              /* was #e2ddd0 */
  --card-1:#242423;                /* was #1b1b1a — the ticket stays black       */
  --card-2:#131312;                /* was #0a0a09                                */
  --edge:rgba(255,255,255,.12);
  --ink:#FFFFFF;                   /* was #f2efe7 cream                          */
  --dim:#A5A29B;                   /* was #9a968b                                */
  --hair:rgba(255,255,255,.10);
  --accent:#FFFFFF;                /* was #efe7d4 — primary button on the ticket */
  --accent-2:#D8D6D1;              /* was #dccfb6                                */
  --accent-soft:rgba(255,255,255,.13);
  --accent-ink:#191918;            /* was #16150f                                */
  --offink:var(--cr-muted);        /* was #6f6a5f — now the theme's muted ink    */
  --hair-cream:var(--cr-line);     /* was rgba(22,24,28,.12)                     */
  --mono:var(--cr-mono);
  --sys:var(--cr-font);

  box-sizing:border-box;
  font-family:var(--sys);
  color:var(--offink);
  background:transparent;          /* was a radial cream gradient */
  width:100%;
  margin:0;
  padding:0;                       /* was 40px 18px 48px — the panel pads already */
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
.gbA *{ box-sizing:border-box; }

.gbA .gbA-head{width:100%;max-width:760px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin:0 0 16px;padding:0 4px}
.gbA .gbA-brand{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--offink);display:flex;align-items:center;gap:8px}
.gbA .gbA-brand svg{display:block}
/* No opacity on small text: --cr-muted clears AA by a hair (5.10:1) and any
   opacity multiplies against the page background, pushing it under 4.5:1. */
.gbA .gbA-boarding{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--offink)}

/* ===== The ticket ===== */
.gbA .gbA-ticket{--notch:22px;position:relative;width:100%;max-width:760px;
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  border:1px solid var(--edge);border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 24px 48px -28px rgba(16,24,40,.45),
             0 6px 18px -12px rgba(16,24,40,.30);
  isolation:isolate}

.gbA .gbA-main{flex:1 1 auto;min-width:0;padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:18px}
.gbA .gbA-top{display:flex;align-items:center;gap:14px}
.gbA .gbA-logo{width:52px;height:52px;flex:0 0 auto;border-radius:13px;
  background:var(--accent-soft);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.gbA .gbA-logo img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
.gbA .gbA-titles{min-width:0}
.gbA .gbA-kick{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin:0 0 4px}
/* The tool name is an <h1> inside page content; the panel's own h1 rule would
   otherwise repaint it ink-on-black and it would vanish. */
.gbA .gbA-tool{font-size:22px;font-weight:650;letter-spacing:-.01em;
  color:var(--ink)!important;margin:0;line-height:1.15;word-break:break-word}

.gbA .gbA-route{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.gbA .gbA-route .dot{width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);flex:0 0 auto}
.gbA .gbA-route .dash{flex:1 1 auto;height:1px;
  background:repeating-linear-gradient(90deg,var(--hair) 0 6px,transparent 6px 12px)}
.gbA .gbA-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0}
.gbA .gbA-servers{display:flex;flex-direction:column;gap:10px}

/* Server buttons. These are <a> inside .am-body-content, where amember.css
   paints links blue — hence the !important colours, same as the old page CSS. */
.gbA a.gbA-btn{-webkit-appearance:none!important;appearance:none!important;
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
  border-radius:12px;font-family:var(--sys);font-size:15px;font-weight:600;
  letter-spacing:.01em;text-decoration:none!important;cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  border:1px solid transparent}
.gbA a.gbA-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.gbA a.gbA-btn .gbA-btn-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.gbA a.gbA-btn .gbA-btn-tx{flex:1 1 auto;min-width:0}
.gbA a.gbA-btn .gbA-btn-go{flex:0 0 auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;opacity:.75;display:flex;align-items:center;gap:6px}

.gbA a.gbA-primary{background:var(--accent)!important;color:var(--accent-ink)!important;
  border-color:var(--accent)!important;box-shadow:0 10px 22px -14px rgba(255,255,255,.45)}
.gbA a.gbA-primary:hover{background:var(--accent-2)!important;color:var(--accent-ink)!important;
  transform:translateY(-1px)}
.gbA a.gbA-primary:active{transform:translateY(0)}
.gbA a.gbA-ghost{background:transparent!important;color:var(--ink)!important;
  border-color:var(--edge)!important}
.gbA a.gbA-ghost:hover{background:var(--accent-soft)!important;color:var(--ink)!important;
  border-color:var(--accent-2)!important;transform:translateY(-1px)}
.gbA a.gbA-ghost:active{transform:translateY(0)}

/* ===== Perforation + stub ===== */
.gbA .gbA-perf{position:relative;flex:0 0 0px;width:0;align-self:stretch;
  border-left:2px dashed rgba(255,255,255,.18)}
/* The notches punch through to whatever is behind the ticket. That is the
   panel's card surface now, not the old cream canvas. */
.gbA .gbA-perf::before,.gbA .gbA-perf::after{content:"";position:absolute;left:50%;
  width:var(--notch);height:var(--notch);border-radius:50%;
  background:var(--cr-card);transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px var(--cr-line) inset}
.gbA .gbA-perf::before{top:0}
.gbA .gbA-perf::after{top:100%}

.gbA .gbA-stub{flex:0 0 168px;width:168px;padding:24px 18px;display:flex;
  flex-direction:column;align-items:center;justify-content:space-between;
  gap:16px;text-align:center}
.gbA .gbA-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding:6px 12px;border:1px solid var(--accent-2);border-radius:999px;
  background:var(--accent-soft)}
.gbA .gbA-status .pip{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.gbA .gbA-idlabel{font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin:0 0 5px}
.gbA .gbA-id{font-family:var(--mono);font-size:14px;letter-spacing:.16em;
  color:var(--ink);margin:0}
.gbA .gbA-barcode{width:100%;height:46px;display:flex;align-items:flex-end;
  gap:2px;justify-content:center}
.gbA .gbA-barcode i{display:block;width:2px;height:100%;background:var(--accent);opacity:.9}
.gbA .gbA-barcap{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin:0}

/* ===== Below the ticket ===== */
.gbA .gbA-below{width:100%;max-width:760px;margin:18px 0 0;
  display:flex;flex-direction:column;gap:14px}
.gbA details.gbA-steps{width:100%;border:1px solid var(--hair-cream);
  border-radius:12px;background:var(--cr-bg)}
.gbA details.gbA-steps summary{list-style:none;cursor:pointer;padding:13px 16px;
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--offink);user-select:none}
.gbA details.gbA-steps summary::-webkit-details-marker{display:none}
.gbA details.gbA-steps summary .chev{margin-left:auto;transition:transform .2s ease;display:flex}
.gbA details.gbA-steps[open] summary .chev{transform:rotate(180deg)}
.gbA .gbA-steplist{margin:0;padding:2px 16px 14px;list-style:none;counter-reset:step}
/* amember.css `.am-common ol li{list-style-type:decimal}` hits the LI itself,
   so `list-style:none` on the <ol> does not suppress it — without this the step
   list renders aMember's number AND our counter circle. Same for the <ul>. */
.gbA .gbA-steplist li,.gbA .gbA-important li{list-style:none!important;
  list-style-type:none!important;margin-bottom:0!important}
.gbA .gbA-steplist li{position:relative;padding:8px 0 8px 34px;font-size:13.5px;
  color:var(--offink);border-top:1px solid var(--hair-cream);counter-increment:step}
.gbA .gbA-steplist li:first-child{border-top:0}
.gbA .gbA-steplist li::before{content:counter(step);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;background:var(--cr-ink);color:#fff;
  border:1px solid var(--cr-ink);font-family:var(--mono);font-size:11px;
  display:flex;align-items:center;justify-content:center}

.gbA .gbA-important{width:100%;border:1px solid var(--hair-cream);border-radius:12px;
  background:var(--cr-bg);padding:14px 16px}
.gbA .gbA-important h3{margin:0 0 10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--offink);
  display:flex;align-items:center;gap:8px}
.gbA .gbA-important ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.gbA .gbA-important li{position:relative;padding-left:22px;font-size:13.5px;color:var(--offink)}
.gbA .gbA-important li svg{position:absolute;left:0;top:3px}
/* icoDot strokes with var(--accent-2), which is near-white — invisible on the
   light card below the ticket. Repaint it to the ink used for the surface. */
.gbA .gbA-important li svg circle,.gbA .gbA-important li svg path{stroke:var(--cr-ink)}

.gbA a.gbA-wa{-webkit-appearance:none!important;appearance:none!important;
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 16px;border-radius:12px;background:var(--card-1)!important;
  color:var(--ink)!important;border:1px solid var(--edge)!important;
  text-decoration:none!important;font-family:var(--sys);font-size:14px;
  font-weight:600;cursor:pointer;
  transition:transform .12s ease,border-color .2s ease,background .2s ease}
.gbA a.gbA-wa:hover{border-color:var(--accent-2)!important;background:var(--card-2)!important;
  color:var(--ink)!important;transform:translateY(-1px)}
.gbA a.gbA-wa:active{transform:translateY(0)}
.gbA a.gbA-wa .gbA-wa-num{font-family:var(--mono);letter-spacing:.06em;color:var(--accent)}
/* --accent-2 is near-white: correct on the black ticket, invisible here.
   This button is below the ticket on the light panel, so focus with ink. */
.gbA a.gbA-wa:focus-visible{outline:2px solid var(--cr-ink);outline-offset:2px}
.gbA details.gbA-steps summary:focus-visible{outline:2px solid var(--cr-ink);
  outline-offset:-2px}

.gbA .gbA-foot{width:100%;max-width:760px;margin:20px 0 0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--offink)}

/* ===== Mobile: stack main over stub ===== */
@media (max-width:620px){
  .gbA .gbA-ticket{flex-direction:column}
  .gbA .gbA-main{padding:22px 20px 20px}
  .gbA .gbA-perf{width:auto;height:0;align-self:stretch;border-left:0;
    border-top:2px dashed rgba(255,255,255,.18)}
  .gbA .gbA-perf::before,.gbA .gbA-perf::after{top:50%;left:auto}
  .gbA .gbA-perf::before{left:0;transform:translate(-50%,-50%)}
  .gbA .gbA-perf::after{left:100%;top:50%;transform:translate(-50%,-50%)}
  .gbA .gbA-stub{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-start;padding:18px 20px;
    gap:10px 14px;text-align:left}
  .gbA .gbA-stub .gbA-status{order:1}
  .gbA .gbA-stub .gbA-idwrap{order:2;margin-left:auto;text-align:right}
  .gbA .gbA-stub .gbA-idlabel,.gbA .gbA-stub .gbA-id{white-space:nowrap}
  .gbA .gbA-stub .gbA-barcode{order:3;width:100%;flex:0 0 100%;max-width:none;
    height:40px;justify-content:flex-start;margin-top:2px}
  .gbA .gbA-stub .gbA-barcap{order:4;width:100%;text-align:left}
  .gbA .gbA-tool{font-size:20px}
}


/* =====================================================================
   REDUCED MOTION — the panel animates the sidebar drawer, card lifts,
   button nudges and the ticket's hover transforms. Honour the OS setting.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  /* Movement, not just speed: drop the translate entirely. */
  #member-resources .resource-card:hover,
  input[type=submit]:hover,button[type=submit]:hover,.button:hover,a.button:hover,
  .gb-dash-btn:hover,.gbA a.gbA-btn:hover,.gbA a.gbA-wa:hover{transform:none!important}
  /* The expanding halo is movement, not just speed — remove it outright. */
  .am-signup-cards .sc-pay-dot::after{display:none!important}
}


/* =====================================================================
   PAGE-CONTENT CONTAINMENT
   ---------------------------------------------------------------------
   Tool pages are admin-entered HTML and most of them ship their own
   <style> block. Those blocks land inside .am-body-content-content, but
   their SELECTORS are global — a `body{max-width:970px;margin:0 auto}` or
   a bare `div{...}` written for a standalone mockup will re-lay-out the
   whole panel, which is how /content/p/id/44/ ended up with the entire
   shell centred at ~970px and a 520px void down the left.

   The shell's geometry is therefore re-asserted here, at the end of the
   sheet, at (0,1,2)+!important. A page's `body{...}` is (0,0,1) — even
   with !important it cannot win, and page CSS keeps full freedom inside
   the content area where it belongs.
   ===================================================================== */
/* `html` has to be pinned too: a universal selector in page CSS (`*{max-width:
   1000px}`, and the very common `*{max-width:100%}`) matches the root element,
   and constraining the root shrinks everything inside it no matter what the
   shell says. (0,0,1)+!important beats `*` at (0,0,0). */
html{max-width:none!important;width:auto!important;margin:0!important;
  padding:0!important;transform:none!important;zoom:normal!important}
html body.am-logged-in,html body.am-logged-out{max-width:none!important;
  width:auto!important;margin:0!important;padding:0!important;
  display:block!important;float:none!important;position:static!important;
  transform:none!important;zoom:normal!important;inset:auto!important}
html body > .gb-shell{max-width:none!important;width:auto!important;
  margin:0!important;padding:0!important;float:none!important}
html body > .gb-shell > .gb-side{max-width:none!important;float:none!important;
  margin:0!important}
html body > .gb-shell > .gb-maincol{max-width:none!important;float:none!important;
  margin:0!important;padding:0!important}
html body > .gb-shell > .gb-maincol > .gb-content{max-width:none!important;
  float:none!important;margin:0!important}

/* =====================================================================
   "Useful Links" widget — removed from the dashboard.
   Every entry in it (Logout, Change Password/Edit Profile, Payments
   History) is already a permanent item in the sidebar, so on this theme
   it is pure duplication sitting in a half-width column.

   Matched by its own list class rather than a block id, because the id in
   `id="widget-%3$s"` is assigned by aMember and is not stable to guess.
   The right column is dropped with it, otherwise the grid below would
   hold an empty half open. Both conditions ignore this one widget, so if
   a real widget is ever added to the right column the 2-up returns by
   itself.
   ===================================================================== */
.am-widget:has(.am-list-links){display:none!important}
.am-coll-right:not(:has(.am-widget:not(:has(.am-list-links)))){display:none!important}

/* ---------- Sidebar arrow toggle (2026-10-05) ----------
   The top-bar button used to be a hamburger. It now carries two arrows and
   shows the one that matches what a click will do: « collapses, » expands.
   Desktop (>1020px) switches full sidebar <-> icon rail (body.gb-side-collapsed)
   and pins the button onto the sidebar's border line; phones open/close the
   drawer (body.gb-nav-open), whose default is closed — so phones start on ». */
.gb-menu-btn .gb-ic-show{display:none}
.gb-menu-btn:focus-visible,.gb-side-close:focus-visible{outline:2px solid var(--cr-ink);outline-offset:2px}

/* In-drawer close arrow: the open drawer covers the top-bar toggle on phones. */
.gb-side-close{display:none}

@media (min-width:1021px){
  body.gb-side-collapsed .gb-menu-btn .gb-ic-hide{display:none}
  body.gb-side-collapsed .gb-menu-btn .gb-ic-show{display:block}
  /* On the line: the top bar's left edge IS the sidebar's border, and the bar is
     position:sticky (a containing block), so left:0 + translate(-50%) centres the
     button on that line — and it follows the line when the rail narrows it.
     The bar is lifted over the sidebar (z 40) so the half over the sidebar shows;
     the bar never otherwise overlaps the sidebar on desktop. */
  .gb-topbar{z-index:41}
  .gb-menu-btn{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
    width:28px;height:28px;border-radius:50%;background:var(--cr-card);
    box-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 10px -4px rgba(16,24,40,.18)}
  .gb-menu-btn svg{width:14px;height:14px}
  .gb-menu-btn:hover{background:var(--cr-sunk);color:var(--cr-ink)}
}

@media (max-width:1020px){
  body .gb-menu-btn .gb-ic-hide{display:none}
  body .gb-menu-btn .gb-ic-show{display:block}
  body.gb-nav-open .gb-menu-btn .gb-ic-hide{display:block}
  body.gb-nav-open .gb-menu-btn .gb-ic-show{display:none}

  .gb-side-close{display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;flex:0 0 34px;width:34px;height:34px;padding:0;cursor:pointer;
    border:1px solid var(--cr-line);border-radius:var(--cr-radius-sm);
    background:var(--cr-card);color:var(--cr-ink-2)}
  .gb-side-close:hover{background:var(--cr-sunk)}
}

/* ---------- Floating WhatsApp button (2026-10-05) ----------
   Every member page (layout.phtml, member shell only). WhatsApp green on
   purpose: it is the one colour members recognise as "chat with support". */
.gb-wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:54px;height:54px;
  border-radius:50%;background:#25D366;color:#fff!important;display:flex;
  align-items:center;justify-content:center;text-decoration:none!important;
  box-shadow:0 10px 24px -8px rgba(16,24,40,.35),0 2px 6px rgba(16,24,40,.12);
  transition:transform .15s ease,background .2s ease}
.gb-wa-float:hover{background:#1EBE5A;transform:translateY(-2px)}
.gb-wa-float:focus-visible{outline:2px solid var(--cr-ink);outline-offset:3px}
.gb-wa-float svg{display:block;fill:#fff}
/* keep the footer's right-hand text clear of the button */
.gb-maincol .am-footer{padding-right:96px!important}
/* the open phone drawer + scrim sit at z 35-40; don't float over them */
body.gb-nav-open .gb-wa-float{display:none}
@media (max-width:480px){
  .gb-wa-float{right:14px;bottom:14px;width:50px;height:50px}
  .gb-maincol .am-footer{padding-right:76px!important}
}
@media (prefers-reduced-motion:reduce){ .gb-wa-float{transition:none} }