/* Home page — screens Г1 M · Г2 B · Г3 A · Г4 C · Г5 B · Г6 A · Г7 B · Г8 B · Г9 A. Mock-up pixels × --u (see tp.css). */

/* Г1 — coverage plan */
.tp-hero { position: relative; height: max(560px, calc(888 * var(--u))); max-width: calc(1536 * var(--u)); margin: 0 auto; overflow: hidden; }
.tp-hero__text { position: relative; z-index: 2; padding: calc(186 * var(--u)) 0 0 var(--gutter); width: calc(700 * var(--u)); }
.tp-hero__h { font: 400 var(--t-d1)/1.13 var(--f-head); color: var(--c-navy); letter-spacing: -.022em; }
.tp-hero__sub { margin-top: calc(22 * var(--u)); max-width: calc(441 * var(--u)); font-size: var(--t-lead); line-height: 1.22; color: var(--c-navy); }
.tp-hero__btns { display: flex; flex-direction: column; align-items: flex-start; gap: calc(13 * var(--u)); margin-top: calc(34 * var(--u)); }
.tp-hero__btns .tp-btn { width: calc(333 * var(--u)); min-width: 260px; }
.tp-hero__btns .tp-btn--outline { font-size: var(--t-btn); }
.tp-hero__note { margin-top: calc(-7 * var(--u)); font-size: var(--t-s); color: var(--c-muted); }
.tp-plan { position: absolute; left: calc(470 * var(--u)); top: 0; width: calc(1066 * var(--u)); height: 100%; }
.tp-plan__img { position: absolute; left: 0; top: calc(100 * var(--u)); width: 100%; height: auto;
	-webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 82%, transparent 100%); mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 82%, transparent 100%); }
.tp-plan__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tp-plan__lines line { stroke: var(--c-navy); stroke-width: 1.4; }
.tp-plan__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-navy); box-shadow: 0 0 0 3px #fff; }
.tp-callout { position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(70 * var(--u)); min-height: 56px;
	padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u)); background: #fff; border-radius: 4px; color: var(--c-navy); font-size: var(--t-s); line-height: 1.32; }
.tp-callout:hover { outline: 2px solid var(--c-accent); }
.tp-callout__img { flex: none; display: flex; height: calc(54 * var(--u)); }
.tp-callout__img img { height: 100%; width: auto; max-width: calc(150 * var(--u)); object-fit: contain; }
.tp-callout__txt { flex: 1; white-space: nowrap; }
.tp-callout .tp-ic { color: var(--c-accent); }

/* Г2 — equipment rack */
.tp-rack-sec { padding: calc(57 * var(--u)) 0 calc(42 * var(--u)); }
.tp-rack-sec .tp-lead { margin-top: calc(5 * var(--u)); font-size: var(--t-lead); }
.tp-racks { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); margin-top: calc(23 * var(--u)); }
.tp-rack { display: grid; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(5 * var(--u)); background: #E6EAEE;
	border-left: calc(24 * var(--u)) solid var(--c-navy); border-right: calc(24 * var(--u)) solid var(--c-navy); border-image: none;
	box-shadow: inset 0 calc(3 * var(--u)) 0 var(--c-navy), inset 0 calc(-3 * var(--u)) 0 var(--c-navy); position: relative; }
.tp-rack::before, .tp-rack::after { content: ''; position: absolute; top: 0; bottom: 0; width: calc(24 * var(--u));
	background: radial-gradient(circle, #fff 0 calc(4 * var(--u)), transparent calc(4.5 * var(--u))) center top / 100% calc(36 * var(--u)) repeat-y; }
.tp-rack::before { left: calc(-24 * var(--u)); }
.tp-rack::after { right: calc(-24 * var(--u)); }
.tp-unit { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr auto calc(36 * var(--u)); align-items: center; gap: calc(18 * var(--u)); height: calc(133 * var(--u)); min-height: 96px;
	padding: 0 calc(10 * var(--u)) 0 calc(20 * var(--u)); background: #fff; color: var(--c-navy); }
.tp-unit:hover { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.tp-unit__img { width: calc(200 * var(--u)); height: calc(100 * var(--u)); margin-left: calc(-17 * var(--u)); display: flex; align-items: center; justify-content: center; color: var(--c-navy); }
.tp-unit__img img { width: 100%; height: 100%; object-fit: contain; }
.tp-unit__img .tp-ic { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.tp-unit__name { display: block; font: 700 var(--t-lead)/1.15 var(--f-text); letter-spacing: -.01em; white-space: nowrap; }
.tp-unit__n { display: block; margin-top: calc(2 * var(--u)); font-size: var(--t-m); color: var(--c-muted); }
.tp-unit__from { font-weight: 500; font-size: var(--t-xl); white-space: nowrap; }
.tp-unit > .tp-ic { color: var(--c-accent); }
.tp-rack-sec .tp-center { margin-top: calc(32 * var(--u)); }

/* Г3 — popular equipment, datasheet spotlight */
.tp-pop { padding: calc(21 * var(--u)) 0 calc(40 * var(--u)); }
.tp-pop > .tp-wrap { padding: 0 calc(36 * var(--u)) 0 calc(34 * var(--u)); }   /* the box of Г3 A is wider than the page grid */
.tp-pop .tp-h { margin-left: calc(22 * var(--u)); }
.tp-tabs { display: flex; gap: calc(64 * var(--u)); margin: calc(6 * var(--u)) 0 calc(13 * var(--u)) calc(25 * var(--u)); }
.tp-tab { position: relative; padding: 0 0 calc(10 * var(--u)); border: 0; background: none; font-weight: 500; font-size: var(--t-xl); color: var(--c-muted); cursor: pointer; }
.tp-tab.is-on { color: var(--c-navy); font-weight: 600; }
.tp-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--c-accent); }
.tp-spot { display: grid; grid-template-columns: calc(950 * var(--u)) 1fr; height: calc(420 * var(--u)); min-height: 360px; background: #fff; border: 1.5px solid var(--c-navy); border-radius: var(--radius); }
.tp-spot__fig { position: relative; }
.tp-spot__cone { position: absolute; z-index: 1; left: calc(42 * var(--u)); top: calc(115 * var(--u)); width: calc(375 * var(--u)); height: calc(225 * var(--u));
	background: linear-gradient(to left, rgba(248, 173, 64, .55), rgba(248, 173, 64, .08)); clip-path: polygon(0 0, 100% 64%, 100% 78%, 0 100%); }   /* the narrow end sits on the lens of the photo */
.tp-spot__cone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, transparent, transparent); }
.tp-spot__img { position: absolute; z-index: 0; left: calc(345 * var(--u)); top: calc(27 * var(--u)); width: calc(361 * var(--u)); height: calc(361 * var(--u)); }
.tp-spot__img img { width: 100%; height: 100%; object-fit: contain; }
.tp-spec { position: absolute; padding: calc(8 * var(--u)) calc(20 * var(--u)); background: #fff; border: 1.5px solid var(--c-navy); border-radius: 4px; font-weight: 500; font-size: var(--t-m); color: var(--c-navy); white-space: nowrap; z-index: 2; }
.tp-spec--0 { left: calc(50 * var(--u)); top: calc(28 * var(--u)); }
.tp-spec--1 { left: calc(335 * var(--u)); top: calc(28 * var(--u)); }
.tp-spec--2 { left: calc(745 * var(--u)); top: calc(28 * var(--u)); }
.tp-spec--3 { left: calc(108 * var(--u)); top: calc(355 * var(--u)); }
.tp-spec--4 { left: calc(449 * var(--u)); top: calc(355 * var(--u)); }
.tp-spec--5 { left: calc(767 * var(--u)); top: calc(355 * var(--u)); }
.tp-spot__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-spot__dot { position: absolute; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-navy); }
.tp-spot__lines polyline { fill: none; stroke: var(--c-navy); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.tp-spot__buy { border-left: 1.5px solid var(--c-line); margin: calc(18 * var(--u)) 0; padding: calc(25 * var(--u)) calc(14 * var(--u)) 0 calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(13 * var(--u)); }
.tp-spot__name { font: 700 var(--t-d4)/1.01 var(--f-text); color: var(--c-ink); letter-spacing: -.012em; }
.tp-spot__price { font: 700 var(--t-price-l)/1.2 var(--f-text); color: var(--c-ink); margin: calc(10 * var(--u)) 0 calc(11 * var(--u)); }
.tp-spot__buy .tp-btn--lg { min-height: max(50px, calc(63 * var(--u))); font-size: var(--t-btn-l); }
.tp-spot__buy .tp-btn--outline { font-size: var(--t-btn-l); }
.tp-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(19 * var(--u)); margin-top: calc(24 * var(--u)); }

/* Г4 — from site assessment to a running system (dark) */
.tp-dark { background: #252B36; color: #fff; }
.tp-path { padding: calc(77 * var(--u)) 0 calc(40 * var(--u)); }
.tp-path > .tp-wrap { padding: 0 calc(41 * var(--u)) 0 calc(42 * var(--u)); }
.tp-path .tp-h { color: #fff; font-size: var(--t-d2); line-height: 1.02; }
.tp-path .tp-lead { color: #E3E6EB; font-size: var(--t-lead); margin-top: calc(22 * var(--u)); }
.tp-path__list { list-style: none; margin: calc(24 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10 * var(--u)); }
.tp-path__item a { display: flex; flex-direction: column; height: 100%; min-height: calc(513 * var(--u)); padding: calc(10 * var(--u)) calc(2 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--c-line-dark); border-radius: 6px; background: #262C37; }
.tp-path__item a:hover { border-color: var(--c-accent); }
.tp-path__img { height: calc(300 * var(--u)); margin: 0 calc(-2 * var(--u)) 0 calc(-22 * var(--u)); overflow: hidden; }
.tp-path__img img { width: 100%; height: 100%; object-fit: cover; }
.tp-path__num { font-weight: 700; font-size: var(--t-d3); color: var(--c-accent); margin-top: calc(-1 * var(--u)); }
.tp-path__t { font-weight: 700; font-size: var(--t-lead); line-height: 1.17; margin-top: calc(4 * var(--u)); }
.tp-path__d { font-size: var(--t-m); line-height: 1.32; letter-spacing: -.012em; color: #D3D7DE; margin-top: calc(12 * var(--u)); }
.tp-path__trust { text-align: center; margin-top: calc(19 * var(--u)); font-size: var(--t-xl); color: #fff; }
.tp-path__cta { display: flex; justify-content: center; align-items: center; gap: calc(40 * var(--u)); margin-top: calc(17 * var(--u)); padding-left: calc(140 * var(--u)); }
.tp-path__cta .tp-btn--primary { width: calc(401 * var(--u)); min-width: 260px; min-height: max(50px, calc(60 * var(--u))); font-size: var(--t-btn-l); }
.tp-path__cta .tp-btn--link-light { font-size: var(--t-btn-l); }
.tp-path__note { text-align: center; margin-top: calc(12 * var(--u)); padding-right: calc(98 * var(--u)); font-size: var(--t-s); color: #D3D7DE; }

/* Г5 — authorized dealer, inventory counters */
.tp-brands { padding: calc(115 * var(--u)) 0 calc(90 * var(--u)); }
.tp-brands > .tp-wrap { padding: 0; }   /* centred with the page; at 1536 px the panel still starts at the window edge, as on the mock-up */
.tp-brands__in { display: grid; grid-template-columns: calc(687 * var(--u)) 1fr; background: #fff; width: calc(1515 * var(--u)); margin: 0 0 0 max(0px, calc((100% - 1536px) / 2)); padding: calc(50 * var(--u)) 0; }
.tp-brands__side { padding: calc(57 * var(--u)) calc(30 * var(--u)) 0 calc(62 * var(--u)); border-right: 1.5px solid var(--c-line); }
.tp-brands .tp-h--m { font-size: var(--t-d2); line-height: 1.25; }
.tp-brands__lead { margin-top: calc(12 * var(--u)); font-size: var(--t-lead); color: var(--c-navy); }
.tp-toggle { display: flex; align-items: flex-start; gap: calc(16 * var(--u)); margin-top: calc(22 * var(--u)); color: var(--c-navy); }
.tp-toggle__sw { flex: none; width: calc(64 * var(--u)); height: calc(36 * var(--u)); min-width: 44px; min-height: 26px; border-radius: 99px; background: #C9CFD8; position: relative; margin-top: 2px; }
.tp-toggle__sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(100% * .45); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.tp-toggle__t { display: block; font-size: var(--t-xl); }
.tp-toggle__d { display: block; font-size: var(--t-s); color: var(--c-muted); margin-top: 4px; }
.tp-link--navy .tp-ic { color: var(--c-navy); }
.tp-brands .tp-link { margin-top: calc(40 * var(--u)); font-size: var(--t-xl); font-weight: 500; }
.tp-brands__art { width: calc(600 * var(--u)); margin: calc(-53 * var(--u)) 0 calc(-18 * var(--u)) calc(-15 * var(--u)); mix-blend-mode: multiply; pointer-events: none; }
.tp-counts { list-style: none; margin: 0; padding: calc(56 * var(--u)) calc(41 * var(--u)) 0 calc(51 * var(--u)); }
.tp-counts li { display: grid; grid-template-columns: calc(108 * var(--u)) 1fr calc(124 * var(--u)); align-items: center; gap: calc(48 * var(--u)); height: calc(54 * var(--u)); min-height: 40px; border-bottom: 1px solid var(--c-line); }
.tp-counts li:last-child { border-bottom: 0; }
.tp-counts__name { font-size: var(--t-xl); color: var(--c-navy); }
.tp-counts__bar { height: 7px; background: #EEF1F4; border-radius: 4px; }
.tp-counts__bar span { display: block; height: 100%; background: var(--c-accent); border-radius: 4px; }
.tp-counts__n { font-size: var(--t-m); color: var(--c-navy); white-space: nowrap; }
.tp-counts__n small { font-size: var(--t-s); color: var(--c-muted); }

/* Г6 — trusted on commercial sites (dark dashboard); reviews only with a source */
.tp-trust-sec { padding: calc(65 * var(--u)) 0 calc(60 * var(--u)); }
.tp-trust { background: #262C37; border-radius: var(--radius); padding: calc(42 * var(--u)) calc(46 * var(--u)) calc(50 * var(--u)); color: #fff; position: relative; }
.tp-trust__h { color: #fff; font-size: var(--t-d2); }
.tp-trust .tp-rule { position: relative; display: block; width: 100%; margin-top: calc(-5 * var(--u)); }
.tp-nums { list-style: none; margin: calc(25 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: 347fr 336fr 335fr 340fr; }
.tp-nums li { padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)); }
.tp-nums li:first-child { padding-left: 0; }
.tp-nums li:last-child { padding-right: 0; }
.tp-nums li + li { border-left: 1px solid var(--c-line-dark); }
.tp-nums__v { display: block; white-space: nowrap; font: 400 var(--t-num)/1.1 var(--f-head); color: var(--c-accent); letter-spacing: -.01em; }
.tp-nums__l { display: block; margin-top: calc(8 * var(--u)); font-size: var(--t-xl); line-height: 1.2; color: #fff; }
.tp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)); margin-top: calc(30 * var(--u)); }
.tp-review { margin: 0; background: #fff; color: var(--c-navy); border-radius: 4px; padding: calc(32 * var(--u)); }
.tp-review blockquote { margin: 0; font-size: var(--t-xl); line-height: 1.37; }
.tp-review figcaption { margin-top: calc(40 * var(--u)); font-weight: 600; font-size: var(--t-xl); }
.tp-review__src { margin-top: 12px; color: var(--c-muted); }

/* Г7 — how it works */
.tp-how { padding: calc(50 * var(--u)) 0 calc(56 * var(--u)); }
.tp-how .tp-title { --rule: 59%; }
.tp-how > .tp-wrap { padding: 0 calc(39 * var(--u)) 0 calc(40 * var(--u)); }
.tp-how__cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(25 * var(--u)); margin: calc(22 * var(--u)) 0 calc(28 * var(--u)); }
.tp-how__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: calc(22 * var(--u)) calc(33 * var(--u)) calc(30 * var(--u)); overflow: hidden; }
.tp-how__top { position: relative; height: calc(181 * var(--u)); }
.tp-how__top .tp-h { position: relative; z-index: 1; padding-top: calc(7 * var(--u)); line-height: 1.306; }
/* the drawings sit where the mock-up has them; their white margins blend into the card */
.tp-how__top img { position: absolute; max-width: none; mix-blend-mode: multiply; }
.tp-how__card:first-child .tp-how__top img { left: calc(264 * var(--u)); top: calc(-64 * var(--u)); width: calc(384 * var(--u)); }
.tp-how__card:last-child .tp-how__top img { left: calc(330 * var(--u)); top: calc(-46 * var(--u)); width: calc(358 * var(--u)); }
.tp-steps { list-style: none; margin: 0 0 calc(18 * var(--u)); padding: 0; counter-reset: s; flex: 1; }
.tp-steps li { counter-increment: s; display: grid; grid-template-columns: calc(89 * var(--u)) 1fr; align-items: center; min-height: calc(106 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)) 0;
	font-size: var(--t-xl); line-height: 1.25; color: var(--c-navy); border-bottom: 1px solid var(--c-line); }
.tp-steps li:last-child { border-bottom: 0; }
.tp-steps li::before { content: counter(s); font: 400 var(--t-d3)/1 var(--f-head); color: var(--c-accent); }
.tp-how .tp-terms { grid-template-columns: 318fr 306fr 263fr 273fr 297fr; padding-top: calc(36 * var(--u)); }
.tp-how__card .tp-btn--lg { min-height: max(52px, calc(73 * var(--u))); font-size: var(--t-btn-l); }

/* Г8 — guides */
.tp-guides { padding: calc(61 * var(--u)) 0 calc(40 * var(--u)); }
.tp-guides .tp-title__aside { margin-bottom: calc(11 * var(--u)); }
.tp-guides > .tp-wrap { padding: 0 calc(64 * var(--u)) 0 calc(62 * var(--u)); }   /* Г8 B sits inside a narrower grid */
.tp-guides .tp-title { --rule: 100%; padding-bottom: calc(18 * var(--u)); }
.tp-guides .tp-title__h { font-size: var(--t-d2); }
.tp-guides__grid { display: grid; grid-template-columns: calc(698 * var(--u)) 1fr; grid-template-rows: repeat(3, 1fr); gap: calc(20 * var(--u)) calc(18 * var(--u)); margin-top: calc(46 * var(--u)); }
.tp-guide { display: grid; grid-template-columns: calc(270 * var(--u)) 1fr; gap: calc(34 * var(--u)); align-items: center; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); color: var(--c-navy); }
.tp-guide:hover { border-color: var(--c-accent); }
.tp-guide__img img { width: 100%; aspect-ratio: 270 / 198; object-fit: cover; }
.tp-guide__cat { display: flex; align-items: center; gap: 14px; font-size: var(--t-s); color: var(--c-muted); }
.tp-guide__cat::before { content: ''; width: calc(34 * var(--u)); min-width: 22px; height: 3px; background: var(--c-accent); }
.tp-guide__t { display: block; margin-top: calc(10 * var(--u)); font: 700 var(--t-xl)/1.18 var(--f-text); letter-spacing: -.012em; color: var(--c-ink); }
.tp-guide__date { display: block; margin-top: calc(14 * var(--u)); font-size: var(--t-m); color: var(--c-muted); }
.tp-guide--big { grid-row: 1 / -1; grid-template-columns: 1fr; align-content: start; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(17 * var(--u)); gap: 0; }
.tp-guide--big .tp-guide__img img { aspect-ratio: 655 / 410; }
.tp-guide--big .tp-guide__body { padding: calc(24 * var(--u)) calc(4 * var(--u)) 0; }
.tp-guide--big .tp-guide__cat { font-size: var(--t-m); }
.tp-guide--big .tp-guide__t { max-width: calc(600 * var(--u)); font-size: var(--t-d3); line-height: .98; margin-top: calc(6 * var(--u)); }
.tp-guide--big .tp-guide__date { font-size: var(--t-xl); margin-top: calc(22 * var(--u)); }

/* Г9 — final call */
.tp-final { position: relative; overflow: hidden; }
.tp-final__in { display: grid; grid-template-columns: calc(970 * var(--u)) 1fr; min-height: calc(598 * var(--u)); padding-left: calc(62 * var(--u)); }
.tp-final__form { padding: calc(58 * var(--u)) 0 calc(28 * var(--u)); position: relative; z-index: 2; }
.tp-final__head { position: relative; width: calc(1030 * var(--u)); padding-bottom: calc(8 * var(--u)); margin-bottom: calc(28 * var(--u)); --rule: 100%; }
.tp-final__h { font: 400 var(--t-d2)/1.05 var(--f-head); color: var(--c-navy); letter-spacing: -.02em; white-space: nowrap; }
.tp-final__sub { margin-top: calc(2 * var(--u)); font-size: var(--t-lead); color: var(--c-navy); }
.tp-final__art { position: absolute; right: 0; top: 0; width: calc(496 * var(--u)); height: 100%; overflow: hidden; z-index: 1; }
.tp-final__art img { position: absolute; left: calc(-4 * var(--u)); top: calc(-54 * var(--u)); width: calc(627 * var(--u)); max-width: none; mix-blend-mode: multiply; }

/* Tablet and phone */
@media (max-width: 1023px) {
	.tp-hero { height: auto; padding-bottom: 24px; }
	.tp-hero__text { width: auto; padding: 36px var(--gutter) 0; }
	.tp-hero__h {  }
	.tp-hero__sub { max-width: 560px; }
	.tp-plan { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 24px; }
	.tp-plan__img { top: 0; }
	.tp-plan__lines, .tp-plan__dot { display: none; }
	.tp-callout { position: static; width: auto; height: auto; }
	.tp-hero { display: flex; flex-direction: column; }
	.tp-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; aspect-ratio: auto; padding: calc(66.6vw - 20px) var(--gutter) 0; }
	.tp-plan__img { position: absolute; left: 0; top: 0; width: 100%; }
	.tp-racks, .tp-how__cards { grid-template-columns: 1fr; }
	.tp-spot { grid-template-columns: 1fr; height: auto; }
	.tp-spot__fig { width: calc(950 * var(--u)); max-width: 100%; height: calc(420 * var(--u)); margin: 0 auto; }   /* same drawing, scaled: lines, dots and photo stay together */
	.tp-spot__buy { border-left: 0; border-top: 1.5px solid var(--c-line); margin: 0 18px; padding: 18px 0 22px; }
	.tp-cards4 { grid-template-columns: repeat(2, 1fr); }
	.tp-path__list { grid-template-columns: repeat(2, 1fr); }
	.tp-path__cta { flex-direction: column; padding: 0; gap: 16px; }
	.tp-path__note { padding: 0; }
	.tp-brands__in { grid-template-columns: 1fr; width: auto; }
	.tp-brands__side { border-right: 0; padding: 0 var(--gutter) 24px; }
	.tp-counts { padding: 0 var(--gutter); }
	.tp-nums { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
	.tp-nums li:nth-child(3) { border-left: 0; padding-left: 0; }
	.tp-reviews { grid-template-columns: 1fr; }
	.tp-guides__grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.tp-guide--big { grid-row: auto; }
	.tp-final__in { grid-template-columns: 1fr; }
	.tp-final__art { display: none; }
	.tp-terms { grid-template-columns: 1fr 1fr; gap: 16px 0; }
	.tp-terms li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.tp-pop > .tp-wrap, .tp-guides > .tp-wrap, .tp-how > .tp-wrap, .tp-path > .tp-wrap { padding: 0 var(--gutter); }
	.tp-pop .tp-h, .tp-tabs { margin-left: 0; }
	.tp-final__in { padding-left: var(--gutter); }
	.tp-final__head { width: auto; }
	.tp-final__h { white-space: normal; }
	.tp-callout__img { height: 44px; }
	.tp-how__top { display: grid; grid-template-columns: 1fr 40%; align-items: center; height: auto; }
	.tp-how__top .tp-h { padding-top: 0; }
	.tp-how__card:first-child .tp-how__top img, .tp-how__card:last-child .tp-how__top img { position: static; width: 100%; }
	.tp-how .tp-terms { grid-template-columns: 1fr 1fr; padding-top: 24px; }
}
@media (max-width: 767px) {
	.tp-hero__h {  }
	.tp-hero__btns .tp-btn { width: 100%; }
	.tp-callout {  padding: 6px 8px; gap: 6px; }
	.tp-callout__img { height: 40px; }
	.tp-callout .tp-ic { display: none; }
	.tp-callout__txt { white-space: normal; }
	.tp-unit { grid-template-columns: 84px 1fr 24px; gap: 12px; padding: 8px 10px; height: auto; }
	.tp-unit__from { grid-column: 2; grid-row: 2;  }
	.tp-unit__img { width: auto; height: 70px; margin-left: 0; grid-row: span 2; }
	.tp-unit > .tp-ic { grid-column: 3; grid-row: 1 / span 2; width: 22px; }
	.tp-rack { padding: 6px 10px; }
	.tp-unit > * { min-width: 0; }
	.tp-unit__name { white-space: normal; }   /* "Software & Licenses" pushed the rack 25 px out at 360 px */
	.tp-tabs { gap: 20px; overflow-x: auto; }
	.tp-spot__fig { width: auto; height: 330px; margin: 0; }
	.tp-spot__dot { display: none; }
	.tp-spec { display: none; }
	.tp-spot__lines { display: none; }
	.tp-spot__img { left: 10%; width: 80%; top: 20px; height: 290px; }
	.tp-spot__cone { left: 0; top: 80px; width: 40%; height: 160px; }
	.tp-cards4 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tp-card { padding: 10px 12px 14px; }
	.tp-path__list { grid-template-columns: 1fr; }
	.tp-path__item a { min-height: 0; }
	.tp-path__img { height: 180px; }
	.tp-counts li { grid-template-columns: 88px 1fr 92px; gap: 12px; }
	.tp-trust { padding: 24px 18px 26px; }
	.tp-nums { grid-template-columns: 1fr 1fr; }
	.tp-nums li { padding: 0 6px 0 12px; }
	.tp-nums li:nth-child(odd) { padding-left: 0; }
	.tp-nums__v {  }
	.tp-nums__l {  }
	.tp-final__h {  }
	.tp-final__head { padding-bottom: 20px; }
	.tp-guides .tp-title { flex-direction: column; align-items: flex-start; gap: 10px; }
	.tp-how__top { grid-template-columns: 1fr 120px; }
	.tp-steps li { grid-template-columns: 48px 1fr; min-height: 72px; }
	.tp-guide { grid-template-columns: 120px 1fr; gap: 14px; }
	.tp-guide--big { grid-template-columns: 1fr; }
	.tp-terms, .tp-how .tp-terms { grid-template-columns: 1fr; }
	.tp-terms li { border-left: 0 !important; padding-left: 0; }
}