/* CyberServices — front-end styles.
   theme.json owns colour, type scale and spacing. This file covers only what
   block styles cannot express: reading rhythm inside long technical articles. */

/* --- reading rhythm ------------------------------------------------------ */

.wp-block-post-content > * + * { margin-block-start: 1.35em; }

.wp-block-post-content h2 { margin-block-start: 2.25em; margin-block-end: .6em; }
.wp-block-post-content h3 { margin-block-start: 1.9em;  margin-block-end: .5em; }

/* Walkthroughs run long and dense; give lists and code room to breathe. */
.wp-block-post-content ul,
.wp-block-post-content ol { padding-inline-start: 1.4em; }
.wp-block-post-content li + li { margin-block-start: .4em; }

/* --- code ---------------------------------------------------------------- */

.wp-block-post-content :not(pre) > code {
	background: var(--wp--preset--color--base-sunk);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: .1em .35em;
	font-size: .875em;
	font-family: var(--wp--preset--font-family--mono);
	overflow-wrap: break-word;
}

.wp-block-code { overflow-x: auto; }
.wp-block-code code { display: block; white-space: pre; line-height: 1.55; }

/* --- tables -------------------------------------------------------------- */

.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; font-size: .9375rem; }
.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--line);
	padding: .55rem .75rem;
}
.wp-block-table th {
	background: var(--wp--preset--color--base-sunk);
	text-align: start;
	font-weight: 600;
}

/* --- images -------------------------------------------------------------- */

.wp-block-post-content :where(img) { border-radius: 6px; height: auto; max-width: 100%; }

/* --- long strings ------------------------------------------------------- */

/* 80 published bodies use a bare URL as link text; one 90-character
   academy.hackthebox.com link was widening the CPTS hub and the Trilocor
   walkthrough to 460px on a phone. Let such strings break anywhere instead of
   pushing the page sideways. Code blocks keep their own horizontal scroll. */
.wp-block-post-content :where(p, li, dd, td, figcaption, h1, h2, h3, h4) { overflow-wrap: anywhere; }

/* EDD's block checkout restyles every legend (`… .edd-blocks-form legend
   { display:block; margin:0 }`) at a higher specificity than core's
   .screen-reader-text, and inside its display:grid fieldsets Chrome then lays
   the Acquisition Survey's screen-reader legend out at the viewport width.
   clip-path keeps it invisible but the box still widens the page, which gave
   the checkout a sideways scroll on phones whenever the cart had an item. */
.edd-blocks-form legend.screen-reader-text { width: 1px !important; height: 1px !important; margin: -1px !important; }

/* --- navigation ---------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration: underline; }

/* --- accessibility ------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

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

/* --- header --------------------------------------------------------------- */

.cs-header { z-index: 20; }

/* Sticky header. The block setting puts position:sticky on the inner group,
   but a sticky box can only travel within its parent, and the template-part
   wrapper (<header class="wp-block-template-part">) is exactly the header's
   own height — so the header scrolled off like static content. The wrapper
   is the sticky box instead; core's rule on the inner group is harmless. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 20;
	transition: top .25s ease;
}
/* Header reveal (assets/nav.js): on scroll-down the header slides away by
   moving its `top`; the first upward scroll brings it back. `top`, not a
   transform — the mobile menu overlay is position:fixed inside this element
   and any transform would pin the overlay to the header box. The -1px hides
   the bottom hairline while tucked away. */
html .wp-site-blocks > header.wp-block-template-part.is-hidden { top: calc(-1 * var(--cs-header-h, 5rem) - 1px); }
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part { transition: none; }
}

/* Page top. Core puts its 24px root block gap between the header and <main>,
   on top of whatever top padding each template gives main — on a phone that
   was ~80px of nothing before the first line. The gap goes; each template's
   main carries the whole distance as one responsive value
   (clamp(1.75rem, 4vw, 3.5rem): 28px on phones, 56px on a wide desktop). */
.wp-site-blocks > main.wp-block-group { margin-block-start: 0; }

.cs-header .wp-block-site-logo img { display: block; height: auto; }

/* Submenus inherit the page surface rather than the browser default. */
.cs-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 12px 28px -14px rgb(28 36 75 / 28%);
	padding: .35rem;
	min-width: 15rem;
}
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 5px;
	padding: .45rem .65rem;
}
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base-sunk);
	text-decoration: none;
}

/* --- post cards ----------------------------------------------------------- */

.cs-card {
	height: 100%;
	padding-block-start: 1.1rem;
	border-block-start: 2px solid var(--wp--preset--color--contrast);
}

/* Only ~35% of posts carry a featured image, so cards are text-led:
   a rule gives every card the same structure an image would have. */
.cs-card .wp-block-post-excerpt__excerpt { margin: 0; }
.cs-card .wp-block-post-date { margin-block-start: .55rem; }
.cs-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.cs-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.cs-card .wp-block-post-terms a { text-decoration: none; }
.cs-card .wp-block-post-featured-image img { object-fit: cover; width: 100%; }

/* --- product buy box ------------------------------------------------------ */

/* Sticky on desktop so the buy action stays reachable through a long product
   description. */
@media (min-width: 782px) {
	.cs-buybox > .wp-block-group { position: sticky; top: 6rem; }
}

.cs-buybox .edd_purchase_submit_wrapper { margin: 0; }
.cs-buybox .edd-add-to-cart,
.cs-buybox .edd_purchase_submit_wrapper a.button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .8rem 1.2rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.cs-buybox .edd-add-to-cart:hover,
.cs-buybox .edd_purchase_submit_wrapper a.button:hover { background: var(--wp--preset--color--accent-dark); }
.cs-buybox .edd_price { font-size: 1.75rem; font-weight: 700; color: var(--wp--preset--color--contrast); }
.cs-buybox__list { padding-inline-start: 1.1em; }
.cs-buybox__list li { margin-block-end: .3em; }

/* --- footer --------------------------------------------------------------- */

.cs-footer__list { list-style: none; padding: 0; margin: .6rem 0 0; }
.cs-footer__list li { margin-block-end: .45em; font-size: .9375rem; }
.cs-footer__list a { text-decoration: none; color: var(--wp--preset--color--contrast-2); }
.cs-footer__list a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.cs-footer__head {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- EDD product grid on archives ---------------------------------------- */

.edd_downloads_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2rem; }
.edd_downloads_list .edd_download { float: none; width: auto; padding: 0; }
.edd_downloads_list .edd_download_inner { height: 100%; }
.edd_downloads_list .edd_download_title { font-size: 1.0625rem; line-height: 1.35; margin: .5rem 0 .25rem; }
.edd_downloads_list .edd_download_title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.edd_downloads_list .edd_download_title a:hover { color: var(--wp--preset--color--accent); }
.edd_downloads_list img { border-radius: 8px; }

/* EDD ships .edd_empty_cart as a content-box block with its own padding and a
   margin-right:-32px, which pushes ~8px past the column at phone width. Pin the
   box model so the empty-cart message (and its image) stay inside the gutter. */
.edd_empty_cart { box-sizing: border-box; max-width: 100%; margin-right: 0; }
.edd_empty_cart img { max-width: 100%; height: auto; }

/* --- product page with no description ------------------------------------ */

/* Most downloads have an empty body. Rather than leave a wide blank column,
   collapse to a single centred buy box until real descriptions exist. */
.cs-download-no-description .wp-block-columns {
	max-width: 32rem;
	margin-inline: auto;
	display: block;
}
.cs-download-no-description .wp-block-column { flex-basis: auto !important; }
.cs-download-no-description .cs-buybox > .wp-block-group { position: static; }
.cs-download-no-description .wp-block-post-title { text-align: center; }
.cs-download-no-description .wp-block-post-content:empty { display: none; }

/* EDD's form wrapper adds trailing space even when it renders only a button. */
.cs-buybox .edd_download_purchase_form { margin: 0; }
.cs-buybox .edd_price_options { margin: 0 0 .75rem; }
.cs-buybox .offer-box--buybox { margin: 0 0 .85rem; }
.cs-buybox .edd_download_purchase_form,
.cs-buybox .edd_purchase_submit_wrapper { margin: 0; }
/* AJAX cart is disabled site-wide, so this alert never fires; it only left an
   empty block under the button. */
.cs-buybox .edd-cart-ajax-alert { display: none; }
.cs-buybox__note { margin: 1.1rem 0 0 !important; text-align: center; line-height: 1.45; }

/* Product page: breadcrumb + title above, image/description + buy box below.
   On phones the columns stack and the buy box moves up under the title, so the
   price and button are the first thing after the name, not something below a
   long description. */
.cs-product .cs-crumbs { margin-bottom: .25rem; }
@media (max-width: 781px) {
	.cs-product__cols > .cs-buybox { order: -1; }
}
.cs-buybox .edd-add-to-cart,
.cs-buybox .edd_purchase_submit_wrapper a.button { font-size: 1.0625rem; padding: .95rem 1.2rem; border-radius: 8px; }

/* Facts list: two columns, label muted, value in body colour. */
.cs-prodfacts { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); font-size: .875rem; }
.cs-prodfacts__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .1rem .75rem; padding: .45rem 0; align-items: baseline; }
.cs-prodfacts__row + .cs-prodfacts__row { border-top: 1px solid var(--wp--preset--color--base-sunk); }
.cs-prodfacts dt { margin: 0; color: var(--wp--preset--color--muted); font-weight: 500; }
.cs-prodfacts dd { margin: 0; color: var(--wp--preset--color--contrast); font-weight: 500; }
.cs-prodfacts dd a { color: var(--wp--preset--color--accent-dark); text-decoration: none; font-weight: 600; }
.cs-prodfacts dd a:hover { text-decoration: underline; }
.cs-prodfacts__sub { color: var(--wp--preset--color--muted); font-weight: 400; }

/* Payment chips: the accepted methods as a scannable row, not a sentence. */
.cs-pay { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cs-pay li {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: .2rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-soft);
	color: var(--wp--preset--color--contrast-2);
}

.cs-product__faq { margin-top: 2.5rem !important; }
.cs-product__faq > h2 { margin-bottom: .5rem; }
.cs-product__faq .wp-block-details p { margin: .6rem 0 0; font-size: .9375rem; }

/* Related products: the same certification's other packs, in cards. */
.cs-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cs-related__head h2 { margin: 0; font-size: 1.25rem; }
.cs-related__head a { font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--accent-dark); text-decoration: none; }
.cs-related__head a:hover { text-decoration: underline; }
.cs-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cs-related__card {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
}
.cs-related__media { display: block; margin: -1rem -1rem .35rem; border-radius: 10px 10px 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--wp--preset--color--base-sunk); }
.cs-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-related__title { margin: 0; font-size: 1rem; line-height: 1.3; }
.cs-related__title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.cs-related__title a:hover { color: var(--wp--preset--color--accent); }
.cs-related__price { margin: 0; font-weight: 700; color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; }
.cs-related__link { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--accent-dark); text-decoration: none; }
.cs-related__link:hover { text-decoration: underline; }

/* --- empty-cart recommendations ------------------------------------------ */

/* Rendered under the "your cart is empty" message (inc/cart-recommendations.php).
   Reuses the .cs-related cards; these rules add the wrapper, the certification
   kicker, and the honest "N bought" pill (neutral, not the green reserved for price). */
.cs-empty-recs { margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 2.25rem; text-align: left; }
.cs-empty-recs__block { margin: 0; }
/* The checkout page is a constrained 820px column (every block on it: trust box,
   reviews, refund note), so the shared auto-fill card minimum only fits 3 across.
   Each block shows 3 items on a fixed 3-up grid — never a 3 + 1 orphan — and
   stacks to one column where 3-up would squeeze the cards below ~180px. */
.cs-empty-recs .cs-related__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
	.cs-empty-recs .cs-related__grid { grid-template-columns: 1fr; }
}
.cs-rec__kicker { margin: 0; font-size: .75rem; font-weight: 600; color: var(--wp--preset--color--accent-dark); }
.cs-rec__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0; }
.cs-rec__badge { font-size: .75rem; font-weight: 600; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--base-sunk); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: .1rem .5rem; font-variant-numeric: tabular-nums; }

/* --- EDD add-to-cart confirmation ---------------------------------------- */

/* EDD positions "Added to cart" absolutely, with no offsets and no positioned
   ancestor, so it leaves the flow and prints over whatever follows the button.
   Inside a card that is the card's own bottom border. Put it back in the flow
   and keep its slot reserved, so the confirmation lands inside the card and
   nothing moves when it appears and again when it fades out. */
.edd-cart-ajax-alert {
	display: block;
	min-height: 1.15rem;
	margin-block-start: .4rem;
}
.edd_purchase_submit_wrapper .edd-cart-added-alert {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.15rem;
	color: var(--wp--preset--color--success);
}
/* The shipped tick is 28px, twice the height of the line it now sits on. */
.edd-cart-added-alert .edd-icon-check {
	width: .85rem;
	height: .85rem;
	flex: none;
	fill: currentColor;
}

/* --- homepage ------------------------------------------------------------- */

/* Certification routes: four provider columns of exam links. */
.cs-route__list { list-style: none; padding: 0; margin: .5rem 0 0; }
.cs-route__list li { margin-block-end: .4em; }
.cs-route__list a { text-decoration: none; color: var(--wp--preset--color--contrast-2); }
.cs-route__list a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.cs-route h3 { margin: 0; padding-block-end: .5rem; border-block-end: 1px solid var(--wp--preset--color--line); }

/* Features and steps share a card shape; the rule replaces the icon the
   Elementor build used, without depending on emoji. */
.cs-feature,
.cs-step {
	padding-block-start: .9rem;
	border-block-start: 2px solid var(--wp--preset--color--accent);
}
.cs-feature h3,
.cs-step h3 { margin: 0 0 .35rem; }
.cs-feature p,
.cs-step p { margin: 0; }

/* Steps are a real sequence, so they are numbered. The numerals live in the
   markup rather than a CSS counter: it is a fixed list of four, and real text
   is read out by screen readers and survives copy-paste. */
.cs-step__n {
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}
.cs-step__n::after { content: ". "; }

/* Stats */
.cs-stat { text-align: left; }
.cs-stat__v {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 .2rem;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.cs-stat p:last-child { margin: 0; }

/* Reviews */
.cs-review {
	background: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.1rem 1.2rem;
	height: 100%;
}
.cs-review p { margin: 0 0 .55rem; }
.cs-review p:last-child { margin: 0; }
.cs-review__stars { color: #E8A33D; letter-spacing: .12em; font-size: .9rem; }

/* Homepage sections run to the wide frame so headings align with their grids;
   prose inside them still stops at a comfortable reading measure.
   WordPress's constrained layout centres constrained children, so the inline
   start margin has to be reset or the headings drift away from their grid. */
/* WordPress's constrained layout sets `margin-left: auto !important`, so the
   inline start margin can only be reset with !important — specificity alone
   cannot win against it. */
.home main > .wp-block-group > h1,
.home main > .wp-block-group > h2,
.home main > .wp-block-group > p,
.home main > .wp-block-group > .wp-block-buttons {
	max-width: 40rem;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.home main > .wp-block-group > h1 { max-width: 24ch; }

/* =========================================================================
   HOMEPAGE RHYTHM
   Sections share one vertical measure. Inside a section the heading and its
   intro line are grouped tightly, then a larger gap separates that pair from
   the grid below — so each block reads as one unit rather than three stacked
   lines.
   ========================================================================= */

.home main > .wp-block-group > h2 { margin-block-end: 0; }

.home main > .wp-block-group > h2 + p {
	margin-block-start: .5rem;
	color: var(--wp--preset--color--muted);
}

/* the grid or columns that follow the intro — not a section's leading block
   (the hero's columns open their section and were inheriting this 44px as
   dead space above the headline) */
.home main > .wp-block-group > .wp-block-columns:not(:first-child),
.home main > .wp-block-group > .wp-block-group:not(:first-child),
.home main > .wp-block-group > .wp-block-query:not(:first-child) {
	margin-block-start: 2.75rem;
}

/* Grids breathe more than the WordPress default 24px. */
.cs-features, .cs-steps, .cs-stats, .cs-reviews { gap: 2.5rem 2rem !important; }
.home .wp-block-columns { gap: 2rem !important; }

/* Header runs on its own tighter gaps: the shared spacing scale is tuned for
   page sections and pushes the nav onto a second line up here. */
.cs-header > .wp-block-group { gap: 1rem 2rem !important; flex-wrap: nowrap; }
.cs-header .cs-nav { gap: .35rem 1.4rem !important; }
.cs-header .wp-block-navigation__container { gap: .35rem 1.4rem !important; }

@media (max-width: 900px) {
	.cs-header > .wp-block-group { flex-wrap: wrap; }
}

/* Core's navigation block only swaps to the hamburger below 600px. Between
   600 and 900 the five links plus Cart do not fit on one line, so the header
   wrapped into three rows (links on line two, Cart on line three). Treat that
   band as mobile as well: show the open button and hide the inline menu. The
   open-state overlay is a core rule with no width limit, so tapping the
   button still gets the full-screen menu. */
@media (min-width: 600px) and (max-width: 900px) {
	.cs-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cs-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* =========================================================================
   MOBILE MENU OVERLAY
   Core's overlay inherits everything the desktop bar was set up for: items
   justified right, 14px links with 23px tap targets, and the dropdown-card
   styling on the Certifications submenu — so the open menu hugged the right
   edge with a floating white box inside it. Everything here applies only
   while the overlay is open (.is-menu-open); the desktop bar is untouched.

   Structure carries the hierarchy: the site's five sections are full-width
   rows separated by hairlines; the ten providers sit indented beneath
   Certifications as a plain list; the one link that is an action rather than
   a section — "All certifications and prices" — is the only thing in accent.
   ========================================================================= */

/* The overlay lives inside the sticky header wrapper, whose own z-index:20
   creates a stacking context, so the overlay's z-index:100000 can never climb
   above the Telegram pill (position:fixed, z-index:9999) at root level — which
   is why the pill sat on top of the open menu. Lift the wrapper's context while
   the menu is open and the pill drops behind it. */
.wp-site-blocks > header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) { z-index: 10001; }

.cs-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: var(--wp--preset--color--base);
	animation: cs-menu-in .18s ease-out;
}
@keyframes cs-menu-in {
	from { opacity: 0; transform: translateY(-.35rem); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}

/* Close: a 40px target in the corner, not a 24px glyph. */
.cs-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: .85rem;
	right: .85rem;
	padding: .5rem;
	border-radius: 8px;
}

/* Left-aligned, full width, starting below the close button. */
.cs-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 4.25rem 1.5rem 2.5rem;
	overflow-y: auto;
}
.cs-header .is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0 !important;
	width: 100%;
}

/* Sections. */
.cs-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cs-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: .95rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-align: left;
}

/* Providers under Certifications: a plain indented list, not a dropdown. */
.cs-header .is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0 0 .6rem 1rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.cs-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; }
/* Core's overlay sheet sets display:flex and padding:.5rem on these links from a
   longer selector; this one out-specifies it rather than resorting to !important. */
.cs-header .cs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: .8rem 0;   /* ≥44px row at the block's 16px type */
	border-radius: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-2);
	text-align: left;
}
.cs-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}
/* The index link is the one action in the list. */
.cs-header .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	margin-top: .25rem;
	color: var(--wp--preset--color--accent-dark);
	font-weight: 600;
}

/* Keyboard users see where they are. */
.cs-header .is-menu-open a:focus-visible,
.cs-header .is-menu-open button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Scroll cue. The overlay itself is the scroll container (position:fixed,
   overflow:auto) and on a phone its 16 rows run well past the viewport, with
   the last visible row cut clean by the screen edge and nothing to say the
   list goes on. assets/nav.js keeps .cs-nav-more / .cs-nav-above on the
   overlay while rows sit below / above the visible area; these two fixed
   pseudo-elements then dissolve the cut edge, and the bottom one adds a
   chevron. Both are click-through and vanish at the ends of the list. */
.cs-header .wp-block-navigation__responsive-container.is-menu-open::before,
.cs-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1;                 /* over the links, under the close button (core: 2) */
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease-out;
}
.cs-header .wp-block-navigation__responsive-container.is-menu-open::before {
	top: 0;
	height: 3.5rem;
	background: linear-gradient(to bottom, var(--wp--preset--color--base) 30%, transparent);
}
.cs-header .wp-block-navigation__responsive-container.is-menu-open::after {
	bottom: 0;
	height: 6.5rem;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
			center bottom calc(.9rem + env(safe-area-inset-bottom, 0px)) / 24px 24px no-repeat,
		linear-gradient(to top, var(--wp--preset--color--base) 42%, transparent);
}
.cs-header .wp-block-navigation__responsive-container.is-menu-open.cs-nav-above::before,
.cs-header .wp-block-navigation__responsive-container.is-menu-open.cs-nav-more::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.cs-header .wp-block-navigation__responsive-container.is-menu-open::before,
	.cs-header .wp-block-navigation__responsive-container.is-menu-open::after { transition: none; }
}

/* =========================================================================
   HERO
   ========================================================================= */

.cs-hero .wp-block-columns { gap: 4rem !important; align-items: center; }

.cs-hero__title {
	font-size: clamp(2.1rem, 3.4vw, 3.15rem);
	line-height: 1.06;
	letter-spacing: -.022em;
	margin: 0;
	/* the column governs the measure; a ch cap here forces needless wrapping */
	text-wrap: balance;
}

.cs-hero__lede {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	margin: 1.15rem 0 0;
	max-width: 46ch;
}

.cs-hero__actions { margin-top: 1.85rem !important; gap: .75rem !important; }
.cs-hero__actions .wp-block-button__link { padding: .8rem 1.55rem; font-size: .9375rem; }

.cs-hero__note {
	margin: 1.1rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

/* Proof panel */
/* The trust signals belong at the point of decision, beside the hero copy, not
   buried below the fold. */
.cs-proof__panel {
	background: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.6rem 1.75rem 1.5rem;
}

.cs-proof__eyebrow {
	margin: 0 0 1.25rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cs-proof__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.35rem 1.25rem;
}
.cs-proof__grid p { margin: 0; }
.cs-proof__grid b {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.015em;
}
.cs-proof__grid span {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

.cs-proof__link {
	margin: 1.4rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .8125rem;
}
.cs-proof__link a { text-decoration: none; font-weight: 500; }
.cs-proof__link a:hover { text-decoration: underline; }

/* The hero manages its own measure, so the generic homepage caps must not
   also apply to it. */
.home main > .cs-hero > * { max-width: none; }

@media (max-width: 860px) {
	.cs-hero .wp-block-columns { gap: 2.5rem !important; }
	
}

/* =========================================================================
   SECTION HEADINGS
   H2 at 30px sat too close to body copy against a 50px H1; this restores a
   clear step between the three levels.
   ========================================================================= */

.home main > .wp-block-group > h2 {
	font-size: clamp(1.6rem, 2.1vw, 2.05rem);
	line-height: 1.15;
	letter-spacing: -.018em;
}

.home main > .wp-block-group > h2 + p {
	font-size: 1.0625rem;
	max-width: 54ch;
}

/* =========================================================================
   CERTIFICATION ROUTES
   ========================================================================= */

.cs-route h3 {
	font-size: .75rem !important;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-block-end: .7rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.cs-route__list { margin-block-start: .85rem; }
.cs-route__list li { margin-block-end: 0; }

.cs-route__list a {
	display: block;
	padding: .42rem 0;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color .12s ease;
}
.cs-route__list a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
/* the "all material" link is a control, not another exam — matched by class,
   not by position, so real exams at the end of a column stay neutral */
.cs-route__all a { color: var(--wp--preset--color--accent) !important; }

/* The homepage has five feature cards, which divide badly into a 4-up grid and
   orphan the last one — so they get an explicit five across. Scoped to .home:
   other pages reuse .cs-features with different counts and must not inherit a
   five-column track (it leaves an empty trailing column). */
@media (min-width: 1100px) {
	.home .cs-features { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.home .cs-features { grid-template-columns: repeat(3, 1fr) !important; }
	.cs-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Landing pages: four across when there are four. */
@media (min-width: 1100px) {
	.cs-lp-section .cs-features { grid-template-columns: repeat(4, 1fr) !important; }
}

/* =========================================================================
   RULE HIERARCHY
   The page was carrying three competing line weights. One system now:
   2px accent marks a highlight (features, steps); 1px neutral marks a
   content boundary (cards); section dividers stay hairline.
   ========================================================================= */

.home .cs-card,
.cs-card {
	border-block-start-width: 1px;
	border-block-start-color: var(--wp--preset--color--line);
	padding-block-start: 1.15rem;
}

.cs-card .wp-block-post-terms {
	display: block;
	margin-block-end: .1rem;
}

/* Cards sit on a grid; keep their inner rhythm identical so rows align. */
.cs-card .wp-block-post-title { margin-block: .3rem .45rem !important; }
.cs-card .wp-block-post-excerpt__excerpt { line-height: 1.55; }
.cs-card .wp-block-post-date { margin-block-start: .7rem; }

/* Feature and step cards keep the accent rule but lighter than before. */
.cs-feature, .cs-step {
	border-block-start-width: 2px;
	padding-block-start: 1rem;
}

/* Four reviews need four columns; the 17rem minimum plus the grid gap tipped
   them into three and orphaned the last card onto its own row. */
@media (min-width: 1100px) {
	.cs-reviews { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 640px) and (max-width: 1099px) {
	.cs-reviews { grid-template-columns: repeat(2, 1fr) !important; }
}
.cs-review { border-radius: 10px; padding: 1.25rem 1.35rem; }

/* =========================================================================
   BRAND LOCKUP
   Inline SVG rather than an uploaded image: the previous logo was a palette
   PNG with no alpha channel, so its white box showed against the tinted
   footer. Vector also stays sharp on retina and costs ~350 bytes.
   ========================================================================= */

.cs-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}
.cs-brand:hover { text-decoration: none; }
.cs-brand:hover .cs-brand__name { color: var(--wp--preset--color--accent); }

.cs-brand__mark {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: block;
}

.cs-brand__name {
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -.012em;
	white-space: nowrap;
	transition: color .12s ease;
}
.cs-brand__name b { font-weight: 700; }

/* Footer lockup sits above the blurb, slightly larger. */
.cs-footer .cs-brand { margin-block-end: 1rem; }
.cs-footer .cs-brand__mark { width: 32px; height: 32px; }

@media (max-width: 600px) {
	.cs-brand__name { font-size: 1rem; }
}

/* =========================================================================
   LANDING PAGES
   Shared furniture for long-form marketing pages (free consultation, and the
   certification hubs to come). Replaces per-page pasted stylesheets.
   ========================================================================= */

.cs-eyebrow {
	margin: 0 0 .55rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.cs-lp-title {
	font-size: clamp(2.1rem, 3.4vw, 3.05rem);
	line-height: 1.07;
	letter-spacing: -.022em;
	margin: 0;
	text-wrap: balance;
}

.cs-lp-lede {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	margin: 1.15rem 0 0;
	max-width: 46ch;
}

.cs-lp-actions { margin-top: 1.85rem !important; gap: .75rem !important; }
.cs-lp-actions .wp-block-button__link { padding: .8rem 1.55rem; font-size: .9375rem; }

.cs-lp-note {
	margin: 1.1rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

/* Section rhythm mirrors the homepage so the two read as one site.
   As on the homepage, constrained children are centred by a WordPress rule
   using !important, so the inline start margin has to be reset the same way. */
.cs-lp-section > .cs-eyebrow,
.cs-lp-section > h2,
.cs-lp-section > h3,
.cs-lp-section > p {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.cs-lp-section > h2 { margin-top: 0; font-size: clamp(1.6rem, 2.1vw, 2.05rem); line-height: 1.15; letter-spacing: -.018em; }
.cs-lp-section > h2 + p { margin-top: .5rem; max-width: 62ch; color: var(--wp--preset--color--muted); font-size: 1.0625rem; }
.cs-lp-hero > .wp-block-columns { margin-left: 0 !important; margin-right: 0 !important; }
.cs-lp-section > .wp-block-group,
.cs-lp-section > .wp-block-columns { margin-top: 2.75rem; }
.cs-lp-section .cs-subhead { margin-top: 3rem; font-size: 1.25rem; }
.cs-lp-section .cs-subhead + p { margin-top: .5rem; max-width: 62ch; }

/* Panels — used for the hero aside and the contact cards. */
.cs-panel {
	background: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.6rem 1.75rem;
	height: 100%;
}
.cs-panel__title { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.cs-panel__lede { margin: .55rem 0 0; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }
.cs-panel__meta {
	margin: .85rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}
.cs-panel .wp-block-buttons { margin-top: 1.25rem !important; }

/* Checklist with drawn ticks — no icon font, no emoji. */
.cs-checklist { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.cs-checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .6rem;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
}
.cs-checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: .42em;
	width: .45rem; height: .8rem;
	border: solid var(--wp--preset--color--accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Problem/benefit tiles */
.cs-tiles { gap: 2.5rem 2rem !important; }
.cs-tile { padding-block-start: 1.15rem; border-block-start: 1px solid var(--wp--preset--color--line); }
.cs-tile h3 { margin: 0 0 .45rem; font-size: 1.0625rem; }
.cs-tile p { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }

/* Certification chips */
.cs-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0 0; }
.cs-chips a {
	display: inline-block;
	padding: .4rem .85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: .875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.cs-chips a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* FAQ */
.cs-faq { margin-top: 2.25rem !important; }
.cs-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.05rem 0;
}
.cs-faq .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.cs-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after {
	content: "+";
	position: absolute;
	right: .25rem; top: 50%;
	transform: translateY(-50%);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}
.cs-faq details[open] summary::after { content: "−"; }
.cs-faq .wp-block-details p {
	margin: .85rem 0 0;
	color: var(--wp--preset--color--contrast-2);
	max-width: 68ch;
}

/* Closing CTA */
.cs-lp-cta > h2 { margin: 0; font-size: clamp(1.5rem, 2vw, 1.9rem); }
.cs-lp-cta > p { margin: .6rem 0 0; max-width: 58ch; color: var(--wp--preset--color--contrast-2); }
.cs-lp-cta .wp-block-buttons { margin-top: 1.75rem !important; gap: .75rem !important; }

@media (max-width: 860px) {
	.cs-lp-hero .wp-block-columns { gap: 2.5rem !important; }
}

/* The FAQ group sits on the same column as the headings around it. The old
   margin-left:0 here dated from when post-content was itself 720px wide; once
   post-content went alignfull that zero meant "the viewport edge", and the
   accordion shot out to the far left of the page. */
.cs-faq {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.cs-lp-cta > h2,
.cs-lp-cta > p,
.cs-lp-cta > .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The FAQ group carries its own max-width, so its children must not also be
   constrained and centred inside it — that inset them 10px from the section edge. */
.cs-faq > .wp-block-details {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Inside a landing-page section the eyebrow and heading are forced flush left, so
   a centred accordion sat visibly inboard of them. Keep the reading measure, drop
   the centring. */
.cs-lp-section > .cs-faq { margin-inline: 0 !important; }

/* --- quick facts strip ---------------------------------------------------- */

.cs-facts {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.25rem 1.5rem;
}
.cs-facts li { border-block-start: 2px solid var(--wp--preset--color--accent); padding-block-start: .7rem; }
.cs-facts b { display: block; font-size: .9375rem; color: var(--wp--preset--color--contrast); }
.cs-facts span { display: block; margin-block-start: .15rem; font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* --- numbered flow (long steps with bullets) ------------------------------ */

.cs-flow { list-style: none; padding: 0; margin: 2.75rem 0 0; }
.cs-flow > li {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 1.25rem;
	padding-block: 1.6rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.cs-flow > li:last-child { border-block-end: 1px solid var(--wp--preset--color--line); }
.cs-flow__n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}
.cs-flow h3 { margin: 0 0 .4rem; font-size: 1.1875rem; }
.cs-flow > li > div > p { margin: 0; color: var(--wp--preset--color--contrast-2); max-width: 66ch; }
.cs-flow ul { margin: .85rem 0 0; padding-inline-start: 1.1rem; }
.cs-flow ul li { margin-block-end: .3em; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }

/* --- timeline ------------------------------------------------------------- */

.cs-timeline {
	list-style: none;
	padding: 0;
	margin: 2.75rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 2rem 1.5rem;
}
.cs-timeline li { border-block-start: 2px solid var(--wp--preset--color--line); padding-block-start: .85rem; }
.cs-timeline__t {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	margin-block-end: .35rem;
}
.cs-timeline b { display: block; font-size: 1rem; color: var(--wp--preset--color--contrast); }
.cs-timeline span:last-child { display: block; margin-block-start: .2rem; font-size: .875rem; color: var(--wp--preset--color--muted); }

/* Static chips (payment methods) carry no link. */
.cs-chips--static { margin-block-start: 1.1rem; }
.cs-chips--static li {
	padding: .3rem .7rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-2);
}

/* Landing furniture inside post content must not inherit the reading measure. */
.wp-block-post-content .cs-lp-section > h2,
.wp-block-post-content .cs-lp-section > p,
.wp-block-post-content .cs-lp-cta > h2,
.wp-block-post-content .cs-lp-cta > p { margin-left: 0 !important; }

/* Landing furniture inside post content. post-content is now alignfull, so its
   ordinary children must stay CENTRED in the content column — an earlier
   margin-left:0 here pushed them to the viewport edge once the wrapper went
   full width. */
.wp-block-post-content > .cs-lp-lede,
.wp-block-post-content > .cs-facts,
.wp-block-post-content > .cs-eyebrow,
.wp-block-post-content > .cs-callout,
.wp-block-post-content > .wp-block-buttons {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto !important;
}
.wp-block-post-content > .cs-lp-lede { max-width: var(--wp--style--global--content-size); }

/* Four facts sit on one row at full width rather than wrapping 3 + 1. */
@media (min-width: 900px) {
	.cs-facts { grid-template-columns: repeat(4, 1fr); }
}

/* --- callout + inline cta ------------------------------------------------- */

.cs-callout {
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base-soft);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.25rem;
	margin-block: 1.75rem;
}
.cs-callout p { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }
.cs-callout p + p { margin-top: .5rem; }

.cs-inline-cta { font-weight: 500; text-decoration: none; font-size: .9375rem; }
.cs-inline-cta:hover { text-decoration: underline; }
.cs-flow .cs-inline-cta { display: inline-block; margin-top: .5rem; }

/* --- tables, sign-off, proof gallery -------------------------------------- */

.cs-table table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.cs-table :where(th,td) { border: 1px solid var(--wp--preset--color--line); padding: .7rem .85rem; vertical-align: top; }
.cs-table thead th {
	background: var(--wp--preset--color--base-sunk);
	text-align: start;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.cs-table td:first-child { white-space: nowrap; }
.cs-table figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--wp--preset--color--muted); }

.cs-signoff { margin-top: 1.75rem; color: var(--wp--preset--color--muted); font-style: italic; }

.cs-proofs.wp-block-gallery { gap: 1.25rem; }
.cs-proofs figure.wp-block-image {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--base-soft);
}
.cs-proofs figcaption {
	padding: .5rem .7rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--base);
}

/* --- signup card (Brevo) ------------------------------------------------- */
/* [cs_signup]. Brevo's main.js drives the form; its stylesheet and webfonts are
   not loaded, so this has to do everything the provider CSS did. Three rules
   are load-bearing and must survive any redesign:
     .input--hidden           the honeypot spam trap. If it is visible, real
                              users fill it in and their signup is rejected.
     .sib-hide-loader-icon    the submit spinner, shown only while sending
     .sib-form-message-panel  hidden until main.js adds --active               */

.cs-signup {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base-soft);
	padding: 1.75rem;
	margin-block: 2rem;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.cs-signup__badge {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--wp--preset--color--success);
	border-radius: 4px;
	padding: .2rem .45rem;
	margin-bottom: .6rem;
}
/* .cs-signup prefix: .wp-block-post-content h3 (0,1,1) would otherwise out-rank
   a lone class and add its 1.9em top margin inside the card. */
.cs-signup .cs-signup__title {
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 .4rem;
}
.cs-signup .cs-signup__text {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--contrast-2);
	max-width: 60ch;
}

.cs-signup form { margin: 0; }
.cs-signup .sib-form-block { padding: 0; }

.cs-signup .cs-signup__label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-block-end: .4rem;
}

/* Input and button share one row and wrap on narrow screens. */
.cs-signup__row { display: flex; flex-wrap: wrap; gap: .6rem; }

.cs-signup__input {
	flex: 1 1 14rem;
	min-width: 0;
	font: inherit;
	font-size: .9375rem;
	padding: .7rem .85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.cs-signup__input::placeholder { color: var(--wp--preset--color--muted); }
.cs-signup__input:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }

.cs-signup__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
	background: var(--wp--preset--color--accent-dark);
	border: 0;
	border-radius: 6px;
	padding: .75rem 1.4rem;
	cursor: pointer;
	white-space: nowrap;
}
.cs-signup__button:hover { background: var(--wp--preset--color--contrast); }
.cs-signup__button:focus-visible { outline: 2px solid var(--wp--preset--color--accent-dark); outline-offset: 2px; }
.cs-signup__button[disabled],
.cs-signup__button.sib-form-block__button-disabled { opacity: .7; cursor: progress; }

/* The spinner: main.js removes sib-hide-loader-icon from the svg while sending. */
.cs-signup__button svg {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: currentColor;
	animation: cs-spin 1s linear infinite;
}
.cs-signup .sib-hide-loader-icon { display: none !important; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-signup__button svg { animation: none; } }

/* Hidden by default. Deliberately no !important: Brevo reveals this label by
   setting an inline display, and an inline style only wins against a normal
   declaration. :empty is not enough, the label can contain whitespace. */
.cs-signup .entry__error {
	display: none;
	font-size: .8125rem;
	color: #9B3B2F;
	margin-block-start: .45rem;
}

.cs-signup .cs-signup__note {
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	margin: .6rem 0 0;
}

/* The honeypot. Never show this. */
.cs-signup .input--hidden { display: none !important; }

/* Success and failure panels: main.js fills the text and adds --active. */
.cs-signup .sib-form-message-panel {
	display: none;
	font-size: .875rem;
	border-radius: 6px;
	padding: .7rem .9rem;
	margin-block-end: .9rem;
	border: 1px solid var(--wp--preset--color--line);
}
.cs-signup .sib-form-message-panel--active { display: block; }
.cs-signup__msg--ok    { color: #0E5C42; background: #E8F5EF; border-color: #BFE3D2; }
.cs-signup__msg--error { color: #9B3B2F; background: #FCEEEC; border-color: #F2C9C3; }

@media (max-width: 480px) {
	.cs-signup { padding: 1.25rem; }
	.cs-signup__button { width: 100%; }
}

/* --- remote support pricing grid ----------------------------------------- */

.cs-prices { gap: 1.25rem !important; }

.cs-price {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.1rem 1.2rem 1.2rem;
	background: var(--wp--preset--color--base);
	height: 100%;
}
.cs-price__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cs-price__head h3 { margin: 0; font-size: 1.0625rem; line-height: 1.2; }
.cs-price__badge {
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .18rem .45rem;
	border-radius: 3px;
	color: var(--wp--preset--color--accent);
	background: #E3EAF1;
	white-space: nowrap;
}
.cs-price__amount { margin: 0; font-variant-numeric: tabular-nums; }
.cs-price__amount s { color: var(--wp--preset--color--muted); font-size: .875rem; margin-inline-end: .3rem; }
.cs-price__amount b { font-size: 1.5rem; font-weight: 700; color: var(--wp--preset--color--contrast); letter-spacing: -.015em; }

/* EDD renders its own form per card; make the button fill the card foot. */
.cs-price .edd_download_purchase_form { margin: auto 0 0; }
.cs-price .edd_purchase_submit_wrapper { margin: 0; }
.cs-price .edd-add-to-cart,
.cs-price .edd_purchase_submit_wrapper a.button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .6rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	margin-block-start: .35rem;
}
.cs-price .edd-add-to-cart:hover { background: var(--wp--preset--color--accent-dark); }
.cs-price .edd_price { display: none; }

/* post-content is full-width so alignwide children can reach the wide frame;
   ordinary prose still stops at the reading measure set by theme.json. */
.wp-block-post-content.alignfull > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* =========================================================================
   LANDING PAGES INSIDE post-content
   When a page uses .cs-lp-section, its wide sections sit on the 1140 frame
   while the title and intro sit in the 720 column — two different left edges.
   Pull the intro furniture onto the wide frame's edge while keeping the text
   itself at a readable measure, so the whole page shares one alignment.
   ========================================================================= */

main:has(.cs-lp-section) > .wp-block-post-title,
.wp-block-post-content:has(.cs-lp-section) > .cs-lp-lede,
.wp-block-post-content:has(.cs-lp-section) > .cs-facts,
.wp-block-post-content:has(.cs-lp-section) > .cs-callout,
.wp-block-post-content:has(.cs-lp-section) > .cs-eyebrow,
.wp-block-post-content:has(.cs-lp-section) > .cs-faq,
.wp-block-post-content:has(.cs-lp-section) > .wp-block-buttons {
	margin-inline-start: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% - var(--wp--style--global--wide-size)) / 2)
	) !important;
	margin-inline-end: auto !important;
}
main:has(.cs-lp-section) > .wp-block-post-title { max-width: 24ch; }

/* Same problem one level down: single.html wraps the title in a group, and the
   CTA and post navigation sit below post-content. Left alone the headline, the
   sections and the CTA end up on three different left edges. :has() keeps this
   off ordinary articles, which still want the narrow column. */
main:has(.cs-lp-section) > :not(.wp-block-post-content, .wp-block-post-featured-image) {
	margin-inline-start: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% - var(--wp--style--global--wide-size)) / 2)
	) !important;
	margin-inline-end: auto !important;
	max-width: var(--wp--style--global--wide-size);
}
main:has(.cs-lp-section) > .cs-single-head > * {
	margin-inline: 0 !important;
	max-width: none;
}
main:has(.cs-lp-section) > .cs-single-head > .wp-block-post-title { max-width: 24ch; }
.wp-block-post-content:has(.cs-lp-section) > .cs-lp-lede { max-width: 62ch; }
.wp-block-post-content:has(.cs-lp-section) > .cs-callout { max-width: 62ch; }
.wp-block-post-content:has(.cs-lp-section) > .cs-facts { max-width: var(--wp--style--global--wide-size); }

/* =========================================================================
   CARD FILTER
   Client-side filter for long card grids (remote support pricing, exam lists).
   Progressive enhancement: the input is injected by JS, so with JS disabled
   the full list is simply shown, unfiltered.
   ========================================================================= */

/* The filter is injected as a sibling of the grid inside a constrained
   section, so WordPress centres it. Pin it to the grid's left edge. */
.cs-filter {
	margin-block: 0 1.75rem;
	max-width: 26rem;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}
.cs-filter__field { position: relative; display: block; }
.cs-filter input {
	width: 100%;
	font: inherit;
	font-size: .9375rem;
	padding: .7rem .85rem .7rem 2.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.cs-filter input:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.cs-filter__icon {
	position: absolute;
	inset-inline-start: .8rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 1rem; height: 1rem;
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}
.cs-filter__count {
	display: block;
	margin-block-start: .5rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}
.cs-filter__empty {
	margin: 0;
	padding: 1.25rem 0;
	color: var(--wp--preset--color--muted);
	font-size: .9375rem;
}
[hidden] { display: none !important; }

/* =========================================================================
   RANDOM SLOGAN SNIPPET
   A WPCode snippet splices .cs-random-slogan in after the Nth </p> of the
   content. In prose that is what it is for; in a card grid the Nth paragraph
   is inside a card, so the box lands in the card and stretches the whole row.
   Hidden in card contexts only — the snippet still runs everywhere else.
   ========================================================================= */
.cs-tile .cs-random-slogan,
.cs-card .cs-random-slogan,
.cs-price .cs-random-slogan,
.cs-panel .cs-random-slogan,
.cs-facts .cs-random-slogan { display: none; }

/* =========================================================================
   CERTIFICATE PAGE FURNITURE
   These rules used to be repeated as inline <style> blocks in the body of every
   certificate page — six near-identical copies across thirteen posts. Moved here
   so the markup carries content only, and so a change lands everywhere at once.
   The !important spam they arrived with was a fight with Elementor; that is gone,
   so it is dropped. The Brevo form keeps its own inline block deliberately.
   ========================================================================= */

/* Payment method row */
.payment-icons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.payment-icons a img {
	height: 24px;
	filter: grayscale(100%);
	opacity: .85;
	transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.payment-icons a:hover img {
	filter: grayscale(0%) drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
	opacity: 1;
	transform: scale(1.1);
}

/* Discount box */
/* Was display:inline-block, which margin:auto cannot centre — as a direct child
   of the full-width post content it pinned itself to the viewport edge, hundreds
   of pixels away from the text it belongs to. Now a proper banner on the column. */
.offer-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.25rem;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
	text-align: left;
}

/* Price row: the live price leads and is the largest thing in the band; the
   struck anchor and the saving sit beside it at reading size. */
.price-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .6rem; margin: 0; }
.old-price, .offer-save { align-self: center; }

.new-price {
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #4ADE80;
	font-variant-numeric: tabular-nums;
}

.old-price { font-size: 1rem; color: rgba(255, 255, 255, .55); text-decoration: line-through; }

.offer-save {
	font-size: .75rem;
	font-weight: 700;
	padding: .2rem .5rem;
	border-radius: 999px;
	color: #4ADE80;
	background: rgba(74, 222, 128, .14);
	border: 1px solid rgba(74, 222, 128, .28);
}

/* Urgency row: a quiet pill and a labelled countdown. The pill no longer
   pulses and the timer no longer blinks — motion read as an ad, and the
   information is the number, not the decoration. */
.offer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }

.badge {
	display: inline-block;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #BFD3FF;
	background: rgba(70, 127, 247, .18);
	border: 1px solid rgba(70, 127, 247, .38);
}

.offer-timer {
	font-size: .875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
}

.offer-timer .cs-countdown__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #FFFFFF;
}

.offer-timer.urgent .cs-countdown__time { color: #FCA5A5; }

/* Product buy box: the band fills the column, the two rows stack, and the
   countdown gets its own line so the price row never has to shrink. */
/* Left cluster: price row over urgency row, tidy and left-aligned. */
.offer-box__info { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }

.offer-box--buybox { max-width: none; margin-inline: 0; padding: 1rem; }
.offer-box--buybox .offer-box__info { flex-basis: 100%; }

/* Primary call to action sitting inside the band on the right. */
.offer-box--cta { gap: 1rem 1.5rem; }
.cs-deal-buy { margin: 0; }
.cs-deal-buy .edd_download_purchase_form,
.cs-deal-buy .edd_purchase_submit_wrapper { margin: 0; }
.cs-deal-buy .edd-cart-ajax-alert { display: none; }
.cs-deal-buy .edd-add-to-cart,
.cs-deal-buy input.edd-add-to-cart,
.cs-deal-buy a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent-dark);
	color: #fff !important;
	border: 0;
	cursor: pointer;
	padding: .95rem 1.9rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(70, 127, 247, .45);
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.cs-deal-buy .edd-add-to-cart:hover,
.cs-deal-buy input.edd-add-to-cart:hover,
.cs-deal-buy a.button:hover { background: #5B90FF; box-shadow: 0 8px 22px rgba(70, 127, 247, .55); }
.cs-deal-buy .edd-add-to-cart:active { transform: translateY(1px); }
.cs-deal-buy .edd-loading { display: none; }

/* Narrow screens: the band wraps, the button spans the full width. */
@media (max-width: 640px) {
	.offer-box--cta .cs-deal-buy { flex-basis: 100%; }
	.offer-box--cta .cs-deal-buy .edd-add-to-cart,
	.offer-box--cta .cs-deal-buy input.edd-add-to-cart,
	.offer-box--cta .cs-deal-buy a.button { width: 100%; }
}

/* AD set / machine writeups */
.cs-adset-wrapper {
	background-color: var(--wp--preset--color--code-bg, #0D1117);
	color: #E6EDF3;
	padding: 20px;
	border-radius: 8px;
	margin-block: 1.5rem;
}
/* Only paragraphs sitting directly on the dark panel take the light colour.
   Scoped with :not(), because the credentials and feature panels nested inside
   have light backgrounds — inheriting #E6EDF3 there rendered the OffSec username
   and password at roughly 1.05:1 against their own background, i.e. invisible. */
.cs-adset-wrapper p { margin: 0 0 15px; }
.cs-adset-wrapper > p,
.cs-adset-wrapper > div:not(.cs-target-environment):not(.cs-features-list) p { color: #E6EDF3; }
.cs-target-environment,
.cs-target-environment p,
.cs-target-environment li,
.cs-features-list,
.cs-features-list p,
.cs-features-list li { color: var(--wp--preset--color--contrast-2); }
.cs-target-environment strong,
.cs-features-list strong { color: var(--wp--preset--color--contrast); }
.cs-verification-title { display: block; font-size: 1.2em; font-weight: 700; margin-bottom: 10px; color: #FFFFFF; }
.cs-adset-item {
	background-color: #242D3A;
	color: #E6EDF3;
	padding: 12px;
	margin-bottom: 8px;
	border-radius: 4px;
	border-left: 4px solid #0D1117;
}
.cs-adset-item:last-child { margin-bottom: 0; }
.cs-adset-active { background-color: #0B5735; border-left-color: #28A745; color: #FFFFFF; }
.cs-warning-highlight { color: #FF8A80; font-weight: 700; }
.cs-privilege-highlight { color: #64FFDA; }
.cs-code {
	background-color: #000000;
	color: #64FFDA;
	padding: 2px 4px;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9em;
}
/* Needs its own colour: on the dark panel it inherited near-white text and the
   highlighted privilege name disappeared into the pale yellow. */
.cs-highlight {
	background-color: #FFF3BF;
	color: #1C244B;
	padding: 0 .2em;
	border-radius: 3px;
}

.cs-target-environment,
.cs-features-list {
	background-color: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--line);
	padding: 15px;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 20px;
}
.cs-features-list { padding-left: 38px; }

/* On-page contents for the long certificate pages */
.cs-toc {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.15rem 1.35rem;
	margin-block: 2rem;
	/* the wp:html wrapper is not constrained, so the box sets its own column */
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	background: var(--wp--preset--color--base-soft);
}
.cs-toc__title {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	margin: 0 0 .6rem;
}
.cs-toc ol { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.cs-toc li { margin: .25rem 0; break-inside: avoid; }
@media (max-width: 700px) { .cs-toc ol { columns: 1; } }

/* =========================================================================
   PRODUCT CATALOGUE
   Card index of everything sold for one exam. Cards carry no headings on
   purpose: filter.js falls back to textContent, and duplicate headings would
   put every machine into the document outline twice.
   ========================================================================= */
.cs-cat { margin-block: 2.5rem; }
.cs-cat__guides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .75rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cs-cat__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .75rem;
}
.cs-cat__card {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-cat__card:hover,
.cs-cat__card:focus-visible {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.cs-cat__name {
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}
.cs-cat__meta { display: flex; align-items: center; gap: .4rem; }
.cs-cat__badge {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--base-sunk);
	border-radius: 4px;
	padding: .1rem .35rem;
}
.cs-cat__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-top: auto;
	padding-top: .45rem;
}
.cs-cat__price { font-weight: 700; font-size: .9375rem; color: var(--wp--preset--color--contrast); }
.cs-cat__where { font-size: .6875rem; color: var(--wp--preset--color--muted); }
.cs-cat__note { margin: 1rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* Cards that leave the page read differently from in-page anchors. */
.cs-cat__card--guide { background: var(--wp--preset--color--base-soft); }
.cs-cat__badge--guide { color: #FFFFFF; background: var(--wp--preset--color--accent); }
@media (prefers-reduced-motion: reduce) { .cs-cat__card { transition: none; } }

/* =========================================================================
   MACHINE CARDS
   Each target's heading, report and buy button were a loose run of blocks
   separated by 100px spacers, so the page read as a column of stranded
   fragments. Grouping each target into one bordered unit is what makes the
   long-form page scannable without moving any of the writing.
   ========================================================================= */
.cs-machine {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 2rem 2.25rem 2.25rem;
	margin-block: 1.5rem !important;
	background: var(--wp--preset--color--base);
	scroll-margin-top: 1.5rem;
}
.cs-machine > :first-child { margin-top: 0 !important; }
.cs-machine > :last-child  { margin-bottom: 0 !important; }

/* The card spans the wide frame to sit flush with the offer cards above it,
   but its writing is long-form: one group holds several machine write-ups
   back to back. Text run edge to edge at 1240px is ~130 characters a line,
   so every child is capped at a reading measure and centred. That turns the
   old stranded-left gap into even margins on both sides, and the card reads
   as a deliberate reading well instead of a half-empty box. The auto margin
   needs !important to beat core's constrained-layout margin rule.
   The width is in rem, not ch: ch scales with each element's own font, so a
   heading and the small buy label would come out wider and narrower than the
   paragraphs and their edges would never line up. The value itself lives on
   the cert body (--cs-reading-well, set in the CERTIFICATION HUB PAGES block
   below) so the sample-report exhibit above the catalogue shares it exactly. */
.cs-machine > * {
	max-width: var(--cs-reading-well, 52rem);
	margin-inline: auto !important;
}
.cs-machine h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin-block: 0 .9rem !important;
}
.cs-machine h3 + p { margin-top: 0; }

/* Inside a group the later machines are introduced by a bold-only paragraph
   rather than a real heading. Give those the weight of a heading so each
   machine is findable at a glance, and open a little air above them. */
.cs-machine p:has(> strong:only-child) {
	font-size: 1.125rem;
	line-height: 1.3;
	margin-block: 2rem .75rem !important;
}
.cs-machine p:has(> strong:only-child) strong { font-weight: 700; }
.cs-machine p:empty { display: none; }

/* nmap and service-scan screenshots: framed, centred within the well, and
   never wider than it (the originals are up to 1672px). */
.cs-machine figure { margin-block: 1.25rem !important; }
.cs-machine img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}

/* Each machine closes with its purchase action. A hairline above the label
   marks where one machine ends, so the button is visibly tied to the write-up
   it follows rather than floating between two of them. */
.cs-machine p:has(+ .edd_download_purchase_form),
.cs-machine p:has(+ form) {
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 1rem;
	margin-block: 1.25rem .45rem !important;
}
.cs-machine .edd_download_purchase_form { margin-block: .25rem 0; }

@media (max-width: 640px) {
	.cs-machine { padding: 1.25rem 1.15rem 1.35rem; border-radius: 10px; }
	.cs-machine p:has(> strong:only-child) { margin-top: 1.5rem !important; }
}

/* =========================================================================
   CONTRAST
   The brand accent #467FF7 is a background colour, not a text colour: as text
   on white it measures 3.73:1 and white on it 3.72:1, both under the 4.5:1 that
   normal text needs. Links and buttons therefore use accent-dark (6.6:1), and
   the accent is kept for fills and accents where nothing has to be read off it.
   ========================================================================= */

/* EDD ships its own blue for purchase buttons — off-brand and 3.63:1. */
.edd_download_purchase_form .button,
.edd-submit.button,
.edd_purchase_submit_wrapper .edd-add-to-cart,
.edd_go_to_checkout,
a.edd-add-to-cart,
.edd-add-to-cart {
	background-color: var(--wp--preset--color--accent-dark) !important;
	border-color: var(--wp--preset--color--accent-dark) !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	font-weight: 600;
	/* EDD renders add-to-cart as <button> but "Checkout" as <a>. A button is
	   border-box by UA default and an anchor is content-box, so the same
	   width:100% + padding we give both made only the checkout state 2rem
	   wider than its card and hang outside the border. */
	box-sizing: border-box;
}
.edd_download_purchase_form .button:hover,
.edd-submit.button:hover,
.edd_purchase_submit_wrapper .edd-add-to-cart:hover,
.edd_go_to_checkout:hover,
a.edd-add-to-cart:hover,
.edd-add-to-cart:hover {
	background-color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
}
.edd-add-to-cart-label,
.edd-add-to-cart .edd-add-to-cart-label { color: #FFFFFF; }

.cs-cat__badge--guide { background: var(--wp--preset--color--accent-dark); }

/* #FF8A80 is legible on the near-black panel but not on the green active row. */
.cs-adset-active .cs-warning-highlight { color: #FFD9D6; }


/* Catalogue groups: 48 items in one undifferentiated grid told nobody which of
   them they needed. Headers span the grid and explain each kind in a line. */
.cs-cat__group {
	grid-column: 1 / -1;
	margin: 1.5rem 0 .25rem;
}
.cs-cat__group:first-child { margin-top: 0; }
.cs-cat__group h3 {
	font-size: 1rem;
	margin: 0 0 .15rem;
	color: var(--wp--preset--color--contrast);
}
.cs-cat__group p {
	margin: 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	max-width: 70ch;
}
.cs-cat__empty { grid-column: 1 / -1; }

/* "How to find yours" panel above the catalogue */
.cs-pick {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base-soft);
	padding: 1.25rem 1.4rem;
	margin-block: 1.5rem;
}
.cs-pick > p:first-child { margin-top: 0; }
.cs-pick > :last-child { margin-bottom: 0; }
.cs-pick ol { margin: .6rem 0 0; padding-left: 1.2rem; }
.cs-pick li { margin: .35rem 0; }
.cs-pick code {
	background: var(--wp--preset--color--base-sunk);
	padding: .1em .35em;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9em;
}

/* =========================================================================
   OFFER CARD
   Reusable purchase block: [cs_offer id="..."]. Replaces a stack of loose
   blocks where the image dominated, the price floated away from the button,
   and nothing said what the buyer actually gets.
   ========================================================================= */
.cs-offer-card {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1.5rem;
	align-items: start;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	padding: 1.5rem;
	margin-block: 1.75rem;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
.cs-offer-card--noimage { grid-template-columns: 1fr; }

.cs-offer-card__media { margin: 0; }
.cs-offer-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.cs-offer-card__badge {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--wp--preset--color--accent-dark);
	border-radius: 4px;
	padding: .2rem .45rem;
	margin-bottom: .5rem;
}
.cs-offer-card__title {
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 .35rem;
}
.cs-offer-card__sub {
	margin: 0 0 .9rem;
	color: var(--wp--preset--color--contrast-2);
	max-width: 58ch;
}
.cs-offer-card__list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.cs-offer-card__list li {
	position: relative;
	padding-left: 1.5rem;
	margin: .35rem 0;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
}
.cs-offer-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .7rem;
	height: .38rem;
	border-left: 2px solid var(--wp--preset--color--success);
	border-bottom: 2px solid var(--wp--preset--color--success);
	transform: rotate(-45deg);
}

/* Price and button sit together: separating them was the main failure before. */
.cs-offer-card__buy {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 1.1rem;
	margin-top: .25rem;
}
.cs-offer-card__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: .2rem;
}
.cs-offer-card__was {
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}
.cs-offer-card__now {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}
.cs-offer-card__save {
	font-size: .75rem;
	font-weight: 700;
	color: #0E5C42;
	background: #DCFCE7;
	border-radius: 4px;
	padding: .2rem .45rem;
}
.cs-offer-card__timer {
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 .9rem;
	font-variant-numeric: tabular-nums;
}
.cs-offer-card__timer[data-urgent="1"] { color: #9B3B2F; font-weight: 600; }
.cs-offer-card__cta .edd_download_purchase_form { margin: 0; }
.cs-offer-card__cta .button { font-size: 1rem !important; padding: .8rem 1.5rem !important; }
.cs-offer-card__note {
	margin: .7rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
	.cs-offer-card { grid-template-columns: 1fr; padding: 1.15rem; gap: 1.1rem; }
	.cs-offer-card__media { max-width: 12rem; }
	.cs-offer-card__now { font-size: 1.625rem; }
}

/* --- certifications: breadcrumbs, pricing by category, hubs --------------- */

.cs-crumbs { font-size: .8125rem; color: var(--wp--preset--color--muted); margin: 0 0 .75rem; }
.cs-crumbs a { color: var(--wp--preset--color--accent-dark); text-decoration: none; }
.cs-crumbs a:hover { text-decoration: underline; }
.cs-crumbs__sep { margin: 0 .45em; }

/* Provider cards flow in columns so a two-row provider does not stretch to
   the height of an eleven-row one beside it. */
/* Ten provider cards of wildly different length. CSS columns balanced them by
   flowing one card under another, which put OffSec's eleven rows in column one and
   three small providers stacked in column three — unpredictable to read and
   impossible to scan. A grid keeps every card in its own cell, two up at the wide
   frame, where a row fits on one line. */
.cs-pricing {
	display: grid;
	/* min() guards the track floor: a bare minmax(26rem, 1fr) keeps a 416px column
	   on a 375px phone and pushes the page sideways. */
	grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
	gap: 1.25rem;
	align-items: start;
	margin-block: 1.5rem 0;
}
.cs-pricing--single { display: block; }
.cs-pricing__provider {
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	padding: 1.15rem 1.25rem .9rem;
}
.cs-pricing--single .cs-pricing__provider { padding: 0; border: 0; border-radius: 0; }

.cs-pricing__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .85rem;
}
.cs-pricing__name { font-size: 1.0625rem; margin: 0 0 .15rem; line-height: 1.3; }
.cs-pricing__name a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.cs-pricing__name a:hover { color: var(--wp--preset--color--accent-dark); }
.cs-pricing__meta { margin: 0; font-size: .8125rem; color: var(--wp--preset--color--muted); }
.cs-pricing__all {
	flex: none;
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--accent-dark);
	white-space: nowrap;
}
.cs-pricing__all:hover { text-decoration: underline; }

.cs-pricing__scroll { overflow-x: auto; }
.cs-pricing__table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 0; }
.cs-pricing__table th,
.cs-pricing__table td {
	padding: .5rem .4rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: baseline;
}
.cs-pricing__table thead th {
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	padding-block: 0 .35rem;
	border-bottom-color: var(--wp--preset--color--line);
}

/* The row is the target, not just the acronym in it. One real link per row,
   stretched over the cells, so the pointer and the accessible name still agree. */
.cs-pricing__row { position: relative; }
.cs-pricing__row:hover { background: var(--wp--preset--color--base-soft); }
.cs-pricing__row:hover .cs-pricing__cert { color: var(--wp--preset--color--accent-dark); }
.cs-pricing__row:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; }
.cs-pricing__cert::after { content: ""; position: absolute; inset: 0; }
.cs-pricing__cert:focus-visible { outline: none; }
.cs-pricing__table tbody tr:last-child th,
.cs-pricing__table tbody tr:last-child td { border-bottom: 0; }

/* Acronym and full name share a line: eleven certifications then read as eleven
   rows rather than thirty-three, which is what made the card so tall. */
.cs-pricing__what { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.cs-pricing__cert {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cs-pricing__full {
	font-weight: 400;
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cs-pricing__table .cs-pricing__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wp--preset--color--contrast-2); width: 1%; }
/* Left, not right: with ranges of different widths it is the lower bound that
   people compare, and left-aligning is what lines those up. */
.cs-pricing__price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; width: 1%; }
.cs-pricing__na { color: var(--wp--preset--color--muted); font-style: italic; font-weight: 400; }
.cs-pricing--single .cs-pricing__table { font-size: .9375rem; }
.cs-pricing--single .cs-pricing__table th,
.cs-pricing--single .cs-pricing__table td { padding: .7rem .5rem; }
.cs-pricing--single .cs-pricing__full { font-size: .8125rem; }

/* Narrow: the full name drops under the acronym and the count leaves, so the two
   figures that decide anything — which exam and what it costs — keep the line. */
@media (max-width: 34rem) {
	.cs-pricing__what { display: block; }
	.cs-pricing__full { display: block; white-space: normal; }
	.cs-pricing__table thead .cs-pricing__num,
	.cs-pricing__table tbody .cs-pricing__num { display: none; }
}

.cs-hub__head { margin-block-end: 2rem; }
.cs-hub__title { margin: .25rem 0 .75rem; }
.cs-hub__full { display: block; font-size: 1.125rem; font-weight: 400; color: var(--wp--preset--color--contrast-2); margin-block-start: .25rem; }
.cs-hub__lede { max-width: 40rem; color: var(--wp--preset--color--contrast-2); font-size: 1.0625rem; }
.cs-hub__facts { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.cs-hub__facts li { display: flex; flex-direction: column; font-size: .9375rem; }
.cs-hub__facts span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--muted); }
.cs-hub__primary {
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-block: 1.5rem 2.5rem;
	background: var(--wp--preset--color--base-soft);
	max-width: 48rem;
}
.cs-hub__primary .cs-eyebrow { margin: 0; }
.cs-hub__primary h2 { margin: .25rem 0 .5rem; font-size: 1.375rem; }
.cs-hub__primary h2 a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.cs-hub__primary h2 a:hover { color: var(--wp--preset--color--accent-dark); }
.cs-hub__primary p { margin: 0 0 .75rem; }
.cs-hub__primary p:last-child { margin: 0; }
.cs-hub__cta {
	display: inline-block;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	padding: .6rem 1rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}
.cs-hub__cta:hover { background: var(--wp--preset--color--contrast); color: #fff; }
.cs-hub__products,
.cs-hub__guides { margin-block: 2.5rem; }
.cs-hub__products h2,
.cs-hub__guides h2 { margin-block-end: .5rem; }
.cs-hub__note { color: var(--wp--preset--color--muted); font-size: .9375rem; max-width: 40rem; margin-block: 0 1rem; }
.cs-hub__list { list-style: none; padding: 0; margin: 0; max-width: 48rem; }
.cs-hub__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.cs-hub__list a { text-decoration: none; color: var(--wp--preset--color--contrast); font-weight: 500; }
.cs-hub__list a:hover { color: var(--wp--preset--color--accent-dark); text-decoration: underline; }
.cs-hub__date { color: var(--wp--preset--color--muted); font-size: .8125rem; white-space: nowrap; }
.cs-hub__empty { color: var(--wp--preset--color--contrast-2); }

@media (max-width: 480px) {
	.cs-pricing__provider { padding: 1rem .9rem .75rem; }
	.cs-hub__list li { flex-direction: column; gap: .2rem; }
}

/* Hub product grid. Only 29 of 154 products carry an image, so a mixed grid
   leaves one tall card and two half-empty ones. Same call as the post cards:
   text-led, uniform, and the buy button always in the same place. */
.cs-hub__products .edd_downloads_list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; align-items: start; }
.cs-hub__products .edd_download_image { display: none; }
.cs-hub__products .edd_download_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1rem 1.1rem 1.1rem;
	background: var(--wp--preset--color--base);
}
.cs-hub__products .edd_download_title { margin-top: 0; }
.cs-hub__products .edd_download_excerpt { font-size: .875rem; color: var(--wp--preset--color--contrast-2); }
.cs-hub__products .edd_price { font-weight: 600; color: var(--wp--preset--color--contrast); margin-block: .25rem .75rem; }
.cs-hub__products .edd_download_buy_button { margin-top: auto; }
.cs-hub__products .edd-add-to-cart,
.cs-hub__products .edd_purchase_submit_wrapper a.button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .6rem 1rem;
	font-weight: 600;
	text-decoration: none;
}
.cs-hub__products .edd-add-to-cart:hover,
.cs-hub__products .edd_purchase_submit_wrapper a.button:hover { background: var(--wp--preset--color--contrast); }

/* Exam-specific call to action at the foot of a walkthrough. Shares the shape of
   the generic .cs-offer pattern so the two read as one component. */
.cs-offer--exam {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base-soft);
}
.cs-offer--exam .cs-offer__title { font-size: 1.375rem; margin: 0 0 .5rem; }
.cs-offer--exam .cs-offer__text { color: var(--wp--preset--color--contrast-2); margin: 0 0 1rem; }
.cs-offer--exam .cs-offer__buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.cs-offer__btn {
	display: inline-block;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	padding: .6rem 1.1rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
}
.cs-offer__btn:hover { background: var(--wp--preset--color--contrast); color: #fff; }

/* Urgency strip inside an article CTA — the hero band's language at CTA scale,
   driven by the same offer.js countdown. */
.cs-offer__deal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: 0 0 1rem;
	padding: .6rem .9rem;
	border-radius: 8px;
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
}
.cs-offer__deal .offer-timer { margin-left: auto; }
.cs-offer__deal-price s { color: rgba(255, 255, 255, .55); margin-right: .35rem; }
.cs-offer__deal-price strong { color: #4ADE80; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.cs-offer__deal-save { color: #4ADE80; font-size: .8rem; font-weight: 700; }
.cs-offer--deal-only .cs-offer__deal { margin-bottom: 0; }
.cs-offer__btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--accent-dark);
	box-shadow: inset 0 0 0 1px currentColor;
}
.cs-offer__btn--ghost:hover { background: var(--wp--preset--color--accent-dark); color: #fff; box-shadow: none; }
@media (max-width: 480px) { .cs-offer--exam .cs-offer__btn { width: 100%; text-align: center; } }

/* =========================================================================
   SALE BANNERS INSIDE WALKTHROUGHS (inc/article-banners.php)
   The certification's offer, placed by reading position rather than written
   into posts. The full card leads with the offer row and ends with the price
   block and the button, on the hero band's navy, so one colour means one
   thing across the site; the strip is the same offer as one line on the page
   surface, the second touch in a long post. The price and countdown pieces
   are the band's own (.price-box, .badge, .offer-timer), so the numbers and
   the words here match the page the button opens.
   ========================================================================= */
.cs-sale {
	position: relative;
	box-sizing: border-box;
	margin-block: 2.25rem;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 1.45;
}

.cs-sale--deal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.25rem 2rem;
	align-items: center;
	padding: 1.5rem 1.75rem;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}

/* A blue glow behind the price and button, so the offer end of the card reads
   as the lit end. No glyph or image: the card is the store's own, on its own
   ground, and needs no badge to say so. */
.cs-sale--deal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 140% at 100% 100%, rgba(70, 127, 247, .32), transparent 62%);
	pointer-events: none;
}

.cs-sale__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .65rem;
}
.cs-sale__body .offer-meta { gap: .5rem .9rem; }

.cs-sale__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #FFFFFF;
	text-wrap: balance;
}
.cs-sale__text {
	margin: 0;
	max-width: 34rem;
	font-size: .9375rem;
	color: rgba(255, 255, 255, .82);
}

.cs-sale__buy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .85rem;
}
.cs-sale__buy .new-price { font-size: 2.25rem; }

.cs-sale__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .9rem 1.6rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-dark);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(70, 127, 247, .45);
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.cs-sale__btn:hover { background: #5B90FF; color: #FFFFFF; box-shadow: 0 8px 22px rgba(70, 127, 247, .55); }
.cs-sale__btn:active { transform: translateY(1px); }
.cs-sale__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.cs-sale__btn--sm { padding: .55rem 1rem; font-size: .9375rem; box-shadow: none; }
.cs-sale__btn--sm:hover { box-shadow: none; }
.cs-sale__btn--sm:focus-visible { outline-color: var(--wp--preset--color--accent-dark); }

/* One-line strip: badge, product and price, countdown, button. On the page
   surface the band's dark-ground colours are re-set for light. */
.cs-sale--strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	padding: .8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-soft);
	color: var(--wp--preset--color--contrast);
	font-size: .9375rem;
}
.cs-sale--strip .badge {
	color: var(--wp--preset--color--accent-dark);
	background: rgba(70, 127, 247, .1);
	border-color: rgba(70, 127, 247, .3);
}
.cs-sale--strip .cs-sale__line { flex: 1 1 14rem; }
.cs-sale--strip .cs-sale__price {
	color: var(--wp--preset--color--success);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cs-sale--strip .cs-sale__price s { color: var(--wp--preset--color--muted); font-weight: 400; }
.cs-sale--strip .offer-timer { color: var(--wp--preset--color--contrast-2); }
.cs-sale--strip .offer-timer .cs-countdown__time { color: var(--wp--preset--color--contrast); }
.cs-sale--strip .offer-timer.urgent .cs-countdown__time { color: #9B3B2F; }

@media (max-width: 640px) {
	.cs-sale { margin-block: 1.75rem; }
	.cs-sale--deal { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
	.cs-sale__buy { width: 100%; }
	.cs-sale__btn { width: 100%; }
	.cs-sale--strip { padding: .75rem .9rem; }
	.cs-sale--strip .cs-sale__btn--sm { width: auto; margin-left: auto; }
}

/* =========================================================================
   CERTIFICATION BLOCKS (editor)
   The three cyberservices/cert-* blocks read the certification from the
   request, so a template open in the editor has nothing to preview. This is
   what stands in for them there; it never renders on the front end.
   ========================================================================= */
.cs-block-placeholder {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	border: 1px dashed var(--wp--preset--color--line, #D9DEE7);
	border-radius: 8px;
	background: var(--wp--preset--color--base-soft, #F6F8FB);
	padding: .9rem 1.1rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted, #5B6577);
}
.cs-block-placeholder strong {
	font-size: .875rem;
	color: var(--wp--preset--color--contrast, #101828);
}

/* =========================================================================
   QUERY PAGINATION (walkthroughs index + category/blog archives)
   Core ships bare text links spread edge-to-edge; this makes them a centred
   row of tappable pills with a highlighted current page.
   ========================================================================= */
.wp-block-query-pagination {
	justify-content: center !important;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}
.wp-block-query-pagination-numbers {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}
/* Every clickable control — page numbers and the Newer/Older links — is one pill. */
.wp-block-query-pagination a.page-numbers,
.wp-block-query-pagination span.page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--base-soft);
}
/* Current page: solid, high-contrast, not clickable. */
.wp-block-query-pagination span.page-numbers.current {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: #fff;
}
/* The gap ellipsis is not a control. */
.wp-block-query-pagination span.page-numbers.dots {
	border: 0;
	background: none;
	min-width: 1.25rem;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}
/* Newer/Older read as directional buttons; keep them a touch wider. */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	padding: 0 1.1rem;
	color: var(--wp--preset--color--contrast-2);
}
:where(.wp-block-query-pagination) :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.wp-block-query-pagination a.page-numbers,
	.wp-block-query-pagination span.page-numbers,
	.wp-block-query-pagination .wp-block-query-pagination-previous,
	.wp-block-query-pagination .wp-block-query-pagination-next {
		min-width: 2.25rem;
		height: 2.25rem;
		padding: 0 .6rem;
		font-size: .875rem;
	}
}

/* =========================================================================
   POST CARD MEDIA (walkthroughs / blog grids)
   Featured image where a post has one, a light branded placeholder where it
   does not, so every card leads with a uniform 16:9 visual.
   ========================================================================= */
.cs-card { border-block-start: 0 !important; padding-block-start: 0 !important; }
.cs-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	margin-block-end: .9rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--base-sunk);
	border: 1px solid var(--wp--preset--color--line);
}
.cs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.cs-card:hover .cs-card__media img { transform: scale(1.04); }
.cs-card__media--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wp--preset--color--base-sunk), #E7EDFB 70%);
}
.cs-card__ph-mark {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--accent);
	opacity: .45;
}

/* =========================================================================
   CERTIFICATION HUB PAGES — full-width content
   The cert single + cert term-archive pages are hub/landing pages (facts, offer
   band, product grids, guides, FAQ), not long-form articles, so their content
   uses the wide frame to match the /certifications/ index and product pages
   instead of the narrow reading measure. Redefining the content-size variable
   (scoped to these pages) widens every constrained block, the offer band and
   the prose cap in one move.
   ========================================================================= */
body.single-certificate,
body.tax-cs_cert {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
	/* One reading measure shared by the machine cards and the sample exhibit. */
	--cs-reading-well: 52rem;
}

/* Loose sample images on certification pages. 26 of the 34 cert hubs drop a
   sample-report screenshot straight into the post content (34 images, 287px
   to 2276px wide). Left to core they rendered left-aligned at raw size, up to
   the full 1240 frame. Capping each to the reading well, centring it and
   framing it gives every hub the same centred exhibit, consistent with the
   machine cards' in-card screenshots. Scoped to figures that are DIRECT
   children of the post content, so nothing inside a card or offer box is
   touched. Deliberately no rule for the paragraph before an image: on two
   hubs (OSEE, CPENT) that is a real 240–400 character body paragraph, and a
   "caption" style there would shrink genuine copy. */
body.single-certificate .wp-block-post-content > figure.wp-block-image,
body.tax-cs_cert       .wp-block-post-content > figure.wp-block-image {
	max-width: var(--cs-reading-well);
	margin-inline: auto !important;
	text-align: center;
}
body.single-certificate .wp-block-post-content > figure.wp-block-image img,
body.tax-cs_cert       .wp-block-post-content > figure.wp-block-image img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}

/* =========================================================================
   FLOATING CONTACT PILLS ON PHONES
   Two fixed pills sit bottom-right: the Telegram button (WPCode snippet
   `telegram-social`) and Formilla's "Leave a Message" launcher (WPCode snippet
   `formilla-leave-a-message`, rendered inside the same-origin #formilla-frame).
   Stacked as full-text pills they cover ~140px of a phone's first screen —
   exactly where the hero CTAs land — and the launcher frame's transparent
   272px width also swallows taps meant for the buttons under it. On phones
   both collapse to 46px icon circles on one right edge. assets/pills.js
   restyles the button inside Formilla's frame and shrinks the frame itself;
   desktop is untouched. Specificity: the Telegram snippet prints its CSS in
   the footer (after this sheet) at (0,1,1), so these carry `body`.
   ========================================================================= */
@media (max-width: 767px) {
	body .telegram-contact-btn { right: 16px; bottom: 78px; }
	body .telegram-contact-btn a {
		width: 46px;
		height: 46px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	body .telegram-contact-btn svg { width: 22px !important; height: 22px !important; margin-left: -3px; }
	/* Label hidden by size; the online dot survives as a corner badge. */
	body .telegram-contact-btn .tg-text { position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; font-size: 0; }
	body .telegram-contact-btn .telegram-online-dot {
		width: 13px;
		height: 13px;
		margin: 0;
		box-sizing: border-box;
		border: 2px solid var(--wp--preset--color--base);
	}
	/* The launcher frame's size and position are inline !important from Formilla,
	   so pills.js sets the compact 46px / right 16px / bottom 20px there. */
}

/* =========================================================================
   CHECKOUT
   Page 1164 is EDD's checkout block with inner blocks (cart, discount form,
   personal info, payment info) laid out with core columns, so the client can
   edit every line in the editor. Two columns from 782px: the order sheet on
   the left, the form on the right (the sheet is first in the DOM, so a phone
   reads order → email → button). The order sheet is the page's only boxed
   surface — it is the receipt the buyer is about to get: item, total, where
   it is sent, the guarantee, and what can be added. The store's one gateway
   (Boxcoin) takes payment on its own page after this form, so the button is
   labelled as the step it is and the line above it says so.
   Specificity: EDD anchors its checkout rules on #edd_purchase_form /
   #edd_checkout_cart, so the rules that restyle EDD markup carry the
   #edd_checkout_form_wrap id in front of the theme class.
   ========================================================================= */

/* Trust badges under the H1 (a list block, one pill per item). */
.cs-checkout__trust { list-style: none; margin: -.25rem 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.wp-block-post-content .cs-checkout__trust { padding-inline-start: 0; } /* outranks the content-list indent */
.wp-block-post-content .cs-checkout__trust li + li { margin-block-start: 0; }
.cs-checkout__trust li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .5rem .9rem .5rem .8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base-soft);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.cs-checkout__trust li::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* The checkout block's wrapper is a plain div, so an alignwide inside it gets
   no width of its own; widen the wrapper instead (a checkout reads best a
   little narrower than the site's 1240 wide frame), and give the page title
   and the sections below the same width so every left edge lines up. */
.cs-checkout-page .wp-block-post-title,
.cs-checkout-page .wp-block-post-content > * { max-width: min(var(--wp--style--global--wide-size), 68rem); }

/* Phones: the buyer should see the order sheet without scrolling past a
   screen of chrome, so the page starts closer to the header and the three
   badges fold into one soft strip (one line each, no pill borders) instead
   of three stacked pills. */
@media (max-width: 781px) {
	.cs-checkout-page .wp-block-post-title + .wp-block-post-content { margin-top: 1rem; }
	.wp-block-post-content .cs-checkout__trust {
		margin: 0 0 1.25rem;
		padding: .55rem .75rem;
		gap: .3rem .9rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		background: var(--wp--preset--color--base-soft);
	}
	.cs-checkout__trust li { padding: 0; border: 0; border-radius: 0; background: transparent; gap: .45rem; font-size: .8125rem; line-height: 1.35; }
	.cs-checkout__trust li::before { width: .95rem; height: .95rem; }
}
@media (max-width: 374px) {
	.cs-checkout__trust li { font-size: .75rem; } /* keeps the delivery line on one line on 360px phones */
}

/* "Scroll to continue" cue (assets/checkout.js): a pill at the bottom of a
   phone screen while the email/payment column is still below the fold.
   Centred, so it never meets the contact pills in the bottom-right corner. */
.cs-scroll-cue {
	position: fixed;
	left: 50%;
	bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: .55rem .95rem .55rem .7rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 10px 28px -12px rgb(28 36 75 / .5);
	cursor: pointer;
	transform: translate(-50%, 0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.cs-scroll-cue.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, .5rem);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.cs-scroll-cue svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	padding: .15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	animation: cs-cue-bob 1.6s ease-in-out infinite;
}
.cs-scroll-cue:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
@keyframes cs-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
	.cs-scroll-cue { transition: none; }
	.cs-scroll-cue svg { animation: none; }
}
@media (min-width: 782px) { .cs-scroll-cue { display: none; } }

/* Columns: order sheet left (it is first in the markup, so phones read it
   first too), email + payment right; the sheet stays pinned on desktop. */
.cs-checkout.wp-block-columns { gap: 3.5rem !important; align-items: flex-start; }
@media (min-width: 782px) {
	.cs-checkout > .cs-checkout__order { position: sticky; top: calc(var(--cs-header-h, 5rem) + 1rem); }
}

/* --- Order sheet ---------------------------------------------------------- */
/* The receipt: a navy header band, the items, a highlighted total band, then
   delivery + guarantee. The one lifted surface on the page. */
.cs-order {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 0 1.25rem 1.1rem;
	box-shadow: 0 18px 40px -22px rgb(28 36 75 / .35);
}
.cs-order__title {
	margin: 0 -1.25rem 1rem;
	padding: .85rem 1.25rem;
	border-radius: 11px 11px 0 0;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
}

/* EDD cart block inside the sheet. */
#edd_checkout_form_wrap .cs-order .edd-blocks-form__cart { margin: 0; }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart { border: 0; background: transparent; }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .25rem 1rem;
	align-items: start;
	padding: .85rem 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	background: transparent;
	font-size: .9375rem;
}
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__items .edd-blocks-cart__row:first-child { border-top: 0; }
#edd_checkout_form_wrap .cs-order .edd_cart_item_name { display: block; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 1rem; line-height: 1.35; }
#edd_checkout_form_wrap .cs-order .edd_checkout_cart_item_title { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
#edd_checkout_form_wrap .cs-order .cs-cart-item__kicker { font-size: .8125rem; font-weight: 500; color: var(--wp--preset--color--muted); }
#edd_checkout_form_wrap .cs-order .edd_cart_item_image { display: none; }
#edd_checkout_form_wrap .cs-order .edd_cart_item_price { display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--contrast); }
#edd_checkout_form_wrap .cs-order .edd_cart_actions { display: inline-flex; }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__action-remove { color: var(--wp--preset--color--muted); }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__action-remove:hover { color: var(--wp--preset--color--contrast); }
#edd_checkout_form_wrap .cs-order .edd_cart_discount:empty { display: none; }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__row-footer { grid-template-columns: 1fr; }
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__row-buttons, #edd_checkout_form_wrap .cs-order #edd-save-cart-button { display: none; }

/* Total: its own band across the sheet. */
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__row-footer:has(.edd_cart_total) {
	margin: .5rem -1.25rem 0;
	padding: .9rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-soft);
}
#edd_checkout_form_wrap .cs-order .edd_cart_total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
#edd_checkout_form_wrap .cs-order .edd_cart_total .edd_cart_amount { font-size: 1.625rem; font-variant-numeric: tabular-nums; }

/* Discount: a text link that reveals the field, not a grey button. */
#edd_checkout_form_wrap .cs-order .edd-blocks-cart__discount, #edd_checkout_form_wrap .cs-order .edd-blocks-form__discount { margin: 0; padding: .35rem 0 .25rem; }
#edd_checkout_form_wrap .cs-order .edd_discount_link,
#edd_checkout_form_wrap .cs-order .edd-blocks-form__discount .edd-button-secondary {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .875rem;
	color: var(--wp--preset--color--accent-dark);
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}
#edd_checkout_form_wrap .cs-order .edd-discount-code-field-wrap { display: flex; gap: .5rem; margin-top: .5rem; }
#edd_checkout_form_wrap .cs-order #edd-discount { flex: 1; min-width: 0; }
#edd_checkout_form_wrap .cs-order .edd-apply-discount { padding: .55rem .9rem; font-size: .875rem; }

/* Delivery + guarantee lines (paragraph blocks). */
.cs-order__delivery, .cs-order__guarantee {
	margin: .9rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}
.cs-order__delivery { border-top: 0; padding-top: .35rem; } /* the total band already closes the items */
.cs-order__guarantee strong { color: var(--wp--preset--color--contrast); }

/* --- Add to your order (shortcode) ----------------------------------------- */
/* A full-width band under the two cards: rows in two columns from 782px. */
.cs-addons { margin: 2.5rem 0 0; }
.cs-addons__heading { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; }
.cs-addons__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
@media (min-width: 782px) {
	.cs-addons__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
}
.cs-addon {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: .15rem .85rem;
	align-items: center;
	padding: .8rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.cs-addon__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cs-addon__title { font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--contrast); line-height: 1.3; text-decoration: none; }
.cs-addon__title:hover { text-decoration: underline; text-underline-offset: .15em; }
.cs-addon__blurb { font-size: .8125rem; color: var(--wp--preset--color--muted); line-height: 1.45; }
@media (max-width: 600px) {
	.cs-addon__blurb { display: none; } /* the title links to the product page */
}
.cs-addon__price { font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-addon__add {
	padding: .4rem .8rem;
	border: 1px solid var(--wp--preset--color--accent-dark);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-dark);
	text-decoration: none;
	white-space: nowrap;
}
.cs-addon__add:hover { background: var(--wp--preset--color--accent-dark); color: #fff; }
.cs-addon__state { font-size: .8125rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.cs-addon.is-added .cs-addon__title { color: var(--wp--preset--color--muted); }

/* --- Form column ----------------------------------------------------------- */
/* One card: email → payment note → button. Quiet next to the order sheet. */
.cs-checkout > .cs-checkout__form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.5rem 1.5rem 1.35rem;
}
#edd_checkout_form_wrap .cs-checkout__form .edd-blocks__user-details { margin: 0; }
#edd_checkout_form_wrap .cs-checkout__form #edd_checkout_user_info { margin: 0; padding: 0; border: 0; }
#edd_checkout_form_wrap .cs-checkout__form #edd_checkout_user_info > legend {
	margin: 0 0 .5rem;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
#edd_checkout_form_wrap .cs-checkout__form #edd-email-wrap > .edd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the legend names the field */
#edd_checkout_form_wrap .cs-checkout__form #edd-first-name-wrap, #edd_checkout_form_wrap .cs-checkout__form #edd-last-name-wrap { display: none; } /* optional; delivery needs only the email */
#edd_checkout_form_wrap .cs-checkout__form .edd-input, #edd_checkout_form_wrap .cs-checkout__form .edd-select {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem .9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong, #c9cfd8);
	border-radius: 8px;
}
#edd_checkout_form_wrap .cs-checkout__form .edd-input:focus, #edd_checkout_form_wrap .cs-checkout__form .edd-select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
#edd_checkout_form_wrap .cs-checkout__form .edd-description { margin: .4rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* Survey (EDD Acquisition Survey) — optional, quiet. */
#edd_checkout_form_wrap .cs-checkout__form #edd-acq-fieldset { margin: 1.25rem 0 1.25rem; padding: 0; border: 0; }
#edd_checkout_form_wrap .cs-checkout__form #edd-acq-fieldset .edd-label { display: block; margin: 0 0 .4rem; font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
#edd_checkout_form_wrap .cs-checkout__form #edd-acq-other-wrap { margin-top: .6rem; }

/* Payment line + button. */
.cs-checkout__payment {
	margin: 1.5rem 0 .75rem;
	padding: .85rem 1rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base-soft);
	border-radius: 0 8px 8px 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}
.cs-checkout__payment strong { color: var(--wp--preset--color--contrast); }
#edd_checkout_form_wrap .cs-checkout__form .edd-blocks__payment-details { margin: 1rem 0 0; }
#edd_checkout_form_wrap .cs-checkout__form #edd_purchase_submit { margin: 0; padding: 0; border: 0; }
#edd_checkout_form_wrap .cs-checkout__form #edd-purchase-button,
#edd_checkout_form_wrap .cs-checkout__form #edd_purchase_submit .edd-submit {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: .9rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
}
#edd_checkout_form_wrap .cs-checkout__form #edd-purchase-button:hover,
#edd_checkout_form_wrap .cs-checkout__form #edd_purchase_submit .edd-submit:hover { background: var(--wp--preset--color--contrast); }
#edd_checkout_form_wrap .cs-checkout__form #edd-purchase-button:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
#edd_checkout_form_wrap .cs-checkout__form .edd-errors, #edd_checkout_form_wrap .cs-checkout__form .edd_errors { margin: 0 0 1rem; }
.cs-checkout__after { margin: .75rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); text-align: center; }

/* --- Below the form -------------------------------------------------------- */
.cs-included { margin: 3rem 0 0; }
.cs-included h2, .cs-ck-reviews h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; }
.cs-included ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: .5rem 2rem; }
@media (min-width: 600px) { .cs-included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-included li { position: relative; padding-left: 1.4rem; font-size: .9375rem; line-height: 1.5; color: var(--wp--preset--color--contrast-2); }
.cs-included li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .3rem; border-left: 2px solid var(--wp--preset--color--accent); border-bottom: 2px solid var(--wp--preset--color--accent); transform: rotate(-45deg); }

.cs-ck-reviews { margin: 3rem 0 0; }
.cs-ck-reviews .wp-block-columns { gap: 1.5rem !important; }
.cs-ck-review { padding: 1rem 0 0; border-top: 1px solid var(--wp--preset--color--line); }
.cs-ck-review__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 .6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}
.cs-ck-review__meta { margin: 0 0 .4rem; font-size: .8125rem; color: var(--wp--preset--color--muted); }
.cs-ck-review__meta strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.cs-ck-review__stars { margin: 0 0 .5rem; font-size: .875rem; letter-spacing: .05em; color: #d9a400; }
.cs-ck-review__text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); }

/* =========================================================================
   ACCOUNT PAGES — /my-account/ and /purchase/order-history/
   EDD's login / register / order-history / user-downloads / profile-editor
   blocks inside core groups (inc/account.php drops the cs-if-guest or
   cs-if-user group for the other login state). Same vocabulary as the
   checkout form column: one bordered card per form, 48px fields, the
   accent-dark button. EDD's block styles anchor on .edd-blocks-form, so the
   rules below carry the .cs-account scope in front.
   ========================================================================= */
.cs-account .cs-lp-lede { margin-bottom: 1.75rem; }
.cs-account h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.cs-account .cs-account__hint { margin: 0 0 1rem; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }
.cs-account__forms.wp-block-columns { gap: 2.5rem !important; }
.cs-account .cs-account__form { max-width: 28rem; }
.cs-account .cs-account__files { margin-top: 1.75rem; }
.cs-account .cs-account__files:not(:has(.wp-block-edd-user-downloads, .edd-account-pending)) { display: none; } /* the block renders nothing when there are no files */
.cs-account .wp-block-edd-login + .cs-account__files { margin-top: 1.75rem; }
.cs-account .cs-account__files + h2, .cs-account .wp-block-post-content > * + h2 { margin-top: 2rem; }
.cs-account h2 + .wp-block-edd-login, .cs-account h2 + .wp-block-edd-register, .cs-account h2 + .wp-block-edd-profile-editor, .cs-account .cs-account__hint + .wp-block-edd-register { margin-top: 0; }
.cs-account .wp-block-edd-login + h2, .cs-account .wp-block-edd-user-downloads + h2, .cs-account p + h2 { margin-top: 2rem; }

/* Forms: the card and its fields. */
.cs-account .edd-blocks-form {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem 1.5rem 1.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}
.cs-account .wp-block-edd-profile-editor .edd-blocks-form { padding: 0; border: 0; gap: 1.5rem; }
.cs-account .wp-block-edd-profile-editor .edd-blocks-form fieldset {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem 1.5rem 1.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}
.cs-account .edd-blocks-form legend { margin: 0 0 .25rem; padding: 0; font-size: 1.0625rem; font-weight: 700; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-form .edd-blocks-form__group > label { display: block; margin: 0 0 .4rem !important; font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-form .edd-required-indicator { color: var(--wp--preset--color--muted); font-weight: 400; }
.cs-account .edd-blocks-form input[type="email"], .cs-account .edd-blocks-form input[type="password"], .cs-account .edd-blocks-form input[type="text"], .cs-account .edd-blocks-form select {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem .9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong, #c9cfd8);
	border-radius: 8px;
}
.cs-account .edd-blocks-form input:focus, .cs-account .edd-blocks-form select:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: var(--wp--preset--color--accent); }
.cs-account .edd-blocks-form .edd-blocks-form__group-remember label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 500; }
.cs-account .edd-blocks-form .edd-blocks-form__group-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .25rem; }
.cs-account .edd-blocks-form .edd-submit, .cs-account .edd-blocks-form input[type="submit"] {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: .8rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
	transform: none !important;
}
.cs-account .edd-blocks-form .edd-submit:hover, .cs-account .edd-blocks-form input[type="submit"]:hover { background: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-form .edd-submit:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.cs-account .edd-blocks-form .edd-button-secondary, .cs-account .edd-blocks-form .wp-generate-pw {
	margin: 0;
	padding: .55rem .9rem;
	border: 1px solid var(--wp--preset--color--line-strong, #c9cfd8);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transform: none !important;
}
.cs-account .edd-blocks-form .edd-blocks-form__group-lost-password { margin: 0; font-size: .9375rem; }
.cs-account .edd-blocks-form .indicator-hint, .cs-account .edd-blocks-form .description { margin: .25rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); }
.cs-account .edd-blocks-form #pass-strength-result { border-radius: 6px; font-size: .8125rem; }
.cs-account .edd-blocks-form .wp-pwd { display: grid; }
.cs-account .edd-blocks-form .wp-pwd input { grid-column: 1; grid-row: 1; padding-right: 2.5rem; }
.cs-account .edd-blocks-form .wp-hide-pw { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; margin-right: .35rem; padding: 0 .4rem; border: 0; background: none; box-shadow: none; color: var(--wp--preset--color--muted); cursor: pointer; }
.cs-account .edd-blocks-form .pw-weak { font-size: .875rem; }

/* While the account is pending verification EDD prints the same notice (and
   the same #edd-verification-resend button) in the files block and in the
   profile editor; keep the first, drop the second with its heading. */
.cs-account:has(.cs-account__files .edd-account-pending) :is(.wp-block-edd-profile-editor, h2:has(+ .wp-block-edd-profile-editor)) { display: none; }
.cs-account p.edd-account-pending:has(> button) { margin: 0 0 1rem; padding: 0; border: 0; background: none; }
.cs-account .edd-verification-resend-button {
	margin: 0;
	padding: .55rem .9rem;
	border: 1px solid var(--wp--preset--color--line-strong, #c9cfd8);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transform: none !important;
}

/* Messages EDD prints above a form. */
.cs-account .edd_errors, .cs-account .edd-errors, .cs-account .edd_success, .cs-account .edd-account-pending {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	background: var(--wp--preset--color--base-soft);
	font-size: .9375rem;
}
.cs-account .edd_errors .edd_error, .cs-account .edd-errors .edd_error { margin: 0; color: var(--wp--preset--color--contrast); }
.cs-account .edd_errors, .cs-account .edd-errors { border-left-color: #c62828; }
.cs-account .wp-block-edd-login:has(> :first-child:last-child:not(form)) { font-size: .9375rem; color: var(--wp--preset--color--contrast-2); } /* "You are logged in as … (log out)" */

/* Orders (order history block): one card per order, receipt link as a button. */
.cs-account .edd-blocks__orders-grid { display: grid; gap: 1rem; }
.cs-account .edd-blocks-orders__order {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}
.cs-account .edd-blocks-orders__order-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.cs-account .edd-blocks-orders__order-id { font-weight: 700; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-orders__order-status { padding: .1rem .6rem; border-radius: 999px; background: var(--wp--preset--color--base-soft); font-size: .8125rem; font-weight: 600; color: var(--wp--preset--color--contrast-2); }
.cs-account .edd-blocks-orders__order-status.complete { background: #e6f4ea; color: #1e6b34; }
.cs-account .edd-blocks-orders__order-data { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .9375rem; color: var(--wp--preset--color--contrast-2); }
.cs-account .edd-blocks-orders__order-amount { font-weight: 700; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-orders__order-details { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-account .edd-blocks-orders__order-details a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--wp--preset--color--line-strong, #c9cfd8); border-radius: 8px; font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks-orders__order-details a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.cs-account .edd-blocks__pagination, .cs-account .edd-pagination { margin-top: 1.25rem; }
.cs-account .wp-block-edd-orders + p { margin-top: 1.25rem; }

/* Files (user downloads block). */
.cs-account div.edd-blocks__user-downloads { padding: .25rem 1.25rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; }
.cs-account .edd-blocks__user-downloads .edd-order-item__product { padding: .85rem 0; border-color: var(--wp--preset--color--line); }
.cs-account .edd-blocks__user-downloads .edd-order-items__header { display: none; }
.cs-account .edd-blocks__user-downloads .edd-blocks__row-label { font-weight: 600; color: var(--wp--preset--color--contrast); }
.cs-account .edd-blocks__user-downloads a { font-weight: 600; }

@media (max-width: 781px) {
	.cs-account__forms.wp-block-columns { gap: 2rem !important; }
	.cs-account .edd-blocks-form { padding: 1.1rem 1rem 1rem; }
	.cs-account .wp-block-edd-profile-editor .edd-blocks-form { padding: 0; }
	.cs-account .wp-block-edd-profile-editor .edd-blocks-form fieldset { padding: 1.1rem 1rem 1rem; }
}