/* stylesheet for base layout */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
	This is where reset, normalize & box-sizing styles go.
*/

*,
*:before,
*:after {
	box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
	box-sizing: content-box;
	height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
	/* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
	padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}
/* ==========================
   Global Variables
   ========================== */

:root {
	/* Brand Colors */
	--color-rubine-1: #ce0058;
	--color-rubine-2: #e81259;
	--color-rubine-3: #ff2970;

	/* Neutral Palette */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-off-white: #f4f3e9;
	--color-beige: #ebe9e1;

	/* Accent Colors */
	--color-performance-yellow: #ddff0e;
	--color-midnight: #1e1e1e;

	/* Border Colors */
	--color-border-divider: #b1b1b1;

	/* Form Colors */
	--color-border: #000000;
	--color-error: #ef6b51;
	--color-disabled: #383838;

	/* Typography */
	--font-primary: "IvarDisplay-Regular", "Times New Roman", "serif";
	--font-secondary: "Sohne-Buch", "Helvetica", "sans-serif";
	--font-tertiary: "SohneMono-Buch", "Roboto Mono", "sans-serif";
	--font-italics: "IvarDisplay-Italic", "Times New Roman Italic", "serif";

	/* Breakpoints for JS/docs only */
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1440px;
}

/* ==========================
   Media Query Examples - media queries still need literals
   ==========================

	Example:

	@media (min-width: 480px) {
		body {
			font-size: 15px;
		}
	}

	@media (min-width: 768px) {
		body {
			font-size: 16px;
		}
	}

	@media (min-width: 992px) {
		body {
			font-size: 17px;
		}
	}

	@media (min-width: 1280px) {
		body {
			font-size: 18px;
		}
	}

	@media (min-width: 1440px) {
		body {
			font-size: 19px;
		}
	}
   ========================== */

/* Objects

Non-cosmetic design patterns including grid and layout classes)

*/



/* CSS variables */

:root {
	--column-gap: 2.13%;
	--column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}


	.row-fluid .span1,
	.row-fluid .span2,
	.row-fluid .span3,
	.row-fluid .span4,
	.row-fluid .span5,
	.row-fluid .span6,
	.row-fluid .span7,
	.row-fluid .span8,
	.row-fluid .span9,
	.row-fluid .span10,
	.row-fluid .span11,
	.row-fluid .span12{
	min-height: 1px;
	width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
	.row-fluid {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	
		.row-fluid .span1 {
			width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span2 {
			width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span3 {
			width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span4 {
			width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span5 {
			width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span6 {
			width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span7 {
			width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span8 {
			width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span9 {
			width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span10 {
			width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
		}
	
		.row-fluid .span11 {
			width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
		}
	
}
.content-wrapper {
	margin: 0 auto;
	padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
	.content-wrapper {
		padding: 0;
	}
}

.dnd-section > .row-fluid {
	margin: 0 auto;
}

.dnd-section .dnd-column {
	padding: 0 1rem;
}

@media (max-width: 767px) {
	.dnd-section .dnd-column {
		padding: 0;
	}
}

/* Elements

Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)

*/

* :focus-visible {
	outline: 4px auto var(--color-rubine-1);
	outline-offset: 4px;
}

form .focus-visible {
	outline: 4px auto var(--color-rubine-1);
	outline-offset: 4px;
}

html {
	font-size: 16px;
	background-color: var(--color-off-white);
}

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body,
body p,
body li {
	font-family: var(--font-secondary);
	font-size: 16px;
	line-height: 130%;
	overflow-wrap: break-word;
	font-style: normal;
	font-weight: 400;
}

@media (min-width: 768px) {
	body,
	body p,
	body li {
		font-size: 20px;
	}
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
	line-break: strict;
	overflow-wrap: normal;
	word-break: break-all;
}

/* Body text modifiers */

.body-2,
.body-2 p,
.body-2 li,
.body-3,
.body-3 p,
.body-3 li {
	font-size: 16px;
}

.body-4,
.body-4 p,
.body-4 li {
	font-size: 12px;
	letter-spacing: 0.12px;
}

@media (min-width: 768px) {
	.body-2,
	.body-2 p,
	.body-2 li {
		font-size: 18px;
	}

	.body-3,
	.body-3 p,
	.body-3 li {
		font-size: 16px;
	}

	.body-4,
	.body-4 p,
	.body-4 li {
		font-size: 14px;
	}
}

/* Paragraphs */

p {
	font-family: var(--font-secondary);
	font-size: 20px;
	line-height: 130%;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: 400;
	margin: 0 0 1.4rem;
}

/* Anchors */

a.link,
p a {
	cursor: pointer;
	text-decoration: underline;
}

a.link:hover {
	color: var(--color-rubine-1);
}

a.link:active {
	color: var(--color-rubine-1);
}

a.link:focus-visible {
	outline: 2px solid var(--color-rubine-1);
	outline-offset: 4px;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 1.4rem;
}

h1,
.h1 {
	font-family: var(--font-primary);
	font-size: clamp(88px, calc(82px + 1.964vw), 110px);
	line-height: 105%;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h2,
.h2 {
	font-family: var(--font-primary);
	font-size: clamp(64px, calc(69px + 1.607vw), 82px);
	line-height: 110%;
	font-style: normal;
	font-weight: 400;
}

h3,
.h3 {
	font-family: var(--font-primary);
	font-size: clamp(51px, calc(48px + 1.161vw), 64px);
	line-height: 110%;
	font-style: normal;
	font-weight: 400;
}

h4,
.h4 {
	font-family: var(--font-secondary);
	font-size: clamp(43px, calc(40px + 0.8vw), 50px);
	line-height: 110%;
	font-style: normal;
	font-weight: 400;
}

h5,
.h5 {
	font-family: var(--font-secondary);
	font-size: clamp(32px, calc(30px + 0.714vw), 40px);
	line-height: 110%;
	font-style: normal;
	font-weight: 400;
}

h6,
.h6 {
	font-family: var(--font-secondary);
	font-size: clamp(21px, calc(20px + 0.446vw), 26px);
	line-height: 112%;
	font-style: normal;
	font-weight: 400;
}

h6.h6-sub,
.h6.h6-sub {
	font-family: var(--font-secondary);
	font-size: clamp(16px, calc(15px + 0.357vw), 20px);
	line-height: 130%;
	font-style: normal;
	font-weight: 500;
}

.text-stat {
	font-family: var(--font-secondary);
	font-size: clamp(104px, calc(97px + 2.321vw), 130px);
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1.3px;
}

.sohne-headings h1,
.sohne-headings h2,
.sohne-headings h3,
.sohne-headings h4,
.sohne-headings h5,
.sohne-headings h6 {
	font-family: var(--font-secondary);
}

.sohne-headings h2 {
	font-size: clamp(1.625rem, 0.69rem + 3.99vw, 3.125rem);
}

.sohne-headings h3 {
	font-size: clamp(22px, 15.45px + 2.05vw, 40px);
}

.sohne-headings .h6 {
	font-size: clamp(21px, calc(20px + 0.446vw), 26px);
}

/* Eyebrow/Tagline */
.eyebrow {
	font-family: var(--font-secondary);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
}

@media (min-width: 768px) {
	.eyebrow {
		font-size: 20px;
	}
}

.eyebrow::before {
	content: "●";
	padding-right: 15px;
	position: relative;
	top: -2px;
}

.tag {
	font-family: var(--font-tertiary);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1.17px;
	text-transform: uppercase;
}

.tag--large {
	font-size: 10px;
	letter-spacing: 0.884px;
}

@media (min-width: 768px) {
	.tag--large {
		font-size: 15px;
		letter-spacing: 1.35px;
	}
}

/* Font Helpers */
.font-ivar {
	font-family: var(--font-primary);
}

.font-sohne {
	font-family: var(--font-secondary);
}

.font-sohne-mono {
	font-family: var(--font-tertiary);
}

/* Lists */

ul,
ol {
	margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
	margin: 0;
}

ul.no-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Code blocks */

pre {
	overflow: auto;
}

code {
	vertical-align: bottom;
}

/* Blockquotes */

blockquote {
	border-left: 2px solid;
	border-left-color: var(--color-black);
	margin: 0 0 1.4rem;
	padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
	border: none;
	border-bottom: 1px solid var(--color-border);
}

/* Image alt text */

img {
	font-size: 0.583rem;
	word-break: normal;
}

/* Italics */

i,
em {
	font-style: italic;
}

strong {
	font-weight: 500;
}
/* ====================================
   Base Button (Token Driven)
==================================== */

.button,
.hs-button {
	font-family: var(--font-secondary);
	line-height: 100%;
	font-size: 15px;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 32px;
	margin: 0;
	white-space: normal;
	text-decoration: none;

	/* Variant Tokens */
	--btn-c1: var(--color-rubine-1);
	--btn-c2: #68002c;
	--btn-fallback: var(--color-rubine-1);

	/* Slide Control */
	--x: 1%;

	/* State Tokens */
	--btn-bg:
		linear-gradient(
				90deg,
				var(--btn-c1) 0%,
				var(--btn-c1) 50%,
				var(--btn-c2) 100%
			)
			var(--x) / 200%,
		var(--btn-fallback);

	--btn-border: transparent;
	--btn-text: var(--color-white);

	/* Apply Tokens */
	background: var(--btn-bg);
	border: 1px solid var(--btn-border);
	color: var(--btn-text);

	cursor: pointer;
	transition:
		background-color 0.3s ease,
		background-position 0.6s cubic-bezier(0, 0.55, 0.45, 1),
		border-color 0.15s linear,
		color 0.15s linear;
}

.button svg path {
	transition: fill 0.3s ease;
}

/* Hover */
.button:hover,
.hs-button:hover {
	--x: 99%;
	--btn-border: transparent;
	--btn-text: var(--color-white);
	color: var(--btn-text);
}

/* Focus */
.button:focus-visible,
.hs-button:focus-visible {
	--btn-bg: var(--color-rubine-1);
	--btn-border: transparent;
	--btn-text: var(--color-white);

	outline: 2px solid var(--color-white);
	outline-offset: -6px;
}

/* Active */
.button:active,
.hs-button:active {
	--btn-bg: #68002c;
	--btn-border: transparent;
	--btn-text: var(--color-white);
}

/* Disabled */
.button:disabled,
.hs-button:disabled,
button:disabled {
	--btn-bg: var(--color-disabled);
	--btn-border: var(--color-disabled);
	--btn-text: rgba(155, 155, 155, 0.3);

	cursor: not-allowed;
	pointer-events: none;
}

/* ====================================
   Secondary Variant
==================================== */

.button--secondary,
.hs-button.button--secondary {
	--btn-bg: var(--color-performance-yellow);
	--btn-border: var(--color-performance-yellow);
	--btn-text: var(--color-black);
}

.button--secondary svg path {
	fill: var(--color-black);
}

/* Hover */
.button--secondary:hover,
.hs-button.button--secondary:hover {
	--x: 0;
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

.button--secondary:hover svg path {
	fill: var(--color-black);
}

/* Focus */
.button--secondary:focus-visible,
.hs-button.button--secondary:focus-visible {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
	outline: 2px solid var(--color-black);
}

/* Active */
.button--secondary:active,
.hs-button.button--secondary:active {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

/* ====================================
   Outline Black Variant
==================================== */

.button--outline-black,
.hs-button.button--outline-black {
	backdrop-filter: blur(12px);
	transform: translate3d(0px, 0px, 0px);
	--btn-bg: var(--color-offwhite);
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
}

.button--outline-black svg path {
	fill: var(--color-black);
}

/* Hover */
.button--outline-black:hover,
.hs-button.button--outline-black:hover {
	--x: 0;
	--btn-bg: var(--color-black);
	--btn-border: var(--color-black);
	--btn-text: var(--color-white);
}

.button--outline-black:hover svg path {
	fill: var(--color-white);
}

/* Focus */
.button--outline-black:focus-visible,
.hs-button.button--outline-black:focus-visible {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

/* Active */
.button--outline-black:active,
.hs-button.button--outline-black:active {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

/* ====================================
   Outline White Variant
==================================== */

.button--outline-white,
.hs-button.button--outline-white {
	backdrop-filter: blur(12px);
	transform: translate3d(0px, 0px, 0px);
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

/* Hover */
.button--outline-white:hover,
.hs-button.button--outline-white:hover {
	--x: 0;
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

.button--outline-white:hover svg path {
	fill: var(--color-black);
}

/* Focus */
.button--outline-white:focus-visible,
.hs-button.button--outline-white:focus-visible {
	--btn-bg: transparent;
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
	outline: 2px solid var(--color-black);
}

/* Active */
.button--outline-white:active,
.hs-button.button--outline-white:active {
	--btn-bg: transparent;
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
}

/* ====================================
   no-button
==================================== */
.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
	background: none;
	border: none;
	border-radius: 0;
	color: initial;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	text-decoration: none;
	transition: none;
}

/* ====================================
   Forced States (typography)
==================================== */

/* primary */
.button.is-hover {
	--x: 99%;
	--btn-border: transparent;
	--btn-text: var(--color-white);
}

.button.is-focus {
	--btn-bg: var(--color-rubine-1);
	--btn-border: transparent;
	--btn-text: var(--color-white);

	outline: 2px solid var(--color-white);
	outline-offset: -6px;
}

.button.is-active {
	--btn-bg: #68002c;
	--btn-border: transparent;
	--btn-text: var(--color-white);
}

/* secondary */
.button.button--secondary.is-hover {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

.button.button--secondary.is-focus {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);

	outline: 2px solid var(--color-black);
	outline-offset: -6px;
}

.button.button--secondary.is-active {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

/* button--outline-black */
.button.button--outline-black.is-hover {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

.button.button--outline-black.is-focus {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

.button.button--outline-black.is-active {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
}

/* button--outline-white */
.button.button--outline-white.is-hover {
	--btn-bg: transparent;
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
}

.button.button--outline-white.is-focus {
	--btn-bg: transparent;
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
	outline: 2px solid var(--color-black);
}

.button.button--outline-white.is-active {
	--btn-bg: transparent;
	--btn-border: var(--color-black);
	--btn-text: var(--color-black);
}
@font-face {
	font-family: "IvarDisplay-Regular";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Regular.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Regular.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Regular.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "IvarDisplay-Italic";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Italic.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Italic.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/IvarDisplay-Italic.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: "Sohne-Buch";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-Buch.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-Buch.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-Buch.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "Sohne-Buch";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/fonts/soehne-web-kraftig.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/fonts/soehne-web-kraftig.woff2")
			format("woff2");
}

@font-face {
	font-family: "Sohne-BuchKursiv";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-BuchKursiv.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-BuchKursiv.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/Sohne-BuchKursiv.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: "SohneMono-Buch";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Buch.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Buch.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Buch.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "SohneMono-BuchKursiv";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-BuchKursiv.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-BuchKursiv.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-BuchKursiv.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: "SohneMono-Kraftig";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Kraftig.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Kraftig.woff")
			format("woff"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-Kraftig.otf")
			format("opentype");
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "SohneMono-KraftigKursiv";
	src: url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-KraftigKursiv.woff2")
			format("woff2"),
		url("https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/webfonts/SohneMono-KraftigKursiv.woff")
			format("woff");
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
/* Fields */

.hs-form-field {
	margin-bottom: 1.4rem;
}

/* Labels */

form label {
	color: var(--color-black);
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-tertiary);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1.17px;
	text-transform: uppercase;
}

/* Form Title */
.form-title {
	margin-bottom: 0;
}

/* Help text */

form legend {
	font-size: 1rem;
	color: var(--color-rubine-1);
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea,
.file-input-cover {
	border: 0px solid var(--color-border);
	border-bottom-width: 1px;
	background-color: transparent;
	color: var(--color-black);
	border-radius: 0;
	display: inline-block;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

/* Fix for 2-col and 3-col form fields on mobile screens */
@media (max-width: 400px),
       (min-device-width: 320px) and (max-device-width: 480px) {
	form .form-columns-2 .hs-form-field .hs-input, 
	form .form-columns-3 .hs-form-field .hs-input {
		width: 100% !important;
	}
}

form textarea {
	resize: vertical;
}

form fieldset {
	max-width: 100% !important;
}

form.hs-form fieldset.form-columns-1 .hs-input {
	width: 100%;
}

/* Inputs - checkbox/radio */

form .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

form .inputs-list > li {
	display: block;
	margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
	vertical-align: middle;
	cursor: default;
}

form input[type=checkbox],
form input[type=radio] {
	cursor: pointer;
	margin-right: 0.35rem;
}

/*  hide the checkbox/radio elements visually, while still making them accessible */

form label input[type="checkbox"]:not([name="globalunsub"]),
form label input[type="radio"] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

/* creates the custom checkbox/radio button */
form label.hs-form-booleancheckbox-display,
form label.hs-form-checkbox-display,
form label.hs-form-radio-display {
	position: relative;
	display: inline-block;
	padding-left: 36px;
	line-height: 215%;
	cursor: pointer;
}

/* The ::before pseudo-element creates the box for the checkbox or the circle for the radio button. */
form label.hs-form-booleancheckbox-display::before,
form label.hs-form-checkbox-display::before,
form label.hs-form-radio-display::before {
	content: "";
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	position: absolute;
	top: 3px;
	left: 0;
	display: block;
	width: 24px;
	height: 24px;
	transition: all 0.3s;
}

/* Adjust border-radius for the difference between radio and checkbox. */
form label.hs-form-booleancheckbox-display::before,
form label.hs-form-checkbox-display::before {
	border-radius: 2px;
}

/* For radio, make it a circle */
form label.hs-form-radio-display::before {
	border-radius: 50%;
}

/* checkbox checked color */
form label.hs-form-booleancheckbox-display.checked::before,
form label.hs-form-checkbox-display.checked::before {
	background-color: var(--color-rubine-1);
}

/* The ::after pseudo-element is used to create the visual representation of the checkmark or the filled circle (for radio buttons) */
form label.hs-form-booleancheckbox-display::after,
form label.hs-form-checkbox-display::after {
	content: "";
	width: 24px;
	height: 24px;
	color: var(--color-white);
	text-align: center;
	transform: scale(0); /* Initially hidden */
	position: absolute;
	top: 3px;
	left: 0;
	background-image: url(https://9253440.fs1.hubspotusercontent-na1.net/hubfs/9253440/raw_assets/public/BetterUpWeb/images/module-icons/check.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px;
	transition: all 0.3s;
}

form label.hs-form-radio-display::after {
	content: "";
	width: 12px;
	height: 12px;
	color: var(--color-white);
	text-align: center;
	background-color: var(--color-black);
	border-radius: 50%;
	position: absolute;
	top: 9px;
	left: 6px;
	transform: scale(0.5);
	opacity: 0.15;
	transition: all 0.3s;
}

/* handle the checked state when the checkbox/radio is selected. */

form label.hs-form-booleancheckbox-display.checked::after,
form label.hs-form-checkbox-display.checked::after {
	transform: scale(1);
}

form label.hs-form-radio-display.checked::after {
	transform: scale(1);
	opacity: 1;
	background-color: var(--color-rubine-1);
}

/* Inputs - date picker */

.hs-dateinput {
	position: relative;
}

.hs-dateinput:before {
	content:'\01F4C5';
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
	color: var(--color-white);
}

.fn-date-picker td.is-selected .pika-button {
	border-radius: 0;
	box-shadow: none;
	background: var(--color-rubine-1) !important;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
	border-radius: 0 !important;
	color: var(--color-white);
	background: var(--color-rubine-1) !important;
}

/* Inputs - file picker */

form input[type=file].form-cover-applied {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
	font-size: 10px;
	margin: 0 0 1.4rem;
}

form .hs-richtext img {
	max-width: 100% !important;
}

/* GDPR */

p.form-disclosure,
.legal-consent-container > div,
.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
	font-size: 12px;
	color: var(--color-black);
	line-height: 120%;
	letter-spacing: 0.2px;
	margin-left: 0px !important;
}

form .legal-consent-container label.hs-form-booleancheckbox-display {
	display: flex;
    align-items: center;
	margin-bottom: 0;
	min-height: 14px;
	padding-left: 25px;
}

form .legal-consent-container label.hs-form-booleancheckbox-display::before,
form .legal-consent-container label.hs-form-booleancheckbox-display::after {
	width: 14px;
	height: 14px;
	top: 50%;
	transform: translateY(-50%);
}

form .legal-consent-container label.hs-form-booleancheckbox-display::after {
	background-size: 10px;
}

/* Validation */

.hs-form-required {
	color: var(--color-error);
}

.hs-input.invalid.error {
	border-color: var(--color-error);
}

.hs-error-msg {
	font-family: var(--font-secondary);
	text-transform: initial;
	letter-spacing: 0.3px;
	color: var(--color-error);
	margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	transition: all 0.15s linear;
	white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
	margin: 0 auto;
}
/* Table */

table {
	border: 1px solid var(--color-black);
	background-color: var(--color-white);
	border-collapse: collapse;
	margin-bottom: 1.4rem;
	overflow-wrap: break-word;
}

/* Table cells */

td,
th {
	border: 1px solid var(--color-black);
	padding: 18px;
	color: var(--color-black);
	vertical-align: top;
}

/* Table header */

thead th {
	background-color: var(--color-black);
	color: var(--color-white);
	vertical-align: bottom;
}

/* Table footer */

tfoot td {
	background-color: var(--color-white);
	color: var(--color-black);
}

/* Components

Specific pieces of UI that are stylized. Typically used for global partial styling

*/

@media (max-width: 991px) {
	.header-ctas .header-ctas__login {
		display: none;
	}

	.header-ctas .button {
		font-size: 10px;
	}
}

.header {
	backdrop-filter: blur(12px);
	transform: translate3d(0px, 0px, 0px);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 1s ease;
}

/* Navigation skipper */
.header__skip {
	height: 1px;
	left: -1000px;
	overflow: hidden;
	position: absolute;
	text-align: left;
	top: -1000px;
	width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
	height: auto;
	left: 0;
	overflow: visible;
	top: 0;
	width: auto;
}

.header-menu-trigger__svg path,
.header-menu-trigger__svg circle {
	stroke: var(--color-black);
	transition: stroke 0.2s ease;
}

@media (max-width: 991px) {
	.mobile-ctas > a {
		width: 100%;
		text-align: center;
	}

	.mobile-ctas .button--outline-black {
		--btn-bg: var(--color-rubine-1);
		--btn-border: transparent;
		--btn-text: var(--color-white);
	}

	.mobile-ctas .header-ctas__login {
		padding: 10px 20px;
		border-radius: 32px;
		background: transparent;
		border: 1px solid var(--color-black);
		color: var(--color-black);
		line-height: 100%;
	}
}

.header-ctas .button--outline-black:hover {
	--btn-bg: var(--color-black);
	--btn-border: var(--color-black);
	--btn-text: var(--color-white);
}
.button--outline-black:focus-visible {
	--btn-bg: var(--color-black);
	--btn-border: var(--color-black);
	--btn-text: var(--color-white);
	outline: 2px solid var(--color-white);
}
.button--outline-black:active {
	--btn-bg: var(--color-black);
	--btn-border: var(--color-black);
	--btn-text: var(--color-white);
}

/* Light header theme — CSS-only fallback via page-settings module, or JS-driven via data-theme */
body:not(.js-header-theme-init):has(.opaque-navigation) #site-header,
#site-header[data-theme="light"] {
	border-color: rgba(255, 255, 255, 0.2);
	transition: border-color 0.2s ease;
}

body:not(.js-header-theme-init):has(.opaque-navigation) .logo-black path,
#site-header[data-theme="light"] .logo-black path {
	fill: var(--color-white);
	transition: fill 0.2s ease;
}

body:not(.js-header-theme-init):has(.opaque-navigation)
	.header-menu-trigger__svg
	path,
body:not(.js-header-theme-init):has(.opaque-navigation)
	.header-menu-trigger__svg
	circle,
#site-header[data-theme="light"]
	.header-menu-trigger__svg
	path:not(.position-x),
#site-header[data-theme="light"] .header-menu-trigger__svg circle {
	stroke: rgba(255, 255, 255, 1);
	transition: stroke 0.2s ease;
}

body:not(.js-header-theme-init):has(.opaque-navigation) .header-ctas__login,
#site-header[data-theme="light"] .header-ctas__login {
	color: var(--color-black);
	transition: color 0.2s ease;
}

body:not(.js-header-theme-init):has(.opaque-navigation)
	.header-ctas
	.button--outline-black,
#site-header[data-theme="light"] .header-ctas .button--outline-black {
	--btn-bg: transparent;
	--btn-border: var(--color-white);
	--btn-text: var(--color-white);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

body:not(.js-header-theme-init):has(.opaque-navigation)
	.header-ctas
	.button--outline-black:hover,
#site-header[data-theme="light"] .header-ctas .button--outline-black:hover {
	--btn-bg: var(--color-white);
	--btn-border: var(--color-white);
	--btn-text: var(--color-black);
}

body:not(.js-header-theme-init):has(.opaque-navigation) .link-highlight,
#site-header[data-theme="light"] .link-highlight {
	background-color: var(--color-white);
	transition: background-color 0.2s ease;
}

@media (min-width: 992px) {
	#site-header:has(.menu__wrapper:hover) {
		background-color: var(--color-off-white);
	}

	#site-header[data-theme="light"]:has(.menu__wrapper:hover) {
		border-color: rgba(0, 0, 0, 0.4);
	}

	#site-header[data-theme="light"]:has(.menu__wrapper:hover)
		.menu__item--depth-1
		> .menu__link,
	#site-header[data-theme="light"]:has(.menu__wrapper:hover)
		.header-ctas__login {
		color: var(--color-black);
	}

	#site-header[data-theme="light"]:has(.menu__wrapper:hover)
		.logo-black
		path {
		fill: var(--color-black);
	}

	#site-header[data-theme="light"]:has(.menu__wrapper:hover) .link-highlight {
		background-color: var(--color-black);
	}

	#site-header[data-theme="light"]:has(.menu__wrapper:hover)
		.header-ctas
		.button--outline-black {
		--btn-border: var(--color-black);
		--btn-text: var(--color-black);
	}

	body:not(.js-header-theme-init):has(.opaque-navigation)
		.menu__item--depth-1
		> .menu__link,
	#site-header[data-theme="light"] .menu__item--depth-1 > .menu__link {
		color: var(--color-white);
		transition: color 0.2s ease;
	}

	body:not(.js-header-theme-init):has(.opaque-navigation) .header-ctas__login,
	#site-header[data-theme="light"] .header-ctas__login {
		color: var(--color-white);
	}
}

/* Mobile nav open state */
@media (max-width: 991px) {
	#site-header.nav-open {
		background-color: var(--color-off-white);
		border-color: rgba(0, 0, 0, 0.4);
	}

	#site-header.nav-open .logo-black path {
		fill: var(--color-black);
	}

	#site-header.nav-open .header-menu-trigger__svg path:not(.position-x),
	#site-header.nav-open .header-menu-trigger__svg circle {
		stroke: var(--color-black);
	}

	#site-header.nav-open .header-menu-trigger__svg path.position-x {
		stroke: var(--color-white);
	}

	#site-header.nav-open .header-ctas .button--outline-black {
		--btn-bg: transparent;
		--btn-border: var(--color-black);
		--btn-text: var(--color-black);
	}
}
/* Footer social icons */
.footer-social .hs-social-follow {
  justify-content: flex-start;
  gap: 0.5rem;
}

.footer-social #hs_cos_wrapper_footer--social .hs-social-follow a.hs-social-follow__link {
  width: 1rem;
  height: 1rem;
  border-width: 1px;
  border-radius: 9999px;
  border-color: var(--color-black);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social #hs_cos_wrapper_footer--social .hs-social-follow a.hs-social-follow__link:hover {
  background-color: var(--color-black);
}

.footer-social #hs_cos_wrapper_footer--social .hs-social-follow a.hs-social-follow__link svg {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social #hs_cos_wrapper_footer--social .hs-social-follow a.hs-social-follow__link:hover svg {
  fill: var(--color-off-white);
}

/* Footer navigation — @hubspot/menu rendered with extra_classes="footer-nav" */
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  flex: 1 1 0%;
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .footer-nav li {
    flex-basis: 40%;
  }
}

@media (min-width: 992px) {
  .footer-nav li {
    flex-basis: auto;
  }
}

.footer-nav .hs-menu-depth-1 > a {
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-border-divider);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: none;
  font-family: var(--font-tertiary);
}

@media (min-width: 768px) {
  .footer-nav .hs-menu-depth-1 > a {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.footer-nav .hs-menu-depth-1 > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}

@media (min-width: 768px) {
  .footer-nav .hs-menu-depth-1 > ul {
    height: auto;
    overflow: visible;
    transition: none;
  }
}

.footer-nav .hs-menu-depth-2 > a {
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
  text-decoration: none;
  color: var(--color-midnight);
}

/* Mobile accordion — items with children collapse by default */
.footer-nav .hs-menu-depth-1.hs-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  cursor: pointer;
}

.footer-nav .hs-menu-depth-1.hs-item-has-children > a::after {
  content: '';
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-nav .hs-menu-depth-1.hs-item-has-children.is-open > a::after {
  transform: rotate(-135deg) translateY(2px);
}

/* Desktop — no chevron, pointer-events off */
@media (min-width: 768px) {
  .footer-nav .hs-menu-depth-1.hs-item-has-children > a {
    pointer-events: none;
    cursor: default;
    justify-content: flex-start;
  }

  .footer-nav .hs-menu-depth-1.hs-item-has-children > a::after {
    display: none;
  }
}

/* Utilities

Helper classes with ability to override anything that comes before it

*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

@media (max-width: 767px) {
	.show-for-sr--mobile {
		border: 0 !important;
		clip: rect(0, 0, 0, 0) !important;
		height: 1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		white-space: nowrap !important;
		width: 1px !important;
	}
}