/*
Theme Name: OpenClaw Expert
Theme URI: https://openclaw.expert
Author: Imran Hossain
Author URI: https://openclaw.expert
Description: Block theme for openclaw.expert — independent OpenClaw implementation service. Bright Paper/Sage/Forest design system, self-hosted fonts, Rank Math-compatible SEO, llms.txt, guardrail-compliant chrome. No build step.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.9.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: openclaw-expert
Tags: blog, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, accessibility-ready, responsive-layout
*/

/* =============================================================
   1. FONTS — self-hosted, variable, latin subsets, font-display swap.
   Files: assets/fonts/*.woff2 (see assets/fonts/README.md for provenance).
   Fallback faces carry their OWN family names ("Archivo Fallback", "Source
   Serif 4 Fallback", local src + size-adjust) and sit second in each stack.
   Never give them the webfont's family name: the last-declared face wins,
   and a same-named local() face silently replaces the webfont everywhere. All families OFL.
   ============================================================= */

/* Archivo — UI + headings. Variable wght. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/archivo-400-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo Fallback";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 105%;
}
/* Source Serif 4 — guide prose. Variable wght + opsz. */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-400-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-400-italic-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 100%;
}
/* JetBrains Mono — code blocks only. Variable wght. */
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("assets/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   2. RESET
   ============================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--size-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
}
img,
svg,
video {
	max-width: 100%;
	height: auto;
}
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* =============================================================
   3. DESIGN TOKENS — same names as design-reference/ds/tokens/.
   ============================================================= */

:root {
	/* Base palette */
	--ink: #12211b;
	--forest: #17513f;
	--forest-deep: #113e2f;
	--signal: #f0a429;
	--signal-tint: #fdf2de;
	--sage: #edf1ea;
	--slate: #5a6b62;
	--paper: #ffffff;
	--rule: #cfd9d1;
	--mint: #8fb3a4; /* app-icon channel lines only */

	/* Semantic — text */
	--text-primary: var(--ink);
	--text-secondary: var(--slate);
	--text-link: var(--forest);
	--text-on-forest: var(--paper);
	--text-on-signal: var(--ink);

	/* Semantic — surfaces */
	--surface-page: var(--paper);
	--surface-alt: var(--sage);
	--surface-dark: var(--ink);
	--surface-code: var(--sage);
	--surface-warning: var(--signal-tint);

	/* Semantic — lines & controls */
	--border-hairline: var(--rule);
	--border-strong: var(--forest);
	--action-primary: var(--forest);
	--action-primary-hover: var(--forest-deep);
	--action-secondary-hover: var(--sage);
	--status-live: var(--signal);

	/* Families */
	--font-ui: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
	--font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale (token table; pages override headings with clamp()) */
	--size-display: 56px;
	--lh-display: 1.05;
	--ls-display: -0.02em;
	--size-h1: 44px;
	--lh-h1: 1.12;
	--ls-h1: -0.02em;
	--size-h2: 32px;
	--lh-h2: 1.2;
	--size-h3: 24px;
	--lh-h3: 1.3;
	--size-body-lg: 20px;
	--lh-body-lg: 1.6;
	--size-body: 18px;
	--lh-body: 1.65;
	--size-small: 15px;
	--lh-small: 1.5;
	--size-caption: 13px;
	--lh-caption: 1.45;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--section-y: 96px;
	--section-y-mobile: 56px;

	/* Layout */
	--width-content: 1140px;
	--width-narrow: 1000px;
	--width-section-prose: 820px;
	--width-page: 760px;
	--width-wide: 1260px;
	--width-prose: 680px;
	--width-rail: 260px;

	/* Controls */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--border-width: 1px;
	--control-height: 48px;
	--control-height-sm: 38px;
	--control-padding-x: 24px;

	--shadow-floating: 0 8px 24px rgba(18, 33, 27, 0.12);
}

/* =============================================================
   4. BASE TYPE
   ============================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-ui);
	font-weight: 600;
	margin: 0;
}
h1 {
	font-size: var(--size-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}
h2 {
	font-size: var(--size-h2);
	line-height: var(--lh-h2);
	letter-spacing: -0.01em;
}
h3 {
	font-size: var(--size-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
}
h4 {
	font-size: 20px;
	line-height: 1.35;
}
h5 {
	font-size: 17px;
	line-height: 1.45;
}
h6 {
	font-size: var(--size-small);
	line-height: var(--lh-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
p {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-4);
}
a {
	color: var(--text-link);
	text-decoration: none;
}
a:hover {
	color: var(--forest-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}
code,
pre,
kbd,
samp {
	font-family: var(--font-code);
}
::selection {
	background: var(--sage);
	color: var(--ink);
}

/* Focus ring — Forest, visible, never removed. */
:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}

/* Screen reader + skip link */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--paper);
	color: var(--forest);
	padding: 12px 20px;
	border: 2px solid var(--forest);
	border-radius: 0 0 6px 0;
	font-size: var(--size-small);
}
.skip-link:focus {
	left: 0;
}

/* WordPress compatibility */
/* Header part, main and footer part stack flush (design has no gap between them). */
/* Core's root blockGap rule is :where()-zero specificity like this one, so a
   real class selector is needed to win regardless of stylesheet order. */
body .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.alignwide {
	width: min(1140px, 100%);
	margin-inline: auto;
}
.alignfull {
	width: 100%;
}
body.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* =============================================================
   5. PAGE PRIMITIVES
   ============================================================= */

.oce-section {
	position: relative;
}
.oce-section--paper {
	background: var(--paper);
}
.oce-section--sage {
	background: var(--sage);
}
.oce-section--ink {
	background: var(--ink);
	color: var(--paper);
}

.oce-container {
	max-width: var(--width-content);
	margin-inline: auto;
}
.oce-container--narrow {
	max-width: var(--width-narrow);
}
.oce-container--prose {
	max-width: var(--width-section-prose);
}
.oce-container--page {
	max-width: var(--width-page);
}
.oce-container--wide {
	max-width: var(--width-wide);
}

/* The 48×3 rule that sits above every section H2 (Signal inside Forest bands). */
.oce-section__rule {
	width: 48px;
	height: 3px;
	border: 0;
	background: var(--forest);
	margin: 0 0 20px;
}
.oce-section__rule--signal {
	background: var(--signal);
}

/* Rule-separated row lists. */
.oce-rows {
	border-top: 1px solid var(--rule);
}
.oce-rows > * {
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: 1.6;
}
.oce-rows--label > strong,
.oce-rows--label > b {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 18px;
}
.oce-rows--titled {
	display: grid;
	gap: 0;
}
.oce-rows--titled > * > strong,
.oce-rows--titled > * > b {
	display: block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 6px;
}
.oce-rows--split > * {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}
.oce-rows--split > * > :first-child {
	flex: 3 1 220px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}
.oce-rows--split > * > :not(:first-child) {
	flex: 7 1 380px;
	margin: 0;
}

/* Check rows — Forest tick + title + serif line. */
.oce-check-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-check-row__icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--forest);
	margin-top: 1px;
}
.oce-check-row__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
}
.oce-check-row__text {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	margin: 4px 0 0;
}

/* Step cards. */
.oce-steps {
	display: grid;
	gap: 40px 28px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.oce-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-step {
	border-top: 2px solid var(--forest);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.oce-step__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.oce-step__numeral {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--forest);
}
.oce-step__duration {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-step__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-step__text {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* Forest CTA band. */
.oce-band {
	background: var(--forest);
	color: var(--text-on-forest);
	border-radius: var(--radius-lg);
	padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 64px);
}
.oce-band h2,
.oce-band .oce-section__rule--signal {
	color: var(--paper);
}
.oce-band p {
	color: var(--paper);
}
.oce-band a:not([class]) {
	color: var(--paper);
	text-decoration: none;
}
.oce-band a:not([class]):hover {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Breadcrumbs. */
.oce-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: 0 0 clamp(24px, 4vw, 36px);
}
.oce-crumbs a {
	position: relative;
	color: var(--forest);
}
/* 44px hit area on the 25px crumb links without changing the row. */
.oce-crumbs a::before {
	content: "";
	position: absolute;
	inset: -10px -5px;
}
.oce-crumbs a:hover {
	color: var(--forest-deep);
}
.oce-crumbs [aria-hidden="true"],
.oce-crumbs .separator,
.oce-crumbs .last {
	color: var(--slate);
}
/* Rank Math breadcrumb markup: <nav class="rank-math-breadcrumb"><p>…</p></nav>. */
.oce-crumbs .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: inherit;
	color: inherit;
}
.oce-crumbs [aria-current="page"] {
	color: var(--slate);
}

/* Pagination — 44px boxes. */
.oce-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.oce-pagination__count {
	color: var(--slate);
	font-size: var(--size-small);
}
.oce-pagination__links {
	display: flex;
	gap: 8px;
	align-items: center;
}
.oce-pagination__links a,
.oce-pagination__links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}
.oce-pagination__links a:hover {
	border-color: var(--forest);
	text-decoration: none;
}
.oce-pagination__links .current,
.oce-pagination__links [aria-current="page"] {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
	font-weight: 600;
}
.oce-pagination__links .dots {
	border-color: transparent;
	color: var(--slate);
}

/* =============================================================
   6. COMPONENTS (.oce-*)
   ============================================================= */

/* Button — 48px md / 38px sm. Hover: darker fill / Sage fill / underline only. */
.oce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--control-height);
	padding: 0 var(--control-padding-x);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--action-primary);
	color: var(--text-on-forest);
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}
.oce-btn:hover {
	background: var(--action-primary-hover);
	color: var(--text-on-forest);
	text-decoration: none;
}
.oce-btn--secondary {
	background: transparent;
	color: var(--forest);
	border-color: var(--forest);
}
.oce-btn--secondary:hover {
	background: var(--action-secondary-hover);
	color: var(--forest);
}
.oce-btn--text {
	background: none;
	border: 0;
	padding: 10px 0;
	height: auto;
	min-height: 44px; /* tap target; the fill-less variant has no box of its own */
	color: var(--forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oce-btn--text:hover {
	background: none; /* .oce-btn:hover would fill it Pine Shadow, hiding the Pine Shadow text */
	color: var(--forest-deep);
}
.oce-btn--sm {
	position: relative;
	height: var(--control-height-sm);
	padding: 0 16px;
	font-size: var(--size-small);
}
/* The 38px small button keeps its look; an invisible layer makes the hit area 44px. */
.oce-btn--sm::before {
	content: "";
	position: absolute;
	inset: -4px 0;
}
.oce-btn--paper {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.oce-btn--paper:hover {
	background: var(--sage);
	color: var(--ink);
	border-color: var(--sage);
}
.oce-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Badge. */
.oce-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--rule);
	background: var(--sage);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}
.oce-badge--forest {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
}
.oce-badge--signal {
	background: var(--signal-tint);
	border-color: var(--signal);
	color: var(--ink);
}

/* StatusDot — always with text. */
.oce-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--size-small);
	color: var(--ink);
}
.oce-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rule);
	flex: none;
}
.oce-status--live::before {
	background: var(--signal);
}

/* Card. */
.oce-card {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: none;
}
.oce-card--emphasis {
	border: 2px solid var(--forest);
}
.oce-card--sm {
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

/* Callout. */
.oce-callout {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 20px;
	margin: 16px 0;
	background: var(--paper);
}
.oce-callout__icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--slate);
}
.oce-callout__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	margin: 0 0 4px;
}
.oce-callout__body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-callout--note {
	background: var(--sage);
}
.oce-callout--note .oce-callout__icon {
	color: var(--slate);
}
.oce-callout--warning {
	background: var(--signal-tint);
	border-color: var(--signal);
}
.oce-callout--warning .oce-callout__icon {
	color: var(--ink);
}
.oce-callout--security {
	border-color: var(--forest);
}
.oce-callout--security .oce-callout__icon {
	color: var(--forest);
}

/* Code block. */
.oce-code {
	background: var(--surface-code);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin: 24px 0;
}
.oce-code__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.oce-code__lang {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--ink); /* Slate only at 15px+ and never on Sage (PRODUCT.md) */
}
.oce-code__copy {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--forest);
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: 3px 10px;
	cursor: pointer;
	position: relative;
}
/* The 29px chip keeps its look; an invisible layer makes the hit area 45px
   (insets count from the padding box, inside the 1px border). */
.oce-code__copy::before {
	content: "";
	position: absolute;
	inset: -9px -4px;
}
.oce-code__copy:hover {
	border-color: var(--forest);
}
.oce-code pre {
	margin: 0;
	font-family: var(--font-code);
	font-size: 15px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
	background: none;
	padding: 0;
}
.oce-code .oce-prompt {
	color: var(--slate);
	user-select: none;
}

/* PriceRow. */
.oce-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.oce-price__amount {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 44px;
	letter-spacing: -0.02em;
	line-height: 1.12;
}
.oce-price__cadence {
	font-family: var(--font-ui);
	font-size: 17px;
	color: var(--slate);
}
.oce-price__note {
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}

/* AddOnRow. */
.oce-addon {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.5;
}
.oce-addon__label {
	flex: 1;
	min-width: 0;
}
.oce-addon__note {
	display: block;
	font-size: var(--size-small);
	color: var(--slate);
	margin-top: 2px;
}
.oce-addon__amount {
	flex: none;
	text-align: right;
	color: var(--slate);
}

/* AffiliateDisclosure. */
.oce-affiliate-disclosure {
	background: var(--sage);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin: 16px 0;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	line-height: 1.5;
}
.oce-affiliate-disclosure a {
	color: var(--forest);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* AffiliateOption. */
.oce-affiliate-option {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 20px;
	margin: 16px 0;
}
.oce-affiliate-option__provider {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 20px;
}
.oce-affiliate-option__best-for {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: 2px 0 12px;
}
.oce-affiliate-option__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
}
.oce-affiliate-option__grid dt {
	font-weight: 600;
}
.oce-affiliate-option__grid dd {
	margin: 0;
}
.oce-affiliate-option__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: baseline;
	border-top: 1px solid var(--rule);
	padding-top: 12px;
	margin-top: 12px;
}
.oce-affiliate-option__footer a {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 500;
}
.oce-affiliate-option__disclosure {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--slate);
}

/* ArticleMeta. */
.oce-article-meta {
	display: flex;
	align-items: center;
	gap: 16px;
}
.oce-article-meta__photo {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px dashed var(--rule);
	background: var(--sage);
}
.oce-article-meta__name {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 17px;
}
.oce-article-meta__location {
	font-family: var(--font-ui);
	font-weight: 400;
	color: var(--slate);
}
.oce-article-meta__line {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}

/* ServiceCTA strip. */
.oce-service-cta {
	background: var(--sage);
	border-radius: var(--radius-md);
	padding: 24px;
}
.oce-service-cta--compact {
	padding: 16px;
}
.oce-service-cta__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 17px;
	margin: 0 0 8px;
}
.oce-service-cta__body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-service-cta__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 12px;
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Fields — Input / Select / Checkbox. */
.oce-field {
	margin-bottom: 20px;
}
.oce-field__label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 500;
	margin-bottom: 6px;
}
.oce-field__hint {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--slate);
	margin-top: 6px;
}
.oce-field__error {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--ink);
	background: var(--signal-tint);
	padding: 2px 6px;
	border-radius: 4px;
	margin-top: 6px;
}
.oce-input,
.oce-select,
.oce-textarea {
	width: 100%;
	height: var(--control-height);
	padding: 0 16px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: 17px;
}
.oce-textarea {
	height: auto;
	min-height: 120px;
	padding: 12px 16px;
	font-family: var(--font-body);
}
/* Design system: visible Forest focus on every control, never outline: none. */
.oce-input:focus,
.oce-select:focus,
.oce-textarea:focus {
	border-color: var(--forest);
	outline: 2px solid var(--forest);
	outline-offset: 1px;
}
.oce-input[aria-invalid="true"],
.oce-select[aria-invalid="true"],
.oce-textarea[aria-invalid="true"] {
	border-color: var(--signal);
}
.oce-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: var(--font-ui);
	font-size: 17px;
}
.oce-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--forest);
	margin-top: 3px;
}

/* Accordion — FAQ. */
.oce-faq {
	border-top: 1px solid var(--rule);
}
.oce-faq details {
	border-bottom: 1px solid var(--rule);
}
.oce-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.35;
}
.oce-faq summary::-webkit-details-marker {
	display: none;
}
.oce-faq summary::after {
	content: "+";
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: 24px;
	color: var(--slate);
	flex: none;
}
.oce-faq details[open] summary::after {
	content: "−";
}
.oce-faq__answer {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: 1.65;
	max-width: 68ch; /* the 820px column runs 85–97 characters a line otherwise */
	margin: 0 0 20px;
}

/* TableOfContents rail. */
.oce-toc {
	font-family: var(--font-ui);
}
.oce-toc__title {
	font-size: 13px;
	color: var(--ink); /* Slate only at 15px+ (PRODUCT.md) */
	margin: 0 0 12px;
}
.oce-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--rule);
}
.oce-toc li {
	border-left: 2px solid transparent;
	margin-left: -1px;
}
.oce-toc a {
	display: block;
	padding: 6px 0 6px 16px;
	font-size: var(--size-small);
	line-height: 1.4;
	color: var(--slate);
}
.oce-toc a:hover {
	color: var(--ink);
	text-decoration: none;
}
.oce-toc li.is-active {
	border-left-color: var(--forest);
}
.oce-toc li.is-active a {
	color: var(--forest);
	font-weight: 500;
}
/* Touch screens wide enough for the rail (tablets in landscape) get 44px rows;
   mouse users keep the design's compact list, which fits the sticky rail. */
@media (pointer: coarse) {
	.oce-toc a {
		padding-block: 12px;
	}
	.oce-railcta__links {
		gap: 0;
	}
	.oce-railcta__links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* =============================================================
   7. HEADER
   ============================================================= */

/* The template part's <header> wraps the bar at exactly its height, so a
   sticky bar inside it had no room to move; the wrapper sticks instead. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
}
.oce-header {
	position: relative; /* containing block for the mega menu and drawer */
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
}
.oce-header__inner {
	/* Design: max-width 1140 + 24px padding, content-box — 1140 of content. */
	max-width: calc(var(--width-content) + 48px);
	margin: 0 auto;
	height: 72px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.oce-header__brand {
	flex: none;
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}
.oce-header__brand img {
	display: block;
	width: 158px;
	height: 26px;
}
.oce-nav {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	font-size: var(--size-small);
}
.oce-nav__link,
.oce-nav__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--ink);
	border-bottom: 2px solid transparent;
}
.oce-nav__link:hover,
.oce-nav__toggle:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* 44px hit area without moving the active-state underline: the links stay
   35px tall and an invisible layer extends them into the 72px bar. */
.oce-nav .oce-nav__link,
.oce-nav__toggle {
	position: relative;
}
.oce-nav .oce-nav__link::before,
.oce-nav__toggle::before {
	content: "";
	position: absolute;
	inset: -5px -8px -7px; /* from the padding box: the 2px underline border sits outside it */
}
.oce-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-nav__list li {
	margin: 0;
}
.oce-nav__toggle.is-active,
.oce-nav__list .is-active > .oce-nav__link {
	border-bottom-color: var(--forest);
}
.oce-nav__caret {
	display: flex;
	color: var(--slate);
	transition: transform 160ms ease;
}
.oce-nav__toggle[aria-expanded="true"] .oce-nav__caret {
	transform: rotate(180deg);
}
.oce-header__cta {
	flex: none;
}

/* Mega menu. */
.oce-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 72px;
	background: var(--paper);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	box-shadow: var(--shadow-floating);
}
.oce-mega__inner {
	max-width: calc(var(--width-content) + 48px);
	margin: 0 auto;
	padding: 32px 24px 28px;
}
.oce-mega__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px 40px;
}
.oce-mega__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.oce-mega__card:hover {
	border-color: var(--forest);
	color: var(--ink);
	text-decoration: none;
}
.oce-mega__card-title {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
}
.oce-mega__card-desc {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}
.oce-mega__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	font-size: var(--size-small);
}

/* Hamburger + mobile drawer. */
.oce-burger {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	padding: 10px 11px; /* 44 × 46 */
	cursor: pointer;
	color: var(--ink);
}
.oce-burger__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 5px 0;
	transition:
		transform 160ms ease,
		opacity 160ms ease;
}
.oce-burger[aria-expanded="true"] .oce-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.oce-burger[aria-expanded="true"] .oce-burger__bar:nth-child(2) {
	opacity: 0;
}
.oce-burger[aria-expanded="true"] .oce-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.oce-drawer {
	position: absolute;
	left: 0;
	right: 0;
	top: 72px;
	background: var(--paper);
	box-shadow: var(--shadow-floating);
	border-bottom: 1px solid var(--rule);
	padding: 8px 24px 24px;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
}
.oce-drawer a:not(.oce-btn) {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-ui);
	font-size: 17px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}
.oce-drawer a:not(.oce-btn):hover {
	color: var(--forest);
	text-decoration: none;
}
.oce-drawer .oce-nav__list {
	display: block;
}
.oce-drawer .is-active > a {
	color: var(--forest);
}
/* a.oce-mega__card ties .oce-drawer a:not(.oce-btn) on specificity (0,2,1) and wins by order. */
.oce-drawer a.oce-mega__card {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
}
.oce-drawer .oce-mega__card-desc {
	font-size: 15px;
	color: var(--slate);
}
.oce-drawer__label {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--slate);
	padding: 20px 0 4px;
}
.oce-drawer__cta {
	margin-top: 20px;
}

@media (max-width: 900px) {
	.oce-nav,
	.oce-header__cta {
		display: none;
	}
	.oce-burger {
		display: block;
	}
}

/* =============================================================
   8. FOOTER
   ============================================================= */

.oce-footer {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(56px, 7vw, 80px) 24px 40px;
	font-family: var(--font-ui);
}
.oce-footer__grid {
	max-width: var(--width-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 40px 32px;
}
.oce-footer__tagline {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--sage);
	margin: 20px 0 0;
	max-width: 32ch;
}
.oce-footer__email {
	display: inline-block;
	margin: 20px 0 0;
	font-size: var(--size-small);
	color: var(--paper);
}
.oce-footer__email:hover {
	color: var(--paper);
}
.oce-footer__heading {
	font-size: var(--size-small);
	font-weight: 600;
	color: var(--paper);
	margin: 0 0 4px; /* the 44px link rows carry their own air */
}
.oce-footer__list {
	display: grid;
	font-size: var(--size-small);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Footer links are 44px rows (tap-target commitment) instead of 15px text
   on a 10px gap; the same goes for the brand and meta-row links. */
.oce-footer__list a,
.oce-footer__meta a,
.oce-footer__brand > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.oce-footer__list a {
	color: var(--paper);
}
.oce-footer__list a:hover {
	color: var(--paper);
}
.oce-footer__list span {
	color: var(--sage);
}
.oce-footer__bottom {
	max-width: var(--width-content);
	margin: clamp(48px, 6vw, 64px) auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: grid;
	gap: 12px;
	justify-items: center;
	text-align: center;
}
.oce-footer__legal {
	margin: 0;
	max-width: 64ch; /* about 75 characters a line at 13px */
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--sage);
}
.oce-footer__meta {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 28px;
	margin-top: 12px;
	font-family: var(--font-ui);
	font-size: 13px;
}
.oce-footer__meta span {
	color: var(--sage);
}
.oce-footer__copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.oce-footer__mark {
	display: block;
	width: 18px;
	height: 18px;
	opacity: 0.8;
}
.oce-footer__meta a {
	color: var(--paper);
}
.oce-footer__meta-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

/* =============================================================
   9. PROSE — post/page body.
   ============================================================= */

.prose {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: var(--lh-body);
	color: var(--ink);
	max-width: var(--width-prose);
}
.prose > * {
	margin-block: 0 var(--space-4);
}
.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--font-ui);
	color: var(--ink);
	scroll-margin-top: 96px;
}
.prose h2 {
	font-weight: 600;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.2;
	margin: clamp(40px, 5vw, 56px) 0 20px;
}
.prose > h2:first-child {
	margin-top: 0;
}
.prose h3 {
	font-weight: 500;
	font-size: clamp(21px, 2.2vw, 24px);
	line-height: 1.3;
	margin: 32px 0 12px;
}
.prose h4 {
	font-weight: 600;
	font-size: 19px;
	margin: 24px 0 8px;
}
.prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.prose strong {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 17px;
}
.prose blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--forest);
	font-size: var(--size-body-lg);
	line-height: 1.6;
}
.prose ul,
.prose ol {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.prose li {
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
	font-size: var(--size-body);
	line-height: 1.6;
}
.prose li ul,
.prose li ol {
	border-top: 0;
	margin: 8px 0 0;
}
.prose li li {
	padding: 8px 0;
	border-bottom: 0;
}
.prose code {
	font-family: var(--font-code);
	font-size: 15px;
	background: var(--surface-code);
	border-radius: 4px;
	padding: 1px 5px;
}
.prose hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: clamp(40px, 5vw, 56px) 0;
}

/* Tables scroll inside the figure, never the page. */
.oce-table-wrap {
	overflow-x: auto;
	margin: 24px 0;
}
.prose table,
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-family: var(--font-ui);
	font-size: 17px;
}
/* Headers wrap: one-line headers ("Status Code (Unhealthy)") made short
   columns wide and squeezed the prose column to a word a line. Code in a
   cell stays on one line instead. */
.prose th,
.wp-block-table th {
	text-align: left;
	vertical-align: bottom;
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: 2px solid var(--forest);
}
.prose td code,
.wp-block-table td code {
	white-space: nowrap;
}
/* Narrow screens: simple tables stack, one block per row, each cell led by
   its column header (PHP sets data-label, data-head and the table roles). */
@media (max-width: 599px) {
	.prose [data-stack] {
		background: none;
	}
	.prose [data-stack] table {
		min-width: 0;
	}
	.prose [data-stack] :is(table, thead, tbody, tr, th, td) {
		display: block;
	}
	.prose [data-stack] tr[data-head] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.prose [data-stack] tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--rule);
	}
	.prose [data-stack] tr:not([data-head]):first-of-type,
	.prose [data-stack] tr[data-head] + tr {
		border-top: 2px solid var(--forest);
	}
	.prose [data-stack] :is(th, td):not([data-head] *) {
		display: grid;
		grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr);
		gap: 12px;
		padding: 4px 0;
		border: 0;
		text-align: left;
	}
	.prose [data-stack] [data-label]::before {
		content: attr(data-label);
		font-weight: 600;
	}
	.prose [data-stack] td code {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}
.prose td,
.wp-block-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--sage);
}

/* Native code blocks (core/code) get the CodeBlock chrome without JS. */
.wp-block-code {
	background: var(--surface-code);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	font-family: var(--font-code);
	font-size: 15px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}

/* =============================================================
   10. TEMPLATE SCAFFOLDS (page head, search, 404)
   ============================================================= */

.oce-page-head {
	padding: clamp(40px, 6vw, 72px) 24px clamp(28px, 4vw, 40px);
}
.oce-page-head h1 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(32px, 4.2vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 20ch;
}
.oce-page-head__standfirst {
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.6;
	margin: 20px 0 0;
}
.oce-page-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	align-items: baseline;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-page-body {
	padding: 0 24px clamp(64px, 8vw, 96px);
}
.oce-page-body .prose {
	margin-inline: auto;
}

.oce-page-head__summary {
	background: var(--sage);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin: 0 0 clamp(40px, 5vw, 56px);
}
.oce-page-head__summary p {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: 1.6;
	margin: 0;
}

.oce-404 h1 {
	font-size: clamp(32px, 4.2vw, 48px);
	letter-spacing: -0.02em;
}
.oce-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	font-family: var(--font-ui);
	font-size: 17px;
	margin-top: 8px;
}
.oce-404__cols {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 32px;
}
.oce-404__cols h2 {
	font-size: 20px;
	margin-bottom: 12px;
}
.oce-404__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-404__cols li {
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 17px;
}

.oce-search-head h1 {
	font-size: clamp(28px, 3.6vw, 40px);
	letter-spacing: -0.02em;
}
.oce-searchform {
	display: flex;
	gap: 8px;
	margin: 24px 0;
}
.oce-searchform .oce-input {
	flex: 1 1 auto;
}
.oce-search-results {
	list-style: none;
	margin: 24px 0;
	padding: 0;
}
.oce-search-results li {
	padding: 20px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-search-results__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 20px;
	display: block;
	margin-bottom: 4px;
}
.oce-search-results__excerpt {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--ink);
	margin: 0;
}
.oce-search-none {
	font-family: var(--font-body);
	font-size: var(--size-body);
}

/* =============================================================
   11. UTILITIES
   ============================================================= */

.u-hide-empty:empty {
	display: none;
}
.u-flex {
	display: flex;
}
.u-grid-2 {
	display: grid;
	gap: 40px 64px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.u-mt-0 {
	margin-top: 0 !important;
}
.u-sr-only {
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
}

/* Every page carries exactly one h1 — hide the decorative blog-name h1 WP
   emits in some fallbacks, keep it for screen readers where needed. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* =============================================================
   12. LANDING — front page (patterns/home-*.php)
   Values transcribed from design-reference/pages/landing-page.dc.html.
   Font rule of the design: its base.css sets every <p> to Source Serif, so a
   <p> with no font-family is SERIF; divs/spans with none inherit Archivo from
   the page wrapper. Only non-p text therefore gets var(--font-ui) here.
   ============================================================= */

.oce-std {
	padding: clamp(72px, 9vw, 120px) 24px clamp(52px, 7vw, 84px);
}
.oce-std--deep {
	padding-bottom: clamp(72px, 9vw, 104px);
}
.oce-std--faq {
	padding-bottom: clamp(32px, 4vw, 48px);
}
.oce-home section[id] {
	scroll-margin-top: 72px;
}
/* Landing bands stack flush like the design. Core's flow layout adds the
   theme.json blockGap (16px) above every child of the main group. */
main.oce-home > * {
	margin-block-start: 0;
}

/* Section H2 + margin variants (design margin-bottom per section). */
.oce-h2 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(30px, 4.2vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 32px;
}
.oce-h2--tight {
	margin-bottom: 12px;
}
.oce-h2--sm {
	margin-bottom: 20px;
}
.oce-h2--installer {
	margin-bottom: 24px;
}
.oce-h2--hosting {
	margin-bottom: 40px;
	max-width: 24ch;
}
.oce-h2--lg {
	margin-bottom: 48px;
}
.oce-h2--flush {
	margin: 0;
}
.oce-statement {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0;
}

/* Hero — centred. */
.oce-hero {
	background: var(--paper);
	padding: clamp(64px, 9vw, 112px) var(--space-5) clamp(56px, 7vw, 88px);
}
.oce-hero__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.oce-hero h1 {
	font-size: clamp(38px, 5.8vw, 66px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}
.oce-hero__lede {
	font-family: var(--font-body);
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.6;
	max-width: 540px;
	margin: 28px auto 0;
	text-wrap: pretty;
}
.oce-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: 40px;
}
/* A standalone link beside the button needs no underline at rest (WCAG
   1.4.1 covers links inside running text); it underlines on hover only. */
.oce-hero .oce-btn--text {
	text-decoration: none;
}
.oce-hero .oce-btn--text:hover {
	text-decoration: underline;
}
.oce-hero__note {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: var(--space-5) 0 0;
	text-wrap: balance;
}
/* The optional Sage sections (case study, installer) stay hidden until the
   owner fills them in, which leaves Paper on Paper with no band change to
   mark the edge: the stacked paddings read as 200px+ of dead space. The book
   band is designed to sit close under the FAQ and keeps its own padding. */
.oce-hero + .oce-section--paper,
.oce-home .oce-section--paper + .oce-section--paper:not(.oce-book) {
	padding-top: clamp(32px, 4vw, 48px);
}
/* A centred 4–5 line serif lede is hard to scan; small screens set the hero
   on the left gutter the header logo already uses. */
@media (max-width: 781px) {
	.oce-hero__inner {
		text-align: left;
	}
	.oce-hero__actions {
		justify-content: flex-start;
	}
}

/* Case study + animated chat illustration. */
.oce-case {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3vw, 48px);
	align-items: stretch;
}
.oce-case__text,
.oce-case__visual {
	flex: 6 1 400px;
	min-width: 0;
}
.oce-case__visual {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}
.oce-case__statement {
	max-width: 34ch;
	margin: 0 0 12px;
}
.oce-case__note {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 32px;
	max-width: 56ch;
}
.oce-case__rows {
	border-top: 1px solid var(--rule);
	padding-top: 20px;
}
.oce-case__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-case__row:first-child {
	padding-top: 0;
}
.oce-case__row p {
	margin: 0;
}
.oce-case__label {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}
.oce-case__caption {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	margin: 0;
}
.oce-case__caption strong {
	flex: none;
	font-weight: 500;
}

.oce-chat {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.oce-chat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rule);
}
.oce-chat__head img {
	width: 24px;
	height: 24px;
	flex: none;
}
.oce-chat__name {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}
.oce-chat__status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.4;
}
.oce-chat__live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--signal);
	flex: none;
	animation: oce-live 2s ease-in-out infinite;
}
.oce-chat__body {
	background: var(--sage);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	justify-content: center;
}
.oce-chat__day {
	align-self: center;
	font-family: var(--font-ui);
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: 3px 10px;
	margin-bottom: 4px;
}
.oce-chat__msg {
	max-width: 86%;
	padding: 12px 14px;
	opacity: 0;
	animation: 18s ease-in-out infinite;
}
.oce-chat__msg p {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
}
.oce-chat__msg--out {
	align-self: flex-end;
	background: var(--forest);
	border-radius: 14px 14px 4px 14px;
}
.oce-chat__msg--out p,
.oce-chat__msg--out .oce-chat__time {
	color: var(--paper);
}
.oce-chat__msg--in {
	align-self: flex-start;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 14px 14px 14px 4px;
}
.oce-chat__time {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin-top: 6px;
}
.oce-chat__msg--1 {
	animation-name: oce-msg1;
}
.oce-chat__msg--2 {
	animation-name: oce-msg2;
}
.oce-chat__msg--3 {
	animation-name: oce-msg3;
}
.oce-chat__msg--4 {
	animation-name: oce-msg4;
}
.oce-chat__typing {
	align-self: flex-start;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 14px 14px 14px 4px;
	box-sizing: content-box;
	height: 0;
	padding: 0 16px;
	margin-bottom: -10px;
	border-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 5px;
	opacity: 0;
	animation: 18s ease-in-out infinite;
}
.oce-chat__typing--1 {
	animation-name: oce-typing1;
}
.oce-chat__typing--2 {
	animation-name: oce-typing2;
}
.oce-chat__typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--slate);
	animation: oce-dot 1.2s ease-in-out infinite;
}
.oce-chat__typing span:nth-child(2) {
	animation-delay: 0.2s;
}
.oce-chat__typing span:nth-child(3) {
	animation-delay: 0.4s;
}
.oce-chat__compose {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--rule);
}
.oce-chat__input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 9px 16px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-chat__send {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--forest);
	display: flex;
	align-items: center;
	justify-content: center;
}
@keyframes oce-live {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}
@keyframes oce-msg1 {
	0%, 3% { opacity: 0; transform: translateY(8px); }
	6%, 88% { opacity: 1; transform: none; }
	93%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes oce-msg2 {
	0%, 20% { opacity: 0; transform: translateY(8px); }
	23%, 88% { opacity: 1; transform: none; }
	93%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes oce-msg3 {
	0%, 47% { opacity: 0; transform: translateY(8px); }
	50%, 88% { opacity: 1; transform: none; }
	93%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes oce-msg4 {
	0%, 64% { opacity: 0; transform: translateY(8px); }
	67%, 88% { opacity: 1; transform: none; }
	93%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes oce-typing1 {
	0%, 9% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; border-width: 0; }
	12%, 19% { opacity: 1; height: 32px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 0; border-width: 1px; }
	20%, 100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; border-width: 0; }
}
@keyframes oce-typing2 {
	0%, 53% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; border-width: 0; }
	56%, 63% { opacity: 1; height: 32px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 0; border-width: 1px; }
	64%, 100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; border-width: 0; }
}
@keyframes oce-dot {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}
/* Reduced motion: the global rule stops every animation, which would leave the
   messages at opacity 0 — show the whole conversation, drop the typing dots. */
@media (prefers-reduced-motion: reduce) {
	.oce-chat__msg {
		opacity: 1 !important;
		transform: none !important;
	}
	.oce-chat__typing {
		display: none !important;
	}
}

/* What we install — two-column check rows. */
.oce-install {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 0 48px;
	border-top: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-install__item {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-tick {
	flex: none;
	align-self: flex-start;
	width: 26px;
	height: 26px;
	color: var(--forest);
	margin-top: 2px;
}
.oce-install__title {
	font-family: var(--font-ui);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}
.oce-install__text {
	font-size: 17px;
	line-height: 1.6;
	margin: 6px 0 0;
}

/* Meet your installer. */
.oce-installer {
	max-width: 680px;
}
.oce-installer p {
	max-width: 60ch;
	margin: 0 0 20px;
}
.oce-installer p:last-child {
	margin-bottom: 0;
}
.oce-installer .oce-installer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--slate);
	margin: 24px 0 0;
}

/* Rule-topped row of short statements (process meta, closing lines). */
.oce-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 32px;
	margin: 48px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}
.oce-meta-row p {
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-meta-row strong {
	font-weight: 600;
}

/* Pricing. */
.oce-pricing__lede {
	font-size: 20px;
	line-height: 1.6;
	max-width: 70ch;
	margin: 0 0 48px;
}
.oce-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
	align-items: stretch;
	container-type: inline-size;
}
.oce-tier {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.oce-tier--recommended {
	border: 2px solid var(--forest);
}
.oce-tier__badge {
	min-height: 34px;
}
/* The empty badge slot aligns tier names across side-by-side cards; one
   column (narrower than 2 × 280px + 24px gap) has nothing to align with. */
@container (max-width: 583px) {
	.oce-tier__badge:empty {
		display: none;
	}
}
.oce-tier__name {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}
.oce-tier__audience {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}
.oce-tier .oce-price {
	padding-top: 8px;
}
.oce-tier__points {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.5;
}
.oce-tier__cta {
	margin-top: auto;
	padding-top: 16px;
}
.oce-pricing__same {
	font-size: 18px;
	line-height: 1.65;
	margin: 32px 0 0;
	max-width: 74ch;
}
.oce-support {
	background: var(--paper);
	border: 1px solid var(--forest);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}
.oce-support__body {
	flex: 1 1 340px;
	min-width: 0;
}
.oce-support__title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 8px;
}
.oce-support .oce-price {
	margin-bottom: 16px;
}
.oce-support .oce-price__amount {
	font-size: 36px;
	line-height: 1.2;
}
.oce-support__lead {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 0 16px;
}
.oce-support__text {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
}
.oce-support__cta {
	flex: none;
}
.oce-addons {
	margin-top: 48px;
	max-width: 760px;
}
.oce-addons summary {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	padding: 8px 0;
	margin: 0 0 16px;
}
.oce-addons summary::-webkit-details-marker {
	display: none;
}
/* The design hides every summary marker; this keeps a visible "expands" cue. */
.oce-addons summary::after {
	content: "+";
	font-weight: 400;
	font-size: 22px;
	color: var(--slate);
}
.oce-addons[open] summary::after {
	content: "−";
}
.oce-addons__list {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 10px 12px 0;
}
.oce-addons__note,
.oce-pricing__close {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink); /* both sit on the Sage band: no Slate body copy on Sage */
	margin: 16px 0 0;
}
.oce-pricing__close {
	margin-top: 40px;
	text-align: center;
}

/* Managed hosting comparison. */
.oce-hosting {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(32px, 4vw, 56px);
}
.oce-hosting__col {
	min-width: 0;
	border-top: 2px solid var(--slate);
	padding-top: 20px;
}
.oce-hosting__col--own {
	border-top-color: var(--forest);
}
.oce-hosting__kicker {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: 0 0 12px;
}
.oce-hosting__col--own .oce-hosting__kicker {
	color: var(--forest);
}
.oce-hosting__col h3 {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.oce-hosting__col p {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
	max-width: 62ch;
}
.oce-close-line {
	margin: 48px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--rule);
}
.oce-close-line p {
	font-family: var(--font-ui);
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 34ch;
}

/* Access, credentials, and handoff — wide Paper panel on Sage. */
.oce-panel {
	/* Design is content-box: 1260 of content plus its padding and border. */
	max-width: calc(var(--width-wide) + 2 * clamp(28px, 4.5vw, 56px) + 2px);
	margin: 0 auto;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4.5vw, 56px);
}
.oce-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 36px 56px;
	align-items: start;
}
.oce-block {
	border-top: 1px solid var(--rule);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.oce-block h3 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}
.oce-block p {
	margin: 0;
}
.oce-panel__foot {
	font-size: 17px;
	line-height: 1.6;
	margin: 40px 0 0;
	padding-top: 14px; /* + the 44px link box keeps the text where 24px put it */
	border-top: 1px solid var(--rule);
}
.oce-panel__foot a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Book band. */
.oce-book {
	padding: clamp(32px, 4vw, 48px) 24px clamp(72px, 9vw, 104px);
}
/* Design band is content-box: 1140 of content plus its side padding. */
.oce-container--band {
	max-width: calc(var(--width-content) + 2 * clamp(28px, 4vw, 64px));
}
.oce-band__inner {
	max-width: 620px;
}
.oce-band .oce-section__rule--signal {
	margin-bottom: 24px;
}
.oce-band .oce-h2 {
	color: var(--paper);
}
.oce-band__text {
	font-size: 18px;
	line-height: 1.65;
	margin: 20px 0 0;
}
.oce-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 32px;
}
.oce-band__actions > a:not(.oce-btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Guides. */
.oce-guides__intro {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 40px;
	max-width: 64ch;
}
.oce-guide-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
}
.oce-guide-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 28px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
	scroll-margin-top: 88px;
}
.oce-guide-card:hover {
	border-color: var(--forest);
	color: var(--ink);
	text-decoration: none;
}
.oce-guide-card__title {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}
.oce-guide-card__text {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-guide-card__date {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: auto 0 0;
	padding-top: 16px;
}
.oce-links-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: baseline;
	margin: 24px 0 0;
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
}
.oce-links-row > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.oce-install__close {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: baseline;
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
}
.oce-install__close .oce-statement {
	flex: 1 1 280px;
	max-width: 26ch;
}
.oce-install__close p:not(.oce-statement) {
	flex: 2 1 340px;
	max-width: 56ch;
	margin: 0;
}

/* In-text links (WCAG 1.4.1, Lighthouse link-in-text-block): Forest on Ink is
   ~1.5:1, so colour alone does not mark a link inside running text. Links that
   sit inside sentences get the underline the design only shows on hover. */
.oce-meta-row p a:not([class]),
.oce-block p a:not([class]),
.oce-case__row p a:not([class]),
.oce-links-row span a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
/* Article body links are underlined by .prose a. Breadcrumbs (Rank Math wraps
   them in a <p>) and standalone link lines keep the design's plain style. */

/* =============================================================
   13. GUIDES — index, archives, single guide
   Values from design-reference/pages/guides.dc.html,
   single-post.dc.html (guide layout) and security-reference.dc.html
   (reference layout). Bare <p> is serif, as in the design.
   ============================================================= */

/* Head: serif H1 + lede, topic links, review note. */
.oce-ghead {
	background: var(--paper);
	padding: clamp(48px, 7vw, 88px) 24px clamp(32px, 4vw, 48px);
}
.oce-ghead__top {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 64px);
	align-items: flex-end;
	justify-content: space-between;
}
.oce-ghead__title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
}
.oce-ghead__lede {
	flex: 0 1 460px;
	font-size: 19px;
	line-height: 1.6;
	margin: 0;
}
.oce-ghead__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}
.oce-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px; /* wrapped rows: the 7px hit layers meet without overlapping */
	font-family: var(--font-ui);
	font-size: var(--size-small);
}
.oce-topics a {
	position: relative;
	color: var(--ink);
	padding: 2px 0;
	border-bottom: 2px solid transparent;
}
/* 45px hit area; the active underline stays under the text. Insets count from
   the padding box, so the bottom one covers the 2px underline border too. */
.oce-topics a::before {
	content: "";
	position: absolute;
	inset: -7px -8px -9px;
}
.oce-topics a:hover {
	color: var(--ink);
}
.oce-topics a[aria-current="page"] {
	border-bottom-color: var(--forest);
}
.oce-ghead__note {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 0;
	max-width: 44ch;
}

/* Start here (Sage band, sticky post). */
.oce-start {
	background: var(--sage);
	padding: clamp(40px, 5vw, 64px) 24px;
	margin-top: clamp(24px, 3vw, 32px);
}
.oce-start__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.oce-start__text {
	flex: 1 1 380px;
	min-width: 0;
}
.oce-start__media {
	flex: 1 1 420px;
	min-width: 0;
}
.oce-start__frame {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--rule);
	background: var(--paper);
}
.oce-start__frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
/* Routing-diagram covers (guides without a featured image). The viewBox carries the frame's ratio. */
.oce-diagram {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--font-ui);
}
.oce-diagram__caption {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--slate);
	margin-top: 8px;
}
.oce-eyebrow {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 16px;
}
.oce-start__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	max-width: 22ch;
}
.oce-start__title a {
	color: var(--ink);
}
.oce-start__excerpt {
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 20px;
	max-width: 56ch;
}
.oce-start__meta {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	margin: 0;
}
.oce-start__link {
	font-family: var(--font-ui);
	font-size: 17px;
	margin: 14px 0 0; /* + the 44px link box keeps the text where 24px put it */
}
.oce-start__link a,
.oce-strip__links a,
.oce-sfoot a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Grid of guide cards. */
.oce-ggrid {
	padding: clamp(56px, 7vw, 88px) 24px;
}
.oce-ggrid__title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 36px;
}
.oce-gcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 28px;
}
.oce-gcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--ink);
	transition: border-color 0.15s ease;
}
.oce-gcard:hover,
.oce-gcard:focus-within {
	border-color: var(--forest);
}
.oce-gcard__media {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--rule);
	background: var(--sage);
}
.oce-gcard__media img,
.oce-gcard__media .oce-diagram {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oce-gcard__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px 28px;
	flex: 1;
}
.oce-gcard__cat {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}
.oce-gcard__title {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}
.oce-gcard__title a {
	color: var(--ink);
}
/* The title link covers the card: one link, one accessible name. */
.oce-gcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.oce-gcard__text {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-gcard__date {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: auto 0 0;
	padding-top: 16px;
}
.oce-ggrid__empty {
	margin: 0;
}

/* Pagination under the grid (boxes are the shared .oce-pagination). */
.oce-ggrid .oce-pagination {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}
.oce-pagination__count {
	font-family: var(--font-ui);
	margin: 0;
}
.oce-pagination__links [aria-disabled="true"] {
	color: var(--slate);
}

/* Service CTA strip. */
.oce-strip {
	background: var(--sage);
	padding: clamp(40px, 5vw, 60px) 24px;
}
.oce-strip__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: baseline;
	justify-content: space-between;
}
.oce-strip__title {
	font-family: var(--font-ui);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 30ch;
}
.oce-strip__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px; /* stacked links are 44px rows */
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Guide hero. */
.oce-shero {
	background: var(--paper);
	padding: clamp(40px, 6vw, 72px) 24px clamp(28px, 4vw, 40px);
}
.oce-shero .oce-crumbs {
	margin-bottom: clamp(28px, 4vw, 44px);
}
.oce-shero__row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.oce-shero__text {
	flex: 1.4 1 420px;
	min-width: 0;
}
.oce-shero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 16px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-shero__cat {
	position: relative;
	font-weight: 600;
	color: var(--forest);
}
.oce-shero__cat::before {
	content: "";
	position: absolute;
	inset: -10px -5px;
}
.oce-shero__title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 22ch;
}
.oce-shero__deck {
	font-size: 19px;
	line-height: 1.6;
	max-width: 48ch;
	margin: 20px 0 0;
}
.oce-shero__author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}
.oce-shero__photo {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}
.oce-shero__name {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.oce-shero__role {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	line-height: 1.4;
}
.oce-shero__figure {
	flex: 1 1 340px;
	min-width: min(260px, 100%);
	max-width: 460px;
	margin: 0;
}
.oce-shero__frame {
	position: relative;
	margin-right: 20px;
}
.oce-shero__frame::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 20px;
	right: -20px;
	bottom: -20px;
	background: var(--sage);
	border-radius: var(--radius-md);
}
.oce-shero__frame img,
.oce-shero__frame .oce-diagram {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	background: var(--paper);
}
.oce-shero__caption {
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.45;
	margin-top: 36px;
}
/* Reference layout. */
.oce-shero--reference .oce-shero__title {
	font-family: var(--font-ui);
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 24ch;
}
.oce-shero--reference .oce-shero__deck {
	font-size: clamp(19px, 1.7vw, 21px);
	max-width: 62ch;
	margin: 24px 0 32px;
}
.oce-shero__articlemeta {
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

/* Body + rail. Single column below 1100px (rail collapses, design system). */
.oce-sbody {
	background: var(--paper);
	padding: clamp(24px, 3vw, 32px) 24px clamp(64px, 8vw, 96px);
}
.oce-sbody__layout {
	max-width: var(--width-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}
.oce-sbody__article {
	min-width: 0;
	max-width: var(--width-prose);
}
.oce-rail {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}
@media (min-width: 1100px) {
	.oce-sbody__layout {
		grid-template-columns: minmax(0, var(--width-prose)) var(--width-rail);
		gap: 64px;
		align-items: start;
	}
	.oce-toc-mobile {
		display: none;
	}
	.oce-rail {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}
@media (max-width: 1099px) {
	.oce-rail .oce-toc {
		display: none;
	}
	.oce-rail {
		max-width: var(--width-prose);
	}
}

/* Narrow-screen TOC. */
.oce-toc-mobile {
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	background: var(--paper);
	max-width: var(--width-prose);
}
.oce-toc-mobile summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 16px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 600;
}
.oce-toc-mobile summary::-webkit-details-marker {
	display: none;
}
.oce-toc-mobile summary::after {
	content: "+";
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--slate);
}
.oce-toc-mobile[open] summary::after {
	content: "−";
}
.oce-toc-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0 16px 8px;
}
.oce-toc-mobile a {
	display: block;
	padding: 11px 0; /* 44px rows with the 1px rule */
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.4;
	color: var(--ink);
}

/* Rail CTA. */
.oce-railcta {
	background: var(--sage);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 20px;
}
.oce-railcta__title {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 8px;
}
.oce-railcta__text {
	font-size: var(--size-small);
	line-height: 1.5;
	margin: 0 0 14px;
}
.oce-railcta__rows {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.oce-railcta__rows li {
	padding: 9px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.4;
}
.oce-railcta__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 14px;
	font-family: var(--font-ui);
}
.oce-railcta__amount {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.oce-railcta__cadence {
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-railcta .oce-btn {
	width: 100%;
}
.oce-railcta__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: var(--size-small);
}

/* Guide prose (the design's section rhythm: a rule and space before each h2). */
.oce-single .prose {
	max-width: var(--width-prose);
}
.oce-single .prose > p,
.oce-single .prose li {
	font-size: 18px;
	line-height: 1.65;
}
.oce-single .prose > p {
	margin: 0 0 20px;
}
.oce-single .prose h2 {
	font-weight: 600;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: clamp(48px, 6vw, 64px) 0 20px;
	padding-top: clamp(40px, 5vw, 48px);
	border-top: 1px solid var(--rule);
}
.oce-single .prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.oce-single .prose h3 {
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	margin: 36px 0 12px;
}
.oce-single .prose h2 + h3,
.oce-single .prose .oce-faq-section > h3:first-child {
	margin-top: 12px;
}
.oce-single .prose ol {
	counter-reset: oce-step;
}
.oce-single .prose ol > li {
	counter-increment: oce-step;
	position: relative;
	padding-left: 36px;
}
.oce-single .prose ol > li::before {
	content: counter(oce-step) ".";
	position: absolute;
	left: 0;
	top: 14px;
	font-family: var(--font-ui);
	font-weight: 600;
	color: var(--forest);
}
.oce-single .prose li li::before {
	top: 8px;
}
.oce-single .prose .oce-code,
.oce-single .prose .oce-callout,
.oce-single .prose .oce-table-wrap,
.oce-single .prose .wp-block-table {
	margin: 24px 0;
}

/* Code block inside prose: the panel carries the colour, not the inline <code>. */
.oce-code code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

/* Callout body paragraphs. */
.oce-callout__body > :first-child {
	margin-top: 0;
}
.oce-callout__body p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 8px;
}
.oce-callout__body p:last-child {
	margin-bottom: 0;
}

/* Tables scroll inside their wrapper. A Rule-tint edge marks the side with
   more columns; the Paper covers scroll with the table and hide the tint once
   that end is reached (no shadow: flat-by-default). */
.prose .wp-block-table,
.prose .oce-table-wrap {
	overflow-x: auto;
	background:
		linear-gradient(to right, var(--paper) 40%, rgb(255 255 255 / 0)) left center / 32px 100% no-repeat local,
		linear-gradient(to left, var(--paper) 40%, rgb(255 255 255 / 0)) right center / 32px 100% no-repeat local,
		linear-gradient(to right, var(--rule), rgb(207 217 209 / 0)) left center / 16px 100% no-repeat scroll,
		linear-gradient(to left, var(--rule), rgb(207 217 209 / 0)) right center / 16px 100% no-repeat scroll;
}

/* The pipeline's closing CTA box → the design's ServiceCTA. */
.prose .cta-box {
	background: var(--sage);
	border-radius: var(--radius-md);
	padding: 24px;
	margin: 32px 0;
}
.prose .cta-box p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 8px;
}
.prose .cta-box p:last-child {
	margin-bottom: 0;
}
.prose .cta-box p:first-child > strong:first-child {
	display: block;
	font-size: 17px;
	margin-bottom: 4px;
}

/* Closing link row. */
.oce-sfoot {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	margin-top: clamp(40px, 5vw, 56px);
	padding: 14px 0; /* + the 44px link boxes: same height as before */
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Related guides. */
.oce-related {
	padding: clamp(56px, 7vw, 88px) 24px;
}

/* =============================================================
   14. SERVICES — services index and service pages
   (templates/page-services.html, page-service.html, patterns/service*.php,
   body sections from page content: docs/fixtures/services/*.html).
   Values from design-reference/pages/services.dc.html, service-setup.dc.html,
   service-managed.dc.html and security-hub.dc.html. Bare <p> is serif (§12).
   ============================================================= */

.oce-service section[id],
.oce-services [id] {
	scroll-margin-top: 72px;
}
/* post-content is a flow layout; its block gap would open between sections. */
.oce-service-body > * {
	margin-block: 0;
}

/* Hero. */
.oce-svc-hero {
	background: var(--paper);
	padding: clamp(56px, 8vw, 96px) 24px clamp(48px, 6vw, 72px);
}
.oce-svc-hero--index {
	padding-bottom: clamp(40px, 5vw, 64px);
}
.oce-svc-hero .oce-crumbs {
	margin-bottom: 20px;
}
.oce-svc-hero h1 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(38px, 5.6vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 18ch;
}
.oce-svc-hero--package h1 {
	max-width: none;
}
.oce-svc-hero--managed h1 {
	max-width: 16ch;
}
.oce-svc-hero__lede {
	font-family: var(--font-body);
	font-size: clamp(19px, 1.7vw, 21px);
	line-height: 1.6;
	max-width: 60ch;
	margin: 28px 0 0;
}
.oce-svc-hero--index .oce-svc-hero__lede {
	max-width: 62ch;
}
.oce-svc-hero__price {
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	color: var(--slate);
	margin: 16px 0 0;
}
.oce-svc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
}
.oce-svc-hero__actions > a:not(.oce-btn) {
	font-family: var(--font-ui);
	font-size: 17px;
}
.oce-svc-hero__meta {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}

/* Section spacing and headings. */
.oce-svc-short {
	padding: clamp(40px, 5vw, 60px) 24px;
}
.oce-svc-strip {
	padding: clamp(48px, 6vw, 72px) 24px;
}
.oce-svc-strip__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: baseline;
}
.oce-svc-strip__text {
	flex: 1 1 420px;
	max-width: 44ch;
	font-family: var(--font-ui);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-svc-strip__link {
	flex: 0 1 auto;
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-h2--28 {
	margin-bottom: 28px;
}
.oce-h2--36 {
	margin-bottom: 36px;
}
.oce-h2--40 {
	margin-bottom: 40px;
}
.oce-h2--16ch {
	max-width: 16ch;
}
.oce-h2--18ch {
	max-width: 18ch;
}
.oce-h2--sub {
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.12;
	margin: 0;
	max-width: 18ch;
}
.oce-svc-lede {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
	max-width: 64ch;
}

/* "What's included" groups with check rows. */
.oce-group {
	display: flex;
	flex-wrap: wrap;
	gap: 24px clamp(32px, 5vw, 64px);
	align-items: flex-start;
	padding-top: 36px;
}
.oce-group__head {
	flex: 4 1 260px;
	min-width: 0;
}
.oce-group__head h3 {
	font-family: var(--font-ui);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-group__head p {
	font-size: 17px;
	line-height: 1.6;
	margin: 10px 0 0;
	max-width: 34ch;
}
.oce-group__rows {
	flex: 8 1 420px;
	min-width: 0;
	border-top: 1px solid var(--rule);
}
.oce-check-row > div {
	min-width: 0;
}
.oce-check-row--sm {
	gap: 14px;
	padding: 18px 0;
}
.oce-check-row--sm .oce-check-row__icon {
	width: 24px;
	height: 24px;
	margin-top: 3px;
}
.oce-check-row--sm .oce-check-row__title {
	font-size: 18px;
}
.oce-check-row--sm .oce-check-row__text {
	margin-top: 6px;
}

/* "Where OpenClaw should run" columns. */
.oce-where {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 32px 40px;
}
.oce-where > div {
	min-width: 0;
	border-top: 2px solid var(--slate);
	padding-top: 20px;
}
.oce-where > div:first-child {
	border-top-color: var(--forest);
}
.oce-where h3 {
	font-family: var(--font-ui);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.oce-where p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-close-line--sm p {
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.45;
	max-width: 48ch;
}
.oce-close-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	align-items: baseline;
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
}
.oce-close-pair .oce-statement {
	flex: 1 1 280px;
	max-width: 24ch;
}
.oce-close-pair p:not(.oce-statement) {
	flex: 2 1 340px;
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
}

/* Two equal columns ("What I need" / "What I don't do"). */
.oce-duo {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
}
.oce-duo > * {
	flex: 1 1 380px;
	min-width: 0;
}
.oce-svc-bold {
	font-family: var(--font-ui);
	font-size: clamp(18px, 1.8vw, 20px);
	font-weight: 600;
	line-height: 1.5;
	margin: 28px 0 0;
}
.oce-svc-bold a {
	font-weight: 500;
}
.oce-dont {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.oce-dont p {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}
.oce-dont strong {
	font-family: var(--font-ui);
	font-weight: 600;
}

/* Rule-separated lists. */
.oce-list {
	border-top: 1px solid var(--rule);
}
.oce-list > * {
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-list--ui > * {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 500;
	line-height: var(--lh-body);
}
.oce-list--prose > * {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
}
.oce-list--prose strong {
	font-family: var(--font-ui);
	font-weight: 600;
}
.oce-list--titled > *,
.oce-list--stat > * {
	padding: 18px 0;
}
.oce-list__title {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}
.oce-list--titled p {
	font-size: 17px;
	line-height: 1.6;
	margin: 6px 0 0;
}
.oce-list--split > * {
	display: flex;
	flex-wrap: wrap;
	gap: 12px clamp(24px, 4vw, 48px);
	padding: 24px 0;
}
.oce-list--split h3 {
	flex: 3 1 220px;
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-list--split h3 a {
	color: var(--ink);
}
.oce-list--split h3 a:hover {
	color: var(--forest);
}
.oce-list--split > * > :not(h3) {
	flex: 7 1 380px;
	min-width: 0;
}
.oce-list--split p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-list--split p + p {
	margin-top: 12px;
}
.oce-list__label {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
	margin-bottom: 4px;
}
.oce-list__value {
	font-family: var(--font-ui);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.oce-list--sample > * {
	padding: 14px 0;
}
.oce-list--sample p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* Paragraph roles inside service sections. */
.oce-svc-note {
	font-size: 17px;
	line-height: 1.6;
	color: var(--slate);
	margin: 24px 0 0;
	max-width: 66ch;
}
.oce-flow > :where(p) {
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 20px;
	max-width: 62ch;
}
.oce-flow > .oce-gap {
	margin-bottom: 28px;
}
.oce-svc-p {
	font-size: 17px;
	line-height: 1.6;
	margin: 24px 0 0;
	max-width: 62ch;
}
.oce-flow > .oce-svc-after,
.oce-svc-after {
	font-size: 18px;
	line-height: 1.65;
	margin: 24px 0 0;
	max-width: 62ch;
}
.oce-flow > .oce-svc-link,
.oce-svc-link {
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	margin: 24px 0 0;
}

/* Aside + main (5 : 7). */
.oce-split {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	align-items: flex-start;
}
.oce-split--wide {
	gap: clamp(32px, 5vw, 64px);
}
.oce-split--spaced {
	margin-top: clamp(48px, 6vw, 72px);
}
.oce-split__aside {
	flex: 5 1 340px;
	min-width: 0;
}
.oce-split--spaced .oce-split__aside {
	flex-basis: 320px;
}
.oce-split__main {
	flex: 7 1 400px;
	min-width: 0;
}
.oce-split__main--stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.oce-split__main--stack > :where(p) {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
	max-width: 62ch;
}
.oce-split__bold {
	font-family: var(--font-ui);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 52ch;
}
.oce-split__after {
	font-size: 18px;
	line-height: 1.65;
	margin: 20px 0 0;
	max-width: 44ch;
}
.oce-split__lead {
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
	margin: 20px 0 0;
	max-width: 32ch;
}

/* Main column + Paper side card (7 : 5). */
.oce-aside-layout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 4vw, 56px);
	align-items: flex-start;
}
.oce-aside-layout__main {
	flex: 7 1 420px;
	min-width: 0;
}
/* Content-box, as in the design: the 320px basis excludes the padding. */
.oce-side-card {
	box-sizing: content-box;
	flex: 5 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 32px);
}
.oce-side-card--20 {
	gap: 20px;
}
.oce-side-card--16 {
	gap: 16px;
}
.oce-side-card h3 {
	font-family: var(--font-ui);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-side-card__head h3:not(:last-child) {
	margin-bottom: 12px;
}
.oce-side-card p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-side-card__foot {
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}
.oce-side-card--16 .oce-side-card__foot {
	padding-top: 16px;
}
.oce-side-card .oce-code {
	margin: 0;
}

/* Sample maintenance report. */
.oce-sample {
	margin-top: 28px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
}
.oce-sample summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 500;
}
.oce-sample summary::-webkit-details-marker {
	display: none;
}
.oce-sample summary::after {
	content: "+";
	flex: none;
	font-size: 24px;
	line-height: 1;
	color: var(--slate);
}
.oce-sample[open] summary::after {
	content: "−";
}
.oce-sample__body {
	padding: 0 20px 20px;
}
.oce-sample .oce-badge {
	display: inline-block;
	margin-bottom: 16px;
}

/* Managed plan card. */
.oce-plan {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
	background: var(--paper);
	border: 1px solid var(--forest);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 48px);
}
.oce-plan__body {
	flex: 1 1 380px;
	min-width: 0;
}
.oce-plan__title {
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.oce-plan .oce-price {
	gap: 8px;
	margin-bottom: 14px;
}
.oce-plan__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 16px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 500;
}
.oce-plan__body > p {
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 12px;
}
.oce-plan__body > p:last-child {
	margin-bottom: 0;
}
.oce-plan__cta {
	flex: none;
}

/* Setup page pricing: compact tiers + running-costs row. */
.oce-tiers--compact {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.oce-tier--compact {
	gap: 12px;
}
.oce-tier--compact .oce-tier__name {
	font-size: 22px;
}
.oce-tier--compact .oce-tier__audience {
	font-size: 17px;
}
.oce-tier--compact .oce-price {
	margin-top: auto;
	padding-top: 12px;
}
.oce-price-note {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}
.oce-price-note > p {
	font-size: 18px;
	line-height: 1.65;
	margin: 0;
	max-width: 56ch;
}
.oce-price-note__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}
.oce-price-note__actions > a:not(.oce-btn) {
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Services index cards. */
.oce-svc-cards-section {
	background: var(--paper);
	padding: 0 24px clamp(64px, 8vw, 96px);
}
.oce-svc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 24px;
}
.oce-svc-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 32px;
	color: var(--ink);
	scroll-margin-top: 88px;
}
a.oce-svc-card {
	text-decoration: none;
	transition: border-color 0.15s ease;
}
a.oce-svc-card:hover {
	color: var(--ink);
	text-decoration: none;
	border-color: var(--forest-deep);
}
.oce-svc-card--emphasis {
	border: 2px solid var(--forest);
}
.oce-svc-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: baseline;
}
.oce-svc-card h2 {
	font-family: var(--font-ui);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-svc-card__price {
	font-family: var(--font-ui);
	font-size: 17px;
	color: var(--slate);
}
.oce-svc-card p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-svc-card__link {
	font-family: var(--font-ui);
	font-size: 17px;
	color: var(--forest);
	margin-top: auto;
	padding-top: 12px;
}
.oce-svc-more {
	margin-top: clamp(56px, 7vw, 88px);
}
.oce-svc-more__title {
	font-family: var(--font-ui);
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

/* "Not sure which one you need?" */
.oce-svc-ask {
	padding: clamp(56px, 7vw, 88px) 24px;
}
.oce-svc-ask__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: baseline;
	justify-content: space-between;
}
.oce-svc-ask__text {
	font-family: var(--font-ui);
	font-size: 16px;
	max-width: 52ch;
}
.oce-svc-ask__text p {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.65;
	margin: 16px 0 0;
}
.oce-svc-ask__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}
.oce-svc-ask__actions > a:not(.oce-btn) {
	font-family: var(--font-ui);
	font-size: 17px;
}

/* Generic kind: prose body at reading width, under the hero. */
.oce-svc-prose {
	padding-top: 0;
}

/* Inline code, callout and in-text links inside service content. */
.oce-service-body :not(pre) > code {
	font-family: var(--font-code);
	font-size: 15px;
	background: var(--sage);
	border-radius: 4px;
	padding: 1px 5px;
}
.oce-service-body .oce-callout {
	margin: 0 0 28px;
	max-width: 62ch;
}
.oce-service-body .oce-callout__body > p:not(.oce-callout__title) {
	margin: 0;
}
/* WCAG 1.4.1: links inside sentences are underlined; standalone link lines
   (.oce-svc-link, .oce-svc-strip__link) keep the design's plain style. */
.oce-service-body p:not(.oce-svc-link):not(.oce-svc-strip__link) a:not([class]),
.oce-svc-hero__price a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* =============================================================
   15. PAGES — document pages on page.html (affiliate disclosure,
   privacy, terms, use cases) and the contact page.
   Document values from design-reference/pages/affiliate-disclosure.dc.html:
   760px column, h2 22–28 with a Rule above every section after the first.
   The contact page has no design; it is built from the system's Input,
   Select, Button, Card and Rule-row metrics.
   ============================================================= */

.oce-doc {
	max-width: var(--width-page);
	margin-inline: auto;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink);
}
.oce-doc > * {
	margin-block: 0 16px;
}
.oce-doc > :last-child {
	margin-bottom: 0;
}
.oce-doc > .oce-page-head__summary {
	margin-bottom: clamp(40px, 5vw, 56px);
}
.oce-doc h2 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: clamp(36px, 4vw, 48px) 0 16px;
	padding-top: clamp(28px, 3vw, 36px);
	border-top: 1px solid var(--rule);
	scroll-margin-top: 88px;
}
.oce-doc > h2:first-child,
.oce-doc > .oce-page-head__summary + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.oce-doc h3 {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 28px 0 8px;
	scroll-margin-top: 88px;
}
.oce-doc h2 + h3 {
	margin-top: 20px;
}
.oce-doc ul,
.oce-doc ol {
	padding-left: 1.25em;
}
.oce-doc li {
	margin: 0 0 8px;
}
.oce-doc li::marker {
	color: var(--slate);
}
.oce-doc strong {
	font-family: var(--font-ui);
	font-weight: 600;
}
.oce-doc a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.oce-doc .oce-links-row {
	gap: 16px 32px;
	margin: 24px 0 0;
}
.oce-doc .oce-links-row a {
	text-decoration: none;
}
.oce-doc .oce-affiliate-disclosure {
	margin: 16px 0 0;
}
.oce-kv {
	border-top: 1px solid var(--rule);
}
.oce-doc > .oce-kv {
	margin-bottom: 20px;
}
.oce-kv > div {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}
.oce-kv strong {
	flex: 0 1 200px;
	font-size: 17px;
	font-weight: 600;
}
.oce-kv span {
	flex: 1 1 320px;
	font-size: 17px;
	line-height: 1.6;
}
/* Use cases (templates/page-use-cases.html, patterns/use-cases-gallery.php):
   hero, filter bar of toggle chips, workflow cards grouped by category, and
   the Forest closing band. */
main.oce-uc-page > * {
	margin-block-start: 0;
}
.oce-uc [hidden] {
	display: none !important;
}
.oce-uc-hero {
	background: var(--paper);
	padding: clamp(24px, 3vw, 40px) 24px clamp(12px, 1.5vw, 20px);
}
.oce-uc-hero h1 {
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	max-width: 20ch;
}
.oce-uc-hero__lede {
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.55;
	max-width: 62ch;
	margin: 14px 0 0;
}
.oce-uc-hero__meta {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--rule);
}
.oce-uc__bar {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.oce-uc-filter {
	display: grid;
	gap: 8px;
	padding: 4px 0 14px;
}
.oce-uc-filter__summary {
	display: none;
}
.oce-uc-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
/* The label rides in the same wrap flow as the chips it names. */
.oce-uc-filter__label {
	flex: 0 0 auto;
	margin-right: 4px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 600;
	line-height: 1.2;
}
.oce-uc-filter__chips {
	display: contents;
}
.oce-uc-filter__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
	min-height: 36px;
}
.oce-uc-filter__status {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 0;
}
/* Toggle chip: Rule border at rest, Forest when pressed. */
.oce-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}
/* 44px hit area; rows sit 8px apart, so the layers never overlap. */
.oce-chip::before {
	content: "";
	position: absolute;
	inset: -4px 0;
}
.oce-chip:hover {
	border-color: var(--forest);
}
.oce-chip[aria-pressed="true"] {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
}
.oce-chip__count {
	font-weight: 400;
	color: var(--slate);
}
.oce-chip[aria-pressed="true"] .oce-chip__count {
	color: var(--sage);
}
/* Categories alternate Paper and Sage, the system's own sectioning device.
   The band is a class, not nth-of-type: filtering hides groups, and the
   script re-bands whatever is left so the rhythm survives every filter. */
.oce-uc-group {
	background: var(--paper);
	padding: clamp(32px, 4vw, 48px) 24px;
}
.oce-uc-group.is-sage {
	background: var(--sage);
}
.oce-uc-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
	margin: 0 0 16px;
}
.oce-uc-group__title {
	font-size: clamp(24px, 2.8vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.oce-uc-group__count {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-uc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-uc-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	scroll-margin-top: 96px;
}
.oce-uc-card:target {
	border-color: var(--forest);
}
.oce-uc-card__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.oce-uc-card__text {
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}
.oce-uc-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: auto 0 0;
	padding: 8px 0 0;
}
.oce-uc-card__tags li {
	padding: 3px 8px;
	background: var(--sage);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}
.oce-uc-empty {
	padding: 32px 24px;
}
.oce-uc-empty .oce-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
.oce-uc-empty p {
	font-family: var(--font-ui);
	font-size: 17px;
	margin: 0;
}
/* Phones: the bar collapses to a sticky "Filters" row under the header. */
@media (max-width: 699px) {
	.oce-uc__bar {
		position: sticky;
		top: 73px;
		z-index: 5;
	}
	.oce-uc-filter {
		padding: 0;
	}
	.oce-uc-filter[open] {
		padding-bottom: 12px;
	}
	.oce-uc-filter__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		font-family: var(--font-ui);
		font-size: var(--size-small);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}
	.oce-uc-filter__summary::-webkit-details-marker {
		display: none;
	}
	.oce-uc-filter__summary::after {
		content: "+";
		margin-left: auto;
		font-size: 22px;
		font-weight: 400;
		color: var(--slate);
	}
	.oce-uc-filter[open] .oce-uc-filter__summary::after {
		content: "−";
	}
	.oce-uc-filter__badge {
		padding: 2px 8px;
		background: var(--forest);
		border-radius: var(--radius-sm);
		color: var(--paper);
		font-size: 13px;
		font-weight: 500;
	}
}
.oce-uc-close {
	background: var(--paper);
	padding: 0 24px clamp(72px, 9vw, 104px);
}

/* Contact page. */
.oce-form-card {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
}
.oce-form-card__title,
.oce-side-card__title {
	font-family: var(--font-ui);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
}
.oce-side-card__title {
	margin: 0;
}
ol.oce-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	column-gap: 20px;
}
.oce-field__optional {
	font-weight: 400;
	color: var(--slate);
}
p.oce-field__hint,
p.oce-field__error {
	margin-bottom: 0;
}
.oce-form .oce-textarea {
	min-height: 176px;
	resize: vertical;
	font-size: 17px;
	line-height: 1.6;
}
.oce-form .oce-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235A6B62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}
.oce-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 8px;
}
.oce-form__note {
	flex: 1 1 240px;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 0;
}
.oce-form__note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
button.oce-btn {
	cursor: pointer;
}
.oce-form-errors {
	background: var(--signal-tint);
	border: 1px solid var(--signal);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin: 0 0 24px;
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.5;
}
.oce-form-errors p {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 8px;
}
.oce-form-errors ul {
	margin: 0;
	padding-left: 1.2em;
}
.oce-form-errors a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oce-form-status p {
	font-size: 18px;
	margin: 0;
}
.oce-form-status .oce-svc-link {
	margin-top: 16px;
}
.oce-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Reply mode — two choice cards. The radio stays visible: it is the state a
   browser without :has() still shows, and the only one a screen reader reads. */
.oce-choice {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
	min-width: 0;
}
.oce-choice > legend {
	padding: 0;
	margin-bottom: 8px;
}
.oce-choice__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 12px;
}
.oce-choice__card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}
.oce-choice__card:hover {
	border-color: var(--forest);
}
.oce-choice__card:focus-within {
	outline: 2px solid var(--forest);
	outline-offset: 1px;
}
.oce-choice__card input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--forest);
}
.oce-choice__title {
	display: block;
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.oce-choice__hint {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin-top: 2px;
}

/* Availability — revealed by the "Call me" card, never by script. */
.oce-availability {
	display: none;
	margin: 0 0 20px;
	padding: 20px clamp(16px, 2vw, 24px) 4px;
	background: var(--sage);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--forest);
	border-radius: var(--radius-md);
}
.oce-availability__lead {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--ink);
	margin: 0 0 16px;
}
/* The recap reads the chips back in one line, so the sender checks meaning,
   not checkboxes. It is script-written: empty markup collapses to nothing. */
.oce-availability__recap {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink);
	margin: 4px 0 16px;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
}
.oce-availability__recap:empty {
	display: none;
}
.oce-availability .oce-input,
.oce-availability .oce-select {
	background-color: var(--paper);
}
.oce-chipset {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
	min-width: 0;
}
.oce-chipset > legend {
	padding: 0;
	margin-bottom: 8px;
}
.oce-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* Chip checkbox: 44px target, Forest when checked, and a drawn box so the
   state survives a browser that never reaches the :has() rule below. */
.oce-chip-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}
.oce-chip-check:hover {
	border-color: var(--forest);
}
.oce-chip-check:focus-within {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.oce-chip-check input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.oce-chip-check input[type="checkbox"]:checked {
	border-color: var(--forest);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%2317513f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
/* Card title and submit label follow the mode; the email pair is the one that
   ships, so a browser that never matches the :has() rules below reads right. */
.oce-mode--call {
	display: none;
}
.oce-side-note {
	display: none;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}
.oce-side-note p {
	margin: 4px 0 0;
}
.oce-contact:has(#oce-mode-call:checked) .oce-availability,
.oce-contact:has(#oce-mode-call:checked) .oce-side-note {
	display: block;
}
.oce-contact:has(#oce-mode-call:checked) .oce-mode--email {
	display: none;
}
.oce-contact:has(#oce-mode-call:checked) .oce-mode--call {
	display: inline;
}
.oce-choice__card:has(input:checked) {
	background: var(--sage);
	border-color: var(--forest);
	box-shadow: inset 0 0 0 1px var(--forest);
}
.oce-chip-check:has(input:checked) {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
}
.oce-chip-check:has(input:checked) input[type="checkbox"] {
	border-color: var(--paper);
}
/* Without :has(), nothing can hide the availability block on a state change,
   so it is always visible and always optional — PHP still requires it only
   when "Call me" is the submitted mode. */
@supports not selector(:has(*)) {
	.oce-availability,
	.oce-side-note {
		display: block;
	}
}

/* =============================================================
   16. SKILLS — /skills and its category pages (patterns/skills-*.php,
   assets/js/skills.js, data in assets/data/skills/). Built from the system's
   own devices: the service hero, the security callout, Rule hairline rows,
   the Sage code panel, and a scrolling strip of category chips. The skill
   disclosure row is documented in DESIGN.md.
   ============================================================= */

.oce-skills [hidden] {
	display: none !important;
}
/* The directory head is compact: the rows are the page, so they start within
   the first screen on a laptop. */
.oce-svc-hero--skills {
	padding-top: clamp(28px, 3.5vw, 44px);
	padding-bottom: clamp(16px, 2vw, 24px);
}
.oce-svc-hero--skills .oce-crumbs {
	margin-bottom: clamp(16px, 2vw, 20px);
}
.oce-svc-hero--skills h1 {
	max-width: 26ch;
	font-size: clamp(32px, 3.6vw, 44px);
}
.oce-svc-hero--skills .oce-svc-hero__lede {
	margin-top: 12px;
}
.oce-svc-hero--skills .oce-svc-hero__meta {
	margin-top: 16px;
	padding-top: 12px;
}
.oce-svc-hero__meta a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.oce-skills {
	padding: 0 24px clamp(64px, 8vw, 96px);
}
.oce-skills .oce-callout {
	margin: 0;
}
/* The security note beside "Install ClawHub once". */
.oce-skills__intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: 16px 24px;
	align-items: start;
	margin: 0 0 clamp(14px, 1.8vw, 20px);
}
.oce-skills__setup {
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}
.oce-skills__setup-title {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 12px;
}
.oce-skills__setup .oce-code {
	margin: 0 0 12px;
}
.oce-skills__setup-note {
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}
.oce-skills__setup-note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oce-skills code:not(pre code) {
	font-family: var(--font-code);
	font-size: 0.88em;
	background: var(--sage);
	border-radius: 4px;
	padding: 1px 5px;
}
/* The categories inline: one scrolling row, the open one marked. The Rule
   tint at each end says the row continues; Paper covers it at the ends. */
.oce-skills__strip {
	margin: 0 0 clamp(12px, 1.5vw, 18px);
}
.oce-skills__chips {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 2px 0;
	overflow-x: auto;
	scrollbar-width: thin;
	background:
		linear-gradient(to right, var(--paper) 40%, rgb(255 255 255 / 0)) left center / 28px 100% no-repeat local,
		linear-gradient(to left, var(--paper) 40%, rgb(255 255 255 / 0)) right center / 28px 100% no-repeat local,
		linear-gradient(to right, var(--rule), rgb(207 217 209 / 0)) left center / 14px 100% no-repeat scroll,
		linear-gradient(to left, var(--rule), rgb(207 217 209 / 0)) right center / 14px 100% no-repeat scroll;
}
.oce-skills__chips > li {
	flex: none;
}
.oce-skills__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--ink);
	transition: border-color 0.15s ease;
}
.oce-skills__chips a:hover {
	border-color: var(--forest);
	color: var(--ink);
	text-decoration: none;
}
.oce-skills__chips a span {
	color: var(--slate);
}
.oce-skills__chips a[aria-current="page"] {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
}
.oce-skills__chips a[aria-current="page"] span {
	color: var(--sage);
}
/* The list head carries the search, so the rows start a screen earlier. */
.oce-skills__listhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 10px;
}
.oce-skills__listtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}
.oce-skills__title {
	font-family: var(--font-ui);
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}
.oce-skills__count {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
.oce-skills .oce-callout__body > p:not(.oce-callout__title) {
	margin: 0;
}
.oce-skills .oce-callout__body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oce-skills__search {
	flex: 0 1 340px;
	max-width: 340px;
	margin: 0;
}
.oce-skills__status {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 6px 0 0;
}
.oce-skills__results {
	margin-bottom: clamp(40px, 5vw, 56px);
}
/* Skill rows: one disclosure per skill. Closed, a row is the name, one line of
   description and the author; open, it adds the install line and the links. */
.oce-skill-list {
	--skill-name-col: 12rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.oce-skill {
	border-bottom: 1px solid var(--rule);
}
.oce-skill__summary {
	display: grid;
	/* The author track takes the width its own row needs (capped at 10rem on
	   .oce-skill__by), so the description keeps everything else. */
	grid-template-columns: minmax(0, var(--skill-name-col)) minmax(0, 1fr) minmax(0, max-content) 20px;
	align-items: baseline;
	gap: 4px 24px;
	padding: 14px 10px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s ease;
}
.oce-skill__summary::-webkit-details-marker {
	display: none;
}
.oce-skill__summary::after {
	content: "+";
	grid-column: 4;
	grid-row: 1;
	justify-self: end;
	font-family: var(--font-ui);
	font-size: 22px;
	line-height: 1;
	color: var(--slate);
}
.oce-skill__item[open] > .oce-skill__summary::after {
	content: "−";
}
.oce-skill__summary:hover,
.oce-skill__item[open] > .oce-skill__summary {
	background: var(--sage);
}
.oce-skill__name {
	grid-column: 1;
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
}
.oce-skill__desc {
	grid-column: 2;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oce-skill__item[open] .oce-skill__desc {
	white-space: normal;
	overflow-wrap: anywhere;
}
.oce-skill__by {
	grid-column: 3;
	max-width: 10rem;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* The panel lines up under the description column. */
.oce-skill__panel {
	padding: 16px 10px 20px calc(10px + var(--skill-name-col) + 24px);
}
.oce-skill__cmd {
	max-width: 640px;
	margin: 0 0 8px;
}
.oce-skill__warn {
	max-width: 640px;
	margin: 0 0 8px;
	padding: 10px 14px;
	background: var(--signal-tint);
	border: 1px solid var(--signal);
	border-radius: var(--radius-md);
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
}
.oce-skill__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--size-small);
}
.oce-skill__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 12px;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 699px) {
	.oce-skill__summary {
		grid-template-columns: minmax(0, 1fr) 20px;
		padding: 14px 4px;
	}
	.oce-skill__name,
	.oce-skill__desc,
	.oce-skill__by {
		grid-column: 1;
		max-width: none;
	}
	.oce-skill__desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
	}
	.oce-skill__item[open] .oce-skill__desc {
		display: block;
	}
	.oce-skill__summary::after {
		grid-column: 2;
		grid-row: 1;
	}
	.oce-skill__panel {
		padding: 12px 4px 20px;
	}
}
.oce-skills__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin: 32px 0 0;
}
.oce-skills__note {
	font-family: var(--font-ui);
	font-size: var(--size-small);
	line-height: 1.5;
	color: var(--slate);
	margin: 0;
}
.oce-skills__note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oce-skills__others {
	margin-top: clamp(56px, 7vw, 88px);
}
.oce-skills__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
}
/* The index is the same directory list, one Rule row per category. */
.oce-skill-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.oce-skill-rows > li {
	border-bottom: 1px solid var(--rule);
}
.oce-skill-row {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 5rem);
	align-items: baseline;
	gap: 4px 24px;
	padding: 14px 10px;
	color: var(--ink);
	transition: background-color 0.15s ease;
}
.oce-skill-row:hover {
	background: var(--sage);
	color: var(--ink);
	text-decoration: none;
}
.oce-skill-row__name {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}
.oce-skill-row__text {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
}
.oce-skill-row__count {
	justify-self: end;
	font-family: var(--font-ui);
	font-size: var(--size-small);
	color: var(--slate);
}
@media (max-width: 699px) {
	.oce-skill-row {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 14px 4px;
	}
	.oce-skill-row__text {
		grid-column: 1 / -1;
	}
}