/**
 * Order form.
 *
 * The palette is the form's own, and deliberately borrows nothing from the
 * page. It used to read the host's --ink, --line and --bg by name, on the
 * theory that a form should inherit the site's design system. That is only
 * safe if it inherits the whole system: a dark theme sets --ink to a light
 * colour for its own dark surfaces, while these cards and inputs stayed white,
 * and the result was #eef3ff lettering on #ffffff — a contrast ratio of about
 * 1.05, which is to say an invisible form. Ink and surface have to come from
 * the same place. They now both come from here.
 *
 * The font is still inherited: a typeface carries no such pairing.
 */

.ipo {
	--ipo-ink: #0E1526;
	--ipo-mut: #5D687E;
	--ipo-line: #E4E8F1;
	--ipo-bg: #F6F8FC;
	--ipo-brand: #2C5CE6;
	--ipo-accent: #E1173F;
	--ipo-accent-2: #FF3D63;
	--ipo-navy: #070E24;
	--ipo-ok: #0B7A44;
	--ipo-surface: #FFFFFF;
	--ipo-radius: 16px;

	color: var(--ipo-ink);
	/* Inherit the page's typeface rather than name a token: reading --ff by
	   name found nothing on themes that do not define it, and dropped the form
	   to a system font while the rest of the site used its own. */
	font-family: inherit;
	line-height: 1.6;
	max-width: 1120px;
	margin-inline: auto;

	/* Now that the ink is the form's own dark, the form has to bring the ground
	   that ink was chosen for. Without this the headings and helper text sit
	   straight on the page, and on a dark theme that is the same invisibility
	   in the other direction. */
	background: var(--ipo-bg);
	padding: clamp(18px, 4vw, 34px);
	border-radius: var(--ipo-radius);

	/* The host page decides how wide this form gets, and every one of these
	   themes caps its content column well below 1120px. Sizing the layout off
	   the window therefore asked the wrong question: on a 1600px screen inside
	   an 860px wrapper the two-column layout stayed on, the sidebar took 320px,
	   and the plan grid was left with 400px — one card per row, 24 rows. The
	   breakpoints below are asked of this element instead. */
	container-type: inline-size;
	container-name: ipo;
}

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

.ipo [hidden] { display: none !important; }

/* Without JS both panels stay open and the step buttons are pointless. */
.ipo-form:not(.is-enhanced) [data-ipo="next"],
.ipo-form:not(.is-enhanced) [data-ipo="back"],
.ipo-form:not(.is-enhanced) .ipo-steps { display: none; }

/* ------------------------------------------------------------------ stepper */
.ipo-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.ipo-steps__item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ipo-mut);
	font-weight: 700;
	font-size: 0.95rem;
}

.ipo-steps__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	border: 2px solid var(--ipo-line);
	font-size: 0.85rem;
	font-weight: 800;
	flex: 0 0 auto;
}

.ipo-steps__item.is-current { color: var(--ipo-ink); }
.ipo-steps__item.is-current .ipo-steps__dot {
	background: var(--ipo-navy);
	border-color: var(--ipo-navy);
	color: #fff;
}

.ipo-steps__item.is-done .ipo-steps__dot {
	background: var(--ipo-ok);
	border-color: var(--ipo-ok);
	color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
}
.ipo-steps__item.is-done { color: var(--ipo-ok); }

.ipo-steps__line {
	flex: 0 1 120px;
	height: 2px;
	background: var(--ipo-line);
	border-radius: 2px;
	overflow: hidden;
}
.ipo-steps__line span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ipo-ok);
	transition: width 0.35s ease;
}
.ipo-steps.is-step2 .ipo-steps__line span { width: 100%; }

@media (max-width: 480px) {
	.ipo-steps__label { display: none; }
	.ipo-steps__line { flex-basis: 60px; }
}

/* ------------------------------------------------------------------ layout */
.ipo-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 26px;
	align-items: start;
}

@media (max-width: 900px) {
	.ipo-layout { grid-template-columns: minmax(0, 1fr); }
	/* On a phone the summary belongs above the form, not buried under it. */
	.ipo-side { order: -1; }
}

.ipo-main { min-width: 0; }

/* -------------------------------------------------------------------- side */
.ipo-side {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

@media (max-width: 900px) {
	.ipo-side { position: static; }
}

.ipo-summary,
.ipo-side__card {
	background: #fff;
	border: 1px solid var(--ipo-line);
	border-radius: var(--ipo-radius);
	padding: 20px;
}

.ipo-summary { border-color: #CFD8EA; box-shadow: 0 14px 34px -22px rgba(10, 20, 50, 0.5); }

.ipo-summary__eyebrow {
	margin: 0 0 12px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ipo-mut);
}

.ipo-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
}

.ipo-summary__row strong { display: block; font-size: 1.02rem; font-weight: 800; }
.ipo-summary__row small { display: block; color: var(--ipo-mut); font-size: 0.85rem; }

.ipo-summary__price { text-align: right; white-space: nowrap; }
.ipo-summary__price b {
	display: block;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ipo-navy);
	line-height: 1.1;
}
.ipo-summary__price small { color: var(--ipo-mut); font-size: 0.8rem; }

.ipo-summary__change {
	margin-top: 14px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ipo-brand);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ipo-methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ipo-method {
	display: grid;
	place-items: center;
	border: 1px solid var(--ipo-line);
	border-radius: 9px;
	padding: 4px 6px;
	background: #fff;
	line-height: 0;
}

.ipo-method svg,
.ipo-method img {
	display: block;
	width: 38px;
	height: 25px;
	object-fit: contain;
}

/* Visible to a screen reader, invisible on screen: the mark carries the
   meaning for sighted users, the text carries it for everyone else. */
.ipo-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ipo-side__note {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ipo-mut);
	line-height: 1.55;
}
.ipo-side__note strong { color: var(--ipo-ink); }

/* ------------------------------------------------------------------ panels */
.ipo-step {
	border: 1px solid var(--ipo-line);
	border-radius: var(--ipo-radius);
	background: #fff;
	padding: clamp(18px, 3vw, 28px);
	margin: 0 0 18px;
	min-width: 0;
}

.ipo-legend {
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 0;
	margin: 0;
}

.ipo-sub { margin: 6px 0 20px; color: var(--ipo-mut); font-size: 0.95rem; }

/* ------------------------------------------------------------------ notices */
.ipo-notice,
.ipo-alert {
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 18px;
	font-weight: 600;
	font-size: 0.96rem;
}

.ipo-notice--ok {
	background: rgba(11, 122, 68, 0.08);
	color: var(--ipo-ok);
	border: 1px solid rgba(11, 122, 68, 0.25);
}

.ipo-notice--error,
.ipo-alert {
	background: rgba(225, 23, 63, 0.07);
	color: #A50E2E;
	border: 1px solid rgba(225, 23, 63, 0.28);
}

/* -------------------------------------------------------------------- plans */
.ipo-plans {
	display: grid;
	/* 195px, not 210: the grid never gets the form's full width — the step
	   fieldset takes about 58px of padding first — so a 210px floor fell to two
	   columns on most host themes. At 195 the same containers fit three, and a
	   card still holds its name, price and small print without wrapping. */
	grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr));
	gap: 12px;
}

.ipo-plan { position: relative; min-width: 0; }

/* Equal-height payment tiles whatever the label length. */
.ipo-pay { display: flex; min-width: 0; }
.ipo-pay__label { flex: 1 1 auto; }

/* Clipped, not display:none, so the radio keeps its focus ring. */
.ipo-plan__input,
.ipo-pay__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.ipo-plan__label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 100%;
	border: 2px solid var(--ipo-line);
	border-radius: 14px;
	padding: 16px 40px 16px 16px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ipo-plan__label:hover { border-color: #C8D2E8; transform: translateY(-2px); }

.ipo-plan__input:checked + .ipo-plan__label {
	border-color: var(--ipo-accent);
	box-shadow: 0 12px 30px -18px rgba(225, 23, 63, 0.8);
}

.ipo-plan__input:focus-visible + .ipo-plan__label {
	outline: 3px solid #7FB0FF;
	outline-offset: 3px;
}

.ipo-plan__tag {
	align-self: flex-start;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ipo-accent);
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 4px;
}

/* Product images vary wildly in shape, so the card fixes the box and lets the
   image sit inside it rather than dictating the height of the row. */
.ipo-plan__image {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: contain;
	object-position: center;
	margin-bottom: 8px;
	border-radius: 10px;
	background: var(--ipo-bg);
}

.ipo-plan__name { font-weight: 800; font-size: 0.98rem; }

.ipo-plan__price {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ipo-navy);
	line-height: 1.15;
}
.ipo-plan__price small {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ipo-mut);
	letter-spacing: 0;
}

.ipo-plan__pm { font-size: 0.82rem; color: var(--ipo-ok); font-weight: 700; }
.ipo-plan__screens { font-size: 0.82rem; color: var(--ipo-mut); font-weight: 700; }
.ipo-plan__blurb { font-size: 0.86rem; color: var(--ipo-mut); margin-top: 4px; }

/* The summary lines are written by the script and are empty for a plan with no
   term or a single seat: an empty line must take no room. */
.ipo-summary__row small:empty { display: none; }

/* The tick that marks the chosen card. */
.ipo-plan__check {
	position: absolute;
	top: 16px;
	inset-inline-end: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--ipo-line);
	background: #fff;
}
.ipo-plan__input:checked + .ipo-plan__label .ipo-plan__check {
	border-color: var(--ipo-accent);
	background: var(--ipo-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------------------------- fields */
.ipo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 2px 18px;
}

.ipo-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
	min-width: 0;
}

.ipo-label { font-weight: 700; font-size: 0.9rem; }

.ipo-inputwrap { position: relative; display: block; min-width: 0; }

.ipo-inputicon {
	position: absolute;
	inset-inline-start: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ipo-mut);
	pointer-events: none;
	display: flex;
}

.ipo-inputwrap .ipo-input { padding-inline-start: 42px; }

.ipo-input {
	width: 100%;
	font: inherit;
	/* 16px keeps iOS from zooming the page on focus. */
	font-size: 16px;
	color: var(--ipo-ink);
	background: #fff;
	border: 1.5px solid var(--ipo-line);
	border-radius: 12px;
	padding: 13px 14px;
	min-height: 50px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ipo-input--select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D687E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px;
}

.ipo-input:hover { border-color: #C8D2E8; }

.ipo-input:focus {
	outline: none;
	border-color: var(--ipo-brand);
	box-shadow: 0 0 0 3px rgba(44, 92, 230, 0.18);
}

.ipo-input:focus-visible { outline: 3px solid #7FB0FF; outline-offset: 2px; }

.ipo-input[aria-invalid="true"] {
	border-color: var(--ipo-accent);
	box-shadow: 0 0 0 3px rgba(225, 23, 63, 0.14);
}

textarea.ipo-input { min-height: 92px; resize: vertical; padding-inline-start: 14px; }

.ipo-hint { font-size: 0.82rem; color: var(--ipo-mut); }
.ipo-err { font-size: 0.84rem; font-weight: 700; color: #A50E2E; }

/* The dial code is derived from the country picker, so it is shown, not typed. */
.ipo-phonewrap { display: flex; gap: 8px; align-items: stretch; min-width: 0; }

.ipo-dial {
	display: grid;
	place-items: center;
	padding: 0 14px;
	min-width: 68px;
	border: 1.5px solid var(--ipo-line);
	border-radius: 12px;
	background: var(--ipo-bg);
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--ipo-ink);
	white-space: nowrap;
}

.ipo-inputwrap--phone { flex: 1 1 auto; }

/* ----------------------------------------------------------------- payments */
.ipo-pays { border: 0; padding: 0; margin: 4px 0 16px; }

.ipo-pays__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
	gap: 10px;
	margin-top: 10px;
}

.ipo-pay__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1.5px solid var(--ipo-line);
	border-radius: 12px;
	padding: 12px 36px 12px 12px;
	font-weight: 700;
	font-size: 0.9rem;
	/* "Cryptocurrency" must not break as "Crypto-urrency". */
	hyphens: none;
	overflow-wrap: break-word;
	cursor: pointer;
	background: #fff;
	min-height: 58px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ipo-pay__mark { display: flex; flex: 0 0 auto; line-height: 0; }
.ipo-pay__mark svg,
.ipo-pay__mark img { display: block; width: 40px; height: 26px; object-fit: contain; }
.ipo-pay__text { min-width: 0; }

.ipo-pay__tick {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2px solid var(--ipo-line);
	background: #fff;
}

.ipo-pay__input:checked + .ipo-pay__label .ipo-pay__tick {
	border-color: var(--ipo-brand);
	background: var(--ipo-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.ipo-pay__input:checked + .ipo-pay__label {
	border-color: var(--ipo-brand);
	background: rgba(44, 92, 230, 0.06);
}

.ipo-pay__input:focus-visible + .ipo-pay__label { outline: 3px solid #7FB0FF; outline-offset: 3px; }

/* --------------------------------------------------------------- disclosure */
.ipo-disclose {
	border: 1px dashed var(--ipo-line);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 16px;
}

.ipo-disclose > summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--ipo-brand);
}

.ipo-disclose > summary:focus-visible { outline: 3px solid #7FB0FF; outline-offset: 3px; }
.ipo-disclose[open] > summary { margin-bottom: 12px; }

/* ------------------------------------------------------------------ opt-in */
.ipo-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: var(--ipo-mut);
}

.ipo-check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--ipo-brand);
}

/* ----------------------------------------------------------------- buttons */
.ipo-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ipo-actions--submit { margin-top: 8px; }

.ipo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font: inherit;
	font-weight: 800;
	font-size: 1rem;
	border: 0;
	border-radius: 999px;
	padding: 15px 28px;
	min-height: 52px;
	cursor: pointer;
	background: linear-gradient(135deg, var(--ipo-accent-2), var(--ipo-accent));
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 12px 30px -12px rgba(225, 23, 63, 0.6);
}

.ipo-btn--submit { flex: 1 1 260px; font-size: 1.05rem; }
.ipo-btn__price { font-weight: 800; }

.ipo-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ipo-btn:focus-visible { outline: 3px solid #7FB0FF; outline-offset: 3px; }
.ipo-btn:disabled { opacity: 0.65; cursor: progress; transform: none; }

.ipo-btn--ghost {
	background: #fff;
	color: var(--ipo-ink);
	border: 1.5px solid var(--ipo-line);
	box-shadow: none;
	flex: 0 0 auto;
}
.ipo-btn--ghost:hover:not(:disabled) { border-color: var(--ipo-brand); color: var(--ipo-brand); }

.ipo-micro { margin: 12px 0 0; text-align: center; font-size: 0.86rem; color: var(--ipo-mut); }
.ipo-consent { font-size: 0.8rem; color: var(--ipo-mut); margin: 14px 0 0; }
.ipo-consent a { color: var(--ipo-brand); text-decoration: underline; }

/* ---------------------------------------------------------------- honeypot */
.ipo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------- trust */
.ipo-trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 22px 0 0;
	padding: 0;
	color: var(--ipo-mut);
	font-size: 0.88rem;
	font-weight: 700;
}

.ipo-trust li { display: flex; align-items: center; gap: 8px; }
.ipo-trust svg { color: var(--ipo-ok); flex: 0 0 auto; }

/* ------------------------------------------------------------ confirmation */
.ipo-done {
	border: 2px solid var(--ipo-ok);
	background: rgba(11, 122, 68, 0.05);
	border-radius: var(--ipo-radius);
	padding: clamp(20px, 3vw, 32px);
	text-align: center;
}

.ipo-done:focus { outline: 3px solid #7FB0FF; outline-offset: 3px; }

.ipo-done__mark {
	display: block;
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--ipo-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 26px no-repeat;
}

.ipo-done__title { margin: 0 0 16px; font-size: 1.35rem; font-weight: 800; color: var(--ipo-ok); }

.ipo-done__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 18px;
	margin: 0 auto 16px;
	max-width: 420px;
	text-align: start;
}

.ipo-done__list dt { font-weight: 700; color: var(--ipo-mut); font-size: 0.9rem; }
.ipo-done__list dd { margin: 0; font-weight: 700; }
.ipo-done__next { margin: 0; color: var(--ipo-ink); }

/* The hand-over to chat. The button is not decoration: it is what the customer
   clicks when the automatic redirect is blocked, which on an in-app browser is
   often enough to matter. */
.ipo-done__wait {
	margin: 18px 0 0;
	font-weight: 600;
	color: var(--ipo-ink);
}

.ipo-done__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 12px 22px;
	border-radius: 10px;
	/* White on the lighter WhatsApp green measured 3.49:1, under AA for a
	   16.6px label. This shade of the same hue measures 4.98:1. */
	background: #158048;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.ipo-done__wa:hover,
.ipo-done__wa:focus-visible { background: #10673a; color: #fff; }

.ipo-done__wa svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.ipo * { transition: none !important; }
	.ipo-btn:hover:not(:disabled),
	.ipo-plan__label:hover { transform: none; }
}

/* ------------------------------------------------- container breakpoints
 * Same rules, asked of the form's own width. Kept after the media queries
 * above so a browser without container queries keeps today's behaviour and
 * one with them gets the right answer.
 */
@container ipo (max-width: 900px) {
	.ipo-layout { grid-template-columns: minmax(0, 1fr); }
	.ipo-side { order: -1; position: static; }
}

@container ipo (max-width: 480px) {
	.ipo-steps__label { display: none; }
	.ipo-steps__line { flex-basis: 60px; }
}

/* ------------------------------------------------------- containment
 * Generated by build-containment.py — do not hand-edit.
 *
 * Every rule below restates a declaration that already appears above,
 * behind a doubled `.ipo` class. That is one point of specificity more
 * than a theme's `.prose p` / `.prose a` / `.prose img`, and none more
 * than needed, so the form keeps its own typography, colour and spacing
 * inside any host page without a single !important.
 *
 * The reset comes first and the component rules after it: they share a
 * specificity, so source order decides, and the components must win.
 */

.ipo.ipo :where(p, a, label, li, ul, ol, small, span, strong, em, b, i, dt, dd, td, th, legend, figure, img, svg, summary, details, h1, h2, h3, h4, h5, h6) {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.ipo.ipo :where(ul, ol) { list-style: none; }

.ipo.ipo .ipo-steps {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.ipo.ipo .ipo-steps__item {
	color: var(--ipo-mut);
	font-weight: 700;
	font-size: 0.95rem;
}

.ipo.ipo .ipo-steps__dot {
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 800;
}

.ipo.ipo .ipo-steps__item.is-current {
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-steps__item.is-current .ipo-steps__dot {
	color: #fff;
}

.ipo.ipo .ipo-steps__item.is-done .ipo-steps__dot {
	color: transparent;
}

.ipo.ipo .ipo-steps__item.is-done {
	color: var(--ipo-ok);
}

.ipo.ipo .ipo-steps__line {
	border-radius: 2px;
}

.ipo.ipo .ipo-summary, .ipo.ipo .ipo-side__card {
	border-radius: var(--ipo-radius);
	padding: 20px;
}

.ipo.ipo .ipo-summary__eyebrow {
	margin: 0 0 12px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ipo-mut);
}

.ipo.ipo .ipo-summary__row strong {
	font-size: 1.02rem;
	font-weight: 800;
}

.ipo.ipo .ipo-summary__row small {
	color: var(--ipo-mut);
	font-size: 0.85rem;
}

.ipo.ipo .ipo-summary__price {
	text-align: right;
}

.ipo.ipo .ipo-summary__price b {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ipo-navy);
	line-height: 1.1;
}

.ipo.ipo .ipo-summary__price small {
	color: var(--ipo-mut);
	font-size: 0.8rem;
}

.ipo.ipo .ipo-summary__change {
	margin-top: 14px;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ipo-brand);
	text-decoration: underline;
}

.ipo.ipo .ipo-methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.ipo.ipo .ipo-method {
	border-radius: 9px;
	padding: 4px 6px;
	line-height: 0;
}

.ipo.ipo .ipo-sr {
	margin: -1px;
	padding: 0;
}

.ipo.ipo .ipo-side__note {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ipo-mut);
	line-height: 1.55;
}

.ipo.ipo .ipo-side__note strong {
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-step {
	border-radius: var(--ipo-radius);
	padding: clamp(18px, 3vw, 28px);
	margin: 0 0 18px;
}

.ipo.ipo .ipo-legend {
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 0;
	margin: 0;
}

.ipo.ipo .ipo-sub {
	margin: 6px 0 20px;
	color: var(--ipo-mut);
	font-size: 0.95rem;
}

.ipo.ipo .ipo-notice, .ipo.ipo .ipo-alert {
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 18px;
	font-weight: 600;
	font-size: 0.96rem;
}

.ipo.ipo .ipo-notice--ok {
	color: var(--ipo-ok);
}

.ipo.ipo .ipo-notice--error, .ipo.ipo .ipo-alert {
	color: #A50E2E;
}

.ipo.ipo .ipo-plan__input, .ipo.ipo .ipo-pay__input {
	margin: 0;
	padding: 0;
}

.ipo.ipo .ipo-plan__label {
	border-radius: 14px;
	padding: 16px 40px 16px 16px;
}

.ipo.ipo .ipo-plan__tag {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 4px;
}

.ipo.ipo .ipo-plan__image {
	margin-bottom: 8px;
	border-radius: 10px;
}

.ipo.ipo .ipo-plan__name {
	font-weight: 800;
	font-size: 0.98rem;
}

.ipo.ipo .ipo-plan__price {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ipo-navy);
	line-height: 1.15;
}

.ipo.ipo .ipo-plan__price small {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ipo-mut);
	letter-spacing: 0;
}

.ipo.ipo .ipo-plan__pm {
	font-size: 0.82rem;
	color: var(--ipo-ok);
	font-weight: 700;
}

.ipo.ipo .ipo-plan__screens {
	font-size: 0.82rem;
	color: var(--ipo-mut);
	font-weight: 700;
}

.ipo.ipo .ipo-plan__blurb {
	font-size: 0.86rem;
	color: var(--ipo-mut);
	margin-top: 4px;
}

.ipo.ipo .ipo-plan__check {
	border-radius: 50%;
}

.ipo.ipo .ipo-field {
	margin: 0 0 16px;
}

.ipo.ipo .ipo-label {
	font-weight: 700;
	font-size: 0.9rem;
}

.ipo.ipo .ipo-inputicon {
	color: var(--ipo-mut);
}

.ipo.ipo .ipo-input {
	font-size: 16px;
	color: var(--ipo-ink);
	border-radius: 12px;
	padding: 13px 14px;
}

.ipo.ipo .ipo-hint {
	font-size: 0.82rem;
	color: var(--ipo-mut);
}

.ipo.ipo .ipo-err {
	font-size: 0.84rem;
	font-weight: 700;
	color: #A50E2E;
}

.ipo.ipo .ipo-dial {
	padding: 0 14px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-pays {
	padding: 0;
	margin: 4px 0 16px;
}

.ipo.ipo .ipo-pays__grid {
	margin-top: 10px;
}

.ipo.ipo .ipo-pay__label {
	border-radius: 12px;
	padding: 12px 36px 12px 12px;
	font-weight: 700;
	font-size: 0.9rem;
}

.ipo.ipo .ipo-pay__mark {
	line-height: 0;
}

.ipo.ipo .ipo-pay__tick {
	border-radius: 50%;
}

.ipo.ipo .ipo-disclose {
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 16px;
}

.ipo.ipo .ipo-disclose > summary {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--ipo-brand);
}

.ipo.ipo .ipo-disclose[open] > summary {
	margin-bottom: 12px;
}

.ipo.ipo .ipo-check {
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: var(--ipo-mut);
}

.ipo.ipo .ipo-check input {
	margin: 2px 0 0;
}

.ipo.ipo .ipo-actions {
	margin-top: 18px;
}

.ipo.ipo .ipo-actions--submit {
	margin-top: 8px;
}

.ipo.ipo .ipo-btn {
	font-weight: 800;
	font-size: 1rem;
	border-radius: 999px;
	padding: 15px 28px;
	color: #fff;
}

.ipo.ipo .ipo-btn--submit {
	font-size: 1.05rem;
}

.ipo.ipo .ipo-btn__price {
	font-weight: 800;
}

.ipo.ipo .ipo-btn--ghost {
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-btn--ghost:hover:not(:disabled) {
	color: var(--ipo-brand);
}

.ipo.ipo .ipo-micro {
	margin: 12px 0 0;
	text-align: center;
	font-size: 0.86rem;
	color: var(--ipo-mut);
}

.ipo.ipo .ipo-consent {
	font-size: 0.8rem;
	color: var(--ipo-mut);
	margin: 14px 0 0;
}

.ipo.ipo .ipo-consent a {
	color: var(--ipo-brand);
	text-decoration: underline;
}

.ipo.ipo .ipo-trust {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	color: var(--ipo-mut);
	font-size: 0.88rem;
	font-weight: 700;
}

.ipo.ipo .ipo-trust svg {
	color: var(--ipo-ok);
}

.ipo.ipo .ipo-done {
	border-radius: var(--ipo-radius);
	padding: clamp(20px, 3vw, 32px);
	text-align: center;
}

.ipo.ipo .ipo-done__mark {
	margin: 0 auto 14px;
	border-radius: 50%;
}

.ipo.ipo .ipo-done__title {
	margin: 0 0 16px;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--ipo-ok);
}

.ipo.ipo .ipo-done__list {
	margin: 0 auto 16px;
	text-align: start;
}

.ipo.ipo .ipo-done__list dt {
	font-weight: 700;
	color: var(--ipo-mut);
	font-size: 0.9rem;
}

.ipo.ipo .ipo-done__list dd {
	margin: 0;
	font-weight: 700;
}

.ipo.ipo .ipo-done__next {
	margin: 0;
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-done__wait {
	margin: 18px 0 0;
	font-weight: 600;
	color: var(--ipo-ink);
}

.ipo.ipo .ipo-done__wa {
	margin-top: 12px;
	padding: 12px 22px;
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.ipo.ipo .ipo-done__wa:hover, .ipo.ipo .ipo-done__wa:focus-visible {
	color: #fff;
}