/* Mulish, latin subset (preloaded by the page) */
@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url(fonts/1Ptvg83HX_SGhgqk3wotYKNnBQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body { font-family:Mulish, sans-serif; }

/* http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, address, img, ol, ul, li,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, menu, nav,
audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
	background-color:#fff;
	color:#000;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
select, input, textarea, button { font-family:inherit; }
a { text-decoration:none; }

:root {
	color-scheme:light dark;

	--bg:#fff;
	--light-bg:#f7f7f7;
	--dark-bg:#ccc;

	--light-fg:#777;
	--fg:#444;
	--medium-fg:#222;
	--dark-fg:#000;
	--link-fg:#07c;

	--highlight:rgba(0,172,127, 1);

	--fs-pct:clamp(50%, calc(50% + (100vw - 800px) * 0.125), 100%);
	--fs:0.9rem;
	--medium-fs:1rem;
	--large-fs:1.2rem;
	--xlarge-fs:1.4rem;
	--xxl-fs:1.6rem;

	--button-op:0.8;
	--button-op-hover:1;
	--primary-cta-op:0.7;
	--primary-cta-op-hover:0.9;
	--secondary-cta-op:0.4;
	--secondary-cta-op-hover:0.6;

	--box-shwd:0 2px 3px rgba(0,0,0, 0.3);

	/* Colours by role. Light values are what the rules used before dark
	   mode; the dark block below redefines them and nothing else. */
	--green-text:#018361;
	--blue-text:#0176cf;
	--nav-bg:rgba(255,255,255,0.7);
	--btn-bg:rgba(0,119,204, var(--button-op-hover));
	--btn-fg:#fff;
	--btn-hover-bg:rgba(0,0,0);
	--footer-bg:#000;
	--footer-fg:#bbb;
	--footer-link:#0095ad;

	/* section backgrounds: grey, blue and green radial gradients, and the
	   product page's indigo hero */
	--sect-gray-0:#f7f7f7;
	--sect-gray-1:#fafafa;
	--sect-gray-2:#dee1e7;
	--sect-blue-1:rgba(85, 172, 238, 0.3);
	--sect-blue-2:rgba(85, 172, 238, 0.7);
	--sect-green-1:rgba(0, 172, 127, 0.3);
	--sect-green-2:rgba(0, 172, 127, 0.7);
	--sect-product-1:#bbd2f6;
	--sect-product-2:#99a3f7;

	/* cards on those sections, and the lines inside them */
	--card-bg:rgba(255,255,255, 0.6);
	--card-bg-strong:rgba(255,255,255, 0.7);
	--card-rule:rgba(120,120,120, 0.3);
	--rule:rgba(0,0,0, 0.1);
	--rule-strong:#999;
	--casetitle-bg:rgba(0,0,0, 0.05);
	--casetitle-fg:rgba(0,0,0, 0.6);
	--problem-fg:rgba(208, 77, 77, 0.9);
	--crossmark-fg:rgba(208, 77, 77, 1);
	--solution-fg:rgba(0,172,127, 0.9);
	--step-1:#07c;
	--step-2:#995ed1;
	--step-3:#4bab7d;

	/* call-to-action buttons on the heroes */
	--cta-primary-bg:rgba(255,255,255, var(--primary-cta-op));
	--cta-primary-bg-hover:rgba(255,255,255, var(--primary-cta-op-hover));
	--cta-primary-fg:var(--fg);
	--cta-secondary-bg:rgba(255,255,255, var(--secondary-cta-op));
	--cta-secondary-bg-hover:rgba(255,255,255, var(--secondary-cta-op-hover));

	/* modals */
	--cover-bg:linear-gradient(to bottom right, oklch(0.7672 0.0272 278.6 / 50%) 30%, oklch(0.6729 0.0411 323.29 / 50%) 69.33%);
	--modal-bg:rgba(255, 255, 255, 0.5);
	--modal-shadow:0 -1px 1px rgba(255,255,255, 1), 0 2px 4px rgba(0,0,0, 0.5);
	--modal-case-bg:rgba(255,255,255, 0.3);
	--modal-case-hover:rgba(255,255,255, 0.4);
	--close-bg:rgba(255,255,255, 0.5);
	--close-fg:rgba(0,0,0, 0.7);
	--close-hover-bg:rgba(0,0,0, 0.7);
	--close-hover-fg:rgba(255,255,255, 1);
	--field-bg:rgba(255,255,255, 0.5);
	--field-shadow:0 1px 2px rgba(0,0,0, 0.3);
	--cancel-bg:rgba(0,0,0, 0.2);
	--cancel-hover-bg:rgba(0,0,0, 0.3);

	/* the three line-art images (black lines on transparent) */
	--lineart-filter:none;

	--lrpad:max(0.5rem, calc((100vw - 75rem) / 2));
	--med-lrpad:max(0.5rem, calc((100vw - 73rem) / 2));
	--sml-lrpad:max(0.5rem, calc((100vw - 64rem) / 2));
	--cases-gap:clamp(1rem, calc(4rem + (100vw - 75rem) * (5 / 34)), 4rem);
}

/*
 * Dark mode follows the system and only redefines variables: every rule
 * uses a variable in both themes, so nothing depends on rule order. Lemx's
 * colours carry over: a deep blue-charcoal page, each section keeping its
 * hue (slate, deep blue, deep teal, indigo), cards a faint glass a step
 * lighter than their section, brand green and blue lifted to read on dark.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--bg:oklch(0.17 0.02 255);
		--light-bg:oklch(0.21 0.02 255);
		--dark-bg:oklch(0.30 0.02 255);

		--light-fg:oklch(0.70 0.012 255);
		--fg:oklch(0.86 0.01 255);
		--medium-fg:oklch(0.90 0.008 255);
		--dark-fg:oklch(0.96 0 0);
		--link-fg:oklch(0.74 0.12 245);
		--highlight:oklch(0.74 0.14 165);

		--box-shwd:0 2px 8px oklch(0 0 0 / 45%);

		--green-text:oklch(0.76 0.13 165);
		--blue-text:oklch(0.76 0.12 245);
		--nav-bg:oklch(0.17 0.02 255 / 75%);
		--btn-bg:oklch(0.55 0.13 245);
		--btn-hover-bg:oklch(0.62 0.14 245);
		--footer-bg:oklch(0.12 0.015 255);
		--footer-fg:oklch(0.72 0.01 255);
		--footer-link:oklch(0.75 0.11 210);

		--sect-gray-0:oklch(0.25 0.02 255);
		--sect-gray-1:oklch(0.24 0.02 255);
		--sect-gray-2:oklch(0.18 0.02 255);
		--sect-blue-1:oklch(0.33 0.07 245);
		--sect-blue-2:oklch(0.23 0.06 245);
		--sect-green-1:oklch(0.33 0.06 170);
		--sect-green-2:oklch(0.23 0.05 170);
		--sect-product-1:oklch(0.32 0.07 265);
		--sect-product-2:oklch(0.23 0.08 275);

		--card-bg:oklch(1 0 0 / 7%);
		--card-bg-strong:oklch(1 0 0 / 9%);
		--card-rule:oklch(1 0 0 / 15%);
		--rule:oklch(1 0 0 / 12%);
		--rule-strong:oklch(1 0 0 / 30%);
		--casetitle-bg:oklch(1 0 0 / 6%);
		--casetitle-fg:oklch(0.85 0.005 255);
		--problem-fg:oklch(0.72 0.15 22);
		--crossmark-fg:oklch(0.72 0.15 22);
		--solution-fg:oklch(0.75 0.14 165);
		--step-1:oklch(0.74 0.13 245);
		--step-2:oklch(0.72 0.13 305);
		--step-3:oklch(0.75 0.12 155);

		/* the hero buttons: white glass with dark text in light becomes the
		   brand blue with light text, and a faint glass for the secondary */
		--cta-primary-bg:oklch(0.55 0.13 245);
		--cta-primary-bg-hover:oklch(0.62 0.14 245);
		--cta-primary-fg:oklch(0.97 0 0);
		--cta-secondary-bg:oklch(1 0 0 / 10%);
		--cta-secondary-bg-hover:oklch(1 0 0 / 16%);

		--cover-bg:linear-gradient(to bottom right, oklch(0.22 0.04 255 / 85%) 30%, oklch(0.16 0.04 200 / 90%) 69.33%);
		--modal-bg:oklch(0.22 0.02 255 / 70%);
		--modal-shadow:0 -1px 1px oklch(1 0 0 / 10%), 0 4px 12px oklch(0 0 0 / 50%);
		--modal-case-bg:oklch(1 0 0 / 6%);
		--modal-case-hover:oklch(1 0 0 / 10%);
		--close-bg:oklch(1 0 0 / 10%);
		--close-fg:oklch(0.85 0 0);
		--close-hover-bg:oklch(0.93 0 0);
		--close-hover-fg:oklch(0.20 0 0);
		/* fields are recessed: darker than the modal, with an edge */
		--field-bg:oklch(0.08 0.02 255 / 45%);
		--field-shadow:inset 1px 1px 0 oklch(1 0 0 / 12%), inset -1px -1px 0 oklch(1 0 0 / 5%);
		--cancel-bg:oklch(1 0 0 / 12%);
		--cancel-hover-bg:oklch(1 0 0 / 18%);

		/* black line art turns light; the hue rotation keeps its colours */
		--lineart-filter:invert(1) hue-rotate(180deg);
	}
}

@media (max-width: 600px) { div.heroimg img { display:none !important; } }

/* top level set the width and height and defaults */
html { width:100%; height:100%; scroll-behavior:smooth; font-size:var(--fs-pct); }
body {
	width:100%;
	height:100%;
	font-family:Mulish, sans-serif;
	background-color:var(--bg);
	color:var(--fg);
	font-size:var(--fs);
	line-height:1.6em;
}

/* common */
.thick { font-weight:bold; }
ul { list-style-type:disc; margin-left:1.5em; }
li { line-height:1.6em; }
p { margin:1.2em 0; }
a { color:inherit; }
a:visited { color:inherit; }
span.green { color:var(--green-text); }
span.blue { color:var(--blue-text); }
span.gray { color:var(--light-fg); }
div.right { text-align:right; }
span.itl { font-style:italic; }
button { cursor:pointer; }

/* header */
nav {
	box-sizing:border-box; width:100vw;
	position:fixed; top:0; z-index:5;
	padding:0.625rem var(--lrpad);
	display:flex; justify-content:space-between; align-items:center;
	-webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); background-color:var(--nav-bg);

	div.link { display:inline-block; cursor:pointer; }
	a span.link, div.link span.link { padding:0 5px; color:var(--dark-fg); font-size:var(--medium-fs); border-bottom:0.2rem solid transparent; }
	a, div.link { display:flex; justify-content:center; align-items:center; height:3.25rem; box-sizing:border-box;  }
	a.selected span.link { border-bottom:0.2rem solid var(--highlight); }
	a:hover span.link, div.link:hover span.link { border-bottom:0.2rem solid var(--link-fg); }
	a img { width:1.5rem; height:1.5rem; margin-right:0.3rem; }
	a span.logo { font-size:2rem; font-weight:bold; color:var(--dark-fg); text-transform:uppercase; }
	span.button { padding:0.5rem 1.4rem; border-radius:0.5rem; background:var(--btn-bg); color:var(--btn-fg); border:0; font-size:var(--fs); font-weight:500; letter-spacing:0.5px; }
	a:hover span.button { background:var(--btn-hover-bg); }
}

main { margin-top:4.5rem; }

/* footer */
footer {
	display:flex;
	justify-content:space-between;
	font-size:var(--medium-fs);
	color:var(--footer-fg);
	background-color:var(--footer-bg);
	padding:4rem var(--lrpad);
	line-height:1.7rem;

	a { color:var(--footer-link) !important; margin-left:1rem; }
}

/* each section, set the padding and default font size */
section {
	padding:8em var(--lrpad);
	font-size:var(--medium-fs);
}

/* first section is a bit taller */
section.hero {
	display:flex;
	padding:0 var(--lrpad);
	background:radial-gradient(ellipse at 70% 20%, var(--sect-gray-0) 20%, var(--sect-gray-2) 100%);

	div.herotext { width:40rem; padding:12rem 0; }
	div.heroimg { width:35rem; }

	h1 {
		width:46rem;
		font-size:2.7rem; letter-spacing:-0.5px; line-height:4rem;
		margin-bottom:1.7rem;
		margin-left:1rem;

		span.thick { font-weight:600; color:var(--medium-fg); }
		span.thin { font-weight:300; color:var(--dark-fg); }
	}

	div.subhead {
		width:41rem;
		font-size:1.2rem; line-height:1.7rem;
		color:var(--medium-fg);
		margin-bottom:4rem;
		margin-left:1rem;
	}

	div.ctas { width:40rem; text-align:center; margin-left:1rem; }
}

/* title of each section */
h2 {
	font-size:2.6rem; letter-spacing:-0.5px; line-height:3rem; font-weight:450;
	color:var(--dark-fg);
	margin-bottom:2rem;
}

div.section_desc {
	font-size:var(--large-fs);
	color:var(--dark-fg);
	margin-bottom:3rem;
	width:105ch;
	max-width:90vw;
	line-height:1.7rem;
}

#home {
	div.heroimg img {
		width:auto; height:39.5rem;
		float:right;
	}
}

#tokens {
	padding:8rem var(--sml-lrpad);

	div.section_desc { width:75ch; }

	div.token_cards {
		display:flex;
		gap:0;
		justify-content:start;
		border-radius:2rem;
		box-shadow:var(--box-shwd);

		h3 { background-color:rgba(0,0,0, 0.1); padding:0.8rem; }

		div.half_card { width:50%; padding:1.25rem; color:#fff; }
		div.half_card.blue {
			background:linear-gradient(180deg,rgba(85, 172, 238, 0.7) 0%, rgba(85, 172, 238, 1) 100%);
			border-radius:2rem 0 0 2rem;

			h3 { border-radius:1.8rem 0 0 1.8rem; margin:-0.62rem -1.25rem 2.5rem -0.62rem; }
		}
		div.half_card.green {
			background:linear-gradient(180deg,rgba(0, 172, 127, 0.7) 0%, rgba(0, 172, 127, 1) 100%);
			border-radius:0 2rem 2rem 0;

			h3 { border-radius:0 1.8rem 1.8rem 0; margin:-0.62rem -0.62rem 2.5rem -1.25rem; }
		}
		div.half_card div.thick { font-size:1.1rem; margin-bottom:1rem; display:inline-block; vertical-align:top; }
		div.half_card div.image { display:inline-block; width:3em; height:3em; margin-right:1.5em; background-color:#fff; }
		div.half_card h3 {
			font-size:1.3rem; font-weight:600;
			margin-bottom:1.8em;
			text-align:center;
		}

		div.token_summary, div.token_desc { margin:1rem; }
		div.token_desc { font-size:var(--medium-fs); }

		img { width:2rem; height:2rem; margin-top:0.5rem; margin-right:1rem; }
	}
}

#whylemx {
	padding:8rem var(--med-lrpad);
	background:radial-gradient(circle, var(--sect-green-1) 0%, var(--sect-green-2) 100%);

	div.why_cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;
		div.why_card { padding:1.5rem; border:0; border-radius:1.5rem; background:var(--card-bg); box-shadow:var(--box-shwd); }
		h3 { font-size:1.3rem; font-weight:600; margin-bottom:1.5rem; padding-bottom:0.4rem; border-bottom:1px solid var(--card-rule); }
		div.card_desc { }
	}

	div.checkmark { display:inline-block; font-size:1.3rem; color:var(--highlight); margin-right:0.5rem; font-weight:400; }
}

#howlemx {
	background:radial-gradient(circle, var(--sect-blue-1) 0%, var(--sect-blue-2) 100%);

	div.section_desc { width:100ch; }

	div.how_cards { border-radius:1rem; display:flex; gap:1rem; margin-bottom:5rem;
		div.how_card { background:var(--card-bg); flex:1; padding:1rem; border-radius:1.5rem; box-shadow:var(--box-shwd); }
		h3 { font-size:1.3rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid var(--card-rule); margin:0.3rem 0 2rem 0; }
		div.card_desc { font-size:var(--medium-fs); margin-bottom:1.3rem; }
	}
}

#implementation {
	background:radial-gradient(ellipse 70% 70%, var(--sect-gray-1), var(--sect-gray-2));

	div.ibenefits { border-radius:1rem; display:flex; gap:2rem;
		div.ibenefit { background:var(--card-bg-strong); flex:1; padding:1.5rem; border-radius:1.5rem; box-shadow:var(--box-shwd); }
		h3 { font-size:1.3rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid var(--card-rule); margin-bottom:1.5rem; }
		div.card_desc { font-size:var(--medium-fs); }
	}
}

#product {
	background:radial-gradient(ellipse at 70% 20%, var(--sect-product-1) 20%, var(--sect-product-2));

	div.heroimg img {
		filter:var(--lineart-filter);
		width:auto; height:39rem;
		float:right; margin-right:3rem;
	}
}

#platform {
	/*background:radial-gradient(circle, #fffcb0, #ffe5b1);*/
	/*background:#fff;*/
	/*background:radial-gradient(ellipse, #fafafa, #dee1e7);*/
	/*background:radial-gradient(ellipse 60% 60%, rgba(241, 238, 201, 50), rgba(254, 244, 161, 0.49));*/
	/*background:rgb(255,255,240);*/
	background:radial-gradient(ellipse 90% 50%, var(--sect-gray-1), var(--sect-gray-2));
	/*background:radial-gradient(circle, var(--sect-blue-1) 0%, var(--sect-blue-2) 100%);*/

	div.steps { display:flex; justify-content:space-between; align-items:stretch; gap:1.5rem; margin:3rem 0 2rem 0; }
	div.step {
		padding:1rem;
		box-shadow:var(--box-shwd); border-radius:1rem;
		background:var(--card-bg-strong);

		h3 { font-size:1.3rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid var(--card-rule); margin:0.3rem 0 2rem 0; }
		div.step_desc { font-size:var(--medium-fs); margin-bottom:1.3rem; }
	}

	div.step.one div.number { color:var(--step-1); }
	div.step.two div.number { color:var(--step-2); }
	div.step.three div.number { color:var(--step-3); }

	div.diagram {
		width:100%; box-sizing:border-box; padding:5px;
		border:0; border-radius:2rem;
		background:var(--card-bg); box-shadow:var(--box-shwd);

		img { width:100%; filter:var(--lineart-filter); }
	}
}

#dataflow { scroll-margin-top:5.5rem; }

#platformBenefits {
	/*background:radial-gradient(circle, var(--sect-green-1) 0%, var(--sect-green-2) 100%);*/
	background:radial-gradient(circle, var(--sect-blue-1) 0%, var(--sect-blue-2) 100%);
}

#core {
	padding:8em var(--sml-lrpad);
	div.section_desc { width:70ch; }

	div.components {
		width:100%; box-sizing:border-box;

		div.component {
			display:flex; gap:2rem;
			padding:2rem; border-bottom:1px solid var(--rule);
		}
		div.component.last { border:0; }

		div.img { width:10rem; box-sizing:border-box; text-align:center; background:transparent; border-radius:1rem; display:flex; justify-items:center; align-items:center; }
		div.img img { width:10rem; }
		h3 { font-size:1.3rem; font-weight:bold; margin-bottom:1.5rem; padding:0 2rem; }
		div.desc { font-size:var(--medium-fs); padding:0 2rem; line-height:1.5rem; }
	}
}

#usecases {
	display:block !important; padding:6rem 0;

	h1 { width:100%; text-align:center; margin:0 0 3rem 0; }

	div.cases {
		max-width:75rem; margin:auto; padding:3rem 0;
		display:grid; place-items:center; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); grid-template-rows:repeat(auto-fit, 1fr); gap:var(--cases-gap);
	}

	div.case { width:20rem;
		padding:1rem; border-radius:1rem; background:var(--card-bg-strong);
		box-shadow:var(--box-shwd);

		div.img { width:20rem; height:20rem; margin-bottom:2rem; border-radius:0.4rem; }
		div.img > img { width:100%; border-radius:0.4rem; }
		h2 { font-size:1.3rem; font-weight:bold; margin-bottom:1rem; }
		div.desc { height:10rem; }
		div.cta { text-align:center; margin-bottom:1rem; }

		button { color:#fff; background:rgba(0,119,204, var(--button-op)); border:0; border-radius:1.5rem; padding:0.7rem 1.5rem; font-size:var(--fs); }
		button:hover { background:rgba(0,119,204, var(--button-op-hover)); }
	}
}
div.content.usecases { display:none; }

#financed {
	background:radial-gradient(circle, var(--sect-green-1) 0%, var(--sect-green-2) 100%);

	div.subhead { width:39rem; }

	div.herotext { padding-top:11.2rem; padding-bottom:11.2rem; }
	div.heroimg img {
		filter:var(--lineart-filter);
		width:auto; height:38rem;
		float:right; margin-top:1rem; margin-right:1rem;
	}
}

#problems {
	background:radial-gradient(circle at center, var(--sect-gray-1), var(--sect-gray-2));
	padding:8rem var(--sml-lrpad);

	div.casetitle { font-size:1.5rem; font-weight:bold; margin-bottom:1.5rem; padding:1rem 1.5rem !important; background:var(--casetitle-bg); color:var(--casetitle-fg); }
	div.casetitle.problem { border-radius:1rem 0 0 1rem; border:0 !important; color:var(--problem-fg); }
	div.casetitle.solution { border-radius:0 1rem 1rem 0; border:0 !important; color:var(--solution-fg); }

	div.cases {
		padding:2rem; border-radius:2rem;
		display:grid; place-items:center; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
		background:var(--card-bg); box-shadow:var(--box-shwd);
	}

	div.problem, div.solution {
		width:100%; box-sizing:border-box; padding:1.5rem;
		border-top:1px solid var(--rule);

		h3 { font-size:1.3rem; font-weight:bold; margin-bottom:1.2rem; }
		div.desc { }

		div.checkmark { display:inline-block; font-size:1.3rem; color:var(--highlight); margin-right:0.7rem; font-weight:400; }
		div.crossmark { display:inline-block; font-size:1.3rem; color:var(--crossmark-fg); margin-right:0.7rem; font-weight:400; }
	}

	div.first { border:0 !important; }
}

#whyftts {
	background:radial-gradient(circle, var(--sect-blue-1) 0%, var(--sect-blue-2) 100%);
	padding:8rem var(--sml-lrpad);

	div.section_desc { width:65ch; }

	div.benefits {
		border-radius:2rem;
		display:grid; place-items:start; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
		background:var(--card-bg); box-shadow:var(--box-shwd);
	}

	div.benefit { padding:2rem;
		h3 { font-size:1.3rem; font-weight:bold; margin-bottom:1.4rem; }
	}
	div.benefit.top { border-bottom:1px solid var(--rule); }
	div.benefit.lft { border-right:1px solid var(--rule); }
}

div.context_label { display:none; }

div.benefits {
	border-radius:2rem;
	display:grid; place-items:start; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
	background:var(--card-bg); box-shadow:var(--box-shwd);

	div.benefit { padding:2rem;
		h3 { font-size:1.3rem; font-weight:bold; margin-bottom:1.4rem; }
	}

	div.benefit.top { border-bottom:1px solid var(--rule); }
	div.benefit.lft { border-right:1px solid var(--rule); }
}

div.ctas { text-align:center;
	button { font-size:var(--medium-fs); padding:0.7rem 0; border-radius:1.3rem; width:15rem; border:0; box-shadow:var(--box-shwd); }
	button.primary { background:var(--cta-primary-bg); color:var(--cta-primary-fg); font-weight:bold; margin-right:3rem; }
	button.primary:hover { background:var(--cta-primary-bg-hover); }
	button.secondary { background:var(--cta-secondary-bg); color:var(--medium-fg); }
	button.secondary:hover { background:var(--cta-secondary-bg-hover); }
}

#coverall {
	width:100%; height:100%; z-index:10; position:fixed; top:0; left:0; overflow:hidden; display:none;
	background:var(--cover-bg); backdrop-filter:blur(30px);
}

div.modal {
	position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:11;
	display:none; padding:2rem; overflow:auto; border-radius:2rem; box-sizing:border-box;
	width:auto; max-width:70rem; height:auto; max-height:90vh; overflow:auto;
	background-color:var(--modal-bg); backdrop-filter:blur(7px);
	box-shadow:var(--modal-shadow);

	div.content {
		max-width:65rem; max-height:70vh; overflow-x:hidden; overflow-y:auto;
	}

	div.modalheader { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; gap:3rem; }
	h1 { font-size:1.5rem; font-weight:650; }
	button.close { border:0; border-radius:50%; width:1.8rem; height:1.8rem; font-size:var(--medium-fs); background:var(--close-bg); color:var(--close-fg); }
	button.close:hover { background:var(--close-hover-bg); color:var(--close-hover-fg); }

	div.wrapper { margin-top:1rem; }
	label > div { font-size:var(--medium-fs); padding:0.2rem; }
	label > input, label > textarea {
		background:var(--field-bg); box-shadow:var(--field-shadow); color:var(--fg);
		font-size:var(--medium-fs); padding:0.5rem; width:100%;
		border:0; border-radius:0.5rem; box-sizing:border-box;
	}
	label > input.email { letter-spacing:1px; }
	label > textarea { height:10rem; }

	div.submit { display:flex; justify-content:space-around; margin-top:1.5rem;
		button {
			padding:0.5rem 3rem;
			font-size:var(--medium-fs); font-weight:600;
			border:0; border-radius:1rem;
		}
	}
	button.submit { color:var(--btn-fg); background:rgba(0,119,204, var(--button-op)); }
	button.submit:hover { background:rgba(0,119,204, var(--button-op-hover)); }
	button.cancel { color:#fff; background:var(--cancel-bg); }
	button.cancel:hover { color:#fff; background:var(--cancel-hover-bg); }
}

div.modal.form { padding:2rem; }

#contactform { min-width:30rem; }
div.modal.usecases {
	h1 { font-size:1.5rem; font-weight:650; }
	div.content { width:67rem; height:70vh; display:flex; flex-direction:column; gap:0.8rem; border-radius:1rem; }
	div.case { padding:0; background:var(--modal-case-bg); border-radius:1rem; }
	div.case:hover { background:var(--modal-case-hover); }
	h2 { font-size:1.3rem; display:inline-block; margin-bottom:0; color:var(--fg); }
	div.steps { display:flex; justify-content:space-between; align-items:start; gap:2rem; padding:0 1.5rem; margin-top:0.5rem; }
	div.step { flex:1; }
	div.step h3 { font-size:var(--medium-fs); margin-bottom:1.5rem; padding-bottom:0.3rem; border-bottom:1px solid var(--rule-strong); text-transform:uppercase; letter-spacing:1px; }
	div.step div.desc { font-size:var(--medium-fs); }

	summary { cursor: pointer; list-style: none; padding:1rem; }
	/* Hide default marker (Chrome/Safari/Edge) */
	summary::-webkit-details-marker { display: none; }

	/* Custom icon before the text */
	summary::before {
		content: "▶";
		display: inline-block;
		margin-right: 0.5rem;
		transition: transform 0.2s ease;
		color:var(--link-fg);
	}

	/* When the accordion is open, rotate or change the icon */
	details[open] { padding-bottom:1.5rem;
		h2 { font-weight:600; }

		summary::before { transform: rotate(90deg); }
	}
}