/*
 * Pricing Logic components, usable on any site. Everything is prefixed
 * (.pl-*, --pl-*) so it can sit next to a product's own CSS.
 *
 * The signature corner: one big top-left radius, small elsewhere
 * (border-radius: <sig> <r> <r> <r>), echoing the mark's foot.
 */

:root {
	--pl-mark-stem: var(--pl-ink);
	--pl-ease: cubic-bezier(.22, 1, .36, 1);
	--pl-pop: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --pl-mark-stem: #FFFFFF; }
}
:root[data-theme="dark"] { --pl-mark-stem: #FFFFFF; }

/* ---------- mark and lockup ---------- */

.pl-mark { display: block; height: auto; overflow: visible; }
.pl-mark__stem { fill: var(--pl-mark-stem); }
.pl-mark__bowl { fill: var(--pl-signal-orange); }
.pl-mark__foot { fill: var(--pl-foot, var(--pl-signal-blue)); }
.pl-mark__word { fill: var(--pl-ink); }
.pl-mark--mono path { fill: currentColor; }

.pl-icon { width: 16px; height: 16px; flex: none; }

/* ---------- frame ---------- */

.pl-frame {
	--s: 72px;
	width: var(--s);
	height: var(--s);
	flex: none;
	display: inline-grid;
	place-items: center;
	background: var(--pl-frame-bg, var(--pl-signal-blue));
	border-radius: calc(var(--s) * .5714) calc(var(--s) * .1429) calc(var(--s) * .1429) calc(var(--s) * .1429);
}
.pl-frame > svg { width: 50%; height: 50%; transform: translate(3%, 3%); }
.pl-frame .lb { fill: var(--pl-frame-bg); }
.pl-frame--studio { --pl-frame-bg: var(--pl-brand-ink); --pl-mark-stem: #FFFFFF; }
.pl-frame--studio > svg { width: 36%; height: 54%; transform: translate(4%, 3%); }

/* ---------- buttons, fields, tags ---------- */

.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--pl-sig-button) var(--pl-radius-sm) var(--pl-radius-sm) var(--pl-radius-sm);
	background: var(--pl-button);
	color: var(--pl-on-button);
	font: 600 15px/1 var(--pl-font-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s var(--pl-ease), box-shadow .2s, background-color .2s;
}
.pl-btn:hover { box-shadow: var(--pl-shadow-card); }
.pl-btn:active { transform: translateY(1px); }
.pl-btn .pl-icon { transition: transform .2s var(--pl-ease); }
.pl-btn:hover .pl-icon { transform: translateX(2px); }
.pl-btn--accent { background: var(--pl-signal-orange); color: #0C0F1A; }
.pl-btn--secondary { background: transparent; color: var(--pl-ink); border-color: var(--pl-line); }
.pl-btn--secondary:hover { background: var(--pl-surface-2); box-shadow: none; }
.pl-btn--sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 13px 5px 5px 5px; }
.pl-btn--block { width: 100%; height: 48px; }

.pl-btn:focus-visible, .pl-input:focus-visible, .pl-tlink:focus-visible, .pl-continue:focus-visible, .pl-by:focus-visible {
	outline: 2px solid var(--pl-focus);
	outline-offset: 3px;
}

.pl-field { display: grid; gap: 6px; }
.pl-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pl-label { font: 600 13px/1.4 var(--pl-font-text); color: var(--pl-ink); }
.pl-input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-sig-input) var(--pl-radius-sm) var(--pl-radius-sm) var(--pl-radius-sm);
	background: var(--pl-surface);
	color: var(--pl-ink);
	font: 400 16px var(--pl-font-text);
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.pl-input::placeholder { color: var(--pl-ink-3); }
.pl-input:focus { outline: none; border-color: var(--pl-focus); box-shadow: var(--pl-shadow-focus); }

.pl-tlink { font: 500 13px var(--pl-font-text); color: var(--pl-link); text-decoration: none; }
.pl-tlink:hover { text-decoration: underline; }

.pl-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--pl-sig-tag) var(--pl-radius-xs) var(--pl-radius-xs) var(--pl-radius-xs);
	background: var(--pl-surface-2);
	color: var(--pl-ink-2);
	font: 600 12px var(--pl-font-text);
	white-space: nowrap;
}
.pl-tag i { width: 9px; height: 9px; border-radius: 5px 1.5px 1.5px 1.5px; background: var(--pip, var(--pl-ink-3)); }
.pl-tag--mono { font: 500 12px var(--pl-font-mono); }
.pl-tag--live { background: var(--pl-ok-bg); color: var(--pl-ok); --pip: var(--pl-ok); }
.pl-tag--beta { background: var(--pl-warn-bg); color: var(--pl-warn); --pip: var(--pl-warn); }

.pl-check { position: relative; display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.45 var(--pl-font-text); color: var(--pl-ink-2); cursor: pointer; }
.pl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-check__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--pl-ink-3); border-radius: 10px 4px 4px 4px; display: grid; place-items: center; color: #fff; transition: .15s; }
.pl-check__box .pl-icon { width: 13px; height: 13px; opacity: 0; }
.pl-check input:checked + .pl-check__box { background: var(--pl-signal-blue); border-color: var(--pl-signal-blue); }
.pl-check input:checked + .pl-check__box .pl-icon { opacity: 1; }
.pl-check input:focus-visible + .pl-check__box { outline: 2px solid var(--pl-focus); outline-offset: 2px; }

/* ---------- presence on product sites ---------- */

/* One-colour, in the host site's text colour. */
.pl-by { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 13px; opacity: .8; }
.pl-by:hover { opacity: 1; }
.pl-by .pl-mark { width: 11px; height: auto; }

.pl-continue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 14px 0 8px;
	border-radius: 13px 5px 5px 5px;
	background: #0C0F1A;
	color: #F2F1EE;
	font: 600 14px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
	white-space: nowrap;
}
.pl-continue:hover { box-shadow: 0 8px 20px -10px rgba(12, 15, 26, .6); }
.pl-continue .pl-frame { --pl-frame-bg: rgba(255, 255, 255, .1); }

.pl-more { display: grid; gap: 12px; }
.pl-more__title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pl-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pl-more li > a, .pl-more li > span { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.pl-more b { display: block; font-weight: 600; }
.pl-more small { display: block; opacity: .7; }

.pl-account-note { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); border-radius: 18px 6px 6px 6px; font-size: 14px; }
.pl-account-note a { color: inherit; }

/* Checkout: "Bought from us before? Continue with Pricing Logic" */
.pl-returning { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; padding: 12px 14px 12px 16px; border-radius: 14px; background: color-mix(in srgb, currentColor 5%, transparent); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
	.pl-btn, .pl-btn .pl-icon, .pl-input, .pl-check__box { transition: none; }
}