/* ===================================
   Unified Theme CSS for Email to Web
   =================================== */

/* Root color variables - Default to dark mode */
:root,
body,
body.theme-dark {
	/* Dark mode colors (default) */
	--bg-primary: #000;
	--bg-secondary: #111;
	--bg-tertiary: #222;
	--bg-footer: #1d1d1f;

	--text-primary: #f5f5f7;
	--text-secondary: #d2d2d7;
	--text-muted: #86868b;
	--text-footer: #6e6e73;
	--text-footer-link: #a1a1a6;
	--text-light-gray: #a1a1a6;
	--text-gray-666: #666;

	--border-primary: #333;
	--border-secondary: #424245;

	--link-primary: #2997ff;
	--link-footer: #86868b;
	--accent-orange: #ff791b;
}

/* Light mode colors */
body.theme-light {
	--bg-primary: #fff;
	--bg-secondary: #f5f5f7;
	--bg-tertiary: #fbfbfd;
	--bg-footer: #f5f5f7;

	--text-primary: #1d1d1f;
	--text-secondary: #424245;
	--text-muted: #6e6e73;
	--text-footer: #6e6e73;
	--text-footer-link: #424245;
	--text-light-gray: #515154;
	--text-gray-666: #666;

	--border-primary: #d2d2d7;
	--border-secondary: #86868b;

	--link-primary: #0066cc;
	--link-footer: #86868b;
	--accent-orange: #ff6000;
}

/* ===================================
   Override inline styles - Using attribute selectors
   =================================== */

/* Base container backgrounds */
body,
main,
.desktop-container,
.mobile-container {
	background-color: var(--bg-primary) !important;
}

/* ===================================
   Dark Mode Background Overrides
   =================================== */

/* Primary backgrounds (black) */
body.theme-dark main .dark,
body.theme-dark main [style*="background-color: #000"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color: #000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color:#000"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color:#000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color: black"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color:black"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-primary) !important;
}

/* Secondary backgrounds (dark gray) */
body.theme-dark main [style*="background-color: #111"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color: #111111"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color:#111"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color:#111111"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-secondary) !important;
}

/* Tertiary backgrounds (medium gray) */
body.theme-dark main [style*="background-color: #222"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color: #222222"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="background-color:#222"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color:#222222"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-tertiary) !important;
}

/* Mobile backgronds */
body.theme-dark main .mobile-container .light,
body.theme-dark main .mobile-container .dark {
	background-color: var(--bg-tertiary) !important;
}

/* ===================================
   Light Mode Background Overrides
   =================================== */

/* Primary backgrounds (white) */
body.theme-light main .light,
body.theme-light main [style*="background-color: #fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color: #ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="background-color:#fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color:#ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="background-color: white"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="background-color:white"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-primary) !important;
}

/* Mobile backgronds */
body.theme-light main .mobile-container .light,
body.theme-light main .mobile-container .dark {
	background-color: var(--bg-secondary) !important;
}

/* Secondary backgrounds (light gray) */
body.theme-light
	main
	[style*="background-color: #f5f5f7"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color:#f5f5f7"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-secondary) !important;
}

/* Footer backgrounds - both modes */
/* .footer,
.m-footer,
.footer-dark,
.footer-light,
.shared-footer,
[style*="background-color: #1d1d1f"],
[style*="background-color:#1d1d1f"] {
	background-color: var(--bg-footer) !important;
} */

/* ===================================
   Text Color Overrides - Using attribute selectors
   =================================== */

/* Headers and primary text */
body.theme-dark main h1,
body.theme-dark main h2,
body.theme-dark main h3,
body.theme-dark main h4,
body.theme-dark main h5,
body.theme-dark main h6,
body.theme-dark main .headline,
body.theme-dark main .eyebrow,
body.theme-dark main .eyebrow-super,
body.theme-dark main .eyebrow-header,
body.theme-dark main .body-header {
	color: var(--text-primary) !important;
}

body.theme-light main h1,
body.theme-light main h2,
body.theme-light main h3,
body.theme-light main h4,
body.theme-light main h5,
body.theme-light main h6,
body.theme-light main .headline,
body.theme-light main .eyebrow,
body.theme-light main .eyebrow-super,
body.theme-light main .eyebrow-header,
body.theme-light main .body-header {
	color: var(--text-primary) !important;
}

/* Dark mode text colors */
body.theme-dark main [style*="color: #f5f5f7"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color:#f5f5f7"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color: #ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color:#ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color: #fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color:#fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color: white"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color:white"]:not([class*="btn"]):not([class*="button"]) {
	color: var(--text-primary) !important;
}

/* Light mode text colors */
body.theme-light main [style*="color: #1d1d1f"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color:#1d1d1f"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color: #000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color:#000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color: #000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color:#000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color: black"]:not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color:black"]:not([class*="btn"]):not([class*="button"]) {
	color: var(--text-primary) !important;
}

/* Secondary text colors */
body.theme-dark main [style*="color: #d2d2d7"],
body.theme-dark main [style*="color:#d2d2d7"] {
	color: var(--text-secondary) !important;
}

body.theme-light main [style*="color: #424245"],
body.theme-light main [style*="color:#424245"] {
	color: var(--text-secondary) !important;
}

/* Muted text colors - common across themes */
[style*="color: #86868b"],
[style*="color:#86868b"],
[style*="color: #6e6e73"],
[style*="color:#6e6e73"],
[style*="color: #686b70"],
[style*="color:#686b70"] {
	color: var(--text-muted) !important;
}

/* Gray 666 text */
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #666666"],
[style*="color:#666666"] {
	color: var(--text-gray-666) !important;
}

/* Links */
body.theme-dark main a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]),
body.theme-dark main [style*="color: #2997ff"],
body.theme-dark main [style*="color:#2997ff"] {
	color: var(--link-primary) !important;
}

body.theme-light main a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]),
body.theme-light main [style*="color: #0066cc"],
body.theme-light main [style*="color:#0066cc"],
body.theme-light main [style*="color: #06c"],
body.theme-light main [style*="color:#06c"] {
	color: var(--link-primary) !important;
}

body.theme-dark main .light h1 a,
body.theme-dark main .light h2 a,
body.theme-dark main .light h3 a,
body.theme-dark main .light h4 a,
body.theme-dark main .light h5 a,
body.theme-dark main .light h6 a,
body.theme-dark main .light .copy p a,
body.theme-dark main .light a.copy,
body.theme-dark main .light a.t-body,
body.theme-light main .dark h1 a,
body.theme-light main .dark h2 a,
body.theme-light main .dark h3 a,
body.theme-light main .dark h4 a,
body.theme-light main .dark h5 a,
body.theme-light main .dark h6 a,
body.theme-light main .dark .copy p a body.theme-light main .dark a.copy,
body.theme-light main .dark a.t-body {
	color: var(--link-primary) !important;
}

/* Accent colors */
[style*="color: #ff791b"],
[style*="color:#ff791b"],
[style*="color: #ff6000"],
[style*="color:#ff6000"] {
	color: var(--accent-orange) !important;
}

/* ===================================
   Border Color Overrides
   =================================== */

/* Dark mode borders */
body.theme-dark main [style*="border-color: #333"],
body.theme-dark main [style*="border-color:#333"],
body.theme-dark main [style*="border-color: #333333"],
body.theme-dark main [style*="border-color:#333333"],
body.theme-dark main .keyline,
body.theme-dark main .keyline div,
body.theme-dark main .keyline td {
	border-color: var(--border-primary) !important;
}

body.theme-dark main [style*="border-color: #424245"],
body.theme-dark main [style*="border-color:#424245"] {
	border-color: var(--border-secondary) !important;
}

/* Light mode borders */
body.theme-light main [style*="border-color: #d2d2d7"],
body.theme-light main [style*="border-color:#d2d2d7"],
body.theme-light main .keyline,
body.theme-light main .keyline div,
body.theme-light main .keyline td {
	border-color: var(--border-primary) !important;
}

body.theme-light main [style*="border-color: #86868b"],
body.theme-light main [style*="border-color:#86868b"] {
	border-color: var(--border-secondary) !important;
}

/* ===================================
   Specific Element Overrides
   =================================== */

/* Footer specific */
.sfcopy,
.sfcopy p,
.sflinks,
.sflinks p,
.sflinks .vert,
.tmcopy {
	color: var(--text-muted) !important;
}

.sflinks a,
.sfnav a {
	color: var(--text-footer-link) !important;
}

/* Copy text paragraphs */
.copy p,
.t-body {
	color: inherit;
}

/* Ensure proper font weights */
.outBold,
p.outBold {
	font-weight: 900 !important;
}

.outSemiBold,
p.outSemiBold {
	font-weight: 600 !important;
}

/* ===================================
   Handle Mixed Mode Emails
   =================================== */

/* When a light mode email is viewed in dark mode */
body.theme-dark main .light {
	background-color: var(--bg-tertiary) !important;
}

body.theme-dark main .light h1,
body.theme-dark main .light h2,
body.theme-dark main .light h3,
body.theme-dark main .light h4,
body.theme-dark main .light h5,
body.theme-dark main .light h6,
body.theme-dark main .light .copy p,
body.theme-dark main .light .t-body {
	color: var(--text-primary) !important;
}

/* When a dark mode email is viewed in light mode */
body.theme-light main .dark {
	background-color: var(--bg-primary) !important;
}

body.theme-light main .dark h1,
body.theme-light main .dark h2,
body.theme-light main .dark h3,
body.theme-light main .dark h4,
body.theme-light main .dark h5,
body.theme-light main .dark h6,
body.theme-light main .dark .copy p,
body.theme-light main .dark .t-body {
	color: var(--text-primary) !important;
}

/* ===================================
   Main container overrides of background-color
   =================================== */
/* make every flat white container green, but leave rounded cards alone */
body.theme-light
	#main
	> div
	> table
	> tbody
	> tr:nth-child(1)
	> td
	> div
	> table
	> tbody
	> tr
	> td
	> table
	> tbody
	> tr
	> td,
body.theme-light .mobile-container .row {
	background-color: var(--bg-secondary) !important;
}
body.theme-dark
	#main
	> div
	> table
	> tbody
	> tr:nth-child(1)
	> td
	> div
	> table
	> tbody
	> tr
	> td
	> table
	> tbody
	> tr
	> td,
body.theme-dark .mobile-container .row {
	background-color: var(--bg-tertiary) !important;
}

/* ===================================
   Important Overrides for Stubborn Elements
   =================================== */
/* Double specificity for really stubborn inline styles */
body.theme-dark
	main
	[style*="background-color"][style*="#fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color"][style*="#ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	[style*="background-color"][style*="white"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark main td[style*="background-color: #fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	td[style*="background-color: #ffffff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	table[style*="background-color: #fff"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	table[style*="background-color: #ffffff"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-primary) !important;
}

body.theme-dark
	main
	[style*="background-color"][style*="#f5f5f7"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	td[style*="background-color: #f5f5f7"]:not([class*="btn"]):not([class*="button"]),
body.theme-dark
	main
	table[style*="background-color: #f5f5f7"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-tertiary) !important;
}

body.theme-light
	main
	[style*="background-color"][style*="#000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color"][style*="#000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color"][style*="black"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	td[style*="background-color: #000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	td[style*="background-color: #000000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	table[style*="background-color: #000"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	table[style*="background-color: #000000"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-primary) !important;
}

body.theme-light
	main
	[style*="background-color"][style*="#222"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	[style*="background-color"][style*="#222222"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	td[style*="background-color: #222"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	td[style*="background-color: #222222"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	table[style*="background-color: #222"]:not([class*="btn"]):not([class*="button"]),
body.theme-light
	main
	table[style*="background-color: #222222"]:not([class*="btn"]):not([class*="button"]) {
	background-color: var(--bg-secondary) !important;
}

/* ===================================
   Utility Classes
   =================================== */

/* Force specific theme */
.force-dark,
body.force-dark {
	--bg-primary: #000 !important;
	--bg-secondary: #111 !important;
	--bg-tertiary: #222 !important;
	--bg-footer: #1d1d1f !important;
	--text-primary: #f5f5f7 !important;
	--text-secondary: #d2d2d7 !important;
	--text-muted: #86868b !important;
	--text-footer: #6e6e73 !important;
	--text-footer-link: #a1a1a6 !important;
	--text-light-gray: #a1a1a6 !important;
	--text-gray-666: #666 !important;
	--border-primary: #333 !important;
	--border-secondary: #424245 !important;
	--link-primary: #2997ff !important;
	--link-footer: #86868b !important;
	--accent-orange: #ff791b !important;
}

.force-light,
body.force-light {
	--bg-primary: #fff !important;
	--bg-secondary: #f5f5f7 !important;
	--bg-tertiary: #fbfbfd !important;
	--bg-footer: #f5f5f7 !important;
	--text-primary: #1d1d1f !important;
	--text-secondary: #424245 !important;
	--text-muted: #6e6e73 !important;
	--text-footer: #6e6e73 !important;
	--text-footer-link: #424245 !important;
	--text-light-gray: #515154 !important;
	--text-gray-666: #666 !important;
	--border-primary: #d2d2d7 !important;
	--border-secondary: #86868b !important;
	--link-primary: #0066cc !important;
	--link-footer: #86868b !important;
	--accent-orange: #ff6000 !important;
}

/* ===================================
   Moible overrides
   =================================== */
body main .mobile-container .keyline .keyline {
	border-top: 1px solid;
}

/* ===================================
   Transitions
   =================================== */

/* Enable smooth color transitions when switching themes */
/* body.enable-transitions,
body.enable-transitions * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
} */

/* Disable transitions for immediate changes */
/* body:not(.enable-transitions),
body:not(.enable-transitions) * {
	transition: none !important;
} */

/* ===================================
   Print Styles
   =================================== */

@media print {
	body {
		/* Force light mode for printing */
		--bg-primary: #fff !important;
		--bg-secondary: #f5f5f7 !important;
		--bg-tertiary: #fbfbfd !important;
		--text-primary: #1d1d1f !important;
		--text-secondary: #424245 !important;
		--text-muted: #6e6e73 !important;
		--text-footer: #6e6e73 !important;
		--text-footer-link: #424245 !important;
		--text-light-gray: #515154 !important;
		--text-gray-666: #666 !important;
		--border-primary: #d2d2d7 !important;
		--border-secondary: #86868b !important;
		--link-primary: #0066cc !important;
		--link-footer: #86868b !important;
		--accent-orange: #ff6000 !important;
	}
}

/* ===================================
   Additional Fixes for Common Patterns
   =================================== */

/* Handle nested table backgrounds */
body.theme-dark main table table[bgcolor="#fff"],
body.theme-dark main table table[bgcolor="#ffffff"],
body.theme-dark main table td[bgcolor="#fff"],
body.theme-dark main table td[bgcolor="#ffffff"] {
	background-color: var(--bg-primary) !important;
}

body.theme-light main table table[bgcolor="#000"],
body.theme-light main table table[bgcolor="#000000"],
body.theme-light main table td[bgcolor="#000"],
body.theme-light main table td[bgcolor="#000000"] {
	background-color: var(--bg-primary) !important;
}

/* Catch nested card backgrounds - more specific selectors */
body.theme-light main td[style*="background-color: #222222"],
body.theme-light main td[style*="background-color:#222222"],
body.theme-light main table[style*="background-color: #222222"],
body.theme-light main table[style*="background-color:#222222"] {
	background-color: var(--bg-secondary) !important;
}

/* Target deeply nested elements with inline styles */
body.theme-light main td td[style*="background-color: #222"],
body.theme-light main td td[style*="background-color: #222222"],
body.theme-light main .col td[style*="background-color: #222"],
body.theme-light main .col td[style*="background-color: #222222"] {
	background-color: var(--bg-secondary) !important;
}

/* Catch #111111 backgrounds in light mode */
body.theme-light main td[style*="background-color: #111"],
body.theme-light main td[style*="background-color: #111111"],
body.theme-light main table[style*="background-color: #111"],
body.theme-light main table[style*="background-color: #111111"] {
	background-color: var(--bg-primary) !important;
}

/* Force all nested table cells in light mode */
/* body.theme-light main .col[style*="background-color: #222222"],
body.theme-light main .col[style*="background-color: #111111"] {
	background-color: var(--bg-secondary) !important;
} */

/* Mobile cards background colors */
body.theme-dark main .nestedColumn .col {
	background-color: var(--bg-primary) !important;
}

body.theme-light main .nestedColumn .col {
	background-color: var(--bg-primary) !important;
}

/* Ensure all text in content areas uses proper colors */
body.theme-dark main .section,
body.theme-dark main .row,
body.theme-dark main .col,
body.theme-dark main .copy {
	color: var(--text-primary);
}

body.theme-light main .section,
body.theme-light main .row,
body.theme-light main .col,
body.theme-light main .copy {
	color: var(--text-primary);
}

/* Override any hardcoded font colors in nested elements */
body.theme-dark main .copy *:not(a),
body.theme-dark main .t-body *:not(a) {
	color: inherit !important;
}

body.theme-light main .copy *:not(a),
body.theme-light main .t-body *:not(a) {
	color: inherit !important;
}

/* Override to fix footer styles */
h3.footer-directory-column-section-title {
	display: block !important;
}

/* Override specific editions */
body.theme-dark#june25 main .row.m-xFC0475 .nestedColumn .col,
body.theme-dark#june25 main .row.m-n8142E3 .nestedColumn .col {
	background-color: var(--bg-tertiary) !important;
}

body.theme-light#june25 main .row.m-xFC0475 .nestedColumn .col,
body.theme-light#june25 main .row.m-n8142E3 .nestedColumn .col {
	background-color: var(--bg-secondary) !important;
}

/* ========== New Template (lone-pine / v3) ========== */
/* Scoped via :has(.lone-pine) so older editions are unaffected. */
.lone-pine {
	padding: 2em 0;
}

@media only screen and (max-width: 734px) {
	.lone-pine {
		padding: 2em 1em;
	}
}
body[data-color-scheme="dark"] .lone-pine {
	background: var(--bg-tertiary);
}

/* Match outer page background to the email's canvas */
body:has(.lone-pine),
body:has(.lone-pine) main {
	background-color: var(--bg-secondary) !important;
}

/* Light mode: collapse white .light sections + inline white panels into the canvas color */
body.theme-light main .lone-pine .light,
body.theme-light main .lone-pine [style*="rgb(255, 255, 255)"] {
	background-color: var(--bg-secondary) !important;
}

/* Dark mode: section spacers match the canvas, cards drop to pure black.
   Inline rgb() values are split across lines in the new template, so we match
   on "255," / "245," substrings (anchored to the relevant class) instead of
   the literal "rgb(255, 255, 255)" which only exists in single-line styles. */
body.theme-dark main .lone-pine .light,
body.theme-dark .lone-pine .rwtable[style*="rgb(245, 245, 247)"],
body.theme-dark .lone-pine td.columntd[style*="245,"] {
	background-color: var(--bg-tertiary) !important;
}

body.theme-dark .lone-pine td.columntd[style*="255,"] {
	background-color: var(--bg-primary) !important;
}

/* Responsive image variants + fluid layout: the email's own CSS collapses to
   100%-width tables at ≤480px, but on the web we want that to kick in at our
   standard 734px breakpoint so the 712px-wide desktop layout doesn't overflow.
   Re-fires the same rules scoped to .lone-pine. */
.lone-pine .hideSmall {
	display: none;
}

@media only screen and (max-width: 734px) {
	.lone-pine table {
		width: 100% !important;
	}
	.lone-pine .col.columntd {
		display: inline-block !important;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	.lone-pine .fluid {
		max-width: 100% !important;
	}
	/* Collapse the row wrappers to block so the 100%-width columns resolve
	   against a definite width. Without this the columns sit inside still-table
	   ancestors, shrink-to-fit their content, and short-content sections (social
	   icons, "share your thoughts") hug the left instead of centering. Mirrors
	   the email's own ≤480px rules, re-fired at our 734px breakpoint. */
	.lone-pine .rw,
	.lone-pine .rw .rwtable,
	.lone-pine .rw .rwtd,
	.lone-pine tbody {
		display: block;
	}
	.lone-pine .rw,
	.lone-pine .rw .rwtable {
		margin: 0 auto;
		box-sizing: border-box;
	}
	.lone-pine .rw .rwtable {
		float: none !important;
		font-size: 0;
	}
	.lone-pine .rw .rwtable .rwtr {
		display: block;
	}
	.lone-pine .col .coltable,
	.lone-pine .col .coltable td,
	.lone-pine .col .coltable tr {
		display: block;
		box-sizing: border-box;
	}
	.lone-pine .hideMedium {
		display: none !important;
	}
	.lone-pine .hideSmall {
		display: inline !important;
	}
	.lone-pine .copy.hideSmall,
	.lone-pine .link-container.hideSmall {
		display: block !important;
	}

	/* Centered intro/outro copy (e.g. "Share your thoughts") carries wide side
	   padding for the 712px desktop layout; clamp it on mobile so the text isn't
	   crushed into a narrow column. Keyed off the centered <p> so left-aligned
	   card copy is untouched — no dependency on hashed, per-edition class names. */
	.lone-pine .copy:has(> p[style*="text-align: center"]) {
		padding-right: 6% !important;
		padding-left: 6% !important;
	}
}

/* Kill the inline-image baseline gap between hero images and the card below */
.lone-pine .image img {
	vertical-align: bottom;
}

/* Hide the email's footer — site footer already renders below */
.lone-pine .footer-container {
	display: none;
}

/* Social-follow icons: the new export ships empty <a> tags, so we paint
   the icon as a background-image keyed off the href. */

/* Center the social-icon row. The cell centers via its align attribute on
   desktop, but the mobile rules flip it to display:block and the attribute
   stops centering — so center explicitly, keyed off the social anchors
   (stable across editions, unlike the hashed cell class). */
.lone-pine .copy:has(a[target="_blank"]) {
	text-align: center !important;
}

.lone-pine a[href*="youtube.com"][target="_blank"],
.lone-pine a[href*="bilibili.com"][target="_blank"],
.lone-pine a[href*="linkedin.com"][target="_blank"],
.lone-pine a[href*="weixin.qq.com"][target="_blank"] {
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px 48px;
	margin: 0 12px;
}

.lone-pine a[href*="youtube.com"][target="_blank"] {
	background-image: url("/click/images/mcfly/social-youtube_2x.png");
}
.lone-pine a[href*="bilibili.com"][target="_blank"] {
	background-image: url("/click/images/mcfly/social-billibilli_2x.png");
}
.lone-pine a[href*="linkedin.com"][target="_blank"] {
	background-image: url("/click/images/mcfly/social-linkedin_2x.png");
}
.lone-pine a[href*="weixin.qq.com"][target="_blank"] {
	background-image: url("/click/images/mcfly/social-wechat_2x.png");
}

/* Eyebrows: paragraphs painted with the muted gray (134, 134, 139)
   should render in SF Pro Display, weight 900. */
.lone-pine .copy p[style*="134,"],
.lone-pine .copy p[style*="134,"] strong {
	font-family:
		"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 800 !important;
	opacity: 0.9;
	font-size: 16px;
}

/* Card eyebrows are left-aligned on mobile to match the card body copy.
   The intro date eyebrow is explicitly centered inline (like the "Hello
   Developer" headline), so exclude centered eyebrows from this. */
@media only screen and (max-width: 734px) {
	.lone-pine .copy p[style*="134,"]:not([style*="text-align: center"]) {
		text-align: left !important;
	}
}

/* Chevrons next to links read too dim against pure black; brighten in dark mode */
body.theme-dark .lone-pine .chevron img {
	filter: brightness(1.35);
}

/* Headings: render in SF Pro Display */
.lone-pine h1 strong,
.lone-pine h2 strong,
.lone-pine h3 strong,
.lone-pine h4 strong {
	font-family:
		"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 700;
}