/*
 * TLA orbital design system · site-wide (Partner Hub 1.0.368)
 *
 * The homepage's orbital design (homepage-v3-367.css) is the source of truth;
 * this file carries it to every other page. It applies only when
 * OrbitalSite marks the page with <html data-tla-orbital="1">.
 *
 *   1. Tokens: the orbital palette, light (default) and dark.
 *   2. The site's own tokens (Customizer --tla-*, Elementor's kit colours)
 *      pointed at the orbital palette, and the targets for OrbitalSite's
 *      palette swap (--orb-x-NN: legacy pink/blue/cyan, navies, greys).
 *   3. Page canvas.
 *   4. Background system, the same classes as the homepage, for any page.
 *   5. Heroes: the orbital atmosphere and rings.
 *   6. Call-to-action bands: midnight navy with rings, in both themes.
 *   7. Buttons: champagne gold primary, glass secondary, 12px corners.
 *   8. Cards, labels and accents.
 *   9. Page families that keep their own colour tokens.
 *  10. Forms (Fluent Forms, Paid Memberships Pro, WooCommerce).
 *  11. (The footer follows the theme tokens, as on the homepage.)
 *  12. Partner Hub pages: the orbital rings over the hub's navy.
 *
 * Specificity starts at html[data-tla-orbital] body (0,1,2) so it settles
 * page-level styles printed later in the page without needing !important;
 * !important is used only where the page's own rule already has it.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
html[data-tla-orbital] {
	--orb-bg: #f7f9fc;
	--orb-bg-2: #eef3f8;
	--orb-surface: #ffffff;
	--orb-mist: #e4f2fa;
	--orb-powder: #d6ebf8;
	--orb-text: #10233c;
	--orb-body: #2b3d55;
	--orb-muted: #4d5e76;
	--orb-soft: #5f6f86;
	--orb-faint: #7d8ea4;
	--orb-line: rgba(16, 35, 60, .10);
	--orb-line-2: rgba(16, 35, 60, .16);
	--orb-accent: #1662c4;
	--orb-accent-ink: #0f52a8;
	--orb-accent-soft: rgba(22, 98, 196, .08);
	--orb-accent-line: rgba(22, 98, 196, .30);
	--orb-cyan: #1f9fbd;
	--orb-core: #5ec7d8;
	--orb-gold: #b8964f;
	--orb-card: #ffffff;
	--orb-card-line: rgba(16, 35, 60, .09);
	--orb-glass: rgba(255, 255, 255, .62);
	--orb-gold-btn: linear-gradient(135deg, #e0c58b 0%, #c7a96b 52%, #b08d4d 100%);
	--orb-gold-btn-hover: linear-gradient(135deg, #e8d09c 0%, #d2b578 52%, #bb9858 100%);
	--orb-gold-text: #1d1606;
	--orb-gold-glow: 0 10px 24px -10px rgba(176, 141, 77, .7);
	--orb-shadow: 0 1px 2px rgba(16, 35, 60, .06), 0 14px 34px -14px rgba(16, 35, 60, .22);
	--orb-shadow-hover: 0 2px 6px rgba(16, 35, 60, .08), 0 24px 48px -18px rgba(16, 35, 60, .30);
	--orb-shadow-lg: 0 2px 6px rgba(16, 35, 60, .06), 0 32px 70px -26px rgba(16, 35, 60, .32);
	--orb-focus: #1662c4;
	--orb-hero:
		radial-gradient(820px 620px at 78% 30%, rgba(94, 199, 216, .20) 0%, rgba(94, 199, 216, 0) 62%),
		radial-gradient(720px 520px at 104% -6%, rgba(214, 235, 248, .95) 0%, rgba(214, 235, 248, 0) 64%),
		radial-gradient(600px 460px at -6% 108%, rgba(228, 242, 250, .9) 0%, rgba(228, 242, 250, 0) 66%),
		linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
	--orb-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 1200' preserveAspectRatio='xMaxYMin slice'%3E%3Cdefs%3E%3CradialGradient id='c'%3E%3Cstop offset='0' stop-color='%235ec7d8' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%235ec7d8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect x='-700' y='-700' width='1400' height='1400' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(1940 330)'%3E%3Ccircle r='300' fill='url(%23c)'/%3E%3Cg mask='url(%23m)'%3E%3Cg fill='none' stroke='%231f80b0' stroke-opacity='.16' stroke-width='1.2'%3E%3Ccircle r='96'/%3E%3Ccircle r='168' stroke-opacity='.30'/%3E%3Ccircle r='248'/%3E%3Ccircle r='336' stroke-opacity='.30'/%3E%3Ccircle r='432'/%3E%3Ccircle r='536' stroke-dasharray='2 10'/%3E%3Ccircle r='648'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0-648A648 648 0 0 1 591-266' fill='none' stroke='%231f9fbd' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M-432 0A432 432 0 0 1-248-354' fill='none' stroke='%23b8964f' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='591' cy='-266' r='4' fill='%231f9fbd'/%3E%3Ccircle cx='-248' cy='-354' r='3.5' fill='%23b8964f'/%3E%3C/g%3E%3C/svg%3E");
	/* Always dark: call-to-action bands and the footer. */
	--orb-band:
		radial-gradient(760px 460px at 86% 0%, rgba(41, 199, 229, .16) 0%, rgba(41, 199, 229, 0) 64%),
		radial-gradient(680px 420px at 0% 100%, rgba(76, 120, 211, .20) 0%, rgba(76, 120, 211, 0) 64%),
		linear-gradient(160deg, #0d1b31 0%, #081321 100%);
	--orb-rings-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 1200' preserveAspectRatio='xMaxYMin slice'%3E%3Cdefs%3E%3CradialGradient id='c'%3E%3Cstop offset='0' stop-color='%2329c7e5' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%2329c7e5' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect x='-700' y='-700' width='1400' height='1400' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(1940 330)'%3E%3Ccircle r='300' fill='url(%23c)'/%3E%3Cg mask='url(%23m)'%3E%3Cg fill='none' stroke='%235ec7d8' stroke-opacity='.14' stroke-width='1.2'%3E%3Ccircle r='96'/%3E%3Ccircle r='168' stroke-opacity='.28'/%3E%3Ccircle r='248'/%3E%3Ccircle r='336' stroke-opacity='.28'/%3E%3Ccircle r='432'/%3E%3Ccircle r='536' stroke-dasharray='2 10'/%3E%3Ccircle r='648'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0-648A648 648 0 0 1 591-266' fill='none' stroke='%2329c7e5' stroke-opacity='.75' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M-432 0A432 432 0 0 1-248-354' fill='none' stroke='%23c7a96b' stroke-opacity='.65' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='591' cy='-266' r='4' fill='%2329c7e5'/%3E%3Ccircle cx='-248' cy='-354' r='3.5' fill='%23c7a96b'/%3E%3C/g%3E%3C/svg%3E");

	/* OrbitalSite palette swap. 01-04: text (theme-aware; mid tones that read
	   on white and on the navy sections some light pages keep); 11-14: the
	   same accents as paint, constant and deep enough for white text on top. */
	--orb-x-01: #3b6fd0;
	--orb-x-02: #1a73d1;
	--orb-x-03: #1b8aa8;
	--orb-x-04: #1a6ac4;
	--orb-x-11: #2d5fb8;
	--orb-x-12: #1f7fd1;
	--orb-x-13: #1f9fbd;
	--orb-x-14: #1668bd;
	--orb-x-21: #081321;
	--orb-x-22: #0a1729;
	--orb-x-23: #0f1d33;
	--orb-x-24: #14233a;
	--orb-x-31: #10233c;
	--orb-x-32: #253750;
	--orb-x-41: #f7f9fc;
	--orb-x-42: #eef3f8;
	--orb-x-43: #f8fafd;
	--orb-x-45: #bfe7f0;
	--orb-x-51: #4d5e76;
	--orb-x-52: #7d8ea4;
	--orb-x-53: #a3b1c2;
	--orb-x-54: #c9d4e2;
	--orb-x-55: #eef2f7;
	--orb-x-61: 45, 95, 184;
	--orb-x-62: 31, 127, 209;
	--orb-x-63: 31, 159, 189;
	--orb-x-71: 16, 35, 60;
}
html[data-tla-orbital][data-tla-theme="dark"] {
	--orb-bg: #081321;
	--orb-bg-2: #0b1729;
	--orb-surface: #0c1a2e;
	--orb-mist: #0d1628;
	--orb-powder: #151637;
	--orb-text: #f5f7fa;
	--orb-body: #d0dae6;
	--orb-muted: #a9b6c6;
	--orb-soft: #8fa0b6;
	--orb-faint: #75869b;
	--orb-line: rgba(150, 180, 230, .14);
	--orb-line-2: rgba(150, 180, 230, .24);
	--orb-accent: #5ec7d8;
	--orb-accent-ink: #7fd6e4;
	--orb-accent-soft: rgba(94, 199, 216, .10);
	--orb-accent-line: rgba(94, 199, 216, .34);
	--orb-cyan: #29c7e5;
	--orb-core: #29c7e5;
	--orb-gold: #c7a96b;
	--orb-card: #0f1d33;
	--orb-card-line: rgba(150, 190, 240, .14);
	--orb-glass: rgba(16, 27, 49, .55);
	--orb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .7);
	--orb-shadow-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 26px 54px -18px rgba(0, 0, 0, .8);
	--orb-shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 36px 80px -28px rgba(0, 0, 0, .8);
	--orb-focus: #7fd6e4;
	--orb-hero:
		radial-gradient(860px 640px at 76% 30%, rgba(41, 199, 229, .15) 0%, rgba(41, 199, 229, 0) 62%),
		radial-gradient(780px 560px at 104% 104%, rgba(76, 120, 211, .20) 0%, rgba(76, 120, 211, 0) 62%),
		radial-gradient(760px 520px at -4% -4%, rgba(21, 22, 55, .95) 0%, rgba(21, 22, 55, 0) 70%),
		linear-gradient(180deg, #0a1729 0%, #081321 100%);
	--orb-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 1200' preserveAspectRatio='xMaxYMin slice'%3E%3Cdefs%3E%3CradialGradient id='c'%3E%3Cstop offset='0' stop-color='%2329c7e5' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%2329c7e5' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect x='-700' y='-700' width='1400' height='1400' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(1940 330)'%3E%3Ccircle r='300' fill='url(%23c)'/%3E%3Cg mask='url(%23m)'%3E%3Cg fill='none' stroke='%235ec7d8' stroke-opacity='.14' stroke-width='1.2'%3E%3Ccircle r='96'/%3E%3Ccircle r='168' stroke-opacity='.28'/%3E%3Ccircle r='248'/%3E%3Ccircle r='336' stroke-opacity='.28'/%3E%3Ccircle r='432'/%3E%3Ccircle r='536' stroke-dasharray='2 10'/%3E%3Ccircle r='648'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0-648A648 648 0 0 1 591-266' fill='none' stroke='%2329c7e5' stroke-opacity='.75' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M-432 0A432 432 0 0 1-248-354' fill='none' stroke='%23c7a96b' stroke-opacity='.65' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='591' cy='-266' r='4' fill='%2329c7e5'/%3E%3Ccircle cx='-248' cy='-354' r='3.5' fill='%23c7a96b'/%3E%3C/g%3E%3C/svg%3E");
	--orb-x-01: #9fdcea;
	--orb-x-02: #5ec7d8;
	--orb-x-03: #29c7e5;
	--orb-x-04: #7fd6e4;
}

/* ── 2. The site's own tokens ──────────────────────────────────────────── */
/* Customizer "TLA global theme variables" (html[data-tla-theme]) and the
   page wrappers that reuse the same names. */
html[data-tla-orbital][data-tla-theme] {
	--tla-bg: var(--orb-bg);
	--tla-bg-alt: var(--orb-surface);
	--tla-surface: var(--orb-surface);
	--tla-surface-soft: var(--orb-bg-2);
	--tla-card: var(--orb-card);
	--tla-card-border: var(--orb-card-line);
	--tla-text: var(--orb-body);
	--tla-muted: var(--orb-muted);
	--tla-muted-light: var(--orb-faint);
	--tla-heading: var(--orb-text);
	--tla-pink: var(--orb-x-01);
	--tla-cyan: var(--orb-cyan);
	--tla-blue: var(--orb-accent);
	--tla-navy: #081321;
	--tla-pink-soft: var(--orb-accent-soft);
	--tla-cyan-soft: rgba(31, 159, 189, .10);
	--tla-blue-soft: var(--orb-accent-soft);
	--tla-badge-bg: var(--orb-accent-soft);
	--tla-divider: var(--orb-line);
	--tla-shadow-sm: 0 1px 3px rgba(16, 35, 60, .07);
	--tla-shadow: var(--orb-shadow);
	--tla-shadow-lg: var(--orb-shadow-lg);
	--tla-shadow-soft: var(--orb-shadow);
	--tla-cta-primary-bg: var(--orb-gold-btn);
	--tla-cta-secondary-border: var(--orb-line-2);
	--tla-cta-border: var(--orb-line-2);
}
/* Elementor's kit (on <body>): magenta primary and bright blue accent. */
html[data-tla-orbital] body {
	--e-global-color-primary: var(--orb-accent);
	--e-global-color-secondary: var(--orb-cyan);
	--e-global-color-accent: var(--orb-accent);
}

/* ── 3. Page canvas ────────────────────────────────────────────────────── */
html[data-tla-orbital] body:not(.tla-ph-public-dark-page) { background-color: var(--orb-bg); }
html[data-tla-orbital] ::selection { background: rgba(94, 199, 216, .32); }
/* Plain links: the theme's default is a pink (#c36). Zero extra specificity,
   so any page or component colour still wins. */
:where(html[data-tla-orbital]) a { color: var(--orb-accent); }
:where(html[data-tla-orbital]) a:is(:hover, :active) { color: var(--orb-accent-ink); }
html[data-tla-orbital] body :is(a, button, summary, input, select, textarea):focus-visible { outline-color: var(--orb-focus); }

/* ── 4. Background system (any page, any Elementor container) ──────────── */
/* The homepage (.tlh3) paints these classes itself, dark sections included. */
html[data-tla-orbital] body .tla-orb-field:not(.tlh3 *) { position: relative; background: var(--orb-rings) right top / cover no-repeat, var(--orb-hero); }
html[data-tla-orbital] body .tla-orb-atmos:not(.tlh3 *) {
	position: relative;
	background:
		radial-gradient(900px 480px at 85% 0%, color-mix(in srgb, var(--orb-powder) 70%, transparent) 0%, transparent 70%),
		linear-gradient(180deg, var(--orb-bg) 0%, var(--orb-bg-2) 100%);
}
html[data-tla-orbital] body .tla-orb-atmos.is-mist:not(.tlh3 *) {
	background:
		radial-gradient(800px 460px at 0% 100%, color-mix(in srgb, var(--orb-mist) 90%, transparent) 0%, transparent 70%),
		linear-gradient(160deg, var(--orb-bg-2) 0%, var(--orb-mist) 100%);
}
html[data-tla-orbital] body .tla-orb-editorial:not(.tlh3 *) { background: var(--orb-bg); }
html[data-tla-orbital] body .tla-orb-night:not(.tlh3 *) { background: var(--orb-rings-night) right top / cover no-repeat, var(--orb-band); color: #f5f7fa; }

/* ── 5. Heroes ─────────────────────────────────────────────────────────── */
/* The page heroes that paint from tokens get the full orbital atmosphere. */
html[data-tla-orbital] body :is(
	.tla-llp .llp-hero,
	#tla-business-membership-page .hero,
	.tlap-hero,
	.tla-kb-article-hero,
	.tla-kb-hero,
	.mtd-hero,
	.chk2-hero,
	.tla-document-suite-hero
) {
	background: var(--orb-rings) right top / cover no-repeat, var(--orb-hero) !important;
}
/* Any other hero in an HTML or shortcode widget keeps its own colours and
   gains the rings, drawn over its background and under its content. */
html[data-tla-orbital] body :is(.elementor-widget-html, .elementor-widget-shortcode) :is([class$="-hero"], [class*="-hero "]):not(.tla-ph-shell *):not(.tlh3 *) {
	border-image-source: var(--orb-rings);
	border-image-slice: 0 fill;
	border-image-width: 0;
	border-image-repeat: stretch;
}
/* The light hero leaves the copy on the left calm and clear. */
html[data-tla-orbital] body .tla-llp .llp-hero { border-bottom-color: var(--orb-line); }
html[data-tla-orbital] body .mtd-hero .mtd-nebula,
html[data-tla-orbital] body .tla-kb-article-hero::before { opacity: .35; }

/* ── 6. Call-to-action bands ───────────────────────────────────────────── */
html[data-tla-orbital] body :is(
	.tla-llp .llp-final,
	.tla-contact-v2 .tc-hero,
	.tla-about .ab-cta,
	.tla-about .ab-band,
	.tlap-cta-band,
	#tla-business-membership-page .cta,
	.chk2-band,
	.tla-kb-article-cta-band
) {
	background: var(--orb-rings-night) right top / cover no-repeat, var(--orb-band) !important;
	border-color: rgba(150, 190, 240, .16) !important;
	color: #f5f7fa;
}
html[data-tla-orbital] body :is(.tla-kb-article-cta-band) :is(h2, h3, .tla-kb-article-cta-h, [class*="-title"], [class*="-h2"]) { color: #f5f7fa !important; -webkit-text-fill-color: #f5f7fa !important; background: none !important; }
html[data-tla-orbital] body :is(.tla-kb-article-cta-band) :is(p, .tla-kb-article-cta-sub, [class*="-sub"], [class*="-lead"]) { color: #c9d4e2 !important; }
html[data-tla-orbital] body .tla-kb-article-cta-band::before { display: none; }
/* Always-dark sections keep the dark theme's light accent text. */
html[data-tla-orbital] body :is(.tla-llp .llp-final, .tla-contact-v2 .tc-hero, .ab-cta, .ab-band, .tlap-cta-band, #tla-business-membership-page .cta, .chk2-band, .tla-kb-article-cta-band, .tla-orb-night),
html[data-tla-orbital] body.tla-ph-public-dark-page {
	--orb-x-01: #9fdcea;
	--orb-x-02: #5ec7d8;
	--orb-x-03: #29c7e5;
	--orb-x-04: #7fd6e4;
}
/* Older pages that hard-code a dark panel inline (the knowledge hubs): the same
   light accents, links included, and plain underlined links on coloured boxes inside. */
html[data-tla-orbital] body :is(.tla-knowledge-section, [style*="background-color:#202022"], [style*="background-color: #202022"], [style*="background:#202022"], [style*="background: #202022"]) {
	--orb-x-01: #9fdcea;
	--orb-x-02: #5ec7d8;
	--orb-x-03: #29c7e5;
	--orb-x-04: #7fd6e4;
	--orb-accent: #7fd6e4;
	--orb-accent-ink: #b5e9f1;
}
html[data-tla-orbital] body .tla-knowledge-section [style*="background"] a:not([style*="color"]) { color: inherit; text-decoration: underline; }
/* Status badges printed over sector photos (Partner Hub join page): a navy pill so they read on light photos. */
html[data-tla-orbital] body .tphx-sector-badge { padding: 4px 10px; border-radius: 999px; background: rgba(8, 19, 33, .72); line-height: 1.3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-tla-orbital] body .tla-contact-v2 .tc-hero::before { opacity: .45; }

/* ── 7. Buttons ────────────────────────────────────────────────────────── */
/* Primary: champagne gold, as on the homepage. */
html[data-tla-orbital] body :is(
	.tla-llp .llp-btn-primary,
	#tla-business-membership-page .btn-primary,
	.tla-about .ab-btn-pri,
	.tlap-btn-pri,
	.tla-kb-btn-pri,
	.mtd-btn-pri,
	.chk2-btn-pri,
	.chk2-hero .chk2-btn-green,
	.tla-contact-v2 .tc-hero .tc-btn:not(.tc-btn-alt),
	.tla-gate-btn,
	.tla-lock-btn,
	.elementor-widget-html :is([class$="-btn-pri"], [class*="-btn-pri "], [class$="btn-primary"], [class*="btn-primary "], [class$="btn--primary"], [class*="btn--primary "], [class$="-cta-btn"], [class*="-cta-btn "]):not([class*="tla-ph-"])
):not(:disabled):not([aria-disabled="true"]),
html[data-tla-orbital] body :is(.tla-llp, #tla-business-membership-page, .tla-about, .tlap, .mtd, .chk2-wrap, .tla-kb) :is(.llp-btn-primary, .btn-primary, .ab-btn-pri, .tlap-btn-pri, .mtd-btn-pri, .chk2-btn-pri, .tla-kb-btn-pri):is(:link, :visited, :hover, :focus) {
	background: var(--orb-gold-btn) !important;
	border-color: rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
}
html[data-tla-orbital] body :is(
	.tla-llp .llp-btn-primary,
	#tla-business-membership-page .btn-primary,
	.tla-about .ab-btn-pri,
	.tlap-btn-pri,
	.tla-kb-btn-pri,
	.mtd-btn-pri,
	.chk2-btn-pri,
	.chk2-hero .chk2-btn-green,
	.tla-contact-v2 .tc-hero .tc-btn:not(.tc-btn-alt),
	.tla-gate-btn,
	.tla-lock-btn,
	.elementor-widget-html :is([class$="-btn-pri"], [class*="-btn-pri "], [class$="btn-primary"], [class*="btn-primary "], [class$="btn--primary"], [class*="btn--primary "], [class$="-cta-btn"], [class*="-cta-btn "]):not([class*="tla-ph-"])
):not(:disabled):hover {
	background: var(--orb-gold-btn-hover) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(176, 141, 77, .8) !important;
}
/* Every legacy pill becomes the homepage's 12px button. */
html[data-tla-orbital] body :is(.llp-btn, #tla-business-membership-page .btn, .ab-btn, .tlap-btn, .tla-kb-btn, .mtd-btn, .chk2-btn, .tla-gate-btn, .tla-lock-btn) { border-radius: 12px !important; }
/* Secondary: quiet glass, accent on hover. */
html[data-tla-orbital] body :is(
	.tla-llp .llp-btn-ghost,
	#tla-business-membership-page .btn-secondary,
	.tla-about .ab-btn-sec,
	.tlap-btn-sec,
	.tla-kb-btn-sec,
	.mtd-btn-sec,
	.chk2-btn-sec
) {
	background: var(--orb-glass) !important;
	border-color: var(--orb-line-2) !important;
	color: var(--orb-text) !important;
	-webkit-text-fill-color: var(--orb-text) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
html[data-tla-orbital] body :is(
	.tla-llp .llp-btn-ghost,
	#tla-business-membership-page .btn-secondary,
	.tla-about .ab-btn-sec,
	.tlap-btn-sec,
	.tla-kb-btn-sec,
	.mtd-btn-sec,
	.chk2-btn-sec
):hover {
	border-color: var(--orb-accent) !important;
	color: var(--orb-accent) !important;
	-webkit-text-fill-color: var(--orb-accent) !important;
	background: var(--orb-accent-soft) !important;
}
/* Other coloured buttons (cyan, pink, green): solid orbital blue. */
html[data-tla-orbital] body :is(.tla-kb-btn-cy, .tla-kb-btn-pk, .chk2-btn-cyan) {
	background: var(--orb-x-12) !important;
	box-shadow: 0 10px 22px -12px var(--orb-x-12) !important;
}
/* Secondary buttons on the always-dark bands. */
html[data-tla-orbital] body :is(.llp-final, .ab-cta, .ab-band, .tlap-cta-band, #tla-business-membership-page .cta, .chk2-band, .tla-kb-article-cta-band) :is(.llp-btn-ghost, .ab-btn-sec, .tlap-btn-sec, .btn-secondary, .chk2-btn-sec, .tla-kb-btn-sec, .mtd-btn-sec) {
	background: rgba(255, 255, 255, .06) !important;
	border-color: rgba(200, 225, 255, .35) !important;
	color: #f5f7fa !important;
	-webkit-text-fill-color: #f5f7fa !important;
}
html[data-tla-orbital] body :is(.llp-final, .ab-cta, .ab-band, .tlap-cta-band, #tla-business-membership-page .cta, .chk2-band, .tla-kb-article-cta-band) :is(.llp-btn-ghost, .ab-btn-sec, .tlap-btn-sec, .btn-secondary, .chk2-btn-sec, .tla-kb-btn-sec, .mtd-btn-sec):hover {
	background: rgba(94, 199, 216, .14) !important;
	border-color: #5ec7d8 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
/* Elementor's own button widget in page content. */
html[data-tla-orbital] body :is([data-elementor-type="wp-page"], [data-elementor-type="single-page"], [data-elementor-type="single-post"]) .elementor-widget-button .elementor-button {
	border-radius: 12px;
	background: var(--orb-gold-btn);
	color: var(--orb-gold-text);
	fill: var(--orb-gold-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow);
}
html[data-tla-orbital] body :is([data-elementor-type="wp-page"], [data-elementor-type="single-page"], [data-elementor-type="single-post"]) .elementor-widget-button .elementor-button:hover {
	background: var(--orb-gold-btn-hover);
	color: var(--orb-gold-text);
}

/* ── 8. Cards, labels and accents ──────────────────────────────────────── */
/* Cards in the page widgets: the homepage's corners and soft depth. */
html[data-tla-orbital] body .elementor-widget-html :is([class$="-card"], [class*="-card "]):not([class*="tla-ph-"]):not(.tla-ct-form-card) {
	border-radius: 18px;
	box-shadow: var(--orb-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html[data-tla-orbital] body .elementor-widget-html :is(a[class$="-card"], a[class*="-card "]):hover { box-shadow: var(--orb-shadow-hover); }
/* Eyebrows and labels: the accent, with a gold rule. */
html[data-tla-orbital] body :is(.mtd-label, .chk2-label, .tla-ct-label) { color: var(--orb-accent); }
html[data-tla-orbital] body :is(.mtd-label, .chk2-label, .tla-ct-label)::before { background: var(--orb-gold); }
/* Accent headline words: one solid accent, as on the homepage ("one
   connected platform."), whether the page drew them as clipped gradients or
   plain colour. */
html[data-tla-orbital] body :is(.mtd-grad-text, .chk2-grad, .tla-ct-gradient, #tla-business-membership-page .gradient-text, .elementor-widget-html :is([class*="grad-text"], [class*="gradient-text"])) {
	background: none !important;
	color: var(--orb-accent) !important;
	-webkit-text-fill-color: var(--orb-accent) !important;
}
/* Thin accent rules that ran pink to cyan. */
html[data-tla-orbital] body .tla-ct::before,
html[data-tla-orbital] body .tla-ct-form-card::before { background: linear-gradient(90deg, var(--orb-gold), var(--orb-core)) !important; }
html[data-tla-orbital] body .tla-about .ab-timeline::before { background: linear-gradient(var(--orb-accent), var(--orb-cyan), var(--orb-gold)); }
/* Soft nebula glows become cyan light. */
html[data-tla-orbital] body :is(.mtd-neb-pink, .mtd-neb-blue) { background: rgba(94, 199, 216, .10); }

/* ── 9. Page families with their own tokens ────────────────────────────── */
/* Theme-aware accents where a family reuses one token for text and fills. */
html[data-tla-orbital] body .tla-llp {
	--bl: var(--orb-accent);
	--bl-ink: var(--orb-accent-ink);
	--bg-page: var(--orb-bg);
	--bg-hero: var(--orb-surface);
	--bg-card: var(--orb-card);
	--bg-section: var(--orb-bg-2);
	--bg-glow: var(--orb-bg-2);
	--bg-note: var(--orb-accent-soft);
	--border: var(--orb-line);
	--border-card: var(--orb-card-line);
	--border-accent: var(--orb-accent-line);
	--text-primary: var(--orb-text);
	--text-body: var(--orb-body);
	--text-muted: var(--orb-muted);
	--text-faint: var(--orb-faint);
	--pill-bg: var(--orb-glass);
	--pill-border: var(--orb-line);
	--shadow-card: var(--orb-shadow);
	--shadow-hover: var(--orb-shadow-hover);
	--shadow-lg: var(--orb-shadow-lg);
	background: var(--orb-bg);
}
/* The plan cards' navy button was white on white in the dark theme. */
html[data-tla-orbital][data-tla-theme="dark"] body .tla-llp .llp-btn-dark:is(*, :link, :visited, :hover) {
	background: var(--orb-accent) !important;
	border-color: var(--orb-accent) !important;
	color: #04202a !important;
	-webkit-text-fill-color: #04202a !important;
}
html[data-tla-orbital] body #tla-business-membership-page {
	--blue: var(--orb-accent);
	--bg: var(--orb-bg);
	--alt: var(--orb-surface);
	--card: var(--orb-card);
	--soft: var(--orb-bg-2);
	--heading: var(--orb-text);
	--text: var(--orb-body);
	--muted: var(--orb-muted);
	--border: var(--orb-line);
	--divider: var(--orb-line);
}
html[data-tla-orbital] body #tla-business-membership-page .designation { background: var(--orb-rings-night) right top / cover no-repeat, var(--orb-band); }
html[data-tla-orbital] body .tla-kb {
	--pk: var(--orb-accent);
	--pu: var(--orb-accent-ink);
	--cy: var(--orb-cyan);
	--sk: var(--orb-cyan);
	--bl: var(--orb-accent);
	--bg-page: var(--orb-bg);
	--bg-card: var(--orb-card);
	--bg-section: var(--orb-bg-2);
	--bg-alt: var(--orb-bg-2);
	--bg-law: var(--orb-accent-soft);
	--bg-action: var(--orb-accent-soft);
	--border: var(--orb-line);
	--border-card: var(--orb-card-line);
	--border-law: var(--orb-accent-line);
	--border-sidebar: var(--orb-accent-line);
	--text-primary: var(--orb-text);
	--text-body: var(--orb-body);
	--text-muted: var(--orb-muted);
	--text-link: var(--orb-accent);
	--text-link-h: var(--orb-accent-ink);
	--chip-bg: var(--orb-accent-soft);
	--chip-border: var(--orb-accent-line);
	--chip-color: var(--orb-muted);
	--grad-primary: linear-gradient(135deg, var(--orb-x-12), var(--orb-x-14));
	--grad-pink: linear-gradient(135deg, var(--orb-x-11), var(--orb-x-12));
	--grad-cyan: linear-gradient(135deg, var(--orb-x-13), var(--orb-x-12));
	--grad-title: linear-gradient(120deg, var(--orb-text) 0%, var(--orb-accent) 100%);
	--num-bg: linear-gradient(135deg, var(--orb-x-11), var(--orb-x-12));
	--law-txt: var(--orb-accent);
	--shadow-card: var(--orb-shadow);
	--shadow-card-lg: var(--orb-shadow-lg);
	--shadow-btn: var(--orb-gold-glow);
}
html[data-tla-orbital] body :is(.tla-about, .tlap) {
	--tla-heading: var(--orb-text);
	--tla-text: var(--orb-body);
	--tla-muted: var(--orb-muted);
	--tla-card: var(--orb-card);
	--tla-card-border: var(--orb-card-line);
	--tla-bg: var(--orb-bg);
	--tla-bg-alt: var(--orb-surface);
	--tla-divider: var(--orb-line);
	--tla-surface-soft: var(--orb-bg-2);
	--tla-shadow: var(--orb-shadow-lg);
	--tla-shadow-soft: var(--orb-shadow);
}
/* The homepage keeps its own (identical) orbital tokens. */
html[data-tla-orbital] body .tlh3 { --tla-bg-alt: var(--orb-bg); }

/* ── 10. Forms ─────────────────────────────────────────────────────────── */
html[data-tla-orbital] body .fluentform :is(.ff-el-form-control, input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus {
	border-color: var(--orb-accent) !important;
	box-shadow: 0 0 0 3px var(--orb-accent-soft) !important;
}
html[data-tla-orbital] body :is(.fluentform .ff-btn-submit:not(.ff_btn_no_style), .chk2-send-card .ff-btn-submit, .tla-ct .fluentform .ff-btn-submit, .pmpro_btn-submit-checkout, #pmpro_btn-submit, #pmpro-magic-login-button, .pmpro_login_wrap #wp-submit, .woocommerce :is(a, button).button.alt, .woocommerce #place_order) {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	border-radius: 12px !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body :is(.fluentform .ff-btn-submit:not(.ff_btn_no_style), .chk2-send-card .ff-btn-submit, .tla-ct .fluentform .ff-btn-submit, .pmpro_btn-submit-checkout, #pmpro_btn-submit, #pmpro-magic-login-button, .pmpro_login_wrap #wp-submit, .woocommerce :is(a, button).button.alt, .woocommerce #place_order):hover {
	background: var(--orb-gold-btn-hover) !important;
}

/* ── 12. Partner Hub pages ─────────────────────────────────────────────── */
html[data-tla-orbital] body.tla-ph-public-dark-page {
	background-image:
		var(--orb-rings-night),
		radial-gradient(1200px 620px at 10% -6%, rgba(41, 199, 229, .12), rgba(41, 199, 229, 0) 62%),
		radial-gradient(1000px 560px at 100% 2%, rgba(76, 120, 211, .18), rgba(76, 120, 211, 0) 60%),
		linear-gradient(180deg, #0a1729 0%, #081321 34%, #081321 70%, #060f1b 100%) !important;
	background-size: 2000px auto, 100% 100%, 100% 100%, 100% 100% !important;
	background-position: right -360px top -80px, 0 0, 0 0, 0 0 !important;
	background-repeat: no-repeat !important;
}

/* ── 13. Site chrome: header, Ask TLA, site search ───────────────────── */
html[data-tla-orbital] body #tla-uh .tla-uh-action.is-primary {
	background: var(--orb-gold-btn) !important;
	border-color: rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px -10px rgba(176, 141, 77, .7) !important;
}
html[data-tla-orbital] body #tla-uh .tla-uh-action.is-primary:hover { background: var(--orb-gold-btn-hover) !important; }
html[data-tla-orbital] body .tla-ask { --a-brand: linear-gradient(120deg, #1662c4 0%, #1f8fc4 100%); }
html[data-tla-orbital] body :is(.tla-ask-launch, .tla-ask-hbtn) {
	background: linear-gradient(135deg, #16294a 0%, #0b1729 100%) !important;
	border: 1px solid rgba(94, 199, 216, .45) !important;
	color: #f5f7fa !important;
	-webkit-text-fill-color: #f5f7fa !important;
	box-shadow: 0 12px 28px -12px rgba(8, 19, 33, .7), 0 0 0 3px rgba(94, 199, 216, .10) !important;
}
html[data-tla-orbital] body :is(.tla-ask-launch, .tla-ask-hbtn) svg { color: #5ec7d8; }
html[data-tla-orbital] body #tla-ss-trigger {
	background: linear-gradient(180deg, #16294a 0%, #0b1729 100%) !important;
	box-shadow: -8px 8px 26px rgba(8, 19, 33, .35), inset 1px 0 0 rgba(94, 199, 216, .5) !important;
}
html[data-tla-orbital] body #tla-ss-trigger svg { stroke: #5ec7d8 !important; }

/* ── 14. Phones: nothing widens the page ───────────────────────────── */
/* The theme sets buttons to nowrap, so long FAQ questions pushed pages past
   the screen edge (the plans page was 681px wide on a 375px phone). */
html[data-tla-orbital] body :is(button[class*="faq"], button[class*="accordion"], [class*="faq"] button, [class*="accordion"] button):not(.tla-ask *):not(#tla-uh *),
html[data-tla-orbital] body .elementor-widget-html button[class*="question"] {
	white-space: normal;
	text-align: left;
}
/* FAQs outside HTML widgets too (the Partner Hub join page was 500px wide on a 375px phone). */
html[data-tla-orbital] body :is(button[class*="faq"], [class*="faq"] button):not(.tla-ask *):not(#tla-uh *) > span { min-width: 0; white-space: normal; }
html[data-tla-orbital] body { overflow-x: clip; }

/* ── 15. Found in the live check (1.0.370) ─────────────────────────────── */
/* White surfaces keep the light theme's accents, whatever surrounds them: PMPro's
   members-only card, the editorial standards page and the document cards stay white
   in dark mode, and some white boxes sit inside dark panels. */
html[data-tla-orbital] body :is(.pmpro_card.pmpro_content_message, .te, .tla-document-launcher-card, .tla-starter-pack-banner, [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:white"], [style*="background: white"]) {
	--orb-x-01: #3b6fd0;
	--orb-x-02: #1a73d1;
	--orb-x-03: #1b8aa8;
	--orb-x-04: #1a6ac4;
	--orb-accent: #1662c4;
	--orb-accent-ink: #0f52a8;
}
/* ORBIT suite page: text with no colour of its own followed the theme's #333 in dark mode. */
html[data-tla-orbital][data-tla-theme="dark"] body .tlap { color: var(--orb-text); }
/* Landlord plans, dark mode: the badge sits on the light cyan accent. */
html[data-tla-orbital][data-tla-theme="dark"] body .tla-llp .llp-plan-popular { color: #04202a; -webkit-text-fill-color: #04202a; }

/* West Midlands dates band, dark mode: dark text on the light cyan accent. */
html[data-tla-orbital][data-tla-theme="dark"] body .tla-llp :is(.llp-dates-bar, .llp-date-cell, .llp-date-cell *) { color: #04202a !important; -webkit-text-fill-color: #04202a !important; }
/* Plain WordPress pages (password-protected, Section 13) kept the theme's #333 on the dark canvas. */
html[data-tla-orbital][data-tla-theme="dark"] body :is(.page-header .entry-title, .post-password-form, .tla-s13-notice) { color: var(--orb-text); }
/* The "OR" between sign-in methods was black on dark panels. */
html[data-tla-orbital] body #loginform > div > span { color: inherit !important; opacity: .7; }

/* Checkout: a Code Snippets rule painted the button pink and blue at the same specificity. */
html[data-tla-orbital] body.pmpro-checkout :is(#pmpro_btn-submit, #pmpro_submit_span input[type="submit"], .pmpro_form_submit input[type="submit"]) {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body.pmpro-checkout :is(#pmpro_btn-submit, #pmpro_submit_span input[type="submit"]):hover { background: var(--orb-gold-btn-hover) !important; }

/* Partner Hub's public pages: its primary buttons (frontend.css) in the homepage's gold. */
html[data-tla-orbital] body :is(a, button).tla-ph-frontend-button-primary {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body :is(a, button).tla-ph-frontend-button-primary:hover { background: var(--orb-gold-btn-hover) !important; }

/* ORBIT's sign-in gate (orbit.css): gold join button, solid accent headline. */
html[data-tla-orbital] body .tla-orbit__gate-card .tla-orbit__btn--primary {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body .tla-orbit__gate-card h2 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--orb-accent) !important; -webkit-text-fill-color: var(--orb-accent) !important; }

/* AI Document Studio (its own stylesheet): gold primary buttons, orbital blues for the badges and icons. */
html[data-tla-orbital] body .tla-studio-button--primary {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body .tla-studio-button--primary:hover { background: var(--orb-gold-btn-hover) !important; }
html[data-tla-orbital] body :is(.tla-document-suite-eyebrow, .tla-document-suite-beta, .tla-document-launcher-card__icon) { background: linear-gradient(135deg, #1662c4, #1f9fbd) !important; }
html[data-tla-orbital] body .tla-document-suite-hero h1 span { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--orb-accent) !important; -webkit-text-fill-color: var(--orb-accent) !important; }
html[data-tla-orbital] body :is(.tla-document-launcher-card__audience, .tla-document-suite-library .tla-document-launcher-card__status) { background: var(--orb-accent-soft) !important; color: var(--orb-accent) !important; }
html[data-tla-orbital] body .tla-starter-pack-banner { background: var(--orb-accent-soft) !important; }
/* Its audience tabs stayed pale in dark mode under the dark theme's light text. */
html[data-tla-orbital][data-tla-theme="dark"] body .tla-document-audience-tabs { background: rgba(255, 255, 255, .06) !important; border-color: rgba(150, 190, 240, .22) !important; }
html[data-tla-orbital] body :is(.tla-starter-pack-banner__eyebrow, .tla-starter-pack-banner__note) { color: var(--orb-accent) !important; }

/* Compliance Hub (page 8304): its only content container was set to "Hide on mobile"
   in Elementor with nothing in its place, so phones got an empty page. */
@media (max-width: 767px) {
	html[data-tla-orbital] body .elementor-8304 .elementor-element-3b52805.elementor-hidden-mobile { display: flex !important; }
}

/* Compare membership levels (page 9366): a dark page, drawn in the night style. */
html[data-tla-orbital] body.page-id-9366 .elementor-9366 {
	--orb-x-01: #9fdcea;
	--orb-x-02: #5ec7d8;
	--orb-x-03: #29c7e5;
	--orb-x-04: #7fd6e4;
	--orb-accent: #7fd6e4;
	--orb-accent-ink: #b5e9f1;
}
html[data-tla-orbital] body.page-id-9366 .hero { background: var(--orb-rings-night) right top / cover no-repeat, var(--orb-band) !important; }
html[data-tla-orbital] body.page-id-9366 :is(.btn-land, .plan-btn--land, .btn-primary) {
	background: var(--orb-gold-btn) !important;
	border: 1px solid rgba(120, 90, 30, .25) !important;
	color: var(--orb-gold-text) !important;
	-webkit-text-fill-color: var(--orb-gold-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--orb-gold-glow) !important;
	text-shadow: none !important;
}
html[data-tla-orbital] body.page-id-9366 :is(.btn-biz, .btn-ten, .plan-btn--biz, .plan-btn--ten) {
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid rgba(255, 255, 255, .26) !important;
	color: #f5f7fa !important;
	-webkit-text-fill-color: #f5f7fa !important;
	box-shadow: none !important;
}
html[data-tla-orbital] body.page-id-9366 :is(.btn-biz, .btn-ten, .plan-btn--biz, .plan-btn--ten):hover { background: rgba(255, 255, 255, .12) !important; }

/* ── Motion and narrow screens ─────────────────────────────────────────── */
@media (max-width: 640px) {
	html[data-tla-orbital] body :is(.llp-btn, #tla-business-membership-page .btn, .ab-btn, .tlap-btn, .tla-kb-btn, .mtd-btn, .chk2-btn) { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	html[data-tla-orbital] body .elementor-widget-html :is([class$="-card"], [class*="-card "]) { transition: none; }
}