/* ==========================================================================
   OwnTheGame 2026 — section and component CSS.
   Colour, type family and layout width come from theme.json presets; the exact
   per-section values below are transcribed from the design source (HomeLive.jsx
   and siblings) and must stay in step with it.
   Breakpoints: 1020px and 620px.
   ========================================================================== */

:root {
	--otg-sans: var(--wp--preset--font-family--sans);
	--otg-mono: var(--wp--preset--font-family--mono);

	--otg-navy: var(--wp--preset--color--navy);
	--otg-deep: var(--wp--preset--color--deep);
	--otg-off: var(--wp--preset--color--off);
	--otg-white: var(--wp--preset--color--white);
	--otg-lime: var(--wp--preset--color--lime);
	--otg-blue: var(--wp--preset--color--blue);
	--otg-blue-text: var(--wp--preset--color--blue-text);
	--otg-cyan: var(--wp--preset--color--cyan);
	--otg-orange: var(--wp--preset--color--orange);
	--otg-orange-text: var(--wp--preset--color--orange-text);
	--otg-green-text: var(--wp--preset--color--green-text);
	--otg-ink: var(--wp--preset--color--ink);
	--otg-body: var(--wp--preset--color--body);
	--otg-muted: var(--wp--preset--color--muted);
	--otg-slate: var(--wp--preset--color--slate);
	--otg-rule: var(--wp--preset--color--rule);
	--otg-rule-2: var(--wp--preset--color--rule-2);
	--otg-on-navy: var(--wp--preset--color--on-navy);
	--otg-on-navy-body: var(--wp--preset--color--on-navy-body);
	--otg-on-navy-muted: var(--wp--preset--color--on-navy-muted);
	--otg-navy-rule: rgba(255, 255, 255, 0.13);

	--otg-red: #b22e26;
	--otg-amber: #8a5a05;
	--otg-lime-hover: #cbff63;
	--otg-blue-hover: #4b7dff;

	--otg-shell: 1280px;
	--otg-gutter: 36px;
	--otg-header-h: 72px;

	--otg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	--otg-speedlines: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 74px);
}

/* --- Base ---------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[id] {
	scroll-margin-top: 76px;
}

::selection {
	background: var(--otg-lime);
	color: var(--otg-navy);
}

/* The hidden attribute must beat class-level display values, or JS that
   toggles it (auth errors, the domain-mode fields, tab panels) does nothing. */
[hidden] {
	display: none !important;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--otg-blue-text);
	outline-offset: 2px;
}

/* --- Shell and bands ----------------------------------------------------- */

.otg-shell {
	width: 100%;
	max-width: var(--otg-shell);
	margin-inline: auto;
	padding-inline: var(--otg-gutter);
	box-sizing: border-box;
}

.otg-band {
	position: relative;
	/* clip, not hidden: an overflow-hidden ancestor becomes the scrollport for
	   position: sticky, which pinned the order summary inside its band instead
	   of the viewport. clip crops the speed lines and glows identically. */
	overflow: clip;
	padding-block: clamp(48px, 5.5vw, 88px);
}

.otg-band > * {
	position: relative;
	z-index: 1;
}

.otg-band--tight {
	padding-block: clamp(32px, 4vw, 56px);
}

.otg-band--off {
	background: var(--otg-off);
	border-bottom: 1px solid var(--otg-rule);
}

.otg-band--white {
	background: var(--otg-white);
	border-bottom: 1px solid var(--otg-rule);
}

.otg-band--navy {
	background: var(--otg-navy);
	color: var(--otg-on-navy);
}

.otg-band--deep {
	background: var(--otg-deep);
	color: var(--otg-on-navy);
}

/* Speed lines and grain are decorative layers behind the content. */
.otg-band--speedlines::before,
.otg-band--grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.otg-band--speedlines::before {
	background-image: var(--otg-speedlines);
}

.otg-band--grain::after {
	background-image: var(--otg-grain);
	opacity: 0.06;
	mix-blend-mode: overlay;
}

.otg-band--navy :is(h1, h2, h3, h4),
.otg-band--deep :is(h1, h2, h3, h4) {
	color: #fff;
}

.otg-on-navy {
	color: #fff;
}

.otg-on-navy-body {
	color: var(--otg-on-navy-body);
}

.otg-on-navy-muted {
	color: var(--otg-on-navy-muted);
}

/* --- Typography ---------------------------------------------------------- */

.otg-display {
	margin: 0;
	font-family: var(--otg-sans);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: var(--otg-ink);
}

.otg-display--hero {
	font-size: clamp(2.6rem, 4.9vw, 4.1rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.otg-lead {
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 17.5px;
	line-height: 1.62;
	text-wrap: pretty;
	color: var(--otg-body);
}

.otg-prose {
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 16.5px;
	line-height: 1.62;
	text-wrap: pretty;
	color: var(--otg-body);
}

.otg-prose--sm {
	font-size: 14px;
	color: var(--otg-muted);
}

/* Uppercase Archivo label — nav items, eyebrows, button text, section labels. */
.otg-eyebrow,
.otg-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* The rule that precedes an eyebrow in the design. */
.otg-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

.otg-eyebrow--lime {
	color: var(--otg-lime);
}

.otg-eyebrow--blue {
	color: var(--otg-blue-text);
}

.otg-eyebrow--cyan {
	color: var(--wp--preset--color--cyan-text);
}

/* JetBrains Mono — statistics, odds, timestamps, status chips, domains. */
.otg-mono {
	font-family: var(--otg-mono);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--otg-muted);
}

.otg-mono--wrap {
	white-space: normal;
}

.otg-num {
	font-family: var(--otg-mono);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
	text-transform: none;
	color: var(--otg-ink);
}

/* --- Dot and status ------------------------------------------------------ */

.otg-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	display: inline-block;
}

.otg-dot--pulse {
	animation: otgPulse 1.5s ease-in-out infinite;
}

.otg-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-status--won { color: var(--otg-green-text); }
.otg-status--lost { color: var(--otg-red); }
.otg-status--live { color: var(--otg-orange-text); }
.otg-status--open { color: var(--otg-muted); }

.otg-band--navy .otg-status--won { color: var(--otg-lime); }
.otg-band--navy .otg-status--lost { color: #ff8a7a; }
.otg-band--navy .otg-status--live { color: var(--otg-orange); }
.otg-band--navy .otg-status--open { color: var(--otg-on-navy-muted); }

/* --- Buttons ------------------------------------------------------------- */

.otg-btn .wp-block-button__link,
a.otg-btn,
button.otg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 2px;
	box-sizing: border-box;
	cursor: pointer;
	font-family: var(--otg-sans);
	font-size: 12px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
		transform 0.18s ease, box-shadow 0.18s ease;
}

.otg-btn--lg .wp-block-button__link,
a.otg-btn--lg,
button.otg-btn--lg {
	height: 56px;
	padding: 0 28px;
	font-size: 13px;
	line-height: normal;
}

.otg-btn:hover .wp-block-button__link,
a.otg-btn:hover,
button.otg-btn:hover {
	transform: translateY(-1px);
}

.otg-btn--lime .wp-block-button__link,
a.otg-btn--lime,
button.otg-btn--lime {
	background: var(--otg-lime);
	color: var(--otg-navy);
}

.otg-btn--lime .wp-block-button__link:hover,
a.otg-btn--lime:hover,
button.otg-btn--lime:hover {
	background: var(--otg-lime-hover);
	color: var(--otg-navy);
	box-shadow: 0 0 32px rgba(188, 255, 56, 0.35);
}

.otg-btn--outline .wp-block-button__link,
a.otg-btn--outline,
button.otg-btn--outline {
	background: transparent;
	color: var(--otg-ink);
	border-color: var(--otg-rule-2);
}

.otg-btn--outline .wp-block-button__link:hover,
a.otg-btn--outline:hover,
button.otg-btn--outline:hover {
	border-color: var(--otg-ink);
	color: var(--otg-ink);
}

.otg-btn--on-navy .wp-block-button__link,
a.otg-btn--on-navy,
button.otg-btn--on-navy {
	background: transparent;
	color: #fff;
	border-color: var(--otg-navy-rule);
}

.otg-btn--on-navy .wp-block-button__link:hover,
a.otg-btn--on-navy:hover,
button.otg-btn--on-navy:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
}

.otg-btn--blue .wp-block-button__link,
a.otg-btn--blue,
button.otg-btn--blue {
	background: var(--otg-blue);
	color: #fff;
}

.otg-btn--blue .wp-block-button__link:hover,
a.otg-btn--blue:hover,
button.otg-btn--blue:hover {
	background: var(--otg-blue-hover);
}

.otg-btn[disabled],
button.otg-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.otg-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* --- Panels, cards, rows ------------------------------------------------- */

.otg-panel {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
	min-width: 0;
}

.otg-panel--cyan { border-top-color: var(--otg-cyan); }
.otg-panel--blue { border-top-color: var(--otg-blue); }
.otg-panel--quiet { border-top-color: var(--otg-rule-2); }

.otg-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 15px 20px;
	border-bottom: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-panel__title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
	overflow-wrap: anywhere;
}

.otg-panel__meta {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-panel__foot {
	padding: 13px 20px;
	border-top: 1px solid var(--otg-rule);
	background: var(--otg-off);
	min-width: 0;
}

.otg-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	min-width: 0;
	padding: 13px 20px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-row:last-child,
.otg-row--last {
	border-bottom: none;
}

.otg-row__k {
	flex: 0 1 auto;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-row__v {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	min-width: 0;
	font-family: var(--otg-sans);
	font-size: 14.2px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
	text-align: right;
	overflow-wrap: anywhere;
}

.otg-row__v--mono {
	font-family: var(--otg-mono);
	font-size: 13px;
	line-height: normal;
}

/* Hairline grid: children on a rule-coloured background with 1px gaps. */
.otg-hairline {
	display: grid;
	gap: 1px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
	min-width: 0;
}

.otg-hairline > * {
	background: var(--otg-white);
	min-width: 0;
}

/* --- Tags ---------------------------------------------------------------- */

.otg-tag {
	flex-shrink: 0;
	padding: 4px 9px;
	border: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: normal;
}

.otg-tag--paid,
.otg-tag--live {
	color: var(--otg-green-text);
	background: rgba(188, 255, 56, 0.16);
}

.otg-tag--failed {
	color: var(--otg-red);
	background: rgba(178, 46, 38, 0.09);
}

.otg-tag--pending {
	color: var(--otg-amber);
	background: rgba(255, 102, 56, 0.1);
}

.otg-tag--canceled {
	color: var(--otg-muted);
	background: var(--otg-off);
}

/* --- Forms --------------------------------------------------------------- */

.otg-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.otg-field__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-width: 0;
	font-family: var(--otg-sans);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-ink);
	overflow-wrap: anywhere;
}

.otg-field__req {
	color: var(--otg-green-text);
}

.otg-field__hint {
	margin-left: auto;
	flex-shrink: 0;
	text-align: right;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
	white-space: normal;
}

.otg-input,
.otg-select {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--otg-rule-2);
	border-radius: 2px;
	outline: none;
	background: var(--otg-white);
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: normal;
	color: var(--otg-ink);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.otg-select {
	padding: 0 12px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355636B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}

.otg-input--mono {
	font-family: var(--otg-mono);
	font-size: 13px;
	line-height: normal;
}

.otg-input:focus,
.otg-select:focus {
	border-color: var(--otg-navy);
	box-shadow: 0 0 0 3px rgba(7, 26, 36, 0.08);
}

.otg-input[aria-invalid="true"] {
	border-color: var(--otg-red);
}

.otg-textarea {
	height: auto;
	min-height: 132px;
	padding: 13px 14px;
	line-height: 1.6;
	resize: vertical;
}

/* --- Alerts -------------------------------------------------------------- */

.otg-alert {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 16px 20px;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-alert--error {
	background: rgba(178, 46, 38, 0.05);
	border-left: 3px solid var(--otg-red);
}

.otg-alert--ok {
	background: rgba(188, 255, 56, 0.1);
	border-left: 3px solid var(--otg-lime);
}

.otg-alert--info {
	background: var(--otg-off);
	border-left: 3px solid var(--otg-cyan);
}

/* --- Grids --------------------------------------------------------------- */

.otg-cols2,
.otg-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	min-width: 0;
}

.otg-cols3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	min-width: 0;
}

.otg-cols4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	min-width: 0;
}

.otg-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
	min-width: 0;
}

.otg-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	min-width: 0;
}

/* Checkout, thank-you and any page with a sticky sidebar. */
.otg-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
	gap: 32px;
	align-items: start;
	min-width: 0;
}

.otg-summary {
	position: sticky;
	top: 92px;
	min-width: 0;
}

/* --- Photo treatment ----------------------------------------------------- */

.otg-shot {
	position: relative;
	overflow: hidden;
	background: var(--otg-navy);
}

.otg-shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.85) contrast(1.06) brightness(0.9);
}

.otg-shot::before,
.otg-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.otg-shot::before {
	background: linear-gradient(
		150deg,
		rgba(7, 26, 36, 0.92) 0%,
		rgba(13, 43, 50, 0.5) 45%,
		rgba(7, 26, 36, 0.86) 100%
	);
	mix-blend-mode: multiply;
}

.otg-shot::after {
	background: radial-gradient(60% 60% at 78% 12%, rgba(50, 107, 255, 0.32) 0%, rgba(0, 0, 0, 0) 70%);
	mix-blend-mode: screen;
}

.otg-shot--cyan::after {
	background: radial-gradient(60% 60% at 78% 12%, rgba(57, 217, 255, 0.28) 0%, rgba(0, 0, 0, 0) 70%);
}

.otg-shot--lime::after {
	background: radial-gradient(60% 60% at 78% 12%, rgba(188, 255, 56, 0.24) 0%, rgba(0, 0, 0, 0) 70%);
}

/* --- FAQ: core/details --------------------------------------------------- */

.otg-faq .wp-block-details {
	border: 1px solid var(--otg-rule);
	border-left: 3px solid var(--otg-rule-2);
	background: var(--otg-white);
	padding: 0;
	margin: 0 0 10px;
	transition: border-color 0.18s ease;
}

.otg-faq .wp-block-details[open] {
	border-left-color: var(--otg-lime);
}

.otg-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 20px;
	font-family: var(--otg-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--otg-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.otg-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Circled + that becomes × when open. */
.otg-faq .wp-block-details > summary::after {
	content: "";
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border: 1px solid var(--otg-rule-2);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%2310161B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.22s ease, border-color 0.18s ease;
}

.otg-faq .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
	border-color: var(--otg-ink);
}

.otg-faq .wp-block-details > :not(summary) {
	padding: 0 20px 18px;
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--otg-muted);
}

/* --- Posts --------------------------------------------------------------- */

.otg-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.otg-pagination {
	margin-top: 40px;
	font-family: var(--otg-mono);
	font-size: 10.5px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-empty {
	padding: 40px;
	border: 1px dashed var(--otg-rule-2);
	text-align: center;
	color: var(--otg-muted);
}

/* --- Article ------------------------------------------------------------- */

.otg-article {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.otg-toc {
	position: sticky;
	top: 92px;
}

.otg-article__body {
	max-width: 720px;
}

.otg-article__body p {
	font-size: 17px;
	line-height: 1.72;
	color: var(--otg-body);
}

/* --- Animation ----------------------------------------------------------- */

@keyframes otgMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes otgPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@keyframes otgFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1020px) {
	:root {
		--otg-gutter: 24px;
	}

	.otg-cols3,
	.otg-cols4,
	.otg-split,
	.otg-checkout,
	.otg-pair,
	.otg-posts,
	.otg-article {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-split {
		gap: 44px;
	}

	.otg-summary,
	.otg-toc {
		position: static;
	}

	.otg-cols4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.otg-cols2,
	.otg-cols4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

/* ==========================================================================
   Pricing page
   ========================================================================== */

/* --- Shared section furniture (used by several pages) -------------------- */

.otg-hl {
	color: var(--otg-lime);
}

.otg-mt-18 { margin-top: 18px !important; }
.otg-mt-20 { margin-top: 20px !important; }
.otg-mt-24 { margin-top: 24px !important; }
.otg-mt-28 { margin-top: 28px !important; }
.otg-mt-30 { margin-top: 30px !important; }

/* The split-hero lead paragraph (pricing, how-it-works, about, platform,
   demos, who-its-for, faq) was unconstrained, running the full column width
   instead of the design's ~520-545px measure — home, enterprise and contact
   already carry their own page-specific lead class and are unaffected. */
.otg-lead.otg-mt-24 {
	max-width: 540px;
}

.otg-display--pricing {
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	line-height: 1.02;
	margin-top: 22px;
	max-width: 620px;
}

.otg-display--section {
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	margin-top: 16px;
	max-width: 640px;
}

.otg-display--sub {
	font-size: clamp(1.7rem, 2.7vw, 2.2rem);
	margin-top: 16px;
}

.otg-display--close {
	font-size: clamp(2.1rem, 4.2vw, 3.4rem);
	margin: 20px auto 0;
	max-width: 780px;
}

.otg-label--blue { color: var(--otg-blue-text); }
.otg-label--cyan { color: var(--wp--preset--color--cyan-text); }

.otg-band--navy .otg-label--cyan {
	color: var(--otg-cyan);
}

.otg-label--urgent {
	gap: 9px;
	font-size: 11px;
	line-height: normal;
	color: var(--otg-orange);
}

.otg-label--footnote {
	margin-top: 24px;
	font-size: 11px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-on-navy-muted);
	white-space: normal;
}

.otg-prose--muted { color: var(--otg-muted); }
.otg-prose--card { font-size: 14.8px; margin-top: 12px; }
.otg-prose--step { font-size: 14.3px; margin-top: 14px; }

/* Section header: title left, supporting line right. */
.otg-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.otg-sechead__aside {
	max-width: 340px;
	font-size: 15.5px;
	line-height: normal;
}

.otg-split--head {
	align-items: end;
	gap: 48px;
	margin-top: 16px;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.otg-split--faq {
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	align-items: start;
}

/* Tick list — blue check, hanging indent. */
.otg-ticks {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.otg-ticks li {
	display: flex;
	gap: 10px;
	font-family: var(--otg-sans);
	font-size: 14.3px;
	line-height: 1.62;
	color: var(--otg-body);
}

.otg-ticks li::before {
	content: "✓";
	color: var(--otg-blue-text);
	font-weight: 700;
	line-height: normal;
	flex-shrink: 0;
}

.otg-ticks--quiet li {
	font-size: 13.8px;
	line-height: normal;
	color: var(--otg-muted);
}

/* Stat row under a hero: value in mono, caption as a label. */
.otg-statrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-statrow__item {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.otg-statrow__v {
	font-family: var(--otg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

.otg-statrow__k {
	font-family: var(--otg-sans);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

/* --- Hero plan card ------------------------------------------------------ */

.otg-pricing-hero__grid {
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	align-items: center;
}

.otg-plancard {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
	padding: 34px 34px 30px;
	box-shadow: 0 30px 64px rgba(7, 26, 36, 0.34);
}

.otg-plancard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
}

.otg-plancard__name {
	font-family: var(--otg-sans);
	font-size: 19px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.03em;
	color: var(--otg-ink);
}

.otg-plancard__seal {
	padding: 5px 10px;
	border-radius: 2px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-plancard__price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 22px 0 0;
}

.otg-plancard__amount {
	font-family: var(--otg-sans);
	font-size: 64px;
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.05em;
	color: var(--otg-ink);
}

.otg-plancard__per {
	font-family: var(--otg-mono);
	font-size: 13px;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-plancard__next {
	margin-left: auto;
	white-space: nowrap;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-plancard__list {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--otg-rule);
}

.otg-plancard__list li {
	font-size: 14.5px;
	line-height: normal;
}

.otg-plancard .otg-btns--full {
	margin-top: 26px;
}

.otg-btns--full,
.otg-btns--full .wp-block-button {
	width: 100%;
}

.otg-btns--full .wp-block-button__link {
	width: 100%;
}

.otg-btns--center {
	justify-content: center;
	margin-top: 38px;
	gap: 14px;
}

.otg-plancard__foot {
	margin-top: 14px;
	text-align: center;
	line-height: 1.6;
	font-size: 8.5px;
}

/* --- Schedule ------------------------------------------------------------ */

/* Hairline grid of equal columns. Named "thread" after the design source. */
.otg-thread {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
	margin-top: 40px;
}

.otg-schedule__step {
	position: relative;
	background: var(--otg-off);
	padding: 26px 26px 30px;
}

.otg-schedule__step.is-active {
	background: var(--otg-white);
}

.otg-schedule__step.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--otg-lime);
}

.otg-schedule__when {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-schedule__step.is-active .otg-schedule__when,
.otg-schedule__now {
	color: var(--otg-green-text);
}

.otg-schedule__price {
	margin: 14px 0 0;
	font-family: var(--otg-sans);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.045em;
	color: var(--otg-slate);
}

.otg-schedule__step.is-active .otg-schedule__price {
	font-size: 52px;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-schedule__per {
	margin-left: 5px;
	font-family: var(--otg-mono);
	font-size: 12px;
	line-height: normal;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--otg-muted);
}

.otg-schedule__step:not(.is-active) .otg-prose--step {
	color: var(--otg-muted);
}

.otg-schedule__now {
	margin: 16px 0 0;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Locked-price bar ---------------------------------------------------- */

.otg-lockbar {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding: 24px 28px;
	background: var(--otg-navy);
}

.otg-lockbar__shield {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-lime);
}

.otg-lockbar__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 340px;
	min-width: 0;
}

.otg-lockbar__title {
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #fff;
}

.otg-lockbar__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
	margin: 0;
	padding-left: 20px;
	border-left: 1px solid var(--otg-navy-rule);
}

.otg-lockbar__num {
	font-family: var(--otg-mono);
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

.otg-lockbar__cap {
	max-width: 92px;
	line-height: 1.5;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

/* --- Everything included ------------------------------------------------- */

.otg-included {
	margin-top: 44px;
}

.otg-included__group {
	background: var(--otg-white);
	padding: 24px 24px 28px;
}

.otg-included__title {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-sans);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-blue-text);
}

/* --- Promises ------------------------------------------------------------ */

.otg-promises {
	gap: 28px;
	margin-top: 42px;
}

.otg-promise {
	display: flex;
	flex-direction: column;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	border-top: 3px solid var(--otg-lime);
	padding: 26px 26px 28px;
}

.otg-promise--cyan { border-top-color: var(--otg-cyan); }
.otg-promise--blue { border-top-color: var(--otg-blue); }

.otg-promise__tag {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-promise__title {
	margin: 12px 0 0;
	font-size: 19.5px;
	line-height: normal;
	letter-spacing: -0.025em;
}

/* Pushes the tick list to the card foot so all three cards align. */
.otg-promise .otg-ticks {
	margin-top: auto;
	padding-top: 20px;
	gap: 9px;
}

/* --- Enterprise panel ---------------------------------------------------- */

.otg-entpanel {
	border: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-entpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.04);
}

.otg-entpanel__title,
.otg-entpanel__meta {
	font-family: var(--otg-mono);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-entpanel__title {
	font-size: 9.5px;
	line-height: normal;
	color: #fff;
}

.otg-entpanel__meta {
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-on-navy-muted);
}

.otg-entpanel__row {
	display: flex;
	gap: 13px;
	margin: 0;
	padding: 15px 20px;
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-entpanel__row--last {
	border-bottom: none;
}

.otg-entpanel__plus {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-weight: 700;
	line-height: normal;
	color: var(--otg-cyan);
}

.otg-entpanel__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.otg-entpanel__t {
	font-family: var(--otg-sans);
	font-size: 14.8px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
}

.otg-entpanel__d {
	font-family: var(--otg-sans);
	font-size: 13.8px;
	line-height: 1.62;
	color: var(--otg-on-navy-muted);
}

/* --- Closing band -------------------------------------------------------- */

.otg-close {
	background:
		radial-gradient(70% 60% at 50% 100%, rgba(188, 255, 56, 0.1) 0%, rgba(188, 255, 56, 0) 70%),
		linear-gradient(180deg, var(--otg-navy) 0%, var(--otg-deep) 100%);
	text-align: center;
	padding-block: clamp(72px, 8vw, 112px);
}

.otg-close .otg-label {
	justify-content: center;
}

.otg-close__lead {
	margin: 24px auto 0;
	max-width: 520px;
}

@media (max-width: 1020px) {
	.otg-thread,
	.otg-pricing-hero__grid,
	.otg-split--head,
	.otg-split--faq {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-included {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.otg-lockbar__stat {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 620px) {
	.otg-included {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Dark-band typography.
   Body copy inside a navy or deep band takes the on-navy palette. Declared
   here, after the type utilities, because .otg-prose sets its own colour at
   equal specificity and would otherwise win on source order.
   ========================================================================== */

.otg-band--navy :is(.otg-prose, .otg-lead),
.otg-band--deep :is(.otg-prose, .otg-lead),
.otg-lockbar :is(.otg-prose, .otg-lead) {
	color: var(--otg-on-navy-body);
}

.otg-band--navy .otg-prose--muted,
.otg-band--deep .otg-prose--muted,
.otg-band--navy .otg-prose--sm,
.otg-band--deep .otg-prose--sm {
	color: var(--otg-on-navy-muted);
}

/* The lockbar is a navy island inside a light band. */
.otg-lockbar .otg-prose--sm {
	color: var(--otg-on-navy-body);
}

.otg-band--navy .otg-ticks li,
.otg-band--deep .otg-ticks li {
	color: var(--otg-on-navy-body);
}

.otg-band--navy .otg-ticks li::before,
.otg-band--deep .otg-ticks li::before {
	color: var(--otg-cyan);
}

/* Cards keep the light palette even when they sit on a dark band. */
.otg-band--navy :is(.otg-plancard, .otg-panel) :is(.otg-prose, .otg-lead),
.otg-band--deep :is(.otg-plancard, .otg-panel) :is(.otg-prose, .otg-lead) {
	color: var(--otg-body);
}

.otg-band--navy :is(.otg-plancard, .otg-panel) .otg-ticks li,
.otg-band--deep :is(.otg-plancard, .otg-panel) .otg-ticks li {
	color: var(--otg-body);
}

.otg-band--navy :is(.otg-plancard, .otg-panel) .otg-ticks li::before,
.otg-band--deep :is(.otg-plancard, .otg-panel) .otg-ticks li::before {
	color: var(--otg-blue-text);
}

/* ==========================================================================
   Account furniture — shared by the thank-you and profile blocks.
   Kept here rather than duplicated in both blocks' style.scss.
   ========================================================================== */

/* Horizontally scrollable record table. The block sets --otg-table-cols and
   --otg-table-min; the inner min-width is what makes it scroll on narrow
   screens instead of squashing. */
.otg-scroll {
	overflow-x: auto;
	min-width: 0;
}

.otg-table {
	display: grid;
	gap: 1px;
	background: var(--otg-rule);
	min-width: var(--otg-table-min, 440px);
}

.otg-table__row {
	display: grid;
	grid-template-columns: var(--otg-table-cols, repeat(4, minmax(0, 1fr)));
	gap: 12px;
	align-items: center;
	padding: 12px 20px;
	background: var(--otg-white);
}

.otg-table__row--head {
	background: var(--otg-off);
}

.otg-table__c {
	min-width: 0;
	font-family: var(--otg-sans);
	font-size: 13.8px;
	line-height: normal;
	color: var(--otg-ink);
	overflow-wrap: anywhere;
}

.otg-table__row--head .otg-table__c {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-table__c--mono {
	font-family: var(--otg-mono);
	font-size: 11.5px;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-table__c--num {
	font-family: var(--otg-mono);
	font-size: 12.5px;
	font-weight: 700;
	line-height: normal;
	text-align: right;
	color: var(--otg-ink);
}

.otg-table__c--act {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: right;
}

.otg-table__c--act a {
	color: var(--otg-green-text);
}

/* A panel row that is itself a link. */
.otg-linkrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-sans);
	font-size: 14.2px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
	text-decoration: none;
}

.otg-linkrow:last-child {
	border-bottom: none;
}

.otg-linkrow:hover {
	background: var(--otg-off);
}

.otg-linkrow::after {
	content: "→";
	flex-shrink: 0;
	color: var(--otg-blue-text);
}

/* ==========================================================================
   Home page
   ========================================================================== */

.otg-hl { color: var(--otg-lime); }
.otg-dim { color: var(--otg-muted); }

.otg-eyebrow--wrap {
	white-space: normal;
	align-items: flex-start;
}

.otg-eyebrow--wrap::before {
	margin-top: 8px;
}

.otg-label--lime { color: var(--otg-lime); }

/* --- Hero ---------------------------------------------------------------- */

/* The hero's own padding lives here, not on .otg-band — the design's Hero()
   puts zero padding on the <section> itself (only background/decoration) and
   all of it on this grid, which .otg-band's generic padding-block was
   stacking on top of, pushing the whole hero ~80px lower than the design. */
.otg-band.otg-hero {
	padding-block: 0;
}

.otg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
	gap: 56px;
	align-items: center;
	padding-block: clamp(58px, 6vw, 92px) clamp(64px, 7vw, 100px);
}

.otg-hero .otg-display--hero {
	margin-top: 24px;
}

.otg-hero__lead {
	margin-top: 26px;
	max-width: 540px;
}

.otg-hero__btns {
	margin-top: 34px;
}

/* Photo with the interface card overhanging its lower-left corner. */
.otg-herovisual {
	position: relative;
	min-height: 496px;
	margin-bottom: 30px;
}

.otg-herovisual__photo {
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.otg-herovisual__edge {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--otg-lime), var(--otg-cyan));
	z-index: 2;
}

.otg-uicard {
	position: absolute;
	left: -28px;
	bottom: -28px;
	width: min(92%, 384px);
	z-index: 2;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	border-radius: 4px;
	overflow: hidden;
	outline: 6px solid rgba(7, 26, 36, 0.35);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

.otg-uicard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-uicard__domain {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-uicard__rows {
	padding: 2px 18px;
}

.otg-uicard__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-uicard__match {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-uicard__teams {
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-uicard__row .otg-num {
	font-size: 13px;
	line-height: normal;
}

.otg-uicard__row .otg-status {
	min-width: 52px;
	justify-content: flex-end;
}

.otg-uicard__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--otg-off);
	border-top: 1px solid var(--otg-rule);
}

.otg-uicard__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 18px;
	border-right: 1px solid var(--otg-rule);
}

.otg-uicard__stat:last-child {
	border-right: 0;
}

.otg-uicard__statv {
	font-family: var(--otg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-uicard__statv--up {
	color: var(--otg-green-text);
}

/* --- Ownership ----------------------------------------------------------- */

.otg-display--own {
	font-size: clamp(2rem, 3.6vw, 3rem);
}

.otg-owncards {
	gap: 0;
	margin-top: clamp(38px, 4vw, 54px);
}

.otg-owncard {
	position: relative;
	padding: 26px 24px 30px;
	border-top: 1px solid var(--otg-rule);
	border-right: 1px solid var(--otg-rule);
}

.otg-owncards > .otg-owncard:first-child {
	border-left: 1px solid var(--otg-rule);
}

/* Accent rule draws out from the left on hover. */
.otg-owncard::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 24px;
	right: 24px;
	height: 3px;
	background: var(--otg-blue);
	transform: scaleX(0.2);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.otg-owncard:hover::before {
	transform: scaleX(1);
}

.otg-owncard--cyan::before { background: var(--otg-cyan); }
.otg-owncard--lime::before { background: var(--otg-lime); }
.otg-owncard--orange::before { background: var(--otg-orange); }

.otg-owncard__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.otg-owncard__t {
	font-family: var(--otg-sans);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.03em;
	color: var(--otg-ink);
}

.otg-owncard__n {
	font-family: var(--otg-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-ownbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: clamp(34px, 4vw, 48px);
	padding: 26px 32px;
	border-radius: 4px;
	background: var(--otg-navy);
}

.otg-ownbar__text {
	margin: 0;
	max-width: 720px;
	font-family: var(--otg-sans);
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #fff;
}

/* --- Audience ------------------------------------------------------------ */

.otg-whocards {
	gap: 0;
	margin-top: 48px;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-whocard {
	position: relative;
	overflow: hidden;
	padding: 28px 24px 34px;
	border-right: 1px solid var(--otg-navy-rule);
	transition: background 0.25s ease, transform 0.25s ease;
}

.otg-whocards > .otg-whocard:first-child {
	border-left: 1px solid var(--otg-navy-rule);
}

.otg-whocard:hover {
	background: rgba(255, 255, 255, 0.035);
	transform: translateY(-3px);
}

.otg-whocard::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--otg-cyan);
	transition: width 0.35s ease;
}

.otg-whocard:hover::before {
	width: 100%;
}

.otg-whocard--lime::before { background: var(--otg-lime); }
.otg-whocard--blue::before { background: var(--otg-blue); }
.otg-whocard--orange::before { background: var(--otg-orange); }

/* Oversized ghost numeral behind the card body. */
.otg-whocard::after {
	content: attr(data-n);
	position: absolute;
	right: -6px;
	bottom: -22px;
	font-family: var(--otg-sans);
	font-weight: 800;
	font-size: 92px;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.05);
	transition: color 0.3s ease;
	pointer-events: none;
}

.otg-whocard:hover::after {
	color: rgba(255, 255, 255, 0.11);
}

.otg-whocard__n {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-whocard__t {
	margin: 18px 0 10px;
	font-size: 18.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #fff;
}

.otg-prose--who {
	position: relative;
	font-size: 14.3px;
	color: var(--otg-on-navy-muted);
}

/* --- Activity feed ------------------------------------------------------- */

.otg-feed {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-orange);
}

.otg-feed__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-feed__title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-feed__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-feed__row:last-child {
	border-bottom: 0;
}

.otg-feed__time {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-muted);
}

.otg-feed__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.otg-feed__t {
	font-family: var(--otg-sans);
	font-size: 14.2px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-feed__d {
	font-family: var(--otg-sans);
	font-size: 13.2px;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-feed__tag {
	flex-shrink: 0;
	padding: 4px 9px;
	border: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-feed__tag--cyan { color: var(--wp--preset--color--cyan-text); background: rgba(57, 217, 255, 0.1); }
.otg-feed__tag--lime { color: var(--otg-green-text); background: rgba(188, 255, 56, 0.16); }
.otg-feed__tag--orange { color: var(--otg-orange-text); background: rgba(255, 102, 56, 0.1); }

/* --- Access tiers and channels ------------------------------------------- */

.otg-access {
	margin-top: 40px;
	gap: 20px;
}

.otg-access__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 18px 20px 0;
}

.otg-access__who {
	font-family: var(--otg-sans);
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-access__price {
	font-family: var(--otg-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-access--members {
	background: rgba(188, 255, 56, 0.07);
}

.otg-access--members .otg-access__price {
	color: var(--otg-green-text);
}

.otg-access__note {
	padding: 10px 20px 20px;
}

.otg-channels {
	margin-top: 20px;
}

.otg-channel {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--otg-cyan);
}

.otg-channel--blue {
	border-left-color: var(--otg-blue);
}

.otg-channel__badge {
	flex-shrink: 0;
	padding: 5px 10px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-channel__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-channel__t {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

/* --- Sport strip --------------------------------------------------------- */

.otg-sports {
	margin-top: 26px;
	gap: 16px;
}

.otg-sport {
	display: block;
	text-decoration: none;
	border: 1px solid var(--otg-rule);
	background: var(--otg-white);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.otg-sport:hover {
	border-color: var(--otg-lime);
	transform: translateY(-3px);
}

.otg-sport__shot {
	display: block;
	aspect-ratio: 4 / 3;
}

.otg-sport__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 18px;
}

.otg-sport__t {
	font-family: var(--otg-sans);
	font-size: 16px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-sport__d {
	font-family: var(--otg-sans);
	font-size: 13.2px;
	line-height: normal;
	color: var(--otg-muted);
}

/* --- Demos --------------------------------------------------------------- */

.otg-demos__lead {
	margin-top: 18px;
	max-width: 560px;
}

.otg-demos {
	margin-top: 44px;
	gap: 32px;
	align-items: stretch;
}

.otg-demo {
	display: flex;
	flex-direction: column;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
	padding: 26px 26px 28px;
}

.otg-demo__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin: 0;
	padding: 5px 10px;
	background: rgba(188, 255, 56, 0.16);
	color: var(--otg-green-text);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-demo__t {
	margin: 16px 0 0;
	font-size: 20px;
	line-height: normal;
	letter-spacing: -0.025em;
}

.otg-demo__domain {
	margin: 16px 0 0;
	font-family: var(--otg-mono);
	font-size: 11.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--otg-muted);
}

.otg-demo .otg-btns {
	margin-top: auto;
	padding-top: 22px;
}

/* --- Home pricing ladder ------------------------------------------------- */

.otg-ladder {
	display: flex;
	gap: 0;
	margin-top: 32px;
	border: 1px solid var(--otg-navy-rule);
}

.otg-ladder__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 0;
	margin: 0;
	padding: 18px 20px;
	border-right: 1px solid var(--otg-navy-rule);
}

.otg-ladder__step:last-child {
	border-right: 0;
}

.otg-ladder__step.is-active {
	background: rgba(188, 255, 56, 0.08);
	box-shadow: inset 0 3px 0 var(--otg-lime);
}

.otg-ladder__when {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-ladder__price {
	font-family: var(--otg-sans);
	font-size: 26px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.04em;
	color: var(--otg-on-navy-muted);
}

.otg-ladder__step.is-active .otg-ladder__price {
	color: var(--otg-lime);
}

.otg-ladder__per {
	margin-left: 4px;
	font-family: var(--otg-mono);
	font-size: 11px;
	line-height: normal;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--otg-on-navy-muted);
}

.otg-lockchip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 7px 12px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 0 28px rgba(188, 255, 56, 0.28);
}

.otg-planpanel {
	padding: 30px 30px 32px;
	border: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-ticks--dark li {
	color: var(--otg-on-navy-body);
}

.otg-ticks--dark li::before {
	color: var(--otg-lime);
}

@media (max-width: 1020px) {
	.otg-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.otg-herovisual {
		min-height: 340px;
		margin-bottom: 44px;
	}

	.otg-uicard {
		left: 0;
		bottom: -20px;
	}

	.otg-owncards,
	.otg-whocards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.otg-ladder {
		flex-direction: column;
	}

	.otg-ladder__step {
		border-right: 0;
		border-bottom: 1px solid var(--otg-navy-rule);
	}
}

@media (max-width: 620px) {
	.otg-owncards,
	.otg-whocards {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-channel {
		flex-wrap: wrap;
	}
}

/* Lighter photo treatment (design dim=0.45) for cards that carry an overlaid
   label rather than sitting behind a whole band. */
.otg-shot--soft img {
	filter: grayscale(0.85) contrast(1.06) brightness(0.93);
}

.otg-shot--soft::before {
	background: linear-gradient(
		150deg,
		rgba(7, 26, 36, 0.41) 0%,
		rgba(13, 43, 50, 0.23) 45%,
		rgba(7, 26, 36, 0.39) 100%
	);
}

/* --- Sport strip (navy band, label overlaid on the photo) ---------------- */

.otg-sportstrip__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.otg-sports {
	margin-top: 30px;
	gap: 14px;
}

.otg-sport {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	text-decoration: none;
	background: none;
	border: 0;
	transition: transform 0.25s ease;
}

.otg-sport:hover {
	transform: translateY(-4px);
	border: 0;
}

.otg-sport__shot {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 3px;
}

/* Hairline frame that warms to lime on hover. */
.otg-sport::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	pointer-events: none;
	transition: border-color 0.25s ease;
}

.otg-sport:hover::before {
	border-color: rgba(188, 255, 56, 0.45);
}

/* Scrim so the label stays legible over any photo. */
.otg-sport::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	z-index: 2;
	background: linear-gradient(180deg, rgba(7, 26, 36, 0) 0%, rgba(7, 26, 36, 0.9) 100%);
	pointer-events: none;
}

.otg-sport__body {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}

.otg-sport__t {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.otg-sport__t::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--otg-lime);
	flex-shrink: 0;
}

.otg-sport__d {
	font-family: var(--otg-sans);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--otg-on-navy-muted);
}

@media (max-width: 1020px) {
	.otg-sports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 620px) {
	.otg-sports { grid-template-columns: minmax(0, 1fr); }
}

.otg-display--strip {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	max-width: 560px;
}

.otg-label--inline {
	margin-top: 0;
}

/* ==========================================================================
   About page
   ========================================================================== */

.otg-centered {
	text-align: center;
}

.otg-centered .otg-label {
	justify-content: center;
}

.otg-centered .otg-display {
	margin-inline: auto;
	max-width: 620px;
}

.otg-hero--about {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
}

.otg-aboutshot {
	position: relative;
}

.otg-aboutshot__photo {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
}

.otg-aboutshot__edge {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(90deg, var(--otg-lime), var(--otg-cyan));
}

.otg-aboutshot__card {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	padding: 16px 18px;
	background: rgba(7, 26, 36, 0.88);
	border: 1px solid var(--otg-navy-rule);
	backdrop-filter: blur(6px);
}

.otg-aboutshot__k {
	display: block;
	margin-bottom: 8px;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-aboutshot__card .otg-prose {
	color: var(--otg-on-navy-body);
}

/* --- Comparison matrix --------------------------------------------------- */

/* Wide tables scroll inside their own box rather than the page. */
.otg-scroller {
	margin-top: 40px;
	overflow-x: auto;
}

.otg-matrix {
	min-width: 560px;
	display: grid;
	grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, 180px));
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-matrix__h {
	padding: 13px 18px;
	background: var(--otg-off);
	border-bottom: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-matrix__h--c {
	text-align: center;
	padding-inline: 14px;
	border-left: 1px solid var(--otg-rule);
}

.otg-matrix__h--win {
	background: rgba(188, 255, 56, 0.14);
	color: var(--otg-green-text);
}

.otg-matrix__l {
	padding: 12px 18px;
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--otg-body);
	overflow-wrap: anywhere;
}

.otg-matrix__a,
.otg-matrix__b {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	border-left: 1px solid var(--otg-rule);
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.otg-matrix__a {
	font-weight: 500;
	color: var(--otg-slate);
}

.otg-matrix__b {
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
	background: rgba(188, 255, 56, 0.06);
}

.otg-matrix__l--last,
.otg-matrix__a--last,
.otg-matrix__b--last {
	border-bottom: 0;
}

/* --- Principles ---------------------------------------------------------- */

.otg-principles {
	gap: 1px;
	margin-top: 40px;
	background: var(--otg-navy-rule);
	border: 1px solid var(--otg-navy-rule);
	text-align: left;
}

.otg-principle {
	position: relative;
	background: var(--otg-navy);
	padding: 24px 22px 28px;
}

.otg-principle::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 3px;
	background: var(--otg-lime);
}

.otg-principle--cyan::before { background: var(--otg-cyan); }
.otg-principle--blue::before { background: var(--otg-blue); }

.otg-principle__n {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-principle__t {
	margin: 16px 0 8px;
	font-size: 17.5px;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: #fff;
}

/* --- Product stack ------------------------------------------------------- */

.otg-split--stack {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
}

.otg-layers {
	display: grid;
	gap: 0;
}

.otg-layer {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-left: 3px solid var(--otg-blue);
}

.otg-layer--cyan { border-left-color: var(--otg-cyan); }
.otg-layer--lime { border-left-color: var(--otg-lime); }

.otg-layer.is-product {
	background: rgba(188, 255, 56, 0.06);
}

.otg-layer__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.otg-layer__t {
	font-family: var(--otg-sans);
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-layer__d {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: 1.62;
	color: var(--otg-muted);
}

.otg-layer__badge {
	margin-left: auto;
	flex-shrink: 0;
	padding: 4px 8px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-layer__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	font-family: var(--otg-mono);
	font-size: 11px;
	line-height: normal;
	color: var(--otg-rule-2);
}

/* --- Three-up thread cards ----------------------------------------------- */

.otg-thread--3 {
	margin-top: 38px;
}

.otg-threadcard {
	background: var(--otg-white);
	padding: 24px 24px 28px;
}

.otg-threadcard__t {
	margin: 0 0 9px;
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
}

/* Dashed "still to supply" note. */
@media (max-width: 1020px) {
	.otg-hero--about,
	.otg-split--stack {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-principles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.otg-principles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   FAQ page
   ========================================================================== */

/* A band whose own padding is removed so a full-width rail can sit flush
   against its lower edge. */
.otg-band--flush {
	padding-bottom: 0;
}

.otg-faqhero {
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	align-items: center;
	padding-bottom: clamp(52px, 5.5vw, 80px);
}

.otg-faqcard {
	padding: 28px 30px 30px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--otg-navy-rule);
	border-left: 3px solid var(--otg-lime);
}

.otg-faqcard__k {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-faqcard__q {
	margin: 16px 0 0;
	font-family: var(--otg-sans);
	font-size: clamp(1.3rem, 2.1vw, 1.7rem);
	line-height: normal;
	font-weight: 800;
	letter-spacing: -0.028em;
	color: #fff;
}

/* The design sizes this one paragraph down from the site's 16.5px default. */
.otg-faqcard .otg-prose {
	font-size: 15.5px;
}

.otg-faqcard__list {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--otg-navy-rule);
	gap: 9px;
}

/* --- Jump rail ----------------------------------------------------------- */

.otg-jumpbar {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-jumpbar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 14px 16px;
}

.otg-jumpbar__k {
	margin-right: 6px;
	font-family: var(--otg-sans);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 2px;
	border: 1px solid var(--otg-navy-rule);
	background: transparent;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.otg-chip:hover {
	border-color: rgba(188, 255, 56, 0.5);
	background: rgba(188, 255, 56, 0.08);
}

.otg-chip__n {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--otg-lime);
}

.otg-chip__l {
	font-family: var(--otg-sans);
	font-size: 10px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-on-navy-body);
	transition: color 0.2s ease;
}

.otg-chip:hover .otg-chip__l {
	color: #fff;
}

.otg-chip__c {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-on-navy-muted);
}

/* --- Question groups ----------------------------------------------------- */

.otg-faqgroup__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.otg-faqgroup__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 12.5px;
	line-height: normal;
	font-weight: 700;
}

.otg-faqgroup__n--cyan {
	color: var(--otg-cyan);
}

.otg-display--group {
	font-size: clamp(1.55rem, 2.5vw, 2.05rem);
	margin-top: 18px;
	max-width: 330px;
}

.otg-faqgroup__intro {
	margin-top: 14px;
	max-width: 310px;
	font-size: 15.3px;
	line-height: normal;
}

.otg-rulebar {
	width: 40px;
	height: 3px;
	margin: 22px 0 0;
	border: 0;
	background: var(--otg-lime);
	opacity: 1;
}

.otg-rulebar--cyan {
	background: var(--otg-cyan);
}

/* --- Where to look next -------------------------------------------------- */

.otg-nextpanel {
	border: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-nextpanel__head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.04);
}

.otg-nextpanel__title {
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.otg-nextlink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--otg-navy-rule);
	text-decoration: none;
	transition: background 0.2s ease;
}

.otg-nextlink--last {
	border-bottom: 0;
}

.otg-nextlink:hover {
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
}

.otg-nextlink__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otg-nextlink__t {
	font-family: var(--otg-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #fff;
	transition: color 0.2s ease;
}

.otg-nextlink:hover .otg-nextlink__t {
	color: var(--otg-lime);
}

.otg-nextlink__d {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-nextlink__arrow {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-on-navy-muted);
	transition: transform 0.2s ease, color 0.2s ease;
}

.otg-nextlink:hover .otg-nextlink__arrow {
	transform: translateX(3px);
	color: var(--otg-lime);
}

@media (max-width: 1020px) {
	.otg-faqhero {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   How It Works
   ========================================================================== */

.otg-label--green { color: var(--otg-green-text); }

/* --- Dark and light data panels ------------------------------------------ */

.otg-dpanel,
.otg-lpanel {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.otg-dpanel {
	background: var(--otg-navy);
	border: 1px solid var(--otg-navy-rule);
	box-shadow: 0 24px 50px rgba(7, 26, 36, 0.28);
}

.otg-lpanel {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	box-shadow: 0 18px 38px rgba(16, 22, 27, 0.06);
}

.otg-dpanel__head,
.otg-lpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
}

.otg-dpanel__head {
	border-bottom: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.04);
}

.otg-lpanel__head {
	border-bottom: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-dpanel__title,
.otg-lpanel__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-dpanel__title { color: #fff; }
.otg-lpanel__title { color: var(--otg-ink); }

.otg-dpanel__meta,
.otg-lpanel__meta {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-dpanel__meta { color: var(--otg-on-navy-muted); }
.otg-lpanel__meta { color: var(--otg-muted); }

.otg-prow {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-dpanel .otg-prow {
	border-bottom-color: var(--otg-navy-rule);
}

.otg-prow--last {
	border-bottom: none;
}

.otg-prow__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-prow__l {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-dpanel .otg-prow__l { color: #fff; }

.otg-prow__s {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-dpanel .otg-prow__s { color: var(--otg-on-navy-muted); }

.otg-prow__v {
	white-space: nowrap;
	font-family: var(--otg-mono);
	font-size: 13.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-prow__badge {
	white-space: nowrap;
	padding: 4px 9px;
	border-radius: 2px;
	border: 1px solid var(--otg-navy-rule);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-prow__badge--cyan { color: var(--otg-cyan); }
.otg-prow__badge--lime { color: var(--otg-lime); }

/* --- Step rows ----------------------------------------------------------- */

.otg-step-row {
	align-items: center;
	gap: 56px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}

/* Alternate which side the panel sits on down the page. */
.otg-step-row--flip {
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
}

.otg-step-row--flip > .otg-step-row__body { order: 2; }
.otg-step-row--flip > .otg-lpanel { order: 1; }

.otg-stepmeta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
}

.otg-stepmeta__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-cyan);
	font-family: var(--otg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

.otg-stepmeta__n--lime { color: var(--otg-lime); }
.otg-stepmeta__n--blue { color: var(--wp--preset--color--blue); }

.otg-stepmeta__tag {
	padding: 5px 10px;
	border-radius: 2px;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan-text);
}

.otg-stepmeta__tag--lime { color: var(--otg-ink); }
.otg-stepmeta__tag--blue { color: var(--otg-blue-text); }

.otg-display--step {
	font-size: clamp(1.7rem, 2.9vw, 2.35rem);
	margin-top: 20px;
	max-width: 520px;
}

.otg-ticks--step {
	margin-top: 24px;
	gap: 11px;
}

.otg-ticks--step li {
	font-size: 14.8px;
	line-height: normal;
}

.otg-paths {
	margin-top: 22px;
	gap: 12px;
}

.otg-path {
	padding: 14px 16px;
	background: var(--otg-off);
	border: 1px solid var(--otg-rule);
	border-top: 3px solid var(--otg-cyan);
	min-width: 0;
}

.otg-band--off .otg-path {
	background: var(--otg-white);
}

.otg-path--lime {
	border-top-color: var(--otg-lime);
}

.otg-path__k {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan-text);
}

.otg-path--lime .otg-path__k {
	color: var(--otg-green-text);
}

.otg-path p {
	margin-top: 8px;
}

.otg-callout {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding: 13px 16px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-off);
}

.otg-band--off .otg-callout {
	background: var(--otg-white);
}

.otg-callout .otg-prose {
	flex: 1 1 220px;
	min-width: 0;
}

.otg-callout__link {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-green-text);
	text-decoration: none;
}

/* --- Launch Setup -------------------------------------------------------- */

.otg-ls {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	min-width: 0;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
	box-shadow: 0 26px 54px rgba(16, 22, 27, 0.09);
}

.otg-ls__main {
	padding: clamp(26px, 3.5vw, 40px);
	min-width: 0;
}

.otg-display--ls {
	font-size: clamp(1.7rem, 2.9vw, 2.3rem);
	margin-top: 14px;
	max-width: 460px;
}

.otg-ls__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 0;
}

.otg-ls__amount {
	font-family: var(--otg-mono);
	font-size: 30px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-ls__lead {
	margin-top: 16px;
	max-width: 460px;
	font-size: 15.5px;
	line-height: normal;
}

.otg-ls__btns {
	margin-top: 24px;
}

.otg-ls__note {
	margin-top: 20px;
	max-width: 460px;
	line-height: 1.7;
	font-size: 8.5px;
}

.otg-ls__side {
	border-left: 1px solid var(--otg-rule);
	background: var(--otg-off);
	min-width: 0;
}

.otg-ls__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 20px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-ls__k {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-lsrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--otg-rule);
	min-width: 0;
}

.otg-lsrow__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 9px;
	font-weight: 700;
	line-height: normal;
}

.otg-lsrow__t {
	font-family: var(--otg-sans);
	font-size: 14.2px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
	min-width: 0;
	overflow-wrap: anywhere;
}

.otg-ls__foot {
	padding: 12px 20px;
	background: var(--otg-white);
	border-top: 1px solid var(--otg-rule);
}

/* --- Responsibility matrix ----------------------------------------------- */

.otg-scroller--dark {
	margin-top: 44px;
}

.otg-rmatrix {
	min-width: 520px;
	display: grid;
	grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(110px, 132px));
	border: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-rmatrix__h {
	padding: 13px 18px;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid var(--otg-navy-rule);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-rmatrix__h--us,
.otg-rmatrix__h--you {
	text-align: center;
	padding-inline: 14px;
	border-left: 1px solid var(--otg-navy-rule);
}

.otg-rmatrix__h--us { color: #8fb2ff; }
.otg-rmatrix__h--you { color: var(--otg-lime); }

.otg-rmatrix__l {
	padding: 12px 18px;
	border-bottom: 1px solid var(--otg-navy-rule);
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--otg-on-navy-body);
	overflow-wrap: anywhere;
}

.otg-rmatrix__c {
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var(--otg-navy-rule);
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-rmatrix__c.is-on-blue { background: rgba(50, 107, 255, 0.08); }
.otg-rmatrix__c.is-on-lime { background: rgba(188, 255, 56, 0.07); }

.otg-rmatrix__l--last,
.otg-rmatrix__c--last {
	border-bottom: 0;
}

/* Solid = owns it, ring = shared at setup, dash = not theirs. */
.otg-mark {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.otg-mark--none {
	width: 9px;
	height: 2px;
	border-radius: 0;
	background: var(--otg-slate);
}

.otg-mark--own.otg-mark--blue { background: var(--otg-blue); }
.otg-mark--own.otg-mark--lime { background: var(--otg-lime); }
.otg-mark--own.otg-mark--muted { background: var(--otg-on-navy-muted); }

.otg-mark--shared { background: transparent; }
.otg-mark--shared.otg-mark--blue { border: 2px solid var(--otg-blue); }
.otg-mark--shared.otg-mark--lime { border: 2px solid var(--otg-lime); }
.otg-mark--shared.otg-mark--muted { border: 2px solid var(--otg-on-navy-muted); }

.otg-legend {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.otg-legend__i {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-sans);
	font-size: 10px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-legend__note {
	margin-left: auto;
	max-width: 460px;
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--otg-on-navy-muted);
}

.otg-legend__note a {
	color: var(--otg-lime);
	font-weight: 600;
}

/* --- Off your plate ------------------------------------------------------ */

.otg-thread--never {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 42px;
}

.otg-nevercard {
	background: var(--otg-white);
	padding: 24px 24px 28px;
}

.otg-nevercard__dash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	border-radius: 50%;
	border: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-slate);
}

.otg-nevercard__t {
	margin: 16px 0 8px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
}

@media (max-width: 1020px) {
	.otg-step-row,
	.otg-step-row--flip,
	.otg-ls,
	.otg-thread--never {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-step-row--flip > .otg-step-row__body { order: 0; }
	.otg-step-row--flip > .otg-lpanel { order: 0; }

	.otg-ls__side {
		border-left: 0;
		border-top: 1px solid var(--otg-rule);
	}

	.otg-legend__note {
		margin-left: 0;
	}
}

.otg-contact__lead {
	max-width: 560px;
}

/* ==========================================================================
   Single post
   ========================================================================== */

.otg-posthero__inner {
	max-width: 900px;
}

.otg-posthero__cat a {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
	text-decoration: none;
}

.otg-display--post {
	font-size: clamp(2rem, 3.8vw, 3rem);
	margin-top: 18px;
}

.otg-posthero__stand {
	margin-top: 18px;
	max-width: 640px;
}

.otg-postmeta {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-postmeta__author,
.otg-postmeta__date {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-postmeta__author a {
	color: #fff;
	text-decoration: none;
}

.otg-postimage {
	margin-bottom: clamp(30px, 4vw, 48px);
}

.otg-postimage img {
	width: 100%;
	border-radius: 4px;
}

/* 720px measure at 17/1.72 is roughly 85 characters a line. */
.otg-article__body {
	max-width: 720px;
	margin-inline: auto;
}

.otg-article__body > * {
	margin-block: 0 1.35em;
}

.otg-article__body :is(h2, h3) {
	margin-top: 1.9em;
	scroll-margin-top: 92px;
}

.otg-article__body blockquote {
	margin-inline: 0;
	padding-left: 22px;
	border-left: 3px solid var(--otg-lime);
	font-size: 19px;
	line-height: 1.55;
	color: var(--otg-ink);
}

.otg-article__body ul,
.otg-article__body ol {
	padding-left: 1.2em;
}

.otg-article__body li {
	margin-bottom: 0.5em;
	font-size: 17px;
	line-height: 1.72;
	color: var(--otg-body);
}

.otg-postcta {
	max-width: 720px;
	margin: clamp(40px, 5vw, 64px) auto 0;
	padding: 30px 32px 32px;
	background: var(--otg-navy);
	border-radius: 4px;
}

.otg-postcta__h {
	margin: 0 0 14px;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: normal;
}

/* ==========================================================================
   Enterprise
   ========================================================================== */

/* Nine tiles: 3 → 1 at the breakpoint, never 2. Nine children do not divide
   into two columns, and the last row would expose the gap hairline. */
.otg-caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 40px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
}

.otg-cap {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 24px 28px;
	background: var(--otg-white);
}

.otg-cap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--otg-lime);
	transition: width 0.35s ease;
}

.otg-cap:hover::before {
	width: 100%;
}

.otg-cap--cyan::before { background: var(--otg-cyan); }
.otg-cap--blue::before { background: var(--otg-blue); }

.otg-cap__t {
	margin: 0;
	line-height: 1.25;
	font-family: var(--otg-sans);
	font-size: 17.5px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-cap__d {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: 1.62;
	color: var(--otg-muted);
}

/* --- Deep-dive visuals --------------------------------------------------- */

.otg-migr {
	display: flex;
	align-items: stretch;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.otg-migr__side {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
}

.otg-migr__side--to {
	border-left: 3px solid var(--otg-lime);
	background: rgba(188, 255, 56, 0.07);
}

.otg-migr__k {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-migr__v {
	font-family: var(--otg-sans);
	font-size: 16px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-migr__arrow {
	display: flex;
	align-items: center;
	font-family: var(--otg-mono);
	font-size: 16px;
	line-height: normal;
	color: var(--otg-slate);
}

.otg-statgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: 14px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
}

.otg-statgrid__i {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px;
	background: var(--otg-white);
}

.otg-statgrid__n {
	font-family: var(--otg-mono);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-statgrid__k {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-feeds {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.otg-feeds__chip {
	padding: 8px 12px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-feeds__arrow {
	font-family: var(--otg-mono);
	font-size: 14px;
	line-height: normal;
	color: var(--otg-slate);
}

.otg-feeds__out {
	padding: 8px 12px;
	background: rgba(50, 107, 255, 0.08);
	border: 1px solid var(--otg-blue);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-blue-text);
}

.otg-youstrip {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 13px 16px;
	background: rgba(188, 255, 56, 0.1);
	border-left: 3px solid var(--otg-lime);
}

.otg-youstrip__k {
	flex-shrink: 0;
	padding: 4px 9px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-youstrip__t {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: 1.62;
	color: var(--otg-ink);
}

.otg-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 160px;
	margin-top: 22px;
	padding: 16px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
}

.otg-chart__bar {
	flex: 1 1 0;
	height: var(--h);
	background: var(--otg-rule-2);
	border-radius: 1px;
}

.otg-chart__bar--peak {
	background: var(--otg-lime);
}

.otg-chart__cap {
	margin-top: 10px;
	font-size: 8.5px;
	line-height: normal;
}

.otg-wl {
	margin-top: 22px;
	background: var(--otg-navy);
	border-radius: 4px;
	overflow: hidden;
}

.otg-wl__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-wl__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--otg-navy-rule);
}

.otg-wl__name {
	margin-left: 10px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.otg-wl__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-wl__row--last { border-bottom: 0; }

.otg-wl__c {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
}

.otg-wl__s {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-wl__s--none { color: var(--otg-on-navy-muted); }

/* --- Which one you need -------------------------------------------------- */

.otg-which {
	margin-top: 40px;
	gap: 20px;
}

.otg-whichcard {
	padding: 26px 26px 28px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--otg-navy-rule);
	border-top: 3px solid var(--otg-navy-rule);
}

.otg-whichcard--ent {
	border-top-color: var(--otg-lime);
	background: rgba(188, 255, 56, 0.05);
}

.otg-whichcard__k {
	margin: 0 0 12px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-whichcard--ent .otg-whichcard__k {
	color: var(--otg-lime);
}

.otg-processgrid {
	margin-top: 40px;
}

.otg-processcard__n {
	margin: 0 0 10px;
	font-family: var(--otg-mono);
	font-size: 11px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--otg-muted);
}

@media (max-width: 1020px) {
	.otg-caps,
	.otg-which,
	.otg-processgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-statgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Legal documents — privacy, terms, cookies, acceptable use, refunds.
   One layout, shared by all five: hero + document rail, then a sticky contents
   rail beside a numbered clause body hung off a hairline. New rules only;
   nothing above this banner is modified.
   ========================================================================== */

.otg-legalhero {
	padding-bottom: clamp(44px, 5vw, 68px);
}

.otg-legalhero .otg-display--pricing {
	max-width: 780px;
}

.otg-legalhero .otg-lead {
	max-width: 680px;
}

/* Long values (a date, a company name) must not be clipped by the mono nowrap. */
.otg-legalhero .otg-statrow__v {
	white-space: normal;
}

/* The document you are reading is held open in the rail. */
.otg-legalrail .otg-chip.is-current {
	border-color: rgba(188, 255, 56, 0.5);
	background: rgba(188, 255, 56, 0.12);
}

.otg-legalrail .otg-chip.is-current .otg-chip__l {
	color: #fff;
}

/* --- Contents rail ------------------------------------------------------- */

.otg-legal {
	display: grid;
	grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	min-width: 0;
}

.otg-legalnav {
	position: sticky;
	top: 92px;
	min-width: 0;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.otg-legalnav__k {
	display: block;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--otg-rule-2);
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-legalnav__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otg-legalnav__link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-sans);
	font-size: 13.4px;
	line-height: 1.45;
	color: var(--otg-muted);
	text-decoration: none;
	transition: color 0.18s ease;
}

.otg-legalnav__link:hover {
	color: var(--otg-ink);
}

.otg-legalnav__n {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--otg-slate);
}

.otg-legalnav__link:hover .otg-legalnav__n {
	color: var(--otg-green-text);
}

.otg-legalnav__foot {
	display: block;
	margin-top: 14px;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* --- In short ------------------------------------------------------------ */

.otg-legalmain {
	min-width: 0;
	max-width: 776px;
}

.otg-legalshort__list {
	margin: 0;
	padding: 18px 20px 20px;
	gap: 11px;
}

.otg-legalshort__list li {
	font-size: 14.8px;
	line-height: normal;
}

/* --- Numbered clause body ------------------------------------------------ */

.otg-legalbody {
	--otg-legal-gutter: 34px;
	margin-top: 40px;
	padding-left: var(--otg-legal-gutter);
	border-left: 1px solid var(--otg-rule-2);
	counter-reset: otg-clause;
	min-width: 0;
}

.otg-legal__h {
	position: relative;
	counter-increment: otg-clause;
	margin: 46px 0 0;
	font-family: var(--otg-sans);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
	scroll-margin-top: 96px;
}

.otg-legalbody > .otg-legal__h:first-child {
	margin-top: 0;
}

/* The number sits on the hairline and knocks a hole in it. */
.otg-legal__h::before {
	content: counter(otg-clause, decimal-leading-zero);
	position: absolute;
	top: -2px;
	left: calc(var(--otg-legal-gutter) * -1);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--otg-navy);
	color: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.otg-legalbody p {
	margin-top: 14px;
}

.otg-legalbody :is(ul, ol) {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.otg-legalbody li {
	position: relative;
	padding-left: 18px;
	font-family: var(--otg-sans);
	font-size: 15.6px;
	line-height: 1.62;
	color: var(--otg-body);
	text-wrap: pretty;
}

.otg-legalbody li::before {
	content: "";
	position: absolute;
	top: 0.78em;
	left: 0;
	width: 7px;
	height: 1px;
	background: var(--otg-rule-2);
}

.otg-legalbody strong {
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-legalbody a,
.otg-legalshort a {
	color: var(--otg-green-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}

.otg-legalbody a:hover,
.otg-legalshort a:hover {
	color: var(--otg-ink);
}

/* --- Contact block on the closing navy band ------------------------------ */

.otg-legalcontact {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 26px;
	padding: 18px 20px;
	border: 1px solid var(--otg-navy-rule);
	border-left: 3px solid var(--otg-lime);
	background: rgba(255, 255, 255, 0.03);
}

.otg-legalcontact__k {
	margin-bottom: 4px;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-legalcontact__l {
	font-family: var(--otg-sans);
	font-size: 14.2px;
	line-height: 1.55;
	color: #fff;
	overflow-wrap: anywhere;
}

.otg-legalcontact__l--quiet {
	color: var(--otg-on-navy-muted);
}

.otg-legalcontact a {
	color: var(--otg-lime);
	font-weight: 600;
	text-decoration: none;
}

.otg-legalcontact a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1020px) {
	.otg-legal {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.otg-legalnav {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 620px) {
	.otg-legalbody {
		--otg-legal-gutter: 26px;
	}

	.otg-legal__h::before {
		width: 24px;
		height: 24px;
		font-size: 10px;
	line-height: normal;
	}

	.otg-legal__h {
		font-size: 18px;
	line-height: normal;
	}
}

/* ==========================================================================
   Customer stories — the annotated example card and the three story slots.
   ========================================================================== */

.otg-storyhero {
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: center;
}

/* --- Annotated example card (sits on .otg-panel) ------------------------- */

.otg-storycard__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--otg-rule);
	min-width: 0;
}

.otg-storycard__row--last {
	border-bottom: 0;
}

.otg-storytag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.otg-storycard__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
}

.otg-storycard__k {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-storycard__v {
	font-family: var(--otg-sans);
	font-size: 14.6px;
	line-height: 1.6;
	color: var(--otg-body);
	text-wrap: pretty;
}

.otg-storycard__quote {
	font-family: var(--otg-sans);
	font-size: 16.5px;
	line-height: 1.55;
	letter-spacing: -0.015em;
	color: var(--otg-ink);
	text-wrap: pretty;
}

/* Stands in for the screenshot a real story carries. */
.otg-storyshot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	padding: 16px 18px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-off);
	text-align: center;
	font-family: var(--otg-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--otg-muted);
}

/* --- The three slots ----------------------------------------------------- */

.otg-storyslot {
	display: flex;
	flex-direction: column;
}

.otg-storyslot__top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 4px;
}

.otg-storyslot .otg-threadcard__t {
	margin-top: 12px;
}

.otg-storyslot__fill {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 18px 14px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-off);
	text-align: center;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* Keeps a gap when the card is short and still bottom-aligns all three. */
.otg-storyslot .otg-prose--sm {
	margin-bottom: 22px;
}

.otg-storyslot__fill--open {
	border-color: var(--otg-lime);
	background: rgba(188, 255, 56, 0.1);
	color: var(--otg-green-text);
}

.otg-storyslot__fill--open:hover {
	border-color: var(--otg-green-text);
	color: var(--otg-ink);
}

@media (max-width: 1020px) {
	.otg-storyhero {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Platform
   ========================================================================== */

/* Step meta on a dark band: the navy number tile and the white tag chip both
   vanish against navy, so they take the on-navy palette instead. */
:is(.otg-band--navy, .otg-band--deep) .otg-stepmeta__n {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--otg-navy-rule);
}

:is(.otg-band--navy, .otg-band--deep) .otg-stepmeta__tag {
	background: transparent;
	border-color: var(--otg-navy-rule);
	color: var(--otg-cyan);
}

:is(.otg-band--navy, .otg-band--deep) .otg-stepmeta__tag--lime { color: var(--otg-lime); }
:is(.otg-band--navy, .otg-band--deep) .otg-stepmeta__tag--blue { color: #8fb2ff; }

/* .otg-mono declares its own colour at equal specificity to .otg-on-navy-muted
   and wins on source order, so a mono meta line sitting directly on a dark
   band needs its own modifier. */
.otg-mono--on-navy { color: var(--otg-on-navy-muted); }

/* Panel values that carry a sign — per-expert yields. */
.otg-prow__v--up { color: var(--otg-green-text); }
.otg-prow__v--down { color: var(--otg-red); }
.otg-dpanel .otg-prow__v--up { color: var(--otg-lime); }
.otg-dpanel .otg-prow__v--down { color: #ff8a7a; }

/* Tick and dash answers in the light matrix, which is otherwise sized for
   the word answers used on the About page. */
.otg-matrix__mark {
	font-family: var(--otg-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.otg-matrix__mark--yes { color: var(--otg-green-text); }
.otg-matrix__mark--no { color: var(--otg-slate); }

/* ==========================================================================
   Who it's for
   ========================================================================== */

/* The six profiles, overlaid on the hero photo. */
.otg-wholist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otg-wholist li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: var(--otg-sans);
	font-size: 12.5px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The design's Dot: a 6px circle, not the square used elsewhere. */
.otg-wholist li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--otg-lime);
}

/* --- Profile cards ------------------------------------------------------- */

.otg-profiles {
	gap: 24px;
	margin-top: 44px;
	align-items: stretch;
}

.otg-profile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-blue);
}

.otg-profile--lime { border-top-color: var(--otg-lime); }
.otg-profile--cyan { border-top-color: var(--otg-cyan); }

.otg-profile__top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 22px 24px 0;
}

.otg-profile__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-blue);
	font-family: var(--otg-mono);
	font-size: 12.5px;
	font-weight: 700;
	line-height: normal;
}

.otg-profile--lime .otg-profile__n { color: var(--otg-lime); }
.otg-profile--cyan .otg-profile__n { color: var(--otg-cyan); }

.otg-profile__role {
	font-family: var(--otg-sans);
	font-size: 19.5px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.028em;
	color: var(--otg-ink);
}

.otg-profile__you {
	margin: 14px 0 0;
	padding: 0 24px;
}

/* Today | With OwnTheGame, split by a hairline. */
.otg-profile__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 22px;
	background: var(--otg-rule);
	border-top: 1px solid var(--otg-rule);
}

.otg-profile__block {
	padding: 18px 20px 22px;
	background: var(--otg-white);
	min-width: 0;
}

.otg-profile__block--today { background: var(--otg-off); }

.otg-profile__k {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-profile__block--today .otg-profile__k { color: var(--otg-orange-text); }
.otg-profile__block--with .otg-profile__k { color: var(--otg-blue-text); }

/* The problem list — the mirror of .otg-ticks. */
.otg-crosses {
	display: grid;
	gap: 9px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.otg-crosses li {
	display: flex;
	gap: 9px;
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--otg-muted);
}

.otg-crosses li::before {
	content: "\00d7";
	color: var(--otg-orange-text);
	font-weight: 700;
	line-height: normal;
	flex-shrink: 0;
}

.otg-profile .otg-ticks {
	margin-top: 14px;
	gap: 9px;
}

.otg-profile .otg-ticks li { font-size: 13.5px;
	line-height: normal; }

.otg-profile__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: auto 0 0;
	padding: 14px 24px;
	border-top: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

@media (max-width: 1020px) {
	/* Three cards, not four: the shared two-column fallback would leave an
	   empty cell with its gap hairline showing. */
	.otg-principles--3,
	.otg-profiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.otg-profile__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

.otg-sechead--related {
	margin-bottom: 26px;
}

.otg-sechead--insights {
	align-items: flex-end;
	margin-bottom: 30px;
	gap: 18px 28px;
}

.otg-display--insights {
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	margin-top: 14px;
	max-width: 560px;
}

.otg-insights__sub {
	margin-top: 14px;
	max-width: 520px;
	font-size: 15.5px;
	line-height: normal;
}

/* Related-articles band under a post: the design's own padding. */
.single .otg-band--white.otg-band--tight {
	padding-block: clamp(44px, 4.5vw, 68px);
}

/* ==========================================================================
   Legal documents, realigned to the design source (Legal.jsx / LegalPage).
   Overrides of the earlier legal rules; append-only.
   ========================================================================== */

.otg-legalband {
	padding-top: clamp(40px, 4.5vw, 64px);
}

.otg-legalhero {
	padding-bottom: clamp(36px, 4vw, 52px);
}

.otg-legalhero .otg-display {
	margin-top: 18px;
	max-width: 720px;
	font-size: clamp(2rem, 3.6vw, 3rem);
}

.otg-legalhero .otg-lead {
	margin-top: 18px;
	max-width: 620px;
	font-size: 16.5px;
}

.otg-legalmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 22px;
}

.otg-legalmeta span {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-legalmeta__d {
	width: 1px;
	height: 12px;
	background: var(--otg-navy-rule);
}

/* Document rail: the open document is lime, per DocChip. */
.otg-legalrail .otg-chip.is-current {
	border-color: var(--otg-lime);
	background: rgba(188, 255, 56, 0.12);
}

.otg-legalrail .otg-chip.is-current .otg-chip__l {
	color: var(--otg-lime);
	font-weight: 700;
	line-height: normal;
}

/* --- Body grid ----------------------------------------------------------- */

.otg-legal {
	grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
	gap: 44px;
}

.otg-legalmain {
	max-width: none;
}

/* --- Contents rail ------------------------------------------------------- */

.otg-legalnav__k {
	font-family: var(--otg-sans);
	font-size: 9.5px;
	line-height: normal;
	letter-spacing: 0.1em;
	color: var(--otg-muted);
}

.otg-legalnav__list {
	margin: 14px 0 0;
	gap: 2px;
}

.otg-legalnav__link {
	align-items: flex-start;
	gap: 10px;
	padding: 7px 8px 7px 0;
	border-bottom: 0;
	font-size: 13.8px;
	line-height: normal;
	font-weight: 500;
	color: var(--otg-body);
	transition: background 0.18s ease, color 0.18s ease;
}

.otg-legalnav__link:hover {
	background: var(--otg-white);
	color: var(--otg-green-text);
}

.otg-legalnav__n {
	padding-top: 4px;
	font-size: 9px;
	line-height: normal;
	color: var(--otg-muted);
}

.otg-legalnav__link:hover .otg-legalnav__n {
	color: var(--otg-muted);
}

/* --- In short ------------------------------------------------------------ */

.otg-legalshort {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
	padding: 22px 24px 24px;
}

.otg-legalshort__k {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-green-text);
}

.otg-legalshort__k .otg-dot {
	color: var(--otg-lime);
}

.otg-legalshort__list {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.otg-legalshort__list li {
	display: flex;
	gap: 11px;
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 14.8px;
	line-height: 1.62;
	color: var(--otg-body);
}

.otg-legalshort__list li::before {
	content: "\2713";
	color: var(--otg-green-text);
	font-weight: 700;
	line-height: normal;
	flex-shrink: 0;
}

.otg-legalshort__foot {
	margin: 16px 0 0;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--otg-muted);
}

/* --- Numbered sections --------------------------------------------------- */

.otg-legalbody {
	margin-top: 0;
	padding-left: 0;
	border-left: 0;
}

.otg-legal__h {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 34px 0 0;
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.2;
}

.otg-legalbody > .otg-legal__h:first-child {
	margin-top: 34px;
}

.otg-legal__h::before {
	content: counter(otg-clause, decimal-leading-zero);
	position: static;
	transform: none;
	display: inline;
	width: auto;
	height: auto;
	background: transparent;
	color: var(--otg-muted);
	font-size: 10px;
	line-height: normal;
	letter-spacing: 0.12em;
}

.otg-legal__paras {
	display: grid;
	gap: 12px;
	margin-top: 14px;
	padding-left: 34px;
	border-left: 1px solid var(--otg-rule);
}

.otg-legal__paras .otg-prose {
	margin: 0;
	font-size: 15.3px;
}

/* --- Ask row and the other documents ------------------------------------- */

.otg-legalask {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 40px;
	padding: 18px 20px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
}

.otg-legalask__t {
	flex: 1 1 260px;
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--otg-body);
}

.otg-legalother {
	display: grid;
	gap: 1px;
	margin-top: 20px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
}

.otg-legalother__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	padding: 14px 18px;
	background: var(--otg-white);
	text-decoration: none;
	transition: background 0.18s ease;
}

.otg-legalother__link:hover {
	background: var(--otg-off);
}

.otg-legalother__t {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-legalother__link:hover .otg-legalother__t {
	color: var(--otg-green-text);
}

.otg-legalother__a {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-muted);
	transition: transform 0.18s ease, color 0.18s ease;
}

.otg-legalother__link:hover .otg-legalother__a {
	color: var(--otg-green-text);
	transform: translateX(3px);
}

@media (max-width: 620px) {
	.otg-legal__paras {
		padding-left: 26px;
	}
}

/* ==========================================================================
   Blog archive page — centred hero, topics grid (Blog.jsx).
   ========================================================================== */

.otg-blogband {
	padding-block: clamp(44px, 4.5vw, 68px) clamp(40px, 4vw, 56px);
}

.otg-display--blog {
	margin: 18px auto 0;
	max-width: 680px;
	font-size: clamp(2.1rem, 3.8vw, 3.1rem);
}

.otg-bloghero__sub {
	margin: 18px auto 0;
	max-width: 500px;
	font-size: 16.5px;
	line-height: normal;
}

/* --- Topics: seven cells and a suggestion cell on a hairline grid --------- */

.otg-topichead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.otg-topichead__note {
	max-width: 280px;
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--otg-muted);
}

.otg-topics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
}

.otg-topic {
	position: relative;
	min-width: 0;
	padding: 20px 20px 24px;
	background: var(--otg-white);
}

.otg-topic::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--otg-lime);
}

.otg-topic--cyan::before {
	background: var(--otg-cyan);
}

.otg-topic--blue::before {
	background: var(--otg-blue);
}

.otg-topic__t {
	margin: 12px 0 8px;
	font-family: var(--otg-sans);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--otg-ink);
	overflow-wrap: anywhere;
}

.otg-topic__d {
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 13.8px;
	line-height: 1.62;
	text-wrap: pretty;
	color: var(--otg-muted);
}

.otg-topic--cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	background: var(--otg-off);
}

.otg-topic--cta::before {
	content: none;
}

.otg-topic--cta .otg-topic__t {
	margin: 0;
	font-size: 15px;
	line-height: normal;
}

@media (max-width: 1020px) {
	.otg-topics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.otg-topics {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Blog hero heading keeps the design's 680px measure inside the centred hero. */
.otg-centered .otg-display--blog {
	max-width: 680px;
}

/* Close bands come in three sizes in the design, and the padding does not
   always travel with the type: blog and stories are tight all round, who-it's-
   for and demos keep the full band height with the smaller headline, and
   enterprise sits between the two. --compact = tight band + small type,
   --sm = small type only, --ent = the enterprise pair. */
.otg-close--compact {
	padding-block: clamp(56px, 6vw, 88px);
}

.otg-close--compact .otg-display--close,
.otg-close--sm .otg-display--close {
	font-size: clamp(2rem, 3.8vw, 3.1rem);
	max-width: 760px;
	margin-top: 18px;
}

.otg-close--compact .otg-close__lead,
.otg-close--sm .otg-close__lead {
	margin-top: 22px;
	max-width: 560px;
}

.otg-close--ent {
	padding-block: clamp(64px, 7vw, 100px);
}

.otg-close--ent .otg-display--close {
	font-size: clamp(2rem, 4vw, 3.2rem);
	max-width: 720px;
	margin-top: 18px;
}

/* ==========================================================================
   Platform page — realigned to the design source (Platform.jsx).
   ========================================================================== */

/* --- Stat strips in and beside the dark panels ---------------------------- */

.otg-pstats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-pstats--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.otg-pstat {
	min-width: 0;
	padding: 16px 18px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.otg-pstat:last-child {
	border-right: 0;
}

.otg-pstat__k {
	display: block;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-pstat__v {
	display: block;
	margin-top: 5px;
	font-family: var(--otg-mono);
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	color: #fff;
}

.otg-pstat__v--lime {
	color: var(--otg-lime);
}

.otg-prow__badge--orange {
	color: var(--otg-orange);
}

/* Light-panel badges are navy on white, per the design's Row. */
.otg-lpanel .otg-prow__badge {
	border-color: var(--otg-rule-2);
	background: var(--otg-white);
	color: var(--otg-navy);
}

.otg-lpanel .otg-prow__badge--cyan {
	color: var(--wp--preset--color--cyan-text);
}

/* --- Editor panel: key/value rows and the publish foot -------------------- */

.otg-kvrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-kvrow:last-of-type {
	border-bottom: 0;
}

.otg-kvrow__k {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-kvrow__v {
	white-space: nowrap;
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-kvrow__v--num {
	font-family: var(--otg-mono);
}

.otg-panelfoot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-top: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-panelfoot--between {
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 18px;
}

.otg-panelfoot__stack {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.otg-panelfoot__t {
	font-family: var(--otg-sans);
	font-size: 15.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-panelfoot__note {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-fakebtn {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 2px;
	background: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-navy);
	flex-shrink: 0;
}

.otg-fakebtn--navy {
	height: 38px;
	background: var(--otg-navy);
	font-family: var(--otg-sans);
	font-size: 10px;
	line-height: normal;
	letter-spacing: 0.1em;
	color: #fff;
}

/* The four publishing formats under the editor panel. */
.otg-formats {
	border: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

/* --- Access cards --------------------------------------------------------- */

.otg-accgrid {
	gap: 24px;
	margin-top: 42px;
	align-items: stretch;
}

.otg-acccard {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	border-top: 3px solid var(--otg-cyan);
	border-radius: 0 0 4px 4px;
	padding: 26px 26px 28px;
	min-width: 0;
}

.otg-acccard--lime {
	border-top-color: var(--otg-lime);
}

.otg-acccard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
}

.otg-acccard__t {
	font-family: var(--otg-sans);
	font-size: 19px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--otg-ink);
}

.otg-acccard__who {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
	text-align: right;
}

/* --- Record rows (dark panel, match / market / odds / status) ------------- */

.otg-recrow {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-recrow--last {
	border-bottom: 0;
}

.otg-recrow__match {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-recrow__teams {
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
}

.otg-recrow__market {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-recrow__odds {
	font-family: var(--otg-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	color: #fff;
}

.otg-recrow .otg-status {
	min-width: 54px;
	justify-content: flex-end;
}

/* --- Single / multi-expert columns and roster panel ----------------------- */

.otg-setupcol {
	border-top: 3px solid var(--otg-cyan);
	padding-top: 24px;
	min-width: 0;
}

.otg-setupcol--blue {
	border-top-color: var(--wp--preset--color--blue);
}

.otg-setupcol__tag {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-setupcol__t {
	margin: 12px 0 0;
	font-family: var(--otg-sans);
	font-size: 23px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-rosterrow {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-rosterrow--last {
	border-bottom: 0;
}

.otg-avatile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-cyan);
	font-family: var(--otg-sans);
	font-weight: 800;
	line-height: normal;
	font-size: 13px;
	flex-shrink: 0;
}

.otg-avatile--blue {
	color: var(--wp--preset--color--blue);
}

.otg-rosterrow__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-rosterrow__l {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-rosterrow__s {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-rosterrow__v {
	white-space: nowrap;
	font-family: var(--otg-mono);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-rosterrow__v--up { color: var(--otg-green-text); }
.otg-rosterrow__v--down { color: var(--otg-red); }

.otg-panelfoot__k {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-panelfoot__k--blue {
	font-weight: 700;
	line-height: normal;
	color: var(--otg-blue-text);
}

/* --- Membership plans panel ----------------------------------------------- */

.otg-memsplit {
	align-items: start;
}

.otg-planbox {
	margin-top: 28px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	overflow: hidden;
}

.otg-planbox__head,
.otg-plangroup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
}

.otg-planbox__head {
	border-bottom: 1px solid var(--otg-rule-2);
	background: var(--otg-off);
}

.otg-plangroup__head {
	padding: 10px 16px;
	border-bottom: 1px solid var(--otg-rule);
	border-left: 3px solid var(--wp--preset--color--blue);
}

.otg-plangroup__head--cyan {
	border-left-color: var(--otg-cyan);
}

.otg-planbox__k,
.otg-plangroup__k {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-planbox__m,
.otg-plangroup__m {
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
	text-align: right;
}

.otg-planbox__m {
	font-size: 8.5px;
	line-height: normal;
}

.otg-planrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 11px 16px 11px 19px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-planrow--hot {
	background: rgba(188, 255, 56, 0.07);
}

.otg-planrow__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.otg-planrow__l {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-planrow__s {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-planrow__v {
	white-space: nowrap;
	font-family: var(--otg-mono);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-planbox__foot {
	padding: 11px 16px;
	background: var(--otg-off);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--otg-muted);
}

.otg-feecallout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-minitag {
	padding: 4px 8px;
	border-radius: 2px;
	background: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--otg-navy);
	flex-shrink: 0;
}

.otg-feecallout .otg-prose {
	font-size: 13.5px;
}

.otg-feecallout a {
	color: var(--otg-blue-text);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--otg-rule-2);
}

/* --- Stripe payments panel ------------------------------------------------ */

.otg-planned {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 13px 16px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-plannedtag {
	padding: 4px 8px;
	border: 1px solid var(--otg-rule-2);
	border-radius: 2px;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-blue-text);
	flex-shrink: 0;
}

.otg-planned .otg-prose {
	font-size: 13.5px;
	color: var(--otg-muted);
}

.otg-dia {
	width: 6px;
	height: 6px;
	background: var(--otg-lime);
	transform: rotate(45deg);
	flex-shrink: 0;
	display: inline-block;
}

.otg-dia--cyan { background: var(--otg-cyan); }
.otg-dia--blue { background: var(--wp--preset--color--blue); }
.otg-dia--orange { background: var(--otg-orange); }

.otg-payrow__l {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-panelfoot__v {
	font-family: var(--otg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-green-text);
}

/* --- Distribution channels ------------------------------------------------ */

.otg-chanrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 3px solid var(--otg-cyan);
}

.otg-chanrow--blue {
	border-left-color: var(--wp--preset--color--blue);
}

.otg-chanrow__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.otg-chanrow__n {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: #fff;
}

.otg-chanrow__n .otg-dia {
	width: 7px;
	height: 7px;
}

.otg-chanrow__meta {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-chanrow__mode {
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.otg-tgpreview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
}

.otg-tgpreview__time {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-tgpreview__msg {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
}

.otg-tgpreview__link {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-cyan);
}

/* --- Brand shot with the overlapping panel -------------------------------- */

.otg-brandshot {
	position: relative;
	min-width: 0;
}

.otg-brandshot__photo {
	aspect-ratio: 16 / 10;
	border-radius: 4px;
}

.otg-brandshot__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.otg-brandshot__card {
	position: relative;
	margin: -54px 10px 0 40px;
}

.otg-brandrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-btile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-lime);
	font-family: var(--otg-sans);
	font-weight: 800;
	line-height: normal;
	font-size: 16px;
	flex-shrink: 0;
}

.otg-brandrow__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-brandrow__t {
	font-family: var(--otg-sans);
	font-size: 15.5px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--otg-ink);
}

.otg-brandrow__s {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* --- Setup steps and the managed / support cards -------------------------- */

.otg-setuphead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.otg-setuphead__note {
	margin: 0;
	max-width: 330px;
	font-family: var(--otg-sans);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--otg-muted);
}

.otg-stepgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 44px;
	border-top: 1px solid var(--otg-rule);
}

.otg-stepcell {
	min-width: 0;
	padding: 26px 24px 30px;
	border-right: 1px solid var(--otg-rule);
}

.otg-stepcell:first-child {
	border-left: 1px solid var(--otg-rule);
}

.otg-stepcell__n {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--otg-blue-text);
}

.otg-stepcell__t {
	margin: 16px 0 9px;
	font-family: var(--otg-sans);
	font-weight: 700;
	line-height: normal;
	font-size: 17.5px;
	letter-spacing: -0.02em;
	color: var(--otg-ink);
}

.otg-stepcell__d {
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 14.3px;
	line-height: 1.62;
	text-wrap: pretty;
	color: var(--otg-body);
}

.otg-mgrow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 40px;
}

.otg-mgcard {
	min-width: 0;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	padding: 26px 26px 28px;
}

.otg-mgcard__k {
	margin: 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

@media (max-width: 1020px) {
	.otg-stepgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.otg-stepcell:nth-child(2n) {
		border-right: 0;
	}

	.otg-stepcell {
		border-bottom: 1px solid var(--otg-rule);
	}

	.otg-mgrow,
	.otg-accgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.otg-stepgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-stepcell {
		border-right: 0;
	}

	.otg-brandshot__card {
		margin: -30px 0 0 16px;
	}
}

/* Brand shot uses the design's lighter treatment (dim 0.55). */
.otg-brandshot__photo::before {
	background: linear-gradient(
		150deg,
		rgba(7, 26, 36, 0.51) 0%,
		rgba(13, 43, 50, 0.28) 45%,
		rgba(7, 26, 36, 0.47) 100%
	);
}

/* ==========================================================================
   Who it's for — corrections against the design source
   ========================================================================== */

/* The design stacks Today above With OwnTheGame inside each card. */
.otg-profile__body {
	grid-template-columns: minmax(0, 1fr);
}

.otg-profile {
	box-shadow: 0 14px 30px rgba(16, 22, 27, 0.04);
	transition: box-shadow 0.28s ease;
}

.otg-profile:hover {
	box-shadow: 0 26px 54px rgba(16, 22, 27, 0.09);
}

/* Both block labels carry a short accent rule; only the rule is coloured. */
.otg-profile__k {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 9.5px;
	line-height: normal;
}

.otg-profile__k::before {
	content: "";
	width: 9px;
	height: 2px;
	flex-shrink: 0;
	background: currentColor;
}

.otg-profile__block--today .otg-profile__k {
	color: var(--otg-muted);
}

.otg-profile__block--today .otg-profile__k::before {
	background: var(--otg-orange);
}

/* Card footer: label, figure, then a note pushed to the right edge. */
.otg-profile__stat {
	font-family: var(--otg-sans);
	font-size: 13.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-profile__note {
	margin-left: auto;
	font-weight: 400;
	white-space: normal;
}

/* Hero panel dots follow each profile's accent. */
.otg-wholist .otg-wholist__i--blue::before { background: var(--otg-blue); }
.otg-wholist .otg-wholist__i--cyan::before { background: var(--otg-cyan); }

.otg-aboutshot__k--muted {
	color: var(--otg-on-navy-muted);
}

/* --- Who this is not for -------------------------------------------------- */

.otg-notfor {
	border: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-notfor__row {
	display: flex;
	gap: 13px;
	padding: 17px 20px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-notfor__row--last {
	border-bottom: 0;
}

.otg-notfor__dash {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-weight: 700;
	line-height: normal;
	color: var(--otg-slate);
}

.otg-notfor__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.otg-notfor__t {
	font-family: var(--otg-sans);
	font-size: 14.8px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-notfor__d {
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--otg-muted);
}

.otg-notfor__lead {
	max-width: 480px;
}

/* Card typography follows the design now the body is a single column. */
.otg-profile__top {
	padding: 26px 28px 0;
}

.otg-profile__role {
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	line-height: normal;
}

.otg-profile__you {
	margin-top: 16px;
	padding: 0 28px;
	font-size: 15.5px;
	line-height: normal;
	color: var(--otg-body);
}

.otg-profile__body {
	margin-top: 22px;
}

.otg-profile__block {
	padding: 22px 28px;
}

.otg-profile__block--with {
	padding-bottom: 26px;
}

.otg-profile .otg-crosses li {
	font-size: 14.5px;
	line-height: normal;
}

.otg-profile .otg-ticks li {
	font-size: 14.8px;
	line-height: normal;
}

.otg-profile__foot {
	padding: 14px 28px;
}

/* ==========================================================================
   Demos — corrections against the design source
   ========================================================================== */

.otg-split--head-hero {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
}

/* Hero: two demo cards with an accent edge, then the dashed "Soon" note. */
.otg-demolinks {
	display: grid;
	gap: 14px;
	min-width: 0;
}

.otg-demolink {
	justify-content: flex-start;
	padding: 18px 20px;
	border: 1px solid var(--otg-navy-rule);
	border-left: 3px solid var(--otg-lime);
	background: rgba(255, 255, 255, 0.04);
}

.otg-demolink--cyan {
	border-left-color: var(--otg-cyan);
}

.otg-demolink__n {
	flex-shrink: 0;
	font-family: var(--otg-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

.otg-demolink--cyan .otg-demolink__n {
	color: var(--otg-cyan);
}

.otg-demolink .otg-nextlink__body {
	flex: 1;
}

/* Lime "Soon" / "Planned" marker. */
.otg-tag--soon {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 2px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Dashed "chip + note" callout — a to-add/coming-soon marker on a page. */
.otg-toadd {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-toadd__chip {
	margin: 0;
	flex-shrink: 0;
	padding: 4px 8px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-toadd__text {
	flex: 1 1 320px;
}

.otg-toadd--navy {
	margin-top: 0;
	background: transparent;
	border-color: var(--otg-navy-rule);
}

.otg-toadd--navy .otg-toadd__text {
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--otg-on-navy-muted);
}

.otg-toadd--off {
	margin-top: 22px;
	background: var(--otg-off);
}

/* --- Demo block header ---------------------------------------------------- */

.otg-demohead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

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

.otg-demohead__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
}

.otg-demohead--cyan .otg-demohead__n {
	color: var(--otg-cyan);
}

.otg-display--demo {
	margin: 0;
	max-width: 560px;
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
}

.otg-demohead__site {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-demohead__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.otg-demochip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-demo__lead {
	margin-top: 26px;
	max-width: 700px;
}

/* Business type / sport focus / best for. */
.otg-thread--facts {
	margin-top: 32px;
}

.otg-factcell {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 20px;
	background: var(--otg-white);
}

.otg-band--off .otg-factcell {
	background: var(--otg-off);
}

.otg-factcell__k {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-factcell__v {
	font-family: var(--otg-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.015em;
	color: var(--otg-ink);
}

/* --- What this demo shows / panels --------------------------------------- */

.otg-split--demo {
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 44px;
	align-items: start;
	margin-top: 40px;
}

.otg-showlabel {
	display: flex;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--otg-lime);
}

.otg-showlabel--cyan {
	border-bottom-color: var(--otg-cyan);
}

.otg-stack--panels {
	gap: 18px;
	align-content: start;
}

.otg-statgrid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 28px;
}

.otg-statgrid--3 .otg-statgrid__n {
	font-size: 17px;
	line-height: normal;
}

.otg-statgrid__n--up {
	color: var(--otg-green-text);
}

.otg-figsnote {
	margin: 12px 0 0;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* Figures inside a panel sit flush with the panel edges. */
.otg-lpanel .otg-statgrid {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--otg-rule);
}

.otg-lpanel .otg-statgrid--fig .otg-statgrid__n {
	font-size: 14.5px;
	line-height: normal;
}

.otg-lpanel .otg-statgrid--fig .otg-statgrid__k {
	font-size: 7.5px;
	line-height: normal;
}

.otg-lpanel .otg-statgrid--fig .otg-statgrid__i {
	padding: 13px 14px;
}

.otg-expertrow {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-expertrow__n {
	font-family: var(--otg-sans);
	font-size: 15.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-expertrow__r {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* Pick rows carry odds and a status; roster rows carry an avatar. */
.otg-prow--pick {
	grid-template-columns: 1fr auto auto;
}

.otg-prow--roster {
	grid-template-columns: auto 1fr auto;
}

.otg-prow__st {
	min-width: 52px;
	text-align: right;
}

.otg-prow__v--hidden {
	color: var(--otg-slate);
}

.otg-prow__av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 2px;
	background: var(--otg-navy);
	color: var(--otg-cyan);
	font-family: var(--otg-sans);
	font-size: 12px;
	font-weight: 800;
	line-height: normal;
}

/* Footnote inside a panel. */
.otg-pnote {
	margin: 0;
	padding: 11px 18px;
	border-top: 1px solid var(--otg-rule);
	background: var(--otg-off);
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-dpanel .otg-pnote {
	border-top-color: var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
	color: var(--otg-on-navy-muted);
}

/* --- Comparison table on navy -------------------------------------------- */

.otg-matrix--dark {
	grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(120px, 190px));
	border-color: var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-matrix--dark .otg-matrix__h {
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: var(--otg-navy-rule);
	color: var(--otg-on-navy-muted);
}

.otg-matrix--dark .otg-matrix__h--c {
	border-left-color: var(--otg-navy-rule);
}

.otg-matrix--dark .otg-matrix__h--a { color: var(--otg-lime); }
.otg-matrix--dark .otg-matrix__h--b { color: var(--otg-cyan); }

.otg-matrix--dark .otg-matrix__l {
	border-bottom-color: var(--otg-navy-rule);
	color: var(--otg-on-navy-body);
}

.otg-matrix--dark :is(.otg-matrix__a, .otg-matrix__b) {
	border-left-color: var(--otg-navy-rule);
	border-bottom-color: var(--otg-navy-rule);
	background: transparent;
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.otg-matrix--dark .otg-matrix__mark {
	display: inline-block;
	font-size: 0;
	line-height: normal;
}

.otg-matrix--dark .otg-matrix__mark--yes {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--otg-lime);
}

.otg-matrix--dark .otg-matrix__b .otg-matrix__mark--yes {
	background: var(--otg-cyan);
}

.otg-matrix--dark .otg-matrix__mark--no {
	width: 9px;
	height: 2px;
	background: var(--otg-slate);
}

.otg-threadcard__t--planned {
	margin-top: 16px;
}

@media (max-width: 1020px) {
	.otg-split--head-hero,
	.otg-split--demo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Customer stories — rebuilt against the design source
   ========================================================================== */

.otg-herocenter {
	text-align: center;
	padding-block: clamp(48px, 5vw, 76px) clamp(44px, 4.5vw, 64px);
}

.otg-herocenter .otg-eyebrow,
.otg-herocenter .otg-btns {
	justify-content: center;
}

.otg-display--storyhero {
	margin: 20px auto 0;
	max-width: 720px;
	font-size: clamp(2.2rem, 4vw, 3.2rem);
}

.otg-herocenter .otg-close__lead {
	margin-top: 20px;
	max-width: 520px;
}

.otg-herocenter .otg-btns--center {
	margin-top: 28px;
}

/* --- What a story contains ------------------------------------------------ */

.otg-split--anatomy {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 44px;
	align-items: center;
}

.otg-display--anatomy {
	max-width: 400px;
	margin-top: 14px;
}

.otg-anatomy__lead {
	max-width: 420px;
	font-size: 15.5px;
	line-height: normal;
}

.otg-anlist {
	display: grid;
	gap: 1px;
	margin-top: 24px;
	background: var(--otg-rule);
	border: 1px solid var(--otg-rule);
}

.otg-anrow {
	display: flex;
	gap: 13px;
	padding: 13px 16px;
	background: var(--otg-white);
}

.otg-anrow__n {
	flex-shrink: 0;
	padding-top: 2px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--otg-muted);
}

.otg-anrow__b {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-anrow__t {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-anrow__d {
	font-family: var(--otg-sans);
	font-size: 13.6px;
	line-height: 1.62;
	color: var(--otg-muted);
}

/* --- The story card ------------------------------------------------------- */

.otg-scard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
}

.otg-scard--story {
	border-color: var(--otg-rule);
	border-top: 3px solid var(--otg-lime);
	box-shadow: 0 12px 26px rgba(16, 22, 27, 0.04);
	transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

.otg-scard--story:hover {
	border-color: var(--otg-rule-2);
	border-top-color: var(--otg-lime);
	box-shadow: 0 24px 50px rgba(16, 22, 27, 0.09);
}

.otg-scard__shot {
	padding: 14px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-scard__tagline {
	margin-bottom: 10px;
}

.otg-browser {
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-off);
}

.otg-browser__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--otg-rule);
	background: var(--otg-white);
}

.otg-browser__dots {
	display: inline-flex;
	gap: 4px;
	flex-shrink: 0;
}

.otg-browser__dots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--otg-rule-2);
}

.otg-browser__url {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-browser__view {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 122px;
	padding: 14px 16px;
	text-align: center;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.7;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-browser__view--tall {
	min-height: 132px;
}

.otg-scard__quote {
	flex: 1;
	padding: 20px 20px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-scard__mark {
	display: block;
	font-family: var(--otg-sans);
	font-size: 30px;
	font-weight: 800;
	line-height: 0.6;
	color: var(--otg-lime);
}

.otg-scard__mark--quiet {
	color: var(--otg-rule-2);
}

.otg-scard__q {
	margin: 14px 0 0;
	font-family: var(--otg-sans);
	font-size: 15.5px;
	line-height: 1.62;
	text-wrap: pretty;
	color: var(--otg-ink);
}

.otg-scard__by {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.otg-scard__name {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-scard__sport {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-scard__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--otg-rule);
}

.otg-scard__meta--annotated {
	margin-top: 14px;
	border-top: 1px solid var(--otg-rule);
}

.otg-scard__cell {
	min-width: 0;
	padding: 12px 14px;
	background: var(--otg-white);
}

.otg-scard__k {
	display: block;
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-scard__v {
	display: block;
	margin-top: 6px;
	overflow-wrap: anywhere;
	font-family: var(--otg-sans);
	font-size: 13.2px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-scard__v--quiet {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-scard__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 18px;
	border-top: 1px solid var(--otg-rule);
	background: var(--otg-off);
}

.otg-scard__note {
	flex: 1 1 160px;
	font-family: var(--otg-mono);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-muted);
}

/* Annotation tags on the example card. */
.otg-stag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 3px 8px;
	background: var(--otg-lime);
	color: var(--otg-navy);
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-stags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px 18px 0;
}

/* Empty fields a real story fills in. */
.otg-slot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px dashed var(--otg-rule-2);
	background: var(--otg-off);
}

.otg-slot--tall {
	min-height: 62px;
	margin-top: 12px;
}

.otg-slot--short {
	min-height: 34px;
}

.otg-slot__l {
	font-family: var(--otg-mono);
	font-size: 8.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-slot__n {
	font-family: var(--otg-mono);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-slotrow {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.otg-slotrow > .otg-slot {
	flex: 1 1 120px;
	min-width: 0;
}

.otg-pair--stories {
	gap: 24px;
	margin-top: 32px;
	align-items: stretch;
}

.otg-sechead__note {
	max-width: 280px;
	line-height: 1.7;
	font-size: 9px;
	font-weight: 600;
	color: var(--otg-muted);
}

/* --- Proof you can check today ------------------------------------------- */

.otg-display--proof,
.otg-display--featured {
	max-width: 440px;
	margin-top: 14px;
}

.otg-proof__lead,
.otg-featured__lead {
	max-width: 450px;
	font-size: 16px;
	line-height: normal;
}

.otg-demorows {
	display: grid;
	gap: 1px;
	background: var(--otg-navy-rule);
	border: 1px solid var(--otg-navy-rule);
	min-width: 0;
}

.otg-demorows .otg-nextlink {
	padding: 18px 20px;
	border-bottom: 0;
	background: var(--otg-navy);
}

/* --- Be featured ---------------------------------------------------------- */

.otg-askcard {
	min-width: 0;
	padding: 20px 20px 24px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	border-top: 3px solid var(--otg-cyan);
}

.otg-askcard--lime {
	border-top-color: var(--otg-lime);
}

.otg-askcard__t {
	display: block;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--otg-rule);
	font-family: var(--otg-sans);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-ticks--plus li::before {
	content: "+";
	color: var(--wp--preset--color--cyan-text);
}

.otg-ticks--green li::before {
	color: var(--otg-green-text);
}

@media (max-width: 1020px) {
	.otg-split--anatomy {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Custom setup & Enterprise — rebuilt against the design source
   ========================================================================== */

.otg-enthero {
	padding-block: clamp(56px, 6vw, 92px) clamp(48px, 5vw, 72px);
}

.otg-display--enthero {
	margin: 22px auto 0;
	max-width: 800px;
	font-size: clamp(2.4rem, 4.6vw, 3.7rem);
}

.otg-enthero__lead {
	margin: 22px auto 0;
	max-width: 560px;
	font-size: 17.5px;
	line-height: normal;
}

.otg-enthero .otg-btns--center {
	margin-top: 30px;
}

.otg-entstats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-entstats__i {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.otg-entstats__v {
	font-family: var(--otg-mono);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

.otg-entstats__k {
	font-family: var(--otg-sans);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

/* --- Nine kinds of work --------------------------------------------------- */

.otg-band--off .otg-cap {
	background: var(--otg-off);
	transition: background 0.2s ease;
}

.otg-band--off .otg-cap:hover {
	background: var(--otg-white);
}

.otg-cap__i {
	display: inline-flex;
	color: var(--otg-green-text);
}

.otg-cap--cyan .otg-cap__i { color: var(--wp--preset--color--cyan-text); }
.otg-cap--blue .otg-cap__i { color: var(--otg-blue-text); }

.otg-cap__t {
	margin-top: 6px;
}

/* --- A closer look -------------------------------------------------------- */

.otg-display--dives {
	max-width: 520px;
}

.otg-enttabs .otg-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 15px;
	font-size: 10.5px;
	line-height: normal;
}

.otg-enttabs .otg-tabs__tab::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--otg-rule-2);
}

.otg-enttabs .otg-tabs__tab[aria-selected="true"] {
	border-color: var(--otg-navy);
	background: var(--otg-navy);
	color: #fff;
}

.otg-enttabs .otg-tabs__tab:nth-child(1)[aria-selected="true"]::before,
.otg-enttabs .otg-tabs__tab:nth-child(4)[aria-selected="true"]::before { background: var(--otg-lime); }
.otg-enttabs .otg-tabs__tab:nth-child(2)[aria-selected="true"]::before { background: var(--otg-blue); }
.otg-enttabs .otg-tabs__tab:nth-child(3)[aria-selected="true"]::before,
.otg-enttabs .otg-tabs__tab:nth-child(5)[aria-selected="true"]::before { background: var(--otg-cyan); }

.otg-split--dive {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 44px;
	align-items: center;
}

.otg-diveaccent {
	display: block;
	width: 40px;
	height: 3px;
	background: var(--otg-lime);
}

.otg-diveaccent--blue { background: var(--otg-blue); }
.otg-diveaccent--cyan { background: var(--otg-cyan); }

.otg-dive__t {
	margin: 20px 0 0;
	font-family: var(--otg-sans);
	font-size: clamp(1.3rem, 2.1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.18;
	color: var(--otg-ink);
}

.otg-dive__p {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: normal;
}

/* Compact panels used by the deep-dive visuals. */
.otg-lpanel--tight .otg-lpanel__head,
.otg-dpanel--tight .otg-dpanel__head {
	padding: 10px 14px;
}

.otg-lpanel--tight .otg-lpanel__title,
.otg-dpanel--tight .otg-dpanel__title {
	font-size: 8.5px;
	line-height: normal;
}

.otg-lpanel--tight .otg-lpanel__meta,
.otg-dpanel--tight .otg-dpanel__meta {
	font-size: 8px;
	line-height: normal;
}

.otg-lpanel--tight .otg-prow,
.otg-dpanel--tight .otg-prow {
	padding: 10px 14px;
}

.otg-lpanel--tight .otg-prow__l,
.otg-dpanel--tight .otg-prow__l {
	font-size: 13px;
	line-height: normal;
	font-weight: 500;
}

.otg-lpanel--tight .otg-prow__v,
.otg-dpanel--tight .otg-prow__v {
	font-size: 11.5px;
	line-height: normal;
}

.otg-lpanel--past {
	opacity: 0.85;
}

.otg-prow__v--muted { color: var(--otg-muted); }
.otg-prow__v--cyan { color: var(--wp--preset--color--cyan-text); }
.otg-dpanel .otg-prow__v--cyan { color: var(--otg-cyan); }

.otg-migrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
	align-items: center;
	min-width: 0;
}

.otg-migrow--feed {
	grid-template-columns: minmax(0, 0.86fr) 46px minmax(0, 1.14fr);
}

.otg-arrowcol {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	align-self: stretch;
}

.otg-arrowcol::before,
.otg-arrowcol::after {
	content: "";
	width: 1px;
	flex: 1;
	min-height: 20px;
	background: var(--otg-rule-2);
}

.otg-arrowcol__c {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
	font-family: var(--otg-mono);
	font-size: 11px;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-srcs {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.otg-src {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule);
	border-left: 3px solid var(--otg-blue);
	font-family: var(--otg-sans);
	font-size: 13px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-src--cyan { border-left-color: var(--otg-cyan); }
.otg-src--lime { border-left-color: var(--otg-lime); }

.otg-youstrip--flush,
.otg-youstrip--dark {
	margin-top: 0;
	padding: 11px 14px;
	border-left: 0;
}

.otg-youstrip--flush {
	border-top: 1px solid var(--otg-rule);
	background: rgba(188, 255, 56, 0.12);
}

.otg-youstrip--dark {
	border-top: 1px solid var(--otg-navy-rule);
	background: rgba(255, 255, 255, 0.03);
}

.otg-youstrip--flush .otg-youstrip__t {
	font-size: 12.5px;
	line-height: normal;
	color: var(--otg-body);
}

.otg-youstrip--dark .otg-youstrip__t {
	font-size: 12.5px;
	line-height: normal;
	color: var(--otg-on-navy-muted);
}

.otg-chart--framed {
	height: 172px;
	margin: 0;
	padding: 20px 16px 14px;
	gap: 6px;
	border: 0;
}

.otg-chart__col {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	height: 100%;
}

.otg-chart__col .otg-chart__bar {
	flex: 0 0 auto;
	width: 100%;
}

.otg-chart__bar--cyan {
	background: var(--wp--preset--color--cyan-text);
}

.otg-chart__peak {
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--cyan-text);
}

.otg-pnote--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-inline: 16px;
}

.otg-pnote__hi {
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--cyan-text);
}

/* Language switcher: radios drive the frame, so it needs no script. */
.otg-lang__in {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.otg-lang__tabs {
	display: flex;
	gap: 1px;
	background: var(--otg-rule);
	border-bottom: 1px solid var(--otg-rule);
}

.otg-lang__t {
	flex: 1;
	padding: 10px 8px;
	background: var(--otg-white);
	text-align: center;
	cursor: pointer;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-muted);
	transition: background 0.2s ease, color 0.2s ease;
}

.otg-lang [data-l] { display: none; }

#otg-lang-en:checked ~ * [data-l="en"],
#otg-lang-de:checked ~ * [data-l="de"],
#otg-lang-es:checked ~ * [data-l="es"] { display: inline; }

#otg-lang-en:checked ~ .otg-lang__tabs .otg-lang__t[for="otg-lang-en"],
#otg-lang-de:checked ~ .otg-lang__tabs .otg-lang__t[for="otg-lang-de"],
#otg-lang-es:checked ~ .otg-lang__tabs .otg-lang__t[for="otg-lang-es"] {
	background: var(--otg-navy);
	color: var(--otg-lime);
}

.otg-lang__in:focus-visible ~ .otg-lang__tabs {
	outline: 2px solid var(--otg-blue-text);
	outline-offset: 2px;
}

/* --- Which one you need --------------------------------------------------- */

.otg-display--which {
	margin: 14px auto 0;
	max-width: 620px;
}

.otg-quiet {
	color: var(--otg-on-navy-muted);
}

.otg-which {
	gap: 24px;
}

.otg-whichcard {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 26px;
}

.otg-whichcard--pro {
	border-top-color: var(--otg-lime);
	background: rgba(188, 255, 56, 0.05);
}

.otg-whichcard--talk {
	border-top-color: var(--otg-cyan);
	background: rgba(57, 217, 255, 0.05);
}

.otg-whichcard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.otg-whichcard__t {
	font-family: var(--otg-sans);
	font-size: 19px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: #fff;
}

.otg-whichcard__p {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-lime);
}

.otg-whichcard--talk .otg-whichcard__p {
	color: var(--otg-cyan);
}

.otg-whichcard .otg-ticks {
	margin-top: 20px;
}

.otg-whichcard .otg-btns {
	margin-top: auto;
	padding-top: 24px;
}

.otg-ticks--plus-cyan li::before {
	content: "+";
}

.otg-band--navy .otg-ticks--plus-cyan li::before {
	color: var(--otg-cyan);
}

/* --- Process and brief ---------------------------------------------------- */

.otg-sechead--process {
	align-items: baseline;
	gap: 24px;
}

.otg-display--process {
	margin-top: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.otg-processgrid {
	margin-top: 32px;
}

.otg-processgrid .otg-processcard__n {
	font-size: 9.5px;
	line-height: normal;
	color: var(--otg-blue-text);
}

.otg-split--brief {
	gap: 52px;
}

.otg-display--brief {
	max-width: 440px;
}

.otg-brief__lead {
	max-width: 450px;
	font-size: 16px;
	line-height: normal;
}

.otg-anlist--brief {
	margin-top: 0;
	border: 1px solid var(--otg-rule-2);
	border-top: 3px solid var(--otg-lime);
}

.otg-anlist--brief .otg-anrow {
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
}

.otg-anlist--brief .otg-anrow__n {
	padding-top: 0;
}

.otg-anlist--brief .otg-anrow__t {
	font-size: 14.8px;
	line-height: normal;
}

.otg-anlist--brief .otg-anrow__d {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 1020px) {
	.otg-split--dive,
	.otg-split--brief {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-migrow,
	.otg-migrow--feed {
		grid-template-columns: minmax(0, 1fr);
	}

	.otg-arrowcol {
		flex-direction: row;
		padding-block: 12px;
	}

	.otg-arrowcol::before,
	.otg-arrowcol::after {
		width: auto;
		height: 1px;
		min-height: 0;
	}
}

/* .otg-thread's three columns win on source order; the process row is four. */
.otg-processgrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* `.otg-centered .otg-display` caps headings at 620px; a page hero that sets
   its own measure has to beat that two-class selector. */
.otg-centered .otg-display--enthero {
	max-width: 800px;
}

/* Who-it's-for and Demos share the pricing hero type scale but the design
   gives their headline a slightly wider measure. */
.otg-hero--about .otg-display--pricing,
.otg-split--head-hero .otg-display--pricing {
	max-width: 640px;
}

/* Eyebrows and mono chips inherit the design shell's default line box, not the
   body's 1.7 prose leading — every one of them was ~6px taller than the design. */
.otg-label,
.otg-mono {
	line-height: normal;
}

/* Who-it's-for hero: the design gives the grid its own bottom padding and the
   jump rail sits under it, so --flush must not collapse the gap. */
.otg-hero--about {
	padding-bottom: clamp(52px, 5.5vw, 80px);
}

.otg-hero--about .otg-lead {
	max-width: 540px;
}

/* --- Home: publishing workflow ------------------------------------------- */

.otg-workflow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.2fr);
	align-items: stretch;
	margin-top: 46px;
}

.otg-workflow--caption {
	margin-top: 14px;
	align-items: start;
}

.otg-workflow__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.otg-workflow__aside {
	max-width: 330px;
}

.otg-workflow__step {
	font-family: var(--otg-sans);
	font-size: 10.5px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--otg-muted);
}

.otg-wf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	overflow: hidden;
}

.otg-wf-card--dark {
	background: var(--otg-navy);
	border: 1px solid rgba(7, 26, 36, 0.5);
	box-shadow: 0 22px 44px rgba(7, 26, 36, 0.14);
}

.otg-wf-card--light {
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	box-shadow: 0 22px 44px rgba(16, 22, 27, 0.08);
}

.otg-wf-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
}

.otg-wf-card--dark .otg-wf-card__head {
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-wf-card--light .otg-wf-card__head {
	padding: 13px 20px;
	background: var(--otg-off);
	border-bottom: 1px solid var(--otg-rule);
}

.otg-wf-card__title {
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.otg-wf-card__site {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--otg-mono);
	font-size: 9.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-ink);
}

.otg-wf-card--dark .otg-mono {
	color: var(--otg-on-navy-muted);
}

.otg-wf-card__form {
	padding: 4px 18px 18px;
}

.otg-wf-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--otg-navy-rule);
}

.otg-wf-field__v {
	font-family: var(--otg-sans);
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.otg-wf-field__v--num {
	font-family: var(--otg-mono);
}

.otg-wf-publish {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.otg-wf-publish__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 18px;
	border-radius: 2px;
	background: var(--otg-lime);
	font-family: var(--otg-mono);
	font-size: 10px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-navy);
}

.otg-wf-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.otg-wf-arrow__line {
	width: 1px;
	flex: 1;
	background: var(--otg-rule);
}

.otg-wf-arrow__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--otg-blue);
	color: #fff;
	font-family: var(--otg-mono);
	font-size: 12px;
	line-height: normal;
}

.otg-wf-card__picks {
	padding: 4px 20px;
}

.otg-wf-pick {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-wf-pick:last-child {
	border-bottom: 0;
}

.otg-wf-pick__m {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otg-wf-pick__teams {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--otg-ink);
}

.otg-wf-pick__st {
	min-width: 56px;
	text-align: right;
}

.otg-wf-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding: 16px 20px;
	background: var(--otg-off);
	border-top: 1px solid var(--otg-rule);
}

.otg-wf-auto {
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-blue-text);
}

/* --- Home: hero revenue badge -------------------------------------------- */

.otg-herovisual__rev {
	position: absolute;
	right: 18px;
	top: 18px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	background: rgba(7, 26, 36, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.otg-herovisual__rev .otg-mono {
	font-size: 8.5px;
	line-height: normal;
	color: var(--otg-on-navy-muted);
}

.otg-herovisual__revv {
	font-family: var(--otg-mono);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

/* --- Home: results & statistics ------------------------------------------ */

.otg-statgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 32px;
	border: 1px solid var(--otg-rule);
	background: var(--otg-white);
}

.otg-statgrid__cell {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px;
	border-right: 1px solid var(--otg-rule);
}

.otg-statgrid__cell:last-child {
	border-right: 0;
}

.otg-statgrid__v {
	font-family: var(--otg-mono);
	font-size: 21px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-statgrid__v--up {
	color: var(--otg-green-text);
}

.otg-recordvisual__photo {
	aspect-ratio: 3 / 2;
	margin-bottom: 22px;
}

/* --- Home: membership tiers and distribution ----------------------------- */

.otg-split--top {
	align-items: start;
	gap: 60px;
}

.otg-display--split {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	margin-top: 16px;
}

.otg-tiers {
	margin-top: 28px;
	border: 1px solid var(--otg-rule);
}

.otg-tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--otg-rule);
}

.otg-tier:last-child {
	border-bottom: 0;
}

.otg-tier--paid {
	background: var(--otg-off);
}

.otg-tier__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.otg-tier__n {
	font-family: var(--otg-sans);
	font-size: 14.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-tier__p {
	font-family: var(--otg-mono);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-muted);
	white-space: nowrap;
}

.otg-tier--paid .otg-tier__p {
	color: var(--otg-ink);
}

.otg-chanrows {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

.otg-chanrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: var(--otg-off);
	border: 1px solid var(--otg-rule);
	border-left: 3px solid var(--otg-cyan);
}

.otg-chanrow--blue {
	border-left-color: var(--otg-blue);
}

.otg-chanrow__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otg-chanrow__n {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--otg-sans);
	font-size: 15.5px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-ink);
}

.otg-chanrow__mark {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	background: var(--otg-cyan);
	transform: rotate(45deg);
}

.otg-chanrow--blue .otg-chanrow__mark {
	background: var(--otg-blue);
}

.otg-chanrow__mode {
	flex-shrink: 0;
	padding: 6px 11px;
	background: var(--otg-white);
	border: 1px solid var(--otg-rule-2);
	border-radius: 2px;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-navy);
}

/* --- Home: price ladder box and guarantee -------------------------------- */

.otg-split--plan {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: 64px;
	align-items: start;
}

.otg-ladderbox {
	margin-top: 32px;
	border: 1px solid var(--otg-navy-rule);
}

.otg-ladderbox .otg-ladder {
	margin-top: 0;
	border: 0;
}

.otg-ladder__note {
	font-family: var(--otg-mono);
	font-size: 8px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otg-on-navy-muted);
}

.otg-ladder__step.is-active .otg-ladder__note {
	color: var(--otg-lime);
}

.otg-ladder__step.is-active .otg-ladder__price {
	font-size: 32px;
	line-height: normal;
	color: #fff;
}

.otg-guarantee {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 20px 22px;
	border-top: 1px solid var(--otg-navy-rule);
	background: rgba(188, 255, 56, 0.05);
}

.otg-guarantee__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--otg-lime);
	color: var(--otg-navy);
}

.otg-guarantee__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 300px;
	min-width: 0;
}

.otg-guarantee__t {
	font-family: var(--otg-sans);
	font-size: 16.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #fff;
}

.otg-guarantee__d {
	font-family: var(--otg-sans);
	font-size: 14.2px;
	line-height: 1.62;
	color: var(--otg-on-navy-body);
}

.otg-guarantee__price {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding-left: 16px;
	border-left: 1px solid var(--otg-navy-rule);
}

.otg-guarantee__amount {
	font-family: var(--otg-mono);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	color: var(--otg-lime);
}

.otg-guarantee__price .otg-mono {
	max-width: 74px;
	font-size: 8.5px;
	line-height: 1.5;
	color: var(--otg-on-navy-muted);
}

.otg-enterpriseblock {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--otg-navy-rule);
}

.otg-enterpriseblock .otg-prose {
	max-width: 420px;
	margin-top: 10px;
}

/* --- Home: demo card preview --------------------------------------------- */

/* The same card chrome as the hero's, but in flow inside the demo card. */
.otg-demo__preview {
	position: static;
	width: auto;
	left: auto;
	bottom: auto;
	margin-bottom: 22px;
	outline: 0;
	border-color: var(--otg-rule-2);
	box-shadow: none;
}

.otg-demo__preview .otg-demo__chip {
	margin: 0;
}

@media (max-width: 900px) {
	.otg-workflow {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.otg-workflow--caption {
		gap: 6px;
	}

	.otg-wf-arrow {
		flex-direction: row;
		height: 34px;
	}

	.otg-wf-arrow__line {
		width: auto;
		height: 1px;
		flex: 1;
	}

	.otg-split--plan,
	.otg-split--top {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.otg-guarantee__price {
		padding-left: 0;
		border-left: 0;
	}
}

/* Design's Shot at dim 0.6 — the record photo sits behind a dark panel, so it
   carries far less tint than the hero's. */
.otg-shot--dim60 img {
	filter: grayscale(0.85) contrast(1.06) brightness(0.9);
}

.otg-shot--dim60::before {
	background: linear-gradient(
		150deg,
		rgba(7, 26, 36, 0.55) 0%,
		rgba(13, 43, 50, 0.3) 45%,
		rgba(7, 26, 36, 0.52) 100%
	);
}

.otg-recordvisual__photo {
	border-radius: 4px;
}

/* The activity panel overlaps the photo, as in the design. */
.otg-recordvisual__panel {
	position: relative;
	margin: -46px 0 0 66px;
	border-radius: 4px;
	box-shadow: 0 30px 70px rgba(7, 26, 36, 0.35);
}

.otg-feed--dark {
	background: var(--otg-navy);
	border: 1px solid var(--otg-navy-rule);
	overflow: hidden;
}

.otg-feed--dark .otg-feed__head {
	background: transparent;
	padding: 13px 18px;
	border-bottom-color: var(--otg-navy-rule);
}

.otg-feed--dark .otg-feed__title {
	color: #fff;
}

.otg-feed--dark .otg-feed__head .otg-mono {
	color: var(--otg-on-navy-muted);
}

.otg-feed--dark .otg-feed__row {
	padding: 14px 18px;
	border-bottom-color: var(--otg-navy-rule);
	transition: background 0.45s ease, box-shadow 0.45s ease;
}

.otg-feed--dark .otg-feed__row.is-live {
	background: rgba(188, 255, 56, 0.05);
	box-shadow: inset 3px 0 0 var(--otg-lime);
}

.otg-feed--dark .otg-feed__time {
	width: 52px;
	color: var(--otg-on-navy-muted);
	font-size: 9px;
	line-height: normal;
	letter-spacing: 0.12em;
}

.otg-feed--dark .otg-feed__t {
	font-size: 13.5px;
	line-height: normal;
	font-weight: 600;
	color: #fff;
}

.otg-feed--dark .otg-feed__d {
	font-family: var(--otg-mono);
	font-size: 10px;
	line-height: normal;
	color: var(--otg-on-navy-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.otg-feed--dark .otg-feed__tag {
	padding: 4px 8px;
	background: transparent;
	border-color: var(--otg-navy-rule);
	border-radius: 2px;
}

.otg-feed--dark .otg-feed__tag--cyan { color: var(--otg-cyan); }
.otg-feed--dark .otg-feed__tag--lime { color: var(--otg-lime); }
.otg-feed--dark .otg-feed__tag--orange { color: var(--otg-orange); }

@media (max-width: 900px) {
	.otg-recordvisual__panel {
		margin-left: 0;
	}
}

.otg-prose--narrow {
	max-width: 440px;
}

/* Home's plan card is the flat white panel of the design, not the pricing
   page's raised, lime-topped one. */
.otg-plancard--flat {
	border: 0;
	border-radius: 4px;
	padding: 36px 36px 32px;
	box-shadow: none;
}

.otg-plancard__foot--plain {
	font-size: 10px;
	line-height: normal;
	letter-spacing: 0;
	text-transform: none;
}

/* Visually hidden, still announced — the contact form's enquiry-type legend
   is one of these: the design shows the choice, not a label above it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* A centred hero centres its body copy too, not only the heading. */
.otg-centered :is(.otg-lead, .otg-prose) {
	margin-inline: auto;
}

/* Contact's hero headline runs to 700px in the design, not the 620 default. */
.otg-centered .otg-display--pricing {
	max-width: 700px;
}

/* Contact's "faster than waiting" rows put the arrow after the label. */
.otg-contact__links .otg-entpanel__row {
	justify-content: space-between;
}

.otg-contact__links .otg-entpanel__plus {
	order: 2;
}

/* The role name is a heading, as in the design — reset the browser's h2 box. */
.otg-profile__role {
	margin: 0;
	line-height: 1.2;
}

/* Home's demo cards are frameless in the design — the preview panel carries
   the only border, and the copy sits under it on the band. */
.otg-demo--bare {
	background: transparent;
	border: 0;
	padding: 0;
}

/* The chip on the preview head is the design's orange "live" marker. */
.otg-demo__preview .otg-demo__chip {
	background: rgba(255, 102, 56, 0.09);
	border: 1px solid rgba(255, 102, 56, 0.35);
	color: var(--otg-orange-text);
}

.otg-demo__preview .otg-demo__chip .otg-dot {
	color: var(--otg-orange);
}

/* Who builds it — the real company details, sourced from modulout.com. */
.otg-maker {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	gap: 8px 40px;
	align-items: start;
	margin-top: 24px;
	padding: 22px 24px 24px;
	border: 1px solid var(--otg-rule-2);
	background: var(--otg-white);
}

.otg-maker__name {
	grid-column: 1;
	margin: 0;
	font-family: var(--otg-sans);
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.025em;
	color: var(--otg-ink);
}

.otg-maker__text {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	max-width: 620px;
}

.otg-maker__facts {
	grid-column: 2;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.otg-maker__facts li {
	position: relative;
	padding-left: 20px;
	font-family: var(--otg-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--otg-muted);
}

.otg-maker__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 7px;
	height: 7px;
	background: var(--otg-cyan);
	transform: rotate(45deg);
}

.otg-maker__link {
	grid-column: 1;
	grid-row: 2;
	margin: 10px 0 0;
	font-family: var(--otg-mono);
	font-size: 9px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otg-maker__link a {
	color: var(--otg-blue-text);
	text-decoration: none;
}

@media (max-width: 780px) {
	.otg-maker {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.otg-maker :is(.otg-maker__name, .otg-maker__text, .otg-maker__facts, .otg-maker__link) {
		grid-column: 1;
		grid-row: auto;
	}
}