/* ==========================================================================
   Pulsar Showcase
   The single stylesheet of the landing page. The tokens are the theme's own,
   under the same names, so the page is drawn in the design language of what it
   is presenting.
   ========================================================================== */

/* One file covers 400 to 700: Inter's Latin subset, the same file the theme
   serves, loaded from this site and from nowhere else. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/inter-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--pls-bg: #f4f6fa;
	--pls-surface: #fff;
	--pls-border: #e4e9f2;
	--pls-ink: #0f1d36;
	--pls-ink2: #586275;
	--pls-brand: #1e63d4;
	--pls-brand-dark: #174ea8;
	--pls-brand-soft: #e8efff;
	--pls-accent: #d4572c;
	--pls-gold: #b8862b;
	--pls-gold-soft: #f7edd8;
	--pls-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--pls-radius: 12px;
	--pls-radius-sm: 8px;
	--pls-radius-lg: 18px;
	--pls-shadow-sm: 0 1px 3px rgba(15, 29, 54, .06);
	--pls-shadow-md: 0 4px 14px rgba(15, 29, 54, .08);
	--pls-shadow-lg: 0 18px 44px rgba(15, 29, 54, .14);
	--pls-max-w: 1180px;
	--psc-nav-h: 62px;
}

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

html {
	scroll-behavior: smooth;
	/* The sticky bar would otherwise cover the heading an anchor lands on. */
	scroll-padding-top: calc(var(--psc-nav-h) + 16px);
}

body.psc {
	margin: 0;
	background: var(--pls-bg);
	color: var(--pls-ink);
	font-family: var(--pls-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pls-brand); text-decoration: none; }
a:hover { color: var(--pls-brand-dark); }

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--pls-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

.psc-icon { width: 20px; height: 20px; flex: none; }
.psc-icon--lg { width: 34px; height: 34px; }

.psc-wrap {
	width: 100%;
	max-width: var(--pls-max-w);
	margin: 0 auto;
	padding: 0 24px;
}

.psc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--pls-ink);
	color: #fff;
	padding: 12px 18px;
	z-index: 100;
}
.psc-skip:focus { left: 12px; top: 12px; color: #fff; }

/* --- The bar --------------------------------------------------------- */

.psc-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--psc-nav-h);
	background: rgba(15, 29, 54, .92);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.psc-nav__inner {
	max-width: var(--pls-max-w);
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.psc-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.02em;
}
.psc-brand:hover { color: #fff; }
.psc-brand__mark { width: 26px; height: 26px; color: #5b94f5; }

.psc-nav__links {
	display: flex;
	gap: 22px;
	margin-right: auto;
	font-size: 14.5px;
}
.psc-nav__links a { color: rgba(255, 255, 255, .74); }
.psc-nav__links a:hover { color: #fff; }

.psc-nav__actions { display: flex; gap: 10px; }

/* --- Buttons --------------------------------------------------------- */

.psc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.psc-btn .psc-icon { width: 17px; height: 17px; }

.psc-btn--primary { background: var(--pls-brand); color: #fff; }
.psc-btn--primary:hover { background: var(--pls-brand-dark); color: #fff; transform: translateY(-1px); }

.psc-btn--buy { background: var(--pls-gold); color: #fff; }
.psc-btn--buy:hover { background: #9c711f; color: #fff; }

.psc-btn--ghost {
	color: rgba(255, 255, 255, .86);
	border-color: rgba(255, 255, 255, .28);
	padding: 9px 16px;
}
.psc-btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }

.psc-btn--quiet {
	background: var(--pls-surface);
	color: var(--pls-ink);
	border-color: var(--pls-border);
}
.psc-btn--quiet:hover { color: var(--pls-brand); border-color: #c9d5ea; }

.psc-btn--on-dark {
	background: transparent;
	color: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .3);
}
.psc-btn--on-dark:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* --- Hero ------------------------------------------------------------ */

.psc-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 18% -10%, rgba(30, 99, 212, .45), transparent 62%),
		radial-gradient(700px 380px at 92% 8%, rgba(30, 99, 212, .22), transparent 60%),
		var(--pls-ink);
	color: #fff;
	padding: 92px 24px 104px;
}

/* A faint grid, drawn with gradients rather than an image. */
.psc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(660px 400px at 50% 0%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(660px 400px at 50% 0%, #000, transparent 78%);
	pointer-events: none;
}

.psc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.psc-hero__kicker {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: #9dc0fb;
	background: rgba(93, 148, 245, .14);
	border: 1px solid rgba(157, 192, 251, .28);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 22px;
}

.psc-hero__title {
	font-size: clamp(52px, 9vw, 84px);
	font-weight: 700;
	letter-spacing: -.045em;
	margin-bottom: 10px;
}

.psc-hero__claim {
	font-size: clamp(20px, 3.1vw, 27px);
	font-weight: 600;
	color: #d7e4fb;
	letter-spacing: -.02em;
	margin-bottom: 18px;
}

.psc-hero__lead {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(233, 240, 252, .78);
	max-width: 620px;
	margin: 0 auto;
}

.psc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.psc-hero__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: 40px;
	font-size: 14.5px;
	color: rgba(233, 240, 252, .72);
}
.psc-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.psc-hero__facts .psc-icon { width: 15px; height: 15px; color: #6ee7b7; }

/* --- Sections -------------------------------------------------------- */

.psc-section { padding: 84px 0; }
.psc-section--tint { background: linear-gradient(180deg, #eef2f9, #f4f6fa); }
.psc-section--demos { padding-top: 72px; }

.psc-head { max-width: 720px; margin-bottom: 40px; }
.psc-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.psc-head__label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pls-brand);
	margin-bottom: 10px;
}

.psc-head__title {
	font-size: clamp(28px, 4.2vw, 40px);
	font-weight: 700;
	margin-bottom: 14px;
}

.psc-head__lead {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pls-ink2);
}

.psc-note {
	margin-top: 28px;
	text-align: center;
	font-size: 15px;
	color: var(--pls-ink2);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* --- The demo grid --------------------------------------------------- */

.psc-demos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}

.psc-demo__link {
	display: block;
	height: 100%;
	background: var(--pls-surface);
	border: 1px solid var(--pls-border);
	border-radius: var(--pls-radius-lg);
	overflow: hidden;
	color: inherit;
	box-shadow: var(--pls-shadow-sm);
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
a.psc-demo__link:hover {
	box-shadow: var(--pls-shadow-lg);
	transform: translateY(-3px);
	border-color: #cfdcf1;
	color: inherit;
}

.psc-demo__shot {
	display: block;
	height: 290px;
	overflow: hidden;
	background: var(--pls-brand-soft);
	border-bottom: 1px solid var(--pls-border);
}

/* The screenshot is the whole page: it sits at the top and slides up while the
   pointer is on the card, so the visitor sees the rest of it without leaving. */
.psc-demo__shot img {
	width: 100%;
	transition: transform 6s cubic-bezier(.22, .61, .36, 1);
}
a.psc-demo__link:hover .psc-demo__shot img,
a.psc-demo__link:focus-visible .psc-demo__shot img {
	transform: translateY(calc(-100% + 290px));
}

.psc-demo__shot--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a8bde0;
	background:
		repeating-linear-gradient(135deg, #eef3fb 0 12px, #e9effa 12px 24px);
}

.psc-demo__body { display: block; padding: 20px 22px 24px; }

.psc-demo__name {
	display: block;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 6px;
}

.psc-demo__note {
	display: block;
	font-size: 15px;
	color: var(--pls-ink2);
	line-height: 1.55;
}

.psc-demo__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pls-brand);
}
.psc-demo__cta .psc-icon { width: 16px; height: 16px; transition: transform .2s; }
a.psc-demo__link:hover .psc-demo__cta .psc-icon { transform: translateX(3px); }

.psc-demo--soon .psc-demo__link { box-shadow: none; background: #fbfcfe; }

.psc-demos__foot {
	margin-top: 26px;
	font-size: 15px;
	color: var(--pls-ink2);
}

/* --- Two column sections --------------------------------------------- */

.psc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px;
	align-items: center;
}
.psc-split--reverse .psc-split__text { order: 2; }

.psc-split__figure {
	margin: 0;
	background: var(--pls-surface);
	border: 1px solid var(--pls-border);
	border-radius: var(--pls-radius-lg);
	padding: 26px;
	box-shadow: var(--pls-shadow-md);
}
.psc-split__figure--plain { padding: 12px; }
.psc-split__figure figcaption {
	margin-top: 16px;
	font-size: 14px;
	color: var(--pls-ink2);
	line-height: 1.5;
}

.psc-list { display: grid; gap: 13px; margin-top: 22px; }
.psc-list li {
	display: flex;
	gap: 11px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--pls-ink2);
}
.psc-list strong { color: var(--pls-ink); font-weight: 600; }
.psc-list .psc-icon { width: 17px; height: 17px; margin-top: 4px; color: var(--pls-brand); }

/* --- The wireframes -------------------------------------------------- */

.psc-wire { width: 100%; height: auto; display: block; }
.psc-wire__solid { fill: #c3d5f4; }
.psc-wire__soft { fill: #e4ecf9; }
.psc-wire__line { fill: #d3ddee; }
.psc-wire__band { fill: #1b2c4c; }
.psc-wire__rule { stroke: #c3d5f4; stroke-width: 2; }
.psc-wire__dot { fill: var(--pls-brand); }
.psc-wire__band ~ .psc-wire__soft { fill: rgba(255, 255, 255, .14); }
.psc-wire__band ~ .psc-wire__solid { fill: #4d7fd6; }
.psc-wire__band ~ .psc-wire__line { fill: rgba(255, 255, 255, .3); }

.psc-wires {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px;
}

.psc-wirecard {
	background: var(--pls-surface);
	border: 1px solid var(--pls-border);
	border-radius: var(--pls-radius);
	padding: 18px;
	box-shadow: var(--pls-shadow-sm);
}

.psc-wirecard__art {
	background: #f6f8fc;
	border-radius: var(--pls-radius-sm);
	padding: 12px;
	margin-bottom: 15px;
}

.psc-wirecard__name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 5px; }
.psc-wirecard__desc { font-size: 14.5px; color: var(--pls-ink2); line-height: 1.55; }
.psc-wirecard__use { font-size: 13.5px; color: var(--pls-brand); margin-top: 8px; }

/* --- Panels ---------------------------------------------------------- */

/* Two by two, so the fourth panel is never left alone on a row of its own. */
.psc-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.psc-panel {
	background: var(--pls-surface);
	border: 1px solid var(--pls-border);
	border-radius: var(--pls-radius-lg);
	padding: 28px;
	box-shadow: var(--pls-shadow-sm);
}
.psc-panel h3 { font-size: 20px; font-weight: 700; margin: 16px 0 10px; }
.psc-panel p { font-size: 15.5px; line-height: 1.65; color: var(--pls-ink2); }

.psc-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--pls-brand-soft);
	color: var(--pls-brand);
}
.psc-panel__icon .psc-icon { width: 22px; height: 22px; }

.psc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.psc-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #f2f5fb;
	border: 1px solid var(--pls-border);
	font-size: 13.5px;
	color: var(--pls-ink2);
}
.psc-chip--more { background: transparent; border-style: dashed; }
.psc-swatch {
	width: 13px;
	height: 13px;
	border-radius: 4px;
	background: var(--psc-swatch, var(--pls-brand));
	box-shadow: inset 0 0 0 1px rgba(15, 29, 54, .12);
}

/* --- Figures ---------------------------------------------------------- */

.psc-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: var(--pls-border);
	border-radius: var(--pls-radius);
	overflow: hidden;
}
.psc-stats li {
	background: var(--pls-surface);
	padding: 22px 18px;
	font-size: 14.5px;
	color: var(--pls-ink2);
}
.psc-stats__n {
	display: block;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--pls-ink);
	line-height: 1.1;
	margin-bottom: 4px;
}

/* --- Feature grids ---------------------------------------------------- */

.psc-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
}

.psc-feature {
	background: var(--pls-surface);
	border: 1px solid var(--pls-border);
	border-radius: var(--pls-radius);
	padding: 24px;
}
.psc-feature h3 { font-size: 17.5px; font-weight: 700; margin: 14px 0 8px; }
.psc-feature p { font-size: 15px; line-height: 1.6; color: var(--pls-ink2); }

.psc-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--pls-brand-soft);
	color: var(--pls-brand);
}
.psc-features--compact .psc-feature__icon { background: #eef2f9; }

/* --- Support ---------------------------------------------------------- */

.psc-section--dark {
	background:
		radial-gradient(700px 340px at 12% 0%, rgba(30, 99, 212, .34), transparent 60%),
		var(--pls-ink);
	color: #fff;
}
.psc-section--dark .psc-head__label { color: #9dc0fb; }
.psc-section--dark .psc-head__lead { color: rgba(233, 240, 252, .78); }

.psc-support {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 56px;
	align-items: center;
}

.psc-support__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.psc-support__list { display: grid; gap: 16px; }
.psc-support__list li {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--pls-radius);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(233, 240, 252, .78);
}
.psc-support__list strong { color: #fff; font-weight: 600; }
.psc-support__list .psc-icon { color: #9dc0fb; margin-top: 2px; }

/* --- Closing ---------------------------------------------------------- */

.psc-cta { padding: 78px 0; background: var(--pls-surface); border-top: 1px solid var(--pls-border); }
.psc-cta__inner { text-align: center; }
.psc-cta h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; margin-bottom: 12px; }
.psc-cta p { font-size: 17px; color: var(--pls-ink2); }
.psc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

.psc-footer { background: var(--pls-ink); color: rgba(233, 240, 252, .62); padding: 34px 0; font-size: 14.5px; }
.psc-footer a { color: #9dc0fb; }
.psc-footer__inner { display: grid; gap: 6px; }
.psc-footer__note { color: rgba(233, 240, 252, .42); }

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 900px) {
	.psc-split,
	.psc-duo,
	.psc-support { grid-template-columns: 1fr; gap: 34px; }
	.psc-split--reverse .psc-split__text { order: 0; }
	.psc-nav__links { display: none; }
	.psc-section { padding: 62px 0; }
	.psc-hero { padding: 66px 20px 74px; }
}

@media (max-width: 560px) {
	.psc-wrap { padding: 0 18px; }
	.psc-nav__inner { padding: 0 18px; gap: 12px; }
	.psc-demos { grid-template-columns: 1fr; }
	.psc-demo__shot { height: 220px; }
	a.psc-demo__link:hover .psc-demo__shot img { transform: translateY(calc(-100% + 220px)); }
	.psc-hero__facts { gap: 8px 18px; font-size: 13.5px; }
	.psc-stats { grid-template-columns: 1fr; }
	.psc-btn { padding: 10px 16px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}