/**
 * Forfaits page ("Voir tous les forfaits et le fonctionnement des crédits").
 *
 * Same rule as home.css: every length is written in the numbers of the design
 * mock-ups (desktop mock 1435px wide, mobile mock 369px), and `--dh-u` is one
 * design pixel. The three numbered steps share the badge + title component;
 * the plan cards are the `dh-plans` block from home.css, stripped of its own
 * heading and of the button that points at this page.
 */

/* The page's own h1 is only there for screen readers and search engines: the
   design opens straight on step 1. Defined here so the page does not depend on
   core's copy of the class. */
.dh-forfaits-h1 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   1. Numbered step — the badge and the title the three steps share
   ========================================================================== */

.dh-step {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding-inline: calc(24 * var(--dh-u));
	color: var(--dh-navy);
	text-align: center;
}

.dh-step__badge {
	display: flex;
	width: calc(99.5 * var(--dh-u));
	height: calc(99.5 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	border: calc(5.5 * var(--dh-u)) solid var(--dh-orange);
	border-radius: 50%;
	font-family: Oswald, sans-serif;
	font-size: calc(49.5 * var(--dh-u));
	font-weight: 700;
	line-height: 1;
}

.dh-step__title {
	margin: calc(17.4 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(52 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.7 / 52);
	text-transform: uppercase;
}

/* only the last line of the title carries the orange rule */
.dh-step__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(2.9 * var(--dh-u));
	text-underline-offset: calc(9 * var(--dh-u));
}

/* ==========================================================================
   2. Step 1 — "Choisir le nombre d’utilisateurs"
   ========================================================================== */

.dh-step--users {
	padding-top: calc(66.8 * var(--dh-u));
	padding-bottom: calc(74.6 * var(--dh-u));
	background: #f1f0ee;
}

.dh-users__lead {
	margin: calc(49 * var(--dh-u)) 0 0;
	font-size: calc(22 * var(--dh-u));
	font-weight: 400;
	line-height: calc(25.4 / 22);
}

.dh-users__lead strong {
	font-weight: 600;
}

.dh-users__table {
	width: calc(539.8 * var(--dh-u));
	max-width: 100%;
	margin: calc(41.5 * var(--dh-u)) auto 0;
}

.dh-users__row {
	padding-top: calc(17 * var(--dh-u));
	border-top: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
}

.dh-users__row + .dh-users__row {
	margin-top: calc(16.1 * var(--dh-u));
}

.dh-users__label {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(19.3 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.dh-users__price {
	margin: calc(4.1 * var(--dh-u)) 0 0;
	color: var(--dh-orange);
	font-family: Oswald, sans-serif;
	font-size: calc(17.5 * var(--dh-u));
	font-weight: 400;
	line-height: 1;
}

.dh-users__price strong {
	font-weight: 700;
}

/* "Prix sur mesure" is set solid, and a shade smaller than the price above */
.dh-users__price--plain {
	margin-top: calc(5.7 * var(--dh-u));
	font-size: calc(17.4 * var(--dh-u));
	font-weight: 600;
	text-transform: uppercase;
}

.dh-users__note {
	margin: calc(19.9 * var(--dh-u)) 0 0;
	font-size: calc(17.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(21.7 / 17.9);
}

.dh-users__include {
	margin: calc(21.7 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(17.5 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.dh-users__list {
	margin: calc(4.3 * var(--dh-u)) 0 0;
	padding: 0;
	font-size: calc(17.9 * var(--dh-u));
	line-height: calc(22.1 / 17.9);
	list-style: none;
}

/* ==========================================================================
   3. Step 2 — "Choisir le niveau d’accompagnement"
   ========================================================================== */

.dh-step--level {
	padding-top: calc(100 * var(--dh-u));
	/* the comparison grid opens right under the rule, so the space between them
	   is the grid's own padding-top */
	padding-bottom: 0;
	background: #fff;
}

/* The plan cards come straight from the home page, whole: heading, cards and the
   navy band with the button under them. Two things differ here: the button's
   arrow scrolls down to the five steps rather than leading here, and it keeps
   the narrower shape of this page's own mock — the home page's band was
   redrawn later, with three notes above a wider, centred button. */
.dh-plans--page .dh-plans__more {
	display: flex;
	justify-content: center;
	padding: calc(38 * var(--dh-u)) calc(24 * var(--dh-u)) calc(78 * var(--dh-u));
}

.dh-plans--page .dh-plans__more-link {
	width: calc(383.4 * var(--dh-u));
	height: calc(59.9 * var(--dh-u));
	justify-content: space-between;
	margin: 0;
	padding: 0 calc(27.2 * var(--dh-u)) 0 calc(10 * var(--dh-u));
	text-align: left;
}

.dh-plans--page .dh-plans__more-label {
	font-size: calc(20 * var(--dh-u));
	line-height: calc(22.75 / 20);
}

/* ==========================================================================
   4. The comparison grid — what each forfait includes
   ========================================================================== */

.dh-compare-grid {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-rule: calc(1.1 * var(--dh-u));
	--dh-col: calc(200 * var(--dh-u));

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(27.7 * var(--dh-u)) calc(24 * var(--dh-u)) calc(90 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
}

.dh-grid {
	position: relative;
	width: calc(868 * var(--dh-u));
	max-width: 100%;
	margin: 0 auto;
}

/* the orange box around the featured column, and the label above it */
.dh-grid__frame {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: calc(-20 * var(--dh-u));
	left: calc(468 * var(--dh-u));
	width: var(--dh-col);
	border: calc(3.5 * var(--dh-u)) solid var(--dh-orange);
}

.dh-grid__flag {
	position: absolute;
	z-index: 2;
	top: calc(14 * var(--dh-u));
	left: calc(468 * var(--dh-u));
	width: var(--dh-col);
	margin: 0;
	color: var(--dh-orange);
	font-family: Oswald, sans-serif;
	font-size: calc(17.9 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* The navy rule runs the full width of the header at the height of the plates'
   folded tails. It is drawn under everything: the plates' white bodies cut it
   into the three visible stretches, and the orange frame breaks it twice more. */
.dh-grid__bar {
	position: absolute;
	top: calc(65.9 * var(--dh-u));
	right: 0;
	left: 0;
	height: calc(3.33 * var(--dh-u));
	background: var(--dh-navy);
}

.dh-grid__table {
	position: relative;
	z-index: 1;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.dh-grid__table {
	z-index: 3;
}

/* the row labels take the rest; the three forfaits share equal columns, and the
   orange frame and the navy rule above are placed off the same two numbers */
.dh-grid__col-label {
	width: calc(268 * var(--dh-u));
}

.dh-grid__table colgroup col:not(.dh-grid__col-label) {
	width: var(--dh-col);
}

.dh-grid__table th,
.dh-grid__table td {
	font-weight: 400;
	text-align: center;
	vertical-align: top;
}

/* --- Header: the name plates, the prices and the one-line promises ------- */

.dh-grid__table thead th,
.dh-grid__table thead td {
	padding-top: calc(45.4 * var(--dh-u));
	padding-bottom: calc(15.9 * var(--dh-u));
}

.dh-grid__corner {
	padding-top: calc(107.5 * var(--dh-u)) !important;
	font-family: Oswald, sans-serif;
	font-size: calc(17.4 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-align: left !important;
	text-transform: uppercase;
}

.dh-grid__plate {
	position: relative;
	display: flex;
	width: fit-content;
	min-width: calc(145.5 * var(--dh-u));
	height: calc(54.4 * var(--dh-u));
	align-items: center;
	justify-content: center;
	/* centred in the column, so the orange frame sits evenly around the middle
	   plate and every plate stands over its own column of values. The padding is
	   tight enough that even "Machine à contenu" stays inside its column. */
	margin: 0 auto;
	padding: 0 calc(12 * var(--dh-u)) calc(2 * var(--dh-u)) calc(12.2 * var(--dh-u));
	border: calc(4.44 * var(--dh-u)) solid var(--dh-navy);
	background: #fff;
	font-family: Oswald, sans-serif;
	font-size: calc(25 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* the folded tail the navy rule runs into — measured from the plate's outer
   edge, hence the border offsets */
.dh-grid__plate::before {
	content: "";
	position: absolute;
	top: calc(-4.44 * var(--dh-u));
	left: calc(-22.44 * var(--dh-u));
	width: calc(18 * var(--dh-u));
	height: calc(23.3 * var(--dh-u));
	background: var(--dh-navy);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.dh-grid__plate-small {
	font-size: 0.642em;
}

.dh-grid__price {
	display: block;
	margin-top: calc(8 * var(--dh-u));
	font-family: Oswald, sans-serif;
	font-size: calc(20.7 * var(--dh-u));
	font-weight: 700;
	line-height: 1;
}

.dh-grid__price span {
	font-size: calc(16.3 / 20.7 * 1em);
	font-weight: 400;
}

/* Wider than the 200px column, the way the mock has it: "Pour faire de votre
   contenu / un véritable canal marketing" needs ~237 design px to hold its two
   lines, so the promise leans into the gutters rather than breaking into three. */
.dh-grid__tag {
	display: block;
	width: calc(245 * var(--dh-u));
	margin: calc(4.6 * var(--dh-u)) calc(-22.5 * var(--dh-u)) 0;
	font-size: calc(16 * var(--dh-u));
	line-height: calc(17.7 / 16);
}

/* --- Body rows ----------------------------------------------------------- */

.dh-grid__table tbody th,
.dh-grid__table tbody td {
	padding-block: calc(15.2 * var(--dh-u));
	border-top: var(--dh-rule) solid var(--dh-navy);
	font-size: calc(16 * var(--dh-u));
	line-height: calc(19.9 / 16);
}

.dh-grid__table tbody tr:last-child th,
.dh-grid__table tbody tr:last-child td {
	border-bottom: var(--dh-rule) solid var(--dh-navy);
}

.dh-grid__table tbody th {
	font-size: calc(15.9 * var(--dh-u));
	text-align: left;
}

.dh-grid__table tbody th strong {
	font-weight: 600;
}

.dh-grid__check {
	display: block;
	width: calc(16.6 * var(--dh-u));
	height: calc(18.3 * var(--dh-u));
	margin: 0 auto;
	color: var(--dh-orange);
}

.dh-grid__check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dh-grid__none {
	display: block;
	width: calc(11.6 * var(--dh-u));
	height: calc(2.2 * var(--dh-u));
	margin: calc(8 * var(--dh-u)) auto;
	background: var(--dh-orange);
}

.dh-grid__strong {
	font-weight: 600;
}

/* ==========================================================================
   5. Step 3 — "Achat de crédits supplémentaires"
   ========================================================================== */

.dh-step--credits {
	padding-top: calc(72.9 * var(--dh-u));
	padding-bottom: calc(122.8 * var(--dh-u));
	background: #f1f0ee;
}

.dh-credits__lead {
	margin: calc(48.5 * var(--dh-u)) 0 0;
	font-size: calc(21.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(25.9 / 21.9);
}

.dh-credits__lead + .dh-credits__lead {
	margin-top: calc(25.4 * var(--dh-u));
}

.dh-credits__lead strong {
	font-weight: 600;
}

.dh-credits__rate {
	color: var(--dh-orange);
}

.dh-credits__table {
	width: calc(858.3 * var(--dh-u));
	max-width: 100%;
	margin: calc(76.5 * var(--dh-u)) auto 0;
	border-collapse: collapse;
	font-family: Oswald, sans-serif;
	table-layout: fixed;
	text-transform: uppercase;
}

.dh-credits__table col:nth-child(1) { width: calc(180 * var(--dh-u)); }
.dh-credits__table col:nth-child(2) { width: calc(195.3 * var(--dh-u)); }
.dh-credits__table col:nth-child(3) { width: calc(316.8 * var(--dh-u)); }
.dh-credits__table col:nth-child(4) { width: calc(166.2 * var(--dh-u)); }

.dh-credits__table thead th {
	padding: 0 0 calc(14.4 * var(--dh-u));
	border-bottom: calc(3.3 * var(--dh-u)) solid var(--dh-navy);
	font-size: calc(19.4 * var(--dh-u));
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

.dh-credits__table tbody th,
.dh-credits__table tbody td {
	padding-block: calc(14.6 * var(--dh-u));
	border-bottom: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
	font-size: calc(17.2 * var(--dh-u));
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

/* the purchase column is a label column: ranged left, like its rows */
.dh-credits__table thead th:first-child,
.dh-credits__table tbody th {
	text-align: left;
}

/* ==========================================================================
   6. Step 4 — "Comment fonctionnent les crédits?"
   ========================================================================== */

.dh-step--use {
	padding-top: calc(86.8 * var(--dh-u));
	padding-bottom: calc(119.9 * var(--dh-u));
	background: #fff;
}

.dh-use__lead {
	max-width: calc(520 * var(--dh-u));
	margin: calc(49.1 * var(--dh-u)) auto 0;
	font-size: calc(22 * var(--dh-u));
	font-weight: 400;
	line-height: calc(25.4 / 22);
}

/* --- "le montage vidéo" OU "du coaching individuel" ---------------------- */

/* Three cells: the two options either side of a hairline that carries the
   "ou". The outer cells are 1fr so the hairline lands on the page's centre
   line, and each option is pushed against it by its own padding. */
.dh-use__split {
	display: grid;
	margin-top: calc(25.1 * var(--dh-u));
	align-items: center;
	grid-template-columns: 1fr auto 1fr;
}

.dh-use__opt {
	margin: 0;
	font-size: calc(20 * var(--dh-u));
	font-weight: 400;
	/* a length, not a ratio: the bold lines are half again as big and must not
	   open the leading up */
	line-height: calc(25.9 * var(--dh-u));
	text-align: center;
}

.dh-use__opt strong {
	font-size: calc(25.9 * var(--dh-u));
	font-weight: 700;
	text-transform: uppercase;
}

.dh-use__opt--left {
	justify-self: end;
	padding-right: calc(57.8 * var(--dh-u));
}

.dh-use__opt--right {
	justify-self: start;
	padding-left: calc(43.1 * var(--dh-u));
}

.dh-use__or {
	position: relative;
	display: flex;
	height: calc(128.3 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: calc(21 * var(--dh-u));
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

/* the hairline, in two pieces so the word sits in the gap */
.dh-use__or::before,
.dh-use__or::after {
	content: "";
	position: absolute;
	left: 50%;
	width: calc(1.1 * var(--dh-u));
	height: calc(38.7 * var(--dh-u));
	margin-left: calc(-0.55 * var(--dh-u));
	background: var(--dh-navy);
}

.dh-use__or::before {
	top: 0;
}

.dh-use__or::after {
	bottom: 0;
}

/* --- What a credit buys, in three columns -------------------------------- */

.dh-use__grid {
	display: grid;
	width: calc(942.8 * var(--dh-u));
	max-width: 100%;
	margin: calc(55.4 * var(--dh-u)) auto 0;
	grid-template-columns: repeat(3, 1fr);
	text-align: left;
}

/* the rules between the columns start a touch above the first cap line */
.dh-use__col {
	padding-top: calc(5.3 * var(--dh-u));
	padding-right: calc(45.2 * var(--dh-u));
}

/* the two rules between the columns are not the same weight in the mock */
.dh-use__col:nth-child(2) {
	padding-right: calc(30 * var(--dh-u));
	padding-left: calc(18.9 * var(--dh-u));
	border-left: calc(5.55 * var(--dh-u)) solid var(--dh-navy);
}

.dh-use__col:nth-child(3) {
	padding-right: calc(25 * var(--dh-u));
	padding-left: calc(21.1 * var(--dh-u));
	border-left: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
}

/* Two lines' worth whatever the title runs to, and the same for the rate under
   it: the mock lines all three columns up on the paragraph that follows, not on
   the end of their own headings. */
.dh-use__col-title {
	min-height: calc(42.5 * var(--dh-u));
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: calc(23.9 / 22);
	text-transform: uppercase;
}

.dh-use__rate {
	min-height: calc(68.4 * var(--dh-u));
	margin: calc(12.8 * var(--dh-u)) 0 0;
	padding-top: calc(3.3 * var(--dh-u));
	font-size: calc(21.25 * var(--dh-u));
	font-weight: 400;
	line-height: calc(22.8 / 21.25);
}

.dh-use__note {
	margin: calc(17.8 * var(--dh-u)) 0 0;
	font-size: calc(15.45 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18 / 15.45);
}

.dh-use__rate + .dh-use__note {
	margin-top: calc(26.6 * var(--dh-u));
}

.dh-use__steps + .dh-use__note {
	margin-top: calc(19.7 * var(--dh-u));
}

.dh-use__note strong {
	font-weight: 600;
}

.dh-use__steps {
	margin: calc(18.2 * var(--dh-u)) 0 0;
	padding: 0;
	list-style: none;
}

.dh-use__steps li {
	padding: calc(18.1 * var(--dh-u)) 0 calc(15.9 * var(--dh-u));
	border-top: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
	font-size: calc(15.45 * var(--dh-u));
	line-height: calc(18 / 15.45);
}

.dh-use__steps li:last-child {
	border-bottom: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
}

.dh-use__steps strong {
	font-weight: 600;
}

/* ==========================================================================
   7. Step 5 — "Validité et report des crédits"
   ========================================================================== */

.dh-step--validity {
	padding-top: calc(88 * var(--dh-u));
	padding-bottom: calc(45.9 * var(--dh-u));
	background: #f1f0ee;
}

.dh-validity__lead {
	margin: calc(49.2 * var(--dh-u)) 0 0;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: calc(26 / 22);
}

.dh-validity__label {
	margin: calc(44.4 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

/* what the rule applies to — one line per rule, hairlines between */
.dh-validity__list {
	width: calc(860.8 * var(--dh-u));
	max-width: 100%;
	margin: calc(9.9 * var(--dh-u)) auto 0;
	padding: 0;
	list-style: none;
}

.dh-validity__list li {
	padding: calc(10.6 * var(--dh-u)) 0 calc(11.5 * var(--dh-u));
	border-top: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
	font-size: calc(22 * var(--dh-u));
	font-weight: 400;
	line-height: calc(26 / 22);
}

/* --- Report automatique / ordre d’utilisation ---------------------------- */

.dh-validity__grid {
	display: grid;
	width: calc(860.8 * var(--dh-u));
	max-width: 100%;
	margin: calc(45.3 * var(--dh-u)) auto 0;
	grid-template-columns: repeat(2, 1fr);
	text-align: left;
}

.dh-validity__col {
	/* the hairline starts a little above the cap line, so the text is inset
	   rather than the rule pulled up */
	padding-top: calc(9.7 * var(--dh-u));
	padding-right: calc(60 * var(--dh-u));
}

.dh-validity__col:nth-child(2) {
	padding-right: calc(40 * var(--dh-u));
	padding-left: calc(23.2 * var(--dh-u));
	border-left: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
}

.dh-validity__col-title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.dh-validity__col p {
	margin: calc(18 * var(--dh-u)) 0 0;
	font-size: calc(15.35 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18 / 15.35);
}

.dh-validity__col-title + p {
	margin-top: calc(19.5 * var(--dh-u));
}

.dh-validity__col strong {
	font-weight: 600;
}

/* ==========================================================================
   8. Forfaits page — mobile (mock pending: everything stacks, tables scroll)
   ========================================================================== */

@media (max-width: 900px) {
	.dh-step,
	.dh-compare-grid {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */
	}

	.dh-step__badge {
		width: calc(66 * var(--dh-u));
		height: calc(66 * var(--dh-u));
		border-width: calc(3.7 * var(--dh-u));
		font-size: calc(33 * var(--dh-u));
	}

	.dh-step__title {
		margin-top: calc(14 * var(--dh-u));
		font-size: calc(29 * var(--dh-u));
		line-height: calc(31 / 29);
	}

	.dh-step__title-rule {
		text-decoration-thickness: calc(2 * var(--dh-u));
		text-underline-offset: calc(6 * var(--dh-u));
	}

	.dh-step--users {
		padding-top: calc(48 * var(--dh-u));
		padding-bottom: calc(50 * var(--dh-u));
	}

	.dh-users__lead {
		margin-top: calc(30 * var(--dh-u));
		font-size: calc(15 * var(--dh-u));
		line-height: calc(19 / 15);
	}

	.dh-users__table {
		width: 100%;
		margin-top: calc(30 * var(--dh-u));
	}

	.dh-users__label {
		font-size: calc(15 * var(--dh-u));
		line-height: calc(18 / 15);
	}

	.dh-users__price,
	.dh-users__price--plain {
		font-size: calc(15 * var(--dh-u));
	}

	.dh-users__note,
	.dh-users__list {
		font-size: calc(14 * var(--dh-u));
		line-height: calc(18 / 14);
	}

	.dh-users__include {
		font-size: calc(15 * var(--dh-u));
	}

	.dh-step--level {
		padding-top: calc(54 * var(--dh-u));
		padding-bottom: calc(60 * var(--dh-u));
	}

	.dh-compare-grid {
		padding: calc(50 * var(--dh-u)) 0 calc(60 * var(--dh-u));
		/* the grid keeps its desktop proportions and scrolls sideways — a phone
		   mock will replace this with a per-forfait stack */
		overflow-x: auto;
	}

	.dh-grid {
		--dh-u: clamp(0.767px, 0.0697vw, 1.115px);

		width: calc(868 * var(--dh-u));
		min-width: calc(868 * var(--dh-u));
		max-width: none;
		margin-inline: calc(24 * var(--dh-u));
	}

	.dh-step--credits {
		padding-top: calc(50 * var(--dh-u));
		padding-bottom: calc(70 * var(--dh-u));
	}

	.dh-credits__lead {
		margin-top: calc(30 * var(--dh-u));
		font-size: calc(15 * var(--dh-u));
		line-height: calc(19 / 15);
	}

	.dh-credits__lead + .dh-credits__lead {
		margin-top: calc(18 * var(--dh-u));
	}

	.dh-credits__table {
		width: 100%;
		margin-top: calc(40 * var(--dh-u));
	}

	.dh-credits__table col:nth-child(1) { width: 26%; }
	.dh-credits__table col:nth-child(2) { width: 24%; }
	.dh-credits__table col:nth-child(3) { width: 30%; }
	.dh-credits__table col:nth-child(4) { width: 20%; }

	.dh-credits__table thead th {
		padding-bottom: calc(10 * var(--dh-u));
		border-bottom-width: calc(2.2 * var(--dh-u));
		font-size: calc(11.5 * var(--dh-u));
		line-height: calc(13 / 11.5);
	}

	.dh-credits__table tbody th,
	.dh-credits__table tbody td {
		padding-block: calc(11 * var(--dh-u));
		font-size: calc(13 * var(--dh-u));
	}

	/* Step 4 stacks: the two options sit one over the other with the rule laid
	   flat between them, and the three credit columns become three blocks. */
	.dh-step--use {
		padding-top: calc(50 * var(--dh-u));
		padding-bottom: calc(60 * var(--dh-u));
	}

	.dh-use__lead {
		max-width: calc(300 * var(--dh-u));
		margin-top: calc(30 * var(--dh-u));
		font-size: calc(15 * var(--dh-u));
		line-height: calc(19 / 15);
	}

	.dh-use__split {
		margin-top: calc(22 * var(--dh-u));
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.dh-use__opt {
		font-size: calc(14 * var(--dh-u));
		line-height: calc(19 * var(--dh-u));
	}

	.dh-use__opt strong {
		font-size: calc(19 * var(--dh-u));
	}

	.dh-use__opt--left,
	.dh-use__opt--right {
		justify-self: center;
		padding: 0;
	}

	.dh-use__or {
		width: calc(140 * var(--dh-u));
		height: calc(46 * var(--dh-u));
		font-size: calc(15 * var(--dh-u));
	}

	.dh-use__or::before,
	.dh-use__or::after {
		top: 50%;
		left: auto;
		width: calc(46 * var(--dh-u));
		height: calc(1.1 * var(--dh-u));
		margin: calc(-0.55 * var(--dh-u)) 0 0;
	}

	.dh-use__or::before {
		left: 0;
	}

	.dh-use__or::after {
		right: 0;
	}

	.dh-use__grid {
		width: 100%;
		margin-top: calc(36 * var(--dh-u));
		grid-template-columns: 1fr;
		row-gap: calc(34 * var(--dh-u));
	}

	.dh-use__col,
	.dh-use__col:nth-child(2),
	.dh-use__col:nth-child(3) {
		padding: calc(24 * var(--dh-u)) 0 0;
		border-left: 0;
		border-top: calc(2.4 * var(--dh-u)) solid var(--dh-navy);
	}

	.dh-use__col:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.dh-use__col-title {
		min-height: 0;
		font-size: calc(18 * var(--dh-u));
		line-height: calc(20 / 18);
	}

	.dh-use__rate {
		min-height: 0;
		margin-top: calc(14 * var(--dh-u));
		padding-top: 0;
		font-size: calc(17 * var(--dh-u));
		line-height: calc(19 / 17);
	}

	.dh-use__note,
	.dh-use__rate + .dh-use__note,
	.dh-use__steps + .dh-use__note {
		margin-top: calc(16 * var(--dh-u));
		font-size: calc(13.5 * var(--dh-u));
		line-height: calc(16.5 / 13.5);
	}

	.dh-use__steps {
		margin-top: calc(16 * var(--dh-u));
	}

	.dh-use__steps li {
		padding: calc(14 * var(--dh-u)) 0 calc(13 * var(--dh-u));
		font-size: calc(13.5 * var(--dh-u));
		line-height: calc(16.5 / 13.5);
	}

	/* Step 5: the rule list keeps its shape, the two notes stack. */
	.dh-step--validity {
		padding-top: calc(50 * var(--dh-u));
		padding-bottom: calc(50 * var(--dh-u));
	}

	.dh-validity__lead {
		margin-top: calc(30 * var(--dh-u));
		font-size: calc(15 * var(--dh-u));
		line-height: calc(19 / 15);
	}

	.dh-validity__label {
		margin-top: calc(30 * var(--dh-u));
		font-size: calc(16 * var(--dh-u));
	}

	.dh-validity__list {
		width: 100%;
		margin-top: calc(8 * var(--dh-u));
	}

	.dh-validity__list li {
		padding: calc(9 * var(--dh-u)) 0;
		font-size: calc(15 * var(--dh-u));
		line-height: calc(19 / 15);
	}

	.dh-validity__grid {
		width: 100%;
		margin-top: calc(34 * var(--dh-u));
		grid-template-columns: 1fr;
		row-gap: calc(28 * var(--dh-u));
	}

	.dh-validity__col,
	.dh-validity__col:nth-child(2) {
		padding: calc(22 * var(--dh-u)) 0 0;
		border-left: 0;
		border-top: calc(1.1 * var(--dh-u)) solid var(--dh-navy);
	}

	.dh-validity__col:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.dh-validity__col-title {
		font-size: calc(17 * var(--dh-u));
	}

	.dh-validity__col p,
	.dh-validity__col-title + p {
		margin-top: calc(14 * var(--dh-u));
		font-size: calc(13.5 * var(--dh-u));
		line-height: calc(16.5 / 13.5);
	}
}