@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap");

/* Inter and Roboto Mono come from Google Fonts. The display face, DK Grotesk, is
	 licensed and self-hosted -- see the @font-face rules below and fonts/README.md. */

/* Roboto Mono needs the ITALIC axis: the eyebrow emphasis (.fig-eyebrow em) is
	 Roboto Mono Bold Italic in Figma. Without it the browser synthesises an
	 oblique by slanting the upright, which is visibly not the same face. */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "Roboto Mono", ui-monospace, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

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

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

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

progress {
  vertical-align: baseline;
}

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

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

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

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

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

::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

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

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

/* Display headline -- Proto Grotesk Bold, uppercase. e.g. footer 2306:1761 */

.fig-display{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 29.38px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Body copy -- Inter Light. e.g. footer 2306:1789 */

.fig-body{
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Small body / link lists -- Inter Light 14. e.g. footer link columns 2376:2149 */

.fig-body-sm{
  font-family: Inter, system-ui, sans-serif;
  font-size: 14.17px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Nav item -- Inter Regular 17. e.g. header 2323:2544 */

.fig-nav{
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

/* Column heading / eyebrow -- Roboto Mono, uppercase, muted. e.g. footer 2306:1796 */

.fig-label{
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14.17px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity, 1));
}

/* Button label -- Roboto Mono Medium, uppercase. e.g. header 2323:2558 */

/* Large button label -- e.g. footer Subscribe 2306:1772 */

.fig-button-lg{
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 20.4px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---- Display scale. Proto Grotesk, always -3% tracking. ----------------
	 *
	 * The sizes below are RESPONSIVE, read off the 393px mobile frames rather than
	 * derived: Rightsholder Mobile 2370:961 and its sections 2370:1630, 2373:1825,
	 * 2373:1919, 2373:1977. The pattern that fell out of those is consistent:
	 *
	 *   display / heading / lead / eyebrow   drop TWO steps of the token scale
	 *   body / meta                          drop ONE
	 *
	 *   .fig-h1   73.1 -> 42.3     .fig-lead    24.48 -> 17
	 *   .fig-h2  50.76 -> 35.25    .fig-prose      17 -> 14.17
	 *   .fig-h3   42.3 -> 29.38    .fig-eyebrow  20.4 -> 14.17
	 *   .fig-h4  35.25 -> 24.48    .fig-meta    14.17 -> 11.81
	 *   .fig-stat 73.1 -> 42.3
	 *
	 * `lg` is the break, matching the split the templates already use for layout.
	 * There is no tablet frame in the file, so 640-1023 takes the mobile sizes.
	 *
	 * Classes with no mobile counterpart drawn anywhere yet -- .fig-quote,
	 * .fig-quote-sm, .fig-display, .fig-body, .fig-attrib-*, .fig-nav, .fig-label,
	 * .fig-button*, .fig-mega-* -- are deliberately left single-size. Add a step
	 * when the design shows one, not before.
	 */

/*
	 * Hero h1 / big section h2 -- DK Grotesk Medium in the design (2142:74,
	 * 2142:30). The face ships in Medium and Black only; see fonts/README.md.
	 */

.fig-h1{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 42.3px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-h1{
    font-size: 73.1px;
  }
}

/* Section headline (Regular in the design; 500 here -- see .fig-h1). e.g. 2142:75 */

.fig-h2{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 35.25px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-h2{
    font-size: 50.76px;
  }
}

/* Card heading -- Bold, uppercase, tight. e.g. 2142:130 "briefs and pipelines" */

.fig-h3{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 29.38px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-h3{
    font-size: 42.3px;
  }
}

/*
	 * Sub-section heading -- one step below .fig-h3 on the 1.2 scale and, unlike
	 * it, Regular and sentence case. e.g. the six Rightsholders earning streams
	 * (2213:306, 2314:2263, 2575:3800). DK Grotesk Medium, like .fig-h1.
	 */

.fig-h4{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 24.48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-h4{
    font-size: 35.25px;
  }
}

/*
	 * Feature-list item title -- Proto Grotesk Regular 29.38, sentence case, tight.
	 * e.g. Platform 2222:833 "Access control", 2222:855 "Bulk tagging". Drops only
	 * ONE step at mobile (2377:4111 is 24.48), unlike the display sizes above --
	 * read off the frame, not derived.
	 */

.fig-h5{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 24.48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-h5{
    font-size: 29.38px;
  }
}

/* Pull-quote -- Inter Light. e.g. 2142:140 (was the display face until 2026-09-28) */

.fig-quote{
  font-family: Inter, system-ui, sans-serif;
  font-size: 42.3px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Small card quote -- Inter Regular. e.g. 2142:187 */

.fig-quote-sm{
  font-family: Inter, system-ui, sans-serif;
  font-size: 20.4px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* Stat figure. e.g. 2142:23 "12m" */

.fig-stat{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 42.3px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-stat{
    font-size: 73.1px;
  }
}

/* Attribution name. e.g. 2142:143 */

.fig-attrib-name{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---- Roboto Mono ------------------------------------------------------- */

/*
	 * Eyebrow above a headline, uppercase. The design emphasises part of it in
	 * Bold Italic -- markup that as <em> and .fig-eyebrow em picks it up.
	 * e.g. 2142:75 "What is /the pipeline?/", 2142:20 "performances, /tracked/"
	 */

.fig-eyebrow{
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14.17px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-eyebrow{
    font-size: 20.4px;
  }
}

.fig-eyebrow em{
  font-weight: 700;
  font-style: italic;
}

/* Stat caption / small meta. e.g. 2142:23 label, 2270:3466 */

.fig-meta{
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11.81px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-meta{
    font-size: 14.17px;
  }
}

/* Attribution role. e.g. 2142:143 second line */

.fig-attrib-role{
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11.81px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---- Inter ------------------------------------------------------------- */

/* Lead paragraph under a headline. e.g. 2142:100, 2142:31 */

.fig-lead{
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-lead{
    font-size: 24.48px;
  }
}

/* Prose paragraph, looser leading than .fig-body. e.g. 2142:38 */

.fig-prose{
  font-family: Inter, system-ui, sans-serif;
  font-size: 14.17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-prose{
    font-size: 17px;
  }
}

/*
	 * The larger body size the 2026-09-17 sync introduced on feature rows and
	 * audience descriptions -- Rightsholders' earning streams, Licensees' rows,
	 * Platform's e-commerce grid. Everything else stays on .fig-prose, so this is
	 * opt-in rather than a change to the base.
	 *
	 * The design draws it at a flat 20px, which is off the file's own scale
	 * (11.81 / 14.17 / 17 / 20.4 / 24.48 ...). `fig-20` is 20.4 -- a 2% difference,
	 * invisible at this size -- so the scale step is used rather than minting a
	 * token for a number that looks typed rather than chosen.
	 */

.fig-prose-lg{
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .fig-prose-lg{
    font-size: 20.4px;
  }
}

/* ---- Mega-menu panel entries (figma 2306:1809 / 2306:2031 / 2306:1999) ---- */

/* Panel item title -- Inter Regular 24.48px, almost-black. e.g. 2306:1866 */

.fig-mega-title{
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 24.48px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

/* Panel item description -- Inter Regular 17px, muted. e.g. 2306:1753 */

.fig-mega-desc{
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity, 1));
}

/*
	 * The centred content column.
	 *
	 * 1242 = the design's 1194px content column plus its own 24px gutters, because
	 * max-width caps the OUTER box and the padding then eats into it. Capping at
	 * 1194 instead left only 1130px of content against Figma's 1194 -- 64px narrow
	 * on every page, which is what the Tier 3 box dump kept surfacing as drift.
	 *
	 * The same 24px gutter is what the 393px mobile frames use (content x=24,
	 * width=345), so one padding value serves both ends: 393 - 48 = 345 exactly.
	 */

.fig-container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1242px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*
	 * The same 1194 column WITHOUT the gutter, for when the parent already pads.
	 *
	 * Use this on any element that carries a data-figma id for a 1194-wide node:
	 * .fig-container's box is 1242 because max-width caps the padded outer box, so
	 * tagging it makes the Tier 3 audit read a uniform +48 on every such node and
	 * drowns out the width signal that actually means a layout is wrong.
	 *
	 * It keeps the 24px gutter below lg, where it is the outermost element and there
	 * is nothing else to provide one, and drops it from lg up, where the column is
	 * narrower than the viewport anyway -- so the audit, which runs at frame width,
	 * measures exactly 1194.
	 */

.fig-column{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1194px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px){
  .fig-column{
    padding-left: 0px;
    padding-right: 0px;
  }
}

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

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.-top-\[15px\]{
  top: -15px;
}

.left-0{
  left: 0px;
}

.left-\[-100px\]{
  left: -100px;
}

.left-\[-52px\]{
  left: -52px;
}

.left-\[-83px\]{
  left: -83px;
}

.left-\[30px\]{
  left: 30px;
}

.left-\[36px\]{
  left: 36px;
}

.left-\[51px\]{
  left: 51px;
}

.right-0{
  right: 0px;
}

.right-\[14px\]{
  right: 14px;
}

.top-0{
  top: 0px;
}

.top-\[130px\]{
  top: 130px;
}

.top-\[14px\]{
  top: 14px;
}

.top-\[200px\]{
  top: 200px;
}

.top-\[220px\]{
  top: 220px;
}

.top-\[295px\]{
  top: 295px;
}

.top-\[32px\]{
  top: 32px;
}

.top-\[93px\]{
  top: 93px;
}

.top-\[94px\]{
  top: 94px;
}

.top-full{
  top: 100%;
}

.z-10{
  z-index: 10;
}

.z-30{
  z-index: 30;
}

.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-\[78px\]{
  margin-top: 78px;
  margin-bottom: 78px;
}

.-mt-\[132px\]{
  margin-top: -132px;
}

.-mt-\[142px\]{
  margin-top: -142px;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-\[1\.2em\]{
  margin-bottom: 1.2em;
}

.mb-\[15px\]{
  margin-bottom: 15px;
}

.mb-\[30px\]{
  margin-bottom: 30px;
}

.mb-\[35px\]{
  margin-bottom: 35px;
}

.mb-\[49px\]{
  margin-bottom: 49px;
}

.mb-\[5px\]{
  margin-bottom: 5px;
}

.mb-\[60px\]{
  margin-bottom: 60px;
}

.mb-\[80px\]{
  margin-bottom: 80px;
}

.mr-2{
  margin-right: 0.5rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-\[1\.5em\]{
  margin-top: 1.5em;
}

.mt-\[106px\]{
  margin-top: 106px;
}

.mt-\[115px\]{
  margin-top: 115px;
}

.mt-\[145px\]{
  margin-top: 145px;
}

.mt-\[175px\]{
  margin-top: 175px;
}

.mt-\[183px\]{
  margin-top: 183px;
}

.mt-\[19px\]{
  margin-top: 19px;
}

.mt-\[1em\]{
  margin-top: 1em;
}

.mt-\[20px\]{
  margin-top: 20px;
}

.mt-\[49px\]{
  margin-top: 49px;
}

.mt-\[60px\]{
  margin-top: 60px;
}

.mt-\[81px\]{
  margin-top: 81px;
}

.mt-\[87px\]{
  margin-top: 87px;
}

.mt-\[95px\]{
  margin-top: 95px;
}

.mt-\[97px\]{
  margin-top: 97px;
}

.mt-auto{
  margin-top: auto;
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-\[1194\/566\]{
  aspect-ratio: 1194/566;
}

.aspect-\[1194\/600\]{
  aspect-ratio: 1194/600;
}

.aspect-\[1194\/610\]{
  aspect-ratio: 1194/610;
}

.aspect-\[1194\/651\]{
  aspect-ratio: 1194/651;
}

.aspect-\[1194\/672\]{
  aspect-ratio: 1194/672;
}

.aspect-\[1920\/1080\]{
  aspect-ratio: 1920/1080;
}

.aspect-\[325\/357\]{
  aspect-ratio: 325/357;
}

.aspect-\[344\/400\]{
  aspect-ratio: 344/400;
}

.aspect-\[350\/197\]{
  aspect-ratio: 350/197;
}

.aspect-\[420\/550\]{
  aspect-ratio: 420/550;
}

.aspect-\[450\/650\]{
  aspect-ratio: 450/650;
}

.aspect-\[470\/520\]{
  aspect-ratio: 470/520;
}

.aspect-\[470\/610\]{
  aspect-ratio: 470/610;
}

.aspect-\[575\/368\]{
  aspect-ratio: 575/368;
}

.aspect-\[650\/500\]{
  aspect-ratio: 650/500;
}

.aspect-\[670\/450\]{
  aspect-ratio: 670/450;
}

.aspect-\[735\/413\]{
  aspect-ratio: 735/413;
}

.aspect-\[906\/551\]{
  aspect-ratio: 906/551;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-10{
  width: 2.5rem;
  height: 2.5rem;
}

.size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.size-9{
  width: 2.25rem;
  height: 2.25rem;
}

.size-\[105px\]{
  width: 105px;
  height: 105px;
}

.size-\[10px\]{
  width: 10px;
  height: 10px;
}

.size-\[18px\]{
  width: 18px;
  height: 18px;
}

.size-\[320px\]{
  width: 320px;
  height: 320px;
}

.size-\[60px\]{
  width: 60px;
  height: 60px;
}

.size-\[70px\]{
  width: 70px;
  height: 70px;
}

.size-\[75px\]{
  width: 75px;
  height: 75px;
}

.size-full{
  width: 100%;
  height: 100%;
}

.h-\[1012px\]{
  height: 1012px;
}

.h-\[10px\]{
  height: 10px;
}

.h-\[201px\]{
  height: 201px;
}

.h-\[246px\]{
  height: 246px;
}

.h-\[255px\]{
  height: 255px;
}

.h-\[260px\]{
  height: 260px;
}

.h-\[28px\]{
  height: 28px;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[30px\]{
  height: 30px;
}

.h-\[323px\]{
  height: 323px;
}

.h-\[34px\]{
  height: 34px;
}

.h-\[358px\]{
  height: 358px;
}

.h-\[55px\]{
  height: 55px;
}

.h-\[628px\]{
  height: 628px;
}

.h-\[63px\]{
  height: 63px;
}

.h-\[69px\]{
  height: 69px;
}

.h-\[70px\]{
  height: 70px;
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.max-h-\[1013px\]{
  max-height: 1013px;
}

.min-h-\[138px\]{
  min-height: 138px;
}

.min-h-full{
  min-height: 100%;
}

.w-5{
  width: 1.25rem;
}

.w-\[\.\.px\]{
  width: ..px;
}

.w-\[125px\]{
  width: 125px;
}

.w-\[128px\]{
  width: 128px;
}

.w-\[148px\]{
  width: 148px;
}

.w-\[155px\]{
  width: 155px;
}

.w-\[157px\]{
  width: 157px;
}

.w-\[197px\]{
  width: 197px;
}

.w-\[200px\]{
  width: 200px;
}

.w-\[218px\]{
  width: 218px;
}

.w-\[220px\]{
  width: 220px;
}

.w-\[250px\]{
  width: 250px;
}

.w-\[276px\]{
  width: 276px;
}

.w-\[300px\]{
  width: 300px;
}

.w-\[34px\]{
  width: 34px;
}

.w-\[57\.61px\]{
  width: 57.61px;
}

.w-\[64px\]{
  width: 64px;
}

.w-\[76\%\]{
  width: 76%;
}

.w-\[96px\]{
  width: 96px;
}

.w-\[calc\(100\%\+3rem\)\]{
  width: calc(100% + 3rem);
}

.w-full{
  width: 100%;
}

.w-max{
  width: -moz-max-content;
  width: max-content;
}

.min-w-0{
  min-width: 0px;
}

.min-w-\[1100px\]{
  min-width: 1100px;
}

.max-w-\[1000px\]{
  max-width: 1000px;
}

.max-w-\[1060px\]{
  max-width: 1060px;
}

.max-w-\[1080px\]{
  max-width: 1080px;
}

.max-w-\[1110px\]{
  max-width: 1110px;
}

.max-w-\[1122px\]{
  max-width: 1122px;
}

.max-w-\[1150px\]{
  max-width: 1150px;
}

.max-w-\[1190px\]{
  max-width: 1190px;
}

.max-w-\[1194px\]{
  max-width: 1194px;
}

.max-w-\[243px\]{
  max-width: 243px;
}

.max-w-\[300px\]{
  max-width: 300px;
}

.max-w-\[310px\]{
  max-width: 310px;
}

.max-w-\[325px\]{
  max-width: 325px;
}

.max-w-\[344px\]{
  max-width: 344px;
}

.max-w-\[350px\]{
  max-width: 350px;
}

.max-w-\[400px\]{
  max-width: 400px;
}

.max-w-\[420px\]{
  max-width: 420px;
}

.max-w-\[427px\]{
  max-width: 427px;
}

.max-w-\[450px\]{
  max-width: 450px;
}

.max-w-\[470px\]{
  max-width: 470px;
}

.max-w-\[575px\]{
  max-width: 575px;
}

.max-w-\[600px\]{
  max-width: 600px;
}

.max-w-\[650px\]{
  max-width: 650px;
}

.max-w-\[707px\]{
  max-width: 707px;
}

.max-w-\[760px\]{
  max-width: 760px;
}

.max-w-\[844px\]{
  max-width: 844px;
}

.max-w-\[846px\]{
  max-width: 846px;
}

.max-w-\[850px\]{
  max-width: 850px;
}

.max-w-\[862px\]{
  max-width: 862px;
}

.max-w-\[898px\]{
  max-width: 898px;
}

.max-w-\[900px\]{
  max-width: 900px;
}

.max-w-\[918px\]{
  max-width: 918px;
}

.max-w-\[925px\]{
  max-width: 925px;
}

.max-w-\[946px\]{
  max-width: 946px;
}

.max-w-none{
  max-width: none;
}

.flex-1{
  flex: 1 1 0%;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes marquee{
  from{
    transform: translateX(0);
  }

  to{
    transform: translateX(-33.3333%);
  }
}

.animate-marquee{
  animation: marquee 80s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-pointer{
  cursor: pointer;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.snap-x{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory{
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start{
  scroll-snap-align: start;
}

.scroll-mt-\[80px\]{
  scroll-margin-top: 80px;
}

.scroll-px-6{
  scroll-padding-left: 1.5rem;
  scroll-padding-right: 1.5rem;
}

.list-disc{
  list-style-type: disc;
}

.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-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-stretch{
  align-items: stretch;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-10{
  gap: 2.5rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-\[1\.2em\]{
  gap: 1.2em;
}

.gap-\[1\.3em\]{
  gap: 1.3em;
}

.gap-\[1\.5em\]{
  gap: 1.5em;
}

.gap-\[100px\]{
  gap: 100px;
}

.gap-\[10px\]{
  gap: 10px;
}

.gap-\[11px\]{
  gap: 11px;
}

.gap-\[14px\]{
  gap: 14px;
}

.gap-\[150px\]{
  gap: 150px;
}

.gap-\[15px\]{
  gap: 15px;
}

.gap-\[17px\]{
  gap: 17px;
}

.gap-\[18px\]{
  gap: 18px;
}

.gap-\[23px\]{
  gap: 23px;
}

.gap-\[25px\]{
  gap: 25px;
}

.gap-\[28px\]{
  gap: 28px;
}

.gap-\[30px\]{
  gap: 30px;
}

.gap-\[35px\]{
  gap: 35px;
}

.gap-\[37px\]{
  gap: 37px;
}

.gap-\[39px\]{
  gap: 39px;
}

.gap-\[40px\]{
  gap: 40px;
}

.gap-\[42px\]{
  gap: 42px;
}

.gap-\[43px\]{
  gap: 43px;
}

.gap-\[45px\]{
  gap: 45px;
}

.gap-\[50px\]{
  gap: 50px;
}

.gap-\[5px\]{
  gap: 5px;
}

.gap-\[60px\]{
  gap: 60px;
}

.gap-\[63px\]{
  gap: 63px;
}

.gap-\[76px\]{
  gap: 76px;
}

.gap-\[7px\]{
  gap: 7px;
}

.gap-\[80px\]{
  gap: 80px;
}

.gap-\[93px\]{
  gap: 93px;
}

.gap-x-\[27px\]{
  -moz-column-gap: 27px;
       column-gap: 27px;
}

.gap-x-\[33px\]{
  -moz-column-gap: 33px;
       column-gap: 33px;
}

.gap-x-\[40px\]{
  -moz-column-gap: 40px;
       column-gap: 40px;
}

.gap-y-\[40px\]{
  row-gap: 40px;
}

.gap-y-\[42px\]{
  row-gap: 42px;
}

.gap-y-\[45px\]{
  row-gap: 45px;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.scroll-smooth{
  scroll-behavior: smooth;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-\[12px\]{
  border-radius: 12px;
}

.rounded-\[25px\]{
  border-radius: 25px;
}

.rounded-\[35px\]{
  border-radius: 35px;
}

.rounded-\[3px\]{
  border-radius: 3px;
}

.rounded-\[4px\]{
  border-radius: 4px;
}

.rounded-\[50px\]{
  border-radius: 50px;
}

.rounded-full{
  border-radius: 9999px;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.\!border-muted-label{
  --tw-border-opacity: 1 !important;
  border-color: rgb(112 112 112 / var(--tw-border-opacity, 1)) !important;
}

.border-almost-black{
  --tw-border-opacity: 1;
  border-color: rgb(27 27 30 / var(--tw-border-opacity, 1));
}

.border-line-dark{
  --tw-border-opacity: 1;
  border-color: rgb(53 53 53 / var(--tw-border-opacity, 1));
}

.border-line-light{
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-muted-label{
  --tw-border-opacity: 1;
  border-color: rgb(112 112 112 / var(--tw-border-opacity, 1));
}

.border-muted-text{
  --tw-border-opacity: 1;
  border-color: rgb(157 157 157 / var(--tw-border-opacity, 1));
}

.border-sa-blue{
  --tw-border-opacity: 1;
  border-color: rgb(0 117 255 / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#45a4ee\]{
  --tw-bg-opacity: 1;
  background-color: rgb(69 164 238 / var(--tw-bg-opacity, 1));
}

.bg-almost-black{
  --tw-bg-opacity: 1;
  background-color: rgb(27 27 30 / var(--tw-bg-opacity, 1));
}

.bg-bone{
  --tw-bg-opacity: 1;
  background-color: rgb(243 242 238 / var(--tw-bg-opacity, 1));
}

.bg-citron{
  --tw-bg-opacity: 1;
  background-color: rgb(246 255 168 / var(--tw-bg-opacity, 1));
}

.bg-coral{
  --tw-bg-opacity: 1;
  background-color: rgb(255 110 121 / var(--tw-bg-opacity, 1));
}

.bg-lavender{
  --tw-bg-opacity: 1;
  background-color: rgb(234 212 255 / var(--tw-bg-opacity, 1));
}

.bg-line-light{
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}

.bg-orchid{
  --tw-bg-opacity: 1;
  background-color: rgb(226 208 244 / var(--tw-bg-opacity, 1));
}

.bg-sa-blue{
  --tw-bg-opacity: 1;
  background-color: rgb(0 117 255 / var(--tw-bg-opacity, 1));
}

.bg-sa-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(255 187 215 / var(--tw-bg-opacity, 1));
}

.bg-sky{
  --tw-bg-opacity: 1;
  background-color: rgb(215 240 255 / var(--tw-bg-opacity, 1));
}

.bg-slime{
  --tw-bg-opacity: 1;
  background-color: rgb(136 255 201 / var(--tw-bg-opacity, 1));
}

.bg-stone{
  --tw-bg-opacity: 1;
  background-color: rgb(235 232 228 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);
}

.bg-cover{
  background-size: cover;
}

.bg-center{
  background-position: center;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill{
  -o-object-fit: fill;
     object-fit: fill;
}

.object-bottom{
  -o-object-position: bottom;
     object-position: bottom;
}

.object-top{
  -o-object-position: top;
     object-position: top;
}

.p-10{
  padding: 2.5rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-5{
  padding: 1.25rem;
}

.p-\[10px\]{
  padding: 10px;
}

.p-\[30px\]{
  padding: 30px;
}

.p-\[40px\]{
  padding: 40px;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-\[20px\]{
  padding-left: 20px;
  padding-right: 20px;
}

.px-\[30px\]{
  padding-left: 30px;
  padding-right: 30px;
}

.px-\[40px\]{
  padding-left: 40px;
  padding-right: 40px;
}

.px-\[8px\]{
  padding-left: 8px;
  padding-right: 8px;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-32{
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[100px\]{
  padding-top: 100px;
  padding-bottom: 100px;
}

.py-\[10px\]{
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[120px\]{
  padding-top: 120px;
  padding-bottom: 120px;
}

.py-\[132px\]{
  padding-top: 132px;
  padding-bottom: 132px;
}

.py-\[144px\]{
  padding-top: 144px;
  padding-bottom: 144px;
}

.py-\[14px\]{
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-\[150px\]{
  padding-top: 150px;
  padding-bottom: 150px;
}

.py-\[151px\]{
  padding-top: 151px;
  padding-bottom: 151px;
}

.py-\[173px\]{
  padding-top: 173px;
  padding-bottom: 173px;
}

.py-\[174px\]{
  padding-top: 174px;
  padding-bottom: 174px;
}

.py-\[175px\]{
  padding-top: 175px;
  padding-bottom: 175px;
}

.py-\[184\.5px\]{
  padding-top: 184.5px;
  padding-bottom: 184.5px;
}

.py-\[193px\]{
  padding-top: 193px;
  padding-bottom: 193px;
}

.py-\[211px\]{
  padding-top: 211px;
  padding-bottom: 211px;
}

.py-\[36px\]{
  padding-top: 36px;
  padding-bottom: 36px;
}

.py-\[40px\]{
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-\[5px\]{
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-\[78px\]{
  padding-top: 78px;
  padding-bottom: 78px;
}

.py-\[80px\]{
  padding-top: 80px;
  padding-bottom: 80px;
}

.pb-\[100px\]{
  padding-bottom: 100px;
}

.pb-\[101px\]{
  padding-bottom: 101px;
}

.pb-\[104px\]{
  padding-bottom: 104px;
}

.pb-\[111px\]{
  padding-bottom: 111px;
}

.pb-\[116px\]{
  padding-bottom: 116px;
}

.pb-\[120px\]{
  padding-bottom: 120px;
}

.pb-\[121px\]{
  padding-bottom: 121px;
}

.pb-\[122px\]{
  padding-bottom: 122px;
}

.pb-\[127px\]{
  padding-bottom: 127px;
}

.pb-\[128px\]{
  padding-bottom: 128px;
}

.pb-\[134px\]{
  padding-bottom: 134px;
}

.pb-\[136px\]{
  padding-bottom: 136px;
}

.pb-\[142px\]{
  padding-bottom: 142px;
}

.pb-\[145px\]{
  padding-bottom: 145px;
}

.pb-\[147px\]{
  padding-bottom: 147px;
}

.pb-\[149px\]{
  padding-bottom: 149px;
}

.pb-\[150px\]{
  padding-bottom: 150px;
}

.pb-\[153px\]{
  padding-bottom: 153px;
}

.pb-\[158px\]{
  padding-bottom: 158px;
}

.pb-\[162px\]{
  padding-bottom: 162px;
}

.pb-\[165px\]{
  padding-bottom: 165px;
}

.pb-\[170px\]{
  padding-bottom: 170px;
}

.pb-\[174px\]{
  padding-bottom: 174px;
}

.pb-\[204px\]{
  padding-bottom: 204px;
}

.pb-\[20px\]{
  padding-bottom: 20px;
}

.pb-\[220px\]{
  padding-bottom: 220px;
}

.pb-\[300px\]{
  padding-bottom: 300px;
}

.pb-\[30px\]{
  padding-bottom: 30px;
}

.pb-\[39px\]{
  padding-bottom: 39px;
}

.pb-\[60px\]{
  padding-bottom: 60px;
}

.pb-\[61px\]{
  padding-bottom: 61px;
}

.pb-\[64px\]{
  padding-bottom: 64px;
}

.pb-\[80px\]{
  padding-bottom: 80px;
}

.pb-\[87px\]{
  padding-bottom: 87px;
}

.pl-\[25px\]{
  padding-left: 25px;
}

.pr-16{
  padding-right: 4rem;
}

.pr-\[63px\]{
  padding-right: 63px;
}

.pr-\[64px\]{
  padding-right: 64px;
}

.ps-6{
  padding-inline-start: 1.5rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-\[102px\]{
  padding-top: 102px;
}

.pt-\[107px\]{
  padding-top: 107px;
}

.pt-\[108px\]{
  padding-top: 108px;
}

.pt-\[113px\]{
  padding-top: 113px;
}

.pt-\[115px\]{
  padding-top: 115px;
}

.pt-\[117px\]{
  padding-top: 117px;
}

.pt-\[118px\]{
  padding-top: 118px;
}

.pt-\[120px\]{
  padding-top: 120px;
}

.pt-\[126px\]{
  padding-top: 126px;
}

.pt-\[129px\]{
  padding-top: 129px;
}

.pt-\[132px\]{
  padding-top: 132px;
}

.pt-\[135px\]{
  padding-top: 135px;
}

.pt-\[136px\]{
  padding-top: 136px;
}

.pt-\[141px\]{
  padding-top: 141px;
}

.pt-\[147px\]{
  padding-top: 147px;
}

.pt-\[151px\]{
  padding-top: 151px;
}

.pt-\[152px\]{
  padding-top: 152px;
}

.pt-\[157px\]{
  padding-top: 157px;
}

.pt-\[158px\]{
  padding-top: 158px;
}

.pt-\[161px\]{
  padding-top: 161px;
}

.pt-\[162px\]{
  padding-top: 162px;
}

.pt-\[163px\]{
  padding-top: 163px;
}

.pt-\[164px\]{
  padding-top: 164px;
}

.pt-\[168px\]{
  padding-top: 168px;
}

.pt-\[180px\]{
  padding-top: 180px;
}

.pt-\[190px\]{
  padding-top: 190px;
}

.pt-\[241px\]{
  padding-top: 241px;
}

.pt-\[40px\]{
  padding-top: 40px;
}

.pt-\[49px\]{
  padding-top: 49px;
}

.pt-\[6\.66\%\]{
  padding-top: 6.66%;
}

.pt-\[64px\]{
  padding-top: 64px;
}

.pt-\[79px\]{
  padding-top: 79px;
}

.pt-\[80px\]{
  padding-top: 80px;
}

.pt-\[90px\]{
  padding-top: 90px;
}

.pt-\[91px\]{
  padding-top: 91px;
}

.pt-\[92px\]{
  padding-top: 92px;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.font-display{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
}

.font-inter{
  font-family: Inter, system-ui, sans-serif;
}

.font-mono{
  font-family: "Roboto Mono", ui-monospace, monospace;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[27\.28px\]{
  font-size: 27.28px;
}

.text-\[32\.74px\]{
  font-size: 32.74px;
}

.text-\[47\.15px\]{
  font-size: 47.15px;
}

.text-fig-12{
  font-size: 11.81px;
}

.text-fig-14{
  font-size: 14.17px;
}

.text-fig-15{
  font-size: 14.7px;
}

.text-fig-17{
  font-size: 17px;
}

.text-fig-20{
  font-size: 20.4px;
}

.text-fig-24{
  font-size: 24.48px;
}

.text-fig-29{
  font-size: 29.38px;
}

.text-fig-42{
  font-size: 42.3px;
}

.text-fig-51{
  font-size: 50.76px;
}

.font-bold{
  font-weight: 700;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.normal-case{
  text-transform: none;
}

.italic{
  font-style: italic;
}

.leading-\[0\.8\]{
  line-height: 0.8;
}

.leading-\[0\.9\]{
  line-height: 0.9;
}

.leading-\[1\.1\]{
  line-height: 1.1;
}

.leading-\[1\.2\]{
  line-height: 1.2;
}

.leading-\[1\.3\]{
  line-height: 1.3;
}

.leading-\[1\.45\]{
  line-height: 1.45;
}

.leading-\[1\.4\]{
  line-height: 1.4;
}

.leading-\[1\.5\]{
  line-height: 1.5;
}

.leading-none{
  line-height: 1;
}

.tracking-\[-0\.01em\]{
  letter-spacing: -0.01em;
}

.tracking-\[-2\.193px\]{
  letter-spacing: -2.193px;
}

.tracking-fig{
  letter-spacing: -0.03em;
}

.text-almost-black{
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

.text-bone{
  --tw-text-opacity: 1;
  color: rgb(243 242 238 / var(--tw-text-opacity, 1));
}

.text-citron{
  --tw-text-opacity: 1;
  color: rgb(246 255 168 / var(--tw-text-opacity, 1));
}

.text-line-light{
  --tw-text-opacity: 1;
  color: rgb(217 217 217 / var(--tw-text-opacity, 1));
}

.text-muted-label{
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity, 1));
}

.text-muted-text{
  --tw-text-opacity: 1;
  color: rgb(157 157 157 / var(--tw-text-opacity, 1));
}

.text-sa-blue{
  --tw-text-opacity: 1;
  color: rgb(0 117 255 / var(--tw-text-opacity, 1));
}

.text-sa-pink{
  --tw-text-opacity: 1;
  color: rgb(255 187 215 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-100{
  opacity: 1;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.shadow-\[0px_4px_5px_0px_rgba\(0\2c 0\2c 0\2c 0\.02\)\]{
  --tw-shadow: 0px 4px 5px 0px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0px 4px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  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);
}

.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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Text styles read out of the Figma file, one class per recurring combination.
 * Same convention as v7's css/v7-scss/figma-styles.scss so the team recognises it.
 *
 * When a Figma text style changes, change it HERE, not in the page templates.
 */

/*
 * Header behaviour. The Figma "Header Nav Desktop" section (2312:2250) draws the
 * three expanded states as separate frames:
 *   Solutions  -> 2263:3393
 *   Products   -> 2306:1872
 *   Resources  -> 2306:1941
 * They are the states shown after CLICKING the nav item, so in code they are one
 * <header> with three panels toggled on click by js/script.js.
 *
 * data-open on the .has-mega wrapper is the single source of truth. Everything
 * below reads off it; JS never touches inline styles.
 *
 * Selectors are flat, not nested -- this build's postcss pipeline passes nesting
 * through unflattened (v7's bundle does the same), so flat keeps it portable.
 */

/*
 * display:none rather than opacity, so a closed panel is out of the tab order and
 * hidden from assistive tech. Opening runs an animation instead of a transition,
 * which avoids needing a frame between "displayed" and "visible".
 */

.sa-header .mega-panel {
  display: none;
}

.sa-header .has-mega[data-open="true"] .mega-panel {
  display: block;
  animation: sa-mega-in 150ms ease-out;
}

@keyframes sa-mega-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Figma underlines the OPEN nav item (2323:2623 in the expanded Resources state,
 * 2323:2544 in the expanded Solutions state) -- it is an open-state marker, not a
 * permanent style.
 */

.sa-header .has-mega[data-open="true"] button{
  text-decoration-line: underline;
  text-underline-position: from-font;
  text-decoration-style: solid;
}

/* Hovering a panel entry tints its title, so the whole block reads as clickable. */

.sa-header .mega-panel a.group:hover .fig-mega-title{
  --tw-text-opacity: 1;
  color: rgb(0 117 255 / var(--tw-text-opacity, 1));
}

/*
 * Figma draws the caret rotated 180 degrees on the open item (2323:2545 in the
 * expanded Solutions state) and pointing down when closed (2323:2549). One
 * asset, rotated, rather than shipping a second SVG.
 *
 * Scoped to .sa-caret deliberately. A bare `img` selector also matched every
 * icon inside the open panel -- the panel is a child of .has-mega -- which
 * silently rotated the product icons 180 degrees. That was invisible until the
 * panels gained real artwork, and then only on the asymmetric marks.
 */

.sa-header .has-mega .sa-caret{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.sa-header .has-mega[data-open="true"] .sa-caret{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .sa-header .has-mega[data-open="true"] .mega-panel {
    animation: none;
  }

  .sa-header .has-mega img {
    transition: none;
  }
}

/*
 * Overlay header (figma 2260:2997) -- transparent, sitting on top of the hero.
 * Nav text and carets are white there, so opening a mega panel has to flip the
 * bar solid: the panel is a bone band and white-on-bone is invisible.
 * js/script.js adds .is-solid while any panel is open.
 *
 * Desktop only, like the overlay itself (its classes are all lg:). Below lg the
 * bar is always bone, and the mobile menu's links are .fig-nav too, so unscoped
 * this turned them white on the bone panel -- on the homepage only, since that
 * is the one page with the overlay header.
 */

@media (min-width: 1024px) {
  .sa-header--overlay .fig-nav{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.sa-header--overlay.is-solid{
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 242 238 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

.sa-header--overlay.is-solid .fig-nav{
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

/*
 * The white logo and carets are separate files, so invert them back to dark when
 * the bar goes solid rather than shipping a third pair.
 *
 * Scoped to .sa-invert-on-solid deliberately: a bare `img` selector also inverted
 * every product icon inside the open panel, which turned the blue "sa" mark tan.
 */

.sa-header--overlay.is-solid .sa-invert-on-solid {
  filter: invert(1);
}

/*
 * The overlay-dark bar already has the dark chrome, so going solid for an open
 * panel is only a matter of painting the fill and border it normally omits.
 */

.sa-header--floating.is-solid{
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 242 238 / var(--tw-bg-opacity, 1));
}

.sa-header--overlay,
.sa-header--floating {
  transition: background-color 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sa-header--overlay,
	.sa-header--floating {
    transition: none;
  }
}

/*
 * Hero video -- ai-features (2649:3436), Rightsholders (2351:3297), Licensees
 * (2236:1292). The homepage (2239:1298) fades its canvas in with these same
 * rules; js/hero-canvas.js gives the canvas the loop's class and state.
 *
 * The still ships in the HTML; js/script.js fetches the page's loop after
 * load and inserts it as the still's next sibling. Both sit in the same
 * absolutely-positioned box, so this is only ever an opacity change -- nothing
 * moves, and nothing here affects a page that has no video.
 *
 * `data-hero-video-state` on the section is the single source of truth, the same
 * way `data-open` is for the mega panels. The still is deliberately left visible
 * underneath rather than hidden: if the stream dies mid-playback the JS drops
 * the attribute and the still is simply there again, with no second load and no
 * flash of bone.
 */

.sa-hero-art-video {
  opacity: 0;
  transition: opacity 600ms ease;
}

[data-hero-video-state="playing"] .sa-hero-art-video {
  opacity: 1;
}

/*
 * Licensees on a phone. The album toss's 160px covers arc through the top of
 * the 1012px box and leave its bottom empty, so "the catalog" is pulled up a
 * further quarter screen over it -- 2026-10-01, by eye. vh rather than
 * svh/dvh: it is fixed for the page's life, so nothing shifts as the browser's
 * toolbar comes and goes. Not under reduced motion, where there is no toss and
 * the static collage fills the box instead.
 */

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .sa-lic-stats {
    margin-top: calc(-132px - 25vh);
  }
}

/*
 * Belt and braces. The JS already declines to fetch the video at all under
 * reduced motion, so this only matters if the setting is switched on while the
 * loop is already running -- in which case it should stop crossfading, not
 * disappear.
 */

@media (prefers-reduced-motion: reduce) {
  .sa-hero-art-video {
    transition: none;
  }
}

/*
 * Inline video -- the same trick further down a page, e.g. Platform's Premiere
 * panel (2241:186). The host is the still's `relative` wrapper; the loop covers
 * it exactly and object-cover crops it the same way the still is cropped.
 * Positioned here rather than with utilities because Tailwind does not scan
 * js/, which is where the element is made.
 */

.sa-inline-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}

[data-inline-video-state="playing"] .sa-inline-video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sa-inline-video {
    transition: none;
  }
}

/*
 * Homepage-only behaviour. Figma "Homepage Desktop" 2142:17.
 * Layout lives in the template's utility classes; only what Tailwind cannot
 * express declaratively is here.
 */

/*
 * "Trusted by" logo marquee (figma 2243:471). Figma draws the 5-logo set three
 * times in a 2490px track, so translating the track by exactly one third loops
 * seamlessly -- the animation itself is the `marquee` keyframe in
 * tailwind.config.js.
 */

.sa-marquee {
  /* Fade the strip out at both edges so logos do not clip hard. */
  mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.sa-marquee:hover .sa-marquee-track {
  animation-play-state: paused;
}

/* Brief carousel rail (figma 2325:2706) -- hide the scrollbar, keep the scroll. */

.sa-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sa-rail::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sa-marquee-track {
    animation: none !important;
  }

  .sa-rail {
    scroll-behavior: auto;
  }
}

/*
 * Three-step walkthrough (figma 2660:3551 indicator + 2660:3540 artwork).
 *
 * Figma exports the circles as two SVGs: inactive is `circle r=29.5
 * stroke=#9D9D9D`, active is `circle r=30 fill=#1B1B1E` -- i.e. plain shapes, not
 * glyphs. Drawn in CSS rather than as <img> so aria-selected can drive the state
 * and the number stays centred text; js/script.js only toggles that and .hidden.
 */

/* Pricing audience toggle (2176:591 / 2990:3389). aria-checked drives it, so
   the script only manages state. */

.sa-audience-option[aria-checked="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 117 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sa-audience-option[aria-checked="false"]{
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

.sa-step-dot[aria-selected="true"]{
  --tw-border-opacity: 1;
  border-color: rgb(27 27 30 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(27 27 30 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sa-step-dot[aria-selected="false"]{
  --tw-border-opacity: 1;
  border-color: rgb(157 157 157 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

.sa-step-dot[aria-selected="false"]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(27 27 30 / var(--tw-border-opacity, 1));
}

/*
 * Accordion (figma 2188:1290 on Collect, 2656:3442 on AI Dataset Licensing,
 * 2188:1596 on API -- one anatomy, three pages).
 *
 * Built on <details>, so the open/shut state is the element's own and needs no
 * JavaScript. All that is left for CSS is to drop the native marker and swap
 * which of the two glyphs is showing.
 */

.sa-accordion > summary::-webkit-details-marker {
  display: none;
}

.sa-accordion > summary::marker {
  content: '';
}

.sa-accordion > summary .sa-accordion-open {
  display: none;
}

.sa-accordion[open] > summary .sa-accordion-open {
  display: block;
}

.sa-accordion[open] > summary .sa-accordion-shut {
  display: none;
}

/*
 * The answer sits 24px under the question, not the summary's 30. That gap used
 * to be a -6px top margin on .sa-accordion-body, but the open animation clips
 * the panel (overflow: hidden on ::details-content, and on the body itself in
 * the JS fallback), so the margin pulled the first line above the clip and cut
 * the tops off its letters. Taking the 6px off the summary instead puts the
 * text in the same place with nothing outside the clip.
 */

.sa-accordion[open] > summary {
  padding-bottom: 24px;
}

/*
 * Open/close animation.
 *
 * Native path: ::details-content plus interpolate-size lets the browser animate
 * a <details> from 0 to its natural height with no JavaScript, and it keeps
 * working with the `name` attribute -- when one panel opening closes its sibling,
 * the sibling animates shut too. Chrome/Edge/Safari have it; where it is missing
 * the JS in js/script.js does the same thing by hand.
 *
 * .sa-accordion-js marks the panels the fallback has taken over, so the two can
 * never both run.
 */

:root {
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  .sa-accordion:not(.sa-accordion-js)::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
			block-size 220ms cubic-bezier(0.32, 0.72, 0, 1),
			content-visibility 220ms allow-discrete,
			opacity 160ms ease-out;
  }

  .sa-accordion[open]:not(.sa-accordion-js)::details-content {
    block-size: auto;
    opacity: 1;
  }

  /* The +/- glyph turns over with the panel rather than snapping. */

  .sa-accordion > summary .sa-accordion-shut,
	.sa-accordion > summary .sa-accordion-open {
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .sa-accordion[open] > summary .sa-accordion-open {
    transform: rotate(180deg);
  }

  /* The fallback animates this wrapper's height directly. */

  .sa-accordion-js > .sa-accordion-body {
    overflow: hidden;
  }
}

/*
 * Auto-scrolling brief rails -- see v8_brief_rail() and js/script.js.
 *
 * The drift writes scrollLeft every frame, so CSS smooth scrolling has to be off
 * here or the browser tries to animate to each of those and it stutters. The
 * arrows pass behavior:'smooth' explicitly, which wins over this.
 */

.sa-rail-auto {
  scroll-behavior: auto;
  /* The drift is the motion; snapping would fight it. */
  scroll-snap-type: none;
}

/*
 * The corner radius follows the cursor. 35px is the radius the comp draws on one
 * card of the row (2243:2211) -- which is this state, caught in a still.
 *
 * It has to land on the element that actually PAINTS the card, and that is not
 * the same element in every rail, which is why .sa-rail-face exists. A brief
 * card is its own painted box, so the face is the rail's direct child. A media
 * tile's direct child is a transparent layout wrapper -- the border is on the
 * box inside it, and the caption sits outside that box -- so the face is one
 * level down.
 *
 * Rounding the wrapper instead was the bug: with nothing painted on it there
 * was no radius to see, and the `overflow: hidden` that came with it clipped
 * the inner box's square corners away, so the border appeared to vanish at each
 * corner rather than curve. Hence no overflow here at all. Nothing needs it:
 * the only image that bleeds to a card edge is inside v8_media_tile()'s photo
 * box, which sets its own.
 */

.sa-rail-hoverable .sa-rail-face {
  transition: border-radius 180ms ease;
}

.sa-rail-hoverable > *:hover.sa-rail-face,
.sa-rail-hoverable > *:hover .sa-rail-face {
  border-radius: 35px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-rail-hoverable .sa-rail-face {
    transition: none;
  }
}

/*
 * Legal documents fetched from music.sourceaudio.com/documents/.
 *
 * The remote fragments carry their own class names, so we style those directly
 * rather than adding wrappers. Selectors are written flat and scoped under
 * .legal-document -- deliberately not nested, because this build's postcss
 * pipeline passes nesting through unflattened (v7's bundle does the same), and
 * bare tag selectors must not leak into the rest of the site.
 *
 * See app/legal-documents.php.
 */

.legal-document{
  max-width: 820px;
  /*
	 * A bare URL is one unbreakable word. At phone width the unavailable-document
	 * fallback's link (and any long URL or address in a document) otherwise pushes
	 * the page sideways. `anywhere` only breaks a word that cannot fit.
	 */
  overflow-wrap: anywhere;
}

.legal-document .document_section{
  margin-bottom: 3rem;
}

.legal-document .document_section_title{
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 20.4px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* First section title sits directly under the page h1. */

.legal-document .document_section:first-child .document_section_title{
  margin-top: 0px;
}

.legal-document .document_subsection_title{
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14.17px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity, 1));
}

.legal-document h4{
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.legal-document p{
  margin-bottom: 1rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.625;
  letter-spacing: -0.03em;
}

.legal-document ul,
.legal-document ol{
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.625;
  letter-spacing: -0.03em;
}

.legal-document ul{
  list-style-type: disc;
}

.legal-document ol{
  list-style-type: decimal;
}

.legal-document li{
  margin-bottom: 0.5rem;
}

.legal-document a{
  --tw-text-opacity: 1;
  color: rgb(0 117 255 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-document a:hover{
  text-decoration-line: none;
}

.legal-document strong,
.legal-document b{
  font-weight: 600;
}

/*
 * Post body styling.
 *
 * Every other page in this theme is built element by element from a comp, but
 * posts come out of the editor as arbitrary HTML -- so the only way to style them
 * is by tag, from the design's own article blocks (figma 2243:1581 on Blog Post,
 * 2243:1598 on Client Spotlight Post).
 *
 * Read off those blocks:
 *   h2            Proto Grotesk Regular 50.76 / 1.0, 15 below
 *   h3            Proto Grotesk Regular 29.38 / 1.0, 15 below
 *   p, li         Inter Regular 20 / 1.5  (was 17 before the 2026-09-28 sync)
 *   blockquote    Proto Grotesk Light 29.38 / 1.3  (the pull-quote at 2243:1560)
 *   block gap     53
 * The column is 800 wide, not the full 1194.
 */

.sa-article{
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .sa-article{
    font-size: 20.4px;
  }
}

/* 53px between blocks, but headings hug the block they introduce. */

.sa-article > * + *{
  margin-top: 53px;
}

.sa-article > * + h2,
.sa-article > * + h3{
  margin-top: 53px;
}

.sa-article > :is(h2, h3) + *{
  margin-top: 15px;
}

.sa-article h2{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 35.25px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .sa-article h2{
    font-size: 50.76px;
  }
}

.sa-article h3{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 24.48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .sa-article h3{
    font-size: 29.38px;
  }
}

/* h4-h6 are not drawn anywhere; step them down rather than leave them unstyled. */

.sa-article :is(h4, h5, h6){
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 20.4px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .sa-article :is(h4, h5, h6){
    font-size: 24.48px;
  }
}

.sa-article :is(ul, ol){
  padding-inline-start: 1.5rem;
}

.sa-article ul{
  list-style-type: disc;
}

.sa-article ol{
  list-style-type: decimal;
}

.sa-article li + li{
  margin-top: 0.5rem;
}

/* List items are ordinary body copy, so they do not take the 53px block gap. */

.sa-article :is(ul, ol) > li > * + *{
  margin-top: 15px;
}

.sa-article blockquote{
  font-family: "DK Grotesk", Inter, system-ui, sans-serif;
  font-size: 24.48px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px){
  .sa-article blockquote{
    font-size: 29.38px;
  }
}

.sa-article a{
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.sa-article a:hover{
  --tw-text-opacity: 1;
  color: rgb(0 117 255 / var(--tw-text-opacity, 1));
}

.sa-article strong{
  font-weight: 700;
}

.sa-article em{
  font-style: italic;
}

/* Editor images and embeds: never overflow the 800 column. */

.sa-article :is(img, iframe, video, embed, object){
  height: auto;
  max-width: 100%;
}

.sa-article figure{
  margin-top: 53px;
  margin-bottom: 53px;
}

.sa-article figcaption{
  margin-top: 15px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11.81px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .sa-article figcaption{
    font-size: 14.17px;
  }
}

.sa-article :is(table){
  width: 100%;
  border-collapse: collapse;
}

.sa-article :is(th, td){
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.sa-article hr{
  border-width: 0px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

/*
 * Rich accordion answer -- the AI Tagging FAQ's first item (2329:3036) sets bold
 * subheads and disc bullets inside what is otherwise a 17/1.3 answer. Styled by
 * tag for the same reason .sa-article is: the markup comes from copy, not layout.
 */

.sa-answer{
  font-family: Inter, system-ui, sans-serif;
  font-size: 14.17px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(27 27 30 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .sa-answer{
    font-size: 17px;
  }
}

.sa-answer {
  p{
    margin-bottom: 20px;
  }
  p:last-child{
    margin-bottom: 0px;
  }
  /* 2329:3036 sets these Semi Bold with only 5px under them. */
  strong, b{
    font-weight: 600;
  }
  p.sa-answer-head{
    margin-bottom: 5px;
  }
  p.sa-answer-head{
    font-weight: 600;
  }
  ul{
    margin-bottom: 20px;
  }
  ul{
    list-style-type: disc;
  }
  ul{
    padding-inline-start: 25px;
  }
  ul:last-child{
    margin-bottom: 0px;
  }
  li{
    margin-bottom: 0px;
  }
}

/*
 * Geotargeted marketing opt-in -- see app/marketing-optin.php.
 *
 * Only two things need real CSS: which of the two notices is visible, and giving
 * the checkbox its box back (Tailwind's preflight strips the native appearance).
 * Everything else is utilities on the markup.
 */

/* The international notice is what ships. The US notice takes over only once the
	 visitor has been placed in the United States. */

.sa-marketing-optin__notice--us {
  display: none;
}

.sa-geo-us .sa-marketing-optin__notice--us {
  display: block;
}

.sa-geo-us .sa-marketing-optin__notice--intl {
  display: none;
}

.sa-marketing-optin__box {
  -webkit-appearance: checkbox;
  -moz-appearance: auto;
       appearance: auto;
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  border: 1px solid currentColor;
  background: #f8f9fa;
  cursor: pointer;
}

/*
 * Detect -- the motion the brief carries.
 *
 * https://docs.sourceaudio.com/briefs/detect.html is a React prototype, and four
 * of its sections are animated rather than static: the two method cards draw a
 * live canvas each, the pipeline diagram flows, the numbers count up, and the
 * Beatwatch panel fills in. The page is plain PHP, so the motion is rebuilt here
 * and in the `detect` module at the end of js/script.js.
 *
 * Everything below is state-driven off ONE attribute: js/script.js sets
 * `data-detect-seen` on a container when it first scrolls into view, the same
 * way `data-hero-video-state` and `data-open` work elsewhere in this theme. No
 * class juggling.
 *
 * WITH JS OFF nothing here runs, and the page is still whole: the diagram, the
 * finished figures, the filled heatmap and the sparklines are all rendered by
 * PHP. The only thing lost is the arriving. That is why script.js adds a
 * `sa-detect-js` class to <html> on the way in and the hidden states below are
 * scoped to it -- without that class a `.sa-reveal` would sit at opacity 0
 * forever and the section would simply be blank.
 *
 * Reduced motion is honoured throughout: the reveals resolve instantly, the
 * loops stop, and the canvases are never started at all (see script.js).
 */

/* ------------------------------------------------------------------ Reveal */

/*
 * Curve and durations are the brief's own (cubic-bezier(0.16, 1, 0.3, 1), 700ms
 * for a block and 600ms for a staggered child). Kept rather than re-timed so the
 * page reads the way the comp does.
 */

.sa-detect-js .sa-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-detect-seen] .sa-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Children fall in one after another. The attribute always lands on an
   ANCESTOR, never on the staggered element itself, which is what keeps every
   rule here a plain descendant selector. */

.sa-detect-js .sa-reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-detect-seen] .sa-reveal-stagger > * {
  opacity: 1;
  transform: translateY(0);
}

/* Written out, not looped: the .scss extension here is a naming convention the
   team carried over from v7, but nothing compiles Sass -- postcss-import
   concatenates these and Tailwind sees plain CSS. Twelve is the longest run on
   the page (the Beatwatch sidebar); the heatmap paints itself instead. */

[data-detect-seen] .sa-reveal-stagger > *:nth-child(1)  {
  transition-delay:  60ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(2)  {
  transition-delay: 120ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(3)  {
  transition-delay: 180ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(4)  {
  transition-delay: 240ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(5)  {
  transition-delay: 300ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(6)  {
  transition-delay: 360ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(7)  {
  transition-delay: 420ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(8)  {
  transition-delay: 480ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(9)  {
  transition-delay: 540ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(10) {
  transition-delay: 600ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(11) {
  transition-delay: 660ms;
}

[data-detect-seen] .sa-reveal-stagger > *:nth-child(12) {
  transition-delay: 720ms;
}

/* --------------------------------------------------------- Method canvases */

/*
 * The two canvases (watermark payload, NFP vector field) are sized by CSS and
 * read that size back for their backing store -- see sizeCanvas() in script.js.
 * Fixed height because the drawing is a diagram, not content: it should not grow
 * with the card.
 */

.sa-detect-canvas {
  display: block;
  width: 100%;
  height: 140px;
}

/* ------------------------------------------------------------------ Pipeline */

/*
 * The diagram is server-rendered SVG; only the travelling dash is JS-free CSS.
 * 50/200 dasharray over a 250 offset means one short segment crossing the path
 * per cycle, with the gap long enough that two never share an edge.
 */

@keyframes sa-detect-flow {
  from {
    stroke-dashoffset: 250;
  }

  to   {
    stroke-dashoffset: 0;
  }
}

.sa-detect-js .sa-pipe-flow {
  opacity: 0;
  stroke-dasharray: 50 200;
  transition: opacity 500ms ease;
}

[data-detect-seen] .sa-pipe-flow {
  opacity: 1;
  animation: sa-detect-flow 2.6s linear infinite;
  /* Each edge carries its own --d, so the segments do not march in lockstep. */
  animation-delay: var(--d, 0ms);
}

/* The two hub nodes breathe. Same 2.4s the brief uses. */

@keyframes sa-detect-ring {
  0%   {
    transform: scale(0.8);
    opacity: 0.4;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.sa-detect-js .sa-pipe-ring {
  opacity: 0;
  transform-origin: center;
}

[data-detect-seen] .sa-pipe-ring {
  animation: sa-detect-ring 2.4s ease-out infinite;
}

/* Node cores light up in sequence, left to right, as the diagram arrives. */

.sa-detect-js .sa-pipe-core {
  opacity: 0.25;
  transition: opacity 500ms ease;
  transition-delay: var(--d, 0ms);
}

[data-detect-seen] .sa-pipe-core {
  opacity: 1;
}

/*
 * The six stage cards below the diagram line up with its six column bands: the
 * bands are equal sixths of the 1440-unit viewBox, so equal grid columns put
 * each card under the stage it describes. Change one and change the other --
 * that alignment is the whole point of the row.
 */

.sa-pipe-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .sa-pipe-stages {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .sa-pipe-stages {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
}

/* ----------------------------------------------------------------- Counters */

/*
 * A counter's digits change every frame, so the figure must not re-lay-out as it
 * runs: tabular numerals give every digit the same advance width. Without this
 * "80+" jitters horizontally all the way up from zero.
 */

.sa-count {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Beatwatch */

/*
 * The Beatwatch panel is a PORT, not a reinterpretation.
 *
 * Every other section of this page speaks v8 -- square corners, the fig-* type
 * scale, the theme's palette. This one does not, deliberately (Ryan, 2026-09-21):
 * it is a picture OF a product UI, and a picture of a UI is only convincing at
 * the UI's own scale. Rendered in v8's language it stopped reading as a
 * screenshot and started reading as another band of the marketing page.
 *
 * So the rules below are the brief's own, with its CSS variables resolved to the
 * literals they evaluate to in light mode:
 *
 *     --surface        #ffffff      --ink        #1f1d1a
 *     --surface-2      #f9f8f6      --ink-2      #4b4944
 *     --hairline       #e4e2dd      --ink-3      #6e6b64
 *     --hairline-strong #d9d6cf     --ink-mute   #8b8880
 *     --acc-2  #eaf2fe   --acc-3 #d7e5fd   --acc-5 #9cbef9
 *     --acc-7  #4d8cf3   --acc-9 #2878f0   --acc-11 #1860e0
 *     green    #46a758
 *
 * They are resolved rather than re-declared because there is no dark mode here
 * to switch them for, and a reader comparing this file to the brief should be
 * able to see the same numbers in both.
 *
 * ONE THING IS NOT LITERAL: the brief sets this in Figtree, which this theme
 * does not load. Inter is used instead -- it is already loaded as the body face
 * and is the same genre at these sizes. Swapping it back is one line here plus
 * the family in css/input.css, if the extra webfont is ever thought worth it.
 *
 * The blue accent is the brief's #2878f0, NOT the theme's sa-blue #0075FF. They
 * are close but not the same, and inside a screenshot the brief's is the one
 * that belongs.
 */

.sa-dash {
  --dash-surface: #ffffff;
  --dash-surface-2: #f9f8f6;
  --dash-hairline: #e4e2dd;
  --dash-hairline-strong: #d9d6cf;
  --dash-ink: #1f1d1a;
  --dash-ink-2: #4b4944;
  --dash-ink-3: #6e6b64;
  --dash-ink-mute: #8b8880;
  --dash-acc-2: #eaf2fe;
  --dash-acc-9: #2878f0;
  --dash-acc-11: #1860e0;
  --dash-green: #46a758;
  --dash-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: normal;
  border-radius: 16px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-hairline);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(31, 29, 26, 0.03), 0 8px 24px rgba(31, 29, 26, 0.06);
}

/* ---- Window chrome ---- */

.sa-dash-chrome {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--dash-surface-2);
  border-bottom: 1px solid var(--dash-hairline);
}

.sa-dash-dots {
  display: flex;
  gap: 6px;
}

.sa-dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--dash-hairline-strong);
}

.sa-dash-url {
  flex: 1;
  height: 24px;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-hairline);
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.sa-dash-build {
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
}

/* ---- Three-column body ---- */

.sa-dash-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 580px;
}

@media (min-width: 980px) {
  .sa-dash-body {
    grid-template-columns: 220px 1fr 320px;
  }
}

.sa-dash-sidebar {
  display: none;
  padding: 18px 14px;
  background: var(--dash-surface);
  border-right: 1px solid var(--dash-hairline);
}

@media (min-width: 980px) {
  .sa-dash-sidebar {
    display: block;
  }
}

.sa-dash-grp {
  margin: 14px 8px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dash-ink-mute);
}

.sa-dash-grp:first-child {
  margin-top: 0;
}

.sa-dash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--dash-ink-3);
}

.sa-dash-item.is-on {
  background: var(--dash-acc-2);
  color: var(--dash-acc-11);
  font-weight: 500;
}

.sa-dash-item svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.sa-dash-item .count {
  margin-left: auto;
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
}

.sa-dash-main {
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sa-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.sa-dash-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dash-ink);
}

.sa-dash-head .meta {
  margin: 0;
  font-size: 12px;
  color: var(--dash-ink-mute);
}

/* The "Streaming" pill, and the pulse on its dot. */

.sa-dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dash-ink-2);
  background: var(--dash-surface);
  border: 1px solid var(--dash-hairline);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

@keyframes sa-dash-live {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(70, 167, 88, 0.18);
  }

  50%      {
    box-shadow: 0 0 0 6px rgba(70, 167, 88, 0);
  }
}

.sa-dash-live {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--dash-green);
  box-shadow: 0 0 0 3px rgba(70, 167, 88, 0.18);
  animation: sa-dash-live 1.8s ease-in-out infinite;
}

/* ---- KPIs ---- */

.sa-dash-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 560px) {
  .sa-dash-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sa-dash-kpi {
  padding: 12px 14px;
  border: 1px solid var(--dash-hairline);
  border-radius: 10px;
  background: var(--dash-surface-2);
}

.sa-dash-kpi dt {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
}

.sa-dash-kpi dd {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--dash-ink-mute);
}

/* ---- Heatmap ---- */

.sa-dash-heat {
  padding: 14px;
  border: 1px solid var(--dash-hairline);
  border-radius: 10px;
  background: var(--dash-surface);
}

.sa-dash-heat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sa-dash-heat-head .title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-ink);
}

.sa-dash-heat-head .legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
}

.sa-dash-heat-head .legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sa-heatmap {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 3px;
}

.sa-heat-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  transition: background-color 220ms ease;
}

/* ---- Match feed ---- */

.sa-dash-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.sa-dash-feed-head .label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-ink);
}

.sa-dash-feed-head .count {
  margin: 0;
  font-family: var(--dash-mono);
  font-size: 13px;
  color: var(--dash-ink-mute);
}

.sa-dash-feed {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-dash-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-bottom: 1px solid var(--dash-hairline);
  font-size: 13px;
}

.sa-dash-row:last-child {
  border-bottom: 0;
}

.sa-dash-row .when {
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
}

.sa-dash-row .track {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--dash-ink);
}

.sa-dash-row .track .artist {
  font-weight: 400;
  color: var(--dash-ink-mute);
}

.sa-dash-row .ch {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dash-surface-2);
  color: var(--dash-ink-3);
  font-family: var(--dash-mono);
  font-size: 11px;
}

/* Blue is the watermark read; NFP flips the row to green. The class is on the
   ROW, not the pill, exactly as the brief has it. */

.sa-dash-row .src {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--dash-acc-2);
  color: var(--dash-acc-11);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sa-dash-row.is-nfp .src {
  background: rgba(70, 167, 88, 0.16);
  color: var(--dash-green);
}

.sa-dash-row .conf {
  min-width: 42px;
  text-align: right;
  font-family: var(--dash-mono);
  font-size: 11px;
  color: var(--dash-ink-mute);
}

/*
 * A row that has just arrived. The brief keeps its newest row tinted for good;
 * a fade is used instead so a panel left on screen is not a block of blue.
 */

@keyframes sa-detect-fresh {
  from {
    background-color: var(--dash-acc-2);
  }

  to   {
    background-color: rgba(40, 120, 240, 0);
  }
}

.sa-feed-fresh {
  animation: sa-detect-fresh 1900ms ease-out 1;
}

/* ---- Station rail ---- */

.sa-dash-rail {
  display: none;
  padding: 20px;
  background: var(--dash-surface);
  border-left: 1px solid var(--dash-hairline);
}

@media (min-width: 980px) {
  .sa-dash-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.sa-dash-rail .label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-ink-mute);
}

.sa-dash-station {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--dash-hairline);
  background: var(--dash-surface-2);
}

.sa-dash-station + .sa-dash-station {
  margin-top: 10px;
}

.sa-dash-station .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sa-dash-station .ind {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 99px;
  background: var(--dash-green);
}

.sa-dash-station .ind.is-warn {
  background: #f0b93a;
}

.sa-dash-station .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-ink);
}

.sa-dash-station .meta {
  margin-left: auto;
  text-align: right;
  font-size: 11px;
  color: var(--dash-ink-mute);
}

/*
 * Sparklines. Bars are flush-bottom and only their heights change, so a tick is
 * a transform-free repaint of 22 short bars.
 */

.sa-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
}

.sa-spark span {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px;
  background: var(--dash-acc-9);
  transition: height 300ms linear, opacity 300ms linear;
}

/* ------------------------------------------------------------ Reduced motion */

/*
 * Everything that loops stops; everything that reveals is simply already there.
 * The canvases and the Beatwatch ticker are never started under this setting --
 * script.js checks the same query -- so the markup they would have animated is
 * left in its server-rendered state, which is a complete picture on its own.
 */

@media (prefers-reduced-motion: reduce) {
  .sa-reveal,
	.sa-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-pipe-flow {
    opacity: 1;
    animation: none;
  }

  .sa-pipe-ring {
    opacity: 0.25;
    animation: none;
  }

  .sa-pipe-core {
    opacity: 1;
    transition: none;
  }

  .sa-dash-live,
	.sa-feed-fresh {
    animation: none;
  }

  .sa-heat-cell,
	.sa-spark span {
    transition: none;
  }
}

/*
 * DK Grotesk ships as two static faces. Each claims a weight RANGE so every
 * Tailwind weight utility lands on one of them instead of the browser faking a
 * bold: 100-500 -> Medium, 600-900 -> Black. Paths are relative to the built
 * css/style.css. These must come AFTER every @import: postcss-import stops
 * inlining imports that follow any other rule, which silently drops them.
 */

@font-face {
  font-family: "DK Grotesk";

  src: url("../fonts/dk-grotesk-medium.woff2") format("woff2"),
		 url("../fonts/dk-grotesk-medium.woff") format("woff");

  font-weight: 100 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "DK Grotesk";

  src: url("../fonts/dk-grotesk-black.woff2") format("woff2"),
		 url("../fonts/dk-grotesk-black.woff") format("woff");

  font-weight: 600 900;

  font-style: normal;

  font-display: swap;
}

.placeholder\:text-white\/70::-moz-placeholder{
  color: rgb(255 255 255 / 0.7);
}

.placeholder\:text-white\/70::placeholder{
  color: rgb(255 255 255 / 0.7);
}

.hover\:text-sa-blue:hover{
  --tw-text-opacity: 1;
  color: rgb(0 117 255 / var(--tw-text-opacity, 1));
}

.hover\:opacity-70:hover{
  opacity: 0.7;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.focus\:not-sr-only:focus{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus{
  position: absolute;
}

.focus\:left-2:focus{
  left: 0.5rem;
}

.focus\:top-2:focus{
  top: 0.5rem;
}

.focus\:z-50:focus{
  z-index: 50;
}

.focus\:border-sa-blue:focus{
  --tw-border-opacity: 1;
  border-color: rgb(0 117 255 / var(--tw-border-opacity, 1));
}

.focus\:bg-white:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:p-3:focus{
  padding: 0.75rem;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px){
  .sm\:w-\[385px\]{
    width: 385px;
  }

  .sm\:w-\[600px\]{
    width: 600px;
  }

  .sm\:flex-1{
    flex: 1 1 0%;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-end{
    align-items: flex-end;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:px-\[144px\]{
    padding-left: 144px;
    padding-right: 144px;
  }

  .sm\:pt-\[100px\]{
    padding-top: 100px;
  }

  .sm\:text-fig-20{
    font-size: 20.4px;
  }

  .sm\:text-fig-35{
    font-size: 35.25px;
  }
}

@media (min-width: 768px){
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .lg\:absolute{
    position: absolute;
  }

  .lg\:relative{
    position: relative;
  }

  .lg\:left-0{
    left: 0px;
  }

  .lg\:left-\[116px\]{
    left: 116px;
  }

  .lg\:left-\[232px\]{
    left: 232px;
  }

  .lg\:left-\[605px\]{
    left: 605px;
  }

  .lg\:left-\[867px\]{
    left: 867px;
  }

  .lg\:right-0{
    right: 0px;
  }

  .lg\:top-0{
    top: 0px;
  }

  .lg\:top-\[154px\]{
    top: 154px;
  }

  .lg\:top-\[163px\]{
    top: 163px;
  }

  .lg\:top-\[276px\]{
    top: 276px;
  }

  .lg\:top-\[308px\]{
    top: 308px;
  }

  .lg\:top-\[96px\]{
    top: 96px;
  }

  .lg\:z-10{
    z-index: 10;
  }

  .lg\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:mt-\[147px\]{
    margin-top: 147px;
  }

  .lg\:mt-\[224px\]{
    margin-top: 224px;
  }

  .lg\:block{
    display: block;
  }

  .lg\:inline{
    display: inline;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-\[1013px\]{
    height: 1013px;
  }

  .lg\:h-\[320px\]{
    height: 320px;
  }

  .lg\:h-\[346px\]{
    height: 346px;
  }

  .lg\:h-\[357px\]{
    height: 357px;
  }

  .lg\:h-\[622px\]{
    height: 622px;
  }

  .lg\:h-\[665px\]{
    height: 665px;
  }

  .lg\:min-h-\[350px\]{
    min-height: 350px;
  }

  .lg\:min-h-\[401px\]{
    min-height: 401px;
  }

  .lg\:min-h-\[422px\]{
    min-height: 422px;
  }

  .lg\:min-h-\[582px\]{
    min-height: 582px;
  }

  .lg\:w-\[128px\]{
    width: 128px;
  }

  .lg\:w-\[167px\]{
    width: 167px;
  }

  .lg\:w-\[204px\]{
    width: 204px;
  }

  .lg\:w-\[241px\]{
    width: 241px;
  }

  .lg\:w-\[245px\]{
    width: 245px;
  }

  .lg\:w-\[283\.5px\]{
    width: 283.5px;
  }

  .lg\:w-\[322px\]{
    width: 322px;
  }

  .lg\:w-\[325px\]{
    width: 325px;
  }

  .lg\:w-\[344px\]{
    width: 344px;
  }

  .lg\:w-\[400px\]{
    width: 400px;
  }

  .lg\:w-\[419px\]{
    width: 419px;
  }

  .lg\:w-\[420px\]{
    width: 420px;
  }

  .lg\:w-\[425px\]{
    width: 425px;
  }

  .lg\:w-\[427px\]{
    width: 427px;
  }

  .lg\:w-\[431px\]{
    width: 431px;
  }

  .lg\:w-\[450px\]{
    width: 450px;
  }

  .lg\:w-\[470px\]{
    width: 470px;
  }

  .lg\:w-\[480px\]{
    width: 480px;
  }

  .lg\:w-\[484px\]{
    width: 484px;
  }

  .lg\:w-\[500px\]{
    width: 500px;
  }

  .lg\:w-\[528px\]{
    width: 528px;
  }

  .lg\:w-\[530px\]{
    width: 530px;
  }

  .lg\:w-\[531px\]{
    width: 531px;
  }

  .lg\:w-\[532px\]{
    width: 532px;
  }

  .lg\:w-\[533px\]{
    width: 533px;
  }

  .lg\:w-\[557px\]{
    width: 557px;
  }

  .lg\:w-\[560px\]{
    width: 560px;
  }

  .lg\:w-\[575px\]{
    width: 575px;
  }

  .lg\:w-\[587px\]{
    width: 587px;
  }

  .lg\:w-\[600px\]{
    width: 600px;
  }

  .lg\:w-\[607px\]{
    width: 607px;
  }

  .lg\:w-\[650px\]{
    width: 650px;
  }

  .lg\:w-\[656px\]{
    width: 656px;
  }

  .lg\:w-\[670px\]{
    width: 670px;
  }

  .lg\:w-\[676px\]{
    width: 676px;
  }

  .lg\:w-\[700px\]{
    width: 700px;
  }

  .lg\:w-\[715px\]{
    width: 715px;
  }

  .lg\:w-\[724px\]{
    width: 724px;
  }

  .lg\:w-\[735px\]{
    width: 735px;
  }

  .lg\:w-\[800px\]{
    width: 800px;
  }

  .lg\:w-\[850px\]{
    width: 850px;
  }

  .lg\:w-\[918px\]{
    width: 918px;
  }

  .lg\:w-\[951px\]{
    width: 951px;
  }

  .lg\:w-\[calc\(\(100\%_-_40px\)\/3\)\]{
    width: calc((100% - 40px) / 3);
  }

  .lg\:w-auto{
    width: auto;
  }

  .lg\:w-full{
    width: 100%;
  }

  .lg\:max-w-none{
    max-width: none;
  }

  .lg\:scroll-px-0{
    scroll-padding-left: 0px;
    scroll-padding-right: 0px;
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-row-reverse{
    flex-direction: row-reverse;
  }

  .lg\:items-start{
    align-items: flex-start;
  }

  .lg\:items-center{
    align-items: center;
  }

  .lg\:justify-center{
    justify-content: center;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-0{
    gap: 0px;
  }

  .lg\:gap-10{
    gap: 2.5rem;
  }

  .lg\:gap-\[124px\]{
    gap: 124px;
  }

  .lg\:gap-\[133px\]{
    gap: 133px;
  }

  .lg\:gap-\[137px\]{
    gap: 137px;
  }

  .lg\:gap-\[141px\]{
    gap: 141px;
  }

  .lg\:gap-\[150px\]{
    gap: 150px;
  }

  .lg\:gap-\[163px\]{
    gap: 163px;
  }

  .lg\:gap-\[194px\]{
    gap: 194px;
  }

  .lg\:gap-\[19px\]{
    gap: 19px;
  }

  .lg\:gap-\[30px\]{
    gap: 30px;
  }

  .lg\:gap-\[33px\]{
    gap: 33px;
  }

  .lg\:gap-\[60px\]{
    gap: 60px;
  }

  .lg\:gap-\[67px\]{
    gap: 67px;
  }

  .lg\:gap-\[69px\]{
    gap: 69px;
  }

  .lg\:gap-\[74px\]{
    gap: 74px;
  }

  .lg\:gap-\[82px\]{
    gap: 82px;
  }

  .lg\:gap-\[93px\]{
    gap: 93px;
  }

  .lg\:overflow-visible{
    overflow: visible;
  }

  .lg\:border-0{
    border-width: 0px;
  }

  .lg\:border-line-dark{
    --tw-border-opacity: 1;
    border-color: rgb(53 53 53 / var(--tw-border-opacity, 1));
  }

  .lg\:bg-almost-black{
    --tw-bg-opacity: 1;
    background-color: rgb(27 27 30 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-transparent{
    background-color: transparent;
  }

  .lg\:bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-10{
    padding: 2.5rem;
  }

  .lg\:p-5{
    padding: 1.25rem;
  }

  .lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-\[146px\]{
    padding-left: 146px;
    padding-right: 146px;
  }

  .lg\:px-\[78px\]{
    padding-left: 78px;
    padding-right: 78px;
  }

  .lg\:py-\[150px\]{
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .lg\:pb-\[139px\]{
    padding-bottom: 139px;
  }

  .lg\:pb-\[225px\]{
    padding-bottom: 225px;
  }

  .lg\:pb-\[253px\]{
    padding-bottom: 253px;
  }

  .lg\:pb-\[323px\]{
    padding-bottom: 323px;
  }

  .lg\:pt-10{
    padding-top: 2.5rem;
  }

  .lg\:pt-\[140px\]{
    padding-top: 140px;
  }

  .lg\:pt-\[175px\]{
    padding-top: 175px;
  }

  .lg\:pt-\[178px\]{
    padding-top: 178px;
  }

  .lg\:pt-\[240px\]{
    padding-top: 240px;
  }

  .lg\:-indent-\[0\.45em\]{
    text-indent: -0.45em;
  }

  .lg\:\!text-\[18px\]{
    font-size: 18px !important;
  }

  .lg\:text-\[30px\]{
    font-size: 30px;
  }

  .lg\:text-fig-14{
    font-size: 14.17px;
  }

  .lg\:text-fig-15{
    font-size: 14.7px;
  }

  .lg\:text-fig-17{
    font-size: 17px;
  }

  .lg\:text-fig-20{
    font-size: 20.4px;
  }

  .lg\:text-fig-24{
    font-size: 24.48px;
  }

  .lg\:text-fig-29{
    font-size: 29.38px;
  }

  .lg\:text-fig-35{
    font-size: 35.25px;
  }

  .lg\:text-fig-42{
    font-size: 42.3px;
  }

  .lg\:text-fig-51{
    font-size: 50.76px;
  }

  .lg\:leading-none{
    line-height: 1;
  }

  .lg\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .lg\:no-underline{
    text-decoration-line: none;
  }
}