/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
/*!
Theme Name: Wealthfront Design Blog
Theme URI: https://wealthfront.com/
Description: Wealthfront Design WP Theme
Version: 0.1.0
Author: Adrian S
Author URI: https://wealthfront.com/
Text Domain: wealthfront-design-blog
Requires at least: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Wealthfront Design Blog is based on _tw https://underscoretw.com/, (C) 2021-2026 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2026 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/
@layer properties;
:root, :host {
  --font-sans: "Calibre", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "GT Alpina", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-3xl: 48rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-extrabold: 800;
  --tracking-tighter: -0.05em;
  --leading-snug: 1.375;
  --radius-2xl: 1rem;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --color-pale-blue: #dadef1;
  --color-purple-ghost: #f8f7fc;
  --color-purple-ghost-50: rgba(248, 247, 252, 0.5);
  --color-midnight-blue: #181056;
  --color-dark-chart: #25413e;
  --color-chart-neutral-primary: #f1f1f3;
  --color-charcoal-blue: #1f2937;
  --color-content-primary: #18172b;
  --color-light-content: rgba(24, 23, 43, 0.34);
  --color-background: #fffbfA;
  --color-foreground: var(--color-content-primary);
  --color-primary: var(--color-midnight-blue);
  --container-content: 994px;
  --container-wide: 944px;
  --tw-prose-font-normal: 400;
  --tw-prose-font-medium: 500;
  --tw-prose-font-semibold: 600;
  --tw-prose-font-bold: 700;
  --tw-prose-font-extrabold: 800;
  --tw-prose-font-black: 900;
}
@font-face {
  font-family: "GT Alpina";
  src: url("./assets/fonts/gt-alpina/GT-Alpina-Standard-Light.woff2")	format("woff2"),	url("./assets/fonts/gt-alpina/GT-Alpina-Standard-Light.woff")	format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "GT Alpina";
  src: url("./assets/fonts/gt-alpina/GT-Alpina-Standard-Light-Italic.woff2")	format("woff2"),	url("./assets/fonts/gt-alpina/GT-Alpina-Standard-Light-Italic.woff")	format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("./assets/fonts/calibre/Calibre-Light.otf")	format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("./assets/fonts/calibre/Calibre-Regular.otf")	format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("./assets/fonts/calibre/Calibre-Medium.otf")	format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp, pre {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:-moz-focusring {
  outline: auto;
}
progress {
  vertical-align: baseline;
}
summary {
  display: list-item;
}
ol, ul, menu {
  list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video {
  max-width: 100%;
  height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}
::file-selector-button {
  margin-inline-end: 4px;
}
::placeholder {
  opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: currentcolor;
  }
  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }
}
textarea {
  resize: vertical;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}
::-webkit-datetime-edit {
  display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}
::-webkit-calendar-picker-indicator {
  line-height: 1;
}
:-moz-ui-invalid {
  box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
  appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}
html {
  height: 100%;
}
body {
  background-color: var(--color-background);
  font-family: var(--font-sans);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-foreground);
  min-height: 100%;
  /* Subtle initial fade-in on every page load so the page settles in instead
     of snapping to full opacity.

     `backwards` rather than `both`, for the same reason as the headline below
     and with more riding on it here. A fill that persists forwards leaves the
     animation in effect for as long as the page is open, and an opacity
     animation in effect on an element keeps that element on a compositor
     layer — so a 1.1s intro was holding a layer the full height of the
     document, 390x8504, from load until the reader left. That is the largest
     single texture on the page, and because everything painted over a
     composited layer has to be promoted to sit on top of it, it was also
     holding up the Overlap cascade that put each section on its own
     full-height layer behind it. None of it appears in a main-thread profile,
     which is why style and script both measured healthy while scrolling felt
     low-framerate in both directions.

     Nothing changes visually. The delay is zero, so the before-phase this
     fill covers has no duration, and the animation ends on the opacity the
     body has anyway — the only difference is that the browser is now allowed
     to let go when it finishes. */
  animation: wf-page-fade-in 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 backwards;
}
@keyframes wf-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Soft fade for the first hero headline on initial load. The page fade above
   brings the whole surface up at once; this lets "Good design isn't just
   invisible." settle in just behind it instead of arriving with everything
   else.

   Deliberately opacity-only. The same element is one of the hero's
   scroll-driven stagger items, so it also receives GSAP transforms —
   animating transform here would fight them.

   `backwards` holds it transparent through the delay so there's no flash of
   full-opacity text before the fade starts. The fill intentionally does not
   persist forwards: once the fade ends the element returns to the normal
   cascade, leaving nothing overriding its opacity for the scroll animation
   that follows. That also makes this safe against the hero's JS intro, which
   a later rebuild can kill mid-flight — this fade always finishes visible on
   its own. */
[data-home-hero-s1-text-fade] {
  animation: wf-s1-text-fade-in 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s 1 backwards;
}
@keyframes wf-s1-text-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  [data-home-hero-s1-text-fade] { animation: none; }
}
/* Hide page scrollbar (mirrors the .carousel-scroll-x pattern used
   elsewhere in this stylesheet). Scrolling itself still works — only
   the visible bar is suppressed. #smooth-wrapper already has
   overflow:hidden so this only affects the document scroller. */
html,
body {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                /* Chrome / Safari / WebKit */
}
.page-title, .entry-title {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 6);
  max-width: var(--container-content);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.entry-meta, .entry-footer, .post-navigation, #comments {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 6);
  max-width: var(--container-content);
}
.page-content > *, .entry-content > * {
  margin-inline: auto;
  max-width: var(--container-content);
}
.entry-content > .alignwide {
  max-width: var(--container-wide);
}
.entry-content > .alignfull {
  max-width: none;
}
.entry-content > .alignleft {
  float: left;
  margin-right: calc(var(--spacing) * 8);
}
.entry-content > .alignright {
  float: right;
  margin-left: calc(var(--spacing) * 8);
}
.page-blog-archive__tab {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-leading: 1.3;
  line-height: 1.3;
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: -0.48px;
  letter-spacing: -0.48px;
  color: #1F2937;
  text-decoration-line: none;
}
@media (width >= 600px) {
  .page-blog-archive__tab {
    --tw-leading: 52px;
    line-height: 52px;
  }
}
.page-blog-archive__tab {
  display: inline-grid;
  grid-template-columns: max-content;
}
.page-blog-archive__tab:not(.is-active):hover {
  opacity: 0.8;
}
.page-blog-archive__tab__variant {
  grid-column: 1;
  grid-row: 1;
  transition: opacity 280ms ease;
}
.page-blog-archive__tab__variant--sans {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.page-blog-archive__tab__variant--italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  opacity: 0;
}
.page-blog-archive__tab.is-active .page-blog-archive__tab__variant--sans {
  opacity: 0;
}
.page-blog-archive__tab.is-active .page-blog-archive__tab__variant--italic {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-blog-archive__tab__variant {
    transition: none;
  }
}
.pointer-events-auto {
  pointer-events: auto;
}
.pointer-events-none {
  pointer-events: none;
}
.collapse {
  visibility: collapse;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.inset-x-0 {
  inset-inline: calc(var(--spacing) * 0);
}
.start {
  inset-inline-start: var(--spacing);
}
.end {
  inset-inline-end: var(--spacing);
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.top-1\/2 {
  top: calc(1 / 2 * 100%);
}
.top-8 {
  top: calc(var(--spacing) * 8);
}
.top-\[-70px\] {
  top: -70px;
}
.top-\[-130px\] {
  top: -130px;
}
.top-\[-145px\] {
  top: -145px;
}
.top-\[-170px\] {
  top: -170px;
}
.top-\[47px\] {
  top: 47px;
}
.top-\[95px\] {
  top: 95px;
}
.top-\[120px\] {
  top: 120px;
}
.top-\[150px\] {
  top: 150px;
}
.top-\[200px\] {
  top: 200px;
}
.top-\[250px\] {
  top: 250px;
}
.top-\[273px\] {
  top: 273px;
}
.right-0 {
  right: calc(var(--spacing) * 0);
}
.right-\[-35px\] {
  right: -35px;
}
.right-\[-80px\] {
  right: -80px;
}
.right-\[36px\] {
  right: 36px;
}
.right-\[94px\] {
  right: 94px;
}
.right-\[350px\] {
  right: 350px;
}
.bottom-0 {
  bottom: calc(var(--spacing) * 0);
}
.bottom-12 {
  bottom: calc(var(--spacing) * 12);
}
.bottom-\[-100px\] {
  bottom: -100px;
}
.bottom-\[60px\] {
  bottom: 60px;
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.left-1\/2 {
  left: calc(1 / 2 * 100%);
}
.left-\[-25px\] {
  left: -25px;
}
.left-\[-80px\] {
  left: -80px;
}
.left-\[-180px\] {
  left: -180px;
}
.left-\[70px\] {
  left: 70px;
}
.left-\[180px\] {
  left: 180px;
}
.left-\[250px\] {
  left: 250px;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-1 {
  grid-column-start: 1;
}
.row-start-1 {
  grid-row-start: 1;
}
.container {
  width: 100%;
}
@media (width >= 375px) {
  .container {
    max-width: 375px;
  }
}
@media (width >= 600px) {
  .container {
    max-width: 600px;
  }
}
@media (width >= 768px) {
  .container {
    max-width: 768px;
  }
}
@media (width >= 960px) {
  .container {
    max-width: 960px;
  }
}
@media (width >= 1140px) {
  .container {
    max-width: 1140px;
  }
}
@media (width >= 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (width >= 1536px) {
  .container {
    max-width: 1536px;
  }
}
@media (width >= 2025px) {
  .container {
    max-width: 2025px;
  }
}
.m-0 {
  margin: calc(var(--spacing) * 0);
}
.mx-\[0\.12em\] {
  margin-inline: 0.12em;
}
.mx-auto {
  margin-inline: auto;
}
.my-10 {
  margin-block: calc(var(--spacing) * 10);
}
.my-12 {
  margin-block: calc(var(--spacing) * 12);
}
.ms-\[0\.12em\] {
  margin-inline-start: 0.12em;
}
.prose {
  --tw-prose-body: var(--color-foreground);
  --tw-prose-headings: var(--color-foreground);
  --tw-prose-lead: var(--color-foreground);
  --tw-prose-links: var(--color-primary);
  --tw-prose-bold: var(--color-foreground);
  --tw-prose-counters: var(--color-foreground);
  --tw-prose-bullets: var(--color-foreground);
  --tw-prose-hr: var(--color-foreground);
  --tw-prose-quotes: var(--color-foreground);
  --tw-prose-quote-borders: var(--color-primary);
  --tw-prose-captions: var(--color-foreground);
  --tw-prose-kbd: var(--color-foreground);
  --tw-prose-kbd-shadows: var(--color-foreground);
  --tw-prose-code: var(--color-foreground);
  --tw-prose-pre-code: var(--color-background);
  --tw-prose-pre-bg: var(--color-foreground);
  --tw-prose-th-borders: var(--color-foreground);
  --tw-prose-td-borders: var(--color-foreground);
  --tw-prose-invert-body: var(--color-background);
  --tw-prose-invert-headings: var(--color-background);
  --tw-prose-invert-lead: var(--color-background);
  --tw-prose-invert-links: var(--color-primary);
  --tw-prose-invert-bold: var(--color-background);
  --tw-prose-invert-counters: var(--color-background);
  --tw-prose-invert-bullets: var(--color-background);
  --tw-prose-invert-hr: var(--color-background);
  --tw-prose-invert-quotes: var(--color-background);
  --tw-prose-invert-quote-borders: var(--color-primary);
  --tw-prose-invert-captions: var(--color-background);
  --tw-prose-invert-kbd: var(--color-background);
  --tw-prose-invert-kbd-shadows: var(--color-background);
  --tw-prose-invert-code: var(--color-background);
  --tw-prose-invert-pre-code: var(--color-foreground);
  --tw-prose-invert-pre-bg: var(--color-background);
  --tw-prose-invert-th-borders: var(--color-background);
  --tw-prose-invert-td-borders: var(--color-background);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tw-prose-body);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(p) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where([class~='lead'],[class~='is-style-lead']) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: var(--tw-prose-font-medium);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(strong) {
  color: var(--tw-prose-bold);
  font-weight: var(--tw-prose-font-semibold);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a strong) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote strong) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th strong) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='A']) {
  list-style-type: upper-alpha;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='a']) {
  list-style-type: lower-alpha;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='A' s]) {
  list-style-type: upper-alpha;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='a' s]) {
  list-style-type: lower-alpha;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='I']) {
  list-style-type: upper-roman;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='i']) {
  list-style-type: lower-roman;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='I' s]) {
  list-style-type: upper-roman;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='i' s]) {
  list-style-type: lower-roman;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='1']) {
  list-style-type: decimal;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol > li)::marker {
  font-weight: var(--tw-prose-font-normal);
  color: var(--tw-prose-counters);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul > li)::marker {
  color: var(--tw-prose-bullets);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dt) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-semibold);
  margin-top: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(hr) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote) {
  font-weight: var(--tw-prose-font-medium);
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: '\201C''\201D''\2018''\2019';
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote p:first-of-type)::before {
  content: open-quote;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote p:last-of-type)::after {
  content: close-quote;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote > cite) {
  color: var(--tw-prose-body);
  font-style: normal;
  font-weight: var(--tw-prose-font-normal);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote > cite::before) {
  content: '\2014';
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-extrabold);
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1 strong) {
  font-weight: var(--tw-prose-font-black);
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-bold);
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2 strong) {
  font-weight: var(--tw-prose-font-extrabold);
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-semibold);
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 strong) {
  font-weight: var(--tw-prose-font-bold);
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-semibold);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4 strong) {
  font-weight: var(--tw-prose-font-bold);
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(img) {
  margin-top: 2em;
  margin-bottom: 2em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(picture) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd) {
  font-weight: var(--tw-prose-font-medium);
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
}
@supports (color: color-mix(in lab, red, red)) {
  :is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd) {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--tw-prose-kbd-shadows) 10%, transparent), 0 3px 0 color-mix(in oklab, var(--tw-prose-kbd-shadows) 10%, transparent);
  }
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd) {
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code) {
  color: var(--tw-prose-code);
  font-weight: var(--tw-prose-font-semibold);
  font-size: 0.875em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code)::before,:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code)::after {
  content: '`';
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a code) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1 code) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2 code) {
  color: inherit;
  font-size: 0.875em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 code) {
  color: inherit;
  font-size: 0.9em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4 code) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote code) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th code) {
  color: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: var(--tw-prose-font-normal);
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code)::before {
  content: none;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code)::after {
  content: none;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(table) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(table.has-fixed-layout) {
  table-layout: fixed;
  width: 100%;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th) {
  color: var(--tw-prose-headings);
  font-weight: var(--tw-prose-font-semibold);
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody tr) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody tr:last-child) {
  border-bottom-width: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td) {
  vertical-align: baseline;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tfoot) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tfoot td) {
  vertical-align: top;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure > *,figure img) {
  margin-top: 0;
  margin-bottom: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure a) {
  vertical-align: bottom;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figcaption) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(picture > img) {
  margin-top: 0;
  margin-bottom: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(video) {
  margin-top: 2em;
  margin-bottom: 2em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(li) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol > li) {
  padding-left: 0.375em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul > li) {
  padding-left: 0.375em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ul > li p) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ul > li > *:first-child) {
  margin-top: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ul > li > *:last-child) {
  margin-bottom: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ol > li > *:first-child) {
  margin-top: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ol > li > *:last-child) {
  margin-bottom: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul ul,ul ol,ol ul,ol ol) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dl) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dd) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(hr + *) {
  margin-top: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2 + *) {
  margin-top: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 + *) {
  margin-top: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4 + *) {
  margin-top: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th:first-child) {
  padding-left: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th:last-child) {
  padding-right: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td,tfoot td) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td:first-child,tfoot td:first-child) {
  padding-left: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td:last-child,tfoot td:last-child) {
  padding-right: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure) {
  margin-top: 2em;
  margin-bottom: 2em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > :first-child) {
  margin-top: 0;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > :last-child) {
  margin-bottom: 0;
}
.prose .wp-block-table td,.prose .wp-block-table th {
  border: 0;
}
.prose .wp-block-table thead,.prose .wp-block-table tfoot {
  border-color: var(--tw-prose-th-borders);
}
.prose .wp-block-table thead {
  border-bottom-width: 1px;
}
.prose .wp-block-table tfoot {
  border-top-width: 1px;
}
.-mt-\[40px\] {
  margin-top: calc(40px * -1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.mt-9 {
  margin-top: calc(var(--spacing) * 9);
}
.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}
.mt-12 {
  margin-top: calc(var(--spacing) * 12);
}
.mt-14 {
  margin-top: calc(var(--spacing) * 14);
}
.mt-16 {
  margin-top: calc(var(--spacing) * 16);
}
.mt-25 {
  margin-top: calc(var(--spacing) * 25);
}
.mt-35 {
  margin-top: calc(var(--spacing) * 35);
}
.mt-\[14px\] {
  margin-top: 14px;
}
.mt-auto {
  margin-top: auto;
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}
.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}
.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}
.mb-\[16px\] {
  margin-bottom: 16px;
}
.mb-\[34px\] {
  margin-bottom: 34px;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.aspect-\[273\/261\] {
  aspect-ratio: 273/261;
}
.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.size-\[29px\] {
  width: 29px;
  height: 29px;
}
.h-6 {
  height: calc(var(--spacing) * 6);
}
.h-6\.5 {
  height: calc(var(--spacing) * 6.5);
}
.h-\[94px\] {
  height: 94px;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[100svh\] {
  height: 100svh;
}
.h-\[100vh\] {
  height: 100vh;
}
.h-\[124px\] {
  height: 124px;
}
.h-\[150px\] {
  height: 150px;
}
.h-\[170px\] {
  height: 170px;
}
.h-\[310px\] {
  height: 310px;
}
.h-\[390px\] {
  height: 390px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[624px\] {
  height: 624px;
}
.h-\[calc\(2rem\+1\.625rem\+2rem\)\] {
  height: calc(2rem + 1.625rem + 2rem);
}
.h-auto {
  height: auto;
}
.h-fit {
  height: fit-content;
}
.h-full {
  height: 100%;
}
.max-h-\[332px\] {
  max-height: 332px;
}
.max-h-\[400px\] {
  max-height: 400px;
}
.max-h-\[min\(70vh\,720px\)\] {
  max-height: min(70vh, 720px);
}
.min-h-0 {
  min-height: calc(var(--spacing) * 0);
}
.min-h-\[15rem\] {
  min-height: 15rem;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[100svh\] {
  min-height: 100svh;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-6 {
  width: calc(var(--spacing) * 6);
}
.w-\[2px\] {
  width: 2px;
}
.w-\[88px\] {
  width: 88px;
}
.w-\[115px\] {
  width: 115px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[266px\] {
  width: 266px;
}
.w-\[297px\] {
  width: 297px;
}
.w-\[324px\] {
  width: 324px;
}
.w-\[996px\] {
  width: 996px;
}
.w-\[1260px\] {
  width: 1260px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-max {
  width: max-content;
}
.w-screen {
  width: 100vw;
}
.max-w-3xl {
  max-width: var(--container-3xl);
}
.max-w-\[100vw\] {
  max-width: 100vw;
}
.max-w-\[189px\] {
  max-width: 189px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[253px\] {
  max-width: 253px;
}
.max-w-\[332px\] {
  max-width: 332px;
}
.max-w-\[518px\] {
  max-width: 518px;
}
.max-w-\[762px\] {
  max-width: 762px;
}
.max-w-\[790px\] {
  max-width: 790px;
}
.max-w-\[1388px\] {
  max-width: 1388px;
}
.max-w-\[min\(100\%\,1100px\)\] {
  max-width: min(100%, 1100px);
}
.max-w-\[min\(100\%\,calc\(100vw-8rem\)\)\] {
  max-width: min(100%, calc(100vw - 8rem));
}
.max-w-full {
  max-width: 100%;
}
.max-w-max {
  max-width: max-content;
}
.max-w-none {
  max-width: none;
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.min-w-max {
  min-width: max-content;
}
.flex-1 {
  flex: 1;
}
.flex-none {
  flex: none;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.origin-center {
  transform-origin: center;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.rotate-45 {
  rotate: 45deg;
}
.\[transform\:rotate\(315deg\)_scaleX\(-1\)\] {
  transform: rotate(315deg) scaleX(-1);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.gap-1 {
  gap: calc(var(--spacing) * 1);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
.gap-7 {
  gap: calc(var(--spacing) * 7);
}
.gap-8 {
  gap: calc(var(--spacing) * 8);
}
.gap-10 {
  gap: calc(var(--spacing) * 10);
}
.gap-12 {
  gap: calc(var(--spacing) * 12);
}
.gap-\[24px\] {
  gap: 24px;
}
.gap-\[30px\] {
  gap: 30px;
}
.gap-\[50px\] {
  gap: 50px;
}
:where(.space-y-2 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-6 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-8 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-10 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
}
.gap-x-1 {
  column-gap: calc(var(--spacing) * 1);
}
.gap-x-8 {
  column-gap: calc(var(--spacing) * 8);
}
.gap-x-10 {
  column-gap: calc(var(--spacing) * 10);
}
.gap-x-\[9px\] {
  column-gap: 9px;
}
.gap-y-2 {
  row-gap: calc(var(--spacing) * 2);
}
.gap-y-4 {
  row-gap: calc(var(--spacing) * 4);
}
.gap-y-\[40px\] {
  row-gap: 40px;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-solid {
  --tw-border-style: solid;
  border-style: solid;
}
.border-midnight-blue {
  border-color: var(--color-midnight-blue);
}
.border-white {
  border-color: var(--color-white);
}
.bg-\[\#230B59\] {
  background-color: #230B59;
}
.bg-\[\#4840BB\] {
  background-color: #4840BB;
}
.bg-\[\#DADEF1\] {
  background-color: #DADEF1;
}
.bg-\[\#E5E7EB\] {
  background-color: #E5E7EB;
}
.bg-\[\#F9FAFB\] {
  background-color: #F9FAFB;
}
.bg-background {
  background-color: var(--color-background);
}
.bg-midnight-blue {
  background-color: var(--color-midnight-blue);
}
.bg-pale-blue {
  background-color: var(--color-pale-blue);
}
.bg-purple-ghost {
  background-color: var(--color-purple-ghost);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/10 {
  background-color: color-mix(in srgb, #fff 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/10 {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.p-0 {
  padding: calc(var(--spacing) * 0);
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.px-12 {
  padding-inline: calc(var(--spacing) * 12);
}
.px-\[23px\] {
  padding-inline: 23px;
}
.px-\[26px\] {
  padding-inline: 26px;
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-3\.5 {
  padding-block: calc(var(--spacing) * 3.5);
}
.py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.py-12 {
  padding-block: calc(var(--spacing) * 12);
}
.py-16 {
  padding-block: calc(var(--spacing) * 16);
}
.py-20 {
  padding-block: calc(var(--spacing) * 20);
}
.py-\[14px\] {
  padding-block: 14px;
}
.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}
.pt-6 {
  padding-top: calc(var(--spacing) * 6);
}
.pt-15 {
  padding-top: calc(var(--spacing) * 15);
}
.pt-25 {
  padding-top: calc(var(--spacing) * 25);
}
.pt-\[40px\] {
  padding-top: 40px;
}
.pt-\[50px\] {
  padding-top: 50px;
}
.pt-\[107px\] {
  padding-top: 107px;
}
.pt-\[calc\(2rem\+1\.625rem\+2rem\+3rem\)\] {
  padding-top: calc(2rem + 1.625rem + 2rem + 3rem);
}
.pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}
.pb-12 {
  padding-bottom: calc(var(--spacing) * 12);
}
.pb-15 {
  padding-bottom: calc(var(--spacing) * 15);
}
.pb-20 {
  padding-bottom: calc(var(--spacing) * 20);
}
.pb-\[100px\] {
  padding-bottom: 100px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-sans {
  font-family: var(--font-sans);
}
.font-serif {
  font-family: var(--font-serif);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-6xl {
  font-size: var(--text-6xl);
  line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[35px\] {
  font-size: 35px;
}
.text-\[45px\] {
  font-size: 45px;
}
.text-\[60px\] {
  font-size: 60px;
}
.text-\[64px\] {
  font-size: 64px;
}
.text-\[clamp\(2\.25rem\,6vw\,4\.625rem\)\] {
  font-size: clamp(2.25rem, 6vw, 4.625rem);
}
.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}
.leading-6 {
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
}
.leading-\[1\.29\] {
  --tw-leading: 1.29;
  line-height: 1.29;
}
.leading-\[1\] {
  --tw-leading: 1;
  line-height: 1;
}
.leading-\[20px\] {
  --tw-leading: 20px;
  line-height: 20px;
}
.leading-\[24px\] {
  --tw-leading: 24px;
  line-height: 24px;
}
.leading-\[27px\] {
  --tw-leading: 27px;
  line-height: 27px;
}
.leading-\[52px\] {
  --tw-leading: 52px;
  line-height: 52px;
}
.leading-\[60px\] {
  --tw-leading: 60px;
  line-height: 60px;
}
.leading-\[74px\] {
  --tw-leading: 74px;
  line-height: 74px;
}
.leading-\[100\%\] {
  --tw-leading: 100%;
  line-height: 100%;
}
.leading-\[114\%\] {
  --tw-leading: 114%;
  line-height: 114%;
}
.leading-\[129\%\] {
  --tw-leading: 129%;
  line-height: 129%;
}
.leading-\[130\%\] {
  --tw-leading: 130%;
  line-height: 130%;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-snug {
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
}
.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.tracking-\[-0\.2px\] {
  --tw-tracking: -0.2px;
  letter-spacing: -0.2px;
}
.tracking-\[-0\.05em\] {
  --tw-tracking: -0.05em;
  letter-spacing: -0.05em;
}
.tracking-\[-0\.06em\] {
  --tw-tracking: -0.06em;
  letter-spacing: -0.06em;
}
.tracking-\[-0\.9px\] {
  --tw-tracking: -0.9px;
  letter-spacing: -0.9px;
}
.tracking-\[-2\.25px\] {
  --tw-tracking: -2.25px;
  letter-spacing: -2.25px;
}
.tracking-\[-3\.7px\] {
  --tw-tracking: -3.7px;
  letter-spacing: -3.7px;
}
.tracking-tighter {
  --tw-tracking: var(--tracking-tighter);
  letter-spacing: var(--tracking-tighter);
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.text-\[\#1F2937\] {
  color: #1F2937;
}
.text-\[\#18172B\] {
  color: #18172B;
}
.text-\[\#B0ACB7\] {
  color: #B0ACB7;
}
.text-\[rgba\(24\,23\,43\,0\.63\)\] {
  color: rgba(24,23,43,0.63);
}
.text-black {
  color: var(--color-black);
}
.text-charcoal-blue {
  color: var(--color-charcoal-blue);
}
.text-chart-neutral-primary {
  color: var(--color-chart-neutral-primary);
}
.text-content-primary {
  color: var(--color-content-primary);
}
.text-current {
  color: currentcolor;
}
.text-dark-chart {
  color: var(--color-dark-chart);
}
.text-inherit {
  color: inherit;
}
.text-midnight-blue {
  color: var(--color-midnight-blue);
}
.text-purple-ghost {
  color: var(--color-purple-ghost);
}
.text-purple-ghost-50 {
  color: var(--color-purple-ghost-50);
}
.text-white {
  color: var(--color-white);
}
.not-italic {
  font-style: normal;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-100 {
  opacity: 100%;
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[opacity\,background-color\] {
  transition-property: opacity,background-color;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.will-change-\[left\,top\,width\,height\,border-radius\] {
  will-change: left,top,width,height,border-radius;
}
.will-change-\[mask-image\] {
  will-change: mask-image;
}
.will-change-transform {
  will-change: transform;
}
.content-none {
  --tw-content: none;
  content: none;
}
.prose-neutral {
  --tw-prose-body: var(--color-neutral-700);
  --tw-prose-headings: var(--color-neutral-900);
  --tw-prose-lead: var(--color-neutral-600);
  --tw-prose-links: var(--color-neutral-900);
  --tw-prose-bold: var(--color-neutral-900);
  --tw-prose-counters: var(--color-neutral-500);
  --tw-prose-bullets: var(--color-neutral-300);
  --tw-prose-hr: var(--color-neutral-200);
  --tw-prose-quotes: var(--color-neutral-900);
  --tw-prose-quote-borders: var(--color-neutral-200);
  --tw-prose-captions: var(--color-neutral-500);
  --tw-prose-kbd: var(--color-neutral-900);
  --tw-prose-kbd-shadows: var(--color-neutral-900);
  --tw-prose-code: var(--color-neutral-900);
  --tw-prose-pre-code: var(--color-neutral-200);
  --tw-prose-pre-bg: var(--color-neutral-800);
  --tw-prose-th-borders: var(--color-neutral-300);
  --tw-prose-td-borders: var(--color-neutral-200);
  --tw-prose-invert-body: var(--color-neutral-300);
  --tw-prose-invert-headings: var(--color-white);
  --tw-prose-invert-lead: var(--color-neutral-400);
  --tw-prose-invert-links: var(--color-white);
  --tw-prose-invert-bold: var(--color-white);
  --tw-prose-invert-counters: var(--color-neutral-400);
  --tw-prose-invert-bullets: var(--color-neutral-600);
  --tw-prose-invert-hr: var(--color-neutral-700);
  --tw-prose-invert-quotes: var(--color-neutral-100);
  --tw-prose-invert-quote-borders: var(--color-neutral-700);
  --tw-prose-invert-captions: var(--color-neutral-400);
  --tw-prose-invert-kbd: var(--color-white);
  --tw-prose-invert-kbd-shadows: var(--color-white);
  --tw-prose-invert-code: var(--color-white);
  --tw-prose-invert-pre-code: var(--color-neutral-300);
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: var(--color-neutral-600);
  --tw-prose-invert-td-borders: var(--color-neutral-700);
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.\[grid-area\:1\/1\] {
  grid-area: 1/1;
}
@media (hover: hover) {
  .group-hover\:scale-110:is(:where(.group):hover *) {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}
@media (hover: hover) {
  .group-hover\:scale-\[1\.1\]:is(:where(.group):hover *) {
    scale: 1.1;
  }
}
@media (hover: hover) {
  .group-hover\:rotate-45:is(:where(.group):hover *) {
    rotate: 45deg;
  }
}
@media (hover: hover) {
  .group-hover\:opacity-90:is(:where(.group):hover *) {
    opacity: 90%;
  }
}
@media (hover: hover) {
  .group-hover\:\[filter\:brightness\(0\)_invert\(1\)\]:is(:where(.group):hover *) {
    filter: brightness(0) invert(1);
  }
}
@media (hover: hover) {
  .hover\:bg-midnight-blue:hover {
    background-color: var(--color-midnight-blue);
  }
}
@media (hover: hover) {
  .hover\:bg-white:hover {
    background-color: var(--color-white);
  }
}
@media (hover: hover) {
  .hover\:text-midnight-blue:hover {
    color: var(--color-midnight-blue);
  }
}
@media (hover: hover) {
  .hover\:text-white:hover {
    color: var(--color-white);
  }
}
@media (hover: hover) {
  .hover\:opacity-70:hover {
    opacity: 70%;
  }
}
@media (hover: hover) {
  .hover\:opacity-80:hover {
    opacity: 80%;
  }
}
@media (hover: hover) {
  .hover\:opacity-90:hover {
    opacity: 90%;
  }
}
.focus-visible\:outline:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.focus-visible\:outline-2:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-midnight-blue:focus-visible {
  outline-color: var(--color-midnight-blue);
}
.focus-visible\:outline-white:focus-visible {
  outline-color: var(--color-white);
}
@media (width >= 600px) {
  .sm\:right-auto {
    right: auto;
  }
}
@media (width >= 600px) {
  .sm\:left-\[340px\] {
    left: 340px;
  }
}
@media (width >= 600px) {
  .sm\:mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
}
@media (width >= 600px) {
  .sm\:inline-block {
    display: inline-block;
  }
}
@media (width >= 600px) {
  .sm\:h-\[310px\] {
    height: 310px;
  }
}
@media (width >= 600px) {
  .sm\:h-fit {
    height: fit-content;
  }
}
@media (width >= 600px) {
  .sm\:max-w-full {
    max-width: 100%;
  }
}
@media (width >= 600px) {
  .sm\:max-w-max {
    max-width: max-content;
  }
}
@media (width >= 600px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (width >= 600px) {
  .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(11rem\,50\%\)\] {
    grid-template-columns: minmax(0,1fr) minmax(11rem,50%);
  }
}
@media (width >= 600px) {
  .sm\:flex-row {
    flex-direction: row;
  }
}
@media (width >= 600px) {
  .sm\:justify-between {
    justify-content: space-between;
  }
}
@media (width >= 600px) {
  .sm\:gap-6 {
    gap: calc(var(--spacing) * 6);
  }
}
@media (width >= 600px) {
  .sm\:gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
}
@media (width >= 600px) {
  .sm\:px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
}
@media (width >= 600px) {
  .sm\:pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }
}
@media (width >= 600px) {
  .sm\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
}
@media (width >= 768px) {
  .md\:top-\[-20px\] {
    top: -20px;
  }
}
@media (width >= 768px) {
  .md\:top-\[-50px\] {
    top: -50px;
  }
}
@media (width >= 768px) {
  .md\:top-\[50px\] {
    top: 50px;
  }
}
@media (width >= 768px) {
  .md\:top-\[120px\] {
    top: 120px;
  }
}
@media (width >= 768px) {
  .md\:top-\[160px\] {
    top: 160px;
  }
}
@media (width >= 768px) {
  .md\:top-\[180px\] {
    top: 180px;
  }
}
@media (width >= 768px) {
  .md\:right-\[-70px\] {
    right: -70px;
  }
}
@media (width >= 768px) {
  .md\:right-\[-220px\] {
    right: -220px;
  }
}
@media (width >= 768px) {
  .md\:right-\[115px\] {
    right: 115px;
  }
}
@media (width >= 768px) {
  .md\:mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }
}
@media (width >= 768px) {
  .md\:my-20 {
    margin-block: calc(var(--spacing) * 20);
  }
}
@media (width >= 768px) {
  .md\:mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
}
@media (width >= 768px) {
  .md\:mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
}
@media (width >= 768px) {
  .md\:mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }
}
@media (width >= 768px) {
  .md\:mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
}
@media (width >= 768px) {
  .md\:mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
}
@media (width >= 768px) {
  .md\:mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
}
@media (width >= 768px) {
  .md\:mt-40 {
    margin-top: calc(var(--spacing) * 40);
  }
}
@media (width >= 768px) {
  .md\:mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
}
@media (width >= 768px) {
  .md\:block {
    display: block;
  }
}
@media (width >= 768px) {
  .md\:flex {
    display: flex;
  }
}
@media (width >= 768px) {
  .md\:inline-block {
    display: inline-block;
  }
}
@media (width >= 768px) {
  .md\:h-\[198px\] {
    height: 198px;
  }
}
@media (width >= 768px) {
  .md\:h-\[466px\] {
    height: 466px;
  }
}
@media (width >= 768px) {
  .md\:h-\[504px\] {
    height: 504px;
  }
}
@media (width >= 768px) {
  .md\:h-\[min\(70dvh\,560px\)\] {
    height: min(70dvh, 560px);
  }
  .md\:h-\[min\(70svh\,560px\)\] {
    height: min(70svh, 560px);
  }
}
@media (width >= 768px) {
  .md\:max-h-\[504px\] {
    max-height: 504px;
  }
}
@media (width >= 768px) {
  .md\:max-h-\[590px\] {
    max-height: 590px;
  }
}
@media (width >= 768px) {
  .md\:min-h-\[466px\] {
    min-height: 466px;
  }
}
@media (width >= 768px) {
  .md\:w-\[2px\] {
    width: 2px;
  }
}
@media (width >= 768px) {
  .md\:w-\[504px\] {
    width: 504px;
  }
}
@media (width >= 768px) {
  .md\:w-full {
    width: 100%;
  }
}
@media (width >= 768px) {
  .md\:max-w-\[332px\] {
    max-width: 332px;
  }
}
@media (width >= 768px) {
  .md\:max-w-\[min\(100\%\,720px\)\] {
    max-width: min(100%, 720px);
  }
}
@media (width >= 768px) {
  .md\:max-w-full {
    max-width: 100%;
  }
}
@media (width >= 768px) {
  .md\:max-w-none {
    max-width: none;
  }
}
@media (width >= 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (width >= 768px) {
  .md\:grid-cols-\[minmax\(0\,55fr\)_minmax\(0\,45fr\)\] {
    grid-template-columns: minmax(0,55fr) minmax(0,45fr);
  }
}
@media (width >= 768px) {
  .md\:grid-cols-\[minmax\(0\,220px\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0,220px) minmax(0,1fr);
  }
}
@media (width >= 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
}
@media (width >= 768px) {
  .md\:items-center {
    align-items: center;
  }
}
@media (width >= 768px) {
  .md\:items-start {
    align-items: flex-start;
  }
}
@media (width >= 768px) {
  .md\:justify-between {
    justify-content: space-between;
  }
}
@media (width >= 768px) {
  .md\:justify-center {
    justify-content: center;
  }
}
@media (width >= 768px) {
  .md\:gap-10 {
    gap: calc(var(--spacing) * 10);
  }
}
@media (width >= 768px) {
  .md\:gap-16 {
    gap: calc(var(--spacing) * 16);
  }
}
@media (width >= 768px) {
  .md\:gap-30 {
    gap: calc(var(--spacing) * 30);
  }
}
@media (width >= 768px) {
  .md\:gap-\[37px\] {
    gap: 37px;
  }
}
@media (width >= 768px) {
  :where(.md\:space-y-20 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 20) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 20) * calc(1 - var(--tw-space-y-reverse)));
  }
}
@media (width >= 768px) {
  .md\:overflow-visible {
    overflow: visible;
  }
}
@media (width >= 768px) {
  .md\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
}
@media (width >= 768px) {
  .md\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
}
@media (width >= 768px) {
  .md\:py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
}
@media (width >= 768px) {
  .md\:pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
}
@media (width >= 768px) {
  .md\:pt-15 {
    padding-top: calc(var(--spacing) * 15);
  }
}
@media (width >= 768px) {
  .md\:pt-38 {
    padding-top: calc(var(--spacing) * 38);
  }
}
@media (width >= 768px) {
  .md\:pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
}
@media (width >= 768px) {
  .md\:pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
}
@media (width >= 768px) {
  .md\:pl-70 {
    padding-left: calc(var(--spacing) * 70);
  }
}
@media (width >= 768px) {
  .md\:pl-\[340px\] {
    padding-left: 340px;
  }
}
@media (width >= 768px) {
  .md\:text-center {
    text-align: center;
  }
}
@media (width >= 768px) {
  .md\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
}
@media (width >= 768px) {
  .md\:text-\[45px\] {
    font-size: 45px;
  }
}
@media (width >= 768px) {
  .md\:text-\[52px\] {
    font-size: 52px;
  }
}
@media (width >= 768px) {
  .md\:text-\[74px\] {
    font-size: 74px;
  }
}
@media (width >= 768px) {
  .md\:leading-\[52px\] {
    --tw-leading: 52px;
    line-height: 52px;
  }
}
@media (width >= 768px) {
  .md\:leading-\[80px\] {
    --tw-leading: 80px;
    line-height: 80px;
  }
}
@media (width >= 768px) {
  .md\:tracking-\[-3\.7px\] {
    --tw-tracking: -3.7px;
    letter-spacing: -3.7px;
  }
}
@media (width >= 960px) {
  .lg\:top-\[18px\] {
    top: 18px;
  }
}
@media (width >= 960px) {
  .lg\:right-\[146px\] {
    right: 146px;
  }
}
@media (width >= 960px) {
  .lg\:h-\[310px\] {
    height: 310px;
  }
}
@media (width >= 960px) {
  .lg\:h-\[566px\] {
    height: 566px;
  }
}
@media (width >= 960px) {
  .lg\:h-\[624px\] {
    height: 624px;
  }
}
@media (width >= 960px) {
  .lg\:max-h-\[624px\] {
    max-height: 624px;
  }
}
@media (width >= 960px) {
  .lg\:min-h-\[566px\] {
    min-height: 566px;
  }
}
@media (width >= 960px) {
  .lg\:w-\[2px\] {
    width: 2px;
  }
}
@media (width >= 960px) {
  .lg\:w-\[624px\] {
    width: 624px;
  }
}
@media (width >= 960px) {
  .lg\:w-\[996px\] {
    width: 996px;
  }
}
@media (width >= 960px) {
  .lg\:max-w-\[450px\] {
    max-width: 450px;
  }
}
@media (width >= 960px) {
  .lg\:max-w-\[801px\] {
    max-width: 801px;
  }
}
@media (width >= 960px) {
  .lg\:max-w-\[1160px\] {
    max-width: 1160px;
  }
}
@media (width >= 960px) {
  .lg\:max-w-\[min\(100\%\,560px\)\] {
    max-width: min(100%, 560px);
  }
}
@media (width >= 960px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 960px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (width >= 960px) {
  .lg\:gap-12 {
    gap: calc(var(--spacing) * 12);
  }
}
@media (width >= 960px) {
  .lg\:pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
}
@media (width >= 960px) {
  .lg\:text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
}
@media (width >= 960px) {
  .lg\:text-\[55px\] {
    font-size: 55px;
  }
}
@media (width >= 960px) {
  .lg\:text-\[74px\] {
    font-size: 74px;
  }
}
@media (width >= 960px) {
  .lg\:leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }
}
@media (width >= 1140px) {
  .xl\:top-\[90px\] {
    top: 90px;
  }
}
@media (width >= 1140px) {
  .xl\:right-\[-200px\] {
    right: -200px;
  }
}
@media (width >= 1140px) {
  .xl\:right-\[5px\] {
    right: 5px;
  }
}
@media (width >= 1140px) {
  .xl\:right-\[140px\] {
    right: 140px;
  }
}
@media (width >= 1140px) {
  .xl\:right-\[200px\] {
    right: 200px;
  }
}
@media (width >= 1140px) {
  .xl\:left-\[-300px\] {
    left: -300px;
  }
}
@media (width >= 1140px) {
  .xl\:left-\[95px\] {
    left: 95px;
  }
}
@media (width >= 1140px) {
  .xl\:left-\[600px\] {
    left: 600px;
  }
}
@media (width >= 1140px) {
  .xl\:inline-block {
    display: inline-block;
  }
}
@media (width >= 1140px) {
  .xl\:h-\[624px\] {
    height: 624px;
  }
}
@media (width >= 1140px) {
  .xl\:min-h-\[624px\] {
    min-height: 624px;
  }
}
@media (width >= 1140px) {
  .xl\:w-\[72px\] {
    width: 72px;
  }
}
@media (width >= 1140px) {
  .xl\:w-\[624px\] {
    width: 624px;
  }
}
@media (width >= 1140px) {
  .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,574px\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,574px);
  }
}
@media (width >= 1140px) {
  .xl\:gap-10 {
    gap: calc(var(--spacing) * 10);
  }
}
@media (width >= 1140px) {
  .xl\:gap-\[175px\] {
    gap: 175px;
  }
}
@media (width >= 1140px) {
  .xl\:px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
}
@media (width >= 1280px) {
  .\32 xl\:right-0 {
    right: calc(var(--spacing) * 0);
  }
}
@media (width >= 1280px) {
  .\32 xl\:right-\[-100px\] {
    right: -100px;
  }
}
@media (width >= 1280px) {
  .\32 xl\:w-\[1160px\] {
    width: 1160px;
  }
}
@media (width >= 1280px) {
  .\32 xl\:grid-cols-\[minmax\(0\,1fr\)_679px\] {
    grid-template-columns: minmax(0,1fr) 679px;
  }
}
.prose-a\:text-primary :is(a):not(:where([class~='not-prose'],[class~='not-prose'] *)) {
  color: var(--color-primary);
}
.\[\&_a\]\:text-inherit a {
  color: inherit;
}
.\[\&_a\]\:no-underline a {
  text-decoration-line: none;
}
.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}
.\[\&_a\]\:transition-opacity a {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.\[\&_a\:hover\]\:opacity-80 a:hover {
  opacity: 80%;
}
.\[\&_em\]\:italic em {
  font-style: italic;
}
.\[\&_li\]\:m-0 li {
  margin: calc(var(--spacing) * 0);
}
.\[\&_li\]\:p-0 li {
  padding: calc(var(--spacing) * 0);
}
.\[\&_ol\]\:mb-\[1\.1em\] ol {
  margin-bottom: 1.1em;
}
.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
}
.\[\&_ol\]\:pl-\[1\.25em\] ol {
  padding-left: 1.25em;
}
.\[\&_ul\]\:m-0 ul {
  margin: calc(var(--spacing) * 0);
}
.\[\&_ul\]\:mb-\[1\.1em\] ul {
  margin-bottom: 1.1em;
}
.\[\&_ul\]\:flex ul {
  display: flex;
}
.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}
.\[\&_ul\]\:list-none ul {
  list-style-type: none;
}
.\[\&_ul\]\:flex-row ul {
  flex-direction: row;
}
.\[\&_ul\]\:flex-wrap ul {
  flex-wrap: wrap;
}
.\[\&_ul\]\:items-center ul {
  align-items: center;
}
.\[\&_ul\]\:justify-end ul {
  justify-content: flex-end;
}
.\[\&_ul\]\:gap-8 ul {
  gap: calc(var(--spacing) * 8);
}
.\[\&_ul\]\:p-0 ul {
  padding: calc(var(--spacing) * 0);
}
.\[\&_ul\]\:pl-\[1\.25em\] ul {
  padding-left: 1.25em;
}
.\[\&_ul\]\:text-right ul {
  text-align: right;
}
@media (width >= 768px) {
  .md\:\[\&_ul\]\:gap-10 ul {
    gap: calc(var(--spacing) * 10);
  }
}
.\[\&\>p\:not\(\:last-child\)\]\:mb-12 > p:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 12);
}
.bg-purple-ghost {
  background-color: var(--color-purple-ghost);
}
.text-purple-ghost {
  color: var(--color-purple-ghost);
}
.border-purple-ghost {
  border-color: var(--color-purple-ghost);
}
.bg-purple-ghost-50 {
  background-color: var(--color-purple-ghost-50);
}
.text-purple-ghost-50 {
  color: var(--color-purple-ghost-50);
}
.border-purple-ghost-50 {
  border-color: var(--color-purple-ghost-50);
}
.carousel-scroll-x {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Both axes. `pan-x` alone tells the browser that a touch starting here
     may only pan sideways, and it means it: a finger that lands on a card
     and swipes up moves nothing at all. The blog carousel is most of that
     screen on a phone, so the page simply stopped scrolling there. Naming
     both lets the browser pick from the direction of the gesture, which is
     what a sideways carousel inside a page that scrolls down needs. */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-scroll-x::-webkit-scrollbar {
  display: none;
}
.w-bleed-viewport {
  position: relative;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  max-width: 994px;
  margin-inline: auto;
  padding-inline: 26px;
}
@media (min-width: 1280px) {
  .wrapper {
    max-width: 1160px;
    padding-inline: 0;
  }
}
#smooth-wrapper {
  overflow: hidden;
  position: relative;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
}
@media (pointer: coarse) {
  #smooth-wrapper {
    touch-action: pan-y;
  }
  .will-change-transform,
  .will-change-\[left\,top\,width\,height\,border-radius\],
  .will-change-\[mask-image\],
  [data-principles-mode="v2"] .home-principles__slide-title,
  [data-principles-mode="v2"] [data-principles-slide-body],
  [data-principles-mode="v2"] [data-principles-slide-media] {
    will-change: auto;
  }
  /*
   * Two promotions from style-custom.css that only ever pay for themselves on
   * a mouse, released here.
   *
   * The hint on the wrapper is for ScrollSmoother, which moves the whole page
   * with a transform and wants it on its own layer to do that. The smoother is
   * off on touch — the phone scrolls the document itself — so nothing ever
   * transforms this element and the hint buys a full-page texture for a
   * transform that never comes. `backface-visibility: hidden` on the four
   * containers below is the same shape of thing: an old way of asking for a
   * layer, on containers we animate the contents of rather than the box.
   *
   * They looked free because a composited layer costs nothing on the main
   * thread, which is where we had been looking — style and script were healthy
   * in both directions while the reader reported both feeling low-framerate,
   * and that gap is the tell. The cost is in the compositor: this page carried
   * ~20Mpx of layer texture on a 390x844 screen, eight times the viewport, and
   * every frame of every scroll pays to composite it. Worse, most layers here
   * exist by Overlap — promoted only for sitting on top of something already
   * promoted — so the two below were holding a cascade up behind them.
   *
   * Dropping them takes the opening from 20.34Mpx to 14.22Mpx, about 24MB of
   * GPU memory, and removes three layers where only two were asked for. The
   * third is the cascade letting go.
   */
  #smooth-content {
    will-change: auto;
  }
  [data-home-hero-scroll-reveal],
  [data-home-tail-scroll-reveal],
  [data-home-tail-pin-target],
  [data-home-principles] {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  /*
   * And three that are worth promoting, against the grain of everything above.
   *
   * The rules before this one give layers back, because most of what had them
   * was never animated and a composited layer that nothing moves is texture
   * memory for nothing. These three are the opposite case: `syncTouchS1Exit`
   * writes an opacity and a transform to each of them on every frame of the
   * scroll that leaves S1, which is the most heavily animated moment on the
   * page and the first one a reader ever sees.
   *
   * Without a layer, each step of that fade repaints what is underneath it —
   * and one of these is a large serif headline, which is expensive text to
   * lay down sixty times a second. It costs nothing on the main thread and so
   * never showed up in a script profile; it showed up as the transition
   * feeling rough on a phone while every measurement said the frames were
   * fine. Promoted, the same fade is the compositor changing a number.
   *
   * Measured over the gesture at four times CPU throttle: paint 7.0ms to
   * 3.2ms, rasterising 1.4ms to 0.1ms, and about a quarter off the total
   * rendering cost of the transition.
   *
   * Three small boxes on one screen, so the texture this buys back is a
   * rounding error against the ~6Mpx the rules above released.
   */
  /*
   * S2's photographs and headline get the same treatment, for the same
   * reason and now with more to gain: unlike S1's, these carry an arrival as
   * well as a departure, so they are being composited across most of the
   * chapter rather than only as it leaves.
   */
  html.wf-touch-flow [data-home-hero-block="s2"] [data-home-hero-s2-gallery],
  html.wf-touch-flow [data-home-hero-block="s2"] [data-touch-exit],
  html.wf-touch-flow [data-home-hero-block="s1"] [data-home-hero-exit-stagger] {
    will-change: transform, opacity;
  }
}
/*
 * A held chapter's departure, run by the compositor.
 *
 * This used to be JavaScript writing an opacity and a transform on every
 * scroll frame, and on a phone that shakes. Not because the work was slow —
 * profiling found no long frames even at four times CPU throttle — but because
 * the page scrolls on the compositor thread and the transform was being
 * written on the main one. A frame of lag is invisible on an opacity and
 * plainly visible on a position: the photographs stutter against the page they
 * are sitting on.
 *
 * Scroll-driven animations are the fix rather than a workaround. The animation
 * is tied to the scroll position itself, so the browser resolves it wherever
 * it resolves the scroll, and the two cannot disagree. Safari has had them
 * since 26.0.
 *
 * The ranges are absolute scroll positions written by `stageTouchExit`, once,
 * when the layout is measured — so on this path the exits cost nothing per
 * frame at all.
 */
@keyframes wf-touch-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, var(--wf-exit-y, 0px), 0);
  }
}
/*
 * And the arrival, on the same kind of timeline.
 *
 * S2's photographs used to arrive on a GSAP tween fired when the chapter
 * crossed the fold, which is the earliest a clock can start them: their boxes
 * are below the screen until then, so however early the trigger, there is
 * nothing to see. Being able to see them sooner means being able to put them
 * somewhere they are not yet — which is a scroll-linked offset, decaying to
 * nothing as the layout catches up. That is parallax, and it is the only way
 * this chapter can start arriving while the one before it is still leaving.
 *
 * `--wf-in-y` is negative: up the page, into view ahead of the box.
 */
/*
 * The fade finishes before the travel does, which is the difference between
 * a photograph arriving and a photograph being faded up.
 *
 * With one range for both, the picture was still becoming visible at the
 * moment it stopped moving: it reached its place and its full weight on the
 * same pixel, so the whole arrival was one event and the eye had nothing to
 * follow. Landing the opacity at about three quarters leaves the last stretch
 * as settling alone — the picture is simply there, and still easing the last
 * of its offset away under the reader's scroll.
 *
 * Only opacity has a keyframe here. The transform still has its two, so it
 * interpolates across the whole range exactly as before.
 *
 * And the fade is eased, in the one way that can be done here without easing
 * the travel with it.
 *
 * The animation runs `linear`, for the reason set out at the timing function
 * below: the clock is the reader's finger, and a curve on the offset moves
 * the picture at a rate the finger is not moving at — it also costs the top
 * photograph its descent, because an eased offset is spent early and the
 * picture then rises with the page for the rest of its run. All of which is
 * about the transform. None of it is about the opacity, and a fade that
 * brightens at a constant rate for the whole of a gesture is the part that
 * reads as mechanical.
 *
 * A timing function cannot separate the two — it applies to every property
 * between one keyframe and the next. Stops can: these eight trace a sine
 * ease-in-out over the fade, so the picture comes up imperceptibly at first,
 * gathers through the middle and settles into full weight, while the offset
 * between `from` and `to` still decays at exactly the rate the scroll does.
 * Which is the arrival being eased and the parallax being honest.
 */
@keyframes wf-touch-enter {
  from {
    opacity: 0;
    transform: translate3d(0, var(--wf-in-y, 0px), 0);
  }
  9% {
    opacity: 0.038;
  }
  18% {
    opacity: 0.146;
  }
  27% {
    opacity: 0.309;
  }
  36% {
    opacity: 0.5;
  }
  45% {
    opacity: 0.691;
  }
  54% {
    opacity: 0.854;
  }
  63% {
    opacity: 0.962;
  }
  72% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@supports (animation-timeline: scroll()) {
  /*
   * Anything with both runs two animations over two ranges, exit last so it
   * wins wherever they meet. The arrival fills both ways — before its range
   * the photograph is not there yet, which is the state it should hold — and
   * the departure fills forwards only, so between the two the arrival's held
   * value is what shows.
   *
   * The lists have to stay the same length as the names, which is why this is
   * a separate rule rather than an addition to the one below.
   */
  html.wf-touch-flow [data-touch-enter] {
    /*
     * GSAP's reset for this chapter hides the photographs with `autoAlpha`,
     * which is opacity and `visibility: hidden` together. The arrival above
     * animates opacity and nothing else, so without this the whole entrance
     * ran correctly on an element the browser had been told not to draw —
     * every value measuring right and the screen staying empty.
     *
     * `!important` because the hiding is an inline style. Nothing is revealed
     * early by it: before its range the arrival fills at opacity zero.
     */
    visibility: visible !important;
    animation-name: wf-touch-enter;
    animation-fill-mode: both;
    /*
     * Linear, because the timeline is the reader's finger.
     *
     * An eased curve on a scroll timeline moves the picture at a rate the
     * gesture is not moving at — it rushes early and creeps late while the
     * finger travels evenly — and the difference between the two reads as
     * the image being unsure of itself. It also cost the top photograph its
     * descent: nearly all of an eased offset is spent in the first part of
     * the range, so it dropped, ran out of offset, and then rose with the
     * page for the rest. Linear, it comes down the whole way.
     *
     * The variation between the three comes from their ranges and their
     * lifts, which is where it belongs, rather than from a curve.
     */
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
    animation-range: var(--wf-in-from, 0px) var(--wf-in-to, 1px);
  }
  html.wf-touch-flow [data-touch-enter][data-touch-exit] {
    animation-name: wf-touch-enter, wf-touch-exit;
    animation-fill-mode: both, forwards;
    animation-timing-function: ease-out, ease-in-out;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range:
      var(--wf-in-from, 0px) var(--wf-in-to, 1px),
      var(--wf-exit-from, 0px) var(--wf-exit-to, 1px);
  }
  html.wf-touch-flow [data-touch-exit] {
    animation-name: wf-touch-exit;
    /*
     * Forwards and not `both`. A backwards fill would hold the first keyframe
     * before the range as well, which means holding a full opacity over the
     * chapter's own arrival — and that arrival is a GSAP tween writing the
     * same property. A CSS animation outranks it, so the type-in and the
     * photographs' fade-in would both be flattened to "already there".
     * Filling only forwards leaves everything above the range to whoever
     * owns it, and this takes over at the moment the departure begins.
     */
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    /*
     * Declared after the other animation properties: the shorthand resets
     * `animation-timeline`, and WebKit is explicit that the timeline has to
     * come last or it is thrown away.
     */
    animation-timeline: scroll(root block);
    animation-range: var(--wf-exit-from, 0px) var(--wf-exit-to, 1px);
  }
}
#smooth-content {
  overflow: visible;
  width: 100%;
  display: flow-root;
  box-sizing: border-box;
}
/* Fallback for Safari < 15.4 that doesn't support :has() */
#smooth-content::after {
  content: "";
  display: block;
  height: max(6px, env(safe-area-inset-bottom, 0px));
  background-color: var(--color-midnight-blue);
  /*
   * .site-disclaimer uses `top: -1px` to visually cover the 1px seam
   * between it and the pinned dark footer above. `top` doesn't affect
   * flow, so this pseudo (the last element in #smooth-content) still
   * begins 1px BELOW the disclaimer's visual bottom, letting the body's
   * off-white `--color-background` peek through as a stray light line at
   * the very bottom of the page. Pulling the pseudo up by the same 1px
   * closes that flow gap without changing the disclaimer/footer join.
   */
  margin-top: -1px;
}
/* Override to no-op when footer is absent (Safari 15.4+ only) */
#smooth-content:not(:has(#careers.site-footer-viewport-min))::after {
  height: 0;
}
#careers.site-footer-viewport-min {
  min-height: 100vh;
  min-height: 100svh;
  flex-shrink: 0;
  width: 100%;
  align-self: stretch;
}
/* The gutter, or the device's clearance where that is wider — the narrow
 * viewports this rule covers are the ones with no room to absorb a cutout.
 * `max` rather than adding the two, so nothing moves on a phone without one. */
.footer-wrapper {
  padding-left: max(26px, env(safe-area-inset-left, 0px));
  padding-right: max(26px, env(safe-area-inset-right, 0px));
  width: 100%;
  max-width: none;
}
@media (min-width: 768px ) {
  .footer-wrapper {
    width: 100%;
    max-width: 687px;
    margin-inline: auto;
    padding-inline: 0;
  }
}
/* ── The careers footer on a phone ───────────────────────────────────────
   The secondary nav is parked at the footer's bottom edge with absolute
   positioning, which is what keeps it out of the flow and stops it from
   stretching a footer that is meant to be one viewport tall. That works
   while the careers content fits above it. On a phone it does not: the
   roles list is a single column, so with four openings the last posted
   date runs straight into the links.

   So on a phone it goes back into the flow, after the content, and the
   footer is given the same bottom inset the absolute version had. The
   footer grows past one screen, which on a phone it already does. */
@media (max-width: 767px) {
  #careers .site-footer-secondary {
    position: static;
    /* Out of the absolute box it was `left: 0; right: 0`, and its own
       `margin-inline: auto` is what sized it there. As a flex item that
       margin stops it stretching and centres it instead, which puts the
       links in the middle of the screen while everything above them is
       ranged left. */
    width: 100%;
    margin-inline: 0;
  }
  #careers.site-footer-viewport-min {
    /* Room above the eyebrow as well as below the links. The footer is a
       viewport tall and centres what is in it, which gives a top inset for
       free while the content is shorter than the screen — on a phone the
       careers content is taller than that, so the centring resolves to
       nothing and the eyebrow ends up against whatever section is above.
       On the home page that is the article carousel, and the two sections
       share a background colour, so with no inset they read as one. */
    padding-top: 72px;
    padding-bottom: 48px;
  }
  /* Full width, and a size that belongs next to 20px body copy. At 16px
     in a pill sized to its own text it reads as a footnote on a screen
     where it is the section's only action. */
  #careers .site-footer-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
    line-height: 1.25;
    padding-block: 15px;
  }
}

#masthead img {
  transition: filter 0.28s ease-out;
}
#masthead.header-icons-light img {
  filter: brightness(0) invert(1);
}
/*
 * The two strips Safari reads the chrome's colour off.
 *
 * See the note in `syncOverscrollTone` for why they exist at all: from Safari
 * 26 the status bar and the floating address bar take their tint from the
 * `background-color` of a fixed or sticky element at the matching edge of the
 * viewport, and `theme-color` no longer has any say. These are that element,
 * one per edge, and the script paints them with the colour of the chapter the
 * reader is in.
 *
 * Twelve tall and eight of it past the edge, which is the shallowest overhang
 * the sampler still reads. The four pixels left on the screen land under the
 * chrome they are colouring, so on the phones this is for they cannot be seen
 * at all — and where the chrome sits elsewhere, they are the colour of what
 * they are over anyway.
 *
 * Off by default, and `display: none` because it is the one way to take an
 * element out of the sampler's reach — `opacity: 0` and `visibility: hidden`
 * are both still read. The script only builds them on iOS in the first place;
 * this is the backstop, so a strip can never be painted somewhere the bars sit
 * outside the page and those four pixels would simply be a line across it.
 */
[data-wf-tint] {
  display: none;
}
html.wf-touch-flow [data-wf-tint] {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  height: 12px;
  /* Above the flow, so the sampler is never asked to reason about an element
     buried under four screens of chapter — but under the masthead (60) and
     under the menu overlay (40), which are the two things at these edges the
     reader is meant to see. */
  z-index: 30;
  pointer-events: none;
  /* Invisible, and still read. The four pixels on the screen were meant to
     land under the chrome, and on the phone this was recorded on they do not:
     the top one showed as a hairline of the chapter's colour across whatever
     was under it — pink over the last principle's artwork as it went by, pink
     over the navy panel until the swap. The sampler reads `background-color`
     off the element and not off the pixels (which is also why `display: none`
     is the only way to take one out of its reach, above), so this hides the
     line and changes nothing about what the bars are told. */
  opacity: 0;
}
html.wf-touch-flow [data-wf-tint="top"] {
  top: -8px;
}
html.wf-touch-flow [data-wf-tint="bottom"] {
  bottom: -8px;
}
/*
 * With `viewport-fit=cover` the page reaches into the notch and home-indicator
 * strips, which is what we want for the backdrops — they are the whole reason
 * for it. But this bar is pinned to both edges and holds the logo hard left
 * and the menu button hard right, so in landscape on a notched phone those are
 * the two things the cutout would sit on top of. Held off by the inset rather
 * than by a guessed margin, so it is exactly the clearance the device asks for
 * and exactly zero everywhere else, portrait included. The background still
 * paints under the padding, so the bar itself stays edge to edge.
 */
#masthead {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background-color: rgba(255, 251, 250, 0.75);
  -webkit-backdrop-filter: blur(3.1px);
  backdrop-filter: blur(3.1px);
  transform: translateY(0);
  transition: background-color 0.28s ease-out,	-webkit-backdrop-filter 0.28s ease-out,	backdrop-filter 0.28s ease-out,	transform 0.32s ease-out;
  will-change: transform;
}
#masthead.header-icons-light {
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
body.wf-home #masthead {
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
body.wf-menu-open #masthead {
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
#masthead.masthead-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  #masthead {
    transition: background-color 0.28s ease-out,	-webkit-backdrop-filter 0.28s ease-out,	backdrop-filter 0.28s ease-out;
  }
}
.font-gt-alpina-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.site-menu-primary-nav > ul > li > a {
  transition: color 0.25s ease-out;
}
.site-footer-secondary-nav > li > a {
  transition: color 0.25s ease-out, opacity 0.25s ease-out;
}
.site-footer-secondary-nav > li > a:hover {
  color: var(--color-white);
  opacity: 0.9;
}
.site-footer-secondary-nav > li > a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}
.site-menu-primary-nav > ul:has(> li:hover) > li:not(:hover) > a {
  color: var(--color-light-content);
}
/* The menu's own scroll, for the screens where what is in it does not fit.
 * The nav, the two article cards and the secondary links come to within a
 * few pixels of a tall phone's screen with nothing spare, and on a short one
 * they are already past it — the links sat below the bottom edge with no way
 * to reach them, before as well as after the gap above them was opened.
 *
 * It goes on the overlay rather than on the column inside it: the overlay is
 * the only box here with a height of its own to overflow (`fixed inset-0`),
 * where the column is `min-height` and simply grows. On anything taller than
 * a phone there is slack and this never engages. */
@media (max-width: 640px) {
  [data-menu-overlay] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* And a gap the links keep whatever the screen does.
   * `margin-top: auto` is what puts them at the bottom of the column, which
   * on a screen with room to spare is a generous gap and on one without is
   * none at all — they were sitting a few pixels under the second article's
   * title. Padding is the floor under that: free space absorbs it while
   * there is any, so the links stay at the bottom and only the gap above
   * them is guaranteed. Some of it comes back off the bottom inset, which
   * had more than it needed. */
  [data-menu-secondary] {
    padding-top: 48px;
    padding-bottom: 16px;
  }
}
[data-home-hero-slides] > [data-home-hero-block]:first-of-type {
  opacity: 1;
  visibility: visible;
}
[data-home-hero-slides] > [data-home-hero-block]:not(:first-of-type) {
  opacity: 0;
  visibility: hidden;
}
[data-home-hero-slides] > .home-hero__block--footer#careers {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
[data-home-hero-slides] > .home-hero__block--footer#careers.site-footer-viewport-min {
  min-height: 0 !important;
}
[data-home-tail-slides] > [data-home-tail-slide]:first-of-type {
  opacity: 1;
  visibility: visible;
}
[data-home-tail-slides] > [data-home-tail-slide]:not(:first-of-type) {
  opacity: 0;
  visibility: hidden;
}
.home-tail__footer-slide#careers {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.home-tail__footer-slide#careers.site-footer-viewport-min {
  min-height: 0 !important;
}
[data-home-hero-s2-word] {
  display: inline-block;
  white-space: nowrap;
}
[data-home-hero-s2-char] {
  display: inline-block;
}
/* Resting state of the dual masthead: whichever of the two right-hand controls
   is inactive is taken out of layout entirely, so the nav's width never keeps
   the header wide while the icon is the only thing showing.

   `:not([data-masthead-fading])` is what makes the swap animatable. The active
   attribute is committed the moment a transition starts, so without the
   exclusion the outgoing element would hit `display: none` on frame one and its
   fade would never render — no inline opacity can outrank `!important` on
   `display`. The JS holds `data-masthead-fading` for the length of the tween
   and drops it once the outgoing element is already transparent. */
#masthead[data-home-masthead-dual][data-masthead-inline-active="1"]:not([data-masthead-fading]) [data-home-masthead-menu-btn] {
  display: none !important;
}
#masthead[data-home-masthead-dual][data-masthead-inline-active="0"]:not([data-masthead-fading]) [data-home-masthead-inline-nav] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-home-hero-scroll-spacer] {
    display: none;
    height: 0 !important;
    min-height: 0 !important;
  }
  [data-home-hero-scroll-reveal] [data-home-hero-block] {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  [data-home-hero-s2-word],
  [data-home-hero-s2-char] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  [data-home-hero-s3-title-reveal] {
    transform: none !important;
  }
  [data-home-hero-s3-text-before],	[data-home-hero-s3-text-after] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  [data-home-tail-scroll-reveal] [data-home-tail-slide] {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .home-tail__footer-slide#careers {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
}
.home-about__prose {
  font-family: var(--font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: rgba(24, 23, 43, 0.63);
}
.home-about__prose p {
  margin: 0 0 1.1em;
}
.home-about__prose p:last-child {
  margin-bottom: 0;
}
.home-about__prose strong, .home-about__prose b {
  color: #18172b;
  font-weight: 400;
}
.home-principles__slide-title {
  transition: color 0.45s cubic-bezier(0.65, 0.05, 0.36, 1);
  will-change: color;
}
.home-principles__slide-title[data-principles-state="past"] {
  color: #b0acb7;
}
.home-principles__slide-title[data-principles-state="active"] {
  color: #18172b;
}
.home-principles__slide-title[data-principles-state="future"] {
  margin: 0;
  pointer-events: none;
}
[data-home-principles] .home-principles__slide-title[data-principles-state="future"]:not([data-principles-js="1"]) {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

/* =====================================================================
 * Principles V2 — pure CSS transitions, no JS-driven height/opacity tweens.
 * Active when [data-principles-mode="v2"] is set on the section. The JS
 * V2 path measures each title's natural height once at init (into
 * --p-title-h) and pins the body-wrap min-height to the tallest body so
 * layout stops reflowing during cross-fades. After that, all visual
 * transitions are pure CSS — opacity + max-height — driven only by
 * (a) the section's [data-principles-active-index] attribute and
 * (b) each title's [data-principles-state] attribute.
 * ===================================================================== */
/* Principles V2 transitions are short (0.35s) so the crossfade tracks
   scroll direction changes under the pure scroll-position model. When
   the reader crosses a segment midpoint, the previous state fades and
   the next state fades in over 0.35s — quick enough that reversing
   direction mid-scroll feels responsive, slow enough to still read as
   a crossfade rather than a hard cut. All three properties share the
   site's symmetric ease. */
[data-principles-mode="v2"] .home-principles__slide-title {
  max-height: var(--p-title-h, 64px);
  overflow: hidden;
  opacity: 1;
  margin: 0;
  transition: max-height 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              opacity 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              color 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
  will-change: max-height, opacity;
}
[data-principles-mode="v2"] .home-principles__slide-title[data-principles-state="future"] {
  max-height: 0;
  opacity: 0;
}

[data-principles-mode="v2"] [data-principles-slide-body] {
  opacity: 0;
  visibility: hidden;
  height: auto !important;
  overflow: visible !important;
  transition: opacity 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              visibility 0s linear 0.35s;
  will-change: opacity;
}
[data-principles-mode="v2"][data-principles-active-index="0"] [data-principles-slide-body]:nth-of-type(1),
[data-principles-mode="v2"][data-principles-active-index="1"] [data-principles-slide-body]:nth-of-type(2),
[data-principles-mode="v2"][data-principles-active-index="2"] [data-principles-slide-body]:nth-of-type(3),
[data-principles-mode="v2"][data-principles-active-index="3"] [data-principles-slide-body]:nth-of-type(4) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              visibility 0s linear 0s;
}

[data-principles-mode="v2"] [data-principles-slide-media] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              visibility 0s linear 0.35s;
  will-change: opacity;
}
[data-principles-mode="v2"][data-principles-active-index="0"] [data-principles-slide-media]:nth-child(1),
[data-principles-mode="v2"][data-principles-active-index="1"] [data-principles-slide-media]:nth-child(2),
[data-principles-mode="v2"][data-principles-active-index="2"] [data-principles-slide-media]:nth-child(3),
[data-principles-mode="v2"][data-principles-active-index="3"] [data-principles-slide-media]:nth-child(4) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
              visibility 0s linear 0s;
}
/* The bar the fixed masthead sits over is a transparent spacer in the
   document flow, so it shows the body's warm white while the hero below
   it is cool — a seam right under the logo. The home page opens on the
   hero, so the spacer takes the hero's color there. */
body.home .site-header-spacer {
  background-color: #f9fafb;
}
/* Phone leading for the S3 headline. The utility on the element is
   `leading-snug`, which at 64px is 96px of line box — 1.5× the type,
   where the same headline on desktop sits at 0.7. The stacked layout
   (line, slider tile, line) gets its gap tightened with it so the three
   pieces read as one headline rather than three rows. */
@media (max-width: 767px) {
  html .home-hero__s3-title {
    line-height: 68px;
    row-gap: 22px;
  }
}
.home-principles__prose {
  font-family: var(--font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: rgba(24, 23, 43, 0.63);
}
.home-principles__prose p {
  margin: 0;
}
.home-principles__prose p + p {
  margin-top: 24px;
}
.home-principles__prose strong, .home-principles__prose b {
  color: #18172b;
  font-weight: 400;
}
.home-principles__slide-lottie > svg {
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
  /* The artwork is height-fitted, so it is narrower than its container at
     most widths and the container's own `rounded-[20px]` clip never
     reaches it — the corners you see are the Lottie's background plate.
     Round the plate itself so it matches the video and image slides. */
  border-radius: 20px;
  overflow: hidden;
  clip-path: inset(0 round 20px);
}
@media (prefers-reduced-motion: reduce) {
  [data-home-principles].home-principles--reduced-motion .home-principles__slide-title {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  [data-home-principles].home-principles--reduced-motion [data-principles-slide-body] {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  [data-home-principles].home-principles--reduced-motion [data-principles-slide-body] + [data-principles-slide-body] {
    margin-top: 24px;
  }
  [data-home-principles].home-principles--reduced-motion .home-principles__slide-media {
    position: relative !important;
    inset: auto !important;
    display: block;
    height: auto !important;
    aspect-ratio: 4 / 3;
    visibility: visible !important;
    opacity: 1 !important;
  }
  [data-home-principles].home-principles--reduced-motion .home-principles__slide-media + .home-principles__slide-media {
    margin-top: 24px;
  }
}
/* Touch / iPad: document-flow chapters. Desktop pin + ScrollSmoother stay
   on fine pointer. This class is stamped in <head> so the first paint is
   already unstacked — stacked slides would otherwise sit opacity:0. */
html.wf-touch-flow,
html.wf-touch-flow body {
  height: auto;
  min-height: 100%;
}
html.wf-touch-flow {
  overflow-x: hidden;
  overflow-y: auto;
}
/* `overflow-x: hidden` here would compute overflow-y to `auto`, making the
   body its own scroll container — and every `position: sticky` in the
   touch flow (the morph host, About's backdrop, the principles pin) then
   resolves against a scrollport that never scrolls, so nothing pins.
   `clip` guards the same horizontal overflow without that side effect. */
html.wf-touch-flow body {
  overflow-x: clip;
  overflow-y: visible;
}
html.wf-touch-flow #smooth-wrapper {
  overflow: visible;
  height: auto;
  min-height: 0;
  touch-action: pan-y;
}
html.wf-touch-flow #smooth-content {
  transform: none !important;
}
html.wf-touch-flow #page,
html.wf-touch-flow #content,
html.wf-touch-flow .home-scroll,
html.wf-touch-flow .home-hero,
html.wf-touch-flow .home-hero__scroll-reveal,
html.wf-touch-flow .home-hero__pin-target,
html.wf-touch-flow .home-hero__pin-viewport,
html.wf-touch-flow .home-hero__slides,
html.wf-touch-flow .home-tail__scroll-reveal,
html.wf-touch-flow .home-tail__pin-target,
html.wf-touch-flow .home-tail__viewport,
html.wf-touch-flow .home-tail__slides {
  height: auto;
  min-height: 0;
  overflow: visible;
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block] {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  height: auto !important;
  /*
   * `svh` everywhere in this section, never `dvh`.
   *
   * `dvh` is defined to track the viewport as it changes, and on a phone the
   * thing that changes it is the address bar collapsing — which happens
   * during the reader's first swipe. So every block, every hold and every
   * sticky release point was resizing in the middle of the transition that
   * depends on them. The decorations were moved to `svh` for this reason a
   * while ago and the containers holding them were not, which is the worst
   * of both: the contents stayed put while the box around them moved.
   *
   * It is also why it read as more than a layout shift. The scroll ranges
   * the departures run on are absolute pixel positions, measured from this
   * geometry; a height change fires a resize, the ranges are recomputed, and
   * an animation already part-way through one range is suddenly part-way
   * through a different one. That is a jump in opacity and position, not
   * just in layout.
   *
   * `svh` is the screen with the bar showing, and it does not move. The cost
   * is a strip of background below the fold once the bar collapses, which is
   * a flat colour behind a crossfade and cannot be seen. `lvh` would trade
   * that for the bottom row of decoration hanging below the fold whenever the
   * bar is up, which can.
   */
  min-height: 100svh;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* ── S1 and S2 each hold their words still while they change ──────────
   Both chapters are a screen of content in a block that is longer than a
   screen, with the content in a box that sticks to the top of the screen for
   the difference. So the reader's swipe moves the page while the words stay
   exactly where they were composed, which is what lets S1's headline leave by
   fading rather than by sliding off the top, and lets S2's type itself in at
   the same place on the glass instead of arriving from below.

   The hold is the browser's, not ours. A previous version of this held the
   same two boxes with a transform on them, computed from `scrollY` in
   script.js — and on iOS the scroll runs on the compositor while script runs
   on the main thread, so a transform meant to cancel a scroll is always a
   frame or more behind the scroll it is cancelling. What that produces is
   content shaking against the page. `position: sticky` is resolved by the
   compositor without asking script anything, which is the only way this holds
   still on a phone. See S3's morph host, About's backdrop and the blog panel,
   which are sticky for the same reason.

   `--wf-hold` is the travel, in screens, and so also what each chapter adds
   to the page's length. Half a screen is enough to carry a fade and a
   type-in at reading pace and short enough that one ordinary swipe crosses
   the whole handover: from S1 at rest, a screen of scroll lands on S2's top,
   which is exactly where S2's own hold begins.

   `overflow: clip` rather than `hidden` keeps each chapter's decorations
   trimmed to it without making the block a scroll container — which would
   capture the hold and stick it to a box that never scrolls. Same reasoning
   as the blog panel further down. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s2"] {
  --wf-hold: 0.5;
  display: block !important;
  min-height: calc(100svh + var(--wf-hold) * 100svh);
  overflow: clip !important;
}
/* S2's screen is the whole viewport, so its hold takes the top of it. S1's
   starts under the masthead and is that much shorter — see the height rules
   further down — so its hold stops where the bar ends and the chapter keeps
   the composition it was measured for. */
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold] {
  position: sticky;
  top: var(--wf-masthead);
}
html.wf-touch-flow [data-home-hero-block="s2"] > [data-touch-hold] {
  position: sticky;
  top: 0;
}
/*
 * S2 holds longer than S1, and is harder to leave.
 *
 * Its headline was too easy to scroll past. The fade is a fraction of the
 * hold, so lengthening the hold lengthens the time the words are legible
 * without touching the shape of the departure — the same 8% to 86% now spans
 * 49 to 523 pixels instead of 34 to 363.
 *
 * The tail is the other half. It is how far past this rest position a reader
 * may be and still be brought back to it, and S2's is above the page's
 * default so a swipe that slightly overshoots lands on the chapter rather
 * than sailing through it. `data-touch-settle-screens` is what would put an
 * extra stop inside a longer block, and it defaults to one, so a longer hold
 * cannot strand anyone half way through the fade.
 */
/*
 * S1 crosses at S2's pace, not faster than it.
 *
 * At half a screen this handover was reported as whiplashy — the fade is
 * expressed as a fraction of the hold, so half a screen is not just a shorter
 * crossing but a steeper one, and everything in it happens proportionally
 * faster. It had been shortened deliberately, on a note that it took too long;
 * the answer to both is the length the chapter after it already uses, which is
 * the one nobody has objected to in either direction.
 *
 * Nothing else moves. Because the fade's endpoints are fractions, the same 8%
 * to 86% now spans a sixth more travel at a sixth less rate, and the shape of
 * the departure is untouched.
 *
 * 0.6 is also the ceiling. The next chapter's rest sits one screen past this
 * hold and the settle reaches 1.65, so 0.6 lands S2 at 1.60 — inside the reach
 * with the same room to spare S2 was tuned for. Going further would make
 * leaving S1 a two-swipe crossing, which is the fault the shortening was
 * trying to fix in the first place.
 */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"] {
  --wf-hold: 0.6;
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s2"] {
  /*
   * Long enough to read on, short enough to leave in one swipe.
   *
   * The hold is also the distance to the next chapter's rest, and the settle
   * can only carry a reader 1.65 screens — so a hold of 0.72 put S3 1.72
   * screens away and made leaving S2 the two-swipe crossing that leaving S1
   * had just stopped being. 0.6 puts it at 1.60, inside the reach with room
   * to spare.
   *
   * Losing that length costs the headline very little, because what keeps it
   * on the screen is now `TOUCH_S2_EXIT_TEXT_FROM` — it holds at full
   * strength for the first third of the chapter rather than beginning to go
   * 49 pixels in. The hold no longer has to be long to buy reading time.
   */
  --wf-hold: 0.6;
  /*
   * Back to the page's own tail, which is 0.45.
   *
   * This was raised to 0.6 when the headline was too easy to pass, so the
   * settle would catch a reader who had gone slightly too far and put them
   * back. What actually fixed that was `TOUCH_S2_EXIT_TEXT_FROM` — the words
   * now hold at full strength for the first third of the chapter — and the
   * tail was left doing work nothing needed.
   *
   * What it did instead was reach half a screen past the rest and pull back
   * anyone deliberately on their way to S3, against the gesture, over a long
   * enough distance to be unmistakable. Overscrolling S2 and being hauled
   * backwards is the snap fighting the reader rather than guiding them.
   */
  /*
   * S2 alone is not trimmed vertically, because its photographs now arrive
   * from above its own block.
   *
   * The arrival lifts them over a screen up the page so they can be seen
   * while S1 is still coming apart — and `overflow: clip` on the block was
   * throwing exactly that part away. The first attempt at this looked like
   * the imagery had stopped working altogether; it was being drawn and then
   * clipped, a whole screen of the handover empty as a result.
   *
   * Vertically visible, horizontally still clipped. That is the one mixed
   * pair CSS allows, and the horizontal half is the half that matters: the
   * decorations sit against the left and right edges, and letting those spill
   * would give the page a sideways scroll. Nothing needed the vertical trim —
   * every decoration is placed inside the block by offset, and the only thing
   * that ever leaves it is this arrival.
   */
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* ── Rest positions for the chapters ─────────────────────────────────
   Every chapter has a composed rest position — its own top — and every
   build-in on the phone is keyed to a scroll position measured from one
   of those tops. Landing on one is what the chapter is drawn for;
   stopping 200px into it is a half-state nothing was composed for.

   These declarations are the whole definition of where those positions
   are; script.js reads them back and does the settling. There is
   deliberately no `scroll-snap-type` on the scroller to go with them,
   which is why they have no effect of their own. A snap container on the
   document turned every scroll on a phone choppy, and its correction
   animation ran against the scripted one — two things moving the same
   scroller at once. The alignment is the declaration here, not the
   mechanism.

   About's is what makes its build-in reliable: the morph clears the
   section to start and this is what puts the reader at the top of the
   pink screen it was staged for. What About does not get is a position
   for the screens after that one, where the collage climbs over the
   pinned copy — that is a scrub, and it has to be the reader's to run at
   their own pace, so the middle of the section is left free.

   The principles band is one block holding a screen per principle, so
   its top is only the first of its positions; the rest are a viewport
   apart and script.js is handed the count. The blog panel's top is the
   principles → navy handover, which is the last position on the page. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s2"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s3"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="about"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="principles"],
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="blog"] {
  scroll-snap-align: start;
}
/* S1 is the one block that does not begin at the top of its own screen —
   the masthead spacer is above it — so taking its box top as the rest
   position would scroll the page down by the spacer's height and tuck the
   chapter's top decoration under the bar. Backing it off by that same
   height puts it at the top of the page, which is where S1 is composed to
   sit. Read as `scroll-margin` so the offset lives with the position it
   belongs to. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"] {
  scroll-margin-top: var(--wf-masthead);
}
/* How far back onto a top the settle may bring a reader who went past it,
   in screens. The default is half a screen and a little under, which is what
   answers a swipe that overshot; S3 is the one chapter that cannot take that
   much, because the morph into About starts a fraction of a screen below its
   top and being brought back up over that line would play the transition
   backwards under the reader. As much room as the morph leaves, and no more.
   Kept here rather than in script.js because it is a fact about this
   section, and it belongs beside the position it qualifies. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s3"] {
  --wf-settle-tail: 0.14;
}
/* The blog panel rests on its own top, like every other chapter. It used to
   rest a screen past it — its box began where the principles card was
   released, and the view at its top was the card still home over the
   panel. The panel is an ordinary block now, its top edge is the seam with
   the principles, and the rest is where that seam has come up to the top of
   the screen and the panel fills it. Nothing to declare. */
/* Taking the positions away is all it takes to stop the settling, since
   they are the only thing it works from. */
@media (prefers-reduced-motion: reduce) {
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"],
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s2"],
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s3"],
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="about"],
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="principles"],
  html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="blog"] {
    scroll-snap-align: none;
  }
}
/* The color S1, S2, S3 and the principles band all carry, held on the
   container so the blocks themselves have nothing to paint over each
   other with. Everything below (About's photo backdrop, the navy blog
   panel, the footer) brings its own. */
html.wf-touch-flow [data-home-hero-slides] {
  background-color: #f9fafb;
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s2"] {
  background-color: transparent !important;
}
/* ── S1 and S2 decorations, restaged for a phone ─────────────────────
   Both chapters place their imagery with pixel offsets measured against a
   desktop canvas — S1's photo sits 350px in from the right edge, S2's
   chart 180px past the left one — so at phone width they land half
   outside the block and its clip slices them, corners and all. They are
   also positioned against boxes that move: S2's lower pair hangs off the
   headline's own box, which is centred, so on a short screen they are
   pushed below the fold and cut there instead.

   So on touch each chapter gets its own composition rather than a patched
   version of the desktop one: every image anchored to the screen it is
   on, sized against both axes so a short viewport shrinks it instead of
   cropping it, and kept inside the block so the rounded corners the files
   carry are always whole. One row under the masthead, one along the
   bottom, the headline between them.

   Sizes are custom properties because the span and the image inside it
   both need the value — the span is what carries the position, and an
   absolutely positioned box has to have a width of its own to be centred.
   Placement is left/top/right/bottom only, never a transform: these are
   the elements the chapter's build-in and build-out animate, and that
   owns their transform.

   The height in each size is `svh`, the screen with the address bar
   showing. `dvh` would re-size every image the moment the bar collapsed,
   which is a scroll gesture the reader is in the middle of. */
html.wf-touch-flow [data-home-hero-block="s1"] {
  /* Already starts below the masthead — see the height rule below — so it
     needs air rather than clearance. */
  --wf-deco-top: clamp(20px, 4svh, 48px);
  --wf-s1-photo: min(26vw, 11svh);
  --wf-s1-chart: min(52vw, 23svh);
  --wf-s1-chart-bottom: clamp(24px, 6svh, 64px);
}
/* The masthead spacer sits above the hero, so S1 — alone among the blocks,
   since every other one is scrolled to its own top — begins 90px down the
   page. A screen-tall hold therefore ends 90px below the fold, taking the
   decoration anchored to its bottom edge with it, and centres the headline
   that much too low. Both blocks shrink to the screen that is actually
   there; the value is the spacer's own, in the units it is written in. */
html.wf-touch-flow {
  --wf-masthead: calc(2rem + 1.625rem + 2rem);
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s1"] {
  /* The screen S1 actually has, plus the hold's travel. The block is what
     the reader scrolls; the box inside it is what stays still. */
  min-height: calc(100svh - var(--wf-masthead) + var(--wf-hold) * 100svh);
}
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold] {
  height: calc(100svh - var(--wf-masthead));
  min-height: calc(100svh - var(--wf-masthead));
}
html.wf-touch-flow [data-home-hero-block="s2"] {
  --wf-deco-top: clamp(92px, 12svh, 128px);
  --wf-s2-photo: min(50vw, 21svh);
  --wf-s2-chart: min(42vw, 19svh);
  --wf-s2-small: min(27vw, 12svh);
  --wf-s2-chart-bottom: clamp(20px, 5svh, 56px);
  --wf-s2-small-bottom: clamp(64px, 13svh, 132px);
}
/* The headline centres in what is left between the two rows rather than
   in the whole screen, so no viewport is short enough to push it into the
   imagery. Below the fold there is nothing left to collide with. */
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold] {
  padding-top: calc(var(--wf-deco-top) + var(--wf-s1-photo) * 1.1);
  padding-bottom: calc(var(--wf-s1-chart-bottom) + var(--wf-s1-chart) * 0.8);
}
html.wf-touch-flow [data-home-hero-block="s2"] > [data-touch-hold] {
  padding-top: calc(var(--wf-deco-top) + var(--wf-s2-photo) * 1.1);
  padding-bottom: calc(var(--wf-s2-small-bottom) + var(--wf-s2-small) * 1.1);
}
/* S1: the small photo under the masthead on the left, the chart in the
   opposite corner. Its two decoration wrappers are the animated elements,
   so they are stretched over the block and the spans inside them do the
   placing. */
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold]
  > [data-home-hero-exit-stagger]:not([data-home-hero-s1-text-fade]) {
  position: absolute;
  inset: 0;
}
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold]
  > [data-home-hero-exit-stagger]:first-child > span {
  top: var(--wf-deco-top);
  right: auto;
  bottom: auto;
  left: 7vw;
  width: var(--wf-s1-photo);
}
html.wf-touch-flow [data-home-hero-block="s1"] > [data-touch-hold]
  > [data-home-hero-exit-stagger]:last-child > span {
  top: auto;
  right: 6vw;
  bottom: var(--wf-s1-chart-bottom);
  left: auto;
  width: var(--wf-s1-chart);
}
/* S2: the photo centred under the masthead, the chart and the small
   photo along the bottom on opposite sides, the second sitting a little
   higher so the pair reads as a composition rather than a row. */
html.wf-touch-flow [data-home-hero-block="s2"] > [data-touch-hold]
  > div:has([data-home-hero-s2-slot="8"]) {
  inset: 0;
  height: 100%;
}
/* The lower pair hangs off this box on the desktop canvas, and it is the
   headline's own box — centred, so its edges move with the viewport
   height. Taking it out of the positioning chain hands them to the screen
   instead, which is what lets them be anchored to the bottom of it. */
html.wf-touch-flow [data-home-hero-block="s2"] > [data-touch-hold]
  > div:has([data-home-hero-s2-reveal-title]) {
  position: static;
}
html.wf-touch-flow [data-home-hero-block="s2"] span:has([data-home-hero-s2-slot="8"]) {
  top: var(--wf-deco-top);
  right: 0;
  bottom: auto;
  left: 0;
  width: var(--wf-s2-photo);
  margin-inline: auto;
}
/* This photo's file is cut for the desktop canvas, where its span sits at
   the very top of the block and the artwork bleeds off it: the file carries
   the rounded corners on three sides and a flat edge straight across the
   top. Here the whole photo stands on screen below the masthead, that cut
   edge included. Giving the element the radius the file already carries on
   its other corners — ~7.7% of the artwork's width, measured off the
   file — rounds the top two to match, so all four agree with each other
   and with the pair along the bottom. Touch only: on the desktop canvas
   the flat edge is off-canvas, which is what it was cut for. */
html.wf-touch-flow [data-home-hero-block="s2"] [data-home-hero-s2-slot="8"] {
  border-radius: calc(var(--wf-s2-photo) * 0.077);
}
html.wf-touch-flow [data-home-hero-block="s2"] span:has([data-home-hero-s2-slot="3"]) {
  top: auto;
  right: auto;
  bottom: var(--wf-s2-chart-bottom);
  left: 4vw;
  width: var(--wf-s2-chart);
}
html.wf-touch-flow [data-home-hero-block="s2"] span:has([data-home-hero-s2-slot="5"]) {
  top: auto;
  right: 6vw;
  bottom: var(--wf-s2-small-bottom);
  left: auto;
  width: var(--wf-s2-small);
}
/* Every image fills the box its span sets, replacing the fixed widths
   both chapters ship for the desktop canvas. */
html.wf-touch-flow [data-home-hero-block="s1"] [data-home-hero-exit-stagger] img,
html.wf-touch-flow [data-home-hero-block="s2"] [data-home-hero-s2-gallery] {
  width: 100% !important;
  height: auto;
}
/* The slots that only exist to fill a wide canvas. They are gated on
   `sm:` and up, which a tablet in portrait clears, and there they crowd a
   composition that is meant to be three images and a headline. */
html.wf-touch-flow [data-home-hero-block="s2"]
  :is([data-home-hero-s2-slot="1"],
      [data-home-hero-s2-slot="2"],
      [data-home-hero-s2-slot="4"],
      [data-home-hero-s2-slot="6"],
      [data-home-hero-s2-slot="7"],
      [data-home-hero-s2-slot="9"]) {
  display: none !important;
}
/* The headline's letters type in from a few pixels below their line. The
   wrapper's clip is there for the desktop mask reveal, which the touch
   flow never uses, and it would cut each letter off mid-rise. */
html.wf-touch-flow [data-home-hero-block="s2"] [data-home-hero-s2-reveal-title] {
  overflow: visible;
}
/* Recreates the flex context the block itself used to provide, so the
   children — including the absolutely positioned decorations, which
   resolve against this box — keep their composition. One screen tall and
   in flow: it is a layout box, not a hold. */
html.wf-touch-flow [data-touch-hold] {
  position: relative;
  display: flex;
  height: 100svh;
  min-height: 100svh;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}
/* S3 holds the viewport for one extra screen while About rides up over it,
   which is the window the morph plays in. The tile lives in a sticky host
   inside S3 so it can be animated in plain viewport coordinates — a
   `position: fixed` layer rewritten every frame is what iOS refused to
   paint. About's own photo layer is a sticky backdrop carrying the
   identical viewport-sized crop, so the handoff where About parks has
   nothing to see. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="s3"] {
  display: block !important;
  min-height: 200svh;
  z-index: 1;
  overflow: visible !important;
}
html.wf-touch-flow [data-home-hero-block="s3"] > div:not([data-touch-morph-host]) {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  height: 100svh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
}
html.wf-touch-flow [data-touch-morph-host] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  /* Tall viewport units, for the same reason as About's backdrop layer: the
     stage inside this grows to 100% of it, and where it stops growing is
     the screen the reader looks at for the whole of the next chapter. At
     `svh` it stopped a bar's height short and the page showed through
     underneath. The two layers have to agree on this number as well as on
     their corner — the backdrop takes over from the stage at the park with
     no crossfade, so a different height there would read as a jump. */
  height: calc(100lvh + var(--wf-card-over, 0px));
  /* First child, so it shares the title block's space instead of adding
     scroll length. The negative bottom margin (rather than a negative top
     margin, which collapses the sticky range to nothing) is what lets it
     stay pinned for the whole of S3. */
  margin-bottom: calc(-100lvh - var(--wf-card-over, 0px));
  pointer-events: none;
}
/* Radius matches `[data-home-fade-slider]` (`rounded-[20px]`) and is held
   for the whole morph rather than animated away, so the shape that leaves
   the slider is the shape that lands — same as desktop. */
html.wf-touch-flow [data-touch-morph-stage] {
  position: absolute;
  /* The origin the morph translates from. It used to animate `left` and `top`
     from the tile's offset, which is four layout properties changing on every
     frame of the expansion; two of them are now a transform, which the
     compositor can carry on its own. Identical on the screen — a translate is
     a pure offset, so the `cover` crop is still decided by the box's size and
     nothing else. */
  left: 0;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  /* No standing `will-change` here.
     It named `left, top, width, height` — properties no browser can promote
     away from layout, so the hint bought nothing, and it was permanent: the
     layer it does create is held for the whole life of the page, which is the
     over-provisioning this page has already been through once. The expansion
     asks for it while it is running and gives it back at the end. */
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="about"] {
  display: block !important;
  z-index: 2;
  margin-top: -100svh;
  overflow: visible !important;
  background: none !important;
}
/* ── One backdrop for About and the principles band ──────────────────
   Both chapters are built on the same photo — the About backdrop below
   and the principles block's own `background-image` are the same file —
   but they mount it in ways that look nothing like each other. About
   pins a viewport-sized `cover` crop at the top of the screen, so it
   holds still while the reader scrolls; the principles block paints the
   same photo across its own box, which is four screens tall, so the crop
   is a different shape and it travels with the scroll. Reading down from
   one to the other, the backdrop visibly changes and then starts moving.

   So the principles band stops painting anything and About's pinned
   layer is what carries both. What that needs is for About to be as tall
   as the band, so the layer has something to stick to for its length —
   added to the content box below, since a sticky element is held by its
   containing block's content and padding on the block itself buys it
   nothing. The negative margin then takes the same height straight back
   off the outside, so the principles band still starts exactly where it
   did and only the sticky range is longer.

   The band's own height is the one number this needs, and it is no longer a
   number CSS can know. It used to be the slide count times a screen,
   because the band was a pinned screen per principle; the principles are
   ordinary blocks now and the band is as tall as they happen to be, which
   depends on how long each principle's copy is and what shape its artwork
   came in. script.js measures the block and writes the real height here.

   These are the estimate it starts from, so the first paint is close and
   the correction is not a visible reflow: a principle is roughly a screen
   once its title, copy and artwork are stacked, plus a quarter screen for
   the label above and the air below. Being wrong by a little costs nothing
   until the measurement lands — being wrong by three screens, which the old
   per-screen figures now would be, would put the backdrop's release
   nowhere near the blog panel's top. */
/* The band is the column of principles at its natural height — the label,
   then a headline, copy and artwork per principle, one under the next —
   which on a phone comes to a little over a screen each. These are only the
   estimate the first paint uses — the measure pass corrects them from the
   real boxes — so they are set a little generous. Short of the truth the
   sticky backdrop starts with less range than the band needs and there is a
   gap under it for a frame; over it there is nothing to see. */
html.wf-touch-flow [data-home-hero-slides]:has([data-principles-slide-count="2"]) {
  --wf-principles-band: 250svh;
}
html.wf-touch-flow [data-home-hero-slides]:has([data-principles-slide-count="3"]) {
  --wf-principles-band: 325svh;
}
html.wf-touch-flow [data-home-hero-slides]:has([data-principles-slide-count="4"]) {
  --wf-principles-band: 400svh;
}
/* ── The card stays; the blog comes up over it ───────────────────────
   The blog used to be revealed by the card sliding up off a navy panel
   stuck underneath it — a second pinned layer, the panel's own z-order
   games, and a release point that had to land on the same pixel as the
   panel's top or the seam showed. None of that now. The card is pinned for
   About and the principles and is simply painted over by whatever follows:
   the blog is the next block in the document, level with the principles in
   z-order and later, so its top edge rides up the screen over the card the
   way any block's top edge rides up over the one before it. The card never
   moves and never needs to; what is left of it below the blog's top edge is
   under the blog.

   `--wf-band-carry` was how far ahead of the column's end the card was
   released, so the two could leave together. Nothing is released now; it is
   zero, and left declared only so the two places that were written in terms
   of it read the same as they did. */
html.wf-touch-flow [data-home-hero-slides] {
  --wf-band-carry: 0px;
  /* How far below About's content the principles start. With the column
     visible from the moment it enters the screen, the collage has to be gone
     before the column's top reaches the fold, and script.js fades it over
     the quarter-screen before that (`TOUCH_S4_CLEAR_FROM`). This is what
     puts that quarter — and room to see the collage climb first — between
     About's rest and the column's arrival: without it the column's top sat
     inside the screen while About was at rest, under the lowest photograph.
     Scroll length for the sticky card, added to its range below, so the
     card is stuck through it. */
  --wf-s5-lead: 55svh;
  /* How far the card (and the stage that grows into it) runs past the bottom
     of the screen while it is parked. It was the radius and a little, to
     keep the card's rounded bottom corners off the screen's edge; the
     corners are gone (below) and this is now about the edge itself. On a
     phone the visible screen can run taller than `100lvh` says — Safari
     with its bar tucked away was showing the card's bottom edge a few dozen
     pixels up from the bottom, with the page's own colour under it, for the
     whole of the principles. Generous, then: the overrun is below the fold
     while the card is parked, and under the blog once the blog has come up,
     so no amount of it is ever seen. */
  --wf-card-over: 120px;
}
/* The band's own scroll length, taken back off About so the two chapters do
   not both pay for it — plus the half screen the wrapper above is over-tall
   by. That extra is the sticky pin's travel, not scroll the reader has to
   do, and leaving it in the flow is what made the band 1.8 screens from
   About's top: two swipes to cross one handover, with nothing composed in
   between them. Taken back off, the chapter reads as one screen and the
   band is one swipe away, while the collage still has a screen and a half
   to climb over the copy. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="about"] {
  /* The padding on the wrapper below is the card's sticky range and runs to
     the column's end; this takes the same length back off the flow so the
     column sits where About's content ends (plus the lead), and the card is
     stuck under all of it. */
  margin-bottom: calc(
    -1 * (var(--wf-principles-band, 0px) - var(--wf-band-carry, 0px))
  );
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="principles"] {
  background: none !important;
}
html.wf-touch-flow [data-home-about-morph-bg] {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0;
  width: 100% !important;
  /* Large viewport units here, and only here.
     Everything that decides *when* something happens on this page is
     measured in `svh`, because `svh` is the one height that does not change
     when a phone's address bar collapses mid-scroll — see the note on the
     principles pin below. But `svh` is also the *short* height, and this
     layer does not schedule anything: it is the paint. Sized to the short
     viewport it comes up short by exactly the height of the address bar the
     moment that bar gets out of the way, and what shows through the
     shortfall is whatever happens to be behind — the page's own off-white
     for most of the section, and the navy blog panel by the end of it. That
     is the strip along the bottom of the screen.
     `lvh` is the tall height and, like `svh`, a fixed number: it does not
     follow the bar either. So this covers the screen in both states and
     still cannot resize under the reader. The overhang while the bar is
     showing is below the fold and costs nothing. */
  height: calc(100lvh + var(--wf-card-over, 0px)) !important;
  /* Takes no flow space, so About's content still starts at About's top. */
  margin-bottom: calc(-100lvh - var(--wf-card-over, 0px));
  /* Square all round. The top edge is the top of the screen for two
     chapters, and rounded corners there were two notches of the page's
     background under the status bar. The bottom corners used to be the ones
     that left the screen when the card was released over the blog; the card
     is not released any more — the blog comes up over it — so a rounded
     bottom would only ever be seen as two notches of navy at the seam, or,
     on a screen taller than `100lvh` admits to, as a rounded edge hanging a
     little up from the bottom of the screen. The morph stage keeps its own
     radius: its bottom corners are `--wf-card-over` past the screen when it
     hands over to this layer, so the difference is never on the screen. */
  border-radius: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* Nothing hangs below this layer. It is one screen of photograph with the
   morph card's corners still on it, and its bottom edge is the edge of the
   card — which is the whole of the departure below: the edge sweeps up the
   screen and the navy panel is what is behind it. An extension here, of any
   kind, is the one thing that would hide that. */
/* The tail is scroll length, not spacing. About's height is what decides
   when the principles band starts riding up over it, and at 56px the last
   visual of the collage was on screen for a few dozen pixels of scroll
   before it was taken away.
   Now that the two chapters share a backdrop, this is also the beat
   between them: the collage leaves, half a screen of nothing but the
   photo goes by, and the principles column arrives on it. Without the
   room the two sets of content would be on the same still backdrop at
   the same time, which is the one thing a shared backdrop cannot hide. */
html.wf-touch-flow [data-home-hero-block="about"] [data-home-about-content-wrap] {
  height: auto;
  /* Taller than the screen on purpose, and this is the one number that sets
     the section's parallax. The copy is sticky and a sticky box is held
     inside its containing block's *content* box — this one — so the distance
     the collage can climb over the pinned words before they are let go is
     this height minus the copy's own. At one screen there was 200px of it
     and the effect had nowhere to happen; at a screen and a half the photos
     travel the full height of the paragraph they are covering.
     What it does not do is make the chapter longer: the block's own bottom
     margin below takes the extra back off the flow, so this is travel for
     the pin and nothing else. */
  min-height: 148svh;
  overflow: visible;
  /* The beat between the two chapters, and the band on top of it is what
     keeps the shared backdrop pinned through the principles section (see
     above) — cancelled again by About's negative bottom margin, so it is
     scroll length for the sticky layer only and costs the reader nothing.

     It was half a screen when the collage was still in flow and About ran
     1.8 screens: the beat was the only thing separating two sets of content
     on one backdrop, and it had to be long. Now the collage hangs out of
     flow and leaves on the same gesture that brings the band in, so the
     separation is in the timing rather than in the distance, and the beat
     only has to be enough that the band's artwork is not rising through the
     last photograph.

     What sets it exactly is the column's end. This is the one number that
     decides how long the backdrop stays stuck, and it has to stay stuck for
     the whole of the column: any scroll past the column's end where the card
     is still pinned is under the blog, which has come up over it by then,
     and any scroll short of it is the column sliding out of the photograph
     it is printed on. So this runs to the column's bottom edge — a band's
     height less the third of a screen the wrapper above is over-tall by.
     (`--wf-band-carry` is zero now and is kept in the sum only so this and
     About's bottom margin, above, stay written in the same terms.)

     Plus the lead (`--wf-s5-lead`, above): the principles' top is this
     box's bottom, so lengthening the range here is what moves the column
     down. */
  padding-bottom: calc(
    var(--wf-principles-band, 0px) - 36svh - var(--wf-band-carry, 0px)
      + var(--wf-s5-lead, 0px)
  );
}
html.wf-touch-flow [data-home-hero-block="about"] [data-footer-deco-float] {
  transform: none !important;
}
/* A collage rather than a column. The top margin is what leaves the first
   photo peeking above the fold while the copy is being read, so the
   section says there is more below it without showing the whole frame;
   from there each visual overlaps the one before it and the outer two
   run off the edges of the screen, which is the same crowded,
   off-the-grid arrangement the desktop composition has room to make with
   absolute positioning. */
/* The copy is held where it built in and the collage climbs over it: the
   photos travel with the reader's scroll and the words do not, which is
   the parallax, and script.js fades the type out as the frames close over
   it — the three of them leave gaps, and a pinned paragraph showing
   through one of those is the whole of what the fade is for.
   Pinned just under the masthead, which is where the copy already sits at
   About's top, so there is no step into the pin. The row's own bottom
   releases it once the collage has gone by. */
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy {
  position: sticky;
  top: calc(var(--wf-masthead) + 10px);
  z-index: 0;
}
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  height: auto;
  /*      Measured off the paragraph above rather than off the screen. As a share
     of the viewport this was a different gap on every phone — 42px on a tall
     one, half that on a short one — and what it has to clear is the copy,
     which is the same three blocks of text everywhere. A fixed gap puts the
     first frame as high as it can go without touching the words, which is
     as much of a photo as can be shown above the fold. */
  margin: -28px 0 8px;
}
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div > span {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100%;
  max-width: 100% !important;
}
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div > span > span {
  display: block !important;
  width: 100%;
}
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div > span:first-child {
  width: 80%;
  margin-left: -56px;
}
/* The overlaps are percentages of the column's width, so they hold their
   proportion of the frames above them at any screen size. Deep enough that
   each frame lands on the one before it rather than beside it — a collage
   is one composition, and a gap between two of the three reads as a
   column that happens to be indented. */
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div > span:nth-child(2) {
  width: 72%;
  margin-left: auto;
  margin-right: -60px;
  margin-top: -26%;
}
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div > span:nth-child(3) {
  width: 46%;
  margin-left: 2%;
  margin-top: -22%;
}
/* Square boxes reserve the photo's space before it loads: these are lazy
   images with no intrinsic size in the markup, and they build in one at a
   time, so without a reserved box each load would shift the stack below
   it. The sources are all within a few percent of square already. */
html.wf-touch-flow [data-home-hero-block="about"] .home-about__copy + div img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
html.wf-touch-flow #masthead[data-home-masthead-dual] [data-home-masthead-inline-nav],
html.wf-touch-flow #masthead[data-home-masthead-dual][data-masthead-inline-active="1"] [data-home-masthead-inline-nav],
html.wf-touch-flow #masthead[data-home-masthead-dual][data-masthead-inline-active="1"]:not([data-masthead-fading]) [data-home-masthead-inline-nav] {
  display: none !important;
}
html.wf-touch-flow #masthead[data-home-masthead-dual] [data-home-masthead-menu-btn],
html.wf-touch-flow #masthead[data-home-masthead-dual][data-masthead-inline-active="1"] [data-home-masthead-menu-btn],
html.wf-touch-flow #masthead[data-home-masthead-dual][data-masthead-inline-active="1"]:not([data-masthead-fading]) [data-home-masthead-menu-btn] {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html.wf-touch-flow [data-home-masthead-right] {
  width: 1.5rem;
  height: 1.5rem;
}
/* ── A fade behind the bar ────────────────────────────────────────────
   The logo and the menu button sit on the page with nothing under them,
   which was fine while every chapter kept its type clear of the bar. The
   principles are an ordinary column now and scroll straight through it, so
   for most of that section there is a headline or a paragraph directly
   behind the two marks.

   A gradient of the ground's own colour, solid enough behind the marks to
   put the type under them to rest, thinning to nothing over the bar's lower
   half and a hand's width below it — a fade rather than a bar, so the page
   reads as continuous and the marks read as on top of it. Two layers, one
   in the page's white and one in the panel's navy, and the bar's icon state
   picks which is showing: the icons invert over the navy on a short
   transition, and the ground swaps under them on the same one. A gradient
   image cannot be transitioned, which is why it is two layers and an
   opacity rather than one layer and a colour.

   No blur. A blurred strip masked to a fade is the richer treatment, but
   whether a mask fades a backdrop-filter or clips it varies by engine, and
   a hard edge across blurred type would be worse than what this replaces. */
html.wf-touch-flow body.wf-home #masthead::before,
html.wf-touch-flow body.wf-home #masthead::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% + 56px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
}
html.wf-touch-flow body.wf-home #masthead::before {
  background: linear-gradient(
    to bottom,
    rgba(253, 252, 253, 0.96) 0%,
    rgba(253, 252, 253, 0.9) 38%,
    rgba(253, 252, 253, 0.55) 66%,
    rgba(253, 252, 253, 0) 100%
  );
  opacity: 1;
}
html.wf-touch-flow body.wf-home #masthead::after {
  background: linear-gradient(
    to bottom,
    rgba(24, 16, 86, 0.96) 0%,
    rgba(24, 16, 86, 0.9) 38%,
    rgba(24, 16, 86, 0.55) 66%,
    rgba(24, 16, 86, 0) 100%
  );
  opacity: 0;
}
html.wf-touch-flow body.wf-home #masthead.header-icons-light::before {
  opacity: 0;
}
html.wf-touch-flow body.wf-home #masthead.header-icons-light::after {
  opacity: 1;
}
/* The menu's own panel is a flat colour under the bar, and the bar is the
   one thing left on the screen; nothing to fade against. */
html.wf-touch-flow body.wf-home.wf-menu-open #masthead::before,
html.wf-touch-flow body.wf-home.wf-menu-open #masthead::after {
  display: none;
}
/* Above About, whose sticky backdrop would otherwise paint over the
   sections that follow it — About has to sit above S3 for the morph, and
   that puts it above everything with an auto z-index. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="principles"] {
  z-index: 3;
}
/* The blog panel goes *over* the two chapters above it — level with the
   principles and later in the document. Its top edge rides up the screen
   over the parked card the way any block's top edge rides up over the block
   before it, and the card, About's box and the principles' box are all
   under it from the moment it arrives, so nothing of them is left over a
   link. (It used to go under, and the card slid off it; see the note on the
   card above.) The footer stays on top of everything. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="blog"] {
  z-index: 3;
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="footer"] {
  z-index: 4;
}
/* ── The blog, in ordinary page ───────────────────────────────────────
   The handover into the blog has been three things in turn: a wash, with
   the panel fading up over the band; then the card sliding up off a navy
   panel stuck underneath it, on a sticky release; now nothing. The panel is
   the next block in the document, above the parked card in z-order (see
   the stacking above), and its top edge rides up the screen over the card
   the way any block's top edge rides up over the block before it. Nothing
   is pinned here, nothing is released, nothing is timed, and coming back up
   is the same layout read the other way.

   The `data-band-out` attribute script.js still sets once the panel has
   come well up is left with nothing to do here — the panel is already
   above everything it used to be lifted over — and is kept only as the
   signal that switches About's photo layer off behind it. */
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="blog"] {
  /* In flow, at the column's end. It used to be pulled up by the carry to
     where the card was released; the card is not released. */
  margin-top: 0;
  /* As tall as the panel. It was two screens and a quarter — the panel, a
     screen for the card to clear it, and a hold for the settle — all of it
     scroll spent on a panel that was already finished. */
  min-height: 0;
  /* `clip`, not `hidden`: `hidden` would make this a scroll container. */
  overflow: clip !important;
  /* Full strength throughout. It arrives by scrolling in, so there is
     nothing here to fade. */
  opacity: 1 !important;
}
/* "See all" on the headline's line. The row centres the button against the
   whole of the left column — label, headline and the headline's 34px bottom
   margin — which puts it a little above the headline's own middle, and next
   to a 45px serif a little is plenty. Bottom-aligned instead, and lifted by
   the headline's margin plus half the difference between its line and the
   button's height, so the two centres meet. Only where there is a headline
   to meet; with the label alone the row's centring is right. */
html.wf-touch-flow [data-home-section="blog"] .wrapper:has(h2[data-home-blog-cascade]) > a[data-home-blog-cascade] {
  align-self: flex-end;
  margin-bottom: calc(34px + (45px * 1.14 - 46px) / 2);
}
html.wf-touch-flow [data-home-hero-slides] > [data-home-hero-block="blog"] > div {
  /* In flow. It was stuck to the top of the screen so the card could slide
     off it; nothing slides off it now, it is a screen of navy that scrolls
     like the rest of the page. */
  position: static;
  /* The panel centres its content, and it was centring it in the whole
     screen — including the strip the masthead is sitting over. What that
     puts on the glass is a chapter with a hand's width of navy under it and
     almost none above: the heading tucked up against the bar, the articles
     riding high, and the reader reading it as slipped rather than composed.
     Every other chapter on the page clears the bar before it starts. Given
     the same clearance, the centring happens in the screen the reader can
     actually see and the two margins come out equal. */
  padding-top: var(--wf-masthead, 90px);
  /* Its own screen, not the block's `flex-1`. */
  flex: none;
  height: 100svh;
  min-height: 0;
  /* The panel's content is a little over two thirds of a screen, so there
     is nothing to scroll — and a nested scroller here would swallow the
     page's own scroll on a phone. */
  overflow: visible;
}
html.wf-touch-flow .home-hero__block--principles {
  overflow: visible;
}
/* ── The band, in ordinary page ───────────────────────────────────────
   The section used to be one screen per principle plus one for the
   release, with the pin below holding a single composed screen and the
   scroll position choosing which principle was on it. Everything the
   reader saw here was a function of where their finger had got to: which
   title was collapsed, which body was in the one grid cell the three
   shared, which artwork was the visible one of a stack of three.

   None of that is left. Each principle is its own run of the page —
   title, copy, artwork, the next one below it — and the only thing
   keyed to the scroll is the entrance, which is an observer firing once
   as each one comes up. There is no index, no crossfade, no screen
   boundary and no pin, which is three of the four things that were
   writing to this section every frame.

   The height follows from that: the block is as tall as the principles
   are, and the figure the backdrop needs is measured rather than
   declared (see `--wf-principles-band` above). */
html.wf-touch-flow .home-hero__block--principles {
  display: block !important;
}
html.wf-touch-flow [data-home-principles-pin] {
  /* Was `sticky` with a screen's height. The whole section scrolls now. */
  position: static;
  height: auto;
  min-height: 0;
  flex: none;
  /* Where the section starts: measured from the masthead rather than the top
     of the screen, so the label clears the logo when the section's top is
     brought to the top of the screen. */
  --wf-principles-park: calc(var(--wf-masthead, 90px) + clamp(8px, 1.5svh, 20px) - 24px);
  padding-top: var(--wf-principles-park);
  /* Air under the last artwork, before the navy: the blog block begins at
     this block's bottom edge, so this is the whole of the margin between
     the last principle and the seam. Enough to be a margin, not so much
     that the card runs on empty — it was a hundred pixels once. */
  padding-bottom: clamp(32px, 5svh, 48px);
}
/* ── One column of principles ─────────────────────────────────────────
   The label, then each principle as a block — headline, copy, artwork —
   one under the next, in flow. Nothing parks, nothing dissolves, nothing
   builds in: the reader scrolls it as they would any page, and when the
   column ends the blog's navy comes up over the card it was printed on.

   What this replaces parked the section under the masthead and swapped the
   three principles on the same spot as the reader scrolled a dwell for
   each, with cues, an index and a handover transition to run it. All of
   that is gone; the column is the document.

   Built in script.js, because the markup groups the section by part for the
   desktop crossfade and a principle has no box in it. */
html.wf-touch-flow [data-principles-column] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
html.wf-touch-flow [data-principles-block] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Between one principle and the next: more than the gap between a headline
   and its own copy, so the column reads as three things rather than one. */
html.wf-touch-flow [data-principles-block] + [data-principles-block] {
  margin-top: clamp(48px, 12svh, 96px);
}
/* The label's air below it, now that the label is a line at the top of the
   column rather than sticky in its own right. */
html.wf-touch-flow [data-principles-column] > p[data-home-principles-cascade] {
  margin: 0 0 clamp(10px, calc(3svh - 8px), 22px);
}
/* ── One column, in reading order ─────────────────────────────────────
   The markup composes a desktop layout: a text column holding the label,
   a stack of every title and a grid cell holding every body overlapped,
   beside a media column holding every artwork overlapped. Three of the
   four groups are containers whose only job is that arrangement.

   On a phone the reading order is per principle instead — title, copy,
   artwork, then the next principle — which crosses all three groups.
   `display: contents` drops the containers out of the box tree so their
   children become items of the one column below, and `order` interleaves
   them. Nothing is re-parented and no markup is duplicated, so the
   desktop arrangement is still the only one in the document. */
html.wf-touch-flow [data-home-principles-pin] > div > [data-home-principles-text],
html.wf-touch-flow [data-home-principles-pin] [data-home-principles-titles],
html.wf-touch-flow [data-home-principles-pin] [data-home-principles-bodies-wrap],
html.wf-touch-flow [data-home-principles-pin] > div > [data-home-principles-cascade],
html.wf-touch-flow [data-home-principles-pin] > div > [data-home-principles-cascade] > div {
  display: contents;
}
html.wf-touch-flow [data-home-principles-pin] > div {
  /* Spacing is per role rather than uniform: the gap between a title and
     its own copy is not the gap between one principle and the next, and a
     single `gap` on the column cannot tell them apart. */
  gap: 0;
  min-height: 0;
  /* Stated rather than assumed. The tracks are appended here as flex items,
     and this box's own direction comes from a utility class in the template
     that the desktop layout owns. A row here would put three principles
     side by side. */
  flex-direction: column;
}
/* The `order` interleave that used to deal the three part-wrappers back
   into reading order is gone with them: each principle is a real group with
   its headline, copy and artwork in it, in that order, in the document. */
html.wf-touch-flow [data-home-principles-pin] [data-principles-slide-title] {
  max-height: none;
  overflow: visible;
  opacity: 1;
  /* The crossfade's own transitions, on the properties the entrance
     animates. Left in, every tween would be run twice — once by GSAP and
     once by the transition chasing it. */
  transition: none;
  will-change: auto;
  /* No break above it any more. This was the gap between one principle and
     the next when they were stacked down a column; they are stacked on each
     other now and the headline is the first thing in its group, so this would
     only open a hole between the label and the words under it. The label
     carries that spacing itself. */
  margin-top: 0;
}
html.wf-touch-flow [data-home-principles-pin] [data-principles-slide-body] {
  /* Was `[grid-area:1/1]` — the cell the three bodies shared. The cell is
     back, one level up: the groups share it and this is a plain block in
     whichever group it belongs to. */
  grid-area: auto;
  opacity: 1;
  /* `inherit`, not `visible`. This is here to undo the crossfade's
     `visibility: hidden`, and `visible` did that and then went further than
     it should: visibility is inherited, so a child stating it outright
     overrides the group above deciding it — the hidden principles would have
     stayed in rendering with only their group's opacity keeping them off the
     screen, which is the compositing this was meant to avoid. */
  visibility: inherit;
  transition: none;
  will-change: auto;
  margin-top: clamp(10px, 1.66svh, 14px);
}
html.wf-touch-flow [data-home-principles-pin] [data-principles-slide-media] {
  /* The artworks after the first are `absolute inset-0` over the first. */
  position: relative !important;
  inset: auto !important;
  opacity: 1;
  /* See the body above: inherited, so the group can take it out of
     rendering. */
  visibility: inherit;
  transition: none;
  will-change: auto;
  flex: none;
  /* Its own shape, at the column's width and a little past it.
     The old box was 1.25:1 and height-capped at a third of the screen,
     because the artwork had to share one pinned screen with all three
     bodies. All three of these are close to square — 1.1, 0.92, 1.1 — so
     that box was cropping the video and letterboxing the two Lotties, and
     the cap is what kept it small. With a run of the page each, height is
     free: the width is given and the height is whatever the artwork's own
     aspect makes it, which is both larger and the first time none of them
     is being cut.
     Width is 32px of the screen on either side. It used to run wider than
     the copy beside it — out to 10px of the edge — which read as the
     artwork being the section rather than an illustration of it, and cost
     the height that width came with on a screen that has none to spare.
     `50vw - 50%` is the column's own side padding, whatever it is at this
     width, so this is what is left to make up the 32px and is 0 wherever
     the column is already inset that far. */
  --wf-principles-inset: max(0px, calc(32px - (50vw - 50%)));
  width: calc(100% - 2 * var(--wf-principles-inset));
  max-width: none;
  margin-inline: var(--wf-principles-inset);
  height: auto !important;
  max-height: none;
  margin-top: clamp(20px, 3svh, 32px);
}
/* The Lottie's SVG is `height: 100%` for the box it used to be given. With
   the box now sized by the artwork, that is the child asking the parent
   for a height the parent is asking the child for — it collapses. Width
   in, height out. */
html.wf-touch-flow [data-home-principles-pin] [data-principles-slide-lottie] > svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* The label's sticky life and the scrim under it are both gone: it sits
   inside the parked box now (see the dissolve above), so nothing passes under
   it and it leaves when the section does. */
/* The type scales with the screen for the same reason the boxes do. Each
   upper bound is the size the section already used, so a tall phone is
   untouched; the floors are where the words stop shrinking and the
   artwork gives up its height instead. */
/* The label holds its size. Scaling it with the screen took it to 17px on a
   phone with its address bar showing, which is where the section started
   reading as small print — the body copy here should be the size the careers
   list sets its posted dates in, and that is 20px on every screen. The
   artwork below gives up the height instead. */
html.wf-touch-flow [data-home-principles-text] > p {
  font-size: 20px;
  line-height: 1.2;
}
/* The designed size, flat. It was scaled against the screen's height for
   as long as a principle had to fit inside one — on a short phone that put
   the titles at 27px. Nothing has to fit a screen any more, so the type is
   the size it was drawn at and one more thing on the page has stopped
   depending on a viewport unit. */
html.wf-touch-flow .home-principles__slide-title {
  font-size: 35px;
}
/* Body copy across the scroll runs at the eyebrow's size on phones — the
   desktop 24px is set against a much wider measure, and at 390px it reads
   as oversized next to the label above it. Colours are untouched. */
html.wf-touch-flow .home-principles__slide-body,
html.wf-touch-flow .home-principles__prose,
html.wf-touch-flow [data-home-hero-block="about"] .home-about__prose {
  font-size: 20px;
}
/* Steeper than the type: paragraph spacing is the cheapest height in the
   column to give up, and the last thing a reader would notice. */
html.wf-touch-flow .home-principles__prose p + p {
  margin-top: clamp(14px, calc(6.8svh - 33px), 24px);
}
/* The lottie container is `max-w-max` below `sm`, which pins it to the
   artwork's own box. Released entirely rather than to 100%: the artworks
   run a little wider than the column they sit under (see the bleed above),
   and a cap of 100% is a cap at the column's width — it held the two
   Lotties at 338 while the video beside them took its 370. */
html.wf-touch-flow [data-principles-slide-lottie] {
  max-width: none !important;
}
html.wf-touch-flow [data-home-tail-slides] > [data-home-tail-slide] {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100svh;
  opacity: 1 !important;
  visibility: visible !important;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-outline-style: solid;
    }
  }
}