/*
 * Offer stage — "timeline" (إنتاج فيديوهات): an edit suite, version 2
 * (components/offer-stage/skins/timeline.php; revision 6 — owner, 15:20).
 *
 *   ┌──────────── the monitor (2.35 : 1) ────────────┐
 *   │ REC 00:00:05:12                 1080p · 25 fps │  head-up display
 *   │        the company's own film, playing         │  (left to right, like any monitor)
 *   │ ▌ the offer's title                            │  broadcast lower third,
 *   │   its line                                  ⏸  │  at the reading start
 *   └────────────────── progress ────────────────────┘
 *   ┌─ ruler 00:00 ── 00:05 ── 00:10 ── 00:15 ───────┐
 *   │ V2  [T]       [T]       [T]       [T]           │  titles
 *   │ V1  [film strip][film strip][film strip][strip] │  the clips = the tabs
 *   │ A1  ▂▅▃▇▂▅▃▂▆▃▅▂▇▃▅▂▃▆▂▅▃▇▂▅▃▂▆▃▅▂▇▃▅▂▃▆▂▅▃      │  audio
 *   └──────────────── the playhead runs across ───────┘
 *
 * Time runs in the page's reading direction (right to left in Arabic): the
 * first clip is at the reading start, like the list of offers.
 * Hooks from the shared script (offer-stage.js): --gb-offer-i / -n, --gb-play-p,
 * [data-gb-offer-current], [data-gb-playing], [data-gb-switch].
 */

.gb-offer-stage--timeline {
	--gb-edit-bg: #070F1A;
	--gb-edit-panel: #0B1726;
	--gb-edit-ink: rgb(255 255 255 / 0.72);
	--gb-edit-dim: rgb(255 255 255 / 0.42);
	--gb-track-start: 2.9rem;
	--gb-track-end: 0.75rem;
	--gb-nav-pad: 0.55rem;
	--gb-row-ruler: 1.4rem;
	--gb-row-v2: 1.15rem;
	--gb-row-v1: 4.4rem;
	--gb-row-a1: 2.3rem;
	--gb-row-gap: 0.35rem;
	--gb-v2-space: calc(var(--gb-row-v2) + var(--gb-row-gap));
	--gb-tl-run: right;
	--gb-tl-edge: left;
	--gb-tl-reveal: inset(0 100% 0 0);
	--gb-offer-enter: gb-tl-cut;
	--gb-offer-enter-time: 0.35s;
}

[dir="rtl"] .gb-offer-stage--timeline {
	--gb-tl-run: left;
	--gb-tl-edge: right;
	--gb-tl-reveal: inset(0 0 0 100%);
}

/* The whole stage is the editor: monitor on top, timeline below. */
.gb-offer-stage--timeline[data-gb-offer-ready] {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"screen"
		"nav";
	gap: 0.6rem;
	max-inline-size: 68rem;
	margin-inline: auto;
	padding: clamp(0.55rem, 1.4vw, 0.9rem);
	border: 1px solid rgb(255 255 255 / 0.06);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-edit-bg);
	color: var(--gb-color-neutral-0);
	box-shadow: 0 2.5rem 5rem -2.5rem rgb(3 12 21 / 0.75);
}

/* ---------- The monitor ---------- */

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__screen {
	display: grid;
	aspect-ratio: 2.35 / 1;
	overflow: hidden;
	border-radius: 0.55rem;
	background-color: #000;
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__view {
	position: static;
}

/* The picture: the clip's film (or its still) fills the monitor. */
.gb-offer-stage--timeline[data-gb-offer-ready] .gb-os-clip {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	background-color: #000;
}

/* The storyboard page is shown whole, on its paper. */
.gb-offer-stage--timeline[data-gb-offer-ready] .gb-os-clip--still {
	object-fit: contain;
	background-color: #F4F1EA;
}

.gb-offer-stage--timeline .gb-offer-stage__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* The shade under the lower third, so its words read on any picture. */
.gb-os-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(3 9 16 / 0.9) 0%, rgb(3 9 16 / 0.55) 30%, transparent 62%);
}

/* Title-safe corners (like a broadcast monitor's frame lines). */
.gb-os-safe {
	--c: rgb(255 255 255 / 0.32);

	position: absolute;
	inset: 6% 4%;
	background:
		linear-gradient(var(--c), var(--c)) top left / 1.1rem 1.5px no-repeat,
		linear-gradient(var(--c), var(--c)) top left / 1.5px 1.1rem no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 1.1rem 1.5px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 1.5px 1.1rem no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 1.1rem 1.5px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 1.5px 1.1rem no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 1.1rem 1.5px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 1.5px 1.1rem no-repeat;
}

/* Head-up display: REC (and the timecode beside it), the format. */
.gb-offer-stage--timeline .gb-offer-stage__chrome {
	position: absolute;
	inset-block-start: 0.75rem;
	left: 1rem;
	right: 1rem;
	z-index: 4;
}

.gb-os-monitor-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.66rem;
	font-weight: var(--gb-weight-bold);
	letter-spacing: 0.12em;
	color: var(--gb-edit-ink);
}

.gb-os-monitor-bar__rec {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.gb-os-monitor-bar__rec::before {
	content: "";
	inline-size: 0.55rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-accent);
	box-shadow: 0 0 0.5rem var(--gb-accent);
}

.gb-os-monitor-bar__format {
	padding: 0.15rem 0.45rem;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 0.25rem;
}

.gb-os-timecode {
	position: absolute;
	inset-block-start: 0.6rem;
	left: 4.3rem;
	z-index: 4;
	padding: 0.12rem 0.45rem;
	border-radius: 0.25rem;
	background-color: rgb(0 0 0 / 0.4);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 0.9);
	font-variant-numeric: tabular-nums;
}

/* The lower third: bar, title, line — bottom, at the reading start. */
.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer {
	position: static;
	align-self: end;
	justify-self: start;
	display: grid;
	max-inline-size: min(38rem, 72%);
	margin: 0;
	margin-inline-start: 5.5%;
	margin-block-end: 7%;
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__body {
	position: relative;
	z-index: 3;
	gap: 0.35rem;
	padding: 0.15rem 0;
	padding-inline-start: 1.1rem;
	background: none;
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__body::before {
	content: "";
	position: absolute;
	inset-block: 0.2rem;
	inset-inline-start: 0;
	inline-size: 4px;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-primary);
	box-shadow: 0 0 0.8rem rgb(0 202 190 / 0.6);
	transform-origin: 50% 100%;
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__number {
	display: none;
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__title {
	font-size: var(--gb-step-4);
	line-height: 1.2;
	color: var(--gb-color-neutral-0);
	text-shadow: 0 2px 1.2rem rgb(0 0 0 / 0.55);
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__text {
	max-inline-size: 46ch;
	color: rgb(255 255 255 / 0.86);
	text-shadow: 0 1px 0.6rem rgb(0 0 0 / 0.6);
}

/* Pause / play (offer-stage.js): bottom, at the reading end — opposite the lower third. */
.gb-offer-stage--timeline .gb-offer-play {
	inset-block-end: 0.85rem;
	inset-inline-end: 0.9rem;
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

/* The whole edit's progress, under the picture. */
.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__screen::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 4;
	block-size: 3px;
	background-color: var(--gb-primary);
	transform-origin: var(--gb-tl-edge) center;
	scale: calc((var(--gb-offer-i, 0) + var(--gb-play-p, 0.5)) / var(--gb-offer-n, 1)) 1;
}

/* ---------- The timeline ---------- */

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__nav {
	position: relative;
	padding: var(--gb-nav-pad) var(--gb-track-end) 0.7rem;
	padding-inline-start: var(--gb-track-start);
	border-radius: 0.55rem;
	background-color: var(--gb-edit-panel);
}

.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__nav-head {
	display: block;
}

/* The track names, in the gutter at the start of each row. */
.gb-os-tracks b {
	position: absolute;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: calc(var(--gb-track-start) - 0.35rem);
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	color: var(--gb-edit-ink);
	border-inline-end: 1px solid rgb(255 255 255 / 0.07);
}

.gb-os-tracks b:nth-child(1) {
	inset-block-start: calc(var(--gb-nav-pad) + var(--gb-row-ruler) + var(--gb-row-gap));
	block-size: var(--gb-row-v2);
}

.gb-os-tracks b:nth-child(2) {
	inset-block-start: calc(var(--gb-nav-pad) + var(--gb-row-ruler) + var(--gb-row-gap) + var(--gb-v2-space));
	block-size: var(--gb-row-v1);
}

.gb-os-tracks b:nth-child(3) {
	inset-block-start: calc(var(--gb-nav-pad) + var(--gb-row-ruler) + var(--gb-row-gap) + var(--gb-v2-space) + var(--gb-row-v1) + var(--gb-row-gap));
	block-size: var(--gb-row-a1);
}

/* The ruler: small ticks, and a timecode at every cut. */
.gb-os-ruler {
	position: relative;
	display: block;
	block-size: var(--gb-row-ruler);
	margin-block-end: var(--gb-row-gap);
	background-image: repeating-linear-gradient(to var(--gb-tl-run), rgb(255 255 255 / 0.22) 0 1px, transparent 1px calc(100% / (var(--gb-offer-n, 4) * 5)));
	background-size: 100% 35%;
	background-position: bottom;
	background-repeat: no-repeat;
}

.gb-os-ruler b {
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(100% * var(--k) / var(--gb-offer-n, 4));
	padding-inline-start: 0.3rem;
	border-inline-start: 1px solid rgb(255 255 255 / 0.4);
	font-size: 0.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--gb-edit-dim);
	font-variant-numeric: tabular-nums;
}

.gb-os-ruler b:last-child {
	display: none;
}

/* V2: a title over the middle of each clip. */
.gb-os-titles {
	display: flex;
	gap: 3px;
	block-size: var(--gb-row-v2);
	margin-block-end: var(--gb-row-gap);
}

.gb-os-titles i {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	margin-inline: 14% 22%;
	padding-inline: 0.35rem;
	border: 1px solid rgb(0 163 196 / 0.55);
	border-radius: 0.25rem;
	background-color: rgb(0 163 196 / 0.22);
	font-size: 0.58rem;
	font-style: normal;
	font-weight: var(--gb-weight-bold);
	color: rgb(255 255 255 / 0.75);
	transition: background-color var(--gb-duration-base) linear;
}

.gb-offer-stage--timeline[data-gb-offer-current="1"] .gb-os-titles i:nth-child(1),
.gb-offer-stage--timeline[data-gb-offer-current="2"] .gb-os-titles i:nth-child(2),
.gb-offer-stage--timeline[data-gb-offer-current="3"] .gb-os-titles i:nth-child(3),
.gb-offer-stage--timeline[data-gb-offer-current="4"] .gb-os-titles i:nth-child(4),
.gb-offer-stage--timeline[data-gb-offer-current="5"] .gb-os-titles i:nth-child(5),
.gb-offer-stage--timeline[data-gb-offer-current="6"] .gb-os-titles i:nth-child(6) {
	background-color: rgb(0 163 196 / 0.6);
	color: var(--gb-color-neutral-0);
}

/* V1: the clips (the tabs). */
.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__tabs {
	display: flex;
	gap: 3px;
	block-size: var(--gb-row-v1);
	overflow: visible;
}

.gb-offer-stage--timeline .gb-offer-tab {
	position: relative;
	flex: 1 1 0;
	display: grid;
	align-content: end;
	min-inline-size: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgb(0 202 190 / 0.3);
	border-radius: 0.35rem;
	background-color: #0A2232;
	color: var(--gb-color-neutral-0);
	text-align: start;
	font-size: 0.78rem;
	line-height: 1.3;
	transition: border-color var(--gb-duration-fast) linear, box-shadow var(--gb-duration-fast) linear;
}

/* The clip's colour label along its top edge. */
.gb-offer-stage--timeline .gb-offer-tab::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 2;
	block-size: 0.22rem;
	background-color: rgb(0 202 190 / 0.55);
}

.gb-offer-stage--timeline .gb-offer-tab__mark {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * The film strip: the clip's own frame repeated at the track's height (a
 * 16:9 frame), with a thin dark line between frames — as an editor shows it.
 */
.gb-os-film {
	--frame: calc(var(--gb-row-v1) * 16 / 9);

	position: absolute;
	inset: 0;
	background-color: #0A2232;
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: var(--gb-tl-edge) center;
	filter: saturate(0.55) brightness(0.55);
	transition: filter var(--gb-duration-base) linear;
}

.gb-os-film::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(to var(--gb-tl-run), transparent 0 calc(var(--frame) - 1px), rgb(0 0 0 / 0.6) calc(var(--frame) - 1px) var(--frame));
}

.gb-offer-stage--timeline .gb-offer-tab__name {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	overflow: hidden;
	padding: 0.9rem 0.5rem 0.35rem;
	background: linear-gradient(to top, rgb(4 12 20 / 0.92), transparent);
	font-weight: var(--gb-weight-bold);
	text-shadow: 0 1px 0.4rem rgb(0 0 0 / 0.7);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.gb-offer-stage--timeline .gb-offer-tab__end {
	position: absolute;
	inset-block-start: 0.45rem;
	inset-inline-end: 0.4rem;
	z-index: 1;
}

.gb-os-dur {
	display: block;
	padding: 0.05rem 0.3rem;
	border-radius: 0.2rem;
	background-color: rgb(0 0 0 / 0.55);
	font-size: 0.58rem;
	color: rgb(255 255 255 / 0.8);
	font-variant-numeric: tabular-nums;
}

.gb-offer-stage--timeline .gb-offer-tab:hover .gb-os-film {
	filter: saturate(0.8) brightness(0.75);
}

/* The chosen clip: in full colour, outlined, with the trim handles at both ends. */
.gb-offer-stage--timeline .gb-offer-tab[aria-selected="true"] {
	border: 2px solid var(--gb-primary);
	border-inline-width: 5px;
	box-shadow: 0 0 1.2rem rgb(0 202 190 / 0.35);
}

.gb-offer-stage--timeline .gb-offer-tab[aria-selected="true"] .gb-os-film {
	filter: none;
}

.gb-offer-stage--timeline .gb-offer-tab[aria-selected="true"]::before {
	background-color: var(--gb-primary);
}

.gb-offer-stage--timeline .gb-offer-tab:focus-visible {
	outline: 2px solid var(--gb-color-neutral-0);
	outline-offset: 2px;
}

/* A1: the audio. */
.gb-os-wave {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	block-size: var(--gb-row-a1);
	margin-block-start: var(--gb-row-gap);
	padding-inline: 0.3rem;
	border: 1px solid rgb(0 202 190 / 0.18);
	border-radius: 0.35rem;
	background-color: rgb(0 202 190 / 0.07);
}

.gb-os-wave i {
	flex: 1 1 0;
	min-inline-size: 1px;
	max-inline-size: 3px;
	block-size: 38%;
	border-radius: 1px;
	background-color: rgb(0 202 190 / 0.6);
}

.gb-os-wave i:nth-child(3n) {
	block-size: 72%;
}

.gb-os-wave i:nth-child(4n + 1) {
	block-size: 54%;
}

.gb-os-wave i:nth-child(5n + 2) {
	block-size: 90%;
}

.gb-os-wave i:nth-child(7n) {
	block-size: 24%;
}

.gb-os-wave i:nth-child(11n + 3) {
	block-size: 64%;
}

/*
 * The playhead: across ruler and tracks, on the chosen clip, as far along
 * it as it has played (--gb-play-p, 0 → 1); without autoplay, in its middle.
 */
.gb-os-playhead {
	position: absolute;
	inset-block: 0.3rem 0.55rem;
	inset-inline-start: calc(var(--gb-track-start) + (100% - var(--gb-track-start) - var(--gb-track-end)) * (var(--gb-offer-i, 0) + var(--gb-play-p, 0.5)) / var(--gb-offer-n, 1));
	z-index: 3;
	inline-size: 2px;
	margin-inline-start: -1px;
	background-color: var(--gb-accent);
	box-shadow: 0 0 0.5rem rgb(250 95 30 / 0.7);
	pointer-events: none;
	transition: inset-inline-start 0.6s var(--gb-ease-in-out);
}

.gb-os-playhead::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	inline-size: 0.85rem;
	block-size: 0.8rem;
	translate: calc(var(--gb-dir) * 50%) 0;
	background-color: var(--gb-accent);
	clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

.gb-offer-stage--timeline[data-gb-playing] .gb-os-playhead {
	transition: none;
}

/* ---------- Motion ---------- */

/* A cut: the new clip appears (opacity only on the panel: nothing absolutely placed moves). */
@keyframes gb-tl-cut {
	from {
		opacity: 0;
	}
}

/* …its picture arrives with a short flash of light… */
@keyframes gb-tl-flash {
	0% {
		filter: brightness(1.9) saturate(0.6);
	}

	100% {
		filter: none;
	}
}

/* …the lower third's bar rises, the title is revealed from the reading start, the line follows. */
@keyframes gb-tl-bar {
	from {
		scale: 1 0;
	}
}

@keyframes gb-tl-reveal {
	from {
		clip-path: var(--gb-tl-reveal);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes gb-tl-line {
	from {
		opacity: 0;
		translate: 0 0.5rem;
	}
}

/* A still (the storyboard) is not frozen while the edit plays: the camera moves over it slowly. */
@keyframes gb-tl-push {
	from {
		scale: 1;
	}

	to {
		scale: 1.06;
	}
}

@keyframes gb-tl-rec {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-switch] .gb-offer:not([hidden]) .gb-os-clip {
		animation: gb-tl-flash 0.45s var(--gb-ease-out) backwards;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-switch] .gb-offer:not([hidden]) .gb-offer__body::before {
		animation: gb-tl-bar 0.35s var(--gb-ease-out) 0.12s backwards;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-switch] .gb-offer:not([hidden]) .gb-offer__title {
		animation: gb-tl-reveal 0.55s var(--gb-ease-out) 0.2s backwards;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-switch] .gb-offer:not([hidden]) .gb-offer__text {
		animation: gb-tl-line 0.45s var(--gb-ease-out) 0.42s backwards;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-playing] .gb-offer:not([hidden]) .gb-os-clip--still {
		animation: gb-tl-push 5s linear both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--timeline[data-gb-playing] .gb-os-monitor-bar__rec::before {
		animation: gb-tl-rec 1.2s linear infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-os-playhead {
		transition: none;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 47.99rem) {
	.gb-offer-stage--timeline {
		--gb-track-start: 1.9rem;
		--gb-track-end: 0.5rem;
		--gb-row-v1: 3.6rem;
		--gb-row-a1: 1.8rem;
		--gb-v2-space: 0rem;
	}

	.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-stage__screen {
		aspect-ratio: 16 / 10;
	}

	.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer {
		max-inline-size: 84%;
		margin-inline-start: 5%;
		margin-block-end: 9%;
	}

	.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__title {
		font-size: var(--gb-step-1);
	}

	.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer__text {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.82rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.gb-os-monitor-bar__format {
		display: none;
	}

	.gb-offer-stage--timeline .gb-offer-stage__chrome {
		inset-block-start: 0.55rem;
		left: 0.7rem;
		right: 0.7rem;
	}

	.gb-os-timecode {
		inset-block-start: 0.45rem;
		left: 3.9rem;
		font-size: 0.62rem;
	}

	.gb-offer-stage--timeline .gb-offer-play {
		inline-size: 2.25rem;
		block-size: 2.25rem;
		inset-block-end: 0.6rem;
		inset-inline-end: 0.6rem;
	}

	/* No title track on a phone; the ruler keeps its cuts. */
	.gb-os-titles,
	.gb-os-tracks b:nth-child(1) {
		display: none;
	}

	.gb-os-tracks b {
		font-size: 0.56rem;
	}

	.gb-os-ruler b {
		font-size: 0.52rem;
	}

	/* All the clips stay in one row: the timeline is the navigation here too. */
	.gb-offer-stage--timeline[data-gb-offer-ready] .gb-offer-tab {
		flex: 1 1 0;
		white-space: normal;
		font-size: 0.66rem;
	}

	.gb-offer-stage--timeline .gb-offer-tab__name {
		padding: 0.6rem 0.3rem 0.25rem;
		-webkit-line-clamp: 2;
	}

	.gb-offer-stage--timeline .gb-offer-tab__end {
		display: none;
	}

	.gb-os-wave i:nth-child(even) {
		display: none;
	}
}