/* Section 2 — features (Figma «Landing · Features» 1440 wide, «Mobile · Features» 390 wide).
   Each card's picture is drawn at its design size (--w × --h, px) on .fcard__canvas and scaled by --k: on a computer
   to fit the card (features.js sets --fit when the card is narrower than the design), on phones and tablets to a
   fixed height of 228px, centred (the wide pictures lose their sides). Positions inside a picture are physical
   (left/top), as in the design. */

.features { padding: 80px 0 120px; } /* .sec: the frame (base.css). */

.features__inner {
	--inset: 40px;
	width: var(--container);
	margin: 0 auto;
	padding: 70px var(--inset) 0;
}

/* The story's progress and header, at the top of the section (it scrolls with the page). ------------------------ */

.features__progress {
	display: flex;
	gap: 6px;
}

.features__seg {
	position: relative;
	flex: 1;
	height: 21px; /* The bar is 5px; the button is easier to hit. */
	margin: -8px 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.features__seg::before,
.features__seg span {
	content: "";
	position: absolute;
	inset: 8px 0;
	border-radius: 3px;
}
.features__seg::before { background: rgba(21, 19, 31, 0.1); }
.features__seg span {
	background: var(--ink);
	transform: scaleX(var(--f, 0));
	transform-origin: right; /* RTL: fills from the right, like Pelk's viewer. */
}
.features__seg:hover::before { background: rgba(21, 19, 31, 0.18); }
.features__seg:focus-visible { outline-offset: 0; }

.features__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 19px;
}

.features__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.features__avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 2.5px solid var(--coral);
	border-radius: 50%;
	background: #fff1ec;
}
.features__avatar svg { width: 26px; height: 26px; }

.features__names {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}
.features__names b { font-size: 17px; font-weight: 600; }
.features__names span { color: var(--muted); font-size: 13px; font-weight: 500; }

.features__count {
	color: rgba(21, 19, 31, 0.45);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 17px;
}

/* Headline ------------------------------------------------------------------------------------------------------- */

.features__title {
	margin-top: 36px;
	font-size: clamp(26px, 3.61vw, 52px);
	font-weight: 900;
	line-height: 1.35;
}
.features__title span { color: var(--subtle); }

/* Cards ---------------------------------------------------------------------------------------------------------- */

.features__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 72px;
}

.features__row {
	display: flex;
	gap: 20px;
}

.fcard {
	--k: var(--fit, 1);
	display: flex;
	flex: var(--w) 1 0; /* Grow by the picture's width: the 22px of padding and border come on top, as in the design. */
	flex-direction: column;
	min-width: 0;
	padding: 10px 10px 0;
	border: 1px solid rgba(21, 19, 31, 0.08);
	border-radius: 36px;
	background: var(--white);
	transition: border-color 0.3s, box-shadow 0.3s;
}
.fcard.is-active {
	border-color: rgba(255, 107, 74, 0.45);
	box-shadow: inset 0 0 0 0.5px rgba(255, 107, 74, 0.45);
}

.fcard--slides { --w: 623; --h: 340; }
.fcard--schedule { --w: 433; --h: 340; }
.fcard--placement { --w: 337; --h: 270; }
.fcard--stats { --w: 338; --h: 270; }
.fcard--share { --w: 338; --h: 270; }
.fcard--appearance { --w: 718; --h: 300; }
.fcard--isolation { --w: 338; --h: 300; }

.fcard__visual {
	position: relative;
	overflow: hidden;
	height: calc(var(--h) * var(--k) * 1px);
	border-radius: 28px;
	background: var(--sand);
	isolation: isolate;
}

.fcard__canvas {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(var(--w) * 1px);
	height: calc(var(--h) * 1px);
	margin-left: calc(var(--w) * -0.5px);
	transform: scale(var(--k));
	transform-origin: 50% 0;
}

/* Shared bits of the pictures ------------------------------------------------------------------------------------ */

.fcard__canvas > * { position: absolute; }
.fcard__canvas .icon { width: 16px; height: 16px; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 35px;
	padding: 8px 12px 9px 14px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 6px 18px rgba(21, 19, 31, 0.12);
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.chip .icon { color: var(--coral); }

.tagpill {
	padding: 5px 12px 6px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
}

/* A story circle (Pelk's): the open ring and its dot, the cover photo inside, the title under it. */
.av {
	--s: 57.6px;
	--in: calc(var(--s) * 0.09);
	--sw: 2.5;
	display: block;
}
.av--l { --in: calc(var(--s) * 0.079); --sw: 2.2; }
.av__circle {
	position: relative;
	display: block;
	width: var(--s);
	height: var(--s);
}
.av__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.av__ring path { stroke-width: var(--sw); }
.av__circle img {
	position: absolute;
	inset: var(--in);
	width: calc(100% - 2 * var(--in));
	height: calc(100% - 2 * var(--in));
	border-radius: 50%;
	object-fit: cover;
}
.av__title {
	position: absolute;
	top: calc(var(--s) + 4.8px);
	left: calc(var(--s) / 2);
	color: var(--ink-2);
	font-size: 9.6px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	transform: translateX(-50%);
}

/* 01 · slides: three of Pelk's slide types on phones --------------------------------------------------------------- */

.slides__phone {
	width: 169px;
	height: 358px;
	border-radius: 27.2px;
	box-shadow: 0 12px 24px rgba(28, 26, 43, 0.22);
	transform-origin: 4px 4px; /* The screen's corner (the 4px frame is outside it), as rotated in the design. */
	transition: transform 0.5s var(--ease-out);
}
.slides__phone img { width: 100%; height: 100%; }
.slides__phone--text { left: 66px; top: 66px; transform: rotate(-8deg); }
.slides__phone--video { left: 396px; top: 66px; transform: rotate(8deg); }
.slides__phone--image { left: 228px; top: 26px; }

.slides__chip--text { left: 44px; top: 250px; }
.slides__chip--video { left: 499px; top: 250px; }
.slides__chip--image { left: 271px; top: 280px; }

/* 02 · schedule: a 24-hour dial, 8 to 11 lit ----------------------------------------------------------------------- */

.dial { left: 109px; top: 72px; width: 216px; height: 216px; }
.dial__face { width: 100%; height: 100%; overflow: visible; }
.dial__day { fill: none; stroke: var(--sand-line); stroke-width: 17.28; }
.dial__window {
	fill: none;
	stroke: var(--coral);
	stroke-width: 17.28;
	stroke-linecap: round;
	stroke-dasharray: 78.1;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 4px 7px rgba(255, 107, 74, 0.45));
}

.dial__hour {
	position: absolute;
	color: var(--subtle);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	transform: translateX(-50%);
}
.dial__hour--0 { left: 108.5px; top: 23px; }
.dial__hour--6 { left: 184.5px; top: 100px; }
.dial__hour--12 { left: 108px; top: 177px; }
.dial__hour--18 { left: 31.5px; top: 100px; }

.dial__center {
	position: absolute;
	left: 73px;
	top: 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 78px;
}
.dial__center b { font-size: 34px; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.dial__center span { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 17px; white-space: nowrap; }

.when {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 8px 10px 8px 16px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 6px 18px rgba(21, 19, 31, 0.1);
	white-space: nowrap;
}
.when i {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff1ec;
	color: var(--coral-deep);
}
.when span { color: var(--subtle); font-size: 13px; font-weight: 500; line-height: 17px; }
.when b { font-size: 14px; font-weight: 600; line-height: 18px; }
.when--start { left: 204px; top: 20px; }
.when--end { left: 18px; top: 274px; }

/* 03 · placement: three pages of a shop, each with the bar ---------------------------------------------------------- */

.page {
	width: 150px;
	height: 190px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--white);
	box-shadow: 0 10px 24px rgba(21, 19, 31, 0.1);
	transform-origin: 0 0;
}
.page i { position: absolute; display: block; }
.page--shop { left: 14px; top: 48px; transform: rotate(-7deg); }
.page--product { left: 176px; top: 48px; transform: rotate(7deg); }
.page--home { left: 95px; top: 26px; }

.page__top {
	position: absolute;
	inset: 0 0 auto;
	height: 22px;
	background: var(--sand);
}
.page__top i { top: 8px; width: 6px; height: 6px; border-radius: 50%; }
.page__top i:nth-child(1) { left: 10px; background: #ff5f57; }
.page__top i:nth-child(2) { left: 19px; background: #febc2e; }
.page__top i:nth-child(3) { left: 28px; background: #28c840; }

.page__bar {
	position: absolute;
	left: 18px;
	top: 27px;
	display: flex;
	gap: 6px;
	width: 126px;
	height: 28px;
	padding: 5px 6px;
	border-radius: 14px;
	background: rgba(255, 107, 74, 0.1);
	direction: ltr;
}
.page__bar i {
	position: static;
	width: 18px;
	height: 18px;
	border: 2px solid var(--coral);
	border-radius: 50%;
	background: #fff1ec;
}
.page__bar i:last-child { border-color: #d9d4d0; }

.page__tile { width: 59px; height: 50px; border-radius: 10px; background: var(--sand); }
.page__tile:nth-of-type(1) { left: 12px; top: 64px; }
.page__tile:nth-of-type(2) { left: 79px; top: 64px; }
.page__tile:nth-of-type(3) { left: 12px; top: 124px; }
.page__tile:nth-of-type(4) { left: 79px; top: 124px; }

.page__photo { left: 78px; top: 64px; width: 60px; height: 70px; border-radius: 10px; background: var(--sand); }
.page__hero { left: 12px; top: 64px; width: 126px; height: 54px; border-radius: 10px; background: var(--sand); }
.page__buy { left: 14px; top: 118px; width: 52px; height: 16px; border-radius: 8px; background: var(--coral); }
.page__line { height: 7px; border-radius: 4px; background: var(--sand-line); }
.page__line--a { left: 14px; top: 70px; width: 52px; }
.page__line--b { left: 26px; top: 84px; width: 40px; }
.page__line--c { left: 12px; top: 150px; width: 126px; }
.page__line--d { left: 42px; top: 164px; width: 96px; }
.page__line--e { left: 48px; top: 128px; width: 90px; }
.page__line--f { left: 28px; top: 142px; width: 110px; }
.page__line--g { left: 68px; top: 156px; width: 70px; }

.placement__label--shop { left: 40px; top: 226px; }
.placement__label--product { left: 232px; top: 226px; }
.placement__label--home { left: 131.5px; top: 210px; }

.placement__code {
	left: 14px;
	top: 14px;
	padding: 5px 10px 6px;
	border: 1px solid rgba(21, 19, 31, 0.1);
	border-radius: 999px;
	background: var(--white);
	color: var(--coral-deep);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
}

/* 04 · stats ----------------------------------------------------------------------------------------------------- */

.stats {
	left: 20px;
	top: 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 300px;
	height: 253px;
	padding: 18px 20px;
	border-radius: 22px 22px 0 0;
	background: var(--white);
	box-shadow: 0 10px 24px rgba(21, 19, 31, 0.08);
}

.stats__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--subtle);
	font-size: 13px;
	font-weight: 500;
	line-height: 17px;
}

.stats__delta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px 4px;
	border-radius: 999px;
	background: #fff1ec;
	color: var(--coral-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}
.fcard__canvas .stats__delta .icon { width: 12px; height: 12px; }

.stats__number { font-size: 40px; font-weight: 900; line-height: 1.3; }

.stats__chart {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 120px;
	margin-top: 10px;
	direction: ltr; /* Today first, on the left, as in the design. */
}
.stats__chart i {
	width: 28px;
	height: calc(var(--v) * 1px);
	border-radius: 9px;
	background: var(--sand-line);
	transform-origin: bottom;
}
.stats__chart i:first-child { background: var(--coral); }

.stats__tip { left: 36px; top: 102px; padding: 5px 10px 6px; }

/* 05 · likes, share, the direct link ------------------------------------------------------------------------------ */

.share__like {
	left: 150px;
	top: 44px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 10px 26px rgba(21, 19, 31, 0.12);
	color: var(--coral);
}
.fcard__canvas .share__like .icon { position: absolute; left: 26px; top: 28px; width: 44px; height: 44px; }

.share__count { left: 220px; top: 42px; padding: 4px 10px 5px; font-size: 13px; font-weight: 700; line-height: 17px; }

.share__float { color: var(--coral); }
.fcard__canvas .share__float .icon { width: 100%; height: 100%; }
.share__float--a { left: 120px; top: 30px; width: 22px; height: 22px; opacity: 0.55; }
.share__float--b { left: 262px; top: 64px; width: 16px; height: 16px; opacity: 0.35; }
.share__float--c { left: 104px; top: 104px; width: 14px; height: 14px; opacity: 0.25; }
.share__float--d { left: 236px; top: 20px; width: 12px; height: 12px; opacity: 0.3; }

.share__send {
	left: 56px;
	top: 70px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 8px 20px rgba(21, 19, 31, 0.1);
}
.fcard__canvas .share__send .icon { position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; }

.share__link {
	left: 29px;
	top: 186px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 282px;
	height: 41px;
	padding: 6px 12px 6px 6px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 6px 18px rgba(21, 19, 31, 0.08);
}
.share__link > .icon { color: var(--subtle); }

.share__url {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 16px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.share__url:hover { color: var(--coral-deep); }

.share__copy {
	flex: none;
	height: 29px;
	padding: 6px 12px 7px;
	border: 0;
	border-radius: 999px;
	background: var(--coral);
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
}
button.share__copy { cursor: pointer; transition: background-color 0.2s; }
button.share__copy:hover { background: var(--coral-mid); }
button.share__copy.is-copied { background: var(--ink); }

/* 06 · appearance: four settings tiles ---------------------------------------------------------------------------- */

.tile {
	top: 16px;
	width: 162.5px;
	height: 268px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--white);
	box-shadow: 0 6px 16px rgba(21, 19, 31, 0.05);
}
.tile > * { position: absolute; }
.tile--size { left: 539.5px; }
.tile--theme { left: 365px; }
.tile--ring { left: 190.5px; }
.tile--brand { left: 16px; }

.tile__label {
	top: 16px;
	right: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: the right edge. */
	gap: 2px;
}
.tile__label b { font-size: 15px; font-weight: 700; line-height: 20px; }
.tile__label span {
	color: rgba(21, 19, 31, 0.4);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 14px;
	white-space: nowrap;
}

.tile__s { --s: 34.7px; left: -1.5px; top: 189px; }
.tile__m { --s: 44.6px; left: 46.5px; top: 179px; }
.tile__l { --s: 59.5px; left: 104.5px; top: 164px; }
.tile__baseline { left: 18px; top: 230px; width: 126.5px; height: 1px; background: var(--line); }

.tile__dark { left: 10px; top: 68px; width: 67.3px; height: 190px; border-radius: 16px; background: var(--ink); }
.tile__light { left: 95.2px; top: 164px; }
.tile__darkstory { left: 15.2px; top: 164px; }
.tile__darkstory .av__title { color: var(--white); }

.tile__new { left: 88.2px; top: 156px; }
.tile__seen { left: 17.2px; top: 156px; }
.tile__caption {
	top: 224px;
	color: var(--subtle);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
	transform: translateX(-50%);
}
.tile__caption--new { left: 117px; }
.tile__caption--seen { left: 46px; }

.tile__swatches {
	left: 46.5px;
	top: 82px;
	display: grid;
	grid-template-columns: repeat(3, 26px);
	gap: 10px;
}
.tile__swatches i { width: 26px; height: 26px; border-radius: 50%; }
.tile__swatches i:nth-child(1) { background: var(--coral); box-shadow: inset 0 0 0 3px var(--white), 0 0 0 2px var(--coral); }
.tile__swatches i:nth-child(2) { background: #2f6bff; }
.tile__swatches i:nth-child(3) { background: #12a27e; }
.tile__swatches i:nth-child(4) { background: #8b5cf6; }
.tile__swatches i:nth-child(5) { background: #e11d74; }
.tile__swatches i:nth-child(6) { background: var(--ink); }

.tile__font { top: 176px; right: 18px; font-size: 40px; font-weight: 900; line-height: 52px; }
.tile__fontname { top: 234px; right: 18px; color: var(--subtle); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }

/* 07 · isolation: the theme's CSS stops at the shadow root --------------------------------------------------------- */

.iso__css {
	left: 20px;
	top: 18px;
	width: 234px;
	height: 112px;
	margin: 0;
	padding: 11px 16px 0;
	border-radius: 18px;
	background: var(--ink);
	box-shadow: 0 10px 24px rgba(21, 19, 31, 0.15);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 22px;
}
.iso__css span { color: rgba(255, 255, 255, 0.4); }

.iso__root {
	left: 20px;
	top: 164px;
	width: 298px;
	height: 118px;
	border: 1.5px solid rgba(255, 107, 74, 0.5);
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0 6px 16px rgba(21, 19, 31, 0.06);
}
.iso__root > * { position: absolute; }

.iso__tag {
	left: 12.5px;
	top: 10.5px;
	padding: 3px 8px 4px;
	border-radius: 999px;
	background: #fff1ec;
	color: var(--coral-deep);
	font-size: 12px;
	line-height: 16px;
}

.iso__intact {
	right: 12.5px;
	top: 12.5px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--coral-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}
.fcard__canvas .iso__intact .icon { width: 14px; height: 14px; }

.iso__stories {
	left: 50.7px;
	top: 44.5px;
	display: flex;
	gap: 16.2px;
	direction: ltr;
}
.iso__stories .av { --s: 53.8px; }

.iso__shield {
	left: 264px;
	top: 134px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--coral);
	box-shadow: 0 6px 16px rgba(255, 107, 74, 0.45);
	color: var(--white);
}
.fcard__canvas .iso__shield .icon { width: 22px; height: 22px; }

/* Hover: the pictures come a little alive (optional in the design; off with reduced motion). ----------------------- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fcard--slides:hover .slides__phone--text { transform: translate(-10px, 4px) rotate(-11deg); }
	.fcard--slides:hover .slides__phone--video { transform: translate(10px, 4px) rotate(11deg); }
	.fcard--slides:hover .slides__phone--image { transform: translateY(-4px); }

	.fcard--schedule:hover .dial__window { animation: features-dial 0.9s var(--ease-out); }
	.fcard--stats:hover .stats__chart i { animation: features-bar 0.7s var(--ease-out) backwards; }
	.fcard--stats:hover .stats__chart i:nth-child(2) { animation-delay: 0.04s; }
	.fcard--stats:hover .stats__chart i:nth-child(3) { animation-delay: 0.08s; }
	.fcard--stats:hover .stats__chart i:nth-child(4) { animation-delay: 0.12s; }
	.fcard--stats:hover .stats__chart i:nth-child(5) { animation-delay: 0.16s; }
	.fcard--stats:hover .stats__chart i:nth-child(6) { animation-delay: 0.2s; }
	.fcard--stats:hover .stats__chart i:nth-child(7) { animation-delay: 0.24s; }
	.fcard--share:hover .share__like .icon { animation: features-beat 0.6s var(--ease-out); }
}

@keyframes features-dial { from { stroke-dashoffset: 78.1; } }
@keyframes features-bar { from { transform: scaleY(0.2); } }
@keyframes features-beat { 40% { transform: scale(1.18); } }

/* The small features: a centred cloud (phones: three moving rows) ------------------------------------------------- */

.features__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	margin-top: 96px;
}

.features__more-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 31px;
	text-align: center;
}

.pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 10px;
	max-width: 1040px;
}
.pills__track,
.pills__row { display: contents; }
.pills__row--copy { display: none; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 49px;
	padding: 12px 16px 13px 20px;
	border: 1px solid rgba(21, 19, 31, 0.12);
	border-radius: 999px;
	background: var(--white);
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	white-space: nowrap;
}
.pill__mark {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff1ec;
	color: var(--coral);
}
.pill__mark .icon { width: 12px; height: 12px; }

/* 1024–1180px: the rows stay; features.js fits the pictures to the narrower cards. ----------------------------- */

@media (max-width: 1180px) {
	.features__inner { --inset: 0px; }
}

/* Tablets and phones: one card per row on phones, two on tablets; pictures 228px high. ----------------------- */

@media (max-width: 1023px) {
	.features__cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		margin-top: 40px;
	}
	.features__row { display: contents; }

	.fcard {
		--k: calc(228 / var(--h));
		padding: 8px 8px 0;
		border-radius: 28px;
	}
	.fcard__visual { border-radius: 22px; }
	/* «ظاهر» keeps its right side, so «اندازه» and «تم» show. */
	.fcard--appearance .fcard__canvas { left: auto; right: 0; margin-left: 0; transform-origin: 100% 0; }
	/* The two outer chips step in so they are not cut off. */
	.fcard--slides .slides__chip--text { left: 80.5px; }
	.fcard--slides .slides__chip--video { left: 459.3px; }

	.fcard .ftext { padding: 18px 16px 22px; }
	.fcard .ftext__title { font-size: 22px; }
	.fcard .ftext__body { font-size: 15px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Seven cards in two columns: the last one takes the whole row. */
	.features__row:last-child .fcard:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.features { padding: 36px 0 24px; }

	.features__inner { padding-top: 40px; }

	.features__progress { gap: 5px; }
	.features__seg { height: 20px; }
	.features__seg::before,
	.features__seg span { border-radius: 3px; inset: 8px 0; }
	.features__head { margin-top: 14px; }

	.features__title { margin-top: 30px; font-size: 26px; line-height: 1.4; }

	.features__cards { grid-template-columns: 1fr; margin-top: 28px; }

	.features__more { gap: 20px; margin-top: 56px; }
	.features__more-title { font-size: 20px; line-height: 26px; }

	/* Three rows of five, each running on its own; the middle one the other way. */
	.pills {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 10px;
		width: 100vw;
		max-width: none;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	}
	.pills__track {
		display: flex;
		width: max-content;
		animation: features-marquee 42s linear infinite;
	}
	.pills__track:nth-child(2) { animation-name: features-marquee-back; animation-duration: 48s; }
	.pills__track:nth-child(3) { animation-duration: 38s; }
	.pills__row,
	.pills__row--copy {
		display: flex;
		gap: 8px;
		padding-inline-end: 8px;
	}
	.pills:hover .pills__track,
	.pills.is-held .pills__track { animation-play-state: paused; }
}

/* RTL: each row starts at the right; moving right by one copy's width brings the copy exactly where the row was. */
@keyframes features-marquee { to { transform: translateX(50%); } }
@keyframes features-marquee-back { from { transform: translateX(50%); } to { transform: none; } }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.pills__track {
		width: auto;
		overflow-x: auto;
		animation: none;
		scrollbar-width: none;
	}
	.pills__track::-webkit-scrollbar { display: none; }
	.pills__row { padding-inline: 20px; }
	.pills__row--copy { display: none; }
}