/* styles.css — the "salient" site: white ground, electric blue, rounded geometric type, a
   hand-drawn underline on the headline, one full-bleed blue band. Fulfils the site contract
   (docs/WEBSITE.md): the four tokens below are what every module's pages read; the primitives
   come from /base.css. */

:root {
	--bg: #FFFFFF;
	--text: #0F172A;
	--accent: #2563EB;
	--font: "Lexend", "Avenir Next", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--surface: #FFFFFF;
	--line: #E2E8F0;
	--muted: #475569;
	--accent-text: #1D4ED8;
	--accent-contrast: #FFFFFF;
	--radius: 20px;
	--radius-sm: 12px;
	--wrap: 72rem;
	--shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 40px -12px rgba(15, 23, 42, 0.12);

	--tint: #F8FAFC;
	--ink: #0F172A;
	--ink-text: rgba(255, 255, 255, 0.72);
	--blue-deep: #1E40AF;
	--blue-text: rgba(255, 255, 255, 0.8);
}

body { font-size: 1.05rem; line-height: 1.6; background: var(--bg); }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.7rem, 6vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; }
h3 { font-size: 1.15rem; }

.lead { font-size: 1.15rem; color: var(--muted); }

.button svg { width: 0.9rem; height: 0.9rem; color: var(--accent); }
.button--light {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--ink);
}
.button--light:hover { border-color: #FFFFFF; }

/* The underline: a hand-drawn stroke under the accent phrase of a headline --------- */

.underlined { position: relative; isolation: isolate; white-space: nowrap; color: var(--accent); }
.underline {
	position: absolute;
	left: 0;
	bottom: -0.1em;
	width: 100%;
	height: 0.58em;
	z-index: -1;
	fill: color-mix(in srgb, var(--accent) 30%, transparent);
}
.underlined--light { color: #FFFFFF; }
.underlined--light .underline { fill: color-mix(in srgb, var(--accent) 70%, transparent); }

/* Header: the mark, the links, the blue pill --------------------------------------- */

.topbar { padding-block: 1.6rem; }
.topbar-inner { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--text);
}
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.nav { display: flex; align-items: center; gap: 0.25rem; font-size: 0.92rem; }
.nav a:not(.button) {
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--muted);
}
.nav a:not(.button):hover { background: var(--tint); color: var(--text); }
.nav--end { margin-inline-start: auto; gap: 1rem; }
.nav a.button { padding: 0.55rem 1.2rem; font-size: 0.88rem; }

/* Hero: centred, the headline as the whole picture --------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem); text-align: center; }
.hero-inner { max-width: 52rem; margin-inline: auto; }
.hero .lead { max-width: 38rem; margin: 1.5rem auto 0; }
.actions--center { justify-content: center; }
.hero .actions { margin-top: 2.2rem; }

.trust { margin-top: clamp(3.5rem, 8vw, 6rem); }
.trust-title { margin: 0 0 1.5rem; font-size: 0.95rem; font-weight: 500; }
.trust-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem clamp(2rem, 6vw, 5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.trust-list li { display: grid; gap: 0.1rem; }
.trust-list strong { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; }
.trust-list span { font-size: 0.88rem; color: var(--muted); }

/* Bands ---------------------------------------------------------------------------- */

.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.band-head p { color: var(--muted); font-size: 1.1rem; }
.band-head--center { text-align: center; margin-inline: auto; }
.band--tint { background: var(--tint); }
.band--blue {
	background-color: var(--accent);
	background-image: radial-gradient(50rem 30rem at 80% 10%, var(--blue-deep), transparent 70%);
	color: #FFFFFF;
	overflow: hidden;
}
.band--blue .band-head p { color: var(--blue-text); }
.band--cta { text-align: center; }
.band--cta .band-head { margin-bottom: 0; }

/* The three things, over blue, and the picture below them -------------------------- */

.features { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.feature {
	display: grid;
	gap: 0.3rem;
	padding: 1.2rem 1.4rem;
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: background 0.2s ease;
}
.feature:hover, .feature:first-child { background: rgba(255, 255, 255, 0.12); }
.feature h3 { margin: 0; font-size: 1.05rem; }
.feature p { margin: 0; font-size: 0.95rem; color: var(--blue-text); }
.screen {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.5);
}
.screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* The steps: an icon in a blue disc, a line each ----------------------------------- */

.steps { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: 1.2rem;
	border-radius: 50%;
	background: var(--accent);
	color: #FFFFFF;
}
.step-icon svg { width: 1.2rem; height: 1.2rem; }
.step h3 { margin: 0 0 0.4rem; }
.step p { margin: 0; color: var(--muted); }

/* Testimonials: three white cards with a face under each -------------------------- */

.quotes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.quote {
	margin: 0;
	padding: 2rem;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	display: grid;
	gap: 1.5rem;
	align-content: space-between;
}
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.quote figcaption {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}
.quote img { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.quote figcaption div { display: grid; }
.quote figcaption strong { font-weight: 500; }
.quote figcaption span { font-size: 0.88rem; color: var(--muted); }

/* Questions: two columns of short answers ----------------------------------------- */

.faq { display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.faq-item h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.faq-item p { margin: 0; color: var(--muted); }
.faq-item a { color: var(--accent-text); text-decoration: none; }

/* Contact page -------------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; align-items: start; }
.contact-aside { display: grid; gap: 1.2rem; align-content: start; }
.visit-line { margin: 0 0 0.5rem; }
.visit-line a { color: var(--accent-text); text-decoration: none; }

/* Footer -------------------------------------------------------------------------- */

.foot { font-size: 0.9rem; color: var(--muted); }
.foot-top {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	padding-block: 3rem 2rem;
}
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.foot-nav a { padding: 0.35rem 0.75rem; border-radius: 999px; text-decoration: none; color: var(--muted); }
.foot-nav a:hover { background: var(--tint); color: var(--text); }
.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--line);
}
.foot-contact, .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (max-width: 60rem) {
	.contact-grid { grid-template-columns: 1fr; }
	.nav a:not(.button):not(.account-link) { display: none; }
	.nav--end .account-link { display: inline; }
	.underlined { white-space: normal; }
}