/* Offer pages (scripts/landing/offer-pages/): The First 1,000. On top of the
   module pages' frame (modules.css, scenes.css): the same tokens, type and
   buttons. Lime stays a signal (buttons, the live dot, small tags), never a
   surface; the price card and the full bundle are the dark ones. */

/* ── The top: the offer as a slide, filling the shared screen ── */
.of-hero {
	padding-top: 48px;
}
@media (min-width: 981px) {
	.of-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh - 72px);
		padding: 32px 0 48px;
	}
	/* The kicker centred over both columns, like a slide's title. */
	.of-kicker {
		display: flex;
		width: fit-content;
		margin-inline: auto;
	}
}
/* A short laptop screen (1366×650): the whole top still fits. */
@media (min-width: 981px) and (max-height: 760px) {
	.of-hero {
		padding: 16px 0 24px;
	}
	.of-kicker {
		margin-bottom: 18px;
	}
	.of-hero h1 {
		font-size: clamp(42px, 4.4vw, 62px);
	}
	.of-hero-grid {
		row-gap: 18px;
	}
	.of-hero .mp-lede {
		font-size: 17px;
	}
}
/* Firsty going down the page (firsty.js): the app's orb in its ceramic
   shell, a short line beside him at each stop. Desktop only. */
.of-page {
	position: relative;
}
.of-firsty {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 58px;
	height: 58px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--ease);
}
.of-firsty.is-in {
	opacity: 1;
}
.of-firsty-bob {
	display: block;
}
.of-firsty.is-here .of-firsty-bob {
	animation: of-firsty-bob 3.2s ease-in-out infinite;
}
.of-firsty .firsty-orb {
	display: inline-flex;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(180deg, #fff, #e9eaee 60%, #d6d8de);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.9),
		inset 0 -2px 5px rgb(20 20 30 / 0.14),
		0 1px 2px rgb(20 20 30 / 0.18),
		0 18px 44px rgb(30 30 60 / 0.24);
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.25s var(--ease);
}
.of-firsty canvas {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: radial-gradient(115% 95% at 50% 8%, #20241a 0%, #0c0e08 45%, #050603 100%);
	box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.9);
}
.of-firsty-say {
	position: absolute;
	padding: 8px 13px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 28px -14px rgb(20 20 30 / 0.35);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	scale: 0.92;
	transition:
		opacity 0.25s var(--ease),
		scale 0.25s var(--ease);
}
.of-firsty.is-saying .of-firsty-say {
	opacity: 1;
	scale: 1;
}
.of-firsty-say[data-side="right"] {
	top: 50%;
	left: calc(100% + 10px);
	translate: 0 -50%;
	transform-origin: left center;
}
.of-firsty-say[data-side="left"] {
	top: 50%;
	right: calc(100% + 10px);
	translate: 0 -50%;
	transform-origin: right center;
}
.of-firsty-say[data-side="top"] {
	bottom: calc(100% + 10px);
	left: 50%;
	translate: -50% 0;
	transform-origin: center bottom;
}
.of-firsty-say[data-side="below"] {
	top: calc(100% + 10px);
	right: 0;
	transform-origin: right top;
}
@keyframes of-firsty-bob {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -6px;
	}
}
@media (max-width: 980px) {
	.of-firsty {
		display: none;
	}
}
.of-kicker {
	gap: 12px;
	margin-bottom: 30px;
	padding: 10px 20px 10px 16px;
	border-radius: 999px;
	background: var(--paper);
	font-size: clamp(16px, 1.4vw, 20px);
}
.of-kicker .sep {
	color: var(--faint);
}
.of-kicker-date {
	display: inline-flex;
	gap: 12px;
}
.of-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	/* The title, lede and actions centred beside the card. */
	grid-template-rows: 1fr auto auto auto 1fr;
	grid-template-areas:
		". deal"
		"title deal"
		"lede deal"
		"actions deal"
		". deal";
	gap: 28px 64px;
	align-items: center;
}
.of-hero h1 {
	grid-area: title;
	font-size: clamp(46px, 4.6vw, 66px);
	letter-spacing: -0.062em;
}
/* Darker than the site's grey: it has to read on a shared screen. */
.of-hero h1 .grey {
	color: var(--muted);
	text-wrap: balance;
}
.of-hero .mp-lede {
	grid-area: lede;
	max-width: 560px;
}
/* The dark card: what the first 1,000 get, in three lines and no prices. */
.of-deal {
	grid-area: deal;
	display: flex;
	flex-direction: column;
	padding: 40px 40px 32px;
	border-radius: 32px;
	background: var(--dark);
	color: #fff;
}
.of-deal-label {
	color: #b4b4ba;
	font-size: 15px;
	font-weight: 500;
}
.of-agenda {
	display: grid;
	margin-top: 10px;
	list-style: none;
}
.of-agenda li {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid #2c2c31;
}
.of-agenda li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.of-agenda span {
	padding-top: 6px;
	color: #75757c;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.of-agenda b {
	display: block;
	margin-bottom: 6px;
	color: #fff;
	font-size: clamp(22px, 2.1vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.035em;
}
.of-agenda p {
	color: #b4b4ba;
	font-size: 15px;
	line-height: 1.5;
}
/* The next step and the time left sit under the lede, on every screen. */
.of-hero-actions {
	grid-area: actions;
	align-self: start;
}
.of-count {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	color: var(--muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.of-count.is-soon {
	color: var(--ink);
	font-weight: 600;
}
.mp-cta-box .of-count.is-soon {
	color: #fff;
}
.of-live {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 0 0 rgb(226 255 82 / 0.6);
	animation: of-pulse 2s var(--ease) infinite;
}
@keyframes of-pulse {
	70% {
		box-shadow: 0 0 0 9px rgb(226 255 82 / 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(226 255 82 / 0);
	}
}
.of-closed {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 500;
}
/* After the deadline (offer.js) nothing on the page sells. */
.of-page[data-state="closed"] .of-buy,
.of-page[data-state="closed"] .of-live {
	display: none;
}

/* The site's scroll padding lands jumps below its header; the jump to the
   offers skips the section's own top padding, so the prices and the buy
   buttons come into view with the heading. */
#offers {
	scroll-margin-top: -40px;
}
/* The hero's next step: wide screens (the live story) and phones. */
.of-narrow,
.of-jump {
	display: none !important;
}
.button.outline {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}
.button.outline:hover {
	background: var(--paper);
}

/* ── Small tags: lime as a mark ── */
.of-tag {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--lime);
	color: var(--lime-ink);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}
/* A plain fact (bundle content, team places): a hairline, not lime. */
.of-tag.is-quiet {
	background: none;
	color: var(--muted);
	box-shadow: inset 0 0 0 1px var(--line);
}

/* ── What one seat gets: the modules as tabs beside the real product ── */
.of-tour {
	display: grid;
	grid-template-columns: minmax(0, 0.37fr) minmax(0, 0.63fr);
	gap: 28px;
	align-items: start;
}
.of-tour-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.of-tour-tab {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border-radius: 16px;
	text-align: left;
	transition: background 0.2s;
}
.of-tour-tab {
	position: relative;
	overflow: hidden;
}
.of-tour-tab:hover {
	background: rgb(0 0 0 / 0.03);
}
.of-tour-tab[aria-selected="true"] {
	background: var(--paper);
}
/* While the tour moves on by itself, the selected tab fills in 7 s. */
.of-tour.is-auto .of-tour-tab.is-ticking::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 0;
	left: 16px;
	height: 2px;
	background: var(--ink);
	transform-origin: left;
	animation: of-tick 7s linear forwards;
}
@keyframes of-tick {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.of-tour-name {
	display: flex;
	align-items: center;
	gap: 12px;
}
.of-tour-name b {
	color: var(--ink-2);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.of-tour-tab[aria-selected="true"] .of-tour-name b {
	color: var(--ink);
}
.of-tour-name .ix-mod-i {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.of-tour-name .of-tag {
	margin-left: auto;
	font-size: 10.5px;
}
.of-jump svg {
	width: 14px;
	height: 14px;
}
/* The selected module's line opens under its name. */
.of-tour-text {
	display: none;
	min-height: var(--of-tour-text, 0);
	margin-top: 8px;
	padding-left: 36px;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.5;
}
.of-tour-tab[aria-selected="true"] .of-tour-text {
	display: block;
}
/* Desktop: the list and the screen stand the same height; the screen keeps
   16:9 where the list fits beside it and grows with the list where it
   doesn't (1280-1439px), the recording covering it from its left edge, where
   each page has its title. Narrower, the screen stays 16:9 beside a longer
   list. */
@media (min-width: 1280px) {
	.of-tour {
		grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
		align-items: stretch;
	}
	.of-tour-list {
		justify-content: space-between;
		gap: 2px;
	}
	.of-tour-tab {
		padding: 10px 16px;
	}
	/* Its width is the column's, never one derived from the list's height. */
	.of-tour-screen {
		width: 100%;
		min-width: 0;
	}
	.of-tour-pane:not(#pane-sessions) :is(video, img) {
		object-position: left top;
	}
}
/* Where that screen is a little taller than 16:9, the session's three
   images stay whole: the recording fits, its top bar and the admin chip
   clipped out. */
@media (min-width: 1280px) and (max-width: 1439px) {
	/* (before the pane's own framing below, so one class more) */
	.of-tour-pane#pane-sessions video {
		object-fit: contain;
		transform-origin: 100% 50%;
		clip-path: polygon(0 7.5%, 100% 7.5%, 100% 100%, 14% 100%, 14% 84%, 0 84%);
	}
}
.of-tour-screen {
	position: sticky;
	top: 96px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line-2);
	background: #fff;
}
.of-tour-pane {
	width: 100%;
	height: 100%;
}
.of-tour-pane video,
.of-tour-pane img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
/* The recordings framed on the work: the app's chrome (sidebar, the demo
   account) stays out of the picture. */
#pane-sessions video {
	transform: scale(1.07);
	transform-origin: 100% 100%;
	/* and the app's admin chip, bottom left, under the first image */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 13% 93%, 0 93%);
}
#pane-brand-dna video {
	transform: scale(1.3);
	transform-origin: 62% 30%;
}
#pane-products video {
	transform: scale(1.45);
	transform-origin: 62% 18%;
}
#pane-competitors video,
#pane-trends img {
	transform: scale(1.25);
	transform-origin: 72% 20%;
}
/* What the tools make: four finished pieces. */
.of-outputs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	height: 100%;
	padding: 20px;
	background: var(--paper);
}
.of-outputs img {
	border-radius: 12px;
}
/* What References does: three saved references, the picture made of them. */
.of-refs {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 12px;
	height: 100%;
	padding: 16px;
	background: var(--paper);
}
.of-refs ul {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 10px;
	min-height: 0;
	list-style: none;
}
.of-refs li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 0;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
}
.of-tour-pane .of-refs li img {
	width: auto;
	height: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 9px;
	object-fit: cover;
	object-position: center;
}
.of-refs li span {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}
.of-refs figure {
	position: relative;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
}
.of-tour-pane .of-refs figure img {
	object-position: center;
}
.of-refs figcaption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.92);
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
}
/* Connections: the apps Firsty works in. */
.of-apps {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 20px;
	height: 100%;
	padding: 20px;
	background: var(--paper);
}
.of-apps ul {
	display: grid;
	grid-template-columns: repeat(8, clamp(34px, 4.6vw, 66px));
	gap: 10px;
	list-style: none;
}
.of-apps li {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}
.of-tour-pane .of-apps img {
	width: 48%;
	height: 48%;
	object-fit: contain;
	object-position: center;
}
.of-apps p {
	color: var(--muted);
	font-size: 15px;
}
.of-apps p b {
	margin-right: 6px;
	color: var(--ink);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.03em;
}
/* ── The models' dark card: 1 > 60, the costs and what a year makes ── */
.of-engine {
	padding: 56px 56px 44px;
	border-radius: 32px;
	background: var(--dark);
	color: #fff;
}
.of-engine-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 64px;
}
.of-engine h2 {
	max-width: 720px;
	font-size: clamp(34px, 3.9vw, 56px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.055em;
	text-wrap: balance;
}
.of-engine h2 .grey {
	color: #8a8a91;
}
.of-engine-head > p {
	max-width: 400px;
	color: #b4b4ba;
	font-size: 16px;
	line-height: 1.6;
}
/* A lab's mark on a white disc: the marks are drawn for light backgrounds. */
.of-lab-mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
}
.of-lab-mark img {
	width: 16px;
	height: 16px;
}
.of-yield {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #2c2c31;
}

.of-yield-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	flex-wrap: wrap;
}
.of-yield-top > p {
	max-width: 640px;
	color: #b4b4ba;
	font-size: 16px;
	line-height: 1.55;
}
.of-yield-top b {
	color: #fff;
	font-weight: 600;
}
/* Default or fastest models: lime marks the one shown. */
.of-toggle {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: #1d1d20;
}
.of-toggle button {
	min-height: 44px;
	padding: 0 18px;
	white-space: nowrap;
	border-radius: 999px;
	color: #b4b4ba;
	font-size: 13.5px;
	font-weight: 500;
	transition:
		background 0.2s,
		color 0.2s;
}
.of-toggle button:hover {
	color: #fff;
}
.of-toggle button[aria-pressed="true"] {
	background: #fff;
	color: var(--ink);
}
.of-yield-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: 32px;
	list-style: none;
}
.of-yield-list li {
	position: relative;
	padding: 0 24px;
}
.of-yield-list li:first-child {
	padding-left: 0;
}
/* "or" between the figures: each is the whole year on its own. */
.of-yield-list li + li::before {
	content: "or";
	position: absolute;
	top: 14px;
	left: -11px;
	width: 22px;
	color: #9a9aa1;
	font-size: 13px;
	font-style: italic;
	text-align: center;
}
.of-yield-list b {
	display: block;
	font-size: clamp(36px, 3.6vw, 56px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.055em;
	font-variant-numeric: tabular-nums;
}
.of-yield-list span {
	display: block;
	margin-top: 10px;
	color: #b4b4ba;
	font-size: 15px;
	line-height: 1.4;
}
.of-yield-note {
	margin-top: 28px;
	color: #9a9aa1;
	font-size: 13px;
	line-height: 1.5;
}

/* ── The two offers ── */
.of-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.of-plan,
.of-pack {
	display: flex;
	flex-direction: column;
	padding: 36px 36px 32px;
	border-radius: var(--radius);
	background: var(--paper);
}
.of-plan.is-main {
	box-shadow: inset 0 0 0 1.5px var(--ink);
}
.of-plan.is-dark {
	background: var(--dark);
	color: #fff;
}
.of-plan h3,
.of-pack h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.035em;
}
.of-plan-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: 22px;
}
.of-plan-price b {
	font-size: clamp(52px, 5vw, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.06em;
}
.of-plan-price s {
	color: #75757c;
	font-size: 22px;
}
.of-plan-price span,
.of-plan-note {
	color: var(--muted);
	font-size: 15px;
}
.of-plan-note {
	margin-top: 10px;
	line-height: 1.5;
}
/* The year in a month: Rafał's ask, large enough to read beside the year. */
.of-plan-month {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: 12px;
	color: var(--muted);
	font-size: 15px;
}
.of-plan-month b {
	color: var(--ink);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}
.of-plan-month + .of-plan-note {
	margin-top: 6px;
}
.of-plan.is-dark .of-plan-month {
	color: #b4b4ba;
}
.of-plan.is-dark .of-plan-month b {
	color: #fff;
}
.of-plan.is-dark .of-plan-price span,
.of-plan.is-dark .of-plan-note {
	color: #b4b4ba;
}
.of-ticks {
	display: grid;
	gap: 14px;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	list-style: none;
}
.of-plan.is-dark .of-ticks {
	border-top-color: #2c2c31;
}
.of-ticks li {
	display: flex;
	gap: 12px;
	font-size: 15.5px;
	line-height: 1.45;
}
.of-ticks svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.of-plan.is-dark .of-ticks svg {
	color: #fff;
}
.of-ticks small {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 13.5px;
}
.of-plan.is-dark .of-ticks small {
	color: #9a9aa1;
}
.of-plan-more {
	margin-top: 22px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}
.of-plan-more a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.of-plan-cta {
	margin-top: auto;
	padding-top: 32px;
}
.of-plan .of-plan-cta {
	margin-top: 24px;
	padding-top: 0;
}
.of-cta-note {
	margin-top: 10px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}
.of-plan.is-dark .of-cta-note {
	color: #9a9aa1;
}
/* ── 1 > 60: one seat against the stack of subscriptions, on the dark card ── */
.of-stack {
	display: grid;
	grid-template-columns: 236px 44px minmax(0, 1fr);
	align-items: stretch;
	gap: 0 12px;
	margin-top: 40px;
	padding-top: 36px;
	border-top: 1px solid #2c2c31;
}
.of-seat {
	display: flex;
	flex-direction: column;
	padding: 28px 24px 24px;
	border-radius: var(--radius);
	background: #1c1c1f;
	box-shadow: inset 0 0 0 1px #34343a;
	color: #fff;
}
.of-seat-one {
	color: var(--lime);
	font-size: 132px;
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.06em;
}
.of-seat-name {
	margin-top: 28px;
	font-size: 19px;
	font-weight: 600;
}
.of-seat-line {
	margin-top: 8px;
	color: #b4b4ba;
	font-size: 14.5px;
	line-height: 1.45;
}
.of-seat-price {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid #2c2c31;
}
.of-seat-price b {
	display: block;
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.05;
}
.of-seat-price span {
	color: #b4b4ba;
	font-size: 14px;
}
.of-stack-gt {
	align-self: center;
	color: #5a5a60;
	font-size: 76px;
	font-weight: 300;
	line-height: 1;
	text-align: center;
}
.of-subs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
}
.of-subs li {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 14px 12px 12px;
	border: 1px solid #2c2c31;
	border-radius: 16px;
}
.of-subs .of-lab-mark {
	margin-bottom: 12px;
}
.of-sub-marks {
	display: flex;
	gap: 4px;
}
/* Every line of a card on one line: name, plan, price. */
.of-subs li > b,
.of-sub-plan {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.of-subs li > b {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}
.of-sub-plan {
	margin-top: 3px;
	color: #8a8a91;
	font-size: 12.5px;
	line-height: 1.35;
}
.of-sub-price {
	margin-top: auto;
	padding-top: 12px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.of-sub-price b {
	font-size: 16px;
	font-weight: 600;
}
.of-sub-price small {
	color: #8a8a91;
	font-size: 12px;
}
.of-subs li.is-more {
	border-style: dashed;
	border-color: #3a3a40;
}
/* The two monthly costs side by side; the bars grow when the box comes in. */
.of-versus {
	display: grid;
	gap: 18px;
	margin-top: 16px;
	padding: 24px 26px;
	border: 1px solid #2c2c31;
	border-radius: var(--radius);
}
.of-versus-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 120px;
	align-items: center;
	gap: 28px;
}
.of-versus-row p:first-child b {
	display: block;
	font-size: 15px;
	font-weight: 600;
}
.of-versus-row p:first-child span {
	color: #8a8a91;
	font-size: 13px;
}
.of-bar {
	height: 14px;
	border-radius: 999px;
	background: #232327;
}
.of-bar i {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: inherit;
	background: #5a5a60;
	transition: width 1.3s var(--ease) 0.2s;
}
.of-versus-row.is-us .of-bar i {
	background: var(--lime);
}
.reveal-ready:not(.is-in) .of-bar i {
	width: 0;
}
.of-versus-price {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.of-versus-price s,
.of-versus-price b {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.of-versus-price s {
	color: #8a8a91;
}
.of-versus-price small {
	color: #8a8a91;
	font-size: 14px;
}
.of-stack-note {
	margin-top: 16px;
	color: var(--faint);
	font-size: 13px;
	line-height: 1.5;
}
.of-engine .of-stack-note {
	color: #75757c;
}
/* A laptop: a narrower seat, tighter cards, every line still on one line. */
@media (max-width: 1360px) {
	.of-stack {
		grid-template-columns: 196px 32px minmax(0, 1fr);
		gap: 0 10px;
	}
	.of-seat-one {
		font-size: 108px;
	}
	.of-subs {
		gap: 8px;
	}
	.of-subs li {
		padding: 12px 10px 10px;
	}
	.of-subs li > b {
		font-size: 14px;
	}
}
@media (max-width: 1180px) {
	.of-stack {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.of-stack-gt {
		display: none;
	}
	.of-seat {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 28px;
		padding: 24px 28px;
	}
	.of-seat-one {
		grid-row: span 2;
		font-size: 88px;
	}
	.of-seat-name {
		margin-top: 0;
	}
	.of-seat-line {
		grid-column: 2;
		margin-top: 0;
	}
	.of-seat-price {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-top: 0;
		padding: 0 0 0 28px;
		border-top: 0;
		border-left: 1px solid #2c2c31;
	}
}
@media (max-width: 980px) {
	.of-engine-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.of-subs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.of-versus-row {
		grid-template-columns: 170px minmax(0, 1fr) 100px;
		gap: 18px;
	}
}
@media (max-width: 640px) {
	.of-subs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.of-seat {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 22px;
		gap: 4px 18px;
	}
	.of-seat-one {
		font-size: 64px;
	}
	.of-seat-price {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-top: 14px;
		padding: 14px 0 0;
		border-top: 1px solid #2c2c31;
		border-left: 0;
	}
	.of-versus {
		padding: 20px;
	}
	.of-versus-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 16px;
	}
	.of-versus-row .of-bar {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.of-versus-price s,
	.of-versus-price b {
		font-size: 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.of-bar i {
		transition: none;
	}
}
.of-offers {
	padding-top: 72px;
}
/* The 3-day refund: small, but seen right under the two prices. Lime only
   on the icon, as a signal; the pill is the page's grey, like the kicker. */
.of-refund {
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	max-width: 100%;
	margin: 44px auto 0;
	padding: 16px 30px 16px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.45;
}
.of-refund svg {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 11px;
	border-radius: 50%;
	background: var(--lime);
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.of-refund b {
	color: var(--ink);
	font-weight: 600;
}
.of-refund a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 640px) {
	.of-refund {
		align-items: flex-start;
		margin-top: 32px;
		padding: 16px 18px 16px 14px;
		border-radius: 20px;
		font-size: 15.5px;
	}
	.of-refund svg {
		width: 38px;
		height: 38px;
		padding: 9px;
	}
}
.of-trust {
	margin-top: 32px;
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}
.of-plan-cta .button {
	width: 100%;
}
/* The bundle's button on its dark card: lime stays on the main offer. */
.button.light {
	background: #fff;
	color: var(--ink);
}
.button.light:hover {
	background: #ececf0;
}
/* What happens after you pay. */
.of-next {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 32px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	list-style: none;
}
.of-next li {
	display: flex;
	gap: 14px;
}
.of-next span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}
.of-next p {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}
.of-next b {
	color: var(--ink);
	font-weight: 600;
}

/* ── Work with us ── */
.of-work {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.of-pack {
	padding: 32px 30px 28px;
}
.of-pack.is-custom {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}
/* Five team places in all: said loud, above the packages and on each. */
.of-spots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: -4px 0 24px;
}
.of-spots b {
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--lime);
	color: var(--lime-ink);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.of-spots span {
	color: var(--muted);
	font-size: 16px;
}
.of-pack .of-spots-tag {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 6px 12px;
	font-size: 13px;
}
.of-pack-line {
	margin-top: 8px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}
.of-receipt {
	display: grid;
	gap: 11px;
	margin: 24px 0 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 14.5px;
}
.of-receipt li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.of-receipt li span:first-child {
	color: var(--muted);
}
.of-receipt li span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.of-pack .of-ticks {
	margin: 24px 0 22px;
	padding-top: 22px;
}
/* The worth, the price and the call sit at the foot of every card. */
.of-pack-worth {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14.5px;
}
.of-pack-worth s {
	color: var(--faint);
}
.of-pack-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 12px;
}
.of-pack-price b {
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.055em;
}
.of-pack-price span {
	color: var(--muted);
	font-size: 14px;
}
.of-pack h3 {
	flex-wrap: wrap;
}
.of-pack-math {
	margin-top: 10px;
	color: var(--ink-2);
	font-size: 14.5px;
	line-height: 1.5;
}
.of-pack .of-plan-cta {
	margin-top: 0;
	padding-top: 24px;
}

/* ── Founding perks: the cohort large, the price lock beside it ── */
.of-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}
.of-cohort {
	grid-column: span 4;
	padding: 40px 40px 36px;
	border-radius: var(--radius);
	background: var(--paper);
}
.of-cohort-kick {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.of-cohort h3 {
	margin-top: 14px;
	max-width: 560px;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.045em;
}
.of-cohort > p:not(.of-cohort-kick) {
	margin-top: 14px;
	max-width: 560px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.55;
}
/* Six months on one line: a dot per session, the first one live. */
.of-timeline {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-top: 36px;
	list-style: none;
}
.of-timeline li {
	position: relative;
	padding-top: 26px;
}
.of-timeline li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--line);
}
.of-timeline li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--ink);
}
.of-timeline li.is-now::after {
	background: var(--lime);
	box-shadow: inset 0 0 0 2px var(--ink);
}
.of-timeline b {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.of-timeline span {
	display: block;
	margin-top: 4px;
	padding-right: 10px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}
.of-lock,
.of-perk {
	grid-column: span 2;
	padding: 32px 30px 30px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}
.of-lock {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	background: var(--dark);
	color: #fff;
	box-shadow: none;
}
.of-bento .of-lock h3 {
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.045em;
}
.of-perk-i {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.of-years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	white-space: nowrap;
	list-style: none;
}
.of-years li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px 7px 10px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px #2c2c31;
	color: #d6d6db;
	font-size: 13px;
	font-weight: 500;
}
.of-years li:last-child {
	padding-inline: 10px;
	box-shadow: none;
}
.of-years .of-perk-i {
	width: 14px;
	height: 14px;
	stroke-width: 2;
	color: #fff;
}
.of-lock h3,
.of-perk h3 {
	margin-top: 22px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.of-lock p,
.of-perk p {
	margin-top: 10px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}
.of-lock p {
	color: #b4b4ba;
}

/* What closes with the presale, beside the two ways to buy now. */
.of-closes {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 32px 56px;
	align-items: center;
	margin-top: 40px;
	padding: 36px 40px;
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}
.of-closes .of-count {
	margin-top: 0;
	color: var(--ink);
	font-weight: 500;
}
.of-closes h3 {
	margin-top: 14px;
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.04em;
}
.of-closes ul {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	list-style: none;
}
.of-closes li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
}
/* A struck-out mark: these go after the deadline. */
.of-closes li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 2px;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--ink);
}
.of-closes li b {
	font-weight: 600;
}
.of-closes li span {
	color: var(--muted);
}
.of-closes-cta {
	display: grid;
	gap: 10px;
}
.of-closes-cta > p:first-child {
	color: var(--muted);
	font-size: 15px;
}
.of-closes-cta .button {
	width: 100%;
}

/* The closing box: the time left, both offers, the call as a line. */
.mp-cta-box .of-count {
	margin-top: 22px;
	color: #b4b4ba;
}
.mp-cta-box .actions + p {
	margin-top: 20px;
}
.of-inline-link,
.of-plan-more a {
	padding-block: 12px;
	margin-block: -12px;
}
.of-inline-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.of-inline-link span {
	display: none;
}

/* ── The closing box: the offer's state under the actions ── */
.mp-cta-box .of-closed {
	color: #fff;
}

/* A tablet: both offers side by side. */
@media (min-width: 700px) and (max-width: 980px) {
	.of-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 1180px) {
	.of-yield-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 28px;
	}
	.of-yield-list li:nth-child(3n + 1) {
		padding-left: 0;
	}
	.of-yield-list li:nth-child(3n + 1)::before {
		display: none;
	}
	.of-cohort {
		grid-column: 1 / -1;
	}
	.of-lock,
	.of-perk {
		grid-column: span 3;
	}
	.of-work {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.of-pack.is-custom {
		grid-column: 1 / -1;
	}
}
@media (max-width: 980px) {
	/* Tablets take the phone's next step: the way to the offer first. */
	.of-wide {
		display: none !important;
	}
	.of-narrow {
		display: flex !important;
	}
	.of-hero-grid,
	.of-plans,
	.of-tour,
	.of-next {
		grid-template-columns: minmax(0, 1fr);
	}
	.of-hero-grid {
		grid-template-rows: none;
		grid-template-areas:
			"title"
			"lede"
			"actions"
			"deal";
	}
	/* The product first and kept in view, the modules to pick under it:
	   every tap shows its result. */
	.of-tour-screen {
		position: sticky;
		top: 72px;
		z-index: 2;
		order: -1;
		box-shadow:
			0 -12px 0 12px #fff,
			0 14px 24px -14px rgb(0 0 0 / 0.25);
	}
	.of-engine {
		padding: 40px 32px 32px;
	}
	.of-closes {
		grid-template-columns: minmax(0, 1fr);
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 640px) {
	.of-hero {
		padding-top: 20px;
	}
	.of-wide {
		display: none !important;
	}
	.of-narrow {
		display: flex !important;
	}
	.of-hero .actions {
		margin-top: 4px;
	}
	.of-hero-actions .of-count {
		margin-top: 10px;
	}
	.of-hero-grid {
		row-gap: 18px;
	}
	.of-page .mp-section {
		padding-top: 56px;
	}
	/* The tour's screen full width, sticky under the header. */
	.of-tour-screen {
		top: 64px;
		margin-inline: -16px;
		border-width: 0 0 1px;
		border-radius: 0;
		aspect-ratio: 4 / 3;
	}
	.of-outputs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 12px;
	}
	/* The date is in the card below; the kicker stays one line. */
	.of-kicker-date {
		display: none;
	}
	.of-kicker {
		margin-bottom: 16px;
		padding: 8px 14px 8px 12px;
		font-size: 14px;
	}
	.of-hero h1 {
		font-size: clamp(32px, 9.2vw, 40px);
	}
	.of-deal {
		padding: 30px 24px 26px;
		border-radius: 24px;
	}
	.of-hero-actions .button {
		width: 100%;
	}
	.of-work {
		grid-template-columns: minmax(0, 1fr);
	}
	.of-engine {
		padding: 32px 22px 26px;
		border-radius: 24px;
	}
	.of-tour-name .of-tag {
		font-size: 11.5px;
	}
	/* One figure a line, "or" leading every line after the first. */
	.of-yield-list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
		margin-top: 24px;
	}
	.of-yield-list li,
	.of-yield-list li:nth-child(3n + 1) {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 4px 10px;
		padding: 0;
	}
	.of-yield-list li + li::before,
	.of-yield-list li:nth-child(3n + 1)::before {
		display: inline;
		position: static;
		width: auto;
		content: "or";
	}
	.of-yield-list li:first-child::before {
		display: none;
	}
	.of-yield-list b {
		font-size: clamp(30px, 10vw, 36px);
	}
	.of-yield-list span {
		margin-top: 0;
	}
	.of-toggle {
		display: flex;
		width: 100%;
	}
	.of-toggle button {
		flex: 1;
	}
	/* The cohort month by month, down the left. */
	.of-timeline {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		margin-top: 26px;
	}
	.of-timeline li {
		display: flex;
		gap: 12px;
		padding: 0 0 16px 26px;
	}
	.of-timeline li::before {
		top: 6px;
		bottom: -6px;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.of-timeline li:last-child::before {
		display: none;
	}
	.of-timeline b {
		width: 36px;
		flex-shrink: 0;
		font-size: 15px;
	}
	.of-timeline span {
		margin-top: 0;
		font-size: 14px;
	}
	.of-lock {
		gap: 22px;
	}
	/* The three small perks as rows: the icon left, the words right. */
	.of-perk {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 14px;
		padding: 20px;
	}
	.of-perk .of-perk-i {
		grid-row: span 2;
	}
	.of-perk h3 {
		margin-top: 0;
		font-size: 18px;
	}
	.of-perk p {
		margin-top: 6px;
	}
	/* Both offers named at once, before the long cards. */
	.of-jump {
		display: flex !important;
		gap: 8px;
		margin-bottom: 14px;
	}
	.of-jump a {
		flex: 1;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 0 14px;
		border-radius: 999px;
		white-space: nowrap;
		box-shadow: inset 0 0 0 1px var(--line);
		font-size: 14px;
		font-weight: 500;
	}
	.of-offers {
		padding-top: 56px;
	}
	.of-trust {
		text-align: left;
	}
	.of-page .mp-cta-art {
		min-height: 200px;
		max-height: 200px;
	}
	.of-cohort,
	.of-lock,
	.of-perk {
		grid-column: 1 / -1;
	}
	.of-cohort {
		padding: 30px 24px 28px;
	}
	.of-closes {
		padding: 28px 24px;
	}

	.of-plan,
	.of-pack {
		padding: 28px 24px 24px;
	}
}
/* Phones: the 4:3 screen shows the session's three images whole, without
   the app's top bar, admin chip and toolbar. */
@media (max-width: 640px) {
	#pane-sessions video {
		object-fit: contain;
		object-position: center;
		clip-path: inset(17% 0 19% 0);
		transform: translateX(-2%) scale(1.08);
		transform-origin: 52% 50%;
	}
	/* The page from its title, the app's sidebar and top bar out. */
	#pane-brand-dna video,
	#pane-competitors video,
	#pane-trends img {
		object-position: 62.4% 0;
		transform: scale(1.06);
		transform-origin: 0 100%;
	}
}
/* Phones: the References pane's labels stay small beside their pictures. */
@media (max-width: 640px) {
	.of-refs {
		gap: 8px;
		padding: 10px;
	}
	.of-refs ul {
		gap: 6px;
	}
	.of-refs li {
		gap: 8px;
		padding: 5px;
		border-radius: 10px;
	}
	.of-refs li span {
		font-size: 11.5px;
	}
	.of-refs figcaption {
		right: 6px;
		bottom: 6px;
		left: 6px;
		padding: 5px 8px;
		font-size: 10.5px;
	}
	.of-apps {
		gap: 12px;
		padding: 12px;
	}
	.of-apps li {
		border-radius: 10px;
	}
	.of-apps p b {
		font-size: 18px;
	}
}
/* The narrowest phones: lab names fit their column, both pills their arrow. */
@media (max-width: 340px) {
	.of-jump a {
		gap: 4px;
		padding: 0 8px;
		font-size: 13px;
	}
}
/* A phone on its side: the first screen keeps its button, the tour screen
   fits under the header, and nothing is fixed to the bottom. */
@media (orientation: landscape) and (max-height: 500px) {
	.of-hero {
		padding: 12px 0 24px;
	}
	.of-hero h1 {
		font-size: 34px;
	}
	.of-hero .mp-lede {
		font-size: 15px;
	}
	.of-hero-grid {
		row-gap: 14px;
	}
	.of-kicker {
		display: none;
	}
	.of-wide {
		display: none !important;
	}
	.of-narrow {
		display: flex !important;
	}
	.of-jump {
		display: flex !important;
		gap: 8px;
		margin-bottom: 14px;
	}
	.of-jump a {
		flex: 1;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 0 14px;
		border-radius: 999px;
		white-space: nowrap;
		box-shadow: inset 0 0 0 1px var(--line);
		font-size: 14px;
		font-weight: 500;
	}
	.of-tour {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
	}
	.of-tour-screen {
		order: 0;
		position: sticky;
		top: 84px;
		margin-inline: 0;
		border-width: 1px;
		border-radius: 16px;
		aspect-ratio: 16 / 9;
	}
}
@media (prefers-reduced-motion: reduce) {
	.of-live {
		animation: none;
	}
	.of-firsty.is-here .of-firsty-bob {
		animation: none;
	}
	.of-tour.is-auto .of-tour-tab.is-ticking::after {
		animation: none;
	}
}

/* The dock: the founding price and both offers at hand from the second
   module down (offer.js shows it). Room under the footer so it never covers
   the page's last lines. */
.of-dock {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
	background: rgb(15 15 16 / 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	transform: translateY(0);
	transition: transform 0.3s var(--ease);
}
.of-dock.is-away {
	transform: translateY(110%);
}
.of-dock-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}
.of-dock p {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: #b4b4ba;
	font-size: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.of-dock .button {
	min-height: 44px;
}
.of-dock p b {
	color: #fff;
	font-weight: 600;
}
.of-dock-cta {
	display: flex;
	gap: 10px;
}
.of-page[data-state="closed"] .of-dock {
	display: none;
}
body:has(.of-page:not([data-state="closed"]) .of-dock:not([hidden])) {
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
/* One line on a phone: the time left and both offers. */
@media (max-width: 980px) {
	.of-dock-in {
		gap: 8px;
	}
	.of-dock p {
		font-size: 13px;
	}
	.of-dock p b {
		display: none;
	}
	.of-dock-cta {
		gap: 6px;
	}
	.of-dock-cta .button {
		padding: 0 12px;
		gap: 8px;
		font-size: 13px;
	}
}
/* Small phones: just the two buttons. */
@media (max-width: 400px) {
	.of-dock-price p {
		display: none;
	}
	.of-dock-cta {
		flex: 1;
	}
	.of-dock-cta .button {
		flex: 1;
	}
}
/* A phone on its side: nothing is fixed to the bottom. */
@media (orientation: landscape) and (max-height: 500px) {
	.of-dock {
		display: none !important;
	}
	body:has(.of-dock) {
		padding-bottom: 0 !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.of-dock {
		transition: none;
	}
}

/* One even gap between the page's main modules (29.10): more room than the
   module pages' frame, less than under the first screen. The price module
   (the plans, the refund, the closing box and the next steps) is one. */
.of-page > section.mp-section,
.of-page > section.mp-cta {
	padding-top: 160px;
}
/* The first screen already ends in room of its own on a desktop. */
@media (min-width: 981px) {
	.of-page > .of-hero + section.mp-section {
		padding-top: 120px;
	}
}
@media (max-width: 980px) {
	.of-page > section.mp-section,
	.of-page > section.mp-cta {
		padding-top: 120px;
	}
}
@media (max-width: 640px) {
	.of-page > section.mp-section,
	.of-page > section.mp-cta {
		padding-top: 88px;
	}
}