/* ==========================================================================
   StreamGuide — design tokens & base
   Signature element: the EPG (electronic program guide) ticker in the hero.
   Palette is built around a broadcast control-room feel: ink-navy background,
   a tally-light cyan, and a signal-orange accent (the "on air" lamp color).
   ========================================================================== */

:root{
	--bg:            #0B0E14;
	--surface:       #131826;
	--surface-2:     #1B2233;
	--border:        #232B3D;
	--text:          #E8ECF4;
	--text-muted:    #8893A8;
	--accent:        #FF5A36;
	--accent-dark:   #E04321;
	--accent-2:      #2DE1C2;
	--accent-soft:   rgba(255, 90, 54, 0.14);
	--accent-2-soft: rgba(45, 225, 194, 0.14);

	--font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;

	--container-w: 1180px;
}

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

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

h1, h2, h3, h4{
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; color: var(--text-muted); }

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-2); }

ul{ margin: 0; padding: 0; list-style: none; }

:focus-visible{
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
}

.screen-reader-text{
	position: absolute;
	left: -9999px;
}
.skip-link:focus{
	left: 1rem;
	top: 1rem;
	position: fixed;
	z-index: 999;
	background: var(--surface);
	padding: 0.5em 1em;
	border-radius: var(--radius-sm);
}

.sg-container{
	width: 100%;
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 0 24px;
}

.sg-section{ padding: 88px 0; }
.sg-section-title{
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	margin-bottom: 40px;
	text-align: center;
}

/* Buttons */
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.8em 1.6em;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--accent); color: #fff; }
.btn-primary:hover{ background: var(--accent-dark); color: #fff; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.btn-outline{ background: transparent; color: var(--text); border-color: var(--border); width: 100%; }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.btn-sm{ padding: 0.55em 1.2em; font-size: 0.85rem; }
.btn-lg{ padding: 1em 2.2em; font-size: 1.05rem; }

.sg-eyebrow{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 14px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.sg-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 14, 20, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.sg-header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 76px;
	gap: 24px;
}
.sg-logo{ display: flex; align-items: center; gap: 10px; }
.sg-logo-mark{
	width: 26px; height: 26px;
	border-radius: 7px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	flex-shrink: 0;
}
.sg-logo-text{
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--text);
}
.sg-nav{ flex: 1; display: flex; justify-content: center; }
.nav-menu{ display: flex; gap: 32px; }
.nav-menu a{
	color: var(--text);
	font-weight: 500;
	font-size: 0.95rem;
}
.nav-menu a:hover{ color: var(--accent-2); }
.sg-header-actions{ display: flex; align-items: center; gap: 14px; }

.sg-nav-toggle{
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	background: none;
	border: none;
	cursor: pointer;
}
.sg-nav-toggle span{
	display: block;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
}

/* ==========================================================================
   Hero + EPG ticker (signature element)
   ========================================================================== */
.sg-hero{
	padding: 80px 0 0;
	background:
		radial-gradient(60% 50% at 80% 0%, var(--accent-soft), transparent 60%),
		radial-gradient(50% 40% at 10% 10%, var(--accent-2-soft), transparent 60%);
}
.sg-hero-inner{ text-align: center; max-width: 760px; margin: 0 auto; }
.sg-hero-title{
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	margin-bottom: 0.5em;
}
.sg-hero-sub{
	font-size: 1.1rem;
	max-width: 600px;
	margin: 0 auto 2em;
}
.sg-hero-actions{
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 64px;
	flex-wrap: wrap;
}

.sg-epg{
	border-top: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
	padding: 22px 0;
}
.sg-epg-track{
	display: flex;
	gap: 16px;
	width: max-content;
	padding: 0 24px;
	animation: sg-scroll 38s linear infinite;
}
.sg-epg:hover .sg-epg-track{ animation-play-state: paused; }
@keyframes sg-scroll{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
.sg-epg-card{
	flex: 0 0 220px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}
.sg-epg-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.sg-epg-num{
	font-family: var(--font-mono);
	font-size: 1.1rem;
	color: var(--text);
}
.sg-epg-live{
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--accent);
}
.sg-dot{
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: sg-pulse 1.6s ease-in-out infinite;
}
@keyframes sg-pulse{
	0%, 100%{ opacity: 1; }
	50%{ opacity: 0.35; }
}
.sg-epg-cat{
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--text);
	margin-bottom: 2px;
}
.sg-epg-program{
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-bottom: 12px;
}
.sg-epg-bar{
	height: 4px;
	background: var(--border);
	border-radius: 2px;
	overflow: hidden;
}
.sg-epg-bar span{
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* ==========================================================================
   Steps
   ========================================================================== */
.sg-steps-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.sg-step{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
}
.sg-step-num{
	display: block;
	font-family: var(--font-mono);
	color: var(--accent-2);
	font-size: 0.9rem;
	margin-bottom: 14px;
}
.sg-step h3{ font-size: 1.15rem; }

/* ==========================================================================
   Devices
   ========================================================================== */
.sg-devices-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.sg-device-card{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px 20px;
	text-align: center;
}
.sg-device-icon{
	display: inline-block;
	font-size: 1.6rem;
	color: var(--accent-2);
	margin-bottom: 12px;
}
.sg-device-card p{ margin: 0; color: var(--text); }
.sg-device-note{ color: var(--text-muted) !important; font-size: 0.85rem; margin-top: 6px !important; }

/* ==========================================================================
   Pricing cards
   ========================================================================== */
.sg-pricing-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
.sg-price-card{
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.sg-price-card.is-featured{
	border-color: var(--accent);
	background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.sg-price-badge{
	position: absolute;
	top: -12px;
	left: 28px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 100px;
	margin: 0;
}
.sg-price-card h3{ font-size: 1.3rem; }
.sg-price{
	font-family: var(--font-display);
	font-size: 2.4rem;
	color: var(--text);
	margin-bottom: 20px;
}
.sg-price span{
	font-size: 1rem;
	color: var(--text-muted);
	font-family: var(--font-body);
}
.sg-price-features{
	margin-bottom: 28px;
	flex: 1;
}
.sg-price-features li{
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: 0.92rem;
}
.sg-price-features li:last-child{ border-bottom: none; }
.sg-pricing-link{ text-align: center; margin-top: 32px; }

/* ==========================================================================
   Categories
   ========================================================================== */
.sg-categories-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.sg-category-card{
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent-2);
	border-radius: var(--radius-md);
	padding: 22px 24px;
}
.sg-category-card h4{ margin-bottom: 6px; font-size: 1.05rem; }
.sg-category-card p{ margin: 0; font-size: 0.9rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.sg-testimonials-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.sg-testimonial{
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px 24px;
}
.sg-testimonial p{ color: var(--text); font-size: 0.98rem; margin-bottom: 14px; }
.sg-testimonial cite{ color: var(--accent-2); font-size: 0.85rem; font-style: normal; }

/* ==========================================================================
   FAQ teaser + CTA banner
   ========================================================================== */
.sg-faq-teaser-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 40px;
}
.sg-faq-teaser-inner h2{ margin-bottom: 6px; text-align: left; }
.sg-faq-teaser-inner p{ margin: 0; }

.sg-cta-banner{
	padding: 80px 0;
	background: linear-gradient(135deg, var(--accent-dark), var(--accent));
	text-align: center;
}
.sg-cta-banner-inner h2{ color: #fff; margin-bottom: 0.3em; }
.sg-cta-banner-inner p{ color: rgba(255,255,255,0.85); margin-bottom: 28px; }
.sg-cta-banner .btn-primary{ background: var(--bg); }
.sg-cta-banner .btn-primary:hover{ background: var(--surface-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.sg-footer{
	border-top: 1px solid var(--border);
	padding: 64px 0 0;
	background: var(--surface);
}
.sg-footer-grid{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
}
.sg-footer-tagline{ font-size: 0.9rem; margin-top: 12px; max-width: 280px; }
.sg-social{ display: flex; gap: 10px; margin-top: 16px; }
.sg-social a{
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border);
	border-radius: 50%;
	font-size: 0.7rem;
	color: var(--text-muted);
}
.sg-social a:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.footer-widget-title{
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
	margin-bottom: 16px;
}
.footer-menu li{ margin-bottom: 10px; }
.footer-menu a{ color: var(--text-muted); font-size: 0.92rem; }
.footer-menu a:hover{ color: var(--accent-2); }
.sg-footer-bottom{
	border-top: 1px solid var(--border);
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.sg-footer-bottom p{ margin: 0; font-size: 0.82rem; }

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.sg-page-hero{
	padding: 72px 0 56px;
	text-align: center;
	background:
		radial-gradient(50% 60% at 50% 0%, var(--accent-soft), transparent 65%);
	border-bottom: 1px solid var(--border);
}
.sg-page-hero h1{ font-size: clamp(2rem, 4vw, 2.8rem); }
.sg-page-hero-sub{ max-width: 560px; margin: 0 auto; font-size: 1.05rem; }
.sg-page-hero-compact{ padding: 56px 0 40px; }
.sg-page-hero-compact h1{ margin: 0; }

/* Billing toggle (Pricing page) */
.sg-billing-toggle{
	display: inline-flex;
	margin-top: 28px;
	border: 1px solid var(--border);
	border-radius: 100px;
	padding: 4px;
	background: var(--surface);
}
.sg-billing-toggle button{
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--text-muted);
	background: none;
	border: none;
	padding: 8px 18px;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}
.sg-billing-toggle button.is-active{
	background: var(--accent);
	color: #fff;
}
.sg-save-tag{
	font-family: var(--font-mono);
	font-size: 0.65rem;
	background: rgba(255,255,255,0.18);
	padding: 2px 6px;
	border-radius: 6px;
}

.sg-pricing-grid-full{ margin-top: -110px; }

/* Compare table */
.sg-table-wrap{ overflow-x: auto; }
.sg-compare-table{
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.sg-compare-table th, .sg-compare-table td{
	padding: 14px 20px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: 0.92rem;
}
.sg-compare-table th{
	font-family: var(--font-display);
	color: var(--text);
	background: var(--surface-2);
}
.sg-compare-table td:first-child, .sg-compare-table th:first-child{ color: var(--text); }
.sg-compare-table tr:last-child td{ border-bottom: none; }
.sg-table-note{ font-size: 0.8rem; margin-top: 12px; }

/* Channels & devices page extras */
.sg-categories-grid-detailed .sg-category-card p{ font-size: 0.88rem; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.sg-faq-container{ max-width: 760px; }
.sg-faq-group-title{
	font-size: 1.1rem;
	margin: 40px 0 16px;
}
.sg-faq-group-title:first-child{ margin-top: 0; }
.sg-accordion-item{
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	margin-bottom: 10px;
	background: var(--surface);
	overflow: hidden;
}
.sg-accordion-trigger{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: none;
	border: none;
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.98rem;
	padding: 18px 20px;
	cursor: pointer;
	text-align: left;
}
.sg-accordion-icon{
	flex-shrink: 0;
	color: var(--accent-2);
	font-size: 1.2rem;
	transition: transform 0.2s ease;
}
.sg-accordion-trigger[aria-expanded="true"] .sg-accordion-icon{ transform: rotate(45deg); }
.sg-accordion-panel{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	padding: 0 20px;
}
.sg-accordion-panel p{ padding-bottom: 18px; margin: 0; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.sg-contact-grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
}
.sg-contact-form{ display: flex; flex-direction: column; gap: 6px; }
.sg-contact-form label{
	font-size: 0.85rem;
	color: var(--text);
	margin-top: 14px;
}
.sg-contact-form input, .sg-contact-form textarea{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.95rem;
	resize: vertical;
}
.sg-contact-form input:focus, .sg-contact-form textarea:focus{
	border-color: var(--accent-2);
	outline: none;
}
.sg-contact-form .btn{ margin-top: 20px; align-self: flex-start; }
.sg-form-notice{
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
	font-size: 0.9rem;
}
.sg-form-success{ background: var(--accent-2-soft); color: var(--accent-2); }
.sg-form-error{ background: var(--accent-soft); color: var(--accent); }
.sg-contact-info-list li{
	margin-bottom: 22px;
	color: var(--text-muted);
	font-size: 0.92rem;
}
.sg-contact-info-list strong{ color: var(--text); display: block; margin-bottom: 4px; }

/* ==========================================================================
   Blog, single post, 404, prose
   ========================================================================== */
.sg-prose{ max-width: 720px; }
.sg-prose p{ color: var(--text); }
.sg-blog-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
.sg-post-card{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
}
.sg-post-thumb{ display: block; margin: -24px -24px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.sg-post-card h2{ font-size: 1.2rem; }
.sg-post-card h2 a{ color: var(--text); }
.sg-post-meta{ font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-muted); }
.sg-read-more{ font-weight: 600; font-size: 0.88rem; }
.sg-pagination{ margin-top: 40px; text-align: center; }
.sg-404{ text-align: center; padding: 140px 0; }
.sg-404 h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
	.sg-steps-grid, .sg-devices-grid, .sg-pricing-grid, .sg-categories-grid, .sg-testimonials-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.sg-footer-grid{ grid-template-columns: 1fr 1fr; }
	.sg-contact-grid{ grid-template-columns: 1fr; }
	.sg-blog-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
	.sg-nav{
		position: absolute;
		top: 76px; left: 0; right: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		display: none;
		padding: 16px 24px;
	}
	.sg-nav.is-open{ display: block; }
	.nav-menu{ flex-direction: column; gap: 16px; }
	.sg-nav-toggle{ display: flex; }
	.sg-header-actions .btn-sm{ display: none; }

	.sg-steps-grid, .sg-devices-grid, .sg-pricing-grid, .sg-categories-grid, .sg-testimonials-grid{
		grid-template-columns: 1fr;
	}
	.sg-footer-grid{ grid-template-columns: 1fr; }
	.sg-pricing-grid-full{ margin-top: 32px; }
	.sg-faq-teaser-inner{ flex-direction: column; align-items: flex-start; text-align: left; }
	.sg-faq-teaser-inner h2{ text-align: left; }
}

/* ==========================================================================
   Gutenberg block compatibility
   The patterns in inc/block-patterns.php reuse every class above, but core
   blocks (Group, Buttons, List, Quote) ship their own baseline styles too.
   These rules neutralize the few that would otherwise fight our design,
   and restyle the native Button block to match .btn instead of duplicating
   button CSS on a second class.
   ========================================================================== */

/* Grid sections: Group's default block styling is minimal, but force the
   layout explicitly so nothing a buyer's other plugins inject can collapse it. */
.sg-steps-grid, .sg-devices-grid, .sg-pricing-grid, .sg-categories-grid, .sg-testimonials-grid{
	display: grid !important;
}

/* Native Button block → same look as .btn-primary by default */
.wp-block-button__link{
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.8em 1.6em;
	border-radius: var(--radius-md);
	background: var(--accent);
	color: #fff !important;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:hover{
	background: var(--accent-dark);
	transform: translateY(-1px);
	color: #fff !important;
}

.wp-block-button.sg-btn-ghost .wp-block-button__link{
	background: transparent;
	color: var(--text) !important;
	border: 1px solid var(--border);
}
.wp-block-button.sg-btn-ghost .wp-block-button__link:hover{
	border-color: var(--accent-2);
	color: var(--accent-2) !important;
	background: transparent;
}

.wp-block-button.sg-btn-outline .wp-block-button__link{
	background: transparent;
	color: var(--text) !important;
	border: 1px solid var(--border);
	display: block;
	text-align: center;
	width: 100%;
}
.wp-block-button.sg-btn-outline .wp-block-button__link:hover{
	border-color: var(--accent);
	color: var(--accent) !important;
	background: transparent;
}

.wp-block-button.sg-btn-lg .wp-block-button__link{
	padding: 1em 2.2em;
	font-size: 1.05rem;
}

/* Native List block inside pricing cards — strip the default bullet/indent core adds */
ul.sg-price-features{
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Native Quote block for testimonials — remove core's default italic + left border,
   the card look already comes from .sg-testimonial */
.wp-block-quote.sg-testimonial{
	border-left: none;
	padding-left: 0;
	font-style: normal;
}
.wp-block-quote.sg-testimonial cite{
	font-style: normal;
}

/* Editor canvas: load the same fonts/colors so editing feels WYSIWYG */
.editor-styles-wrapper{
	background: var(--bg);
}