/*
 * 1.8.0: sign-up on the website ([tcl_signup] and [tcl_plans]).
 * Loaded only on pages that carry them. The theme gives the font and the
 * page; colours come from the site's --pv-* variables when it has them, with
 * the same values as fallbacks so it looks right on any theme. Selectors are
 * a little heavier than usual where a theme styles every input and submit
 * button, so these win without !important.
 */

.tcl-su {
	--su-ink: var(--pv-ink, #0B1015);
	--su-amber: var(--pv-amber, #FFB000);
	--su-amber-hover: #FFC94D;
	--su-ink-hover: #2A333C;
	--su-slate: var(--pv-slate, #424B55);
	--su-muted: var(--pv-muted, #5B6570);
	--su-faint: var(--pv-faint, #8A939C);
	--su-line: var(--pv-line, #E3E6E9);
	--su-line2: var(--pv-line2, #EEF0F2);
	--su-mist: var(--pv-mist, #F4F5F6);
	--su-red: var(--pv-red, #A12B1C);
	--su-redbg: var(--pv-redbg, #FBE7E4);
	--su-green: var(--pv-green, #17643C);
	--su-greenbg: var(--pv-greenbg, #E5F3EB);
	--su-field: #D5DADF;
	--su-dark-text: #A9B1B9;
	--su-radius: 8px;
	--su-card: 14px;
	container-type: inline-size;
	container-name: tclsu;
	box-sizing: border-box;
	width: 100%;
	color: var(--su-slate);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}
.tcl-su *, .tcl-su *::before, .tcl-su *::after { box-sizing: border-box; }
.tcl-su p { margin: 0 0 12px; }
.tcl-su a { color: var(--su-ink); text-decoration: underline; text-decoration-color: #B9C0C7; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tcl-su a:hover { text-decoration-color: var(--su-ink); }
.tcl-su a:focus-visible, .tcl-su button:focus-visible { outline: 2px solid var(--su-ink); outline-offset: 2px; border-radius: 4px; }
.tcl-su .tcl-su-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tcl-su .tcl-su-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Headings: smaller than the page's own, they mark steps inside it. */
.tcl-su h2.tcl-su-h {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 6px; padding: 0;
	font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
	color: var(--su-ink); text-transform: none;
}
.tcl-su h2.tcl-su-h--big { font-size: clamp(26px, 4cqi, 34px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.tcl-su .tcl-su-n {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--su-amber); color: var(--su-ink);
	font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1;
}
.tcl-su h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--su-ink); }
.tcl-su .tcl-su-lede { color: var(--su-muted); font-size: 15.5px; max-width: 62ch; margin-bottom: 18px; }
.tcl-su .tcl-su-small { font-size: 14px; color: var(--su-muted); margin: 0; }
.tcl-su-step + .tcl-su-step, .tcl-su-step + .tcl-su-cols { margin-top: 44px; }

/* Plan cards: the Pricing page's tiers, as one bordered strip. */
.tcl-su .tcl-su-plans {
	display: flex; flex-wrap: wrap;
	margin: 0; padding: 0; min-width: 0;
	background: #fff; border: 1px solid var(--su-line); border-radius: var(--su-card); overflow: hidden;
}
.tcl-su .tcl-su-plans.is-error { border-color: var(--su-red); box-shadow: 0 0 0 1px var(--su-red); }
.tcl-su .tcl-su-tier {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	flex: 1 1 180px; /* a short last row stretches across, so no empty cells */
	padding: 26px 22px 24px; margin: 0 -1px -1px 0;
	border-right: 1px solid var(--su-line2); border-bottom: 1px solid var(--su-line2);
	background: #fff; color: var(--su-ink); cursor: pointer;
	transition: background-color .15s ease;
}
/* Hover only where there is a pointer that hovers: on a phone a tap would leave the card grey. */
@media (hover: hover) {
	.tcl-su label.tcl-su-tier:hover, .tcl-su a.tcl-su-tier:hover { background: #F8F9FA; }
}
.tcl-su .tcl-su-tier-n { font-weight: 600; color: var(--su-ink); line-height: 1.3; padding-right: 28px; }
.tcl-su .tcl-su-tier-v { font-size: 14px; color: var(--su-muted); margin: 2px 0 22px; line-height: 1.35; }
.tcl-su .tcl-su-tier-p { margin-top: auto; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--su-ink); font-variant-numeric: tabular-nums; }
.tcl-su .tcl-su-tier-m { font-size: 13.5px; color: var(--su-muted); margin-top: 8px; line-height: 1.35; }
/* A price label that does not start with an amount: as typed, at reading size. */
.tcl-su .tcl-su-tier-m--only { margin-top: auto; font-size: 16px; font-weight: 500; color: var(--su-ink); }
.tcl-su .tcl-su-tier-tick {
	position: absolute; top: 22px; right: 18px;
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	border: 1.5px solid #C6CCD2; background: #fff; color: transparent;
}
/* The radio itself stays in the page for keyboards and screen readers, out of sight. */
.tcl-su .tcl-su-tier input.tcl-su-radio {
	position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0;
	opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none; border: 0;
}
.tcl-su .tcl-su-tier.is-selected, .tcl-su .tcl-su-tier:has(input:checked), .tcl-su .tcl-su-tier.is-dark { background: var(--su-ink); }
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-n, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-n,
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-p, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-p,
.tcl-su .tcl-su-tier.is-dark .tcl-su-tier-n, .tcl-su .tcl-su-tier.is-dark .tcl-su-tier-p { color: #fff; }
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-m--only, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-m--only, .tcl-su .tcl-su-tier.is-dark .tcl-su-tier-m--only { color: #fff; }
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-v, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-v,
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-m, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-m,
.tcl-su .tcl-su-tier.is-dark .tcl-su-tier-v, .tcl-su .tcl-su-tier.is-dark .tcl-su-tier-m { color: var(--su-dark-text); }
.tcl-su .tcl-su-tier.is-selected .tcl-su-tier-tick, .tcl-su .tcl-su-tier:has(input:checked) .tcl-su-tier-tick { background: var(--su-amber); border-color: var(--su-amber); color: var(--su-ink); }
.tcl-su .tcl-su-tier.is-focus, .tcl-su .tcl-su-tier:has(input:focus-visible) { outline: 2px solid var(--su-ink); outline-offset: -6px; }
.tcl-su .tcl-su-tier.is-selected.is-focus, .tcl-su .tcl-su-tier:has(input:checked:focus-visible) { outline-color: var(--su-amber); }

/* [tcl_plans]: the same cards as links. */
.tcl-su a.tcl-su-tier { text-decoration: none; }
@media (hover: hover) {
	.tcl-su a.tcl-su-tier.is-dark:hover { background: #1A2129; }
	.tcl-su a.tcl-su-tier:hover .tcl-su-tier-go svg { transform: translateX(3px); }
}
.tcl-su a.tcl-su-tier:focus-visible { outline: 2px solid var(--su-amber); outline-offset: -6px; border-radius: 0; }
.tcl-su .tcl-su-tier-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--su-ink); }
.tcl-su .tcl-su-tier.is-dark .tcl-su-tier-go { color: var(--su-amber); }
.tcl-su .tcl-su-tier-go svg { transition: transform .15s ease; }
.tcl-su .tcl-su-plans-note { margin-top: 14px; }

/* Two columns: the form, and the summary beside it. */
.tcl-su .tcl-su-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.tcl-su .tcl-su-main { min-width: 0; }
.tcl-su .tcl-su-main .tcl-su-step + .tcl-su-step { margin-top: 44px; }
.tcl-su .tcl-su-main .tcl-su-h { margin-bottom: 20px; }

/* Fields. */
.tcl-su .tcl-su-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 18px; }
.tcl-su .tcl-su-field { min-width: 0; }
.tcl-su .tcl-su-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--su-ink); }
.tcl-su .tcl-su-hint { margin: -2px 0 8px; font-size: 14px; line-height: 1.45; color: var(--su-muted); }
.tcl-su .tcl-su-err { margin: 0 0 8px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--su-red); }
/* A field's error sits under its input, so the inputs in a row stay level. */
.tcl-su .tcl-su-field .tcl-su-err { margin: 8px 0 0; }
.tcl-su .tcl-su-field .tcl-su-input,
.tcl-su .tcl-su-field textarea.tcl-su-input {
	display: block; width: 100%; max-width: 100%; height: 3em; min-height: 3em; margin: 0;
	padding: 0 .9em; font: inherit; font-size: 16px; line-height: 1.4;
	color: var(--su-ink); background: #fff;
	border: 1px solid var(--su-field); border-radius: var(--su-radius); box-shadow: none;
	-webkit-appearance: none; appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tcl-su .tcl-su-field textarea.tcl-su-input { height: auto; min-height: 7.5em; padding: .75em .9em; resize: vertical; }
.tcl-su .tcl-su-field .tcl-su-input:hover { border-color: #B9C0C7; }
.tcl-su .tcl-su-field .tcl-su-input:focus { outline: none; border-color: var(--su-ink); box-shadow: 0 0 0 1px var(--su-ink); }
.tcl-su .tcl-su-field.is-error .tcl-su-input { border-color: var(--su-red); box-shadow: 0 0 0 1px var(--su-red); }
.tcl-su .tcl-su-field.is-error .tcl-su-input:focus { border-color: var(--su-ink); box-shadow: 0 0 0 1px var(--su-ink); }

/* The tick and the legal links. */
.tcl-su .tcl-su-agree { padding: 18px 20px; border-radius: 12px; background: var(--su-mist); border: 1px solid transparent; }
.tcl-su .tcl-su-agree.is-error { background: #fff; border-color: var(--su-red); box-shadow: 0 0 0 1px var(--su-red); }
.tcl-su .tcl-su-check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; color: var(--su-ink); cursor: pointer; }
.tcl-su .tcl-su-check input.tcl-su-box {
	flex: none; position: relative; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0;
	-webkit-appearance: none; appearance: none; background: #fff; border: 1.5px solid #9AA3AC; border-radius: 5px;
	cursor: pointer; box-shadow: none;
}
.tcl-su .tcl-su-check input.tcl-su-box::before, .tcl-su .tcl-su-check input.tcl-su-box::after { content: none; }
.tcl-su .tcl-su-check input.tcl-su-box:checked {
	background: var(--su-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFB000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
	border-color: var(--su-ink);
}
.tcl-su .tcl-su-check input.tcl-su-box:focus-visible { outline: 2px solid var(--su-ink); outline-offset: 2px; }
.tcl-su .tcl-su-agree.is-error .tcl-su-box { border-color: var(--su-red); }
.tcl-su .tcl-su-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0 34px; font-size: 14px; }

/* The button. Heavier selectors: themes style every submit button. */
.tcl-su .tcl-su-actions { margin-top: 24px; }
/* The plan and trial again, beside the button, while the summary is below the form (small screens). */
.tcl-su .tcl-su-mini { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--su-mist); }
.tcl-su .tcl-su-mini p { margin: 0; }
.tcl-su .tcl-su-mini .tcl-su-mini-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; font-size: 16px; color: var(--su-ink); }
.tcl-su .tcl-su-mini strong { font-weight: 600; }
.tcl-su .tcl-su-actions .tcl-su-small { margin-top: 12px; max-width: 52ch; }
.tcl-su .tcl-su-btn,
.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn[type=submit] {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 52px; height: auto; padding: 0 26px; margin: 0;
	border: 0; border-radius: var(--su-radius); box-shadow: none;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .2s ease;
}
.tcl-su .tcl-su-btn--amber,
.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn--amber[type=submit] { background: var(--su-amber); color: var(--su-ink); }
.tcl-su .tcl-su-btn--amber:hover,
.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn--amber[type=submit]:hover { background: var(--su-amber-hover); color: var(--su-ink); }
.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn[type=submit]:focus-visible { outline: 2px solid var(--su-ink); outline-offset: 3px; }
.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn[type=submit][disabled] { opacity: .7; cursor: progress; }
.tcl-su a.tcl-su-btn--ink, .tcl-su a.tcl-su-btn--ink:visited { background: var(--su-ink); color: #fff; text-decoration: none; }
.tcl-su a.tcl-su-btn--ink:hover { background: var(--su-ink-hover); color: #fff; }

/* The summary beside the form. */
.tcl-su .tcl-su-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tcl-su .tcl-su-sum { padding: 24px; background: #fff; border: 1px solid var(--su-line); border-radius: var(--su-card); }
.tcl-su .tcl-su-sum-k { font-size: 13px; font-weight: 500; color: var(--su-muted); margin-bottom: 6px; }
.tcl-su .tcl-su-sum-n { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--su-ink); }
.tcl-su .tcl-su-sum-v { font-size: 14px; color: var(--su-muted); }
.tcl-su .tcl-su-sum-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 4px; }
.tcl-su .tcl-su-sum-p [data-su=price] { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--su-ink); font-variant-numeric: tabular-nums; }
.tcl-su .tcl-su-sum-m { font-size: 14px; color: var(--su-muted); }
.tcl-su .tcl-su-facts { margin: 18px 0 0; padding: 0; }
.tcl-su .tcl-su-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--su-line2); font-size: 14.5px; line-height: 1.45; }
.tcl-su .tcl-su-facts dt { margin: 0; color: var(--su-muted); font-weight: 400; }
.tcl-su .tcl-su-facts dd { margin: 0; color: var(--su-ink); }
.tcl-su .tcl-su-next, .tcl-su .tcl-su-week { padding: 22px 24px; background: var(--su-mist); border-radius: var(--su-card); }
.tcl-su .tcl-su-steps { margin: 0; padding: 0; list-style: none; counter-reset: tclsu; }
.tcl-su .tcl-su-steps li {
	position: relative; margin: 0; padding: 0 0 0 36px; list-style: none;
	counter-increment: tclsu; font-size: 14.5px; line-height: 1.5; color: var(--su-slate);
}
.tcl-su .tcl-su-steps li + li { margin-top: 12px; }
.tcl-su .tcl-su-steps li::before {
	content: counter(tclsu); position: absolute; left: 0; top: 0;
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 1px solid var(--su-line); color: var(--su-ink);
	font-size: 12.5px; font-weight: 600; line-height: 1;
}
.tcl-su .tcl-su-steps strong { color: var(--su-ink); font-weight: 600; }

/* Messages. No coloured side bars: a quiet panel, or red for a problem. */
.tcl-su .tcl-su-note { padding: 16px 20px; border-radius: 12px; background: var(--su-mist); color: var(--su-ink); font-size: 15px; }
.tcl-su .tcl-su-note p:last-child { margin-bottom: 0; }
.tcl-su .tcl-su-note ul { margin: 8px 0 0 1.2em; padding: 0; }
.tcl-su .tcl-su-note--top { margin-bottom: 32px; }
.tcl-su .tcl-su-summary { margin-bottom: 32px; padding: 18px 20px; border-radius: 12px; background: var(--su-redbg); color: var(--su-ink); outline: none; }
.tcl-su .tcl-su-summary:focus { box-shadow: 0 0 0 2px var(--su-red); }
.tcl-su .tcl-su-summary-h { margin: 0 0 6px; font-weight: 600; color: var(--su-red); }
.tcl-su .tcl-su-summary ul { margin: 0; padding: 0 0 0 1.2em; font-size: 15px; }
.tcl-su .tcl-su-summary li { margin: 2px 0; }
.tcl-su .tcl-su-summary a { color: var(--su-red); text-decoration-color: currentColor; }
.tcl-su .tcl-su-alert { padding: 12px 16px; border-radius: var(--su-radius); background: var(--su-redbg); color: var(--su-red); font-weight: 500; }

/* Done, closed. */
.tcl-su .tcl-su-panel { padding: 32px; background: #fff; border: 1px solid var(--su-line); border-radius: var(--su-card); max-width: 46rem; }
.tcl-su .tcl-su-panel > :last-child { margin-bottom: 0; }
.tcl-su .tcl-su-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tcl-su .tcl-su-done .tcl-su-panel { max-width: none; }
.tcl-su .tcl-su-done-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--su-greenbg); color: var(--su-green); }
.tcl-su .tcl-su-done .tcl-su-lede { color: var(--su-slate); font-size: 16.5px; }
.tcl-su .tcl-su-done-act { margin-top: 24px; }
.tcl-su .tcl-su-week h3 { margin-bottom: 16px; }

@container tclsu (min-width: 620px) {
	.tcl-su .tcl-su-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tcl-su .tcl-su-field--wide { grid-column: 1 / -1; }
}
@container tclsu (min-width: 900px) {
	.tcl-su .tcl-su-cols { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 64px; align-items: start; }
	.tcl-su .tcl-su-mini { display: none; }
	.tcl-su .tcl-su-aside { position: sticky; top: var(--tcl-su-sticky-top, 120px); }
	.tcl-su .tcl-su-done { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
	.tcl-su .tcl-su-done .tcl-su-panel { padding: 40px; }
	.tcl-su .tcl-su-week { padding: 28px 30px; }
}
@container tclsu (max-width: 600px) {
	.tcl-su .tcl-su-tier { flex-basis: 140px; padding: 20px 16px 18px; }
	.tcl-su .tcl-su-tier-v { margin-bottom: 14px; }
	.tcl-su .tcl-su-tier-p { font-size: 26px; }
	.tcl-su .tcl-su-tier-tick { top: 18px; right: 14px; width: 22px; height: 22px; }
	.tcl-su .tcl-su-panel { padding: 24px 20px; }
	.tcl-su .tcl-su-sum, .tcl-su .tcl-su-next, .tcl-su .tcl-su-week { padding: 20px; }
	.tcl-su .tcl-su-legal { margin-left: 0; }
	.tcl-su .tcl-su-form .tcl-su-actions button.tcl-su-btn[type=submit] { width: 100%; }
	.tcl-su .tcl-su-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Browsers without container queries: the same by the window's width. */
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.tcl-su .tcl-su-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		.tcl-su .tcl-su-field--wide { grid-column: 1 / -1; }
	}
	@media (min-width: 1040px) {
		.tcl-su .tcl-su-cols { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 64px; align-items: start; }
		.tcl-su .tcl-su-mini { display: none; }
		.tcl-su .tcl-su-aside { position: sticky; top: 120px; }
		.tcl-su .tcl-su-done { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	}
	@media (max-width: 600px) {
		.tcl-su .tcl-su-tier { flex-basis: 140px; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.tcl-su *, .tcl-su *::before, .tcl-su *::after { transition: none !important; }
}

/* 1.8.0: [tcl_explore], a website visitor's way into the sample fleet (TCL_Visit). The sign-up's look, and a few of its own. */
.tcl-su .tcl-su-field select.tcl-su-select {
	padding-right: 2.6em; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230B1015' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9em center / 16px no-repeat;
}
.tcl-su .tcl-ex-agree { margin-top: 28px; }
.tcl-su .tcl-ex-next { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 22px 0 18px; }
.tcl-su a.tcl-su-btn--line, .tcl-su a.tcl-su-btn--line:visited { background: #fff; color: var(--su-ink); box-shadow: inset 0 0 0 1.5px var(--su-ink); text-decoration: none; }
.tcl-su a.tcl-su-btn--line:hover { background: var(--su-mist); color: var(--su-ink); }
.tcl-su a.tcl-su-btn--amber, .tcl-su a.tcl-su-btn--amber:visited { text-decoration: none; color: var(--su-ink); }
.tcl-su .tcl-ex-left .tcl-su-lede { color: var(--su-slate); font-size: 16.5px; }
@container tclsu (max-width: 600px) {
	.tcl-su .tcl-ex-next .tcl-su-btn { flex: 1 1 100%; }
}

/* 1.8.0: what [tcl_signup] or [tcl_explore] encloses on the page, above the form. The theme styles it. */
.tcl-su-intro { margin: 0 0 32px; }
.tcl-su-intro > :last-child { margin-bottom: 0; }