/* ═══════════════════════════════════════════════════════════════════════════
   HORIZON — Products (page-products.css, loaded after horizon.css)

   Only what the products index adds: the product film, the numbered feature lists,
   and the StorkWealth journey's gate marks. Everything else is horizon.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.hz-pindex { padding-bottom: var(--s-5); }

/* The product film: 16:9, framed like a plate, poster until it is played. */
.hz-film { margin-bottom: var(--s-5); }
.hz-film__frame {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--radius); background: var(--ink);
	box-shadow: 0 30px 60px -40px rgb(40 30 10 / 0.45);
}
.hz-film__frame video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.hz-film .hz-cap { max-width: 80ch; }
.hz-film__len { font: 400 var(--t-0)/1 var(--f-mono); color: var(--ink-3); }

/* The section after a film starts its plate with a rule, not flush. */
.hz-film + .hz-plate { border-top: 1px solid var(--rule); padding-top: var(--s-5); }

/* Numbered features under a product: a quiet ruled grid. */
.hz-feats {
	list-style: none; padding: 0; margin-top: var(--s-4);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4);
	color: var(--ink-2); font-size: 0.9875rem;
}
.hz-feats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hz-feats li { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.hz-feats__no { display: block; font: 400 var(--t-0)/1 var(--f-mono); color: var(--ink-3); margin-bottom: 6px; }
.hz-feats__name { display: block; margin-bottom: 4px; font: 500 1.0625rem/1.3 var(--f-display); color: var(--ink); }
@media (max-width: 1000px) { .hz-feats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hz-feats { grid-template-columns: 1fr; } .hz-feats--four { grid-template-columns: 1fr; } }

/* The closing note is a header on its own. */
.hz-section .hz-section__head:only-child { margin-bottom: 0; }

/* StorkWealth journey: the advisor's gates. */
.fig-gate { fill: var(--bronze-soft); stroke: var(--bronze); stroke-width: 1.4; }

/* Plates on this page carry no title; the section heading names the product. */
.hz-pindex + .hz-section { border-top: 0; }

/* Links beside a button sit on its centre line, so their underline stays with the text. */
.hz-plate__links { align-items: center; }