/* ==========================================================================
   Outcome as a Service — page-scoped design system ("The Instrument")
   Loaded ONLY for the `outcome-as-a-service` service page (see functions.php).
   Markup: template-parts/service-section-oaas_*.php
   Motion:  js/serviceOaas.js

   Direction: an outcome contract is a measurement device — agree a baseline,
   instrument it, settle against the reading. The page is built as an
   instrument panel rather than a brochure, and the instruments MEASURE
   THEMSELVES as you scroll: bars fill, gauges sweep, the trace draws, the
   engagement rail advances with the scroll position.

   Rhythm. The page alternates grounds deliberately so it never reads as one
   continuous slab:
     §00 hero      paper   + ink instrument panel
     §01 model     ground  + ink chart panel
     §02 domains   paper
     §03 fees      paper-2
     §–  mid CTA   INK  (full dark)
     §04 spine     paper
     §05 compare   ground
     §06 faq       paper
     §07 CTA       INK  (full dark)

   Two colours carry meaning everywhere on this page and nowhere else:
     steel  = risk / cost YOU carry, the baseline, the guaranteed portion
     signal = risk WE carry, the outcome, the portion at risk
   Both have a dark-ground step so the pair survives on the ink sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — light ground (the page default)
   -------------------------------------------------------------------------- */
.oaas_sec {
	/* Grounds — matched to /ai-development-company/: white, off-white, grey. */
	--o-ground: #fbfbfb;
	--o-paper: #ffffff;
	--o-paper-2: #edeaea;
	--o-panel: #ffffff;
	--o-card: #ffffff;
	--o-card-hover: #fdfcfc;

	/* Ink — the landing page's heading and body greys */
	--o-ink: #201e1f;
	--o-body: #626262;
	--o-muted: #585858;

	/* Semantic pair — red is the brand accent; its partner is neutral grey,
	   so the pair stays readable without introducing a second hue. */
	--o-steel: #626262;
	--o-steel-lift: #8a8a8a;
	--o-signal: #ef0d33;
	--o-signal-lift: #d60c2e;
	--o-signal-wash: rgba(239, 13, 51, 0.06);
	--o-mid: #b4b1b1;

	/* Lines */
	--o-rule: #e2dede;
	--o-rule-soft: #eeecec;

	/* Metrics */
	--o-maxw: 1180px;
	--o-gap: clamp(64px, 7.2vw, 108px);
	--o-r: 4px;

	/* Faces — Montserrat throughout, as on the landing page. Weight carries
	   the hierarchy: 400 display, 500/600 for emphasis and labels. */
	--o-display: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--o-body-face: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--o-mono: Montserrat, "Helvetica Neue", Arial, sans-serif;

	/* Motion */
	--o-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--o-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	font-family: var(--o-body-face);
	font-size: 16px;
	line-height: 1.62;
	color: var(--o-body);
	background: var(--o-paper);
	/* Figures have to line up in the meters, gauges and tables. */
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Tokens — ink ground. Applied to a whole section (.oaas_sec--ink) or to a
   single panel dropped into a light section (.oaas_ink). Everything below
   reads from the tokens, so both routes need no component-level overrides.
   -------------------------------------------------------------------------- */
.oaas_sec.oaas_sec--ink,
.oaas_ink {
	--o-ground: #14171c;
	--o-paper: #0e1013;
	--o-paper-2: #14171c;
	--o-panel: #171b21;
	--o-card: #171b21;
	--o-card-hover: #1c2128;

	--o-ink: #ffffff;
	--o-body: #a9b1bb;
	--o-muted: #8d95a0;

	--o-steel: #7f8894;
	--o-steel-lift: #9aa3ae;
	--o-signal: #ff2e4d;
	--o-signal-lift: #ff5670;
	--o-signal-wash: rgba(255, 46, 77, 0.10);
	--o-mid: #565e69;

	--o-rule: rgba(255, 255, 255, 0.12);
	--o-rule-soft: rgba(255, 255, 255, 0.07);

	color: var(--o-body);
}

.oaas_sec *,
.oaas_sec *::before,
.oaas_sec *::after { box-sizing: border-box; }

/* The instruments are <figure>s, which the UA still indents by 40px. */
.oaas_sec figure,
.oaas_sec figcaption { margin: 0; }

.oaas_wrap {
	width: 100%;
	max-width: var(--o-maxw);
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 56px);
	position: relative;
	z-index: 1;
}

/* --- Section grounds ------------------------------------------------------ */
.oaas_sec { padding: var(--o-gap) 0; position: relative; }
.oaas_sec--paper { background: var(--o-paper); }
.oaas_sec--band { background: var(--o-ground); }
.oaas_sec--paper-alt { background: var(--o-paper-2); }
.oaas_sec--ink { background: var(--o-paper); overflow: hidden; }

/* A hairline between consecutive same-colour grounds, so the seam is
   deliberate rather than accidental. */
.oaas_sec--paper + .oaas_sec--paper { border-top: 1px solid var(--o-rule-soft); }

/* --------------------------------------------------------------------------
   Instrument grid — the faint measured field behind the ink sections and the
   hero. It is a coordinate grid, not decoration: the page is about reading a
   number off a scale.
   -------------------------------------------------------------------------- */
.oaas_field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.oaas_field::before {
	content: "";
	position: absolute;
	inset: -10%;
	background-image:
		linear-gradient(to right, currentColor 1px, transparent 1px),
		linear-gradient(to bottom, currentColor 1px, transparent 1px);
	background-size: 68px 68px;
	color: rgba(255, 255, 255, 0.05);
	-webkit-mask-image: radial-gradient(ellipse 78% 68% at 76% 30%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 78% 68% at 76% 30%, #000 0%, transparent 72%);
	animation: oaas_drift 34s linear infinite;
}
/* A slow red bloom, so the dark sections have depth rather than flat black. */
.oaas_field::after {
	content: "";
	position: absolute;
	top: -32%;
	right: -14%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 46, 77, 0.22) 0%, rgba(255, 46, 77, 0) 66%);
	animation: oaas_bloom 13s ease-in-out infinite alternate;
}
/* On the light hero the same field is a grey graph paper with no bloom. */
.oaas_field--light::before {
	color: rgba(32, 30, 31, 0.055);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 34%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 70% 80% at 78% 34%, #000 0%, transparent 70%);
}
.oaas_field--light::after { display: none; }

@keyframes oaas_drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-68px, -68px, 0); }
}
@keyframes oaas_bloom {
	from { opacity: 0.55; transform: scale(0.92); }
	to   { opacity: 1;    transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* Clause marker. The page explains a contract in order, so the numbering
   encodes real reading sequence rather than decoration. */
.oaas_clause {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--o-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--o-muted);
	margin: 0 0 20px;
}
.oaas_clause::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--o-signal);
	opacity: 0.9;
}

.oaas_h2 {
	font-family: var(--o-display);
	font-weight: 500;
	font-size: clamp(27px, 2.7vw, 42px);
	line-height: 1.18;
	color: var(--o-ink);
	margin: 0 0 18px;
	max-width: 22ch;
	letter-spacing: -0.01em;
}
.oaas_h2 em { font-style: normal; font-weight: 600; color: var(--o-signal); }

.oaas_lede {
	font-size: 17px;
	line-height: 1.68;
	max-width: 62ch;
	margin: 0;
	color: var(--o-body);
}

.oaas_head { margin-bottom: clamp(38px, 5vw, 62px); }

/* Schematic disclaimer — these diagrams explain a mechanism, they are not
   client results, and the page says so plainly. */
.oaas_note {
	font-family: var(--o-mono);
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--o-muted);
	opacity: 0.9;
	margin: 16px 0 0;
	max-width: 78ch;
}

/* Small caps label, used on every instrument caption. */
.oaas_cap {
	font-family: var(--o-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--o-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.oaas_btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	font-family: var(--o-mono);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--o-signal);
	border: 1px solid var(--o-signal);
	border-radius: 2px;
	overflow: hidden;
	transition: background .2s ease, border-color .2s ease, transform .2s var(--o-ease), box-shadow .3s ease;
}
.oaas_btn:hover,
.oaas_btn:focus {
	background: var(--o-signal-lift);
	border-color: var(--o-signal-lift);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px -12px rgba(239, 13, 51, 0.75);
}
.oaas_btn::after {
	content: "\2192";
	font-size: 15px;
	transition: transform .25s var(--o-ease);
}
.oaas_btn:hover::after { transform: translateX(4px); }
.oaas_btn:focus-visible { outline: 2px solid var(--o-signal-lift); outline-offset: 3px; }

/* Quiet companion action. */
.oaas_btn--ghost {
	background: transparent;
	color: var(--o-ink);
	border-color: var(--o-rule);
	box-shadow: none;
}
.oaas_btn--ghost:hover,
.oaas_btn--ghost:focus {
	background: transparent;
	color: var(--o-signal);
	border-color: var(--o-signal);
	box-shadow: none;
}
.oaas_btn--ghost::after { content: "\2193"; }
.oaas_btn--ghost:hover::after { transform: translateY(3px); }

.oaas_actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ==========================================================================
   Motion primitives — driven by js/serviceOaas.js
   The hidden start states are scoped to .oaas-js, which the script sets on
   <html> before paint. With JS off (or blocked) everything renders finished.
   ========================================================================== */
.oaas-js [data-o-rise] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	will-change: opacity, transform;
}
.oaas-js [data-o-rise].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity .78s var(--o-ease) var(--o-d, 0ms),
		transform .78s var(--o-ease) var(--o-d, 0ms);
}

/* Horizontal wipe for anything bar-shaped. Clip rather than scale so the
   segment proportions stay literally true while they are revealed. */
.oaas-js [data-o-wipe] { clip-path: inset(0 100% 0 0); }
.oaas-js [data-o-wipe].is-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.05s var(--o-ease-out) var(--o-d, 0ms);
}

/* Stroke-drawn SVG geometry. JS measures each path and seeds the dash. */
.oaas-js [data-o-draw] { stroke-dashoffset: var(--o-len, 0); }
.oaas-js [data-o-draw].is-in {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.4s var(--o-ease-out) var(--o-d, 0ms);
}
.oaas-js [data-o-fade] { opacity: 0; }
.oaas-js [data-o-fade].is-in {
	opacity: 1;
	transition: opacity .6s ease var(--o-d, 0ms);
}

/* ==========================================================================
   §00 Hero — headline + the risk transfer meter (the page's signature)
   ========================================================================== */
.oaas_hero {
	padding: clamp(132px, 15vw, 184px) 0 clamp(72px, 8vw, 108px);
	background: var(--o-paper);
	overflow: hidden;
}
.oaas_hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(40px, 5vw, 78px);
	align-items: center;
}
.oaas_hero__title {
	font-family: var(--o-display);
	font-weight: 400;
	font-size: clamp(36px, 3.8vw, 60px);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--o-ink);
	margin: 0 0 22px;
}
/* The landing page's headline move: light display weight, the emphasised
   phrase carried by semibold + accent rather than by size. */
.oaas_hero__title em {
	font-style: normal;
	font-weight: 600;
	color: var(--o-signal);
	position: relative;
	display: inline-block;
}
/* The accent phrase gets underscored by a rule that draws itself — the first
   measurement on a page about measurement. */
.oaas_hero__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 3px;
	background: var(--o-signal);
	opacity: 0.28;
	transform-origin: left center;
}
.oaas-js .oaas_hero__title em::after { transform: scaleX(0); }
.oaas-js .is-in > .oaas_hero__title em::after,
.oaas-js .oaas_hero__title.is-in em::after {
	transform: none;
	transition: transform 1.1s var(--o-ease-out) .35s;
}
.oaas_hero__text {
	font-size: 17.5px;
	line-height: 1.66;
	color: var(--o-body);
	max-width: 44ch;
	margin: 0 0 34px;
}

/* --- The meter: an ink instrument panel sitting in a light section -------- */
.oaas_meter {
	position: relative;
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	background: var(--o-panel);
	padding: 28px 28px 24px;
	box-shadow: 0 34px 70px -40px rgba(14, 16, 19, 0.72);
	overflow: hidden;
}
/* A single scan sweep on reveal, then it rests. */
.oaas_meter::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.06), transparent);
	pointer-events: none;
}
.oaas_meter.is-in::after { animation: oaas_scan 1.5s var(--o-ease-out) .35s 1; }
@keyframes oaas_scan {
	from { left: -40%; }
	to   { left: 130%; }
}

.oaas_meter__cap {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: var(--o-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--o-muted);
	padding-bottom: 16px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--o-rule);
}
.oaas_meter__cap b { color: var(--o-ink); font-weight: 600; }

.oaas_meter__row { margin-bottom: 18px; }
.oaas_meter__row:last-of-type { margin-bottom: 0; }
.oaas_meter__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--o-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--o-body);
	margin-bottom: 8px;
}
.oaas_meter__pct {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--o-muted);
}
.oaas_meter__row.is-mine .oaas_meter__name { color: var(--o-ink); font-weight: 600; }
.oaas_meter__row.is-mine .oaas_meter__pct { color: var(--o-signal); }

.oaas_meter__bar {
	display: flex;
	height: 22px;
	border-radius: 2px;
	overflow: hidden;
	gap: 2px; /* 2px surface gap between adjacent fills */
	background: transparent;
}
.oaas_meter__seg { height: 100%; border-radius: 1px; }
.oaas_meter__seg--you { background: var(--o-steel); }
.oaas_meter__seg--shared {
	background: var(--o-mid);
	/* Secondary encoding so the midpoint never relies on hue alone */
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.30) 0 3px,
		transparent 3px 6px
	);
}
.oaas_meter__seg--us { background: var(--o-signal); }
.oaas_meter__row.is-mine .oaas_meter__bar {
	box-shadow: 0 0 0 1px var(--o-signal), 0 0 26px rgba(255, 46, 77, 0.42);
	border-radius: 2px;
}
.oaas_meter__row.is-mine .oaas_meter__seg--us { animation: oaas_liveglow 3.4s ease-in-out infinite; }
@keyframes oaas_liveglow {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.22); }
}

.oaas_meter__key {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--o-rule);
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--o-muted);
}
.oaas_meter__key span { display: inline-flex; align-items: center; gap: 8px; }
.oaas_meter__chip { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.oaas_meter__chip--you { background: var(--o-steel); }
.oaas_meter__chip--shared {
	background: var(--o-mid);
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.30) 0 3px, transparent 3px 6px);
}
.oaas_meter__chip--us { background: var(--o-signal); }

/* --- Readings strip ------------------------------------------------------- */
.oaas_readings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 1px;
	margin-top: clamp(46px, 5vw, 70px);
	background: var(--o-rule);
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	overflow: hidden;
}
.oaas_reading {
	background: var(--o-paper);
	padding: 22px 24px 20px;
	position: relative;
	transition: background .25s ease;
}
.oaas_reading:hover { background: var(--o-ground); }
.oaas_reading::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: var(--o-signal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--o-ease-out) var(--o-d, 0ms);
}
.oaas_reading.is-in::before { transform: none; }
.oaas_reading__v {
	display: block;
	font-family: var(--o-display);
	font-weight: 600;
	font-size: clamp(26px, 2.5vw, 34px);
	line-height: 1.06;
	color: var(--o-ink);
	letter-spacing: -0.02em;
}
.oaas_reading__l {
	display: block;
	margin-top: 9px;
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--o-muted);
}

/* ==========================================================================
   §01 The model — the swap, plus the measurement chart
   ========================================================================== */
.oaas_model__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(38px, 5vw, 68px);
	align-items: center;
}
.oaas_prose p { margin: 0 0 1.1em; font-size: 16.5px; line-height: 1.72; }
.oaas_prose p:last-child { margin-bottom: 0; }
.oaas_prose strong { color: var(--o-ink); font-weight: 600; }

/* --- The swap: what changes hands, stated as a diagram not a paragraph ---- */
.oaas_swap {
	margin: 34px 0 0;
	border-top: 1px solid var(--o-rule);
}
.oaas_swap__row {
	display: grid;
	grid-template-columns: 1fr 30px 1fr;
	align-items: center;
	gap: 14px;
	padding: 17px 0;
	border-bottom: 1px solid var(--o-rule);
}
.oaas_swap__k {
	grid-column: 1 / -1;
	font-family: var(--o-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--o-muted);
	margin-bottom: -6px;
}
.oaas_swap__from,
.oaas_swap__to { font-size: 15px; line-height: 1.4; }
.oaas_swap__from { color: var(--o-muted); }
.oaas_swap__to { color: var(--o-ink); font-weight: 600; }
.oaas_swap__arrow {
	justify-self: center;
	color: var(--o-signal);
	font-size: 15px;
	line-height: 1;
	transform: translateX(-4px);
	opacity: 0;
	transition: transform .55s var(--o-ease-out) var(--o-d, 0ms), opacity .4s ease var(--o-d, 0ms);
}
.oaas_swap__row.is-in .oaas_swap__arrow { transform: none; opacity: 1; }

/* --- The chart panel ------------------------------------------------------ */
.oaas_chart {
	position: relative;
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	background: var(--o-panel);
	padding: 24px 24px 20px;
	overflow: hidden;
}
.oaas_chart--ink { box-shadow: 0 34px 70px -40px rgba(14, 16, 19, 0.7); }
.oaas_chart__cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	font-family: var(--o-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--o-muted);
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--o-rule);
}
.oaas_chart__cap b { color: var(--o-ink); font-weight: 600; }
.oaas_chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.oaas_chart__key {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 18px;
	padding-top: 15px;
	border-top: 1px solid var(--o-rule);
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--o-muted);
}
.oaas_chart__key span { display: inline-flex; align-items: center; gap: 8px; }
.oaas_chart__swatch { width: 18px; height: 3px; border-radius: 2px; flex: none; }

/* The verified-reading marker keeps a slow pulse: it is the live instrument. */
.oaas_pulse { transform-box: fill-box; transform-origin: center; }
.oaas_chart.is-in .oaas_pulse { animation: oaas_ping 2.8s ease-out 1.4s infinite; }
@keyframes oaas_ping {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* ==========================================================================
   §02 Domains — what you can buy. Each card carries its own trend trace.
   ========================================================================== */
.oaas_domains__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	gap: 1px;
	background: var(--o-rule);
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	overflow: hidden;
}
.oaas_domain {
	position: relative;
	background: var(--o-card);
	padding: 30px 28px 26px;
	transition: background .24s ease;
}
.oaas_domain::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--o-signal);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .38s var(--o-ease-out);
}
.oaas_domain:hover { background: var(--o-card-hover); }
.oaas_domain:hover::before { transform: none; }

.oaas_domain__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.oaas_domain__dir {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--o-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.oaas_domain__dir[data-dir="down"] { color: var(--o-signal); }
.oaas_domain__dir[data-dir="up"] { color: var(--o-steel); }
.oaas_domain__arrow { font-size: 13px; line-height: 1; }

/* The trace: a 6-point sparkline that draws itself, direction-coloured. */
.oaas_spark { width: 78px; height: 30px; flex: none; overflow: visible; }
.oaas_spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oaas_domain:hover .oaas_spark circle { r: 3.4; }
.oaas_spark circle { transition: r .25s var(--o-ease-out); }

.oaas_domain__name {
	font-family: var(--o-display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.22;
	color: var(--o-ink);
	margin: 0 0 10px;
}
.oaas_domain__desc { margin: 0 0 18px; font-size: 15px; line-height: 1.6; }

/* Example metrics as chips rather than a run-on line — scannable, and it
   makes each card look like an instrument label set. */
.oaas_domain__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--o-rule-soft);
}
.oaas_chipm {
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	color: var(--o-muted);
	background: var(--o-ground);
	border: 1px solid var(--o-rule-soft);
	border-radius: 2px;
	padding: 4px 9px;
	white-space: nowrap;
}

/* ==========================================================================
   §03 Fees — a gauge per commercial model
   ========================================================================== */
.oaas_fees__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}
.oaas_fee {
	position: relative;
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	background: var(--o-card);
	padding: 30px 28px 26px;
	display: flex;
	flex-direction: column;
	transition: border-color .25s ease, transform .35s var(--o-ease), box-shadow .35s ease;
}
.oaas_fee:hover {
	border-color: var(--o-signal);
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -30px rgba(32, 30, 31, 0.5);
}
.oaas_fee__name {
	font-family: var(--o-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.18;
	color: var(--o-ink);
	margin: 0 0 8px;
}
.oaas_fee__for { margin: 0 0 24px; font-size: 15px; line-height: 1.58; }

/* Gauge: the guaranteed arc, the at-risk arc, and — where it applies — a
   dashed outer arc for gainshare, which sits BEYOND the fee rather than
   inside it. The geometry states the mechanic the words claim. */
.oaas_gauge {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 22px;
}
.oaas_gauge__dial { position: relative; width: 108px; height: 108px; flex: none; }
.oaas_gauge__dial svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.oaas_gauge__dial circle { fill: none; stroke-linecap: butt; }
.oaas-js .oaas_gauge__arc { stroke-dashoffset: var(--o-len, 0); }
.oaas-js .oaas_gauge__arc.is-in {
	stroke-dashoffset: var(--o-off, 0);
	transition: stroke-dashoffset 1.15s var(--o-ease-out) var(--o-d, 0ms);
}
.oaas_gauge__mid {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 2px;
}
.oaas_gauge__num {
	font-family: var(--o-display);
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--o-signal);
	letter-spacing: -0.02em;
}
.oaas_gauge__cap {
	font-family: var(--o-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-muted);
}
.oaas_gauge__legend { display: grid; gap: 9px; min-width: 0; }
.oaas_gauge__legend span {
	display: grid;
	grid-template-columns: 11px 1fr;
	align-items: center;
	gap: 9px;
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--o-muted);
}
.oaas_gauge__dot { width: 11px; height: 11px; border-radius: 2px; }
.oaas_gauge__dot--fixed { background: var(--o-steel-lift); }
.oaas_gauge__dot--risk { background: var(--o-signal); }
.oaas_gauge__dot--gain {
	border: 1px dashed var(--o-steel-lift);
	background-image: repeating-linear-gradient(45deg, rgba(138, 138, 138, 0.4) 0 3px, transparent 3px 6px);
}

.oaas_fee__meta { margin: auto 0 0; padding-top: 20px; border-top: 1px solid var(--o-rule); }
.oaas_fee__row + .oaas_fee__row { margin-top: 16px; }
.oaas_fee__row dt {
	font-family: var(--o-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-muted);
	margin-bottom: 6px;
}
.oaas_fee__row dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--o-ink); }
.oaas_fee__row--risk dt { color: var(--o-signal); }

/* ==========================================================================
   §04 Engagement spine — a rail that advances with the scroll
   ========================================================================== */
/* The six steps read as a schedule: tick, what it is, what happens. Setting
   the title and the body in their own columns uses the full measure and
   keeps the two measurement events scannable down a single edge. */
.oaas_spine { position: relative; }
.oaas_spine__steps { margin: 0; padding: 0; list-style: none; }
/* Track */
.oaas_spine::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--o-rule);
}
/* Progress fill — height is written by js/serviceOaas.js from scroll position */
.oaas_spine__fill {
	position: absolute;
	left: 15px;
	top: 14px;
	width: 2px;
	height: 0;
	background: linear-gradient(to bottom, var(--o-signal), var(--o-signal-lift));
	box-shadow: 0 0 12px rgba(239, 13, 51, 0.45);
}
.oaas_step {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 0.62fr) minmax(0, 1fr);
	gap: 14px 30px;
	align-items: start;
	padding-bottom: 34px;
}
.oaas_step:last-child { padding-bottom: 0; }
.oaas_step__tick {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--o-paper);
	border: 2px solid var(--o-rule);
	display: grid;
	place-items: center;
	font-family: var(--o-mono);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--o-muted);
	transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s var(--o-ease-out);
}
/* Passed by the scroll rail */
.oaas_step.is-passed .oaas_step__tick {
	border-color: var(--o-signal);
	color: var(--o-signal);
	transform: scale(1.06);
}
/* A measurement event is where money is decided — mark it, and only it. */
.oaas_step.is-measure .oaas_step__tick {
	background: var(--o-signal);
	border-color: var(--o-signal);
	color: #fff;
	border-radius: 3px;
}
.oaas_step.is-measure.is-passed .oaas_step__tick {
	box-shadow: 0 0 0 5px var(--o-signal-wash);
	color: #fff;
}
.oaas_step__title {
	font-family: var(--o-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: var(--o-ink);
	margin: 4px 0 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.oaas_step__flag {
	font-family: var(--o-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-signal);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 4px 8px;
	white-space: nowrap;
}
.oaas_step__body { margin: 5px 0 0; font-size: 15.5px; line-height: 1.64; max-width: 62ch; }

@media (max-width: 900px) {
	.oaas_step { grid-template-columns: 32px 1fr; gap: 6px 26px; }
	.oaas_step__body { grid-column: 2; }
}

/* ==========================================================================
   §05 Comparison
   ========================================================================== */
.oaas_cmp__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	background: var(--o-card);
}
.oaas_cmp__scroll:focus-visible { outline: 2px solid var(--o-signal); outline-offset: 2px; }
.oaas_cmp__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.oaas_cmp__table th,
.oaas_cmp__table td {
	text-align: left;
	vertical-align: top;
	padding: 17px 20px;
	border-bottom: 1px solid var(--o-rule-soft);
	line-height: 1.55;
}
.oaas_cmp__table tbody tr:last-child th,
.oaas_cmp__table tbody tr:last-child td { border-bottom: 0; }
.oaas_cmp__table tbody tr { transition: background .2s ease; }
.oaas_cmp__table tbody tr:hover { background: var(--o-ground); }
.oaas_cmp__table thead th {
	font-family: var(--o-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-muted);
	background: var(--o-paper);
	border-bottom: 1px solid var(--o-rule);
	white-space: nowrap;
	position: relative;
}
.oaas_cmp__label {
	font-family: var(--o-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--o-ink);
	white-space: nowrap;
}
.oaas_cmp__table td { color: var(--o-body); }
.oaas_cmp__table th.is-mine,
.oaas_cmp__table td.is-mine {
	background: var(--o-signal-wash);
	color: var(--o-ink);
	font-weight: 500;
}
.oaas_cmp__table tbody tr:hover td.is-mine { background: rgba(239, 13, 51, 0.09); }
.oaas_cmp__table thead th.is-mine { color: var(--o-signal); background: rgba(239, 13, 51, 0.09); }
/* The claimed column is topped by a rule that draws across on reveal. */
.oaas_cmp__table thead th.is-mine::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--o-signal);
	transform: scaleX(0);
	transform-origin: left center;
}
.oaas_cmp__scroll.is-in .oaas_cmp__table thead th.is-mine::after {
	transform: none;
	transition: transform .8s var(--o-ease-out) .2s;
}

/* ==========================================================================
   §06 FAQ — sticky heading beside the accordion, so the column of questions
   never reads as an undifferentiated wall.
   ========================================================================== */
.oaas_faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(34px, 5vw, 72px);
	align-items: start;
}
.oaas_faq__aside { position: sticky; top: 120px; }
.oaas_faq { border-top: 1px solid var(--o-rule); }
.oaas_faq__item { border-bottom: 1px solid var(--o-rule); }
.oaas_faq__q {
	cursor: pointer;
	list-style: none;
	display: block;
	padding: 24px 52px 24px 0;
	position: relative;
	font-family: var(--o-display);
	font-weight: 600;
	font-size: 18.5px;
	line-height: 1.34;
	color: var(--o-ink);
	transition: color .18s ease;
}
.oaas_faq__q:hover { color: var(--o-signal); }
.oaas_faq__q::-webkit-details-marker { display: none; }
.oaas_faq__q:focus-visible { outline: 2px solid var(--o-signal); outline-offset: 2px; }
/* A plus that rotates into a minus — one glyph, two states. */
.oaas_faq__q::before,
.oaas_faq__q::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	background: var(--o-signal);
	transition: transform .3s var(--o-ease-out), opacity .3s ease;
}
.oaas_faq__q::before { width: 15px; height: 2px; transform: translateY(-50%); }
.oaas_faq__q::after { width: 2px; height: 15px; right: 12.5px; transform: translateY(-50%); }
.oaas_faq__item[open] .oaas_faq__q::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

/* Height animation is handled with a grid track so it needs no fixed value. */
.oaas_faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .34s var(--o-ease-out);
}
.oaas_faq__item[open] .oaas_faq__a { grid-template-rows: 1fr; }
/* js/serviceOaas.js keeps `open` on for the length of the closing transition
   and flips this class, so the collapse is seen rather than snapped shut. */
.oaas_faq__item.is-closing .oaas_faq__a { grid-template-rows: 0fr; }
.oaas_faq__item.is-closing .oaas_faq__q::after { transform: translateY(-50%); opacity: 1; }
.oaas_faq__a > div { overflow: hidden; min-height: 0; }
.oaas_faq__a p {
	margin: 0;
	padding: 0 52px 26px 0;
	font-size: 15.5px;
	line-height: 1.7;
}

/* ==========================================================================
   CTA — the dark bands. Used mid-page and to close.
   ========================================================================== */
.oaas_cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	align-items: center;
	gap: clamp(30px, 4vw, 60px);
}
.oaas_cta__title {
	font-family: var(--o-display);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.14;
	letter-spacing: -0.018em;
	color: var(--o-ink);
	margin: 0 0 18px;
	max-width: 18ch;
}
.oaas_cta__title em { font-style: normal; font-weight: 600; color: var(--o-signal); }
.oaas_cta__text { margin: 0; max-width: 52ch; color: var(--o-body); font-size: 16.5px; line-height: 1.66; }
.oaas_cta__side { justify-self: end; text-align: right; }
.oaas_cta__side .oaas_actions { justify-content: flex-end; }

/* Three short "what happens next" points under the closing CTA. */
.oaas_cta__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	margin-top: clamp(40px, 5vw, 62px);
	background: var(--o-rule);
	border: 1px solid var(--o-rule);
	border-radius: var(--o-r);
	overflow: hidden;
}
.oaas_point { background: var(--o-ground); padding: 22px 24px; }
.oaas_point__n {
	font-family: var(--o-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--o-signal);
	display: block;
	margin-bottom: 9px;
}
.oaas_point__t { font-size: 15px; line-height: 1.55; color: var(--o-ink); margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1020px) {
	.oaas_hero__grid,
	.oaas_model__grid,
	.oaas_faq__grid { grid-template-columns: 1fr; }
	.oaas_hero__grid { gap: 46px; }
	.oaas_faq__aside { position: static; }
	.oaas_cta__inner { grid-template-columns: 1fr; }
	.oaas_cta__side { justify-self: start; text-align: left; }
	.oaas_cta__side .oaas_actions { justify-content: flex-start; }
	.oaas_cta__title { max-width: 22ch; }
}
@media (max-width: 700px) {
	.oaas_hero { padding: 116px 0 64px; }
	.oaas_domains__grid,
	.oaas_fees__grid { grid-template-columns: 1fr; }
	.oaas_meter { padding: 22px 20px 20px; }
	.oaas_meter__cap { flex-direction: column; gap: 6px; }
	.oaas_step { grid-template-columns: 26px 1fr; gap: 18px; }
	.oaas_spine::before,
	.oaas_spine__fill { left: 12px; }
	.oaas_step__tick { width: 26px; height: 26px; font-size: 10px; }
	.oaas_swap__row { grid-template-columns: 1fr 24px 1fr; gap: 10px; }
	.oaas_swap__from,
	.oaas_swap__to { font-size: 13.5px; }
	.oaas_gauge { gap: 16px; }
	.oaas_gauge__dial { width: 92px; height: 92px; }
	.oaas_cmp__table { font-size: 13.5px; }
	.oaas_cmp__table th,
	.oaas_cmp__table td { padding: 13px 15px; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.oaas_sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.oaas_sec a:focus-visible,
.oaas_sec summary:focus-visible { outline: 2px solid var(--o-signal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.oaas_sec *,
	.oaas_sec *::before,
	.oaas_sec *::after {
		animation: none !important;
		transition: none !important;
	}
	/* Nothing may be left in a hidden start state when motion is off. */
	.oaas-js [data-o-rise],
	.oaas-js [data-o-fade] { opacity: 1 !important; transform: none !important; }
	.oaas-js [data-o-wipe] { clip-path: none !important; }
	.oaas-js [data-o-draw] { stroke-dashoffset: 0 !important; }
	.oaas-js .oaas_gauge__arc { stroke-dashoffset: var(--o-off, 0) !important; }
	.oaas-js .oaas_hero__title em::after,
	.oaas_reading::before,
	.oaas_swap__arrow { transform: none !important; opacity: 1 !important; }
}

/* Forced colors / high contrast: never rely on the fills alone. */
@media (forced-colors: active) {
	.oaas_meter__seg,
	.oaas_gauge__arc { forced-color-adjust: none; }
	.oaas_meter__seg { border: 1px solid CanvasText; }
}