/* The Tessa pages (product, tour, pricing) in the look of the product tour film:
   mono labels with the blue square above every title, heavy tight headlines, dash
   bullets with one bold phrase, and corner brackets around the clips. The grid
   ground only sits where the product is on screen (the product page from the hero
   to the App Map); pricing and FAQ are read on white, trial and contact close in
   ink. The pages have no CSS animation; the clips (js/tessa-clips.js) are their
   only motion. Shared pieces (shell, buttons, plans, FAQ, form) stay in
   tessa-product.css. */

.tt-page {
	--tt-ground: #f8f9f8;
	--tt-grid: #f1f1f3;
	--tt-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

/* The grid is a 64px tile, not one long repeating gradient: over a tall ground a
   long gradient rounds unevenly and single lines drop out. */
.tt-page .tt-ground {
	background-color: var(--tt-ground);
	background-image:
		linear-gradient(var(--tt-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--tt-grid) 1px, transparent 1px);
	background-size: 64px 64px;
}

.tt-page .tt-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tt-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tessa-blue-text);
}

.tt-page .tt-eyebrow::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--tessa-blue);
}

/* On the ink close and the contact form the label takes the light blue. */
.tt-page .tt-close .tt-eyebrow,
.tt-page .tp-contact .tt-eyebrow {
	color: var(--tessa-blue-on-dark);
}

.tt-page h1,
.tt-page .tt-head h2,
.tt-page .tt-step h3,
.tt-page .tt-card h3,
.tt-page .tt-try h2,
.tt-page .tt-close h2 {
	font-weight: 800;
	text-wrap: balance;
}

.tt-page .tt-points {
	margin-top: 22px;
	padding: 0;
	display: grid;
	gap: 12px;
	list-style: none;
}

.tt-page .tt-points li {
	position: relative;
	padding-left: 22px;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--tp-muted);
}

.tt-page .tt-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 2px;
	background: var(--tessa-blue);
}

.tt-page .tt-points strong {
	font-weight: 600;
	color: var(--tp-ink);
}

.tt-page .tt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tt-page .tt-actions .tp-button,
.tt-page .tt-close .tp-button {
	min-height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
}

.tt-page .tt-button-tour {
	gap: 8px;
}

.tt-page .tt-note {
	font-weight: 400;
	color: var(--tp-muted);
}

/* Corner brackets, as around the film's frame */
.tt-page .tt-brackets {
	position: relative;
	padding: 14px;
}

.tt-page .tt-brackets::before,
.tt-page .tt-brackets::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border: 3px solid var(--tessa-blue);
	pointer-events: none;
}

.tt-page .tt-brackets::before {
	left: 0;
	top: 0;
	border-right: 0;
	border-bottom: 0;
}

.tt-page .tt-brackets::after {
	right: 0;
	bottom: 0;
	border-left: 0;
	border-top: 0;
}

/* The hero film's controls sit below its 16:9 picture, inside the same figure, so
   the lower bracket is placed by the picture's height, not the figure's. 100cqw is
   the figure's content width (padding already excluded): picture height + 2 × 14px
   padding − the bracket's 34px. */
.tt-page .tt-brackets-film {
	container-type: inline-size;
}

.tt-page .tt-brackets-film::after {
	top: calc(100cqw * 0.5625 + 28px - 34px);
	bottom: auto;
}

/* One clip (partials/tessa-clip.html) */
.tt-page .tt-clip {
	margin: 0;
}

.tt-page .tt-clip-frame {
	border: 1px solid var(--tp-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(17, 17, 19, 0.25);
}

.tt-page .tt-clip-frame {
	position: relative;
}

.tt-page .tt-clip-still {
	display: block;
	width: 100%;
	height: auto;
}

/* The video lies over its still and has no picture until it plays. */
.tt-page .tt-clip-frame video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.tt-page .tt-clip-noscript {
	display: block;
	padding: 12px 14px;
	font-size: 0.875rem;
	text-decoration: underline;
}

.tt-page .tt-clip-controls {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding-top: 2px;
}

/* The button keeps a 44px touch target; the pill drawn inside it is smaller,
   so the controls stay quiet next to the clip. */
.tt-clip-button {
	--tt-pill-height: 30px;
	--tt-pill-line: var(--tp-line, #dedee3);
	--tt-pill-ground: #fff;
	position: relative;
	isolation: isolate;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tp-muted, #66666e);
	cursor: pointer;
}

.tt-clip-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc((100% - var(--tt-pill-height)) / 2) 0;
	border: 1px solid var(--tt-pill-line);
	border-radius: 9999px;
	background: var(--tt-pill-ground);
}

.tt-clip-button:hover,
.tt-clip-button:focus-visible {
	--tt-pill-line: var(--tp-ink, #111113);
	color: var(--tp-ink, #111113);
}

.tt-clip-button[hidden] {
	display: none;
}

/* Hero */
/* The hero has the first screen to itself (up to 880px), its content centred
   under the fixed navigation; the steps open the second screen. */
.tt-page .tt-hero {
	box-sizing: border-box;
	min-height: min(100svh, 880px);
	display: grid;
	align-content: center;
	padding: 104px 0 40px;
}

.tt-page .tt-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}

.tt-page .tt-hero h1 {
	margin-top: 18px;
	font-size: clamp(2.375rem, 5vw, 3.875rem);
	line-height: 1;
	letter-spacing: -0.045em;
}

.tt-page .tt-lead {
	max-width: 520px;
	margin-top: 22px;
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--tp-muted);
}

.tt-page .tt-hero .tt-actions {
	margin-top: 30px;
}

.tt-page .tt-platforms {
	margin-top: 30px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.tt-page .tt-platforms li {
	padding: 5px 9px;
	border: 1px solid var(--tp-line);
	border-radius: 6px;
	background: #fff;
	font-family: var(--tt-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tp-muted);
}

/* Section heads */
.tt-page .tt-head {
	margin-bottom: 52px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
}

.tt-page .tt-head h2 {
	margin-top: 10px;
	font-size: clamp(1.875rem, 4vw, 2.875rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

/* A section without a small label starts with its title. */
.tt-page .tt-head h2:first-child {
	margin-top: 0;
}

/* Core loop */
.tt-page .tt-loop {
	padding: 72px 0 80px;
}

/* The steps follow the hero without a visible heading; it stays for assistive
   technology and the document outline. */
.tt-page .tt-loop .tt-head {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tt-page .tt-step {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
	gap: 56px;
	align-items: center;
	scroll-margin-top: 96px;
}

.tt-page .tt-step + .tt-step {
	margin-top: 88px;
}

.tt-page .tt-step-reversed {
	grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
}

.tt-page .tt-step-reversed .tt-step-copy {
	order: 2;
}

.tt-page .tt-step h3 {
	margin-top: 16px;
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

/* Try-it band */
.tt-page .tt-try {
	padding: 0 0 80px;
}

.tt-page .tt-try-band {
	padding: 26px 30px;
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.tt-page .tt-try .tt-eyebrow {
	margin-bottom: 8px;
}

.tt-page .tt-try h2 {
	font-size: 1.5rem;
	letter-spacing: -0.03em;
}

.tt-page .tt-try p {
	margin-top: 4px;
	color: var(--tp-muted);
}

/* Then it grows, still on the grid ground */
.tt-page .tt-grow {
	padding: 80px 0;
}

.tt-page .tt-grow .tt-head {
	margin-bottom: 44px;
}

.tt-page .tt-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.tt-page .tt-card {
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	scroll-margin-top: 96px;
}

.tt-page .tt-card .tt-clip-frame {
	border: 0;
	border-bottom: 1px solid var(--tp-line);
	border-radius: 0;
	box-shadow: none;
}

.tt-page .tt-card .tt-clip-controls {
	padding: 8px 14px 0;
}

.tt-page .tt-card-copy {
	padding: 10px 24px 26px;
}

.tt-page .tt-card h3 {
	margin-top: 12px;
	font-size: 1.625rem;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.tt-page .tt-card .tt-points {
	margin-top: 14px;
	gap: 8px;
}

.tt-page .tt-card .tt-points li {
	font-size: 0.96875rem;
}

/* App Map finale */
.tt-page .tt-map {
	padding: 80px 0 88px;
	scroll-margin-top: 64px;
}

.tt-page .tt-map .tt-head {
	margin-bottom: 36px;
}

.tt-page .tt-points-row {
	margin-top: 28px;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* Pricing and FAQ on white, in the same heading style as the rest of the page */
.tt-page .tp-tiers-section {
	padding: 96px 0;
	border-top: 1px solid var(--tp-line);
	background: #fff;
}

.tt-page .tp-faq {
	padding-top: 24px;
	border-top: 0;
}

/* On the pricing page everything is white already: the table follows the hero. */
.tt-page.tessa-pricing .tp-tiers-section {
	padding-top: 24px;
	border-top: 0;
}

.tt-page .tp-section-heading h2,
.tt-page .tp-faq h2,
.tt-page .tp-contact h2 {
	margin-top: 10px;
	font-size: clamp(1.875rem, 4vw, 2.875rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.tt-page .tp-contact h2 {
	margin-bottom: 22px;
}

/* The product page's four plan cards; the full comparison is the pricing page. */
.tt-page .tt-plans {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.tt-page .tt-plan {
	padding: 22px 22px 20px;
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	color: var(--tp-ink);
	transition: border-color 120ms ease;
}

.tt-page .tt-plan:hover {
	border-color: var(--tp-ink);
}

.tt-page .tt-plan.is-featured {
	padding: 21px 21px 19px;
	border: 2px solid var(--tp-ink);
}

.tt-page .tt-plan.is-dark {
	border-color: #171717;
	background: #171717;
	color: #fff;
}

.tt-page .tt-plan-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.tt-page .tt-plan-name {
	font-size: 1.0625rem;
	font-weight: 700;
}

.tt-page .tt-plan-who {
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--tp-muted);
}

.tt-page .tt-plan-price {
	margin-top: 22px;
	font-family: var(--tt-mono);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tt-page .tt-plan-hint {
	margin-top: 8px;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: #8a8a93;
}

.tt-page .tt-plan-unit {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: var(--tp-muted);
}

.tt-page .tt-plan-price + .tt-plan-unit {
	margin-top: 8px;
}

.tt-page .tt-plan.is-dark .tt-plan-who,
.tt-page .tt-plan.is-dark .tt-plan-unit {
	color: rgba(237, 237, 237, 0.7);
}

.tt-page .tt-plans-more {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.tt-page .tt-plans-more .tp-button {
	min-height: 48px;
	padding: 0 22px;
	font-size: 1rem;
	font-weight: 600;
}

.tt-page .tt-plans-more p {
	font-size: 0.9375rem;
	color: var(--tp-muted);
}

/* FAQ: the questions beyond the featured six */
.tt-page .tt-faq-more > summary {
	min-height: 44px;
	color: var(--tp-muted);
}

.tt-page .tt-faq-more > .tp-faq-list {
	margin-top: 8px;
}

/* Close */
.tt-page .tt-close {
	padding: 80px 0;
	background: var(--tp-ink);
	color: #fff;
	text-align: center;
}

.tt-page .tt-close .tt-eyebrow {
	justify-content: center;
	margin-bottom: 14px;
}

.tt-page .tt-close h2 {
	max-width: 800px;
	margin: 0 auto 30px;
	font-size: clamp(2rem, 4.4vw, 3.375rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: #fff;
}

/* The two time comparisons above the trial button: Tessa's value with its label,
   then the conventional value, struck through, with its label. */
.tt-page .tt-close h2:has(+ .tt-close-stats) {
	margin-bottom: 34px;
}

.tt-page .tt-close-stats {
	display: flex;
	justify-content: center;
	text-align: left;
}

.tt-page .tt-stat {
	margin: 0;
	padding: 0 44px;
	display: grid;
	grid-template-columns: auto auto auto;
	align-items: baseline;
	column-gap: 18px;
	row-gap: 8px;
}

.tt-page .tt-stat + .tt-stat {
	border-left: 1px solid #2c2c33;
}

.tt-page .tt-stat-value {
	grid-area: 1 / 1;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	white-space: nowrap;
	color: var(--tessa-blue-on-dark);
}

.tt-page .tt-stat-label {
	grid-area: 2 / 1;
	max-width: 15em;
	font-size: 0.875rem;
	line-height: 1.35;
	color: #b9b9c2;
}

.tt-page .tt-stat-versus {
	grid-area: 1 / 2;
	font-family: var(--tt-mono);
	font-size: 0.8125rem;
	color: #8a8a99;
}

.tt-page .tt-stat-old {
	grid-area: 1 / 3;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
	text-decoration-thickness: 2px;
	color: #8a8a99;
}

.tt-page .tt-stat-label-old {
	grid-area: 2 / 3;
	max-width: none;
	color: #8a8a99;
}

.tt-page .tt-stat-note {
	margin: 22px 0 30px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #8a8a99;
}

/* The trial button on the ink close is the blue primary. */
.tt-page .tt-button-light {
	border-color: var(--tessa-blue);
	background: var(--tessa-blue);
	color: #fff;
}

.tt-page .tt-button-light:hover {
	border-color: var(--tessa-blue-hover);
	background: var(--tessa-blue-hover);
	color: #fff;
}

.tt-page .tt-close-link {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 0;
	font-size: 0.9375rem;
	color: var(--tessa-blue-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tt-page .tt-close-link:hover {
	color: #fff;
}

/* Pricing and tour: a centred hero in the product page's type, on white. */
.tt-page .tt-subhero {
	padding: 104px 0 56px;
	text-align: center;
}

.tt-page .tt-subhero .tt-eyebrow {
	justify-content: center;
}

.tt-page .tt-subhero h1 {
	max-width: 900px;
	margin: 18px auto 0;
	font-size: clamp(2.375rem, 5vw, 3.875rem);
	line-height: 1;
	letter-spacing: -0.045em;
}

.tt-page .tt-subhero .tt-lead {
	max-width: 640px;
	margin: 22px auto 0;
}

.tt-page .tt-subhero .tt-actions,
.tt-page .tt-subhero .tt-platforms {
	justify-content: center;
	margin-top: 30px;
}

/* Tour page: the full film with a thin border, sized so it ends near the bottom of the
   first screen, and its chapters as segments as wide as each chapter is long. */
.tt-page .tt-tourfilm {
	padding: 0 0 88px;
}

.tt-page .tt-tourfilm .tp-shell {
	max-width: max(720px, calc((100svh - 330px) * 16 / 9));
}

.tt-page .tt-tourfilm-video {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--tp-line);
	border-radius: 12px;
	background: #000;
}

.tt-page .tt-chapters {
	margin-top: 18px;
	padding: 0;
	display: grid;
	gap: 4px;
	list-style: none;
}

.tt-page .tt-chapters button {
	width: 100%;
	padding: 4px 0;
	border: 0;
	border-radius: 4px;
	background: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.tt-page .tt-chapter-no {
	font-family: var(--tt-mono);
	font-size: 0.6875rem;
	color: #8a8a93;
}

.tt-page .tt-chapter-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--tp-line);
	overflow: hidden;
}

.tt-page .tt-chapter-bar i {
	display: block;
	width: calc(var(--played, 0) * 100%);
	height: 100%;
	background: var(--tessa-blue);
}

.tt-page .tt-chapter-title {
	font-size: 0.78125rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--tp-muted);
}

.tt-page .tt-chapters button:hover .tt-chapter-bar {
	background: #c9c9d0;
}

.tt-page .tt-chapters button:hover .tt-chapter-title,
.tt-page .tt-chapters button[aria-current] .tt-chapter-title {
	color: var(--tp-ink);
}

.tt-page .tt-chapters button[aria-current] .tt-chapter-no {
	color: var(--tessa-blue-text);
}

/* The full film */
.tt-dialog {
	/* 960 CSS pixels map the 1080p film 2:1 onto a high-density display, so its text
	   stays sharp; the player's own full screen button goes larger. */
	width: min(960px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	/* tessa.css resets every margin, which would pin a modal dialog to the top left corner. */
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #111113;
	color: #fff;
	overflow: hidden;
}

.tt-dialog::backdrop {
	background: rgba(17, 17, 19, 0.72);
}

.tt-dialog-bar {
	padding: 8px 8px 8px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.tt-dialog-bar h2 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
}

.tt-dialog .tt-clip-button {
	--tt-pill-line: #3a3a42;
	--tt-pill-ground: transparent;
	color: #d8d8de;
}

.tt-dialog .tt-clip-button:hover,
.tt-dialog .tt-clip-button:focus-visible {
	--tt-pill-line: #fff;
	color: #fff;
}

.tt-dialog video {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 96px);
	background: #000;
}

@media (max-width: 1040px) {
	.tt-page .tt-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Side by side, the two comparisons need about a thousand pixels. Below that only
	   Tessa's own times stay, one under the other, each label beside its value. */
	.tt-page .tt-close-stats {
		flex-direction: column;
		gap: 14px;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	.tt-page .tt-stat {
		padding: 0;
		grid-template-columns: 9.75rem minmax(0, 1fr);
		column-gap: 14px;
	}

	.tt-page .tt-stat + .tt-stat {
		border-left: 0;
	}

	.tt-page .tt-stat-label {
		grid-area: 1 / 2;
		max-width: 16em;
	}

	.tt-page .tt-stat-versus,
	.tt-page .tt-stat-old,
	.tt-page .tt-stat-label-old {
		display: none;
	}
}

@media (max-width: 820px) {
	/* On a phone the hero is taller than the screen anyway. */
	.tt-page .tt-hero {
		min-height: 0;
		display: block;
		padding: 104px 0 40px;
	}

	.tt-page .tt-clip-controls {
		gap: 2px;
		padding-top: 0;
	}

	.tt-page .tt-clip-button {
		--tt-pill-height: 26px;
		padding: 0 10px;
		font-size: 0.59375rem;
		letter-spacing: 0.08em;
	}

	.tt-page .tt-hero-grid,
	.tt-page .tt-step,
	.tt-page .tt-step-reversed,
	.tt-page .tt-cards,
	.tt-page .tt-points-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.tt-page .tt-step-reversed .tt-step-copy {
		order: 0;
	}

	.tt-page .tt-step + .tt-step {
		margin-top: 64px;
	}

	.tt-page .tt-points-row {
		gap: 12px;
	}

	.tt-page .tt-loop,
	.tt-page .tt-grow,
	.tt-page .tt-map {
		padding: 56px 0;
	}

	.tt-page .tt-loop {
		padding-top: 40px;
	}

	.tt-page .tt-try {
		padding-bottom: 56px;
	}

	.tt-page .tt-head {
		margin-bottom: 36px;
	}

	/* On a phone the whole screen runs edge to edge, uncropped; the full screen
	   button below it opens the clip large. The bleed is measured from the
	   viewport, because the shell's gutter changes with the width. */
	.tt-page .tt-loop,
	.tt-page .tt-map {
		overflow-x: clip;
	}

	.tt-page .tt-step .tt-brackets,
	.tt-page .tt-map .tt-brackets {
		margin-inline: calc(50% - 50vw);
		padding: 0;
	}

	.tt-page .tt-step .tt-brackets::before,
	.tt-page .tt-step .tt-brackets::after,
	.tt-page .tt-map .tt-brackets::before,
	.tt-page .tt-map .tt-brackets::after {
		display: none;
	}

	.tt-page .tt-step .tt-clip-frame,
	.tt-page .tt-map .tt-clip-frame {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.tt-page .tt-try-band {
		padding: 22px;
	}

	/* Touch targets: the shared buttons are 42px high elsewhere. */
	.tt-page .tp-button {
		min-height: 44px;
	}
}

@media (max-width: 820px) {
	/* Pricing and tour heroes clear the 64px bar. */
	.tt-page .tt-subhero {
		padding: 96px 0 32px;
	}

	.tt-page .tp-tiers-section {
		padding: 64px 0;
	}

	/* On phones the chapters become one row of chips to swipe through. */
	.tt-page .tt-chapters {
		margin-inline: -16px;
		padding: 0 16px 6px;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-padding-inline: 16px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.tt-page .tt-chapters::-webkit-scrollbar {
		display: none;
	}

	.tt-page .tt-chapters li {
		flex: none;
		scroll-snap-align: start;
	}

	.tt-page .tt-chapters button {
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid var(--tp-line);
		border-radius: 9999px;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	.tt-page .tt-chapters button[aria-current] {
		border-color: var(--tessa-blue);
	}

	.tt-page .tt-chapter-bar {
		display: none;
	}

	.tt-page .tt-chapter-title {
		font-size: 0.875rem;
	}

	.tt-page .tt-tourfilm {
		padding-bottom: 56px;
	}
}

@media (max-width: 560px) {
	.tt-page .tt-plans {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.tt-page .tt-actions .tp-button {
		flex: 1 1 100%;
	}
}