@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
:root {
  --color-primary: #CC0330;
  --color-primary-hover: #9A0224;
  --color-primary-dark: #4D000B;
  --color-primary-medium: #AC1A2F;
  --color-primary-soft: #F8E5E9;
  --color-secondary: #3C5C48;
  --color-secondary-soft: #B1BEB6;
  --color-secondary-pale: #E7ECE8;
  --color-ink: #10100F;
  --color-ink-muted: #76766B;
  --color-white: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-background: #F5F5F4;
  --color-background-alt: #FAFAF9;
  --color-border: #D3D3CF;
  --color-border-light: #E9E9E7;
  --color-success: #3C5C48;
  --color-success-soft: #E7ECE8;
  --color-warning: #9B691B;
  --color-warning-soft: #F8EEDC;
  --color-danger: #CC0330;
  --color-danger-soft: #F8E5E9;
  --color-info: #526D5C;
  --color-info-soft: #E7ECE8;
  --font-body: "Rubik", Arial, sans-serif;
  --font-heading: "Rubik", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --font-size-3xl: clamp(2.25rem, 4vw, 3rem);
  --line-height-body: 1.65;
  --line-height-heading: 1.15;
  --spacing-section-padding-small: 64px;
  --spacing-section-padding-medium: 80px;
  --spacing-section-padding-large: 160px;
  --spacing-section-padding-x-large: 200px;
  --spacing-stack-gap-none: 0px;
  --spacing-stack-gap-2x-small: 4px;
  --spacing-stack-gap-x-small: 8px;
  --spacing-stack-gap-small: 12px;
  --spacing-stack-gap-medium: 16px;
  --spacing-stack-gap-large: 20px;
  --spacing-stack-gap-x-large: 24px;
  --spacing-stack-gap-2x-large: 32px;
  --spacing-stack-gap-3x-large: 40px;
  --spacing-grid-gap-x-small: 8px;
  --spacing-grid-gap-small: 12px;
  --spacing-grid-gap-medium: 16px;
  --spacing-grid-gap-large: 24px;
  --spacing-grid-gap-x-large: 32px;
  --corner-radius-none: 0px;
  --corner-radius-2x-small: 2px;
  --corner-radius-x-small: 4px;
  --corner-radius-small: 8px;
  --corner-radius-medium: 12px;
  --corner-radius-large: 16px;
  --corner-radius-x-large: 24px;
  --corner-radius-2x-large: 32px;
  --corner-radius-full: 512px;
  --content-width: 92rem;
  --content-width-narrow: 62.5rem;
  --space-1: 0.3125rem;
  --space-2: 0.625rem;
  --space-3: 0.9375rem;
  --space-4: 1.25rem;
  --space-5: 1.875rem;
  --space-6: 2.5rem;
  --space-8: 3.75rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.9375rem;
  --radius-lg: 1.5625rem;
  --radius-feature: 0.9375rem 0.9375rem 2.5rem 0.9375rem;
  --shadow-sm: 0 0 0 1px rgba(16, 16, 15, 0.08);
  --shadow-md: 0 0.5rem 0.9375rem rgba(16, 16, 15, 0.12);
  --shadow-lg: 0 0.5rem 1.5625rem rgba(16, 16, 15, 0.15);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --paper: var(--color-background);
  --surface: var(--color-surface);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-muted);
  --line: var(--color-border);
  --brand: var(--color-primary);
  --brand-dark: var(--color-primary-dark);
  --brand-soft: var(--color-primary-soft);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --red: var(--color-danger);
  --red-soft: var(--color-danger-soft);
  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --pad: var(--color-secondary);
  --pad-soft: var(--color-secondary-pale);
  --breakpoint-laptop: 1024px;
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 540px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.page-section {
  padding-top: var(--space-8);
}

.content-section {
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .content-section {
    padding-block: 4rem;
  }
}
@media (min-width: 1024px) {
  .content-section {
    padding-block: 3rem;
  }
}
.content-container {
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .content-container {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .content-container {
    padding-inline: 2rem;
  }
}
.hj-root {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--ink);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  min-height: 100vh;
  margin: 0;
}

.page-wrapper {
  border-radius: 30px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 16px 50px rgba(16, 16, 15, 0.2);
  box-shadow: 0 5px 25px rgba(16, 16, 15, 0.2);
  overflow: hidden;
  padding-inline: 0;
}

@media (max-width: 860px) {
  .page-wrapper {
    /*width: calc(100% - 24px);
    min-height: calc(100vh - 24px);
    min-height: calc(100dvh - 24px);
    margin: 12px auto;*/
    border-radius: 24px;
  }
}
.hj-root p {
  margin: 0 0 0.5rem;
}

.hj-root p:last-child {
  margin-bottom: 0;
}

.hj-root ::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

.hj-root h1,
.hj-root h2,
.hj-root h3,
.hj-root h4,
.hj-root h5,
.hj-root h6 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-heading);
  margin: 0 0 0.75rem;
}

.hj-root a {
  color: var(--brand);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  transition: color var(--transition-fast);
}

.hj-root a:hover {
  color: var(--color-primary-hover);
}

.hj-root button,
.hj-root input,
.hj-root select,
.hj-root textarea {
  font: inherit;
}

.hj-root :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
  outline-offset: 3px;
}

.disp {
  font-family: var(--font-heading);
}

.hj-container {
  width: min(90%, var(--content-width));
  margin-inline: auto;
}

.hj-section {
  padding-block: var(--space-8);
}

.hj-section-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.hj-section-secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.hj-section-primary h1,
.hj-section-primary h2,
.hj-section-primary h3,
.hj-section-secondary h1,
.hj-section-secondary h2,
.hj-section-secondary h3 {
  color: inherit;
}

.hj-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-feature);
  padding: 44px 48px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hj-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  aspect-ratio: 1;
  right: -110px;
  top: 50%;
  border: 80px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.hj-hero h1, .hj-hero h2, .hj-hero h3 {
  color: #fff;
}

.hj-hero-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hj-hero-label {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 12px;
  max-width: 600px;
}

.hj-hero-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.hj-hero-stat {
  text-align: right;
}

.hj-hero-stat b {
  font-family: var(--font-heading);
  font-size: 28px;
  display: block;
  line-height: 1.2;
}

.hj-hero-stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 32px;
}

.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.card {
  background: var(--surface);
  border: 0px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 26px 28px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  width: 100%;
}

.card.card-bg {
  background: var(--color-background);
}

.card.card-bg2 {
  background: var(--color-info-soft);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hj-section-title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-row-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-stack-gap-2x-large);
  align-self: stretch;
}
.content-row-block > div {
  width: 100%;
}

.content-block {
  /*padding-block: var(--section-padding-medium);
  */
  display: flex;
  /*max-width: 800px;*/
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-gap-2x-large);
  align-self: stretch;
}
.content-block > div {
  width: 100%;
}

.content-block-small {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-gap-small);
  align-self: stretch;
}
.content-block-small > div {
  width: 100%;
}

.content-row-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-stack-gap-2x-large);
  align-self: stretch;
}
.content-row-block > div, .content-row-block > fieldset, .content-row-block > legend, .content-row-block > span, .content-row-block > label {
  width: 100%;
}

.content-row-block-medium {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-stack-gap-medium);
  align-self: stretch;
}
.content-row-block-medium > div, .content-row-block-medium > fieldset, .content-row-block-medium > legend, .content-row-block-medium > span, .content-row-block-medium > label {
  width: 100%;
}

.table {
  /*border: 1px solid var(--line);*/
  border-radius: var(--radius-x-small);
  overflow: hidden;
  background: var(--surface);
  /*box-shadow: var(--shadow-sm);*/
  width: 100%;
}
.table .head {
  background: var(--paper);
}
.table .table-row {
  display: grid;
  /*grid-template-columns: 1.5fr 1.3fr 1.3fr 0.9fr 40px;*/
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
  padding: 17px 22px;
  align-items: center;
  border-bottom: 1px solid var(--color-border-light);
  /*font-size: 14.5px;*/
}
.table .table-row:last-child {
  border-bottom: none;
}
.table .table-row.head {
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.hj-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hj-badge.ok {
  background: var(--green-soft);
  color: var(--green);
}

.hj-badge.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.hj-badge.crit {
  background: var(--red-soft);
  color: var(--red);
}

.hj-badge.rent {
  background: var(--pad-soft);
  color: var(--pad);
}

.hj-life {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}

.hj-life-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hj-life-track {
  flex: 1;
  height: 10px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.hj-life-fill {
  height: 100%;
  border-radius: 3px;
}

.hj-qr {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--paper);
  flex-shrink: 0;
}

.device-submenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.device-submenu a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.device-submenu a:hover,
.device-submenu a.active {
  color: var(--brand);
  background: var(--brand-soft);
}

body .btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  border-radius: var(--radius-full);
  padding: 11px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

body .btn:hover {
  transform: translateY(-1px);
}

body .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body .btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

body .btn-secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

body .btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
  outline: none;
}

.hj-toggle-group {
  display: flex;
  gap: 8px;
}

.hj-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.8px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-body);
}

.hj-toggle.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.hj-toggle input {
  display: none;
}

.hj-toggle:has(input:checked) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.hj-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px 20px;
  margin-top: 6px;
}

.hj-fieldset legend {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 4px;
}

.hj-timeline {
  position: relative;
  padding-left: 18px;
  margin-top: 10px;
}

.hj-timeline:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 1.5px;
  background: var(--line);
}

.hj-tl-item {
  position: relative;
  padding-bottom: 14px;
}

.hj-tl-item:last-child {
  padding-bottom: 0;
}

.hj-tl-dot {
  position: absolute;
  left: -18px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.hj-tl-dot.mail {
  background: var(--amber);
}

.hj-tl-date {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
}

.hj-tl-label {
  font-size: 13px;
  margin-top: 1px;
}

.hj-banner {
  background: var(--green-soft);
  color: var(--green);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hj-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--surface);
  max-width: 420px;
  margin-bottom: 20px;
}

.hj-search input {
  border: none;
  outline: none;
  font-size: 15px;
  width: 100%;
  background: transparent;
  font-family: var(--font-body);
}

.hj-smart {
  border-left: 5px solid var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-top: 26px;
  width: 100%;
}

.hj-smart h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--brand-dark);
}

.hj-smart ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.75;
}

.hj-chip {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 11.5px;
  margin: 3px 6px 3px 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--ink);
}

.hj-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.hj-mailgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.hj-mailbox {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--paper);
  font-size: 12.5px;
}

.hj-mailbox .tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.hj-mailbox .subj {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.hj-mailbox .meta {
  color: var(--ink-soft);
  font-size: 11px;
  margin-bottom: 10px;
}

.hj-mailbox .fake-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
}

.hj-details summary {
  cursor: pointer;
  list-style: none;
}

.hj-details summary::-webkit-details-marker {
  display: none;
}

input[readonly] {
  background-color: var(--color-background);
  color: var(--ink-soft);
  cursor: default;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--stack-gap-x-large) 0 !important;
}

:root {
  /* Typography: display (Hero) */
  --display-font-family: var(--font-heading);
  --display-font-size: 72px;
  --display-line-height: 76px;
  --display-font-weight: 700;
  --display-letter-spacing: -2px;
  /* Typography: display1 */
  --display1-font-family: var(--font-heading);
  --display1-font-size: 56px;
  --display1-line-height: 60px;
  --display1-font-weight: 700;
  --display1-letter-spacing: -2px;
  /* Typography: display2 */
  --display2-font-family: var(--font-heading);
  --display2-font-size: 44px;
  --display2-line-height: 48px;
  --display2-font-weight: 700;
  --display2-letter-spacing: -1px;
  /* Typography: display3 */
  --display3-font-family: var(--font-heading);
  --display3-font-size: 36px;
  --display3-line-height: 40px;
  --display3-font-weight: 700;
  --display3-letter-spacing: -1px;
  /* Typography: title1 */
  --title1-font-family: var(--font-heading);
  --title1-font-size: 28px;
  --title1-line-height: 32px;
  --title1-font-weight: 600;
  --title1-letter-spacing: -0.5px;
  /* Typography: title2 */
  --title2-font-family: var(--font-heading);
  --title2-font-size: 24px;
  --title2-line-height: 32px;
  --title2-font-weight: 600;
  --title2-letter-spacing: -0.5px;
  /* Typography: title3 */
  --title3-font-family: var(--font-heading);
  --title3-font-size: 20px;
  --title3-line-height: 28px;
  --title3-font-weight: 600;
  --title3-letter-spacing: -0.5px;
  /* Typography: sub-title1 */
  --sub-title1-font-family: var(--font-body);
  --sub-title1-font-size: 20px;
  --sub-title1-line-height: 28px;
  --sub-title1-font-weight: 500;
  --sub-title1-letter-spacing: 0;
  /* Typography: sub-title2 */
  --sub-title2-font-family: var(--font-body);
  --sub-title2-font-size: 18px;
  --sub-title2-line-height: 24px;
  --sub-title2-font-weight: 500;
  --sub-title2-letter-spacing: 0;
  /* Typography: body1 */
  --body1-font-family: var(--font-body);
  --body1-font-size: 16px;
  --body1-line-height: 24px;
  --body1-font-weight: 400;
  --body1-letter-spacing: 0;
  --body1-font-weight-strong: 500;
  /* Typography: body2 */
  --body2-font-family: var(--font-body);
  --body2-font-size: 14px;
  --body2-line-height: 20px;
  --body2-font-weight: 400;
  --body2-letter-spacing: 0;
  --body2-font-weight-strong: 500;
  /* Typography: caption */
  --caption-font-family: var(--font-body);
  --caption-font-size: 12px;
  --caption-line-height: 20px;
  --caption-font-weight: 400;
  --caption-letter-spacing: 0;
  /* Typography: overline */
  --overline-font-family: var(--font-heading);
  --overline-font-size: 12px;
  --overline-line-height: 16px;
  --overline-font-weight: 600;
  --overline-letter-spacing: 0;
  /* Typography: label1 */
  --label1-font-family: var(--font-body);
  --label1-font-size: 16px;
  --label1-line-height: 20px;
  --label1-font-weight: 500;
  --label1-letter-spacing: 0;
  /* Typography: label2 */
  --label2-font-family: var(--font-body);
  --label2-font-size: 14px;
  --label2-line-height: 20px;
  --label2-font-weight: 500;
  --label2-letter-spacing: 0;
  /* Typography: label3 */
  --label3-font-family: var(--font-body);
  --label3-font-size: 12px;
  --label3-line-height: 16px;
  --label3-font-weight: 500;
  --label3-letter-spacing: 0;
  /* Spacing: stack-gap */
  --stack-gap-none: 0;
  --stack-gap-2x-small: 4px;
  --stack-gap-x-small: 8px;
  --stack-gap-small: 12px;
  --stack-gap-medium: 16px;
  --stack-gap-large: 20px;
  --stack-gap-x-large: 24px;
  --stack-gap-2x-large: 32px;
  --stack-gap-3x-large: 40px;
  --grid-gap-x-small: 8px;
  --grid-gap-small: 12px;
  --grid-gap-medium: 16px;
  --grid-gap-large: 24px;
  --grid-gap-x-large: 32px;
  --section-padding-small: 32px;
  --section-padding-medium: 40px;
  --section-padding-large: 48px;
  --section-padding-x-large: 56px;
  --radius-none: 0px;
  --radius-2x-small: 2px;
  --radius-x-small: 4px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-x-large: 24px;
  --radius-2x-large: 32px;
  --radius-full: 512px;
  --stroke-width-small: 1px;
  --stroke-width-medium: 2px;
  --stroke-width-large: 4px;
  --grid-columns: 4;
  --grid-column-width: 80px;
  --page-side-gutter: 20px;
  --max-content-width-full: 600px;
  --max-content-width-xlarge: 800px;
  --max-content-width-large: 600px;
  --max-content-width-medium: 600px;
  --max-content-width-small: 600px;
  --device-definition-component-mode: Mobile;
  --device-definition-device-width: 390px;
}

@media (max-width: 540px) {
  :root {
    --display-font-size: 40px;
    --display-line-height: 44px;
    --display-font-weight: 700;
    --display-letter-spacing: -2px;
    --display1-font-size: 36px;
    --display1-line-height: 40px;
    --display1-font-weight: 700;
    --display1-letter-spacing: -2px;
    --display2-font-size: 32px;
    --display2-line-height: 36px;
    --display2-font-weight: 700;
    --display2-letter-spacing: -1px;
    --display3-font-size: 28px;
    --display3-line-height: 32px;
    --display3-font-weight: 700;
    --display3-letter-spacing: -1px;
    --title1-font-size: 24px;
    --title1-line-height: 28px;
    --title1-font-weight: 600;
    --title1-letter-spacing: -0.5px;
    --title2-font-size: 20px;
    --title2-line-height: 28px;
    --title2-font-weight: 600;
    --title2-letter-spacing: -0.5px;
    --title3-font-size: 18px;
    --title3-line-height: 24px;
    --title3-font-weight: 600;
    --title3-letter-spacing: -0.5px;
    --sub-title1-font-size: 18px;
    --sub-title1-line-height: 24px;
    --sub-title1-font-weight: 500;
    --sub-title1-letter-spacing: 0px;
    --sub-title2-font-size: 16px;
    --sub-title2-line-height: 24px;
    --sub-title2-font-weight: 500;
    --sub-title2-letter-spacing: 0px;
    --body1-font-size: 16px;
    --body1-line-height: 24px;
    --body1-font-weight: 400;
    --body1-weight-strong: Medium;
    --body1-letter-spacing: 0px;
    --body2-font-size: 14px;
    --body2-line-height: 20px;
    --body2-font-weight: 400;
    --body2-weight-strong: Medium;
    --body2-letter-spacing: 0px;
    --caption-font-size: 12px;
    --caption-line-height: 20px;
    --caption-font-weight: 400;
    --caption-letter-spacing: 0px;
    --overline-font-size: 12px;
    --overline-line-height: 16px;
    --overline-font-weight: 600;
    --overline-letter-spacing: 0px;
    --label1-font-size: 16px;
    --label1-line-height: 16px;
    --label1-font-weight: 500;
    --label1-letter-spacing: 0px;
    --label2-font-size: 14px;
    --label2-line-height: 20px;
    --label2-font-weight: 500;
    --label2-letter-spacing: 0px;
    --label3-font-size: 12px;
    --label3-line-height: 16px;
    --label3-font-weight: 500;
    --label3-letter-spacing: 0px;
    --stack-gap-none: 0px;
    --stack-gap-2x-small: 4px;
    --stack-gap-x-small: 8px;
    --stack-gap-small: 12px;
    --stack-gap-medium: 16px;
    --stack-gap-large: 20px;
    --stack-gap-x-large: 24px;
    --stack-gap-2x-large: 32px;
    --stack-gap-3x-large: 40px;
    --grid-gap-x-small: 8px;
    --grid-gap-small: 12px;
    --grid-gap-medium: 16px;
    --grid-gap-large: 24px;
    --grid-gap-x-large: 32px;
    --section-padding-small: 32px;
    --section-padding-medium: 40px;
    --section-padding-large: 48px;
    --section-padding-x-large: 56px;
    --radius-none: 0px;
    --radius-2x-small: 2px;
    --radius-x-small: 4px;
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-x-large: 24px;
    --radius-2x-large: 32px;
    --radius-full: 512px;
    --stroke-width-small: 1px;
    --stroke-width-medium: 2px;
    --stroke-width-large: 4px;
    --grid-columns: 4;
    --grid-column-width: 80px;
    --page-side-gutter: 20px;
    --max-content-width-full: 600px;
    --max-content-width-xlarge: 800px;
    --max-content-width-large: 600px;
    --max-content-width-medium: 600px;
    --max-content-width-small: 600px;
    --device-definition-component-mode: Mobile;
    --device-definition-device-width: 390px;
  }
}
body,
.body1 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body);
  letter-spacing: var(--typography-body1-letter-spacing, 0);
}

.body1strong {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--typography-body1-letter-spacing, 0);
}

.body2 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-body);
  letter-spacing: var(--typography-body2-letter-spacing, 0);
}

.body2strong {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--typography-body2-letter-spacing, 0);
}

.overline {
  color: var(--foreground-neutral-secondary, #544B45);
  font-family: var(--font-caption);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-body);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 0;
  display: block;
  text-decoration: none;
  text-decoration-line: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--foreground-neutral-primary, #241F1D);
  margin: 0;
  padding: 0;
  line-height: 1;
  margin-block-start: 0;
  margin-block-end: 0;
}

.display {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--display-font-size, 72px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--display-line-height, 76px);
  letter-spacing: var(--display-letter-spacing, -2px);
}

.display1 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: var(--display1-letter-spacing, -2px);
}

.display2 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: var(--display2-letter-spacing, -1px);
}

h3,
.display3 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: var(--display3-letter-spacing, -1px);
}

.title1 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-heading);
  letter-spacing: var(--title1-letter-spacing, -0.5px);
}

.title2 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--title2-font-size, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--title2-line-height, 32px);
  letter-spacing: var(--title2-letter-spacing, -0.5px);
}

.title3 {
  align-self: stretch;
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--title3-font-size, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--title3-line-height, 28px);
  letter-spacing: var(--title3-letter-spacing, -0.5px);
}

.subtitle1 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--sub-title1-font-size, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--sub-title1-line-height, 28px);
  letter-spacing: var(--sub-title1-letter-spacing, 0);
}

.subtitle2 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--sub-title2-font-size, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--sub-title2-line-height, 24px);
  letter-spacing: var(--sub-title2-letter-spacing, 0);
}

.label1 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--label1-font-size, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--label1-line-height, 20px);
  letter-spacing: var(--label1-letter-spacing, 0);
}

.label2 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--label2-font-size, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--label2-line-height, 20px);
  letter-spacing: var(--label2-letter-spacing, 0);
}

.label3 {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--label3-font-size, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--label3-line-height, 16px);
  letter-spacing: var(--typography-label3-letter-spacing, 0);
}

.caption {
  color: var(--foreground-neutral-primary, #241F1D);
  font-family: var(--font-display);
  font-size: var(--caption-font-size, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--caption-line-height, 20px);
  letter-spacing: var(--caption-letter-spacing, 0);
}

.muted {
  color: var(--color-ink-muted);
}

.lot {
  color: var(--foreground-neutral-primary, #241F1D);
}

.mb-n {
  margin-bottom: 0px;
}

.mb-2xs {
  margin-bottom: var(--spacing-stack-gap-2x-small, 4px);
}

.mb-xs {
  margin-bottom: var(--spacing-stack-gap-x-small, 8px);
}

.mb-s {
  margin-bottom: var(--spacing-stack-gap-small, 12px);
}

.mb-m {
  margin-bottom: var(--spacing-stack-gap-medium, 16px);
}

.mb-l {
  margin-bottom: var(--spacing-stack-gap-large, 24px);
}

.mb-xl {
  margin-bottom: var(--spacing-stack-gap-x-large, 32px);
}

.mt-n {
  margin-top: 0px;
}

.mt-2xs {
  margin-top: var(--spacing-stack-gap-2x-small, 4px);
}

.mt-xs {
  margin-top: var(--spacing-stack-gap-x-small, 8px);
}

.mt-s {
  margin-top: var(--spacing-stack-gap-small, 12px);
}

.mt-m {
  margin-top: var(--spacing-stack-gap-medium, 16px);
}

.mt-l {
  margin-top: var(--spacing-stack-gap-large, 24px);
}

.mt-xl {
  margin-top: var(--spacing-stack-gap-x-large, 32px);
}

/*   ICONS  */
@font-face {
  font-display: swap;
  font-family: icomoon;
  font-style: normal;
  font-weight: 400;
  src: url(../../../fonts/icomoon.woff2) format("woff2"), url(../../../fonts/icomoon.woff) format("woff");
}
[class*=" icon-"], [class^=icon-] {
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: icomoon !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.icon-fire:before {
  content: "\e91a";
}

.icon-file-text:before {
  content: "\e91c";
}

.icon-study:before {
  content: "\e90d";
}

.icon-person:before {
  content: "\e90e";
}

.icon-heart:before {
  content: "\e90f";
}

.icon-bag:before {
  content: "\e910";
}

.icon-chevron-down:before {
  content: "\e905";
}

.icon-chevron-left:before {
  content: "\e908";
}

.icon-chevron-right:before {
  content: "\e909";
}

.icon-chevron-up:before {
  content: "\e90a";
}

.icon-chevrons-down:before {
  content: "\e911";
}

.icon-chevrons-left:before {
  content: "\e912";
}

.icon-chevrons-right:before {
  content: "\e913";
}

.icon-chevrons-up:before {
  content: "\e914";
}

.icon-facebook:before {
  content: "\e902";
}

.icon-instagram:before {
  content: "\e903";
}

.icon-life-buoy:before {
  content: "\e915";
}

.icon-linkedin:before {
  content: "\e906";
}

.icon-mail:before {
  content: "\e916";
}

.icon-map-pin:before {
  content: "\e917";
}

.icon-phone:before {
  content: "\e918";
}

.icon-play:before {
  content: "\e90b";
}

.icon-play-circle:before {
  content: "\e901";
}

.icon-search:before {
  content: "\e900";
}

.icon-shopping-cart:before {
  content: "\e919";
}

.icon-user:before {
  content: "\e90c";
}

.icon-clear:before {
  content: "\e904";
}

.icon-youtube:before {
  content: "\e907";
}

/*  
    COMPONENTS
*/
.hero-component {
  background: var(--color-primary);
  /*border-radius: var(--radius-feature);*/
  box-shadow: var(--shadow-md);
}
.hero-component::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  aspect-ratio: 1;
  right: -110px;
  top: 50%;
  border: 80px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-component section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  padding: 30px 15px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-component section .hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 600px;
}
.hero-component p {
  margin: 0;
}
.hero-component h1, .hero-component .overline, .hero-component .body1, .hero-component p, .hero-component .subtitle1 {
  color: white;
}
.hero-component .hero-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
.hero-component .hero-stats .hero-stat {
  gap: 2px;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.content-header {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--color-background);
  background-color: white;
}

.header-block {
  padding-inline: 0;
  /*max-width: none;*/
}
.header-block .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  XXborder-bottom: 1px solid var(--color-border-light);
  background: rgba(255, 255, 255, 0.96);
  XXbox-shadow: 0 4px 24px rgba(16, 16, 15, 0.06);
  padding: 24px clamp(16px, 2vw, 32px);
}
.header-block .brand-logos {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}
.header-block .logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.header-block .logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 32vw;
  max-height: 60px;
}
.header-block .menu {
  display: flex;
  gap: 5px;
  background: var(--surface);
  padding: 4px;
}
.header-block .menu .menu-item {
  border: none;
  background: transparent;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-block .menu .menu-item.active {
  background: var(--brand);
  color: #fff;
}

@media (min-width: 861px) {
  .header-block .menu {
    padding: 5px;
  }
  .header-block .menu .menu-item {
    min-height: 46px;
    padding-inline: 20px;
    font-size: 14.5px;
  }
}
/*
@media (max-width: 860px) {

    .header-block .menu {
        display: none;
    }

}*/
/*  
    PAGES  
*/
.account-login form {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

/*# sourceMappingURL=site.css.map */