/* ============================================================
   The Bourse announcement — «کاوان» on the Tehran Stock Exchange
   ------------------------------------------------------------
   Loaded only on a page whose content carries the .msk-ipo design
   (see inc/post-ipo.php), so nothing here can reach any other page.
   Everything is scoped under .msk-ipo, or under body:has(.msk-ipo) for
   the two template pieces this article adjusts for itself.

   Every figure on the page is one the article already states: the
   symbol, the 642nd listing, 7 Mehr 1405, industry code 2720, the
   second market's main board. Nothing is invented for decoration —
   in particular there is no share price, because the article gives
   none.
   ============================================================ */

.msk-ipo {
	--ipo-teal: #0b383c;
	--ipo-teal-2: #17605a;
	--ipo-teal-3: #072a2c;
	--ipo-copper: #b96d51;
	--ipo-copper-2: #8f4f3a;
	--ipo-copper-glow: #f0c3a8;
	--ipo-cream: #fbf6f5;
	--ipo-ink: #1f2a30;
	--ipo-muted: #4a5a60;
	--ipo-line: #e9e5df;
	--ipo-radius: 20px;
	/* The parts below answer to the width of this column, not the screen:
	   between 768 and 1023 the contents list sits beside the article and the
	   column is 430px on a 768px screen — a phone's width on a tablet. */
	container: msk-ipo / inline-size;
}

.msk-ipo > * { margin-block: 0; }
.msk-ipo > * + * { margin-block-start: 1.75rem; }

/* Body copy: a touch larger and airier than the site default, because this
   page is read rather than skimmed. */
.msk-ipo > p:not([class*="msk-ipo-"]) {
	font-size: 1.06rem;
	line-height: 2.1;
	color: var(--ipo-ink);
}

/* ── The ticker card ─────────────────────────────────────── */
.msk-ipo .msk-ipo-ticker {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(26px, 4vw, 46px) clamp(22px, 4.5vw, 52px);
	border-radius: calc(var(--ipo-radius) + 6px);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--ipo-teal-2) 0%, var(--ipo-teal) 52%, var(--ipo-teal-3) 100%);
	color: #f8f7fc;
	box-shadow: 0 34px 70px -42px rgb(11 56 60 / 75%);
}

/* The copper light behind the symbol, and the site's earth texture. */
.msk-ipo .msk-ipo-ticker::before,
.msk-ipo .msk-ipo-ticker::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

.msk-ipo .msk-ipo-ticker::before {
	inset-inline-end: -12%;
	bottom: -55%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(185 109 81 / 38%) 0%, rgb(185 109 81 / 0%) 65%);
}

.msk-ipo .msk-ipo-ticker::after {
	inset: 0;
	opacity: .09;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.msk-ipo .msk-ipo-ticker > p {
	margin: 0;
	text-align: start;
	color: inherit;
}

.msk-ipo .msk-ipo-ticker__label {
	display: flex;
	align-items: center;
	gap: .55em;
	font-size: .86rem;
	letter-spacing: .01em;
	color: rgb(248 247 252 / 72%) !important;
}

/* A live-board dot: the symbol is trading, not merely announced. */
.msk-ipo .msk-ipo-ticker__label::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ipo-copper);
	box-shadow: 0 0 0 0 rgb(185 109 81 / 60%);
	animation: msk-ipo-pulse 2.4s ease-out infinite;
}

@keyframes msk-ipo-pulse {
	0%   { box-shadow: 0 0 0 0 rgb(185 109 81 / 55%); }
	70%  { box-shadow: 0 0 0 10px rgb(185 109 81 / 0%); }
	100% { box-shadow: 0 0 0 0 rgb(185 109 81 / 0%); }
}

.msk-ipo .msk-ipo-ticker__symbol {
	margin-block: .15em .1em !important;
	font-size: clamp(3.4rem, 10vw, 6.4rem);
	font-weight: 900;
	line-height: 1.1;
	background: linear-gradient(180deg, #ffffff 35%, var(--ipo-copper-glow) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.msk-ipo .msk-ipo-ticker__company {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 800;
}

.msk-ipo .msk-ipo-ticker__market {
	margin-block-start: .25rem !important;
	font-size: .95rem;
	color: rgb(248 247 252 / 76%) !important;
}

.msk-ipo .msk-ipo-ticker__pill {
	display: inline-flex !important;
	align-items: center;
	gap: .45em;
	margin-block-start: 1.15rem !important;
	padding: .5em 1.05em;
	border: 1px solid rgb(185 109 81 / 60%);
	border-radius: 999px;
	background: rgb(185 109 81 / 20%);
	color: #f6d8c8 !important;
	font-size: .86rem;
	font-weight: 800;
}

/* The moving tape along the bottom of the card. Built by the script from
   the figures below, so it never says anything the page does not. */
.msk-ipo .msk-ipo-ticker.has-tape {
	padding-block-end: calc(clamp(26px, 4vw, 46px) + 50px);
}

.msk-ipo .msk-ipo-tape {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 48px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-top: 1px solid rgb(255 255 255 / 10%);
	background: rgb(0 0 0 / 20%);
	-webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}

.msk-ipo .msk-ipo-tape__track {
	display: flex;
	flex: none;
	width: max-content;
	animation: msk-ipo-tape 46s linear infinite;
}

.msk-ipo .msk-ipo-tape__item {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	padding-inline: 1.6rem;
	white-space: nowrap;
	font-size: .82rem;
	color: rgb(248 247 252 / 78%);
}

.msk-ipo .msk-ipo-tape__item b {
	color: var(--ipo-copper-glow);
	font-weight: 900;
}

.msk-ipo .msk-ipo-tape__item::after {
	content: "◆";
	margin-inline-start: 1.6rem;
	font-size: .55rem;
	color: rgb(185 109 81 / 75%);
}

/* The track holds the items twice; sliding it by half returns it to where
   it began, so the loop has no seam. In a right-to-left row the second copy
   sits to the left, so the slide is to the right — new figures arrive from
   the side a Persian reader is moving toward. */
@keyframes msk-ipo-tape {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

/* ── The four figures ────────────────────────────────────── */
.msk-ipo .msk-ipo-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.msk-ipo .msk-ipo-fact {
	position: relative;
	margin: 0 !important;
	padding: 22px 18px 18px;
	border: 1px solid var(--ipo-line);
	border-radius: var(--ipo-radius);
	background: #fff;
	box-shadow: 0 16px 34px -30px rgb(11 56 60 / 45%);
	overflow: hidden;
}

.msk-ipo .msk-ipo-fact::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 18px;
	width: 34px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--ipo-copper);
}

.msk-ipo .msk-ipo-fact > p { margin: 0; text-align: start; }

.msk-ipo .msk-ipo-fact__value {
	font-size: clamp(1.45rem, 2.3vw, 2rem);
	font-weight: 900;
	line-height: 1.3;
	color: var(--ipo-teal);
	font-variant-numeric: tabular-nums;
}

.msk-ipo .msk-ipo-fact__label {
	margin-block-start: .4rem !important;
	font-size: .84rem;
	line-height: 1.75;
	color: var(--ipo-muted);
}

/* ── The standfirst ──────────────────────────────────────── */
.msk-ipo .msk-ipo-lede {
	padding-inline-start: 1.1rem;
	border-inline-start: 4px solid var(--ipo-copper);
	font-size: clamp(1.15rem, 2.1vw, 1.42rem);
	font-weight: 800;
	line-height: 1.95;
	color: var(--ipo-teal);
	text-align: start;
}

/* ── Section headings ────────────────────────────────────── */
.msk-ipo .msk-ipo-h {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-block-start: 2.6rem !important;
	font-size: clamp(1.25rem, 2.3vw, 1.6rem);
	font-weight: 800;
	line-height: 1.6;
	color: var(--ipo-teal);
}

.msk-ipo .msk-ipo-h::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background: var(--ipo-copper);
	transform: rotate(45deg);
}

.msk-ipo .msk-ipo-h + * { margin-block-start: .9rem; }

/* ── The path to listing ─────────────────────────────────── */
.msk-ipo .msk-ipo-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	counter-reset: msk-ipo-step;
	padding: 28px 22px 24px;
	border-radius: var(--ipo-radius);
	background: var(--ipo-cream);
	border: 1px solid var(--ipo-line);
}

/* The line the three steps sit on. */
.msk-ipo .msk-ipo-steps::before {
	content: "";
	position: absolute;
	top: 50px;
	inset-inline: calc(16.66% + 11px);
	height: 2px;
	background: linear-gradient(to left, var(--ipo-copper), var(--ipo-teal-2));
	opacity: .55;
}

.msk-ipo .msk-ipo-step {
	position: relative;
	margin: 0 !important;
	padding-block-start: 58px;
	counter-increment: msk-ipo-step;
	text-align: center;
}

.msk-ipo .msk-ipo-step::before {
	content: counter(msk-ipo-step, persian);
	position: absolute;
	top: 0;
	inset-inline: 0;
	margin-inline: auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ipo-copper);
	color: #fff;
	font-weight: 900;
	font-size: 1.05rem;
	box-shadow: 0 0 0 6px var(--ipo-cream), 0 10px 22px -10px rgb(143 79 58 / 80%);
}

.msk-ipo .msk-ipo-step > p { margin: 0; text-align: center; }

.msk-ipo .msk-ipo-step__title {
	font-weight: 800;
	color: var(--ipo-teal);
	line-height: 1.7;
}

.msk-ipo .msk-ipo-step__desc {
	margin-block-start: .3rem !important;
	font-size: .88rem;
	line-height: 1.85;
	color: var(--ipo-muted);
}

/* ── What it means ───────────────────────────────────────── */
.msk-ipo .msk-ipo-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	counter-reset: msk-ipo-benefit;
}

.msk-ipo .msk-ipo-benefit {
	margin: 0 !important;
	padding: 22px 20px 20px;
	border: 1px solid var(--ipo-line);
	border-radius: var(--ipo-radius);
	background: linear-gradient(160deg, #ffffff 0%, var(--ipo-cream) 100%);
	counter-increment: msk-ipo-benefit;
	transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.msk-ipo .msk-ipo-benefit::before {
	content: "۰" counter(msk-ipo-benefit, persian);
	display: block;
	margin-block-end: .5rem;
	font-size: 1.55rem;
	font-weight: 900;
	line-height: 1;
	color: var(--ipo-copper);
}

@media (hover: hover) {
	.msk-ipo .msk-ipo-benefit:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 40px -30px rgb(11 56 60 / 55%);
	}
}

.msk-ipo .msk-ipo-benefit > p { margin: 0; text-align: start; }

.msk-ipo .msk-ipo-benefit__title {
	font-weight: 800;
	color: var(--ipo-teal);
	line-height: 1.7;
}

.msk-ipo .msk-ipo-benefit__desc {
	margin-block-start: .35rem !important;
	font-size: .9rem;
	line-height: 1.9;
	color: var(--ipo-muted);
}

/* ── The pull quote ──────────────────────────────────────── */
.msk-ipo .msk-ipo-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block-start: 2.6rem !important;
	/* The theme insets quotes from both sides; this one lines up with the
	   cards above and below it. */
	margin-inline: 0 !important;
	max-width: none !important;
	padding: clamp(28px, 4vw, 44px) clamp(22px, 5vw, 56px);
	border: 0 !important;
	border-radius: calc(var(--ipo-radius) + 6px);
	background: radial-gradient(130% 130% at 0% 100%, var(--ipo-teal-2) 0%, var(--ipo-teal) 60%);
	color: #f8f7fc;
	text-align: center;
}

.msk-ipo .msk-ipo-quote::before {
	content: "«";
	position: absolute;
	z-index: -1;
	top: -.12em;
	inset-inline-start: .18em;
	font-size: clamp(6rem, 14vw, 9rem);
	line-height: 1;
	color: var(--ipo-copper);
	opacity: .35;
}

.msk-ipo .msk-ipo-quote p {
	margin: 0;
	font-size: clamp(1.1rem, 2.1vw, 1.38rem);
	font-weight: 800;
	line-height: 2.05;
	color: #f8f7fc;
	text-align: center !important;
}

/* ── The way on ──────────────────────────────────────────── */
.msk-ipo .msk-ipo-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	flex-wrap: wrap;
	padding: 22px 26px;
	border: 1px solid var(--ipo-line);
	border-inline-start: 4px solid var(--ipo-copper);
	border-radius: var(--ipo-radius);
	background: #fff;
}

.msk-ipo .msk-ipo-cta > * { margin: 0 !important; }

.msk-ipo .msk-ipo-cta__title {
	font-size: 1.12rem;
	font-weight: 800;
	color: var(--ipo-teal);
	text-align: start;
}

.msk-ipo .msk-ipo-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .85em 1.6em;
	border-radius: 999px;
	background: var(--ipo-copper);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.msk-ipo .msk-ipo-btn .wp-block-button__link::after {
	content: "←";
	transition: transform .2s ease;
}

@media (hover: hover) {
	.msk-ipo .msk-ipo-btn .wp-block-button__link:hover {
		background: var(--ipo-copper-2);
		transform: translateY(-1px);
	}
	.msk-ipo .msk-ipo-btn .wp-block-button__link:hover::after {
		transform: translateX(-4px);
	}
}

/* ── Press coverage ──────────────────────────────────────── */
/* Each item is a link in a list item, which the site's article-link rule
   (content-text.css) paints copper with -webkit-text-fill-color — an inherited
   property that `color` alone never overrides. Every text span here therefore
   names its own fill as well as its colour. */
.msk-ipo .msk-ipo-press__lead {
	margin: 0 0 1rem;
	font-size: .98rem;
	line-height: 1.95;
	color: var(--ipo-muted);
}

.msk-ipo .msk-ipo-press__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msk-ipo .msk-ipo-press__grid > li {
	margin: 0;
	padding: 0;
}

.msk-ipo .msk-ipo-press__grid > li::before,
.msk-ipo .msk-ipo-press__grid > li::marker { content: none; }

html .msk-ipo .msk-ipo-press__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 16px 20px 14px;
	overflow: hidden;
	border: 1px solid var(--ipo-line);
	border-radius: 16px;
	background: #fff;
	/* The site justifies article text; a short headline justified opens
	   gaps between its words. */
	text-align: start;
	text-decoration: none;
	transition: transform .25s cubic-bezier(.16, .84, .44, 1), border-color .25s ease, box-shadow .25s ease;
}

/* A copper rule on the reading edge, a third tall at rest and full on hover. */
.msk-ipo .msk-ipo-press__link::after {
	content: "";
	position: absolute;
	inset-block: 12px;
	inset-inline-start: 0;
	width: 3px;
	border-start-end-radius: 3px;
	border-end-end-radius: 3px;
	background: linear-gradient(180deg, var(--ipo-copper-glow), var(--ipo-copper));
	transform: scaleY(.35);
	transform-origin: top;
	transition: transform .25s ease;
}

.msk-ipo .msk-ipo-press__source {
	font-size: .78rem;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ipo-copper-2);
	-webkit-text-fill-color: var(--ipo-copper-2);
}

.msk-ipo .msk-ipo-press__title {
	flex: 1;
	font-size: .97rem;
	font-weight: 700;
	line-height: 1.85;
	color: var(--ipo-teal);
	-webkit-text-fill-color: var(--ipo-teal);
}

.msk-ipo .msk-ipo-press__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 4px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ipo-muted);
	-webkit-text-fill-color: var(--ipo-muted);
	transition: color .2s ease, -webkit-text-fill-color .2s ease;
}

.msk-ipo .msk-ipo-press__cta::after {
	content: "←";
	transition: transform .2s ease;
}

html .msk-ipo .msk-ipo-press__link:focus-visible {
	outline: 2px solid var(--ipo-teal);
	outline-offset: 3px;
}

.msk-ipo .msk-ipo-press__link:focus-visible::after { transform: scaleY(1); }

@media (hover: hover) {
	html .msk-ipo .msk-ipo-press__link:hover {
		transform: translateY(-3px);
		border-color: #d9d3cb;
		box-shadow: 0 18px 32px -26px rgb(11 56 60 / 60%);
	}
	.msk-ipo .msk-ipo-press__link:hover::after { transform: scaleY(1); }
	.msk-ipo .msk-ipo-press__link:hover .msk-ipo-press__cta {
		color: var(--ipo-copper-2);
		-webkit-text-fill-color: var(--ipo-copper-2);
	}
	.msk-ipo .msk-ipo-press__link:hover .msk-ipo-press__cta::after { transform: translateX(-3px); }
}

/* The exchange's own notice leads the list, in the ticker card's colours. */
html .msk-ipo .msk-ipo-press__link--official {
	border-color: transparent;
	background: radial-gradient(130% 140% at 100% 0%, var(--ipo-teal-2) 0%, var(--ipo-teal) 60%);
}

.msk-ipo .msk-ipo-press__link--official .msk-ipo-press__source {
	color: var(--ipo-copper-glow);
	-webkit-text-fill-color: var(--ipo-copper-glow);
}

.msk-ipo .msk-ipo-press__link--official .msk-ipo-press__title,
.msk-ipo .msk-ipo-press__link--official .msk-ipo-press__cta {
	color: #f8f7fc;
	-webkit-text-fill-color: #f8f7fc;
}

@media (hover: hover) {
	.msk-ipo .msk-ipo-press__link--official:hover .msk-ipo-press__cta {
		color: var(--ipo-copper-glow);
		-webkit-text-fill-color: var(--ipo-copper-glow);
	}
}

/* ── The template, for this article only ─────────────────── */
/* The article's wrapper is a flex item that sizes itself to its contents
   (its column is align-items: flex-start). A size container reports no size
   of its own contents — that is what lets it be queried — so in that chain
   the whole article measured 0px wide. Stretching the wrapper to its column
   gives the container a width that does not depend on what is inside it.
   It changes nothing else: the paragraphs here are long enough that the
   wrapper was already as wide as its column. */
body:has(.msk-ipo) .wp-block-group:has(> .wp-block-post-content) {
	align-self: stretch;
}

/* The section under the hero is padded for the picture that overlaps it,
   and on a wide screen that padding left about 200px of nothing between the
   picture and the first line. The value is shared by every post, so it is
   adjusted here and nowhere else. */
/* ── This article: the whole row, no picture, no contents list ──
   Asked for this one article only, and kept to it: every rule below is under
   body:has(.msk-ipo), and the file itself loads nowhere else. Nothing is
   anchored on the template's generated gb-element-xxxx names — the parts are
   found by what they hold — so a re-saved template does not break it. */

/* The picture is hidden on the page and nowhere else: it is still the
   article's featured image for the cards on the home page and the blog, for
   sharing previews and for search. */
body:has(.msk-ipo) .hero-overlap .wp-block-post-featured-image {
	display: none !important;
}

/* The green band is a fixed 640px on a wide screen (at least 590 on a phone)
   so that it can hold the picture. Without the picture it ends where its
   title and date do. */
body:has(.msk-ipo) .hero-overlap {
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: 64px !important;
}

/* And the section under it no longer needs room for a picture reaching in. */
body:has(.msk-ipo) .after-hero-section {
	padding-top: 56px !important;
}

/* The article and its side column sit in one row; the side column held the
   contents list and the share buttons. The row is stacked instead, as it
   already is on a phone: the article takes the full width and the share
   buttons stay, under it. The row is found as the box whose child column
   holds the post content — not by its generated name. */
body:has(.msk-ipo) [class*="gb-element"]:has(> [class*="gb-element"] > .wp-block-group > .wp-block-post-content) {
	flex-direction: column !important;
	align-items: stretch !important;
}

body:has(.msk-ipo) [class*="gb-element"]:has(> [class*="gb-element"] > .wp-block-group > .wp-block-post-content) > [class*="gb-element"] {
	width: 100% !important;
	max-width: 100% !important;
}

/* No contents list: not in the side column, and not as the sheet a phone
   builds from the same list. */
body:has(.msk-ipo) .simpletoc,
body:has(.msk-ipo) .msk-toc-sheet,
body:has(.msk-ipo) .msk-toc-backdrop {
	display: none !important;
}

@media (max-width: 1023px) {

	body:has(.msk-ipo) .hero-overlap { padding-bottom: 44px !important; }
	body:has(.msk-ipo) .after-hero-section { padding-top: 36px !important; }

	/* The room post-toc.css leaves at the foot of the page for the sheet's
	   handle. There is no sheet here. */
	html body:has(.msk-ipo) .site-footer { padding-block-end: 0; }
}

/* Full width suits the cards; it does not suit a paragraph. At the row's
   width a Persian line runs past 140 characters, about twice what reads
   comfortably. So the cards take the whole row and the running text keeps a
   reading measure, centred under them. */
@container msk-ipo (min-width: 900px) {
	.msk-ipo > :is(p, h2),
	.msk-ipo .msk-ipo-press__lead {
		max-width: 820px;
		margin-inline: auto;
	}
}


/* ── A narrow column ─────────────────────────────────────── */
@container msk-ipo (max-width: 620px) {

	.msk-ipo > * + * { margin-block-start: 1.4rem; }

	/* Justified text in a column this narrow opens rivers between the words.
	   On this article it reads from the start edge instead. */
	.msk-ipo p { text-align: start; }

	.msk-ipo .msk-ipo-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.msk-ipo .msk-ipo-fact { padding: 18px 14px 14px; }

	.msk-ipo .msk-ipo-steps {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 22px 18px;
	}

	.msk-ipo .msk-ipo-steps::before {
		top: 45px;
		bottom: 45px;
		inset-inline-start: calc(18px + 22px);
		inset-inline-end: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(to bottom, var(--ipo-copper), var(--ipo-teal-2));
	}

	.msk-ipo .msk-ipo-step {
		padding-block-start: 0;
		padding-inline-start: 62px;
		min-height: 46px;
		text-align: start;
	}

	.msk-ipo .msk-ipo-step::before {
		inset-inline: 0 auto;
		margin-inline: 0;
	}

	.msk-ipo .msk-ipo-step > p { text-align: start; }

	.msk-ipo .msk-ipo-benefits { grid-template-columns: 1fr; }

	/* Sixteen cards in one column: tighter, so the list stays a list. */
	.msk-ipo .msk-ipo-press__grid { gap: 10px; }
	html .msk-ipo .msk-ipo-press__link { gap: 4px; padding: 13px 16px 12px; }
	.msk-ipo .msk-ipo-press__title { font-size: .94rem; line-height: 1.8; }
}

@container msk-ipo (max-width: 480px) {

	.msk-ipo .msk-ipo-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.msk-ipo .msk-ipo-cta__title { text-align: center; }

	.msk-ipo .msk-ipo-btn,
	.msk-ipo .msk-ipo-btn .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}


@media (prefers-reduced-motion: reduce) {
	.msk-ipo .msk-ipo-tape__track,
	.msk-ipo .msk-ipo-ticker__label::before { animation: none; }
	.msk-ipo .msk-ipo-benefit,
	.msk-ipo .msk-ipo-btn .wp-block-button__link,
	html .msk-ipo .msk-ipo-press__link,
	.msk-ipo .msk-ipo-press__link::after,
	.msk-ipo .msk-ipo-press__cta::after { transition: none; }
	html .msk-ipo .msk-ipo-press__link:hover { transform: none; }
}