/* =========================================================================
   תוביל — desktop sections (Figma frame 210:8)
   =========================================================================

   Geometry and colour come from the Figma node map; only the type is fitted,
   because the design's own faces (Tel Aviv Modernist and Brutalist) cannot be
   licensed here. Each size is the size at which the stand-in reproduces the
   render's ink WIDTH, so line breaks fall where the designer put them.

   Display and text are both Rubik — 900 for Modernist Bold, 500 for Modernist
   Regular; button and field labels are Alef, stretched horizontally. See
   class-tvl-fonts.php for how those were chosen.
   ========================================================================= */

/* ------------------------------------------------- 2 · המקצוע החם */

.d-hot__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #1e3763;
}

/* Figma 25px Modernist Regular on a 55px leading — the leading is the design's
   own number, not a ratio, and it is what sets the paragraph's depth. */
.d-hot__para {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 25px;
	line-height: 55px;
	color: #000;
}

.d-hot__cut {
	object-fit: cover;
	box-shadow: 0 4px 20px 5px rgba( 0, 0, 0, .25 );
}
.d-hot__para strong {
	font-family: var( --tvl-font-display );
	font-weight: 700;
}

/* --------------------------------------------- 3 · מה כוללת ההכשרה

   Read off Figma nodes 227:6, 249:3, 242:4 and 249:8 rather than sampled from a
   flattened crop. The three things a plate could never carry: the panel is a
   plain vertical gradient, the man is a separate photograph scaled 116% inside
   an 81px-rounded box, and the strip is TRANSLUCENT — its dark top is the panel
   showing through it, not a colour of its own. The first attempt read that
   showing-through as a gradient and painted it the wrong way up. */

.d-training__panel {
	border-radius: 56px;
	background: linear-gradient( 180deg, #28477c 0%, #041635 100% );
}

.d-training__man {
	border-radius: 81px;
	overflow: hidden;
}
.d-training__man img {
	position: absolute;
	left: -0.04%;
	top: -4.65%;
	width: 116.23%;
	height: 104.65%;
	object-fit: fill;
}

.d-training__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 40px;
	line-height: 1.23;
	color: #fff;
}

.d-training__body {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 30px;
	line-height: 70px;
	color: #fff;
}

.d-training__strip {
	border-radius: 62px;
	background: radial-gradient( ellipse 739px 166.5px at 50% 50%,
		rgba( 255, 255, 255, .3 ) 0%,
		rgba( 196, 231, 255, .3 ) 50%,
		rgba( 137, 207, 255, .3 ) 100% );
	backdrop-filter: blur( 50px );
	-webkit-backdrop-filter: blur( 50px );
}

.d-training__lead {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 30px;
	line-height: 70px;
	color: #000;
}

.d-training__stat {
	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 */
	-webkit-backdrop-filter: blur( 50px );
	box-shadow: 0 4px 4px rgba( 0, 0, 0, .25 );
}
.d-training__num {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 80px;
	line-height: 70px;
	color: #000;
	white-space: nowrap;
}
.d-training__unit {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 30px;
	line-height: 70px;
	color: #000;
	white-space: nowrap;
}

.d-training__access {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 30px;
	line-height: 70px;
	color: #000;
}
.d-training__closing {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 25px;
	line-height: 70px;
	color: #000;
}
/* ------------------------------------------- 4 · מה נותן לך הקורס */

/* A real heading in the design, set very large at low contrast behind the
   blue one. It is decorative, so it is hidden from assistive tech. */
.d-benefits__ghost {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 150px;
	line-height: 1.23;
	text-align: right;
	background: linear-gradient( 0.528deg, rgba( 228, 228, 228, .25 ) 11.748%, rgba( 126, 126, 126, .5 ) 79.715% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
	user-select: none;
}

.d-benefits__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #1e3763;
}

/* Glass, not white board: a tenth of white over a 50px backdrop blur, an 8px
   radius, and a 3px border whose colour is fully transparent in the design —
   it reserves the inset without drawing a hairline. The blue outline drawn here
   before was invented. */
.d-card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	padding: 3px;
	background: linear-gradient( 180deg, rgba( 80, 174, 239, 0 ) 0%, #50aeef 100% );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.d-card__icon { object-fit: contain; }
.d-card__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 33px;
	line-height: 1.23;
	color: #000;
}
.d-card__body {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 25px;
	line-height: 40px;
	color: #000;
}

.d-benefits__closing {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 33px;
	line-height: 1.23;
	color: #000;
}

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

/* Every value below is read off Figma frame 275:17 rather than sampled: the
   band is FLAT #50aeef (the gradient here was invented, and washed its left
   end out), and the two display lines are filled with a silver-to-white-to-
   silver sweep, not plain white. */
.d-offer__band {
	border-radius: 15px;
	background: #50aeef;
}
.tvl-silver {
	background: linear-gradient( 90deg, #b6b6b6 0%, #ffffff 51.442%, #b6b6b6 97.596% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.d-offer__head {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 50px;
	line-height: 1.23;
	text-align: center;
}
.d-offer__label {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 36px;
	line-height: 1.23;
	text-align: center;
}
.d-offer__price {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 33px;
	line-height: 1.23;
	color: #dfdfdf;
	text-align: center;
}
/* The two conversion lines sit between the price and the small print. Smaller
   than the price and larger than the note, because that is their weight: the
   first is a reason to act now, the second a reason to stop comparing. */
.d-offer__launch {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 19px;
	line-height: 24px;
	color: #d8ecff;
	/* one sentence, and never one word left alone underneath it: the browser
	   evens the lines out rather than filling the first and dropping the
	   remainder. Where it is not supported the sentence simply wraps. */
	text-wrap: balance;
}
.d-offer__note {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 18px;
	line-height: 1.23;
	color: #fff;
	text-align: center;
}

/* The green plate and the red rule are fixed nodes at fixed coordinates, so
   they are drawn as boxes; only the emphasis rides on the text. */
.d-offer__badge {
	border-radius: 8px;
	background: #009c17;
}
.d-offer__strike {
	background: #ff0404;
}
.tvl-price-lit { color: #fff; }
.tvl-price-big { font-size: 45px; }

.d-offer__submit {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 23px;
	line-height: 1.23;
	background: url( "../img/d-offer-btn.svg" ) 0 0 / 100% 100% no-repeat;
	border-radius: 0;
	color: #000;
	text-align: right;
	padding-right: 25px;
}

/* ------------------------------------------------ 6 · בונוס ארגז הכלים */

.d-bonus__glow {
	background: url( "../img/d-glow-bonus.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.d-bonus__title {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #1e3763;
}
.d-bonus__lead {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 33px;
	line-height: 1.23;
	color: #1e3763;
}
.d-bonus__num {
	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;
}
/* Two stops, not three: Figma runs #3b88d8 straight to #e9e9e9. The middle
   stop here was sampled off the render and flattened the fade. */
.d-bonus__row {
	border-radius: 8px;
	background: linear-gradient( 180deg, #3b88d8 0%, #e9e9e9 100% );
	border: 3px solid rgba( 46, 100, 137, 0 );
	/* NO backdrop blur here, and the property is GONE rather than merely
	   remarked upon: it sits on an opaque fill so the blur painted nothing,
	   and a backdrop-filter promotes the plate to a layer of its own. The
	   text beside it is a following SIBLING, and this block now sits inside a
	   transformed wrapper as well — precisely the combination that put every
	   lecturer's name behind its own glass on an iPhone. */
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
/* Both runs are 33px in the design; the two stand-ins need different sizes to
   reach the same measure, so the bold run carries its own em factor. */
.d-bonus__text {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 33px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
/* The last row carries more copy and the design sets it two points smaller —
   at the shared 33px it ran straight out of the bottom of its panel. */
.d-bonus__text--sm { font-size: 28px; }
.d-bonus__text strong {
	font-family: var( --tvl-font-display );
	font-weight: 700;
}
.d-bonus__hook { object-fit: fill; pointer-events: none; }

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

.d-lect__band { object-fit: cover; }

/* The badge shape lives in the plate; only its words are redrawn here. Both
   headings here are Brutalist Bold in the design — black, not white, and not
   the display face. */
.d-lect__badge-text {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 45px;
	line-height: 1.23;
	color: #000;
}
.d-lect__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 37px;
	line-height: 1.23;
	color: #000;
}
.d-lect__body {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 26px;
	line-height: 1.23;
	color: #000;
}


/* ---- the lecturers deck ----

   One page is the design's 3x5 grid; the section pages through as many as the
   client adds. The blue tile is drawn here rather than baked into each
   photograph, which is what lets a newly uploaded portrait land on the same
   gradient as everyone else. */
.d-lect__deck { position: absolute; }

/* Three carousels, not one paged grid. Each row owns a band of the deck and
   moves inside it; the bands are measured off the render, not taken from the
   design's numbers (see the template and qa/probe-deck.js).

   direction: ltr because the cells are placed on their own coordinates and the
   design runs the first person on the left. */
.d-lect__lane { position: absolute; }
.d-lect__row {
	position: absolute;
	inset: 0;
	overflow: hidden;
	direction: ltr;
}
.d-lect__track { position: relative; }

.d-lect__tile {
	position: absolute;
	width: 237px;
	height: 227px;
	border-radius: 26px;
	background: linear-gradient( 152.755deg, #50aeef 14.351%, #264986 82.518% );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-lect__photo { position: absolute; display: block; object-fit: contain; }
/* a portrait added later has no hand-placed box, so it stands on the tile */
.d-lect__photo--fit { object-position: bottom center; }

/* Frosted glass with a navy edge — a third of grey fading to a third of pale
   blue over a 15px backdrop blur. */
.d-lect__card {
	position: absolute;
	width: 311px;
	height: auto;
	background: linear-gradient( 90deg, rgba( 234, 234, 234, .3 ) 0%, rgba( 199, 232, 255, .3 ) 100% );
	backdrop-filter: blur( 15px );
	-webkit-backdrop-filter: blur( 15px );
	border: 2px solid #1e3763;
	border-radius: 15px;
	direction: rtl;
	text-align: center;
	/* The role runs the full width of the card in the design, not inside a
	   side padding — that is what decides where its lines break. */
	padding: 12px 0 10px;
}
.d-lect__name {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 30px;
	line-height: 1.23;
	color: #1e3763;
	margin-bottom: 4px;
	/* front.js sizes this to fit its panel; 30px is the design's largest. */
	font-size: 30px;
	/* The design sets the name in a box far wider than the card and lets it
	   overrun; wrapping it inside the card made every card a line taller. */
	white-space: nowrap;
}
.d-lect__role {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 22px;
	line-height: 1.23;
	color: #000;
}

/* ---------------------------------------------- 8 · ה-DNA של המצליחנים */

/* The board is a gradient node and the footballers a separate photograph over
   its left half; both headings are Brutalist Bold, not the display face. */
.d-dna__panel {
	border-radius: 26px;
	background: linear-gradient( 169.521deg, #50aeef 14.351%, #264986 82.518% );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-dna__photo { overflow: hidden; }
.d-dna__photo img {
	position: absolute;
	top: 0;
	left: 1.71%;
	width: 99.34%;
	height: 100%;
	object-fit: fill;
}
/* The wash has to sit on the element that actually holds the glyphs: put it on
   the block and the stretched span inside inherits only the transparent colour,
   and the heading disappears. */
.d-dna__eyebrow {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 37px;
	line-height: 1.23;
}
.d-dna__eyebrow .tvl-ui {
	background: linear-gradient( 180deg, #ffffff 0%, #d0d0d0 50%, #ffffff 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.d-dna__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 25px;
	line-height: 1.23;
	color: #92d5ff;
}
.d-dna__para {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 22px;
	line-height: 1.23;
	color: #ededed;
}

/* -------------------------------------------------- 9 · 4 ממדי למידה */

/* Brutalist Bold 45px, centred, black — and only the SECOND line is washed with
   the section's blue gradient. The italic and the flat blue here were both
   invented. */
.d-dim__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 45px;
	line-height: 1.23;
	color: #000;
}
.d-dim__title-2 {
	background: linear-gradient( 177.276deg, #50aeef 14.351%, #264986 82.518% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.d-dim__card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-dim__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	padding: 3px;
	background: linear-gradient( 180deg, rgba( 80, 174, 239, 0 ) 0%, #50aeef 100% );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.d-dim__icon { object-fit: cover; }
.d-dim__art { object-fit: cover; }
.d-dim__ctitle {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 26px;
	line-height: 1.23;
	color: #000;
}
.d-dim__cbody {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 22px;
	line-height: 1.23;
	color: #000;
}

/* -------------------------------------- 10 · כיתוב רץ + למי זה מתאים */

/* A blue band set at a slight angle, its words outlined rather than filled.

   The node map gives this band as 156px tall, which is its ROTATED bounding
   box, not the band. Measured off the render it is 90px thick and its top edge
   climbs 57px across 1840px — a rotation of −1.78°. Rotated nodes never come
   back from the map with a box you can build from. */
.d-aud__marquee {
	background: linear-gradient( 180deg, #7cc2f4 0%, #4f9fe0 100% );
	transform: rotate( -1.78deg );
	transform-origin: center;
}
/* Ariel could not read it and asked for it to stand still.
   It is set in outline — a transparent fill with a 2px stroke — and outlined
   type moving sideways at 70px reads as texture rather than as words. Held
   still it is a headline, which is what it says. */
.d-aud__marquee .tvl-marquee__track { animation: none; }
/* Outlined, not filled: the design gives the text a fill at zero alpha and
   draws only its edge, in the section's own navy — not white. */
.d-aud__marquee-item {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 70px;
	line-height: 1.23;
	color: transparent;
	-webkit-text-stroke: 2px #264986;
	padding-inline-end: 30px;
	white-space: nowrap;
	direction: rtl;
}

.d-aud__glow {
	background: url( "../img/d-glow-aud.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
/* Glass with a bright centre, read off the node rather than sampled: a fifth of
   grey at both ends and a fifth of white through the middle, over a 50px
   backdrop blur. Sampling the render gave opaque colours that could not sit
   over the glow behind them. */
.d-aud__card {
	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% );
	/* the only card blur that earns its cost: the thumb and its glow sit
	   behind these, and dropping it moved the section 0.7% off the design */
	-webkit-backdrop-filter: blur( 50px );
	backdrop-filter: blur( 50px );
	-webkit-backdrop-filter: blur( 50px );
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-aud__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	padding: 3px;
	background: linear-gradient( 180deg, rgba( 80, 174, 239, 0 ) 0%, #50aeef 100% );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.d-aud__ctitle {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 26px;
	line-height: 1.23;
	color: #000;
}
/* 24px, fitted by wrap. An earlier pass scaled this DOWN to 19.8 by comparing
   full-line widths — which matched to within 1px while carrying two extra words
   per line. Only the wrap tells you the truth about a paragraph. */
.d-aud__cbody {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 22px;
	line-height: 1.23;
	color: #000;
}

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

.d-cur__glow {
	background: url( "../img/d-glow-cur.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.d-cur__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 45px;
	line-height: 1.23;
	color: #000;
}
/* The timeline spine. Distinct from the stray 1px guide that runs the whole
   Figma page, which is a leftover and is not reproduced. */
.d-cur__spine { background: #1e3763; }
.d-cur__dot { background: #1e3763; border-radius: 50%; }

.d-cur__num {
	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;
}
.d-cur__row {
	border-radius: 8px;
	background: linear-gradient( 180deg, #3b88d8 0%, #e9e9e9 100% );
	border: 3px solid rgba( 46, 100, 137, 0 );
	/* 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 */
	-webkit-backdrop-filter: blur( 50px );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}
.d-cur__text {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 27px;
	line-height: 1.23;
	color: #000;
	text-align: center;
}
.d-cur__text strong {
	font-family: var( --tvl-font-display );
	font-weight: 700;
}

.d-cur__closing {
	font-family: var( --tvl-font-body );
	font-weight: 500;
	font-size: 37.27px;
	line-height: 41.85px;
	color: #1e3763;
}

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

.d-test__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #000;
}

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

/* Fitted, not eyeballed. Sampling a grid across the panel and solving the
   colour as a linear function of position gives a change of −76 (blue) down
   590px against −33 across 1712px — so the gradient runs almost straight down
   with an 8.4° lean, i.e. 171.6deg, and NOT the 135deg a wide box makes it look
   like. At 135deg the bottom of the panel came out far too light.
   Corner colours from the same fit: #51b0f2 top-left, #23477e bottom-right.
   The title on it is black and the paragraph white. */
.d-about__panel {
	border-radius: 30px;
	background: linear-gradient( 171.6deg, #51b0f2 0%, #23477e 100% );
	box-shadow: 0 12px 30px rgba( 30, 55, 99, .18 );
}
/* Rubik 500, not the page's usual Heebo: the title's two lines differ enough in
   length (457 and 826) for the fit to discriminate, and Rubik 500 reproduces
   both to within 0.4px where Heebo 800 is nearly 1px out per line. */
.d-about__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #000;
}
/* 32px, not the 24 first estimated. The line widths agreed to within 5px at
   24px — but only because every full line fills the box; the paragraph was
   carrying a whole extra line's worth of words. Sized by matching how it WRAPS
   (four lines, last one 381px), which pins the words per line. */
.d-about__body {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 30px;
	line-height: 1.23;
	color: #fff;
	text-align: center;
}

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

.d-faq__title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 60px;
	line-height: 1.23;
	color: #000;
}
/* The sides were always spaced; the top and bottom were not, and it never
   showed while every question fitted the row the design drew. With thirteen
   real questions several of them do not: the box grows to hold the text, and
   with no vertical padding the text grew right up against its own edges.
   16 keeps the drawn row exactly as it is — a single line is centred in 88px
   and box-sizing is border-box, so nothing moves until the text needs the
   room. */
.d-faq .tvl-faq__q { padding: 16px 40px 16px 110px; }
.d-faq .tvl-faq__q-text {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 23px;
	line-height: 1.23;
	color: #fff;
}
/* Right-aligned to x=1519 in the design, 28.25px, and the two sentences sit
   on separate lines — a natural wrap of the pair runs 989/1039/1037/487 where
   the design runs 1019/483/1019/483. */
.d-faq .tvl-faq__a-inner {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 26px;
	text-align: right;
	padding: 16px 22px 50px 46px;
	line-height: 32px;
}

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

.d-footer__privacy {
	font-family: var( --tvl-font-body );
	font-weight: 500;
	font-size: 14.34px;
	line-height: 1.23;
	color: #101b2d;
	text-align: center;
}
.d-footer__privacy:hover { text-decoration: underline; }
.d-footer__credit { display: block; }

/* the desktop card is wide; the label sits at the button's own weight */
.d-offer__wa { font-size: 22px; }

/* ------------------------------------------------ the page, stacked

   Each section sits in a .tvl-block. The block is the whole canvas wide and
   no height: every child keeps the y the design gives it, and front.js
   (stackBlocks) moves each block so it starts a set distance under the one
   before, measured from what is really drawn. So the order is one list in
   front.js, and a longer text or another lecturer moves the page instead of
   running into the section under it. */
.tvl-block {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
}

/* A talent's own logo, under his role. The card is a flex column, so it simply
   sits after the text; the height is capped rather than set, because the marks
   arrive at whatever proportion their owner drew them and none of them may be
   stretched. */
.d-lect__logo {
	display: block;
	margin: 14px auto 0;
	max-width: 280px;
	max-height: 84px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ------------------------------------------------------- the thank-you page

   It is the hero with different words in it, so it wears the hero's classes
   and only what the words need is re-set here. The hero's copy filled its
   boxes and was set hard against the right; a line of thanks is short, and
   short type hung on the right edge of a 1000px box reads as a mistake. */
.d-thanks .tvl-t,
.d-thanks .tvl-t--right { text-align: center; }
/* the handwritten line is set nowrap in the hero because its sentence is long
   enough to need the whole width; a short one may breathe */
.d-thanks .d-hero__kicker { white-space: normal; }
.d-thanks .d-hero__bullets { text-align: center; }

/* the glow reaches past the foot of the screen; on a one-screen page there is
   nothing below to cover it, and the stage measures what it can see */
.d-thanks__clip { overflow: hidden; }

/* The institutional seals under the lecturers' heading.

   One is a gold wax seal on white and the other a navy badge on a filled
   square. Left as they are they read as two unrelated pictures; on white
   cards of the same height they read as one row of credentials. */
.d-lect__seals,
.m-lect__seals {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
.d-lect__seal {
	height: 100%;
	width: auto;
	background: #fff;
	border-radius: 14px;
	padding: 10px 18px;
	box-sizing: border-box;
	box-shadow: 0 4px 18px rgba( 30, 55, 99, .12 );
}

/* The line over the seals. Small on purpose — it introduces the marks, it
   is not a heading of its own. White with a shade behind it on the desktop,
   where it lies over the cityscape photograph; the phone keeps it in the
   section's navy because there it sits on the page ground. */
.d-lect__seals-title,
.m-lect__seals-title {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	line-height: 1.23;
	text-align: center;
}
.d-lect__seals-title {
	font-size: 24px;
	color: #fff;
	text-shadow: 0 2px 10px rgba( 8, 20, 40, .75 );
}
.m-lect__seals-title {
	font-size: 15px;
	color: #264986;
}

/* The lecturers' paragraph was the smallest body on the desktop at 26 while
   its neighbours ran at 30. It has to live HERE and not in front.css: this
   sheet is loaded after that one and defines the rule it would be fighting. */
.d-lect__body { font-size: 29px; }

/* The hot-profession text: headings in the display face and two short lists.
   Hollow bullets, as Gal's document draws them, drawn in CSS rather than as a
   glyph — the body face has no ◦, and a fallback font's bullet sits at its
   own height. Each line hangs clear of its bullet when it wraps. */
.d-hot__body ul,
.m-hot__body ul { list-style: none; margin: 0; padding: 0; }
.d-hot__body li,
.m-hot__body li { position: relative; }
.d-hot__body li::before,
.m-hot__body li::before {
	content: "";
	position: absolute;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}
.d-hot__body li { padding-right: 34px; }
.d-hot__body li::before { right: 6px; top: calc( ( 55px - 11px ) / 2 ); width: 11px; height: 11px; }

/* Every card in a desktop row is the height of the row's tallest (Gal's final
   notes) — front.js sets the min-height once the names are fitted. So the
   card is a column and the logo sits at its foot: cards of one height with
   their marks at three different heights would look more uneven, not less. */
.d-lect__card { display: flex; flex-direction: column; }
.d-lect__card .d-lect__logo { margin-top: auto; }
.d-lect__role:has( + .d-lect__logo ) { margin-bottom: 14px; }

/* The logo's box is fixed, not left to the picture: the logos load lazily,
   and a card measured before its mark arrived came out 52px short, so the
   row was evened to the wrong height. Every mark is plated 2:1 and so drew
   168x84 inside the old 280x84 caps — contain in a 280x84 box draws the
   same thing, and has its height from the first frame. */
.d-lect__card .d-lect__logo { width: 280px; height: 84px; max-width: none; max-height: none; }