/* Rise With Teagan — tick list
   ------------------------------------------------------------------
   The "List" component from Figma 1437-4420.

   The drawn rows sit on a 29px pitch. Figma gets there with 29px leading on
   16px text, but that only holds while every item is one line — a wrapped item
   would carry the same airy 29px between its own lines. So the pitch is built
   from the kit's own List Items leading (1.38em ≈ 22px) plus a 7px gap between
   items, which comes to the same 29px and wraps correctly.

   Text is Warm White, the kit global the design uses on this dark band. It is
   wrapped in --rwt-list-text so a placement on a light ground can override it
   without touching this file:  selector { --rwt-list-text: var( --e-global-color-text ); }
   The tick carries its own colour the same way.                               */

.rwt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rwt-list li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 7px;

	font-family: var( --e-global-typography-600d3c5-font-family, "DM Sans" ), sans-serif;
	font-size: var( --e-global-typography-600d3c5-font-size, 16px );
	font-weight: var( --e-global-typography-600d3c5-font-weight, 400 );
	line-height: var( --e-global-typography-600d3c5-line-height, 1.38em );
	color: var( --rwt-list-text, var( --e-global-color-secondary, #FFFBF8 ) );
}

.rwt-list li:last-child {
	margin-bottom: 0;
}

/* 2px nudge centres the 18px mark against the first 22px line box. */
.rwt-list__tick {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	fill: var( --rwt-list-tick, var( --e-global-color-ec00e88, #F0D5CF ) );
}

/* ------------------------------------------------------- what's included
   The price-card list from Figma 1437-4478. Same drawing as above, larger
   mark, and this one sits on the light card: Terracotta tick, Espresso text.

   Hairlines top and bottom are Sienna at 14%, which is how the design fences
   the list off from the price above it and the button below. */

.rwt-included {
	list-style: none;
	margin: 0;
	padding: 27px 0;
	border-top: 1px solid rgba( 161, 74, 58, 0.14 );
	border-bottom: 1px solid rgba( 161, 74, 58, 0.14 );
}

.rwt-included li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 13px;

	font-family: var( --e-global-typography-primary-font-family, "DM Sans" ), sans-serif;
	font-size: var( --e-global-typography-primary-font-size, 16px );
	font-weight: var( --e-global-typography-primary-font-weight, 400 );
	line-height: var( --e-global-typography-primary-line-height, 1.25em );
	color: var( --rwt-included-text, var( --e-global-color-text, #3D322B ) );
}

.rwt-included li:last-child {
	margin-bottom: 0;
}

/* The design pads the mark 2px down so it centres against the 20px line box. */
.rwt-included__tick {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	fill: var( --rwt-included-tick, var( --e-global-color-primary, #BC5F50 ) );
}