/* =========================================================================
   תוביל — mobile canvas (Figma frame 531:720, 440 × 18029)
   =========================================================================

   A separate design, not a narrow desktop. It gets its own rules for the same
   reason it gets its own template: a block drawn at desktop size and scaled
   down needs its own type sizes, because two added pixels in a shared rule
   arrive on the phone as one and read as nothing at all.
   ========================================================================= */

/* --------------------------------------------------------------- 1 · hero

   Every size here is the design's own number, read off frame 531:2. The
   mobile hero is NOT the desktop one scaled: its kicker is 20px against 60,
   its headline 18 against 60, and its ring 182 across against 250 — and its
   button copy is Modernist Regular where the desktop's is Brutalist Bold. */

.m-hero__ground {
	background: #121c2c;
	overflow: hidden;
}
.m-hero__bg {
	position: absolute;
	object-fit: cover;
	opacity: .2;
	pointer-events: none;
}
.m-hero__glow {
	background: url( "../img/d-hero-glow.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.m-hero__building { object-fit: cover; }
.m-hero__men { overflow: hidden; }
.m-hero__men img {
	position: absolute;
	top: 0;
	left: -1.57%;
	width: 100.32%;
	height: 100%;
	object-fit: fill;
}
.m-hero__women { object-fit: cover; }
/* the design stacks a blurred copy behind the sharp one to soften the join */
.m-hero__women--soft { filter: blur( 15px ); }

/* Ariel asked for the whole hero a touch larger on the phone — every size in
   this block is the design's own number plus ten per cent, and the coordinates
   below them in the template were re-flowed to match. */
.m-hero__kicker {
	font-family: var( --tvl-font-script );
	font-weight: 400;
	/* On the phone the same line on ONE line would be 11px, which is smaller
	   than anything else on the page and the opposite of what the review asked
	   for. Two lines at 16 fit the 41px the design leaves above the headline
	   exactly, so nothing below has to move. */
	font-size: 16px;
	text-wrap: balance;
	line-height: 1.23;
	color: #fff;
}
.m-hero__headline {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	/* 23.5 is the largest that still lands on three lines inside the 392px box
	   — measured, not chosen (qa/herofit2.js). Above it the copy goes to four.
	   The design's own 18 held it on two by nowrap plus a hard break; both are
	   let go here, so the phone wraps where the width says and the desktop
	   keeps the break it was drawn with. */
	font-size: 23.5px;
	line-height: 28.7px;
	color: #50aeef;
	white-space: normal;
}
.m-hero__bullet {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 15.4px;
	line-height: 1.23;
	color: #fff;
}

/* Mobile only — the desktop frame has no pill at all. */
.m-hero__pill {
	background: rgba( 59, 136, 216, .2 );
	border-radius: 9px;
}
.m-hero__pill-text {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 15.4px;
	line-height: 1.23;
	color: #fff;
}

.m-hero__cta {
	display: block;
	border-radius: 50%;
	direction: rtl;
	overflow: hidden;
}
.m-hero__ring {
	position: absolute;
	background: url( "../img/m-hero-ring.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.m-hero__disc {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient( circle closest-side at 50% 50%, rgba( 255, 255, 255, .4 ) 0%, rgba( 80, 174, 239, .4 ) 100% );
	backdrop-filter: blur( 30px );
	-webkit-backdrop-filter: blur( 30px );
	pointer-events: none;
}
.m-hero__cta-text {
	position: absolute;
	text-align: center;
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 25px;
	/* 31px between the two lines in the render, kept in proportion. */
	line-height: 33.7px;
	color: #fff;
}
/* the badge carries its own turn: the frame rotates the glyph -135.52° */
/* 35.385 is the artwork; the 50.04 the node reports is its rotated bounding
   box, and filling that box drew the badge half again too large. */
.m-hero__badge img { width: 100%; height: 100%; transform: rotate( -135.52deg ); }
/* ---------------------------------------------------------------- 2 · חם */

.m-hot__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 22px;
	line-height: 1.23;
	white-space: nowrap;
	color: #1e3763;
}
.m-hot__para {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	/* Figma 17px on a 37px leading — the leading is the design's own number
	   and it is what sets this block's depth. */
	font-size: 17px;
	line-height: 37px;
	color: #000;
}
.m-hot__para strong {
	font-family: var( --tvl-font-display );
	font-weight: 700;
}

/* ----------------------------------------------------------- 3 · ההכשרה */

.m-training__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	text-align: center;
	color: #fff;
}
.m-training__body {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 17px;
	line-height: 37px;
	color: #fff;
}
.m-training__strip {
	/* 531:394 — radius 62, and the fill is a THIRTY per cent radial wash over a
	   50px backdrop blur, not an opaque gradient. Painted solid it hid the man
	   behind it, whom the design lets show through blurred at the top. */
	border-radius: 62px;
	background: radial-gradient( ellipse 100% 100% at 50% 50%,
		rgba( 255, 255, 255, .3 ) 0%,
		rgba( 196, 231, 255, .3 ) 50%,
		rgba( 137, 207, 255, .3 ) 100% );
	-webkit-backdrop-filter: blur( 50px );
	backdrop-filter: blur( 50px );
	overflow: hidden;
}
.m-training__lead {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 37px;
	color: #000;
	text-align: center;
}
.m-training__access {
	/* 531:423 — Modernist Regular 17, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 70px;
	color: #000;
	text-align: center;
}
.m-training__stat {
	/* 531:395 / 531:737 — glass, not a white card */
	border-radius: 8px;
	background: rgba( 255, 255, 255, .1 );
	/* no backdrop blur here: this sits on an opaque fill, so the blur paints
	   nothing and costs a full readback of the page behind it every frame */
	box-shadow: 0 4px 4px rgba( 0, 0, 0, .25 );
	overflow: hidden;
}
.m-training__num {
	/* 531:409 / 531:410 — Modernist Regular 60 / 70, black */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 60px;
	line-height: 70px;
	color: #000;
	text-align: center;
}
.m-training__unit {
	/* 531:421 / 531:736 — Modernist Regular 20, black */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 20px;
	line-height: 70px;
	color: #000;
	text-align: center;
}
.m-training__closing {
	/* 531:414 — Modernist Regular 20 / 40, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 20px;
	line-height: 40px;
	color: #000;
	text-align: center;
}

/* -------------------------------------------------------- 4 · היתרונות */

.m-benefits__ghost {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 45px;
	line-height: 1.23;
	white-space: nowrap;
	text-align: center;
	user-select: none;
	/* 531:375 — the fill is a gradient clipped to the glyphs, not flat grey */
	background-image: linear-gradient( 0.6458679deg, rgba( 228, 228, 228, .25 ) 11.748%, rgba( 126, 126, 126, .5 ) 79.715% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.m-benefits__title {
	/* 531:376 — Modernist Bold 25, #1e3763, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #1e3763;
	text-align: center;
}
.m-card {
	/* 531:396 — Figma reports the 3px stroke as rgba(46,100,137,0), a colour
	   that would draw nothing; the render shows a vertical ramp from clear at
	   the top to #51aeee along the bottom, identical on all six cards. The
	   stops below are sampled off page-mobile.png at every tenth of the card,
	   so the edge matches whatever Figma actually painted. */
	background:
		linear-gradient( #fff, #fff ) padding-box,
		linear-gradient( 180deg,
			#fdfdfd 0%, #e9eff3 10%, #d5e2ea 20%, #c3d7e5 30%, #b0cce0 40%,
			#9fc4dd 50%, #8ebcdd 60%, #7eb6de 70%, #6eb2e2 80%, #60afe7 90%,
			#51aeee 100% ) border-box;
	border: 3px solid transparent;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
/* the crop window sizes its own picture — object-fit would fight it */
.m-card__icon img { object-fit: fill; }
.m-card__title {
	/* 531:424 — Modernist Bold 25, black, right-aligned */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #000;
}
.m-card__body {
	/* 531:415 — Modernist Regular 17 / 30, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 30px;
	color: #000;
	text-align: center;
}
.m-benefits__closing {
	/* 531:428 — Modernist Bold 25, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* --------------------------------------------------------- 5 · בלוק מחיר */

.m-offer__band {
	/* 536:774 / 589:184 — a 30% blue wash with ONE rounded corner (top right,
	   251px). It was drawn as a solid gradient bar with even corners, which is
	   why it read as a button rather than a wash behind the headline. */
	background: rgba( 80, 174, 239, .3 );
	border-radius: 0 251px 0 0;
	overflow: hidden;
}
.m-offer__head {
	/* 531:455 — Modernist Bold 25 on the silver sweep (.tvl-silver) */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	text-align: center;
}
.m-offer__label {
	/* 531:452 — Modernist Bold 30, silver */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 30px;
	line-height: 1.23;
	text-align: center;
}
.m-offer__price {
	/* 531:456 — Modernist Bold 30 in #dfdfdf, with the two prices in white.
	   Unlike the desktop the mobile keeps one size throughout. */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 30px;
	line-height: 1.23;
	color: #dfdfdf;
	text-align: center;
}
.m-offer__price .tvl-price-big { font-size: inherit; }
.m-offer__launch {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 13px;
	line-height: 17px;
	color: #d8ecff;
	text-wrap: balance;
}
.m-offer__note {
	/* 531:458 — Modernist Bold 18, white */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 18px;
	line-height: 1.23;
	color: #fff;
	text-align: center;
}
/* 531:454 is rgba(0,156,23,.4), not the desktop's solid green; 531:457 is a
   4px red rule sitting over the struck price. */
.m-offer__badge {
	border-radius: 8px;
	background: rgba( 0, 156, 23, .4 );
}
.m-offer__strike { background: #ff0404; }
/* the building is stretched into its node box, as the design places it */
.m-offer__photo { object-fit: fill; }
.m-offer__submit {
	/* 531:463 is a vector, not a rectangle: a plate with a bite taken out of
	   its left end for the badge to sit in, filled #3b88d8 to white on the
	   diagonal. Drawn as a plain pale box it read as two separate objects. */
	background: url( "../img/m-offer-btn.svg" ) 0 0 / 100% 100% no-repeat;
	border-radius: 0;
	/* 531:464 — Brutalist Bold 20, black */
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 20px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* ------------------------------------------------------------ 6 · בונוס */

.m-bonus__title {
	/* 531:377 — Modernist Bold 22, #1e3763, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 22px;
	line-height: 1.23;
	color: #1e3763;
	text-align: center;
}
.m-bonus__lead {
	/* 531:429 — Modernist Bold 18, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 18px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-bonus__num {
	/* 531:378 — Modernist Bold 100 in #d2d2d2 */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 100px;
	line-height: 1.23;
	color: #d2d2d2;
	text-align: center;
	direction: ltr;
	user-select: none;
}
.m-bonus__row {
	/* 531:400 — #3b88d8 to #e9e9e9 top to bottom, radius 8, and the same
	   fully transparent 3px stroke the benefit cards carry */
	background: linear-gradient( 180deg, #3b88d8 0%, #e9e9e9 100% );
	/* without this the gradient is sized to the PADDING box and then repeats
	   under the transparent border, painting a dark blue line along the
	   bottom of every row */
	background-origin: border-box;
	border: 3px solid rgba( 46, 100, 137, 0 );
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
	overflow: hidden;
}
.m-bonus__text {
	/* 531:430 — Modernist Regular 20 with the label in Bold, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 20px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-bonus__text strong { font-weight: 700; }

/* ----------------------------------------------------------- 7 · המרצים */

.m-lect__band { object-fit: fill; }
.m-lect__badge {
	/* 531:489 — #eaeaea to #50aeef across, a hairline black edge, radius 15 */
	background: linear-gradient( 90deg, #eaeaea 0%, #50aeef 100% );
	border: 1px solid #000;
	border-radius: 15px;
	overflow: hidden;
}
.m-lect__badge-text {
	/* 531:490 — Modernist Bold 25, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-lect__title {
	/* 531:494 — Modernist Bold 25, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-lect__body {
	/* 531:500 — Modernist Regular 15, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 15px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}



/* Each row is a viewport two people wide onto a track of five; front.js steps
   it one person at a time and a hand on it takes over. */
/* The arc is drawn 1888 wide behind a 440 frame, and it starts 724px to the
   LEFT of the canvas — which is where its own edges are, and where the arrows
   were sitting: both of them hundreds of pixels off screen. On the phone they
   are placed against the FRAME instead, in arc-local coordinates (canvas x plus
   724). In RTL "הקודם" belongs on the right. */
.tvl-stage--m .tvl-arc__nav--prev { right: auto; left: 1100px; }
.tvl-stage--m .tvl-arc__nav--next { left: 732px; }

.m-lect__row {
	overflow: hidden;
	direction: ltr;
}
.m-lect__track { position: relative; }
/* the desktop's plate, at the phone's 0.62 — see the note in the renderer */
.m-lect__tile {
	border-radius: 16.1px;
	background: linear-gradient( 152.755deg, #50aeef 14.351%, #264986 82.518% );
	box-shadow: 0 6px 19px rgba( 0, 0, 0, .25 );
}
.m-lect__photo { object-fit: contain; }
/* a portrait added later has no hand-placed box, so it stands on its tile */
.m-lect__photo--fit { object-position: bottom center; }
.m-lect__card {
	/* 536:809 — a 30% wash behind a 15px backdrop blur, inside a 2px #1e3763
	   edge at radius 15. It was drawn as a flat white card with a pale border. */
	background: linear-gradient( 90deg, rgba( 234, 234, 234, .3 ) 0%, rgba( 199, 232, 255, .3 ) 100% );
	background-origin: border-box;
	-webkit-backdrop-filter: blur( 15px );
	backdrop-filter: blur( 15px );
	/* the 2px edge and 15px radius scale with the card */
	border: 1.5px solid #1e3763;
	border-radius: 9px;
}
.m-lect__name {
	/* 536:1068 — Brutalist Bold 26 in the design, drawn here at 0.62 */
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 16.1px;
	line-height: 1.23;
	color: #1e3763;
	white-space: nowrap;
	text-align: center;
}
.m-lect__role {
	/* 536:850 — Modernist Regular 22 in the design, drawn here at 0.62 */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 13.6px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* -------------------------------------------------------------- 8 · DNA */

.m-dna__panel {
	/* 531:576 — 135.54deg, #50aeef at 14.35% to #264986 at 82.52%, radius 26 */
	border-radius: 26px;
	background: linear-gradient( 135.54deg, #50aeef 14.351%, #264986 82.518% );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.m-dna__eyebrow {
	/* 531:579 — Modernist Bold 30 on a wide flat radial, #d0d0d0 at the centre
	   out to white, clipped to the glyphs */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 30px;
	line-height: 1.23;
	text-align: center;
	background-image: radial-gradient( 100% 100% at 50% 50%, #d0d0d0 0%, #ffffff 99.5% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.m-dna__title {
	/* 531:580 — Modernist Bold 20, #92d5ff, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 20px;
	line-height: 1.23;
	color: #92d5ff;
	text-align: center;
}
.m-dna__para {
	/* 531:581 / 531:582 — Modernist Regular 18, #ededed, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 18px;
	line-height: 1.23;
	color: #ededed;
	text-align: center;
}
/* the raw artwork is 1138x650 against a 425x256 node — the design stretches
   it into the frame rather than cropping to fill */
.m-dna__art { object-fit: fill; }

/* --------------------------------------------------------- 9 · 4 ממדים */

.m-dim__title {
	/* 531:491 — Brutalist Bold 22, black. It was set in Modernist at 28 with
	   the second line italic; the design italicises nothing here. */
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 22px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-dim__title-2 {
	/* the second line is the same 22, filled with a near-vertical blue ramp */
	background-image: linear-gradient( 177.276deg, #50aeef 14.351%, #264986 82.518% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.m-dim__card {
	/* 531:588 — the same glass and gradient stroke as the benefit cards, but
	   here the fill really is 10% white: the render measures the inside and
	   the outside at the same #fbfbfb. */
	background: rgba( 255, 255, 255, .1 );
	background-origin: border-box;
	/* no backdrop blur here: this sits on an opaque fill, so the blur paints
	   nothing and costs a full readback of the page behind it every frame */
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
	position: relative;
}
/* The stroke has to be drawn as a masked ring rather than a border-image,
   because border-image ignores border-radius and would square the corners. */
.m-dim__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	background: linear-gradient( 180deg,
		#fdfdfd 0%, #e9eff3 10%, #d5e2ea 20%, #c3d7e5 30%, #b0cce0 40%,
		#9fc4dd 50%, #8ebcdd 60%, #7eb6de 70%, #6eb2e2 80%, #60afe7 90%,
		#51aeee 100% );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask-composite: exclude;
	pointer-events: none;
}
/* the design stretches each icon into its node box; contain letterboxed
   them and left icon 3 sitting 9px low */
.m-dim__icon { object-fit: fill; }
.m-dim__art { object-fit: fill; }
.m-dim__ctitle {
	/* 531:592 — Modernist Bold 20, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 20px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-dim__cbody {
	/* 531:596 — Modernist Regular 17, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* -------------------------------------------------- 10 · למי זה מתאים */

.m-aud__marquee {
	/* 531:605 — the band runs light blue ACROSS, not top to bottom, and the
	   render puts it at 45px tall on a 2° tilt (Figma reports the 61px bbox of
	   the rotated node, which is not the band). */
	background: linear-gradient( 90deg, #52afef 0%, #afdcfb 100% );
	transform: rotate( -2deg );
	transform-origin: center;
}
.m-aud__marquee-item {
	/* 531:606 — Brutalist Bold 30, and Figma is right that the FILL is a
	   transparent #264986: the render draws the words as hollow outlines with
	   the band showing through them, not as solid navy letters. */
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 30px;
	line-height: 45px;
	color: transparent;
	-webkit-text-stroke: 1.5px #1e3763;
	padding-inline-end: 14px;
	white-space: nowrap;
	direction: rtl;
}
/* 531:373 is the design's own blurred ellipse, drawn 949 square around a
   349 box — a radial-gradient inside the box gave a hard little disc. */
.m-aud__glow { object-fit: fill; }
/* 1000x1500 artwork in a 263x370 frame: the design stretches it, and the
   default contain drew it 6% small with air down both sides. */
.m-aud__art { object-fit: fill; }
.m-aud__card {
	/* 531:608 — a grey-to-white-to-grey wash ACROSS the card, inside the same
	   top-to-bottom stroke ramp the benefit and dimension cards carry */
	background: linear-gradient( 90deg,
		rgba( 153, 153, 153, .2 ) 4.327%,
		rgba( 255, 255, 255, .2 ) 51.442%,
		rgba( 153, 153, 153, .2 ) 90.865% );
	background-origin: border-box;
	/* no backdrop blur here: this sits on an opaque fill, so the blur paints
	   nothing and costs a full readback of the page behind it every frame */
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
	position: relative;
}
.m-aud__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	background: linear-gradient( 180deg,
		#fdfdfd 0%, #e9eff3 10%, #d5e2ea 20%, #c3d7e5 30%, #b0cce0 40%,
		#9fc4dd 50%, #8ebcdd 60%, #7eb6de 70%, #6eb2e2 80%, #60afe7 90%,
		#51aeee 100% );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask-composite: exclude;
	pointer-events: none;
}
.m-aud__ctitle {
	/* 531:614 — Modernist Bold 20, black, right */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 20px;
	line-height: 1.23;
	color: #000;
}
.m-aud__cbody {
	/* 531:620 — Modernist Regular 17, black, right */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.23;
	color: #000;
}

/* ------------------------------------------------- 11 · מה לומדים בקורס */

.m-cur__title {
	/* 531:493 — Brutalist Bold 22, black, centred */
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 22px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-cur__num {
	/* 531:634 — Modernist Bold 100 in #d2d2d2, right-aligned */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 100px;
	line-height: 1.23;
	color: #d2d2d2;
	text-align: right;
	direction: ltr;
	user-select: none;
}
.m-cur__row {
	/* 531:643 — the same plate as the bonus rows */
	background: linear-gradient( 180deg, #3b88d8 0%, #e9e9e9 100% );
	background-origin: border-box;
	border: 3px solid rgba( 46, 100, 137, 0 );
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
	overflow: hidden;
}
.m-cur__text {
	/* 531:651 — 17 throughout, the heading in Bold and the rest in Regular,
	   black, right-aligned; it was set two sizes and centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.23;
	color: #000;
}
.m-cur__text strong { font-weight: 700; font-size: inherit; }
.m-cur__closing {
	/* 531:659 — Modernist Bold 17, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 17px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* ------------------------------------------------ 13 · בוגרים מספרים */

.m-test__title {
	/* 531:492 — Modernist Bold 40, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 40px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}

/* ------------------------------------------------------------ 14 · אודות */

.m-about__panel {
	/* 531:577 — 141.38deg, #50aeef at 14.35% to #264986 at 82.52%, radius 26 */
	border-radius: 26px;
	background: linear-gradient( 141.376deg, #50aeef 14.351%, #264986 82.518% );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.m-about__title {
	/* 531:694 — Modernist Bold 25, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-about__body {
	/* 531:696 — Modernist Regular 19, white, centred. Every line measures the
	   right width at 1.23 leading but the block drifts 11px high over eleven
	   lines: the render sets this one on a flat 24. */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 19px;
	line-height: 24px;
	color: #fff;
	text-align: center;
}

/* -------------------------------------------------- 15 · שאלות ותשובות */

.m-faq__title {
	/* 531:695 — Modernist Bold 30, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 30px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
/* Top and bottom as well as the sides — see the note on the desktop rule. The
   phone needs it most: at 17px in a 63px row a three-line question filled the
   box to the last pixel. */
.m-faq .tvl-faq__q { padding: 10px 16px 10px 62px; }
.m-faq .tvl-faq__q-text {
	/* 531:704 — Modernist REGULAR 17, white. The shared row markup tags it
	   .tvl-ui, which is the Brutalist face; the phone frame does not use it. */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.23;
}
.m-faq .tvl-faq__a-inner {
	/* 531:706 — Modernist Regular 15, white */
	padding: 12px 16px;
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 15px;
	line-height: 1.23;
}

/* ------------------------------------------------------------- 16 · פוטר */

.m-footer__privacy {
	/* 589:217 — Modernist Regular 13, black, centred */
	font-family: var( --tvl-font-display );
	font-weight: 400;
	font-size: 13px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.m-footer__credit { display: block; }

/* ------------------------------------------------ play disc (mobile)

   The phone draws the disc as a flat horizontal ramp, near-black on the left
   to mid grey on the right — not the desktop's off-centre radial — and its
   triangle is wider and set further right in the disc. */
.tvl-stage--m .tvl-play {
	background: linear-gradient( 90deg, #020202 0%, #6d6d6d 100% );
}
.tvl-stage--m .tvl-play::after {
	border-width: 0.412em 0 0.412em 0.753em;
	left: 57.7%;
}

/* 531:699 rows are #3b88d8 and 531:701's open panel #1f4872, both at radius
   15 — the shared rules carry the desktop's slightly different pair. */
.m-faq .tvl-faq__q { background: #3b88d8; border-radius: 15px; }
.m-faq .tvl-faq__a { background: #1f4872; border-radius: 15px; }

.m-offer__wa { font-size: 16px; }



/* the phone's card places its children absolutely, so the logo carries a box */
.m-lect__logo { object-fit: contain; object-position: center; }

/* the thank-you page — see the note in sections.css */
.m-thanks .tvl-t { text-align: center; }
.m-thanks .m-hero__bullet { text-align: center; }

/* The hook, the line under it, and the paragraph in the lecturers' band —
   Ariel asked for all three to carry more weight. They belong in this sheet
   because it is the last one loaded and it is where their sizes are set. */
.m-hero__kicker { font-size: 19px; }
.m-hero__headline { font-size: 27px; line-height: 1.22; }
.m-lect__body { font-size: 17px; }

/* The band IS the section heading — the design gives "למי זה מתאים" no other.
   The desktop one was stopped when Ariel could not read it; the phone kept
   running and the words simply left the screen, which reads as the heading
   not being there at all. Stopped here too. */
.m-aud__marquee .tvl-marquee__track { animation: none; }

/* the hot-profession lists on the phone — see the note in sections.css */
.m-hot__body li { padding-right: 20px; }
.m-hot__body li::before { right: 3px; top: calc( ( 37px - 8px ) / 2 ); width: 8px; height: 8px; border-width: 1.5px; }