/* OpenPress single Guide article. Loaded on Guide pages only, after components.css.
   Uses existing tokens and components (breadcrumbs, badge, meta); dark mode follows the theme variables.
   Layout: header text and body share one centred reading column; the featured image is wider. */

:root { --op-guide-wide: 60rem; }

.op-guide-page__crumbs { padding-top: var(--op-space-5); }
.op-guide-page__protected { padding-block: var(--op-space-7); }

/* Header ----------------------------------------------------------------- */
.op-guide__header { padding-block: var(--op-space-6) var(--op-space-6); }
.op-guide__header-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--op-space-4);
	max-width: var(--op-reading-width);
	margin-inline: auto;
}
.op-guide__category { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.op-guide__title {
	margin: 0;
	font-size: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}
.op-guide__subtitle {
	margin: 0;
	color: var(--op-text-muted);
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.op-guide__best-for {
	margin: 0;
	padding-left: var(--op-space-4);
	border-left: 2px solid var(--op-link);
	font-size: var(--op-text-small);
	overflow-wrap: anywhere;
}
.op-guide__best-for-label {
	display: block;
	color: var(--op-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.op-guide__facts {
	width: 100%;
	padding-top: var(--op-space-4);
	border-top: 1px solid var(--op-border);
}
.op-guide__facts .op-meta__label { color: var(--op-text-muted); }
.op-guide__facts .op-meta__label::after { content: ":"; }
.op-guide__facts .op-meta__item { color: var(--op-text); overflow-wrap: anywhere; }

/* Featured image --------------------------------------------------------- */
.op-guide__media {
	max-width: var(--op-guide-wide);
	margin: var(--op-space-6) auto 0;
}
.op-guide__frame {
	overflow: hidden;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow-sm);
}
.op-guide__img { width: 100%; height: auto; max-height: 40rem; object-fit: cover; }
.op-guide__caption {
	margin-top: var(--op-space-3);
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
	text-align: center;
}

/* Body ------------------------------------------------------------------- */
/* Reading column: --op-reading-width (760px) at 17-19px type is roughly 70-75 characters a line. */
.op-guide__body {
	max-width: var(--op-reading-width);
	margin-inline: auto;
	padding-bottom: var(--op-space-7);
}
.op-guide__content {
	display: flow-root; /* contains floated .alignleft / .alignright images */
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.75;
	overflow-wrap: break-word;
}
.op-guide__content > :first-child { margin-top: 0; }
.op-guide__content > :last-child { margin-bottom: 0; }
.op-guide__content > * { max-width: 100%; }

/* Vertical rhythm: every block gets the same space below. */
.op-guide__content p,
.op-guide__content ul,
.op-guide__content ol,
.op-guide__content dl,
.op-guide__content blockquote,
.op-guide__content pre,
.op-guide__content figure,
.op-guide__content table,
.op-guide__content details,
.op-guide__content .wp-block-image,
.op-guide__content .wp-block-table,
.op-guide__content .wp-block-buttons { margin-block: 0 1.4em; }
.op-guide__content p { text-wrap: pretty; }

/* Headings: size and spacing carry the hierarchy; only H2 gets a quiet rule. */
.op-guide__content h2,
.op-guide__content h3,
.op-guide__content h4,
.op-guide__content h5,
.op-guide__content h6 { scroll-margin-top: 6rem; /* clears the sticky header */ text-wrap: balance; overflow-wrap: break-word; }
.op-guide__content h2 {
	margin: 2.4em 0 0.7em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--op-border);
	font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
	font-weight: var(--op-weight-bold);
	line-height: 1.25;
}
.op-guide__content h3 {
	margin: 2em 0 0.55em;
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
	line-height: 1.3;
}
.op-guide__content h4 {
	margin: 1.7em 0 0.5em;
	font-size: var(--op-text-h4);
	line-height: 1.35;
}
.op-guide__content h5,
.op-guide__content h6 { margin: 1.5em 0 0.5em; font-size: 1rem; line-height: 1.4; }
.op-guide__content h2 + h3,
.op-guide__content h3 + h4 { margin-top: 1em; }
.op-guide__content h2 + p,
.op-guide__content h3 + p,
.op-guide__content h4 + p { margin-top: 0; }

.op-guide__content strong,
.op-guide__content b { font-weight: var(--op-weight-semibold); }
.op-guide__content mark {
	padding: 0.05em 0.25em;
	background: color-mix(in srgb, var(--op-link) 22%, transparent);
	color: inherit;
	border-radius: var(--op-radius-sm);
}

/* Links: always underlined (colour is not the only cue); buttons keep their own look. */
.op-guide__content a:not(.wp-block-button__link):not(.wp-element-button) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--op-link) 55%, transparent);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}
.op-guide__content a:not(.wp-block-button__link):not(.wp-element-button):hover {
	text-decoration-thickness: 2px;
	text-decoration-color: currentcolor;
}

/* Lists */
.op-guide__content ul,
.op-guide__content ol { padding-left: 1.6em; }
.op-guide__content ul { list-style: disc; }
.op-guide__content ol { list-style: decimal; }
.op-guide__content li { margin-bottom: 0.5em; padding-left: 0.2em; }
.op-guide__content li:last-child { margin-bottom: 0; }
.op-guide__content li > p { margin-bottom: 0.6em; }
.op-guide__content li > ul,
.op-guide__content li > ol { margin-block: 0.5em 0; }
.op-guide__content li > ul { list-style-type: circle; }
.op-guide__content li > ul > li > ul { list-style-type: square; }
.op-guide__content li > ol { list-style-type: lower-alpha; }
.op-guide__content li > ol > li > ol { list-style-type: lower-roman; }
.op-guide__content li::marker { color: var(--op-text-muted); }
.op-guide__content ol > li::marker { font-weight: var(--op-weight-semibold); }

/* Blockquotes (core Quote and classic <blockquote>) */
.op-guide__content blockquote,
.op-guide__content .wp-block-quote {
	margin-inline: 0;
	padding: var(--op-space-4) var(--op-space-5);
	background: color-mix(in srgb, var(--op-link) 6%, transparent);
	border: 0;
	border-left: 3px solid var(--op-link);
	border-radius: 0 var(--op-radius) var(--op-radius) 0;
	color: var(--op-text);
	font-size: 1.05em;
	line-height: 1.65;
}
.op-guide__content blockquote p { margin-bottom: 0.8em; }
.op-guide__content blockquote > :last-child { margin-bottom: 0; }
.op-guide__content blockquote cite,
.op-guide__content blockquote footer,
.op-guide__content .wp-block-quote__citation {
	display: block;
	margin-top: var(--op-space-3);
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
	font-style: normal;
}
.op-guide__content .wp-block-pullquote {
	padding: var(--op-space-5) 0;
	border-block: 1px solid var(--op-border);
	text-align: center;
}
.op-guide__content .wp-block-pullquote blockquote {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.op-guide__content hr,
.op-guide__content .wp-block-separator {
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--op-border);
	background: none;
	opacity: 1;
}

/* Images: contained, rounded, with a hairline border so they stay defined on the dark background. */
.op-guide__content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--op-radius);
}
.op-guide__content figure { max-width: 100%; margin-block: 2em; }
.op-guide__content p > img,
.op-guide__content figure img { border: 1px solid var(--op-border); }
.op-guide__content figure img { margin-inline: auto; }
.op-guide__content .wp-block-image.alignwide,
.op-guide__content .wp-block-image.alignfull,
.op-guide__content .alignwide,
.op-guide__content .alignfull { width: auto; max-width: 100%; margin-inline: 0; }
.op-guide__content figcaption,
.op-guide__content .wp-element-caption {
	margin-top: var(--op-space-3);
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
	line-height: 1.5;
	text-align: center;
}
.op-guide__content .alignleft { float: left; max-width: 50%; margin: 0.4em 1.5em 1em 0; }
.op-guide__content .alignright { float: right; max-width: 50%; margin: 0.4em 0 1em 1.5em; }
.op-guide__content .aligncenter { margin-inline: auto; text-align: center; }
.op-guide__content iframe,
.op-guide__content video,
.op-guide__content embed,
.op-guide__content object { max-width: 100%; }
.op-guide__content video { height: auto; border-radius: var(--op-radius); }
.op-guide__content .wp-block-embed iframe { width: 100%; border: 0; border-radius: var(--op-radius); }

/* Code: no highlighting library; mono type on a tinted (inline) or elevated (block) surface. */
.op-guide__content code,
.op-guide__content kbd,
.op-guide__content samp {
	padding: 0.12em 0.4em;
	background: color-mix(in srgb, var(--op-text) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--op-text) 10%, transparent);
	border-radius: var(--op-radius-sm);
	font-family: var(--op-font-mono);
	font-size: 0.875em;
	overflow-wrap: anywhere;
}
.op-guide__content kbd { border-bottom-width: 2px; }
.op-guide__content pre,
.op-guide__content .wp-block-code,
.op-guide__content .wp-block-preformatted {
	max-width: 100%;
	padding: var(--op-space-4) var(--op-space-5);
	overflow-x: auto;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
	font-family: var(--op-font-mono);
	font-size: 0.875rem;
	line-height: 1.65;
	tab-size: 2;
	white-space: pre;
	overflow-wrap: normal;
}
.op-guide__content .wp-block-preformatted { white-space: pre-wrap; overflow-wrap: anywhere; }
.op-guide__content pre code {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	overflow-wrap: normal;
}

/* Tables: scroll inside their own box on small screens; the page never scrolls sideways.
   Core Table blocks sit in a <figure class="wp-block-table"> which does the scrolling and keeps
   real table semantics. A bare <table> (classic editor) scrolls itself. */
.op-guide__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.op-guide__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-guide__content .wp-block-table table { display: table; min-width: 32rem; margin: 0; }
.op-guide__content th,
.op-guide__content td,
.op-guide__content .wp-block-table th,
.op-guide__content .wp-block-table td {
	padding: var(--op-space-3) var(--op-space-4);
	border: 0;
	border-bottom: 1px solid var(--op-border);
	text-align: left;
	vertical-align: top;
}
.op-guide__content thead th {
	background: var(--op-bg-elevated);
	border-bottom: 2px solid var(--op-border);
	font-weight: var(--op-weight-semibold);
	white-space: nowrap;
}
.op-guide__content tbody tr:last-child td,
.op-guide__content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.op-guide__content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--op-text) 4%, transparent);
}
.op-guide__content .wp-block-table.is-style-stripes { border-color: var(--op-border); }
.op-guide__content .wp-block-table figcaption { margin: 0; padding: var(--op-space-3) var(--op-space-4); }

.op-guide__content > table {
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}

/* Other common core blocks: keep them tidy, not restyled. */
.op-guide__content details {
	padding: var(--op-space-3) var(--op-space-4);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-guide__content summary { cursor: pointer; font-weight: var(--op-weight-semibold); }
.op-guide__content .wp-block-columns { gap: var(--op-space-5); margin-block: 0 1.4em; }
.op-guide__content .wp-block-column { min-width: 0; }

@media (max-width: 599px) {
	.op-guide__content { line-height: 1.7; }
	.op-guide__content h2 { margin-top: 2em; }
	.op-guide__content ul,
	.op-guide__content ol { padding-left: 1.4em; }
	.op-guide__content blockquote,
	.op-guide__content .wp-block-quote { padding: var(--op-space-3) var(--op-space-4); }
	.op-guide__content pre,
	.op-guide__content .wp-block-code { padding: var(--op-space-3) var(--op-space-4); font-size: 0.8125rem; }
	.op-guide__content table { font-size: 0.875rem; }
	.op-guide__content th,
	.op-guide__content td { padding: var(--op-space-2) var(--op-space-3); }
	/* Floated images stop floating so text never squeezes into a narrow strip. */
	.op-guide__content .alignleft,
	.op-guide__content .alignright { float: none; max-width: 100%; margin: 0 auto 1.4em; }
}

/* Commercial sections: Featured Tools, Related Reviews, Comparisons, Best Tools ---------------- */
/* Sit below the reading column in the full container so the shared card grid (.op-grid) fits.
   Cards, grid and heading are shared components; only spacing and heading scale are set here.
   Headings stay at H3 scale (below the article's own H2s) so these sections support the article. */
.op-guide-tools,
.op-guide-reviews,
.op-guide-comparisons,
.op-guide-best { padding-block: var(--op-space-6); }
.op-guide-tools .op-section-heading,
.op-guide-reviews .op-section-heading,
.op-guide-comparisons .op-section-heading,
.op-guide-best .op-section-heading { margin-bottom: var(--op-space-5); }
.op-guide-tools .op-section-heading__title,
.op-guide-reviews .op-section-heading__title,
.op-guide-comparisons .op-section-heading__title,
.op-guide-best .op-section-heading__title { font-size: var(--op-text-h3); overflow-wrap: anywhere; }

/* Whichever commercial section comes first after the article gets a quiet rule, so the article
   ends cleanly. Only the section directly after the article body matches. */
.op-guide__body-wrap + :is(.op-guide-tools, .op-guide-reviews, .op-guide-comparisons, .op-guide-best)::before {
	content: "";
	display: block;
	margin-bottom: var(--op-space-6);
	border-top: 1px solid var(--op-border);
}
.op-guide__body--extras { padding-block: 0 var(--op-space-4); }
.op-guide__body--extras .op-guide__extras { margin-top: 0; }

/* Paged posts (<!--nextpage-->) */
.op-guide__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--op-space-2);
	align-items: center;
	margin-top: var(--op-space-6);
	font-size: var(--op-text-small);
}
.op-guide__pages-label { color: var(--op-text-muted); }
.op-guide__pages > a,
.op-guide__pages > .post-page-numbers {
	min-width: 2rem;
	padding: var(--op-space-1) var(--op-space-2);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-sm);
	text-align: center;
	text-decoration: none;
}

/* Tags */
.op-guide__extras {
	display: grid;
	gap: var(--op-space-6);
	margin-top: var(--op-space-7);
	padding-top: var(--op-space-6);
	border-top: 1px solid var(--op-border);
}
.op-guide__tags { display: flex; flex-wrap: wrap; gap: var(--op-space-2); margin: 0; padding: 0; list-style: none; }
.op-guide__extras-title { margin: 0 0 var(--op-space-3); font-size: var(--op-text-h3); }
.op-guide__related ul { margin: 0; padding-left: 1.25em; }
.op-guide__related li { margin-bottom: var(--op-space-2); overflow-wrap: anywhere; }

/* FAQ: native <details>; keyboard accessible, no JavaScript, no animation ------ */
.op-guide-faq { padding-block: var(--op-space-6); }
.op-guide-faq__inner,
.op-guide-disclosure__inner { max-width: var(--op-reading-width); margin-inline: auto; }
.op-guide-faq__title { margin: 0 0 var(--op-space-4); font-size: var(--op-text-h3); overflow-wrap: anywhere; }
.op-guide-faq__list { background: var(--op-bg-elevated); border: 1px solid var(--op-border); border-radius: var(--op-radius-lg); overflow: hidden; }
.op-guide-faq__item + .op-guide-faq__item { border-top: 1px solid var(--op-border); }
.op-guide-faq__item[open] { background: color-mix(in srgb, var(--op-text) 3%, var(--op-bg-elevated)); }
.op-guide-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--op-space-4);
	min-height: 2.75rem;
	padding: var(--op-space-4) var(--op-space-5);
	font-weight: var(--op-weight-semibold);
	line-height: var(--op-leading-snug);
	cursor: pointer;
	list-style: none;
}
.op-guide-faq__q::-webkit-details-marker { display: none; }
.op-guide-faq__q > span { min-width: 0; overflow-wrap: anywhere; }
/* Open/closed state is a shape change (+ / minus in a ring), not only a colour change. */
.op-guide-faq__q::after {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-pill);
	color: var(--op-text-muted);
	font-size: 1rem;
	font-weight: var(--op-weight-regular);
	line-height: 1;
}
.op-guide-faq__item[open] > .op-guide-faq__q::after { content: "\2212"; color: var(--op-text); border-color: var(--op-text-muted); }
.op-guide-faq__q:hover { background: color-mix(in srgb, var(--op-text) 3.5%, var(--op-bg-elevated)); }
.op-guide-faq__q:focus-visible { outline: 2px solid var(--op-focus); outline-offset: -2px; }
.op-guide-faq__a {
	padding: 0 var(--op-space-5) var(--op-space-5);
	padding-right: calc(var(--op-space-5) + 1.5rem + var(--op-space-4));
	line-height: var(--op-leading-body);
	overflow-wrap: anywhere;
}
.op-guide-faq__a > :first-child { margin-top: 0; }
.op-guide-faq__a > :last-child { margin-bottom: 0; }

/* Disclosure: a quiet editorial notice ------------------------------------- */
.op-guide-disclosure { padding-bottom: var(--op-space-6); }
.op-guide-disclosure__inner {
	padding: var(--op-space-4) var(--op-space-5);
	background: color-mix(in srgb, var(--op-text) 3.5%, var(--op-bg-elevated));
	border: 1px solid var(--op-border);
	border-left: 3px solid var(--op-text-muted);
	border-radius: var(--op-radius);
}
.op-guide-disclosure__title {
	margin: 0 0 var(--op-space-2);
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.op-guide-disclosure__body { color: var(--op-text); font-size: var(--op-text-small); line-height: var(--op-leading-body); overflow-wrap: anywhere; }
.op-guide-disclosure__body > :first-child { margin-top: 0; }
.op-guide-disclosure__body > :last-child { margin-bottom: 0; }

@media (max-width: 479px) {
	.op-guide__header { padding-block: var(--op-space-5); }
	.op-guide__media { margin-top: var(--op-space-5); }
	.op-guide__img { max-height: 24rem; }
	.op-guide-faq__q { padding-inline: var(--op-space-4); }
	.op-guide-faq__a { padding: 0 var(--op-space-4) var(--op-space-4); }
	.op-guide-disclosure__inner { padding: var(--op-space-3) var(--op-space-4); }
}

/* Author / trust note: compact, editorial; WordPress author data only ---------- */
.op-guide-author { padding-block: var(--op-space-2) var(--op-space-6); }
.op-guide-author__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--op-space-4);
	max-width: var(--op-reading-width);
	margin-inline: auto;
	padding-top: var(--op-space-5);
	border-top: 1px solid var(--op-border);
}
.op-guide-author__avatar { flex: none; }
.op-guide-author__img {
	display: block;
	width: 4rem;
	height: 4rem;
	max-width: 100%;
	object-fit: cover;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-pill);
}
.op-guide-author__text { min-width: 0; }
.op-guide-author__label {
	margin: 0;
	color: var(--op-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.op-guide-author__name { margin: var(--op-space-1) 0 0; font-size: var(--op-text-h4); font-weight: var(--op-weight-semibold); line-height: var(--op-leading-snug); overflow-wrap: anywhere; }
.op-guide-author__bio { margin-top: var(--op-space-2); color: var(--op-text-muted); font-size: var(--op-text-small); line-height: var(--op-leading-body); overflow-wrap: anywhere; }
.op-guide-author__bio > :first-child { margin-top: 0; }
.op-guide-author__bio > :last-child { margin-bottom: 0; }
.op-guide-author__link {
	display: inline-flex;
	align-items: center;
	gap: var(--op-space-1);
	min-height: 2.75rem;
	margin-top: var(--op-space-1);
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-semibold);
	text-underline-offset: 0.2em;
}
.op-guide-author__link:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 3px; border-radius: var(--op-radius-sm); }
@media (max-width: 479px) {
	.op-guide-author__img { width: 3rem; height: 3rem; }
	.op-guide-author__inner { gap: var(--op-space-3); }
}

/* Previous / next -------------------------------------------------------- */
.op-guide-nav { padding-bottom: var(--op-space-7); }
.op-guide-nav__inner {
	display: grid;
	gap: var(--op-space-4);
	max-width: var(--op-reading-width);
	margin-inline: auto;
	padding-top: var(--op-space-6);
	border-top: 1px solid var(--op-border);
}
.op-guide-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--op-space-1);
	min-width: 0;
	padding: var(--op-space-4) var(--op-space-5);
	color: var(--op-text);
	text-decoration: none;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
	transition: border-color var(--op-transition);
}
.op-guide-nav__link:hover { border-color: var(--op-text-muted); }
.op-guide-nav__link:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 2px; border-radius: var(--op-radius); }
.op-guide-nav__link:hover .op-guide-nav__title { text-decoration: underline; text-underline-offset: 0.2em; }
.op-guide-nav__label { color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-guide-nav__title { font-weight: var(--op-weight-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.op-guide-nav__link--next { text-align: right; }

@media (min-width: 640px) {
	.op-guide-nav__inner { grid-template-columns: 1fr 1fr; }
	/* A lone "next" link stays on the right. */
	.op-guide-nav__link--next:only-child { grid-column: 2; }
}


/* Guide page refinements: editorial identity ------------------------------------------------- */
.op-guide__header { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) var(--op-space-6); }
.op-guide__header-inner::before { content: ""; width: 3rem; height: 4px; border-radius: 4px; background: var(--op-gradient); }
.op-guide__title { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.op-guide__subtitle { font-size: var(--op-text-lead); line-height: 1.45; }
.op-guide__best-for { border-left: 3px solid var(--op-accent-2); }
.op-guide__facts { font-size: var(--op-text-meta); }
.op-guide__frame { border-radius: var(--op-radius-xl); box-shadow: var(--op-shadow-lg); }

/* 055: a scrolling Core Table block gets focus from assets/js/content-tables.js only while it overflows. */
.op-guide__content .wp-block-table:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 2px; }