/* Shared by every companion page before its page-family and component styles. */
@font-face {
  font-family: "Inter";
  src: url("../3e5f90a0138b38de4cf4d779ad78391974ea1df776b9164842bdcbb60ce383c5/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../30a5c45ec23a594af2effe8d3b589ad22c2dede27441050a1604d00ff82fd0dc/Inter-Bold.ttf") format("truetype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Preserve the established brand and editorial surfaces. */
  --primary-purple: #5c0c8e;
  --deep-purple: #420866;
  --footer-purple: #29053f;
  --lavender: #f7f2fd;
  --lavender-strong: #f3e7fa;
  --teal: #43c8a0;
  --white: #fff;
  --black: #000;
  --blue: #1b9ad1;
  --green: #49c2a8;
  --orange: #f97720;
  --charcoal: #505050;
  --ink: #241334;
  --muted: #655d70;
  --purple: var(--primary-purple);
  --night: var(--footer-purple);
  --line: #ded6e6;
  --explore: #8ee5c6;
  --assess: #ffbb80;
  --monitor: #a6caff;
  --paper: var(--white);
  --heading-font: "Aspekta", "Inter", Arial, sans-serif;
  --body-font: "Satoshi", "Inter", Arial, sans-serif;
  --max-width: 1332px;
  --max: 1240px;

  /* Alpha mixes preserve the existing translucent colors while sharing a base. */
  --companion-brand-wash: color-mix(in oklch, var(--primary-purple) 8%, transparent);
  --companion-line-subtle: color-mix(in oklch, var(--primary-purple) 10%, transparent);
  --companion-line-strong: color-mix(in oklch, var(--primary-purple) 24%, transparent);
  --companion-action-hover: var(--deep-purple);
  --companion-menu-surface: #330650;
  --companion-active-link: #dffef4;
  --companion-on-dark-muted: color-mix(in oklch, var(--white) 84%, transparent);
  --companion-on-dark-line: color-mix(in oklch, var(--white) 15%, transparent);
  --companion-on-dark-line-strong: color-mix(in oklch, var(--white) 60%, transparent);
  --companion-on-dark-wash: color-mix(in oklch, var(--white) 8%, transparent);
  --companion-accent-wash: color-mix(in oklch, var(--teal) 16%, transparent);
  --companion-menu-shadow: color-mix(in oklch, var(--footer-purple) 26%, transparent);
  --companion-focus: #ad66df;

  /* Shared heading sizes follow reader font settings as well as the viewport. */
  --companion-type-display: clamp(2.875rem, 2.5536rem + 1.6071vw, 4rem);
  --companion-type-section: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
  --companion-type-heading: clamp(2rem, 1.6429rem + 1.7857vw, 3.25rem);
  --companion-type-subheading: clamp(1.65rem, 1.4357rem + 1.0714vw, 2.4rem);
  --companion-type-title: clamp(1.5rem, 1.3571rem + .7143vw, 2rem);
  --companion-type-feature: clamp(1.8125rem, 1.7232rem + .4464vw, 2.125rem);
  --companion-type-card: clamp(1.28rem, 1.2686rem + .0571vw, 1.32rem);
  --companion-type-hero: clamp(1.875rem, 1.5rem + 2vw, 3.5rem);

  --companion-gutter: clamp(1rem, .8571rem + .7143vw, 1.5rem);
  --companion-space-section: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
  --companion-space-card: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
  --companion-header-size: 84px;
  --companion-header-clearance: calc(var(--companion-header-size) + 1rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-block-start: var(--companion-header-clearance);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  font-size: max(1rem, 16px);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--companion-focus);
  outline-offset: 4px;
}

::selection {
  background: #d8b7f4;
  color: var(--ink);
}

@media (max-width: 1120px) {
  :root {
    --companion-header-size: 68px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media print {
  html {
    scroll-behavior: auto;
    scroll-padding-block-start: 0;
    scrollbar-gutter: auto;
  }
}