/******************************************************************************
 *
 *  MacFinance Web 2026
 *
 *  public.css
 *
 *  Nouveau site public MacFinance
 *
 ******************************************************************************/


/* ==========================================================================
   Variables
   ========================================================================== */

:root {

	--color-background: #f5f5f7;
	--color-surface: #ffffff;

	--color-text: #161617;
	--color-text-secondary: #6e6e73;

	--color-border: rgba(0, 0, 0, 0.08);

	--color-accent: #0a7cff;
	--color-accent-hover: #006ee6;

	--content-width: 1180px;

	--navigation-height: 72px;

	--radius-navigation: 20px;
	--radius-button: 999px;

	--shadow-navigation:
		0 8px 32px rgba(0, 0, 0, 0.06);

}


/* ==========================================================================
   Base
   ========================================================================== */

* {
	box-sizing: border-box;
}


html {
	scroll-behavior: smooth;
}


body {

	margin: 0;

	background: var(--color-background);

	color: var(--color-text);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"SF Pro Text",
		"SF Pro Display",
		"Helvetica Neue",
		Arial,
		sans-serif;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


a {
	color: inherit;
	text-decoration: none;
}


button {
	font: inherit;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.site-header {

	position: fixed;

	top: 0;
	left: 0;

	width: 100%;

	z-index: 1000;

	padding: 12px 24px;

	pointer-events: none;
}


.site-navigation {

	width: 100%;
	max-width: var(--content-width);

	min-height: var(--navigation-height);

	margin: 0 auto;

	padding: 8px 10px 8px 20px;

	display: grid;

	grid-template-columns:
		190px
		1fr
		auto;

	align-items: center;

	gap: 24px;

	background: rgba(255, 255, 255, 0.82);

	border: 1px solid var(--color-border);

	border-radius: var(--radius-navigation);

	box-shadow: var(--shadow-navigation);

	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);

	pointer-events: auto;
}


/* --------------------------------------------------------------------------
   Marque
   -------------------------------------------------------------------------- */

.site-brand {

	display: flex;

	flex-direction: row;
	align-items: center;

	gap: 10px;

	line-height: 1.1;
}


.site-brand-logo {

	display: block;

	width: 32px;
	height: 32px;

	flex: 0 0 32px;

	object-fit: contain;
}


.site-brand-text {

	display: flex;

	flex-direction: column;

	align-items: flex-start;
	justify-content: center;
}


.site-brand-name {

	display: block;

	font-size: 15px;
	font-weight: 650;

	letter-spacing: -0.02em;

	color: var(--color-text);
}


.site-brand-context {

	display: block;

	margin-top: 2px;

	font-size: 11px;
	font-weight: 500;

	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Liens centraux
   -------------------------------------------------------------------------- */

.site-navigation-links {

	display: flex;

	align-items: center;
	justify-content: center;

	gap: clamp(18px, 2.4vw, 34px);
}


.site-navigation-links a {

	position: relative;

	font-size: 13px;
	font-weight: 550;

	color: #4b4b4f;

	transition:
		color 160ms ease;
}


.site-navigation-links a:hover {
	color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.site-navigation-actions {

	display: flex;

	align-items: center;

	gap: 16px;
}


.site-navigation-client {

	font-size: 13px;
	font-weight: 550;

	color: #4b4b4f;

	white-space: nowrap;
}


.site-navigation-client:hover {
	color: var(--color-text);
}


.site-navigation-try {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 42px;

	padding: 0 18px;

	background: var(--color-accent);

	color: #ffffff;

	border-radius: var(--radius-button);

	font-size: 13px;
	font-weight: 650;

	white-space: nowrap;

	transition:
		background 160ms ease,
		transform 160ms ease;
}


.site-navigation-try:hover {

	background: var(--color-accent-hover);

	transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Bouton mobile
   -------------------------------------------------------------------------- */

.site-navigation-menu {

	display: none;

	width: 42px;
	height: 42px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: #eeeeef;

	cursor: pointer;
}


.site-navigation-menu span {

	display: block;

	width: 16px;
	height: 1.5px;

	margin: 4px auto;

	background: var(--color-text);

	border-radius: 2px;
}



/* --------------------------------------------------------------------------
   Menu mobile
   -------------------------------------------------------------------------- */
   
.site-mobile-navigation {
	display: none;
}


/* ==========================================================================
   Contenu commun
   ========================================================================== */

.section-content {

	width: min(
		calc(100% - 48px),
		var(--content-width)
	);

	margin: 0 auto;
}


.section-eyebrow {

	margin: 0 0 22px;

	font-size: 13px;
	font-weight: 650;

	letter-spacing: 0.04em;

	color: var(--color-text-secondary);
}


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

.hero {

	min-height: 900px;

	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	padding:
		calc(var(--navigation-height) + 100px)
		24px
		100px;

	text-align: center;

	background: var(--color-background);
}


.hero-content {

	width: 100%;
	max-width: 1000px;

	margin: 0 auto;
}


.hero-version {

	margin: 0 0 30px;

	font-size: 14px;
	font-weight: 650;

	letter-spacing: 0.02em;

	color: var(--color-text-secondary);
}


.hero h1 {

	margin: 0;

	font-size: clamp(58px, 7vw, 96px);

	line-height: 0.98;

	font-weight: 700;

	letter-spacing: -0.06em;
}


.hero-introduction {

	margin: 38px auto 0;

	font-size: clamp(19px, 2vw, 24px);

	line-height: 1.45;

	letter-spacing: -0.02em;

	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Fenêtre MacFinance
   -------------------------------------------------------------------------- */

.hero-product {
	width: min(1320px, calc(100% - 32px));

	margin: 80px auto -170px;

	position: relative;

	z-index: 2;
}


.hero-product img {

	display: block;

	width: 100%;
	height: auto;

	border-radius: 14px;

	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.16),
		0 8px 24px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   Philosophie
   ========================================================================== */

.philosophy {
	padding: 290px 0 160px;
	background: #ffffff;
}

.philosophy .section-content {
	max-width: 1050px;
}


.philosophy h2 {

	max-width: 1000px;

	margin: 0;

	font-size: clamp(42px, 5vw, 70px);

	line-height: 1.04;

	font-weight: 650;

	letter-spacing: -0.05em;
}


.philosophy h2 span {

	display: block;

	margin-top: 8px;

	color: var(--color-text-secondary);
}


.section-introduction {

	max-width: 700px;

	margin: 44px 0 0;

	font-size: 21px;

	line-height: 1.55;

	color: var(--color-text-secondary);
}


/* ==========================================================================
   Récit MacFinance
   ========================================================================== */

.story-section {

	position: relative;

	padding: 170px 0;

	overflow: hidden;
}


.story-content {

	width: min(
		calc(100% - 48px),
		1320px
	);

	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   En-tête du récit
   -------------------------------------------------------------------------- */

.story-header {

	width: min(100%, 1000px);

	margin: 0 auto 80px;
}


.story-number {

	margin: 0 0 28px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.08em;

	color: var(--color-accent);
}


.story-header h2 {

	margin: 0;

	font-size: clamp(52px, 6vw, 82px);

	line-height: 0.98;

	font-weight: 680;

	letter-spacing: -0.055em;
}


.story-header h2 span {

	color: var(--color-text-secondary);
}


.story-description {

	max-width: 610px;

	margin: 38px 0 0;

	font-size: 20px;

	line-height: 1.55;

	letter-spacing: -0.015em;

	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   01 — Je saisis
   -------------------------------------------------------------------------- */

.story-entry {

	background: var(--color-background);
}


.story-image {

	position: relative;

	width: 100%;

	margin: 0 auto;
}


.story-image img {

	display: block;

	width: 100%;
	height: auto;
}


/*
 * La même fenêtre que dans le Hero est utilisée ici,
 * mais présentée comme un véritable outil de travail.
 */

.story-image-entry {

	max-width: 1240px;

	padding: 8px;

	background: rgba(255, 255, 255, 0.65);

	border: 1px solid rgba(0, 0, 0, 0.06);

	border-radius: 22px;

	box-shadow:
		0 35px 90px rgba(0, 0, 0, 0.12),
		0 8px 28px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   Détail — Recherche d'un compte
   -------------------------------------------------------------------------- */

.story-detail {

	margin-top: 180px;

	display: grid;

	grid-template-columns:
		minmax(280px, 0.75fr)
		minmax(600px, 1.65fr);

	align-items: center;

	gap: 80px;
}


.story-detail-text {
	padding-left: 30px;
}


.story-detail-eyebrow {

	margin: 0 0 22px;

	font-size: 13px;
	font-weight: 650;

	letter-spacing: 0.04em;

	color: var(--color-text-secondary);
}


.story-detail h3 {

	margin: 0;

	font-size: clamp(38px, 4vw, 58px);

	line-height: 1.03;

	font-weight: 670;

	letter-spacing: -0.05em;
}


.story-detail h3 span {
	color: var(--color-text-secondary);
}


.story-detail-text > p:last-child {

	max-width: 430px;

	margin: 30px 0 0;

	font-size: 19px;

	line-height: 1.55;

	color: var(--color-text-secondary);
}


/* Image */

.story-detail-image {

	padding: 7px;

	background: rgba(255, 255, 255, 0.7);

	border: 1px solid rgba(0, 0, 0, 0.06);

	border-radius: 20px;

	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.11),
		0 8px 24px rgba(0, 0, 0, 0.05);
}


.story-detail-image img {

	display: block;

	width: 100%;
	height: auto;

	border-radius: 14px;
}


.story-image-entry img {
	border-radius: 15px;
}


/* ==========================================================================
   02 — Je vois
   ========================================================================== */

.story-live {

	position: relative;

	padding: 180px 0 200px;

	overflow: hidden;

	background: #101011;

	color: #ffffff;
}


.story-live-content {

	width: min(
		calc(100% - 48px),
		1180px
	);

	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */

.story-live-header {

	max-width: 900px;

	margin: 0 auto;

	text-align: center;
}


.story-live-number {

	margin: 0 0 32px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.08em;

	color: #2997ff;
}


.story-live-header h2 {

	margin: 0;

	font-size: clamp(58px, 7vw, 96px);

	line-height: 0.96;

	font-weight: 680;

	letter-spacing: -0.06em;
}


.story-live-header h2 span {
	color: #86868b;
}


.story-live-introduction {

	max-width: 650px;

	margin: 42px auto 0;

	font-size: 21px;

	line-height: 1.55;

	color: #a1a1a6;
}

/* ==========================================================================
   03 — Je contrôle
   ========================================================================== */

.story-control {

	padding-top: 180px;
	padding-bottom: 190px;

	background: #ffffff;
}



/* ==========================================================================
   04 — Je comprends
   ========================================================================== */

.story-understand {

	position: relative;

	padding: 190px 0 210px;

	overflow: hidden;

	background: #101011;

	color: #ffffff;
}


.story-understand-content {

	width: min(
		calc(100% - 48px),
		1180px
	);

	margin: 0 auto;
}


/* ==========================================================================
   Essayer MacFinance
   ========================================================================== */

.try-macfinance {
	padding: 190px 0 200px;

	background: #101011;
	color: #ffffff;

	text-align: center;
}


.try-macfinance-content {
	width: min(
		calc(100% - 48px),
		900px
	);

	margin: 0 auto;
}


.try-eyebrow {
	margin: 0 0 34px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.06em;

	color: #2997ff;
}


.try-macfinance h2 {
	margin: 0;

	font-size: clamp(64px, 8vw, 110px);
	line-height: 0.96;

	font-weight: 680;
	letter-spacing: -0.06em;
}


.try-macfinance h2 span {
	color: #86868b;
}


.try-introduction {
	max-width: 650px;

	margin: 42px auto 0;

	font-size: 21px;
	line-height: 1.55;

	color: #a1a1a6;
}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.try-actions {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 14px;

	margin-top: 50px;
}


.try-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding: 0 25px;

	border-radius: 999px;

	font-size: 16px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}


.try-button:hover {
	transform: translateY(-1px);
}


.try-button-primary {
	background: #007aff;
	color: #ffffff;
}


.try-button-primary:hover {
	background: #1687ff;
	color: #ffffff;
}


.try-button-secondary {
	border: 1px solid rgba(255,255,255,0.22);

	background: transparent;
	color: #ffffff;
}


.try-button-secondary:hover {
	border-color: rgba(255,255,255,0.38);

	background: rgba(255,255,255,0.06);
	color: #ffffff;
}


.try-note {
	margin: 30px auto 0;
	max-width: 520px;
	font-size: 14px;
	line-height: 1.5;
	color: #86868b;
	text-align: center;
}


/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */

.understand-header {

	max-width: 900px;

	margin: 0 auto;

	text-align: center;
}


.understand-number {

	margin: 0 0 34px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.08em;

	color: #2997ff;
}


.understand-header h2 {

	margin: 0;

	font-size: clamp(58px, 7vw, 96px);

	line-height: 0.98;

	font-weight: 680;

	letter-spacing: -0.06em;
}


.understand-introduction {

	max-width: 650px;

	margin: 40px auto 0;

	font-size: 21px;

	line-height: 1.55;

	color: #a1a1a6;
}


/* --------------------------------------------------------------------------
   Résultat
   -------------------------------------------------------------------------- */

.result-display {

	margin-top: 125px;

	text-align: center;
}


.result-value {

	margin: 0;

	font-size: clamp(82px, 12vw, 165px);

	line-height: 0.9;

	font-weight: 650;

	letter-spacing: -0.065em;

	color: #ffffff;
}


.result-label {

	margin: 30px 0 0;

	font-size: 19px;
	font-weight: 600;

	color: #86868b;
}


/* --------------------------------------------------------------------------
   Transition
   -------------------------------------------------------------------------- */

.understand-transition {

	margin: 160px auto 0;

	text-align: center;
}


.understand-transition p {

	margin: 0;

	font-size: clamp(30px, 4vw, 54px);

	line-height: 1.12;

	font-weight: 620;

	letter-spacing: -0.045em;
}


.understand-transition p + p {

	margin-top: 5px;

	color: #86868b;
}


/* --------------------------------------------------------------------------
   Document — Comptes de résultats
   -------------------------------------------------------------------------- */

.understand-document {

	margin-top: 130px;

	display: grid;

	grid-template-columns:
		minmax(280px, 0.75fr)
		minmax(600px, 1.65fr);

	align-items: center;

	gap: 80px;
}


.understand-document-text {

	padding-left: 30px;
}


.understand-eyebrow {

	margin: 0 0 22px;

	font-size: 13px;
	font-weight: 650;

	letter-spacing: 0.04em;

	color: #86868b;
}


.understand-document h3 {

	margin: 0;

	font-size: clamp(38px, 4vw, 58px);

	line-height: 1.03;

	font-weight: 670;

	letter-spacing: -0.05em;
}


.understand-document h3 span {

	color: #86868b;
}


.understand-document-text > p:last-child {

	max-width: 430px;

	margin: 30px 0 0;

	font-size: 19px;

	line-height: 1.55;

	color: #a1a1a6;
}


.understand-document-image {

	padding: 7px;

	background: rgba(255, 255, 255, 0.07);

	border: 1px solid rgba(255, 255, 255, 0.10);

	border-radius: 20px;

	box-shadow:
		0 35px 90px rgba(0, 0, 0, 0.32),
		0 8px 28px rgba(0, 0, 0, 0.20);
}


.understand-document-image img {

	display: block;

	width: 100%;
	height: auto;

	border-radius: 14px;
}






/* --------------------------------------------------------------------------
   Extrait de compte
   -------------------------------------------------------------------------- */

.control-document {

	max-width: 1240px;

	margin: 0 auto;

	padding: 8px;

	background: #f7f7f9;

	border: 1px solid rgba(0, 0, 0, 0.06);

	border-radius: 22px;

	box-shadow:
		0 35px 90px rgba(0, 0, 0, 0.10),
		0 8px 28px rgba(0, 0, 0, 0.05);
}


.control-document img {

	display: block;

	width: 100%;
	height: auto;

	border-radius: 15px;
}


/* --------------------------------------------------------------------------
   Balance générale
   -------------------------------------------------------------------------- */

.control-overview {

	margin-top: 190px;

	display: grid;

	grid-template-columns:
		minmax(280px, 0.75fr)
		minmax(600px, 1.65fr);

	align-items: center;

	gap: 80px;
}


.control-overview-text {
	padding-left: 30px;
}


.control-overview h3 {

	margin: 0;

	font-size: clamp(38px, 4vw, 58px);

	line-height: 1.03;

	font-weight: 670;

	letter-spacing: -0.05em;
}


.control-overview h3 span {
	color: var(--color-text-secondary);
}


.control-overview-text > p:last-child {

	max-width: 430px;

	margin: 30px 0 0;

	font-size: 19px;

	line-height: 1.55;

	color: var(--color-text-secondary);
}


.control-overview-image {

	padding: 7px;

	background: #f7f7f9;

	border: 1px solid rgba(0, 0, 0, 0.06);

	border-radius: 20px;

	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.09),
		0 8px 24px rgba(0, 0, 0, 0.04);
}


.control-overview-image img {

	display: block;

	width: 100%;
	height: auto;

	border-radius: 14px;
}


/* --------------------------------------------------------------------------
   Démonstration du solde
   -------------------------------------------------------------------------- */

.balance-demo {

	max-width: 920px;

	margin: 130px auto 0;

	text-align: center;
}


.balance-account {

	margin-bottom: 70px;
}


.balance-label {

	margin: 0 0 8px;

	font-size: 14px;
	font-weight: 600;

	color: #86868b;
}


.balance-name {

	margin: 0;

	font-size: 24px;
	font-weight: 600;

	letter-spacing: -0.025em;
}


/* Valeurs */

.balance-values {

	display: grid;

	grid-template-columns:
		1fr
		auto
		1fr;

	align-items: center;

	gap: 55px;
}


.balance-before,
.balance-after {

	display: flex;

	flex-direction: column;

	align-items: center;
}


.balance-caption {

	margin-bottom: 18px;

	font-size: 13px;
	font-weight: 600;

	letter-spacing: 0.03em;

	color: #86868b;
}


.balance-before strong,
.balance-after strong {

	font-size: clamp(55px, 7vw, 90px);

	line-height: 1;

	font-weight: 650;

	letter-spacing: -0.055em;
}


.balance-before strong {
	color: #86868b;
}


.balance-after strong {
	color: #ffffff;
}


.balance-arrow {

	padding-top: 25px;

	font-size: 38px;

	color: #2997ff;
}


/* Message */

.balance-message {

	margin-top: 110px;
}


.balance-message p {

	margin: 0;

	font-size: clamp(28px, 3.5vw, 46px);

	line-height: 1.15;

	font-weight: 620;

	letter-spacing: -0.04em;
}


.balance-message p + p {

	margin-top: 5px;

	color: #a1a1a6;
}


.balance-message span {

	display: block;

	margin-top: 28px;

	font-size: 16px;

	color: #6e6e73;
}

/* --------------------------------------------------------------------------
   Animation du solde
   -------------------------------------------------------------------------- */

.balance-before,
.balance-arrow,
.balance-after {

	transition:
		opacity 700ms ease,
		transform 700ms ease;
}


/*
 * État initial
 */

.balance-before {

	opacity: 1;
}


.balance-arrow {

	opacity: 0;

	transform: translateY(-10px);
}


.balance-after {

	opacity: 0;

	transform: translateY(12px);
}


/*
 * Le solde initial s'efface légèrement.
 */

.balance-demo.is-visible .balance-before {

	opacity: 0.42;

	transition-delay: 150ms;
}


/*
 * Puis apparaît le mouvement.
 */

.balance-demo.is-visible .balance-arrow {

	opacity: 1;

	transform: translateY(0);

	transition-delay: 500ms;
}


/*
 * Enfin le nouveau solde devient visible.
 */

.balance-demo.is-visible .balance-after {

	opacity: 1;

	transform: translateY(0);

	transition-delay: 850ms;
}


/* ==========================================================================
   Golden Gate
   ========================================================================== */

/* ==========================================================================
   Philosophie — transition
   ========================================================================== */

.closing-philosophy {

	padding: 210px 0 230px;

	background: #f5f5f7;

	color: var(--color-text);
}


.closing-philosophy-content {

	width: min(
		calc(100% - 48px),
		1050px
	);

	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Première idée
   -------------------------------------------------------------------------- */

.closing-statement {

	max-width: 1000px;
}


.closing-statement p {

	margin: 0;

	font-size: clamp(48px, 6vw, 82px);

	line-height: 1.03;

	font-weight: 670;

	letter-spacing: -0.055em;
}


.closing-statement p + p {

	margin-top: 8px;

	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Principe
   -------------------------------------------------------------------------- */

.closing-principle {
	max-width: 760px;
	margin: 190px 0 0 auto;
	text-align: right;
	transform: translateX(70px);
}


.closing-principle p {

	margin: 0;

	font-size: clamp(34px, 4.5vw, 60px);

	line-height: 1.08;

	font-weight: 620;

	letter-spacing: -0.045em;
}


.closing-principle p:first-child {

	color: var(--color-text-secondary);
}


.closing-principle p + p {

	margin-top: 8px;
}


/* ==========================================================================
   MacFinance 9.4 — Golden Gate
   ========================================================================== */

.golden-gate {

	min-height: 900px;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 170px 24px;

	overflow: hidden;

	background: #ffffff;

	color: var(--color-text);

	text-align: center;
}


.golden-gate-content {

	width: 100%;
	max-width: 1200px;

	margin: 0 auto;
}


.golden-gate-product {

	margin: 0 0 45px;

	font-size: 18px;
	font-weight: 650;

	letter-spacing: -0.02em;

	color: var(--color-text-secondary);
}


.golden-gate h2 {

	margin: 0;

	font-size: clamp(180px, 28vw, 390px);

	line-height: 0.72;

	font-weight: 700;

	letter-spacing: -0.085em;
}


.golden-gate-name {

	margin: 70px 0 0;

	font-size: clamp(40px, 5vw, 68px);

	line-height: 1;

	font-weight: 650;

	letter-spacing: -0.05em;
}


.golden-gate-introduction {

	margin: 32px 0 0;

	font-size: 20px;

	color: var(--color-text-secondary);
}


/* ==========================================================================
   Essayer MacFinance
   ========================================================================== */

.try-macfinance {

	padding: 190px 0 200px;

	background: #101011;

	color: #ffffff;

	text-align: center;
}


.try-macfinance-content {

	width: min(
		calc(100% - 48px),
		900px
	);

	margin: 0 auto;
}


.try-eyebrow {

	margin: 0 0 34px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.06em;

	color: #2997ff;
}


.try-macfinance h2 {

	margin: 0;

	font-size: clamp(64px, 8vw, 110px);

	line-height: 0.96;

	font-weight: 680;

	letter-spacing: -0.06em;
}


.try-macfinance h2 span {

	color: #86868b;
}


.try-introduction {

	max-width: 650px;

	margin: 42px auto 0;

	font-size: 21px;
	line-height: 1.55;

	color: #a1a1a6;
}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.try-actions {

	display: flex;

	align-items: center;
	justify-content: center;

	gap: 14px;

	margin-top: 50px;
}


.try-button {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding: 0 25px;

	border-radius: 999px;

	font-size: 16px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}


.try-button:hover {

	transform: translateY(-1px);
}


.try-button-primary {

	background: #007aff;

	color: #ffffff;
}


.try-button-primary:hover {

	background: #1687ff;

	color: #ffffff;
}


.try-button-secondary {

	border: 1px solid rgba(255,255,255,0.22);

	background: transparent;

	color: #ffffff;
}


.try-button-secondary:hover {

	border-color: rgba(255,255,255,0.38);

	background: rgba(255,255,255,0.06);

	color: #ffffff;
}


/* =========================================================
   ILS UTILISENT MACFINANCE
========================================================= */

.customer-stories {
    padding: 160px 24px 170px;

    background: #ffffff;
    color: #1d1d1f;
}

.customer-stories-content {
    width: min(100%, 1040px);
    margin: 0 auto;
}


/* HEADER */

.customer-stories-header {
    max-width: 780px;
    margin-bottom: 130px;
}

.customer-stories-eyebrow {
    margin: 0 0 26px;

    font-size: 14px;
    font-weight: 650;
    letter-spacing: .02em;

    color: #007aff;
}

.customer-stories-header h2 {
    margin: 0;

    font-size: clamp(58px, 8vw, 100px);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.055em;

    color: #1d1d1f;
}

.customer-stories-header h2 span {
    color: #86868b;
}

.customer-stories-introduction {
    max-width: 620px;

    margin: 42px 0 0;

    font-size: 21px;
    line-height: 1.5;
    letter-spacing: -.02em;

    color: #6e6e73;
}


/* TÉMOIGNAGES */

.customer-story {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 80px;

    padding: 75px 0;

    border-top: 1px solid #e5e5e7;
}

.customer-story-duration {
    margin: 0;

    font-size: 26px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;

    color: #1d1d1f;
}

.customer-story-profession {
    margin: 12px 0 0;

    font-size: 14px;
    line-height: 1.45;

    color: #86868b;
}

.customer-story-quote blockquote {
    max-width: 650px;

    margin: 0;

    font-size: clamp(27px, 3.2vw, 39px);
    font-weight: 550;
    line-height: 1.18;
    letter-spacing: -.035em;

    color: #1d1d1f;
}

.customer-story-author {
    margin: 30px 0 0;

    font-size: 14px;
    font-weight: 500;

    color: #86868b;
}


/* CONCLUSION */

.customer-stories-closing {
    margin-top: 100px;
    padding-top: 80px;

    border-top: 1px solid #e5e5e7;
}

.customer-stories-closing p {
    margin: 0;

    font-size: clamp(38px, 5vw, 62px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.045em;

    color: #86868b;
}

.customer-stories-closing strong {
    font-weight: 650;
    color: #1d1d1f;
}


/* ==========================================================================
   Tarifs
   ========================================================================== */

.pricing {
	padding: 190px 0 200px;

	background: #f5f5f7;
	color: var(--color-text);
}


.pricing-content {
	width: min(
		calc(100% - 48px),
		1100px
	);

	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */

.pricing-header {
	max-width: 850px;
}


.pricing-eyebrow {
	margin: 0 0 30px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.06em;

	color: #007aff;
}


.pricing-header h2 {
	margin: 0;

	font-size: clamp(58px, 7vw, 92px);
	line-height: 0.98;

	font-weight: 680;
	letter-spacing: -0.06em;
}


.pricing-header h2 span {
	color: var(--color-text-secondary);
}


.pricing-introduction {
	max-width: 650px;

	margin: 38px 0 0;

	font-size: 21px;
	line-height: 1.55;

	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Licence principale
   -------------------------------------------------------------------------- */

.pricing-main {
	margin-top: 100px;

	padding: 55px 60px;

	background: #ffffff;

	border-radius: 30px;

	box-shadow:
		0 20px 60px rgba(0,0,0,0.06);
}


.pricing-main-heading {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 50px;
}


.pricing-label {
	margin: 0 0 12px;

	font-size: 14px;
	font-weight: 650;

	color: var(--color-text-secondary);
}


.pricing-main h3 {
	margin: 0;

	font-size: clamp(34px, 4vw, 50px);
	line-height: 1;

	font-weight: 650;
	letter-spacing: -0.045em;
}


.pricing-price {
	text-align: right;
}


.pricing-price > div,
.pricing-additional-price > div {
	display: flex;

	align-items: flex-start;
	justify-content: flex-end;

	gap: 8px;
}


.pricing-currency {
	padding-top: 12px;

	font-size: 17px;
	font-weight: 650;

	color: var(--color-text-secondary);
}


.pricing-amount {
	font-size: clamp(54px, 6vw, 76px);
	line-height: 0.9;

	font-weight: 680;
	letter-spacing: -0.06em;
}


.pricing-price p,
.pricing-additional-price p {
	margin: 14px 0 0;

	font-size: 15px;

	color: var(--color-text-secondary);
}


.pricing-details {
	display: flex;

	gap: 36px;

	margin-top: 55px;
	padding-top: 35px;

	border-top: 1px solid #e5e5e7;
}


.pricing-details p {
	position: relative;

	margin: 0;
	padding-left: 18px;

	font-size: 16px;
	font-weight: 550;
}


.pricing-details p::before {
	content: "";

	position: absolute;

	left: 0;
	top: 0.55em;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #007aff;
}


/* --------------------------------------------------------------------------
   Poste supplémentaire
   -------------------------------------------------------------------------- */

.pricing-additional {
	display: grid;

	grid-template-columns: 1.25fr 0.75fr;

	align-items: center;

	gap: 70px;

	margin-top: 35px;

	padding: 55px 60px;

	border: 1px solid #dedee3;
	border-radius: 30px;

	background: rgba(255,255,255,0.45);
}


.pricing-additional h3 {
	margin: 0;

	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.04;

	font-weight: 650;
	letter-spacing: -0.045em;
}


.pricing-additional h3 span {
	color: var(--color-text-secondary);
}


.pricing-additional-text > p:last-child {
	max-width: 560px;

	margin: 28px 0 0;

	font-size: 17px;
	line-height: 1.55;

	color: var(--color-text-secondary);
}


.pricing-additional-price {
	text-align: right;
}


/* --------------------------------------------------------------------------
   Bas de section
   -------------------------------------------------------------------------- */

.pricing-footer {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	margin-top: 35px;
	padding: 0 8px;
}


.pricing-footer p {
	margin: 0;

	font-size: 13px;

	color: var(--color-text-secondary);
}


.pricing-footer a {
	font-size: 15px;
	font-weight: 600;

	color: #007aff;

	text-decoration: none;
}


.pricing-footer a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   Aide — questions essentielles
   ========================================================================== */

.home-help {
	padding: 180px 0 190px;

	background: #ffffff;
	color: var(--color-text);
}


.home-help-content {
	width: min(
		calc(100% - 48px),
		1100px
	);

	margin: 0 auto;

	display: grid;

	grid-template-columns: 0.8fr 1.2fr;

	gap: 100px;
}


.home-help-header {
	position: sticky;

	top: 150px;

	align-self: start;
}


.home-help-eyebrow {
	margin: 0 0 28px;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.06em;

	color: #007aff;
}


.home-help-header h2 {
	margin: 0;

	font-size: clamp(52px, 6vw, 78px);
	line-height: 0.98;

	font-weight: 680;
	letter-spacing: -0.055em;
}


.home-help-header h2 span {
	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.home-help-item {
	border-top: 1px solid #dedee3;
}


.home-help-item:last-child {
	border-bottom: 1px solid #dedee3;
}


.home-help-item summary {
	position: relative;

	padding: 32px 55px 32px 0;

	cursor: pointer;

	list-style: none;

	font-size: 20px;
	font-weight: 620;

	line-height: 1.35;

	letter-spacing: -0.02em;
}


.home-help-item summary::-webkit-details-marker {
	display: none;
}


.home-help-item summary::after {
	content: "+";

	position: absolute;

	right: 5px;
	top: 50%;

	transform: translateY(-50%);

	font-size: 28px;
	font-weight: 300;

	color: var(--color-text-secondary);
}


.home-help-item[open] summary::after {
	content: "−";
}


.home-help-answer {
	padding: 0 60px 32px 0;
}


.home-help-answer p {
	max-width: 620px;

	margin: 0;

	font-size: 17px;
	line-height: 1.6;

	color: var(--color-text-secondary);
}


/* ==========================================================================
   Signature finale
   ========================================================================== */

.final-signature {
	min-height: 820px;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 160px 24px;

	background: #101011;
	color: #ffffff;

	text-align: center;
}


.final-signature-content {
	width: 100%;
	max-width: 1100px;

	margin: 0 auto;
}


.final-product {
	margin: 0 0 48px;

	font-size: 15px;
	font-weight: 650;

	letter-spacing: -0.01em;

	color: #86868b;
}


.final-signature h2 {
	margin: 0;

	font-size: clamp(64px, 8vw, 112px);
	line-height: 0.96;

	font-weight: 680;
	letter-spacing: -0.06em;

	color: #ffffff;
}


.final-signature h2 span {
	color: #86868b;
}


.final-version {
	margin: 58px 0 0;

	font-size: 14px;
	font-weight: 600;

	letter-spacing: 0.02em;

	color: #2997ff;
}

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

.site-footer-logo {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
}

.site-footer {
	padding: 0 0 42px;

	background: #101011;
	color: #86868b;
}


.site-footer-content {
	width: min(
		calc(100% - 48px),
		1180px
	);

	margin: 0 auto;

	padding-top: 55px;

	border-top: 1px solid rgba(255,255,255,0.12);
}


/* --------------------------------------------------------------------------
   Partie principale
   -------------------------------------------------------------------------- */

.site-footer-main {
	display: grid;

	grid-template-columns: 1.6fr 1fr 1fr 1fr;

	gap: 70px;
}


/* --------------------------------------------------------------------------
   Marque
   -------------------------------------------------------------------------- */

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-brand img {
	display: block;

	width: 34px;
	height: 34px;

	object-fit: contain;

	filter: invert(1);
}


.footer-product {
	display: flex;
	flex-direction: column;

	margin: 20px 0 0;
}


.footer-product strong {
	font-size: 15px;
	font-weight: 650;

	color: #ffffff;
}


.footer-product span {
	margin-top: 3px;

	font-size: 11px;

	color: #86868b;
}


.footer-signature {
	margin: 30px 0 0;

	font-size: 18px;
	line-height: 1.35;

	font-weight: 550;

	color: #a1a1a6;
}


/* --------------------------------------------------------------------------
   Colonnes
   -------------------------------------------------------------------------- */

.footer-column {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 13px;
}


.footer-title {
	margin: 0 0 7px;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: #6e6e73;
}


.footer-column a {
	font-size: 14px;
	font-weight: 500;

	color: #a1a1a6;

	text-decoration: none;

	transition: color 160ms ease;
}


.footer-column a:hover {
	color: #ffffff;
}


/* --------------------------------------------------------------------------
   Bas du footer
   -------------------------------------------------------------------------- */

.site-footer-bottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	margin-top: 65px;
	padding-top: 25px;

	border-top: 1px solid rgba(255,255,255,0.08);
}


.site-footer-bottom p {
	margin: 0;

	font-size: 12px;

	color: #6e6e73;
}


.site-footer-bottom > div {
	display: flex;

	align-items: center;

	gap: 24px;
}


.site-footer-bottom a {
	font-size: 12px;

	color: #86868b;

	text-decoration: none;

	transition: color 160ms ease;
}


.site-footer-bottom a:hover {
	color: #ffffff;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {

	.site-header {
		padding: 10px 12px;
	}


	.site-navigation {

		grid-template-columns:
			1fr
			auto;

		padding-left: 16px;
	}


	.site-navigation-links,
	.site-navigation-client {
		display: none;
	}


	.site-navigation-menu {
		display: block;
	}


	.site-navigation-actions {
		gap: 8px;
	}


	.hero {

		min-height: 700px;

		padding-top: 150px;
	}


	.philosophy,
	.story-section {
		padding: 110px 0;
	}

	.story-detail {
	
		margin-top: 110px;
	
		grid-template-columns: 1fr;
	
		gap: 50px;
	}
	
	
	.story-detail-text {
	
		max-width: 650px;
	
		padding-left: 0;
	}

	.story-live {
		padding: 130px 0 150px;
	}
	
	
	.balance-demo {
		margin-top: 100px;
	}
	
	
	.balance-values {
		gap: 30px;
	}

	.story-control {
		padding-top: 120px;
		padding-bottom: 130px;
	}
	
	
	.control-overview {
	
		margin-top: 120px;
	
		grid-template-columns: 1fr;
	
		gap: 50px;
	}
	
	
	.control-overview-text {
	
		max-width: 650px;
	
		padding-left: 0;
	}

	.story-understand {
	
		padding: 130px 0 150px;
	}
	
	
	.result-display {
	
		margin-top: 95px;
	}
	
	
	.understand-transition {
	
		margin-top: 120px;
	}
	
	
	.understand-document {
	
		margin-top: 100px;
	
		grid-template-columns: 1fr;
	
		gap: 50px;
	}
	
	
	.understand-document-text {
	
		max-width: 650px;
	
		padding-left: 0;
	}

	.closing-philosophy {
	
		padding: 140px 0 160px;
	}
	
	
	.closing-principle {
		margin-top: 130px;
		transform: none;
	}
	
	
	.golden-gate {
	
		min-height: 720px;
	
		padding: 130px 20px;
	}

	.try-macfinance {
		padding: 150px 0 160px;
	}

	.pricing {
		padding: 140px 0 150px;
	}
	
	
	.pricing-main-heading {
		flex-direction: column;
	}
	
	
	.pricing-price {
		text-align: left;
	}
	
	
	.pricing-price > div {
		justify-content: flex-start;
	}
	
	
	.pricing-details {
		flex-direction: column;
	
		gap: 16px;
	}
	
	
	.pricing-additional {
		grid-template-columns: 1fr;
	
		gap: 45px;
	}
	
	
	.pricing-additional-price {
		text-align: left;
	}
	
	
	.pricing-additional-price > div {
		justify-content: flex-start;
	}
	
	
	.home-help {
		padding: 140px 0 150px;
	}


	.home-help-content {
		grid-template-columns: 1fr;

		gap: 70px;
	}


	.home-help-header {
		position: static;
	}


	.site-footer-main {
		grid-template-columns: 1.4fr 1fr 1fr;

		gap: 55px;
	}


	.footer-brand {
		grid-column: 1 / -1;
	}

    .customer-stories {
        padding-top: 120px;
        padding-bottom: 130px;
    }

    .customer-stories-header {
        margin-bottom: 90px;
    }

    .customer-story {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 50px;
    }

	.site-mobile-navigation {
		position: absolute;
	
		top: calc(100% + 10px);
		left: 16px;
		right: 16px;
	
		z-index: 1000;
	
		padding: 8px;
	
		border-radius: 22px;
	
		background: #ffffff;
	
		box-shadow:
			0 18px 50px rgba(0, 0, 0, .12);
			
		pointer-events: auto;
	}
	
	.site-mobile-navigation .site-mobile-client {
		margin-top: 8px;
		padding-top: 8px;
	
		border-top: 1px solid #e5e5e7;
	
		border-radius: 0;
	
		font-weight: 600;
	}


	.site-mobile-navigation.is-open {
		display: flex;
		flex-direction: column;
	}
	
	
	.site-mobile-navigation a {
		display: flex;
	
		align-items: center;
	
		min-height: 48px;
	
		padding: 0 14px;
	
		border-radius: 12px;
	
		font-size: 16px;
		font-weight: 550;
	
		color: #1d1d1f;
	
		text-decoration: none;
	}
	
	
	.site-mobile-navigation a:hover {
		background: #f5f5f7;
	}
}


@media (max-width: 600px) {

	.section-content {

		width: min(
			calc(100% - 32px),
			var(--content-width)
		);
	}


	.site-navigation-try {

		min-height: 40px;

		padding: 0 15px;
	}


	.hero {

		min-height: 620px;

		padding-left: 18px;
		padding-right: 18px;
	}


	.hero h1 {

		font-size: clamp(48px, 14vw, 70px);
	}


	.hero-introduction {

		font-size: 18px;
	}


	.philosophy h2 {

		font-size: 42px;
	}


	.section-introduction {

		font-size: 18px;
	}


	.journey h2 {

		font-size: 50px;
	}


	.golden-gate {

		min-height: 560px;
	}


	.golden-gate h2 {

		font-size: 42vw;
	}

	.story-content {
	
		width: calc(100% - 24px);
	}
	
	
	.story-header {
	
		margin-bottom: 50px;
	}
	
	
	.story-header h2 {
	
		font-size: 46px;
	}
	
	
	.story-description {
	
		font-size: 18px;
	}
	
	
	.story-image-entry {
	
		padding: 4px;
	
		border-radius: 14px;
	}
	
	
	.story-image-entry img {
		border-radius: 10px;
	}

	.story-detail {
		margin-top: 80px;
	}
	
	
	.story-detail h3 {
		font-size: 40px;
	}
	
	
	.story-detail-text > p:last-child {
		font-size: 18px;
	}
	
	
	.story-detail-image {
	
		padding: 4px;
	
		border-radius: 14px;
	}
	
	
	.story-detail-image img {
		border-radius: 10px;
	}
	
	.story-live {
	
		padding: 110px 0 130px;
	}
	
	
	.story-live-content {
	
		width: calc(100% - 32px);
	}
	
	
	.story-live-header h2 {
	
		font-size: 54px;
	}
	
	
	.story-live-introduction {
	
		font-size: 18px;
	}
	
	
	.balance-demo {
	
		margin-top: 85px;
	}
	
	
	.balance-account {
	
		margin-bottom: 55px;
	}
	
	
	.balance-values {
	
		grid-template-columns: 1fr;
	
		gap: 28px;
	}
	
	
	.balance-arrow {
	
		padding: 0;
	
		transform: rotate(0deg);
	}
	
	
	.balance-before strong,
	.balance-after strong {
	
		font-size: 64px;
	}
	
	
	.balance-message {
	
		margin-top: 80px;
	}
	
	.control-document,
	.control-overview-image {
	
		padding: 4px;
	
		border-radius: 14px;
	}
	
	
	.control-document img,
	.control-overview-image img {
	
		border-radius: 10px;
	}
	
	
	.control-overview {
	
		margin-top: 90px;
	}
	
	
	.control-overview h3 {
	
		font-size: 40px;
	}
	
	
	.control-overview-text > p:last-child {
	
		font-size: 18px;
	}
	
	
	
	.story-understand {

		padding: 110px 0 130px;
    }


	.story-understand-content {
	
		width: calc(100% - 32px);
	}
	
	
	.understand-header h2 {
	
		font-size: 54px;
	}
	
	
	.understand-introduction {
	
		font-size: 18px;
	}
	
	
	.result-display {
	
		margin-top: 80px;
	}
	
	
	.result-value {
	
		font-size: 74px;
	}
	
	
	.understand-transition {
	
		margin-top: 100px;
	}
	
	
	.understand-document {
	
		margin-top: 80px;
	}
	
	
	.understand-document h3 {
	
		font-size: 40px;
	}
	
	
	.understand-document-text > p:last-child {
	
		font-size: 18px;
	}
	
	
	.understand-document-image {
	
		padding: 4px;
	
		border-radius: 14px;
	}
	
	
	.understand-document-image img {
	
		border-radius: 10px;
	}
	
	.closing-philosophy {

		padding: 110px 0 130px;
	}


	.closing-philosophy-content {
	
		width: calc(100% - 32px);
	}
	
	
	.closing-statement p {
	
		font-size: 44px;
	}
	
	
	.closing-principle {
	
		margin-top: 100px;
	
		text-align: left;
	}
	
	
	.closing-principle p {
	
		font-size: 36px;
	}
	
	
	.golden-gate {
	
		min-height: 620px;
	
		padding: 110px 16px;
	}
	
	
	.golden-gate-product {
	
		margin-bottom: 35px;
	}
	
	
	.golden-gate h2 {
	
		font-size: 47vw;
	}
	
	
	.golden-gate-name {
	
		margin-top: 50px;
	
		font-size: 42px;
	}
	
	
	.golden-gate-introduction {
	
		font-size: 18px;
	}
	
	.try-macfinance {

		padding: 120px 0 130px;
	}


	.try-macfinance-content {
	
		width: calc(100% - 32px);
	}
	
	
	.try-macfinance h2 {
	
		font-size: 58px;
	}
	
	
	.try-introduction {
	
		margin-top: 32px;
	
		font-size: 18px;
	}
	
	
	.try-actions {
	
		flex-direction: column;
	
		margin-top: 40px;
	}
	
	
	.try-button {
	
		width: 100%;
		max-width: 300px;
	}
	
	.pricing {
		padding: 110px 0 120px;
	}


	.pricing-content {
		width: calc(100% - 32px);
	}
	
	
	.pricing-header h2 {
		font-size: 54px;
	}
	
	
	.pricing-introduction {
		font-size: 18px;
	}
	
	
	.pricing-main {
		margin-top: 70px;
	
		padding: 38px 28px;
	
		border-radius: 22px;
	}
	
	
	.pricing-additional {
		padding: 38px 28px;
	
		border-radius: 22px;
	}
	
	
	.pricing-footer {
		align-items: flex-start;
		flex-direction: column;
	}
	
		.home-help {
		padding: 110px 0 120px;
	}


	.home-help-content {
		width: calc(100% - 32px);

		gap: 55px;
	}


	.home-help-header h2 {
		font-size: 52px;
	}


	.home-help-item summary {
		padding: 26px 45px 26px 0;

		font-size: 18px;
	}


	.home-help-answer {
		padding: 0 40px 28px 0;
	}
	
	
	.final-signature {
		min-height: 650px;

		padding: 120px 16px;
	}


	.final-product {
		margin-bottom: 38px;
	}


	.final-signature h2 {
		font-size: 56px;
	}


	.final-version {
		margin-top: 45px;
	}
	
	
	.site-footer {
		padding-bottom: 32px;
	}


	.site-footer-content {
		width: calc(100% - 32px);

		padding-top: 45px;
	}


	.site-footer-main {
		grid-template-columns: 1fr 1fr;

		gap: 45px 30px;
	}


	.footer-brand {
		grid-column: 1 / -1;
	}


	.site-footer-bottom {
		align-items: flex-start;
		flex-direction: column;

		margin-top: 50px;
	}


	.site-footer-bottom > div {
		align-items: flex-start;
		flex-direction: column;

		gap: 10px;
	}
	
	    .customer-stories {
        padding: 95px 20px 105px;
    }

    .customer-stories-header {
        margin-bottom: 70px;
    }

    .customer-stories-introduction {
        margin-top: 32px;
        font-size: 18px;
    }

    .customer-story {
        display: block;
        padding: 55px 0;
    }

    .customer-story-meta {
        margin-bottom: 32px;
    }

    .customer-story-quote blockquote {
        font-size: 27px;
    }

    .customer-stories-closing {
        margin-top: 60px;
        padding-top: 60px;
    }

}

/* ==========================================================================
   404
   ========================================================================== */

.error-page {

	min-height: 78vh;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 160px 24px 120px;

	text-align: center;
}


.error-page-content {

	width: 100%;
	max-width: 900px;
}


.error-page-code {

	margin: 0 0 24px;

	font-size: 1rem;
	font-weight: 600;

	letter-spacing: .12em;

	color: #86868b;
}


.error-page h1 {

	margin: 0;

	font-size: clamp(3.5rem, 8vw, 7rem);
	font-weight: 700;
	line-height: .95;

	letter-spacing: -.055em;
}


.error-page h1 span {

	color: #86868b;
}


.error-page-introduction {

	margin: 40px auto 0;

	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.5;

	color: #6e6e73;
}


.error-page-actions {

	margin-top: 40px;
}


.error-page-button {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;

	padding: 0 24px;

	border-radius: 999px;

	background: #0071e3;
	color: #ffffff;

	font-weight: 600;
	text-decoration: none;
}


.error-page-button:hover {

	background: #0077ed;
	color: #ffffff;
}


@media (max-width: 600px) {

	.error-page {

		min-height: 72vh;

		padding:
			130px
			24px
			80px;
	}

	.error-page h1 {

		font-size: clamp(3rem, 15vw, 4.5rem);
	}
}