/**
 * SEO Ultra Pro — Custom Blocks stylesheet.
 * Loaded on frontend AND in the editor (enqueue_block_assets).
 * Uses theme CSS variables with fallbacks so it also works standalone.
 */

/* ============================================================
   Variables (fallbacks)
   ============================================================ */
:root {
	--sup-primary: #0b6e4f;
	--sup-primary-dark: #084c37;
	--sup-accent: #f5b70a;
	--sup-text: #1a1a2e;
	--sup-text-light: #555;
	--sup-bg: #ffffff;
	--sup-box-bg: #f7f9f8;
	--sup-border: #e2e8f0;
	--sup-radius: 12px;
	--sup-shadow: 0 4px 18px rgba(0, 0, 0, .07);
	--sup-info: #2563eb;
	--sup-warning: #d97706;
	--sup-success: #15803d;
	--sup-danger: #dc2626;
	--sup-tip: #7c3aed;
}

/* ============================================================
   STEPS — shared
   ============================================================ */
.sup-steps {
	list-style: none;
	counter-reset: sup-step;
	margin: 1.6em 0;
	padding: 0;
}
.sup-step {
	counter-increment: sup-step;
	position: relative;
}
.sup-step-title { margin-top: 0; color: var(--sup-steps-title, inherit); }
.sup-step-content > *:last-child { margin-bottom: 0; }

/* Steps 1 — numbered circles with connecting line.
   The number is a standalone circular badge in its own left column:
   the <li> carries wide left padding and the badge is absolutely
   positioned inside that gutter, so it can NEVER touch the heading. */
.sup-steps--1 .sup-step {
	padding: .15rem 0 1.9rem 4.2rem;
	min-height: 2.6rem;
}
.sup-steps--1 .sup-step::before {
	content: counter(sup-step);
	position: absolute;
	left: 0; top: 2px;
	width: 2.6rem; height: 2.6rem;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--sup-steps-accent, var(--sup-primary)), var(--sup-primary-dark));
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	z-index: 1;
}
.sup-steps--1 .sup-step::after {
	content: "";
	position: absolute;
	left: 1.3rem; top: 3.2rem; bottom: -.2rem;
	transform: translateX(-50%);
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--sup-steps-accent, var(--sup-primary)) 0 6px, transparent 6px 12px);
	opacity: .45;
}
.sup-steps--1 .sup-step:last-child::after { display: none; }
.sup-steps--1 .sup-step-title { margin: .3rem 0 .5rem; line-height: 1.3; }

/* Steps 2 — vertical timeline.
   The line runs through the badge centres; every badge is a separate
   circle with a page-coloured ring so it sits ON the line, and the
   content column starts a clear gap after the badge. */
.sup-steps--2 { position: relative; }
.sup-steps--2::before {
	content: "";
	position: absolute;
	left: 1.4rem; top: .4rem; bottom: .4rem;
	width: 3px;
	margin-left: -1.5px;
	background: var(--sup-border);
	border-radius: 3px;
}
.sup-steps--2 .sup-step {
	padding: .1rem 0 1.9rem 4rem;
	min-height: 2.8rem;
}
.sup-steps--2 .sup-step::before {
	content: counter(sup-step);
	position: absolute;
	left: 0; top: 2px;
	width: 2.8rem; height: 2.8rem;
	display: flex; align-items: center; justify-content: center;
	background: var(--sup-bg);
	border: 3px solid var(--sup-steps-accent, var(--sup-primary));
	color: var(--sup-steps-accent, var(--sup-primary));
	font-weight: 800;
	line-height: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 5px var(--sup-bg);
	z-index: 1;
}
.sup-steps--2 .sup-step-title { margin: .35rem 0 .5rem; line-height: 1.3; }

/* Steps 3 — cards grid.
   The badge floats on the card's top-left corner, half outside the
   card; the container's top padding plus the card's own top padding
   guarantee it never overlaps the heading. */
.sup-steps--3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.8rem 1.1rem;
	padding-top: 1.2rem;
}
.sup-steps--3 .sup-step {
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	padding: 1.5rem 1.2rem 1.2rem;
	box-shadow: var(--sup-shadow);
}
.sup-steps--3 .sup-step::before {
	content: counter(sup-step);
	position: absolute;
	left: 1.1rem; top: -1.2rem;
	width: 2.4rem; height: 2.4rem;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--sup-steps-accent, var(--sup-primary)), var(--sup-primary-dark));
	color: #fff;
	font-weight: 800;
	line-height: 1;
	border-radius: 50%;
	border: 3px solid var(--sup-bg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.sup-steps--3 .sup-step-title { margin: 0 0 .5rem; line-height: 1.3; }

/* Steps 4 — minimal: the number is a small chip sitting inline BEFORE
   the heading with a clear .6rem margin — never glued to it. */
.sup-steps--4 .sup-step {
	padding: .5rem 0;
	margin-bottom: 1.1rem;
}
.sup-steps--4 .sup-step::before {
	content: counter(sup-step);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.9rem; height: 1.9rem;
	padding: 0 .35rem;
	margin-right: .6rem;
	vertical-align: middle;
	background: var(--sup-steps-accent, var(--sup-primary));
	color: #fff;
	font-weight: 800;
	font-size: .95rem;
	line-height: 1;
	border-radius: 8px;
}
.sup-steps--4 .sup-step-title {
	display: inline;
	font-size: 1.08em;
	vertical-align: middle;
}
.sup-steps--4 .sup-step-content { margin-top: .45rem; }

/* ============================================================
   FAQ — shared (details/summary, zero JS)
   ============================================================ */
.sup-faq { margin: 1.6em 0; }
.sup-faq-item { margin-bottom: .7em; }
.sup-faq-q {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-weight: 700;
	padding: 1em 1.2em;
	background: var(--sup-faq-head-bg, transparent);
	color: var(--sup-faq-head-color, inherit);
}
.sup-faq-item > .sup-faq-q {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.sup-faq-q::-webkit-details-marker { display: none; }
.sup-faq-toggle {
	flex: 0 0 auto;
	width: 1.6em; height: 1.6em;
	position: relative;
	border-radius: 50%;
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
}
.sup-faq-toggle::before,
.sup-faq-toggle::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}
.sup-faq-toggle::before { width: .7em; height: 2px; }
.sup-faq-toggle::after { width: 2px; height: .7em; }
.sup-faq-item[open ] > .sup-faq-q .sup-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.sup-faq-a { padding: 0 1.2em 1.1em; }
.sup-faq-a > *:first-child { margin-top: 0; }
.sup-faq-a > *:last-child { margin-bottom: 0; }

/* FAQ 1 — classic */
.sup-faq--1 .sup-faq-item {
	background: var(--sup-faq-body-bg, var(--sup-box-bg));
	border: 1px solid var(--sup-faq-border, transparent);
	border-radius: var(--sup-faq-radius, var(--sup-radius));
	overflow: hidden;
}

/* FAQ 2 — bordered */
.sup-faq--2 .sup-faq-item {
	border: 1px solid var(--sup-faq-border, var(--sup-border));
	border-radius: var(--sup-faq-radius, var(--sup-radius));
	background: var(--sup-faq-body-bg, var(--sup-bg));
}
.sup-faq--2 .sup-faq-item[open ] { border-color: var(--sup-faq-accent, var(--sup-primary)); }
.sup-faq--2 .sup-faq-a { border-top: 1px dashed var(--sup-border); padding-top: 1em; }

/* FAQ 3 — gradient header */
.sup-faq--3 .sup-faq-item {
	border: 1px solid var(--sup-faq-border, transparent);
	border-radius: var(--sup-faq-radius, var(--sup-radius));
	overflow: hidden;
	box-shadow: var(--sup-shadow);
	background: var(--sup-faq-body-bg, var(--sup-bg));
}
.sup-faq--3 .sup-faq-q {
	background: var(--sup-faq-head-bg, linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark)));
	color: var(--sup-faq-head-color, #fff);
}
.sup-faq--3 .sup-faq-toggle { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }

/* FAQ 4 — minimal plus */
.sup-faq--4 .sup-faq-item { border-bottom: 1px solid var(--sup-border); margin-bottom: 0; }
.sup-faq--4 .sup-faq-q { padding-left: 0; padding-right: 0; }
.sup-faq--4 .sup-faq-toggle { background: transparent; border: none; color: var(--sup-faq-accent, var(--sup-primary)); }
.sup-faq--4 .sup-faq-a { padding-left: 0; padding-right: 0; }

/* FAQ 5 — card shadow */
.sup-faq--5 .sup-faq-item {
	background: var(--sup-faq-body-bg, var(--sup-bg));
	border: 1px solid var(--sup-faq-border, transparent);
	border-radius: var(--sup-faq-radius, 16px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
	padding: .2em .4em;
	margin-bottom: 1em;
}
.sup-faq--5 .sup-faq-toggle {
	background: var(--sup-faq-accent, var(--sup-primary));
	border-color: transparent;
	color: #fff;
}

/* ============================================================
   TOC — 4 designs
   ============================================================ */
.sup-toc { margin: 1.6em 0; }
.sup-toc-title { font-weight: 800; margin: 0 0 .6em; }
.sup-toc-list { margin: 0; padding-left: 1.2em; }
.sup-toc-item { margin: .3em 0; }
.sup-toc-item--h3 { margin-left: 1.2em; font-size: .95em; }
.sup-toc a { text-decoration: none; }
.sup-toc a:hover { text-decoration: underline; }

/* TOC 1 — boxed */
.sup-toc--1 {
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
	border-left: 4px solid var(--sup-primary);
	border-radius: var(--sup-radius);
	padding: 1.1em 1.3em;
}

/* TOC 2 — minimal */
.sup-toc--2 { border-top: 2px solid var(--sup-text); border-bottom: 2px solid var(--sup-text); padding: 1em 0; }
.sup-toc--2 .sup-toc-list { list-style: none; padding-left: 0; }
.sup-toc--2 .sup-toc-item--h3 { margin-left: 1.4em; }

/* TOC 3 — sidebar card */
.sup-toc--3 {
	background: var(--sup-bg);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	padding: 1.2em 1.3em;
	position: sticky;
	top: 90px;
}
.sup-toc--3 .sup-toc-item a { display: block; padding: .25em .6em; border-radius: 8px; }
.sup-toc--3 .sup-toc-item a:hover { background: var(--sup-box-bg); text-decoration: none; }

/* TOC 4 — gradient head */
.sup-toc--4 {
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	overflow: hidden;
	background: var(--sup-bg);
}
.sup-toc--4 .sup-toc-title {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	margin: 0;
	padding: .8em 1.2em;
}
.sup-toc--4 .sup-toc-list { padding: 1em 1.3em 1.1em 2.4em; }
.sup-toc--4 .sup-toc-summary {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	font-weight: 800;
	padding: .8em 1.2em;
	cursor: pointer;
}

/* ============================================================
   INFO CARD
   ============================================================ */
.sup-info-card {
	display: flex;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1.1em 1.25em;
	border-radius: var(--sup-radius);
	background: var(--sup-box-bg);
}
.sup-info-icon { font-size: 1.6em; line-height: 1.2; flex: 0 0 auto; }
.sup-info-title { font-weight: 800; margin: 0 0 .3em; }
.sup-info-content > *:first-child { margin-top: 0; }
.sup-info-content > *:last-child { margin-bottom: 0; }
.sup-info-content { margin: 0; }

.sup-info--info    { --sup-card-color: var(--sup-info); }
.sup-info--warning { --sup-card-color: var(--sup-warning); }
.sup-info--success { --sup-card-color: var(--sup-success); }
.sup-info--danger  { --sup-card-color: var(--sup-danger); }
.sup-info--tip     { --sup-card-color: var(--sup-tip); }
.sup-info--note    { --sup-card-color: var(--sup-text-light); }

.sup-info-design--flat { border: 1px solid var(--sup-border); }
.sup-info-design--left-bar {
	border: 1px solid var(--sup-border);
	border-left: 5px solid var(--sup-card-color, var(--sup-info));
}
.sup-info-design--gradient {
	background: linear-gradient(135deg, var(--sup-card-color, var(--sup-info)), var(--sup-primary-dark));
	color: #fff;
}
.sup-info-design--gradient .sup-info-title { color: #fff; }
.sup-info-design--3d {
	border: 1px solid var(--sup-border);
	box-shadow: 0 10px 0 -4px var(--sup-card-color, var(--sup-info)), 0 18px 30px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}

/* ============================================================
   HIGHLIGHT BOX
   ============================================================ */
.sup-highlight {
	display: flex;
	gap: .9em;
	align-items: flex-start;
	margin: 1.6em 0;
	padding: 1.2em 1.4em;
	border-radius: var(--sup-radius);
	font-size: 1.05em;
}
.sup-highlight-icon { font-size: 1.5em; line-height: 1.2; }
.sup-highlight-content > *:first-child { margin-top: 0; }
.sup-highlight-content > *:last-child { margin-bottom: 0; }
.sup-highlight--gradient {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	box-shadow: var(--sup-shadow);
}
.sup-highlight--bordered {
	background: var(--sup-box-bg);
	border: 2px dashed var(--sup-accent);
}
.sup-highlight--solid {
	background: var(--sup-accent);
	color: #1a1a2e;
}

/* ============================================================
   ICON BOX
   ============================================================ */
.sup-icon-box {
	display: block;
	text-align: center;
	padding: 1.6em 1.2em;
	margin: 0 0 1em;
	text-decoration: none;
	color: inherit;
}
.sup-icon-box-icon { font-size: 2.4em; display: block; margin-bottom: .35em; line-height: 1; }
.sup-icon-box-title { margin: 0 0 .35em; font-size: 1.15em; }
.sup-icon-box-text { margin: 0; color: var(--sup-text-light); }
.sup-icon-box--card {
	background: var(--sup-bg);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	box-shadow: var(--sup-shadow);
}
.sup-icon-box--minimal { padding: .6em; }
.sup-icon-box--gradient {
	background: linear-gradient(160deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	border-radius: var(--sup-radius);
}
.sup-icon-box--gradient .sup-icon-box-text { color: rgba(255, 255, 255, .85); }
.sup-icon-box--3d {
	background: var(--sup-bg);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	box-shadow: 0 12px 0 -6px var(--sup-accent), 0 20px 34px rgba(0, 0, 0, .14);
}
a.sup-icon-box { transition: transform .2s ease, box-shadow .2s ease; }
a.sup-icon-box:hover { transform: translateY(-3px); }

/* ============================================================
   HEADING BLOCK STYLES (core/heading)
   ============================================================ */
.is-style-sup-heading-1 {
	position: relative;
	padding-bottom: .3em;
}
.is-style-sup-heading-1::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 72px; height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sup-primary), var(--sup-accent));
}
.is-style-sup-heading-2 {
	border-left: 6px solid var(--sup-primary);
	padding-left: .55em;
}
.is-style-sup-heading-3 {
	display: inline-block;
	background: var(--sup-primary);
	color: #fff !important;
	padding: .25em .9em;
	border-radius: 999px;
	font-size: 1.25em;
}
.is-style-sup-heading-4 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	letter-spacing: .01em;
	border-bottom: 1px solid var(--sup-accent);
	padding-bottom: .25em;
}
.is-style-sup-heading-5 {
	display: flex;
	align-items: center;
	gap: .5em;
}
.is-style-sup-heading-5::before {
	content: "★";
	display: inline-flex;
	align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 1.5em; height: 1.5em;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	font-size: .75em;
	box-shadow: var(--sup-shadow);
}
/* Style 6 — Soft Band: tinted band + gradient accent bar */
.is-style-sup-heading-6 {
	background: color-mix(in srgb, var(--sup-primary) 10%, transparent);
	border-left: 5px solid;
	border-image: linear-gradient(180deg, var(--sup-primary), var(--sup-accent)) 1;
	padding: .45em .8em;
	border-radius: 12px;
}
/* Style 7 — Marker Highlight: accent marker sweep behind the text */
.is-style-sup-heading-7 {
	display: inline;
	font-weight: 800;
	padding: 0 .15em;
	background: linear-gradient(transparent 55%, var(--sup-accent) 55%, var(--sup-accent) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Style 8 — Gradient Chip Number: big gradient chip + gradient underline */
.is-style-sup-heading-8 {
	counter-increment: sup-block-h8;
	display: flex;
	align-items: center;
	gap: .55em;
	position: relative;
	font-weight: 800;
	padding-bottom: .28em;
}
.is-style-sup-heading-8::before {
	content: counter(sup-block-h8, decimal-leading-zero);
	display: inline-flex;
	align-items: center; justify-content: center;
	flex: 0 0 auto;
	min-width: 2em; height: 2em;
	padding: 0 .35em;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-accent));
	color: #fff;
	font-size: .6em;
	font-weight: 800;
	box-shadow: var(--sup-shadow);
}
.is-style-sup-heading-8::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 120px; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sup-primary), var(--sup-accent));
}

/* ============================================================
   TABLE BLOCK STYLES (core/table)
   ============================================================ */
.wp-block-table.is-style-sup-table-striped-premium table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--sup-radius);
	overflow: hidden;
	box-shadow: var(--sup-shadow);
	width: 100%;
}
.wp-block-table.is-style-sup-table-striped-premium thead th {
	background: var(--sup-primary);
	color: #fff;
	text-align: left;
	padding: .8em 1em;
	border: none;
}
.wp-block-table.is-style-sup-table-striped-premium tbody td {
	padding: .7em 1em;
	border: none;
	border-bottom: 1px solid var(--sup-border);
}
.wp-block-table.is-style-sup-table-striped-premium tbody tr:nth-child(even) td { background: var(--sup-box-bg); }
.wp-block-table.is-style-sup-table-striped-premium tbody tr:hover td { background: rgba(0, 0, 0, .03); }

.wp-block-table.is-style-sup-table-dark-head table { border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-sup-table-dark-head thead th {
	background: #14142b;
	color: #fff;
	padding: .85em 1em;
	text-align: left;
	border: 1px solid #14142b;
}
.wp-block-table.is-style-sup-table-dark-head tbody td {
	padding: .7em 1em;
	border: 1px solid var(--sup-border);
}

.wp-block-table.is-style-sup-table-cards table { border-collapse: separate; border-spacing: 0 .55em; width: 100%; }
.wp-block-table.is-style-sup-table-cards thead th {
	background: transparent;
	color: var(--sup-text-light);
	text-transform: uppercase;
	font-size: .78em;
	letter-spacing: .06em;
	border: none;
	padding: .2em 1em;
	text-align: left;
}
.wp-block-table.is-style-sup-table-cards tbody tr {
	background: var(--sup-bg);
	box-shadow: var(--sup-shadow);
}
.wp-block-table.is-style-sup-table-cards tbody td {
	padding: .85em 1em;
	border: none;
}
.wp-block-table.is-style-sup-table-cards tbody td:first-child { border-radius: var(--sup-radius) 0 0 var(--sup-radius); }
.wp-block-table.is-style-sup-table-cards tbody td:last-child { border-radius: 0 var(--sup-radius) var(--sup-radius) 0; }

/* ============================================================
   LIST BLOCK STYLES (core/list)
   ============================================================ */
ul.is-style-sup-list-check,
ul.is-style-sup-list-arrow { list-style: none; padding-left: .2em; }
ul.is-style-sup-list-check li,
ul.is-style-sup-list-arrow li { position: relative; padding-left: 1.7em; margin-bottom: .45em; }
ul.is-style-sup-list-check li::before {
	content: "✓";
	position: absolute;
	left: 0; top: .05em;
	width: 1.25em; height: 1.25em;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sup-success);
	color: #fff;
	font-size: .8em;
	font-weight: 800;
	border-radius: 50%;
}
ul.is-style-sup-list-arrow li::before {
	content: "➤";
	position: absolute;
	left: 0; top: 0;
	color: var(--sup-primary);
}
ol.is-style-sup-list-numbered-premium,
ul.is-style-sup-list-numbered-premium {
	list-style: none;
	counter-reset: sup-list;
	padding-left: .2em;
}
ol.is-style-sup-list-numbered-premium li,
ul.is-style-sup-list-numbered-premium li {
	counter-increment: sup-list;
	position: relative;
	padding-left: 2.3em;
	margin-bottom: .55em;
}
ol.is-style-sup-list-numbered-premium li::before,
ul.is-style-sup-list-numbered-premium li::before {
	content: counter(sup-list);
	position: absolute;
	left: 0; top: -.05em;
	width: 1.7em; height: 1.7em;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	font-weight: 800;
	font-size: .85em;
	border-radius: 8px;
}

/* ============================================================
   BUTTON BLOCK STYLES (core/button)
   ============================================================ */
.wp-block-button.is-style-sup-btn-gradient .wp-block-button__link {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	border: none;
	box-shadow: var(--sup-shadow);
}
.wp-block-button.is-style-sup-btn-gradient .wp-block-button__link:hover { filter: brightness(1.1); }
.wp-block-button.is-style-sup-btn-3d .wp-block-button__link {
	background: var(--sup-primary);
	color: #fff;
	border: none;
	box-shadow: 0 6px 0 var(--sup-primary-dark), 0 12px 22px rgba(0, 0, 0, .18);
	transition: transform .12s ease, box-shadow .12s ease;
}
.wp-block-button.is-style-sup-btn-3d .wp-block-button__link:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--sup-primary-dark);
}

/* ============================================================
   AUTHOR CARD + FACT CHECK (block-context hooks only —
   main styling ships with the theme's component CSS)
   ============================================================ */
.sup-author-card-block { margin: 1.8em 0; }
.sup-fact-check-block { margin: 1.8em 0; }

/* ============================================================
   FAQ TOGGLE ICON STYLES (wrapper class sup-faq-icons--*)
   ============================================================ */
/* plus — the shared .sup-faq-toggle rules above already draw a
   plus that collapses to a minus when the item is open. */

/* chevron — a CSS chevron that flips up when open */
.sup-faq-icons--chevron .sup-faq-toggle { background: transparent; border: none; }
.sup-faq-icons--chevron .sup-faq-toggle::before {
	content: "";
	background: transparent;
	width: .55em; height: .55em;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: translate(-50%, -68%) rotate(45deg);
	transition: transform .25s ease;
}
.sup-faq-icons--chevron .sup-faq-toggle::after { display: none; }
.sup-faq-icons--chevron .sup-faq-item[open ] > .sup-faq-q .sup-faq-toggle::before {
	transform: translate(-50%, -32%) rotate(225deg);
}

/* arrow — slides on hover, points down when open */
.sup-faq-icons--arrow .sup-faq-toggle::before {
	content: "→";
	background: transparent;
	width: auto; height: auto;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1;
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}
.sup-faq-icons--arrow .sup-faq-toggle::after { display: none; }
.sup-faq-icons--arrow .sup-faq-q:hover .sup-faq-toggle::before { transform: translate(-28%, -50%); }
.sup-faq-icons--arrow .sup-faq-item[open ] > .sup-faq-q .sup-faq-toggle::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* none — no toggle icon at all */
.sup-faq-icons--none .sup-faq-toggle { display: none; }

/* ============================================================
   LIST STYLE — crosses (cons lists, registered in inc/blocks.php)
   ============================================================ */
ul.is-style-sup-list-cross { list-style: none; padding-left: .2em; }
ul.is-style-sup-list-cross li { position: relative; padding-left: 1.7em; margin-bottom: .45em; }
ul.is-style-sup-list-cross li::before {
	content: "✕";
	position: absolute;
	left: 0; top: .05em;
	width: 1.25em; height: 1.25em;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sup-danger);
	color: #fff;
	font-size: .75em;
	font-weight: 800;
	border-radius: 50%;
}

/* ============================================================
   PROS & CONS (sup/pros-cons + sup/pros-cons-col)
   ============================================================ */
.sup-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
	align-items: start;
	margin: 1.6em 0;
}
.sup-pc-col { border-radius: var(--sup-radius); padding: 1.1rem 1.2rem; }
.sup-pc-col > *:last-child { margin-bottom: 0; }
.sup-pc-title {
	margin: 0 0 .7rem;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	gap: .55rem;
}
.sup-pc-title::before {
	flex: 0 0 auto;
	width: 1.55em; height: 1.55em;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: .8em;
	font-weight: 800;
	border-radius: 50%;
}
.sup-pc-col--pros .sup-pc-title::before { content: "✓"; background: var(--sup-success); }
.sup-pc-col--cons .sup-pc-title::before { content: "✕"; background: var(--sup-danger); }
.sup-pc-col ul { margin: 0; }

/* Pros & cons 1 — classic green / red tint */
.sup-pros-cons--1 .sup-pc-col--pros { background: rgba(21, 128, 61, .07); border: 1px solid rgba(21, 128, 61, .35); }
.sup-pros-cons--1 .sup-pc-col--cons { background: rgba(220, 38, 38, .06); border: 1px solid rgba(220, 38, 38, .30); }

/* Pros & cons 2 — cards */
.sup-pros-cons--2 .sup-pc-col {
	background: var(--sup-bg);
	border: 1px solid var(--sup-border);
	box-shadow: var(--sup-shadow);
}
.sup-pros-cons--2 .sup-pc-col--pros { border-top: 4px solid var(--sup-success); }
.sup-pros-cons--2 .sup-pc-col--cons { border-top: 4px solid var(--sup-danger); }

/* Pros & cons 3 — minimal */
.sup-pros-cons--3 { gap: 2rem; }
.sup-pros-cons--3 .sup-pc-col { background: transparent; border: none; border-radius: 0; padding: .2rem 0; }
.sup-pros-cons--3 .sup-pc-title { border-bottom: 1px solid var(--sup-border); padding-bottom: .55rem; }

/* ============================================================
   CTA BANNER (sup/cta)
   ============================================================ */
.sup-cta {
	margin: 1.8em 0;
	padding: 2.2rem 1.8rem;
	border-radius: calc(var(--sup-radius) + 4px);
}
.sup-cta-title { margin: 0 0 .5rem; }
.sup-cta-text { margin: 0 0 1.25rem; max-width: 620px; }
.sup-cta--align-center { text-align: center; }
.sup-cta--align-center .sup-cta-text { margin-inline: auto; }
.sup-cta--align-right { text-align: right; }
.sup-cta--align-right .sup-cta-text { margin-left: auto; margin-right: 0; }
.sup-cta-btn {
	display: inline-block;
	background: var(--sup-accent);
	color: #1a1a2e;
	font-weight: 800;
	padding: .8em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--sup-shadow);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sup-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.05); text-decoration: none; }
.sup-cta--gradient {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	box-shadow: var(--sup-shadow);
}
.sup-cta--gradient .sup-cta-title { color: #fff; }
.sup-cta--dark { background: #14142b; color: #e8e8f0; }
.sup-cta--dark .sup-cta-title { color: #fff; }
.sup-cta--outline {
	background: transparent;
	border: 2px solid var(--sup-primary);
	color: var(--sup-text);
}
.sup-cta--outline .sup-cta-btn,
.sup-cta--3d .sup-cta-btn { background: var(--sup-primary); color: #fff; }
.sup-cta--3d {
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
	box-shadow: 0 12px 0 -6px var(--sup-accent), 0 24px 40px rgba(0, 0, 0, .15);
}
.sup-cta--3d .sup-cta-btn { box-shadow: 0 6px 0 var(--sup-primary-dark), 0 12px 22px rgba(0, 0, 0, .18); }
.sup-cta--3d .sup-cta-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sup-primary-dark); }

/* ============================================================
   TESTIMONIAL (sup/testimonial)
   ============================================================ */
.sup-testimonial { margin: 1.6em 0; }
.sup-testimonial-quote { margin: 0; font-size: 1.12em; line-height: 1.6; }
.sup-testimonial-quote::before {
	content: "\201C";
	display: block;
	font-size: 2.4em;
	line-height: .55;
	margin-bottom: .35rem;
	color: var(--sup-accent);
	font-family: Georgia, 'Times New Roman', serif;
}
.sup-testimonial-quote p { margin: 0; }
.sup-testimonial-meta {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 1rem;
}
.sup-testimonial-avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.sup-testimonial-who { display: flex; flex-direction: column; text-align: left; }
.sup-testimonial-name { font-weight: 800; }
.sup-testimonial-role { color: var(--sup-text-light); font-size: .9em; }

/* Testimonial 1 — classic card */
.sup-testimonial--1 {
	background: var(--sup-bg);
	border: 1px solid var(--sup-border);
	border-left: 5px solid var(--sup-accent);
	border-radius: var(--sup-radius);
	box-shadow: var(--sup-shadow);
	padding: 1.4rem 1.5rem;
}

/* Testimonial 2 — centered */
.sup-testimonial--2 {
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	padding: 1.6rem 1.5rem;
	text-align: center;
}
.sup-testimonial--2 .sup-testimonial-meta { justify-content: center; }

/* Testimonial 3 — gradient */
.sup-testimonial--3 {
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	border-radius: var(--sup-radius);
	box-shadow: var(--sup-shadow);
	padding: 1.5rem 1.6rem;
}
.sup-testimonial--3 .sup-testimonial-role { color: rgba(255, 255, 255, .85); }

/* ============================================================
   STAT CARD (sup/stat-card)
   ============================================================ */
.sup-stat-card {
	text-align: center;
	padding: 1.4rem 1rem;
	margin: 0 0 1rem;
	border-radius: var(--sup-radius);
}
.sup-stat-icon { font-size: 1.9em; display: block; margin-bottom: .3rem; line-height: 1; }
.sup-stat-number {
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	color: var(--sup-primary-dark);
}
.sup-stat-label { font-weight: 700; margin: .25rem 0 0; }
.sup-stat-subtext { color: var(--sup-text-light); font-size: .9em; margin: .2rem 0 0; }
.sup-stat-card--flat { background: var(--sup-box-bg); }
.sup-stat-card--bordered { background: var(--sup-bg); border: 2px solid var(--sup-primary); }
.sup-stat-card--gradient {
	background: linear-gradient(160deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
}
.sup-stat-card--gradient .sup-stat-number,
.sup-stat-card--gradient .sup-stat-label { color: #fff; }
.sup-stat-card--gradient .sup-stat-subtext { color: rgba(255, 255, 255, .85); }

/* ============================================================
   GLOBAL HEADING DESIGNS — body.sup-headings-1..8 (Customizer)
   Applies the 8 SUP heading designs to every H2/H3 in the post
   content when the user picks a global heading style.
   ============================================================ */
/* Design 1 — gradient underline */
body.sup-headings-1 .entry-content h2, body.sup-headings-1 .entry-content h3,
body.sup-headings-1 .sup-article__content h2, body.sup-headings-1 .sup-article__content h3,
body.sup-headings-1 .sup-entry-content h2, body.sup-headings-1 .sup-entry-content h3 {
	position: relative;
	padding-bottom: .3em;
}
body.sup-headings-1 .entry-content h2::after, body.sup-headings-1 .sup-article__content h2::after, body.sup-headings-1 .sup-entry-content h2::after,
body.sup-headings-1 .entry-content h3::after, body.sup-headings-1 .sup-article__content h3::after, body.sup-headings-1 .sup-entry-content h3::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sup-primary), var(--sup-accent));
}
body.sup-headings-1 .entry-content h2::after, body.sup-headings-1 .sup-article__content h2::after, body.sup-headings-1 .sup-entry-content h2::after { width: 72px; }
body.sup-headings-1 .entry-content h3::after, body.sup-headings-1 .sup-article__content h3::after, body.sup-headings-1 .sup-entry-content h3::after { width: 52px; }
body.sup-headings-1 .entry-content h4, body.sup-headings-1 .sup-article__content h4, body.sup-headings-1 .sup-entry-content h4 { color: var(--sup-primary-dark); }

/* Design 2 — left bar */
body.sup-headings-2 .entry-content h2, body.sup-headings-2 .entry-content h3,
body.sup-headings-2 .sup-article__content h2, body.sup-headings-2 .sup-article__content h3,
body.sup-headings-2 .sup-entry-content h2, body.sup-headings-2 .sup-entry-content h3 {
	border-left: 6px solid var(--sup-primary);
	padding-left: .55em;
}
body.sup-headings-2 .entry-content h4, body.sup-headings-2 .sup-article__content h4, body.sup-headings-2 .sup-entry-content h4 {
	border-left: 3px solid var(--sup-accent);
	padding-left: .5em;
}

/* Design 3 — pill badge */
body.sup-headings-3 .entry-content h2, body.sup-headings-3 .sup-article__content h2, body.sup-headings-3 .sup-entry-content h2 {
	display: inline-block;
	background: var(--sup-primary);
	color: #fff;
	padding: .25em .9em;
	border-radius: 999px;
}
body.sup-headings-3 .entry-content h3, body.sup-headings-3 .sup-article__content h3, body.sup-headings-3 .sup-entry-content h3 {
	display: inline-block;
	background: var(--sup-primary-dark);
	color: #fff;
	padding: .2em .8em;
	border-radius: 999px;
}
body.sup-headings-3 .entry-content h4, body.sup-headings-3 .sup-article__content h4, body.sup-headings-3 .sup-entry-content h4 {
	display: inline-block;
	background: var(--sup-box-bg);
	border: 1px solid var(--sup-border);
	padding: .15em .7em;
	border-radius: 999px;
}

/* Design 4 — serif premium */
body.sup-headings-4 .entry-content h2, body.sup-headings-4 .entry-content h3,
body.sup-headings-4 .sup-article__content h2, body.sup-headings-4 .sup-article__content h3,
body.sup-headings-4 .sup-entry-content h2, body.sup-headings-4 .sup-entry-content h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	letter-spacing: .01em;
	border-bottom: 1px solid var(--sup-accent);
	padding-bottom: .25em;
}
body.sup-headings-4 .entry-content h4, body.sup-headings-4 .sup-article__content h4, body.sup-headings-4 .sup-entry-content h4 {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
}

/* Design 5 — numbered chip (CSS counters over the content) */
body.sup-headings-5 .entry-content, body.sup-headings-5 .sup-article__content, body.sup-headings-5 .sup-entry-content {
	counter-reset: sup-global-h2;
}
body.sup-headings-5 .entry-content h2, body.sup-headings-5 .sup-article__content h2, body.sup-headings-5 .sup-entry-content h2 {
	counter-increment: sup-global-h2;
	display: flex;
	align-items: center;
	gap: .5em;
}
body.sup-headings-5 .entry-content h2::before, body.sup-headings-5 .sup-article__content h2::before, body.sup-headings-5 .sup-entry-content h2::before {
	content: counter(sup-global-h2, decimal-leading-zero);
	display: inline-flex;
	align-items: center; justify-content: center;
	flex: 0 0 auto;
	min-width: 1.9em; height: 1.9em;
	padding: 0 .3em;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-primary-dark));
	color: #fff;
	font-size: .62em;
	font-weight: 800;
	box-shadow: var(--sup-shadow);
}
body.sup-headings-5 .entry-content h3, body.sup-headings-5 .sup-article__content h3, body.sup-headings-5 .sup-entry-content h3 {
	display: flex;
	align-items: center;
	gap: .5em;
}
body.sup-headings-5 .entry-content h3::before, body.sup-headings-5 .sup-article__content h3::before, body.sup-headings-5 .sup-entry-content h3::before {
	content: "";
	flex: 0 0 auto;
	width: .55em; height: .55em;
	border-radius: 50%;
	background: var(--sup-accent);
}
body.sup-headings-5 .entry-content h4, body.sup-headings-5 .sup-article__content h4, body.sup-headings-5 .sup-entry-content h4 { color: var(--sup-primary-dark); }

/* Design 6 — soft band (global) */
body.sup-headings-6 .entry-content h2, body.sup-headings-6 .sup-article__content h2, body.sup-headings-6 .sup-entry-content h2 {
	background: color-mix(in srgb, var(--sup-primary) 10%, transparent);
	border-left: 5px solid;
	border-image: linear-gradient(180deg, var(--sup-primary), var(--sup-accent)) 1;
	padding: .45em .8em;
	border-radius: 12px;
}
body.sup-headings-6 .entry-content h3, body.sup-headings-6 .sup-article__content h3, body.sup-headings-6 .sup-entry-content h3 {
	background: color-mix(in srgb, var(--sup-primary) 6%, transparent);
	border-left: 5px solid;
	border-image: linear-gradient(180deg, var(--sup-primary), var(--sup-accent)) 1;
	padding: .4em .75em;
	border-radius: 12px;
}
body.sup-headings-6 .entry-content h4, body.sup-headings-6 .sup-article__content h4, body.sup-headings-6 .sup-entry-content h4 {
	background: color-mix(in srgb, var(--sup-primary) 5%, transparent);
	padding: .3em .6em;
	border-radius: 8px;
}

/* Design 7 — marker highlight (global) */
body.sup-headings-7 .entry-content h2, body.sup-headings-7 .sup-article__content h2, body.sup-headings-7 .sup-entry-content h2,
body.sup-headings-7 .entry-content h3, body.sup-headings-7 .sup-article__content h3, body.sup-headings-7 .sup-entry-content h3 {
	display: inline;
	font-weight: 800;
	padding: 0 .15em;
	background: linear-gradient(transparent 55%, var(--sup-accent) 55%, var(--sup-accent) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
body.sup-headings-7 .entry-content h4, body.sup-headings-7 .sup-article__content h4, body.sup-headings-7 .sup-entry-content h4 {
	display: inline;
	font-weight: 800;
	padding: 0 .12em;
	background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sup-accent) 60%, transparent) 60%, color-mix(in srgb, var(--sup-accent) 60%, transparent) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Design 8 — gradient chip number (global) */
.entry-content, .sup-article__content, .sup-entry-content { counter-reset: sup-block-h8; }
body.sup-headings-8 .entry-content, body.sup-headings-8 .sup-article__content, body.sup-headings-8 .sup-entry-content {
	counter-reset: sup-global-h2;
}
body.sup-headings-8 .entry-content h2, body.sup-headings-8 .sup-article__content h2, body.sup-headings-8 .sup-entry-content h2 {
	counter-increment: sup-global-h2;
	display: flex;
	align-items: center;
	gap: .55em;
	position: relative;
	font-weight: 800;
	padding-bottom: .28em;
}
body.sup-headings-8 .entry-content h2::before, body.sup-headings-8 .sup-article__content h2::before, body.sup-headings-8 .sup-entry-content h2::before {
	content: counter(sup-global-h2, decimal-leading-zero);
	display: inline-flex;
	align-items: center; justify-content: center;
	flex: 0 0 auto;
	min-width: 2em; height: 2em;
	padding: 0 .35em;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-accent));
	color: #fff;
	font-size: .6em;
	font-weight: 800;
	box-shadow: var(--sup-shadow);
}
body.sup-headings-8 .entry-content h2::after, body.sup-headings-8 .sup-article__content h2::after, body.sup-headings-8 .sup-entry-content h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 120px; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sup-primary), var(--sup-accent));
}
body.sup-headings-8 .entry-content h3, body.sup-headings-8 .sup-article__content h3, body.sup-headings-8 .sup-entry-content h3 {
	display: flex;
	align-items: center;
	gap: .5em;
	font-weight: 800;
}
body.sup-headings-8 .entry-content h3::before, body.sup-headings-8 .sup-article__content h3::before, body.sup-headings-8 .sup-entry-content h3::before {
	content: "";
	flex: 0 0 auto;
	width: .6em; height: .6em;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--sup-primary), var(--sup-accent));
}
body.sup-headings-8 .entry-content h4, body.sup-headings-8 .sup-article__content h4, body.sup-headings-8 .sup-entry-content h4 { color: var(--sup-primary-dark); }

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark" ] {
	--sup-text: #e8e8f0;
	--sup-text-light: #a8a8bb;
	--sup-bg: #16162a;
	--sup-box-bg: #1e1e38;
	--sup-border: #33335a;
	--sup-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
[data-theme="dark" ] .sup-highlight--bordered { color: var(--sup-text); }
[data-theme="dark" ] .wp-block-table.is-style-sup-table-dark-head tbody td { border-color: var(--sup-border); }
[data-theme="dark" ] .wp-block-table.is-style-sup-table-striped-premium tbody tr:hover td { background: rgba(255, 255, 255, .05); }
[data-theme="dark" ] .is-style-sup-heading-4 { color: var(--sup-text); }
[data-theme="dark" ] .sup-pros-cons--1 .sup-pc-col--pros { background: rgba(21, 128, 61, .16); }
[data-theme="dark" ] .sup-pros-cons--1 .sup-pc-col--cons { background: rgba(220, 38, 38, .14); }
[data-theme="dark" ] .sup-stat-card--flat .sup-stat-number,
[data-theme="dark" ] .sup-stat-card--bordered .sup-stat-number { color: var(--sup-accent); }
[data-theme="dark" ] .sup-testimonial--1, [data-theme="dark" ] .sup-testimonial--2 { color: var(--sup-text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
	.sup-steps--1 .sup-step { padding-left: 3.6rem; }
	.sup-steps--1 .sup-step::before { width: 2.3rem; height: 2.3rem; }
	.sup-steps--1 .sup-step::after { left: 1.15rem; top: 2.8rem; }
	.sup-steps--2 .sup-step { padding-left: 3.5rem; }
	.sup-steps--2::before { left: 1.25rem; }
	.sup-steps--2 .sup-step::before { width: 2.5rem; height: 2.5rem; }
	.sup-steps--3 { grid-template-columns: 1fr; }
	.sup-pros-cons { grid-template-columns: 1fr; }
	.sup-cta { padding: 1.6rem 1.1rem; }
	.sup-toc--3 { position: static; }
	.sup-info-card { flex-direction: column; gap: .4em; }
	.sup-faq-q { padding: .9em 1em; }
	.sup-faq-a { padding: 0 1em 1em; }
	.wp-block-table { overflow-x: auto; }
}

/* ============================================================
   MOBILE (v2.1) — blocks on small screens.
   Everything sits inside max-width queries; desktop is untouched.
   ============================================================ */
@media (max-width: 720px) {
	/* Steps: the card grid collapses to one column; the numbered
	   designs (1, 2, 4) are single-column by design and keep the
	   number gutter they already use at 640px */
	.sup-steps--3 { grid-template-columns: 1fr; }
	.sup-steps--1 .sup-step { padding-left: 3.6rem; }
	.sup-steps--1 .sup-step::before { width: 2.3rem; height: 2.3rem; }
	.sup-steps--1 .sup-step::after { left: 1.15rem; top: 2.8rem; }
	.sup-steps--2 .sup-step { padding-left: 3.5rem; }
	.sup-steps--2::before { left: 1.25rem; }
	.sup-steps--2 .sup-step::before { width: 2.5rem; height: 2.5rem; }

	/* FAQ: tighter rows */
	.sup-faq-q { padding: .9em 1em; }
	.sup-faq-a { padding: 0 1em 1em; }

	/* TOC block spans the full text column, never floats */
	.sup-toc { width: 100%; float: none; }
	.sup-toc--3 { position: static; }

	/* Cards stack */
	.sup-info-card { flex-direction: column; gap: .4em; }
	.sup-pros-cons { grid-template-columns: 1fr; }

	/* CTA centres on phones */
	.sup-cta { padding: 1.6rem 1.1rem; text-align: center; }
	.sup-cta--align-left, .sup-cta--align-right { text-align: center; }

	/* Stat cards: tighter (their columns come from the editor
	   layout, which stacks responsively on its own) */
	.sup-stat-card { padding: 1.1rem .8rem; margin-bottom: .8rem; }
	.sup-stat-number { font-size: 1.8rem; }

	/* Hero patterns: block groups carry inline padding, so the
	   shrink has to win over the inline styles */
	.sup-hero {
		padding-top: 2.4rem !important;
		padding-bottom: 2.4rem !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.sup-hero-stats { gap: .8rem; }

	.wp-block-table { overflow-x: auto; }
}

@media (max-width: 480px) {
	.sup-stat-card { padding: 1rem .7rem; }
	.sup-stat-number { font-size: 1.6rem; }
}