/*
Homepage sections.

Measured on the Wix design at 1440 and 1920 wide: the Studio layout scales almost
everything proportionally with the viewport width (positions, widths, display type,
section heights), while body-size text stays fixed (16/17/20/22/26/40/52px). So:
  - lengths that scale use calc(N * var(--u))   (N = design pixels at 1440)
  - fixed sizes stay in px
  - the hero and the product cards are one viewport tall; their content keeps its
    design position from the top, which is what the Wix page does as well.
Exceptions measured separately (vision heading, applications row) use a linear fit
between the two widths.
*/

/* =========================================================
   Hero: full viewport, background video, pinned text block
   ========================================================= */
.hero {
	position: relative;
	height: 100vh; min-height: 640px;
	overflow: hidden;
	background: var(--c-black); color: var(--c-white);
}
.hero__media { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Background videos never show the native play button. iOS shows one when it blocks autoplay
   (Low Power Mode); the video then stays on its poster until it can play (v2/js/site.js) */
video[data-autoplay]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video[data-autoplay]::-webkit-media-controls { display: none !important; }

.hero__content { position: absolute; inset: 0; }
.hero__content > * { position: absolute; margin: 0; white-space: nowrap; }

.hero__eyebrow {
	left: calc(143 * var(--u)); top: calc(173 * var(--u));
	font-family: var(--f-alliance), var(--f-cjk);
	font-size: calc(21.4 * var(--u));
	letter-spacing: 1em; line-height: 1.4;
	text-transform: uppercase;
}
html.lang-zh .hero__eyebrow, html.lang-cn .hero__eyebrow, html.lang-ja .hero__eyebrow { letter-spacing: .5em; }
.hero__title {
	left: calc(124 * var(--u)); top: calc(162 * var(--u));
	font-family: var(--f-avenir-heavy), var(--f-cjk);
	font-weight: 400;
	font-size: calc(230.93 * var(--u));
	line-height: 1.4;
}
.hero__tags {
	left: calc(146 * var(--u)); top: calc(423 * var(--u));
	font-family: var(--f-avenir-light), var(--f-cjk);
	font-size: 16px; letter-spacing: 3.2px; line-height: 24px;
	text-transform: uppercase;
	white-space: pre;   /* the design uses two spaces around the separators */
}
.hero__slogan {
	left: calc(150 * var(--u)); top: calc(505 * var(--u));
	font-family: var(--f-avenir-light), var(--f-cjk);
	font-weight: 700;
	font-size: 40px;
	letter-spacing: 2.8px; line-height: 56px;
	text-transform: uppercase;
	color: var(--c-accent-text);
}
/* centred on the second line of the slogan: slogan top + 56px line + 28px - half the button */
.hero__cta { left: calc(497 * var(--u)); top: calc(505 * var(--u) + 61px); }

/* =========================================================
   Vision (section grows less than the width: 480px -> 556px)
   ========================================================= */
/* The design has a rule above VISION; removed at the client's request. visibility keeps its 1px so the layout below does not move */
.vision .section__inner { padding-top: 10px; padding-bottom: 28px; }
.vision .rule { visibility: hidden; }
.vision .eyebrow { margin-top: 10px; }
.vision__title { margin-top: calc(116px + 4.375vw); }
.vision__sub {
	margin: 8px 0 0 9px;
	font-size: 26px; line-height: 1.4;
	max-width: calc(750 * var(--u));
}

/* =========================================================
   Intelligence everywhere: text left, chip image right
   ========================================================= */
.intelligence {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: calc(599 * var(--u));
	/* the turning board grows past the section while it rotates and overlaps the vision heading, as in the design */
	overflow: visible;
}
.intelligence__text {
	position: relative;
	padding: calc(148 * var(--u)) 0 60px;
}
/* Wix sizes these as a percentage of the whole column, so the gutter is a margin, not column padding */
.intelligence__lead {
	margin-left: calc(86 * var(--u));
	width: 63.9%;   /* Wix: 63.92% of the left column */
	font-size: 22px; line-height: 1.4;
}
/* pinned at its design position (327px from the section top), independent of how the lead wraps */
.intelligence__title {
	position: absolute; left: calc(86 * var(--u)); top: calc(327 * var(--u));
	width: 79.8%;   /* Wix: 79.82% of the left column, so it wraps below ~1600px and not above */
	font-size: 52px; line-height: 1;
	text-transform: uppercase;
}
.intelligence__media {
	position: relative;
	transform-origin: 50% 50%;
	will-change: transform;
	backface-visibility: visible;   /* the back of the board shows mirrored while it turns */
	z-index: 2;
}
.intelligence__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }

/* =========================================================
   Applications: four icons (row width 1335px -> 1498px)
   ========================================================= */
.applications { padding: calc(59px + 2.29vw) 0 calc(31px + 2.5vw); }
.applications__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	width: calc(846px + 34vw); max-width: min(100%, 1585px);
	margin: 0 auto;
}
.applications__item { text-align: center; }
.applications__icon { width: 50px; height: 50px; margin: 0 auto; color: var(--c-white); }
.applications__label {
	margin-top: 20px;
	font-family: var(--f-light), var(--f-cjk);
	font-size: min(calc(22.53 * var(--u)), 25.06px);   /* Wix: 1.58% of the row, and the row stops growing at 1585px */
	line-height: 1.4;
}

/* =========================================================
   Our product: heading, then three stacked sticky cards
   ========================================================= */
.product .section__inner { padding-top: calc(114 * var(--u)); padding-bottom: calc(43 * var(--u)); }
.product .eyebrow { margin-top: calc(43 * var(--u)); }
.product .display { margin-top: calc(37 * var(--u)); }
.rule--light .rule__accent { width: calc(144 * var(--u)); background: var(--c-black); }

.cards { position: relative; background: var(--c-white); }

/*
Product cards, ported from the Wix layout measured at 1440 and 2196 wide (design px x --u).
The designer placed the stat rows freehand, so row spacing and the column of the small labels
differ per row and per card; they are set per row below rather than averaged.
*/
.card {
	position: sticky; top: 0;
	z-index: calc(var(--card-index, 0) + 1);
	/* one viewport tall, but never shorter than the card needs (1080px at 1920, 1124px at 2000) */
	height: max(100vh, calc(810 * var(--u)));
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, var(--c-card-shade) 6.5%, var(--c-card-shade) 94%, rgba(0, 0, 0, 0) 100%);
}
.card__box {
	position: absolute; left: 3.02%; right: 3.02%; top: calc(43 * var(--u)); bottom: calc(43 * var(--u));
	display: grid;
	grid-template-columns: 56.6% 43.4%;
	background: var(--c-white);
	border-radius: calc(18 * var(--u));
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
	/* hidden: nothing runs past the card edge (the design let the second card's photo and rules do so; client's request) */
	overflow: hidden;
}
/* Wix: the mirrored card sits higher in its section (22 instead of 43) */
.card--flip .card__box { grid-template-columns: 47.6% 52.4%; top: calc(22 * var(--u)); bottom: calc(58 * var(--u)); }

/* Vertical hairlines: grey full-height line by the text, black segment on its upper part.
   Mirrored card: grey line near the right edge, black one at the text column. */
/* Same hairline treatment as the row rules: a 1px line on a fractional position is blended
   lighter than one that lands on a whole pixel, so the scale keeps every card at the same weight */
.card__box::before, .card__box::after { content: ""; position: absolute; width: 1px; top: calc(48 * var(--u)); left: calc(53 * var(--u)); pointer-events: none; transform: scaleX(.55); transform-origin: 0 50%; }
.card__box::before { height: calc(625 * var(--u)); max-height: calc(100% - 48 * var(--u)); background: var(--c-line-light); }
.card__box::after { height: calc(243 * var(--u)); background: var(--c-black); }
.card--flip .card__box::before { display: none; }   /* the design's rule near the right edge, removed at the client's request */
.card--flip .card__box::after { left: calc(674 * var(--u)); top: calc(56 * var(--u)); height: calc(486 * var(--u)); }
.card--flip .card__text { order: 2; }
.card--flip .card__media { order: 1; }

.card__text { padding: calc(108 * var(--u)) 40px 40px calc(89 * var(--u)); }
.card--flip .card__text { padding: calc(62 * var(--u)) 40px 40px calc(66 * var(--u)); }

.card__label {
	font-family: var(--f-avenir-light), var(--f-cjk);
	font-size: calc(18.02 * var(--u));
	letter-spacing: .3em; line-height: 1.2;
	text-transform: uppercase;
}
.card__title {
	margin-top: calc(2 * var(--u));
	font-family: var(--f-light), var(--f-cjk);
	font-weight: 700;
	font-size: calc(47.31 * var(--u));
	letter-spacing: .05em; line-height: normal;
	text-transform: uppercase;
}
/* "NPU" overlaps the bottom of its label in the design */
.card--flip .card__title { margin-top: calc(-11 * var(--u)); font-size: calc(78.85 * var(--u)); }

/* ---- Stat rows ---- */
.card__stats { margin-top: 0; width: calc(656 * var(--u)); max-width: 100%; }
.card__stat {
	--pt: 0; --pb: 0; --col: 176;
	position: relative;
	display: grid; grid-template-columns: calc(var(--col) * var(--u)) max-content; align-items: center;
	padding: calc(var(--pt) * var(--u)) 0 calc(var(--pb) * var(--u)) calc(29 * var(--u));
}
.card__stat-big {
	font-family: var(--f-light), var(--f-cjk);
	font-size: clamp(32px, calc(44.53 * var(--u)), 56px);   /* Wix min/max */
	line-height: normal;
	white-space: nowrap;
}
.card__stat-small { font-size: 20px; line-height: 1.15; color: var(--c-text-muted); white-space: nowrap; }
/* Wix draws the rules as 1px borders on sub-pixel positions, which the screen blends to a hairline */
.card__stat-rule { position: absolute; left: calc(6 * var(--u)); width: calc(656 * var(--u)); bottom: 0; height: 1px; background: var(--c-line-light); transform: scaleY(.55); transform-origin: 50% 100%; }
.card__stat:last-child .card__stat-rule { display: none; }

/* Cards 1 and 3: row spacing (top, bottom) */
.card__stat:nth-child(1) { --pt: 19.6; --pb: 8; }
.card__stat:nth-child(2) { --pt: 13; --pb: 10.5; }
.card__stat:nth-child(3) { --pt: 13; --pb: 10.5; }   /* same as row 2 (the design had it taller) */
.card__stat:nth-child(4) { --pt: 13; --pb: 15; }
/* every label is centred on its figure (designer's request); only the NPU card's first one, next to a
   two-line figure, sits on the second line (below) */
/* Column of the small labels: one per card, so the four labels line up (designer's request) */
.card:nth-child(1) .card__stat { --col: 224; }   /* a little further right than the design (designer's request) */
.card:nth-child(3) .card__stat { --col: 286; }

/* Card 2 (mirrored) */
.card--flip .card__stats { width: auto; }
.card--flip .card__stat { --col: 320; padding-left: calc(16 * var(--u)); }
.card--flip .card__stat:nth-child(1) { --pt: 0; --pb: 20; }
.card--flip .card__stat:nth-child(2) { --pt: 24; --pb: 20; }
.card--flip .card__stat:nth-child(3) { --pt: 24; --pb: 20; }   /* same as row 2 */
.card--flip .card__stat:nth-child(4) { --pt: 24; --pb: 20; }
.card--flip .card__stat:nth-child(1) .card__stat-small { align-self: start; margin-top: calc(42.5 * var(--u)); }
.card--flip .card__stat-big { font-size: clamp(30px, calc(38.3 * var(--u)), 56px); }
.card--flip .card__stat:first-child .card__stat-big { font-size: clamp(30px, calc(33.79 * var(--u)), 56px); white-space: normal; }
.card--flip .card__stat-rule { left: calc(-7 * var(--u)); width: calc(100% + 7 * var(--u)); }   /* ends at the text column, inside the card */

.card__body { margin-top: 0; max-width: calc(567 * var(--u)); padding-left: calc(16 * var(--u)); font-size: var(--fs-body); line-height: var(--lh-body); }
.card--flip .card__body { max-width: calc(610 * var(--u)); }
.card__body p + p { margin-top: 1em; }

.card .link-more { margin: calc(27 * var(--u)) 0 0 calc(25 * var(--u)); }
.card--flip .link-more { margin: calc(92 * var(--u)) 0 0 calc(16 * var(--u)); width: calc(344 * var(--u)); }

/* Photos: fixed frames of the design (541, 626 and 606x569), placed where Wix puts them */
.card__media { position: relative; }
.card__media img { position: absolute; left: 0; top: calc(62 * var(--u)); width: calc(541 * var(--u)); height: calc(541 * var(--u)); max-width: none; object-fit: cover; }
.card--flip .card__media img { left: 0; top: calc(40 * var(--u)); width: calc(626 * var(--u)); height: calc(626 * var(--u)); }
.card:nth-child(3) .card__media img { left: calc(-27 * var(--u)); width: calc(606 * var(--u)); height: calc(569 * var(--u)); }

/* =========================================================
   Why Kneron
   ========================================================= */
.why .section__inner { padding-top: calc(171 * var(--u)); }
.why .eyebrow { margin-top: calc(44 * var(--u)); }
.why__title { margin-top: calc(32 * var(--u)); }
.why__column {
	margin: calc(88 * var(--u)) 0 15px 41.26%;
	max-width: calc(752 * var(--u));
}
.why__body { font-size: var(--fs-body); line-height: var(--lh-body); }
.why__body p + p { margin-top: 1.4em; }
.why .link-more { margin-top: calc(50 * var(--u)); }
.why__image { aspect-ratio: 1425 / 864; overflow: hidden; }
.why__image img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Kneron in numbers + wave video
   ========================================================= */
.numbers .section__inner { padding-top: calc(171 * var(--u)); padding-bottom: calc(28 * var(--u)); }
.numbers .eyebrow { margin-top: calc(43 * var(--u)); }
.numbers__title { margin-top: calc(32 * var(--u)); }
.numbers__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(27 * var(--u));
	margin-top: calc(114 * var(--u));
}
.numbers__item { display: flex; flex-direction: column; }
.numbers__value {
	display: block;
	font-family: var(--f-light), var(--f-cjk);
	font-size: clamp(38px, calc(82.38 * var(--u)), 112px); line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.numbers__rule { position: relative; display: block; height: 1px; margin-top: calc(28 * var(--u)); background: var(--c-line-dark); }
.numbers__label { display: block; margin-top: calc(25 * var(--u)); font-size: 20px; line-height: 1.4; color: var(--c-text-light); }

.numbers__wave { aspect-ratio: 1425 / 490; overflow: hidden; background: var(--c-black); }
.numbers__wave video { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Awards
   ========================================================= */
.awards .section__inner { padding-top: calc(114 * var(--u)); }
.awards .eyebrow { margin-top: calc(43 * var(--u)); }
.awards__title { margin-top: calc(37 * var(--u)); }
/* the heading breaks after "by" on tablets and phones only (a <br> in the text, with a space before it) */
@media (min-width: 1001px) { .awards__title br { display: none; } }
.awards__grid {
	display: grid;
	grid-template-columns: repeat(3, calc(288 * var(--u)));
	gap: 24px;
	margin: calc(20 * var(--u)) 0 0 calc(470 * var(--u));
	padding-bottom: calc(57 * var(--u));
}
.awards__item { width: calc(288 * var(--u)); height: calc(162 * var(--u)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.awards__item img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	transition: transform .4s var(--ease-out-cubic);
}
@media (hover: hover) { .awards__item:hover img { transform: scale(1.09); } }   /* not on touch screens, where :hover sticks after a tap */

/* =========================================================
   Tablets and phones
   Ported from the Wix tablet (up to 1000px) and mobile (up to 750px) layouts, measured at
   800/1000 and 320/390 wide (as a touch device, which is how Wix lays out its gallery and
   form there). Lengths that Wix scales are in vw, fixed ones in px. Where the Wix tablet
   layout is unfinished (overlapping text, labels running into the figures) the elements are
   kept apart; everything else follows the design.
   ========================================================= */
/* Tablets and phones: the hero follows the design's own layouts (Wix: tablet up to 1000px,
   mobile up to 750px): the text stacked over the video, sizes in vw like the Wix formulas.
   Above 1000px the desktop layout keeps scaling with the width. */
@media (max-width: 1000px) {
	.hero { height: auto; min-height: 100vh; }
	.hero__content {
		position: relative;   /* above the video, which is positioned */
		display: flex; flex-direction: column; align-items: flex-start;
		width: 56.07%; margin-left: 9.1vw; padding-top: 11.4vw;
	}
	.hero__content > * { position: static; white-space: normal; }
	.hero__title { order: 1; width: 97.94%; font-size: 16.2055vw; line-height: 1.4; }
	.hero__eyebrow { order: 2; margin: 2.27vw 0 0 .9vw; font-size: 1.502vw; line-height: 1.4; }
	.hero__tags { order: 3; width: 82.24%; margin: 15.45vw 0 0 .8vw; letter-spacing: .2em; line-height: 1.5; white-space: pre-wrap; }
	.hero__slogan { order: 4; width: 100%; margin: .8vw 0 0 .8vw; letter-spacing: .07em; line-height: 1.3; }
	/* right under the slogan, 34.87% from the left of the screen */
	.hero__cta { order: 5; width: 185px; padding: 0; white-space: nowrap; margin-left: calc(34.87vw - 9.1vw); }
}
@media (max-width: 750px) {
	/* a short band instead of a full screen: its bottom is the bottom of the button */
	.hero { min-height: 33.4757vh; }
	.hero__content { margin-left: 8.72vw; padding-top: 11.28vw; }
	.hero__title { font-size: 15.4667vw; }
	.hero__eyebrow { margin: 2.56vw 0 0 1.28vw; font-size: 1.6vw; }
	.hero__tags { width: 83.04%; margin: 17vw 0 0 .5vw; font-size: 5px; letter-spacing: .1em; }
	.hero__slogan { margin: 3px 0 0 1.28vw; font-size: 14px; line-height: 1.5; }
	.hero__cta { margin-left: calc(34.87vw - 8.72vw); }

	/* Phones: the desktop arrangement scaled to the width (designer's request): WORLD'S LEADING
	   above NPUs, the tags right under it, the slogan, and a small button beside its last line.
	   Positions are the desktop ones (design px at 1440) in vw. */
	.hero { height: 80vw; min-height: 0; }
	.hero__content { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; }
	.hero__content > * { position: absolute; margin: 0; width: auto; white-space: nowrap; }
	.hero__eyebrow { left: 9.93vw; top: 12.01vw; font-size: 1.486vw; }
	.hero__title { left: 8.61vw; top: 11.25vw; font-size: 16.04vw; line-height: 1.4; }
	.hero__tags { left: 10.14vw; top: 29.38vw; font-size: 5px; letter-spacing: .2em; line-height: 1.5; white-space: pre; }
	.hero__slogan { left: 10.42vw; top: 35.07vw; font-size: 14px; letter-spacing: .07em; line-height: 21px; }
	/* beside the slogan's second line, clear of its end and of the first line */
	.hero__cta { left: max(34.51vw, calc(10.42vw + 124px)); top: calc(35.07vw + 22px); height: 28px; padding: 0 14px; font-size: 11px; }
}
@media (max-width: 1000px) {
	/* ---- Vision ---- */
	.vision .section__inner { padding-top: 12vw; padding-bottom: 8vw; }
	.vision .eyebrow { margin-top: -1px; }
	.vision__title { margin-top: 3.5vw; font-size: max(36px, min(112px, 8.333vw)); }
	.vision__sub { width: 44vw; max-width: none; margin: 4.3vw 0 0 .6vw; font-size: 15px; line-height: 1.4; }

	/* ---- Intelligence: text in the right half, the board under it running up into Vision ---- */
	.intelligence { display: block; position: relative; min-height: calc(560px + 6.5vw); overflow-x: clip; overflow-y: visible; }
	.intelligence__text { position: relative; z-index: 3; display: flex; flex-direction: column; padding: 0 0 0 50vw; width: 94vw; }
	.intelligence__title { order: 1; position: static; width: auto; font-size: 15px; line-height: 1; }
	.intelligence__lead { order: 2; width: auto; margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
	.intelligence__media { position: absolute; z-index: 2; left: calc(39vw - 52px); top: calc(285px - 46vw); width: calc(107.5vw - 368px); height: calc(104.5vw + 52px); aspect-ratio: auto; }

	/* ---- Applications: two columns ---- */
	.applications { min-height: calc(420px + 1.5vw); padding: 5.2vw 0 0; }
	.applications__list { width: auto; max-width: none; margin: 0 0 0 8.6vw; grid-template-columns: 38vw 38vw; column-gap: 6.8vw; row-gap: 8.7vw; }
	.applications__label { margin-top: 20px; font-size: 1.58vw; line-height: 1.4; }

	/* ---- Our product ---- */
	.product .section__inner { padding-top: 12vw; padding-bottom: 5vw; }
	.product .eyebrow { margin-top: 5vw; }
	.product .display { margin-top: 3.5vw; }
	.rule--light .rule__accent { width: 115px; }

	/* ---- Product cards: one white box per card, the text above its photo. Each card is one
	   screen tall and sticks while the next one slides over it, as on desktop. (The Wix tablet
	   and mobile layouts split text and photo apart and reorder the cards; not followed.) ---- */
	.card {
		position: sticky; top: 0;
		height: 100vh; height: 100svh; min-height: 0;
		padding: 3vw;
		/* solid, so the card underneath does not show through while this one slides over it */
		background: linear-gradient(var(--c-card-shade), var(--c-card-shade)), var(--c-white);
	}
	.card__box, .card--flip .card__box { position: relative; inset: auto; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; }
	.card__box::before, .card__box::after, .card--flip .card__box::before, .card--flip .card__box::after { display: none; }
	.card__text, .card--flip .card__text { order: 1; position: relative; flex: 0 0 auto; padding: 8vw 6vw 0 7.85vw; }
	/* left rule: grey along the text, black on its upper part */
	.card__text::before, .card__text::after { content: ""; position: absolute; left: 3vw; top: 2.5vw; width: 1px; pointer-events: none; transform: scaleX(.55); transform-origin: 0 50%; }
	.card__text::before { bottom: 0; background: var(--c-line-light); }
	.card__text::after { height: 21vw; background: var(--c-black); }
	.card__label, .card--flip .card__label { font-size: 17px; letter-spacing: .3em; }
	.card__title, .card--flip .card__title { margin-top: 2px; font-size: 17px; letter-spacing: .05em; }
	.card__stats, .card--flip .card__stats { width: auto; margin-top: 3px; }
	.card__stat, .card:nth-child(1) .card__stat, .card--flip .card__stat {
		--col: 22vw;
		grid-template-columns: var(--col) minmax(0, 1fr); align-items: center;
		padding: 8px 0 9px 2vw;
	}
	.card:nth-child(3) .card__stat { --col: 29.6vw; }
	.card--flip .card__stat { --col: 42vw; }
	/* every label centred on its figure (the desktop rows nudge some of them) */
	.cards .card .card__stat:nth-child(n) .card__stat-small { align-self: center; margin-top: 0; font-size: 18px; white-space: normal; }
	.card__stat-big, .card--flip .card__stat-big { font-size: 5.208vw; white-space: nowrap; }
	.card--flip .card__stat:first-child .card__stat-big { font-size: 5.208vw; line-height: 1.2; white-space: normal; }
	.card__stat-rule, .card--flip .card__stat-rule { left: 0; width: 100%; }
	.card__body, .card--flip .card__body { max-width: none; width: auto; margin-top: 12px; padding-left: 0; font-size: 15px; line-height: 1.4; }
	.card .link-more, .card--flip .link-more { width: 41.8vw; margin: 16px 0 0; font-size: 14px; letter-spacing: .05em; }
	.card__media, .card--flip .card__media { order: 2; position: relative; flex: 1 1 auto; min-height: 140px; padding: 20px 7.85vw 24px; }
	.card__media img, .card--flip .card__media img, .card:nth-child(3) .card__media img { position: static; width: 100%; height: 100%; max-width: none; object-fit: contain; }

	/* ---- Why Kneron: text in the right half, then the photo ---- */
	.why .section__inner { padding-top: 12vw; }
	.why .eyebrow { margin-top: 5.2vw; }
	.why__title { margin-top: 2.8vw; }
	.why__column { max-width: none; width: 44vw; margin: 8.75vw 0 0 44vw; padding-bottom: 3vw; }
	.why__body { font-size: 15px; line-height: 1.4; }
	.why__body p + p { margin-top: 1.4em; }
	.why .link-more { width: 22.4vw; margin-top: 16px; font-size: 14px; letter-spacing: .05em; }
	.why__image { aspect-ratio: auto; height: 398px; }

	/* ---- Numbers: 2 x 2 in the right two thirds ---- */
	.numbers .section__inner { padding-top: 12vw; padding-bottom: 0; }
	.numbers .eyebrow { margin-top: 5vw; }
	.numbers__title { margin-top: 3vw; }
	.numbers__list { grid-template-columns: 28vw 28vw; column-gap: 2vw; row-gap: 2vw; margin: 7.5vw 0 0 30vw; padding-bottom: 2vw; }
	.numbers__value { font-size: max(36px, min(112px, 8.395vw)); }
	.numbers__rule { margin-top: 11px; }
	.numbers__rule .rule__accent { display: block; background: var(--c-white); }
	.numbers__item:nth-child(1) .rule__accent, .numbers__item:nth-child(3) .rule__accent { width: 104px; }
	.numbers__item:nth-child(2) .rule__accent { width: 36px; }
	.numbers__item:nth-child(4) .rule__accent { width: 191px; }
	.numbers__label { margin-top: 16px; font-size: 2.222vw; line-height: 1.4; }
	.numbers__wave { aspect-ratio: auto; height: 520px; }

	/* ---- Awards: three columns across the full width ---- */
	.awards .section__inner { padding-top: 12vw; }
	.awards .eyebrow { margin-top: 5vw; }
	.awards__title { margin-top: 3vw; }
	.awards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 90px 6vw 0; padding-bottom: 60px; }
	/* a definite height: Safari does not resolve the images' max-height against an aspect-ratio box */
	.awards__item { width: auto; height: calc((88vw - 48px) / 3 / 1.78); }
}

@media (max-width: 750px) {
	/* ---- Vision: the mobile design shows the rule above VISION (hidden on desktop) ---- */
	.vision { min-height: 343px; }
	.vision .section__inner { padding-top: 8.7vw; padding-bottom: 40px; }
	.vision .rule { visibility: visible; }
	.vision .rule .rule__accent { display: block; width: 54px; background: var(--c-white); }
	.vision .eyebrow { margin-top: calc(194px - 31.56vw); }
	.vision__title { margin-top: 7.2vw; font-size: max(28px, min(112px, 8.533vw)); }
	.vision__sub { width: auto; margin: 7px 0 0 .77vw; font-size: 12px; line-height: 1.4; white-space: nowrap; }

	/* ---- Intelligence: small heading, lead, then the board ---- */
	.intelligence { min-height: 500px; }
	.intelligence__text { padding: 0; width: auto; }
	.intelligence__title { margin-left: 6.7vw; width: 84vw; font-size: 18px; line-height: 1; }
	.intelligence__lead { width: 60.3vw; margin: max(4px, calc(31.4vw - 96.6px)) 0 0 7.4vw; font-size: 15px; line-height: 1.4; }
	/* the whole image, sized so the board itself is as large as in the design (board 84% of the
	   width tall, its left edge 7.3% in); the empty right part of the image runs off the screen */
	.intelligence__media { left: -9.1vw; top: 27.7vw; width: 114.1vw; height: 92.8vw; }

	/* ---- Applications ---- */
	.applications { min-height: 287px; padding: calc(8.7vw + 8px) 0 24px; }
	.applications__list { margin-left: calc(7.1vw + 37.3px); grid-template-columns: calc(43vw - 62.6px) calc(43vw - 62.6px); column-gap: 60px; row-gap: 30px; }
	.applications__label { font-size: 4vw; line-height: 1.4; }

	/* ---- Our product ---- */
	.product .section__inner { padding-top: 9.3vw; padding-bottom: 53px; }
	.product .eyebrow { margin-top: 50px; }
	.product .display { margin-top: 5.4vw; }

	/* ---- Product cards ---- */
	.card { padding: 4.3vw 4.1vw; }
	.card__text, .card--flip .card__text { display: flex; flex-direction: column; align-items: flex-start; padding: 8vw 7vw 0; }
	.card__text::before, .card__text::after { left: 3.5vw; top: calc(8vw - 6px); }
	.card__text::after { height: 150px; }
	.card__label, .card--flip .card__label { font-size: 16px; letter-spacing: .3em; line-height: normal; }
	.card__title, .card--flip .card__title { margin-top: 3px; font-size: 28px; letter-spacing: .05em; }
	.card--flip .card__label { font-size: 14px; }
	.card--flip .card__title { font-size: 40px; line-height: 1.1; }
	.card__stats, .card--flip .card__stats { align-self: stretch; margin-top: 12px; }
	/* one label column per card; on narrow phones it never gets narrower than the widest figure,
	   and a long label wraps instead (Wix wraps it too) */
	.card__stat, .card:nth-child(1) .card__stat, .card--flip .card__stat { --col: max(38vw, 140px); padding: 11px 0 8px; }
	.card:nth-child(3) .card__stat { --col: max(41vw, 160px); }
	.card--flip .card__stat { --col: max(47vw, 160px); }
	.cards .card .card__stat:nth-child(n) .card__stat-small { font-size: 15px; }
	.card__stat-big { font-size: 32px; }
	.card:nth-child(n+2) .card__stat-big { font-size: max(24px, 7vw); }
	.card--flip .card__stat:first-child .card__stat-big { font-size: max(20px, 6vw); line-height: 1; }
	.card__body, .card--flip .card__body { margin-top: 18px; font-size: 15px; line-height: 1.3; }
	.card .link-more, .card--flip .link-more { width: max(39vw, 125px); gap: 12px; margin-top: 20px; white-space: nowrap; }
	.card__media, .card--flip .card__media { min-height: 120px; padding: 16px 7vw 20px; }

	/* ---- Why Kneron: heading, text, then the photo ---- */
	.why .section__inner { padding-top: 12vw; }
	.why .eyebrow { margin-top: calc(78px - 12vw); }
	.why__title { margin-top: 4.4vw; }
	.why__column { width: 83.8vw; margin: 43px 0 0; padding-bottom: 25px; }
	.why .link-more { width: max(39vw, 125px); gap: 12px; margin-top: 19px; font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
	.why__image { height: 234px; }

	/* ---- Numbers: 2 x 2 across the width ---- */
	.numbers .section__inner { padding-top: 12vw; }
	.numbers .eyebrow { margin-top: calc(7.1vw + 4.3px); }
	.numbers__title { margin-top: 4.3vw; }
	.numbers__list { grid-template-columns: 42vw 42vw; column-gap: 4.1vw; row-gap: 21px; margin: calc(9.4vw + 4px) 0 0; padding-bottom: 9px; }
	.numbers__value { font-size: max(36px, min(112px, 10.256vw)); line-height: 1.1; }
	.numbers__rule { margin-top: 19px; }
	.numbers__item:nth-child(1) .rule__accent, .numbers__item:nth-child(3) .rule__accent { width: 64px; }
	.numbers__item:nth-child(2) .rule__accent { width: 21px; }
	.numbers__item:nth-child(4) .rule__accent { width: 118px; }
	.numbers__label { margin-top: 16px; font-size: 16px; line-height: 1.4; }
	.numbers__wave { height: 360px; }

	/* ---- Awards: two columns, almost edge to edge ---- */
	.awards .section__inner { padding-top: 12vw; }
	.awards .eyebrow { margin-top: calc(8.6vw - 2.5px); }
	.awards__title { margin-top: calc(5.7vw - 4px); letter-spacing: -.03em; }
	.awards .rule--light .rule__accent { width: 134px; }
	/* every logo in the same box, so they read at one size, evenly spaced (designer's request) */
	.awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 56px 5.9vw 0; padding-bottom: 56px; }
	.awards__item { height: 64px; }
	.awards__item img { max-width: 88%; max-height: 100%; }
}

/* Short screens (a phone such as the iPhone SE, a tablet held sideways): a card would not fit
   in one screen, and a sticky card taller than the screen hides its end under the next one.
   The cards then follow one another without sticking, each as tall as its content. */
@media (max-width: 1000px) and (max-height: 700px) {
	.card { position: relative; height: auto; }
	.card__media, .card--flip .card__media { flex: 0 0 auto; height: 260px; }
}