/* ==========================================================================
   Teo — VR Dental Training landing page
   Exact rebuild of Figma node 106:17059 (file 6Y5Mw023BNGRaArvPgBS8R).
   Tokens, type scale and colors are taken from the Figma variable defs.
   ========================================================================== */

.teo-page {
	--teo-blue: #2DA7FA;          /* Primary / Blue_Main — accents + Pro buttons */
	--teo-navy: #0A33B4;          /* Pro badge */
	--teo-blue-subtle: #EAF6FF;   /* light-blue surfaces + Pro pill */
	--teo-green: #37AC14;         /* Anesthesia accent / badge / button */
	--teo-green-subtle: #EAFFEB;  /* Anesthesia pill */
	--teo-ink: #333536;           /* Text_Primary */
	--teo-ink-strong: #454442;    /* headings (Figma raw dark) */
	--teo-muted: #788089;         /* Text_Secondary */
	--teo-subtle-ink: #4F545A;    /* hero subtitle */
	--teo-bg-gray: #F6F6F6;       /* pricing section */
	--teo-border: #EEEEEE;
	--teo-card-border: #F0EFED;

	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--teo-ink);
	background: #fff;
}

.teo-main { overflow-x: clip; }

.teo-main *,
.teo-main *::before,
.teo-main *::after { box-sizing: border-box; }

/* ---- Layout shell : 1320px content, ~300px gutters at 1920 ------------- */
.teo-shell {
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
}

.teo-section { padding: 80px 0; }
.teo-section--gray { background: var(--teo-bg-gray); }
.teo-section--blue { background: var(--teo-blue-subtle); }

/* ---- Shared type ------------------------------------------------------- */
.teo-eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--teo-ink);
}

.teo-title {
	margin: 0;
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: var(--teo-ink-strong);
	text-wrap: balance; /* graceful wrapping below the design width (no orphan words) */
}
.teo-title--center { text-align: center; }
.teo-blue { color: var(--teo-blue); }

/* ---- Buttons ----------------------------------------------------------- */
.teo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	padding: 0 32px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #F6F6F6;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.teo-btn i { font-size: 18px; }
.teo-btn:hover { filter: brightness(0.95); }
.teo-btn:active { transform: translateY(1px); }
.teo-btn--blue { background: var(--teo-blue); }
.teo-btn--block { width: 100%; }

/* ======================================================================== *
   Hero
   ======================================================================== */
.teo-hero { background: var(--teo-blue-subtle); }
.teo-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	min-height: 640px;
	padding: 56px 30px;
}
.teo-hero__copy { max-width: 620px; flex: 1 1 auto; }

.teo-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border-radius: 40px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--teo-ink);
}
.teo-hero__badge img { width: 19px; height: 19px; display: block; }

.teo-hero__title {
	margin: 24px 0 0;
	max-width: 527px;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	color: var(--teo-ink-strong);
}
.teo-hero__subtitle {
	margin: 32px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--teo-subtle-ink);
}
.teo-hero__desc { margin: 8px 0 0; }
.teo-hero__desc p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-hero__desc p + p { margin-top: 22px; }
.teo-hero__copy .teo-btn { margin-top: 48px; }

/* Hero media reuses the homepage "Virtual Reality" slide setup (homepage.css):
 * a rectangular photo clipped by the organic round mask (hero_vr_mask.svg) with
 * the blue blob (hero_vr_bg.svg) sitting just off its lower-right. */
.teo-hero__media {
	position: relative;
	flex: 1 1 488px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 495px;
}
/* Circle sized as a % of the media cell (like the homepage VR slide,
 * .ft-hero__circle-wrap) rather than a fixed 488px. The blob is positioned as a
 * % of THIS wrapper and overhangs to ~148% of its width, so at 64% the blob's
 * right edge lands at ~0.64×1.48 = ~95% of the media cell — always inside it, at
 * every width. The old fixed 488px hugged the cell at narrower desktop widths,
 * pushing the blob past the content so it clipped at the viewport edge ("cut
 * out around 1100/1225"). %-based also keeps it scaling at 4K. */
.teo-hero__circle-wrap {
	position: relative;
	width: 64%;
	max-width: 520px;
}
.teo-hero__blob {
	position: absolute;
	z-index: 0;
	left: 90%;
	bottom: 3%;
	width: 58%;
	height: auto;
	pointer-events: none;
}
.teo-hero__circle {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 488.094 / 494.771;
	overflow: hidden;
	-webkit-mask: url(/images/new/homepage/hero_vr_mask.svg) center / contain no-repeat;
	mask: url(/images/new/homepage/hero_vr_mask.svg) center / contain no-repeat;
}
.teo-hero__circle img {
	position: absolute;
	left: -13.26%;
	top: -6.72%;
	width: 144.33%;
	height: 106.71%;
	max-width: none;
	display: block;
}

/* ======================================================================== *
   Feature rows (Radiology / Endodontics / Anesthesia / Anatomy / Faculty)
   ======================================================================== */
/* Title + Description + Image layout mirrors the onescreen split sections
 * (.os-split): both columns flex 1 1 440 so they shrink together, the media caps
 * at 640 and the image fills it fluidly (width:100%) — a true "resolution"
 * approach that scales with the column instead of a rigid 640px box. */
.teo-feature__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 72px;
}
.teo-feature--reverse .teo-feature__inner { flex-direction: row-reverse; }

/* Copy column is sized so the 1-line Figma titles (widest = Radiology 578px)
 * stay on one line; body text keeps the narrower Figma text-box widths so it
 * wraps at the same points. Figma spacing groups: eyebrow→title 8px (eyebrow
 * margin), title→body 24px, bullets→desc 8px. */
.teo-feature__copy { flex: 1 1 440px; max-width: 600px; }
.teo-feature__body { margin-top: 24px; }
.teo-feature__bullets {
	margin: 0 0 8px;
	max-width: 560px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: var(--teo-subtle-ink);
}
.teo-feature__desc {
	max-width: 562px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-feature__desc p { margin: 0; }
/* blank-line paragraph break — one line-height of empty space, matching the
 * empty paragraph the Figma source uses between blocks */
.teo-feature__gap { line-height: 22px; }
.teo-desc-link {
	color: #2da7fb;
	text-decoration: underline;
	text-underline-position: from-font;
}
.teo-feature__list {
	max-width: 562px;
	padding-left: 24px;
	list-style: disc;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-feature__list li { margin: 0 0 10px; }
.teo-feature__list li:last-child { margin-bottom: 0; }

.teo-feature__media { flex: 1 1 440px; max-width: 640px; }
.teo-figimg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 640 / 380;
	object-fit: cover;
	border-radius: 20px;
}
.teo-figimg--wide {
	width: 100%;
	height: auto;
	aspect-ratio: 695 / 480;
	object-fit: contain;
	border-radius: 0;
}

/* Endodontics : two labelled media tiles. Per Figma the laptop (Faculty Create
 * Procedure, ~300px) sits upper-left; the hands image (Students Practice,
 * 539×320, radius 24) is larger and offset lower-right. Labels are numbered
 * blue badges. */
.teo-endo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 680px;
}
.teo-endo__item { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.teo-endo__item--laptop { flex: 0 0 35%; }
.teo-endo__item--hands { flex: 1 1 0; margin-top: 40px; }
.teo-endo__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--teo-ink);
	white-space: nowrap;
}
.teo-endo__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 100px;
	background: #2da7fb;
	color: #f0efed;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.teo-endo__item img { display: block; width: 100%; height: auto; }
.teo-endo__item--hands img { border-radius: 24px; object-fit: cover; }

/* ======================================================================== *
   All-in-one app
   ======================================================================== */
.teo-app__head { text-align: center; }
.teo-app__head .teo-eyebrow { color: var(--teo-muted); }

.teo-app__cards {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 48px;
}
.teo-app__card {
	width: 440px;
	max-width: 100%;
	padding: 32px;
	background: var(--teo-blue-subtle);
	border: 1.5px solid var(--teo-card-border);
	border-radius: 16px;
}
.teo-app__card > img {
	display: block;
	width: 260px;
	max-width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 8px;
}
.teo-app__card h3 {
	margin: 24px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--teo-ink);
}

.teo-checklist { margin: 14px 0 0; padding: 0; list-style: none; }
.teo-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-checklist li:last-child { margin-bottom: 0; }
.teo-checklist li i { color: var(--teo-blue); font-size: 16px; flex: 0 0 auto; }

.teo-app__divider {
	margin: 56px 0;
	border: 0;
	border-top: 1px solid var(--teo-border);
}
.teo-app__manage-title {
	margin: 0 0 32px;
	text-align: center;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--teo-ink-strong);
}
.teo-app__items {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
}
.teo-app__item { flex: 1 1 0; max-width: 260px; }
.teo-app__item-head { display: flex; align-items: center; gap: 8px; }
.teo-app__item-ic { display: block; width: auto; height: 18px; flex: 0 0 auto; }
.teo-app__item-head h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--teo-ink);
}
.teo-app__item p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-app__vsep {
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	height: 54px;
	margin: 0 40px;
	background: var(--teo-border);
}

/* ======================================================================== *
   Pricing
   ======================================================================== */
.teo-pricing__head { margin-bottom: 40px; }

.teo-plans {
	display: flex;
	justify-content: center;
	gap: 36px;
}
.teo-plan-col { flex: 1 1 0; max-width: 642px; display: flex; flex-direction: column; }
.teo-plan {
	flex: 1; /* both cards stretch to equal height (Figma: both 802px) */
	background: #fff;
	border: 3px solid var(--teo-border);
	border-radius: 24px;
	padding: 37px;
}
.teo-plan__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.teo-plan__id { display: flex; align-items: center; gap: 16px; }
.teo-plan__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
}
.teo-plan__badge-name { font-size: 20px; font-weight: 600; color: var(--teo-ink); }
.teo-plan__tag {
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.teo-plan__name {
	margin: 28px 0 0;
	font-size: 32px;
	line-height: 46px;
	font-weight: 600;
	color: var(--teo-ink);
}
.teo-plan__desc { margin: 12px 0 0; }
.teo-plan__desc p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-plan__desc p + p { margin-top: 22px; }
.teo-plan__cta { margin-top: 24px; }
.teo-plan__divider {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--teo-border);
}
.teo-plan__features-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-plan__features ul { margin: 0; padding-left: 22px; list-style: disc; }
.teo-plan__features li {
	margin: 0 0 10px;
	padding-left: 4px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--teo-muted);
}
.teo-plan__features li:last-child { margin-bottom: 0; }
.teo-plan__note {
	margin: 16px 0 0;
	padding-right: 4px;
	text-align: right;
	font-size: 14px;
	font-weight: 500;
	color: var(--teo-muted);
}

/* Plan themes */
.teo-plan--pro .teo-plan__badge { background: var(--teo-navy); }
.teo-plan--pro .teo-plan__tag { background: var(--teo-blue-subtle); color: var(--teo-blue); }
.teo-plan--pro .teo-plan__cta { background: var(--teo-blue); }
.teo-plan--an .teo-plan__badge { background: var(--teo-green); }
.teo-plan--an .teo-plan__tag { background: var(--teo-green-subtle); color: var(--teo-green); }
.teo-plan--an .teo-plan__cta { background: var(--teo-green); }

/* ---- Compare Plans dropdown (mirrors the onescreen compare grid) ------- *
 * A <details> with a grid table: the column headers and the check columns
 * share one 3-column grid so each "Pro $79/mo" / "Anesthesia $29/mo" header
 * sits centered directly above its checks (Figma: headers on the first group
 * row, navy #022db1 / green #37ac14). */
.teo-compare { margin-top: 48px; }
.teo-compare > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--teo-ink);
}
.teo-compare > summary::-webkit-details-marker { display: none; }
.teo-compare > summary i { color: var(--teo-muted); font-size: 18px; transition: transform .2s ease; }
.teo-compare[open] > summary i { transform: rotate(180deg); }

.teo-compare__table { margin-top: 28px; }
.teo-compare__group,
.teo-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px 180px;
	column-gap: 48px;
	align-items: center;
}
.teo-compare__group { padding: 32px 0 8px; }
.teo-compare__group:first-child { padding-top: 0; }
.teo-compare__group-title { font-size: 16px; font-weight: 600; color: var(--teo-ink); }
.teo-compare__col { text-align: center; font-size: 16px; font-weight: 600; white-space: nowrap; }
.teo-compare__col strong { font-weight: 600; }
.teo-compare__col--pro { color: #022db1; }
.teo-compare__col--an { color: var(--teo-green); }
.teo-compare__row { padding: 8px 0; border-bottom: 1px solid #e4e4e4; }
.teo-compare__label { font-size: 14px; line-height: 18px; font-weight: 500; color: #737a82; }
.teo-compare__cell { text-align: center; }
.teo-check { font-size: 22px; }
.teo-check--pro { color: #022db1; }
.teo-check--an { color: var(--teo-green); }

/* ======================================================================== *
   Videos & learning resources
   ======================================================================== */
.teo-videos__head { text-align: center; margin-bottom: 40px; }
.teo-videos__grid {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.teo-video {
	width: 250px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--teo-border);
	border-radius: 16px;
}
.teo-video__thumb {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.teo-video__thumb img { display: block; width: 100%; height: auto; }
.teo-video h3 {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--teo-ink);
}
.teo-video p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--teo-muted);
}

/* ======================================================================== *
   Responsive
   ======================================================================== */
/* Image + text sections stack — and center, like OneScreen's stacked splits —
 * raised to 1200 because Teo's columns are wider than OneScreen's: below ~1216
 * the hero VR circle drops under its 488px size and jams against the right
 * gutter with the blob clipping in ("cut out around 1100"). Stacking by 1200
 * keeps the side-by-side row only where it reads like the Figma (full circle,
 * blob bleeding intentionally), and below that gives image + copy their own
 * centered lines. Copy is centered (block + text) so it lines up with the
 * centered media instead of sitting left of it. */
@media (max-width: 1200px) {
	.teo-section { padding: 56px 0; }
	.teo-hero__inner { flex-direction: column; align-items: center; text-align: center; min-height: 0; gap: 40px; padding: 48px 30px; }
	.teo-hero__copy { display: flex; flex-direction: column; align-items: center; }
	.teo-hero__title { max-width: 100%; }
	.teo-hero__media { width: 100%; max-width: 460px; min-height: 0; justify-content: center; margin: 0 auto; }
	.teo-hero__circle-wrap { width: 80%; }
	.teo-hero__blob { left: 72%; bottom: 0; width: 46%; }

	.teo-feature__inner,
	.teo-feature--reverse .teo-feature__inner { flex-direction: column; align-items: center; text-align: center; gap: 32px; }
	/* Reset the row flex-basis (440) — in a column it would inflate the box
	 * HEIGHTS and leave a big gap between copy and image (same reset os-split does). */
	.teo-feature__copy { flex: 0 0 auto; max-width: 640px; }
	/* Keep the disc bullet list (Faculty Tools) left-read while the block stays
	 * centered — centered disc markers look broken. */
	.teo-feature__list { display: inline-block; text-align: left; }
	.teo-feature__media { flex: 0 0 auto; width: 100%; }
	/* Center the two-tile endo media (max-width 680) within the full-width media
	 * column so it lines up with the centered copy, instead of pinning left. */
	.teo-endo { width: 100%; margin-inline: auto; }

	.teo-app__cards { flex-wrap: wrap; }
	.teo-app__items { flex-wrap: wrap; gap: 32px 0; }
	.teo-app__item { flex-basis: 50%; max-width: none; padding: 0 16px; }
	.teo-app__vsep { display: none; }

	.teo-plans { flex-direction: column; align-items: center; }
	.teo-plan-col { width: 100%; max-width: 642px; }
}

/* Tablet/phone band: the fixed-width desktop video row (5 × 250px) collapses to
 * a uniform 2-column grid (convention — matches modupro/onescreen), then 1-col
 * below 450. The app-manage items already go 2-col (50% basis) in the 1080 block. */
@media (max-width: 760px) {
	.teo-video { width: calc(50% - 8px); }
}

/* Compare table steps the two check columns down so the label column stays
 * readable (mirrors the onescreen compare: 180 → 110 → 56). Without the 110px
 * intermediate the 180px columns crushed the label to ~84px in the 561–990 band
 * (unreadable around 600). */
@media (max-width: 990px) {
	.teo-compare__group,
	.teo-compare__row {
		grid-template-columns: minmax(0, 1fr) 110px 110px;
		column-gap: 24px;
	}

	.teo-compare__col {
		font-size: 14px;
	}
}

@media (max-width: 680px) {
	.teo-compare__group,
	.teo-compare__row {
		grid-template-columns: minmax(0, 1fr) 56px 56px;
		column-gap: 12px;
	}

	.teo-compare__col {
		font-size: 11px;
		line-height: 1.3;
		white-space: normal;
	}

	.teo-compare__col strong {
		display: block;
	}

	.teo-compare__label {
		font-size: 13px;
		line-height: 17px;
	}

	.teo-check {
		font-size: 18px;
	}
}

@media (max-width: 560px) {
	.teo-hero__title { font-size: 30px; line-height: 38px; }
	.teo-title { font-size: 21px; line-height: 26px; }
	.teo-plan { padding: 24px; }
	/* Let the badge/name row + the nowrap tag pill ("Full Curriculum Training")
	 * wrap onto two lines so the pill isn't clipped past the card on phones. */
	.teo-plan__top { flex-wrap: wrap; }
	.teo-plan__name { font-size: 28px; line-height: 38px; }
	.teo-endo { flex-direction: column; align-items: stretch; }
	.teo-endo__item--laptop, .teo-endo__item--hands { flex-basis: auto; }
	.teo-endo__item--hands { margin-top: 0; }
}

/* Below 450 → single column everywhere (convention, same as modupro/charlie/
 * licensure/accessories/onescreen): app-manage items + video cards go 1-col,
 * and the shell + hero gutters narrow to 16px. Min target width 325px — zero
 * horizontal overflow at 325. */
@media (max-width: 449px) {
	.teo-section { padding: 44px 0; }
	.teo-shell { padding: 0 16px; }
	.teo-hero__inner { padding: 40px 16px; }
	.teo-app__item { flex-basis: 100%; padding: 0; }
	.teo-video { width: 100%; }
}

/* ======================================================================== *
   4K / ultra-wide — the 1920 design scaled up ~2x so it reads as the desktop
   layout zoomed in (mirrors new/homepage.css). Content keeps the design's
   15.6% gutters (1320 → 2640). The shared header/footer only scale ~1.25x at
   4K by default, so they're scaled to match here, scoped to body.teo-page.
   ======================================================================== */
@media (min-width: 3000px) {
	.teo-shell { max-width: 2760px; padding: 0 60px; }
	.teo-section { padding: 160px 0; }

	.teo-eyebrow { margin: 0 0 16px; font-size: 28px; }
	.teo-title { font-size: 48px; line-height: 56px; }

	.teo-btn { height: 92px; gap: 24px; padding: 0 64px; border-radius: 16px; font-size: 32px; }
	.teo-btn i { font-size: 36px; }

	/* Hero */
	.teo-hero__inner { min-height: 1280px; gap: 96px; padding: 112px 60px; }
	.teo-hero__copy { max-width: 1240px; }
	.teo-hero__badge { height: 64px; gap: 16px; padding: 0 24px; border-radius: 80px; font-size: 28px; }
	.teo-hero__badge img { width: 38px; height: 38px; }
	.teo-hero__title { margin-top: 48px; max-width: 1054px; font-size: 72px; line-height: 88px; }
	.teo-hero__subtitle { margin-top: 64px; font-size: 32px; }
	.teo-hero__desc { margin-top: 16px; }
	.teo-hero__desc p { font-size: 32px; line-height: 44px; }
	.teo-hero__desc p + p { margin-top: 44px; }
	.teo-hero__copy .teo-btn { margin-top: 96px; }
	.teo-hero__media { flex-basis: 976px; min-height: 990px; }
	/* width:976px alone is clamped by the base `max-width:520px` (the 1080p cap),
	   leaving the circle stuck at ~520px — too small at 4K. Lift the cap so it
	   reaches the full 2x of the Figma 488px circle. */
	.teo-hero__circle-wrap { width: 976px; max-width: none; }

	/* Feature rows */
	.teo-feature__inner { gap: 128px; }
	.teo-feature__copy { max-width: 1200px; }
	.teo-feature__body { margin-top: 48px; }
	.teo-feature__bullets { margin: 0 0 16px; max-width: 1120px; font-size: 32px; line-height: 40px; }
	.teo-feature__desc { max-width: 1124px; font-size: 32px; line-height: 44px; }
	.teo-feature__gap { line-height: 44px; }
	.teo-feature__list { max-width: 1124px; padding-left: 48px; font-size: 32px; line-height: 44px; }
	.teo-feature__list li { margin: 0 0 20px; }
	.teo-figimg { width: 1280px; height: 760px; border-radius: 32px; }
	.teo-figimg--wide { width: 1320px; }
	.teo-endo { gap: 32px; max-width: 1360px; }
	.teo-endo__item { gap: 24px; }
	.teo-endo__item--hands { margin-top: 80px; }
	.teo-endo__label { gap: 16px; font-size: 32px; }
	.teo-endo__num { width: 48px; height: 48px; font-size: 28px; }
	.teo-endo__item--hands img { border-radius: 48px; }

	/* All-in-one app */
	.teo-app__cards { gap: 48px; margin-top: 96px; }
	.teo-app__card { width: 880px; padding: 64px; border-width: 3px; border-radius: 32px; }
	.teo-app__card > img { width: 520px; height: 280px; border-radius: 16px; }
	.teo-app__card h3 { margin-top: 48px; font-size: 32px; }
	.teo-checklist { margin-top: 28px; }
	.teo-checklist li { gap: 16px; margin-bottom: 16px; font-size: 32px; }
	.teo-checklist li i { font-size: 32px; }
	.teo-app__divider { margin: 112px 0; }
	.teo-app__manage-title { margin-bottom: 64px; font-size: 40px; line-height: 56px; }
	.teo-app__item { max-width: 520px; }
	.teo-app__item-head { gap: 16px; }
	.teo-app__item-ic { height: 36px; }
	.teo-app__item-head h4 { font-size: 32px; }
	.teo-app__item p { margin-top: 16px; font-size: 32px; line-height: 40px; }
	.teo-app__vsep { height: 108px; margin: 0 80px; }

	/* Pricing */
	.teo-pricing__head { margin-bottom: 80px; }
	.teo-plans { gap: 72px; }
	.teo-plan-col { max-width: 1284px; }
	.teo-plan { padding: 74px; border-width: 6px; border-radius: 48px; }
	.teo-plan__top { gap: 32px; }
	.teo-plan__id { gap: 32px; }
	.teo-plan__badge { width: 112px; height: 112px; border-radius: 20px; font-size: 48px; }
	.teo-plan__badge-name { font-size: 40px; }
	.teo-plan__tag { padding: 16px 40px; border-radius: 100px; font-size: 28px; }
	.teo-plan__name { margin-top: 56px; font-size: 64px; line-height: 92px; }
	.teo-plan__desc { margin-top: 24px; }
	.teo-plan__desc p { font-size: 32px; line-height: 44px; }
	.teo-plan__desc p + p { margin-top: 44px; }
	.teo-plan__cta { margin-top: 48px; }
	.teo-plan__divider { margin: 64px 0; }
	.teo-plan__features-title { margin-bottom: 20px; font-size: 32px; }
	.teo-plan__features ul { padding-left: 44px; }
	.teo-plan__features li { margin-bottom: 20px; font-size: 32px; line-height: 44px; }
	.teo-plan__note { margin-top: 32px; padding-right: 8px; font-size: 28px; }

	/* Compare */
	.teo-compare { margin-top: 96px; }
	.teo-compare > summary { gap: 16px; font-size: 32px; }
	.teo-compare > summary i { font-size: 36px; }
	.teo-compare__table { margin-top: 56px; }
	.teo-compare__group, .teo-compare__row { grid-template-columns: minmax(0, 1fr) 360px 360px; column-gap: 96px; }
	.teo-compare__group { padding: 64px 0 16px; }
	.teo-compare__group-title { font-size: 32px; }
	.teo-compare__col { font-size: 32px; }
	.teo-compare__row { padding: 16px 0; }
	.teo-compare__label { font-size: 28px; line-height: 36px; }
	.teo-check { font-size: 44px; }

	/* Videos */
	.teo-videos__head { margin-bottom: 80px; }
	.teo-videos__grid { gap: 32px; }
	.teo-video { width: 500px; padding: 32px; border-radius: 32px; }
	.teo-video__thumb { border-radius: 16px; }
	.teo-video h3 { margin-top: 28px; font-size: 28px; }
	.teo-video p { margin-top: 12px; font-size: 28px; line-height: 36px; }

	/* Shared header + footer (scale ~1.25x by default at 4K) bumped to ~2x to
	 * match the scaled content. Scoped to this page only — mirrors
	 * new/homepage.css body.ft-page. */
	body.teo-page { --shop-header-height: 210px; }
	body.teo-page .shop-header__brand img { width: 388px; }
	body.teo-page .shop-nav__link { gap: 18px; padding: 20px 26px; font-size: 33px; }
	body.teo-page .shop-nav__caret { font-size: 31px; }
	body.teo-page .shop-header__actions { gap: 31px; }
	body.teo-page .shop-header__actions a,
	body.teo-page .shop-header__icon-btn,
	body.teo-page .shop-header__search-trigger { width: 88px; height: 88px; font-size: 44px; }
	body.teo-page .shop-desktop-search { width: 88px; height: 106px; }
	body.teo-page .shop-desktop-search input { font-size: 40px; }

	body.teo-page .shop-footer__main { padding: 158px 0; }
	body.teo-page .shop-footer__brand img { width: 360px; margin-bottom: 35px; }
	body.teo-page .shop-footer__brand p,
	body.teo-page .shop-footer__column a { font-size: 35px; }
	body.teo-page .shop-footer__column h3 { margin-bottom: 26px; font-size: 40px; }
	body.teo-page .shop-footer__bar-inner { gap: 53px; padding: 62px 0; }
	body.teo-page .shop-footer__policies { gap: 106px; }
	body.teo-page .shop-footer__policies a { font-size: 35px; }
	body.teo-page .shop-footer__youtube img { height: 62px; }
}