@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/site/fonts/2a5f6aa64321acf7-a442dfa53860.ttf") format('truetype');
}
@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/site/fonts/2896808b2b5017ad-cd9567cc96a3.ttf") format('truetype');
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/site/fonts/6f2e69a4bd86a4a9-e5717ff6c206.ttf") format('truetype');
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/site/fonts/c9c5d9fc72b61cf7-dd3eeea7203e.ttf") format('truetype');
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/site/fonts/754c1462461a27a6-b5e9e6a806c7.ttf") format('truetype');
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/site/fonts/98ef213294065e27-22261f10e78d.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/site/fonts/a699af1dea30b799-1b08e7fc267a.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/site/fonts/e45972c7e9f24dc3-8c883f63b2c4.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/site/fonts/87e867b52640b3b3-e7a1aaf7eda9.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/site/fonts/6f49e1b28bce7339-b37284b5701b.ttf") format('truetype');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/site/fonts/cbf09ec2661261a1-016d619cf573.ttf") format('truetype');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/site/fonts/51da1855038b9c64-130cfbbfd727.ttf") format('truetype');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/site/fonts/db7730bce8b8cdb8-fa89486163fc.ttf") format('truetype');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/site/fonts/3a72ac3a0396c0d7-b7ee08e7cb1f.ttf") format('truetype');
}

/* Sapien — webfonts
   Helvetica Now Display (the brand display/text face) now ships locally:
   Medium (500) + Bold (700), each with its italic. These are the licensed
   files the user uploaded. Arimo remains in the token fallback stack for
   machines fetching before the woff2 loads, and Spline Sans Mono + Inter
   load from Google Fonts (mono micro-labels + a few UI labels). */



@font-face {
  font-family: "Helvetica Now Display";
  src: url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-Medium-6a8b72042e5f.woff2") format("woff2"),
       url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-Medium-d37e54709dc9.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-MediumItalic-1a352232ad85.woff2") format("woff2"),
       url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-MediumItalic-ba3943759925.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-Bold-b31c113b8411.woff2") format("woff2"),
       url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-Bold-a818cc3f4a58.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-BoldItalic-8cfe1edf357b.woff2") format("woff2"),
       url("/_ds/sapien-design-system-a4e80fa5-71fc-4a0a-9858-6678d9de4f6a/assets/fonts/HelveticaNowDisplay-BoldItalic-93ed5454af5c.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* Sapien — Color tokens
   Pulled from the Sapien 2.0 Figma file + the live site CSS.
   Backbone: ink-on-paper neutral system with one electric blue accent
   and a hard red used only for emphasis/error. */

:root {
  /* ---- Base palette ---------------------------------------------- */
  --sp-blue: #0000FF;          /* electric brand blue (accent)        */
  --sp-blue-ink: #0000CC;      /* pressed/darker blue                 */
  --sp-ink: #111111;           /* near-black, primary text + marks    */
  --sp-black: #000000;
  --sp-white: #FFFFFF;
  --sp-offwhite: #FAFAFA;      /* default page background             */
  --sp-paper: #F6F6F6;         /* lightgrey gradient base             */

  --sp-grey-50:  #F3F4F6;      /* light surface / card fill           */
  --sp-grey-100: #E5E9ED;      /* heading-ghost grey                  */
  --sp-grey-150: #D9DDE1;      /* subheading grey                     */
  --sp-grey-200: #D9D9D9;      /* hairline / disabled fill            */
  --sp-slate: #606E7B;         /* body grey (the workhorse muted ink) */
  --sp-chrome: #8E9BA1;        /* chrome gradient mid                 */
  --sp-water: #465967;         /* deep slate gradient                 */
  --sp-night: #18232C;         /* near-black slate gradient           */
  --sp-surface-dark: #202121;  /* dark card surface                   */
  --sp-red: #FF0000;           /* emphasis / error only               */

  /* ---- Derived (opacity) ----------------------------------------- */
  --sp-line: rgba(17,17,17,0.06);        /* grid lines, card hairline */
  --sp-line-strong: rgba(0,0,0,0.14);    /* stat-block border         */
  --sp-line-white: rgba(255,255,255,0.12);/* grid lines on blue/dark  */

  --sp-body: rgba(96,110,123,0.80);      /* default muted body text   */
  --sp-body-muted: rgba(96,110,123,0.50);/* grey50 secondary text     */
  --sp-body-faint: rgba(96,110,123,0.40);/* faint labels              */
  --sp-ghost: rgba(96,110,123,0.32);     /* ghosted display headings  */

  /* ---- Semantic (light, default) --------------------------------- */
  --sp-bg: var(--sp-offwhite);
  --sp-bg-alt: var(--sp-grey-50);
  --sp-surface: var(--sp-grey-50);
  --sp-surface-raised: var(--sp-white);

  --sp-text: var(--sp-ink);
  --sp-text-muted: var(--sp-body);
  --sp-text-subtle: var(--sp-body-muted);
  --sp-text-ghost: var(--sp-ghost);
  --sp-text-on-accent: var(--sp-grey-50);

  --sp-accent: var(--sp-blue);
  --sp-accent-hover: var(--sp-blue-ink);
  --sp-border: var(--sp-line);
  --sp-border-strong: var(--sp-line-strong);
  --sp-focus: var(--sp-blue);
}

/* ---- Blue section theme (full-bleed #0000FF panels) -------------- */
[data-theme="blue"] {
  --sp-bg: var(--sp-blue);
  --sp-bg-alt: var(--sp-blue);
  --sp-surface: var(--sp-blue);
  --sp-text: var(--sp-grey-50);
  --sp-text-muted: rgba(243,244,246,0.72);
  --sp-text-subtle: rgba(243,244,246,0.50);
  --sp-text-ghost: rgba(243,244,246,0.32);
  --sp-border: var(--sp-line-white);
  --sp-border-strong: var(--sp-line-white);
}

/* ---- Dark theme (night gradient / dark cards) ------------------- */
[data-theme="dark"] {
  --sp-bg: var(--sp-ink);
  --sp-bg-alt: var(--sp-surface-dark);
  --sp-surface: var(--sp-surface-dark);
  --sp-surface-raised: var(--sp-surface-dark);
  --sp-text: var(--sp-offwhite);
  --sp-text-muted: rgba(250,250,250,0.80);
  --sp-text-subtle: rgba(250,250,250,0.56);
  --sp-text-ghost: rgba(243,244,246,0.16);
  --sp-text-on-accent: var(--sp-grey-50);
  --sp-border: var(--sp-line-white);
  --sp-border-strong: var(--sp-line-white);
}

/* Sapien — Typography tokens
   One family does almost all the work: Helvetica Now Display, mostly Bold.
   Monospace is reserved for micro-labels (steps, indices, eyebrows).
   Display headings track tight (-0.02em); labels track open (+0.02em). */

:root {
  /* ---- Families -------------------------------------------------- */
  --sp-font-display: "Helvetica Now Display", "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sp-font-sans:    "Helvetica Now Display", "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sp-font-ui:      "Inter", "Helvetica Now Display", "Arimo", sans-serif;
  --sp-font-mono:    "Spline Sans Mono", "Suisse Int'l Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights --------------------------------------------------- */
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-weight-bold: 700;

  /* ---- Type scale (desktop, px) ---------------------------------- */
  --sp-text-display: 90px;  /* stat numerals                          */
  --sp-text-h1: 84px;
  --sp-text-h2: 48px;
  --sp-text-h3: 32px;
  --sp-text-h4: 22px;
  --sp-text-h5: 17px;
  --sp-text-body: 15px;
  --sp-text-sm: 14px;
  --sp-text-xs: 13px;
  --sp-text-label: 14px;   /* mono micro-label                        */

  /* ---- Line heights ---------------------------------------------- */
  --sp-leading-tight: 1.1;   /* display + H1/H2                       */
  --sp-leading-snug: 1.2;
  --sp-leading-normal: 1.33; /* body, buttons                        */

  /* ---- Tracking -------------------------------------------------- */
  --sp-track-tight: -0.02em; /* large display headings               */
  --sp-track-normal: 0em;
  --sp-track-label: 0.02em;  /* mono labels, button text             */
  --sp-track-wide: 0.03em;
}

/* ---- Reusable type classes (optional helpers) ------------------- */
.sp-h1 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h1); line-height: var(--sp-leading-tight); letter-spacing: var(--sp-track-tight); }
.sp-h2 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h2); line-height: var(--sp-leading-tight); letter-spacing: var(--sp-track-tight); }
.sp-h3 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h3); line-height: var(--sp-leading-snug); letter-spacing: var(--sp-track-tight); }
.sp-h4 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h4); line-height: var(--sp-leading-snug); }
.sp-body { font-family: var(--sp-font-sans); font-weight: var(--sp-weight-medium); font-size: var(--sp-text-body); line-height: var(--sp-leading-normal); color: var(--sp-text-muted); }
.sp-label { font-family: var(--sp-font-mono); font-weight: var(--sp-weight-regular); font-size: var(--sp-text-label); letter-spacing: var(--sp-track-label); }

/* Sapien — Spacing, radii, layout, motion tokens
   The site is built on a hairline grid: square cards, 0-radius dividers,
   generous vertical rhythm. Pills are the one exception (buttons). */

:root {
  /* ---- Spacing scale (px) — mirrors the Figma 4/16/24/80/120/240 set */
  --sp-space-0: 0;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 40px;
  --sp-space-8: 48px;
  --sp-space-9: 60px;
  --sp-space-10: 80px;
  --sp-space-12: 120px;
  --sp-space-16: 160px;
  --sp-space-24: 240px;

  /* ---- Radii ----------------------------------------------------- */
  --sp-radius-none: 0px;    /* default — cards & dividers are square  */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 8px;
  --sp-radius-md: 10px;     /* small status icons                    */
  --sp-radius-pill: 40px;   /* buttons                               */
  --sp-radius-full: 999px;

  /* ---- Borders --------------------------------------------------- */
  --sp-border-width: 1px;
  --sp-border-hairline: 0.5px;

  /* ---- Shadows (used sparingly) ---------------------------------- */
  --sp-shadow-card: inset 0 0 0 0.5px var(--sp-line), 0 0 0 0.5px var(--sp-line);
  --sp-shadow-soft: 0 1px 2px rgba(96,110,123,0.10);
  --sp-shadow-pop: 0 8px 40px rgba(17,17,17,0.10);

  /* ---- Layout ---------------------------------------------------- */
  --sp-container: 1280px;
  --sp-container-pad: 16px;
  --sp-gutter: 24px;

  /* ---- Conic "sphere" gradient backgrounds (from site CSS) ------- */
  --sp-grad-lightgrey: conic-gradient(from 56.1deg at 50.2% 133.77%, #F6F6F6 -12.91deg, #F1F3F5 232.63deg, #F6F6F6 347.09deg, #F1F3F5 592.63deg); /* @kind other */
  --sp-grad-chrome: conic-gradient(from 70.55deg at 50.2% 133.77%, #C0C2C1 -12.91deg, #8E9BA1 217.27deg, #C0C2C1 347.09deg, #8E9BA1 577.27deg); /* @kind other */
  --sp-grad-water: conic-gradient(from 56.1deg at 50.2% 133.77%, #788B93 -12.91deg, #465967 217.27deg, #788B93 347.09deg, #465967 577.27deg); /* @kind other */
  --sp-grad-night: conic-gradient(from 56.1deg at 50.2% 133.77%, #33434F -12.91deg, #18232C 217.27deg, #33434F 347.09deg, #18232C 577.27deg); /* @kind other */

  /* ---- Motion ---------------------------------------------------- */
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --sp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --sp-dur-fast: 160ms; /* @kind other */
  --sp-dur: 280ms; /* @kind other */
  --sp-dur-slow: 480ms; /* @kind other */
}

/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --120: 120; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 24; /* @kind spacing */
  --240: 240; /* @kind spacing */
  --24: 24; /* @kind spacing */
  --4-2: 4; /* @kind spacing */
  --4-3: 4; /* @kind spacing */
  --4: 4; /* @kind spacing */
  --80: 80; /* @kind spacing */
  --accent: rgb(0,0,255); /* @kind color */
  --bg-2: rgb(250,250,250); /* @kind color */
  --bg-3: rgb(250,250,250); /* @kind color */
  --bg-4: rgb(243,244,246); /* @kind color */
  --bg: rgb(250,250,250); /* @kind color */
  --blue: rgb(0,0,255); /* @kind color */
  --body-2: rgba(96,110,123,0.5); /* @kind color */
  --body-3: 14; /* @kind spacing */
  --body: 15; /* @kind spacing */
  --h1-2: rgb(229,233,237); /* @kind color */
  --h1: 84; /* @kind spacing */
  --h2-2: rgb(217,221,225); /* @kind color */
  --h2-3: rgb(217,221,225); /* @kind color */
  --h2: 48; /* @kind spacing */
  --h3-2: 32; /* @kind spacing */
  --h3-3: rgba(96,110,123,0.32); /* @kind color */
  --h3-4: 32; /* @kind spacing */
  --h3: rgba(96,110,123,0.32); /* @kind color */
  --h4-2: 22; /* @kind spacing */
  --h4-3: rgba(96,110,123,0.32); /* @kind color */
  --h4-4: rgba(96,110,123,0.4); /* @kind color */
  --h4-5: 22; /* @kind spacing */
  --h4-6: rgba(96,110,123,0.32); /* @kind color */
  --h4: 22; /* @kind spacing */
  --h5-2: rgba(96,110,123,0.4); /* @kind color */
  --h5-3: 17; /* @kind spacing */
  --h5-4: rgba(96,110,123,0.4); /* @kind color */
  --h5: 17; /* @kind spacing */
  --heading: rgb(229,233,237); /* @kind color */
  --light: rgb(250,250,250); /* @kind color */
  --line-2: rgba(17,17,17,0.06); /* @kind color */
  --line-3: rgba(17,17,17,0.06); /* @kind color */
  --line: rgba(17,17,17,0.06); /* @kind color */
  --primary-2: rgb(17,17,17); /* @kind color */
  --primary-3: rgb(17,17,17); /* @kind color */
  --primary-4: rgb(17,17,17); /* @kind color */
  --primary: rgb(17,17,17); /* @kind color */
  --subheading: rgb(217,221,225); /* @kind color */
  --text-2: rgba(96,110,123,0.8); /* @kind color */
  --text: rgba(96,110,123,0.8); /* @kind color */
}

:root[data-mode="gradient-bg"] {
  --bg-2: rgb(17,17,17); /* @kind color */
  --bg-4: rgb(17,17,17); /* @kind color */
  --bg: rgb(17,17,17); /* @kind color */
  --blue: rgb(0,0,255); /* @kind color */
  --body-2: rgba(243,244,246,0.5); /* @kind color */
  --h1-2: rgba(250,250,250,0.32); /* @kind color */
  --h2-2: rgba(250,250,250,0.4); /* @kind color */
  --h3-3: rgba(250,250,250,0.4); /* @kind color */
  --h3: rgba(250,250,250,0.4); /* @kind color */
  --h4-3: rgba(250,250,250,0.48); /* @kind color */
  --h4-6: rgba(250,250,250,0.48); /* @kind color */
  --h5-2: rgba(250,250,250,0.56); /* @kind color */
  --h5-4: rgba(250,250,250,0.56); /* @kind color */
  --heading: rgba(243,244,246,0.16); /* @kind color */
  --light: rgba(32,33,33,0.6); /* @kind color */
  --line-3: rgba(243,244,246,0.08); /* @kind color */
  --line: rgba(255,255,255,0.12); /* @kind color */
  --primary-2: rgb(250,250,250); /* @kind color */
  --primary-4: rgba(243,244,246,0.9); /* @kind color */
  --primary: rgb(250,250,250); /* @kind color */
  --subheading: rgba(243,244,246,0.2); /* @kind color */
  --text-2: rgba(250,250,250,0.8); /* @kind color */
  --text: rgba(250,250,250,0.8); /* @kind color */
}

:root[data-mode="photo-bg"] {
  --accent: rgb(250,250,250); /* @kind color */
  --bg-2: rgb(17,17,17); /* @kind color */
  --bg-3: rgb(17,17,17); /* @kind color */
  --bg: rgb(17,17,17); /* @kind color */
  --h1-2: rgba(250,250,250,0.4); /* @kind color */
  --h2-2: rgba(250,250,250,0.4); /* @kind color */
  --h2-3: rgba(250,250,250,0.3); /* @kind color */
  --h3: rgba(250,250,250,0.48); /* @kind color */
  --h4-3: rgba(250,250,250,0.48); /* @kind color */
  --h4-4: rgba(250,250,250,0.36); /* @kind color */
  --h5-2: rgba(250,250,250,0.56); /* @kind color */
  --line-2: rgba(250,250,250,0.12); /* @kind color */
  --line: rgba(255,255,255,0.12); /* @kind color */
  --primary-2: rgb(250,250,250); /* @kind color */
  --primary-3: rgb(250,250,250); /* @kind color */
  --primary: rgb(250,250,250); /* @kind color */
  --text: rgba(250,250,250,0.8); /* @kind color */
}

:root[data-mode="tablet"] {
  --120: 100; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 20; /* @kind spacing */
  --240: 160; /* @kind spacing */
  --24: 20; /* @kind spacing */
  --4-2: 2; /* @kind spacing */
  --4-3: 2; /* @kind spacing */
  --4: 2; /* @kind spacing */
  --80: 60; /* @kind spacing */
  --body-3: 14; /* @kind spacing */
  --body: 14; /* @kind spacing */
  --h1: 66; /* @kind spacing */
  --h2: 38; /* @kind spacing */
  --h3-2: 24; /* @kind spacing */
  --h3-4: 24; /* @kind spacing */
  --h4-2: 20; /* @kind spacing */
  --h4-5: 20; /* @kind spacing */
  --h4: 20; /* @kind spacing */
  --h5-3: 16; /* @kind spacing */
  --h5: 16; /* @kind spacing */
}

:root[data-mode="mobile"] {
  --120: 80; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 16; /* @kind spacing */
  --240: 120; /* @kind spacing */
  --24: 16; /* @kind spacing */
  --4-2: 0; /* @kind spacing */
  --4-3: 0; /* @kind spacing */
  --4: 0; /* @kind spacing */
  --80: 40; /* @kind spacing */
  --body-3: 13; /* @kind spacing */
  --body: 13; /* @kind spacing */
  --h1: 38; /* @kind spacing */
  --h2: 26; /* @kind spacing */
  --h3-2: 22; /* @kind spacing */
  --h3-4: 22; /* @kind spacing */
  --h4-2: 18; /* @kind spacing */
  --h4-5: 18; /* @kind spacing */
  --h4: 18; /* @kind spacing */
  --h5-3: 15; /* @kind spacing */
  --h5: 15; /* @kind spacing */
}