/*
 * cjpt-site: member area (inc/member/, templates/member/): /login/ and the /account/ shell.
 * Look: the approved member-area v2 mockup (build/mockups/member-area/v2/build_v2.py): page #F5F5F5, white 12px cards,
 * Josefin Sans headings and labels, Open Sans body, brand-teal (#56C6D6) square buttons with dark text (lime on hover),
 * dark #262626 links and focus rings. No other teal or blue is used here.
 * Standalone: these pages are their own documents, so nothing here can collide with the theme or Elementor.
 */

.cjm {
	--ink: #262626;
	--muted: #656563;
	--line: #e3e8e8;
	--line2: #c9d1d1;
	--bg: #f5f5f5;
	--mist: #ecf7f7;
	--brand: #56c6d6;
	--lime: #c3e800;
	--lime2: #d9f113;
	--err: #b42318;
	--err-bg: #fdf1f0;
	--hf: "Josefin Sans", Helvetica, Arial, sans-serif;
	--bf: "Open Sans", Helvetica, Arial, sans-serif;
	--sh: 0 1px 2px rgba(38, 38, 38, .05), 0 6px 22px rgba(38, 38, 38, .06);
	--mw: 360px;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 15px/1.55 var(--bf);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-align: left;
}
.cjm-auth { background: #fff; }
.cjm *, .cjm *::before, .cjm *::after { box-sizing: border-box; }
:where(.cjm) :where(p, ul) { margin: 0; padding: 0; }
:where(.cjm) ul { list-style: none; }
:where(.cjm) :where(h1, h2, h3) { margin: 0; font-family: var(--hf); font-weight: 700; line-height: 1.18; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
:where(.cjm) a { color: inherit; }
:where(.cjm) img { display: block; max-width: 100%; }
.cjm [hidden] { display: none !important; }
.cjm-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cjm-i--fill { fill: currentColor; stroke: none; }
.cjm-muted { color: var(--muted); }
.cjm-nw { white-space: nowrap; }
.cjm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cjm-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; font: 700 14px/1 var(--hf); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cjm-skip:focus { top: 12px; }
.cjm-kick { display: block; font: 700 12.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cjm-kick.is-lime { color: var(--lime2); }

/* One focus ring everywhere */
.cjm a:focus-visible, .cjm button:focus-visible, .cjm input:focus-visible, .cjm summary:focus-visible,
.cjm [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cjm-mn:focus, .cjm-lg-form:focus { outline: none; }

/* Buttons: square, Josefin capitals; brand teal with dark text, lime on hover */
.cjm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 3px 26px 0;
	border: 1.5px solid transparent; border-radius: 0; font: 700 14px/1 var(--hf); letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; cursor: pointer; flex: none; appearance: none;
}
.cjm-btn .cjm-i { width: 16px; height: 16px; stroke-width: 2.4; margin-top: -3px; }
.cjm-btn.p { background: var(--brand); color: var(--ink); }
.cjm-btn.p:hover { background: var(--lime); }
.cjm-btn.s { background: #fff; color: var(--ink); border-color: var(--ink); }
.cjm-btn.s:hover { background: var(--bg); }
.cjm-btn.sm { height: 40px; padding: 3px 18px 0; font-size: 12.5px; }
.cjm-btn.full { display: flex; width: 100%; }
.cjm-btn[disabled] { opacity: .6; cursor: default; }
.cjm-lnk { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cjm-lnk:hover { text-decoration-thickness: 2px; }

.cjm-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 3px 9px 0; border-radius: 4px; font: 700 11.5px/1 var(--hf); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cjm-chip .cjm-i { width: 13px; height: 13px; stroke-width: 2.8; margin-top: -2px; }
.cjm-chip.is-done { background: var(--lime2); color: var(--ink); }
.cjm-chip.is-dark { background: rgba(38, 38, 38, .88); color: #fff; }

.cjm-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh); overflow: hidden; }
.cjm-media { position: relative; display: block; background-color: var(--bg); background-repeat: no-repeat; background-position: center; background-size: cover; }
.cjm-media > .cjm-chip { position: absolute; left: 14px; top: 14px; }

/* ------------------------------------------------------------------ header */
/* The standard desktop bar (assets/css/desktop-bar.css): height, box and logo size come from its tokens; the login bar shares height and logo size. */
.cjm-ah { height: var(--cjpt-db-h, 64px); box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--cjpt-db-line, var(--line)); position: relative; z-index: 5; }
.cjm-in { box-sizing: border-box; max-width: var(--cjpt-db-max, 1248px); height: 100%; margin: 0 auto; padding: 0 var(--cjpt-db-gutter, 24px); display: flex; align-items: center; }
.cjm-logo { display: block; flex: none; width: var(--cjpt-db-logo-w, 180px); }
.cjm-logo img { width: var(--cjpt-db-logo-w, 180px); height: auto; }
@media (min-width: 900px) { .cjm-logo { line-height: 0; } .cjm-logo img { display: block; } } /* no baseline gap: the logo centres like the course pages' */
.cjm-mbtn, .cjm-pr, .cjm-pubmenu { display: none; } /* phone bar parts: shown at 899px and below */
.cjm-pubmenu[hidden] { display: none !important; }

/* The name menu (.cjm-um) lives in user-menu.css: shared with the LearnDash header. */

/* ------------------------------------------------------------------ shell */
.cjm-shell { max-width: 1248px; margin: 0 auto; padding: 0 24px; display: flex; gap: 48px; align-items: flex-start; }
.cjm-sb { width: 224px; flex: none; padding: 40px 0; }
.cjm-sb ul, .cjm-dr-n ul { display: flex; flex-direction: column; gap: 4px; }
.cjm-si { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #3e3e3c; text-decoration: none; }
.cjm-si:hover { background: rgba(255, 255, 255, .7); }
.cjm-si .cjm-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cjm-si .cjm-ic .cjm-i { width: 18px; height: 18px; }
.cjm-si.is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: var(--sh); }
.cjm-si.is-on .cjm-ic { background: var(--brand); color: var(--ink); }
.cjm-mn { flex: 1; min-width: 0; padding: 44px 0 80px; }
.cjm-phd { margin-bottom: 28px; }
.cjm-phd h1 { font-size: 38px; line-height: 1.1; }
.cjm-lead { margin: -14px 0 28px; font-size: 16px; color: var(--muted); }
.cjm-sh { margin: 48px 0 16px; }
.cjm-sh h2 { font-size: 22px; }
.cjm-lead + .cjm-sh { margin-top: 0; }
.cjm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.cjm-empty { padding: 28px 32px; }
.cjm-empty p + p { margin-top: 6px; }

/* course card: full-height media on the left, same frame in progress and finished */
.cjm-cc { margin-bottom: 24px; }
.cjm-cc-row { display: grid; grid-template-columns: var(--mw) minmax(0, 1fr); align-items: stretch; }
.cjm-cc-media { min-height: 100%; }
.cjm-cc-media.is-video { background-color: var(--mist); }
.cjm-cc-media.is-cert { background-color: var(--mist); }
.cjm-cc-media.is-promo-img { background-color: var(--mist); background-size: 86% auto; }
.cjm-kick-row { display: flex; align-items: center; gap: 12px; }
.cjm-kick-row .cjm-chip { height: 24px; }
.cjm-cc-b { min-width: 0; padding: 32px; }
.cjm-cc-b h2 { margin: 8px 0 16px; font-size: 28px; }
.cjm-cc-b .cjpt-pg { max-width: 460px; }
.cjm-hc .cjpt-pg { margin: -4px 0 18px; }
.cjm-next { margin: 20px 0 22px; }
.cjm-next b { display: block; font-size: 17px; line-height: 1.4; text-wrap: balance; }
.cjm-next span { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.cjm-acts { display: flex; align-items: center; gap: 24px; }
.cjm-acts.is-spread { justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); }
.cjm-ce { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.cjm-ce .cjm-i { color: var(--ink); width: 17px; height: 17px; }
.cjm-ce b { color: var(--ink); font-weight: 600; }
.cjm-certline { display: flex; align-items: flex-start; gap: 12px; padding: 16px 32px; background: var(--mist); border-top: 1px solid #d6ebee; font-size: 14.5px; }
.cjm-certline .cjm-i { margin-top: 2px; width: 19px; height: 19px; flex: none; }
.cjm-certline b { font-weight: 700; }
.cjm-certline .cjm-dot { margin: 0 2px; }
.cjm-pdesc { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: #3e3e3c; }
.cjm-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 24px; font-size: 14px; font-weight: 600; }
.cjm-facts li { display: inline-flex; align-items: center; gap: 8px; }
.cjm-facts .cjm-i { width: 16px; height: 16px; color: var(--muted); }
.cjm-price { font: 700 21px/1 var(--hf); color: var(--ink); white-space: nowrap; padding-top: 3px; }
.cjm-price.is-big { font-size: 30px; }
.cjm-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
.cjm-price ins { text-decoration: none; }

/* product cards (More courses) */
.cjm-pc { display: flex; flex-direction: column; margin: 0; }
.cjm-pc-media { aspect-ratio: 4 / 3; background-color: var(--mist); background-size: contain; background-origin: content-box; padding: 20px; border-bottom: 1px solid var(--line); }
.cjm-pc-b { flex: 1; display: flex; flex-direction: column; padding: 20px 24px 24px; }
.cjm-pc-b h3 { font-size: 19px; line-height: 1.25; }
.cjm-desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cjm-pc-f { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ------------------------------------------------------------------ login */
/* The login fills whatever the bar leaves of the window (the bar's height has changed before: no fixed number here). */
body.cjm-auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.cjm-login { display: grid; grid-template-columns: 1fr 1fr; flex: 1 0 auto; }
.cjm-lg-photo { position: relative; background-position: right center; background-size: cover; background-repeat: no-repeat; background-color: #dfe7e9; }
.cjm-lg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 22, 0) 45%, rgba(20, 22, 22, .8) 100%); }
.cjm-lg-cap { position: absolute; right: 40px; bottom: 52px; width: 262px; z-index: 1; color: #fff; }
.cjm-lg-cap p { margin-top: 12px; font: 700 30px/1.18 var(--hf); }
.cjm-lg-form { display: flex; align-items: center; justify-content: center; padding: 56px 24px; background: #fff; }
.cjm-lg-in { width: 100%; max-width: 440px; }
.cjm-lg-in h1 { font-size: 40px; }
.cjm-sub { margin: 10px 0 30px; color: var(--muted); font-size: 16px; }
.cjm-msg { margin: 18px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 15px; line-height: 1.45; }
.cjm-msg + .cjm-sub { margin-top: 18px; }
.cjm-msg.is-error { background: var(--err-bg); border: 1px solid #f0c7c3; color: #7a1a12; }
.cjm-msg.is-ok { background: var(--mist); border: 1px solid #cfe6e9; color: var(--ink); }
.cjm-fld { margin-bottom: 20px; }
.cjm-fl { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.cjm-inp { position: relative; display: flex; align-items: center; height: 52px; border: 1.5px solid var(--line2); border-radius: 6px; background: #fff; }
.cjm-inp:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cjm-inp input { width: 100%; height: 100%; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 400 16px/1.2 var(--bf); }
.cjm-inp input::placeholder { color: #737371; opacity: 1; }
.cjm-inp input:focus, .cjm-inp input:focus-visible { outline: none; }
.cjm-inp--pass input { padding-right: 96px; }
.cjm-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 2px 8px 0; border: 0; border-radius: 4px; background: none; color: var(--ink); font: 700 12px/1 var(--hf); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.cjm-show .cjm-i { width: 16px; height: 16px; margin-top: -2px; }
.cjm-chk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 24px; font-size: 15px; }
.cjm-chk { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; }
.cjm-chk input { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 1.5px solid var(--muted); border-radius: 3px; background: #fff; cursor: pointer; }
.cjm-chk input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--ink); }
.cjm-first { display: flex; gap: 14px; margin-top: 28px; padding: 20px 22px; border-radius: 12px; background: var(--mist); font-size: 15px; }
.cjm-first-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cjm-first-ic .cjm-i { width: 17px; height: 17px; }
.cjm-first p { margin: 4px 0 10px; color: #3e3e3c; }
.cjm-alt { margin-top: 18px; font-size: 15px; }
.cjm-sub + form { padding-top: 10px; }
.cjm-help { margin-top: 38px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ drawer (phone) */
.cjm-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(30, 32, 32, .5); }
.cjm-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: min(304px, 88vw); background: #fff; display: flex; flex-direction: column; box-shadow: 12px 0 40px rgba(0, 0, 0, .18); overflow-y: auto; }
.cjm-drawer:not([hidden]) { animation: cjm-in .18s ease-out; }
@keyframes cjm-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cjm-drawer:not([hidden]) { animation: none; } }
.cjm-dr-h { height: var(--cjpt-bar-h); flex: none; display: flex; align-items: center; justify-content: flex-start; padding: 0 var(--cjpt-bar-gutter); border-bottom: 1px solid var(--cjpt-bar-line); } /* the thin x sits where the menu icon was */
.cjm-dr-n { padding: 16px 12px; }
.cjm-dr-n .cjm-si.is-on { background: var(--bg); box-shadow: none; }
.cjm-dr-f { margin-top: auto; padding: 12px 12px 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cjm-dr-back { height: 48px; color: var(--muted); }
.cjm-dr-me { display: flex; align-items: center; gap: 12px; padding: 14px 12px 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.cjm-dr-me b { display: block; font-size: 15px; }
.cjm-dr-me .cjm-av { background: none; }
.cjm-dr-me span:not(.cjm-av) { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
body.cjm-lock { overflow: hidden; }

/* ------------------------------------------------------------------ phone home screen (/account/ at 899px and below) */
.cjm-home { display: none; }
.cjm-hi { font: 700 34px/1.1 var(--hf); margin: 4px 0 20px; }
.cjm-hc { padding: 20px 18px 18px; margin-bottom: 20px; }
.cjm-hc h2 { margin: 8px 0 6px; font-size: 22px; }
.cjm-hc-l { margin: 0 0 18px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.cjm-hc .cjm-kick { display: block; }
.cjm-hl ul { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh); overflow: hidden; }
.cjm-hl li + li { border-top: 1px solid var(--line); }
.cjm-hl a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 14px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.cjm-hl a:hover, .cjm-hl a:focus-visible { background: var(--bg); }
.cjm-hl .cjm-ic { width: 36px; height: 36px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--mist); color: var(--ink); }
.cjm-hl .cjm-ic .cjm-i { width: 19px; height: 19px; }
.cjm-hl-t { flex: 1; min-width: 0; }
.cjm-hl .cjm-hl-go { width: 20px; height: 20px; color: var(--muted); }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 1099px) {
	.cjm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	/* The standard phone bar (assets/css/phone-bar.css): menu left | logo centred (a 1fr / auto / 1fr grid, so it stays centred whatever sits left and right) | account right */
	.cjm-ah { height: calc(var(--cjpt-bar-h) + 1px); border-bottom-color: var(--cjpt-bar-line); } /* the bar plus the 1px rule under it, as everywhere */
	.cjm-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--cjpt-bar-gutter); }
	.cjm-mbtn { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; }
	.cjm-logo, .cjm-logo img { width: var(--cjpt-bar-logo-w); }
	.cjm-logo { grid-column: 2; grid-row: 1; }
	.cjpt-db .cjpt-db-back { display: none !important; } /* desktop-bar parts */
	.cjpt-db__lead, .cjpt-db__end { display: contents; } /* the wrappers vanish: the logo and the menu are grid items of .cjm-in again */
	.cjpt-db__centre { display: none; }
	.cjm-in .cjm-um { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
	.cjm-in .cjm-um .cjm-um-btn { width: var(--cjpt-bar-tap); height: var(--cjpt-bar-tap); padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 0; background: none; }
	.cjm-in .cjm-um .cjm-um-btn:hover, .cjm-in .cjm-um .cjm-um-btn[aria-expanded="true"] { background: none; border: 0; }
	.cjm-in .cjm-um .cjm-um-btn:focus-visible { outline-offset: -4px; }
	.cjm-in .cjm-um .cjm-nm, .cjm-in .cjm-um .cjm-chev { display: none; }
	.cjm-sb { display: none; }
	.cjm-app--home .cjm-sec { display: none; }
	.cjm-app--home .cjm-home { display: block; }
	.cjm-app--home .cjm-dr-n .cjm-si.is-on { background: none; }
	/* login: the public site bar (menu | logo | account + cart) and the site menu under it */
	.cjm-ah--pub .cjm-pr { display: flex; grid-column: 3; grid-row: 1; justify-self: end; align-items: center; }
	.cjm-pubmenu { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; max-height: calc(100vh - var(--cjpt-bar-h)); overflow-y: auto; background: #fff; border-bottom: 1px solid var(--cjpt-bar-line); box-shadow: 0 6px 12px rgba(0, 0, 0, .08); padding: 6px 0 10px; }
	.cjm-pm-l { list-style: none; margin: 0; padding: 0; }
	.cjm-pm-r { display: flex; align-items: stretch; }
	.cjm-pm-i a, .cjm-pm-t--label { display: flex; align-items: center; min-height: 46px; padding: 0 20px; flex: 1; font: 700 14px/1.2 var(--hf); letter-spacing: .02em; text-transform: uppercase; color: #656563; text-decoration: none; }
	.cjm-pm-t { width: 48px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #656563; cursor: pointer; }
	.cjm-pm-t--label { width: auto; justify-content: space-between; text-align: left; font: 700 14px/1.2 var(--hf); text-transform: uppercase; }
	.cjm-pm-t .cjm-i { width: 18px; height: 18px; }
	.cjm-pm-t[aria-expanded="true"] .cjm-i { transform: rotate(180deg); }
	.cjm-pm-i a:hover, .cjm-pm-i a:focus-visible, .cjm-pm-t:hover, .cjm-pm-t:focus-visible { background: #ecf7f7; color: #1f8fa0; }
	.cjm-pm-l1 a, .cjm-pm-l1 .cjm-pm-t--label { padding-left: 36px; font-size: 13px; }
	.cjm-pm-l2 a, .cjm-pm-l2 .cjm-pm-t--label { padding-left: 52px; font-size: 13px; }
	.cjm-pm-l3 a { padding-left: 68px; font-size: 13px; }
	.cjm-shell { display: block; padding: 0 16px; }
	.cjm-mn { padding: 26px 0 40px; }
	.cjm-phd { margin-bottom: 20px; }
	.cjm-phd h1 { font-size: 30px; }
	.cjm-lead { margin: -8px 0 20px; }
	.cjm-sh { margin: 36px 0 14px; }
	.cjm-sh h2 { font-size: 20px; }
	.cjm-cc-row { display: block; }
	.cjm-cc-media { min-height: 0; aspect-ratio: 16 / 9; }
	.cjm-cc-media.is-cert { aspect-ratio: 16 / 10; }
	.cjm-cc-b { padding: 20px 16px; }
	.cjm-cc-b h2 { font-size: 24px; margin: 6px 0 14px; }
	.cjm-next { margin: 16px 0 18px; }
	.cjm-next b { font-size: 16px; }
	.cjm-acts { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
	.cjm-acts .cjm-btn { display: flex; width: 100%; }
	.cjm-acts.is-spread { flex-direction: row; align-items: center; text-align: left; }
	.cjm-acts.is-spread .cjm-btn { display: inline-flex; width: auto; }
	.cjm-ce { margin-top: 18px; }
	.cjm-certline { padding: 14px 16px; font-size: 14px; line-height: 1.6; }
	.cjm-certline b.cjm-nw { display: block; }
	.cjm-certline .cjm-dot.is-first { display: none; }
	.cjm-login { display: block; min-height: 0; }
	.cjm-lg-photo { display: none; }
	.cjm-lg-form { padding: 36px 16px 56px; }
	.cjm-lg-in h1 { font-size: 34px; }
}
@media (max-width: 599px) {
	.cjm-grid { display: flex; flex-direction: column; gap: 16px; }
	.cjm-pc { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 14px; padding: 14px; }
	.cjm-pc-media { width: 84px; height: 84px; aspect-ratio: auto; border: 0; border-radius: 8px; padding: 6px; }
	.cjm-pc-b { padding: 0; justify-content: center; }
	.cjm-pc-b h3 { font-size: 17px; }
	.cjm-desc { display: none; }
	.cjm-pc-f { padding-top: 8px; }
	.cjm-price { font-size: 18px; }
	.cjm-price.is-big { font-size: 26px; }
	.cjm-empty { padding: 20px 16px; }
}

/* ------------------------------------------------------------------ chunk 3: downloads, events, orders, account */
.cjm-meta { font-size: 14px; color: var(--muted); }
.cjm-plain { font-size: 15px; line-height: 1.6; }
.cjm-hint { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cjm-opt { font-weight: 400; color: var(--muted); }
.cjm-phd + .cjm-sh { margin-top: 0; }
.cjm-lead.cjm-back-row a { display: inline-flex; align-items: center; gap: 8px; }
.cjm-lead.cjm-back-row .cjm-i { width: 16px; height: 16px; }

/* status chips (orders) */
.cjm-chip.is-status { height: 24px; background: #fff; border: 1px solid var(--line2); color: var(--muted); }
.cjm-chip.is-status.is-paid { background: var(--mist); border-color: transparent; color: var(--ink); }

/* guides on the Downloads page: grey panel, the cover shot drawn whole */
.cjm-app--downloads .cjm-pc-media { background-color: var(--bg); }
.cjm-pc-media.is-booklet { display: flex; align-items: center; justify-content: center; }
.cjm-cover { display: block; height: 100%; aspect-ratio: 241 / 440; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 3px; box-shadow: 0 8px 18px rgba(0, 0, 0, .24); }
.cjm-pc-b .cjm-meta { margin-top: 14px; }
.cjm-pc-b .cjm-meta + .cjm-meta { margin-top: 2px; }
.cjm-pc-a { padding: 0 24px 24px; }
.cjm-pc-a:empty { display: none; }
.cjm-pc.is-own .cjm-pc-b { padding-bottom: 12px; }

/* files of a purchased product that has more than one */
.cjm-fl li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.35; }
.cjm-fl.is-plain li:first-child { border-top: 0; padding-top: 0; }
.cjm-fl .cjm-fi { color: var(--muted); display: inline-flex; }
.cjm-fl .cjm-fi .cjm-i { width: 17px; height: 17px; }
.cjm-fl .cjm-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cjm-ib { width: 36px; height: 36px; flex: none; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; background: #fff; }
.cjm-ib:hover { background: var(--lime); }
.cjm-ib .cjm-i { width: 15px; height: 15px; stroke-width: 2.4; }

/* live events */
.cjm-ev { display: grid; grid-template-columns: var(--mw) minmax(0, 1fr); margin-bottom: 24px; }
.cjm-ev-media { min-height: 100%; }
.cjm-ev-media.is-blank { background-color: var(--mist); display: flex; align-items: center; justify-content: center; }
.cjm-ev-ic .cjm-i { width: 56px; height: 56px; color: #9bb9bd; stroke-width: 1.5; }
.cjm-dbadge { position: absolute; left: 18px; top: 18px; display: flex; flex-direction: column; align-items: center; padding: 12px 16px 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.cjm-dbadge small { font: 700 11.5px/1 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cjm-dbadge b { font: 700 30px/1 var(--hf); margin: 8px 0 6px; white-space: nowrap; }
.cjm-ev-b { min-width: 0; padding: 32px; }
.cjm-ev-b h2 { margin-top: 8px; font-size: 28px; }
.cjm-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 22px 0 26px; }
.cjm-fact { display: flex; gap: 12px; min-width: 0; }
.cjm-fact > .cjm-i { margin-top: 2px; color: var(--muted); }
.cjm-fact .cjm-k { display: block; font: 700 11.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1px 0 4px; }
.cjm-fact p { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cjm-acts.is-wrap { flex-wrap: wrap; gap: 16px; }
.cjm-ev.is-past .cjm-ev-media { filter: grayscale(.6); opacity: .85; }
.cjm-orow { display: flex; align-items: center; gap: 24px; padding-right: 24px; margin-bottom: 16px; }
.cjm-or-media { align-self: stretch; width: 168px; min-height: 104px; flex: none; }
.cjm-or-media.is-blank { background-color: var(--mist); }
.cjm-or-b { flex: 1; min-width: 0; padding: 24px 0; }
.cjm-or-b h3 { font-size: 18px; }
.cjm-or-b .cjm-meta { display: block; margin-top: 4px; }
.cjm-or-f { display: flex; align-items: center; gap: 24px; flex: none; }
.cjm-past { margin-top: 22px; font-size: 15px; }
.cjm-past summary { display: inline-block; cursor: pointer; list-style: none; }
.cjm-past summary::-webkit-details-marker { display: none; }
.cjm-past-hide, .cjm-past[open] .cjm-past-show { display: none; }
.cjm-past[open] .cjm-past-hide { display: inline; }
.cjm-past-list { margin-top: 18px; }

/* orders */
.cjm-tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cjm-tbl th, .cjm-tbl td { text-align: left; vertical-align: middle; }
.cjm-tbl thead th { padding: 14px 24px 12px; background: #fafafa; font: 700 11.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cjm-tbl tbody th, .cjm-tbl tbody td { padding: 18px 24px; border-top: 1px solid var(--line); font-weight: 400; }
.cjm-tbl .cjm-r { text-align: right; }
.cjm-tbl .cjm-on, .cjm-tbl .cjm-it { font-weight: 600; }
.cjm-tbl .cjm-on { white-space: nowrap; }
.cjm-tbl .cjm-dt, .cjm-tbl .cjm-tot { white-space: nowrap; }
.cjm-tbl .cjm-rc { white-space: nowrap; }
.cjm-tbl .cjm-pdf { margin-left: 18px; }

/* one order */
.cjm-ov { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cjm-ov-main { padding: 28px 32px; }
.cjm-ov-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cjm-ov-date { margin-top: 6px; font-size: 15px; }
.cjm-ov-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.cjm-ov-t th, .cjm-ov-t td { text-align: left; padding: 14px 0; vertical-align: top; border-top: 1px solid var(--line); }
.cjm-ov-t thead th { padding: 0 0 10px; border-top: 0; font: 700 11.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cjm-ov-t .cjm-r { text-align: right; white-space: nowrap; padding-left: 16px; }
.cjm-ov-t tbody td:first-child b, .cjm-ov-t tbody td:first-child a { font-weight: 600; }
.cjm-ov-t .cjm-meta { display: block; margin-top: 2px; }
.cjm-qty { margin-left: 6px; color: var(--muted); font-weight: 600; }
.cjm-ov-t tfoot th { font-weight: 400; color: var(--muted); padding: 10px 0; }
.cjm-ov-t tfoot td { padding: 10px 0; }
.cjm-ov-t tfoot tr:first-child th, .cjm-ov-t tfoot tr:first-child td { padding-top: 14px; }
.cjm-ov-t tfoot tr.is-total th { color: var(--ink); font-weight: 700; }
.cjm-ov-t tfoot tr.is-total td { font: 700 20px/1.2 var(--hf); }
.cjm-ov-a { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.cjm-ov-side { padding: 24px; }
.cjm-ov-side h3 { font: 700 12.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cjm-ov-side p + h3 { margin-top: 22px; }

/* account */
.cjm-acols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cjm-acol { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cjm-ab { padding: 24px; scroll-margin-top: 16px; }
.cjm-ab-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cjm-ab-h h2 { flex: 1; min-width: 0; font-size: 20px; padding-top: 3px; }
.cjm-tile { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--mist); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.cjm-tile .cjm-i { width: 19px; height: 19px; }
.cjm-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 15px; }
.cjm-kv .cjm-k { color: var(--muted); }
.cjm-kv .cjm-v { font-weight: 600; overflow-wrap: anywhere; }
.cjm-ab.is-lic { border: 2px solid var(--brand); padding: 23px; }
.cjm-ab.is-lic .cjm-tile { background: var(--brand); }
.cjm-strip { display: flex; gap: 10px; align-items: flex-start; margin: 16px -23px -23px; padding: 14px 23px; background: var(--mist); font-size: 14px; }
.cjm-strip .cjm-i { width: 17px; height: 17px; margin-top: 2px; }
.cjm-note { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--mist); font-size: 14px; line-height: 1.5; }
.cjm-msg--top { margin: 0 0 24px; }
.cjm-ab .cjm-msg { margin: 0 0 16px; }
.cjm-ab form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 4px; }
.cjm-ab form .cjm-fld { grid-column: 1 / -1; min-width: 0; }
.cjm-ab form .cjm-fld.is-half { grid-column: auto; }
.cjm-ab form .cjm-acts { grid-column: 1 / -1; margin-top: 2px; }
.cjm-fgrid { display: contents; }
.cjm-inp--sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 44px 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 400 16px/1.2 var(--bf); cursor: pointer; }
.cjm-inp--sel select:focus, .cjm-inp--sel select:focus-visible { outline: none; }
.cjm-inp--sel .cjm-i { position: absolute; right: 14px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cjm-inp--sel select[data-cjm-swapped] { padding-right: 44px; }

@media (max-width: 1099px) {
	.cjm-ov { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
	.cjm-ev { display: block; }
	.cjm-ev-media { min-height: 0; aspect-ratio: 16 / 9; }
	.cjm-ev-b { padding: 20px 16px; }
	.cjm-ev-b h2 { font-size: 24px; }
	.cjm-facts-grid { grid-template-columns: 1fr; gap: 16px; margin: 18px 0 22px; }
	.cjm-acts.is-wrap { gap: 14px; }
	.cjm-orow { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 14px; padding: 14px; }
	.cjm-or-media { width: 84px; height: 84px; min-height: 0; border-radius: 8px; align-self: start; }
	.cjm-or-b { padding: 0; align-self: center; }
	.cjm-or-b h3 { font-size: 17px; }
	.cjm-or-f { grid-column: 1 / -1; justify-content: space-between; gap: 12px; margin-top: 10px; }
	.cjm-acols { display: flex; flex-direction: column; gap: 16px; }
	.cjm-acol { display: contents; }
	.cjm-ab[data-box="profile"] { order: 1; }
	.cjm-ab[data-box="license"] { order: 2; }
	.cjm-ab[data-box="password"] { order: 3; }
	.cjm-ab[data-box="billing"] { order: 4; }
	.cjm-ab[data-box="subscription"] { order: 5; }
	.cjm-ab { padding: 20px 16px; }
	.cjm-ab.is-lic { padding: 19px 15px; }
	.cjm-strip { margin: 16px -15px -19px; padding: 14px 15px; }
	.cjm-ab form { grid-template-columns: 1fr; }
	.cjm-ab form .cjm-fld.is-half { grid-column: 1 / -1; }
	.cjm-ov-main { padding: 20px 16px; }
}
@media (max-width: 720px) {
	.cjm-tbl table, .cjm-tbl tbody { display: block; }
	.cjm-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.cjm-tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "on st" "it it" "dt tot" "rc rc"; gap: 6px 12px; padding: 16px; border-top: 1px solid var(--line); }
	.cjm-tbl tbody tr:first-child { border-top: 0; }
	.cjm-tbl tbody th, .cjm-tbl tbody td { display: block; padding: 0; border: 0; }
	.cjm-tbl .cjm-on { grid-area: on; align-self: center; font-size: 16px; }
	.cjm-tbl .cjm-st { grid-area: st; justify-self: end; }
	.cjm-tbl .cjm-it { grid-area: it; margin-top: 4px; }
	.cjm-tbl .cjm-dt { grid-area: dt; color: var(--muted); }
	.cjm-tbl .cjm-tot { grid-area: tot; font-weight: 600; }
	.cjm-tbl .cjm-rc { grid-area: rc; text-align: left; margin-top: 6px; }
	.cjm-tbl .cjm-pdf { margin-left: 22px; }
	.cjm-tbl .cjm-rc:empty { display: none; }
}
@media (max-width: 599px) {
	/* owned guide on a phone: image + name on top, the whole-width Download button under them */
	.cjm-pc.is-own .cjm-pc-a { grid-column: 1 / -1; margin-top: 10px; padding: 0; }
	.cjm-pc.is-own .cjm-pc-b { padding: 0; }
	.cjm-pc.is-own .cjm-meta { margin-top: 2px; }
	.cjm-pc-media.is-booklet .cjm-cover { height: 100%; }
	.cjm-kv { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ chunk 4: Runner's Zone */
.cjm-rzh {
	position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 32px;
	border-radius: 12px; overflow: hidden; background-color: #262626; background-position: center 40%; background-size: cover;
	background-repeat: no-repeat; color: #fff;
}
.cjm-rzh::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 24, 24, .9) 0%, rgba(22, 24, 24, .8) 55%, rgba(22, 24, 24, .74) 100%); }
.cjm-rzh > * { position: relative; }
.cjm-rzh-in { min-width: 0; flex: 1; }
.cjm-rzh .cjm-kick { margin-bottom: 16px; }
.cjm-rzh-l { flex: none; padding-bottom: 14px; font-size: 14.5px; }
.cjm-lnk.is-inv { color: #fff; white-space: nowrap; }
.cjm-rz-srch { position: relative; display: block; width: min(460px, 100%); }
.cjm-rz-srch .cjm-i { position: absolute; left: 18px; top: 50%; margin-top: -9px; color: var(--ink); pointer-events: none; }
.cjm-rz-srch input {
	display: block; width: 100%; height: 52px; margin: 0; padding: 0 18px 0 48px; border: 0; border-radius: 6px; background: #fff;
	color: var(--ink); font: 400 15px/1.2 var(--bf); -webkit-appearance: none; appearance: none;
}
.cjm-rz-srch input::placeholder { color: #737371; opacity: 1; }
.cjm-rz-srch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cjm-rz-srch input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cjm-rz-res { margin-top: 24px; }
.cjm-rz-res-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cjm-rz-res-h h2 { font-size: 22px; }
.cjm-rz-list li + li { border-top: 1px solid var(--line); }
.cjm-rz-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; color: var(--ink); text-decoration: none; }
.cjm-rz-list a:hover { background: var(--mist); }
.cjm-rz-hit { min-width: 0; display: block; }
.cjm-rz-hit b { display: block; font: 700 17px/1.3 var(--hf); overflow-wrap: anywhere; }
.cjm-rz-hit .cjm-meta { display: block; margin-top: 2px; }
.cjm-rz-list .cjm-go, .cjm-rz-cat .cjm-go { color: var(--muted); width: 20px; height: 20px; }
.cjm-rz-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.cjm-rz-res + .cjm-sh + .cjm-rz-grid, .cjm-rz-res ~ .cjm-rz-grid { margin-top: 0; }
.cjm-rz-cat { grid-column: span 2; display: block; padding: 24px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cjm-rz-grid.is-two-last .cjm-rz-cat:nth-last-child(-n+2) { grid-column: span 3; }
.cjm-rz-cat:hover { border-color: var(--line2); box-shadow: 0 1px 2px rgba(38, 38, 38, .06), 0 10px 28px rgba(38, 38, 38, .1); }
.cjm-rz-cat:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cjm-rz-cat-t { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.cjm-rz-cat .cjm-tile { width: 44px; height: 44px; }
.cjm-rz-cat h3 { font-size: 20px; }
.cjm-rz-cat .cjm-meta { display: block; margin-top: 4px; }
.cjm-rzp .cjm-cc-media { background-color: var(--mist); }
.cjm-rz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 26px; }
.cjm-rz-stats li { padding: 14px 14px 12px; border-radius: 10px; background: var(--mist); }
.cjm-rz-stats b { display: block; padding-top: 3px; font: 700 28px/1 var(--hf); }
.cjm-rz-stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: #3e3e3c; }
.cjm-rzp .cjm-acts.is-spread { flex-wrap: wrap; gap: 16px; }
.cjm-price.is-mid { font-size: 24px; }
.cjm-price small { font: 400 15px/1 var(--bf); color: var(--muted); }
.cjm-price em { margin: 0 8px; font: 400 15px/1 var(--bf); font-style: normal; color: var(--muted); }

@media (max-width: 1099px) {
	.cjm-rz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cjm-rz-cat, .cjm-rz-grid.is-two-last .cjm-rz-cat:nth-last-child(-n+2) { grid-column: auto; }
	.cjm-rz-grid.is-two-last .cjm-rz-cat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
	.cjm-rzh { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 16px; }
	.cjm-rzh .cjm-kick { margin-bottom: 14px; }
	.cjm-rzh-l { padding-bottom: 0; }
	.cjm-rz-srch { width: 100%; }
	.cjm-rz-grid { gap: 16px; margin-top: 16px; }
	.cjm-rz-cat { padding: 20px; }
	.cjm-rz-cat-t { margin-bottom: 16px; }
	.cjm-rz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
	.cjm-rz-res-h h2 { font-size: 20px; }
	.cjm-rz-list a { padding: 14px 16px; }
}
@media (max-width: 599px) {
	.cjm-rz-grid { display: flex; flex-direction: column; gap: 12px; }
	.cjm-rz-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; }
	.cjm-rz-cat-t { display: contents; }
	.cjm-rz-cat .cjm-tile { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; }
	.cjm-rz-cat h3 { grid-column: 2; grid-row: 1; font-size: 17px; }
	.cjm-rz-cat .cjm-meta { grid-column: 2; grid-row: 2; margin-top: 0; }
	.cjm-rz-cat .cjm-go { grid-column: 3; grid-row: 1 / span 2; }
	.cjm-rz-cat h3:last-child { grid-row: 1 / span 2; }
	.cjm-rzp .cjm-acts.is-spread { flex-direction: column; align-items: stretch; text-align: left; }
	.cjm-rzp .cjm-acts.is-spread .cjm-btn { display: flex; width: 100%; }
	.cjm-rzp .cjm-price.is-mid { font-size: 22px; }
}

/* ------------------------------------------------------------------ Manage subscription (/account/runners-zone/manage/)
 * MemberPress draws the screens (connectors/memberpress.php); this only dresses its markup in the member-area look. Its own
 * stylesheets for the account page are not loaded, only the pop-up ones it needs for Cancel / Resume. */
.cjm .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cjm-tabs { margin: 0 0 20px; border-bottom: 1px solid var(--line2); }
.cjm-tabs ul { display: flex; gap: 28px; }
.cjm-tab { display: inline-flex; align-items: center; min-height: 46px; margin-bottom: -1px; padding: 3px 1px 0; border-bottom: 3px solid transparent; font: 700 13px/1 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.cjm-tab:hover { color: var(--ink); }
.cjm-tab.is-on { color: var(--ink); border-bottom-color: var(--brand); }
.cjm-mp-help { margin-top: 20px; }

.cjm-mp .mp_wrapper { margin: 0; padding: 0; }
.cjm-mp .mp_wrapper:not(.mepr-subscriptions-wrapper):not(.mepr-payments-wrapper) { padding: 28px 32px; }
.cjm-mp .mepr-account-meta, .cjm-mp .mepr-loading-gif { display: none; }
.cjm-mp table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cjm-mp th, .cjm-mp td { text-align: left; vertical-align: top; }
.cjm-mp thead th { padding: 14px 14px 12px; background: #fafafa; font: 700 11.5px/1.3 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cjm-mp tbody td { padding: 22px 14px; border-top: 1px solid var(--line); font-weight: 400; }
.cjm-mp thead th:first-child, .cjm-mp tbody td:first-child { padding-left: 24px; }
.cjm-mp thead th:last-child, .cjm-mp tbody td:last-child { padding-right: 24px; }
.cjm-mp td[data-label="Dates"], .cjm-mp td[data-label="Status"] { white-space: nowrap; }
.cjm-mp td[data-label="Product"] { min-width: 190px; }
.cjm-mp p { margin: 0; }
.cjm-mp .sub, .cjm-mp .mepr-pro-account-table__rebill { margin-top: 3px; font-size: 14px; color: var(--muted); }
.cjm-mp .mepr-pro-account-table__product, .cjm-mp td[data-label="Invoice"] > p:first-child { font-weight: 600; overflow-wrap: anywhere; }
.cjm-mp .mepr-pro-account-table__subscr { display: none; } /* MemberPress's internal subscription id */
.cjm-mp .mepr-pro-account-table__created_at::before { content: "Started "; color: var(--muted); }
.cjm-mp .mepr-pro-account-terms, .cjm-mp td[data-label="Total"] { white-space: nowrap; font-weight: 600; }
.cjm-mp td[data-label="Date"] strong { font-weight: 400; }
.cjm-mp td[data-label="Card"] > p:not(.sub) { display: none; } /* the name of the payment gateway in MemberPress's settings */
.cjm-mp #mepr-account-payments-table thead th:nth-child(5), .cjm-mp #mepr-account-payments-table thead th:nth-child(7),
.cjm-mp #mepr-account-payments-table td[data-label="Email"], .cjm-mp #mepr-account-payments-table .mepr-pro-account-table__col-actions { display: none; }
.cjm-mp .mepr-pro-account-table__badge { display: inline-flex; align-items: center; height: 24px; padding: 3px 9px 0; border: 1px solid var(--line2); border-radius: 4px; background: #fff; color: var(--muted); font: 700 11.5px/1 var(--hf); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cjm-mp .mepr-pro-account-table__badge.--is-active, .cjm-mp .mepr-pro-account-table__badge.--is-complete { border-color: transparent; background: var(--mist); color: var(--ink); }
.cjm-mp .mepr-tooltip-trigger { display: none; } /* the ... menu: the actions sit in the row instead */
.cjm-mp .mepr-tooltip-content { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cjm-mp .mepr-account-row-action { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; cursor: pointer; }
.cjm-mp .mepr-account-row-action:hover { text-decoration-thickness: 2px; }
.cjm-mp a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cjm-mp .mepr-no-active-subscriptions, .cjm-mp .mp-no-subs { padding: 28px 32px; }

/* messages from MemberPress (saved, or something went wrong) */
.cjm-mp .mepr_updated, .cjm-mp .mepr_pro_error { margin: 0; padding: 14px 32px; font-size: 15px; line-height: 1.45; }
.cjm-mp .mepr_updated { background: var(--mist); border-bottom: 1px solid #cfe6e9; }
.cjm-mp .mepr_pro_error { display: flex; align-items: flex-start; gap: 12px; background: var(--err-bg); border-bottom: 1px solid #f0c7c3; color: #7a1a12; }
.cjm-mp .mepr_pro_error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cjm-mp .mepr_pro_error ul { list-style: none; }
.cjm-mp .mp_wrapper:has(> .mepr_updated), .cjm-mp .mp_wrapper:has(> .mepr_pro_error) { padding: 0; }

/* the card screen (Stripe's own field sits inside the frame) */
.cjm-mp .mepr_update_account_table > div > strong { font: 700 18px/1.3 var(--hf); }
.cjm-mp .mepr-stripe-card-element { padding: 16px; border: 1.5px solid var(--line2); border-radius: 6px; background: #fff; }
.cjm-mp .mepr-stripe-card-errors { min-height: 20px; margin-top: 8px; font-size: 14px; color: #7a1a12; }
.cjm-mp .mepr_spacer { height: 12px; }
.cjm-mp .mepr-submit { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 3px 26px 0; border: 1.5px solid transparent; border-radius: 0; background: var(--brand); color: var(--ink); font: 700 14px/1 var(--hf); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; appearance: none; }
.cjm-mp .mepr-submit:hover { background: var(--lime); }

/* the Cancel / Resume confirmation pop-up (MemberPress moves it to the end of <body>) */
.cjm .mfp-bg { background: rgba(30, 32, 32, .55); opacity: 1; }
.cjm .mepr-white-popup { max-width: 460px; padding: 32px 28px 28px; border-radius: 12px; font: 400 16px/1.5 var(--bf); color: var(--ink); box-shadow: 0 18px 44px rgba(38, 38, 38, .22); }
.cjm .mepr-white-popup .mepr-cancel-sub-text, .cjm .mepr-white-popup .mepr-resume-sub-text { padding: 0 0 22px; font: 700 20px/1.3 var(--hf); text-wrap: balance; }
.cjm .mepr-white-popup .mepr-cancel-sub-buttons { display: flex; justify-content: center; gap: 12px; }
.cjm .mepr-white-popup .mepr-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 44px; margin: 0 6px; padding: 3px 22px 0; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: 700 13px/1 var(--hf); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cjm .mepr-white-popup .mepr-btn:hover { background: var(--bg); }
.cjm .mepr-white-popup .mepr-confirm-yes { border-color: transparent; background: var(--brand); }
.cjm .mepr-white-popup .mepr-confirm-yes:hover { background: var(--lime); }
.cjm .mfp-close { color: var(--ink); }

@media (max-width: 899px) {
	.cjm-tabs ul { gap: 22px; }
	.cjm-mp .mp_wrapper:not(.mepr-subscriptions-wrapper):not(.mepr-payments-wrapper) { padding: 20px 16px; }
	.cjm-mp .mepr_updated, .cjm-mp .mepr_pro_error { padding: 14px 16px; }
	.cjm-mp .mepr-no-active-subscriptions, .cjm-mp .mp-no-subs { padding: 20px 16px; }
}
@media (max-width: 720px) {
	.cjm-mp table, .cjm-mp tbody { display: block; }
	.cjm-mp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.cjm-mp tbody tr { display: block; padding: 18px 16px; border-top: 1px solid var(--line); }
	.cjm-mp tbody tr:first-child { border-top: 0; }
	.cjm-mp tbody td, .cjm-mp tbody td:first-child, .cjm-mp tbody td:last-child { display: block; padding: 8px 0; border: 0; }
	.cjm-mp tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 11.5px/1.5 var(--hf); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
	.cjm-mp td[data-label="Product"], .cjm-mp td[data-label="Invoice"] { padding-top: 0; }
	.cjm-mp td[data-label="Product"]::before, .cjm-mp td[data-label="Invoice"]::before { display: none; }
	.cjm-mp td[data-label="Product"] .mepr-pro-account-table__product { font-size: 17px; }
	.cjm-mp .mepr-pro-account-table__col-actions { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line); }
}
.cjm-ce.is-locked { color: var(--ink); }