/*
 * Indo Seals base styles.
 * Every value comes from a theme.json token (--wp--preset--* / --wp--custom--*).
 * Short aliases below keep block CSS readable; they point at the tokens, never at raw values.
 */

/* Fallback face sized to Archivo so the text doesn't jump when the web font swaps in. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 104%;
	ascent-override: 87%;
	descent-override: 21%;
	line-gap-override: 0%;
}

:root {
	/* Colour aliases */
	--ink: var(--wp--preset--color--ink);
	--ink-2: var(--wp--preset--color--ink-2);
	--muted: var(--wp--preset--color--muted);
	--ground: var(--wp--preset--color--ground);
	--grid: var(--wp--preset--color--grid);
	--surface: var(--wp--preset--color--surface);
	--panel: var(--wp--preset--color--panel);
	--line: var(--wp--preset--color--line);
	--control: var(--wp--preset--color--control);
	--orange: var(--wp--preset--color--orange);
	--orange-hover: var(--wp--preset--color--orange-hover);
	--orange-text: var(--wp--preset--color--orange-text);
	--orange-tint: var(--wp--preset--color--orange-tint);
	--green: var(--wp--preset--color--green);
	--on-dark: var(--wp--preset--color--on-dark);
	--on-dark-muted: var(--wp--preset--color--on-dark-muted);
	--dark-line: var(--wp--preset--color--dark-line);
	--error: var(--wp--preset--color--error);

	/* Type */
	--font-sans: var(--wp--preset--font-family--archivo);
	--font-mono: var(--wp--preset--font-family--plex-mono);
	--fs-display: var(--wp--preset--font-size--display);
	--fs-h1: var(--wp--preset--font-size--heading-1);
	--fs-h2: var(--wp--preset--font-size--heading-2);
	--fs-h3: var(--wp--preset--font-size--heading-3);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-mono: var(--wp--preset--font-size--mono);
	--fs-mono-sm: var(--wp--preset--font-size--mono-small);
	--fs-spec: var(--wp--preset--font-size--spec);
	--tracking-mono: var(--wp--custom--tracking--mono);

	/* Spacing scale */
	--s4: var(--wp--preset--spacing--4);
	--s8: var(--wp--preset--spacing--8);
	--s12: var(--wp--preset--spacing--12);
	--s16: var(--wp--preset--spacing--16);
	--s24: var(--wp--preset--spacing--24);
	--s32: var(--wp--preset--spacing--32);
	--s48: var(--wp--preset--spacing--48);
	--s64: var(--wp--preset--spacing--64);
	--s96: var(--wp--preset--spacing--96);
	--s128: var(--wp--preset--spacing--128);

	/* Shape, shadow, motion */
	--r-control: var(--wp--custom--radius--control);
	--r-card: var(--wp--custom--radius--card);
	--r-panel: var(--wp--custom--radius--panel);
	--r-pill: var(--wp--custom--radius--pill);
	--shadow-sheet: var(--wp--preset--shadow--sheet);
	--t-fast: var(--wp--custom--motion--fast);
	--t-base: var(--wp--custom--motion--base);
	--t-draw: var(--wp--custom--motion--draw);
	--t-page: var(--wp--custom--motion--page);
	--ease: var(--wp--custom--motion--ease);

	/* Grid: 4 columns, 20 px margins on mobile */
	--isl-content: var(--wp--custom--grid--content);
	--isl-margin: var(--wp--custom--grid--margin-mobile);
	--isl-gutter: var(--wp--custom--grid--gutter-mobile);
	--isl-cols: 4;
	--isl-cell: var(--wp--custom--grid--cell-mobile);
	--isl-section: var(--s48);

	/* Fixed furniture */
	--isl-quickbar-h: var(--wp--custom--quick-bar--height);
	--isl-focus-w: var(--wp--custom--focus--width);
	--isl-focus-o: var(--wp--custom--focus--offset);

	/* What the sticky header leaves visible: the 64 px bar below 1280 px; from 1280 px the 84 px bar,
	   or the 64 px compact bar where scroll-driven animation runs. In-page bars stick below it. */
	--isl-stuck: var(--wp--custom--header--bar-mobile);

	scroll-padding-top: var(--s16);
	scroll-padding-bottom: calc(var(--isl-quickbar-h) + env(safe-area-inset-bottom, 0px) + var(--s16));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Tablet: 8 columns */
@media (min-width: 600px) {
	:root {
		--isl-margin: var(--wp--custom--grid--margin-tablet);
		--isl-gutter: var(--wp--custom--grid--gutter);
		--isl-cols: 8;
	}
}

/* Desktop: 12 columns, 1200 px content, 80 px margins */
@media (min-width: 1024px) {
	:root {
		--isl-margin: var(--wp--custom--grid--margin-desktop);
		--isl-cols: 12;
		--isl-cell: var(--wp--custom--grid--cell-desktop);
		--isl-section: var(--s96);
	}
}

/* The desktop header needs the full 1200 px row (trade-off 4). Between 1280 and 1359 the margin gives way first. */
@media (min-width: 1280px) and (max-width: 1359.98px) {
	:root {
		--isl-margin: var(--s32);
	}
}

/* Above the desktop header breakpoint the quick bar is gone, so the scroll padding drops with it. */
@media (min-width: 1280px) {
	:root {
		--isl-stuck: calc(var(--wp--custom--header--bar) + var(--wp--custom--border--hairline));

		scroll-padding-top: calc(var(--wp--custom--header--bar-compact) + var(--s16));
		scroll-padding-bottom: var(--s16);
	}

	@supports (animation-timeline: scroll()) {
		:root {
			--isl-stuck: calc(var(--wp--custom--header--bar-compact) + var(--wp--custom--border--hairline));
		}
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--ground);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: var(--isl-cell) var(--isl-cell);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
	font-stretch: var(--wp--custom--font-stretch--body);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

/* The quick bar is fixed; the page ends above it. */
@media (max-width: 1279.98px) {
	body {
		padding-bottom: calc(var(--isl-quickbar-h) + env(safe-area-inset-bottom, 0px));
	}
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

svg {
	flex-shrink: 0;
}

:where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 800;
	color: inherit;
}

:where(h1) {
	font-size: var(--fs-h1);
	line-height: var(--wp--custom--line-height--heading-1-mobile);
	font-stretch: var(--wp--custom--font-stretch--heading-1);
}

:where(h2) {
	font-size: var(--fs-h2);
	line-height: var(--wp--custom--line-height--heading-2-mobile);
	font-stretch: var(--wp--custom--font-stretch--heading-2);
}

:where(h3) {
	font-size: var(--fs-h3);
	line-height: var(--wp--custom--line-height--heading-3-mobile);
	font-weight: 700;
}

@media (min-width: 1024px) {
	:where(h1) { line-height: var(--wp--custom--line-height--heading-1); }
	:where(h2) { line-height: var(--wp--custom--line-height--heading-2); }
	:where(h3) { line-height: var(--wp--custom--line-height--heading-3); }
}

:where(p, ul, ol, dl, address, blockquote) {
	margin: 0;
}

/* Plain selector: core's common styles set :where(figure) { margin: 0 0 1em } after this file. */
figure {
	margin: 0;
}

:where(ul[class], ol[class]) {
	list-style: none;
	padding: 0;
}

a {
	color: var(--orange-text);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--t-fast) var(--ease);
}

a:hover {
	color: var(--ink);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* Focus: 3 px ink ring on light, orange on ink bands. */
:focus-visible {
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.is-dark :focus-visible,
.isl-band--ink :focus-visible {
	outline-color: var(--orange);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Layout helpers ---------- */

.isl-container {
	width: min(var(--isl-content), 100% - 2 * var(--isl-margin));
	margin-inline: auto;
}

.isl-band--ink {
	background: var(--ink);
	color: var(--on-dark);
}

.isl-band--panel {
	background: var(--panel);
}

.isl-visually-hidden:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* The hidden attribute wins over component display rules. */
[hidden] {
	display: none !important;
}

/* JS-only controls are hidden until the inline head script marks the page. */
html:not(.js) .isl-js-only {
	display: none !important;
}

/* ---------- Type helpers ---------- */

.isl-mono,
.isl-eyebrow {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono);
	line-height: var(--wp--custom--line-height--mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
}

.isl-eyebrow {
	color: var(--ink-2);
}

.isl-code {
	font-family: var(--font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.isl-tabular {
	font-variant-numeric: tabular-nums;
}

.isl-display {
	font-size: var(--fs-display);
	line-height: var(--wp--custom--line-height--display-mobile);
	font-weight: 800;
	font-stretch: var(--wp--custom--font-stretch--display);
	letter-spacing: var(--wp--custom--tracking--display);
}

@media (min-width: 1024px) {
	.isl-display { line-height: var(--wp--custom--line-height--display); }
}

.isl-lead {
	font-size: var(--fs-lead);
	line-height: var(--wp--custom--line-height--lead);
	color: var(--ink-2);
}

.isl-small {
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
}

/* ---------- Buttons: Primary, WhatsApp, Dark, Outline, Text ---------- */

.isl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--button);
	padding: 0 var(--s16);
	border: 0;
	border-radius: var(--r-control);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.isl-btn:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-btn svg {
	width: 24px;
	height: 24px;
}

.isl-btn--primary { background: var(--orange); color: var(--ink); }
.isl-btn--primary:hover { background: var(--orange-hover); color: var(--ink); }
.isl-btn--primary:active { background: var(--orange-hover); box-shadow: inset 0 0 0 2px var(--ink); }

.isl-btn--whatsapp { background: var(--green); color: var(--surface); }
.isl-btn--whatsapp:hover { color: var(--surface); }
.isl-btn--whatsapp:active { box-shadow: inset 0 0 0 2px var(--ink); }

.isl-btn--dark { background: var(--ink); color: var(--surface); }
.isl-btn--dark:hover { background: var(--ink-2); color: var(--surface); }
.isl-btn--dark:active { background: var(--ink-2); box-shadow: inset 0 0 0 2px var(--orange); }

.isl-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.isl-btn--outline:hover { background: var(--panel); color: var(--ink); }
.isl-btn--outline:active { background: var(--line); box-shadow: inset 0 0 0 2px var(--ink); }

.isl-btn--white { background: var(--surface); color: var(--ink); }
.isl-btn--white:hover { color: var(--ink); }

.isl-btn[disabled],
.isl-btn[aria-disabled="true"] {
	background: var(--panel);
	color: var(--muted);
	box-shadow: none;
	cursor: not-allowed;
	text-decoration: none;
}

/* Quote buttons in the page: dark wherever the quick bar shows (it owns the orange), orange where it doesn't (trade-off 1). */
.isl-btn--quote { background: var(--ink); color: var(--surface); }
.isl-btn--quote:hover { background: var(--ink-2); color: var(--surface); }
.isl-btn--quote:active { background: var(--ink-2); box-shadow: inset 0 0 0 2px var(--orange); }

@media (min-width: 1280px) {
	.isl-btn--quote { background: var(--orange); color: var(--ink); }
	.isl-btn--quote:hover { background: var(--orange-hover); color: var(--ink); }
	.isl-btn--quote:active { background: var(--orange-hover); box-shadow: inset 0 0 0 2px var(--ink); }
}

.isl-btn--block { display: flex; width: 100%; }
.isl-btn--compact { min-height: var(--wp--custom--touch--min); }

@media (max-width: 599.98px) {
	.isl-btn--primary-mobile { min-height: var(--wp--custom--touch--button-mobile-primary); }
}

.isl-link {
	color: var(--orange-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-link--ink {
	color: var(--ink);
}

.isl-link:hover {
	color: var(--ink);
}

.isl-link--arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s8);
}

.isl-link--arrow svg {
	width: 24px;
	height: 24px;
}

/* Desktop header breakpoint (1280): content that differs between the desktop popover and the phone sheet. */
@media (max-width: 1279.98px) {
	.isl-wide-only { display: none !important; }
}

@media (min-width: 1280px) {
	.isl-narrow-only { display: none !important; }
}

/* ---------- Icon button (48 × 48 target) ---------- */

.isl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--wp--custom--touch--min);
	height: var(--wp--custom--touch--min);
	padding: 0;
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--ink);
}

.isl-icon-btn:hover {
	background: var(--panel);
}

/* ---------- Chips ---------- */

.isl-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--min);
	padding: 0 var(--s16);
	border: 1px solid var(--control);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t-fast) var(--ease);
}

.isl-chip strong {
	font-weight: 700;
}

.isl-chip:hover strong,
.isl-chip:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.isl-chip[aria-expanded="true"],
.isl-chip.is-open {
	background: var(--orange-tint);
	box-shadow: inset 0 0 0 1px var(--ink);
	border-color: var(--ink);
}

/* ---------- Form fields: visible labels above, control border 3.9:1 ---------- */

.isl-field {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
}

.isl-label {
	font-size: var(--fs-body);
	line-height: 1.3;
	font-weight: 600;
}

.isl-label__opt {
	font-weight: 400;
	color: var(--ink-2);
}

.isl-input {
	width: 100%;
	min-height: var(--wp--custom--touch--button);
	padding: 0 var(--s16);
	border: 1px solid var(--control);
	border-radius: var(--r-control);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-body);
}

.isl-input:hover {
	border-color: var(--ink);
}

.isl-input:focus-visible,
.isl-input:focus {
	border-color: var(--ink);
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.isl-input[aria-invalid="true"] {
	border-color: var(--error);
	box-shadow: inset 0 0 0 1px var(--error);
}

.isl-phone {
	display: flex;
	min-height: var(--wp--custom--touch--button);
	border: 1px solid var(--control);
	border-radius: var(--r-control);
	background: var(--surface);
	overflow: hidden;
}

.isl-phone:focus-within {
	border-color: var(--ink);
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.isl-phone__cc {
	display: flex;
	align-items: center;
	padding: 0 var(--s12);
	background: var(--panel);
	border-right: 1px solid var(--line);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--spec);
}

.isl-phone__input,
.isl-phone__input:focus,
.isl-phone__input:focus-visible {
	flex: 1;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
}

.isl-phone:has([aria-invalid="true"]) {
	border-color: var(--error);
	box-shadow: inset 0 0 0 1px var(--error);
}

select.isl-phone__cc {
	min-width: 0;
	padding: 0 var(--s8);
	border: 0;
	border-right: 1px solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-size: var(--fs-spec);
	cursor: pointer;
}

select.isl-phone__cc:focus-visible {
	outline: none;
}

.isl-input--mono {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-spec);
}

.isl-textarea {
	display: block;
	min-height: var(--s128);
	padding: var(--s12) var(--s16);
	line-height: var(--wp--custom--line-height--body);
	resize: vertical;
}

.isl-hint {
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--ink-2);
}

.isl-hint a {
	color: var(--orange-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-hint a:hover {
	color: var(--ink);
}

/* Field error: icon and message above the hint, 14 px semibold in the error colour. */
.isl-error {
	display: flex;
	align-items: center;
	gap: var(--s8);
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	font-weight: 600;
	color: var(--error);
}

.isl-error svg {
	flex-shrink: 0;
}

/* Error summary: focused on load, links to each field. */
.isl-errsum {
	display: flex;
	align-items: flex-start;
	gap: var(--s12);
	padding: var(--s16);
	background: var(--surface);
	border: var(--wp--custom--border--selected) solid var(--error);
	border-radius: var(--r-card);
	color: var(--ink);
}

.isl-errsum:focus {
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.isl-errsum > svg {
	flex-shrink: 0;
	color: var(--error);
}

.isl-errsum__body {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
}

.isl-errsum h2 {
	font-size: var(--fs-h3);
	line-height: var(--wp--custom--line-height--heading-3-mobile);
	font-weight: 700;
	font-stretch: var(--wp--custom--font-stretch--body);
}

.isl-errsum ul {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	margin: 0;
	padding: 0 0 0 var(--s16);
}

.isl-errsum a {
	color: var(--error);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-errsum a:hover {
	color: var(--ink);
}

/* Note: a white card with an icon, for "saved" and similar reassurance. */
.isl-note {
	display: flex;
	align-items: flex-start;
	gap: var(--s12);
	padding: var(--s16);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
}

.isl-note > svg {
	flex-shrink: 0;
}

.isl-note__ok {
	color: var(--green);
}

.isl-note--lg {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
}

.isl-note--warn {
	border: var(--wp--custom--border--selected) solid var(--ink);
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
}

/* Checkbox with its label to the right. */
.isl-check {
	display: flex;
	align-items: flex-start;
	gap: var(--s12);
	line-height: var(--wp--custom--line-height--body);
	cursor: pointer;
}

.isl-check input {
	flex-shrink: 0;
	width: var(--s24);
	height: var(--s24);
	margin: 0;
	accent-color: var(--ink);
}

/* Text button: a 48 px target that reads as a link ("Back", "Skip and send"). */
.isl-text-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--touch--min);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.isl-text-btn:hover {
	color: var(--orange-text);
}

/* Choice chips: a radio or checkbox inside a pill label. Checked = ink 2 px edge on orange tint. */
.isl-picks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s8);
}

.isl-pick {
	display: inline-flex;
	align-items: center;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--min);
	padding: 0 var(--s16);
	border: 1px solid var(--control);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.isl-pick:hover {
	border-color: var(--ink);
}

.isl-pick input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--ink);
}

.isl-pick:has(:checked) {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
	background: var(--orange-tint);
}

.isl-pick:has(:focus-visible) {
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.isl-pick input:focus-visible {
	outline: none;
}

/* Choice cards: a radio in a 56 px card. Checked = ink 2 px edge on orange tint (an inset ring, so nothing moves). */
.isl-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s8);
}

.isl-choice {
	display: flex;
	align-items: center;
	gap: var(--s12);
	min-height: calc(var(--s48) + var(--s8));
	padding: 0 var(--s12);
	border: 1px solid var(--control);
	border-radius: var(--r-control);
	background: var(--surface);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.isl-choice:hover {
	border-color: var(--ink);
}

.isl-choice input {
	flex-shrink: 0;
	width: var(--s24);
	height: var(--s24);
	margin: 0;
	accent-color: var(--ink);
}

.isl-choice:has(:checked) {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
	background: var(--orange-tint);
}

.isl-choice:has(:focus-visible) {
	outline: var(--isl-focus-w) solid var(--ink);
	outline-offset: var(--isl-focus-o);
}

.isl-choice input:focus-visible {
	outline: none;
}

/* One card per row on phones ("What do you need?" in the quote flow), two from 1024. */
.isl-choices--list {
	grid-template-columns: minmax(0, 1fr);
}

.isl-choices--list .isl-choice {
	padding: 0 var(--s16);
}

@media (min-width: 1024px) {
	.isl-choices {
		gap: var(--s12);
	}

	.isl-choices--list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.isl-choices--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.isl-choice {
		padding: 0 var(--s16);
	}
}

/* Context chip: "You're asking about ISPL 24555 · Change". */
.isl-ctxchip {
	align-self: flex-start;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--min);
	padding: var(--s8) var(--s16);
	border-radius: var(--r-pill);
	background: var(--orange-tint);
	line-height: 1.3;
}

/* The words, the code and "Change" wrap as separate items, as the comps draw them. */
.isl-ctxchip > span {
	display: contents;
}

.isl-ctxchip strong {
	font-weight: 500;
}

.isl-ctxchip a {
	color: var(--orange-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 1024px) {
	.isl-ctxchip {
		gap: var(--s12);
		padding-block: 0;
	}
}

/* "Rather talk now?" side panel (quote panel, quote page): desktop only. */
.isl-talk {
	display: none;
}

@media (min-width: 1024px) {
	.isl-talk {
		grid-column: span 4;
		display: flex;
		flex-direction: column;
		gap: var(--s16);
		padding: var(--s24);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-panel);
	}

	.isl-talk h3 {
		line-height: var(--wp--custom--line-height--heading-3);
	}

	.isl-talk__list {
		display: flex;
		flex-direction: column;
		gap: var(--s12);
		padding-top: var(--s16);
		border-top: 1px solid var(--line);
		font-size: var(--fs-small);
		line-height: var(--wp--custom--line-height--small);
	}

	.isl-talk__list li {
		display: flex;
		gap: var(--s8);
	}

	.isl-talk__list svg {
		margin-top: var(--s4);
	}

	.isl-talk__list a {
		color: var(--orange-text);
	}
}

/* Honeypot: off-screen for people, still in the form for bots. */
.isl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.isl-divider {
	display: flex;
	align-items: center;
	gap: var(--s12);
	color: var(--ink-2);
}

.isl-divider::before,
.isl-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* ---------- Skip link ---------- */

.isl-skip {
	position: absolute;
	z-index: 100;
	left: var(--s16);
	top: calc(-1 * var(--s64));
	padding: var(--s12) var(--s16);
	background: var(--ink);
	color: var(--surface);
	font-weight: 700;
	text-decoration: none;
}

.isl-skip:focus {
	top: var(--s16);
	color: var(--surface);
}

/* ---------- Popovers and dialogs share the one shadow ---------- */

[popover] {
	color: inherit;
}

::backdrop {
	background: transparent;
}

/* ---------- Motion ---------- */

@view-transition {
	navigation: auto;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
	animation-duration: var(--wp--custom--motion--page);
	animation-timing-function: var(--wp--custom--motion--ease);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	*:not(.isl-site-header):not(.isl-site-header *) {
		animation-duration: 0s !important;
		animation-delay: 0s !important;
	}

	@view-transition {
		navigation: none;
	}
}

/* ---------- Site footer wrapper (the template part) ---------- */

.isl-site-footer {
	display: flex;
	flex-direction: column;
	gap: var(--s32);
	padding: var(--s48) 0 var(--s24);
}

@media (min-width: 1024px) {
	.isl-site-footer {
		gap: var(--s48);
		padding: var(--s64) 0 var(--s48);
	}
}

/* Shown only on paper; print.css takes over from here. */
.isl-print-only {
	display: none;
}

/* ---------- Copy the phone comps shorten (1024 px) ---------- */

.isl-w { display: none; }
.isl-w-block { display: none; }

@media (min-width: 1024px) {
	.isl-w { display: inline; }
	.isl-w-block { display: block; }
	.isl-n { display: none; }
}

/* ---------- Units: metric by default; the Imperial radio on product pages swaps every value ---------- */

.isl-u--i {
	display: none;
}

html:has(#isl-units-i:checked) .isl-u--m {
	display: none;
}

html:has(#isl-units-i:checked) .isl-u--i {
	display: inline;
}

/* ---------- Sections and section heads ---------- */

/* Pages built from section blocks (home, /anatomy/): each block owns its spacing, so no flow gap. */
:is(.wp-block-post-content, .wp-block-group).isl-sections > *,
.isl-product-page > *,
.isl-main--flush > * {
	margin-block: 0;
}


.isl-section {
	padding-top: var(--isl-section);
}

.isl-section--both,
.isl-section:has(+ .isl-stage, + .isl-cta) {
	padding-bottom: var(--isl-section);
}

.isl-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s24);
}

@media (min-width: 1024px) {
	.isl-section__inner {
		gap: var(--s48);
	}
}

.isl-head {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
}

.isl-head__titles {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
}

.isl-eyebrow--ref {
	display: flex;
	align-items: center;
	gap: var(--s8);
}

/* Eyebrows the phone comps leave out. */
@media (max-width: 1023.98px) {
	.isl-eyebrow--wide {
		display: none;
	}
}

.isl-ref {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--s24);
	height: var(--s24);
	border: 1px solid currentColor;
}

.isl-head__intro {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--ink-2);
}

.isl-head__link {
	display: none;
	min-height: var(--wp--custom--touch--min);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.isl-head__titles {
		gap: var(--s12);
	}

	.isl-eyebrow--ref {
		gap: var(--s12);
	}

	.isl-head--split {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--s24);
	}

	.isl-head--grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--s24);
		align-items: end;
	}

	.isl-head--grid .isl-head__titles { grid-column: span 7; }
	.isl-head--grid .isl-head__intro { grid-column: span 5; }

	.isl-head__link {
		display: inline-flex;
		align-items: center;
	}
}

/* ---------- Cards: the whole card is one link ---------- */

.isl-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	color: var(--ink);
	text-decoration: none;
	transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

a.isl-card:hover {
	color: var(--ink);
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

a.isl-card:hover :is(h3, .isl-card__title) {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-card__code {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono);
	line-height: var(--wp--custom--line-height--ui);
	letter-spacing: var(--tracking-mono);
	color: var(--ink-2);
}

.isl-card h3,
.isl-card__title {
	font-size: var(--fs-h3);
	line-height: var(--wp--custom--line-height--heading-3-mobile);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.isl-card h3,
	.isl-card__title {
		line-height: var(--wp--custom--line-height--heading-3);
	}
}

.isl-card__text {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--ink-2);
}

.isl-well {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panel);
	overflow: hidden;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono);
	color: var(--muted);
	text-align: center;
}

.isl-well img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isl-well picture {
	display: contents;
}

/* ---------- Proof row (icon + label, 14/600) ---------- */

.isl-proofrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s8) var(--s16);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	font-weight: 600;
}

.isl-proofrow li {
	display: flex;
	align-items: center;
	gap: var(--s8);
}

.isl-proofrow svg {
	width: 16px;
	height: 16px;
}

@media (min-width: 1024px) {
	.isl-proofrow { gap: var(--s8) var(--s24); }
}

/* ---------- Prose: text written in the editor (Section blocks, news items) ---------- */

/* The second selector outranks core's inline .wp-block-post-content { display: flow-root }. */
.isl-prose,
.wp-block-post-content.isl-prose {
	display: flex;
	flex-direction: column;
	gap: var(--s16);
	max-width: 68ch;
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
}

.isl-prose > * {
	margin-block: 0;
}

.isl-prose :is(ul, ol) {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
	margin: 0;
	padding-left: var(--s24);
	list-style: revert;
}

.isl-prose li::marker {
	color: var(--ink-2);
}

.isl-prose h3 {
	padding-top: var(--s8);
}

.isl-prose a {
	color: var(--orange-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-prose a:hover {
	color: var(--ink);
}

.isl-prose strong {
	font-weight: 700;
}

.isl-prose figure {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
	margin: 0;
}

.isl-prose img {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--panel);
}

.isl-prose figcaption {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--ink-2);
}

/* A visible [placeholder] paragraph in the editor's text reads as one. */
.isl-prose .is-style-eyebrow {
	color: var(--ink-2);
}

/* ---------- News item body (single-isl_news.html) ---------- */

.isl-article__body {
	display: flex;
	flex-direction: column;
	gap: var(--s32);
	padding-block: var(--s32) var(--isl-section);
}

.isl-article__body .wp-block-image img {
	max-width: min(100%, 640px);
	height: auto;
}

.isl-article__back {
	margin: 0;
}