/* =============================================================================
   Lazy Syntax Highlighter — landing page (syntax.lazyadmin.nl)
   Design tokens, layout and components. Code-block visuals live in lsh.css,
   which is the plugin's own CSS shipped verbatim.
   ========================================================================== */

:root {
	color-scheme: light;

	--page:        #f5f5f1;
	--ink:         #14171a;
	--body:        #4d534f;
	--muted:       #6d7370;
	--hairline:    #dedcd3;
	--card-border: #e3e3db;
	--row-rule:    #f0f0e9;
	--dash:        #c2c2b8;

	--accent:       #0f766e;
	--accent-hover: #0b5852;
	--accent-tint:  #0f766e14;
	--accent-line:  #0f766e2b;
	--accent-lite:  #7fe3d6;

	--dark:      #101715;
	--dark-body: #9aa5a1;
	--dark-meta: #8d9895;

	--sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--container: 1220px;
	--gutter: 28px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.eyebrow {
	display: block;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.section-h2 {
	margin: 0 0 32px;
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -0.035em;
	line-height: 1.04;
}

/* =============================================================================
   Header row (not a nav)
   ========================================================================== */

.masthead {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 26px var(--gutter) 0;
	max-width: var(--container);
	margin-inline: auto;
}

.masthead__mark {
	display: block;
	width: 26px; height: 26px;
	flex-shrink: 0;
}

.masthead__name {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.015em;
	font-size: 16px;
}

.masthead__meta {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--muted);
}

/* =============================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	background-color: var(--page);
	background-image: radial-gradient(#00000012 1px, transparent 1px);
	background-size: 22px 22px;
	border-bottom: 1px solid #e2e2da;
}

.hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 48px;
	align-items: center;
	padding-top: 60px;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-tint);
	border: 1px solid var(--accent-line);
	padding: 6px 11px;
	border-radius: 999px;
	margin-bottom: 26px;
}

.hero h1 {
	margin: 0 0 20px;
	font-size: clamp(40px, 5.6vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.042em;
	text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); }

.hero__sub {
	margin: 0 0 34px;
	font-size: clamp(17px, 1.6vw, 19.5px);
	color: var(--body);
	max-width: 480px;
	text-wrap: pretty;
}
.hero__sub strong { font-weight: 600; color: var(--ink); }

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.btn {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 15.5px;
	padding: 15px 26px;
	border-radius: 9px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 24px -12px #0f766ecc;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--ghost {
	background: #fff;
	color: var(--ink);
	border-color: #d9d9d1;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* the floating code-block visual */
.hero__visual { position: relative; padding: 34px 0 8px; }
.hero__visual .glow {
	position: absolute;
	top: 6px; left: 34px; right: -14px;
	height: 88%;
	border-radius: 16px;
	background: var(--accent);
	opacity: 0.14;
	filter: blur(34px);
}
.hero__visual .card-back,
.hero__visual .card-mid {
	position: absolute;
	border-radius: 14px;
}
.hero__visual .card-back {
	top: 12px; left: 26px; right: -30px; bottom: 26px;
	background: #20262b;
	border: 1px solid #ffffff10;
}
.hero__visual .card-mid {
	top: 22px; left: 13px; right: -16px; bottom: 14px;
	background: #252c32;
	border: 1px solid #ffffff12;
}
.hero__visual .card-front {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 32px 70px -28px rgba(12, 16, 14, .55), 0 3px 8px rgba(12, 16, 14, .14);
}
.hero__visual .card-front .lsh-code { margin: 0; border-radius: 14px; }

/* stat strip */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	border-top: 1px solid var(--hairline);
	margin-top: 64px;
}
.stats__item { padding: 26px 24px 30px; }
.stats__item:first-child { padding-left: 0; }
.stats__item:last-child { padding-right: 0; }
.stats__item + .stats__item { border-left: 1px solid var(--hairline); }
.stats__num {
	font-family: var(--display);
	font-size: clamp(34px, 4vw, 46px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}
.stats__cap {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 8px;
}

@media (max-width: 640px) {
	.stats__item { padding-inline: 0; }
	.stats__item + .stats__item { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* =============================================================================
   Section: Themes
   ========================================================================== */

.section { padding-top: 96px; }
.section--tight { padding-top: 66px; }

.themes__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}
.themes__head h2 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.035em; line-height: 1.04; }
.themes__head p { margin: 0; color: var(--body); max-width: 460px; }
.themes__count {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	padding-bottom: 6px;
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 18px;
}

.theme-card {
	border-radius: 13px;
	overflow: hidden;
	transition: transform .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.theme-card:hover { transform: translateY(-3px); }
}
.theme-card--dark  { box-shadow: 0 14px 34px -20px rgba(12, 16, 14, .5); }
.theme-card--light {
	border: 1px solid var(--card-border);
	box-shadow: 0 14px 34px -24px rgba(12, 16, 14, .28);
}

/* the rendered .lsh-code becomes the card body — the card frames it now */
.theme-card .lsh-code {
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* injected name bar — mirrors the plugin's own .lsh-header geometry */
.lsh-code .tc-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0.7em var(--lsh-pad-x);
	border-bottom: 1px solid var(--lsh-border);
	background: rgba(127, 127, 127, 0.06);
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--lsh-gutter-fg);
	user-select: none;
}
.lsh-code .tc-name { letter-spacing: 0.01em; }
.lsh-code .tc-tag { opacity: 0.85; }
.lsh-code .tc-tag--pro {
	color: var(--accent-lite);
	background: #0f766e26;
	padding: 2px 8px;
	border-radius: 999px;
	opacity: 1;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Pro theme reveal */
.pro-themes {
	margin-top: 18px;
	border-radius: 13px;
	background: var(--dark);
	color: #fff;
	overflow: hidden;
}
.pro-themes > summary {
	list-style: none;
	cursor: pointer;
	padding: 30px 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
	align-items: center;
}
.pro-themes > summary::-webkit-details-marker { display: none; }
.pro-themes__title {
	font-family: var(--display);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}
.pro-themes__blurb { margin: 10px 0 0; color: var(--dark-body); font-size: 14.5px; max-width: 400px; }
.pro-themes__swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.pro-themes__swatches span {
	width: 38px; height: 38px;
	border-radius: 9px;
	border: 1px solid #ffffff1a;
}
.pro-themes__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent-lite);
}
.pro-themes__more::after { content: '↓'; }
.pro-themes[open] .pro-themes__more::after { content: '↑'; }
.pro-themes[open] .pro-themes__more .label-closed { display: none; }
.pro-themes:not([open]) .pro-themes__more .label-open { display: none; }

.pro-themes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	padding: 0 32px 32px;
}

/* =============================================================================
   Section: Why it's different
   ========================================================================== */

.why h2 {
	margin: 0 0 44px;
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -0.035em;
	line-height: 1.04;
	max-width: 600px;
}
.why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(280px, 1fr));
	gap: 0 44px;
}
@media (max-width: 760px) {
	.why__grid { grid-template-columns: 1fr; }
}
.why__item {
	border-top: 1px solid var(--hairline);
	padding: 26px 0 34px;
}

/* The long-code row spans the grid and splits into copy + live demo. */
.why__item--wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(260px, 1fr));
	gap: 8px 44px;
	align-items: start;
}
@media (max-width: 760px) {
	.why__item--wide { grid-template-columns: 1fr; }
}
.why__text p:last-child { margin-bottom: 0; }
.why__item h3 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 20px;
	letter-spacing: -0.02em;
}
.why__item h3 span {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--accent);
}
.why__item p { margin: 0 0 14px; color: var(--body); font-size: 15px; max-width: 420px; }
.why__item p:last-child { margin-bottom: 0; }

.why__demo { max-width: 460px; }
.why__demo .lsh-code { margin: 0; }
.why__item--wide .why__demo { max-width: none; }

/* =============================================================================
   Section: Free vs Pro
   ========================================================================== */

.compare-card {
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 44px -34px rgba(12, 16, 14, .4);
}
.compare-scroll { overflow-x: auto; }

table.compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 700px;
}
table.compare thead th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--muted);
	padding: 18px 12px;
	border-bottom: 1px solid var(--card-border);
	vertical-align: bottom;
}
table.compare thead th:first-child { text-align: left; padding-inline: 22px; }
table.compare thead th.col-free { text-align: center; width: 168px; }
table.compare thead th.col-pro {
	text-align: center;
	width: 190px;
	color: #fff;
	background: var(--accent);
	border-bottom: 0;
	white-space: normal;
	line-height: 1.35;
}

table.compare tbody th {
	font-weight: 400;
	text-align: left;
	padding: 13px 22px;
	color: var(--ink);
	border-bottom: 1px solid var(--row-rule);
}
table.compare tbody td {
	text-align: center;
	border-bottom: 1px solid var(--row-rule);
}
table.compare tbody td.pro { background: #0f766e0f; }
table.compare tr.is-last th,
table.compare tr.is-last td { border-bottom: 0; }

.compare .yes { color: var(--accent); }
.compare .no  { color: var(--dash); }
.compare .val { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.compare td.pro .val { color: var(--accent); font-weight: 700; }
.compare td { padding-inline: 10px; }

/* =============================================================================
   Section: Support + pricing (dark)
   ========================================================================== */

.pricing {
	margin-top: 104px;
	background-color: var(--dark);
	background-image: radial-gradient(#ffffff0d 1px, transparent 1px);
	background-size: 24px 24px;
}
.pricing__inner { padding: 88px var(--gutter) 96px; max-width: var(--container); margin-inline: auto; }
.pricing__intro { max-width: 660px; margin-bottom: 44px; }
.pricing__intro .eyebrow { color: var(--accent-lite); }
.pricing__intro h2 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.035em; line-height: 1.04; color: #fff; }
.pricing__intro p { margin: 0; color: var(--dark-body); font-size: 17px; text-wrap: pretty; }

.pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
	align-items: stretch;
}
.price {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 14px;
	position: relative;
	background: #fff;
	border: 1px solid var(--card-border);
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .45);
}
.price--featured {
	border-color: var(--accent);
	box-shadow: 0 28px 64px -26px rgba(0, 0, 0, .35);
}
.price__label {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.price--featured .price__label { color: var(--accent); }
.price__fig {
	margin: 14px 0 4px;
	font-family: var(--display);
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ink);
}
.price__note { font-size: 14px; margin-bottom: 24px; color: #5d635f; }
.price__spacer { flex: 1; }

.price__cta {
	display: block;
	text-align: center;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 15px;
	padding: 13px;
	border-radius: 9px;
	border: 1px solid #d9d9d1;
	background: #fff;
	color: var(--ink);
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.price__cta:hover { border-color: var(--accent); color: var(--accent); }
.price--featured .price__cta { background: var(--accent); color: #fff; border-color: transparent; }
.price--featured .price__cta:hover { background: var(--accent-hover); color: #fff; }

.price__badge {
	position: absolute;
	top: -12px; left: 28px;
	background: var(--accent);
	color: #fff;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

.pricing__fine { margin: 20px 0 0; font-size: 13px; color: #7e8885; max-width: 660px; }

/* =============================================================================
   Section: FAQ
   ========================================================================== */

.faq { max-width: 900px; margin-inline: auto; padding: 96px var(--gutter) 0; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); padding: 22px 0; }
.faq__item > summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	cursor: pointer;
	font-family: var(--display);
	font-weight: 500;
	font-size: 18.5px;
	letter-spacing: -0.015em;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
	content: '+';
	color: var(--accent);
	font-family: var(--mono);
	font-weight: 400;
}
.faq__item[open] > summary::after { content: '\2013'; }
.faq__item p {
	margin: 12px 0 0;
	color: var(--body);
	font-size: 15px;
	max-width: 660px;
}

/* =============================================================================
   Docs pointer
   ========================================================================== */

.docs { padding-top: 72px; }
.docs__band {
	border: 1px solid #0f766e33;
	background: #0f766e0f;
	border-radius: 14px;
	padding: 28px 30px;
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}
.docs__band > div { flex: 1; min-width: 280px; }
.docs__band h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.02em; color: #134e4a; }
.docs__band p { margin: 0; color: #3d5c58; font-size: 15px; }
.docs__band .btn { padding: 13px 22px; font-size: 15px; }

/* =============================================================================
   Footer
   ========================================================================== */

.footer { margin-top: 88px; background: var(--dark); }
.footer__inner { max-width: var(--container); margin-inline: auto; padding: 52px var(--gutter) 56px; }
.footer__wordmark {
	font-family: var(--display);
	font-size: clamp(26px, 4.4vw, 44px);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: #fff;
	line-height: 1;
	margin-bottom: 34px;
}
.footer__row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14.5px;
	color: var(--dark-meta);
	border-top: 1px solid #ffffff17;
	padding-top: 24px;
}
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a { color: #cfd8d5; }
.footer__links a:hover { color: var(--accent-lite); }
.footer__credit { margin-left: auto; }
.footer__credit a { color: var(--accent-lite); }
.footer__credit a:hover { color: #a8f0e6; }