/* Alata, self-hosted (SIL Open Font License, assets/fonts/OFL-Alata.txt). */
@font-face { font-family: 'Alata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/alata-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/alata-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/*
 * OnType Hub
 *
 * Everything is scoped under .ot-hub so the theme's styles and ours don't
 * collide. Per-type colour comes in through three custom properties set on
 * .ot-hub from the content layer:
 *
 *   --hub-dark   text-safe on white (all four group darks pass WCAG AA)
 *   --hub-mid    fills, accents, rings
 *   --hub-light  tints and decoration only, never text
 *
 * Sizes use --u rather than rem: themes (Futurio included) change the root
 * font size, which made rem-based text tiny.
 *
 * Layout: sidebar + dashboard from 1024px, a top tab bar with two-column
 * cards on tablets, single-column stacked cards on phones.
 */

/* 4.6.6: one text scale and one spacing scale. Every font-size, line-height, gap and padding in the Hub
 * stylesheets reads these tokens (each use carries the same value as its fallback). Labels never go below 14 px. */
.ot-hub, .ot-viewer, .ot-sample-dialog {
	--ot-fs-display: clamp(36px, 4.2vw, 56px); --ot-lh-display: 1.06;
	--ot-fs-h1: clamp(30px, 3.2vw, 42px);      --ot-lh-h1: 1.12;
	--ot-fs-h2: clamp(24px, 2.3vw, 30px);      --ot-lh-h2: 1.2;
	--ot-fs-h3: clamp(19px, 1.5vw, 21px);      --ot-lh-h3: 1.3;
	--ot-fs-eyebrow: 14px;                     --ot-lh-eyebrow: 1.3;
	--ot-fs-body: 17px;                        --ot-lh-body: 1.65;
	--ot-fs-small: 15px;                       --ot-lh-small: 1.5;
	--ot-fs-caption: 14px;                     --ot-lh-caption: 1.5;
	/* 4.8.1 de-clutter: paragraphs set large (leads, essences) still read at 1.5, and running text keeps a 60 to 75
	   character measure on wide screens. */
	--ot-lh-lead: 1.5; --ot-measure: 34em;
	--ot-sp-4: 4px; --ot-sp-8: 8px; --ot-sp-12: 12px; --ot-sp-16: 16px; --ot-sp-20: 20px; --ot-sp-24: 24px;
	--ot-sp-32: 32px; --ot-sp-40: 40px; --ot-sp-48: 48px; --ot-sp-64: 64px; --ot-sp-80: 80px;
	--ot-section-gap: clamp(40px, 5vw, 64px); --ot-card-pad: clamp(20px, 2.4vw, 32px); --ot-stack-gap: 16px;
	--ot-card-radius: 20px; --ot-card-border: 1px solid #e3e3dc;
	--ot-card-shadow: 0 1px 2px rgba(20, 23, 46, .04), 0 10px 28px -22px rgba(20, 23, 46, .3);
}
@media (max-width: 600px) { .ot-hub, .ot-viewer, .ot-sample-dialog { --ot-fs-body: 16px; --ot-section-gap: 40px; } }

.ot-hub {
	--u: 16px;
	--ink: #14172e;
	--muted: #4a4f6f;
	--line: #e3e5ee;
	--radius: 20px;
	--tint: color-mix(in srgb, var(--hub-light) 12%, #ffffff);
	--tint-strong: color-mix(in srgb, var(--hub-light) 26%, #ffffff);
	--edge: color-mix(in srgb, var(--hub-mid) 32%, #ffffff);

	font-family: 'Alata', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size:var(--ot-fs-body,17px);
	line-height:var(--ot-lh-body,1.65);
	color: var(--ink);
	background:
		radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--hub-light) 18%, transparent), transparent 70%),
		#f6f7fa;
	padding:var(--ot-sp-32,32px) var(--ot-sp-20,20px) var(--ot-sp-64,64px);
	-webkit-font-smoothing: antialiased;
}

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

.ot-hub h1,
.ot-hub h2,
.ot-hub h3 {
	font-family: inherit;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
}

.ot-hub h3 { font-size:var(--ot-fs-body,17px); margin: 20px 0 8px;line-height:var(--ot-lh-body,1.65) }
.ot-hub p { margin: 0 0 12px; }
.ot-hub a { color: var(--hub-dark); }
.ot-hub img { max-width: 100%; height: auto; }
.ot-hub button { font-family: inherit; }
.ot-icon { flex: 0 0 auto; vertical-align: middle; }

.ot-hub .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ─── Layout ─────────────────────────────────────────────────── */

.ot-hub__layout { max-width: 1240px; margin: 0 auto; }
.ot-hub__main { min-width: 0; }

@media (min-width: 1024px) {
	.ot-hub__layout {
		display: grid;
		grid-template-columns: 232px minmax(0, 1fr);
		gap:var(--ot-sp-32,32px);
		align-items: start;
	}
}

.ot-grid { display: grid; gap:var(--ot-sp-24,24px); }
.ot-grid > .ot-card { margin-bottom: 0; }
.ot-grid--2 { grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 640px) {
	.ot-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ot-grid--products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:var(--ot-sp-16,16px); }

/* ─── Sidebar ────────────────────────────────────────────────── */

.ot-side {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding:var(--ot-sp-12,12px);
	margin-bottom: 24px;
}

.ot-side__brand { display: none; }

.ot-side__nav,
.ot-side__foot {
	display: flex;
	gap:var(--ot-sp-4,4px);
	overflow-x: auto;
	scrollbar-width: none;
}

.ot-side__foot { margin-top: 4px; }

.ot-side__link {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap:var(--ot-sp-12,12px);
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);
	border-radius: 999px;
	color: var(--muted) !important;
	text-decoration: none !important;
	font-size:var(--ot-fs-small,15px);
	white-space: nowrap;
	transition: background 160ms ease, color 160ms ease;line-height:var(--ot-lh-small,1.5)
}

.ot-side__link .ot-icon { opacity: 0.7; }
.ot-side__link:hover,
.ot-side__link:focus-visible { background: var(--tint); color: var(--ink) !important; }

.ot-side__link.is-active {
	background: var(--tint-strong);
	color: var(--hub-dark) !important;
}
.ot-side__link.is-active .ot-icon { opacity: 1; }

.ot-side__link--quiet { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }

@media (min-width: 1024px) {
	.ot-side {
		position: sticky;
		top: 24px;
		padding:var(--ot-sp-20,20px) var(--ot-sp-12,12px);
		margin-bottom: 0;
	}
	.ot-side__brand {
		display: flex;
		align-items: center;
		gap:var(--ot-sp-12,12px);
		padding:0 var(--ot-sp-8,8px) var(--ot-sp-16,16px);
		border-bottom: 1px solid var(--line);
		margin-bottom: 12px;
	}
	.ot-side__avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		object-position: top;
		background: var(--tint-strong);
		border: 2px solid var(--edge);
	}
	.ot-side__logo { display: block; font-size:var(--ot-fs-body,17px); line-height:var(--ot-lh-body,1.65); }
	.ot-side__label { display: block; font-size:var(--ot-fs-caption,14px); color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
	.ot-side__nav,
	.ot-side__foot { flex-direction: column; overflow: visible; }
	.ot-side__link { border-radius: 12px; }
	.ot-side__link.is-active::before {
		content: "";
		position: absolute;
		left: -12px;
		top: 8px;
		bottom: 8px;
		width: 4px;
		border-radius: 0 4px 4px 0;
		background: var(--hub-dark);
	}
	.ot-side__foot { border-top: 1px solid var(--line); padding-top:var(--ot-sp-12,12px); margin-top: 12px; }
}

/* ─── Cards ──────────────────────────────────────────────────── */

.ot-card {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 14px 34px -22px rgba(20, 23, 46, 0.3);
	padding: var(--ot-card-pad);
	margin-bottom: 24px;
	scroll-margin-top: 90px;
}

.ot-card--accent {
	border-color: var(--edge);
	background: linear-gradient(180deg, var(--tint) 0, #ffffff 160px);
}

.ot-card--accent::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 5px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: linear-gradient(90deg, var(--hub-dark), var(--hub-mid), var(--hub-light));
}

.ot-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap:var(--ot-sp-16,16px);
	margin-bottom: 14px;
}

.ot-card__lead { display: flex; align-items: center; gap:var(--ot-sp-16,16px); margin-bottom: 4px; }

.ot-badge-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--tint-strong);
	color: var(--hub-dark);
}

.ot-card__title {
	font-size:var(--ot-fs-h2,28px) !important;
	line-height:var(--ot-lh-h2,1.2);
	margin: 0 !important;
}

.ot-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:var(--ot-sp-8,8px) var(--ot-sp-24,24px);
	margin: 22px 0 0;
}

.ot-eyebrow {
	font-size:var(--ot-fs-caption,14px) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hub-dark);
	margin: 0 0 4px !important;line-height:var(--ot-lh-caption,1.45)
}

.ot-muted { color: var(--muted); font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }

.ot-status,
.ot-tag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap:var(--ot-sp-4,4px);
	font-size:var(--ot-fs-caption,14px);
	padding:var(--ot-sp-4,4px) var(--ot-sp-12,12px);
	border-radius: 999px;
	background: #f0f1f5;
	color: var(--muted);
	white-space: nowrap;line-height:var(--ot-lh-caption,1.45)
}

.ot-status--done { background: var(--hub-dark); color: #ffffff; }
.ot-status--next { background: var(--tint-strong); color: var(--hub-dark); }
.ot-status--premium { background: #fbf4e4; color: #7a5a12; }

.ot-chip {
	display: inline-flex;
	align-items: center;
	gap:var(--ot-sp-8,8px);
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);
	border-radius: 999px;
	border: 1.5px solid var(--edge);
	color: var(--hub-dark) !important;
	text-decoration: none !important;
	font-size:var(--ot-fs-caption,14px);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);line-height:var(--ot-lh-caption,1.45)
}

.ot-chip--solid { background: var(--hub-dark); border-color: var(--hub-dark); color: #ffffff !important; }

.ot-btn {
	display: inline-flex;
	align-items: center;
	gap:var(--ot-sp-8,8px);
	padding:var(--ot-sp-12,12px) var(--ot-sp-24,24px);
	border-radius: 999px;
	border: 1.5px solid var(--hub-dark);
	background: var(--hub-dark);
	color: #ffffff !important;
	text-decoration: none !important;
	font-family: inherit;
	font-size:var(--ot-fs-body,17px);
	line-height:var(--ot-lh-body,1.65);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.ot-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px var(--hub-dark); }
.ot-btn--quiet { background: #ffffff; color: var(--hub-dark) !important; }
.ot-btn--big { font-size:var(--ot-fs-body,17px); padding:var(--ot-sp-16,16px) var(--ot-sp-32,32px);line-height:var(--ot-lh-body,1.65) }

.ot-link { text-underline-offset: 3px; }
.ot-link--quiet { color: var(--muted) !important; }

.ot-list { margin: 0; padding-left:var(--ot-sp-20,20px); }
.ot-list li { margin-bottom: 8px; }
.ot-list li::marker { color: var(--hub-mid); }

.ot-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap:var(--ot-sp-8,8px);
	padding: 0;
	margin: 0 0 20px;
}

.ot-tags li {
	padding:var(--ot-sp-4,4px) var(--ot-sp-12,12px);
	border-radius: 999px;
	background: var(--tint);
	border: 1px solid var(--edge);
	font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)
}

.ot-tags--locked li { background: #fbfaf6; border-color: #eee6d2; color: var(--muted); }

/* Progress ring, used in the hero chip and the profile card */
.ot-ring,
.ot-progress__ring {
	--p: 0;
	border-radius: 50%;
	background: conic-gradient(var(--hub-dark) calc(var(--p) * 1%), color-mix(in srgb, var(--hub-light) 30%, #ffffff) 0);
	display: inline-grid;
	place-items: center;
}

.ot-ring { width: 16px; height: 16px; -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px); }

/* ─── Hero ───────────────────────────────────────────────────── */

.ot-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	min-height: 300px;
	padding: var(--ot-card-pad);
	margin-bottom: 24px;
	border-radius: calc(var(--radius) + 6px);
	background:
		radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--hub-light) 70%, transparent), transparent 55%),
		linear-gradient(135deg, color-mix(in srgb, var(--hub-light) 38%, #ffffff) 0%, color-mix(in srgb, var(--hub-mid) 30%, #ffffff) 55%, color-mix(in srgb, var(--hub-dark) 22%, #ffffff) 100%);
	border: 1px solid var(--edge);
	box-shadow: 0 24px 50px -30px var(--hub-dark);
	overflow: hidden;
	isolation: isolate;
}

.ot-hero__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.ot-hero__text { position: relative; }

.ot-hero__hello {
	font-size:var(--ot-fs-caption,14px) !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hub-dark);
	margin: 0 0 6px !important;line-height:var(--ot-lh-caption,1.45)
}

.ot-hero__title {
	font-size:var(--ot-fs-h1,36px) !important;
	line-height:var(--ot-lh-h1,1.12);
	margin: 0 0 8px !important;
}

.ot-hero__type {
	font-size:var(--ot-fs-display,48px) !important;
	line-height: 0.95;
	letter-spacing: 0.05em;
	color: var(--hub-dark);
	margin: 0 0 6px !important;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.ot-hero__epithet {
	font-size:var(--ot-fs-h3,20px) !important;
	margin: 0 0 12px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px);line-height:var(--ot-lh-h3,1.3)
}

.ot-hero__group {
	font-size:var(--ot-fs-caption,14px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45)
}

.ot-hero__stack {
	display: inline-flex;
	align-items: center;
	gap:var(--ot-sp-8,8px);
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	font-size:var(--ot-fs-body,17px) !important;
	letter-spacing: 0.04em;
	margin: 0 0 16px !important;line-height:var(--ot-lh-body,1.65)
}

.ot-hero__fn:first-child { color: var(--hub-dark); }
.ot-hero__dot { color: var(--hub-mid); }

.ot-hero__chips { display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); }

.ot-hero__figure {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 12px 0 calc(-1 * clamp(24px, 4vw, 44px));
}

.ot-hero__halo {
	position: absolute;
	width: 82%;
	aspect-ratio: 1;
	bottom: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 68%);
}

.ot-hero__avatar {
	position: relative;
	width: 230px;
	filter: drop-shadow(0 18px 22px rgba(20, 23, 46, 0.18));
}

@media (min-width: 720px) {
	.ot-hero { grid-template-columns: minmax(0, 1fr) 300px; gap:var(--ot-sp-24,24px); }
	.ot-hero__figure { margin-top: 0; }
	.ot-hero__avatar { width: 300px; }
}

@media (max-width: 719px) {
	.ot-hero { text-align: center; }
	.ot-hero__epithet, .ot-hero__chips { justify-content: center; }
	.ot-hero__figure { order: -1; margin: 0 0 8px; }
}

.ot-hero--empty { min-height: 0; }

/* ─── Messages, offer ────────────────────────────────────────── */

.ot-flash {
	padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px);
	border-radius: 14px;
	background: var(--tint-strong);
	border-left: 4px solid var(--hub-dark);
	margin-bottom: 24px;
}

.ot-flash--warn { background: #fdf3e7; border-left-color: #b0492a; }

.ot-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap:var(--ot-sp-16,16px);
	padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);
	margin-bottom: 24px;
	border-radius: var(--radius);
	border: 1.5px dashed var(--hub-mid);
	background: #ffffff;
}

.ot-offer__title { margin: 0 0 2px !important; font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-offer__text { margin: 0 !important; color: var(--muted); max-width: 46rem; }

.ot-offer__code {
	font-family: ui-monospace, 'JetBrains Mono', monospace;
	font-size:var(--ot-fs-body,17px);
	letter-spacing: 0.06em;
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);
	border-radius: 10px;
	background: var(--tint-strong);
	color: var(--hub-dark);
	user-select: all;line-height:var(--ot-lh-body,1.65)
}

/* ─── Profile modules ────────────────────────────────────────── */

.ot-progress__head { display: flex; justify-content: space-between; align-items: center; gap:var(--ot-sp-16,16px); margin-bottom: 18px; }

.ot-progress__ring { flex: 0 0 auto; width: 84px; height: 84px; }
.ot-progress__ring span {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #ffffff;
	font-size:var(--ot-fs-h3,20px);
	color: var(--hub-dark);line-height:var(--ot-lh-h3,1.3)
}

.ot-modules {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:var(--ot-sp-12,12px);
}

@media (min-width: 760px) {
	.ot-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ot-module { min-width: 0; }

.ot-module__link,
.ot-module > .ot-module__icon:first-child {
	text-decoration: none !important;
}

.ot-module__link,
.ot-module:not(:has(a)) {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap:var(--ot-sp-12,12px);
	align-items: center;
	height: 100%;
	padding:var(--ot-sp-16,16px);
	border-radius: 16px;
	border: 1.5px solid var(--line);
	background: #ffffff;
	color: var(--ink) !important;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ot-module__link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px var(--hub-dark); border-color: var(--edge); }

.ot-module__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #f0f1f5;
	color: var(--muted);
}

.ot-module__label { font-size:var(--ot-fs-small,15px); line-height:var(--ot-lh-small,1.5); }
.ot-module__state { display: inline-flex; align-items: center; gap:var(--ot-sp-4,4px); font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }

.ot-module[data-state="done"] .ot-module__link { border-color: var(--edge); background: var(--tint); }
.ot-module[data-state="done"] .ot-module__icon { background: var(--hub-dark); color: #ffffff; }
.ot-module[data-state="done"] .ot-module__state { color: var(--hub-dark); }

.ot-module[data-state="next"] .ot-module__link { border-style: dashed; border-color: var(--hub-mid); }
.ot-module[data-state="next"] .ot-module__icon { background: var(--tint-strong); color: var(--hub-dark); }
.ot-module[data-state="next"] .ot-module__state { color: var(--hub-dark); }

.ot-module[data-state="soon"] { opacity: 0.75; }

/* ─── Personality ────────────────────────────────────────────── */

.ot-personality__summary { font-size:var(--ot-fs-body,17px); max-width: 52rem;line-height:var(--ot-lh-body,1.65) }

/* Function tabs */

.ot-tabs { margin: 22px 0 8px; }

.ot-tabs__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:var(--ot-sp-8,8px);
	margin-bottom: 14px;
}

.ot-tab {
	appearance: none;
	cursor: pointer;
	text-align: center;
	padding:var(--ot-sp-16,16px) var(--ot-sp-8,8px) var(--ot-sp-12,12px);
	border-radius: 16px;
	border: 1.5px solid var(--edge);
	background: var(--tint);
	color: var(--ink);
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ot-tab:hover { transform: translateY(-2px); background: var(--tint-strong); }

.ot-tab[aria-selected="true"] {
	background: var(--hub-dark);
	border-color: var(--hub-dark);
	color: #ffffff;
	box-shadow: 0 12px 24px -14px var(--hub-dark);
}

.ot-tab__code { display: block; font-size:var(--ot-fs-h2,28px); line-height:var(--ot-lh-h2,1.2); color: var(--hub-dark); }
.ot-tab__role { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-tab[aria-selected="true"] .ot-tab__code,
.ot-tab[aria-selected="true"] .ot-tab__role { color: #ffffff; }

.ot-tabs__panel {
	padding: var(--ot-card-pad);
	border-radius: 18px;
	background: #ffffff;
	border: 1.5px solid var(--edge);
	margin-bottom: 12px;
}

.ot-tabs.is-enhanced .ot-tabs__panel[hidden] { display: none; }
.ot-tabs.is-enhanced .ot-tabs__panel { animation: ot-fade 220ms ease; }

.ot-panel__head { display: flex; gap:var(--ot-sp-16,16px); align-items: center; margin-bottom: 8px; }

.ot-panel__code {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--hub-mid), var(--hub-dark));
	color: #ffffff;
	font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)
}

.ot-panel__title { font-size:var(--ot-fs-h3,20px) !important; margin: 0 0 2px !important;line-height:var(--ot-lh-h3,1.3) }
.ot-panel__role { color: var(--muted); margin: 0 !important; }

.ot-panel__grid { display: grid; gap:var(--ot-sp-16,16px); margin-top: 8px; }
@media (min-width: 900px) {
	.ot-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ot-panel__block h3 { display: flex; align-items: center; gap:var(--ot-sp-8,8px); margin-top: 8px !important; color: var(--hub-dark) !important; font-size:var(--ot-fs-small,15px) !important;line-height:var(--ot-lh-small,1.5) }
.ot-panel__block p { font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-panel__block--growth { padding:var(--ot-sp-4,4px) var(--ot-sp-16,16px) var(--ot-sp-8,8px); border-radius: 14px; background: var(--tint); }

.ot-personality__body { display: grid; gap:var(--ot-sp-24,24px); align-items: start; }
@media (min-width: 1100px) {
	.ot-personality__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.ot-prose h3 { color: var(--hub-dark) !important; }

.ot-facts { display: grid; gap:var(--ot-sp-12,12px); margin: 14px 0 0; }
@media (min-width: 760px) { .ot-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-facts > div { padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 14px; background: var(--tint); border: 1px solid var(--edge); }
.ot-facts dt { font-size:var(--ot-fs-caption,14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
.ot-facts dd { margin: 4px 0 0; color: var(--muted); font-size:var(--ot-fs-caption,14px); line-height:var(--ot-lh-caption,1.45); }

/* How your answers pointed to each function */

.ot-chart {
	background: var(--tint);
	border: 1px solid var(--edge);
	border-radius: 18px;
	padding:var(--ot-sp-20,20px) var(--ot-sp-16,16px) var(--ot-sp-12,12px);
	align-self: start;
}

.ot-chart__head { display: flex; justify-content: space-between; align-items: flex-start; gap:var(--ot-sp-8,8px); }
.ot-chart__title { margin: 0 0 4px !important; }

.ot-info { position: relative; }
.ot-info summary { list-style: none; cursor: pointer; color: var(--hub-dark); padding: 2px; border-radius: 50%; }
.ot-info summary::-webkit-details-marker { display: none; }
.ot-info p {
	position: absolute;
	right: 0;
	top: 30px;
	z-index: 5;
	width: min(280px, 70vw);
	padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);
	border-radius: 12px;
	background: var(--ink);
	color: #ffffff;
	font-size:var(--ot-fs-caption,14px);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4);line-height:var(--ot-lh-caption,1.45)
}

.ot-chart__group {
	font-size:var(--ot-fs-caption,14px) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 14px 0 6px !important;line-height:var(--ot-lh-caption,1.45)
}

.ot-chart__rows { list-style: none; padding: 0; margin: 0; display: grid; gap:var(--ot-sp-4,4px); }

.ot-chart__row details { border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.ot-chart__row details[open] { background: #ffffff; box-shadow: 0 0 0 1px var(--edge); }

.ot-chart__row summary {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap:var(--ot-sp-12,12px);
	padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);
	cursor: pointer;
	list-style: none;
}

.ot-chart__row summary::-webkit-details-marker { display: none; }
.ot-chart__row summary:hover { background: #ffffff; border-radius: 12px; }

.ot-chart__code {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tint-strong);
	color: var(--hub-dark);
	font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)
}

.ot-chart__row[data-shadow="false"][data-level="4"] .ot-chart__code { background: var(--hub-dark); color: #ffffff; }
.ot-chart__row[data-shadow="true"] .ot-chart__code { background: #eef0f4; color: var(--muted); }

.ot-chart__label { line-height: 1.25; min-width: 0; }
.ot-chart__match { display: block; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-chart__name { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;line-height:var(--ot-lh-caption,1.45) }

.ot-dots { display: inline-flex; gap:var(--ot-sp-4,4px); }
.ot-dots__dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e4ec; }
.ot-dots__dot[data-on="true"] { background: var(--hub-dark); }
.ot-chart__row[data-shadow="true"] .ot-dots__dot[data-on="true"] { background: var(--hub-mid); }

.ot-chart__note { padding:2px var(--ot-sp-16,16px) var(--ot-sp-12,12px) var(--ot-sp-64,64px); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-chart__desc { color: var(--hub-dark); }
.ot-chart__hint { font-size:var(--ot-fs-caption,14px) !important; color: var(--muted); margin: 10px 0 0 !important;line-height:var(--ot-lh-caption,1.45) }

/* Why did I get this result? */

.ot-why { margin-top: 24px; border-top: 1px solid var(--line); padding-top:var(--ot-sp-16,16px); }
.ot-why summary { cursor: pointer; font-size:var(--ot-fs-body,17px); color: var(--hub-dark);line-height:var(--ot-lh-body,1.65) }
.ot-why[open] summary { margin-bottom: 12px; }
.ot-why__list { list-style: none; padding: 0; margin: 0; display: grid; gap:var(--ot-sp-12,12px); }
.ot-why__list li { padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 12px; background: var(--tint); border-left: 3px solid var(--hub-mid); }
.ot-why__pair {
	display: inline-block;
	font-size:var(--ot-fs-caption,14px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hub-dark);
	margin-right: 6px;line-height:var(--ot-lh-caption,1.45)
}


/* ─── Nurture and the Four Sides ─────────────────────────────── */

.ot-sides {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:var(--ot-sp-12,12px);
	margin: 18px 0 8px;
}

@media (min-width: 760px) {
	.ot-sides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ot-side-card {
	position: relative;
	margin: 0;
	padding:var(--ot-sp-12,12px) var(--ot-sp-12,12px) var(--ot-sp-16,16px);
	border-radius: 18px;
	border: 1.5px solid var(--line);
	background: #ffffff;
	text-align: center;
	overflow: hidden;
}

.ot-side-card img {
	display: block;
	width: 100%;
	max-width: 130px;
	height: 130px;
	object-fit: contain;
	object-position: bottom;
	margin: 0 auto 6px;
	filter: grayscale(0.55);
	opacity: 0.7;
}

.ot-side-card figcaption { display: grid; gap: 2px; }
.ot-side-card__name { font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-side-card__type { font-size:var(--ot-fs-caption,14px); color: var(--muted); letter-spacing: 0.06em;line-height:var(--ot-lh-caption,1.45) }
.ot-side-card__blurb { font-size:var(--ot-fs-caption,14px); color: var(--muted); line-height:var(--ot-lh-caption,1.45); }

.ot-side-card[data-active="true"] {
	border-color: var(--hub-dark);
	background: linear-gradient(180deg, var(--tint-strong), #ffffff 75%);
	box-shadow: 0 14px 28px -18px var(--hub-dark);
}

.ot-side-card[data-active="true"] img { filter: none; opacity: 1; }
.ot-side-card[data-active="true"] .ot-side-card__name { color: var(--hub-dark); }

.ot-side-card__here {
	justify-self: center;
	margin-top: 6px;
	padding:3px var(--ot-sp-12,12px);
	border-radius: 999px;
	background: var(--hub-dark);
	color: #ffffff;
	font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)
}

.ot-sides__note { font-size:var(--ot-fs-caption,14px); margin-bottom: 18px;line-height:var(--ot-lh-caption,1.45) }

.ot-nurture__headline { font-size:var(--ot-fs-h3,20px); color: var(--hub-dark);line-height:var(--ot-lh-h3,1.3) }
.ot-nurture__cols { margin: 8px 0 0; }
.ot-nurture__cols > div { padding:var(--ot-sp-4,4px) var(--ot-sp-20,20px) var(--ot-sp-12,12px); border-radius: 16px; background: var(--tint); }
.ot-nurture__cols h3 { margin-top: 12px; }

.ot-nurture__secondary {
	margin: 20px 0 0 !important;
	padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);
	border-radius: 14px;
	background: #f5f6f9;
	color: var(--muted);
	font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)
}

.ot-nurture__secondary strong { color: var(--ink); font-weight: 400; }

/* ─── Next-step cards ────────────────────────────────────────── */

.ot-next[data-state="next"] {
	border: 1.5px dashed var(--hub-mid);
	background:
		radial-gradient(400px 200px at 100% 0%, var(--tint-strong), transparent 70%),
		#ffffff;
}

.ot-next[data-state="soon"] { background: #fbfbfd; }
.ot-next[data-state="soon"] .ot-badge-icon { background: #eef0f4; color: var(--muted); }

.ot-cta-card { background: linear-gradient(135deg, var(--tint-strong), #ffffff); border-color: var(--edge); }

/* ─── Reports, products ──────────────────────────────────────── */

.ot-card--premium {
	border-color: #eee2c4;
	background:
		radial-gradient(500px 220px at 100% 0%, #fbf4e4, transparent 70%),
		#ffffff;
}

.ot-report__free {
	padding:var(--ot-sp-8,8px) var(--ot-sp-20,20px) var(--ot-sp-12,12px);
	border-radius: 16px;
	background: var(--tint);
	border: 1px solid var(--edge);
	margin-bottom: 8px;
}

.ot-report__free h3 { display: flex; align-items: center; gap:var(--ot-sp-8,8px); }

.ot-reports { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap:var(--ot-sp-12,12px); }

.ot-reports__item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap:var(--ot-sp-16,16px);
	align-items: center;
	padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #ffffff;
}

.ot-reports__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #fbf4e4;
	color: #7a5a12;
}

.ot-reports__item[data-state="unlocked"] { border-color: var(--edge); background: var(--tint); }
.ot-reports__item[data-state="unlocked"] .ot-reports__icon { background: var(--hub-dark); color: #ffffff; }
.ot-reports__title { display: block; }
.ot-reports__desc { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }

.ot-product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:var(--ot-sp-8,8px);
	padding:0 var(--ot-sp-20,20px) var(--ot-sp-20,20px);
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #ffffff;
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.ot-product:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px var(--hub-dark); }

.ot-product__cover {
	align-self: stretch;
	display: grid;
	place-items: center;
	height: 88px;
	margin: 0 -18px 6px;
	background:
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--hub-light) 70%, transparent), transparent 60%),
		linear-gradient(135deg, var(--hub-dark), var(--hub-mid));
	color: rgba(255, 255, 255, 0.9);
	font-size:var(--ot-fs-h2,28px);
	letter-spacing: 0.12em;line-height:var(--ot-lh-h2,1.2)
}

.ot-product[data-owned="true"] { border-color: var(--edge); }
.ot-product__title { margin: 2px 0 0 !important; font-size:var(--ot-fs-body,17px) !important;line-height:var(--ot-lh-body,1.65) }
.ot-product__desc { color: var(--muted); font-size:var(--ot-fs-caption,14px); flex: 1;line-height:var(--ot-lh-caption,1.45) }

/* ─── Centered pages: logged out, link landing, coming soon ──── */

.ot-hub--center {
	display: flex;
	justify-content: center;
	padding-top: clamp(32px, 8vw, 96px);
	padding-bottom: clamp(48px, 10vw, 120px);
}

.ot-gate { max-width: 560px; width: 100%; text-align: center; }
.ot-gate__title { font-size:var(--ot-fs-h1,36px) !important; line-height:var(--ot-lh-h1,1.12); margin: 0 0 12px !important; }
.ot-gate__avatar { width: 160px; margin: 0 auto 8px; display: block; }
.ot-gate form { margin: 20px 0 8px; }

/* Signed-out Hub: an honest illustrated introduction, never member data. */
.ot-hub .ot-welcome { max-width: 1080px; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; text-align: left; background: #fff; }
.ot-welcome .ot-profile-preview { padding:var(--ot-sp-40,40px) var(--ot-sp-40,40px) var(--ot-sp-24,24px); background: #fff9f3; }
.ot-welcome h1 { font-size:var(--ot-fs-h1,36px); line-height:var(--ot-lh-h1,1.12); margin: 0 0 16px; }
.ot-welcome__art { display: flex; justify-content: center; align-items: flex-end; margin: 24px -12px 12px; min-height: 160px; }
.ot-welcome__art img { width: 25%; max-width: 150px; height: 170px; object-fit: contain; object-position: bottom; }
.ot-welcome__art img:only-child { width: 160px; }
.ot-welcome .ot-welcome__caption { font-size:var(--ot-fs-caption,14px); color: var(--muted); text-align: center;line-height:var(--ot-lh-caption,1.45) }
.ot-welcome__signin { align-self: center; padding:var(--ot-sp-40,40px); }
.ot-welcome .ot-gate__title { font-size:var(--ot-fs-h2,28px) !important; line-height:var(--ot-lh-h2,1.2); margin-bottom: 16px !important; }
.ot-welcome .ot-form { display: grid; justify-content: stretch; gap:var(--ot-sp-12,12px); margin-top: 24px; }
.ot-welcome .ot-input { width: 100%; min-width: 0; border-radius: 12px; }
.ot-welcome .ot-btn { width: 100%; min-height: 48px; }
.ot-welcome .ot-muted { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-welcome .ot-gate__alt { justify-content: flex-start; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-welcome__inside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap:var(--ot-sp-24,24px); padding:var(--ot-sp-24,24px) var(--ot-sp-40,40px); border-top: 1px solid var(--line); }
.ot-welcome__inside p { margin: 0; }
.ot-welcome__inside strong { display: block; font-weight: 400; color: var(--hub-dark); margin-bottom: 4px; }
.ot-welcome__inside span { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-welcome input:focus-visible { outline: 3px solid var(--hub-dark); outline-offset: 3px; }
@media (max-width: 760px) {
 .ot-hub--center:has(.ot-welcome) { padding:var(--ot-sp-24,24px) var(--ot-sp-16,16px) var(--ot-sp-48,48px); }
 .ot-welcome { grid-template-columns: 1fr; }
 .ot-welcome .ot-profile-preview { padding:var(--ot-sp-24,24px) var(--ot-sp-24,24px) var(--ot-sp-16,16px); }
 .ot-welcome h1 { font-size:var(--ot-fs-h2,28px); margin-bottom: 12px;line-height:var(--ot-lh-h2,1.2) }
 .ot-welcome .ot-profile-preview > p:not(.ot-eyebrow):not(.ot-welcome__caption) { font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
 .ot-welcome__art { min-height: 88px; margin: 12px 0 0; }
 .ot-welcome__art img { height: 96px; }
 .ot-welcome .ot-welcome__caption { display: none; }
 .ot-welcome__signin { padding:var(--ot-sp-24,24px); }
 .ot-welcome .ot-gate__title { font-size:var(--ot-fs-h2,28px) !important;line-height:var(--ot-lh-h2,1.2) }
 .ot-welcome__inside { grid-template-columns: 1fr; gap:var(--ot-sp-16,16px); padding:var(--ot-sp-24,24px); }
}

.ot-form { display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); justify-content: center; }

.ot-input {
	flex: 1 1 240px;
	font-family: inherit;
	font-size:var(--ot-fs-body,17px);
	padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px);
	border: 1.5px solid #d8dae6;
	border-radius: 999px;
	background: #ffffff;
	color: var(--ink);line-height:var(--ot-lh-body,1.65)
}

.ot-input:focus { outline: none; border-color: var(--hub-dark); }

.ot-gate__alt { display: flex; flex-wrap: wrap; justify-content: center; gap:var(--ot-sp-8,8px); margin-top: 20px !important; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }

/* ─── Small screens ──────────────────────────────────────────── */

@media (max-width: 479px) {
	.ot-hub { padding:var(--ot-sp-16,16px) var(--ot-sp-12,12px) var(--ot-sp-48,48px); font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
	.ot-btn { width: 100%; justify-content: center; }
	.ot-card__foot .ot-link { width: 100%; }
	.ot-tabs__list { gap:var(--ot-sp-8,8px); }
	.ot-tab { padding:var(--ot-sp-12,12px) 2px var(--ot-sp-8,8px); border-radius: 12px; }
	.ot-tab__code { font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }
	.ot-tab__role { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
	.ot-panel__code { width: 52px; height: 52px; }
	.ot-chart__note { padding-left:var(--ot-sp-16,16px); }
	.ot-modules { grid-template-columns: 1fr; }
	.ot-reports__item { grid-template-columns: 40px 1fr; }
	.ot-reports__item > :last-child { grid-column: 2; justify-self: start; }
	.ot-progress__ring { width: 68px; height: 68px; }
	.ot-progress__ring span { width: 52px; height: 52px; }
}

@keyframes ot-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ─── v1.2: richer function panels ───────────────────────────── */

.ot-tabs__hint { font-size:var(--ot-fs-caption,14px) !important; color: var(--muted); margin: 0 0 8px !important;line-height:var(--ot-lh-caption,1.45) }

.ot-tab { position: relative; }
.ot-tab__cta {
	display: block;
	margin-top: 6px;
	font-size:var(--ot-fs-caption,14px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hub-dark);
	opacity: 0.75;line-height:var(--ot-lh-caption,1.45)
}
.ot-tab[aria-selected="true"] .ot-tab__cta { color: #ffffff; opacity: 0.9; }
.ot-tab[aria-selected="true"] .ot-tab__cta::after { content: " ✓"; }
.ot-tab[aria-selected="false"] .ot-tab__cta::after { content: " →"; }
.ot-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 16px;
	height: 16px;
	background: var(--hub-dark);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px;
}
.ot-tab:focus-visible { outline: 3px solid var(--hub-mid); outline-offset: 2px; }

.ot-tabs__panel { margin-bottom: 0; }
.ot-panel__about { font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }

.ot-cues { list-style: none; display: flex; flex-wrap: wrap; gap:var(--ot-sp-8,8px); padding: 0; margin: 4px 0 14px; }
.ot-cues li { padding:3px var(--ot-sp-12,12px); border-radius: 999px; background: var(--tint-strong); color: var(--hub-dark); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }

.ot-panel__example {
	margin: 16px 0;
	padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px);
	border-radius: 16px;
	background: linear-gradient(135deg, var(--tint-strong), #ffffff 80%);
	border: 1px solid var(--edge);
}
.ot-panel__label { display: flex; align-items: center; gap:var(--ot-sp-8,8px); font-size:var(--ot-fs-caption,14px) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-dark); margin: 0 0 4px !important;line-height:var(--ot-lh-caption,1.45) }
.ot-panel__example-title { font-size:var(--ot-fs-body,17px) !important; margin: 0 0 4px !important;line-height:var(--ot-lh-body,1.65) }
.ot-panel__example p:last-child { margin: 0; color: var(--muted); }

.ot-panel__pair { display: grid; gap:var(--ot-sp-12,12px); margin: 8px 0; }
@media (min-width: 640px) { .ot-panel__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-panel__pair .ot-panel__block { padding:var(--ot-sp-4,4px) var(--ot-sp-16,16px) var(--ot-sp-8,8px); border-radius: 14px; }
.ot-panel__block--plus { background: var(--tint); }
.ot-panel__block--plus .ot-list li::marker { content: "+  "; color: var(--hub-dark); }
.ot-panel__block--minus { background: #fbf7f1; }
.ot-panel__block--minus h3 { color: #8a5a1c !important; }
.ot-panel__block--minus .ot-list li::marker { content: "!  "; color: #b0492a; }
.ot-panel__block--growth { margin-top: 12px; }
.ot-panel__block--growth .ot-list { margin-bottom: 8px; }
.ot-panel__block--growth .ot-list li::marker { content: "↗  "; color: var(--hub-dark); }

.ot-side-card__gate { font-size:var(--ot-fs-caption,14px); color: var(--hub-dark); letter-spacing: 0.04em;line-height:var(--ot-lh-caption,1.45) }
.ot-side-card__pm { display: grid; gap: 2px; margin-top: 6px; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-side-card__pm .pos { color: var(--hub-dark); }
.ot-side-card__pm .neg { color: #9a5a3a; }

.ot-retake { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }

/* Assessment history */
.ot-history { margin-top: 16px; border-top: 1px solid var(--line); padding-top:var(--ot-sp-12,12px); }
.ot-history summary { cursor: pointer; color: var(--muted); display: flex; gap:var(--ot-sp-12,12px); align-items: baseline; }
.ot-history summary .ot-muted { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-history__table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-history__table th { text-align: left; font-weight: 400; font-size:var(--ot-fs-caption,14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding:var(--ot-sp-8,8px) var(--ot-sp-8,8px); border-bottom: 1px solid var(--line);line-height:var(--ot-lh-caption,1.45) }
.ot-history__table td { padding:var(--ot-sp-8,8px); border-bottom: 1px solid var(--line); }
.ot-history__table tr:first-child td strong { color: var(--hub-dark); }

/* ─── Account & orders ───────────────────────────────────────── */

.ot-account-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:var(--ot-sp-20,20px);
	padding:var(--ot-sp-24,24px) var(--ot-sp-24,24px);
	margin-bottom: 16px;
	border-radius: var(--radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--hub-light) 32%, #ffffff), #ffffff 70%);
	border: 1px solid var(--edge);
}
.ot-account-head__avatar { width: 72px; height: 72px; object-fit: contain; object-position: bottom; border-radius: 50%; background: #ffffff; border: 2px solid var(--edge); }
.ot-account-head__title { font-size:var(--ot-fs-h2,28px) !important; margin: 0 !important;line-height:var(--ot-lh-h2,1.2) }
.ot-account-head .ot-muted { margin: 0; }
.ot-account-head__back { margin-left: auto; }

.ot-subnav { display: flex; gap:var(--ot-sp-8,8px); overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; padding: 2px; }
.ot-subnav__link {
	flex: 0 0 auto;
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);
	border-radius: 999px;
	border: 1.5px solid var(--edge);
	background: #ffffff;
	color: var(--ink) !important;
	text-decoration: none !important;
	font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)
}
.ot-subnav__link:hover { background: var(--tint); }
.ot-subnav__link.is-active { background: var(--hub-dark); border-color: var(--hub-dark); color: #ffffff !important; }

.ot-account__grid { display: grid; gap:var(--ot-sp-16,16px); }
@media (min-width: 760px) { .ot-account__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-account__tile { padding:var(--ot-sp-20,20px) var(--ot-sp-20,20px); border-radius: 16px; border: 1px solid var(--line); background: #ffffff; }
.ot-account__tile h2 { font-size:var(--ot-fs-body,17px) !important; margin: 10px 0 6px !important;line-height:var(--ot-lh-body,1.65) }
.ot-account__orders { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap:var(--ot-sp-8,8px); }
.ot-account__orders li { display: flex; flex-wrap: wrap; gap:var(--ot-sp-4,4px) var(--ot-sp-12,12px); align-items: baseline; padding:var(--ot-sp-8,8px) 0; border-bottom: 1px solid var(--line); }
.ot-account__orders li span:last-child { margin-left: auto; }

/* WooCommerce output inside the Hub (its own stylesheet may be off on this page) */
.ot-account__wc table { width: 100%; border-collapse: collapse; font-size:var(--ot-fs-small,15px); margin: 0 0 16px;line-height:var(--ot-lh-small,1.5) }
.ot-account__wc th,
.ot-account__wc td { text-align: left; padding:var(--ot-sp-12,12px) var(--ot-sp-12,12px); border-bottom: 1px solid var(--line); vertical-align: top; }
.ot-account__wc thead th { font-weight: 400; font-size:var(--ot-fs-caption,14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-hub .ot-account__wc .button,
.ot-hub .ot-account__wc a.button,
.ot-hub .ot-account__wc button[type="submit"],
.ot-hub .ot-account__wc input[type="submit"] {
	display: inline-block;
	padding:var(--ot-sp-8,8px) var(--ot-sp-20,20px);
	border-radius: 999px;
	border: 1.5px solid var(--hub-dark) !important;
	background: var(--hub-dark) !important;
	color: #ffffff !important;
	line-height:var(--ot-lh-caption,1.45);
	font-weight: 400;
	text-decoration: none !important;
	font-family: inherit;
	font-size:var(--ot-fs-caption,14px);
	cursor: pointer;
	margin: 2px 4px 2px 0;
}
.ot-account__wc .form-row { margin: 0 0 14px; display: flex; flex-direction: column; gap:var(--ot-sp-4,4px); }
.ot-account__wc label { font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-hub .ot-account__wc input[type="text"],
.ot-hub .ot-account__wc input[type="email"],
.ot-hub .ot-account__wc input[type="tel"],
.ot-hub .ot-account__wc input[type="password"],
.ot-hub .ot-account__wc select,
.ot-hub .ot-account__wc textarea {
	width: 100%;
	max-width: 520px;
	font-family: inherit;
	font-size:var(--ot-fs-body,17px);
	padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);
	border: 1.5px solid #d8dae6;
	border-radius: 12px;
	background: #ffffff;
	color: var(--ink);line-height:var(--ot-lh-body,1.65)
}
/* Members sign in by email link and have no password to change. */
.ot-hub .ot-account__wc .woocommerce-EditAccountForm fieldset { display: none; }
.ot-account__wc em { font-style: normal; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-account__wc fieldset { border: 1px solid var(--line); border-radius: 14px; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); margin: 0 0 16px; }
.ot-account__wc .woocommerce-message,
.ot-account__wc .woocommerce-info,
.ot-account__wc .woocommerce-error,
.ot-account__wc .woocommerce-notice {
	list-style: none;
	padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);
	margin: 0 0 16px;
	border-radius: 12px;
	background: var(--tint-strong);
	border-left: 4px solid var(--hub-dark);
}
.ot-account__wc .woocommerce-error { background: #fdf3e7; border-left-color: #b0492a; }
.ot-account__wc .woocommerce-message::before,
.ot-account__wc .woocommerce-info::before,
.ot-account__wc .woocommerce-error::before { display: none !important; }
.ot-account__wc .woocommerce-info,
.ot-account__wc .woocommerce-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap:var(--ot-sp-12,12px); border-top: 0 !important; color: var(--ink); }
.ot-account__wc .woocommerce-info .button,
.ot-account__wc .woocommerce-message .button { float: none !important; order: 2; margin: 0 !important; }
.ot-account__wc .woocommerce-Addresses,
.ot-account__wc .u-columns { display: grid; gap:var(--ot-sp-16,16px); }
@media (min-width: 760px) { .ot-account__wc .u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-account__wc .woocommerce-Address { padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); border-radius: 14px; border: 1px solid var(--line); }
.ot-account__wc address { font-style: normal; color: var(--muted); }
.ot-account__wc .col2-set .col-1,
.ot-account__wc .col2-set .col-2 { float: none; width: auto; }

/* ═════════════════════════════════════════════════════════════
   v1.3 polish: one design system for every Hub section.
   Tokens first, then per-section refinements. Overrides earlier rules.
   ═════════════════════════════════════════════════════════════ */

.ot-hub {
	--radius: 20px;
	--radius-sm: 14px;
	--border: 1px solid var(--line);
	--shadow: 0 1px 2px rgba(20, 23, 46, 0.04), 0 12px 32px -20px rgba(20, 23, 46, 0.28);
	--shadow-hover: 0 2px 4px rgba(20, 23, 46, 0.05), 0 18px 38px -20px color-mix(in srgb, var(--hub-dark) 55%, transparent);
	--gap: 28px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Cards, pills and headings share one set of values */
.ot-card { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--gap); padding: var(--ot-card-pad); }
.ot-grid--2 { gap: var(--gap); margin-bottom: var(--gap); }
.ot-card--accent { border-color: var(--edge); }
.ot-card__title { letter-spacing: -0.01em; }
.ot-hub h3 { letter-spacing: -0.005em; }
.ot-status, .ot-tag, .ot-chip, .ot-tags li, .ot-cues li { border-radius: 999px; }
.ot-tag { font-size:var(--ot-fs-caption,14px); padding:var(--ot-sp-4,4px) var(--ot-sp-12,12px);line-height:var(--ot-lh-caption,1.45) }
.ot-badge-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); }

/* Hover and focus, everywhere */
.ot-hub a:focus-visible,
.ot-hub button:focus-visible,
.ot-hub summary:focus-visible,
.ot-hub [tabindex]:focus-visible { outline: 3px solid color-mix(in srgb, var(--hub-mid) 70%, transparent); outline-offset: 2px; border-radius: 10px; }
.ot-link { transition: color 160ms var(--ease); }
.ot-link:hover { color: var(--ink) !important; }

/* ─── Hero: an identity card ─────────────────────────────────── */

.ot-hero {
	min-height: 340px;
	border: 0;
	border-radius: calc(var(--radius) + 8px);
	background:
		radial-gradient(70% 90% at 82% 45%, color-mix(in srgb, var(--hub-light) 85%, transparent), transparent 62%),
		linear-gradient(125deg,
			color-mix(in srgb, var(--hub-light) 45%, #ffffff) 0%,
			color-mix(in srgb, var(--hub-mid) 48%, #ffffff) 48%,
			color-mix(in srgb, var(--hub-dark) 62%, var(--hub-mid)) 100%);
	box-shadow: 0 28px 60px -34px var(--hub-dark), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
	margin-bottom: var(--gap);
}
.ot-hero::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: calc(var(--radius) + 2px);
	border: 1px solid rgba(255, 255, 255, 0.45);
	pointer-events: none;
}
.ot-hero__type { font-size:var(--ot-fs-display,48px) !important;line-height:var(--ot-lh-display,1.06) }
.ot-hero__stack {
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 6px 16px -12px var(--hub-dark);
	font-size:var(--ot-fs-body,17px) !important;
	letter-spacing: 0.08em;line-height:var(--ot-lh-body,1.65)
}
.ot-hero__avatar { width: 260px; filter: drop-shadow(0 24px 26px rgba(20, 23, 46, 0.24)); }
@media (min-width: 720px) {
	.ot-hero { grid-template-columns: minmax(0, 1fr) 340px; }
	.ot-hero__avatar { width: 350px; max-width: none; margin-top: -24px; }
}
.ot-hero__halo { background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 66%); }
.ot-chip { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.ot-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px var(--hub-dark); }

/* ─── Sidebar ────────────────────────────────────────────────── */

.ot-side { border: var(--border); box-shadow: var(--shadow); }
.ot-side__link { transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.ot-side__link:hover { transform: translateX(2px); }
.ot-side__link.is-active {
	background: var(--hub-dark);
	color: #ffffff !important;
	box-shadow: 0 10px 20px -14px var(--hub-dark);
}
.ot-side__link.is-active .ot-icon { opacity: 1; color: #ffffff; }
@media (min-width: 1024px) {
	.ot-side__link.is-active::before { background: var(--hub-mid); }
}

/* ─── Profile modules: done / next / locked / coming soon ────── */

.ot-progress { background: linear-gradient(180deg, var(--tint), #ffffff 140px); border-color: var(--edge); }
.ot-progress__ring { width: 92px; height: 92px; box-shadow: 0 10px 22px -16px var(--hub-dark); }
.ot-progress__ring span { width: 72px; height: 72px; font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }
.ot-modules { gap:var(--ot-sp-16,16px); }
.ot-module__link, .ot-module:not(:has(a)) { border-radius: var(--radius-sm); padding:var(--ot-sp-16,16px); min-height: 76px; }
.ot-module__link:hover { box-shadow: var(--shadow-hover); }

.ot-module[data-state="done"] .ot-module__link {
	background: linear-gradient(135deg, var(--tint-strong), #ffffff);
	border: 1.5px solid var(--edge);
}
.ot-module[data-state="done"] .ot-module__icon { background: var(--hub-dark); color: #ffffff; box-shadow: 0 8px 16px -10px var(--hub-dark); }

.ot-module[data-state="next"] .ot-module__link { border: 1.5px dashed var(--hub-mid); background: #ffffff; }
.ot-module[data-state="next"] .ot-module__state { font-weight: 400; }

.ot-module[data-state="locked"] .ot-module__link { border: 1.5px solid #eee2c4; background: linear-gradient(135deg, #fdf9ef, #ffffff); }
.ot-module[data-state="locked"] .ot-module__icon { background: #fbf1da; color: #8a6418; }
.ot-module[data-state="locked"] .ot-module__state { color: #8a6418; }

.ot-module[data-state="soon"] { opacity: 1; }
.ot-module[data-state="soon"] .ot-module__link,
.ot-module[data-state="soon"]:not(:has(a)) { background: #f8f9fb; border: 1.5px solid #eceef3; }
.ot-module[data-state="soon"] .ot-module__label { color: var(--muted); }

/* ─── Function exploration ───────────────────────────────────── */

.ot-tab {
	border-radius: var(--radius-sm);
	transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.ot-tab:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--hub-mid); }
.ot-tab[aria-selected="true"] { transform: translateY(-2px); }
.ot-tab__cta { transition: opacity 180ms var(--ease); }
.ot-tab:hover .ot-tab__cta { opacity: 1; }

.ot-tabs.is-enhanced .ot-tabs__panel { animation: ot-panel-in 260ms var(--ease); }
@keyframes ot-panel-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ot-tabs__panel { border-radius: var(--radius); box-shadow: var(--shadow); border: 1.5px solid var(--edge); padding: var(--ot-card-pad); }
.ot-panel__head { padding-bottom:var(--ot-sp-12,12px); margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ot-panel__code { box-shadow: 0 10px 22px -12px var(--hub-dark); }

/* Four distinct blocks: example, strengths, blind spots, growth */
.ot-panel__block h3 { display: flex; align-items: center; gap:var(--ot-sp-8,8px); }
.ot-panel__example {
	position: relative;
	padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px) var(--ot-sp-16,16px) var(--ot-sp-24,24px);
	border-radius: var(--radius-sm);
	background: #ffffff;
	border: 1px solid var(--edge);
	box-shadow: inset 4px 0 0 var(--hub-mid);
}
.ot-panel__pair { gap:var(--ot-sp-16,16px); margin: 14px 0; }
.ot-panel__pair .ot-panel__block { padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px) var(--ot-sp-8,8px); border-radius: var(--radius-sm); }
.ot-panel__block--plus { background: var(--tint); border: 1px solid var(--edge); }
.ot-panel__block--plus h3 { color: var(--hub-dark) !important; }
.ot-panel__block--minus { background: #fcf6ef; border: 1px solid #f1e1cc; }
.ot-panel__block--supports { padding:var(--ot-sp-4,4px) 0 0; }
.ot-panel__block--growth {
	padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px) var(--ot-sp-8,8px);
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--tint-strong), #ffffff 85%);
	border: 1px solid var(--edge);
}

.ot-chart { border-radius: var(--radius); }
.ot-chart__row details { transition: background 160ms var(--ease), box-shadow 160ms var(--ease); }

/* ─── Premium report cards ───────────────────────────────────── */

.ot-report-cards { display: grid; gap:var(--ot-sp-16,16px); margin-top: 14px; }
@media (min-width: 760px) { .ot-report-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ot-report-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-sm);
	border: 1px solid #eee2c4;
	background: #ffffff;
	overflow: hidden;
	transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.ot-report-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.ot-report-card__cover {
	position: relative;
	height: 150px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px 20px),
		linear-gradient(135deg, var(--hub-dark), color-mix(in srgb, var(--hub-mid) 80%, #d9b45a));
}
.ot-report-card__lock {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #8a6418;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5);
}
.ot-report-card__type { color: rgba(255, 255, 255, 0.9); letter-spacing: 0.14em; font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-report-card__body { display: flex; flex-direction: column; align-items: flex-start; gap:var(--ot-sp-8,8px); padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px) var(--ot-sp-16,16px); flex: 1; }
.ot-report-card__body .ot-tag { background: #fbf1da; color: #7a5a12; }
.ot-report-card__title { margin: 0 !important; font-size:var(--ot-fs-body,17px) !important;line-height:var(--ot-lh-body,1.65) }
.ot-report-card__desc { color: var(--muted); font-size:var(--ot-fs-caption,14px); flex: 1; margin: 0 !important;line-height:var(--ot-lh-caption,1.45) }
.ot-report-card[data-state="unlocked"] { border-color: var(--edge); }
.ot-report-card[data-state="unlocked"] .ot-report-card__lock { color: var(--hub-dark); }

.ot-btn--disabled {
	background: #f4f1ea !important;
	border-color: #e8e0cc !important;
	color: #8a6418 !important;
	cursor: default;
	box-shadow: none !important;
	transform: none !important;
	font-size:var(--ot-fs-caption,14px);
	padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);line-height:var(--ot-lh-caption,1.45)
}

.ot-card--premium { border-color: #eee2c4; }

/* ─── Section rhythm ─────────────────────────────────────────── */

.ot-hub__main > .ot-card + .ot-card,
.ot-hub__main > .ot-grid + .ot-card { margin-top: 4px; }
.ot-personality__summary { font-size:var(--ot-fs-body,17px); line-height:var(--ot-lh-body,1.65); max-width: 48rem; }
.ot-facts > div { border-radius: var(--radius-sm); }
.ot-why__list li, .ot-nurture__cols > div, .ot-report__free { border-radius: var(--radius-sm); }
.ot-product { border-radius: var(--radius-sm); }
.ot-product:hover { box-shadow: var(--shadow-hover); }
.ot-side-card { border-radius: var(--radius-sm); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.ot-side-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ─── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.ot-side {
		position: sticky;
		top: 0;
		z-index: 20;
		padding:var(--ot-sp-8,8px);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		margin: -16px -12px 20px;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(8px);
	}
	.ot-side__nav { gap:var(--ot-sp-8,8px); scroll-snap-type: x proximity; }
	.ot-side__link { scroll-snap-align: start; padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px); border: 1px solid var(--line); }
	.ot-side__link .ot-icon { width: 16px; height: 16px; }
	.ot-side__foot { margin-top: 6px; padding-top:var(--ot-sp-8,8px); border-top: 1px solid var(--line); }
	.ot-side__foot .ot-side__link { font-size:var(--ot-fs-caption,14px); padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);line-height:var(--ot-lh-caption,1.45) }
}
@media (max-width: 719px) {
	.ot-hero { min-height: 0; padding-top:var(--ot-sp-20,20px); }
	.ot-hero__avatar { width: 220px; margin-bottom: -6px; }
	.ot-hero::after { inset: 8px; }
	.ot-progress__head { align-items: flex-start; }
	.ot-tabs__list { position: sticky; top: 64px; z-index: 5; padding:var(--ot-sp-8,8px) 0; background: linear-gradient(#ffffff 80%, rgba(255, 255, 255, 0)); }
	.ot-tab__cta { display: none; }
	.ot-tab[aria-selected="true"]::after { display: none; }
	.ot-report-card__cover { height: 200px; --crop-y: 30%; }
	.ot-card { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ot-hub * { transition: none !important; animation: none !important; }
}

.ot-panel__pair > :only-child { grid-column: 1 / -1; }

/* ─── v1.4: beginner helper copy ─────────────────────────────── */

.ot-help { display: block; font-size:var(--ot-fs-caption,14px) !important; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; margin: 2px 0 0 !important;line-height:var(--ot-lh-caption,1.45) }
.ot-facts dt .ot-help { display: inline; margin-left: 6px !important; font-size:var(--ot-fs-caption,14px) !important;line-height:var(--ot-lh-caption,1.45) }

.ot-explainer {
	margin: 18px 0 16px;
	padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px);
	border-radius: var(--radius-sm);
	background: #f8f9fb;
	border: 1px solid var(--line);
}
.ot-explainer__title { margin: 0 0 4px !important; font-size:var(--ot-fs-body,17px) !important; color: var(--hub-dark) !important;line-height:var(--ot-lh-body,1.65) }
.ot-explainer p { margin: 0 0 6px; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-explainer p:last-child { margin-bottom: 0; }
.ot-explainer__note { color: var(--muted); font-size:var(--ot-fs-caption,14px) !important;line-height:var(--ot-lh-caption,1.45) }

.ot-tab__name { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted); line-height:var(--ot-lh-caption,1.45); margin: 2px 0; }
.ot-tab[aria-selected="true"] .ot-tab__name { color: rgba(255, 255, 255, 0.85); }
.ot-panel__role strong { font-weight: 400; color: var(--hub-dark); }

.ot-nurture__plain { margin: 6px 0 0 !important; font-size:var(--ot-fs-body,17px); color: var(--ink); max-width: 46rem;line-height:var(--ot-lh-body,1.65) }

.ot-compare { display: grid; gap:var(--ot-sp-16,16px); margin: 14px 0; }
@media (min-width: 760px) { .ot-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-compare__col { padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px) var(--ot-sp-12,12px); border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--edge); }
.ot-compare__col h3 { display: flex; align-items: center; gap:var(--ot-sp-8,8px); margin-top: 4px !important; }
.ot-compare__col--premium { background: #fdf9ef; border-color: #eee2c4; }
.ot-compare__col--premium h3 { color: #7a5a12 !important; }
.ot-list--check li::marker { content: "✓  "; color: var(--hub-dark); }

.ot-report-card__adds { margin: 4px 0 0 !important; font-size:var(--ot-fs-caption,14px); color: var(--ink);line-height:var(--ot-lh-caption,1.45) }
.ot-report-card__list { margin: 0; padding-left:var(--ot-sp-20,20px); font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-report-card__list li { margin-bottom: 2px; }

@media (max-width: 479px) {
	.ot-tab__name { display: none; }
}

/* ─── v1.5: warm opening ─────────────────────────────────────── */
.ot-opening .ot-personality__summary { margin-bottom: 14px; }
.ot-opening .ot-personality__summary:first-child { font-size:var(--ot-fs-h3,20px); color: var(--ink);line-height:var(--ot-lh-h3,1.3) }
.ot-bridge {
	margin: 4px 0 6px !important;
	padding-left:var(--ot-sp-16,16px);
	border-left: 3px solid var(--hub-mid);
	color: var(--muted);
	font-size:var(--ot-fs-small,15px);
	max-width: 48rem;line-height:var(--ot-lh-small,1.5)
}

/* ─── Issued reports ─────────────────────────────────────── */
.ot-issued { display: grid; grid-template-columns: 120px 1fr; gap:var(--ot-sp-20,20px); align-items: center; padding:var(--ot-sp-16,16px) 0; }
.ot-issued + .ot-issued { border-top: 1px solid rgba(0, 0, 0, .08); }
.ot-issued__cover { width: 120px; height: auto; border-radius: 6px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); display: block; }
.ot-issued--lead { grid-template-columns: 170px 1fr; }
.ot-issued--lead .ot-issued__cover { width: 170px; }
.ot-issued__title { margin: 8px 0 4px; font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }
.ot-issued__type { color: var(--hub-dark); }
.ot-issued__actions { display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); margin-top: 12px; }
.ot-issued-list { margin: 8px 0 18px; }
@media (max-width: 520px) {
  .ot-issued, .ot-issued--lead { grid-template-columns: 96px 1fr; gap:var(--ot-sp-16,16px); }
  .ot-issued__cover, .ot-issued--lead .ot-issued__cover { width: 96px; }
}

/* ─── One report, framed ─────────────────────────────────── */
.ot-report-view { display: flex; flex-direction: column; min-height: 100vh; }
.ot-report-view__bar { display: flex; align-items: center; gap:var(--ot-sp-16,16px); padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-bottom: 1px solid rgba(0, 0, 0, .08); background: #fff; }
.ot-report-view__title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-report-view__back { text-decoration: none; white-space: nowrap; }
.ot-report-view__frame { flex: 1; width: 100%; min-height: calc(100vh - 60px); border: 0; display: block; }
@media (max-width: 520px) { .ot-report-view__title { display: none; } }

/* ─── Personalized report teaser (free) ───────────────────── */
.ot-teaser .ot-card__title { font-size:var(--ot-fs-h2,28px); margin-top: 4px;line-height:var(--ot-lh-h2,1.2) }
.ot-teaser__finding { margin: 22px 0 6px; padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px); background: var(--hub-light-bg, #f6f8f2); border-left: 4px solid var(--hub-mid); border-radius: 12px; }
.ot-teaser__source { font-size:var(--ot-fs-caption,14px); letter-spacing: .14em; text-transform: uppercase; color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
.ot-teaser__title { margin: 8px 0 10px; font-family: 'Alata', system-ui, sans-serif; font-size:var(--ot-fs-h3,20px); line-height:var(--ot-lh-h3,1.3); color: var(--hub-dark); }
.ot-teaser__finding .ot-muted { margin: 0; }
.ot-teaser__h { margin-top: 22px; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-teaser__grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:var(--ot-sp-8,8px); }
.ot-teaser__grid li { display: flex; align-items: center; gap:var(--ot-sp-12,12px); padding:var(--ot-sp-12,12px) var(--ot-sp-12,12px); border: 1px solid #e7e9e1; border-radius: 10px; background: #fff; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-teaser__icon { display: inline-flex; color: var(--hub-mid); }
.ot-teaser__cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap:var(--ot-sp-12,12px); }
.ot-teaser__cta .ot-btn--disabled { font-size:var(--ot-fs-body,17px); padding:var(--ot-sp-16,16px) var(--ot-sp-24,24px);line-height:var(--ot-lh-body,1.65) }

/* ─── v1.6: illustrations and card actions ───────────────────── */

.ot-scene { margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--tint); }
.ot-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ot-intro--art { display: grid; gap:var(--ot-sp-24,24px); align-items: stretch; }
@media (min-width: 900px) {
	.ot-intro--art { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
}
.ot-scene--tall { aspect-ratio: 3 / 4; max-height: 440px; box-shadow: var(--shadow); }
.ot-scene--tall img { object-position: 38% center; }
@media (max-width: 899px) {
	.ot-scene--tall { aspect-ratio: 16 / 9; max-height: none; order: -1; }
	.ot-scene--tall img { object-position: center 30%; }
}

.ot-scene--banner { aspect-ratio: 16 / 8; margin: calc(-1 * clamp(22px, 3vw, 34px)) calc(-1 * clamp(22px, 3vw, 34px)) 18px; border-radius: var(--radius) var(--radius) 0 0; }

.ot-explainer--art { display: grid; gap:var(--ot-sp-20,20px); align-items: center; }
@media (min-width: 760px) { .ot-explainer--art { grid-template-columns: 220px minmax(0, 1fr); } }
.ot-scene--side { aspect-ratio: 4 / 3; }

/* Next-step cards: content stacks, actions sit at the bottom with room to breathe */
.ot-next { display: flex; flex-direction: column; }
.ot-next .ot-help { margin-top: 4px !important; }
.ot-card__actions { margin-top: auto; padding-top:var(--ot-sp-20,20px); display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); }
.ot-next .ot-tags { margin-bottom: 14px; }

/* ─── v1.7: centred portrait, bigger hero avatar, book covers ── */

.ot-intro--art { align-items: center; }
@media (min-width: 900px) {
	.ot-intro--art { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap:var(--ot-sp-40,40px); }
	.ot-scene--tall { justify-self: center; width: 100%; aspect-ratio: 4 / 5; max-height: 420px; }
}
.ot-scene--tall img { object-position: 42% 40%; }

@media (min-width: 720px) {
	.ot-hero { grid-template-columns: minmax(0, 1fr) 400px; min-height: 380px; }
	.ot-hero__avatar { width: 430px; margin-top: -40px; margin-bottom: -6px; }
	.ot-hero__halo { width: 92%; }
}
@media (max-width: 719px) {
	.ot-hero__avatar { width: 250px; }
}

.ot-product__book {
	display: block;
	align-self: center;
	width: 62%;
	margin: 18px auto 8px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 14px 26px -14px rgba(20, 23, 46, 0.55), 0 2px 4px rgba(20, 23, 46, 0.12);
	transform: rotate(-1.5deg);
	transition: transform 200ms var(--ease);
}
.ot-product__book img { display: block; width: 100%; height: auto; }
.ot-product:hover .ot-product__book { transform: rotate(0deg) translateY(-3px); }
.ot-product:has(.ot-product__book) { background: linear-gradient(180deg, var(--tint) 0, #ffffff 46%); }

.ot-report-card__cover { background-size: cover; background-position: center var(--crop-y, 42%); }

/* Manual profile choice: isolated from assessment history. */
.ot-type-actions { display: flex; flex-wrap: wrap; align-items: center; gap:var(--ot-sp-12,12px); margin: 20px 0 14px; }
.ot-type-actions form { margin: 0; }
.ot-type-source { margin: 4px 0 12px; font-size:var(--ot-fs-caption,14px); font-weight: 600; color: var(--hub-dark); opacity: .8;line-height:var(--ot-lh-caption,1.45) }
.ot-type-latest { margin: 0 0 10px; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-notice { margin: 0 0 20px; padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); border-radius: 14px; background: #eef6f1; color: #1f4d36; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-notice--error { background: #fbeceb; color: #7a2620; }
.ot-retake-choice h2 { font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }

/* Hidden until opened: by :target without JavaScript, by .is-open with it. */
.ot-type-picker { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding:var(--ot-sp-16,16px); box-sizing: border-box; }
.ot-type-picker:target, .ot-type-picker.is-open { display: flex; }
.ot-type-picker__backdrop { position: absolute; inset: 0; background: rgba(20, 23, 46, .6); backdrop-filter: blur(4px); cursor: default; }
.ot-type-picker__panel { position: relative; width: min(820px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding:var(--ot-sp-40,40px) var(--ot-sp-40,40px) var(--ot-sp-32,32px); border-radius: 24px; background: #fffefa; color: #14172e; box-shadow: 0 24px 90px rgba(20, 23, 46, .35); font-family: Alata, sans-serif; font-size:var(--ot-fs-body,17px); line-height:var(--ot-lh-body,1.65); text-align: left; }
.ot-type-picker [hidden] { display: none !important; }
.ot-type-picker form { margin: 0; }
.ot-type-picker .ot-eyebrow { margin: 0 0 6px; }
.ot-type-picker h2 { margin: 0 48px 10px 0; font-size:var(--ot-fs-h2,28px); line-height:var(--ot-lh-h2,1.2); color: #14172e; }
.ot-type-picker h2:focus { outline: none; }
.ot-type-picker__copy, .ot-type-picker__confirm p { margin: 0; max-width: 60ch; color: #41465a; }
.ot-picker-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f0f1ec; color: #14172e !important; font: 26px/1 sans-serif; text-decoration: none !important; }
.ot-picker-close:hover { background: #e4e6df; }

.ot-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap:var(--ot-sp-12,12px); margin: 24px 0 8px; }
/* Theme button styles (padding, case, shadows) must not leak into the cards. */
.ot-type-picker .ot-type-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 0; min-height: 0; height: 100%; margin: 0; padding:var(--ot-sp-16,16px) var(--ot-sp-8,8px) var(--ot-sp-16,16px); border: 2px solid transparent; border-radius: 16px; background: color-mix(in srgb, var(--type-light) 16%, #ffffff); color: var(--type-color); box-shadow: none; font: inherit; line-height: 1.3; text-transform: none; letter-spacing: normal; cursor: pointer; transition: border-color 150ms, transform 150ms, box-shadow 150ms; }
.ot-type-picker .ot-type-option:hover { border-color: var(--type-color); transform: translateY(-2px); box-shadow: 0 10px 22px -16px var(--type-color); }
.ot-type-picker .ot-type-option.is-current { border-color: var(--type-color); }
.ot-type-option img { display: block; width: auto; max-width: 100%; height: 104px; margin: 0 0 8px; object-fit: contain; }
.ot-type-option strong { font-size:var(--ot-fs-h3,20px); letter-spacing: .05em; color: var(--type-color);line-height:var(--ot-lh-h3,1.3) }
.ot-type-option span { font-size:var(--ot-fs-caption,14px); color: #41465a;line-height:var(--ot-lh-caption,1.45) }
.ot-type-option .ot-type-option__badge { position: absolute; top: 8px; right: 8px; padding:2px var(--ot-sp-8,8px); border-radius: 999px; background: var(--type-color); color: #ffffff; font-size:var(--ot-fs-caption,14px); letter-spacing: .04em;line-height:var(--ot-lh-caption,1.45) }
.ot-type-picker .ot-type-option:focus-visible, .ot-type-picker .ot-btn:focus-visible, .ot-picker-close:focus-visible { outline: 3px solid #23697a; outline-offset: 3px; }

.ot-type-picker__confirm { padding:var(--ot-sp-8,8px) 0 var(--ot-sp-4,4px); }
.ot-type-picker__confirm .ot-type-actions { margin-top: 24px; }
.ot-picker-reset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap:var(--ot-sp-12,12px); margin-top: 20px; padding-top:var(--ot-sp-20,20px); border-top: 1px solid #e1e3de; color: #41465a; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-picker-reset .ot-btn { margin: 0; }
body.ot-picker-open { overflow: hidden; }

@media (max-width: 600px) {
	.ot-type-picker { padding:var(--ot-sp-12,12px); }
	.ot-type-picker__panel { max-height: calc(100dvh - 20px); padding:var(--ot-sp-24,24px) var(--ot-sp-16,16px) var(--ot-sp-20,20px); border-radius: 18px; }
	.ot-type-picker h2 { font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2) }
	.ot-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--ot-sp-12,12px); }
	.ot-type-option img { height: 92px; }
	.ot-type-option strong { font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }
	.ot-type-actions .ot-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
	.ot-picker-reset { justify-content: center; text-align: center; }
}

/* Issued report card: open and download the member's own newest report. */
.ot-report-card__actions { display: flex; flex-wrap: wrap; gap:var(--ot-sp-8,8px); width: 100%; }
.ot-report-card__actions .ot-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.ot-report-card[data-state="unlocked"] .ot-tag { background: #e3f2e8; color: #1f5a37; }
.ot-report-card__more { display: inline-flex; align-items: center; min-height: 44px; font-size:var(--ot-fs-caption,14px); color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
/* ─── Guided questionnaires (Functional Expression, Developmental Focus) ─── */
.ot-guide-page { background: linear-gradient(180deg, var(--tint) 0, #ffffff 420px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ot-guide-page p, .ot-guide-page li, .ot-guide-page span { max-height: 999999px; } /* stops mobile font boosting */
.ot-guide { max-width: 720px; margin: 0 auto; padding:var(--ot-sp-24,24px) var(--ot-sp-16,16px) var(--ot-sp-64,64px); color: var(--ink); }
.ot-guide__bar { display: flex; justify-content: space-between; align-items: center; gap:var(--ot-sp-12,12px); min-height: 40px; margin-bottom: 8px; }
.ot-guide__exit { color: var(--muted) !important; text-decoration: none !important; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__exit:hover { color: var(--hub-dark) !important; }
.ot-guide__save { margin: 0; font-size:var(--ot-fs-caption,14px); color: var(--muted); display: inline-flex; align-items: center; gap:var(--ot-sp-8,8px);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__save[data-state="saving"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hub-mid); animation: ot-pulse 1s ease-in-out infinite; }
.ot-guide__save[data-state="saved"] { color: var(--hub-dark); }
.ot-guide__save[data-state="saved"]::before { content: "✓"; }
.ot-guide__save[data-state="error"] { color: #9b2c22; font-weight: 600; }
@keyframes ot-pulse { 50% { opacity: .3; } }
.ot-guide__progress { margin: 8px 0 18px; }
.ot-guide__count { display: flex; justify-content: space-between; align-items: baseline; gap:var(--ot-sp-12,12px); margin: 0 0 10px; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__eyebrow { margin: 0 0 6px; font-size:var(--ot-fs-caption,14px); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__num { white-space: nowrap; }
.ot-guide__meter { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ot-guide__meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hub-mid), var(--hub-dark)); transition: width 400ms ease; }
.ot-guide__card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--ot-card-pad); box-shadow: 0 1px 2px rgba(20, 23, 46, .04); }
.ot-guide__card + .ot-guide__card { margin-top: 16px; }
.ot-guide__title { margin: 0 0 12px; font-size:var(--ot-fs-h1,36px); line-height:var(--ot-lh-h1,1.12); color: var(--ink); }
.ot-guide__lead { font-size:var(--ot-fs-body,17px); line-height:var(--ot-lh-body,1.65); color: var(--ink); }
.ot-guide__facts { display: flex; flex-wrap: wrap; gap:var(--ot-sp-8,8px); margin: 20px 0 4px; padding: 0; list-style: none; }
.ot-guide__facts li { padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px); border-radius: 999px; background: var(--tint); color: var(--hub-dark); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap:var(--ot-sp-12,12px); margin-top: 24px; }
.ot-guide__small { flex-basis: 100%; margin: 4px 0 0; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__past { margin-top: 24px; border-top: 1px solid var(--line); padding-top:var(--ot-sp-16,16px); }
.ot-guide__past summary { cursor: pointer; color: var(--hub-dark); font-weight: 600; }
.ot-guide__past ol { padding-left:var(--ot-sp-20,20px); }
.ot-guide__past li { margin: 10px 0; }
.ot-guide__answer { display: block; color: var(--muted); }

.ot-guide__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.ot-guide__q legend { display: block; float: left; width: 100%; padding: 0; margin: 0 0 12px; }
.ot-guide__q legend + * { clear: both; }
.ot-guide__qtitle { display: block; margin-bottom: 8px; font-size:var(--ot-fs-small,15px); font-weight: 700; color: var(--hub-dark);line-height:var(--ot-lh-small,1.5) }
.ot-guide__prompt { display: block; font-size:var(--ot-fs-h3,20px); line-height:var(--ot-lh-h3,1.3); font-weight: 600; color: var(--ink); }
.ot-guide__poles { display: grid; gap:var(--ot-sp-12,12px); margin: 4px 0 16px; }
.ot-guide__poles p { margin: 0; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 12px; background: var(--tint); line-height: 1.5; }
.ot-guide__pole { display: inline-block; margin-right: 6px; font-size:var(--ot-fs-caption,14px); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__hint { margin: 0 0 14px; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-guide__error { margin: 0 0 14px; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 10px; background: #fbeceb; color: #7a2620; font-weight: 600; }
.ot-guide__options { display: grid; gap:var(--ot-sp-12,12px); }

.ot-option { position: relative; display: flex; gap:var(--ot-sp-16,16px); align-items: flex-start; padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); border: 1.5px solid var(--line); border-radius: 14px; background: #ffffff; cursor: pointer; line-height: 1.5; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.ot-option:hover { border-color: var(--edge); }
.ot-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ot-option__mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--edge); border-radius: 7px; background: #ffffff; display: grid; place-items: center; transition: all 160ms ease; }
.ot-guide[data-kind="scale"] .ot-option__mark { border-radius: 50%; }
.ot-option input:checked ~ .ot-option__mark { background: var(--hub-dark); border-color: var(--hub-dark); }
.ot-option input:checked ~ .ot-option__mark::after { content: ""; width: 10px; height: 6px; border: 2px solid #ffffff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ot-option:has(input:checked) { border-color: var(--hub-dark); background: var(--tint); box-shadow: 0 6px 16px -12px var(--hub-dark); }
.ot-option:has(input:focus-visible) { outline: 3px solid var(--hub-mid); outline-offset: 2px; }
.ot-option--none { margin-top: 8px; border-style: dashed; color: var(--muted); }
.ot-option.is-capped { opacity: .5; }
.ot-option.is-refused { animation: ot-shake 300ms ease; }
@keyframes ot-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.ot-guide__nav { display: flex; justify-content: space-between; align-items: center; gap:var(--ot-sp-12,12px); margin-top: 28px; }
.ot-guide__later { margin: 16px 0 0; text-align: center; }
.ot-link, button.ot-link { background: none; border: 0; padding:var(--ot-sp-4,4px); font: inherit; color: var(--hub-dark); text-decoration: underline; cursor: pointer; }
.ot-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.ot-review { list-style: none; margin: 20px 0 0; padding: 0; }
.ot-review__item { display: flex; justify-content: space-between; align-items: flex-start; gap:var(--ot-sp-16,16px); padding:var(--ot-sp-16,16px) 0; border-top: 1px solid var(--line); }
.ot-review__q { margin: 0 0 4px; font-weight: 600; }
.ot-review__n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--tint-strong); color: var(--hub-dark); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-review__a { margin: 2px 0 0 30px; color: var(--muted); line-height: 1.45; }
.ot-review__a--missing { color: #9b2c22; font-weight: 600; }
.ot-review__item.is-missing { background: #fff8f7; }

/* Preparation */
.ot-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap:var(--ot-sp-12,12px); }
.ot-steps__item { display: flex; gap:var(--ot-sp-16,16px); align-items: center; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 14px; border: 1px solid var(--line); }
.ot-steps__item.is-done { background: var(--tint); border-color: var(--edge); }
.ot-steps__mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint-strong); color: var(--hub-dark); font-weight: 700; }
.ot-steps__item.is-done .ot-steps__mark { background: var(--hub-dark); color: #ffffff; }
.ot-steps__line { display: block; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-prep__included { margin: 12px 0 0; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 12px; background: var(--tint); color: var(--ink); font-size:var(--ot-fs-caption,14px); line-height:var(--ot-lh-caption,1.45); }
.ot-reuse { width: 100%; padding:var(--ot-sp-16,16px); border-radius: 14px; background: var(--tint); }
.ot-reuse form { display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); margin-top: 10px; }
.ot-prep-banner { display: flex; justify-content: space-between; align-items: center; gap:var(--ot-sp-20,20px); border-left: 4px solid var(--hub-dark); }

/* Complete Your Profile */
.ot-cprofile__head { display: flex; justify-content: space-between; align-items: center; gap:var(--ot-sp-16,16px); }
.ot-cprofile__score .ot-progress__ring { width: 72px; height: 72px; }
.ot-cprofile__score .ot-progress__ring span { width: 56px; height: 56px; font-size:var(--ot-fs-body,17px); font-weight: 700;line-height:var(--ot-lh-body,1.65) }
.ot-cprofile__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap:var(--ot-sp-12,12px); }
.ot-cprofile__row { display: grid; grid-template-columns: auto 1fr auto; gap:var(--ot-sp-16,16px); align-items: center; padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); border: 1px solid var(--line); border-radius: 16px; background: #ffffff; }
.ot-cprofile__row[data-state="complete"] { background: var(--tint); border-color: var(--edge); }
.ot-cprofile__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tint-strong); color: var(--hub-dark); }
.ot-cprofile__row[data-state="complete"] .ot-cprofile__icon { background: var(--hub-dark); color: #ffffff; }
.ot-cprofile__title { margin: 0; font-size:var(--ot-fs-body,17px); display: flex; flex-wrap: wrap; align-items: center; gap:var(--ot-sp-8,8px);line-height:var(--ot-lh-body,1.65) }
.ot-cprofile__meta { margin: 2px 0 0; font-size:var(--ot-fs-caption,14px); color: var(--muted);line-height:var(--ot-lh-caption,1.45) }
.ot-cprofile__line { margin: 6px 0 0; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-cprofile__bar { display: block; height: 5px; margin-top: 8px; max-width: 260px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ot-cprofile__bar > span { display: block; height: 100%; background: var(--hub-dark); }
.ot-cprofile__title .ot-chip { padding:2px var(--ot-sp-12,12px); font-size:var(--ot-fs-caption,14px); font-weight: 600; backdrop-filter: none;line-height:var(--ot-lh-caption,1.45) }
.ot-chip--complete { background: var(--hub-dark); border-color: var(--hub-dark); color: #ffffff !important; }
.ot-chip--in_progress { background: #fff6e0; border-color: #f0d48a; color: #7a5a12 !important; }
.ot-chip--not_started { color: var(--muted) !important; border-color: var(--line); }

@media (max-width: 600px) {
	.ot-guide { padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px) var(--ot-sp-48,48px); }
	.ot-guide__card { border-radius: 16px; padding:var(--ot-sp-20,20px) var(--ot-sp-16,16px); }
	.ot-option { padding:var(--ot-sp-16,16px); }
	.ot-guide__nav { position: sticky; bottom: 0; z-index: 2; margin: 20px -16px 0; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
	.ot-guide__later { margin-top: 12px; }
	.ot-guide__nav .ot-btn { width: auto; }
	.ot-guide__nav .ot-btn--big { flex: 1; justify-content: center; padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); }
	.ot-cprofile__row { grid-template-columns: auto 1fr; }
	.ot-cprofile__cta { grid-column: 1 / -1; justify-content: center; }
	.ot-prep-banner { flex-direction: column; align-items: stretch; }
	.ot-review__item { flex-direction: column; gap:var(--ot-sp-8,8px); }
}
@media (prefers-reduced-motion: reduce) {
	.ot-guide__meter > span, .ot-option, .ot-option__mark { transition: none; }
	.ot-guide__save[data-state="saving"]::before, .ot-option.is-refused { animation: none; }
}

/* Keep Hub buttons ours whatever the theme's global button styles are. */
.ot-hub button.ot-btn, .ot-hub a.ot-btn { background: var(--hub-dark) !important; color: #ffffff !important; border: 1.5px solid var(--hub-dark) !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: normal !important; font-family: inherit !important; }
.ot-hub button.ot-btn--quiet, .ot-hub a.ot-btn--quiet { background: #ffffff !important; color: var(--hub-dark) !important; }
.ot-hub button.ot-link { background: none !important; border: 0 !important; color: var(--hub-dark) !important; padding:var(--ot-sp-4,4px) !important; font: inherit !important; text-decoration: underline !important; box-shadow: none !important; }
.ot-hub button.ot-btn:focus-visible, .ot-hub button.ot-link:focus-visible { outline: 3px solid var(--hub-mid) !important; outline-offset: 2px; }

/* ─── Report offer (2.4.0): purchase, personalization, generation, reading ─── */
.ot-offer__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap:var(--ot-sp-12,12px); }
.ot-offer__facts { display: flex; flex-wrap: wrap; gap:var(--ot-sp-8,8px) var(--ot-sp-32,32px); margin: 14px 0 6px; }
.ot-offer__facts div { display: flex; gap:var(--ot-sp-8,8px); align-items: baseline; }
.ot-offer__facts dt { font-size:var(--ot-fs-caption,14px); letter-spacing: .14em; text-transform: uppercase; color: var(--hub-dark);line-height:var(--ot-lh-caption,1.45) }
.ot-offer__facts dd { margin: 0; font-weight: 600; }
.ot-offer__actions { display: flex; flex-wrap: wrap; gap:var(--ot-sp-12,12px); margin-top: 16px; width: 100%; }
.ot-offer__actions .ot-btn, .ot-offer__form .ot-btn { min-height: 48px; }
.ot-offer__form { margin: 0; }
.ot-offer__note { margin-top: 12px; }
.ot-offer[data-state="ready"] .ot-status { background: #e3f2e8; color: #1f5a37; }
.ot-offer[data-state="unavailable"] .ot-status, .ot-offer[data-state="refunded"] .ot-status { background: #fbeee0; color: #7a4a14; }
.ot-admin-preview { border-style: dashed; }
.ot-preview-banner { padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px); background: #fff7e0; border-bottom: 1px solid #e6d29a; color: #5b4713; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }

/* 2.5.0: what the report includes and what it takes, on the purchase card. */
.ot-offer__gets { margin: 10px 0 6px; padding-left: 1.2em; display: grid; gap:var(--ot-sp-4,4px); }
.ot-offer__gets li { line-height: 1.45; }
.ot-offer__how { margin-top: 6px; }

/* ─── Checkout v3: sidebar sub-links, Reports shop, Your reports ─── */
.ot-side__link--sub { padding-left:var(--ot-sp-48,48px); font-size:var(--ot-fs-caption,14px); min-height: 0;line-height:var(--ot-lh-caption,1.45) }
@media (max-width: 1023px) { .ot-side__link--sub { display: none; } }

.ot-shop-page__wrap { max-width: 1120px; margin: 0 auto; }
.ot-shop__head { margin-bottom: 24px; }
.ot-shop__title { font-size:var(--ot-fs-display,48px); line-height:var(--ot-lh-display,1.06); margin: 4px 0 10px; }
.ot-shop__lead { max-width: 46em; font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-shop__group { margin: 0 0 28px; }
.ot-shop__group-title { font-size:var(--ot-fs-h3,20px); margin: 0 0 14px;line-height:var(--ot-lh-h3,1.3) }
.ot-shop__grid { display: grid; gap:var(--ot-sp-20,20px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .ot-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ot-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ot-shop-card { display: flex; flex-direction: column; gap:var(--ot-sp-12,12px); margin: 0; scroll-margin-top: 24px; }
.ot-shop-card.is-focus { box-shadow: 0 0 0 3px var(--hub-mid); }
.ot-shop-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap:var(--ot-sp-8,8px) var(--ot-sp-12,12px); }
.ot-hub .ot-shop-card__title { margin: 0; font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3) }
.ot-shop-card__price { margin: 0 !important; display: flex; align-items: baseline; gap:var(--ot-sp-8,8px); }
.ot-shop-card__amount { font-size:var(--ot-fs-h3,20px); color: var(--hub-dark);line-height:var(--ot-lh-h3,1.3) }
.ot-shop-card__save { padding:2px var(--ot-sp-12,12px); border-radius: 999px; background: #e3f2e8; color: #1f5a37; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-shop-card__text { color: var(--muted); }
.ot-shop-card__status { display: flex; align-items: center; gap:var(--ot-sp-8,8px); color: var(--muted); }
.ot-shop-card__form { display: grid; gap:var(--ot-sp-12,12px); margin-top: auto; }
.ot-shop-card__label { font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-shop-card[data-state="soon"] .ot-shop-card__amount,
.ot-shop-card[data-state="owned"] .ot-shop-card__amount { color: var(--muted); }
.ot-shop__foot { margin-top: 8px; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }

.ot-typegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:var(--ot-sp-8,8px); margin: 0; padding: 0; border: 0; min-width: 0; }
.ot-typegrid legend { grid-column: 1 / -1; padding: 0; margin-bottom: 6px; font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-typegrid__opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding:var(--ot-sp-8,8px) var(--ot-sp-4,4px); border: 1px solid var(--line); border-radius: 12px; background: #ffffff; cursor: pointer; text-align: center; }
.ot-typegrid__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ot-typegrid__opt:has(input:checked) { border-color: var(--hub-dark); background: var(--tint-strong); box-shadow: inset 0 0 0 1px var(--hub-dark); }
.ot-typegrid__opt:has(input:focus-visible) { outline: 3px solid #f2b84b; outline-offset: 2px; }
.ot-typegrid__opt[data-state="soon"],
.ot-typegrid__opt[data-state="owned"],
.ot-typegrid__opt:has(input:disabled) { cursor: not-allowed; background: #f4f5f8; color: var(--muted); }
.ot-typegrid__opt small { font-size:var(--ot-fs-caption,14px); line-height:var(--ot-lh-caption,1.45); }
.ot-typegrid__code { font-size:var(--ot-fs-caption,14px); letter-spacing: .03em;line-height:var(--ot-lh-caption,1.45) }
.ot-typegrid__opt--later { grid-column: span 2; }
@media (max-width: 380px) { .ot-typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ot-owned { margin: 4px 0 18px; }
.ot-owned__library { display: flex; align-items: center; gap:var(--ot-sp-8,8px); padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border-radius: 14px; background: #e3f2e8; color: #1f5a37; }
.ot-hub .ot-owned__title { margin: 14px 0 8px; font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-owned__list { list-style: none; margin: 0; padding: 0; display: grid; gap:var(--ot-sp-8,8px); }
.ot-owned__item { display: flex; flex-wrap: wrap; align-items: center; gap:var(--ot-sp-8,8px) var(--ot-sp-12,12px); padding:var(--ot-sp-12,12px) var(--ot-sp-12,12px); border: 1px solid var(--line); border-radius: 14px; background: #ffffff; }
.ot-owned__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--tint); }
.ot-owned__name { flex: 1 1 10em; }
.ot-owned__state { color: var(--muted); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-owned__item[data-state="ready"] .ot-owned__state { color: #1f5a37; }
.ot-owned__progress { flex: 1 1 100%; order: 9; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, #fff); overflow: hidden; }
.ot-owned__progress > span { display: block; height: 100%; border-radius: inherit; background: var(--hub-dark, #2c6e49); transition: width .6s ease; }
.ot-owned__item[data-state="ready"]:has(.ot-owned__progress) .ot-owned__state { color: var(--hub-dark, #1f5a37); font-weight: 600; }
@media (min-width: 700px) { .ot-credit > .ot-btn { width: auto; min-width: 240px; } }
.ot-owned__actions { display: flex; gap:var(--ot-sp-8,8px); }
.ot-credit { display: grid; gap:var(--ot-sp-12,12px); margin-top: 8px; padding:var(--ot-sp-16,16px); border: 1px dashed var(--edge); border-radius: 16px; background: var(--tint); }
.ot-owned__shop { margin: 12px 0 0; }

/* ─── 4.1.0: shop path overview, prepare route choice ─── */
.ot-paths { margin: 0 0 28px; padding:var(--ot-sp-20,20px); border: 1px solid var(--line); border-radius: 18px; background: var(--tint); }
.ot-hub .ot-paths__title { margin: 0 0 12px; font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65) }
.ot-paths__list { list-style: none; margin: 0; padding: 0; display: grid; gap:var(--ot-sp-8,8px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .ot-paths__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ot-paths__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ot-paths__link { display: grid; grid-template-columns: 1fr auto; gap:2px var(--ot-sp-12,12px); min-height: 44px; padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px); border: 1px solid var(--line); border-radius: 14px; background: #ffffff; color: inherit; text-decoration: none; }
.ot-paths__link:hover { border-color: var(--hub-mid); }
.ot-paths__link:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; }
.ot-paths__name { font-weight: 600; color: var(--hub-dark); }
.ot-paths__for { grid-column: 1; color: var(--muted); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-paths__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size:var(--ot-fs-body,17px); color: var(--hub-dark);line-height:var(--ot-lh-body,1.65) }
.ot-paths__price small { display: block; font-size:var(--ot-fs-caption,14px); color: #1f5a37;line-height:var(--ot-lh-caption,1.45) }
.ot-paths__item[data-state="soon"] .ot-paths__price,
.ot-paths__item[data-state="owned"] .ot-paths__price { color: var(--muted); }

.ot-routes { display: grid; gap:var(--ot-sp-12,12px); width: 100%; }
@media (min-width: 720px) { .ot-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-routes__opt { display: flex; flex-direction: column; gap:var(--ot-sp-8,8px); padding:var(--ot-sp-16,16px); border: 1px solid var(--line); border-radius: 16px; background: #ffffff; }
.ot-hub .ot-routes__name { margin: 0; font-weight: 600; color: var(--hub-dark); }
.ot-hub .ot-routes__line { margin: 0 0 4px; color: var(--muted); font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45) }
.ot-routes__opt .ot-btn { margin-top: auto; justify-content: center; text-align: center; }
.ot-shop__soon { margin:8px 0 20px; padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px); border:1px dashed var(--edge, #d3c8bc); border-radius:16px; background:#fcfbf8; } .ot-shop__soon p:last-child { margin:0; color:var(--muted); }

/* Visual-preview shop card art; no change to prices or cart behaviour. */
.ot-shop-card .otpv-shop-art{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:8px 0 14px;min-height:150px;border-radius:15px;background:linear-gradient(135deg,#fdf6ef,#eaf2ed)}
.ot-shop-card .otpv-shop-art img{width:100%;max-width:300px;height:150px;object-fit:cover;object-position:center}
.ot-shop-card .otpv-shop-art span{position:absolute;bottom:8px;left:8px;padding:var(--ot-sp-4,4px) var(--ot-sp-8,8px);border-radius:7px;background:#fffc;color:#424050;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}

/* 4.6.0 A2: sample-page viewer (assets/hub.js). */
.ot-viewer-open, .ot-viewer-open body { overflow: hidden; }
.ot-viewer { position: fixed; inset: 0; z-index: 100000; background: #0e141b; display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
.ot-viewer[hidden] { display: none; }
.ot-viewer__bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.ot-viewer__count { margin: 0 auto 0 0; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
.ot-viewer__btn, .ot-viewer__nav { min-height: 44px; min-width: 44px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; border-radius: 8px; padding: 0 .9rem; font: inherit; cursor: pointer; }
.ot-viewer__btn:focus-visible, .ot-viewer__nav:focus-visible { outline: 3px solid #8fd3e2; outline-offset: 2px; }
.ot-viewer__stage { overflow: auto; display: flex; align-items: center; justify-content: center; padding: 0 3.75rem; min-height: 0; }
.ot-viewer__img { max-width: 100%; max-height: 100%; height: auto; width: auto; background: #fff; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.4); cursor: zoom-in; }
.ot-viewer.is-zoomed .ot-viewer__stage { display: block; text-align: center; }
.ot-viewer.is-zoomed .ot-viewer__img { max-width: none; max-height: none; width: min(1040px, 200%); cursor: zoom-out; }
.ot-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size:var(--ot-fs-h2,28px); line-height: 1; padding: 0; width: 44px; }
.ot-viewer__nav--prev { left: .5rem; } .ot-viewer__nav--next { right: .5rem; }
.ot-viewer__nav:disabled { opacity: .3; cursor: default; }
.ot-viewer__cap { margin: 0; padding: .75rem 1rem 1rem; text-align: center; font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5) }
@media (max-width: 600px) { .ot-viewer__stage { padding: 0 .5rem; } .ot-viewer__nav { top: auto; bottom: .6rem; transform: none; } .ot-viewer__cap { padding: .75rem 3.5rem 1rem; } }

/* ═══ 4.7.1 checkout: step indicator (Choose, Review, Pay, Ready) and the Review step. Mobile first. ═══ */
.ot-hub .ot-steps,body.ontype-report-checkout .ot-steps{list-style:none;margin:0 0 var(--ot-sp-24,24px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-8,var(--ot-sp-8,8px));counter-reset:none}
.ot-hub .ot-steps__item,body.ontype-report-checkout .ot-steps__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--ot-sp-6,6px);text-align:center;color:#56645a;font-size:var(--ot-fs-caption,14px);line-height:1.3;font-weight:600}
.ot-hub .ot-steps__item:not(:last-child)::after,body.ontype-report-checkout .ot-steps__item:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:#d9e1d4}
.ot-hub .ot-steps__item.is-done::after,body.ontype-report-checkout .ot-steps__item.is-done::after{background:var(--hub-dark,#4c6a2e)}
.ot-hub .ot-steps__dot,body.ontype-report-checkout .ot-steps__dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid #cbd6c5;background:#fff;color:#56645a;font-size:var(--ot-fs-caption,14px);line-height:1}
.ot-hub .ot-steps__item.is-done .ot-steps__dot,body.ontype-report-checkout .ot-steps__item.is-done .ot-steps__dot{background:var(--hub-dark,#4c6a2e);border-color:var(--hub-dark,#4c6a2e);color:#fff}
.ot-hub .ot-steps__item.is-current,body.ontype-report-checkout .ot-steps__item.is-current{color:#1f2d23}
.ot-hub .ot-steps__item.is-current .ot-steps__dot,body.ontype-report-checkout .ot-steps__item.is-current .ot-steps__dot{border-color:var(--hub-dark,#4c6a2e);color:var(--hub-dark,#4c6a2e);box-shadow:0 0 0 4px color-mix(in srgb,var(--hub-dark,#4c6a2e) 16%,transparent)}
.ot-hub .ot-shop__head .ot-steps{max-width:520px}
.ot-review-page .ot-shop-page__wrap{max-width:1120px;margin:0 auto;padding:var(--ot-sp-24,var(--ot-sp-24,24px)) var(--ot-sp-16,var(--ot-sp-16,16px)) var(--ot-sp-48,var(--ot-sp-48,48px))}
.ot-hub .ot-review .ot-steps{max-width:560px}
.ot-hub .ot-review__head h1{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12);margin:0 0 var(--ot-sp-8,8px);color:#203126}
.ot-hub .ot-review__head{margin:0 0 var(--ot-sp-24,24px)}
.ot-hub .ot-review__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ot-sp-24,var(--ot-sp-24,24px))}
.ot-hub .ot-review__product{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ot-sp-20,var(--ot-sp-20,20px));padding:var(--ot-card-pad,var(--ot-sp-24,24px));border-radius:var(--ot-card-radius,20px);background:linear-gradient(140deg,color-mix(in srgb,var(--hub-light) 22%,#fff),#fff 70%);border:1px solid color-mix(in srgb,var(--hub-dark) 14%,#fff)}
.ot-hub .ot-review__cover{justify-self:center;width:min(100%,220px)}
.ot-hub .ot-review__cover img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 18px 34px -20px rgba(31,45,35,.55)}
.ot-hub .ot-review__about h2{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);margin:0 0 var(--ot-sp-8,8px);color:#203126}
.ot-hub .ot-review__about p{margin:0 0 var(--ot-sp-12,12px);color:#3d4b41}
.ot-hub .ot-review__included{list-style:none;margin:0;padding:0;display:grid;gap:var(--ot-sp-8,var(--ot-sp-8,8px))}
.ot-hub .ot-review__included li{position:relative;padding-left:28px;color:#26382c;font-weight:550}
.ot-hub .ot-review__included li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:var(--ot-fs-caption,12px);background:var(--hub-dark);color:#fff}
.ot-hub .ot-review__summary{padding:var(--ot-card-pad,var(--ot-sp-24,24px));border-radius:var(--ot-card-radius,20px);border:1px solid #dfe6da;background:#fff;box-shadow:0 12px 30px -26px rgba(31,45,35,.5);display:grid;gap:var(--ot-sp-16,var(--ot-sp-16,16px));align-content:start}
.ot-hub .ot-review__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ot-sp-8,var(--ot-sp-8,8px))}
.ot-hub .ot-review__amount{font-size:var(--ot-fs-display,40px);line-height:1;font-weight:700;color:#1f2d23}
.ot-hub .ot-review__currency{font-weight:700;color:#4c5a50}
.ot-hub .ot-review__status{margin:0;font-weight:600;color:#26382c}
.ot-hub .ot-review__form{display:grid;gap:var(--ot-sp-12,var(--ot-sp-12,12px))}
.ot-hub .ot-review__form .ot-btn{width:100%;justify-content:center}
.ot-hub .ot-review__types{margin:0}
.ot-hub .ot-review__count{margin:var(--ot-sp-8,8px) 0 0;grid-column:1/-1}
.ot-hub .ot-review .ot-trust-panel{margin:0;padding-top:var(--ot-sp-16,16px);border-top:1px solid #e4eadf}
@media(min-width:700px){.ot-hub .ot-review__product{grid-template-columns:200px minmax(0,1fr);align-items:start}.ot-hub .ot-review__cover{width:200px}}
@media(min-width:1000px){.ot-hub .ot-review__grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);align-items:start}.ot-hub .ot-review__summary{position:sticky;top:var(--ot-sp-24,24px)}}
@media(max-width:420px){.ot-hub .ot-steps__label,body.ontype-report-checkout .ot-steps__label{font-size:var(--ot-fs-caption,13px)}}
.ot-hub .ot-steps>.ot-steps__item,body.ontype-report-checkout .ot-steps>.ot-steps__item{border:0;background:none;box-shadow:none;padding:0;margin:0;min-height:0}
/* 4.7.1 Review: bundle art keeps to its column (it was drawn for the wider shop card). */
.ot-hub .ot-review__cover:not(:has(>img)){width:100%;max-width:420px;overflow:hidden;border-radius:16px}
@media(min-width:700px){.ot-hub .ot-review__product:has(.ot-review__cover:not(:has(>img))){grid-template-columns:minmax(0,1fr)}}

/* 4.8.1: report covers are 612x735 artwork (title block at the left edge). Several cover slots forced 2:3 with
   object-fit:cover, which cut the "I" of the type and the start of the name at every width. Show the whole cover. */
.ot-hub img[src*="/report-covers/"][src],.ot-report-checkout img[src*="/report-covers/"][src]{aspect-ratio:612/735;object-fit:cover;object-position:left center;height:auto}

/* 4.8.3: personalized quiz complete, before purchase. */
.ot-quiz-upgrade__preview { margin: 24px 0 0; padding: var(--ot-sp-20,20px); border-radius: 14px; background: var(--hub-light, #eef4f1); }
.ot-quiz-upgrade__preview h2 { margin: 0 0 12px; font-size:var(--ot-fs-h3,20px); line-height: var(--ot-lh-h3,1.3); }
.ot-quiz-upgrade__preview ul { margin: 0; padding: 0; list-style: none; display: grid; gap:var(--ot-sp-12,12px); }
.ot-quiz-upgrade__preview li { background: #fff; border-radius: 10px; padding: var(--ot-sp-12,12px) var(--ot-sp-16,16px); line-height: 1.5; }
.ot-quiz-upgrade__preview li strong { display: block; color: var(--hub-dark); }
.ot-quiz-upgrade__preview li span { display: block; margin-top: 4px; color: var(--ink); }
.ot-quiz-upgrade__buy { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.ot-quiz-upgrade__price { display: flex; flex-wrap: wrap; align-items: baseline; gap:var(--ot-sp-4,4px) var(--ot-sp-12,12px); margin: 0 0 12px; line-height: 1.5; }
.ot-quiz-upgrade__price span { font-weight: 700; }
.ot-quiz-upgrade__price strong { font-size:var(--ot-fs-h3,20px); color: var(--hub-dark); }
.ot-quiz-upgrade__price small { color: var(--muted, #5c6670); font-size:var(--ot-fs-caption,14px); }
.ot-quiz-upgrade .ot-guide__actions form { display: inline; margin: 0; }
.ot-quiz-upgrade__back { margin: 20px 0 0; line-height: 1.5; }
.ot-quiz-signin .ot-form { margin-top: 20px; max-width: 480px; }

/* 4.8.3: the free quiz in the browser, the Hub meter headline, the Review type choice and the guest Ready note. */
.ot-gquiz__meter{margin:0 0 var(--ot-sp-12)}
.ot-gquiz__headline{margin:0 0 var(--ot-sp-4);font-weight:800;color:var(--hub-dark)}
.ot-gquiz__bar,.ot-rd-setup__meter{display:block;height:8px;border-radius:999px;background:var(--hub-light,#e8f2ee);overflow:hidden}
.ot-gquiz__bar span,.ot-rd-setup__meter span{display:block;height:100%;background:var(--hub-dark);border-radius:inherit;transition:width .3s ease}
.ot-rd-setup__meter{width:160px;margin-top:6px}
.ot-gquiz__progress{height:4px;background:#eef3f1;border-radius:999px;margin:0 0 var(--ot-sp-12);overflow:hidden}
.ot-gquiz__progress span{display:block;height:100%;background:var(--hub-mid)}
.ot-gquiz__ab{display:grid;gap:var(--ot-sp-8);margin:var(--ot-sp-12) 0}
.ot-gquiz__ab p{margin:0;padding:var(--ot-sp-8) var(--ot-sp-12);border-radius:12px;background:#f6f9f8;border:1px solid #e1ebe7}
.ot-gquiz__ab strong{display:block;font-size:var(--ot-fs-caption);color:var(--hub-dark)}
.ot-gquiz__scale{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ot-sp-8);margin:var(--ot-sp-12) 0}
.ot-gquiz__opt{min-height:52px;padding:var(--ot-sp-8) var(--ot-sp-4);border:1px solid #cfdcd7;border-radius:12px;background:#fff;color:#23414c;font:inherit;font-size:var(--ot-fs-small);font-weight:700;cursor:pointer}
.ot-gquiz__opt:hover,.ot-gquiz__opt:focus-visible{border-color:var(--hub-dark);outline:2px solid transparent}
.ot-gquiz__opt:focus-visible{box-shadow:0 0 0 3px rgba(47,93,80,.3)}
.ot-gquiz__opt[aria-pressed="true"]{background:var(--hub-dark);border-color:var(--hub-dark);color:#fff}
.ot-gquiz__multi{border:0;padding:0;margin:var(--ot-sp-12) 0;display:grid;gap:var(--ot-sp-8)}
.ot-gquiz__check{display:flex;gap:var(--ot-sp-8);align-items:flex-start;padding:var(--ot-sp-8) var(--ot-sp-12);border:1px solid #d9e5e1;border-radius:12px;background:#fff;cursor:pointer}
.ot-gquiz__check input{margin-top:4px;width:18px;height:18px;flex:none}
.ot-gquiz__kicker{margin:0 0 var(--ot-sp-4);font-weight:800;color:var(--hub-mid);font-size:var(--ot-fs-caption);text-transform:uppercase;letter-spacing:.04em}
.ot-gquiz__prompt{font-size:var(--ot-fs-h2);line-height:1.35}
.ot-gquiz__foot{display:flex;justify-content:space-between;gap:var(--ot-sp-8);flex-wrap:wrap}
.ot-gquiz__preview{margin:var(--ot-sp-16) 0;padding:var(--ot-sp-12) var(--ot-sp-16);border-radius:14px;background:var(--hub-light,#e8f2ee);border-left:4px solid var(--hub-dark)}
.ot-gquiz__preview h2{margin:0 0 var(--ot-sp-4);font-size:var(--ot-fs-h3)}
.ot-gquiz__price{margin:var(--ot-sp-16) 0;padding:var(--ot-sp-12) var(--ot-sp-16);border:1px solid #d9e5e1;border-radius:14px}
.ot-gquiz__price p{margin:0 0 var(--ot-sp-4)}
.ot-gquiz__amount{font-weight:800;color:var(--hub-dark);margin-left:6px}
.ot-gquiz__save{margin-top:16px;padding:var(--ot-sp-12) var(--ot-sp-16);border:1px dashed #c9d8d2;border-radius:14px;background:#fff}
.ot-gquiz__save summary{cursor:pointer;font-weight:700}
.ot-type-choice{display:grid;gap:var(--ot-sp-12);padding:var(--ot-sp-16);border-radius:14px;background:#f4f7f5;border:1px solid #dfe8e3;border-left:4px solid var(--hub-dark)}
.ot-type-choice h3{margin:0;font-size:var(--ot-fs-h3)}
.ot-type-choice p{margin:0}
.ot-type-choice__opt{display:grid;gap:var(--ot-sp-8);padding:var(--ot-sp-12);border-radius:12px;background:#fff}
.ot-type-choice__confirm{display:flex;gap:var(--ot-sp-8);align-items:flex-start;font-size:var(--ot-fs-small)}
.ot-type-choice__confirm input{margin-top:3px;width:18px;height:18px;flex:none}
.ot-guest-ready{margin:var(--ot-sp-16) 0;padding:var(--ot-sp-16) var(--ot-sp-16);border-radius:14px;background:#f1f6f4;border:1px solid #d6e4de}
.ot-guest-ready h2{margin:0 0 var(--ot-sp-4);font-size:var(--ot-fs-h3)}
@media(max-width:560px){.ot-gquiz__scale{grid-template-columns:1fr}.ot-gquiz__opt{min-height:44px;text-align:left;padding:var(--ot-sp-8) var(--ot-sp-12)}.ot-gquiz__prompt{font-size:var(--ot-fs-h3)}}
@media(prefers-reduced-motion:reduce){.ot-gquiz__bar span,.ot-rd-setup__meter span{transition:none}}
/* 4.8.7: the newest issued report stands out in Your reports. */
.ot-tag--new { background: var(--hub-dark, #23697A); color: #fff; margin-right: 6px; font-weight: 600; }
.ot-issued--new { box-shadow: 0 0 0 2px var(--hub-mid, #409CAF); border-radius: 14px; }
.ot-saved-note { margin: 0 0 14px; padding: var(--ot-sp-12) var(--ot-sp-16); border-radius: 14px; background: #f1f6ea; border: 1px solid #d5e3c5; color: #22311a; font-size:var(--ot-fs-body); line-height: 1.5; }
.ot-saved-note .ot-link { font-size:var(--ot-fs-caption); margin-left: 4px; white-space: nowrap; }
/* 4.8.8: the type choice and the short route's type field on the preparation page. */
.ot-type-choice__title{margin:0 0 8px;font-size:var(--ot-fs-h3,21px)}
.ot-routes__label{display:block;font-weight:600;margin:8px 0 4px}
.ot-routes__opt select{display:block;width:100%;max-width:280px;min-height:44px;margin:0 0 12px;padding:var(--ot-sp-8,8px) var(--ot-sp-10,10px);border-radius:8px;border:1px solid #c9ced8;font-size:var(--ot-fs-body,16px);background:#fff}
.ot-routes__opt button{cursor:pointer}