/* FILE: lev-ptables.css - v1.7 */
/* KLOD - 2026-08-17 - v1.7 - promo banner ORANGE (#ff6700 strip tokens: white pill badge / white lead / .9 meta / soft orange shadow), NEW .lev_pt_promo__bottom spacing + .lev_pt_nocard free-box line; dark keeps orange */
/* KLOD - 2026-08-13 - v1.6 - class/id hyphens -> underscores (owner law) */
/* KLOD - 2026-06-24 - v1.5 - WHOLE-CARD CLICKABLE: full plan cards (.lev_pt_col) + mini cards (.lev_pt_mini_col) are now one click target — the existing CTA <a> gets a stretched ::after over the position:relative card so a click anywhere fires it; card links forced text-decoration:none on hover (no underline). Pure CSS, no markup/render.php change. (Also last turn: dark .lev_pt_col bg -> #333.) */
/* KLOD - 2026-06-24 - v1.4 - DARK MODE (auto). Under drip2's html[data-theme="dark"], remap the plugin --lev-pt-* tokens to drip2's global --dc_* palette (card-bg->--dc_elev, ink->--dc_text, line->--dc_border, muted/accent/sale/strike) so every tokenised surface flips; plus hardcoded patches the remap can't reach — promo banner #fff->--dc_elev, toggle track #eef1f3->--dc_soft, save-note #444 + cta-saving #5a5f63 -> --dc_muted, .lev_pt_cta white bg -> transparent outline, .scf_head -> --dc_soft, INVISIBLE black .scf_row zebra rgba(0,0,0,.015) -> rgba(255,255,255,.03), free_plan_box inner text -> --dc_text. APPENDED block only; no existing rules touched (Leva's edits preserved). */
/* KLOD - 2026-06-24 - v1.3 - CRITICAL PARSE FIX: the v1.1 changelog comment (and the line-476 block comment) contained a literal asterisk-slash inside their TEXT, which closed the comment EARLY and turned the entire .lev_ptables var block into a dropped invalid rule. That undefined every --lev-pt-* token, so all plan cards, the toggle and the mini-tables lost their background, border and accent colors (the free box + feature matrix survived because they use no tokens). Fixed by rewriting those two comment references with commas. The stylesheet now parses with ZERO stray comment closers. This — not the cache-bust — was the real cause of the broken look. */

/* ---- Theming hooks (override in your theme if needed) ---- */
.lev_ptables {
	--lev-pt-accent: #4db3d6;      /* matches the current signup accent */
	--lev-pt-accent-dk: #3a9ec0;
	--lev-pt-ink: #1d2327;
	--lev-pt-muted: #8a8f94;
	--lev-pt-line: #e3e6e8;
	--lev-pt-card-bg: #ffffff;
	--lev-pt-sale: #2a86ad;        /* emphasis/sale price — scheme blue (deeper, readable on white) matching the #4db3d6 accent; per-plan price_color overrides */
	--lev-pt-strike: #8a8f94;      /* struck-through regular price (kept muted, not red) */
	--lev-pt-badge: #f5a623;       /* gold promo-banner badge background ("{pct}% off" pill) — overridable from the admin Styles tab */
	--lev-pt-radius: 10px;
	width: 100%;                   /* fill the parent container (fluid/responsive) — cap with max-width below */
	max-width: 1000px;
	margin: 25px auto 35px;
	font-size: 16px;
	color: var(--lev-pt-ink);
}

.lev_ptables *,
.lev_ptables *::before,
.lev_ptables *::after { box-sizing: border-box; }

/* ---- Promo banner (centered, only while a sale is live) ----
   v1.7: ORANGE strip matching the site's guest CTA (.PRT_launch_banner tokens):
   #ff6700 bg, white text, white pill badge w/ orange text, soft orange shadow.
   One centered row that WRAPS cleanly on mobile (flex-wrap) — the lead text, the
   "% off all plans" pill, and the "· ends in N days" countdown each wrap as a unit.
   Rendered twice by render.php v1.3: top (above/below toggle) + .lev_pt_promo__bottom. */
.lev_pt_promo_banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	background: #ff6700;                               /* brand orange — same strip as the guest CTA (.PRT_launch_banner) */
	color: #fff;
	font-size: 15.5px;
	line-height: 1.35;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	margin: 20px auto;                                 /* clear gap from toggle/save-note AND the grid */
	box-shadow: 0 2px 8px rgba(255, 103, 0, .35);      /* soft orange glow */
}
/* Second copy at the very foot of the output (render.php v1.3): pulls in from the
   mini-tables above, no gap below (it IS the last thing). No inline margin on this one. */
.lev_pt_promo_banner.lev_pt_promo__bottom {   /* compound = beats the 600px media margin */
	margin: 28px auto 0;
}
/* WHITE pill badge: "{pct}% off all plans" — white bg, orange text, bold, fully rounded. */
.lev_pt_promo_badge {
	display: inline-block;
	background: #fff;
	color: #d94f00;                                    /* strip's button orange */
	font-weight: 800;
	font-size: 14.5px;
	letter-spacing: .2px;
	padding: 6px 16px;
	border-radius: 999px;
	white-space: normal;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* Lead "{period} sale" — the sale name, bold white, sits BEFORE the pill. */
.lev_pt_promo_lead {
	font-weight: 700;
	color: #fff;
}
/* Meta "· all plans · ends in N days" — lighter white, normal weight. */
.lev_pt_promo_meta {
	color: #fff;
	opacity: .9;
	font-weight: 400;
}

/* ---- Legacy green sale banner (kept for back-compat; not emitted by render v0.4) ---- */
.lev_pt_sale_banner {
	text-align: center;
	background: var(--lev-pt-sale);
	color: #fff;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: var(--lev-pt-radius);
	margin-bottom: 14px;
	letter-spacing: .2px;
}

/* ---- Period toggle ---- */
/* Compact, tasteful switch — scaled down from the old oversized pill (narrower
   max-width, tighter padding, smaller label). Stays centered + usable. */
.lev_pt_toggle {
	display: flex;                 /* centered pill; flex so the two halves split evenly */
	margin: 0 auto 6px;
	background: #eef1f3;
	border: 1px solid var(--lev-pt-line);
	border-radius: 30px;
	padding: 3px;                  /* was 4px */
	width: 100%;
	max-width: 300px;              /* was 420px — noticeably more compact footprint */
}
.lev_pt_toggle_btn {
	flex: 1 1 50%;
	display: flex;                 /* center the label both axes regardless of UA button styles */
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--lev-pt-ink);
	font-weight: 700;
	font-size: 13.5px;             /* was 15px */
	padding: 7px 12px;             /* was 10px 14px — smaller overall height */
	border-radius: 24px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
	line-height: 1.2;
}
.lev_pt_toggle_btn.is_active {
	background: var(--lev-pt-accent);
	color: #fff;
}
.lev_pt_toggle_btn:focus-visible {
	outline: 2px solid var(--lev-pt-accent-dk);
	outline-offset: 2px;
}

.lev_pt_save_note {
	text-align: center;
	color: #444;
	font-size: 14px;
	margin: 0 0 18px;
}
.lev_pt_save_note[hidden] { display: none; }

/* ---- Grid of columns ---- */
/* Equal-height cards: `align-items: stretch` forces every column in a row to the
   height of the tallest one, so a card with more features stretches its shorter
   siblings to match. Each card is itself a flex column (below) whose feature area
   grows (flex:1) and whose CTA block is pinned to the bottom — so the CTAs line up
   horizontally across all columns no matter how many features each plan lists. */
.lev_pt_grid {
	display: grid;
	gap: 18px;
	align-items: stretch;          /* all 3 columns share the tallest card's height */
	grid-template-columns: repeat(3, 1fr);
}
.lev_pt_grid[hidden] { display: none; }
.lev_pt_cols_1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.lev_pt_cols_2 { grid-template-columns: repeat(2, 1fr); }
.lev_pt_cols_4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Column card ---- */
.lev_pt_col {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--lev-pt-card-bg);
	border: 1px solid var(--lev-pt-line);
	border-radius: var(--lev-pt-radius);
	padding: 24px 16px 22px;       /* tighter horizontal padding so long feature lines fit on one row */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.lev_pt_col.is_highlight {
	border: 2px solid var(--lev-pt-accent);
	box-shadow: 0 6px 22px rgba(77, 179, 214, .25);
	transform: translateY(-4px);
}

/* ---- Badge ---- */
.lev_pt_badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--lev-pt-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

/* ---- Title ---- */
.lev_pt_title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 12px;
}

/* ---- Price ---- */
.lev_pt_price_wrap {
	text-align: center;
	min-height: 64px;             /* keeps rows aligned whether or not there's a struck price */
	margin-bottom: 16px;
}
/* Struck regular price ("$288 ($24/mo)") — a normal, muted strikethrough line.
   NOT bold, and ONE consistent size: the "$288" and the "($24/mo)" match exactly. */
.lev_pt_price_old {
	display: block;
	color: var(--lev-pt-muted);
	text-decoration: line-through;
	font-size: 15px;
	font-weight: normal;           /* normal weight, not bold */
	line-height: 1.1;
	margin-bottom: 2px;
}
.lev_pt_price {
	display: inline-block;
	font-size: 32px !important;               /* knocked down a notch from 38px */
	font-weight: 800;
	line-height: 1;
	color: var(--lev-pt-ink);
}
/* Green sale price stays the focal price but a notch smaller than the struck-regular size. */
.lev_pt_price.is_sale {
	color: var(--lev-pt-sale);
	font-size: 30px;
}
.lev_pt_recurrence {
	font-size: 15px;
	font-weight: 600 !important;
	margin-left: 2px;
}
/* Inline per-month equivalent in parens, e.g. "($19.20/mo)" — sits on the same line. */
.lev_pt_permo {
	font-size: 14px;
	font-weight: 600;
	color: var(--lev-pt-muted);
	white-space: nowrap;
}
/* Inside the struck regular price, the "($24/mo)" parenthetical and the "/mo"
   recurrence must match the "$288" exactly — same size, same normal weight. */
.lev_pt_price_old .lev_pt_permo,
.lev_pt_price_old .lev_pt_recurrence {
	font-size: 15px;
	font-weight: normal;
	color: var(--lev-pt-muted);
	margin-left: 0;
}
/* On the GREEN sale price, ONLY the main number ("$230.40") stays bold — the "/yr"
   recurrence and the "($19.20/mo)" per-month parenthetical drop to normal (lighter,
   muted) weight so the figure reads cleanly. The struck regular price's /mo is already
   normal (rule above), so this only touches the sale line. */
.lev_pt_price.is_sale .lev_pt_recurrence,
.lev_pt_price.is_sale .lev_pt_permo {
	font-weight: normal;
	/*color: var(--lev-pt-muted);*/
}

/* ---- Features ---- */
/* The active theme ships `.post-content ul, ol { margin-left: 2em; }` (=32px) which
   would shove this whole feature <ul> 32px right. Override it back to a small, even
   indent (~14px net) and beat the theme with !important. padding-left:0 keeps the
   bullets/checks anchored to the card's left padding edge, not double-indented. */
.lev_pt_features {
	list-style: none;
	margin: 0 0 22px;
	margin-left: 14px !important;  /* net feature indent ~14px (theme's -32 + 14) — beats .post-content ul/ol 2em */
	padding: 16px 0 0;
	padding-left: 0 !important;    /* no extra left padding on top of the 14px margin */
	border-top: 1px solid var(--lev-pt-line);
	flex: 1 1 auto;               /* grows to fill -> pushes the bottom CTA block down so CTAs align across columns */
}
.lev_pt_feature {
	position: relative;
	margin-bottom: 9px;
	padding: 2px 0 2px 22px;
	font-size: 15.5px !important;
	line-height: 1.45;
	letter-spacing: -.1px;
	white-space: normal; 
	font-weight: 500;
}
.lev_pt_feature:last-child { margin-bottom: 0; }
.lev_pt_feature::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;                      /* re-tuned for the new 4px top padding so the check sits on the first text line */
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--lev-pt-accent);
	border-bottom: 2px solid var(--lev-pt-accent);
	transform: rotate(-45deg);
}
.lev_pt_feature.is_muted {
	color: var(--lev-pt-muted);
	text-decoration: line-through;
}
.lev_pt_feature.is_muted::before {
	border-color: var(--lev-pt-muted);
	transform: none;
	top: 10px;                     /* re-tuned for the new 4px top padding */
	width: 12px;
	height: 0;
	border-left: 0;
	border-bottom: 2px solid var(--lev-pt-muted);  /* a dash, not a check */
}

/* ---- CTA ---- */
/* `margin-top:auto` shoves the CTA (and the saving line beneath it) to the bottom of
   the flex column, so the feature area absorbs all the extra height. Because every
   card stretches to the same height (grid align-items:stretch), the CTAs all land on
   the same horizontal line — regardless of how many features each plan lists. */
.lev_pt_cta {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 17px;
	font-weight: 700;
	color: var(--lev-pt-accent) !important;
	background: #fff;
	border: 2px solid var(--lev-pt-accent);
	border-radius: 8px;
	padding: 12px 18px;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
	margin-top: auto;              /* pin the CTA block to the bottom of the card */
}
.lev_pt_cta:hover { background: var(--lev-pt-accent); color: #fff !important; }
.lev_pt_cta.is_highlight {
	color: #fff !important;
	background: var(--lev-pt-accent);
}
.lev_pt_cta.is_highlight:hover { background: var(--lev-pt-accent-dk); opacity: 1; text-decoration:none; }

/* ---- Below-CTA total-saving line ($ + %) ---- */
/* This line is OPTIONAL per column (a free / no-promo plan renders none). It sits
   BELOW the CTA, so an absent line in one column would otherwise let that CTA ride
   higher than its neighbours. The min-height reserves the slot in every card so the
   CTAs stay perfectly aligned whether or not a given plan shows a saving figure. */
.lev_pt_cta_saving {
	text-align: center;
	margin-top: 9px;
	min-height: 18px;              /* reserve the slot -> CTAs align even when a column has no saving line */
	font-size: 13.5px;
	font-weight: 400;              /* normal weight (was bold) — owner found it too heavy */
	color: #5a5f63;                /* darker muted grey (was the emphasis blue/green) — quieter, supporting line */
	letter-spacing: .1px;
}

/* ---- Responsive: stack on small screens ---- */
@media (max-width: 860px) {
	.lev_pt_grid,
	.lev_pt_cols_2,
	.lev_pt_cols_3,
	.lev_pt_cols_4 {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}
	.lev_pt_col.is_highlight { transform: none; }
	.lev_pt_price_wrap { min-height: 0; }
	/* Stacked single-column cards are wide enough; let features wrap if a translation runs long. */
	.lev_pt_feature { white-space: normal; }
}

/* ---- Promo banner on narrow phones ----
   Tighter gap/padding + smaller type so the lead + gold badge + countdown wrap to a
   few short lines without overflowing at ~360px. flex-wrap (set above) does the
   wrapping; this just trims the scale. */
@media (max-width: 600px) {
	.lev_pt_promo_banner {
		gap: 7px;
		padding: 10px 12px;
		font-size: 14px;
		margin: 18px auto;
	}
	.lev_pt_promo_badge {
		font-size: 13px;
		padding: 3px 10px;
	}
}

/* ============================================================
   BASIC COMPARE MATRIX  (/signup/ "Compare plans" collapsible)
   Markup lives in drip2/signup.php (<details class="signup_compare">).
   Styled here so it shares the price-table's --lev-pt-* tokens and
   ships/cache-busts with the plugin. Scoped under .signup_compare so
   nothing leaks to other tables. Dark mode is re-skinned by the theme.
   ============================================================ */
.signup_compare {
	max-width: 760px;
	margin: 26px auto 8px;
	border: 1px solid var(--lev-pt-line, #e3e6e8);
	border-radius: var(--lev-pt-radius, 10px);
	background: var(--lev-pt-card-bg, #fff);
	overflow: hidden;
}
.signup_compare_summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 18px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--lev-pt-accent, #4db3d6);
	user-select: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.signup_compare_summary::-webkit-details-marker { display: none; }
/* Chevron that rotates when open. */
.signup_compare_summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.signup_compare[open] .signup_compare_summary::after { transform: rotate(-135deg); }
.signup_compare[open] .signup_compare_summary {
	border-bottom: 1px solid var(--lev-pt-line, #e3e6e8);
}
.signup_compare_body { padding: 4px 0 8px; overflow-x: auto; }

.signup_compare_grid {
	font-size: 14px;
	color: var(--lev-pt-ink, #1d2327);
}
.scf_row {
	display: grid;
	grid-template-columns: minmax(0, 3fr) repeat(4, minmax(0, 1fr));
	border-bottom: 1px solid var(--lev-pt-line, #e3e6e8);
}
.scf_row:last-child { border-bottom: 0; }
.scf_cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 10px;
	text-align: center;
	min-width: 0;
}
.scf_cell.scf_feat {
	justify-content: flex-start;
	text-align: left;
	font-weight: 500;
}
.scf_head { background: rgba(77, 179, 214, .08); }
.scf_head .scf_cell { font-size: 13px; font-weight: 700; white-space: nowrap; }
.signup_compare_grid .scf_row:nth-child(even):not(.scf_head) { background: rgba(0, 0, 0, .015); }
.scf_cell.yes { color: #13af40; font-weight: 900; }
.scf_cell.no  { color: #fb6868; font-weight: 700; }
.signup_compare_foot {
	margin: 12px 16px 4px;
	font-size: 13.5px;
}
.signup_compare_foot a { color: var(--lev-pt-accent, #4db3d6); }

@media (max-width: 560px) {
	.signup_compare_grid { font-size: 12.5px; }
	.scf_cell { padding: 8px 5px; }
	.scf_head .scf_cell { font-size: 11.5px; }
}

/* ============================================================
   FULL-MODE BLOCKS  ([lev_ptables] renders the whole signup body)
   render.php v1.0 emits these INSIDE the single .lev_ptables wrapper,
   below the 3 paid grids: an always-expanded feature-compare matrix
   (wrapped in .lev_pt_features_block) and a price-only mini-table block
   (.lev_pt_mini). Reuses the price-table's --lev-pt-* tokens. The
   .signup-compare-*, .scf-*, .free_plan_box rules are defined ABOVE,
   in the theme — NOT duplicated here.
   ============================================================ */

/* ---- Expanded feature-compare block (no <details>; always visible) ---- */
.lev_pt_features_block {
	max-width: 820px;
	margin: 34px auto 8px;
}
.lev_pt_features_title {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--lev-pt-ink);
	margin: 0 0 14px;
}
.free_plan_box {
	margin: 25px auto !important;
}
/* "No credit card needed" — small muted line INSIDE the free-plan box only (render.php
   v1.3), placed right above its CTA. order:3 = the button's slot in the theme's
   compact-box flex order (page_crap.css), so DOM order keeps it just before the button. */
.free_plan_box .lev_pt_nocard {
	order: 3;
	font-size: 13px;
	line-height: 1.3;
	color: var(--lev-pt-muted);
	margin: 0 0 8px;
}

/* ---- Price-only mini-tables ----
   A second toggle (.lev_pt_toggle__mini, JS-synced with the main one via the shared
   .lev_pt_toggle_btn class) + one .lev_pt_grid__mini per period. Each column is a slim
   row: plan name | reg/sale price | select button. No feature lists, so the cards are
   short and dense — a quick "just the prices" recap at the foot of the page. */
.lev_pt_mini {
	max-width: 760px;
	margin: 36px auto 8px;
}
.lev_pt_grid__mini {
	gap: 12px;
	align-items: stretch;
}
.lev_pt_mini_col {
	display: flex;
	flex-direction: column;        /* KLOD 2026-06-24: vertical card — name / price / button stacked + centered, mirroring the main plan cards minus the feature list. Was a cramped horizontal row inside a narrow 3-col cell. */
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--lev-pt-card-bg);
	border: 1px solid var(--lev-pt-line);
	border-radius: var(--lev-pt-radius);
	padding: 18px 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.lev_pt_mini_name {
	font-size: 16px;
	font-weight: 700;
	color: var(--lev-pt-ink);
}
.lev_pt_mini_price {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}
/* Struck regular price when on sale — muted strikethrough, small. */
.lev_pt_mini_old {
	color: var(--lev-pt-strike);
	text-decoration: line-through;
	font-size: 13px;
	font-weight: normal;
}
/* The shown price. .is_sale tints it the accent/sale color. */
.lev_pt_mini_final {
	font-size: 18px;
	font-weight: 800;
	color: var(--lev-pt-ink);
}
.lev_pt_mini_final.is_sale { color: var(--lev-pt-sale); }
.lev_pt_mini_final .lev_pt_recurrence {
	font-size: 13px;
	font-weight: 600;
	color: var(--lev-pt-muted);
}
/* The select button — reuses .lev_pt_cta look but compact + auto-width (overrides the
   full-card CTA's block/margin-top:auto so it sits inline on the right). */
.lev_pt_mini_cta {
	flex: 0 0 auto;
	display: inline-block;
	margin-top: 0;
	padding: 8px 16px;
	font-size: 14px;
	border-radius: 8px;
	white-space: nowrap;
}

/* ---- Smaller toggles (mini + compact modes) ---- */
.lev_pt_toggle__mini,
.lev_pt_toggle__compact {
	max-width: 260px;
}
.lev_pt_toggle__mini .lev_pt_toggle_btn,
.lev_pt_toggle__compact .lev_pt_toggle_btn {
	font-size: 12.5px;
	padding: 6px 10px;
}
.lev_pt_toggle__mini { margin-bottom: 14px; }

/* ---- Responsive: mini columns stack on small screens ---- */
@media (max-width: 560px) {
	.lev_pt_features_title { font-size: 18px; }
	/* KLOD 2026-06-24: mini cards are vertical now + the grid already collapses to 1 column via
	   the shared .lev_pt_grid breakpoint, so the old horizontal-row mobile overrides are gone. */
}

/* ============================================================================
   DARK MODE  (KLOD 2026-06-24 v1.4)  — auto-applies, zero theme/clean.css edits.
   drip2 sets data-theme="dark" on <html> (js/dc_ui.js) and exposes a global
   --dc_* palette there. We remap the plugin's own --lev-pt-* tokens to those
   globals, so every tokenised surface (plan cards, prices, borders, body text,
   CTAs, mini-tables, compare-matrix feature names) flips automatically — then
   patch the handful of HARDCODED light colours the remap can't reach. The full
   [lev_ptables] render nests the free box + compare matrix + mini tables INSIDE
   .lev_ptables, so scoping under it is enough.
   ============================================================================ */
html[data-theme="dark"] .lev_ptables {
	--lev-pt-ink:       var(--dc_text);          /* #fafafa  primary text    */
	--lev-pt-muted:     var(--dc_muted);         /* #a1a1aa  muted text       */
	--lev-pt-line:      var(--dc_border);        /* #27272a  borders/dividers */
	--lev-pt-card-bg:   var(--dc_elev);          /* #121215  card / panel bg  */
	--lev-pt-accent:    var(--dc_accent);        /* drip2 accent on dark      */
	--lev-pt-accent-dk: var(--dc_accent_dark);
	--lev-pt-sale:      var(--dc_accent);        /* emphasis price -> accent  */
	--lev-pt-strike:    var(--dc_softtext);      /* #71717a  struck price     */
	/* --lev-pt-badge stays gold (#f5a623) — reads fine on dark */
}

/* owner: plan cards a touch lighter than drip2's #121215 card default */
html[data-theme="dark"] .lev_pt_col { background: #333; }

/* hardcoded (non-token) light colours the remap can't reach */
html[data-theme="dark"] .lev_ptables .lev_pt_promo_banner { background: #ff6700; color: #fff; } /* brand orange stays in dark (v1.7); white text/pill keep contrast */
html[data-theme="dark"] .lev_ptables .lev_pt_toggle       { background: var(--dc_soft); }   /* was #eef1f3 light track */
html[data-theme="dark"] .lev_ptables .lev_pt_save_note    { color: var(--dc_muted); }       /* was #444 */
html[data-theme="dark"] .lev_ptables .lev_pt_cta          { background: transparent; }      /* was #fff -> outline button on the dark card; :hover/.is_highlight still fill accent */
html[data-theme="dark"] .lev_ptables .lev_pt_cta_saving   { color: var(--dc_muted); }       /* was #5a5f63 */
html[data-theme="dark"] .lev_ptables .lev_pt_col          { box-shadow: var(--dc_shadow); } /* faint light shadow -> dark */

/* compare matrix — feature text + bg/borders come via the token remap; these
   are hardcoded and must be patched (esp. the black zebra that's invisible on dark) */
html[data-theme="dark"] .lev_ptables .scf_head { background: var(--dc_soft); }              /* was faint accent tint */
html[data-theme="dark"] .lev_ptables .signup_compare_grid .scf_row:nth-child(even):not(.scf_head) { background: rgba(255,255,255,.03); } /* was rgba(0,0,0,.015) = invisible */
html[data-theme="dark"] .lev_ptables .scf_cell.yes { color: var(--dc_green); }              /* brighter check */
/* .scf_cell.no (#cf8a8a muted red) already reads on dark */

/* free-plan box: theme already dark-skins the bg/border (clean.css:2082) — make
   sure its inner text stays light/readable on that dark surface */
html[data-theme="dark"] .free_plan_box,
html[data-theme="dark"] .free_plan_box p,
html[data-theme="dark"] .free_plan_box li,
html[data-theme="dark"] .free_plan_box h2,
html[data-theme="dark"] .free_plan_box h3,
html[data-theme="dark"] .free_plan_box strong { color: var(--dc_text); }

/* ============================================================================
   WHOLE-CARD CLICKABLE  (KLOD 2026-06-24 v1.5) — applies in light + dark.
   The whole plan card / mini card is one click target: the CTA <a> already
   exists, so its ::after is stretched over the position:relative card and a
   click anywhere fires it. Card links never underline on hover. Pure CSS —
   no render.php / markup change.
   ============================================================================ */
.lev_pt_col, .lev_pt_mini_col { position: relative; cursor: pointer; }
.lev_pt_col .lev_pt_cta::after,
.lev_pt_mini_col .lev_pt_mini_cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lev_pt_col a, .lev_pt_col a:hover,
.lev_pt_mini_col a, .lev_pt_mini_col a:hover { text-decoration: none !important; }

/* END lev-ptables.css - v1.7 */