/**
 * Express Entry Hub - Page Content Styles (public fragments)
 * Uses semantic theme variables so the active color theme recolorizes these
 * fragments instantly. Standalone — does not depend on admin gold-series.css.
 */

/* Full-width transparent shell (CT standard — `.ct-gold-series`).
   CT's live CSS carries NO border and NO inset margin on this element; the
   theme background shows edge-to-edge. The previous gold line + 16px inset was
   cloned from an older CT revision and produced a visible "frame" around every
   public page (pricing escaped it because its markup came from a shortcode).

   ★ THE ONE PLACE IN THIS SHEET THAT DEFINES THE BASE SHELL (Phase E2).

   This element used to be declared TWICE in this file — here, and again ~260
   lines below under "Page wrapper (cloned CT layout shells)". The second copy
   was the smaller: it omitted `box-sizing: border-box` (which the first has, and
   which the shell needs, since the whole layout depends on padding not adding to
   width) and added `color`, inherited from `--color-text-body`. Because the later
   copy won, the shell rendered with NO `box-sizing` and with a body-text colour.

   That is the same defect class as the cascade bug in Phase A–C and the inline
   override in Phase E1 — one class, more than one definition, and the definition
   that renders is not the one being edited. Here the two happened to agree on
   most values, which is exactly why it survived: a divergence that is nearly
   benign is harder to notice than one that is not.

   `frontend.css` also defines this base class for the frontend admin panel, but
   THIS sheet loads first (enqueued on every public page from
   `express-entry-hub.php` and `class-shortcodes.php`), so the rules here are the
   ones that render on public pages. `verify-shell-single-source.php` now compares
   this sheet against `frontend.css` too, because for a long time it only compared
   `frontend.css` against `gold-series.css` and this copy was outside the guard.

   ★ `color` IS FOLDED IN RATHER THAN DROPPED: the deleted duplicate was the only
   place declaring it for this element in this sheet, so removing the block without
   carrying it forward would silently change public-page text colour. */
.eeh-gold-series {
	background: transparent;
	position: relative;
	z-index: 0;
	font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	color: var(--color-text-body, #e2e8f0);
	box-sizing: border-box;
}

/* Frontend admin / public panels: contained 1200px (user-approved option A). */
.eeh-gold-series--admin {
	max-width: 1200px;
	margin: 16px auto;
}

/* ---------- Frontend admin panel container ----------
   The /admin-panel/ shell (ct-gold-series.css `.ct-gold-series`) declares no
   max-width anywhere. On the BACKEND that is fine — wp-admin supplies
   `#wpwrap > #wpcontent > #wpbody > #wpbody-content > .wrap`, and that column
   caps the panel. The FRONTEND has none of that chain, so the panel ran
   edge-to-edge (stretched).

   SELECTOR IS BUILT FROM THE REAL DOM, not from the template source. The
   rendered panel is:

       <main class="ct-site-content">
         <div class="ct-gold-series">      <- direct child; NO .eeh-gold-series
           <header class="ct-top-bar">        ancestor exists
           <div class="ct-main-layout">

   An earlier attempt scoped this to `.eeh-gold-series > .ct-gold-series`, which
   matched the page-shell class visible in the template files but NOT the element
   actually rendered here — so the rule was inert and the panel stayed stretched.

   `!important` is required because pages.css loads at head position ~57 while
   ct-gold-series.css loads ~374 (later source order wins at equal specificity),
   and because .ct-gold-series carries an inline style in the markup. */
body.ct-plugin-page main.ct-site-content > .ct-gold-series {
	max-width: 1200px !important;   /* same shell as .eeh-page-container */
	margin: 16px auto !important;   /* centred */
	padding: 0 !important;
	box-sizing: border-box;
}

/* Three wp-admin offset compensations don't apply on the frontend:
   .ct-main-layout and .ct-top-bar carry `margin-left:8px;
   width:calc(100% - 24px)` (to clear wp-admin padding) and .ct-content carries
   `margin-top:-6px` (to pull up under the admin bar). Left as-is they misalign
   the panel against its own 1200px column. CT's reference resets the first two
   for exactly this reason; the third is the same class of offset. */
body.ct-plugin-page main.ct-site-content > .ct-gold-series .ct-main-layout {
	margin-left: 0 !important;
	width: 100% !important;
}

body.ct-plugin-page main.ct-site-content > .ct-gold-series .ct-top-bar {
	margin-left: 0 !important;
	width: 100% !important;
}

body.ct-plugin-page main.ct-site-content > .ct-gold-series .ct-content {
	margin-top: 0 !important;
}

/* Mobile gutters, mirroring `.eeh-page-container` (24px → 16px). */
@media (max-width: 600px) {
	body.ct-plugin-page main.ct-site-content > .ct-gold-series {
		margin: 8px auto !important;
		padding: 0 16px !important;
	}
}

/* Forced dark public body + text (CT standard: body defaults to dark even if
   theme variables fail to load). Overrides light theme fallbacks.

   ★ THE FALLBACK IS `#1a202c`, NOT `#0f172a`. It used to be a third colour —
   different from both the palette (`#1a202c`) and the effective background — so
   when the token failed to resolve the page jumped to an unrelated shade. The
   fallback now matches the `metallic-bronze` palette value, which is the theme
   the plugin forces on first activation (express-entry-hub.php:362).

   ★ `--color-page-bg-gradient` AND `--color-page-bg` are now emitted from ONE
   source — EEH_Color_Theme::get_effective_background() via get_all_vars() — so
   this rule and the inline `eeh-theme-bg-css` layer can no longer paint two
   different colours onto the same <body>. See the comment block in
   core/class-color-theme.php::get_all_vars(). */
body.eeh-plugin-page {
	background: var(--color-page-bg-gradient, #1a202c) !important;
	color: var(--color-text-on-page-bg, #ffffff) !important;
}

/* Single transparent content container — CT-exact (.ct-page-container).
   background:transparent lets the active theme backdrop show through instead
   of painting an opaque card inside the wrapper. */
.eeh-page-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	background: transparent;
	box-sizing: border-box;
}

/* ---------- Hero (Style 1: Dynamic) ---------- */
.eeh-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	padding: 24px 0 40px;
}

.eeh-hero-copy { min-width: 0; }

/* Single-column hero (no visual). Every non-home page lost its hero image, so
   the 1.1fr/0.9fr grid left the copy occupying only its own track and a dead
   half-width gap beside it. `eeh-hero-single` collapses the hero to one column
   so the copy spans the full container — the text-only CT hero standard. */
.eeh-hero-single {
	grid-template-columns: 1fr;
	gap: 0;
}

.eeh-hero-single .eeh-hero-copy {
	max-width: 820px;
}

/* Hero eyebrow: uppercase kicker above the H1 (was an inline style). */
.eeh-hero-eyebrow {
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--color-primary, #C2714A);
	margin: 0 0 14px;
}

/* Hero support note: small print under the action row. */
.eeh-hero-note {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-on-page-muted, rgba(255, 255, 255, 0.65));
	margin: 16px 0 0;
	max-width: 620px;
}

/* Tag/chip row in a hero (was an inline flex container). */
.eeh-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Chips inside the row carry their own gap, so drop the pill's block margin. */
.eeh-hero-pill-flat { margin: 0; }

/* Hero on a single-column page: keep the copy's measure readable rather than
   letting lines run the full 1152px until the next section starts. */
.eeh-hero-single .eeh-page-lead { max-width: 720px; }

.eeh-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--color-primary-light, #f5ebe5);
	border: 1px solid var(--color-border, rgba(194,113,74,0.2));
	color: var(--color-primary, #C2714A);
	margin-bottom: 16px;
}

.eeh-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary, #C2714A);
}

.eeh-page-title {
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-text-on-page-bg, #ffffff);
	margin: 0 0 16px;
}

.eeh-page-lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-on-page-muted, rgba(255, 255, 255, 0.65));
	margin: 0 0 24px;
	max-width: 560px;
}

.eeh-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.eeh-hero-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
}

.eeh-hero-btn-primary {
	background: var(--color-primary-gradient, linear-gradient(135deg, #C2714A, #E09A72));
	color: var(--color-primary-text, #1a202c);
}

.eeh-hero-btn-outline {
	background: transparent;
	border: 1px solid var(--color-border, rgba(194,113,74,0.3));
	color: var(--color-primary, #C2714A);
}

.eeh-hero-card {
	background: var(--color-secondary-gradient, linear-gradient(135deg, #2C5F6E, #4A8FA0));
	color: var(--color-secondary-text, #fff);
	border-radius: var(--card-radius, 16px);
	padding: 24px;
	box-shadow: var(--color-shadow, 0 15px 22px -8px rgba(194,113,74,0.08));
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 140px;
	text-align: center;
}

.eeh-hero-card-score {
	font-size: 16px;
	font-weight: 600;
	opacity: 0.9;
	line-height: 1.3;
}

.eeh-hero-card-score strong {
	font-size: 42px;
	font-weight: 900;
	display: block;
}

.eeh-hero-card-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; margin-top: 8px; }

.eeh-hero-card-alt { background: var(--color-primary-gradient, linear-gradient(135deg, #C2714A, #E09A72)); color: var(--color-primary-text, #1a202c); }

.eeh-hero-card-chips { font-size: 13px; font-weight: 700; margin-top: 8px; }

/* ---------- Feature grid ---------- */
.eeh-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px;
}

.eeh-feature-card {
	background: var(--color-secondary-gradient, linear-gradient(135deg, #2C5F6E, #4A8FA0));
	color: var(--color-secondary-text, #fff);
	border-radius: var(--card-radius, 16px);
	padding: 24px;
	box-shadow: var(--color-shadow, 0 15px 22px -8px rgba(194,113,74,0.08));
}

.eeh-feature-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: inherit; }
.eeh-feature-card p { font-size: 14px; line-height: 1.6; margin: 0; opacity: 0.9; }

/* ---------- Page wrapper (cloned CT layout shells) ---------- */
/*
 * ★ DELETED HERE: a SECOND `.eeh-gold-series` block (Phase E2).
 *
 * It read:
 *
 *     .eeh-gold-series {
 *       font-family: …;
 *       color: var(--color-text-body, #e2e8f0);
 *       position: relative;
 *       z-index: 0;
 *     }
 *
 * — the base shell again, 260 lines after the first definition, and the one that
 * actually rendered because `pages.css` is a single sheet and later wins. Its
 * `box-sizing: border-box` was missing, and `color` has been folded into the
 * surviving block above (see the note there).
 *
 * Recorded rather than silently removed, for the same reason the deleted shell
 * duplicates in `gold-series.css` are recorded: the next reader needs to know the
 * class is owned elsewhere, or they will helpfully re-add it.
 */

/* CT-exact (.ct-page-wrapper): single 1200px transparent shell. */
.eeh-page-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px 40px;
	background: transparent;
	position: relative;
	z-index: 1;
}

/* ---------- About grid ---------- */
.eeh-about-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 20px;
}

.eeh-about-card {
	background: var(--color-secondary-gradient, linear-gradient(135deg, #2C5F6E, #4A8FA0));
	color: var(--color-secondary-text, #fff);
	border-radius: var(--card-radius, 16px);
	padding: 24px;
	box-shadow: var(--color-shadow, 0 15px 22px -8px rgba(194,113,74,0.08));
}

.eeh-about-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: inherit; }
.eeh-about-card p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; opacity: 0.92; }
.eeh-about-card ul { margin: 0 0 0 18px; padding: 0; font-size: 14px; line-height: 1.8; }
.eeh-about-full { grid-column: 1 / -1; }

/* ---------- Steps (How It Works) ---------- */
.eeh-steps-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 20px;
	/* Cards in a row share the row's height (grid default is already stretch,
	   restated so `align-items` can never be changed without noticing). */
	align-items: stretch;
}

.eeh-step-card {
	background: var(--color-secondary-gradient, linear-gradient(135deg, #2C5F6E, #4A8FA0));
	color: var(--color-secondary-text, #fff);
	border-radius: var(--card-radius, 16px);
	padding: 24px;
	box-shadow: var(--color-shadow, 0 15px 22px -8px rgba(194,113,74,0.08));
	text-align: center;
	position: relative;
	/* Even distribution: every card fills its grid track and the description
	   flexes, so titles/descriptions line up across a row even when one card
	   (e.g. step 4) carries noticeably more copy than its neighbour. */
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	/* Clears the absolutely-positioned number badge (top:14px) so the centred
	   icon never collides with it on a narrow card. */
	padding-top: 52px;
}

.eeh-step-number {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 50%;
}

.eeh-step-icon { display: block; font-size: 36px; margin-bottom: 12px; }
.eeh-step-title { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: inherit; }
.eeh-step-desc { font-size: 14px; line-height: 1.6; margin: 0; opacity: 0.92; flex: 1; }

/* ---------- Feature icon/title/desc (cloned CT feature-card anatomy) ---------- */
.eeh-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px;
}

.eeh-feature-icon { display: block; font-size: 32px; margin-bottom: 12px; }
.eeh-feature-title { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: inherit; }
.eeh-feature-desc { font-size: 14px; line-height: 1.6; margin: 0; opacity: 0.9; }

/* ---------- CT card anatomy (unified card) ----------
   Was flat glass (`rgba(255,255,255,0.03)` + backdrop blur). At 3% white over
   the dark page backdrop the card had no visible surface, so every page built
   from `.eeh-card` (faq, support, privacy, terms, ai-disclaimer) read as
   transparent while the `.eeh-step-card` / `.eeh-about-card` /
   `.eeh-feature-card` pages read as solid. Now uses the SAME theme-token
   recipe established for the frontend cards (frontend.css "CT-exact metallic
   card gradient — was flat glass"), so the card is opaque and follows the
   backend-selected palette. No blur: an opaque surface has nothing to blur. */
.eeh-card {
	background: var(--card-bg, linear-gradient(135deg, #2C5F6E 0%, #3A7A8C 50%, #4A8FA0 100%));
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--color-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
	color: var(--color-text-on-page-bg, #fff);
}

.eeh-card-icon { font-size: 48px; margin-bottom: 12px; display: block; }
.eeh-card-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: inherit; }
.eeh-card-text { font-size: 13px; line-height: 1.5; margin-bottom: 16px; opacity: 0.85; }

.eeh-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	padding: 20px 0;
}

.eeh-card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.eeh-card-full { grid-column: 1 / -1; width: 100%; }

/* Two-up card row: for section pairs that read as a balanced left/right
   comparison instead of two stacked full-width slabs. */
.eeh-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Small-print footnote at the bottom of a card (was an inline 12px div). */
.eeh-card-note {
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.7;
	margin: 0;
}

/* Bullet list inside a card — same measure/leading as the rest of the copy. */
.eeh-card-list {
	padding-left: 20px;
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.92;
}

/* ---------- Section headers (CT standard) ---------- */
.eeh-section-header { text-align: center; margin-bottom: 20px; }
.eeh-section-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--color-text-heading, #fff); }

/* ---------- Buttons (CT .ct-btn anatomy) ---------- */
.eeh-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	background: var(--color-card-bg, #ffffff);
	color: var(--color-text-body, #1a202c) !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}
.eeh-btn:hover {
	background: var(--bronze-metallic-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
	border-color: rgba(205, 133, 63, 0.5);
	color: var(--color-text-on-dark, #fff) !important;
	text-decoration: none;
}
.eeh-btn-primary {
	background: var(--bronze-metallic-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
	border-color: rgba(205, 133, 63, 0.4);
	color: #fff !important;
}
.eeh-btn-sm { padding: 8px 16px; font-size: 12px; }

/* ---------- CTA banner ---------- */
.eeh-cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 32px;
	padding: 24px 28px;
	border-radius: var(--card-radius, 16px);
	background: var(--color-primary-gradient, linear-gradient(135deg, #C2714A, #E09A72));
	color: var(--color-primary-text, #1a202c);
	box-shadow: var(--color-shadow, 0 15px 22px -8px rgba(194,113,74,0.08));
}

.eeh-cta-banner h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: inherit; }
.eeh-cta-banner p { font-size: 14px; margin: 0; opacity: 0.85; }

/* ---------- Generic content (privacy/terms/about/contact/faq) ---------- */
.eeh-prose { max-width: 800px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.eeh-hero { grid-template-columns: 1fr; }
	.eeh-feature-grid, .eeh-features-grid, .eeh-about-section, .eeh-steps-section { grid-template-columns: 1fr 1fr; }
	.eeh-card-grid-2 { grid-template-columns: 1fr; }
	.eeh-page-title { font-size: 32px; }
	.eeh-cta-banner { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
	/* No frame on any breakpoint (CT standard) — only spacing collapses. */
	.eeh-gold-series--admin { margin: 8px auto; }
	.eeh-feature-grid { grid-template-columns: 1fr; }
	.eeh-page-wrapper { padding: 8px 16px 32px; }
	.eeh-page-container { padding: 0 16px; }
	.eeh-page-title { font-size: 26px; }
	.eeh-hero-card-score strong { font-size: 32px; }
}

/* ============================================================
   Gold Series public-page primitives (CT-Adopt)
   Breadcrumb + Modal — EEH tokens, CT standard
   ============================================================ */
.eeh-breadcrumb {
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 8px;
}
.eeh-breadcrumb a {
  color: #cd853f;
  text-decoration: none;
}
.eeh-breadcrumb a:hover {
  color: #daa520;
  text-decoration: underline;
}
.eeh-breadcrumb-sep {
  margin: 0 6px;
  color: var(--color-text-muted, #64748b);
}

.eeh-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.eeh-modal-content {
  background: var(--color-card-bg, #ffffff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: eeh-modal-in 0.2s ease-out;
}
@keyframes eeh-modal-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.eeh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}
.eeh-modal-header h3 {
  color: var(--color-text-heading, #1a202c);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.eeh-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #64748b);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}
.eeh-modal-close:hover {
  color: var(--color-text-heading, #1a202c);
}
.eeh-modal-body {
  padding: 24px;
}

/* ---------- Autonomy Manifest (AUTONOMY-01 F1/F3/F7) ---------- */
.eeh-autonomy-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 8px;
}
.eeh-autonomy-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	background: var(--color-card-bg, #ffffff);
	color: var(--color-text-body, #1a202c);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
.eeh-autonomy-section { margin: 40px 0; }
.eeh-autonomy-lead {
	font-size: 15px;
	line-height: 1.7;
	opacity: 0.9;
	margin: 10px 0 20px;
	max-width: 780px;
}
.eeh-autonomy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 20px;
}
.eeh-autonomy-card {
	padding: 20px;
	border-radius: var(--card-radius, 16px);
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	background: var(--card-bg, var(--color-card-bg, #ffffff));
}
.eeh-autonomy-icon { font-size: 22px; display: block; margin-bottom: 10px; }
.eeh-autonomy-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--color-text-heading, #1a202c);
}
.eeh-autonomy-card-desc {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	opacity: 0.9;
}
.eeh-country-intel-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-top: 20px;
}
.eeh-country-intel-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border-radius: var(--card-radius, 16px);
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	background: var(--card-bg, var(--color-card-bg, #ffffff));
	text-align: center;
}
.eeh-country-intel-flag { font-size: 30px; line-height: 1; }
.eeh-country-intel-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-heading, #1a202c);
}
.eeh-country-intel-note { font-size: 12px; line-height: 1.5; opacity: 0.8; }
.eeh-country-intel-tag {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	opacity: 0.7;
}
.eeh-autonomy-note {
	padding: 22px;
	border-radius: var(--card-radius, 16px);
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	background: var(--card-bg, var(--color-card-bg, #ffffff));
}
.eeh-autonomy-note p {
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 12px;
	opacity: 0.92;
}
.eeh-autonomy-note p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.eeh-autonomy-grid { grid-template-columns: 1fr 1fr; }
	.eeh-country-intel-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.eeh-autonomy-grid,
	.eeh-country-intel-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DISCOVERED-FEATURES-01 (2026-10-09)
   Country-agent funnel surfaces on PUBLIC shortcode pages:
     • .eeh-try-strip   — FEATURE 2, the "Meet a country agent" strip
     • .eeh-round-table — FEATURE 10, the paid multi-agent round table
     • .eeh-freshness-*  — FEATURE 8, the knowledge-freshness badge
   ========================================================================== */
.eeh-try-strip {
	max-width: 1100px;
	margin: 32px auto;
	padding: 0 20px;
	text-align: center;
}
.eeh-try-strip-title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}
.eeh-try-strip-sub {
	margin: 0 0 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}
.eeh-try-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.eeh-try-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px;
	border-radius: 16px;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.eeh-try-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.3);
}
.eeh-try-card-flag { font-size: 26px; line-height: 1; }
.eeh-try-card-name { font-size: 14px; font-weight: 600; color: #fff; }
.eeh-try-card-role { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.eeh-try-card-cta {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #fbbf24;
}
.eeh-try-strip-note {
	margin: 14px 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 1024px) { .eeh-try-strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .eeh-try-strip-grid { grid-template-columns: 1fr; } }

/* FEATURE 8 — knowledge-freshness badge. */
.eeh-consultants-freshness { margin: 0 0 10px; }
.eeh-freshness-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 20px;
	color: #6ee7b7;
	background: rgba(16, 185, 129, 0.14);
	border: 1px solid rgba(16, 185, 129, 0.32);
}
.eeh-freshness-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #34d399;
}

/* FEATURE 10 — the paid multi-agent round table. */
.eeh-round-table {
	margin: 18px 0;
	padding: 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.eeh-round-table-title { margin: 0 0 4px; font-size: 17px; color: #fff; }
.eeh-round-table-sub { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.68); }
.eeh-round-table-row { display: flex; gap: 8px; flex-wrap: wrap; }
.eeh-round-table-input {
	flex: 1; min-width: 220px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.2);
	color: #fff; font-size: 14px;
}
.eeh-round-table-go {
	padding: 10px 18px;
	border-radius: 10px;
	border: none;
	background: var(--color-primary-gradient, #C2714A);
	color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.eeh-round-table-go:disabled { opacity: 0.6; cursor: default; }
.eeh-round-table-results {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.eeh-round-card {
	padding: 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.eeh-round-card-head { font-size: 13px; font-weight: 600; color: #fbbf24; margin-bottom: 6px; }
.eeh-round-card-body { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 768px) { .eeh-round-table-results { grid-template-columns: 1fr; } }



/* ==========================================================================
   DISCOVERED-FEATURES-01 (2026-10-09)
   The country-agent funnel surfaces that live on PUBLIC pages:
     • .eeh-try-strip  — FEATURE 2, the "Meet a country agent" strip
   Plus the dashboard-side freshness badge (FEATURE 8) and round table
   (FEATURE 10). Kept in pages.css because they render on shortcode pages.
   ========================================================================== */
.eeh-try-strip {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 20px;
    text-align: center;
}
.eeh-try-strip-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.eeh-try-strip-sub {
    margin: 0 0 22px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}
.eeh-try-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.eeh-try-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.eeh-try-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}
.eeh-try-card-flag { font-size: 26px; line-height: 1; }
.eeh-try-card-name { font-size: 14px; font-weight: 600; color: #fff; }
.eeh-try-card-role { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.eeh-try-card-cta {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
}
.eeh-try-strip-note {
    margin: 14px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 1024px) { .eeh-try-strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .eeh-try-strip-grid { grid-template-columns: 1fr; } }

/* FEATURE 8 — knowledge-freshness badge (dashboard + strip). */
.eeh-consultants-freshness { margin: 0 0 10px; }
.eeh-freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.32);
}
.eeh-freshness-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #34d399;
}

/* FEATURE 10 — the paid multi-agent round table. */
.eeh-round-table {
    margin: 18px 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.eeh-round-table-title { margin: 0 0 4px; font-size: 17px; color: #fff; }
.eeh-round-table-sub { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.68); }
.eeh-round-table-row { display: flex; gap: 8px; flex-wrap: wrap; }
.eeh-round-table-input {
    flex: 1; min-width: 220px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: #fff; font-size: 14px;
}
.eeh-round-table-go {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: var(--color-primary-gradient, #C2714A);
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.eeh-round-table-go:disabled { opacity: 0.6; cursor: default; }
.eeh-round-table-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.eeh-round-card {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.eeh-round-card-head { font-size: 13px; font-weight: 600; color: #fbbf24; margin-bottom: 6px; }
.eeh-round-card-body { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 768px) { .eeh-round-table-results { grid-template-columns: 1fr; } }