/**
 * Public marketing site.
 *
 * Section order follows the Figma frame "home desktop" (1:16).
 */

/* =========================================================================
   Header - 1:17 (desktop) / 1:711 (mobile)
   ========================================================================= */

.ts-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ts-bg);
	border-bottom: 1px solid var(--ts-hairline);
	backdrop-filter: blur(9px);
}

.ts-header__inner {
	display: flex;
	align-items: center;
	/* The Figma frame is 77px tall including its bottom border - the hero
	   starts at y=77 - so the inner row is 76px. */
	height: calc(var(--ts-header-h) - 1px);
}

/* ---- logo ---- */

.ts-logo {
	display: flex;
	align-items: center;
	gap: 12px;               /* wordmark starts at x=51, mark is 39 wide */
	flex-shrink: 0;
}

.ts-logo__mark {
	display: grid;
	place-items: center;
	width: 39px;
	height: 39px;
	border-radius: var(--ts-r-logo);
	background: var(--ts-ink);
	color: var(--ts-white);
	font-size: 22px;
	line-height: 29.7px;
	font-weight: 700;
	box-shadow: var(--ts-shadow-logo);
}

.ts-logo__name {
	font-size: 22px;
	line-height: 29.7px;
	font-weight: 700;
	color: var(--ts-ink);
}

/* ---- nav ----
   Nav text begins at x=391.7 and the logo ends at x=309.03, so the offset is
   ~82px rather than a centred distribution. */

.ts-nav { margin-left: 76px; }

.ts-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
}

.ts-nav__link {
	white-space: nowrap;
	font-size: 14px;
	line-height: 18.9px;
	font-weight: 700;
	color: var(--ts-text);
	transition: color .15s ease;
}

.ts-nav__link:hover { color: var(--ts-ink); }

/* Translated labels are longer than the English the 1180 grid was drawn around,
   and a nav item breaking onto two lines looks broken. The header alone widens
   for those languages and tightens its spacing; every other section keeps the
   1180 column, and English is untouched. */
html[lang='es'] .ts-header__inner,
html[lang='pt-BR'] .ts-header__inner {
	width: min(1320px, 100% - (var(--ts-gutter) * 2));
}

html[lang='es'] .ts-nav,
html[lang='pt-BR'] .ts-nav { margin-left: 40px; }

html[lang='es'] .ts-nav__list,
html[lang='pt-BR'] .ts-nav__list { gap: 24px; }

/* ---- header CTAs ---- */

.ts-header__cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
}

/* The header pills deviate from the Button component: 51.59px tall (21.6 line
   height + 15px padding) and fully rounded. The two are also hand-sized in
   Figma (136.89 and 195.19), so no single padding reproduces both - 19px makes
   the pair total exactly 342.08px, landing the group's right edge on x=1310. */
.ts-header__cta .ts-btn {
	padding: 15px 19px;
	line-height: 21.6px;
	border-radius: var(--ts-r-pill);
}

.ts-header__cta .ts-btn--primary { box-shadow: var(--ts-shadow-btn-hdr); }

/* ---- burger (mobile only) ---- */

.ts-burger {
	display: none;
	margin-left: auto;
	padding: 12px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-brand);
	color: var(--ts-white);
	box-shadow: 0 14px 35px rgba(26, 26, 35, .18);
}

/* =========================================================================
   Hero - 1:32
   ========================================================================= */

.ts-hero {
	background: var(--ts-bg);
	padding: 100px 0 60px;
}

.ts-hero__inner {
	display: flex;
	align-items: center;
	gap: 38px;
}

/* ---- left column ---- */

.ts-hero__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 595px;
	flex-shrink: 0;
}

.ts-hero__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ts-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ts-hero__title {
	display: flex;
	flex-direction: column;
	font-size: var(--ts-h1-size);
	line-height: var(--ts-h1-lh);
	letter-spacing: var(--ts-h1-ls);
	font-weight: 700;
	color: var(--ts-brand);
}

/* Figma pulls the first two lines up 4px each, tightening the stack to 86px
   without changing the 90px line box. */
.ts-hero__title span:not(:last-child) { margin-bottom: -4px; }

.ts-hero__title .is-light { color: var(--ts-brand-light); }

.ts-hero__lede {
	width: 515px;
	max-width: 100%;
	font-size: var(--ts-b2-size);
	line-height: var(--ts-b2-lh);
	color: var(--ts-text);
}

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

.ts-hero__btns .ts-btn--primary { width: 204px; }

/* ---- trust strip ---- */

/* Desktop: a single pill, items separated by a pipe, icons suppressed. */
.ts-hero__strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 8px 14px;
	border-radius: 40px;
	background: rgba(255, 255, 255, .7);
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	color: var(--ts-text);
	white-space: nowrap;
}

/* The strip is one line by design. Spanish and Portuguese run ~30% longer than
   the English it was sized for, so they step down a little rather than wrap. */
html[lang='es'] .ts-hero__strip,
html[lang='pt-BR'] .ts-hero__strip {
	gap: 8px;
	padding-inline: 12px;
	font-size: 11.5px;
}

html[lang='es'] .ts-hero__strip li,
html[lang='pt-BR'] .ts-hero__strip li { gap: 8px; }

.ts-hero__strip li {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ts-hero__strip li:not(:first-child)::before {
	content: '|';
	font-weight: 500;
}

.ts-hero__strip-icon { display: none; }

/* ---- right card ---- */

.ts-hero__card {
	display: flex;
	flex-direction: column;
	width: 547px;
	/* min- rather than fixed: Spanish and Portuguese labels wrap to two lines in
	   the stat pills, which overflowed a hard 660. English is unchanged. */
	min-height: 660px;
	flex-shrink: 0;
	/* Figma measures the 18px/31px insets from the frame edge, which includes
	   the 1px border. Padding sits inside it, so each value loses 1px. */
	padding: 17px 17px 30px;
	border: 1px solid var(--ts-hairline);
	border-radius: 40px;
	background: var(--ts-white);
	box-shadow: var(--ts-shadow-card);
	overflow: hidden;
}

.ts-hero__video {
	position: relative;
	height: 330px;
	flex-shrink: 0;
	border-radius: 28px;
	/* Clips the poster to the radius. The play button's 18px shadow ring is
	   128px across, centred in a 511x330 block, so nothing of it is cut. */
	overflow: hidden;
	/* Stays as the fallback: the Figma placeholder shows through if no poster
	   is set, or if the file 404s. */
	background: linear-gradient(135deg, #1a1a23 0%, #413fc9 65%, #a8b1c8 100%);
}

/* The poster is 1280x660 (1.94) against a 511x330 block (1.55), so cover trims
   about 10% off each side on desktop and a sliver top and bottom on mobile.
   Both crops keep the presenter and the dashboard whole - checked against the
   real frame, not assumed. */
.ts-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts-hero__video::after {
	content: '';
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 24px;
	pointer-events: none;
}

/* Centred in the video block: Figma puts it at left 208.59 of a 509.2 inner
   width and top 119 of 330, which is dead centre on both axes. */
.ts-hero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 46px;
	background: var(--ts-white);
	color: var(--ts-brand);
	box-shadow: 0 0 0 18px rgba(255, 255, 255, .16);
}

/* The card text sits at left 30 while the video sits at left 18, so the
   copy and stats take an extra 12px inset. */
.ts-hero__card-txt {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 24px;
	padding-inline: 12px;
}

.ts-hero__card-title {
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-hero__card-body {
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

/* margin-top:auto pins the row to the bottom. With the card's 31px bottom
   padding and the 77px pill height that lands them at y=552, as designed. */
.ts-hero__stats {
	display: flex;
	gap: 12px;
	margin-top: auto;
	padding-inline: 12px;
}

.ts-hero__stat {
	flex: 1;
	min-height: 77px;
	padding: 9px 13px;
	border: 1px solid var(--ts-hairline);
	border-radius: 22px;
	background: var(--ts-bg-soft);
}

.ts-hero__stat b {
	display: block;
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-hero__stat span {
	display: block;
	font-size: 14px;
	line-height: 22px;
	color: var(--ts-text);
}

/* =========================================================================
   Section heading - 1:70 (shared by every landing-page section)
   ========================================================================= */

.ts-section-heading {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ts-section-heading__sub {
	margin-top: 6px;
	font-size: var(--ts-b2-size);
	line-height: var(--ts-b2-lh);
	color: var(--ts-text);
}

/* =========================================================================
   Explore results - 1:67

   Note on the odd decimals below: the inner chart panel is scaled to 0.945 in
   Figma, so its type sizes, radii and borders all carry that factor
   (28 -> 26.459, 30 -> 28.349, 1 -> 0.945). They are reproduced literally.
   ========================================================================= */

.ts-results { padding: 60px 0; }

.ts-results__card {
	margin-top: 32px;
	/* Insets measured from the frame edge, minus the 1px border. */
	padding: 27.14px 27px 29.59px;
	border: 1px solid var(--ts-hairline);
	border-radius: 40px;
	background: var(--ts-white);
	box-shadow: 0 24px 35px rgba(26, 26, 35, .1);
}

/* ---- market toggle ---- */

.ts-results__toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 25px;
}

.ts-chip {
	height: 41px;
	padding-inline: 16.8px;
	border: 1px solid var(--ts-hairline);
	border-radius: var(--ts-r-pill);
	background: var(--ts-bg-soft);
	color: var(--ts-text);
	font-size: 13.3px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.ts-chip.is-active {
	background: var(--ts-brand);
	color: var(--ts-white);
}

/* ---- body: year rail + panel ---- */

.ts-results__body {
	display: flex;
	gap: 22px;
	align-items: flex-start;
}

.ts-results__years {
	width: 181px;
	flex-shrink: 0;
	padding-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 13.3px;
}

.ts-year {
	display: block;
	width: 100%;
	padding-left: 38.5px;
	text-align: left;
	font-size: 38px;
	line-height: 54px;
	font-weight: 700;
	color: var(--ts-muted);
	border-radius: 18px;
	transition: color .15s ease, background-color .15s ease;
}

@media (hover: hover) {
	.ts-year:hover { color: var(--ts-brand); }
}

/* The active year gets a filled pill 59px tall against a 54px line box. */
.ts-year.is-active {
	padding-block: 2.5px;
	background: var(--ts-bg-soft);
	color: var(--ts-brand);
}

/* ---- panel ---- */

.ts-panel {
	flex: 1;
	min-width: 0;
	/* 24.57 / 38.76 insets, each less the 0.945px border. */
	padding: 23.625px 23.625px 37.815px;
	border: 0.945px solid var(--ts-hairline);
	border-radius: 28.349px;
	background: var(--ts-bg-soft);
}

.ts-panel[hidden] { display: none; }

.ts-panel__title {
	font-size: 26.459px;
	line-height: 35.72px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-panel__sub {
	margin-top: 5.28px;
	font-size: 17.009px;
	line-height: 27.215px;
	color: var(--ts-text);
}

/* ---- bars ---- */

.ts-chart {
	display: flex;
	align-items: flex-end;
	gap: 9.35px;
	height: 240.967px;
	margin-top: 24.94px;
	padding-inline: 7.56px;
	border-bottom: 0.945px solid var(--ts-bg);
}

.ts-bar {
	flex: 1;
	display: flex;
	align-items: flex-end;
	height: 100%;
}

/* Tallest bar in the Figma desktop plot. Mobile overrides it for its 99px plot.
   A length rather than a percentage of the plot: percentages inside calc() for
   height resolve unreliably against a flex item, and measured as 0 here. */
.ts-chart { --ts-bar-max: 207.893px; }

.ts-bar span {
	display: block;
	width: 100%;
	height: calc(var(--p, 0) * var(--ts-bar-max));
	border-radius: 13.23px 13.23px 0 0;
	background: linear-gradient(to bottom, #413fc9, #8b8af4);
	will-change: height;
}

/* Animation is opt-in: chart.js adds .is-armed only when it is safe to run, so
   with JS off - or with reduced motion - bars render straight at their resting
   height and nothing is hidden. */
.ts-chart.is-armed .ts-bar span {
	height: 0;
	transition: height .75s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * 45ms);
}

.ts-chart.is-armed.is-in .ts-bar span {
	height: calc(var(--p, 0) * var(--ts-bar-max));
}

/* Negative months use their own red gradient - not the #dc3b42 used for
   negative numbers in the table below. */
.ts-bar.is-neg span {
	background: linear-gradient(to bottom, #ff6b6b, #ff9f9f);
}

.ts-chart__months {
	display: flex;
	gap: 9.35px;
	margin-top: 9.36px;
	padding-inline: 7.56px;
}

.ts-chart__months li {
	flex: 1;
	text-align: center;
	font-size: 11.34px;
	line-height: 15.308px;
	color: var(--ts-text);
}

/* ---- returns table ---- */

/* Only one table orientation renders at a time - see results.php. */
.ts-panel__table--tall { display: none; }

.ts-panel__table {
	margin-top: 26.54px;
	border: 0.945px solid var(--ts-hairline);
	border-radius: 20.789px;
	background: var(--ts-white);
	overflow: hidden;
}

.ts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.285px;
	line-height: 16.584px;
	font-weight: 700;
}

.ts-table th,
.ts-table td {
	height: 43.988px;
	padding: 0 6px;
	text-align: center;
	border-bottom: 0.945px solid var(--ts-hairline);
	color: var(--ts-ink);
	white-space: nowrap;
}

.ts-table thead th:first-child,
.ts-table tbody th {
	padding-left: 11.34px;
	text-align: left;
}

.ts-table tbody tr:last-child th,
.ts-table tbody tr:last-child td { border-bottom: 0; }

.ts-table td.is-pos { color: var(--ts-pos); }
.ts-table td.is-neg { color: var(--ts-neg); }

.ts-panel__note {
	margin-top: 15.11px;
	font-size: 12.285px;
	line-height: 19.655px;
	color: var(--ts-text);
}

/* =========================================================================
   How it works - 1:198
   ========================================================================= */

.ts-how { padding: 60px 0; }

.ts-steps {
	display: flex;
	align-items: stretch;      /* cards are self-stretch in Figma */
	gap: 20px;
	margin-top: 32px;
}

.ts-step {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 380px;              /* 3 x 380 + 2 x 20 = 1180 */
	padding: 28px;
	border-radius: 30px;
	background: var(--ts-white);
	box-shadow: 0 16px 20px rgba(26, 26, 35, .06);
}

.ts-step__num {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 16px;
	background: var(--ts-brand);
	color: var(--ts-white);
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	font-weight: 700;
}

.ts-step__txt {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ts-step__title {
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-step__body {
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

/* =========================================================================
   Simple pricing - 1:207
   ========================================================================= */

.ts-pricing { padding: 60px 0; }

/* Laid out with flex rather than absolute positioning so the panel grows when
   translated copy runs longer. The numbers reproduce the Figma placement
   exactly: 32 padding, a 536 copy column, then 102 to the card at x=670. */
.ts-pricing__panel {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 96px;
	min-height: 469px;
	/* Asymmetric on purpose: Figma puts the card at top 32 and leaves 21.45
	   below it, not a matching 32. A symmetric inset made the panel 10.5px
	   taller than the design. */
	padding: 32px 32px 21.45px;
	border-radius: 42px;
	background: var(--ts-brand);
}

.ts-pricing__left {
	width: 536px;
	flex-shrink: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.ts-pricing__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ts-pricing__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ts-pricing__eyebrow {
	font-size: var(--ts-eyebrow-size);
	line-height: var(--ts-eyebrow-lh);
	letter-spacing: var(--ts-eyebrow-ls);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ts-muted);
}

.ts-pricing__title {
	display: flex;
	flex-direction: column;
	font-size: var(--ts-h2-size);
	line-height: var(--ts-h2-lh);
	letter-spacing: var(--ts-h2-ls);
	font-weight: 700;
	color: var(--ts-white);
}

.ts-pricing__body {
	font-size: var(--ts-b2-size);
	line-height: var(--ts-b2-lh);
	color: var(--ts-muted);
}

/* Larger than the standard Button: 24/32 type in a 250px pill. */
.ts-pricing__cta {
	min-width: 250px;
	width: fit-content;
	background: var(--ts-white);
	color: var(--ts-brand);
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	box-shadow: var(--ts-shadow-btn);
}

@media (hover: hover) {
	.ts-pricing__cta:hover { background: var(--ts-white); }
}

.ts-pricing__card {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: 30px;
	background: var(--ts-white);
}

.ts-pricing__card-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.ts-pricing__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--ts-hairline);
	border-radius: var(--ts-r-pill);
	background: rgba(255, 255, 255, .65);
	font-size: 13px;
	line-height: 17.55px;
	font-weight: 700;
	color: var(--ts-text);
}

.ts-pricing__dot {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: var(--ts-brand);
}

.ts-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	height: 76px;
}

.ts-price b {
	font-size: 76px;
	line-height: 76px;
	letter-spacing: -6.08px;
	font-weight: 700;
	color: var(--ts-brand);
}

.ts-price span {
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	font-weight: 400;
	color: var(--ts-text);
}

.ts-pricing__features li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 13px;
	border-bottom: 1px solid var(--ts-hairline);
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

.ts-tick {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(65, 63, 201, .1);
	color: var(--ts-brand);
}

/* =========================================================================
   Strategy control room - 1:241
   ========================================================================= */

.ts-strategy { padding: 60px 0; }

.ts-strategy__blocks {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-top: 32px;
}

.ts-strategy__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 580px;              /* 2 x 580 + 20 = 1180 */
	padding: 32px;
	border-radius: 34px;
	background: var(--ts-white);
}

.ts-strategy__title {
	font-size: 26px;
	line-height: 35.1px;
	font-weight: 700;
	color: var(--ts-ink);
}

/* Body copy here runs 16/25.6, looser than the 16/22 B1 token. */
.ts-strategy__body {
	font-size: var(--ts-b1-size);
	line-height: 25.6px;
	color: var(--ts-text);
}

/* ---- market chips ---- */

.ts-strategy__markets {
	display: flex;
	gap: 12px;
	margin-top: auto;
}

.ts-market {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 21px 19px;
	border: 1px solid var(--ts-hairline);
	border-radius: 22px;
	background: var(--ts-bg-soft);
	color: var(--ts-ink);
	text-align: center;
}

.ts-market.is-active {
	background: var(--ts-brand);
	color: var(--ts-white);
}

.ts-market b {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	font-weight: 700;
}

.ts-market span {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	font-weight: 400;
}

/* ---- risk dashboard ---- */

.ts-strategy__risk {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

.ts-strategy__meter-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: auto;
}

.ts-meter {
	height: 14px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-bg);
	overflow: hidden;
}

.ts-meter span {
	display: block;
	height: 100%;
	border-radius: var(--ts-r-pill);
	background: var(--ts-brand);
}

.ts-strategy__stats {
	display: flex;
	gap: 12px;
}

.ts-strategy__stats li {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 17px;
	border: 1px solid var(--ts-hairline);
	border-radius: 22px;
	background: var(--ts-bg-soft);
}

.ts-strategy__stats b {
	font-size: 18px;
	line-height: 24.3px;
	font-weight: 700;
	color: var(--ts-ink);
}

/* Figma pins this label to a 13px box and centres the 17.55px line inside it,
   so the box is shorter than the line. Sizing it naturally makes each stat
   4.55px taller, which propagates to the whole section. */
.ts-strategy__stats span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 13px;
	font-size: 13px;
	line-height: 17.55px;
	color: var(--ts-text);
}

/* =========================================================================
   Why investors choose us - 1:272
   ========================================================================= */

.ts-why { padding: 60px 0; }

.ts-why__cards {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-top: 32px;
}

.ts-why__card {
	position: relative;
	width: 380px;
	/* The copy sits in flow under a 263px reserve for the illustration, rather
	   than absolutely at top:263, so a longer translation grows the card instead
	   of spilling out of the bottom. */
	min-height: 406px;
	padding: 262px 29px 26px 25px;
	border: 1px solid var(--ts-hairline);
	border-radius: 30px;
	background: var(--ts-white);
	box-shadow: 0 16px 40px rgba(26, 26, 35, .06);
	overflow: hidden;
}

/* The illustration bleeds off the top of the card and is clipped. Each of the
   three has its own size, offset and corner radius in Figma - there is no
   shared frame - so the geometry is set per position below. */
.ts-why__img {
	position: absolute;
	display: block;
	overflow: hidden;
}

.ts-why__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts-why__card:nth-child(1) .ts-why__img {
	left: 107px;
	top: -12.61px;
	width: 328px;
	height: 270px;
	border-radius: 101px 9.479px 9.479px 9.479px;
}

.ts-why__card:nth-child(2) .ts-why__img {
	left: 125px;
	top: -11.32px;
	width: 278px;
	height: 281.701px;
	border-radius: 81.874px;
}

.ts-why__card:nth-child(3) .ts-why__img {
	left: 116px;
	top: -5px;
	width: 291px;
	height: 260.417px;
	border-radius: 94.529px;
}

.ts-why__txt {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ts-why__title {
	/* Figma pins this to a 24px box against a 32px line. min- rather than
	   fixed: a Portuguese title runs to two lines and a hard 24 clipped it. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 24px;
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-why__body {
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

/* =========================================================================
   Trust center - 1:293
   ========================================================================= */

.ts-trust { padding: 60px 0; }

/* This section's heading stack uses gap 9 + a 14px gap to the sub-line. */
.ts-trust .ts-section-heading { gap: 9px; }

.ts-trust .ts-section-heading__sub { margin-top: 5px; }

.ts-trust__blocks {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-top: 32px;
}

.ts-trust__list {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 28px;
	border-radius: 30px;
	background: var(--ts-white);
	box-shadow: 0 18px 25px rgba(26, 26, 35, .07);
}

.ts-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--ts-hairline);
	border-radius: 20px;
	background: var(--ts-bg-soft);
}

/* 38px badge here, against the 24px one in the pricing list. */
.ts-trust__tick {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 14px;
	background: rgba(65, 63, 201, .1);
	color: var(--ts-brand);
}

.ts-trust__txt {
	display: flex;
	flex-direction: column;
	font-size: var(--ts-b1-size);
	line-height: 20px;
}

.ts-trust__txt b {
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-trust__txt span { color: var(--ts-text); }

/* ---- transparency score ---- */

.ts-score {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 31px;
	padding: 32px;
	border-radius: 30px;
	background: linear-gradient(111.16deg,
		#1a1a23 20.506%,
		#413fc9 68.576%,
		#a8b1c8 106.41%);
}

.ts-score__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ts-r-pill);
	background: rgba(255, 255, 255, .15);
	font-size: 13px;
	line-height: 17.55px;
	font-weight: 700;
	color: var(--ts-white);
}

.ts-score__value {
	font-size: 76px;
	line-height: 76px;
	font-weight: 700;
	color: var(--ts-white);
	text-align: center;
}

.ts-score__body {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	color: var(--ts-bg);
	text-align: center;
}

.ts-score__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 18/19 insets less the 1px border, so the pill measures 57.6px as designed
	   rather than 59.6px - which otherwise pushes the whole section 1.4px. */
	padding: 17px 18px;
	border: 1px solid var(--ts-hairline);
	border-radius: var(--ts-r-pill);
	background: var(--ts-white);
	color: var(--ts-ink);
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	font-weight: 700;
}

/* =========================================================================
   FAQ - 1:325
   ========================================================================= */

.ts-faq { padding: 60px 0; }

.ts-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 32px;
}

.ts-faq__row {
	border: 1px solid var(--ts-hairline);
	border-radius: 18px;
	background: var(--ts-white);
	overflow: hidden;
}

.ts-faq__q {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	/* 48px caret + 9px top and bottom + 2px border = the 68px Figma row. */
	padding: 9px 22px;
	text-align: left;
	font-size: var(--ts-h3-size);
	line-height: var(--ts-h3-lh);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-faq__q > span:first-child { flex: 1 0 0; min-width: 0; }

.ts-faq__caret {
	display: block;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	color: var(--ts-ink);
	transition: transform .2s ease;
}

.ts-faq__q[aria-expanded='true'] .ts-faq__caret { transform: rotate(180deg); }

/* Rows with no answer keep the row height but drop the caret. */
.ts-faq__row.is-static .ts-faq__q { min-height: 66px; }

.ts-faq__a {
	padding: 0 22px 22px;
	font-size: var(--ts-b1-size);
	line-height: var(--ts-b1-lh);
	color: var(--ts-text);
}

.ts-faq__a[hidden] { display: none; }

/* Runs as the panel goes from display:none to block, so no JS change needed. */
.ts-faq__a {
	animation: ts-reveal .24s ease both;
}

@keyframes ts-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Footer - 1:337
   ========================================================================= */

.ts-footer {
	background: var(--ts-ink);
	/* Figma centres the risk block at y=297.5 of a 422px footer; with the
	   measured 153.72px block that resolves to a 47.64px bottom inset. */
	padding: 48px 0 47.64px;
}

.ts-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.ts-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 400.5px;
}

/* The footer logo inverts: white tile, brand-coloured letter. */
.ts-logo__mark--invert {
	background: var(--ts-white);
	color: var(--ts-brand);
}

.ts-logo__name--invert { color: var(--ts-white); }

.ts-footer__tagline {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	color: var(--ts-muted);
}

.ts-footer__col {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ts-footer__col-title {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	font-weight: 700;
	color: var(--ts-white);
}

.ts-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ts-footer__col li {
	font-size: var(--ts-b1-size);
	line-height: 21.6px;
	color: var(--ts-muted);
}

.ts-footer__col a { transition: color .15s ease; }
.ts-footer__col a:hover { color: var(--ts-white); }

.ts-footer__risk {
	width: 401px;
	margin-top: 48.26px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13px;
	line-height: 21.45px;
	color: var(--ts-muted);
}

/* =========================================================================
   Mobile menu overlay - 1:710
   ========================================================================= */

/* The overlay stays in the layout and animates on visibility/opacity - display
   cannot be transitioned. visibility:hidden also keeps it out of the
   accessibility tree while closed, which display:none did for free. */
.ts-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--ts-bg);
	opacity: 0;
	visibility: hidden;
	/* pointer-events is the safety net. A visibility transition with a delay
	   can be left mid-flight by rapid toggling, and a full-viewport overlay at
	   opacity 0 would then silently swallow every click on the page. This does
	   not depend on the transition completing. */
	pointer-events: none;
	transform: translateY(-6px);
	transition:
		opacity .2s ease,
		transform .28s cubic-bezier(.22, 1, .36, 1),
		visibility 0s linear .28s;      /* hide only after the fade finishes */
}

.ts-mobile-menu[data-open='true'] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition:
		opacity .2s ease,
		transform .28s cubic-bezier(.22, 1, .36, 1),
		visibility 0s;                  /* show immediately on open */
}

.ts-mobile-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--ts-hairline);
}

.ts-mobile-menu__close {
	padding: 12px;
	border-radius: var(--ts-r-pill);
	background: var(--ts-brand);
	color: var(--ts-white);
	box-shadow: 0 14px 35px rgba(26, 26, 35, .18);
	flex-shrink: 0;
}

.ts-mobile-menu__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 70px 20px 20px;
	overflow-y: auto;
}

.ts-mobile-menu__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.ts-mobile-menu__link {
	font-size: 32px;
	font-weight: 700;
	color: var(--ts-text);
	white-space: nowrap;
}

.ts-mobile-menu__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* The overlay buttons are wider and squarer than the header pills. */
.ts-mobile-menu__cta .ts-btn {
	width: 100%;
	padding: 14px 24px;
	border-radius: 40px;
	line-height: 22px;
}

.ts-mobile-menu__cta .ts-btn--primary {
	box-shadow: 0 14px 16px rgba(26, 26, 35, .16);
}

/* Links and buttons drift up in sequence behind the overlay fade. --d is set
   per item below so the whole thing lands in well under half a second. */
.ts-mobile-menu__list li,
.ts-mobile-menu__cta .ts-btn {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity .26s ease,
		transform .32s cubic-bezier(.22, 1, .36, 1);
}

.ts-mobile-menu[data-open='true'] .ts-mobile-menu__list li,
.ts-mobile-menu[data-open='true'] .ts-mobile-menu__cta .ts-btn {
	opacity: 1;
	transform: none;
	transition-delay: var(--d, 0s);
}

.ts-mobile-menu__list li:nth-child(1) { --d: .05s; }
.ts-mobile-menu__list li:nth-child(2) { --d: .09s; }
.ts-mobile-menu__list li:nth-child(3) { --d: .13s; }
.ts-mobile-menu__list li:nth-child(4) { --d: .17s; }
.ts-mobile-menu__list li:nth-child(5) { --d: .21s; }

.ts-mobile-menu__cta .ts-btn:nth-child(1) { --d: .24s; }
.ts-mobile-menu__cta .ts-btn:nth-child(2) { --d: .28s; }

/* Press feedback on the two round controls. */
.ts-burger,
.ts-mobile-menu__close {
	transition: transform .18s cubic-bezier(.22, 1, .36, 1), background-color .18s ease;
}

.ts-burger:active { transform: scale(.92); }

/* The close button unwinds a quarter turn as the overlay arrives. */
.ts-mobile-menu__close { transform: rotate(-90deg) scale(.9); }

.ts-mobile-menu[data-open='true'] .ts-mobile-menu__close {
	transform: none;
	transition-delay: .06s;
}

/* Needs to outrank the open-state rule above, hence the same prefix. */
.ts-mobile-menu[data-open='true'] .ts-mobile-menu__close:active {
	transform: scale(.92);
	transition-delay: 0s;
}

body.ts-menu-open { overflow: hidden; }

/* =========================================================================
   Legal pages - Terms, Privacy, Risk Warning
   ========================================================================= */

.ts-legal { padding: 72px 0 96px; }

.ts-legal__inner {
	/* Narrower than the 1180 grid: long-form text wants ~70 characters. */
	max-width: 760px;
}

.ts-legal__head {
	padding-bottom: 28px;
	border-bottom: 1px solid var(--ts-hairline);
}

.ts-legal__title {
	font-size: var(--ts-h2-size);
	line-height: var(--ts-h2-lh);
	letter-spacing: var(--ts-h2-ls);
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-legal__sub {
	margin-top: 12px;
	font-size: var(--ts-b2-size);
	line-height: var(--ts-b2-lh);
	color: var(--ts-text);
}

.ts-legal__updated {
	margin-top: 14px;
	font-size: 14px;
	color: var(--ts-muted);
}

.ts-legal__body {
	margin-top: 36px;
	font-size: var(--ts-b1-size);
	line-height: 26px;
	color: var(--ts-text);
}

.ts-legal__body h2 {
	margin-top: 40px;
	font-size: 26px;
	line-height: 34px;
	letter-spacing: -.5px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-legal__body h3 {
	margin-top: 28px;
	font-size: 19px;
	line-height: 28px;
	font-weight: 700;
	color: var(--ts-ink);
}

.ts-legal__body p { margin-top: 14px; }

.ts-legal__body ul {
	margin-top: 14px;
	padding-left: 0;
	list-style: none;
}

.ts-legal__body li {
	position: relative;
	margin-top: 10px;
	padding-left: 26px;
}

.ts-legal__body li::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ts-brand);
}

.ts-legal__body a {
	color: var(--ts-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ts-legal__body strong { color: var(--ts-ink); }

/* Tables carry real data in the privacy policy, so they scroll rather than
   squash on a phone. */
.ts-legal__table {
	display: block;
	width: 100%;
	margin-top: 20px;
	overflow-x: auto;
	border-collapse: collapse;
	white-space: normal;
}

.ts-legal__table th,
.ts-legal__table td {
	min-width: 160px;
	padding: 12px 14px;
	border: 1px solid var(--ts-hairline);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 22px;
}

.ts-legal__table th {
	background: var(--ts-bg-soft);
	font-weight: 700;
	color: var(--ts-ink);
}

@media (max-width: 900px) {
	.ts-legal { padding: 48px 0 64px; }

	.ts-legal__title {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -1px;
	}

	.ts-legal__sub { font-size: var(--ts-b1-size); line-height: 24px; }
	.ts-legal__body h2 { margin-top: 32px; font-size: 21px; line-height: 29px; }
	.ts-legal__body h3 { font-size: 17px; line-height: 25px; }
	.ts-legal__body { font-size: 15px; line-height: 25px; }
}

/* =========================================================================
   Reduced motion

   Everything animated above is decorative - nothing conveys state on its own,
   so it can all be switched off without losing meaning. The overlay keeps its
   visibility switch so it still opens and closes, just instantly.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.ts-mobile-menu,
	.ts-mobile-menu[data-open='true'] {
		transform: none;
		transition: visibility 0s;
	}

	.ts-mobile-menu__list li,
	.ts-mobile-menu__cta .ts-btn,
	.ts-mobile-menu[data-open='true'] .ts-mobile-menu__list li,
	.ts-mobile-menu[data-open='true'] .ts-mobile-menu__cta .ts-btn {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.ts-burger,
	.ts-mobile-menu__close,
	.ts-mobile-menu[data-open='true'] .ts-mobile-menu__close {
		transform: none;
		transition: none;
	}

	.ts-faq__a { animation: none; }
	.ts-faq__caret { transition: none; }
	.ts-year,
	.ts-chip { transition: none; }
}

/* =========================================================================
   Breakpoints
   ========================================================================= */

@media (max-width: 1100px) {
	.ts-nav { margin-left: 40px; }
	.ts-nav__list { gap: 24px; }
}

/* =========================================================================
   Mobile - Figma frame "home mobile" (1:379), 360px wide

   Reference width is 360 with a 20px gutter, so the content column is 320px -
   which the existing .ts-container formula already yields.
   ========================================================================= */

@media (max-width: 900px) {

	/* ---- header (1:380) ---- */
	.ts-header__inner { height: 75px; }        /* 76px frame less the border */
	.ts-nav,
	.ts-header__cta { display: none; }
	.ts-burger { display: block; }

	/* ---- hero (1:386) ---- */
	.ts-hero { padding: 48px 0; }

	.ts-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.ts-hero__left { width: 100%; }

	.ts-hero__title {
		font-size: 48px;
		line-height: normal;                   /* Figma uses the font default here */
	}

	.ts-hero__lede {
		width: 100%;
		font-size: var(--ts-b1-size);
		line-height: 1.5;
	}

	.ts-hero__btns { flex-direction: column; }
	.ts-hero__btns .ts-btn { width: 100%; }

	/* Strip becomes three separate rows, each with its own tick (1:399). */
	.ts-hero__strip {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 0;
		background: none;
		border-radius: 0;
		white-space: normal;
	}

	.ts-hero__strip li {
		gap: 8px;
		padding: 8px 14px;
		border-radius: 8px;
		background: rgba(255, 255, 255, .7);
	}

	.ts-hero__strip li:not(:first-child)::before { content: none; }

	.ts-hero__strip-icon {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		color: var(--ts-brand);
	}

	/* ---- hero card (1:403) ---- */
	.ts-hero__card {
		width: 100%;
		height: 688px;
		padding: 14px;                         /* 15px inset less the border */
	}

	.ts-hero__video { height: 187px; }

	.ts-hero__play {
		width: 64px;
		height: 64px;
	}

	/* Card text sits flush with the card padding on mobile - no extra inset. */
	.ts-hero__card-txt {
		margin-top: 24px;
		padding-inline: 0;
	}

	.ts-hero__stats {
		flex-direction: column;
		gap: 8px;
		margin-top: 32px;                      /* not auto: Figma leaves slack below */
		padding-inline: 0;
	}

	/* ---- explore results (1:423) ----
	   Mobile is a restructure, not a stack: the year rail scrolls sideways with
	   its own indicator, the chart drops to 99px with vertical month labels,
	   and the table transposes so months run down the page. */

	.ts-results { padding: 48px 0; }

	.ts-results__card {
		margin-top: 32px;
		padding: 19px;
	}

	/* Mobile puts the chart title above the tabs, but the title lives inside
	   .ts-panel which comes after them in the DOM. display:contents dissolves
	   the wrappers so every piece becomes a direct flex child of the card and
	   `order` can sequence them. Hidden panels keep display:none and so
	   contribute nothing. */
	.ts-results__card {
		display: flex;
		flex-direction: column;
	}

	.ts-results__body,
	.ts-panel { display: contents; }

	/* Panel loses its own frame on mobile - the card is the frame. */
	.ts-panel {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.ts-panel__title      { order: 1; }
	.ts-panel__sub        { order: 2; }
	.ts-results__toggle   { order: 3; }
	.ts-results__years    { order: 4; }
	.ts-chart             { order: 5; }
	.ts-chart__months     { order: 6; }
	.ts-panel__table      { order: 7; }
	.ts-panel__note       { order: 8; }

	.ts-panel__title {
		font-size: var(--ts-h3-size);
		line-height: 36px;
	}

	.ts-panel__sub {
		margin-top: 10px;
		font-size: var(--ts-b1-size);
		line-height: 27.5px;
	}

	/* Tabs move below the title on mobile. */
	.ts-results__toggle {
		order: 2;
		margin: 27px 0 0;
	}

	.ts-chip {
		flex: 1 0 0;
		min-width: 0;
		padding-inline: 8px;
	}

	/* ---- year rail: horizontal scroller ---- */
	.ts-results__years {
		width: auto;
		flex-direction: row;
		gap: 28px;
		align-items: center;
		margin-top: 28px;
		padding: 0;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ts-results__years::-webkit-scrollbar { display: none; }

	.ts-results__years > li {
		flex-shrink: 0;
		scroll-snap-align: center;
	}

	.ts-year {
		width: auto;
		padding-left: 0;
		white-space: nowrap;
	}

	.ts-year.is-active {
		padding: 2.5px 40px;
	}

	/* ---- compact chart ----
	   The 99px plot needs its own fill ratio; Figma's tallest mobile bar is
	   68.3px, i.e. 69%. Without this the desktop ratio would size bars for a
	   240px plot and they would spill over the year rail. */
	.ts-chart {
		--ts-bar-max: 68.31px;   /* Figma's tallest mobile bar in the 99px plot */
		height: 99px;
		gap: 3px;
		margin-top: 32px;
		padding-inline: 0;
	}

	.ts-bar span { border-radius: 6px 6px 0 0; }

	/* Month labels rotate to read bottom-to-top so twelve fit in 280px. */
	.ts-chart__months {
		gap: 3px;
		margin-top: 0;
		padding-inline: 0;
	}

	.ts-chart__months li {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		text-align: right;
		font-size: 10px;
		line-height: 1;
	}

	/* ---- transposed table ---- */
	.ts-panel__table--wide { display: none; }
	.ts-panel__table--tall { display: block; }

	.ts-panel__table {
		margin-top: 24px;
		border-radius: 18px;
	}

	.ts-table--tall th,
	.ts-table--tall td {
		height: 46px;
		font-size: 13px;
		line-height: 17px;
		text-align: left;
	}

	.ts-table--tall thead th,
	.ts-table--tall tbody th { padding-left: 14px; }

	.ts-panel__note {
		margin-top: 20px;
		font-size: 13px;
		line-height: 20px;
	}

	/* ---------------------------------------------------------------------
	   Remaining sections, matched to their mobile Figma frames:
	   1:556 how, 1:564 pricing, 1:598 strategy, 1:629 why, 1:649 trust,
	   1:680 faq, 1:691 footer.

	   Shared shape: px-20 py-48, a 32px gap under the heading, and cards at
	   full width. Type drops only where Figma drops it.
	   --------------------------------------------------------------------- */

	/* Mobile H2 is 36px on the font's natural leading, keeping the -2 tracking. */
	.ts-section-heading .ts-h2,
	.ts-pricing__title {
		font-size: 36px;
		line-height: normal;
		letter-spacing: -2px;
	}

	/* This heading alone is capped narrower so it breaks after "experience?". */
	.ts-how .ts-section-heading .ts-h2 { max-width: 274px; }

	.ts-how,
	.ts-pricing,
	.ts-strategy,
	.ts-why,
	.ts-trust,
	.ts-faq { padding: 48px 0; }

	/* How it works */
	.ts-steps { flex-direction: column; }
	.ts-step { width: 100%; }

	/* Pricing (1:565) - absolutely composed on desktop, flows here. */
	.ts-pricing__panel {
		height: auto;
		display: flex;
		flex-direction: column;
		padding: 40px 20px 20px;
	}

	/* Figma orders it copy -> card -> CTA, but the CTA lives inside the copy
	   column in the DOM. Dissolving the wrapper lets `order` sequence all three
	   as siblings; margins carry the 32/20 gaps the design uses. */
	.ts-pricing__left { display: contents; }

	.ts-pricing__copy {
		order: 0;
		gap: 16px;
	}

	.ts-pricing__head { gap: 6px; }

	.ts-pricing__card {
		order: 1;
		position: static;
		transform: none;
		width: 100%;
		margin-top: 32px;
		padding: 24px;
		gap: 16px;
	}

	.ts-pricing__features li { white-space: normal; }

	.ts-pricing__cta {
		order: 2;
		width: 100%;
		height: 60px;
		margin-top: 20px;
		padding: 14px 24px;
	}

	/* Figma keeps the price at 76px on mobile and stacks the label underneath
	   rather than beside it - that, not a smaller number, is what makes it fit
	   a 320px column. 76 + 6 + 22 = the 104px block in the design. */
	.ts-price {
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		gap: 6px;
	}

	.ts-price b {
		font-size: 76px;
		line-height: 76px;
		letter-spacing: -6.08px;
	}

	/* Strategy */
	.ts-strategy__blocks { flex-direction: column; }
	.ts-strategy__card { width: 100%; }
	.ts-strategy__markets { flex-direction: column; }
	.ts-market { white-space: normal; }

	/* All three risk stats stack; wrapping them 2-up was my invention and left
	   the card 87px short of the 498px Figma frame. */
	.ts-strategy__stats { flex-direction: column; }

	/* Why investors (1:634) - the card keeps its absolute composition; only the
	   card height and the image's horizontal anchor change. The illustration
	   stays 328x270 and bleeds off the right edge, which is what puts its
	   subject to the right of centre rather than filling the card. */
	.ts-why__cards { flex-direction: column; }

	.ts-why__card {
		width: 100%;
		min-height: 427px;
		padding: 262px 29px 26px 25px;
	}

	/* Each image shifts 57px left of its desktop anchor, which is exactly where
	   Figma places card 1 (107 -> 50) in the narrower 320px card. */
	.ts-why__card:nth-child(1) .ts-why__img { left: 49px; }
	.ts-why__card:nth-child(2) .ts-why__img { left: 68px; }
	.ts-why__card:nth-child(3) .ts-why__img { left: 59px; }

	.ts-why__txt { width: auto; }

	/* Trust (1:649) - two stacked cards, 20px apart, both full width. */
	.ts-trust__blocks {
		flex-direction: column;
		gap: 20px;
	}

	.ts-score { width: 100%; }

	/* The standfirst drops to 16/22 here; left at the desktop 20/32 it runs a
	   line long and pushes the section 29px. */
	.ts-trust .ts-section-heading__sub {
		margin-top: 14px;
		font-size: var(--ts-b1-size);
		line-height: var(--ts-b1-lh);
	}

	/* FAQ (1:680) - identical to desktop apart from the section padding and the
	   heading. Rows keep 24/32 questions and the 48px caret; they simply grow
	   taller as questions wrap to two lines. */

	/* Footer (1:691) - Figma centres every column: each one's horizontal centre
	   lands on x=160 of the 320 column, so this matches the file as well as the
	   requested look. Brand block, three link columns and the risk warning are
	   all 32px apart. */
	.ts-footer { padding: 48px 0; }

	.ts-footer__top {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		text-align: center;
	}

	.ts-footer__brand {
		width: 100%;
		align-items: center;
	}

	.ts-footer .ts-logo { justify-content: center; }

	.ts-footer__col { align-items: center; }
	.ts-footer__col ul { align-items: center; }

	.ts-footer__risk {
		width: 100%;
		margin-top: 32px;
		text-align: center;
	}
}