/*
 * The three Workplace Care bands Kyle did not draw: three plan cards, the
 * comparison table under them, and the two choices on the sign-up form.
 *
 * He drew two plans and one toggle, then settled on three plans (6 and 7 Oct
 * 2026). Every band here is built from his own classes, so the type, the cards,
 * the rules and the buttons are his and come from shapes.css. This file only
 * holds what three of something needs that two did not. Same call as
 * gallery.css: his LANGUAGE, nothing new in the system.
 *
 * See inc/workplace-care-plans.php, and shapes/37174ecb1a86 (cards),
 * shapes/c11f82836b1d (table) and shapes/ffc3c1aa6c6a (form).
 */

/* ------------------------------------------------------------ the cards */

/*
 * Three columns where his grid is two, across the band's full width where his
 * stops at 980px, because three of his cards in 980px leaves each one 250px of
 * room for a 38px price. Only above his own narrow breakpoint: below it his
 * rule already stacks the grid into one column and this must not undo that.
 */
@media (min-width: 901px) {
	.d4x60122f8b.d4-care-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
	}
}

/*
 * Above 1440 every band of his is held to the middle 1440px by a rule of its
 * own in shapes-wide.css. That file is GENERATED, one rule for each band he
 * drew, so a hand authored band gets none and runs to the edges of the screen
 * (the trap gallery.css describes). These are those three rules, written the
 * way the generator writes them. Without them the cards are 576px wide each at
 * 1920 under a hero that starts 240px further in (Daniel, 7 Oct 2026).
 */
@media (min-width: 1441px) {
	.d4s-37174ecb1a86 > *,
	.d4s-c11f82836b1d > *,
	.d4s-ffc3c1aa6c6a > * {
		padding-left: calc((100% - 1440px) / 2 + 72px);
		padding-right: calc((100% - 1440px) / 2 + 72px);
	}
}

/*
 * Between his narrow breakpoint and a full desktop, three cards at his 40px
 * side padding leave about 150px for the words. His own tablet sheet pulls
 * gaps in the same way (shapes-tablet.css).
 */
@media (min-width: 901px) and (max-width: 1199px) {
	.d4-care-plans {
		gap: 16px;
	}

	.d4-care-plans .d4-care-plans__card {
		padding: 36px 24px;
	}
}

/*
 * The plan's name is an h3, so somebody on a screen reader can jump between
 * the three plans, where his two were plain divs. Inside a shape a heading
 * goes back to the browser's own margins (shapes.css, line 70), and that
 * margin is the only thing that differs from his div.
 */
.d4-shape .d4-care-plans__name {
	margin: 0;
}

/*
 * His flag is pinned 13px above the dark card's top edge, out of the flow,
 * which is right while it is one line. On a narrow card "15 MONTHS FREE WITH A
 * FIT OUT*" runs to two, and a flag pinned by its top then lands on the plan's
 * name.
 *
 * Side by side (a tablet), the three names and prices have to stay on one
 * line across the cards, so the flag stays out of the flow and is pinned by
 * its BOTTOM edge instead, at the height his sits at: a second line grows up
 * into the gap above the cards and moves nothing (Daniel, 7 Oct 2026). The
 * left edge is the card's own padding there.
 *
 * Stacked (a phone), there is nothing beside the card to line up with, so the
 * flag goes back into the flow: one line sits where his does, a second pushes
 * the name down, and the name gets 12px of air where his pinned flag left 4px.
 * The first number is the card's top padding plus his 13px.
 */
@media (min-width: 901px) and (max-width: 1199px) {
	.d4-care-plans .d4xf6d24507 {
		top: auto;
		bottom: calc(100% - 14px);
		left: 24px;
		max-width: calc(100% - 48px);
		box-sizing: border-box;
		text-wrap: balance;
	}
}

@media (max-width: 900px) {
	.d4-care-plans .d4xf6d24507 {
		position: static;
		display: block;
		width: fit-content;
		max-width: 100%;
		margin: -35px 0 12px;
	}
}

/*
 * The lines under the cards. His one line of small print was 640px wide under
 * two cards; these are three, under a row twice as wide, so they get more room
 * and sit closer to each other than to the cards.
 */
.d4x1e224f31.d4-care-plans__foot {
	max-width: 900px;
}

.d4x1e224f31.d4-care-plans__foot + .d4-care-plans__foot {
	margin-top: 10px;
}

/* A link inside any of the three bands: the words around it, underlined. */
.d4-shape a.d4-care-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.d4-shape a.d4-care-link:hover {
	text-decoration-thickness: 2px;
}

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

/*
 * Straight under the cards and about the same three plans, so it reads as the
 * second half of that band rather than a new one: his band padding below and
 * at the sides, none above.
 */
.d4-shape .d4-care-compare {
	padding-top: 0;
}

.d4-care-compare__table {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
	line-height: 1.5;
}

.d4-care-compare__table th,
.d4-care-compare__table td {
	padding: 14px 16px;
	border-top: 1px solid #C7C8C1;
	vertical-align: middle;
	text-align: center;
	/* The site loads 300, 700 and 800 of his face. 400 would draw as 300 anyway. */
	font-weight: 300;
}

.d4-care-compare__table thead th,
.d4-care-compare__table thead td {
	border-top: 0;
	font-size: 16px;
	font-weight: 700;
}

.d4-care-compare__table tbody tr:last-child th,
.d4-care-compare__table tbody tr:last-child td {
	border-bottom: 1px solid #C7C8C1;
}

.d4-care-compare__table tbody th {
	padding-left: 0;
	text-align: left;
	font-weight: 700;
}

/*
 * The first row sets the column widths in a fixed table. No padding on the
 * corner cell, because Chrome and Firefox add a cell's padding to a percentage
 * width and Safari does not, which put the three plans 32px further right in
 * those two (40% across the table against Safari's 37%).
 */
.d4-care-compare__table thead td {
	width: 37%;
	padding-left: 0;
	padding-right: 0;
}

.d4-care-compare__mark {
	display: inline-block;
	vertical-align: middle;
}

.d4-care-compare__yes {
	color: #B84836;
}

/*
 * Grey rather than his #C7C8C1, which is 1.6 to 1 on white. A cross is the
 * only thing saying "not on this plan" to somebody looking at it, so it has to
 * clear the 3 to 1 a drawing needs. This is 4.5 to 1.
 */
.d4-care-compare__no {
	color: #767676;
}

.d4-shape .d4-care-compare__notes {
	max-width: 1080px;
	margin: 32px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
	font-size: 13px;
	line-height: 1.6;
}

.d4-shape .d4-care-compare__notes li {
	margin: 0;
	padding: 0;
}

.d4-shape .d4-care-compare__notes li + li {
	margin-top: 8px;
}

/*
 * A phone has no room for four columns, and a table that scrolls sideways
 * hides two of the three plans. So each row becomes the feature on a line of
 * its own with the three answers under it, and every answer carries its
 * plan's name (the cell's data-label) because the header row is no longer
 * above it. The header itself is kept for a screen reader and only taken out
 * of sight.
 */
@media (max-width: 900px) {
	.d4-care-compare__table,
	.d4-care-compare__table tbody {
		display: block;
	}

	.d4-care-compare__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.d4-care-compare__table tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 10px;
		padding: 16px 0;
		border-top: 1px solid #C7C8C1;
	}

	.d4-care-compare__table tbody tr:last-child {
		border-bottom: 1px solid #C7C8C1;
	}

	.d4-care-compare__table tbody th,
	.d4-care-compare__table tbody td,
	.d4-care-compare__table tbody tr:last-child th,
	.d4-care-compare__table tbody tr:last-child td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		font-size: 13px;
	}

	/* The last row is named too, or the rule above wins there and it loses its gap. */
	.d4-care-compare__table tbody th,
	.d4-care-compare__table tbody tr:last-child th {
		grid-column: 1 / -1;
		padding-bottom: 12px;
		text-align: center;
		font-size: 14px;
	}

	.d4-care-compare__table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 6px;
		color: #B84836;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.d4-shape .d4-care-compare__notes {
		margin-top: 24px;
		font-size: 12px;
	}
}

/* ------------------------------------------- the two choices on the form */

/*
 * Which plan, then monthly or yearly. Real radio buttons, so the two choices
 * work from a keyboard and need no script of ours, dressed as the two toggle
 * buttons he drew for monthly and annual: the terracotta one is his chosen
 * state (.d4x99351ada) and the outlined one his other (.d4xf0b9083d). (The
 * form as a whole still needs scripts on to be SENT, like every form on the
 * site, because the bot check does.)
 *
 * Each sits across both columns of his form grid.
 */
.d4-care-pick {
	grid-column: 1 / -1;
	display: grid;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.d4-care-pick[hidden] {
	display: none;
}

.d4-care-pick--plan {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.d4-care-pick--term {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.d4-care-pick__legend {
	padding: 0 0 8px;
	color: #C7C8C1;
	font-size: 12px;
	line-height: 1.6;
}

/* A grid of one, so the face fills the option whatever height its row is. */
.d4-care-pick__option {
	position: relative;
	display: grid;
	cursor: pointer;
}

/*
 * Out of sight and still there: it takes the click, the focus and the arrow
 * keys, which display: none would throw away.
 */
.d4-care-pick__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.d4-care-pick__face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	padding: 14px 8px;
	border: 1px solid #3a3a3a;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.d4-care-pick__price {
	font-size: 12px;
	font-weight: 300;
	text-wrap: balance;
}

.d4-care-pick__option input:checked + .d4-care-pick__face {
	border-color: #B84836;
	background: #B84836;
}

/*
 * The second line is for Safari, which drops :focus-visible from a radio
 * button when an arrow key moves to the next one. main.js marks the form
 * while the arrow keys are in use and unmarks it at the next click or tap.
 */
.d4-care-pick__option input:focus-visible + .d4-care-pick__face,
[data-d4-care-keys] .d4-care-pick__option input:focus + .d4-care-pick__face {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/*
 * Windows high contrast mode throws away background colours, and the chosen
 * plan is a background colour over a radio button nobody can see. So there
 * the chosen one is drawn in the system's own "selected" colours.
 */
@media (forced-colors: active) {
	.d4-care-pick__option input:checked + .d4-care-pick__face {
		forced-color-adjust: none;
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}
}

@media (max-width: 900px) {
	.d4-care-pick--plan {
		grid-template-columns: minmax(0, 1fr);
	}

	.d4-care-pick__face {
		font-size: 13px;
	}
}

/* The second line on the thank you panel, under his one. */
.d4x48c18970.d4-care-sent__more {
	margin-top: 12px;
}