/* ==========================================================================
   Teo — VR Dental Training landing page
   Exact rebuild of Figma node 106:17059 (file 6Y5Mw023BNGRaArvPgBS8R),
   migrated onto the shared .ft-* foundation (css/new/foundation.css) + the
   shared .pr-* pricing skeleton (css/new/pages/pricing.css) in 2026-07.

   Foundation supplies: tokens, box-sizing, .ft-shell/.ft-section rhythm,
   .ft-eyebrow/.ft-title/.ft-accent, .ft-btn. Pricing supplies the plan-card +
   Compare-Plans anatomy. This sheet keeps ONLY the genuine Teo deltas.

   Token normalization (user-approved visible change, 2026-07-10):
     --teo-muted #788089      → --ft-muted #737A82
     --teo-blue-subtle #EAF6FF → --ft-blue-subtle #EDF7FF
     heading color #454442    → --ft-text #333536
     .teo-title line-height 28px → .ft-title's 30px
   Every other computed value is preserved exactly.
   ========================================================================== */

.teo-page {
	/* Page-unique tokens (values with no --ft-* counterpart) */
	--teo-navy: #0A33B4;          /* Pro badge */
	--teo-green: #37AC14;         /* Anesthesia accent / badge / button */
	--teo-green-subtle: #EAFFEB;  /* Anesthesia pill */
	--teo-subtle-ink: #4F545A;    /* hero subtitle + feature bullets */
	--teo-bg-gray: #F6F6F6;       /* pricing / alternating sections */
	--teo-border: #EEEEEE;        /* card + divider borders */
	--teo-card-border: #F0EFED;   /* app-card border */

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

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

/* Foundation caps the shell at 1480px; Teo's old .teo-shell was max-width
 * 1380px with 30px side padding = 1320px of content (same 300px gutters as
 * the 1920 Figma). body.teo-page is unique to this page, and the extra
 * specificity keeps this cap winning inside foundation's own media queries
 * (e.g. its ≤380px --ft-shell re-declaration). */
body.teo-page .ft-main {
	--ft-shell: min(1320px, 100% - 60px);
}

/* Section background modifiers (foundation has none) */
.teo-section--gray { background: var(--teo-bg-gray); }
.teo-section--blue { background: var(--ft-blue-subtle); }

/* ---- Shared type deltas ---- */
/* Teo spaces eyebrow→title with a margin (no .ft-heading grid wrapper) */
body.teo-page .ft-eyebrow { margin-bottom: 8px; }

/* graceful wrapping below the design width (no orphan words) */
body.teo-page .ft-title { text-wrap: balance; }
.teo-title--center { text-align: center; }

/* ---- Button deltas (Figma: 46px-tall pill with hover/active feedback) ---- */
body.teo-page .ft-btn {
	height: 46px;
	padding: 0 32px;
	border: 0;
	color: #F6F6F6;
	text-decoration: none;
	transition: filter .15s ease, transform .15s ease;
}
body.teo-page .ft-btn i { font-size: 18px; }
body.teo-page .ft-btn:hover { filter: brightness(0.95); }
body.teo-page .ft-btn:active { transform: translateY(1px); }

/* ======================================================================== *
   Hero
   ======================================================================== */
.teo-hero { background: var(--ft-blue-subtle); }
.teo-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	min-height: 640px;
	/* horizontal gutters come from the .ft-shell width */
	padding: 56px 0;
}
.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(--ft-text);
}
.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(--ft-text);
}
.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(--ft-muted);
}
.teo-hero__desc p + p { margin-top: 22px; }
.teo-hero__copy .ft-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)
   ======================================================================== */
/* Kept as page-unique layout (NOT .ft-split) after an honest diff: Teo's
 * columns flex from 440 (ft: 460), the copy caps at 600 (ft: 540), rows never
 * wrap (ft wraps), stacking happens at 1200 (ft: 1080) and stacks copy-first
 * + centered (ft stacks media-first, left-aligned). Only gap 72 / centered /
 * space-between match — renaming would need overrides on nearly every
 * declaration plus a breakpoint-band restoration, so it stays .teo-feature. */
.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(--ft-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(--ft-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: 25px;
}
.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(--ft-text);
	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 .ft-eyebrow { color: var(--ft-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(--ft-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(--ft-text);
}

.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(--ft-muted);
}
.teo-checklist li:last-child { margin-bottom: 0; }
.teo-checklist li i { color: var(--ft-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(--ft-text);
}
.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(--ft-text);
}
.teo-app__item p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: var(--ft-muted);
}
.teo-app__vsep {
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	height: 54px;
	margin: 0 40px;
	background: var(--teo-border);
}

/* ======================================================================== *
   Pricing — anatomy comes from the shared .pr-* skeleton (pricing.css);
   below are Teo's container, theme + sizing deltas only.
   ======================================================================== */
.teo-pricing__head { margin-bottom: 40px; }

.teo-plans {
	display: flex;
	justify-content: center;
	gap: 36px;
}
/* Fixed basis (not flex:1) so the carousel track overflows past 2 plans instead
 * of shrinking them; 2 cards at 46% still sit centered like the old pair. The
 * 80% card scale is baked into the shared .pr-carousel__track > * rule in
 * pricing.css — do not re-apply it here. */
.teo-plan-col { flex: 0 0 clamp(320px, 46%, 560px); display: flex; flex-direction: column; scroll-snap-align: start; }

body.teo-page .pr-plan {
	flex: 1; /* both cards stretch to equal height inside .teo-plan-col */
	border-color: var(--teo-border);
}
body.teo-page .pr-plan__tag { white-space: nowrap; }
body.teo-page .pr-plan__rule { border-top-color: var(--teo-border); }

.teo-plan__note {
	margin: 16px 0 0;
	padding-right: 4px;
	text-align: right;
	font-size: 14px;
	font-weight: 500;
	color: var(--ft-muted);
}

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

/* Desktop: the 80% card squeeze is applied at every width on the base
 * .teo-plan-col rule above. Here we only tighten the gap and, because the 3-card
 * row needs ~1392px (3x 448 + gaps) — wider than the 1320 content cap — break
 * just the plans carousel out of the shell, centered, so all 3 cards fit. The
 * head and compare table stay at the normal width. Below 1201px it scrolls. */
@media (min-width: 1201px) {
	.teo-plans { gap: 24px; }
	.teo-pricing .pr-carousel {
		width: min(1440px, 100vw - 16px);
		max-width: none;
		margin-inline: calc((100% - min(1440px, 100vw - 16px)) / 2);
	}
}

/* Compare Plans deltas: Teo's summary is the compact 16px inline pill, the
 * desktop grid uses 180px check columns (wrapped ≥991 so pricing.css's shared
 * ≤990/≤680 steps win below), headers stay on one line, checks are 22px. */
body.teo-page .pr-compare > summary {
	display: inline-flex;
	gap: 8px;
	font-size: 16px;
}
body.teo-page .pr-compare > summary i { font-size: 18px; }
body.teo-page .pr-compare__col { white-space: nowrap; }
body.teo-page .pr-check { font-size: 22px; }

@media (min-width: 991px) {
	body.teo-page .pr-compare__group,
	body.teo-page .pr-compare__row {
		grid-template-columns: minmax(0, 1fr) 180px 180px;
		column-gap: 48px;
	}
}

/* ======================================================================== *
   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 {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
}
.teo-video__thumb img { display: block; width: 100%; height: auto; }
.teo-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(45, 167, 250, .92);
	color: #fff;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	box-shadow: 0 6px 16px rgba(45, 167, 250, .4);
}
.teo-video h3 {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-text);
}
.teo-video p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ======================================================================== *
   Responsive
   ======================================================================== */
/* Image + text sections stack — and center — at 1200 (NOT foundation's 990/680
 * rhythm): 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, and below that gives image + copy their own centered lines.
 *
 * Cascade note: Teo's section rhythm is 80 → 56 (≤1200) → 44 (≤449). The
 * body.teo-page scope out-ranks foundation's own ≤990 (64px) and ≤680 (48px)
 * .ft-section steps, which Teo never had. */
@media (max-width: 1200px) {
	body.teo-page .ft-section { padding: 56px 0; }
	.teo-hero__inner { flex-direction: column; align-items: center; text-align: center; min-height: 0; gap: 40px; padding: 48px 0; }
	.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. */
	.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; }
}

/* 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 1200 block. */
@media (max-width: 760px) {
	.teo-video { width: calc(50% - 8px); }
	/* Phone: single-card peek — the plans track stays a horizontal swipe
	 * carousel rather than stacking. */
	.teo-plan-col { flex-basis: 86%; }
}

/* Compare table ≤680: on top of pricing.css's shared 56px column step, Teo
 * additionally shrinks the header/label/check type so the wrapped two-line
 * headers fit the narrow columns. */
@media (max-width: 680px) {
	body.teo-page .pr-compare__col {
		font-size: 11px;
		line-height: 1.3;
		white-space: normal;
	}

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

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

@media (max-width: 560px) {
	.teo-hero__title { font-size: 30px; line-height: 38px; }
	body.teo-page .ft-title { font-size: 21px; line-height: 26px; }
	body.teo-page .pr-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. */
	body.teo-page .pr-plan__top { flex-wrap: wrap; }
	body.teo-page .pr-plan__price { 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. Also outranks foundation's ≤380px 40px-gutter
 * re-declaration. */
@media (max-width: 449px) {
	body.teo-page .ft-section { padding: 44px 0; }
	body.teo-page .ft-main { --ft-shell: min(1320px, 100% - 32px); }
	.teo-hero__inner { padding: 40px 0; }
	.teo-app__item { flex-basis: 100%; padding: 0; }
	.teo-video { width: 100%; }
}