.home-appointment {
	padding-block: var(--section-y-compact);
	background-color: var(--bg-alt);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.home-appointment__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* The section card follows the widget instead of the prose. A long heading or
 * lead must wrap to the booking control's width, not make the white surface
 * grow across the background. Below sm the phone layout still fills the
 * container because the calendar has its deliberate full-bleed exception. */
.home-appointment__content {
	inline-size: 100%;
	min-inline-size: 0;
	margin-inline-start: auto;
	padding-block: var(--s-8);
	padding-inline: 0;
	border: var(--s-1) solid var(--mega-media-border);
	border-radius: var(--r-md);
	background-color: var(--surface);
}

.home-appointment__heading,
.home-appointment__lead { padding-inline: var(--s-8); }

.home-appointment__heading,
.home-appointment__lead,
.home-appointment__widget,
.home-appointment [data-pinnacle-form-wrap="appointment"],
.home-appointment .appointment,
.home-appointment .appointment__panel,
.home-appointment .appointment__when,
.home-appointment .appointment__times,
.home-appointment .choice-chips,
.home-appointment .choice-chips__row,
.home-appointment .appointment__contact,
.home-appointment .field {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.home-appointment__lead {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.home-appointment__widget {
	inline-size: 100%;
}

/* THE FRAME OWNS ITS GRID, NOT A BLEED TRICK. A negative-inset pseudo-element
 * only reaches the frame edge once the browser has resolved the positioned
 * ancestor's box, so on first paint (and on any later reflow) the rule can
 * momentarily render at its un-bled, padding-inset width before snapping out
 * to the frame — the widget's structural borders must never depend on that.
 * Removing the widget's own horizontal padding here makes every full-width
 * border correct BY CONSTRUCTION instead: a row with no compensating inset
 * simply IS the frame width, on every paint, with nothing to resolve after
 * the fact. Rows that should look padded get that back explicitly below via
 * `margin-inline`, and macro dividers that must reach the frame (the choice
 * chips block, page 1's legend) get their own `padding-inline` instead so
 * their border stays full width while only their content is inset. */
.home-appointment .appointment {
	padding-inline: 0;
	border-color: var(--mega-media-border);
}

/* Every "normal" content row gets back the --s-5 gutter the frame gave up
 * above, as a margin so its own borders (if any) stay at the row's own
 * width. Anything NOT listed here is a deliberate full-width macro element
 * instead (the panel dividers, the choice-chips block, page 1's legend) and
 * must inset its own content with padding, never margin-inline. Page 2's
 * contact fields now live inside a full-width section wrapper; the wrapper
 * owns its hairlines while its field children receive this same gutter. */
.home-appointment .appointment-guide,
.home-appointment .appointment__when,
.home-appointment .appointment__panel[data-panel="2"] > .appointment__back,
.home-appointment .appointment__picked,
.home-appointment .appointment__panel[data-panel="2"] > .field,
.home-appointment .appointment__panel[data-panel="2"] > .appointment__contact,
.home-appointment .appointment__section--contact > .field,
.home-appointment .appointment__section--contact > .appointment__contact {
	margin-inline: var(--s-5);
}

/* Both page actions are content-width controls. Their structural rows may
 * remain full width for separators, while each .btn--block is inset by the
 * same standard gutter as the form content. */
.home-appointment .appointment__panel[data-panel="1"] > .appointment__continue,
.home-appointment .appointment__panel[data-panel="2"] > .appointment__action > [data-submit] {
	inline-size: calc(100% - ( var(--s-5) * 2 ));
	margin-inline: var(--s-5);
}

.home-appointment .appointment__panel[data-panel="2"] > .appointment__action {
	inline-size: 100%;
}

.home-appointment .appointment-guide {
	margin-block-end: 0;
}

/* Both pages keep the same section rhythm below the step indicator: an
 * --s-7 gap, a full-width rule, another --s-7 gap, then content. Page 2 is a
 * plain div, so its rule can live directly on the panel. Page 1 is a
 * <fieldset> — a border painted on the fieldset itself gets cut by the
 * native <legend>, which straddles its parent's border regardless of this
 * stylesheet, so page 1's rule instead lives on the legend (below). */
.home-appointment .appointment__panel {
	margin-block-start: var(--s-7);
}

.home-appointment .appointment__panel[data-panel="2"] {
	padding-block-start: var(--s-7);
	border-block-start: 1px solid var(--mega-media-border);
}

/* inline-size: 100% + its own padding-inline (not margin-inline) keeps this
 * border at the frame width while insetting the legend's TEXT to the same
 * --s-5 gutter every other row uses. A border on the LEGEND has no fieldset
 * to straddle, so it paints unbroken. */
.home-appointment .appointment__panel[data-panel="1"] > .appointment__legend {
	inline-size: 100%;
	padding-inline: var(--s-5);
	padding-block-start: var(--s-7);
	border-block-start: 1px solid var(--mega-media-border);
}

.home-appointment .appointment__panel[data-panel="2"] > .appointment__legend {
	display: none;
}

.home-appointment .appointment__panel[data-panel="1"] .appointment__continue {
	border-block-start: 0;
}

.home-appointment .appointment__panel[data-panel="2"] #hint-location {
	display: none;
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__picked {
	margin-block-end: var(--s-7);
}

/* The planning block is a macro section like the panel dividers above, not a
 * padded content row: its own padding-inline keeps its rules at the frame
 * width while insetting the hint text and chip row inside it by the same
 * --s-5 gutter. (A `> .choice-chips__row` margin-inline here would also
 * miss — the row is a grandchild of the panel, not a direct child.) The top
 * rule belongs to the full-width planning section wrapper, outside the padded
 * fieldset, so the structural hairline reaches both frame edges without any
 * bleed or compensating width. The bottom rule has no legend in its way and
 * sits directly on the fieldset. */
.home-appointment .appointment__panel[data-panel="2"] .choice-chips {
	padding-inline: var(--s-5);
	padding-block-end: var(--s-7);
	margin-block-end: var(--s-7);
	border-block-end: 1px solid var(--mega-media-border);
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__section--planning {
	padding-block-start: var(--s-7);
	border-block-start: 1px solid var(--mega-media-border);
}

.home-appointment .appointment__panel[data-panel="2"] .choice-chips__label {
	inline-size: 100%;
}

.home-appointment .appointment__panel[data-panel="2"] > .field + .appointment__contact {
	margin-block-start: calc(var(--s-7) - var(--s-3));
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__contact {
	padding-block-end: calc(var(--s-7) - var(--s-3));
	margin-block-end: var(--s-7);
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__contact::after {
	content: none;
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__action {
	padding-block-start: var(--s-7);
	border-block-start: 1px solid var(--mega-media-border);
}

.home-appointment .appointment__panel[data-panel="2"] .appointment__action [data-submit] {
	margin-block-start: 0;
	border-inline: 0;
	border-block-end: 0;
}

.home-appointment .appointment__when,
.home-appointment .calendar,
.home-appointment .calendar__bar,
.home-appointment .appointment__panel[data-panel="2"] .choice-chips,
.home-appointment .appointment__panel[data-panel="2"] .appointment__contact {
	border-color: var(--mega-media-border);
}

.home-appointment .appointment__picked,
.home-appointment .appointment__times .field__hint,
.home-appointment .field__hint {
	overflow-wrap: anywhere;
}

.home-appointment .appointment__back {
	max-inline-size: 100%;
	white-space: normal;
}

.home-appointment .choice-chip {
	min-inline-size: 0;
}

.home-appointment .choice-chip > span {
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	text-align: center;
}

@media (min-width: 480px) {
	.home-appointment__content {
		--appointment-w: calc(
			( var(--tap-min) * 7 ) + var(--s-1) + ( var(--s-4) * 2 ) + ( var(--s-5) * 2 )
		);
		inline-size: var(--appointment-w);
		max-inline-size: 100%;
	}

	.home-appointment .appointment {
		inline-size: var(--appointment-w);
		max-inline-size: 100%;
	}
}

@media (min-width: 768px) {
	.home-appointment__content {
		--appointment-w: calc(
			( var(--tap-min) * 7 ) + var(--s-1) + ( var(--s-4) * 2 ) + var(--s-1) +
			( var(--tap-min) * 3 ) + ( var(--s-4) * 2 ) +
			( var(--s-5) * 2 )
		);
		inline-size: calc(var(--appointment-w) + ( var(--s-8) * 2 ));
		max-inline-size: 100%;
		padding: var(--s-8);
	}

	.home-appointment__heading,
	.home-appointment__lead { padding-inline: 0; }

	.home-appointment .appointment__when {
		grid-template-columns: auto minmax(0, 1fr);
		inline-size: auto;
		max-inline-size: calc(100% - ( var(--s-5) * 2 ));
	}

	.home-appointment .appointment__times {
		min-inline-size: 0;
		max-inline-size: 100%;
	}

	.home-appointment .appointment__times .field__hint {
		max-inline-size: 100%;
	}

	.home-appointment .appointment__contact > *,
	.home-appointment .choice-chips__row > * {
		min-inline-size: 0;
	}
}