/* =========================================================================
   תוביל — landing page
   =========================================================================

   Two canvases, one per Figma frame. Inside a canvas every element sits at the
   coordinate the designer drew it at and nothing reflows; the canvas as a whole
   is then scaled by front.js to min( available / design, 1 ).

   The canvas is direction: ltr on purpose — Figma measures x from the left, so
   the canvas keeps that frame of reference and each text block turns itself RTL.

   Colours below were sampled out of the native render, not guessed:
     #101b2d  hero navy            #1e3763  headline navy
     #50aeef  hero headline blue   #a6c7de  card hairline
     #4799d9  lecturer tile blue
   ========================================================================= */

.tvl-root {
	position: relative;
	width: 100%;
	overflow-x: clip;
	background: #fff;
}

.tvl-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	--tvl-scale: 1;
	--tvl-bleed-x: 0;
}
.tvl-stage[hidden] { display: none !important; }


.tvl-canvas {
	position: absolute;
	left: 0;
	top: 0;
	direction: ltr;
	transform-origin: top left;
	background: #fff;
}

/* -------------------------------------------------------------------- reset

   A canvas holds raw absolute boxes, so the browser's own margins on <p>, <h2>
   and friends are pure noise — one stray `margin-block: 1em` pushes a whole
   text node exactly one font-size out of place, which reads as a mystery rather
   than as a margin.

   :where() and not :is() — :where() contributes zero specificity, so the reset
   still beats the browser default and loses to every rule in this file. Written
   with :is(), a heading reset outranks the class that styles the heading and
   silently strips its size and weight. */
.tvl-canvas :where( h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote ) {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	list-style: none;
	/* The theme sets text-wrap:pretty directly on p and every heading, and an
	   inherited value from the canvas loses to that. Pretty lets the browser
	   rebalance a paragraph's last lines and move words between them, so every
	   wrapped block on the page broke a word earlier than the design does. */
	text-wrap: wrap;
}
.tvl-canvas :where( button, input, textarea, select ) {
	font: inherit;
	color: inherit;
	margin: 0;
}
.tvl-canvas :where( a ) { color: inherit; text-decoration: none; }
.tvl-canvas :where( img ) { max-width: none; }

.tvl-canvas {
	font-family: var( --tvl-font-body );
	color: #101b2d;
	letter-spacing: normal;
	word-spacing: normal;
	font-style: normal;
	/* The theme sets text-wrap: pretty on the whole document, which lets the
	   browser rebalance the last lines of a paragraph and move words between
	   them. The design wraps plainly, so every paragraph on the page was
	   breaking a word early — the single hardest bug here to see and the
	   easiest to feel. */
	text-wrap: wrap;
	text-transform: none;
	text-indent: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.tvl-canvas * { box-sizing: border-box; }

/* --------------------------------------------------------------- primitives */

/* Everything on the canvas is placed, never flowed. */
.tvl-canvas .tvl-a { position: absolute; }

/* A section is a grouping wrapper and nothing else.
   It must NOT establish a containing block: every child carries its coordinate
   in the Figma frame, and a positioned section would make those coordinates
   relative to the section instead of the canvas — so each one would land at its
   own offset plus the section's, and the whole page below the hero would walk
   down the screen. display: contents removes the box entirely. */
.tvl-canvas .tvl-sec { display: contents; }

/* A window onto an oversized picture — see TVL_Render::crop_image. */
.tvl-crop {
	position: absolute;
	display: block;
	overflow: hidden;
	pointer-events: none;
}
.tvl-crop img { position: absolute; max-width: none; }

.tvl-img {
	position: absolute;
	display: block;
	object-fit: contain;
}

/* A text block: placed by the design's box, RTL inside it.
   Deliberately NOT white-space: pre-line — the templates indent their markup,
   and under pre-line that indentation becomes real line breaks, which silently
   re-wrapped every headline on the page. Line breaks come from <br> in the
   content, which is what the editor writes and what nl2br produces. */
.tvl-t {
	position: absolute;
	direction: rtl;
	text-align: center;
}
.tvl-t--right { text-align: right; }
.tvl-t--left  { text-align: left; }

/* Full-bleed bands. Past the scale cap the canvas is narrower than the window,
   which would leave a white strip down each side of any band that is meant to
   run edge to edge. --tvl-bleed-x is the shortfall in design pixels and is 0
   until the cap bites, so this is a no-op below it. */
.tvl-bleed {
	margin-left: calc( var( --tvl-bleed-x ) * -1px );
	margin-right: calc( var( --tvl-bleed-x ) * -1px );
	padding-left: calc( var( --tvl-bleed-x ) * 1px );
	padding-right: calc( var( --tvl-bleed-x ) * 1px );
	width: calc( 100% + var( --tvl-bleed-x ) * 2px );
}

/* ------------------------------------------------------------- play button

   Rebuilt rather than exported: Figma serialises this node as a radial gradient
   behind a polygon, and inside an <img> the gradient composites against nothing
   and the disc arrives flat. */
.tvl-play {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient( circle at 32% 30%, #4a4a4a 0%, #2a2a2a 45%, #111 100% );
	pointer-events: none;
}
.tvl-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate( -50%, -50% );
	border-style: solid;
	border-width: 0.29em 0 0.29em 0.42em;
	border-color: transparent transparent transparent #fff;
	font-size: inherit;
}

/* ------------------------------------------------------------- video card */

.tvl-video {
	position: absolute;
	overflow: hidden;
	background: #c4c4c4;
	border-radius: 12px;
}
.tvl-video__trigger {
	position: absolute;
	inset: 0;
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: default;
}
.tvl-video__trigger[data-src]:not( [data-src=""] ) { cursor: pointer; }
.tvl-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tvl-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
}
.tvl-video.is-playing .tvl-video__trigger,
.tvl-video.is-playing .tvl-play,
.tvl-video.is-playing .tvl-video__poster { display: none; }

/* ------------------------------------------------------------ arc carousel

   Seven seats on an arc; front.js decides which card sits in which seat. The
   seat geometry lives in the JS because it is data lifted off the design, not
   styling. */
.tvl-arc {
	position: absolute;
	outline: none;
}
.tvl-arc__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.tvl-arc__card {
	position: absolute;
	width: 287px;
	height: 467px;
	border-radius: 14px;
	background: #c4c4c4;
	overflow: hidden;
	transform-origin: 50% 50%;
	transition: left .45s cubic-bezier( .22, .61, .36, 1 ),
	            top .45s cubic-bezier( .22, .61, .36, 1 ),
	            transform .45s cubic-bezier( .22, .61, .36, 1 ),
	            opacity .3s linear;
	box-shadow: 0 8px 30px rgba( 16, 27, 45, .12 );
}
.tvl-arc__nav {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border: 0;
	border-radius: 50%;
	background: rgba( 30, 55, 99, .9 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 40;
	display: grid;
	place-items: center;
	transition: background .2s, transform .2s;
}
/* The design has no arrows — its layer is named "ניתן לנווט עם חצי המקלדת", so
   keyboard and swipe are the intended controls. The buttons are kept for people
   who want something to click, but stay out of the way until the carousel is
   hovered or focused, which is also what makes the resting page match the
   render. They remain reachable by keyboard throughout. */
.tvl-arc__nav {
	opacity: 0;
	transition: opacity .2s, background .2s, transform .2s;
}
.tvl-arc:hover .tvl-arc__nav,
.tvl-arc:focus-within .tvl-arc__nav,
.tvl-arc__nav:focus-visible { opacity: 1; }
.tvl-arc__nav:hover { background: #1e3763; transform: scale( 1.06 ); }
.tvl-arc__nav--prev { right: 8px; }
.tvl-arc__nav--next { left: 8px; }

/* A finger cannot hover.
   The arrows fade in on hover, which on a phone means they never appear at all
   — and the arc's only other control is a swipe, which nobody can see. Where
   there is no hover they simply stay. */
@media ( hover: none ) {
	.tvl-arc__nav { opacity: 1; }
}

/* --------------------------------------------------------------- accordion */

/* The list flows so an opening panel can push the rows below it, which is what
   the design shows at rest: row one open, the rest sitting under its panel. */
.tvl-faq {
	position: absolute;
	direction: rtl;
	display: flex;
	flex-direction: column;
}
.tvl-faq__row { position: relative; direction: rtl; }
.tvl-faq__q {
	position: relative;
	/* a flex box rather than a block, so a question of one line sits on the
	   middle of the row exactly as the design draws it, and one of three lines
	   grows the row evenly above and below */
	display: flex;
	align-items: center;
	width: 100%;
	border: 0;
	cursor: pointer;
	text-align: right;
	background: #3d8ddd;
	color: #fff;
	border-radius: 14px;
	font-family: var( --tvl-font-display );
}
.tvl-faq__chev {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	border-radius: 50%;
	background: #1e3763;
	display: grid;
	place-items: center;
	transition: transform .25s ease;
}
.tvl-faq__chev svg { width: 45%; height: 45%; fill: none; stroke: #fff; stroke-width: 2.2; }
.tvl-faq__row.is-open .tvl-faq__chev { transform: translateY( -50% ) rotate( -45deg ); }
.tvl-faq__a {
	overflow: hidden;
	height: 0;
	margin-top: 0;
	transition: height .3s ease, margin-top .3s ease;
	background: #1e3f62;
	color: #fff;
	border-radius: 14px;
}
/* The gap above an open panel is part of the drawn rhythm, so it appears only
   when the panel does — otherwise every closed row would carry a dead 15px. */
.tvl-faq__row.is-open .tvl-faq__a { margin-top: var( --tvl-faq-gap, 15px ); }
.tvl-faq__a-inner { padding: 22px 34px; }

/* The footer links ride at the foot of the question column. */
.tvl-faq .d-footer__privacy,
.tvl-faq .m-footer__privacy,
.tvl-faq .d-footer__credit,
.tvl-faq .m-footer__credit {
	position: static;
	align-self: center;
	display: block;
	width: auto;
}
.tvl-faq .d-footer__credit,
.tvl-faq .m-footer__credit { flex: 0 0 auto; }

/* ----------------------------------------------------------------- marquee */

.tvl-marquee {
	position: absolute;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.tvl-marquee__track {
	display: flex;
	flex: none;
	white-space: nowrap;
	will-change: transform;
	animation: tvl-marquee 26s linear infinite;
}
.tvl-marquee__group { display: flex; flex: none; }
@keyframes tvl-marquee {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( 50% ); } /* RTL: the strip travels rightward */
}
@media ( prefers-reduced-motion: reduce ) {
	.tvl-marquee__track { animation: none; }
}

/* -------------------------------------------------------------------- form */

.tvl-form { position: absolute; direction: rtl; }
.tvl-form__field { position: absolute; }
.tvl-form__input {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 9px;
	background: #e9e9e9;
	text-align: right;
	padding: 0 24px 0 12px;
	color: #000;
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	/* The floor only undoes the canvas scale, so a focused field never
	   drops under 16 real px and makes iOS zoom the page. */
	font-size: max( 23px, calc( 16px / var( --tvl-scale ) ) );
	line-height: 1.23;
}
.tvl-form__input::placeholder { color: #000; opacity: 1; }
.tvl-form__field.has-error .tvl-form__input { box-shadow: 0 0 0 2px #d63638;
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	/* The floor only undoes the canvas scale, so a focused field never
	   drops under 16 real px and makes iOS zoom the page. */
	font-size: max( 23px, calc( 16px / var( --tvl-scale ) ) );
	line-height: 1.23;
}

.tvl-form__submit {
	position: absolute;
	border: 0;
	cursor: pointer;
	color: #1e3763;
	font-family: var( --tvl-font-display );
	font-weight: 900;
	background: linear-gradient( 90deg, #cfe4f7 0%, #eaf3fb 55%, #ffffff 100% );
	transition: filter .2s, transform .12s;
}
/* The same button as a LINK, when the block is set to send people somewhere
   instead of collecting a lead. A button centres its own label and an anchor
   does not, so the anchor is told to; everything else — the plate, the reveal,
   the hover — is shared, because it is the same button. */
a.tvl-form__submit,
span.tvl-form__submit {
	display: flex;
	align-items: center;
	text-decoration: none;
}
a.tvl-form__submit .tvl-form__submit-t,
span.tvl-form__submit .tvl-form__submit-t { width: 100%; }
/* a label with no link is not a control */
span.tvl-form__submit { cursor: default; }

/* Decoration does not take clicks.

   The page is a stack of absolutely placed elements, so anything drawn LATER
   with an overlapping box sits on top of whatever came before. The bonus
   section's glow is 488px of soft light that reaches back up over the first
   offer card, and on the phone it was catching every tap meant for the form —
   both fields and the button, invisibly, since the run began. Nothing that is
   only there to be looked at should be in the way of a finger. */
[class*="__glow"],
[class*="__art"],
[class*="__strip"],
.tvl-video__poster,
.tvl-play { pointer-events: none; }
/* except where the artwork IS the control */
.tvl-video .tvl-video__poster,
.tvl-video .tvl-play { pointer-events: none; }
.tvl-video__trigger { pointer-events: auto; }

/* The form covers the whole card so its fields can sit where the design puts
   them. With no fields there is nothing to cover, and a sheet of nothing over
   the artwork only steals clicks. */
.tvl-form--link { pointer-events: none; }
.tvl-form--link .tvl-form__submit,
.tvl-form--link .tvl-arrow-disc { pointer-events: auto; }

.tvl-form__submit:hover { filter: brightness( 1.05 ); }
.tvl-form__submit:active { transform: translateY( 1px ); }
.tvl-form__submit[disabled] { opacity: .7; cursor: default; }

/* The button opens when the block comes into view: the badge lands, the plate
   unrolls out of it, and the label arrives last. The closed state is applied
   by script (.is-armed) rather than in the stylesheet, so a page whose script
   never runs shows an ordinary button instead of never showing one at all. */
.tvl-form__submit-t { display: block; }
/* The plate is grown out of its own background rather than clipped: a clipped
   button is not hit-testable, so until the reveal ran the form swallowed every
   click on it. Growing the background leaves the element full size and
   clickable the whole way through. */
.tvl-form.is-armed .tvl-form__submit {
	background-size: 0% 100%;
	background-position: left center;
	transition: background-size .55s cubic-bezier( .22, .61, .36, 1 ) .18s;
}
.tvl-form.is-armed .tvl-form__submit-t {
	opacity: 0;
	transition: opacity .3s ease .48s;
}
.tvl-form.is-armed .tvl-arrow-disc--art {
	opacity: 0;
	transform: scale( .55 );
	transition: opacity .26s ease, transform .38s cubic-bezier( .34, 1.56, .64, 1 );
}
.tvl-form.is-open .tvl-form__submit { background-size: 100% 100%; }
.tvl-form.is-open .tvl-form__submit-t { opacity: 1; }
.tvl-form.is-open .tvl-arrow-disc--art { opacity: 1; transform: scale( 1 ); }
@media ( prefers-reduced-motion: reduce ) {
	.tvl-form.is-armed .tvl-form__submit { background-size: 100% 100%; }
	.tvl-form.is-armed .tvl-form__submit-t { opacity: 1; }
	.tvl-form.is-armed .tvl-arrow-disc--art { opacity: 1; transform: none; }
	.tvl-form.is-armed .tvl-form__submit,
	.tvl-form.is-armed .tvl-form__submit-t,
	.tvl-form.is-armed .tvl-arrow-disc--art { transition: none; }
}
.tvl-form__hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% );
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.tvl-form__msg {
	position: absolute;
	direction: rtl;
	text-align: center;
	font-size: 17px;
	line-height: 1.4;
}
.tvl-form__msg.is-error { color: #ffd0d0; }
.tvl-form__msg.is-ok { color: #b8f0c8; }

/* The round arrow that sits on the submit button and on the hero ring. */
.tvl-arrow-disc {
	position: absolute;
	border-radius: 50%;
	background: #1e3763;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.tvl-arrow-disc svg { width: 46%; height: 46%; stroke: #fff; stroke-width: 2.4; fill: none; }
.tvl-arrow-disc--light { background: #f1f1f1; }
.tvl-arrow-disc--light svg { stroke: #1e3763; }
/* The offer block's disc is the design's own vector, circle and all, so the
   wrapper draws nothing and the icon carries the frame's own rotation. */
.tvl-arrow-disc--art { background: none; }
.tvl-arrow-disc--art img { width: 100%; height: 100%; }
/* Each badge carries its own frame rotation: the offer block flips its icon,
   the hero turns the same glyph until the shaft points down the page. */
.tvl-form .tvl-arrow-disc--art img { transform: rotate( 46.25deg ) scaleY( -1 ); }
.d-hero__cta .tvl-arrow-disc--art img { transform: rotate( -135deg ); }


/* ===================================================== hover and focus =====

   Hover belongs on the things a finger or a cursor can actually act on. The
   card plates in this build are empty rectangles with their text as a SIBLING
   — hovering one could never light the other — so the feedback lives on the
   buttons, the rows, the tiles and the fields, which is where a person is
   pointing when they expect an answer.

   Guarded by (hover: hover) so a phone never leaves an element stuck in its
   hovered state after a tap, and every transition is transform/opacity/colour
   only: the canvas is measured, and nothing here may move a coordinate.
   ======================================================================= */

.tvl-form__submit,
.tvl-form__input,
.tvl-faq__q,
.tvl-video__trigger,
.tvl-play,
.tvl-arrow-disc,
.tvl-video__poster,
.tvl-faq__chev {
	transition: transform .22s cubic-bezier( .22, .61, .36, 1 ),
	            filter .22s ease, box-shadow .22s ease,
	            background-color .22s ease, border-color .22s ease;
}

@media ( hover: hover ) {
	/* the plate warms and the badge leans toward the words */
	.tvl-form__submit:hover { filter: brightness( 1.04 ) saturate( 1.05 ); }
	.tvl-form:hover .tvl-arrow-disc--art { transform: translateX( -4px ); }

	/* a question lifts a little and its disc grows, so the whole row reads as
	   one target rather than a bar with a circle stuck on it */
	.tvl-faq__row:hover .tvl-faq__q { filter: brightness( 1.06 ); }
	.tvl-faq__row:hover .tvl-faq__chev { transform: translateY( -50% ) scale( 1.07 ); }

	/* the poster pushes in behind its own frame while the disc comes forward */
	.tvl-video:hover .tvl-video__poster { transform: scale( 1.035 ); }
	.tvl-video:hover .tvl-play { transform: scale( 1.09 ); filter: brightness( 1.12 ); }
}

/* Pressing is not hovering: this one has to answer a finger too. */
.tvl-form__submit:active { transform: translateY( 1px ); }
.tvl-video__trigger:active + .tvl-play,
.tvl-video:active .tvl-play { transform: scale( 1.02 ); }

/* The fields are the only place a person types, so they say so clearly. */
.tvl-form__input:hover { border-color: #3b88d8; }
.tvl-form__input:focus {
	outline: none;
	border-color: #1f4872;
	box-shadow: 0 0 0 3px rgba( 59, 136, 216, .28 );
}
.tvl-form__submit:focus-visible,
.tvl-faq__q:focus-visible,
.tvl-video__trigger:focus-visible,
.m-lect__row:focus-visible,
.tvl-canvas a:focus-visible {
	outline: 3px solid #3b88d8;
	outline-offset: 2px;
}

/* The two footer links are text, and text says it is a link by moving its own
   underline rather than by growing. */
.tvl-canvas a { transition: color .2s ease, opacity .2s ease; }
@media ( hover: hover ) {
	.m-footer__privacy:hover,
	.d-footer__privacy:hover { text-decoration: underline; }
	.m-footer__credit:hover,
	.d-footer__credit:hover { opacity: .82; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tvl-form__submit,
	.tvl-form__input,
	.tvl-faq__q,
	.tvl-video__trigger,
	.tvl-play,
	.tvl-arrow-disc,
	.tvl-video__poster,
	.tvl-faq__chev,
	.tvl-canvas a { transition: none; }
	@media ( hover: hover ) {
		.tvl-form:hover .tvl-arrow-disc--art,
		.tvl-faq__row:hover .tvl-faq__chev,
		.tvl-video:hover .tvl-video__poster,
		.tvl-video:hover .tvl-play { transform: none; }
		.tvl-faq__row:hover .tvl-faq__chev { transform: translateY( -50% ); }
	}
}
/* --------------------------------------------------- lecturers, drifting

   The rows move by themselves, continuously, rows 1 and 3 one way and row 2
   the other.

   A CSS ANIMATION, not a script writing scrollLeft each frame. scrollLeft is
   rounded to whole pixels, and at this speed a frame needs about half of one —
   so the row moved a pixel, then nothing, then a pixel, and 45% of frames on
   the desktop stood still. That is what "צרידות" was. A transform keeps its
   fraction and the compositor runs it without asking the main thread.

   The track carries several turns of the same people and travels exactly one
   turn, so the moment it starts again is identical to the moment it ended. */
@keyframes tvl-lect-left {
	from { transform: translate3d( 0, 0, 0 ); }
	to   { transform: translate3d( calc( -1 * var( --tvl-lect-loop ) ), 0, 0 ); }
}
@keyframes tvl-lect-right {
	from { transform: translate3d( calc( -1 * var( --tvl-lect-loop ) ), 0, 0 ); }
	to   { transform: translate3d( 0, 0, 0 ); }
}
.d-lect__track,
.m-lect__track {
	animation: tvl-lect-left var( --tvl-lect-dur, 55s ) linear infinite;
}
.tvl-lect--right { animation-name: tvl-lect-right; }

/* A hand on it stops it, so a card can be read. Off screen it stops too: a
   paused animation costs nothing, and this page has already paid once for
   moving things nobody was looking at. */
/* The desktop rows hold still while the pointer is on them, so a card can be
   read. The PHONE's do not: Ariel asked for motion that never stops, and a
   finger resting on a moving row while scrolling the page is not a request to
   pause it. Off screen both stop, which nobody can see. */
.d-lect__lane:hover .d-lect__track,
.d-lect__lane:focus-within .d-lect__track,
.tvl-lect-off { animation-play-state: paused; }

@media ( prefers-reduced-motion: reduce ) {
	.d-lect__track,
	.m-lect__track { animation: none; }
}

/* =========================================================== DESKTOP =====
   Frame 210:8 — 1920 × 20008
   ======================================================================= */

/* ------------------------------------------------------------------ hero */

.d-hero { background: #101b2d; }

/* Sizes fitted to the render's ink widths, not guessed. The kicker is one line
   in the design and overshoots its own 1000px frame by 10px, so it must not be
   allowed to wrap. */
/* The frame's own fill; the photograph sits on it at a fifth opacity, which is
   why sampling the render for a background colour never produced this navy. */
/* The hero is the one section that CLIPS. Its frame is 1080 tall while the
   building runs to 1170 and the glow to 1205, so left open they painted a
   dark band and a blue wash under the fold that the design has not got.
   Every other section keeps display:contents — see .tvl-sec — because their
   children carry page coordinates; the hero can afford a box because it
   starts at 0,0, so its children's coordinates are unchanged by it. */
.tvl-canvas .d-hero {
	display: block;
	position: absolute;
	overflow: hidden;
}
.d-hero__ground {
	background: #121c2c;
	overflow: hidden;
}
.d-hero__bg {
	position: absolute;
	object-fit: cover;
	opacity: .2;
	pointer-events: none;
}
/* A 402px circle whose blur spills 74.63% past it on every side — so the box
   drawn here is the 1002px extent, not the circle. */
.d-hero__glow {
	background: url( "../img/d-hero-glow.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.d-hero__building { object-fit: cover; }
.d-hero__women { object-fit: cover; }
.d-hero__men { overflow: hidden; }
.d-hero__men img {
	position: absolute;
	top: 0;
	left: -1.57%;
	width: 100.32%;
	height: 100%;
	/* The design gives this fill an explicit width AND height with no crop, so
	   it stretches. object-fit: cover instead enlarges and clips it, which made
	   the people noticeably bigger than the design draws them. */
	object-fit: fill;
}

.d-hero__kicker {
	font-family: var( --tvl-font-script );
	font-weight: 400;
	/* The design set the old line at 60. The new one is more than twice as
	   long, and Ariel asked for it to run the same length rather than wrap:
	   29 is the size at which it does — measured, with qa/kickerfit.js, not
	   chosen. Its ink comes to 987px against the 987 the old line drew. */
	font-size: 29px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/* Two hard lines in the design, and the longer of them draws 1300px inside a
   1306px frame. Six pixels of slack is not enough to survive rounding, so it
   re-wrapped into three; nowrap holds the designer's own break. */
.d-hero__headline {
	font-family: var( --tvl-font-display );
	font-weight: 700;
	font-size: 60px;
	line-height: 73px;
	color: #50aeef;
	white-space: nowrap;
}

.d-hero__bullets {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 35px;
	line-height: 44px;
	color: #fff;
}

.d-hero__side {
	font-family: var( --tvl-font-body );
	font-weight: 400;
	font-size: 20px;
	line-height: 1.23;
	color: #fff;
	text-align: right;
}

.d-hero__cta {
	border-radius: 50%;
	direction: rtl;
}
/* Ring and glass are two separate nodes in the design, both over a 20px
   backdrop blur — which is why neither could come out of a flat plate. */
.d-hero__ring {
	position: absolute;
	background: url( "../img/d-hero-ring.svg" ) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
.d-hero__disc {
	position: absolute;
	border-radius: 50%;
	/* The alpha belongs in the colour stops, not on the element: opacity gives
	   the box its own stacking context and the backdrop blur then composites
	   against nothing, so the glass came out clear and the building behind it
	   stayed sharp. */
	background: radial-gradient( circle closest-side at 50% 50%, rgba( 255, 255, 255, .4 ) 0%, rgba( 80, 174, 239, .4 ) 100% );
	/* Ring and glass each carry the blur in the design and they overlap, so the
	   disc alone has to stand in for both passes. */
	backdrop-filter: blur( 30px );
	-webkit-backdrop-filter: blur( 30px );
	pointer-events: none;
}
.d-hero__cta-text {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	font-size: 23px;
	line-height: 1.23;
	position: absolute;
	text-align: center;
	color: #fff;
}
.d-hero__cta:hover .tvl-arrow-disc { transform: translateY( 3px ); }
.tvl-arrow-disc { transition: transform .2s ease; }

/* The design's own button face. Nothing to compensate for any more: the
   earlier stand-ins needed a horizontal stretch and negative tracking to
   reach Brutalist Bold's width, and all of that is gone. */
.tvl-ui {
	font-family: var( --tvl-font-ui );
	font-weight: 700;
}

/* --------------------------------------------------- ask, without signing up

   Under the form in every offer card: someone who is not ready to leave a
   number can still ask a question. Green because that is what the app is, and
   because it must read as a DIFFERENT action from the button above it — a
   second button in the same silver would just look like the first one twice. */
.tvl-wa {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	border-radius: 999px;
	background: #25d366;
	color: #06331a;
	text-decoration: none;
	font-family: var( --tvl-font-ui );
	font-weight: 700;
	line-height: 1.1;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .28 );
	transition: filter .2s, transform .12s;
}
.tvl-wa__mark {
	width: 1.35em;
	height: 1.35em;
	flex: 0 0 auto;
	fill: #06331a;
}
.tvl-wa__t { display: block; }
.tvl-wa:hover { filter: brightness( 1.06 ); }
.tvl-wa:active { transform: translateY( 1px ); }
.tvl-wa:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
@media ( prefers-reduced-motion: reduce ) {
	.tvl-wa { transition: none; }
	.tvl-wa:active { transform: none; }
}

/* Ariel asked for the hook and the line under it to carry more weight, on
   both frames. The boxes were widened to match in the templates — these are
   both set nowrap on the desktop and were already within a few pixels of
   their old width, so the size alone would have run them off the end. */
.d-hero__kicker { font-size: 35px; }
.d-hero__headline { font-size: 68px; }


/* ------------------------------------------------ the floating button

   Not on the canvas, so it is not scaled with it: a real-size control at
   the foot of the screen. Navy to sky, the lecturer tiles' gradient, so it
   belongs to the page; hidden by sliding down and fading, and untouchable
   while hidden. */
.tvl-root .tvl-float {
	position: fixed;
	z-index: 9990;
	left: 50%;
	bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
	display: inline-flex;
	align-items: center;
	gap: 10px;
	direction: rtl;
	margin: 0;
	padding: 0 26px 0 22px;
	height: 50px;
	border: 2px solid rgba( 255, 255, 255, .85 );
	border-radius: 999px;
	background: linear-gradient( 152.755deg, #50aeef 0%, #264986 100% );
	box-shadow: 0 8px 24px rgba( 30, 55, 99, .35 );
	color: #fff;
	font-family: var( --tvl-font-ui, inherit );
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	width: auto;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translate( -50%, 24px );
	transition: opacity .25s ease, transform .25s ease;
}
.tvl-root .tvl-float.is-on {
	opacity: 1;
	pointer-events: auto;
	transform: translate( -50%, 0 );
}
.tvl-root .tvl-float:hover { box-shadow: 0 10px 28px rgba( 30, 55, 99, .5 ); }
.tvl-root .tvl-float:focus-visible { outline: 3px solid #1e3763; outline-offset: 3px; }
.tvl-root .tvl-float__arrow {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media ( max-width: 899px ) {
	.tvl-root .tvl-float { height: 44px; font-size: 17px; padding: 0 22px 0 18px; }
	.tvl-root .tvl-float__arrow { width: 18px; height: 18px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tvl-root .tvl-float { transition: none; }
}