/* ============================================================================
   GUIL MODEL PAGES  ·  .pzg-*
   pozornice.hr — Sven, 2026-08-03

   Eight deck models, one template. The page has to do two jobs that pull in
   opposite directions: sell a deck to somebody browsing, and answer a
   specifier who arrived with a number in their head. So the top of the page is
   an object and three figures, and the middle is a table — not a compromise
   between the two.

   Everything is scoped under [data-pzg] so nothing here can reach the product
   pages, whose .pzp-* rules run to 120 KB and would be miserable to debug
   against a stray selector.
   ========================================================================= */

[data-pzg] {
	--pzg-ink:   var(--poz-ink, #0C0D10);
	--pzg-grey:  #5A6069;
	--pzg-grey2: #8B929E;
	--pzg-line:  rgba(22, 23, 27, .12);
	--pzg-studio:#F5F6F7;
	--pzg-pad:   clamp(20px, 4vw, 64px);
}

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

.pzg-hero {
	padding-block: clamp(18px, 2vw, 30px) clamp(40px, 5vw, 84px);
	background: linear-gradient(180deg, #FFF 0%, var(--pzg-studio) 100%);
	border-bottom: 1px solid var(--pzg-line);
}

.pzg-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(20px, 3vw, 44px);
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-crumbs a { color: inherit; text-decoration: none; transition: color .28s ease; }
.pzg-crumbs a:hover, .pzg-crumbs a:focus-visible { color: var(--pzg-ink); }
.pzg-crumbs b { color: var(--pzg-ink); font-weight: 500; }

/* The copy takes the smaller half. The deck is the thing being bought, and a
   cutout on white needs room around it or it reads as a spare part. */
.pzg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	align-items: center;
	gap: clamp(28px, 4vw, 72px);
}

.pzg-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pzg-grey);
}
.pzg-kicker i {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc, var(--poz-ink));
	flex: 0 0 auto;
}

.pzg-h1 {
	margin: 0 0 18px;
	font: 400 clamp(38px, 5.2vw, 76px)/1.02 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--pzg-ink);
}

.pzg-lead {
	margin: 0 0 clamp(24px, 2.8vw, 38px);
	max-width: 46ch;
	font: 400 clamp(15px, 1.15vw, 17px)/1.62 var(--poz-font-body, inherit);
	color: var(--pzg-grey);
}

/* The three figures somebody actually arrived for. Set as display type, not as
   table cells: a number that matters should not look like a row. */
.pzg-figs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--pzg-line);
	border-bottom: 1px solid var(--pzg-line);
}
/* Sized to their content, not to a third each.

   Equal thirds looked tidier in the abstract and broke immediately: the values
   are nowrap (a figure that wraps mid-unit is unreadable), so a long one like
   750 kg/m2 simply overflowed its third and sat on the next divider. Content
   width plus a shared gap keeps the rules where the numbers actually end. */
.pzg-figs > div {
	flex: 0 1 auto;
	min-width: 0;
	padding: 16px clamp(16px, 2vw, 30px) 18px 0;
}
.pzg-figs > div:last-child { padding-right: 0; }
.pzg-figs > div + div {
	padding-left: clamp(14px, 1.6vw, 24px);
	border-left: 1px solid var(--pzg-line);
}
.pzg-figs dt {
	margin: 0 0 6px;
	font: 500 9.5px/1.3 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-figs dd {
	margin: 0;
	font: 400 clamp(19px, 1.55vw, 24px)/1.1 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: var(--pzg-ink);
	/* Not nowrap: poz_guil_fig_nb() hard-spaces each figure, so the only place a
	   value can break is after the middot that joins two of them. */
	white-space: normal;
}

.pzg-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* No card, no shadow, no rounded panel: every model shot in the manifest is a
   transparent cutout, so a container would only draw a box around thin air. */
.pzg-hero__shot { margin: 0; }
.pzg-hero__shot img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	object-fit: contain;
}

/* ------------------------------------------------------ the reasons */

.pzg-why { padding-block: clamp(44px, 5.5vw, 92px); }

.pzg-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(26px, 3.4vw, 56px);
}

.pzg-why__item { position: relative; padding-top: 20px; border-top: 1px solid var(--pzg-line); }

.pzg-why__n {
	display: block;
	margin-bottom: 12px;
	font: 500 10.5px/1 var(--poz-font-mono, var(--poz-font-body, inherit));
	letter-spacing: .18em;
	color: var(--acc, var(--pzg-grey2));
}
.pzg-why__item h2 {
	margin: 0 0 10px;
	font: 400 clamp(18px, 1.5vw, 23px)/1.28 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: var(--pzg-ink);
}
.pzg-why__item p {
	margin: 0;
	font: 400 14.5px/1.62 var(--poz-font-body, inherit);
	color: var(--pzg-grey);
}

/* ------------------------------------------------------------ the table */

.pzg-spec {
	padding-block: clamp(44px, 5.5vw, 92px);
	background: var(--pzg-studio);
	border-top: 1px solid var(--pzg-line);
}

/* Two columns, label left. The label column is sized to the longest label
   rather than to a fraction, so the values line up as a column of their own —
   which is the only way a spec table is ever actually read. */
.pzg-table {
	width: 100%;
	margin-top: clamp(22px, 2.6vw, 36px);
	border-collapse: collapse;
	table-layout: fixed;
}
.pzg-table tr + tr { border-top: 1px solid var(--pzg-line); }
.pzg-table th,
.pzg-table td {
	padding: 13px 0;
	text-align: left;
	vertical-align: baseline;
}
.pzg-table th {
	width: 34%;
	padding-right: 20px;
	font: 500 10.5px/1.5 var(--poz-font-body, inherit);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-table td {
	font: 400 15px/1.55 var(--poz-font-body, inherit);
	color: var(--pzg-ink);
	overflow-wrap: anywhere;
}

/* The first three rows are the ones that sell, so they are set larger. They
   are also the three repeated at the top of the page — same array, same value,
   no chance of drift. */
.pzg-table tr:nth-child(-n+3) td {
	font: 400 clamp(17px, 1.3vw, 20px)/1.4 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
}

.pzg-note {
	margin: clamp(18px, 2vw, 26px) 0 0;
	max-width: 68ch;
	font: 400 12.5px/1.6 var(--poz-font-body, inherit);
	color: var(--pzg-grey2);
}
.pzg-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pzg-note a:hover, .pzg-note a:focus-visible { color: var(--pzg-ink); }

/* ------------------------------------------------------------ the range */

.pzg-range { padding-block: clamp(44px, 5.5vw, 92px); }

.pzg-range__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: clamp(26px, 3vw, 44px) 0 0;
	padding: 0;
	list-style: none;
}

.pzg-range__item a {
	display: block;
	padding: 16px 16px 18px;
	border: 1px solid var(--pzg-line);
	border-radius: 3px;
	text-decoration: none;
	background: #FFF;
	transition: border-color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pzg-range__item a:hover,
.pzg-range__item a:focus-visible {
	border-color: rgba(22, 23, 27, .32);
	transform: translateY(-3px);
}
/* The cutouts sit on the card's own white, so the card is a boundary rather
   than a background — nothing to knock the object out of. */
.pzg-range__item img {
	display: block;
	width: 100%;
	height: 92px;
	object-fit: contain;
	margin-bottom: 14px;
}
.pzg-range__item b {
	display: block;
	font: 400 17px/1.2 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: var(--pzg-ink);
}
.pzg-range__item span {
	display: block;
	margin-top: 5px;
	font: 400 12.5px/1.4 var(--poz-font-body, inherit);
	color: var(--pzg-grey2);
}
.pzg-range__item em {
	display: block;
	margin-top: 10px;
	font: 500 11px/1 var(--poz-font-mono, var(--poz-font-body, inherit));
	font-style: normal;
	letter-spacing: .08em;
	color: var(--acc, var(--pzg-grey));
}

/* ----------------------------------------------------------- narrower */

@media (max-width: 980px) {
	/* The object goes above the copy, not beside it: at this width a 42/58
	   split leaves the title on three lines and the deck the size of a stamp. */
	.pzg-hero__grid { grid-template-columns: 1fr; gap: 28px; }
	.pzg-hero__shot { order: -1; }
	.pzg-hero__shot img { max-height: 42vh; }
	.pzg-table th { width: 40%; }
}

@media (max-width: 620px) {
	.pzg-figs { display: grid; grid-template-columns: 1fr 1fr; }
	.pzg-figs > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--pzg-line); }
	.pzg-table { table-layout: auto; }
	.pzg-table th, .pzg-table td { display: block; width: auto; padding: 0; }
	.pzg-table th { padding-top: 14px; }
	.pzg-table td { padding-bottom: 14px; }
	.pzg-table tr:nth-child(-n+3) td { font-size: 19px; }
	.pzg-cta .poz-btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pzg-range__item a { transition-duration: .01ms !important; }
	.pzg-range__item a:hover { transform: none !important; }
}

/* A model with no photograph yet (TM440-M) gets one column, not an empty half. */
.pzg-hero__grid--solo { grid-template-columns: 1fr; }
.pzg-hero__grid--solo .pzg-lead { max-width: 62ch; }


/* ============================================================================
   THE FILM TAKES THE PAGE  (Sven: "much more premium cinematic and apple.com-like.
   for every panel you have access to an assembly animation, they should be used")

   A photograph of a finished deck says almost nothing next to eight seconds of
   one going together — the whole argument for a modular system is the assembly,
   and the film IS that argument playing. So the type goes above, centred, with
   air, and the film runs full-bleed underneath. That is the Apple arrangement,
   and it is the one that lets a single object carry a page.
   ========================================================================= */

.pzg-hero { padding-block: clamp(18px, 2vw, 30px) 0; background: #FFF; border-bottom: 0; }
.pzg-hero .pzg-crumbs { margin-bottom: clamp(26px, 4vw, 56px); }

/* Centred, and narrow. A lead that runs the full width of a 1720px wrap reads
   as a paragraph; at 52ch it reads as a statement. */
.pzg-hero__copy {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.pzg-hero__copy .pzg-kicker { justify-content: center; }
.pzg-hero__copy .pzg-h1 {
	font-size: clamp(46px, 7vw, 108px);
	line-height: .98;
	letter-spacing: -.03em;
	margin-bottom: 22px;
}
.pzg-hero__copy .pzg-lead {
	max-width: 52ch;
	margin-inline: auto;
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.55;
}
.pzg-hero__copy .pzg-cta { justify-content: center; }

/* Full-bleed, and tall enough to be a stage rather than a thumbnail. The clips
   are white-studio, so the band is white and the object simply floats. */
.pzg-film {
	margin: clamp(28px, 4vw, 64px) 0 0;
	padding: 0;
	background: linear-gradient(180deg, #FFF 0%, var(--pzg-studio) 62%, var(--pzg-studio) 100%);
}
.pzg-film__v,
.pzg-film img {
	display: block;
	width: 100%;
	max-width: 1680px;
	margin-inline: auto;
	height: auto;
	max-height: 74vh;
	object-fit: contain;
	transition: opacity .5s ease;
}
.pzg-film__v.is-rewinding { opacity: 0; }

/* The figures sit on the film's own ground, centred under it, as a caption to
   the object rather than as a panel beside it. */
.pzg-hero .pzg-figs {
	justify-content: center;
	max-width: 900px;
	margin-inline: auto;
	border-top: 0;
	text-align: center;
}
.pzg-hero .pzg-figs > div { padding-block: 22px 26px; }
.pzg-hero .pzg-figs dd { font-size: clamp(21px, 1.8vw, 28px); }

/* The section after the film opens on the same ground it ends on, so the seam
   disappears. */
.pzg-why { background: var(--pzg-studio); }
.pzg-spec { background: #FFF; }

@media (max-width: 900px) {
	.pzg-film__v, .pzg-film img { max-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
	.pzg-film__v { transition-duration: .01ms !important; }
}


/* ============================================================================
   TWO ARRANGEMENTS, PICKED BY THE FILM  (Sven: "if you use a boxy aspect ratio,
   put the title left and the animation to the right of the header in a nice
   modern container... like this now it looks like a half-finished blog")

   He is right, and the reason is the aspect ratio. GUIL shot these three ways.
   A 1470x630 letterbox fills a full-bleed band and carries the page. A
   1112x834 clip in that same band is a small object marooned in white with a
   centred column of type stranded above it — which is exactly what a
   half-finished blog post looks like.

   So: LETTERBOX keeps the band. BOXY goes beside the title, in a container,
   at a size it can actually fill. .pzg-hero--band / --split, chosen in PHP
   from the clip's own dimensions rather than guessed per model.
   ========================================================================= */

/* ---------------------------------------------------------------- split */

.pzg-hero--split .pzg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	align-items: center;
	gap: clamp(28px, 4vw, 76px);
	padding-bottom: clamp(34px, 4vw, 68px);
}

/* Left, and ranged left. Centred type beside an object reads as a caption; the
   two need a shared left edge to look composed. */
.pzg-hero--split .pzg-hero__copy {
	max-width: none;
	margin: 0;
	text-align: left;
}
.pzg-hero--split .pzg-kicker,
.pzg-hero--split .pzg-cta { justify-content: flex-start; }
.pzg-hero--split .pzg-h1 { font-size: clamp(44px, 5.4vw, 88px); }
.pzg-hero--split .pzg-lead { margin-inline: 0; max-width: 42ch; }

/* The container. A soft studio ground, a hairline, a generous radius and one
   long shadow — enough to give the object an edge to sit against, not enough
   to become a piece of furniture in its own right. */
.pzg-box {
	position: relative;
	overflow: hidden;
	border-radius: clamp(14px, 1.4vw, 22px);
	border: 1px solid rgba(22, 23, 27, .07);
	/* The clip is a WHITE studio render, and it carries its own white right to
	   the frame edge. A grey container therefore draws a second rectangle around
	   the first, and the film reads as a white card sitting inside a grey one.
	   The ground has to be the same white the footage was lit on — the gradient
	   only leaves the corners, where nothing is happening. */
	background:
		radial-gradient(130% 100% at 50% 30%, #FFF 0%, #FFF 58%, #F6F7F8 100%);
	box-shadow: 0 30px 64px -46px rgba(22, 23, 27, .38);
}
.pzg-box .pzg-film__v {
	display: block;
	width: 100%;
	height: auto;
	max-height: 66vh;
	max-width: none;
	margin: 0;
	object-fit: contain;
	transition: opacity .5s ease;
}

/* The figures go back inside the wrap and range left with the copy, so the
   split page has one left edge from the crumb to the last figure. */
.pzg-hero--split .pzg-figs {
	justify-content: flex-start;
	max-width: none;
	margin-inline: 0;
	border-top: 1px solid var(--pzg-line);
	text-align: left;
}

@media (max-width: 900px) {
	.pzg-hero--split .pzg-hero__grid { grid-template-columns: 1fr; gap: 26px; }
	.pzg-hero--split .pzg-box { order: -1; }
	.pzg-box .pzg-film__v { max-height: 46vh; }
}


/* ============================================================================
   THE REASONS BECOME AN EDITORIAL SEQUENCE, NOT A GRID OF THREE

   Three equal columns of body copy is the layout every product page defaults
   to, and it reads as a grid of three because that is what it is. The point of
   these blocks is that each one is a separate argument — no crossbars, one
   rail, four ribs — so each gets its own row and its own line of white, and the
   eye is given a reason to travel down the page instead of scanning across it.

   NO IMAGERY HERE ON PURPOSE. GUIL supplied one or two shots per model, not
   three, and inventing a third by cropping a detail out of the film would be a
   picture chosen to fill a hole rather than to say something.
   ========================================================================= */

.pzg-why { padding-block: clamp(56px, 7vw, 120px); }

.pzg-why__grid { display: block; }

.pzg-why__item {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 34fr) minmax(0, 46fr);
	align-items: start;
	gap: clamp(16px, 3vw, 56px);
	padding: clamp(30px, 3.4vw, 54px) 0;
	border-top: 1px solid var(--pzg-line);
}
.pzg-why__item:last-child { border-bottom: 1px solid var(--pzg-line); }

.pzg-why__n {
	margin: 0;
	padding-top: .35em;
	font: 500 12px/1 var(--poz-font-mono, var(--poz-font-body, inherit));
	letter-spacing: .2em;
	color: var(--acc, var(--pzg-grey2));
}
.pzg-why__item h2 {
	margin: 0;
	font: 400 clamp(22px, 2.2vw, 34px)/1.18 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
}
.pzg-why__item p {
	margin: 0;
	max-width: 54ch;
	font: 400 clamp(15px, 1.15vw, 17px)/1.68 var(--poz-font-body, inherit);
}

@media (max-width: 860px) {
	.pzg-why__item { grid-template-columns: 1fr; gap: 12px; }
	.pzg-why__n { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   THE SPEC TABLE KEEPS ITS NAME IN VIEW

   Eighteen rows is long enough that somebody reading the certification line has
   lost sight of which deck they are reading about — and on this section every
   page looks the same apart from the numbers. The head sticks.
   ------------------------------------------------------------------------- */

.pzg-spec .poz-sechead {
	position: sticky;
	top: calc(var(--poz-header-h, 96px) + 8px);
	z-index: 2;
	background: #FFF;
	padding-block: 10px;
}

/* ---------------------------------------------------------------------------
   ARRIVAL

   Type that is already there when you get to it reads as a document; type that
   arrives reads as a presentation. 14px and 520ms — far enough to notice, not
   far enough to feel like a slide deck. Everything is visible by default and
   only hidden once the script has confirmed it can reveal it again, so a
   failed script leaves a readable page rather than an empty one.
   ------------------------------------------------------------------------- */

[data-pzg] .pzg-rv {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .52s cubic-bezier(.16, 1, .3, 1), transform .52s cubic-bezier(.16, 1, .3, 1);
}
[data-pzg] .pzg-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-pzg] .pzg-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ============================================================================
   GRAPHIC, NOT TEXTY  (Sven: "still too plain and texty, not enough graphic
   elements, wide text looks like a blog, the page is unappealing")

   Three things were wrong and they compound:

   1  MEASURE. Body copy running 54-68ch across a 1720px wrap is a blog column.
      Nothing on this page needs more than ~46ch.
   2  NO OBJECTS. Every element was type on white. A page of type is a document.
   3  NOTHING TO LOOK AT BETWEEN THE FILM AND THE TABLE — the middle of the page
      asked the reader to read three paragraphs to find out why this deck is
      different, when the answer could be SHOWN.
   ========================================================================= */

/* ------------------------------------------------- the reasons become tiles */

.pzg-why { padding-block: clamp(48px, 6vw, 104px); }

.pzg-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(14px, 1.4vw, 22px);
}

/* A tile with an oversized ghost numeral behind it. The numeral is the graphic
   element: it gives every block an object to sit on and turns three paragraphs
   into three THINGS, at no cost in imagery we do not have. */
.pzg-why__item {
	position: relative;
	overflow: hidden;
	display: block;
	padding: clamp(26px, 2.4vw, 40px) clamp(24px, 2.2vw, 36px) clamp(30px, 2.8vw, 44px);
	border: 1px solid var(--pzg-line);
	border-radius: clamp(12px, 1.1vw, 18px);
	background: #FFF;
}
.pzg-why__item::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--acc, var(--pzg-ink));
	opacity: .9;
}
.pzg-why__item::after {
	content: attr(data-n);
	position: absolute;
	right: -.06em;
	bottom: -.34em;
	font: 400 clamp(120px, 13vw, 210px)/1 var(--poz-font-display, inherit);
	letter-spacing: -.05em;
	color: rgba(22, 23, 27, .045);
	pointer-events: none;
}
.pzg-why__item > * { position: relative; z-index: 1; }

.pzg-why__n {
	display: inline-block;
	margin: 0 0 16px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(22, 23, 27, .05);
	font: 500 10px/1 var(--poz-font-mono, var(--poz-font-body, inherit));
	letter-spacing: .2em;
	color: var(--pzg-grey);
}
.pzg-why__item h2 {
	margin: 0 0 12px;
	max-width: 20ch;
	font: 400 clamp(20px, 1.7vw, 27px)/1.16 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
}
.pzg-why__item p { margin: 0; max-width: 42ch; font-size: 14.5px; line-height: 1.62; }

/* --------------------------------------------------- measures come in */

.pzg-hero--band .pzg-lead { max-width: 44ch; }
.pzg-hero--split .pzg-lead { max-width: 38ch; }
.pzg-note { max-width: 54ch; }
.pzg-table td { max-width: 46ch; }

/* ------------------------------------------- the figures become objects */

.pzg-figs {
	gap: clamp(10px, 1vw, 16px);
	border: 0;
}
.pzg-figs > div,
.pzg-figs > div + div {
	padding: 18px 22px 20px;
	border: 1px solid var(--pzg-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(8px);
}
.pzg-hero .pzg-figs { border-top: 0; }

/* ---------------------------------------- the range strip gets a chart */

.pzg-range__item img { height: 108px; }

/* The load as a bar. The range argument is comparative — a column of numbers
   makes the reader do that arithmetic themselves. Scaled to 1600 kg/m2. */
.pzg-bar {
	display: block;
	margin-top: 9px;
	height: 3px;
	border-radius: 3px;
	background: rgba(22, 23, 27, .09);
	overflow: hidden;
}
.pzg-bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--acc, var(--pzg-ink));
}


/* ============================================================================
   THE ARGUMENTS GET DRAWN
   (Sven, third time of asking: "still too plain and texty, not enough graphic
   elements... the page is unappealing")

   The previous two passes answered a typographic objection that was never
   typographic. Reasons became tiles; tiles got ghost numerals; measures came
   in — and every time the same sentence came back, because the middle of this
   page had nothing in it to LOOK at. Between the film and the footer there was
   type, and more type, and eighteen rows of grey.

   So three things change here and none of them is a font size:

   1  Every reason block carries a DRAWING. "Four internal ribs", "no crossbars
      under the panel", "six sockets halve the span" are diagrams that were
      being typed out. inc/guil-diagrams.php draws them; this styles them.
   2  The spec block leads with the six figures that decide a purchase, set as
      objects, and folds the other twelve rows away behind them.
   3  The range strip becomes the two-lever matrix it has been describing in
      prose since it was written: board thickness across, socket count up.

   The drawing language: plan and section, 1.4px line, ONE accent on the one
   element the caption names, everything else grey. It reads at a glance and it
   does not pretend to be a photograph we were never sent.
   ========================================================================= */

/* ------------------------------------------------------------- the drawings */

.pzg-dia {
	margin: 0;
	padding: clamp(14px, 1.6vw, 26px);
	border: 1px solid var(--pzg-line);
	border-radius: clamp(12px, 1.1vw, 18px);
	/* White, because the drawing is line on white and a tinted panel would put
	   a second rectangle behind an object that already has an edge. */
	background: #FFF;
}
.pzd { display: block; width: 100%; height: auto; overflow: visible; }

/* Context geometry: the parts of the drawing that are true of every model. */
.pzd-l    { fill: none; stroke: rgba(22, 23, 27, .55); stroke-width: 1.4; }
.pzd-g    { fill: none; stroke: rgba(22, 23, 27, .20); stroke-width: 1.2; }
.pzd-s    { fill: rgba(22, 23, 27, .055); stroke: none; }
.pzd-fill { fill: rgba(22, 23, 27, .26); stroke: none; }

/* And the one thing the sentence beside it is actually about. */
.pzd-a    { fill: none; stroke: var(--acc, #0066cc); stroke-width: 2.2; stroke-linejoin: round; }
.pzd-af   { fill: var(--acc, #0066cc); stroke: none; }
.pzd-d    { stroke-dasharray: 5 5; }

.pzd-t {
	font: 400 11px/1 var(--poz-font-mono, ui-monospace, monospace);
	fill: rgba(22, 23, 27, .5);
	letter-spacing: .06em;
}
.pzd-n {
	font: 400 19px/1 var(--poz-font-mono, ui-monospace, monospace);
	fill: rgba(22, 23, 27, .86);
	letter-spacing: -.01em;
}
.pzd-t--a { fill: var(--acc, #0066cc); }

/* ------------------------------------------- the reasons: picture and caption */

.pzg-why { padding-block: clamp(44px, 5.5vw, 96px); }
.pzg-why__grid { display: block; }

/* The tile, the ghost numeral and the accent rule all go: the drawing is the
   graphic element now, and a card around a card is furniture. */
.pzg-why__item {
	position: relative;
	overflow: visible;
	display: grid;
	grid-template-columns: minmax(0, 53fr) minmax(0, 41fr);
	align-items: center;
	gap: clamp(22px, 4vw, 76px);
	padding: clamp(30px, 3.4vw, 60px) 0;
	border: 0;
	border-top: 1px solid var(--pzg-line);
	border-radius: 0;
	background: none;
}
.pzg-why__item:last-child { border-bottom: 1px solid var(--pzg-line); }
.pzg-why__item::before,
.pzg-why__item::after { content: none; }

/* Alternated, so the eye crosses the page rather than running down one gutter.
   Explicit grid placement rather than `direction`, which would flip the type. */
.pzg-why__item .pzg-dia      { grid-column: 1; grid-row: 1; }
.pzg-why__item .pzg-why__body { grid-column: 2; grid-row: 1; }
.pzg-why__item:nth-child(even) .pzg-dia      { grid-column: 2; }
.pzg-why__item:nth-child(even) .pzg-why__body { grid-column: 1; }

.pzg-why__n {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0;
	border-radius: 0;
	background: none;
	font: 400 11px/1 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .2em;
	color: var(--acc, var(--pzg-grey2));
}
.pzg-why__n::after {
	content: '';
	display: inline-block;
	width: 26px;
	height: 1px;
	margin-left: 12px;
	vertical-align: middle;
	background: var(--acc, var(--pzg-grey2));
	opacity: .5;
}
.pzg-why__item h2 {
	margin: 0 0 12px;
	max-width: 22ch;
	font: 400 clamp(20px, 1.75vw, 28px)/1.16 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
}
.pzg-why__item p {
	margin: 0;
	max-width: 44ch;
	font: 400 clamp(14px, 1.05vw, 15.5px)/1.66 var(--poz-font-body, inherit);
	color: var(--pzg-grey);
}

/* A reason with nothing honest to draw keeps the row and gives the type the
   width instead — better a plain row than a diagram invented to fill a slot. */
.pzg-why__item--flat { grid-template-columns: minmax(0, 1fr); }
.pzg-why__item--flat .pzg-why__body { grid-column: 1; }
.pzg-why__item--flat p { max-width: 62ch; }

@media (max-width: 900px) {
	.pzg-why__item { grid-template-columns: 1fr; gap: 22px; padding-block: 32px; }
	.pzg-why__item .pzg-dia,
	.pzg-why__item:nth-child(even) .pzg-dia { grid-column: 1; grid-row: 1; }
	.pzg-why__item .pzg-why__body,
	.pzg-why__item:nth-child(even) .pzg-why__body { grid-column: 1; grid-row: 2; }
	.pzg-why__item h2 { max-width: none; }
	.pzg-why__item p { max-width: 54ch; }
}

/* ------------------------------------- the specs lead with the six that decide */

/* Eighteen rows at one weight is eighteen rows of grey, and the three or four
   figures that actually decide a purchase are buried in the middle of it. They
   come out and are set as objects; the rest stays, complete, one click away. */
.pzg-keyfigs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(10px, 1vw, 16px);
	margin: clamp(22px, 2.6vw, 36px) 0 0;
}
.pzg-keyfig {
	position: relative;
	overflow: hidden;
	padding: clamp(18px, 1.7vw, 26px) clamp(18px, 1.7vw, 26px) clamp(20px, 1.9vw, 28px);
	border: 1px solid var(--pzg-line);
	border-radius: clamp(12px, 1.1vw, 16px);
	background: #FFF;
}
/* The load is the headline figure on every one of these pages, so it gets the
   width and the bar; the rest are equals. */
.pzg-keyfig--wide { grid-column: span 2; }
.pzg-keyfig dt,
.pzg-keyfig__k {
	display: block;
	margin: 0 0 10px;
	font: 400 9.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-keyfig dd,
.pzg-keyfig__v {
	display: block;
	margin: 0;
	font: 400 clamp(22px, 2.3vw, 34px)/1.05 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--pzg-ink);
	overflow-wrap: anywhere;
}
.pzg-keyfig--wide .pzg-keyfig__v { color: var(--acc, var(--pzg-ink)); }

/* Where this deck sits against the top of the range, so the number has a scale
   to be read on rather than being a number on its own. */
.pzg-keyfig__scale {
	display: block;
	margin-top: 16px;
	height: 4px;
	border-radius: 4px;
	background: rgba(22, 23, 27, .08);
	overflow: hidden;
}
.pzg-keyfig__scale i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--acc, var(--pzg-ink));
}
.pzg-keyfig__note {
	display: block;
	margin-top: 9px;
	font: 400 10.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .06em;
	color: var(--pzg-grey2);
}

/* The full table, complete and one click away. Closed by default because the
   six above answer most arrivals; open it and nothing has been abridged. */
.pzg-more {
	margin-top: clamp(20px, 2.2vw, 32px);
	border-top: 1px solid var(--pzg-line);
	border-bottom: 1px solid var(--pzg-line);
}
.pzg-more > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	list-style: none;
	cursor: pointer;
	font: 400 10.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pzg-grey);
	transition: color .28s ease;
}
.pzg-more > summary::-webkit-details-marker { display: none; }
.pzg-more > summary:hover,
.pzg-more > summary:focus-visible { color: var(--pzg-ink); }
.pzg-more > summary::after {
	content: '';
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--pzg-grey), var(--pzg-grey)) center/11px 1.4px no-repeat,
		linear-gradient(var(--pzg-grey), var(--pzg-grey)) center/1.4px 11px no-repeat;
	transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.pzg-more[open] > summary::after { transform: rotate(45deg); }
.pzg-more .pzg-table { margin-top: 0; margin-bottom: 14px; }
.pzg-more .pzg-table tr:first-child { border-top: 1px solid var(--pzg-line); }
/* The promoted rows are already above in display type; inside the table every
   row is equal again, so nothing is shouted twice. */
.pzg-more .pzg-table tr:nth-child(-n+3) td {
	font: 400 15px/1.55 var(--poz-font-body, inherit);
	letter-spacing: 0;
}

@media (max-width: 620px) {
	.pzg-keyfig--wide { grid-column: span 1; }
	.pzg-more .pzg-table tr:nth-child(-n+3) td { font-size: 15px; }
}

/* --------------------------------------- the range becomes the two-lever grid */

/* The section head has said "the load is raised in two independent ways" since
   it was written, and then showed seven cards in a row — which is a list, and a
   list cannot carry a two-variable argument. Board thickness across, socket
   count up: the two levers are the two axes, and every deck is where they meet.
   Getting this wrong sends somebody to the wrong deck, so it is drawn once,
   plainly, from the same figures the table renders. */

.pzg-grid { margin-top: clamp(26px, 3vw, 44px); }
.pzg-grid__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pzg-matrix {
	display: grid;
	grid-template-columns: auto repeat(2, minmax(150px, 1fr));
	gap: clamp(8px, .9vw, 14px);
	min-width: 460px;
}
.pzg-matrix__cnr { display: block; }
.pzg-matrix__ch,
.pzg-matrix__rh {
	display: flex;
	align-items: center;
	font: 400 10.5px/1.3 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-matrix__ch { justify-content: center; padding-bottom: 4px; }
.pzg-matrix__rh { justify-content: flex-end; padding-right: 12px; text-align: right; white-space: nowrap; }
.pzg-matrix__rh b { font-weight: 400; color: var(--pzg-ink); font-size: 15px; letter-spacing: 0; margin-right: 7px; }

.pzg-matrix__cell {
	display: block;
	padding: clamp(14px, 1.4vw, 22px);
	border: 1px solid var(--pzg-line);
	border-radius: clamp(10px, 1vw, 14px);
	background: #FFF;
	text-decoration: none;
	transition: border-color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
a.pzg-matrix__cell:hover,
a.pzg-matrix__cell:focus-visible {
	border-color: rgba(22, 23, 27, .34);
	transform: translateY(-3px);
}
.pzg-matrix__cell b {
	display: block;
	font: 400 clamp(15px, 1.25vw, 19px)/1.2 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: var(--pzg-ink);
}
.pzg-matrix__cell em {
	display: block;
	margin-top: 7px;
	font: 400 12px/1 var(--poz-font-mono, ui-monospace, monospace);
	font-style: normal;
	letter-spacing: .06em;
	color: var(--pzg-grey);
}
/* Where the reader already is. Marked rather than removed: a matrix with a hole
   in it is a worse map than one that says "here". */
.pzg-matrix__cell.is-here {
	border-color: var(--acc, var(--pzg-ink));
	box-shadow: inset 0 0 0 1px var(--acc, var(--pzg-ink));
}
.pzg-matrix__cell.is-here em { color: var(--acc, var(--pzg-grey)); }
.pzg-matrix__here {
	display: block;
	margin-top: 10px;
	font: 400 9.5px/1 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--acc, var(--pzg-grey2));
}
/* GUIL does not make this combination. Said as an empty cell rather than left
   out, because the gap is part of the argument. */
.pzg-matrix__cell--none {
	border-style: dashed;
	background: none;
	color: var(--pzg-grey2);
	font: 400 10.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .1em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 84px;
}

.pzg-matrix .pzg-bar { margin-top: 11px; }

.pzg-grid__axes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 16px;
	font: 400 10.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}

/* Everything the matrix cannot hold: the scissor, the kit, the lift, the
   methacrylate. They are not points on those two axes and pretending otherwise
   would be the same error the matrix exists to fix. */
.pzg-range__rest {
	margin-top: clamp(34px, 4vw, 64px);
	padding-top: clamp(22px, 2.4vw, 34px);
	border-top: 1px solid var(--pzg-line);
}
.pzg-range__rest > h3 {
	margin: 0 0 4px;
	font: 400 10.5px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pzg-grey2);
}
.pzg-range__rest > p {
	margin: 0;
	max-width: 52ch;
	font: 400 14px/1.6 var(--poz-font-body, inherit);
	color: var(--pzg-grey);
}
.pzg-range__list { margin-top: clamp(18px, 2vw, 28px); }

@media (max-width: 620px) {
	.pzg-matrix { grid-template-columns: auto repeat(2, minmax(128px, 1fr)); min-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.pzg-matrix__cell { transition-duration: .01ms !important; }
	a.pzg-matrix__cell:hover { transform: none !important; }
	.pzg-more > summary::after { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- second pass */

/* The cards in the tail of the range are different heights — TM440-M has no
   photograph — so the load bars landed at four different levels. Pushed to the
   foot of each card, they line up and can be read across. */
.pzg-range__item { display: flex; }
.pzg-range__item > a { flex: 1 1 auto; display: flex; flex-direction: column; }
.pzg-range__item em { line-height: 1.4; }
.pzg-range__item .pzg-bar { margin-top: auto; }

/* An empty cell should read as an absence, not as a third product. */
.pzg-matrix__cell--none { border-color: rgba(22, 23, 27, .13); }

/* ============================================================================
   THE PLATE  (Sven: "much more premium polished and photorealistic. Think like a
   world-class designer presenting a premium product.")

   Direction was right, treatment was not: a 1.4px line drawing is a drafting
   convention, and next to GUIL's own studio film it read as a schematic pinned to
   a product page rather than as part of one.

   The fix was in the asset drop the whole time. 141 stills, and two of them are
   the exact arguments this page makes — the deck photographed FROM UNDERNEATH,
   and a TMU-01 going into the profile slot with a hand and an Allen key in shot.
   So the photograph becomes the plate and the drawing becomes an annotation on
   top of it: one callout, set in the same mono as the specs, anchored in
   normalised image coordinates so it stays on the thing it points at.

   The one argument GUIL never photographed — the section through the 94 mm
   extrusion — is rendered rather than drafted: gradients for anodised alloy, a
   darker turn for the cut faces, warm birch with its laminations, and a real
   contact shadow. It has to hold its own beside two photographs.
   ========================================================================= */

.pzg-dia--plate { padding: 0; overflow: hidden; background: #FFF; }
.pzd-plate {
	position: relative;
	/* Fixed 3:2 whatever the photograph's own ratio, so a row of plates down the
	   page keeps one height and the annotation maths has a stable box. */
	aspect-ratio: 3 / 2;
}
.pzd-img,
.pzd-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.pzd-img { object-fit: contain; }
.pzd-cap {
	padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 26px) clamp(14px, 1.4vw, 20px);
	border-top: 1px solid var(--pzg-line);
	font: 400 11px/1.4 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--acc, var(--pzg-grey));
	text-align: center;
}

/* The annotation layer. Sized for the plate's 1500-unit viewBox. */
.pzo-t {
	font: 400 26px/1 var(--poz-font-mono, ui-monospace, monospace);
	fill: rgba(22, 23, 27, .52);
	letter-spacing: .06em;
}
.pzo-n {
	font: 400 40px/1 var(--poz-font-body, sans-serif);
	fill: rgba(22, 23, 27, .9);
	letter-spacing: -.01em;
}
.pzo-t--a  { fill: var(--acc, #0066cc); }
.pzo-t--w  { fill: #FFF; }
.pzo-t--w2 { fill: rgba(255, 255, 255, .86); }

.pzo-l    { fill: none; stroke: var(--acc, #0066cc); stroke-width: 3; }
.pzo-lw   { fill: none; stroke: #FFF; stroke-width: 2.4; stroke-linejoin: round; }
.pzo-thin { fill: none; stroke: rgba(22, 23, 27, .30); stroke-width: 2; }
.pzo-dim  { fill: none; stroke: rgba(22, 23, 27, .34); stroke-width: 2; }
.pzo-d    { stroke-dasharray: 9 9; }
.pzo-dot  { fill: var(--acc, #0066cc); }
.pzo-af   { fill: var(--acc, #0066cc); }
.pzo-ring { fill: none; stroke: var(--acc, #0066cc); stroke-width: 2.4; opacity: .5; }

/* What a close-up cannot say, said small and out of the way. */
.pzd-inset {
	position: absolute;
	right: 3.4%;
	bottom: 4.5%;
	width: min(30%, 200px);
	padding: 13px 15px 12px;
	border: 1px solid rgba(22, 23, 27, .10);
	border-radius: 11px;
	background: rgba(255, 255, 255, .84);
	backdrop-filter: blur(12px);
	box-shadow: 0 14px 34px -22px rgba(22, 23, 27, .6);
}
.pzd-inset svg { display: block; width: 100%; height: auto; }
.pzd-inset b {
	display: block;
	margin-top: 9px;
	font: 400 9px/1.3 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--acc, var(--pzg-grey));
}
.pzo-il { fill: none; stroke: rgba(22, 23, 27, .26); stroke-width: 1.4; }
.pzo-ia { fill: none; stroke: var(--acc, #0066cc); stroke-width: 2.6; }

@media (max-width: 620px) {
	.pzd-inset { width: 38%; padding: 10px 11px 9px; }
	.pzd-inset b { font-size: 8px; margin-top: 7px; }
}

/* The plan inset reads as a deck, not as an empty frame: the board is filled and
   the slot is the ring around it, with four accessories entering. */
.pzo-if { fill: rgba(22, 23, 27, .04); stroke: rgba(22, 23, 27, .26); stroke-width: 1.4; }
.pzo-ip { fill: rgba(22, 23, 27, .16); stroke: none; }
.pzo-it { fill: rgba(22, 23, 27, .38); }
.pzg-dia--cover .pzd-img { object-fit: cover; }

/* White type on a photograph cannot rely on the photograph staying dark. A thin
   dark halo, drawn UNDER the glyph rather than over it, keeps a label legible
   where the aluminium catches the light — without the outline reading as an
   outline. */
.pzo-t--w, .pzo-t--w2 {
	paint-order: stroke;
	stroke: rgba(12, 13, 16, .55);
	stroke-width: 7;
	stroke-linejoin: round;
}

/* ============================================================================
   EVERY REASON IS A PLATE  (Sven: "i like the idea... real photos with
   additional graphics on top. just improve them and make sure they look
   premium.")

   Seventeen arguments across eight models, one presentation: a 3:2 box, a
   picture, one callout. Eight of the pictures are GUIL's own photographs; the
   nine with no photograph behind them are rendered from the shared material kit
   in guil-diagrams.php so the page does not change register halfway down.
   ========================================================================= */

.pzg-dia--plate {
	/* A hairline and a long, soft shadow — enough to lift the plate off the
	   studio ground, not enough to become a card. */
	border-color: rgba(22, 23, 27, .09);
	box-shadow: 0 26px 60px -44px rgba(22, 23, 27, .55);
}
.pzd-cap {
	border-top-color: rgba(22, 23, 27, .08);
	background: rgba(255, 255, 255, .6);
}

/* The headline figure on a rendered plate — the one number the block is about. */
.pzo-big {
	font: 400 62px/1 var(--poz-font-display, sans-serif);
	fill: rgba(22, 23, 27, .92);
	letter-spacing: -.02em;
}
.pzo-big.pzo-t--a { fill: var(--acc, #0066cc); }

/* Something GUIL does not make, drawn as an absence rather than left out. */
.pzo-ghost {
	fill: none;
	stroke: rgba(22, 23, 27, .22);
	stroke-width: 1.6;
	stroke-dasharray: 10 9;
}

/* A ring with no dot is a "look here" rather than a "this exact point" — used
   where the thing being named is an object in the photograph, not a spot on it. */
.pzo-ring { stroke-width: 2.6; }

@media (max-width: 620px) {
	/* At phone width a 26px annotation in a 1500-unit box lands under 9px on
	   screen. The overlay scales up rather than the plate getting taller. */
	.pzo-t  { font-size: 34px; }
	.pzo-n  { font-size: 52px; }
	.pzo-big { font-size: 76px; }
	.pzo-l, .pzo-lw { stroke-width: 4; }
}


/* ============================================================================
   THE BAND HERO WAS STILL SITTING IN THE SPLIT'S GRID

   .pzg-hero__grid was written for the earlier 42/58 arrangement, and when the
   two arrangements were introduced the split got its own rule while the band
   quietly kept the old one. Nothing looked broken, because the band's film is
   a full-bleed sibling below the grid — so the right-hand cell was simply
   empty, and the copy, which is centred, was centred inside the left 42% of
   the page. Centred on nothing, and reading as though it had been nudged.

   One cell, and the copy's own margin:0 auto does the rest.
   ========================================================================= */

.pzg-hero--band .pzg-hero__grid,
.pzg-hero--still .pzg-hero__grid {
	display: block;
}

/* ============================================================================
   THE MODEL PAGE GETS DESIGNED
   ---------------------------------------------------------------------------
   Sven, on the fourth pass: "the design on the model pages is too plain and not
   polished … a title, an animation with a bad frame around it (rounded which
   doesn't match anything on the site), and then below it just sitting there a
   static photo of that same product. Also, misaligned frames with features. the
   rest of the information just plainly sits there on white background … take a
   look at the original pozornice.hr, how it represents every piece of
   information like it was purposefully designed and crafted."

   He is right on every count, and the rounded box was the tell: THIS rebuild
   sets --poz-radius-structural to 0. Cards, panels, bands and media are square
   here. A 22px radius on the film matched nothing because nothing else has one.

   What the live site does that this page did not:

     · nothing sits on bare white — every band has a ground, a tint or a grid
     · a giant ghost word or numeral sits behind the content
     · the product is NOT in a container; it rests on the ground with a shadow
     · the category accent tints surfaces (color-mix at 5–16%), not just rules
     · numbers get a bar, option lists get chips, the current row gets a badge
     · a full-bleed accent ribbon carries the breadcrumb and the section jumps

   Those devices are adopted here — but spoken in THIS design system: square,
   Michroma, mono labels, --acc and its ink/tint twins. Same vocabulary, our
   accent and our corners.
   ========================================================================= */


/* ——— the ribbon ————————————————————————————————————————————————————————
   Where you are, and where you can jump to. It is also the first thing that
   tells a specifier the page HAS sections — the old page gave no such signal,
   so the spec table and the range strip were only ever found by scrolling. */

.pzg-ribbon {
	position: relative;
	z-index: 30;
	background: var(--acc, #0066cc);
	color: #fff;
}

.pzg-ribbon__in {
	display: flex;
	align-items: center;
	gap: var(--poz-5);
	min-height: 52px;
	flex-wrap: wrap;
}

.pzg-ribbon__bc {
	display: flex;
	align-items: center;
	gap: var(--poz-2);
	margin: 0;
	padding: 12px 0;
	min-width: 0;
}

.pzg-ribbon__bc a,
.pzg-ribbon__bc span {
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
	white-space: nowrap;
}

.pzg-ribbon__bc a:hover { color: #fff; }
.pzg-ribbon__bc span { opacity: .55; }

.pzg-ribbon__bc b {
	font: var(--poz-eyebrow);
	letter-spacing: var(--poz-track-eyebrow);
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.pzg-ribbon__nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 26px);
	padding: 10px 0;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pzg-ribbon__nav::-webkit-scrollbar { display: none; }

.pzg-ribbon__nav a {
	position: relative;
	font: var(--poz-eyebrow);
	letter-spacing: var(--poz-track-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .76);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--poz-dur-press) var(--poz-ease);
}

/* The rule draws from the left on hover — the same gesture the enquiry band
   uses under its e-mail address, so the page has one hover idea, not two. */
.pzg-ribbon__nav a:not(.pzg-ribbon__cta)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--poz-dur-hover) var(--poz-ease);
}

.pzg-ribbon__nav a:hover { color: #fff; }
.pzg-ribbon__nav a:not(.pzg-ribbon__cta):hover::after { transform: scaleX(1); }

.pzg-ribbon__cta {
	flex-shrink: 0;
	background: #fff;
	color: var(--acc-ink, #003d7a) !important;
	padding: 9px 16px;
	border-radius: var(--poz-radius-control);
}

.pzg-ribbon__cta:hover { background: rgba(255, 255, 255, .88); }

@media (prefers-reduced-motion: reduce) {
	.pzg-ribbon__nav a::after { transition: none; }
}


/* ——— the hero ————————————————————————————————————————————————————————
   No container, and no still underneath. The film IS the photograph of this
   deck — running a cutout of the same object directly below it said the same
   thing twice and left the figures orphaned at the bottom of the screen with
   nothing to align to.

   One arrangement now, for every model: copy left, object right. The old
   band/split fork existed because a 4:3 clip looked marooned in a full-bleed
   band — with the band gone, so is the reason for the fork. */

.pzg-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(34px, 4vw, 76px) clamp(48px, 5.5vw, 96px);
	background: var(--poz-page);
}

/* The ground. A blueprint grid at the strength of a watermark, and one soft
   wash of the category hue behind the object — masked so both fade out before
   they reach an edge and start looking like a panel. */
.pzg-hero__ground {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(115% 88% at 74% 22%, color-mix(in srgb, var(--acc, #0066cc) 10%, transparent) 0%, transparent 60%),
		linear-gradient(to right,  rgba(22, 23, 27, .045) 1px, transparent 1px) 0 0 / 58px 58px,
		linear-gradient(to bottom, rgba(22, 23, 27, .045) 1px, transparent 1px) 0 0 / 58px 58px;
	-webkit-mask-image: radial-gradient(120% 105% at 58% 34%, #000 26%, transparent 84%);
	        mask-image: radial-gradient(120% 105% at 58% 34%, #000 26%, transparent 84%);
}

/* The model number, set once at the size of the page. Michroma is a wide
   monoline face, so this is tracked out rather than crushed, and it sits low
   enough that the object crosses it — a watermark, not a backdrop. */
.pzg-hero__ghost {
	position: absolute;
	left: 50%;
	top: 54%;
	translate: -50% -50%;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	font: 400 clamp(96px, 17vw, 260px)/.8 var(--poz-font-display);
	letter-spacing: .04em;
	text-transform: lowercase;
	color: color-mix(in srgb, var(--acc, #0066cc) 9%, transparent);
}

.pzg-hero > .poz-wrap { position: relative; z-index: 1; }

.pzg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
	align-items: center;
	gap: clamp(28px, 4vw, 76px);
	min-height: 470px;
}

.pzg-hero__copy {
	max-width: none;
	margin: 0;
	text-align: left;
}

.pzg-hero__copy .pzg-kicker { justify-content: flex-start; }
.pzg-hero__copy .pzg-lead   { max-width: 46ch; margin-inline: 0; }
.pzg-hero__copy .pzg-cta    { justify-content: flex-start; }

/* The object, resting on the ground. Contain, never cover: these are cutouts
   and letterboxes and neither survives a crop. The shadow is the theme's one
   product shadow, applied as a drop-shadow so it follows the cutout's alpha
   instead of drawing a rectangle around it. */
.pzg-hero__media {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pzg-hero__media video,
.pzg-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(64vh, 640px);
	object-fit: contain;
	background: none;
	border: 0;
	border-radius: 0;
	filter: drop-shadow(3px 5px 30px rgba(12, 13, 16, .22));
}

/* The old containers, retired. Left as explicit resets rather than deleted
   rules so that a page still carrying the markup degrades to "no box" instead
   of to "half a box". */
.pzg-box,
.pzg-film,
.pzg-film--still {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}


/* ——— the figures, brought into the hero ————————————————————————————————
   They were a strip of frosted tiles below the film, sharing an edge with
   nothing. They are the last line of the hero's argument, so they now hang off
   the copy's own left edge, under one rule, each with an accent tick. */

.pzg-hero .pzg-figs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: clamp(26px, 3vw, 42px) 0 0;
	padding: 0;
	max-width: none;
	margin-inline: 0;
	justify-content: flex-start;
	text-align: left;
	border: 0;
	border-top: var(--poz-border);
	background: none;
}

.pzg-hero .pzg-figs > div,
.pzg-hero .pzg-figs > div + div {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	padding: 18px clamp(18px, 2vw, 32px) 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	backdrop-filter: none;
}

.pzg-hero .pzg-figs > div + div {
	padding-left: clamp(18px, 2vw, 32px);
	border-left: var(--poz-border);
}

/* The tick that says this number was placed, not printed. */
.pzg-hero .pzg-figs > div::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 22px;
	height: var(--poz-spine, 2px);
	background: var(--acc, #0066cc);
}

.pzg-hero .pzg-figs > div + div::before { left: clamp(18px, 2vw, 32px); }

.pzg-hero .pzg-figs dt {
	margin: 0 0 6px;
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzg-hero .pzg-figs dd {
	margin: 0;
	font: 400 clamp(18px, 1.65vw, 27px)/1.14 var(--poz-font-display);
	letter-spacing: var(--poz-track-title);
	color: var(--poz-text);
	white-space: normal;
}

@media (max-width: 900px) {
	.pzg-hero__grid { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
	.pzg-hero__grid > .pzg-hero__media { order: -1; }
	.pzg-hero .pzg-figs > div { padding-right: 20px; }
}


/* ——— every reason becomes one card ————————————————————————————————————
   The plate and the paragraph were two things floating on white with no shared
   edge — the "misaligned frames" Sven flagged. They are now a single bordered
   card: a tinted well holding the drawing, a hairline, and the words. One
   frame, two zones, and the alignment problem cannot come back because there
   is only one box to align. */

.pzg-why { counter-reset: pzgwhy; }

.pzg-why__item {
	counter-increment: pzgwhy;
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	align-items: stretch;
	gap: 0;
	border: var(--poz-border);
	background: var(--poz-page);
	margin-bottom: clamp(20px, 2.2vw, 34px);
}

/* Alternating, so the eye is not walked down one gutter for three screens. */
.pzg-why__item:nth-child(even) > .pzg-dia { order: 2; border-left: var(--poz-border); border-right: 0; }
.pzg-why__item:nth-child(even) > .pzg-why__body { order: 1; }

/* The well. A wash of the category hue at the top, clearing to white before it
   reaches the drawing — the drawings are lit on white and a flat tint behind
   them would draw the second rectangle the film band already had to solve. */
.pzg-why__item > .pzg-dia,
.pzg-why__item > .pzg-dia--plate {
	position: relative;
	margin: 0;
	padding: clamp(18px, 2.2vw, 38px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0;
	border-right: var(--poz-border);
	border-radius: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--acc, #0066cc) 7%, #fff) 0%,
		color-mix(in srgb, var(--acc, #0066cc) 2%, #fff) 46%,
		#fff 100%
	);
}

/* The numeral, at the size the live site sets it: big enough to be structure,
   pale enough that the drawing still wins. No markup — a counter, so adding a
   reason cannot desynchronise it from its own label. */
.pzg-why__item > .pzg-dia::before {
	content: counter(pzgwhy, decimal-leading-zero);
	position: absolute;
	left: clamp(10px, 1.2vw, 22px);
	top: clamp(2px, .4vw, 8px);
	z-index: 0;
	pointer-events: none;
	user-select: none;
	font: 400 clamp(52px, 6vw, 104px)/1 var(--poz-font-display);
	letter-spacing: .02em;
	color: color-mix(in srgb, var(--acc, #0066cc) 16%, transparent);
}

.pzg-why__item .pzd-plate,
.pzg-why__item .pzd-cap { position: relative; z-index: 1; }

.pzg-why__item .pzd-plate { background: none; border: 0; }

.pzg-why__item .pzd-cap {
	margin-top: clamp(12px, 1.4vw, 20px);
	padding-top: clamp(10px, 1.2vw, 16px);
	border-top: 1px solid color-mix(in srgb, var(--acc, #0066cc) 22%, transparent);
}

/* The words. An accent spine on the leading edge, the same 2px the rest of the
   rebuild uses to mark a block as belonging to a category. */
.pzg-why__item > .pzg-why__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3vw, 54px) clamp(22px, 2.6vw, 48px);
	background: var(--poz-page);
}

.pzg-why__item > .pzg-why__body > * { max-width: 46ch; }

/* The small "01 ——" label is redundant once the well carries the numeral. */
.pzg-why__item .pzg-why__n { display: none; }

.pzg-why__item--flat {
	grid-template-columns: 1fr;
	border-left-width: 0;
	border-right-width: 0;
	background: none;
}

.pzg-why__item--flat > .pzg-why__body {
	padding-inline: 0;
	border-left: var(--poz-spine, 2px) solid var(--acc, #0066cc);
	padding-left: clamp(18px, 2vw, 30px);
}

@media (max-width: 900px) {
	.pzg-why__item,
	.pzg-why__item:nth-child(even) { grid-template-columns: 1fr; }
	.pzg-why__item > .pzg-dia,
	.pzg-why__item:nth-child(even) > .pzg-dia {
		order: 1;
		border-right: 0;
		border-left: 0;
		border-bottom: var(--poz-border);
	}
	.pzg-why__item:nth-child(even) > .pzg-why__body { order: 2; }
}


/* ——— the specification, as data rather than as a table dump ——————————
   The live site never prints a bare figure: a load gets a bar showing where it
   sits in the range, an option list gets chips, the row you are on gets a
   badge. All three are cheap, and all three were missing here. */

.pzg-spec {
	position: relative;
	background: var(--poz-panel-2);
	border-top: var(--poz-border);
	border-bottom: var(--poz-border);
}

/* The key figures stop being frosted tiles floating on white. Square, ruled,
   on the page ground, each with the accent tick that marks a placed number. */
.pzg-keyfig {
	position: relative;
	background: var(--poz-page);
	border: var(--poz-border);
	border-radius: 0;
	backdrop-filter: none;
	padding: clamp(18px, 1.8vw, 26px);
}

.pzg-keyfig::before {
	content: "";
	position: absolute;
	left: -1px;
	top: -1px;
	width: 30px;
	height: var(--poz-spine, 2px);
	background: var(--acc, #0066cc);
}

/* The load tile carries the tint, because the load is the figure the page is
   arguing about. Everything else is a fact; this one is the claim. */
.pzg-keyfig--wide {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--acc, #0066cc) 9%, #fff) 0%,
		#fff 66%
	);
	border-color: color-mix(in srgb, var(--acc, #0066cc) 28%, var(--poz-line));
}

.pzg-keyfig__k {
	display: block;
	margin-bottom: var(--poz-2);
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzg-keyfig__v {
	display: block;
	font: 400 clamp(21px, 2.1vw, 34px)/1.1 var(--poz-font-display);
	letter-spacing: var(--poz-track-title);
	color: var(--poz-text);
}

.pzg-keyfig--wide .pzg-keyfig__v { font-size: clamp(26px, 2.9vw, 46px); }

.pzg-keyfig__scale {
	position: relative;
	display: block;
	height: 3px;
	margin-top: clamp(14px, 1.4vw, 20px);
	background: color-mix(in srgb, var(--acc, #0066cc) 18%, transparent);
}

.pzg-keyfig__scale > i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	height: 100%;
	background: var(--acc, #0066cc);
}

.pzg-keyfig__note {
	display: block;
	margin-top: var(--poz-2);
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-3);
}

/* Option lists — heights, formats, certificates — as chips. Eleven heights in
   one comma-separated run is a sentence nobody finishes; eleven chips are a
   set you can scan. The pill is the one radius this system allows, and the
   token says why: --poz-radius-pill is "tags only". */
.pzg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.pzg-chip {
	display: inline-block;
	padding: 4px 11px;
	border: var(--poz-border);
	border-radius: var(--poz-radius-pill);
	background: var(--poz-page);
	font: var(--poz-spec);
	color: var(--poz-text-2);
	white-space: nowrap;
}

/* The full table, given the treatment the live site's comparison table has:
   one bordered card, a mono header column, hairlines, and no zebra — the rules
   do the work the fills were doing badly. */
.pzg-more {
	border: var(--poz-border);
	border-radius: 0;
	background: var(--poz-page);
}

.pzg-more > summary {
	display: flex;
	align-items: center;
	gap: var(--poz-3);
	list-style: none;
	cursor: pointer;
	padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.8vw, 26px);
	font: var(--poz-eyebrow);
	letter-spacing: var(--poz-track-eyebrow);
	text-transform: uppercase;
	color: var(--poz-text-2);
	transition: color var(--poz-dur-press) var(--poz-ease);
}

.pzg-more > summary::-webkit-details-marker { display: none; }
.pzg-more > summary:hover { color: var(--poz-text); }

.pzg-more > summary::after {
	content: "";
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	rotate: 45deg;
	translate: 0 -2px;
	transition: rotate var(--poz-dur-press) var(--poz-ease);
}

.pzg-more[open] > summary { border-bottom: var(--poz-border); color: var(--poz-text); }
.pzg-more[open] > summary::after { rotate: -135deg; translate: 0 2px; }

.pzg-table { width: 100%; border-collapse: collapse; }

.pzg-table th,
.pzg-table td {
	text-align: left;
	vertical-align: top;
	padding: clamp(11px, 1.1vw, 15px) clamp(16px, 1.8vw, 26px);
	border-bottom: 1px solid var(--poz-line-soft);
}

.pzg-table th {
	width: 32%;
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzg-table td { font: var(--poz-body); color: var(--poz-text); }
.pzg-table tr:last-child th,
.pzg-table tr:last-child td { border-bottom: 0; }


/* ——— the range, as a matrix you can read at a glance ————————————————
   The two levers were right; the drawing of them was empty — six big white
   boxes and a lot of air. The cells now carry a tint, the deck you are looking
   at is badged rather than merely bolded, and a gap in the range is drawn as
   an absence (dashed, hollow) instead of as a card with nothing in it. */

.pzg-matrix__cell {
	position: relative;
	border: var(--poz-border);
	border-radius: 0;
	background: var(--poz-page);
	padding: clamp(16px, 1.7vw, 26px);
	transition: border-color var(--poz-dur-hover) var(--poz-ease),
	            background-color var(--poz-dur-hover) var(--poz-ease);
}

a.pzg-matrix__cell:hover {
	border-color: color-mix(in srgb, var(--acc, #0066cc) 46%, var(--poz-line));
	background: color-mix(in srgb, var(--acc, #0066cc) 3%, #fff);
}

.pzg-matrix__cell--none {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--poz-line) 80%, transparent);
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font: var(--poz-spec);
	color: var(--poz-text-3);
}

.pzg-matrix__cell.is-here {
	border-color: var(--acc, #0066cc);
	background: color-mix(in srgb, var(--acc, #0066cc) 6%, #fff);
	box-shadow: inset var(--poz-spine, 2px) 0 0 var(--acc, #0066cc);
}

/* The badge that says: this is the page you are on. */
.pzg-matrix__here {
	position: absolute;
	right: clamp(12px, 1.4vw, 20px);
	top: clamp(12px, 1.4vw, 20px);
	padding: 4px 10px;
	border-radius: var(--poz-radius-pill);
	background: color-mix(in srgb, var(--acc, #0066cc) 15%, #fff);
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--acc-ink, #003d7a);
}

.pzg-matrix__ch,
.pzg-matrix__rh {
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzg-matrix__rh b {
	font: 400 clamp(17px, 1.5vw, 24px)/1 var(--poz-font-display);
	letter-spacing: var(--poz-track-title);
	color: var(--poz-text);
	margin-right: 6px;
}

.pzg-bar {
	position: relative;
	display: block;
	height: 3px;
	background: color-mix(in srgb, var(--acc, #0066cc) 18%, transparent);
}

.pzg-bar > i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	height: 100%;
	background: var(--acc, #0066cc);
}

.pzg-range__item {
	border: var(--poz-border);
	border-radius: 0;
	background: var(--poz-page);
}


/* The ribbon's jumps land below the fixed header, not under it. */
.pzg-why, .pzg-spec, .pzg-range { scroll-margin-top: var(--poz-anchor-top, 128px); }

/* ——— corrections from the first render ————————————————————————————————
   1. The clips are lit on white, so on a tinted ground the film drew its own
      white rectangle — the container we had just removed, back again as a
      matte. multiply makes that white transparent: the grid, the wash and the
      ghost run behind the deck the way they do on the live site, and the
      footage keeps its own studio shadow instead of borrowing a CSS one.
   2. Three figures would not sit on one line in a 43fr column, so the third
      wrapped and took its divider with it. Equal columns, smaller figure. */

.pzg-hero__grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }

.pzg-hero__media video,
.pzg-hero__media img {
	mix-blend-mode: multiply;
	filter: none;
}

.pzg-hero__ghost {
	top: 50%;
	font-size: clamp(88px, 15vw, 224px);
}

.pzg-hero .pzg-figs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.pzg-hero .pzg-figs > div,
.pzg-hero .pzg-figs > div + div {
	padding: 18px clamp(12px, 1.2vw, 20px) 0 0;
}

.pzg-hero .pzg-figs > div + div {
	padding-left: clamp(14px, 1.4vw, 22px);
}

.pzg-hero .pzg-figs > div + div::before { left: clamp(14px, 1.4vw, 22px); }

.pzg-hero .pzg-figs dd {
	font-size: clamp(15px, 1.35vw, 21px);
	line-height: 1.2;
}

@media (max-width: 620px) {
	.pzg-hero .pzg-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— second pass ————————————————————————————————————————————————————————
   1. The ghost read as a truncated word rather than as texture, because it
      ended inside the frame on the left and was hidden by the deck on the
      right. The live site's ghost bleeds off BOTH edges — at that size nobody
      expects to read it, so nothing looks cut. Bigger, therefore.
   2. The reason cards were taller than they needed to be: a 3:2 plate at full
      column width left the paragraph floating in half a screen of white.
   3. Two key figures wrapped mid-value ("4800 / kg"), which is the one thing a
      figure may never do. */

.pzg-hero__ghost { font-size: clamp(150px, 27vw, 440px); }

.pzg-why__item > .pzg-dia,
.pzg-why__item > .pzg-dia--plate {
	padding: clamp(14px, 1.6vw, 30px);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--acc, #0066cc) 11%, #fff) 0%,
		color-mix(in srgb, var(--acc, #0066cc) 4%, #fff) 52%,
		#fff 100%
	);
}

.pzg-why__item .pzd-plate {
	max-width: 700px;
	margin-inline: auto;
	width: 100%;
}

.pzg-why__item > .pzg-why__body { padding: clamp(22px, 2.6vw, 46px) clamp(20px, 2.4vw, 44px); }
.pzg-why__item > .pzg-why__body > * { max-width: 42ch; }

/* A figure never wraps mid-value. */
.pzg-keyfig__v { font-size: clamp(17px, 1.6vw, 26px); }
.pzg-keyfig--wide .pzg-keyfig__v { font-size: clamp(24px, 2.6vw, 42px); }
.pzg-keyfig__v { overflow-wrap: normal; }

/* The load figure is the claim the page argues, so it takes the accent — but
   the ink twin, because #0066cc at 9px on white is 4.5:1 and this is display
   type sitting on a tint. */
.pzg-keyfig--wide .pzg-keyfig__v { color: var(--acc-ink, #003d7a); }

/* The plate was sized by the column and made the card taller than the words
   it sits beside; capped, the two halves are closer to the same height. */
.pzg-why__item { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
.pzg-why__item .pzd-plate { max-width: 620px; }

/* ============================================================================
   CLEAN, NOT DECORATED
   ---------------------------------------------------------------------------
   Sven, with five reference frames: "remove the background from hero, it still
   needs to look clean … modern, clean but not simple and lazy … sleek tables,
   modern sections, more use of the principal font."

   The previous pass borrowed the LIVE site's devices — tint washes, gradient
   wells, a blueprint grid under the hero. The references say something else:
   this page is an instrument, not a brochure. White ground. Hairlines doing
   all the structural work. Mono micro-labels on every frame and every axis.
   Michroma for every number, with its unit set small underneath in mono. The
   accent used four times a screen, not four times a section.

   So the tints come out and the rules go in.
   ========================================================================= */


/* ——— hero: nothing behind it ————————————————————————————————————————
   The grid, the wash and the ghost word were three backgrounds where the
   references have none. What replaces them is air and one mono caption. */

.pzg-hero__ground,
.pzg-hero__ghost { display: none; }

.pzg-hero {
	background: var(--poz-page);
	padding-block: clamp(40px, 4.4vw, 84px) clamp(52px, 5.6vw, 100px);
}

/* multiply is still right: on white it is the identity, and it keeps the
   footage's own studio ground from ever drawing a box again. */
.pzg-hero__media { flex-direction: column; align-items: stretch; }

/* The caption the references put under the object: what it is, in mono, at
   the size of a label rather than a sentence. */
.pzg-hero__cap {
	margin: clamp(14px, 1.4vw, 22px) 0 0;
	text-align: center;
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-3);
}


/* ——— the ribbon goes quiet ————————————————————————————————————————
   A solid accent bar is the loudest thing on the page and the references put
   a hairline there instead: a numbered rule, mono links, a text CTA. */

.pzg-ribbon {
	background: var(--poz-panel-2);
	color: var(--poz-text-2);
	border-bottom: var(--poz-border);
}

.pzg-ribbon__in { min-height: 48px; }

.pzg-ribbon__bc a,
.pzg-ribbon__bc span { color: var(--poz-text-3); }
.pzg-ribbon__bc a:hover { color: var(--poz-text); }
.pzg-ribbon__bc b { color: var(--poz-text); }

/* The accent survives as one 22px rule at the head of the bar. */
.pzg-ribbon__bc::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: var(--poz-spine, 2px);
	margin-right: var(--poz-3);
	background: var(--acc, #0066cc);
}

.pzg-ribbon__nav a { color: var(--poz-text-2); }
.pzg-ribbon__nav a:hover { color: var(--poz-text); }
.pzg-ribbon__nav a:not(.pzg-ribbon__cta)::after { background: var(--acc, #0066cc); }

.pzg-ribbon__cta {
	background: none;
	color: var(--poz-text) !important;
	padding: 0;
	border-radius: 0;
}

.pzg-ribbon__cta::after { content: " →"; }
.pzg-ribbon__cta:hover { background: none; }


/* ——— figures as readouts ————————————————————————————————————————
   The references never set a value and its unit at the same size. The number
   is Michroma and large; the unit is mono and small, underneath it. */

.pzg-hero .pzg-figs { border-top: var(--poz-border); }
.pzg-hero .pzg-figs > div::before { display: none; }

.pzg-hero .pzg-figs dt {
	order: 2;
	margin: 8px 0 0;
	color: var(--poz-text-3);
}

.pzg-hero .pzg-figs > div {
	display: flex;
	flex-direction: column;
	padding-top: clamp(16px, 1.6vw, 22px);
}

.pzg-hero .pzg-figs dd {
	order: 1;
	font-size: clamp(19px, 1.9vw, 30px);
	line-height: 1;
}


/* ——— the reasons: a framed drawing and a numbered argument ——————————
   The gradient well is gone. What the references frame a drawing with is a
   hairline and two accent corner brackets, with a mono label inside it — a
   technical plate, not a tinted card. */

.pzg-why__item {
	border: 0;
	background: none;
	gap: clamp(26px, 3.4vw, 72px);
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	margin-bottom: clamp(38px, 4.6vw, 84px);
	align-items: center;
}

.pzg-why__item > .pzg-dia,
.pzg-why__item > .pzg-dia--plate {
	position: relative;
	padding: clamp(20px, 2.2vw, 40px);
	background: none;
	border: var(--poz-border);
	--pzb: clamp(16px, 1.6vw, 26px);
}

/* Two brackets, top-left and bottom-right, drawn in one pseudo-element. */
.pzg-why__item > .pzg-dia::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	pointer-events: none;
	font: inherit;
	color: transparent;
	background:
		linear-gradient(var(--acc, #0066cc), var(--acc, #0066cc)) left  top    / var(--pzb) 1.5px no-repeat,
		linear-gradient(var(--acc, #0066cc), var(--acc, #0066cc)) left  top    / 1.5px var(--pzb) no-repeat,
		linear-gradient(var(--acc, #0066cc), var(--acc, #0066cc)) right bottom / var(--pzb) 1.5px no-repeat,
		linear-gradient(var(--acc, #0066cc), var(--acc, #0066cc)) right bottom / 1.5px var(--pzb) no-repeat;
}

.pzg-why__item .pzd-plate { max-width: none; }

/* The caption becomes the frame's own label: mono, ranged left, no rule. */
.pzg-why__item .pzd-cap {
	margin-top: clamp(14px, 1.6vw, 22px);
	padding-top: 0;
	border-top: 0;
	text-align: left;
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-3);
}

.pzg-why__item > .pzg-why__body { padding: 0; background: none; }

/* The numeral comes back into the copy, set large in the principal face, with
   the accent surviving as one short rule beside it. */
.pzg-why__item .pzg-why__n {
	display: flex;
	align-items: center;
	gap: var(--poz-3);
	margin-bottom: clamp(14px, 1.6vw, 24px);
	font: 400 clamp(30px, 3.4vw, 56px)/1 var(--poz-font-display);
	letter-spacing: var(--poz-track-title);
	color: var(--poz-text-3);
}

.pzg-why__item .pzg-why__n::after {
	content: "";
	width: clamp(18px, 2vw, 34px);
	height: var(--poz-spine, 2px);
	background: var(--acc, #0066cc);
}

.pzg-why__item:nth-child(even) > .pzg-dia { border-left: var(--poz-border); border-right: var(--poz-border); }
.pzg-why__item > .pzg-dia { border-right: var(--poz-border); }


/* ——— sleek tables ————————————————————————————————————————————————
   No card, no fill, no zebra. Mono column heads, one hairline per row, and
   room. The only colour is the row you are standing on. */

.pzg-more {
	border: 0;
	border-top: var(--poz-border);
	background: none;
}

.pzg-more > summary { padding-inline: 0; }
.pzg-more[open] > summary { border-bottom: var(--poz-border); }

.pzg-table th,
.pzg-table td {
	padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 24px) clamp(14px, 1.5vw, 20px) 0;
	border-bottom: 1px solid var(--poz-line);
}

.pzg-table th { width: 30%; padding-right: clamp(20px, 2.4vw, 44px); }
.pzg-table td { color: var(--poz-text-2); }


/* ——— every number in the principal face, every unit in mono ————————
   poz_guil_fig() splits a published value into <b>figure</b><i>unit</i>. The
   references never set the two at one size, and it is the single change that
   makes a spec block read as an instrument rather than as a list. */

.pzg-num { display: block; }

.pzg-num b {
	display: block;
	font: 400 clamp(21px, 2.1vw, 34px)/1 var(--poz-font-display);
	letter-spacing: var(--poz-track-title);
	color: var(--poz-text);
}

.pzg-num i {
	display: block;
	margin-top: 6px;
	font: var(--poz-eyebrow-mono);
	letter-spacing: var(--poz-track-mono);
	font-style: normal;
	text-transform: uppercase;
	color: var(--poz-text-3);
}


/* ——— key figures ————————————————————————————————————————————————— */

.pzg-keyfig {
	border: 0;
	border-top: var(--poz-border);
	background: none;
	padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 32px) 0;
}

.pzg-keyfig::before { width: 0; }

.pzg-keyfig--wide {
	background: none;
	border-top: var(--poz-spine, 2px) solid var(--acc, #0066cc);
}

.pzg-keyfig--wide .pzg-num b { font-size: clamp(28px, 3vw, 48px); }
.pzg-keyfig--wide .pzg-keyfig__v { color: inherit; }

.pzg-keyfig__k { color: var(--poz-text-3); }

.pzg-keyfig__scale { height: 2px; background: var(--poz-line); }


/* ——— the matrix loses its fills ————————————————————————————————— */

.pzg-matrix__cell {
	border: 0;
	border-top: var(--poz-border);
	background: none;
	padding: clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 24px) clamp(20px, 2vw, 30px) 0;
}

a.pzg-matrix__cell:hover { background: none; border-top-color: var(--acc, #0066cc); }

.pzg-matrix__cell--none {
	border-top: 1px dashed var(--poz-line);
	justify-content: flex-start;
}

.pzg-matrix__cell.is-here {
	border-top: var(--poz-spine, 2px) solid var(--acc, #0066cc);
	background: none;
	box-shadow: none;
}

.pzg-matrix__here {
	position: static;
	display: inline-block;
	margin-top: var(--poz-2);
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--acc-ink, #003d7a);
}

.pzg-bar { height: 2px; background: var(--poz-line); }

/* The hero figures set the unit on the value's own line — the readout shape
   from the dark reference frame (200 cm, 1.600 kg/m²), not the stacked one the
   spec table uses. Whole strings at 30px were also colliding across columns. */
.pzg-hero .pzg-figs .pzg-num b { display: inline; font-size: clamp(18px, 1.8vw, 28px); }
.pzg-hero .pzg-figs .pzg-num i { display: inline; margin: 0 0 0 6px; }
.pzg-hero .pzg-figs dd { font-size: inherit; }
.pzg-hero__cap { text-align: right; }

/* Brackets drawn as two elements with real borders — the four-layer gradient
   was fragile and only ever painted half of itself. */
.pzg-why__item > .pzg-dia::before { background: none; inset: auto; }

.pzg-why__item > .pzg-dia::before,
.pzg-why__item > .pzg-dia::after {
	content: "";
	position: absolute;
	z-index: 3;
	width: clamp(16px, 1.6vw, 26px);
	height: clamp(16px, 1.6vw, 26px);
	pointer-events: none;
}

.pzg-why__item > .pzg-dia::before {
	left: -1px;
	top: -1px;
	border-left: 1.5px solid var(--acc, #0066cc);
	border-top: 1.5px solid var(--acc, #0066cc);
}

.pzg-why__item > .pzg-dia::after {
	right: -1px;
	bottom: -1px;
	border-right: 1.5px solid var(--acc, #0066cc);
	border-bottom: 1.5px solid var(--acc, #0066cc);
}

/* The caption is a label on the frame, not a panel of its own. */
.pzg-why__item .pzd-cap {
	background: none;
	border: 0;
	padding: 0;
	backdrop-filter: none;
	box-shadow: none;
}

/* Chrome still draws its own marker unless both are silenced. */
.pzg-more > summary::marker { content: ""; }
.pzg-more > summary::after { width: 7px; height: 7px; border-width: 1px; }

/* overflow:hidden on the plate was clipping the brackets to nothing — they sit
   1px proud of the frame by design, which is exactly what was being cut. */
.pzg-why__item > .pzg-dia,
.pzg-why__item > .pzg-dia--plate { overflow: visible; }

.pzg-why__item > .pzg-dia::before,
.pzg-why__item > .pzg-dia::after { border-width: 2px; }

/* ============================================================================
   KEYNOTE
   ---------------------------------------------------------------------------
   Sven: "think apple keynote — they don't use tables at all, they use
   infographics … the product page should feel like an apple presentation …
   don't be constrained by our design system, only thing to follow from it is
   the principal font."

   So: Michroma stays and everything else is off the leash. Tiles on a grey
   ground, one fact each, packed dense. Rounded, because the reference is
   rounded and because a radius used on EVERY tile is a system rather than the
   stray 22px on the film that started all of this.

   And no small print. Anything worth putting on the page is worth setting at
   a size a specifier can read across a desk.
   ========================================================================= */

.pzg-spec { background: #F2F4F6; }

.pzb {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: minmax(148px, auto);
	grid-auto-flow: dense;
	gap: 12px;
	margin-top: clamp(26px, 3vw, 46px);
}

.pzb-t {
	grid-column: span var(--sp, 2);
	grid-row: span var(--sr, 1);
	display: flex;
	flex-direction: column;
	gap: var(--poz-3);
	padding: clamp(20px, 2vw, 32px);
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
}

/* The label is set in the principal face, not in 8px mono. */
.pzb-t__k {
	font: 400 11px/1.4 var(--poz-font-display);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

.pzb-t__b {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(12px, 1.4vw, 20px);
	flex: 1 1 auto;
	min-height: 0;
}

/* The figure. Michroma, and as big as the tile will carry. */
.pzb-fig { margin: 0; }

.pzb-fig .pzg-num b {
	display: block;
	font: 400 clamp(30px, 3.4vw, 56px)/1 var(--poz-font-display);
	letter-spacing: -.005em;
	color: var(--poz-text);
}

.pzb-fig .pzg-num i {
	display: block;
	margin-top: 10px;
	font: 400 13px/1.3 var(--poz-font-display);
	letter-spacing: .1em;
	font-style: normal;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

/* The load is the claim the page argues, so it is the one dark tile. */
.pzb-t--hero {
	background: var(--poz-ink);
	color: #fff;
	justify-content: space-between;
}

.pzb-t--hero .pzb-t__k { color: rgba(255, 255, 255, .55); }
.pzb-t--hero .pzg-num b { color: #fff; font-size: clamp(46px, 6.4vw, 104px); }
.pzb-t--hero .pzg-num i { color: var(--acc-tint, #61a0df); font-size: 15px; }

.pzb-gauge { display: block; }

.pzb-gauge__t {
	display: block;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
}

.pzb-gauge__t > i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--acc-tint, #61a0df);
	width: 0;
	transition: width 1.1s var(--poz-ease) .15s;
}

.pzg-rv.is-in .pzb-gauge__t > i,
.is-in .pzb-gauge__t > i { width: var(--pzw, inherit); }

.pzb-gauge__m {
	display: block;
	margin-top: 10px;
	font: 400 11px/1.3 var(--poz-font-display);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
}

/* Sockets, drawn as sockets on one module. */
.pzb-sock {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	padding: 14px 16px;
	border: 1.5px solid var(--poz-line);
	border-radius: 10px;
	aspect-ratio: 2 / 1;
	max-width: 210px;
}

.pzb-sock__r { display: flex; justify-content: space-between; }

.pzb-sock__r > i {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--acc, #0066cc);
}

/* The formats, at their real relative sizes. */
.pzb-sizes { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

.pzb-sz {
	position: relative;
	display: block;
	width: var(--w);
	height: var(--h);
	border-radius: 6px;
	background: color-mix(in srgb, var(--acc, #0066cc) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--acc, #0066cc) 26%, #fff);
}

.pzb-sz > b {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	font: 400 11px/1 var(--poz-font-display);
	letter-spacing: .04em;
	color: var(--acc-ink, #003d7a);
	white-space: nowrap;
}

/* A published span, as an axis with both ends called. */
.pzb-span { display: flex; align-items: center; gap: 14px; }
.pzb-span__e b { display: block; font: 400 clamp(24px, 2.4vw, 38px)/1 var(--poz-font-display); }
.pzb-span__e i {
	display: block;
	margin-top: 6px;
	font: 400 11px/1 var(--poz-font-display);
	letter-spacing: .1em;
	font-style: normal;
	text-transform: uppercase;
	color: var(--poz-text-3);
}
.pzb-span__l {
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--acc, #0066cc), color-mix(in srgb, var(--acc, #0066cc) 18%, #fff));
}

/* Certificates, each one its own mark. */
.pzb-marks { display: flex; flex-wrap: wrap; gap: 10px; }

.pzb-mark {
	padding: 11px 18px;
	border-radius: 999px;
	background: #F2F4F6;
	font: 400 12px/1.2 var(--poz-font-display);
	letter-spacing: .06em;
	color: var(--poz-text-2);
}

/* A value that is a phrase. Large, never small. */
.pzb-words {
	margin: 0;
	font: 400 clamp(15px, 1.4vw, 21px)/1.35 var(--poz-font-display);
	letter-spacing: .01em;
	color: var(--poz-text);
}

.pzb-t--code .pzb-words { font-size: clamp(19px, 1.9vw, 30px); }
.pzb-t--wide { justify-content: center; }

@media (max-width: 1100px) { .pzb { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .pzb { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pzb-t { grid-column: span 2; } }


/* ——— the range, compared like a keynote ————————————————————————————
   Columns, not a matrix. The two levers survive as two of the rows, so the
   argument is intact — it is just read down a column, which is what everyone
   already knows how to do. */

.pzc {
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(30px, 3.4vw, 56px);
}

.pzc__c {
	position: relative;
	padding: clamp(22px, 2.4vw, 38px) clamp(14px, 1.6vw, 26px);
	text-align: center;
	border-top: 1px solid var(--poz-line);
}

.pzc__c--name { border-top: 0; padding-top: 0; }
.pzc__c.is-here { background: color-mix(in srgb, var(--acc, #0066cc) 4%, #fff); }

.pzc__c--name.is-here { border-radius: 22px 22px 0 0; }
.pzc__c--cta.is-here { border-radius: 0 0 22px 22px; }

.pzc__name {
	margin: 0;
	font: 400 clamp(19px, 2vw, 32px)/1.1 var(--poz-font-display);
	letter-spacing: .01em;
	color: var(--poz-text);
}

.pzc__c--name.is-here .pzc__name { color: var(--acc-ink, #003d7a); }

.pzc__tag {
	margin: 12px 0 0;
	font: 400 12px/1.45 var(--poz-font-body);
	color: var(--poz-text-2);
}

.pzc__here {
	margin: 14px 0 0;
	font: 400 10px/1 var(--poz-font-display);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--acc-ink, #003d7a);
}

.pzc .pzb-fig .pzg-num b { font-size: clamp(26px, 2.8vw, 46px); }
.pzc .pzb-fig .pzg-num i { font-size: 12px; }
.pzc .pzb-fig--none { font: 400 26px/1 var(--poz-font-display); color: var(--poz-line); margin: 0; }

.pzc__lab {
	margin: 14px 0 0;
	font: 400 11px/1.3 var(--poz-font-display);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

.pzc__go,
.pzc__on {
	display: inline-block;
	font: 400 11px/1 var(--poz-font-display);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
}

.pzc__go { color: var(--acc-ink, #003d7a); }
.pzc__go:hover { text-decoration: underline; text-underline-offset: 5px; }
.pzc__on { color: var(--poz-text-3); }

.pzg-grid__axes {
	margin-top: clamp(20px, 2.2vw, 32px);
	display: flex;
	gap: clamp(18px, 2vw, 34px);
	flex-wrap: wrap;
	font: 400 11px/1.4 var(--poz-font-display);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

@media (max-width: 900px) {
	.pzc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pzc__c--name { border-top: 1px solid var(--poz-line); padding-top: clamp(22px, 2.4vw, 38px); }
}


/* ——— the reasons, given a camera —————————————————————————————————
   Sven: "the 01 02 03 sections should be more animated, cinematic while
   retaining the sleekness."

   The drawing arrives from slightly behind the page and settles; the numeral
   rises; the rule beside it draws from nothing. Nothing moves on a timer and
   nothing loops — it happens once, when the block is reached, and then the
   page is still again. Reveal classes come from the script, never the
   template, so a page with no JS shows all of it, already arrived. */

.pzg-why__item > .pzg-dia {
	opacity: 0;
	transform: scale(.955) translateY(22px);
	transition:
		opacity 1.05s var(--poz-ease),
		transform 1.15s var(--poz-ease);
}

.pzg-why__item > .pzg-dia.is-in,
.pzg-why__item > .pzg-dia:not(.pzg-rv) { opacity: 1; transform: none; }

.pzg-why__item > .pzg-dia::before,
.pzg-why__item > .pzg-dia::after {
	opacity: 0;
	transition: opacity .5s var(--poz-ease) .55s;
}

.pzg-why__item > .pzg-dia.is-in::before,
.pzg-why__item > .pzg-dia.is-in::after,
.pzg-why__item > .pzg-dia:not(.pzg-rv)::before,
.pzg-why__item > .pzg-dia:not(.pzg-rv)::after { opacity: 1; }

/* The numeral, at the size the references set it, and rising. */
.pzg-why__item .pzg-why__n {
	font-size: clamp(44px, 5.4vw, 92px);
	color: var(--poz-line);
	gap: var(--poz-4);
}

.pzg-why__item .pzg-why__n::after {
	width: 0;
	transition: width .7s var(--poz-ease) .35s;
}

.pzg-why__item .pzg-why__n.is-in::after,
.pzg-why__item .pzg-why__n:not(.pzg-rv)::after { width: clamp(26px, 3vw, 54px); }

.pzg-why__item .pzg-why__body h2 {
	font-size: clamp(21px, 2.3vw, 38px);
	line-height: 1.14;
}

.pzg-why__item .pzg-why__body p {
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.62;
	color: var(--poz-text-2);
}

/* One idea per screen: the block gets the room the reference gives it. */
.pzg-why__item { margin-bottom: clamp(56px, 7vw, 132px); }

@media (prefers-reduced-motion: reduce) {
	.pzg-why__item > .pzg-dia,
	.pzg-why__item > .pzg-dia::before,
	.pzg-why__item > .pzg-dia::after,
	.pzg-why__item .pzg-why__n::after { transition: none; }
}


/* ——— no small print ————————————————————————————————————————————————
   Sven: "the small print 'jedan utor za svaki dodatak' is completely
   unreadable." It was 34 units in a 1500-unit viewBox on a plate that had been
   capped at 620px — about 14px on screen, in mono, in grey. Every annotation
   size goes up, and the sub-label stops being the quiet one. */

.pzd-ov .pzo-t  { font-size: 40px; }
.pzd-ov .pzo-n  { font-size: 58px; }
.pzd-ov .pzo-dim { font-size: 34px; }

.pzg-why__item .pzd-cap {
	font: 400 12px/1.4 var(--poz-font-display);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzg-hero__cap {
	font: 400 11px/1.4 var(--poz-font-display);
	letter-spacing: .13em;
	color: var(--poz-text-3);
}

.pzg-ribbon__bc a,
.pzg-ribbon__bc span,
.pzg-ribbon__bc b,
.pzg-ribbon__nav a {
	font: 400 11px/1 var(--poz-font-display);
	letter-spacing: .13em;
}

.pzg-hero .pzg-figs dt {
	font: 400 11px/1.3 var(--poz-font-display);
	letter-spacing: .13em;
	text-transform: uppercase;
}

.pzg-hero .pzg-figs .pzg-num i {
	font: 400 12px/1 var(--poz-font-display);
	letter-spacing: .08em;
}

/* The comparison inherited the range section's dark panel, and that turns out
   to be the right place for it: a keynote compares things on a dark slide with
   the one you are on lit. So it is made deliberate rather than left half-read
   — everything light, the current model a white card standing off the black. */

.pzc__c { color: var(--poz-text-on-dark); border-top-color: var(--poz-line-dark); }
.pzc__c .pzb-fig .pzg-num b { color: rgba(255, 255, 255, .92); }
.pzc__c .pzb-fig .pzg-num i,
.pzc__lab { color: var(--poz-text-3); }
.pzc__name { color: #fff; }
.pzc__tag { color: var(--poz-text-3); }
.pzc .pzb-fig--none { color: var(--poz-line-dark); }
.pzc__go { color: var(--acc-tint, #61a0df); }
.pzc__on { color: var(--poz-text-3); }

.pzc__c.is-here { background: #fff; }
.pzc__c.is-here .pzb-fig .pzg-num b,
.pzc__c--name.is-here .pzc__name { color: var(--poz-text); }
.pzc__c.is-here .pzb-fig .pzg-num i,
.pzc__c.is-here .pzc__lab,
.pzc__c.is-here .pzc__tag { color: var(--poz-text-2); }
.pzc__c.is-here { border-top-color: var(--poz-line); }
.pzc__here { color: var(--acc-ink, #003d7a); }
.pzc__c--cta.is-here .pzc__on { color: var(--poz-text-3); }

/* The load tile carries a 104px numeral over two rows; the rows were sized by
   the tiles beside it and it was being clipped by its own radius. */
.pzb-t--hero { min-height: 330px; }
.pzb-t--hero .pzg-num b { font-size: clamp(42px, 5.4vw, 88px); }
.pzb { grid-auto-rows: minmax(132px, auto); }
.pzb-t__b { justify-content: flex-start; }
.pzb-t--hero .pzb-t__b { justify-content: space-between; height: 100%; }

/* Content centres in its tile; the row is as tall as the tallest thing in it,
   and a figure hugging the top of a 300px card looks like a mistake. */
.pzb-t__b { justify-content: center; }
.pzb-t--hero { min-height: 300px; }
.pzb-t--hero .pzb-t__b { justify-content: flex-end; gap: 26px; }

/* ============================================================================
   THE SHEET LANGUAGE
   ---------------------------------------------------------------------------
   From the generated PDF pages: a black readout strip, then a table that has
   been designed rather than merely printed — mono column heads, one heavy rule
   under them, a hairline per row, HR in black with EN in grey beneath it, and
   a right-hand column naming the standard.
   ========================================================================= */

.pzg-spec { background: var(--poz-page); }

/* ——— the black strip ————————————————————————————————————————————— */

.pzs-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 4vw, 80px);
	margin: clamp(26px, 3vw, 44px) 0 clamp(34px, 4vw, 60px);
	padding: clamp(24px, 2.6vw, 40px) clamp(28px, 3.2vw, 56px);
	background: var(--poz-ink);
	border-radius: 26px;
}

.pzs-strip__i { min-width: 0; }
.pzs-strip__v { margin: 0; }

.pzs-strip__v .pzg-num b {
	display: inline;
	font: 400 clamp(26px, 3vw, 48px)/1 var(--poz-font-display);
	color: #fff;
}

.pzs-strip__v .pzg-num i {
	display: inline;
	margin-left: 8px;
	font: 400 clamp(13px, 1.2vw, 18px)/1 var(--poz-font-display);
	font-style: normal;
	letter-spacing: .04em;
	text-transform: none;
	color: rgba(255, 255, 255, .82);
}

.pzs-strip__k {
	margin: 12px 0 0;
	font: 400 11px/1.3 var(--poz-font-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-3);
}

/* ——— the table ————————————————————————————————————————————————— */

.pzs-tbl { overflow-x: auto; }
.pzs-tbl table { width: 100%; border-collapse: collapse; min-width: 640px; }

.pzs-tbl thead th {
	text-align: left;
	padding: 0 0 clamp(12px, 1.2vw, 18px);
	border-bottom: 2px solid var(--poz-text);
	font: 400 11px/1.3 var(--poz-font-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text);
	white-space: nowrap;
}

.pzs-tbl thead th:last-child { text-align: right; }

.pzs-tbl tbody th,
.pzs-tbl tbody td {
	padding: clamp(15px, 1.6vw, 22px) 0;
	border-bottom: 1px solid var(--poz-line);
	vertical-align: top;
	text-align: left;
}

/* The parameter: mono, uppercase, quiet — it is a key, not a sentence. */
.pzs-tbl tbody th {
	width: 30%;
	padding-right: clamp(20px, 2.4vw, 44px);
}

.pzs-tbl tbody th > span,
.pzs-tbl tbody th > a > span {
	display: block;
	font: 400 12px/1.4 var(--poz-font-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.pzs-tbl tbody th > i,
.pzs-tbl tbody td > i {
	display: block;
	margin-top: 5px;
	font: 400 12px/1.4 var(--poz-font-mono);
	letter-spacing: var(--poz-track-mono);
	font-style: normal;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

/* The value: the only thing on the row set in body type, and set in ink. */
.pzs-tbl__v { width: 46%; padding-right: clamp(20px, 2.4vw, 44px); }

.pzs-tbl__v > span {
	display: block;
	font: 400 clamp(14px, 1.2vw, 17px)/1.45 var(--poz-font-body);
	color: var(--poz-text);
}

.pzs-tbl__v > i {
	font-family: var(--poz-font-body);
	letter-spacing: normal;
	text-transform: none;
	font-size: 13px;
	color: var(--poz-text-3);
}

/* The standard it is measured to. Right, mono, and empty when there is none —
   an invented reference is worse than a blank cell. */
.pzs-tbl__r {
	text-align: right;
	font: 400 11px/1.5 var(--poz-font-mono);
	letter-spacing: var(--poz-track-mono);
	text-transform: uppercase;
	color: var(--poz-text-3);
	white-space: nowrap;
}

.pzs-tbl tbody tr:last-child th,
.pzs-tbl tbody tr:last-child td { border-bottom: 0; }

/* The models off the two axes, in the same table language. */
.pzs-tbl--rest { margin-top: clamp(22px, 2.4vw, 36px); }

.pzs-tbl--rest tbody th > a { text-decoration: none; }

.pzs-tbl--rest tbody th > a > span {
	font: 400 clamp(15px, 1.4vw, 21px)/1.2 var(--poz-font-display);
	letter-spacing: .01em;
	text-transform: none;
	color: var(--poz-text);
}

.pzs-tbl--rest tbody th > a:hover > span { color: var(--acc-ink, #003d7a); }

.pzs-tbl--rest .pzs-tbl__r {
	font-family: var(--poz-font-display);
	font-size: clamp(14px, 1.3vw, 19px);
	letter-spacing: .02em;
	text-transform: none;
	color: var(--poz-text);
}

.pzg-range__rest > h3 {
	font: 400 clamp(17px, 1.7vw, 26px)/1.2 var(--poz-font-display);
	letter-spacing: .02em;
	margin-bottom: var(--poz-3);
}

@media (max-width: 760px) {
	.pzs-strip { gap: 24px; border-radius: 20px; }
	.pzs-tbl table { min-width: 520px; }
}

/* ============================================================================
   THE BENTO LEARNS FROM KOKONUTUI
   ---------------------------------------------------------------------------
   Sven asked for kokonutui/bento-grid. That component is React + Tailwind +
   framer-motion and this page is PHP + CSS, so the component itself cannot be
   mounted — but its design decisions can be read straight out of its source,
   and four of them are worth having:

     1. the card surface is LAYERED: a near-white vertical gradient over a
        translucent ground, a hairline at partial alpha, and a soft ambient
        shadow — not a flat fill;
     2. on hover the card LIFTS (-5px), the shadow deepens, the border darkens
        one step — the whole card responds, not just its border;
     3. the card TILTS toward the cursor, ±2° with a spring — enough to feel
        physical, too little to read as a gimmick;
     4. children arrive STAGGERED, ~150 ms apart, so the grid assembles rather
        than appears.

   Values are transcribed from bento-grid.tsx and respoken in this page's
   tokens: same 22px radius, Michroma untouched, the accent still the only
   colour. The tilt and stagger come from poz-guil.js; with no JS the tiles
   simply sit still, already visible.
   ========================================================================= */

.pzb-t {
	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .28) 100%),
		rgba(255, 255, 255, .72);
	border: 1px solid rgba(22, 23, 27, .075);
	box-shadow: 0 4px 20px rgba(12, 13, 16, .04);
	backdrop-filter: blur(4px);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
	transition:
		transform .45s cubic-bezier(.2, .8, .2, 1),
		box-shadow .5s ease,
		border-color .5s ease;
	will-change: transform;
}

.pzb-t:hover {
	--lift: -5px;
	border-color: rgba(22, 23, 27, .16);
	box-shadow: 0 8px 30px rgba(12, 13, 16, .07);
}

/* The dark tile keeps its ink ground but takes the same physics, with the
   layer gradient flipped to a sheen instead of a wash. */
.pzb-t--hero {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 40%, transparent 100%),
		var(--poz-ink);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 4px 20px rgba(12, 13, 16, .18);
}

.pzb-t--hero:hover {
	border-color: rgba(255, 255, 255, .16);
	box-shadow: 0 8px 30px rgba(12, 13, 16, .28);
}

/* The stagger: each tile's reveal waits ~150 ms on the one before it, the
   delay carried by a custom property the script sets from the tile's index.
   The reveal itself is the theme's existing .pzg-rv → .is-in pair. */
.pzb-t.pzg-rv {
	opacity: 0;
	translate: 0 20px;
	transition:
		opacity .7s var(--poz-ease) var(--stag, 0s),
		translate .7s var(--poz-ease) var(--stag, 0s),
		transform .45s cubic-bezier(.2, .8, .2, 1),
		box-shadow .5s ease,
		border-color .5s ease;
}

.pzb-t.pzg-rv.is-in { opacity: 1; translate: 0 0; }

/* Inside the strip and the compare columns, the same stagger. */
.pzc__c.pzg-rv { transition-delay: var(--stag, 0s); }

@media (prefers-reduced-motion: reduce) {
	.pzb-t,
	.pzb-t.pzg-rv {
		transform: none;
		transition: none;
		opacity: 1;
		translate: 0 0;
	}
}

/* The tiles need a ground to stand off; the sheet table reads fine on it. */
.pzg-spec { background: var(--poz-panel, #F2F4F6); }
.pzs-tbl { margin-top: clamp(40px, 4.6vw, 72px); }

/* Under html.pzg-anime the script owns these entrances, so the CSS reveals for
   exactly these elements stand down. Everything else — hero copy, table rows,
   compare columns, the numeral's rule — keeps its CSS reveal, and a page with
   no JS never gets the class, so it never hides anything at all. */

html.pzg-anime .pzg-why__item > .pzg-dia,
html.pzg-anime .pzg-why__item > .pzg-dia--plate {
	opacity: 1;
	transform: none;
	transition: none;
}

html.pzg-anime .pzb-t.pzg-rv {
	opacity: 1;
	translate: 0 0;
	/* back to hover-only physics — entrance belongs to the script now */
	transition:
		transform .45s cubic-bezier(.2, .8, .2, 1),
		box-shadow .5s ease,
		border-color .5s ease;
}

/* The tilt writes --rx/--ry into transform; the entrance animates the CSS
   translate property instead, so the two never fight over one property. */

/* ============================================================================
   MAGIC UI PASS — THE PAGE BECOMES CARDS
   ---------------------------------------------------------------------------
   Sven, sixth round: "@magicui/bento-grid for the model pages. they need to be
   completely redesigned, they are not good at all."

   The component was fetched from magicui.design's registry and its anatomy
   transcribed (React cannot mount here; its decisions can). What Magic UI
   actually does, read from bento-grid.tsx:

     · cards carry NO border — a three-layer shadow does the work:
         0 0 0 1px rgba(0,0,0,.03)      the ring
         0 2px 4px rgba(0,0,0,.05)      the contact
         0 12px 24px rgba(0,0,0,.05)    the ambience
     · dark cards get an INSET TOP GLOW (0 -20px 80px -20px #ffffff1f inset)
       and a 10%-white hairline instead of the shadow ring
     · the visual bleeds inside the card, text sits at the bottom
     · on hover the whole card responds and the content lifts

   Applied as one decision, not a garnish: the page ground goes grey and EVERY
   surface — hero, reason cards, tiles, compare, tables — becomes a card in
   this one language. One radius, one shadow, everywhere.
   ========================================================================= */

.pzg {
	--mg-r: 16px;
	--mg-shadow:
		0 0 0 1px rgba(0, 0, 0, .03),
		0 2px 4px rgba(0, 0, 0, .05),
		0 12px 24px rgba(0, 0, 0, .05);
	--mg-shadow-up:
		0 0 0 1px rgba(0, 0, 0, .04),
		0 4px 8px rgba(0, 0, 0, .05),
		0 20px 40px rgba(0, 0, 0, .09);
	background: #F4F4F6;
}

.pzg-hero,
.pzg-spec,
.pzg-why,
.pzg-range { background: transparent; border: 0; }

.pzg-ribbon { background: #F4F4F6; }

/* ——— the hero is the first card ————————————————————————————————— */

.pzg-hero { padding-block: clamp(18px, 2vw, 34px) clamp(26px, 3vw, 48px); }

.pzg-hero__grid {
	background: #fff;
	border-radius: var(--mg-r);
	box-shadow: var(--mg-shadow);
	padding: clamp(26px, 3.4vw, 60px);
	min-height: 520px;
}

/* ——— the reasons become Magic UI cards ————————————————————————————
   Vertical: the drawing bleeds in the top of the card, the words sit at the
   bottom. Three across; a model with two reasons fills the row with two. */

.pzg-why { padding-block: clamp(10px, 1.4vw, 24px) clamp(30px, 3.4vw, 56px); }

.pzg-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: clamp(14px, 1.5vw, 20px);
}

.pzg-why__item,
.pzg-why__item:nth-child(even) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	border: 0;
	background: #fff;
	border-radius: var(--mg-r);
	box-shadow: var(--mg-shadow);
	overflow: hidden;
	transition: box-shadow .4s ease, translate .4s cubic-bezier(.2, .8, .2, 1);
}

.pzg-why__item:hover { translate: 0 -4px; box-shadow: var(--mg-shadow-up); }

.pzg-why__item > .pzg-dia,
.pzg-why__item:nth-child(even) > .pzg-dia,
.pzg-why__item > .pzg-dia--plate {
	order: 0;
	flex: 1 1 auto;
	border: 0;
	padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 6px;
	overflow: hidden;
}

/* the corner brackets belonged to the instrument language — retired here */
.pzg-why__item > .pzg-dia::before,
.pzg-why__item > .pzg-dia::after { display: none; }

.pzg-why__item > .pzg-why__body,
.pzg-why__item:nth-child(even) > .pzg-why__body {
	order: 1;
	padding: 0 clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 30px);
	transition: translate .3s cubic-bezier(.2, .8, .2, 1);
}

.pzg-why__item:hover > .pzg-why__body { translate: 0 -3px; }

.pzg-why__item > .pzg-why__body > * { max-width: none; }

.pzg-why__item .pzg-why__n {
	font-size: 15px;
	color: var(--acc-ink, #003d7a);
	gap: 10px;
	margin-bottom: 10px;
}

.pzg-why__item .pzg-why__n::after,
.pzg-why__item .pzg-why__n.is-in::after,
.pzg-why__item .pzg-why__n:not(.pzg-rv)::after { width: 22px; height: 2px; }

.pzg-why__item .pzg-why__body h2 {
	font-size: clamp(17px, 1.5vw, 23px);
	line-height: 1.2;
	margin: 0 0 8px;
}

.pzg-why__item .pzg-why__body p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--poz-text-2);
	margin: 0;
}

/* Magic UI's hover CTA, adapted: an arrow surfaces in the corner. */
.pzg-why__item::after {
	content: "→";
	position: absolute;
	right: clamp(18px, 2vw, 26px);
	bottom: clamp(16px, 1.8vw, 24px);
	font: 400 15px/1 var(--poz-font-display);
	color: var(--acc-ink, #003d7a);
	opacity: 0;
	translate: -8px 0;
	transition: opacity .3s ease, translate .3s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}

.pzg-why__item { position: relative; }
.pzg-why__item:hover::after { opacity: 1; translate: 0 0; }


/* ——— tiles, strip, compare and tables join the same language ——————— */

.pzb { gap: clamp(14px, 1.5vw, 20px); }

.pzb-t {
	border: 0;
	background: #fff;
	border-radius: var(--mg-r);
	box-shadow: var(--mg-shadow);
	backdrop-filter: none;
}

.pzb-t:hover { border: 0; box-shadow: var(--mg-shadow-up); }

.pzb-t--hero {
	background: var(--poz-ink);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow:
		var(--mg-shadow),
		inset 0 -20px 80px -20px rgba(255, 255, 255, .12);
}

.pzb-t--hero:hover {
	box-shadow:
		var(--mg-shadow-up),
		inset 0 -20px 80px -20px rgba(255, 255, 255, .16);
}

/* the compare keeps its dark ground, shaped as the one dark card */
.pzc {
	border-radius: var(--mg-r);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow:
		var(--mg-shadow),
		inset 0 -20px 80px -20px rgba(255, 255, 255, .1);
	padding: clamp(20px, 2.4vw, 40px);
	overflow: hidden;
}

.pzc__c--name.is-here { border-radius: 12px 12px 0 0; }
.pzc__c--cta.is-here { border-radius: 0 0 12px 12px; }

/* the sheet tables sit in white cards of their own */
.pzs-tbl {
	background: #fff;
	border-radius: var(--mg-r);
	box-shadow: var(--mg-shadow);
	padding: clamp(18px, 2.4vw, 40px);
	border-top: 0;
	margin-top: clamp(28px, 3.2vw, 52px);
}

.pzs-tbl table { min-width: 560px; }

/* the closing note and axes read quietly on the grey ground */
.pzg-grid__axes { color: var(--poz-text-3); }

@media (max-width: 760px) {
	.pzg-hero__grid { min-height: 0; padding: 20px; }
	.pzc { padding: 16px; }
	.pzs-tbl { padding: 14px; }
}

/* ============================================================================
   APPLE TECH SPECS — everything below "Specifikacije"
   ---------------------------------------------------------------------------
   Legibility is the design. Three moves:
     · the stat trio sits on AIR — no boxes; enormous Michroma figures with a
       small grey label, centred, the way Apple leads a Quick Look;
     · the full specification is one white card of GROUPS — category name on
       the left, label/value rows on the right, hairlines only where the eye
       needs a rail;
     · the family is a row of product cards, image first, load figure and an
       arrow. The one dark card on the page remains the compare.
   ========================================================================= */

/* section heads for these sections: centred, on air */
.pzg-spec .poz-sechead,
.pzg-range .poz-sechead {
	display: block;
	text-align: center;
	margin-bottom: clamp(10px, 1.2vw, 18px);
}

.pzg-spec .poz-sechead .poz-sechead__spine,
.pzg-range .poz-sechead .poz-sechead__spine { display: none; }

.pzg-spec .poz-sechead__eyebrow,
.pzg-range .poz-sechead__eyebrow {
	display: block;
	margin-bottom: 10px;
	font: 400 11px/1.4 var(--poz-font-display);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--poz-text-3);
}

.pzg-spec .poz-sechead__title,
.pzg-range .poz-sechead__title {
	font-size: clamp(28px, 3.2vw, 52px);
	letter-spacing: .01em;
}

/* ——— the stat trio, on air ————————————————————————————————————— */

.pzt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(20px, 3vw, 44px);
	justify-items: center;
	text-align: center;
	padding: clamp(26px, 3.4vw, 60px) 0 clamp(34px, 4.2vw, 72px);
}

.pzt-stat__v { margin: 0; }

.pzt-stat__v .pzg-num b {
	display: block;
	font: 400 clamp(46px, 5.6vw, 96px)/1 var(--poz-font-display);
	letter-spacing: -.01em;
	color: var(--poz-text);
}

.pzt-stat__v .pzg-num i {
	display: block;
	margin-top: 10px;
	font: 400 clamp(13px, 1.2vw, 17px)/1 var(--poz-font-display);
	font-style: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acc-ink, #003d7a);
}

.pzt-stat__k {
	margin: 14px 0 0;
	font: 400 12px/1.4 var(--poz-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}

/* ——— the grouped sheet ————————————————————————————————————————— */

.pzt-sheet {
	background: #fff;
	border-radius: var(--mg-r, 16px);
	box-shadow: var(--mg-shadow);
	padding: clamp(8px, 1vw, 16px) clamp(22px, 3vw, 56px);
}

.pzt-group {
	display: grid;
	grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 48px);
	padding: clamp(22px, 2.6vw, 40px) 0;
}

.pzt-group + .pzt-group { border-top: 1px solid var(--poz-line-soft, #E9ECEF); }

.pzt-group > h3 {
	margin: 4px 0 0;
	font: 400 clamp(14px, 1.2vw, 18px)/1.35 var(--poz-font-display);
	letter-spacing: .03em;
	color: var(--poz-text);
}

.pzt-group > dl { margin: 0; }

.pzt-row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
	gap: clamp(14px, 2vw, 36px);
	padding: 11px 0;
}

.pzt-row + .pzt-row { border-top: 1px solid #F1F2F4; }

.pzt-row > dt {
	font: 400 14px/1.5 var(--poz-font-body);
	color: var(--poz-text-2);
}

.pzt-row > dd {
	margin: 0;
	font: 400 15px/1.5 var(--poz-font-body);
	color: var(--poz-text);
}

.pzt-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pzt-pill {
	padding: 6px 13px;
	border-radius: 999px;
	background: #F4F4F6;
	font: 400 12px/1.3 var(--poz-font-body);
	color: var(--poz-text-2);
	white-space: nowrap;
}

/* ——— the lineup ————————————————————————————————————————————————— */

.pzt-lineup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(14px, 1.5vw, 20px);
	margin-top: clamp(22px, 2.6vw, 40px);
}

.pzt-line {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--mg-r, 16px);
	box-shadow: var(--mg-shadow);
	padding: clamp(18px, 2vw, 26px);
	text-decoration: none;
	transition: box-shadow .4s ease, translate .4s cubic-bezier(.2, .8, .2, 1);
}

.pzt-line:hover { translate: 0 -4px; box-shadow: var(--mg-shadow-up); }

.pzt-line__media {
	display: block;
	height: 150px;
	margin-bottom: 16px;
}

.pzt-line__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pzt-line__name {
	font: 400 clamp(18px, 1.6vw, 24px)/1.15 var(--poz-font-display);
	color: var(--poz-text);
}

.pzt-line__tag {
	margin-top: 6px;
	font: 400 13px/1.5 var(--poz-font-body);
	color: var(--poz-text-2);
	min-height: 2.9em;
}

.pzt-line__load { margin-top: 10px; }
.pzt-line__load .pzg-num b { display: inline; font: 400 19px/1 var(--poz-font-display); color: var(--poz-text); }
.pzt-line__load .pzg-num i { display: inline; margin-left: 6px; font: 400 11px/1 var(--poz-font-display); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--poz-text-3); }

.pzt-line__cta {
	margin-top: 16px;
	font: 400 12px/1 var(--poz-font-display);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--acc-ink, #003d7a);
}

/* the quiet close */
.pzg-note {
	max-width: 64ch;
	margin: clamp(26px, 3vw, 44px) auto 0;
	text-align: center;
	font-size: 12px;
	color: var(--poz-text-3);
}

.pzg-range__rest > h3 { text-align: center; }
.pzg-range__rest > p { text-align: center; margin-inline: auto; max-width: 56ch; }
.pzg-range__rest { border-top: 0; }

@media (max-width: 720px) {
	.pzt-group { grid-template-columns: 1fr; gap: 8px; }
	.pzt-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
	.pzt-row > dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
}

/* The chrome sechead is sticky with a white bar — right for a long table it
   rides above, wrong floating over a stat trio. Static and on air here. */
.pzg-spec .poz-sechead,
.pzg-range .poz-sechead {
	position: static;
	background: none;
	box-shadow: none;
	padding: 0;
}
.pzg-spec .poz-sechead__body,
.pzg-range .poz-sechead__body { display: block; margin: 0 auto; }
.pzg-spec .poz-sechead__title,
.pzg-range .poz-sechead__title { display: block; text-align: center; }


/* ============================================================================
   THE JOURNEY, AND THE LADDER — round eight
   ---------------------------------------------------------------------------
   The reasons stop being cards. Each one is a full-height chapter: the number
   and the sentence on one side, the photograph enormous on the other, and the
   feature shown by a LENS — a circular magnified crop of the same photograph
   floating at the exact point the old annotations pointed to. No drawings over
   photos, ever again.

   The comparison stops being a table. It becomes the chart it was always
   describing: every deck a column at its true height on the load scale.
   ========================================================================= */

/* ——— the chapters ————————————————————————————————————————————————— */

.pzg-why.pzj { padding-block: 0; }

.pzj-ch {
	min-height: 86vh;
	display: flex;
	align-items: center;
	padding-block: clamp(48px, 7vh, 96px);
}

.pzj-ch__in {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(36px, 5.5vw, 88px);
	align-items: center;
	width: 100%;
}

.pzj-ch--flip .pzj-copy  { order: 2; }
.pzj-ch--flip .pzj-stage { order: 1; }
.pzj-ch--flip .pzj-ch__in { grid-template-columns: 7fr 5fr; }

/* a chapter with nothing honest to show gives the sentence the room */
.pzj-ch--flat { min-height: 52vh; }
.pzj-ch--flat .pzj-ch__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.pzj-ch--flat .pzj-copy   { max-width: 760px; }
.pzj-ch--flat .pzj-n::after { display: none; }

/* the copy */
.pzj-n {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--poz-font-mono, monospace);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .24em;
	color: var(--acc, #0066cc);
}
.pzj-n::after {
	content: "";
	width: 64px;
	height: 1px;
	background: linear-gradient(90deg, var(--acc, #0066cc), transparent);
}
.pzj-copy h2 {
	margin: 20px 0 22px;
	font-family: var(--poz-font-display, sans-serif);
	font-size: clamp(26px, 3.2vw, 50px);
	line-height: 1.14;
	letter-spacing: .005em;
	color: #0b0c10;
}
.pzj-copy p {
	margin: 0;
	max-width: 50ch;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.68;
	color: #3b4048;
}
.pzj-ch--flat .pzj-copy p { margin-inline: auto; }

/* the stage */
.pzj-stage { position: relative; }
.pzj-img {
	display: block;
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	mix-blend-mode: multiply;
	will-change: transform;
}

/* the lens — same photograph, 260 % up, centred on the stored coordinates.
   background-position in % aligns the u% point of the image with the u% point
   of the circle, so the feature the annotation used to point at sits in the
   middle of the glass. */
.pzj-lens {
	position: absolute;
	left: calc(var(--u) * 100%);
	top:  calc(var(--v) * 100%);
	translate: -50% -50%;
	width: clamp(120px, 13vw, 184px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 260% auto;
	background-position: calc(var(--u) * 100%) calc(var(--v) * 100%);
	border: 4px solid #fff;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .06),
		0 10px 28px rgba(0, 0, 0, .18),
		0 32px 64px rgba(0, 0, 0, .12);
}
.pzj-lens::after {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 1px dashed rgba(0, 102, 204, .45);
}

/* a drawn stage keeps the drawing, loses the card chrome */
.pzj-stage .pzg-dia,
.pzj-stage .pzd-plate {
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

@media (max-width: 900px) {
	.pzj-ch { min-height: 0; }
	.pzj-ch__in,
	.pzj-ch--flip .pzj-ch__in { grid-template-columns: 1fr; gap: 28px; }
	.pzj-ch--flip .pzj-copy  { order: 1; }
	.pzj-ch--flip .pzj-stage { order: 2; }
	.pzj-img { max-height: 56vh; }
	.pzj-lens { width: clamp(96px, 26vw, 136px); }
}

/* ——— the specification sheet, narrowed and voiced ————————————————— */

.pzg-spec .pzt-stats { max-width: 1100px; margin-inline: auto; }
.pzg-spec .pzt-sheet { max-width: 1060px; margin-inline: auto; }

.pzt-group h3 {
	position: relative;
	padding-left: 18px;
}
.pzt-group h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 3px;
	height: 1.05em;
	border-radius: 2px;
	background: var(--acc, #0066cc);
}
.pzt-row dt {
	font-family: var(--poz-font-mono, monospace);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #71767f;
}
.pzt-row dd {
	font-size: 16px;
	font-weight: 500;
	color: #16181d;
}

/* ——— the ladder ——————————————————————————————————————————————————— */

/* the two-axis footnote belonged to the matrix; the chart speaks for itself */
.pzg-grid__axes { display: none; }

.pzl {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: end;
	gap: clamp(8px, 1.4vw, 24px);
	min-width: 660px;
	background: #fff;
	border-radius: var(--mg-r, 16px);
	box-shadow: var(--mg-shadow,
		0 0 0 1px rgba(0, 0, 0, .03),
		0 2px 4px rgba(0, 0, 0, .05),
		0 12px 24px rgba(0, 0, 0, .05));
	padding: clamp(28px, 4vw, 56px) clamp(18px, 2.6vw, 44px) clamp(22px, 3vw, 40px);
}

.pzl-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 12px;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
a.pzl-bar:hover { transform: translateY(-5px); }

.pzl-bar__v .pzg-num b {
	font-family: var(--poz-font-display, sans-serif);
	font-size: clamp(15px, 1.5vw, 22px);
	color: #0b0c10;
}
.pzl-bar__v .pzg-num i {
	font-family: var(--poz-font-mono, monospace);
	font-style: normal;
	font-size: 11px;
	color: #71767f;
}

.pzl-bar__col {
	width: 100%;
	height: clamp(170px, 28vh, 300px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.pzl-bar__col i {
	display: block;
	width: min(62px, 68%);
	height: var(--h);
	border-radius: 10px 10px 4px 4px;
	background: linear-gradient(180deg, #3d4350, #22252c);
	transform-origin: bottom;
	transition: background .35s ease;
}
a.pzl-bar:hover .pzl-bar__col i { background: linear-gradient(180deg, #4c5464, #2b2f38); }

.pzl-bar.is-here .pzl-bar__col i {
	background: linear-gradient(180deg, #2f8dff, var(--acc, #0066cc));
	box-shadow: 0 14px 34px rgba(0, 102, 204, .32);
}

.pzl-bar__name {
	font-family: var(--poz-font-mono, monospace);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
}
.pzl-bar.is-here .pzl-bar__name { color: var(--acc-ink, #003d7a); }

.pzl-bar__meta {
	font-family: var(--poz-font-mono, monospace);
	font-size: 11px;
	line-height: 1.45;
	text-align: center;
	color: #7b8089;
}

.pzl-bar__here {
	margin-top: 2px;
	font-family: var(--poz-font-mono, monospace);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--acc, #0066cc);
	padding: 6px 11px;
	border-radius: 999px;
}


/* ============================================================================
   THE ASSEMBLY, SCRUBBED — round nine
   ---------------------------------------------------------------------------
   Without script this is one quiet still of the assembled deck. Script adds
   .pzg-asm--live: the track grows to 340vh, the stage pins to the viewport,
   and the canvas draws whichever frame the scroll position asks for. Both the
   still and the canvas sit on multiply, so the film's white ground melts into
   the page the same way the hero does.
   ========================================================================= */

.pzg-asm__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 72vh;
	padding: clamp(24px, 4vh, 56px) 0;
}

.pzg-asm--live .pzg-asm__track { height: 340vh; }
.pzg-asm--live .pzg-asm__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 0;
	overflow: hidden;
}

.pzg-asm__frame {
	position: relative;
	width: min(1240px, 92vw);
	flex: 0 1 auto;
}
.pzg-asm__poster,
.pzg-asm__canvas {
	display: block;
	width: 100%;
	max-height: 76vh;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.pzg-asm__canvas {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
}
.pzg-asm--drawn .pzg-asm__canvas { opacity: 1; }
.pzg-asm--drawn .pzg-asm__poster { visibility: hidden; }

/* the caption sits above the stage and hands the room to the film as the
   scrub begins — script drives --cap from scroll progress */
.pzg-asm__cap {
	text-align: center;
	margin-bottom: clamp(16px, 3vh, 36px);
	opacity: var(--cap, 1);
}
.pzg-asm__k {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--poz-font-mono, monospace);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--acc, #0066cc);
}
.pzg-asm__k::before,
.pzg-asm__k::after {
	content: "";
	width: 44px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}
.pzg-asm__cap h2 {
	margin: 14px 0 0;
	font-family: var(--poz-font-display, sans-serif);
	font-size: clamp(24px, 2.8vw, 44px);
	line-height: 1.15;
	color: #0b0c10;
}

/* the progress hairline — script drives --p 0→1 */
.pzg-asm__bar {
	display: none;
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 4vh, 40px);
	translate: -50% 0;
	width: 220px;
	height: 2px;
	border-radius: 2px;
	background: rgba(11, 12, 16, .12);
	overflow: hidden;
}
.pzg-asm--live .pzg-asm__bar { display: block; }
.pzg-asm__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background: var(--acc, #0066cc);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}

@media (max-width: 900px) {
	.pzg-asm--live .pzg-asm__track { height: 260vh; }
	.pzg-asm__poster, .pzg-asm__canvas { max-height: 62vh; }
}


/* SCRUB FIT — position:sticky creates a stacking context, which ISOLATES the
   canvas's mix-blend-mode from the page behind it: multiply had nothing to
   multiply against and the film's white ground stayed white. The stage now
   carries the page ground itself. Also: clear the fixed header, and keep
   caption + film inside one viewport. */
.pzg-asm__stage { background: #F4F4F6; }
.pzg-asm--live .pzg-asm__stage { padding: 132px 0 44px; }
.pzg-asm__frame { width: min(1140px, 90vw); }
.pzg-asm__poster,
.pzg-asm__canvas { max-height: calc(100vh - 330px); }


/* SCRUB BALANCE — the caption overlays instead of reserving flow space, so
   the film centres in the full stage and the fade hands it the whole room. */
.pzg-asm--live .pzg-asm__cap { position: absolute; top: clamp(118px, 15vh, 168px); left: 0; right: 0; margin: 0; z-index: 2; }
.pzg-asm--live .pzg-asm__stage { padding: 100px 0 36px; }
.pzg-asm--live .pzg-asm__poster,
.pzg-asm--live .pzg-asm__canvas { max-height: calc(100vh - 250px); }


/* ============================================================================
   THE CINEMA — round ten
   ---------------------------------------------------------------------------
   Full-bleed. No card, no window, no heading band: the film takes the whole
   viewport and the model name stands over it like a title card. When script
   is absent everything renders stacked and complete — the assembled still,
   then the exploded wireframe with its callouts. When script runs, the stage
   pins and the scroll performs the three movements.
   ========================================================================= */

/* ——— static (no-JS) layout: stacked and complete ————————————————— */

.pzg-cine .pzg-asm__stage {
	position: relative;
	display: block;
	min-height: 0;
	padding: clamp(40px, 7vh, 90px) 0;
	background: #F4F4F6;
	overflow: visible;
}
.pzg-cine .pzg-cine__title { text-align: center; margin-bottom: clamp(20px, 4vh, 48px); }
.pzg-cine .pzg-asm__frame {
	position: relative;
	width: min(1520px, 96vw);
	margin: 0 auto;
}
.pzg-cine .pzg-asm__poster,
.pzg-cine .pzg-asm__canvas {
	display: block;
	width: 100%;
	max-height: 86vh;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.pzg-cine__xray {
	position: relative;
	width: min(1500px, 96vw);
	margin: clamp(24px, 5vh, 64px) auto 0;
}

/* ——— the title card ——————————————————————————————————————————————— */

.pzg-cine__title span {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--poz-font-mono, monospace);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--acc, #0066cc);
}
.pzg-cine__title span::before,
.pzg-cine__title span::after {
	content: "";
	width: 46px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}
.pzg-cine__title h2 {
	margin: 18px 0 0;
	font-family: var(--poz-font-display, sans-serif);
	font-size: clamp(56px, 9.5vw, 168px);
	line-height: .96;
	letter-spacing: .01em;
	color: #0b0c10;
}
.pzg-cine__title p {
	margin: 18px 0 0;
	font-size: clamp(15px, 1.3vw, 20px);
	color: #3b4048;
}

/* ——— the wireframe ———————————————————————————————————————————————— */

.pzx { display: block; width: 100%; height: auto; }
.pzx-solid line {
	stroke: #14161b;
	stroke-width: 1.7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
.pzx-dash line {
	stroke: #14161b;
	stroke-width: 1.1;
	stroke-dasharray: 6 5;
	vector-effect: non-scaling-stroke;
	opacity: .36;
}
.pzx-lead circle { fill: var(--acc, #0066cc); stroke: none; }
.pzx-lead polyline {
	stroke: var(--acc, #0066cc);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

.pzx-call {
	position: absolute;
	left: var(--x);
	top: var(--y);
	translate: -50% calc(-100% - 10px);
	text-align: left;
	white-space: nowrap;
}
.pzx-call b {
	display: block;
	font-family: var(--poz-font-display, sans-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 38px);
	line-height: 1;
	color: #0b0c10;
}
.pzx-call b .pzg-num i,
.pzx-call b i {
	font-style: normal;
	font-family: var(--poz-font-mono, monospace);
	font-size: clamp(11px, .9vw, 14px);
	color: var(--acc-ink, #003d7a);
	margin-left: 6px;
	letter-spacing: .04em;
}
.pzx-call > i {
	display: block;
	margin-top: 7px;
	font-style: normal;
	font-family: var(--poz-font-mono, monospace);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #71767f;
}

/* ——— live: the stage pins and the scroll performs ————————————————— */

.pzg-cine--live .pzg-asm__track { height: 560vh; }
.pzg-cine--xr.pzg-cine--live .pzg-asm__track { height: 900vh; }

.pzg-cine--live .pzg-asm__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 0;
	overflow: hidden;
}

/* the engineer's dot grid surfaces with the drawing — script drives --grid */
.pzg-cine--live .pzg-asm__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(11, 12, 16, .14) 1px, transparent 1.3px);
	background-size: 26px 26px;
	opacity: var(--grid, 0);
	pointer-events: none;
}

.pzg-cine--live .pzg-cine__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	margin: 0;
	z-index: 3;
	opacity: var(--tt, 1);
	pointer-events: none;
}

.pzg-cine--live .pzg-asm__frame {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
}
.pzg-cine--live .pzg-asm__poster,
.pzg-cine--live .pzg-asm__canvas {
	width: min(1560px, 97vw);
	max-height: 92vh;
}
.pzg-cine--live .pzg-asm__canvas { position: static; height: auto; }

.pzg-cine--live .pzg-cine__xray {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	margin: 0;
	width: min(1520px, 96vw);
	z-index: 2;
}

@media (max-width: 900px) {
	.pzg-cine--live .pzg-asm__track { height: 420vh; }
	.pzg-cine--xr.pzg-cine--live .pzg-asm__track { height: 640vh; }
	.pzg-cine__title h2 { font-size: clamp(44px, 13vw, 90px); }
	.pzx-call b { font-size: 20px; }
	.pzx-call > i { font-size: 10px; letter-spacing: .12em; }
}


/* CINE FIX — the hidden poster was still a flex sibling, shoving the canvas
   off-centre; once the canvas draws, the poster leaves the layout. And the
   load callout ducks the fixed header. */
.pzg-cine--live.pzg-asm--drawn .pzg-asm__poster { display: none; }


/* CINE COVER — the film owns the full viewport width; tall frames crop, wide
   frames letterbox vertically, nothing floats in a gutter. */
.pzg-cine--live .pzg-asm__poster,
.pzg-cine--live .pzg-asm__canvas { width: 100vw; max-width: none; max-height: 100vh; object-fit: cover; }
.pzg-cine--live .pzg-asm__poster { height: 100vh; }


/* XRAY MATERIALS — restrained fills carry what the parts are made of:
   black phenolic, birch laminate, anodised aluminium, rubber. Light from the
   upper left: tops lightest, fronts mid, ends darkest. */
.pzx-fill { stroke: none; }
.pzx-f-phen { fill:#23262c; opacity:.92 }
.pzx-f-ply  { fill:#d9cbaa; opacity:.6 }
.pzx-f-ply2 { fill:#c9b992; opacity:.6 }
.pzx-f-alu  { fill:#eceef1; opacity:.85 }
.pzx-f-alu2 { fill:#dcdfe4; opacity:.85 }
.pzx-f-alu3 { fill:#cdd1d8; opacity:.85 }
.pzx-f-rub  { fill:#2b2e34; opacity:.9 }
.pzx-f-rub2 { fill:#1e2126; opacity:.9 }
.pzx-f-slot { fill:#171a1f; opacity:.45 }
.pzx-f-bore { fill:none; stroke:#3a3f47; stroke-width:1; opacity:.7 }
.pzx-f-clamp{ fill:#f1f2f4; stroke:#3a3f47; stroke-width:1; opacity:.95 }
.pzx-fine line { stroke:#3a3f47; stroke-width:1; vector-effect:non-scaling-stroke; opacity:.6 }
.pzx-fine circle { fill:none; stroke:#3a3f47; stroke-width:1.2; opacity:.75 }


/* XRAY LEGS + FIT — solid anodised tubes, and the exploded view sized to sit
   whole below the fixed header, whatever the viewport. */
.pzx-f-lg1 { fill:#eef0f3; opacity:.97 }
.pzx-f-lg2 { fill:#dde0e5; opacity:.97 }
.pzx-f-lg3 { fill:#c8ccd3; opacity:.97 }
.pzx-f-clamp2 { fill:#b9bec6; stroke:#3a3f47; stroke-width:1; opacity:.97 }
.pzx-knob { fill:#2b2e34; stroke:none; }
.pzg-cine--live .pzg-cine__xray { top: calc(50% + 46px); width: min(1520px, 96vw, calc((100vh - 175px) * 1.6)); }


/* ============================================================================
   THE TURNTABLE — round thirteen
   ---------------------------------------------------------------------------
   Chapter panels: plain stacked cards without JS; cinematic side overlays
   when the engine drives them. The dynamic SVG replaces the static one only
   while the engine runs (.pzx-live).
   ========================================================================= */

.pzg-cine__xray .pzx-scene { display: none; }
.pzx-live .pzx-static { display: none; }
.pzx-dyn { display: block; width: 100%; height: auto; }

/* no-JS: the chapters read as cards under the diagram */
.pzc3-ch {
	max-width: 760px;
	margin: 26px auto 0;
	padding: 26px 30px;
	background: #fff;
	border-radius: var(--mg-r, 16px);
	box-shadow: var(--mg-shadow,
		0 0 0 1px rgba(0, 0, 0, .03),
		0 2px 4px rgba(0, 0, 0, .05),
		0 12px 24px rgba(0, 0, 0, .05));
}
.pzc3-n {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--poz-font-mono, monospace);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--acc, #0066cc);
}
.pzc3-n::after { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .5; }
.pzc3-ch h3 {
	margin: 12px 0 10px;
	font-family: var(--poz-font-display, sans-serif);
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1.2;
	color: #0b0c10;
}
.pzc3-ch p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #3b4048;
}
.pzc3-figs { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.pzc3-fig b {
	display: block;
	font-family: var(--poz-font-display, sans-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.2vw, 34px);
	line-height: 1;
	color: #0b0c10;
}
.pzc3-fig b .pzg-num i {
	font-style: normal;
	font-family: var(--poz-font-mono, monospace);
	font-size: 13px;
	color: var(--acc-ink, #003d7a);
	margin-left: 5px;
}
.pzc3-fig > i {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-family: var(--poz-font-mono, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #71767f;
}

/* live: panels become side overlays the camera journey drives */
.pzx-live .pzc3-chs { position: static; }
.pzx-live .pzc3-ch {
	position: absolute;
	left: 2%;
	top: 50%;
	translate: 0 -50%;
	width: min(400px, 82vw);
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}
.pzx-live .pzc3-ch--r { left: auto; right: 2%; }
.pzx-live .pzc3-ch h3 { font-size: clamp(24px, 2.4vw, 38px); }
.pzx-live .pzc3-ch p { font-size: clamp(14px, 1.15vw, 17px); max-width: 40ch; }

.pzg-cine--xr.pzg-cine--live .pzg-asm__track { height: 1250vh; }

@media (max-width: 900px) {
	.pzg-cine--xr.pzg-cine--live .pzg-asm__track { height: 900vh; }
	.pzx-live .pzc3-ch { width: min(320px, 86vw); top: auto; bottom: 6vh; translate: 0 0; }
}


/* TT FROST — chapter panels stay readable wherever the camera puts the deck */
.pzx-live .pzc3-ch {
	background: rgba(244, 244, 246, .82);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	padding: 24px 26px;
	border-radius: 14px;
	box-shadow: 0 0 0 1px rgba(11, 12, 16, .05), 0 18px 44px rgba(11, 12, 16, .07);
}


/* LIQUID GLASS — round fourteen. The chapter boxes become glass: deep blur
   with saturation lift, a gradient body, hairline specular edges top-left,
   and a soft streak across the face. Overrides TT FROST. */

.pzx-live .pzc3-ch {
	background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(243, 244, 247, .34));
	-webkit-backdrop-filter: blur(24px) saturate(1.65);
	backdrop-filter: blur(24px) saturate(1.65);
	border-radius: 24px;
	padding: 30px 32px;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 1px 0 0 rgba(255, 255, 255, .35),
		inset 0 -1px 0 rgba(255, 255, 255, .1),
		0 0 0 1px rgba(255, 255, 255, .3),
		0 28px 70px rgba(11, 12, 16, .12),
		0 8px 22px rgba(11, 12, 16, .06);
}
.pzx-live .pzc3-ch::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 30%),
		radial-gradient(120% 90% at 100% 100%, rgba(0, 102, 204, .05), transparent 60%);
	opacity: .6;
}
.pzx-live .pzc3-ch > * { position: relative; }


/* PHOTOREAL PASS — finer ink, softer x-ray, and the ground shadow that makes
   the exploded deck sit in space instead of floating on paper. */
.pzx-solid line { stroke-width: 1.35; }
.pzx-dash line { opacity: .28; }
.pzx-ground { opacity: 0; }


/* THE OVERTURE — full-bleed auto-played assembly that becomes the hero */
.pzg-ovt {
	position: fixed;
	inset: 0;
	z-index: 4000;
	background: #F4F4F6;
	display: grid;
	place-items: center;
}
.pzg-ovt canvas { display: block; mix-blend-mode: multiply; }
html.pzg-ovt-on { overflow: hidden; }


/* CINEMATOGRAPHY PASS — the grid breathes at the edges instead of wallpapering
   the frame, and chapter panels arrive with weight (rise + de-blur in JS). */
.pzg-cine--live .pzg-asm__stage::before {
	-webkit-mask-image: radial-gradient(120% 92% at 50% 46%, #000 38%, transparent 80%);
	mask-image: radial-gradient(120% 92% at 50% 46%, #000 38%, transparent 80%);
}

/* ============================================================================
   THE CEILING — WebGL (round eighteen)
   ---------------------------------------------------------------------------
   The three.js canvas fills the sticky stage beneath the x-ray overlay. The
   scrubber drives its opacity frame-by-frame; the SVG turntable hides the
   moment the module raises its hand (.pzx-3d).
   ========================================================================= */

.pzg-cine .pzg-asm__stage .pzg-3d {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
}
.pzg-cine--live .pzg-cine__xray { z-index: 2; }
.pzx-3d .pzx-dyn { display: none; }