/*
 * WebOps Hosting — brand presentation CSS.
 *
 * ONLY the non-token, non-block brand styling theme.json + Foundry blocks can't
 * express. Design tokens live in theme.json (exposed as --wp--preset--*). The
 * WHMCS wo-components.css component styling is deliberately NOT copied here —
 * hero/card/pricing/stats/etc. are re-authored as re-skinned Foundry Marketing
 * blocks that read the theme.json tokens. This file holds only:
 *   1. legacy token aliases (so ported one-off markup that still references the
 *      source var names keeps working)
 *   2. the duotone icon-sprite sizing helper
 *   3. placeholders for the genuinely bespoke pieces flagged in recon
 *      (wo-hero-dashboard mockup, legal-page rhythm) — filled during conversion.
 */

/* 1. Legacy token aliases → theme.json presets (source parity for ported markup) */
:root {
	--primary:        var(--wp--preset--color--primary);
	--primary-dark:   var(--wp--preset--color--primary-hover);
	--primary-light:  var(--wp--preset--color--primary-light);
	--secondary:      var(--wp--preset--color--secondary);
	--secondary-dark: var(--wp--preset--color--secondary-dark);
	--accent:         var(--wp--preset--color--accent);
	--background:     var(--wp--preset--color--base);
	--surface:        var(--wp--preset--color--surface);
	--surface-warm:   var(--wp--preset--color--surface-warm);
	--text:           var(--wp--preset--color--contrast);
	--text-muted:     var(--wp--preset--color--muted);
	--headings:       var(--wp--preset--color--headings);
	--footer:         var(--wp--preset--color--footer);
	--r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 24px;
	--sh-sm: 0 1px 2px rgba(16,24,40,.06);
	--sh-md: 0 4px 12px rgba(16,24,40,.08);
	--sh-lg: 0 12px 28px rgba(16,24,40,.10);
	--sh-xl: 0 24px 48px rgba(16,24,40,.14);
	--container-max: 1200px;
}

/* 2. Duotone icon sprite: 1em square, inherits text color (Solar bold-duotone) */
.wo-icon,
.webops-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Brand gradients (source: wo-components.css :root) — the crimson hero/tiles that
 * theme.json's neutral presets don't carry. Scoped local names. */
:root {
	--wo-grad-primary: linear-gradient(135deg, #9C0820 0%, #c41230 50%, #7A0619 100%);
	--wo-grad-hero:    linear-gradient(135deg, #7A0619 0%, #9C0820 45%, #B51A2F 100%);
	--wo-grad-gold:    linear-gradient(135deg, #F4B142 0%, #EE9B00 55%, #D68A00 100%);
	--wo-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   2z. HEADER: mobile overlay (core wp:navigation overlayMenu:"mobile")
   Core's overlay padding resolves to 0 under Foundry's root padding (the
   parent notes the same on its masthead), and the header nav's
   justifyContent:right carries into the overlay column, so the open menu
   sat hard against the right screen edge. Mirrors core's selector shape
   ((0,5,0) with the :not(.has-background) guard) at (0,6,0) so a Site
   Editor overlay background still wins. Only .is-menu-open is touched:
   desktop is unchanged. Measured on www 2026-09-27 at 390px.
   ============================================================ */
.foundry-header .foundry-header__nav .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem 1.5rem;
}
.foundry-header .foundry-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.foundry-header .foundry-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
}
.foundry-header .foundry-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: .5rem 0;
	font-size: 1.1rem;
}

/* ============================================================
   3a. BESPOKE HERO (core group+columns+html; the wo-hero-dashboard
       health-report mockup is the documented Foundry bespoke exception —
       hero block asides don't take custom HTML). Full-bleed crimson band.
   ============================================================ */
.webops-hero {
	background: var(--wo-grad-hero);
	color: #fff;
	position: relative;
	overflow: hidden;
	/* padding-block only: the old `padding: 4.5rem 0 5.5rem` shorthand zeroed
	   the left/right gutter that .has-global-padding supplies (spacing|md,
	   24px), so on a phone the eyebrow, title and buttons sat flush against
	   the screen edge. Measured on www 2026-09-27 at 390px. */
	padding-block: 4.5rem 5.5rem;
}
.webops-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(600px 400px at 8% 100%, rgba(238,155,0,.2), transparent 60%),
		radial-gradient(800px 500px at 100% 0%, rgba(0,95,115,.28), transparent 60%);
}
.webops-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: 40px 40px; opacity: .5;
}
.webops-hero > .wp-block-group__inner-container,
.webops-hero .webops-hero__cols { position: relative; z-index: 1; }
.webops-hero .webops-hero__cols { align-items: center; gap: 3.5rem; }
@media (max-width: 980px) { .webops-hero .webops-hero__cols { gap: 2.5rem; } }

.webops-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .4rem .9rem; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
	color: #fff; font-size: .75rem; font-weight: 500; margin: 0 0 1.25rem;
	font-family: var(--wo-mono); letter-spacing: .1em; text-transform: uppercase;
}
.webops-hero__eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: #F4B142; box-shadow: 0 0 8px #F4B142;
}
.webops-hero__title {
	color: #fff; font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.05;
	letter-spacing: -.02em; margin: 0 0 1.15rem;
}
.webops-hero__title em { font-style: normal; color: #F4B142; }
.webops-hero__sub {
	font-size: 1.1rem; color: rgba(255,255,255,.88);
	max-width: 560px; margin: 0 0 2rem; line-height: 1.55;
}
.webops-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.webops-hero__actions .wp-block-button__link { border-radius: 8px; padding: .8rem 1.3rem; font-size: .95rem; font-weight: 600; }
.webops-hero__actions .webops-btn--gold .wp-block-button__link {
	background: var(--wo-grad-gold); color: #2A2E36; box-shadow: 0 4px 8px rgba(0,0,0,.1); border: 0;
}
.webops-hero__actions .webops-btn--ghost .wp-block-button__link {
	background: transparent; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.28);
}
.webops-hero__stats {
	display: flex; gap: 2.25rem; flex-wrap: wrap; margin-top: 2.75rem;
	padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.15);
}
.webops-hero__stat-n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.9rem; color: #fff; line-height: 1; }
.webops-hero__stat-n--gold { color: #F4B142; }
.webops-hero__stat-l { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .4rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--wo-mono); }

/* ---- Hero dashboard mockup (verbatim wo-hero-dashboard, source parity) ---- */
.wo-hero__visual { display: flex; justify-content: center; }
.wo-card--hero-dashboard {
	background: #fff; color: #2A2E36; border-radius: 16px; padding: 1.25rem;
	width: 100%; max-width: 440px; border: 1px solid rgba(0,0,0,.04); position: relative;
	box-shadow: 0 30px 60px rgba(0,0,0,.3), 0 2px 0 rgba(0,0,0,.05);
}
.wo-card--hero-dashboard::before {
	content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 3px;
	background: linear-gradient(90deg, transparent, #EE9B00, transparent); border-radius: 2px;
}
.wo-hero-dashboard__chrome { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; border-bottom: 1px solid #f0ebe6; margin-bottom: 1rem; }
.wo-hero-dashboard__dots { display: flex; gap: 5px; }
.wo-hero-dashboard__dot { width: 10px; height: 10px; border-radius: 50%; }
.wo-hero-dashboard__dot--red { background: #ff5f56; }
.wo-hero-dashboard__dot--yellow { background: #ffbd2e; }
.wo-hero-dashboard__dot--green { background: #27c93f; }
.wo-hero-dashboard__label { font-family: var(--wo-mono); font-size: .72rem; color: #6b7280; letter-spacing: .08em; text-transform: uppercase; }
.wo-hero-dashboard__health { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, rgba(156,8,32,.04), rgba(238,155,0,.06)); border-radius: 8px; border: 1px solid rgba(156,8,32,.08); margin-bottom: 1rem; }
.wo-hero-dashboard__grade { width: 54px; height: 54px; border-radius: 50%; background: var(--wo-grad-primary); color: #fff; display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.75rem; flex-shrink: 0; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.wo-hero-dashboard__health-text { font-size: .85rem; color: #6b7280; }
.wo-hero-dashboard__health-text strong { display: block; color: #2A2E36; font-size: .95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; margin-bottom: .15rem; }
.wo-text--success { color: #28a745; font-weight: 600; }
.wo-text--gold { color: #D68A00; font-weight: 600; }
.wo-hero-dashboard__checks { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.wo-hero-dashboard__check { font-family: var(--wo-mono); font-size: .68rem; letter-spacing: .05em; padding: .3rem .55rem; background: rgba(40,167,69,.08); color: #28a745; border: 1px solid rgba(40,167,69,.15); border-radius: 4px; font-weight: 600; }
.wo-hero-dashboard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1rem; }
.wo-hero-dashboard__stat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .75rem .65rem; background: #F9FAFB; border: 1px solid rgba(0,0,0,.05); border-radius: 8px; }
.wo-hero-dashboard__stat-icon { font-size: 1.3rem; }
.wo-hero-dashboard__stat strong { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: #1F2937; }
.wo-hero-dashboard__stat span { font-size: .7rem; color: #6b7280; line-height: 1.2; }
.wo-hero-dashboard__issues { background: #F9FAFB; border: 1px solid rgba(0,0,0,.05); border-radius: 8px; padding: .75rem .85rem; }
.wo-hero-dashboard__issues-label { display: block; font-family: var(--wo-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: .5rem; }
.wo-hero-dashboard__issue { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .82rem; color: #2A2E36; border-top: 1px dashed rgba(0,0,0,.06); }
.wo-hero-dashboard__issue:first-of-type { border-top: 0; }

/* ============================================================
   3b. SECTION RHYTHM — warm alternating bands on marketing blocks.
       Applied via block className; full-bleed because blocks are alignfull.
   ============================================================ */
.webops-band--warm { background: #f4f1ee; }

/* Seam fix: the parent theme sets styles.spacing.blockGap = spacing|md, so WP's
   constrained-layout rule puts a `margin-block-start` between EVERY top-level
   block (alignfull included). Between two consecutive warm bands that top margin
   exposes the white page background → a white seam. Collapse the gap ONLY when a
   warm band directly follows another warm band, so a run of same-tone sections
   reads as one continuous band. Warm↔white transitions keep their margin.
   !important beats WP's generated `:where(...is-layout-constrained) > *` rule
   regardless of stylesheet source order. General: fires for any adjacent pair. */
.webops-band--warm + .webops-band--warm { margin-block-start: 0 !important; }

/* ============================================================
   3c. BLOCK SKINS — re-skin neutral Foundry marketing blocks to the
       WebOps look (crimson proof tiles, quote-mark testimonials, timeline
       steps, crimson final CTA). Tokens where possible; brand values where
       the source design is non-tokenized.
   ============================================================ */
/* Proof stats → crimson gradient tiles */
.webops-stats--proof .foundry-stats__list { gap: 1.25rem; }
.webops-stats--proof .foundry-stats__item {
	background: var(--wo-grad-primary); color: #fff;
	border-radius: 16px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.webops-stats--proof .foundry-stats__value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1; color: #fff; }
.webops-stats--proof .foundry-stats__item:nth-child(2n) .foundry-stats__value { color: #F4B142; }
.webops-stats--proof .foundry-stats__label { font-size: .8rem; color: rgba(255,255,255,.8); margin-top: .75rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--wo-mono); }

/* Testimonials → white cards with gold quote mark */
.webops-testimonials .foundry-testimonials__item {
	background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 16px;
	padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,.08); position: relative;
}
.webops-testimonials .foundry-testimonials__figure { margin: 0; }
.webops-testimonials .foundry-testimonials__quote { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 1.08rem; line-height: 1.5; color: #2A2E36; }
.webops-testimonials .foundry-testimonials__author { font-weight: 600; color: #2A2E36; font-size: .95rem; }
.webops-testimonials .foundry-testimonials__role { color: #6b7280; font-size: .82rem; }

/* ============================================================
 * Process-steps RAIL — single left rail, matching the source .wo-steps.
 * The Foundry `layout=rail` provides the structure (left vertical rail, numbered
 * node dots, per-step meta eyebrow, white cards to the right); this skin recolors
 * it to the WebOps tri-color brand — exactly the source wo-step__dot / wo-step__meta
 * treatment. Scoped to `.webops-steps` so only this section is touched.
 * (The prior per-child TIMELINE zig-zag port was removed: the source design is a
 * single left rail, and the plugin now cards + centres the rail out of the box.)
 * ============================================================ */

/* Gradient rail (source: linear-gradient(--primary, --secondary, --accent)). */
.webops-steps.foundry-process-steps--rail .foundry-process-steps__list::before {
	background: linear-gradient(#9C0820, #EE9B00, #005F73);
	width: 2px;
}

/* Numbered node → white disc + colour-cycling ring & numeral (source wo-step__dot). */
.webops-steps.foundry-process-steps--rail .foundry-process-steps__num {
	background: #fff;
	border: 3px solid #9C0820;
	color: #9C0820;
	font-family: 'Plus Jakarta Sans', sans-serif;
	box-shadow: 0 0 0 6px var(--surface);
}
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step:nth-child(3n+2) .foundry-process-steps__num {
	border-color: #EE9B00;
	color: #C77E00;
}
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step:nth-child(3n) .foundry-process-steps__num {
	border-color: #005F73;
	color: #005F73;
}

/* Meta eyebrow → mono, colour-cycling (source wo-step__meta). */
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step-meta {
	font-family: var(--wo-mono);
	font-size: .7rem;
	letter-spacing: .1em;
	color: #9C0820;
}
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step:nth-child(3n+2) .foundry-process-steps__step-meta {
	color: #C77E00;
}
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step:nth-child(3n) .foundry-process-steps__step-meta {
	color: #005F73;
}

/* White cards (source wo-step__body) — refine the plugin default radius/shadow. */
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step-body {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.webops-steps.foundry-process-steps--rail .foundry-process-steps__step-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Pricing-peek CTA → bordered white card, left text + gold button right */
.webops-cta--pricing.foundry-cta { background: transparent; padding: 4rem 1.25rem; }
.webops-cta--pricing .foundry-cta__inner {
	max-width: 1200px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
	padding: 2rem 2.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); text-align: left;
}
.webops-cta--pricing .foundry-cta__content { flex: 1 1 auto; max-width: 720px; }
.webops-cta--pricing .foundry-cta__actions { flex: 0 0 auto; }
.webops-cta--pricing .foundry-cta__title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.webops-cta--pricing .foundry-cta__btn {
	background: var(--wo-grad-gold); color: #2A2E36; border: 0; box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
@media (max-width: 768px) {
	.webops-cta--pricing .foundry-cta__inner { flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1.25rem; }
	.webops-cta--pricing .foundry-cta__actions,
	.webops-cta--pricing .foundry-cta__btn { width: 100%; text-align: center; }
}

/* Final CTA → contained rounded crimson block (not full-bleed) */
.webops-cta--final.foundry-cta { background: transparent; padding: 4rem 1.25rem; }
.webops-cta--final .foundry-cta__inner {
	display: block; max-width: 1000px; margin: 0 auto; text-align: center;
	background: var(--wo-grad-hero); color: #fff;
	border-radius: 24px; padding: 3.5rem 2.5rem;
	position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(156,8,32,.2);
}
.webops-cta--final .foundry-cta__inner::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(500px 300px at 100% 100%, rgba(238,155,0,.28), transparent 70%),
		radial-gradient(400px 250px at 0% 0%, rgba(0,95,115,.2), transparent 70%);
}
.webops-cta--final .foundry-cta__content,
.webops-cta--final .foundry-cta__actions { position: relative; z-index: 1; }
.webops-cta--final .foundry-cta__title { color: #fff; }
.webops-cta--final .foundry-cta__text { color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto 1.75rem; }
.webops-cta--final .foundry-cta__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.webops-cta--final .foundry-cta__btn--outline { color: #fff; border-color: rgba(255,255,255,.4); }

/* Card-grid featured accent tops (What we do / Field notes) */
.webops-cards .foundry-card-grid__card { border-top: 4px solid #9C0820; }
.webops-cards .foundry-card-grid__card:nth-child(3n+2) { border-top-color: #EE9B00; }
.webops-cards .foundry-card-grid__card:nth-child(3n+3) { border-top-color: #005F73; }

/* ============================================================
   4. LEGAL (Batch 1) — 27 prose pages + terms hub
   Native skins (.webops-legal*) + ported source rules for the
   wp:html-preserved widgets (wo-* class names kept, rules ported
   from the source style.css "Legal Pages Stylesheet" + component
   layers, cascade order preserved: style.css → wo-components.css).
   ============================================================ */

/* 4a. Legacy legal token layer (source: style.css :root — subset used here) */
:root {
	--color-primary-base:     #9C0820;
	--color-primary-dark:     #7A0619;
	--color-primary-alpha-10: rgba(156, 8, 32, 0.1);
	--color-primary-alpha-20: rgba(156, 8, 32, 0.2);
	--color-secondary-base:   #EE9B00;
	--color-text-primary:     #2A2E36;
	--color-text-secondary:   #4b5563;
	--color-text-muted:       #6b7280;
	--color-bg-white:         #FFFFFF;
	--color-bg-light:         #ffffff;
	--color-border-light:     #D5DCE5;
	--color-success:          #28a745;
	--color-error:            #dc3545;
	--color-danger:           #dc3545;
	--color-info:             #17a2b8;
	--color-teal:             #005F73;
	--color-highlight-bg:     #FFF9E6;
	--color-highlight-border: #ffeaa7;
	--color-info-bg:          #d1ecf1;
	--color-info-border:      #bee5eb;
	--color-warning-bg:       #fff3cd;
	--color-warning-border:   #ffeaa7;

	--font-heading: var(--wp--preset--font-family--heading, 'Plus Jakarta Sans', sans-serif);
	--font-primary: var(--wp--preset--font-family--body, 'Inter', sans-serif);
	--font-mono:    var(--wo-mono);

	--text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
	--text-lg: 1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem; --text-3xl: 1.75rem;
	--font-medium: 500;  --font-semibold: 600; --font-bold: 700;
	--leading-none: 1;   --leading-tight: 1.1; --leading-relaxed: 1.6;

	--space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
	--space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
	--space-12: 3rem;   --space-20: 5rem;

	--radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
	--radius-xl: 1rem;    --radius-2xl: 2rem;  --radius-full: 9999px;
	--border-width-base: 2px;

	--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
	--duration-normal: 0.3s;
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* legacy legal-stylesheet cluster (style.css §Legal Pages) */
	--light: #EDF0F5;
	--border: var(--wp--preset--color--border);
	--highlight-bg: #FFF9E6;
	--info: #17a2b8;
	--danger: #dc3545;
}

/* 4b. Legal hero — guide-hero recolored to the source wo-small-header:
   crimson gradient band + faint grid mesh, white title/deck, mono byline. */
.webops-legal-hero.foundry-guide-hero {
	background: var(--wo-grad-primary);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding: 2.75rem 0 2.25rem;
	max-width: none; /* block default is 1200px centered; the legal hero is a full-bleed band */
}
.webops-legal-hero.foundry-guide-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: .5;
	pointer-events: none;
}
.webops-legal-hero .foundry-guide-hero__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 1.25rem;
	position: relative;
	z-index: 1;
}
.webops-legal-hero .foundry-guide-hero__eyebrow {
	font-family: var(--wo-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	margin: 0 0 .65rem;
}
.webops-legal-hero .foundry-guide-hero__title {
	font-family: var(--font-heading);
	color: #fff;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 .5rem;
}
.webops-legal-hero .foundry-guide-hero__deck {
	font-family: var(--font-primary);
	font-style: normal;
	color: rgba(255,255,255,.9);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	max-width: 46rem;
	margin: 0 0 .65rem;
}
.webops-legal-hero .foundry-guide-hero__byline {
	font-family: var(--wo-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
	margin: 0;
}

/* 4c. Legal layout — columns (sticky TOC rail | prose) */
.webops-legal { padding: 2.5rem 0 3rem; }
.webops-legal__cols { gap: 2.5rem; }
.webops-legal__aside { position: relative; }
.webops-legal-toc {
	position: sticky;
	top: 90px;
	background: var(--color-bg-light);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	max-height: calc(100vh - 110px);
	overflow-y: auto;
}
.webops-legal-toc__heading {
	font-family: var(--wo-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 var(--space-3);
}
.webops-legal-toc__list {
	list-style: none;
	padding: 0 !important;
	margin: 0;
}
.webops-legal-toc__list li { margin: 0 0 var(--space-2); padding: 0; }
.webops-legal-toc__list li:last-child { margin-bottom: 0; }
.webops-legal-toc__list a {
	color: var(--primary);
	text-decoration: none;
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	display: block;
	padding: var(--space-1) 0;
	transition: all var(--duration-normal) var(--ease-in-out);
}
.webops-legal-toc__list a:hover { text-decoration: underline; padding-left: var(--space-1); }

/* 4d. Prose skin (native core blocks in the main column) */
.webops-legal__main { min-width: 0; line-height: var(--leading-relaxed); }
.webops-legal__main > h2 {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--color-text-primary);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border-light);
	scroll-margin-top: 90px;
}
.webops-legal__main > h2:first-child { margin-top: 0; }
.webops-legal__main > h3 {
	font-size: var(--text-xl);
	color: var(--color-text-primary);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
	scroll-margin-top: 90px;
}
.webops-legal__main p { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.webops-legal__main p strong { color: var(--color-text-primary); }
.webops-legal__main > ul,
.webops-legal__main > ol { margin-bottom: var(--space-5); padding-left: var(--space-8); color: var(--color-text-secondary); }
.webops-legal__main li { margin-bottom: var(--space-2); }
.webops-legal__main li::marker { color: var(--primary); }
.webops-legal a:not(.wp-element-button) { color: var(--primary); }

/* Tables (core table blocks emitted by the converter) */
.webops-legal-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-white);
	border: 1px solid var(--color-border-light);
	min-width: 600px;
}
.webops-legal-table { overflow-x: auto; margin: var(--space-5) 0; border-radius: var(--radius-md); }
.webops-legal-table th {
	background: var(--surface);
	font-weight: var(--font-semibold);
	color: var(--color-text-primary);
	font-size: var(--text-sm);
	border-bottom: 2px solid var(--color-border-light);
}
.webops-legal-table th,
.webops-legal-table td { padding: var(--space-3) var(--space-4); text-align: left; border: 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--text-sm); }
.webops-legal-table tr:last-child td { border-bottom: none; }
.webops-legal-table tbody tr:hover { background: rgba(156, 8, 32, 0.04); }

/* Highlight + callouts (native groups emitted by the converter) */
.webops-legal-highlight {
	background: var(--highlight-bg);
	border-left: 4px solid var(--secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0;
}
.webops-legal-highlight p { margin: 0; }
.webops-legal-highlight p + p { margin-top: var(--space-2); }
.webops-legal-highlight--gold { background: rgba(238,155,0,.06); border-left-color: var(--secondary); }
.webops-legal-highlight--teal { background: rgba(0,95,115,.06); border-left-color: var(--accent); }
.webops-callout {
	background: var(--color-bg-light);
	border: 1px solid var(--color-border-light);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	margin: var(--space-6) 0;
}
.webops-callout p { margin: 0 0 var(--space-2); }
.webops-callout p:last-child { margin-bottom: 0; }
.webops-callout__title { font-weight: var(--font-semibold); color: var(--color-text-primary); }
.webops-callout--info      { border-left-color: var(--info); background: rgba(23,162,184,.05); }
.webops-callout--warning   { border-left-color: #856404; background: var(--color-warning-bg); }
.webops-callout--danger    { border-left-color: var(--danger); background: rgba(220,53,69,.05); }
.webops-callout--gold      { border-left-color: var(--secondary); background: rgba(238,155,0,.05); }
.webops-callout--highlight { border-left-color: var(--secondary); background: rgba(238,155,0,.05); }
.webops-callout--contact   { border-left-color: var(--primary); background: rgba(156,8,32,.04); }

/* 4e. Terms hub */
.webops-legal--hub { padding: 2.5rem 0 0; }
.webops-legal--hub:last-child,
.webops-legal--hub + .webops-legal--hub { padding-bottom: 0; }
.webops-legal-hub-grid .foundry-card-grid__card { border-top: 4px solid #9C0820; }
.webops-legal-hub-grid .foundry-card-grid__card:nth-child(n) { border-top-color: #9C0820; }
/* Source design: featured = GOLD top accent only — neutralize the plugin's
   crimson ring/raise (border-color + 1px ring shadow + translateY). */
.webops-legal-hub-grid .foundry-card-grid__card--featured:nth-child(n) {
	border-color: var(--color-border-light);
	border-top-color: #EE9B00;
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
	transform: none;
}
.webops-legal-hub-grid .foundry-card-grid__title { text-align: center; }
.wo-legal-contact {
	background: var(--surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	margin: var(--space-6) 0 0;
}
.wo-legal-contact p { margin-bottom: var(--space-2); }
.wo-legal-contact__actions { margin-top: var(--space-5); }

/* 4f. Ported widget rules — style.css layer (wp:html-preserved markup) */
.wo-text { font-family: var(--font-primary); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-primary); }
.wo-text--muted { color: var(--color-text-muted); }
.wo-heading { font-family: var(--font-heading); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--headings); margin-bottom: var(--space-4); }
.wo-heading--3 { font-size: var(--text-3xl); }
.wo-heading--4 { font-size: var(--text-2xl); }
.wo-heading__number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: var(--radius-full);
	background: var(--color-primary-alpha-10); color: var(--primary);
	font-size: var(--text-sm); font-weight: var(--font-bold); margin-right: var(--space-2);
}
.wo-grid { display: grid; gap: var(--space-6); }
.wo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wo-grid--2col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.wo-grid--3col { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wo-card-grid { display: grid; gap: var(--space-4); margin: var(--space-6) 0; }
.wo-card-grid--2,
.wo-card-grid--2col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wo-card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.wo-card--bordered { border: 1px solid var(--color-border-light); }
.wo-card--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.wo-card--compact { padding: var(--space-4); text-align: center; }
.wo-card--compact .wo-card__icon { margin: 0 auto var(--space-3); }
.wo-card--contact { text-align: center; }
.wo-card__title { font-family: var(--font-heading); font-weight: var(--font-semibold); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.wo-card__label { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }

.wo-badge {
	display: inline-flex; align-items: center; gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: var(--leading-none);
	border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .025em;
}
.wo-badge--primary { background-color: var(--primary); color: #fff; }
.wo-legal-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }

.wo-list { list-style: none; padding-left: 0; margin: 1rem 0; }
.wo-list li { padding: var(--space-2) 0 var(--space-2) var(--space-5); position: relative; }
.wo-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--primary); font-weight: var(--font-bold); }
.wo-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wo-check-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: var(--font-medium); padding: 0; }
.wo-check-list li::before { content: none; }
.wo-check-list .wo-icon { color: var(--color-teal); margin-top: .15em; flex-shrink: 0; }

.wo-legal-icon-list { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.wo-legal-icon-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.wo-legal-icon-item > .wo-icon { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.wo-legal-icon-item strong { display: block; color: var(--color-text-primary); margin-bottom: var(--space-1); }
.wo-legal-numbered-list { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.wo-legal-numbered-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.wo-legal-number {
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: var(--radius-full);
	background: var(--primary); color: #fff;
	font-weight: var(--font-bold); font-size: var(--text-sm); flex-shrink: 0;
}

.wo-notice-box { padding: var(--space-4); border-radius: 8px; margin-bottom: var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; border-left: 4px solid; }
.wo-notice-box__icon { font-size: var(--text-xl); flex-shrink: 0; }
.wo-notice-box__content { flex: 1; line-height: 1.6; }
.wo-notice-box--info { background-color: #d1ecf1; border-color: #0c5460; color: #0c5460; }
.wo-notice-box--info .wo-notice-box__icon { color: #0c5460; }
.wo-notice-box--warning { background-color: #fff3cd; border-color: #856404; color: #856404; }
.wo-notice-box--warning .wo-notice-box__icon { color: #856404; }
.wo-notice-box--danger { background-color: #f8d7da; border-color: var(--danger); color: #721c24; }
.wo-notice-box--danger .wo-notice-box__icon { color: var(--danger); }
.wo-highlight-box { background: var(--surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-6) 0; }
.wo-legal-warning { background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); padding: var(--space-4); border-radius: var(--radius-md); margin: var(--space-4) 0; }

.wo-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.wo-contact-card {
	display: flex; align-items: center; gap: var(--space-4);
	padding: var(--space-5); background: var(--color-bg-light);
	border: 1px solid var(--color-border-light); border-radius: var(--radius-xl);
	text-decoration: none; color: var(--color-text-primary);
	transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
}
.wo-contact-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.wo-contact-card .wo-icon { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; }
.wo-contact-card__icon {
	display: flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: var(--radius-xl);
	background: var(--color-primary-alpha-10); color: var(--primary); flex-shrink: 0;
}
.wo-contact-card__icon .wo-icon { font-size: 1.25rem; }
.wo-contact-card__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wo-contact-card__value { display: block; font-weight: var(--font-semibold); font-size: var(--text-sm); }
.wo-contact-card__details { flex: 1; }
.wo-contact-card--wide { grid-column: 1 / -1; }
.wo-contact-card__phone { font-size: var(--text-xl); font-weight: var(--font-semibold); }
.wo-contact-card__hours { font-size: var(--text-sm); color: var(--color-text-secondary); }
.wo-contact-card__emergency { border-color: var(--primary); background: rgba(156, 8, 32, 0.03); }
.wo-contact-grid__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); }
.wo-contact-grid__icon {
	display: flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: var(--radius-xl);
	background: var(--color-primary-alpha-10); color: var(--primary); flex-shrink: 0;
}
.wo-contact-grid__icon .wo-icon { font-size: 1.25rem; }
.wo-contact-grid__detail { flex: 1; }
.wo-contact-grid__label { font-weight: var(--font-semibold); display: block; }
.wo-contact-box { background: var(--surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: var(--space-6); margin: var(--space-6) 0; }
.wo-contact-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wo-contact-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); padding: 0; }
.wo-contact-list li::before { content: none; }
.wo-contact-list li .wo-icon { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; }
.wo-legal-contact-list { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-6) 0; }
.wo-legal-contact-list__icon-box {
	display: flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: var(--radius-xl);
	background: var(--color-primary-alpha-10); color: var(--primary); flex-shrink: 0;
}
.wo-legal-contact-list__icon { font-size: 1.25rem; }
.wo-legal-contact-list__label { font-weight: var(--font-medium); }
.wo-definition-list__icon {
	display: flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg);
	background: var(--color-primary-alpha-10); color: var(--primary); flex-shrink: 0;
}
.wo-definition-list__icon .wo-icon { font-size: 1.25rem; }

.wo-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.wo-link-card {
	display: flex; align-items: center; gap: var(--space-4);
	padding: var(--space-5); background: var(--color-bg-white);
	border: 1px solid var(--color-border-light); border-radius: var(--radius-xl);
	text-decoration: none; color: var(--color-text-primary); font-weight: var(--font-medium);
	transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
}
.wo-link-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); color: var(--primary); }
.wo-link-card .wo-icon { font-size: 1.25rem; color: var(--primary); flex-shrink: 0; }
.wo-link-card__arrow { margin-left: auto; opacity: .4; transition: opacity var(--duration-normal) var(--ease-in-out); }
.wo-link-card:hover .wo-link-card__arrow { opacity: 1; }

.wo-legal-sidebar { position: sticky; top: 90px; }
.wo-legal-sidebar__card { background: var(--color-bg-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: var(--space-5); }
.wo-legal-sidebar__heading { font-family: var(--font-heading); font-weight: var(--font-semibold); font-size: var(--text-lg); margin-bottom: var(--space-4); color: var(--primary); display: flex; align-items: center; }
.wo-legal-sidebar__icon { margin-right: var(--space-2); display: inline-flex; }
.wo-legal-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wo-legal-sidebar__list li { padding: 0; }
.wo-legal-sidebar__list li::before { content: none; }
.wo-legal-sidebar__list a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); transition: color .2s; display: inline-flex; align-items: center; gap: var(--space-1); }
.wo-legal-sidebar__list a:hover { color: var(--primary); }
.wo-legal-sidebar__divider { border: none; border-top: 1px solid var(--color-border-light); margin: var(--space-4) 0; }
.wo-legal-sidebar__contact { font-size: var(--text-sm); color: var(--color-text-secondary); list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wo-legal-sidebar__contact li { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0; }
.wo-legal-sidebar__contact li::before { content: none; }
.wo-legal-sidebar__contact .wo-icon { color: var(--primary); margin-top: .15em; }

.wo-comparison-table-wrapper { overflow-x: auto; margin-top: var(--space-10); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: relative; }
.wo-comparison-table { width: 100%; border-collapse: collapse; background-color: var(--color-bg-white); border-radius: var(--radius-lg); overflow: hidden; }
.wo-comparison-table thead { background-color: var(--primary); color: #fff; }
.wo-comparison-table th { padding: 20px 15px; text-align: center; font-weight: var(--font-bold); font-size: var(--text-xl); vertical-align: middle; }
.wo-comparison-table__feature-column { text-align: left !important; min-width: 250px; font-weight: var(--font-semibold); }
.wo-comparison-table td { padding: 15px; text-align: center; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.wo-comparison-table tbody tr:hover { background-color: var(--surface); }

.cookie-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 30px 0; }
.cookie-card { background: var(--surface); padding: 25px; border-radius: 8px; border: 2px solid var(--border); transition: all .3s ease; }
.cookie-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.1); border-color: var(--primary); }
.cookie-icon { font-size: 1.5rem; color: var(--primary); margin-bottom: 15px; display: block; }
.cookie-title { font-weight: 600; color: var(--primary); margin-bottom: var(--space-1); }
.cookie-description { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.contact-box { background: var(--surface); padding: 25px; border-radius: var(--radius-lg); margin: 30px 0; text-align: left; border: 1px solid var(--border); }
.contact-box h3 { margin-bottom: 15px; color: var(--primary); }

/* 4g. Ported widget rules — wo-components.css layer (cascades after style.css,
   exactly as the source load order) */
.wo-card {
	background: #fff; border-radius: var(--r-xl);
	padding: 2rem 1.75rem;
	box-shadow: var(--sh-sm); border: 1px solid rgba(0,0,0,.05);
	position: relative;
	transition: transform .2s, box-shadow .2s;
}
.wo-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.wo-card__icon {
	width: 54px; height: 54px; border-radius: var(--r-md);
	background: rgba(156,8,32,.08); color: var(--primary);
	display: grid; place-items: center;
	margin-bottom: 1.1rem; font-size: 1.8rem;
}
.wo-card__icon .wo-icon { width: 1.8rem; height: 1.8rem; }

/* 4h. Legal responsive */
@media (max-width: 781px) {
	.webops-legal-toc { position: static; max-height: none; }
	.wo-legal-sidebar { position: static; }
	.wo-grid--2 { grid-template-columns: 1fr; }
	.wo-contact-grid { grid-template-columns: 1fr; }
	.webops-legal__main > h2 { font-size: var(--text-xl); }
	.webops-legal-hero.foundry-guide-hero { padding: 2rem 0 1.75rem; }
}

/* ============================================================
   5. MARKETING (Batch 2a) — 28 static marketing pages
   5a: tokens missing from the legal layer (wo-components :root)
   5b: page-banner variant of the legal guide-hero skin
   5c: ported wo-components rules for the wp:html fallbacks
       (intro-split, included, compare, plans-row, pillar-box,
        section/head/eyebrow/btn/card — source cascade order:
        these load AFTER the §4 style.css-layer rules, as in the
        source theme)
   5d: .webops-msec section-group spacing
   5e: first-use block skins (pricing, faq, timeline)
   ============================================================ */

/* ── 5a. tokens ── */
:root {
	--grad-primary: linear-gradient(135deg, #9C0820 0%, #c41230 50%, #7A0619 100%);
	--grad-gold: linear-gradient(135deg, #F4B142 0%, #EE9B00 55%, #D68A00 100%);
	--glow-p: 0 0 30px rgba(156,8,32,.3);
	--glow-g: 0 0 30px rgba(238,155,0,.25);
	--secondary-light: #F4B142;
	--text-light: #9ca3af;
}

/* ── 5b. page banner (guide-hero, no deck/byline) ── */
.webops-page-banner.foundry-guide-hero { padding: 3.25rem 0 2.75rem; }
.webops-page-banner .foundry-guide-hero__title { margin-bottom: 0; }

/* ── 5c. ported wo-components rules (fallback widgets) ── */
.wo-section { padding: 5rem 0; }
.wo-section--warm { background: var(--surface-warm); }
.wo-section--surface { background: var(--surface); }
.wo-section--dark { background: var(--footer); color: rgba(255,255,255,.85); }
.wo-section--tight { padding: 3rem 0; }
.wo-grid { display: grid; gap: 1.5rem; }
.wo-grid--2 { grid-template-columns: 1fr 1fr; }
.wo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wo-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .wo-grid--3, .wo-grid--4 { grid-template-columns: 1fr; }
  .wo-grid--2 { grid-template-columns: 1fr; }
}
.wo-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--primary); }
.wo-eyebrow--gold { color: var(--secondary-dark); }
.wo-eyebrow--teal { color: var(--accent); }
.wo-eyebrow--on-dark { color: var(--secondary-light); }
.wo-heading--section {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin: .75rem 0 .85rem; }
.wo-section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.wo-section-head p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.55; }
.wo-text--muted { color: var(--text-muted); }
.wo-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.3rem;
  font-weight: 600; font-size: .95rem;
  border-radius: var(--r-md);
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap; font-family: inherit;
  /* the source theme resets `a` globally; the block theme underlines content
     links, so the port needs it explicit */
  text-decoration: none; }
.wo-btn:hover { transform: translateY(-1px); }
.wo-btn--primary { background: var(--grad-primary); color: #fff; box-shadow: var(--sh-md); }
.wo-btn--primary:hover { box-shadow: var(--glow-p); }
.wo-btn--gold { background: var(--grad-gold); color: var(--text); box-shadow: var(--sh-md); }
.wo-btn--gold:hover { box-shadow: var(--glow-g); }
.wo-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); }
.wo-btn--ghost:hover { background: rgba(255,255,255,.08); }
.wo-btn--outline { background: transparent; color: var(--primary); border: 1px solid rgba(156,8,32,.25); }
.wo-btn--outline:hover { background: rgba(156,8,32,.05); border-color: var(--primary); }
.wo-btn--block { width: 100%; justify-content: center; }
.wo-btn .wo-icon { font-size: 1.05em; }
.wo-card {
  background: #fff; border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--sh-sm); border: 1px solid rgba(0,0,0,.05);
  position: relative;
  transition: transform .2s, box-shadow .2s; }
.wo-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.wo-card--accent-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--primary);
  border-radius: var(--r-xl) var(--r-xl) 0 0; }
.wo-card--accent-top.wo-card--gold::before { background: var(--secondary); }
.wo-card--accent-top.wo-card--teal::before { background: var(--accent); }
.wo-card__icon {
  width: 54px; height: 54px; border-radius: var(--r-md);
  background: rgba(156,8,32,.08); color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 1.1rem; font-size: 1.8rem; }
.wo-card--gold .wo-card__icon { background: rgba(238,155,0,.15); color: var(--secondary-dark); }
.wo-card--teal .wo-card__icon { background: rgba(0,95,115,.1); color: var(--accent); }
.wo-card__title { font-size: 1.2rem; margin-bottom: .6rem; }
.wo-card__body { color: var(--text-muted); font-size: .94rem; line-height: 1.55; }
.wo-card__list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.wo-card__list li { font-size: .88rem; color: var(--text); display: flex; align-items: flex-start; gap: .55rem; line-height: 1.4; }
.wo-card__list li .wo-icon { color: var(--primary); font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.wo-card--gold .wo-card__list li .wo-icon { color: var(--secondary-dark); }
.wo-card--teal .wo-card__list li .wo-icon { color: var(--accent); }
.wo-partner-logo {
  display: flex; align-items: center;
  height: 64px; max-width: 180px;
  margin-bottom: 1.1rem; }
.wo-partner-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; }
.wo-partner-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.1rem;
  box-shadow: var(--sh-sm); }
.wo-partner-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block; }
.wo-compare { background: #fff; border-radius: var(--r-xl); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--sh-sm); }
.wo-compare table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wo-compare th, .wo-compare td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid #f0ebe6; }
.wo-compare thead th { background: var(--surface-warm); font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; text-align: center; }
.wo-compare thead th:first-child { background: #fff; text-align: left; }
.wo-compare tbody th { font-weight: 500; color: var(--text); font-family: 'Inter', sans-serif; font-size: .92rem; }
.wo-compare td { text-align: center; color: var(--text); }
.wo-compare td:first-child, .wo-compare th:first-child { text-align: left; }
.wo-compare tr:last-child td, .wo-compare tr:last-child th { border-bottom: 0; }
.wo-compare .wo-compare__check { color: var(--color-success); font-size: 1.1rem; }
.wo-compare .wo-compare__dash { color: var(--text-light); }
.wo-compare tbody tr:hover { background: #faf7f4; }
@media (max-width: 760px) {
  .wo-compare { font-size: .8rem; }
  .wo-compare table { min-width: 600px; }
  .wo-compare th, .wo-compare td { padding: .75rem .6rem; }
}
.wo-included { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) {
  .wo-included { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wo-included { grid-template-columns: 1fr; }
}
.wo-included__item { background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: var(--r-md); padding: 1.15rem 1.25rem; display: flex; gap: .75rem; align-items: flex-start; }
.wo-included__icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(156,8,32,.08); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; }
.wo-included__item:nth-child(4n+2) .wo-included__icon { background: rgba(238,155,0,.14); color: var(--secondary-dark); }
.wo-included__item:nth-child(4n+3) .wo-included__icon { background: rgba(0,95,115,.1); color: var(--accent); }
.wo-included__title { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-size: .92rem; color: var(--headings); margin-bottom: .15rem; }
.wo-included__desc { color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.wo-intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto; }
@media (max-width: 960px) {
  .wo-intro-split { grid-template-columns: 1fr; gap: 2.5rem; }
}
.wo-intro-split__content .wo-eyebrow { display: inline-block; margin-bottom: .9rem; }
.wo-intro-split__content h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--headings);
  margin: 0 0 1rem; }
.wo-intro-split__lead {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 54ch; }
.wo-intro-split__list {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: flex; flex-direction: column; gap: .7rem; }
.wo-intro-split__list li {
  display: flex; align-items: center; gap: .85rem;
  font-size: 1rem; color: var(--text); line-height: 1.45; }
.wo-intro-split__list .wo-icon {
  width: 2.25rem; height: 2.25rem;
  background: rgba(156,8,32,.08);
  color: var(--primary);
  border-radius: 10px;
  font-size: 1.35rem;
  display: grid; place-items: center;
  flex-shrink: 0; }
.wo-intro-split__list li:nth-child(2) .wo-icon { background: rgba(238,155,0,.12); color: var(--secondary-dark); }
.wo-intro-split__list li:nth-child(3) .wo-icon { background: rgba(0,95,115,.10);  color: var(--accent); }
.wo-intro-split__list li:nth-child(4) .wo-icon { background: rgba(156,8,32,.08); color: var(--primary); }
.wo-intro-split__list li:nth-child(5) .wo-icon { background: rgba(238,155,0,.12); color: var(--secondary-dark); }
.wo-intro-split__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, rgba(156,8,32,.04), rgba(0,95,115,.04));
  border: 1px solid rgba(156,8,32,.08);
  box-shadow: 0 25px 50px -12px rgba(156,8,32,.08);
  overflow: hidden;
  display: grid; place-items: center; }
.wo-intro-split__visual::before {
  content: ""; position: absolute;
  top: 0; right: 0; width: 60%; height: 60%;
  background: radial-gradient(circle at center, rgba(238,155,0,.14), transparent 60%);
  transform: translate(20%, -20%);
  pointer-events: none; }
.wo-intro-split__visual::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; width: 60%; height: 60%;
  background: radial-gradient(circle at center, rgba(0,95,115,.12), transparent 60%);
  transform: translate(-20%, 20%);
  pointer-events: none; }
.wo-intro-split__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(156,8,32,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .6;
  pointer-events: none;
  z-index: 0; }
.wo-intro-split__visual-icon {
  position: relative; z-index: 2;
  width: 10.5rem; height: 10.5rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,1) 0%, rgba(255,243,245,.92) 55%, rgba(255,220,225,.75) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 20px 40px -12px rgba(156,8,32,.22),
    0 0 0 1px rgba(156,8,32,.1) inset,
    0 0 50px rgba(156,8,32,.08);
  display: grid; place-items: center;
  animation: wo-intro-float 6s ease-in-out infinite; }
.wo-intro-split__visual-icon::after {
  content: ""; position: absolute;
  inset: -12px;
  border-radius: calc(var(--r-xl) + 12px);
  background: radial-gradient(circle at center, rgba(156,8,32,.12), transparent 70%);
  z-index: -1;
  pointer-events: none; }
.wo-intro-split__visual-icon .wo-icon {
  font-size: 4.75rem;
  color: var(--primary);
  filter: drop-shadow(0 4px 8px rgba(156,8,32,.18)); }
.wo-intro-split__float {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,.9);
  display: grid; place-items: center; }
.wo-intro-split__float .wo-icon { font-size: 1.5rem; }
.wo-intro-split__float--1 { top: 12%;    right: 10%; width: 4rem;    height: 4rem;    animation: wo-intro-float 6s ease-in-out infinite 1s; }
.wo-intro-split__float--2 { bottom: 14%; left: 8%;   width: 5.25rem; height: 5.25rem; animation: wo-intro-float 7s ease-in-out infinite 2s; }
.wo-intro-split__float--2 .wo-icon { font-size: 2rem; }
.wo-intro-split__float--3 { top: 58%;    right: 22%; width: 3.75rem; height: 3.75rem; animation: wo-intro-float 5s ease-in-out infinite .5s; }
.wo-intro-split__float--3 .wo-icon { font-size: 1.4rem; }
.wo-intro-split__float--gold    .wo-icon { color: var(--secondary); }
.wo-intro-split__float--teal    .wo-icon { color: var(--accent); }
.wo-intro-split__float--primary .wo-icon { color: var(--primary); }
.wo-mt-sm { margin-top: 1rem; }
.wo-mt-md { margin-top: 2rem; }
.wo-mt-lg { margin-top: 3rem; }
.wo-text-center { text-align: center; }
@media (max-width: 640px) {
  .wo-section { padding: 3.5rem 0; }
}

@keyframes wo-intro-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.wo-intro-split__visual-icon,
	.wo-intro-split__float { animation: none; }
}
/* Visual is a desktop composition device — hide when stacked (source rule) */
@media (max-width: 960px) {
	.wo-intro-split__visual { display: none; }
}

/* plans-row (custom.css port — compliant-hosting / compliant-dedicated) */
.wo-plans-row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}
.wo-plans-row--reverse .wo-plans-row__lead { order: 2; }
.wo-plans-row--reverse .wo-plans-row__tiers { order: 1; }
.wo-plans-row__lead .wo-heading--section { margin: .4rem 0 .75rem; }
.wo-plans-row__sub { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin: 0 0 1.25rem; }
.wo-plans-row__price {
	margin: 0 0 1.25rem; padding: .85rem 1rem;
	background: #fff; border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px; display: inline-block;
}
.wo-plans-row__amount { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; }
.wo-plans-row__amount small { font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.wo-plans-row__hint { font-size: .82rem; color: var(--text-muted); margin-top: .35rem; }
.wo-plans-row__features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; }
.wo-plans-row__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--text); }
.wo-plans-row__features .wo-icon { color: var(--color-secondary-base, #0a9396); font-size: 1.2rem; flex: 0 0 auto; margin-top: .05rem; }
.wo-plans-row__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.wo-plans-row__tiers { display: grid; gap: .85rem; }
.wo-plans-row__tier {
	position: relative; background: #fff;
	border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
	padding: 1rem 1.25rem;
	display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem;
	align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.wo-plans-row__tier--featured { border-color: var(--secondary); box-shadow: 0 3px 12px rgba(238,155,0,.12); }
.wo-plans-row__tier-badge {
	position: absolute; top: -10px; left: 1rem;
	background: var(--secondary); color: #1a1a1a;
	font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: .15rem .6rem; border-radius: 999px;
}
.wo-plans-row__tier-name { font-weight: 700; font-size: 1.05rem; color: var(--text); grid-column: 1; }
.wo-plans-row__tier-price { font-weight: 700; font-size: 1.15rem; color: var(--text); grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.wo-plans-row__tier-price small { font-size: .82rem; font-weight: 500; color: var(--text-muted); }
.wo-plans-row__tier-meta { font-size: .82rem; color: var(--text-muted); grid-column: 1; }
@media (max-width: 900px) {
	.wo-plans-row { grid-template-columns: 1fr; gap: 2rem; }
	.wo-plans-row--reverse .wo-plans-row__lead { order: 1; }
	.wo-plans-row--reverse .wo-plans-row__tiers { order: 2; }
}

/* pillar-box (style.css port — about three-pillars cards) */
.wo-pillar-box { padding: var(--space-4); border-radius: var(--radius-xl); margin-top: var(--space-4); }
.wo-pillar-box__label { font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.wo-pillar-box p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0; }
.wo-pillar-box--problem { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(220, 38, 38, 0.15); }
.wo-pillar-box--problem .wo-pillar-box__label { color: #dc2626; }
.wo-pillar-box--solution { background: rgba(156, 8, 32, 0.05); border: 1px solid rgba(156, 8, 32, 0.2); }
.wo-pillar-box--solution .wo-pillar-box__label { color: var(--color-primary-base); }

/* ── 5d. .webops-msec section groups ──
   Groups exist where a source section emits >1 block or a wp:html
   fallback. Foundry blocks bring their own padding; only pad the
   raw-html / extras children. */
/* raw-HTML (core/html) renders with NO wrapper on the front end — groups
   holding fallback content carry the section padding themselves */
.webops-msec--pad:not(.wo-section) { padding-block: clamp(3.5rem, 7vw, 5rem); }
.webops-msec > .wp-block-buttons,
.webops-msec > p.webops-msec-note {
	margin-block-start: 0;
	padding-block-end: clamp(3rem, 6vw, 4.5rem);
}
/* pull extras up only into a preceding sibling's own bottom padding */
.webops-msec > section[class*="foundry-"] + .wp-block-buttons,
.webops-msec > section[class*="foundry-"] + p.webops-msec-note {
	margin-block-start: calc(-1 * clamp(1.25rem, 3vw, 2.25rem));
}

.webops-msec-note { color: var(--text-muted); font-size: .92rem; }
/* generic gold button (trailing section CTAs) */
.webops-btn--gold .wp-block-button__link {
	background: var(--grad-gold); color: var(--text);
	box-shadow: var(--sh-md); border-radius: var(--r-md);
	font-weight: 600; font-size: .95rem; padding: .8rem 1.3rem;
}
.webops-btn--gold .wp-block-button__link:hover { box-shadow: var(--glow-g); }
.webops-btn--plain .wp-block-button__link { border-radius: var(--r-md); font-weight: 600; font-size: .95rem; padding: .8rem 1.3rem; }

/* ── 5e. first-use block skins ── */

/* pricing → wo-tiers look */
.webops-pricing .foundry-pricing__eyebrow {
	font-family: var(--wo-mono); font-size: .72rem; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase; color: var(--secondary-dark);
}
.webops-pricing .foundry-pricing__title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--headings); }
.webops-pricing .foundry-pricing__desc { color: var(--text-muted); font-size: 1.02rem; line-height: 1.55; }
.webops-pricing .foundry-pricing__tier {
	background: #fff; border: 1px solid rgba(0,0,0,.05);
	border-radius: var(--r-xl); box-shadow: var(--sh-sm);
}
.webops-pricing .foundry-pricing__tier.is-featured {
	border: 2px solid var(--secondary); box-shadow: var(--sh-lg);
	transform: translateY(-8px);
}
.webops-pricing .foundry-pricing__badge { background: var(--grad-gold); color: var(--text); }
.webops-pricing .foundry-pricing__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--headings); }
.webops-pricing .foundry-pricing__amount { font-family: var(--font-heading); font-weight: 800; font-size: 2.5rem; color: var(--headings); line-height: 1; }
.webops-pricing .foundry-pricing__period { font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.webops-pricing .foundry-pricing__tagline { color: var(--text-muted); font-size: .9rem; line-height: 1.4; }
.webops-pricing .foundry-pricing__feature-mark { color: var(--primary); }
.webops-pricing .foundry-pricing__tier.is-featured .foundry-pricing__feature-mark { color: var(--secondary-dark); }
.webops-pricing .foundry-pricing__cta { border-radius: var(--r-md); font-weight: 600; }
.webops-pricing .foundry-pricing__cta--primary { background: var(--grad-gold); color: var(--text); box-shadow: var(--sh-md); }
.webops-pricing .foundry-pricing__cta--primary:hover { box-shadow: var(--glow-g); }
.webops-pricing .foundry-pricing__footnote { color: var(--text-muted); font-size: .92rem; }

/* faq → wo-faq look */
.webops-faq .foundry-faq-section__eyebrow {
	font-family: var(--wo-mono); font-size: .72rem; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.webops-faq .foundry-faq-section__title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--headings); }
.webops-faq .foundry-faq-section__intro { color: var(--text-muted); font-size: 1.02rem; }
.webops-faq .foundry-faq-section__item {
	background: #fff; border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.webops-faq .foundry-faq-section__question { font-weight: 600; color: var(--headings); }

/* timeline (about journey) → brand nodes/metas */
.webops-timeline .foundry-process-steps__step-meta {
	font-family: var(--wo-mono); font-size: .72rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
}
.webops-timeline .foundry-process-steps__step-title { font-family: var(--font-heading); color: var(--headings); }

/* ── 5f. QA parity fixes (2026-07-06 batch 2a visual QA) ── */

/* pricing tiers ran full-bleed — constrain like the block head */
.webops-pricing.foundry-pricing { padding-inline: clamp(1.25rem, 4vw, 3rem); }
.webops-pricing .foundry-pricing__tiers,
.webops-pricing .foundry-pricing__footnote { max-width: 1200px; margin-inline: auto; }
.webops-pricing .foundry-pricing__footnote { text-align: center; margin-top: 1.5rem; }

/* whole-card anchors (features grid) inherit theme link styling */
a.wo-card { text-decoration: none; color: inherit; display: block; }
.wo-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.wo-link:hover { text-decoration: underline; }

/* pull-quote preserved inside prose fallbacks (about) */
.wo-quote {
	background: #fff; border-radius: var(--r-xl);
	padding: 2rem; box-shadow: var(--sh-sm); border: 1px solid rgba(0,0,0,.05);
	position: relative; margin: 1.5rem 0;
}
.wo-quote::before {
	content: "\201C"; position: absolute; top: .5rem; left: 1.25rem;
	font-family: var(--font-heading); font-size: 4rem; color: var(--secondary);
	line-height: 1; font-weight: 700;
}
.wo-quote__text {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 1.08rem; line-height: 1.5; color: var(--text);
	margin: 1.25rem 0 1.25rem; position: relative; z-index: 1;
}
.wo-quote__author { display: flex; align-items: center; gap: .85rem; }
.wo-quote__avatar {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--grad-primary); color: #fff;
	display: grid; place-items: center;
	font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
	flex-shrink: 0;
}
.wo-quote__avatar--img { object-fit: cover; }
.wo-quote__avatar--gold { background: var(--grad-gold); color: var(--text); }
.wo-quote__name { font-weight: 600; color: var(--text); font-size: .95rem; }
.wo-quote__meta { color: var(--text-muted); font-size: .82rem; }

/* ============================================================
   6. MARKETING (Batches 2b + 3) — 5 bespoke/interactive pages
   wordpress-plugins (portfolio browser + value calculator),
   white-label-support (billing-toggle plans grid),
   image-assurance (hero + add-on pricing card),
   email-setup-guide (own hero + config steps),
   third-party-email-migration (own hero + benefits carousel).
   Ported from the source sheets in cascade order (style.css →
   custom.css → wo-components.css), filtered to classes present
   in the built fragments. Interactive JS rides as per-page
   assets/js/pages/<slug>.js (see functions.php).
   Bespoke fallback groups carry the source section classes —
   .wo-section provides the padding there, so the msec html
   padding is zeroed. */
/* (wo-section groups pad via the ported .wo-section rule) */

/* tokens referenced by the ported §6 rules (source :root; the last two are
   undefined at source too — pinned to their design-system equivalents) */
:root {
	--color-bg-dark: #101010;
	--color-bg-lighter: #f4f1ee;
	--color-secondary-dark: #D68A00;
	--color-secondary-light: #F4B142;
	--grad-hero: linear-gradient(135deg, #7A0619 0%, #9C0820 45%, #B51A2F 100%);
	--gradient-cta: linear-gradient(135deg, var(--color-primary-base) 0%, #c41230 50%, var(--color-primary-dark) 100%);
	--gradient-hero: linear-gradient(135deg, #c41230 0%, #9c0820 100%);
	--leading-snug: 1.2;
	--radius-3xl: 2.5rem;
	--shadow-glow-primary: 0 0 30px rgba(156, 8, 32, 0.3);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--space-16: 4rem;
	--space-24: 6rem;
	--text-5xl: 2.5rem;
	--color-border: #E5E7EB;
	--color-text-body: #2A2E36;
}



@keyframes wo-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}



@keyframes wo-pulse-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}



@keyframes wo-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



@keyframes wo-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.wo-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-10);
    margin-top: var(--space-12); }
.wo-pillar-card {
    background: var(--color-bg-white);
    padding: var(--space-10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-in-out);
    border-top: 4px solid var(--color-primary-base); }
.wo-pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl); }
.wo-pillar-icon {
    font-size: 3rem;
    margin-bottom: var(--space-5);
    display: block;
    color: var(--color-primary-base); }
.wo-pillar-card h3 {
    color: var(--color-primary-base);
    margin-bottom: var(--space-4);
    font-size: var(--text-2xl); }
.wo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-secondary-base);
    color: var(--color-bg-dark);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-6); }
.wo-hero-badge--light {
    background: var(--color-primary-alpha-10);
    color: var(--color-primary-base);
    border: 1px solid var(--color-primary-alpha-20); }
.wo-trust-item,
.wo-trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary); }
.wo-trust-item .wo-icon,
.wo-trust-bar__item .wo-icon {
    color: var(--color-success);
    font-size: 1.25rem; }
.wo-section--hero .wo-trust-item,
.wo-section--hero .wo-trust-bar__item,
.wo-section--dark .wo-trust-item,
.wo-section--dark .wo-trust-bar__item,
.wo-section--hero-mesh .wo-trust-item,
.wo-section--hero-mesh .wo-trust-bar__item,
.wo-section--cta .wo-trust-item,
.wo-section--cta .wo-trust-bar__item {
    color: var(--color-bg-white); }
.wo-section--hero .wo-trust-item .wo-icon,
.wo-section--hero .wo-trust-bar__item .wo-icon,
.wo-section--dark .wo-trust-item .wo-icon,
.wo-section--dark .wo-trust-bar__item .wo-icon,
.wo-section--hero-mesh .wo-trust-item .wo-icon,
.wo-section--hero-mesh .wo-trust-bar__item .wo-icon,
.wo-section--cta .wo-trust-item .wo-icon,
.wo-section--cta .wo-trust-bar__item .wo-icon {
    color: var(--color-secondary-base); }








@keyframes wo-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@keyframes wo-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@media (max-width: 768px) {
  .wo-pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6); }
  .wo-pillar-card {
        padding: var(--space-6); }
}
.wo-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4); }
.wo-heading--1 {
    font-size: var(--text-5xl); }
.wo-heading--2 {
    font-size: var(--text-5xl); }
.wo-heading--3 {
    font-size: var(--text-3xl); }
.wo-heading--4 {
    font-size: var(--text-2xl); }
.wo-heading--5 {
    font-size: var(--text-xl); }
.wo-text {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary); }
.wo-text--lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary); }
.wo-text--muted {
    color: var(--color-text-muted); }
.wo-section--light {
    background-color: var(--color-bg-light); }
.wo-section--hero {
    background: var(--gradient-hero);
    color: var(--color-bg-white);
    position: relative;
    overflow: hidden;
    padding: var(--space-24) 0; }
.wo-section--hero .wo-heading,
.wo-section--hero h1 {
    color: var(--color-bg-white); }
.wo-section--hero .wo-text,
.wo-section--hero p {
    color: rgba(255, 255, 255, 0.9); }
.wo-section--hero .wo-hero,
.wo-section--hero-mesh .wo-hero {
    position: relative;
    text-align: center;
    z-index: 2; }
.wo-section--hero.has-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none; }
.wo-section--hero .wo-link,
.wo-section--hero-mesh .wo-link {
    color: var(--color-secondary-base);
    text-decoration: underline; }
.wo-section--hero .wo-link:hover,
.wo-section--hero .wo-link:focus,
.wo-section--hero-mesh .wo-link:hover,
.wo-section--hero-mesh .wo-link:focus {
    color: var(--color-secondary-light);
    text-decoration: underline; }
.wo-section--dark .wo-btn--primary,
.wo-section--hero .wo-btn--primary,
.wo-section--hero-mesh .wo-btn--primary,
.wo-section--cta .wo-btn--primary,
.wo-section--cta .wo-btn--cta,
.wo-section--glow .wo-btn--primary,
.final-cta .wo-btn--primary,
.migration-section .wo-btn--primary,
.why-conclusion .wo-btn--primary,
.total-value-callout .wo-btn--primary,
.cta-section .wo-btn--primary {
    background-color: var(--color-secondary-base);
    color: var(--color-bg-dark);
    border-color: var(--color-secondary-base); }
.wo-section--dark .wo-btn--primary:hover,
.wo-section--hero .wo-btn--primary:hover,
.wo-section--hero-mesh .wo-btn--primary:hover,
.wo-section--cta .wo-btn--primary:hover,
.wo-section--cta .wo-btn--cta:hover,
.wo-section--glow .wo-btn--primary:hover,
.final-cta .wo-btn--primary:hover,
.migration-section .wo-btn--primary:hover,
.why-conclusion .wo-btn--primary:hover,
.total-value-callout .wo-btn--primary:hover,
.cta-section .wo-btn--primary:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-bg-dark);
    border-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 155, 0, 0.4); }
.wo-section--dark .wo-btn--secondary,
.wo-section--hero .wo-btn--secondary,
.wo-section--hero-mesh .wo-btn--secondary,
.wo-section--cta .wo-btn--secondary,
.wo-section--glow .wo-btn--secondary,
.final-cta .wo-btn--secondary,
.migration-section .wo-btn--secondary,
.why-conclusion .wo-btn--secondary,
.total-value-callout .wo-btn--secondary,
.cta-section .wo-btn--secondary {
    background-color: transparent;
    color: var(--color-bg-white);
    border-color: var(--color-bg-white); }
.wo-section--dark .wo-btn--secondary:hover,
.wo-section--hero .wo-btn--secondary:hover,
.wo-section--hero-mesh .wo-btn--secondary:hover,
.wo-section--cta .wo-btn--secondary:hover,
.wo-section--glow .wo-btn--secondary:hover,
.final-cta .wo-btn--secondary:hover,
.migration-section .wo-btn--secondary:hover,
.why-conclusion .wo-btn--secondary:hover,
.total-value-callout .wo-btn--secondary:hover,
.cta-section .wo-btn--secondary:hover {
    background-color: var(--color-bg-white);
    color: var(--color-primary-base);
    border-color: var(--color-bg-white); }
.wo-section--dark .wo-btn--outline,
.wo-section--hero .wo-btn--outline,
.wo-section--hero-mesh .wo-btn--outline,
.wo-section--glow .wo-btn--outline,
.wo-section--cta .wo-btn--outline {
    background-color: transparent;
    color: var(--color-bg-white);
    border-color: var(--color-bg-white); }
.wo-section--dark .wo-btn--outline:hover,
.wo-section--hero .wo-btn--outline:hover,
.wo-section--hero-mesh .wo-btn--outline:hover,
.wo-section--glow .wo-btn--outline:hover,
.wo-section--cta .wo-btn--outline:hover {
    background-color: var(--color-bg-white);
    color: var(--color-primary-base);
    border-color: var(--color-bg-white); }
@media (min-width: 1024px) and (max-width: 1279px) {
  .wo-hero__actions {
        flex-direction: row;
        gap: var(--space-3); }
}
.wo-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-8); }
.wo-cta {
    text-align: center;
    padding: var(--space-12) 0; }
.wo-cta__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6); }
.wo-cta__actions .wo-btn {
    border-radius: var(--radius-full);
    padding: 1rem 2rem; }
.wo-list {
    list-style: none;
    padding-left: 0;
    margin: 0; }
.wo-list li {
    padding: var(--space-2) 0;
    position: relative;
    padding-left: var(--space-5); }
.wo-list li::before {
    content: '\2713'; 
    position: absolute;
    left: 0;
    color: var(--color-primary-base);
    font-weight: var(--font-bold); }
.wo-section__header {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto; }
.wo-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-primary); }
.wo-trust-item__icon {
    color: var(--color-secondary-base);
    font-weight: bold;
    font-size: var(--text-xl); }
.wo-two-column-hero {
    display: flex;
    gap: var(--space-16);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-12) 0; }
.wo-two-column-hero__content {
    flex: 1;
    min-width: 300px; }
.wo-two-column-hero__image {
    flex: 1;
    min-width: 300px; }
.wo-two-column-hero__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg); }
.wo-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5); }
.wo-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--color-bg-lighter);
    border: 1px solid var(--color-border-light);
    transition: border-color var(--duration-normal) var(--ease-in-out); }
.wo-feature-list li:hover {
    border-color: var(--color-primary-alpha-20); }
.wo-feature-list li .wo-feature-list__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-alpha-10);
    color: var(--color-primary-base);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-size: 1.25rem; }
.wo-feature-list li .wo-feature-list__text {
    font-weight: var(--font-medium);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text-primary); }
.wo-section--dark .wo-feature-list li .wo-feature-list__text,
.wo-section--hero .wo-feature-list li .wo-feature-list__text,
.wo-section--cta .wo-feature-list li .wo-feature-list__text,
.wo-card--glass .wo-feature-list li .wo-feature-list__text {
    color: rgba(255, 255, 255, 0.9); }
.wo-feature-list li:not(:has(.wo-feature-list__icon)) {
    padding-left: var(--space-8);
    position: relative; }
.wo-feature-list li:not(:has(.wo-feature-list__icon))::before {
    content: '\2713';
    position: absolute;
    left: var(--space-4);
    color: var(--color-primary-base);
    font-weight: var(--font-bold);
    font-size: var(--text-xl); }
.wo-feature-list--simple li {
    background: none;
    border: none;
    padding: 0;
    gap: var(--space-3); }
.wo-feature-list--simple li:hover {
    border-color: transparent; }
.wo-section--hero .wo-feature-list--simple,
.wo-hero .wo-feature-list--simple {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6); }
@media (max-width: 767px) {
  .wo-section--hero .wo-feature-list--simple,
    .wo-hero .wo-feature-list--simple {
        flex-direction: column;
        align-items: center; }
}
.wo-feature-list--simple li .wo-feature-list__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--color-secondary-base);
    font-size: 1.5rem;
    margin-top: 2px; }
@media (max-width: 768px) {
  .wo-two-column-hero {
        gap: var(--space-8);
        padding: var(--space-8) 0; }
  .wo-two-column-hero__image {
        order: -1; }
  .wo-feature-list {
        margin: var(--space-6) 0; }
}
.wo-heading {
    color: var(--headings);
    font-weight: 700;
    line-height: 1.3; }
.wo-heading--4 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem 0;
    color: var(--headings); }
.wo-text {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 1rem; }
.wo-list {
    margin: 1rem 0;
    padding-left: 2rem; }
.wo-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px; }
.wo-billing-toggle__btn {
    padding: 12px 30px;
    border: 2px solid var(--color-border-light);
    background-color: var(--color-bg-white);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text-primary); }
.wo-billing-toggle__btn.active {
    background-color: var(--color-primary-base);
    color: var(--color-bg-white);
    border-color: var(--color-primary-base); }
.wo-billing-toggle__btn:hover {
    border-color: var(--color-primary-base); }
.wo-callout {
    background: var(--color-bg-lighter);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8); }
.wo-callout p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed); }
.wo-price-display { }
.wo-price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 18px;
    margin-bottom: 5px; }
.wo-price-current {
    margin: 10px 0; }
.wo-price-amount {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary-base); }
.wo-price-period {
    font-size: 1.25rem;
    color: var(--color-text-secondary); }
.wo-price-billing {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-top: 5px; }
.wo-price-savings {
    display: inline-block;
    background-color: var(--color-success);
    color: var(--color-bg-white);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px; }
.wo-section__header p {
    color: var(--color-text-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto; }
.wo-section--cta,
.wo-cta-section {
    background: var(--gradient-cta);
    position: relative;
    overflow: hidden; }
.wo-section--cta::before,
.wo-cta-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: var(--color-secondary-base);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: wo-float 10s infinite ease-in-out alternate; }
.wo-section--cta::after,
.wo-cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: var(--color-info);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
    animation: wo-float 8s 2s infinite ease-in-out alternate-reverse; }
.wo-section--cta .wo-container,
.wo-cta-section .wo-container {
    position: relative;
    z-index: 1; }
.wo-section--dark,
.wo-section--hero,
.wo-section--hero-mesh,
.wo-section--glow,
.wo-section--cta,
.wo-cta-section {
    color: rgba(255, 255, 255, 0.9); }
.wo-section--dark h1, .wo-section--dark h2, .wo-section--dark h3, .wo-section--dark h4,
.wo-section--hero h1, .wo-section--hero h2, .wo-section--hero h3,
.wo-section--hero-mesh h1, .wo-section--hero-mesh h2, .wo-section--hero-mesh h3,
.wo-section--glow h1, .wo-section--glow h2, .wo-section--glow h3,
.wo-section--cta h1, .wo-section--cta h2, .wo-section--cta h3,
.wo-cta-section h1, .wo-cta-section h2, .wo-cta-section h3,
.wo-section--dark .wo-heading,
.wo-section--hero .wo-heading,
.wo-section--hero-mesh .wo-heading,
.wo-section--glow .wo-heading,
.wo-section--cta .wo-heading,
.wo-cta-section .wo-heading {
    color: #fff; }
.wo-section--dark p, .wo-section--dark .wo-text, .wo-section--dark .wo-text--lead,
.wo-section--hero p, .wo-section--hero .wo-text, .wo-section--hero .wo-text--lead,
.wo-section--hero-mesh p, .wo-section--hero-mesh .wo-text,
.wo-section--glow p, .wo-section--glow .wo-text,
.wo-section--cta p, .wo-section--cta .wo-text, .wo-section--cta .wo-text--lead,
.wo-cta-section p, .wo-cta-section .wo-text {
    color: rgba(255, 255, 255, 0.9); }
.wo-cta__glass {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 1;
    text-align: center; }
@media (min-width: 768px) {
  .wo-cta__glass {
        padding: 4rem; }
}
.wo-cta__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
    font-weight: var(--font-medium); }
@media (min-width: 768px) {
  .wo-cta__trust {
        flex-direction: row;
        gap: var(--space-6); }
}
.wo-cta__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2); }
.wo-cta__trust-item .wo-icon {
    color: var(--color-secondary-base);
    font-size: 1.125rem; }
.wo-cta__trust-dot {
    display: none;
    opacity: 0.4; }
@media (min-width: 768px) {
  .wo-cta__trust-dot {
        display: block; }
}
.wo-section-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-teal);
    margin-bottom: var(--space-3); }
.wo-section--dark .wo-section-label,
.wo-section--hero .wo-section-label,
.wo-section--hero-mesh .wo-section-label,
.wo-section--glow .wo-section-label,
.wo-section--cta .wo-section-label {
    color: var(--color-secondary-base); }
.wo-plugin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2); }
.wo-plugin-header h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0; }
.wo-plugin-tagline {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3); }
.wo-plugin-description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-body);
    margin-bottom: var(--space-4); }
.wo-details-toggle {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-lighter);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    margin-top: auto; }
.wo-details-toggle:hover {
    background: var(--color-primary-base);
    color: #fff;
    border-color: var(--color-primary-base); }
.wo-plugin-details {
    display: none;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-light); }
.wo-plugin-details.wo-is-active {
    display: block; }
.wo-plugin-details h5 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2); }
.wo-plugin-details ul {
    list-style: disc;
    padding-left: var(--space-5);
    margin-bottom: var(--space-3); }
.wo-plugin-details ul li {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-body);
    margin-bottom: var(--space-1); }
.wo-perfect-for {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: var(--space-2); }
.wo-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-8); }
.wo-filter-tag {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: 9999px;
    background: var(--color-bg-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out); }
.wo-filter-tag:hover {
    border-color: var(--color-primary-base);
    color: var(--color-primary-base); }
.wo-filter-tag.wo-is-active {
    background: var(--color-primary-base);
    color: #fff;
    border-color: var(--color-primary-base); }
.wo-category-section {
    margin-bottom: var(--space-12); }
.wo-category-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2); }
.wo-category-description {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6); }
.wo-search-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6); }
.wo-search-box input[type="text"] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    width: 350px;
    max-width: 100%; }
.wo-search-box input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary-base);
    box-shadow: 0 0 0 3px rgba(156, 8, 32, 0.1); }
.wo-portfolio-controls {
    margin-bottom: var(--space-8);
    text-align: center; }
.wo-value-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start; }
@media (max-width: 767px) {
  .wo-value-breakdown {
        grid-template-columns: 1fr; }
}
.wo-calculator-checklist {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-8); }
.wo-calculator-checklist h3 {
    margin-bottom: var(--space-6); }
.wo-calculator-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out); }
.wo-calculator-option:hover {
    border-color: var(--color-primary-base);
    background: rgba(156, 8, 32, 0.02); }
.wo-calculator-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-base);
    flex-shrink: 0; }
.wo-calculator-option input[type="checkbox"]:checked ~ span {
    font-weight: var(--font-medium); }
.wo-option-value {
    margin-left: auto;
    font-weight: var(--font-semibold);
    color: var(--color-primary-base);
    white-space: nowrap;
    font-size: var(--text-sm); }
.wo-calculator-result {
    position: sticky;
    top: var(--space-8); }
.wo-result-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    text-align: center;
    margin-bottom: var(--space-4); }
.wo-result-card--highlight {
    background: var(--color-primary-base);
    border-color: var(--color-primary-base);
    color: #fff; }
.wo-result-card--highlight h3,
.wo-result-card--highlight .wo-result-note {
    color: rgba(255, 255, 255, 0.85); }
.wo-separate-cost,
.wo-webops-cost {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-4) 0; }
.wo-separate-cost .wo-currency,
.wo-webops-cost .wo-currency {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold); }
.wo-separate-cost .wo-amount,
.wo-webops-cost .wo-amount {
    font-size: 3rem;
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: 1; }
.wo-separate-cost .wo-amount {
    color: var(--color-primary-base); }
.wo-webops-cost .wo-amount {
    color: var(--color-secondary-base); }
.wo-separate-cost .wo-period,
.wo-webops-cost .wo-period {
    font-size: var(--text-base);
    color: var(--color-text-secondary); }
.wo-result-card--highlight .wo-webops-cost .wo-period {
    color: rgba(255, 255, 255, 0.7); }
.wo-result-note {
    font-size: var(--text-sm);
    color: var(--color-text-secondary); }
.wo-result-divider {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2) 0; }
.wo-hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--radius-3xl);
    background: linear-gradient(135deg, rgba(156,8,32,0.04), rgba(0,95,115,0.04));
    border: 1px solid rgba(156,8,32,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(156,8,32,0.06); }
.wo-hero-visual::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(238,155,0,0.08), transparent 60%);
    transform: translate(20%, -20%);
    pointer-events: none; }
.wo-hero-visual::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(0,95,115,0.06), transparent 60%);
    transform: translate(-20%, 20%);
    pointer-events: none; }
.wo-hero-visual__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(156,8,32,0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0; }
.wo-hero-visual__icon {
    position: relative;
    z-index: 2;
    width: 10rem;
    height: 10rem;
    border-radius: var(--radius-2xl);
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px -12px rgba(156,8,32,0.12);
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wo-float 6s ease-in-out infinite; }
.wo-hero-visual__icon .wo-icon {
    font-size: 4.5rem;
    color: var(--color-primary-base);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.wo-hero-visual__float {
    position: absolute;
    z-index: 3;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center; }
.wo-hero-visual__float--1 {
    top: 18%;
    right: 8%;
    width: 4rem;
    height: 4rem;
    animation: wo-float 6s ease-in-out infinite 1s; }
.wo-hero-visual__float--2 {
    bottom: 18%;
    left: 12%;
    width: 5rem;
    height: 5rem;
    animation: wo-float 7s ease-in-out infinite 2s; }
.wo-hero-visual__float--3 {
    top: 55%;
    right: 5%;
    width: 3.5rem;
    height: 3.5rem;
    animation: wo-float 5s ease-in-out infinite 0.5s; }
.wo-hero-visual__float--gold .wo-icon { color: var(--color-secondary-base); }
.wo-hero-visual__float--teal .wo-icon { color: var(--color-teal); }
.wo-hero-visual__float--primary .wo-icon { color: var(--color-primary-base); }
@media (max-width: 768px) {
  .wo-hero-visual {
        max-width: 320px;
        aspect-ratio: 1; }
  .wo-hero-visual__icon {
        width: 7rem;
        height: 7rem; }
  .wo-hero-visual__icon .wo-icon {
        font-size: 3rem; }
  .wo-hero-visual__float--1 { width: 3rem; height: 3rem; }
  .wo-hero-visual__float--2 { width: 3.5rem; height: 3.5rem; }
  .wo-hero-visual__float--3 { width: 2.5rem; height: 2.5rem; }
}
.wo-plan-card {
    background: var(--color-bg-white);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; }
.wo-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.wo-plan-card--featured {
    border-color: var(--color-secondary-base);
    border-width: 3px;
    box-shadow: 0 10px 40px rgba(238, 155, 0, 0.15);
    transform: scale(1.02); }
.wo-plan-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary-base);
    color: var(--color-bg-dark);
    padding: 6px 20px;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    box-shadow: 0 4px 12px rgba(238, 155, 0, 0.25);
    white-space: nowrap; }
.wo-plan-card__header { margin-bottom: var(--space-4); }
.wo-plan-card__tagline { color: var(--color-text-secondary); font-size: var(--text-sm); }
.wo-plan-card__pricing {
    text-align: center;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-5); }
.wo-plan-card__guarantee { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.wo-plan-card__features { flex-grow: 1; }
.wo-plan-features { flex-grow: 1; }
.wo-section--hero .wo-stat-number,
.wo-section--cta .wo-stat-number,
.wo-section--dark .wo-stat-number { color: var(--color-bg-white); }
.wo-section--hero .wo-stat-label,
.wo-section--cta .wo-stat-label,
.wo-section--dark .wo-stat-label { color: rgba(255, 255, 255, 0.8); }
.wo-check {
    color: var(--color-teal);
    flex-shrink: 0; }
.wo-trust-indicators {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8); }
.wo-trust-indicators .trust-item,
.wo-trust-indicators span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium); }
.wo-callout--gold {
    background: rgba(238, 155, 0, 0.05);
    border: 1px solid rgba(238, 155, 0, 0.15); }
.wo-step {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start; }
.wo-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-base);
    color: var(--color-bg-white);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    flex-shrink: 0; }
.wo-step__content { flex: 1; }
.wo-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6); }
.wo-hero__cta {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6); }
.wo-addon-section { margin: var(--space-10) 0; }
.wo-addon-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6); }
.wo-addon-header { margin-bottom: var(--space-4); }
.wo-addon-label { font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.wo-addon-content { margin-bottom: var(--space-4); }
.wo-addon-pricing { display: flex; align-items: baseline; gap: var(--space-2); }
.wo-addon-price { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary-base); }
.wo-addon-period { font-size: var(--text-sm); color: var(--color-text-secondary); }
.wo-addon-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }
.wo-list--issues li::before { color: var(--color-danger, #dc3545); }
.wo-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-6); }
.wo-filter-tag {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-white);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease; }
.wo-filter-tag:hover {
    border-color: var(--color-primary-base);
    color: var(--color-primary-base); }
.wo-filter-tag.wo-is-active {
    background: var(--color-primary-base);
    border-color: var(--color-primary-base);
    color: white; }
@media (max-width: 768px) {
  .wo-step { flex-direction: column; gap: var(--space-3); }
  .wo-step__number { min-width: 2.5rem; height: 2.5rem; font-size: var(--text-lg); }
}
.wo-section-label {
    display: block;
    color: var(--color-info);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3); }
.wo-text--gold { color: var(--color-secondary-base); }
.wo-text--muted { color: var(--color-text-muted); }
.wo-section--hero .wo-btn--cta,
.wo-section--hero-mesh .wo-btn--cta,
.wo-cta-section .wo-btn--cta,
.wo-cta-section--gradient .wo-btn--cta,
.wo-cta-banner .wo-btn--cta {
    background: var(--color-secondary-base);
    background-size: auto;
    color: var(--color-text-primary); }
.wo-section--hero .wo-btn--cta:hover,
.wo-section--hero-mesh .wo-btn--cta:hover,
.wo-cta-section .wo-btn--cta:hover,
.wo-cta-section--gradient .wo-btn--cta:hover,
.wo-cta-banner .wo-btn--cta:hover {
    background: var(--color-secondary-dark);
    color: var(--color-text-primary);
    box-shadow: 0 8px 24px rgba(238, 155, 0, 0.3); }
.wo-heading--fluid-1,
.wo-section--hero h1,
.wo-section--hero-mesh h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
    max-width: 896px;
    margin-left: auto;
    margin-right: auto; }
.wo-section--hero .wo-hero-badge,
.wo-section--hero-mesh .wo-hero-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-secondary-base);
    margin-bottom: var(--space-8); }
.wo-section--hero .wo-text--lead {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
    margin-bottom: var(--space-10);
    max-width: 672px;
    margin-left: auto;
    margin-right: auto; }
.wo-section--hero .wo-btn-group {
    margin-bottom: var(--space-12);
    justify-content: center; }
.wo-section--hero .wo-trust-bar--hero {
    justify-content: center; }
.wo-section--hero {
    padding: var(--space-24) 0; }
@media (min-width: 1024px) {
  .wo-section--hero {
        padding: 8rem 0; }
}
.wo-section--hero .wo-trust-bar,
.wo-section--hero-mesh .wo-trust-bar {
    border-top: none;
    padding-top: 0;
    display: flex;
    grid-template-columns: unset; }



@keyframes wo-spin {
    to { transform: rotate(360deg); }
}
.wo-cta { padding: 5rem 0; }
@media (max-width: 768px) {
  .wo-cta { padding: 3.5rem 0; }
}
.wo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 10px 20px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(156, 8, 32, 0.1);
    color: var(--color-primary-base, #9C0820);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    margin-bottom: var(--space-8, 2rem); }
.wo-hero-badge .wo-icon {
    color: var(--color-secondary-base, #C8A951);
    font-size: 1.125rem; }
.wo-step {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; }
.wo-step:hover .wo-step__circle {
    transform: translateY(-8px); }
.wo-step__number {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-base, #9C0820);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-xl, 1.25rem); }
.wo-text--gold { color: var(--secondary-dark); font-weight: 600; }
.wo-text--muted { color: var(--text-muted); }
.wo-hero {
  background: var(--grad-hero); color: #fff;
  padding: 4.5rem 0 5.5rem;
  position: relative; overflow: hidden; }
.wo-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 8% 100%, rgba(238,155,0,.2), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(0,95,115,.28), transparent 60%);
  pointer-events: none; }
.wo-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .5; z-index: 0; }
.wo-hero .wo-container { position: relative; z-index: 1; }
.wo-hero h1 { color: #fff; margin-bottom: 1.15rem; }
.wo-hero h1 em { font-style: normal; color: var(--secondary-light); }
.wo-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.wo-step { text-align: left; }
.wo-step { display: grid; grid-template-columns: 58px 1fr; gap: 1.25rem; padding: .85rem 0; position: relative; }
.wo-step:nth-of-type(3n+2) .wo-step__dot { border-color: var(--secondary); color: var(--secondary-dark); }
.wo-step:nth-of-type(3n+3) .wo-step__dot { border-color: var(--accent); color: var(--accent); }
.wo-step:nth-of-type(3n+2) .wo-step__meta { color: var(--secondary-dark); }
.wo-step:nth-of-type(3n+3) .wo-step__meta { color: var(--accent); }



@keyframes wo-intro-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


@keyframes wo-slideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.wo-callout {
  margin: 1.75rem 0;
  padding: 1.15rem 1.5rem 1.25rem;
  background: rgba(0,95,115,.05);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; }

/* wo-btn additions from style.css not covered by the §5 wo-components port (--lg, gradients' pseudo layers, etc.) */
.wo-btn:focus-visible {
    outline: 3px solid var(--color-secondary-base);
    outline-offset: 2px; }
.wo-btn:focus {
    text-decoration: none; }
.wo-btn:disabled, .wo-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; }
.wo-btn--primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    color: var(--color-bg-white);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 8, 32, 0.4); }
.wo-btn--secondary {
    background-color: var(--color-secondary-base);
    color: var(--color-bg-dark);
    border-color: var(--color-secondary-base); }
.wo-btn--secondary:hover:not(:disabled) {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 155, 0, 0.4); }
.wo-btn--gold:hover:not(:disabled) {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(238, 155, 0, 0.6); }
.wo-btn--ghost:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px); }
.wo-btn--outline:hover:not(:disabled) {
    background-color: var(--color-primary-base);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 8, 32, 0.4); }
.wo-btn--success {
    background-color: var(--color-success);
    color: var(--color-bg-white);
    border-color: var(--color-success); }
.wo-btn--success:hover:not(:disabled) {
    background-color: #218838;
    border-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); }
.wo-btn--danger {
    background-color: var(--color-error);
    color: var(--color-bg-white);
    border-color: var(--color-error); }
.wo-btn--danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4); }
.wo-btn--outline-primary {
    background-color: transparent;
    color: var(--color-primary-base);
    border-color: var(--color-primary-base); }
.wo-btn--outline-primary:hover:not(:disabled) {
    background-color: var(--color-primary-base);
    color: var(--color-bg-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 8, 32, 0.4); }
.wo-btn--outline-secondary {
    background-color: transparent;
    color: var(--color-secondary-base);
    border-color: var(--color-secondary-base); }
.wo-btn--outline-secondary:hover:not(:disabled) {
    background-color: var(--color-secondary-base);
    color: var(--color-bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 155, 0, 0.4); }
.wo-btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 36px; }
.wo-btn--lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-lg);
    line-height: normal; }
.wo-btn--xl {
    padding: 18px 64px;
    font-size: 20px;
    min-height: 60px; }
.wo-btn--cta {
    background: var(--gradient-cta);
    background-size: 200% auto;
    color: var(--color-bg-white);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-bold); }
.wo-btn--cta:hover:not(:disabled) {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-primary); }
.wo-btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-bg-white);
    transform: translateY(-2px); }
.wo-btn--full {
    width: 100%;
    justify-content: center; }
.wo-btn-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center; }
.wo-btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch; }
.wo-btn-group .wo-btn--full {
    width: auto; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .wo-btn--lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base); }
  .wo-btn--xl {
        padding: 16px 48px;
        font-size: 18px;
        min-height: 56px; }
}
.wo-btn--white {
    background-color: var(--color-bg-white);
    color: var(--color-primary-base);
    border-color: var(--color-bg-white); }
.wo-btn--white:hover:not(:disabled) {
    background-color: var(--color-bg-light);
    border-color: var(--color-bg-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.6); }
.wo-btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 36px; }
.wo-btn--plan {
    width: 100%;
    justify-content: center; }
.wo-btn--outline-white {
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: var(--color-bg-white);
    background: transparent; }
.wo-btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-bg-white); }

/* third-party-email-migration benefits: the source uses a Swiper carousel
   (library loaded theme-wide in WHMCS, not bundled here). Deliberate
   no-library layout: 3-col card grid, carousel chrome hidden. */
.wo-benefits-carousel-wrapper .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.wo-benefits-carousel-wrapper .swiper-slide { height: auto; }
.wo-benefits-carousel-nav,
.wo-benefits-carousel-wrapper .swiper-pagination { display: none; }
@media (max-width: 900px) {
	.wo-benefits-carousel-wrapper .swiper-wrapper { grid-template-columns: 1fr; }
}

/* ============================================================
   7. FOOTER NAV — full wo-footer port (5-col grid: brand +
   Solutions / Capabilities / Resources / Legal + bottom bar).
   WHMCS-deferred targets (/knowledgebase, /blog/*,
   /serverstatus.php) stay absolute for cutover. The foundry
   footer group wrapper is flush (the wo-footer band carries
   its own padding + dark bg). */
.webops-footer.foundry-footer { padding: 0; background: transparent; }
.webops-footer .wo-container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.25rem; }
.wo-footer {
    background-color: var(--color-bg-dark);
    padding: var(--space-20) 0 var(--space-10);
    color: rgba(255,255,255,0.6); }
.wo-footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-10);
    padding-bottom: var(--space-16);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 991px) {
  .wo-footer__grid {
        grid-template-columns: repeat(2, 1fr); }
  .wo-footer__brand {
        grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .wo-footer__grid {
        grid-template-columns: 1fr; }
}
.wo-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    margin-bottom: var(--space-6); }
.wo-footer__logo-icon {
    color: var(--color-primary-base);
    transition: color 0.3s; }
.wo-footer__logo:hover .wo-footer__logo-icon {
    color: var(--color-secondary-base); }
.wo-footer__logo-text {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    color: #fff;
    letter-spacing: -0.3px; }
.wo-footer__tagline {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    max-width: 300px;
    margin-bottom: var(--space-8); }
.wo-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5); }
.wo-footer__social .list-inline-item {
    margin-right: 0;
    padding: 0; }
.wo-footer__social a,
.wo-footer__social .list-inline-item a {
    color: rgba(255,255,255,0.4);
    transition: color 0.2s, transform 0.2s;
    font-size: var(--text-lg);
    text-decoration: none; }
.wo-footer__social a:hover,
.wo-footer__social .list-inline-item a:hover {
    color: #fff;
    transform: translateY(-2px); }
.wo-footer__heading {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-6); }
.wo-footer__links {
    list-style: none;
    padding: 0;
    margin: 0; }
.wo-footer__links li {
    margin-bottom: var(--space-4); }
.wo-footer__links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color 0.2s; }
.wo-footer__links a:hover {
    color: var(--color-info);
    text-decoration: none; }
.wo-footer__locale {
    text-align: center;
    margin-bottom: var(--space-8); }
.wo-footer__locale-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: all 0.2s; }
.wo-footer__locale-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff; }
.wo-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4); }
@media (max-width: 767px) {
  .wo-footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center; }
}
.wo-footer__copyright {
    margin: 0; }
.wo-footer__made {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-weight: var(--font-medium); }
.wo-footer__heart {
    color: var(--color-primary-base);
    font-size: 0.85rem; }
.wo-footer {
    margin-top: 0; }
.wo-footer { background: var(--footer); color: rgba(255,255,255,.65); padding: 3.75rem 0 1.75rem; }
.wo-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 991px) {
  .wo-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 575px) {
  .wo-footer__grid { grid-template-columns: 1fr; }
}
.wo-footer__brand p { color: rgba(255,255,255,.55); font-size: .88rem; line-height: 1.55; margin-top: 1rem; max-width: 300px; }
.wo-footer__col h4 { color: #fff; font-size: .78rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; font-weight: 500; }
.wo-footer__col a { display: block; color: rgba(255,255,255,.58); font-size: .9rem; padding: .35rem 0; transition: color .15s; }
.wo-footer__col a:hover { color: var(--secondary-light); }
.wo-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: rgba(255,255,255,.45); font-family: 'JetBrains Mono', monospace; letter-spacing: .05em; }
.wo-footer__logo-text { color: #fff; font-family: 'Plus Jakarta Sans'; font-weight: 700; }

/* mobile: the featured plan card's scale(1.02) overflows a 390px viewport
   (live resets it in a media rule outside the ported class set) */
@media (max-width: 600px) {
	.wo-plan-card--featured { transform: none; }
}

/* the source sheets rely on a global border-box reset that isn't ported —
   wo- components with width:100% + padding (plan CTAs) overflowed without it */
[class^="wo-"], [class*=" wo-"],
[class^="wo-"] *, [class*=" wo-"] * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════
   §8. DATA-SURFACE FALLBACKS — plans + domains (2026-07-06)
   Source-cascade order: style.css layer, then custom.css layer.
   plans reuses the §5/§6 wo-plans-row + wo-cta-block ports; domains
   reuses the §6 hero/trust-bar/section__header port. Only the classes
   new to these two fragments are added here.
   ═══════════════════════════════════════════════════════════════════ */

/* tokens referenced below and not yet defined upstream */
:root {
    --text-4xl: 2.25rem;
    --font-normal: 400;
}

/* ── style.css layer ── */
.wo-card--pricing:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary-alpha-20); }
/* Domain pricing cards (simple centered variant) */
.wo-card--pricing {
    text-align: center;
    position: relative; }
.wo-card--pricing .wo-card__label {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2); }
.wo-card--pricing .wo-card__number {
    font-size: var(--text-3xl, 1.875rem);
    font-weight: var(--font-bold);
    color: var(--color-primary-base);
    line-height: 1;
    margin-bottom: var(--space-1); }
.wo-card--pricing .wo-card__detail {
    font-size: var(--text-sm);
    color: var(--color-text-secondary); }
/* Highlight modifier (domains transfer card) */
.wo-card--highlight {
    border-color: var(--color-secondary-base);
    border-top: 3px solid var(--color-secondary-base); }
.wo-card__text {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: 0; }
.wo-card__icon--lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem; }
.wo-card__icon--lg .wo-icon { font-size: 2.5rem; }
.wo-grid--6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.wo-text--note-icon { margin-right: var(--space-1); }

/* ── custom.css layer ── */
/* Ghost button variant for light/warm backgrounds (wo-btn--ghost assumes dark bg). */
.wo-btn--ghost-dark,
.wo-btn.wo-btn--ghost-dark {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.wo-btn--ghost-dark:hover,
.wo-btn.wo-btn--ghost-dark:hover {
    background: #fafafa;
    color: #000;
    border-color: rgba(0,0,0,.3); }

/* ═══════════════════════════════════════════════════════════════════
   §9. CONTACT PAGE — grid/sidebar port + Gravity Forms skin (2026-07-06)
   9a: the wo- contact classes from the source sheets (cascade order),
       filtered to what the /contact fragment uses. The source form-
       control classes (wo-input/-select/-textarea/-radio/-conditional)
       are ported as the DESIGN REFERENCE for 9b.
   9b: mapping that design onto GF gravity-theme markup — the form is
       rendered by Gravity Forms ([gravityform theme=gravity-theme]),
       so the skin targets .gform_wrapper.gravity-theme inside
       .wo-form-card. Conditional-reason boxes ride field cssClass
       (wo-gf-cond + --gold/--teal/--gray) set in build-contact-form.php.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9a. layout + sidebar (wo-components.css layer) ── */
.wo-contact-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 3rem; align-items: start; }
@media (max-width: 960px) {
  .wo-contact-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}
.wo-form-card { background: #fff; border-radius: var(--r-xl); padding: 2rem 2.25rem; box-shadow: var(--sh-md); border: 1px solid rgba(0,0,0,.05); }
@media (max-width: 560px) {
  .wo-form-card { padding: 1.5rem 1.25rem; }
}
.wo-form-card__head { margin-bottom: 1.5rem; }
.wo-form-card__head h2 { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 1.5rem; color: var(--headings); margin-bottom: .4rem; }
.wo-form-card__head p { color: var(--text-muted); font-size: .95rem; line-height: 1.5; }

.wo-contact-side { display: flex; flex-direction: column; gap: 1rem; }
.wo-response-box { background: var(--grad-hero); color: #fff; border-radius: var(--r-lg); padding: 1.5rem 1.6rem; position: relative; overflow: hidden; }
.wo-response-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 100%, rgba(238,155,0,.3), transparent 70%); pointer-events: none; }
.wo-response-box > * { position: relative; z-index: 1; }
.wo-response-box__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary-light); margin-bottom: .5rem; font-weight: 600; }
.wo-response-box h3 { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: .5rem; }
.wo-response-box p { color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.5; }
.wo-contact-card-item { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--r-md); padding: 1.25rem 1.4rem; display: flex; gap: .9rem; align-items: flex-start; }
.wo-contact-card-item__icon { width: 42px; height: 42px; border-radius: var(--r-md); background: rgba(156,8,32,.08); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; font-size: 1.3rem; }
.wo-contact-side .wo-contact-card-item:nth-of-type(2) .wo-contact-card-item__icon { background: rgba(238,155,0,.14); color: var(--secondary-dark); }
.wo-contact-side .wo-contact-card-item:nth-of-type(3) .wo-contact-card-item__icon { background: rgba(0,95,115,.1); color: var(--accent); }
.wo-contact-card-item__title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 1rem; color: var(--headings); margin-bottom: .15rem; }
.wo-contact-card-item__desc { color: var(--text-muted); font-size: .85rem; line-height: 1.45; margin-bottom: .35rem; }
.wo-contact-card-item__link { color: var(--primary); font-weight: 600; font-size: .88rem; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
.wo-contact-card-item__link:hover { text-decoration: underline; }

/* success state (GF confirmation message carries these classes) */
.wo-form-state--success { padding: 2.5rem 1.5rem; text-align: center; }
.wo-form-state--success h3 { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 1.4rem; color: var(--headings); margin-bottom: .6rem; }
.wo-form-state--success p { color: var(--text-muted); font-size: .95rem; max-width: 420px; margin: 0 auto 1.25rem; line-height: 1.5; }
.wo-form-state__meta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }
.wo-form-state__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.wo-form-state__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }
@keyframes wo-slideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── 9b. GF gravity-theme mapping (design source: wo-input/-select/-textarea/
       -radio/-conditional in wo-components.css) ── */
.wo-form-card .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 1.1rem; }
.wo-form-card .gravity-theme .gfield_label {
    display: block; font-size: .72rem; font-weight: 600; color: var(--text);
    margin-bottom: .45rem; font-family: 'JetBrains Mono', monospace;
    letter-spacing: .08em; text-transform: uppercase; }
.wo-form-card .gravity-theme .gfield_required { color: var(--primary); }
.wo-form-card .gravity-theme .gfield_description {
    color: var(--text-light); font-size: .78rem; padding-top: .3rem; }
.wo-form-card .gravity-theme .gfield input[type=text],
.wo-form-card .gravity-theme .gfield input[type=email],
.wo-form-card .gravity-theme .gfield input[type=tel],
.wo-form-card .gravity-theme .gfield input[type=url],
.wo-form-card .gravity-theme .gfield select,
.wo-form-card .gravity-theme .gfield textarea {
    width: 100%; background: #fff; border: 1px solid #e5ddd6; color: var(--text);
    padding: .8rem .95rem; border-radius: var(--r-md); font-family: inherit;
    font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.wo-form-card .gravity-theme .gfield textarea { min-height: 120px; resize: vertical; }
.wo-form-card .gravity-theme .gfield input::placeholder,
.wo-form-card .gravity-theme .gfield textarea::placeholder { color: var(--text-light); }
.wo-form-card .gravity-theme .gfield input:focus,
.wo-form-card .gravity-theme .gfield select:focus,
.wo-form-card .gravity-theme .gfield textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(156,8,32,.12); }

/* reason radio → wo-radio cards */
.wo-form-card .gravity-theme .wo-gf-reason .gfield_radio {
    display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
@media (max-width: 560px) {
  .wo-form-card .gravity-theme .wo-gf-reason .gfield_radio { grid-template-columns: 1fr; }
}
.wo-form-card .gravity-theme .wo-gf-reason .gchoice {
    display: flex; align-items: flex-start; gap: .65rem; padding: .85rem .95rem;
    background: #fff; border: 1px solid #e5ddd6; border-radius: var(--r-md);
    cursor: pointer; transition: all .15s; position: relative; }
.wo-form-card .gravity-theme .wo-gf-reason .gchoice:hover {
    border-color: var(--primary); background: rgba(156,8,32,.03); }
.wo-form-card .gravity-theme .wo-gf-reason .gchoice:has(input:checked) {
    border-color: var(--primary); background: rgba(156,8,32,.04);
    box-shadow: 0 0 0 3px rgba(156,8,32,.08); }
.wo-form-card .gravity-theme .wo-gf-reason .gchoice input {
    margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.wo-form-card .gravity-theme .wo-gf-reason .gchoice label {
    cursor: pointer; line-height: 1.3; margin: 0; }
.wo-radio__title { font-weight: 600; font-size: .92rem; color: var(--text); display: block; }
.wo-radio__desc { font-size: .78rem; color: var(--text-muted); display: block; margin-top: .15rem; }

/* conditional-reason fields → wo-conditional boxes (per-field variant) */
.wo-form-card .gravity-theme .gfield.wo-gf-cond {
    padding: 1.1rem 1.25rem; background: var(--surface-warm);
    border-radius: var(--r-md); border-left: 3px solid var(--primary);
    animation: wo-slideIn .25s ease; }
.wo-form-card .gravity-theme .gfield.wo-gf-cond--gold {
    border-left-color: var(--secondary); background: rgba(238,155,0,.05); }
.wo-form-card .gravity-theme .gfield.wo-gf-cond--teal {
    border-left-color: var(--accent); background: rgba(0,95,115,.04); }
.wo-form-card .gravity-theme .gfield.wo-gf-cond--gray {
    border-left-color: var(--text-muted); }

/* submit row */
.wo-form-card .gravity-theme .gform_footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 1rem; flex-wrap: wrap; margin-top: .5rem; padding: 0; position: relative; }
.wo-form-card .gravity-theme .gform_footer::before {
    content: "Response within 1 business hour"; margin-right: auto;
    font-family: 'JetBrains Mono', monospace; font-size: .7rem;
    color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }
.wo-form-card .gravity-theme .gform_footer input[type=submit],
.wo-form-card .gravity-theme .gform_footer button {
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    font-family: 'Plus Jakarta Sans'; font-weight: 600; font-size: .95rem;
    padding: .85rem 1.6rem; border-radius: var(--r-md);
    transition: background .15s, transform .15s; }
.wo-form-card .gravity-theme .gform_footer input[type=submit]:hover,
.wo-form-card .gravity-theme .gform_footer button:hover {
    background: var(--primary-dark, #7A0619); transform: translateY(-1px); }

/* validation */
.wo-form-card .gravity-theme .gfield_validation_message {
    background: rgba(220,53,69,.06); border: 1px solid rgba(220,53,69,.2);
    color: var(--color-error); border-radius: var(--r-md);
    font-size: .8rem; padding: .4rem .6rem; margin-top: .4rem; }
.wo-form-card .gravity-theme .gform_validation_errors {
    border: 1px solid rgba(220,53,69,.25); border-radius: var(--r-md);
    background: rgba(220,53,69,.05); padding: .8rem 1rem; }

/* utility classes the converter now carries from unwrapped containers */
.wo-u-text-center { text-align: center; }
.wo-u-mt-6 { margin-top: var(--space-6); }

/* ============================================================
   §10. BLOG INDEX — port of webops-whmcs-blog blog_home.tpl +
   blog-styles.css (2026-07-07). Markup = templates/home.html
   (query loops; cards are .wp-block-post li > .blog-card group).
   Category colors = the module's hardcoded CategoryRepository map.
   Deliberate deltas: no read-time, no iconify icons, newsletter
   form replaced by a Subscribe button (capture backend TBD:
   MailPoet at cutover), author avatar = gravatar.
   ============================================================ */

.webops-blog-home { background: var(--background, #fff); padding: 2.5rem 0 4rem; }
.blog-home-inner { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }

/* query-loop ul reset (post-template renders <ul class="wp-block-post-template">) */
.webops-blog-home ul.wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.webops-blog-home li.wp-block-post { margin: 0; }

/* ── Hero ── */
.blog-hero { margin-bottom: 2rem; }
.blog-hero__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
	.blog-hero__grid { grid-template-columns: 3fr 2fr; min-height: 420px; }
	.blog-hero__featured-q, .blog-hero__featured-q .wp-block-post-template,
	.blog-hero__featured-q .wp-block-post, .blog-hero__featured { height: 100%; }
}
.blog-hero__featured { position: relative; border-radius: 0.75rem; overflow: hidden; background: var(--surface, #f8f9fa); min-height: 320px; }
.blog-hero__featured-img { position: absolute; inset: 0; margin: 0; }
.blog-hero__featured-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 50%, transparent 100%); display: flex; align-items: flex-end; padding: 1.5rem; pointer-events: none; }
.blog-hero__overlay a { pointer-events: auto; }
.blog-hero__content { color: #fff; }
.blog-hero__title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0.5rem 0; }
.blog-hero__title a { color: #fff; text-decoration: none; }
.blog-hero__title a::after { content: ""; position: absolute; inset: 0; } /* stretch: whole hero card clickable */
@media (min-width: 768px) { .blog-hero__title { font-size: 1.75rem; } }
.blog-hero__meta { font-size: 0.875rem; color: #fff; opacity: 0.85; }

.blog-hero__secondary .wp-block-post-template { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }
.blog-hero__secondary .wp-block-post { flex: 1; min-height: 0; display: flex; }
.blog-hero__secondary-card { position: relative; display: flex; flex-direction: row; gap: 0.75rem; padding: 0.75rem; background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 0.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; flex: 1; min-height: 0; }
.blog-hero__secondary-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.blog-hero__secondary-thumb { width: 90px; min-width: 90px; border-radius: 0.25rem; overflow: hidden; margin: 0; align-self: stretch; }
.blog-hero__secondary-thumb img, .blog-hero__secondary-thumb a { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero__secondary-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.blog-hero__secondary-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 0.875rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-hero__secondary-title a { color: var(--headings, #1f2937); text-decoration: none; }
.blog-hero__secondary-title a::after { content: ""; position: absolute; inset: 0; }
.blog-hero__secondary-meta { font-size: 0.75rem; color: var(--text-muted, #6b7280); }

/* ── Badges (post-terms renders div > a) ── */
.blog-badge a, .blog-card__category-badge a { color: #fff; text-decoration: none; }
.blog-badge a { display: inline-block; padding: 0.25rem 0.75rem; background: var(--primary, #9c0820); font-size: 0.75rem; font-weight: 600; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; position: relative; z-index: 1; }
.blog-card__category-badge a { display: inline-block; padding: 2px 8px; background: var(--primary, #9c0820); border-radius: 9999px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap; }

/* module color map (CategoryRepository::getColorMap) via post_class on the li */
.category-how-to-guides .blog-badge a, .category-how-to-guides .blog-card__category-badge a { background: #7c3aed; }
.category-security .blog-badge a, .category-security .blog-card__category-badge a { background: #0891b2; }
.category-speed .blog-badge a, .category-speed .blog-card__category-badge a { background: #059669; }
.category-wordpress-tips .blog-badge a, .category-wordpress-tips .blog-card__category-badge a { background: #d97706; }
.category-monitoring-alerting .blog-badge a, .category-monitoring-alerting .blog-card__category-badge a { background: #ea580c; }
.category-patch-notes .blog-badge a, .category-patch-notes .blog-card__category-badge a { background: #475569; }
.category-how-to-guides .blog-card { border-top-color: #7c3aed; }
.category-security .blog-card { border-top-color: #0891b2; }
.category-speed .blog-card { border-top-color: #059669; }
.category-wordpress-tips .blog-card { border-top-color: #d97706; }
.category-monitoring-alerting .blog-card { border-top-color: #ea580c; }
.category-patch-notes .blog-card { border-top-color: #475569; }

/* ── Newsletter band ── */
.blog-newsletter { background: var(--primary, #9c0820); border-radius: 0.75rem; padding: 2rem 1.5rem; margin-bottom: 2rem; color: #fff; }
.blog-newsletter__inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .blog-newsletter__inner { grid-template-columns: 1fr auto; } }
.blog-newsletter__heading { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; color: #fff; }
.blog-newsletter__subtext { margin: 0; opacity: 0.9; font-size: 0.875rem; line-height: 1.5; color: #fff; }
.blog-newsletter__btn { display: inline-block; background: var(--headings, #1f2937); color: #fff; padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.875rem; border-radius: 0.5rem; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.15s ease; }
.blog-newsletter__btn:hover { background: #374151; color: #fff; }

/* ── Sections ── */
.blog-section { margin-bottom: 2rem; padding: 1.5rem 0; }
.blog-section--alt-bg { background: var(--surface, #f8f9fa); border-radius: 0.75rem; padding: 1.5rem; }
.blog-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.blog-section__header h2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.25rem; font-weight: 700; margin: 0; }
.blog-section__viewall { margin: 0; }
.blog-section__viewall a { font-size: 0.875rem; font-weight: 500; color: var(--primary, #9c0820); text-decoration: none; white-space: nowrap; }
.blog-section__viewall a:hover { color: var(--primary-dark, #7a0618); }
/* section-header accent dots matching the module's colored folder icons */
.blog-section__h--monitoring::before, .blog-section__h--security::before, .blog-section__h--speed::before,
.blog-section__h--patch::before, .blog-section__h--howto::before { content: ""; display: inline-block; width: 0.65em; height: 0.65em; border-radius: 3px; margin-right: 0.5rem; vertical-align: baseline; }
.blog-section__h--monitoring::before { background: #ea580c; }
.blog-section__h--security::before { background: #0891b2; }
.blog-section__h--speed::before { background: #059669; }
.blog-section__h--patch::before { background: #475569; }
.blog-section__h--howto::before { background: #7c3aed; }

.blog-section__grid { display: grid !important; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 576px) { .blog-section__grid--3col, .blog-section__grid--4col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
	.blog-section__grid--3col { grid-template-columns: repeat(3, 1fr); }
	.blog-section__grid--4col { grid-template-columns: repeat(4, 1fr); }
}

/* ── Cards ── */
.blog-card { position: relative; height: 100%; background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--primary, #9c0820); border-radius: 0.75rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; margin: 0; }
.blog-card__image a { display: block; height: 100%; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blog-card:hover .blog-card__image img { transform: scale(1.03); }
.blog-card__body { padding: 1.25rem; }
.blog-card__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted, #6b7280); margin-bottom: 0.5rem; }
.blog-card__date { font-size: 0.75rem; }
.blog-card__title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.75rem; }
.blog-card__title a { color: var(--headings, #1f2937); text-decoration: none; }
.blog-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole-card click, like the module's onclick */
.blog-card:hover .blog-card__title a { color: var(--primary, #9c0820); }
.blog-card__meta a { position: relative; z-index: 1; } /* badge stays clickable above the stretch */
.blog-card__author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #6b7280); }
.blog-card__author .wp-block-post-author__avatar img { width: 24px; height: 24px; border-radius: 9999px; object-fit: cover; }
.blog-card__author .wp-block-post-author__name { color: var(--text-muted, #555); font-size: 0.875rem; }

/* ── Resource Hub ── */
.blog-resources__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 576px) { .blog-resources__grid { grid-template-columns: repeat(3, 1fr); } }
.blog-resources__topic h3 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--headings, #1f2937); }
.blog-resources__topic ul { list-style: none; padding: 0; margin: 0; }
.blog-resources__topic li { margin-bottom: 0.5rem; }
.blog-resources__topic a { font-size: 0.875rem; color: var(--text, #555); text-decoration: none; transition: color 0.15s ease; }
.blog-resources__topic a:hover { color: var(--primary, #9c0820); }

/* §10 addendum — VVL parity fixes (2026-07-07 night pass) */
.blog-section__h--picks::before { content: ""; display: inline-block; width: 0.65em; height: 0.65em; border-radius: 3px; margin-right: 0.5rem; background: var(--secondary, #ee9b00); }
.webops-blog-banner.foundry-guide-hero { margin-bottom: 0; }
.webops-blog-banner .foundry-guide-hero__eyebrow a { color: inherit; text-decoration: none; }
.webops-blog-banner .foundry-guide-hero__eyebrow a:hover { text-decoration: underline; }
.webops-blog-home { padding-top: 0; }
.webops-blog-home > .blog-home-inner { padding-top: 2.5rem; }
/* §10 rhythm: kill the theme blockGap margin between blog-home sections (it
   stacks on the sections' own margins and loosens the page vs live) */
.blog-home-inner > .wp-block-group { margin-block-start: 0; }
.blog-home-inner > .blog-section { margin-bottom: 1.25rem; padding: 1rem 0; }
.blog-home-inner > .blog-section--alt-bg { padding: 1.5rem; }

/* ── §10b. BLOG SINGLE + ARCHIVE — blog_post.tpl / blog.tpl port ──
   Deltas: search posts to WP /?s= (module had /blog/search); category
   counts render in parens (wp_list_categories); mobile keeps the sidebar
   stacked above the article instead of hiding TOC. */

.blog-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .blog-layout { grid-template-columns: 280px minmax(0, 1fr); } }
.blog-layout__sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 992px) { .blog-layout__sidebar { position: sticky; top: 90px; } }

.blog-sidebar-card { background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 0.75rem; overflow: hidden; }
.blog-sidebar-card__header { background: var(--wo-grad-primary, linear-gradient(135deg, #9c0820, #7a0619)); background-color: var(--primary, #9c0820); color: #fff; font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 0.95rem; padding: 0.75rem 1rem; }
.blog-sidebar-card .blog-toc__nav, .blog-sidebar-card .blog-search-form { padding: 0.75rem 1rem; }

.blog-byline { background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.blog-byline__category a { display: inline-block; padding: 0.25rem 0.75rem; background: var(--primary, #9c0820); color: #fff; font-size: 0.72rem; font-weight: 600; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; }
.category-how-to-guides .blog-byline__category a, .webops-blog-single .category-how-to-guides.blog-byline__category a { background: #7c3aed; }
.blog-byline__date { font-size: 0.85rem; color: var(--text-muted, #6b7280); display: flex; flex-direction: column; gap: 0.35rem; }
.blog-read-time { display: block; }
.blog-card__date .blog-read-time { display: inline; margin-left: 0.6rem; }
.blog-card__date { display: inline; }

.blog-toc__nav { display: flex; flex-direction: column; gap: 0; }
.blog-toc__link { display: block; padding: 0.45rem 0.25rem; font-size: 0.85rem; color: var(--text, #2a2e36); text-decoration: none; border-left: 3px solid transparent; padding-left: 0.6rem; line-height: 1.35; }
.blog-toc__link:hover { color: var(--primary, #9c0820); border-left-color: var(--primary, #9c0820); }

.blog-search-form { display: flex; gap: 0; }
.blog-search-form input { flex: 1; min-width: 0; border: 1px solid var(--border, #e5e7eb); border-radius: 0.5rem 0 0 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.blog-search-form button { border: none; background: var(--primary, #9c0820); color: #fff; padding: 0.5rem 0.9rem; border-radius: 0 0.5rem 0.5rem 0; cursor: pointer; font-size: 1rem; }
.blog-search-form button:hover { background: var(--primary-dark, #7a0619); }

/* article */
.webops-blog-single .foundry-guide-hero__title { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }
.blog-article { min-width: 0; }
.blog-article__featured-image { margin: 0 0 1.5rem; border-radius: 0.75rem; overflow: hidden; }
.blog-article__featured-image img { width: 100%; height: auto; display: block; }
.blog-article__content { font-size: 1.02rem; line-height: 1.75; color: var(--text, #2a2e36); }
.blog-article__content h2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.6rem; font-weight: 700; color: var(--headings, #1f2937); margin: 2.25rem 0 0.9rem; scroll-margin-top: 90px; }
.blog-article__content h3 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.2rem; font-weight: 600; color: var(--headings, #1f2937); margin: 1.75rem 0 0.7rem; }
.blog-article__content p { margin: 0 0 1.1rem; }
.blog-article__content a { color: var(--primary, #9c0820); }
.blog-article__content ul, .blog-article__content ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.blog-article__content li { margin-bottom: 0.4rem; }
.blog-article__content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.blog-article__content pre { background: #1f2937; color: #e5e7eb; border-radius: 0.5rem; padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem; }
.blog-article__content code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.88em; background: var(--surface, #f3f4f6); padding: 0.1em 0.35em; border-radius: 4px; }
.blog-article__content pre code { background: none; padding: 0; }
.blog-article__content blockquote { border-left: 4px solid var(--primary, #9c0820); margin: 0 0 1.25rem; padding: 0.5rem 0 0.5rem 1.25rem; color: var(--text-muted, #4b5563); font-style: italic; }
.blog-article__content hr { border: none; border-top: 1px solid var(--border, #e5e7eb); margin: 2rem 0; }
.blog-article__content table { border-collapse: collapse; width: 100%; margin: 0 0 1.25rem; font-size: 0.92rem; }
.blog-article__content th, .blog-article__content td { border: 1px solid var(--border, #e5e7eb); padding: 0.5rem 0.75rem; text-align: left; }
.blog-article__content th { background: var(--surface, #f9fafb); }

.blog-article__footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border, #e5e7eb); }
.blog-share { display: flex; align-items: center; gap: 0.6rem; }
.blog-share__label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #6b7280); margin-right: 0.25rem; }
.blog-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; border: 1px solid var(--border, #e5e7eb); color: var(--text, #2a2e36); background: var(--background, #fff); transition: all 0.15s ease; }
.blog-share__btn:hover { background: var(--primary, #9c0820); border-color: var(--primary, #9c0820); color: #fff; }

.blog-author-box { margin-top: 1.5rem; background: var(--surface, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: 0.75rem; padding: 1.25rem; }
.blog-author-box__label { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #6b7280); }
.blog-author-box .wp-block-post-author { display: flex; align-items: center; gap: 0.75rem; }
.blog-author-box .wp-block-post-author__avatar img { border-radius: 9999px; }
.blog-author-box .wp-block-post-author__name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; color: var(--headings, #1f2937); }

.blog-comments { margin-top: 2rem; }
.blog-comments .wp-block-comments-title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.25rem; margin-bottom: 1rem; }
.blog-comment { border: 1px solid var(--border, #e5e7eb); border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.75rem; }
.blog-comment__meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
.blog-comments .comment-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.blog-comments .comment-form input[type="text"], .blog-comments .comment-form input[type="email"],
.blog-comments .comment-form input[type="url"], .blog-comments .comment-form textarea { width: 100%; border: 1px solid var(--border, #e5e7eb); border-radius: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.9rem; margin-bottom: 0.9rem; }
.blog-comments .form-submit .submit { background: var(--primary, #9c0820); color: #fff; border: none; border-radius: 0.5rem; padding: 0.65rem 1.5rem; font-weight: 600; cursor: pointer; }
.blog-comments .form-submit .submit:hover { background: var(--primary-dark, #7a0619); }

/* archive */
.webops-blog-archive .foundry-guide-hero__title { text-transform: capitalize; }
.blog-category-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.blog-category-nav__all, .blog-category-nav__list li a { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 500; color: var(--text, #2a2e36); background: var(--surface, #f3f4f6); text-decoration: none; transition: all 0.15s ease; }
.blog-category-nav__all:hover, .blog-category-nav__list li a:hover { background: var(--primary, #9c0820); color: #fff; }
ul.blog-category-nav__list { list-style: none; display: contents; padding: 0; margin: 0; }
.blog-category-nav__list li { margin: 0; }
.blog-category-nav__list li.current-cat a { background: var(--primary, #9c0820); color: #fff; }

.blog-sidebar-cats ul.blog-sidebar-cats__list { list-style: none; padding: 0.35rem 0; margin: 0; }
.blog-sidebar-cats__list li { margin: 0; }
.blog-sidebar-cats__list li a { display: block; padding: 0.55rem 1rem; font-size: 0.9rem; color: var(--text, #2a2e36); text-decoration: none; border-left: 3px solid transparent; }
.blog-sidebar-cats__list li a:hover { color: var(--primary, #9c0820); }
.blog-sidebar-cats__list li.current-cat a { border-left-color: var(--primary, #9c0820); background: #f9ecef; color: var(--primary, #9c0820); font-weight: 600; }

.blog-archive-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .blog-archive-grid { grid-template-columns: repeat(2, 1fr); } }
.blog-pagination { margin-top: 1.5rem; font-size: 0.9rem; }
.blog-pagination a { color: var(--primary, #9c0820); text-decoration: none; }

/* §9 addendum — hide GF "(Required)" indicators (live contact form shows
   none; required-ness communicated by validation, matching the source) */
.wo-contact-grid .gfield_required { display: none; }
/* §10b mobile parity: the module hides the sidebar on mobile (post keeps an
   inline byline; archive shows just the pill nav + cards) */
@media (max-width: 991px) {
	.webops-blog-archive .blog-layout__sidebar { display: none; }
	.webops-blog-single .blog-sidebar-card { display: none; }
}

/* ============================================================
   §11. KNOWLEDGE BASE — skin for the Foundry Knowledgebase
   module (foundry-kb__* structural markup). Crimson banner
   matches the blog/page-banner band; cards/lists follow the
   blog-card conventions. Module CSS carries the grids; this
   section carries all color/type/brand.
   ============================================================ */

.foundry-kb__banner { background: var(--wo-grad-primary, linear-gradient(135deg, #9c0820 0%, #7a0619 100%)); background-color: var(--primary, #9c0820); color: #fff; position: relative; }
.foundry-kb__banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.foundry-kb__banner-inner { position: relative; }
.foundry-kb__crumbs { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.foundry-kb__crumbs a { color: rgba(255,255,255,0.85); text-decoration: none; }
.foundry-kb__crumbs a:hover { color: #fff; text-decoration: underline; }
.foundry-kb__crumbs span { color: rgba(255,255,255,0.5); margin: 0 0.15rem; }
.foundry-kb__title { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: #fff; }
.foundry-kb__deck { color: rgba(255,255,255,0.85); max-width: 720px; }

.foundry-kb__search input[type="search"] { border: 1px solid var(--border, #e5e7eb); border-radius: 0.5rem 0 0 0.5rem; font-size: 1rem; }
.foundry-kb__search input[type="search"]:focus { outline: 2px solid var(--primary, #9c0820); outline-offset: -1px; }
.foundry-kb__search button { background: var(--primary, #9c0820); color: #fff; border: none; border-radius: 0 0.5rem 0.5rem 0; font-weight: 600; }
.foundry-kb__search button:hover { background: var(--primary-dark, #7a0619); }

.foundry-kb__cat-card { background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--primary, #9c0820); border-radius: 0.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.foundry-kb__cat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.foundry-kb__cat-name { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-weight: 700; color: var(--headings, #1f2937); }
.foundry-kb__cat-card:hover .foundry-kb__cat-name { color: var(--primary, #9c0820); }
.foundry-kb__cat-count { background: var(--surface, #f3f4f6); color: var(--text-muted, #6b7280); border-radius: 9999px; padding: 0.1rem 0.6rem; font-weight: 600; }
.foundry-kb__cat-desc { color: var(--text-muted, #6b7280); }

.foundry-kb__list { border: 1px solid var(--border, #e5e7eb); border-radius: 0.75rem; overflow: hidden; }
.foundry-kb__item + .foundry-kb__item { border-top: 1px solid var(--border, #e5e7eb); }
.foundry-kb__item a { background: var(--background, #fff); transition: background 0.15s ease; }
.foundry-kb__item a:hover { background: var(--surface, #f9fafb); }
.foundry-kb__item-title { font-weight: 600; color: var(--headings, #1f2937); }
.foundry-kb__item a:hover .foundry-kb__item-title { color: var(--primary, #9c0820); }
.foundry-kb__item-excerpt { color: var(--text-muted, #6b7280); }

.foundry-kb__popular h2, .foundry-kb__related h2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.25rem; font-weight: 700; color: var(--headings, #1f2937); }

/* article prose = blog article conventions */
.foundry-kb__article { font-size: 1.02rem; line-height: 1.75; color: var(--text, #2a2e36); }
.foundry-kb__article h2 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.5rem; font-weight: 700; color: var(--headings, #1f2937); margin: 2rem 0 0.8rem; }
.foundry-kb__article h3 { font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size: 1.15rem; font-weight: 600; color: var(--headings, #1f2937); margin: 1.5rem 0 0.6rem; }
.foundry-kb__article p { margin: 0 0 1rem; }
.foundry-kb__article a { color: var(--primary, #9c0820); }
.foundry-kb__article ul, .foundry-kb__article ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.foundry-kb__article img { border-radius: 0.5rem; border: 1px solid var(--border, #e5e7eb); margin: 0.5rem 0 1rem; }
.foundry-kb__article pre { background: #1f2937; color: #e5e7eb; border-radius: 0.5rem; padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem; }
.foundry-kb__article code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.88em; background: var(--surface, #f3f4f6); padding: 0.1em 0.35em; border-radius: 4px; }
.foundry-kb__article pre code { background: none; padding: 0; }
.foundry-kb__article table { border-collapse: collapse; width: 100%; margin: 0 0 1.25rem; font-size: 0.92rem; }
.foundry-kb__article th, .foundry-kb__article td { border: 1px solid var(--border, #e5e7eb); padding: 0.5rem 0.75rem; text-align: left; }
.foundry-kb__article th { background: var(--surface, #f9fafb); }
.foundry-kb__article blockquote { border-left: 4px solid var(--primary, #9c0820); margin: 0 0 1.25rem; padding: 0.5rem 0 0.5rem 1.25rem; color: var(--text-muted, #4b5563); }

.foundry-kb__useful { color: var(--text-muted, #6b7280); border-top: 1px solid var(--border, #e5e7eb); padding-top: 1.25rem; }
.foundry-kb__back a { color: var(--primary, #9c0820); text-decoration: none; font-weight: 500; }
.foundry-kb__back a:hover { color: var(--primary-dark, #7a0619); }

/* ═══════════════════════════════════════════════════════════════════════
   §12. HANDOFF BUILD + ADD-ONS (2026-09-27 drift reconcile) — ports of the
   production rules the new pages lean on: the wo-table base + wrapper
   (style.css), the --fit two-column price-table variant, .wo-text-right and
   .wo-fineprint (wo-components.css, added on production 2026-09-05), and
   the callout title (style.css).
   ═══════════════════════════════════════════════════════════════════════ */
.wo-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-8) 0; position: relative; }
.wo-table-wrapper::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8)); pointer-events: none; }
.wo-table-wrapper .wo-table { min-width: 500px; }
.wo-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); overflow: hidden; }
.wo-table th { background: var(--color-bg-light); padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--font-semibold); font-size: var(--text-sm); border-bottom: 2px solid var(--color-border-light); }
.wo-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-sm); }
.wo-table tr:last-child td { border-bottom: none; }
.wo-table tr:hover td { background: rgba(0, 0, 0, 0.02); }
.wo-table__detail { font-weight: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.wo-table-wrapper--fit { overflow-x: visible; }
.wo-table-wrapper--fit::after { content: none; }
.wo-table-wrapper--fit .wo-table { min-width: 0; }
@media (max-width: 480px) {
  .wo-table-wrapper--fit .wo-table th,
  .wo-table-wrapper--fit .wo-table td { padding: .6rem .7rem; }
}
.wo-text-right, .wo-table th.wo-text-right { text-align: right; }
.wo-fineprint { font-size: .92rem; }
.wo-fineprint .wo-link { font-weight: 500; }
.wo-callout__title { font-family: var(--font-heading); font-weight: var(--font-semibold); font-size: var(--text-lg); margin-bottom: var(--space-2); }