@font-face {
  font-family: 'Neue Montreal';

  src: url('../fonts/NeueMontreal-Light.woff2') format('woff2');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';

  src: url('../fonts/NeueMontreal-Regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';

  src: url('../fonts/NeueMontreal-Medium.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';

  src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Michroma';

  src: url('../fonts/Michroma-Regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

  unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
		U+FFFD;
}

@font-face {
  font-family: 'Michroma';

  src: url('../fonts/Michroma-Regular-ext.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

  unicode-range:
		U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

*, ::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: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  /* 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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;
}

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

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

.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;
  }
}

/* The header ships in two skins: dark over the home hero, light on inner
     pages. Everything inside it inherits `currentColor`, so only these two
     rules change. */

/* Asked for directly: a white/20 hairline over and under the mobile bar.
     Drawn as inset shadows rather than real borders so the bar stays exactly
     64px and partials/header-spacer.html's 96px still matches; the desktop bar
     is signed off against double_nav.jpg and keeps no rules. */

.site-header {
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1024px) {
  .site-header {
    --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 0 rgba(255,255,255,0.2);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), inset 0 -1px 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);
  }
}

[data-header='light'] .site-header {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

[data-header='light'] .site-header .logo-mark {
  filter: invert(1);
}

/* The header's lockup is footer-logo.svg at every width (natively black - the
     same asset the always-light footer uses unfiltered), so its invert runs the
     other way round from a white-by-default svg: invert to white over the
     dark/transparent skin, stay native black once [data-header='light'] flips
     the bar to a light background. */

.logo-mark-mobile {
  filter: invert(1);
}

[data-header='light'] .site-header .logo-mark-mobile {
  filter: none;
}

/* Header dropdown ("Shop peptides", "Help"): a 12px dark glass card hanging
     10px under the bar and centred on its own trigger, not on the header.
     The trigger is h-16 so the panel's top-full is the bar's own bottom edge.
     double_nav.jpg only draws it over the dark home hero; the light skin gets
     the mirrored treatment so it stays readable on inner pages. */

.nav-menu {
  position: relative;
  display: flex;
  height: 4rem;
  align-items: center;
}

.nav-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 40;
  margin-top: 10px;
  --tw-translate-x: -50%;
  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));
  border-radius: 12px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(0 0 0 / 0.2);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 11px;
  padding-top: 17.5px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (max-width: 1024px) {
  .nav-panel {
    font-weight: 500;
  }
}

.nav-panel[hidden] {
  display: none;
}

[data-header='light'] .nav-panel {
  border-color: rgb(0 0 0 / 0.1);
  background-color: rgb(255 255 255 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.nav-label {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.067em;
  color: rgb(255 255 255 / 0.55);
}

[data-header='light'] .nav-label {
  color: rgb(1 4 11 / 0.55);
}

/* 34px rows carry the export's pitch without gaps, so the whole row is the
     hover target */

.nav-item {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.01em;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.nav-item:hover {
  opacity: 0.7;
}

.nav-soon {
  font-size: 13.6px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 34px;
  color: rgb(255 255 255 / 0.45);
}

[data-header='light'] .nav-soon {
  color: rgb(1 4 11 / 0.45);
}

.nav-rule {
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.12);
}

[data-header='light'] .nav-rule {
  border-color: rgb(0 0 0 / 0.1);
}

.nav-go {
  display: flex;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.06);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

[data-header='light'] .nav-go {
  background-color: rgb(0 0 0 / 0.06);
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* the trigger's chevron flips while its panel is open */

[data-nav-toggle][aria-expanded='true'] .nav-chevron {
  --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));
}

/* ---- mobile menu, off mob_nav_1.jpg / mob_nav_2.jpg ----
     A full-screen light sheet, not a drawer: both exports draw the announcement
     strip and the bar gone, so this covers them rather than hanging below. Two
     white 12px cards on the page ground with a 16px gutter and a 16px gap. */

.mnav {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* the sheet fades in rather than snapping; `hidden` still does the display
     switch, so main.js drops it a frame before setting this and only puts it
     back once the fade out has run */

.mnav[data-menu-open] {
  opacity: 1;
}

/* it is still display:flex for the 200ms of the fade out, so it would go on
     catching clicks on its way to invisible */

.mnav:not([data-menu-open]) {
  pointer-events: none;
}

/* 64px tall, 8px padding all round - which is what puts the 48px buttons
     8px off every edge; the logo and the back control carry the rest of their
     own inset, because the export does not align them to that padding. */

.mnav-head {
  display: flex;
  height: 4rem;
  flex-shrink: 0;
  align-items: center;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 8px;
}

.mnav-circle {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.mnav-circle:hover {
  opacity: 0.7;
}

/* a touch larger than a list row: the export's "Back to menu" is 100.5px of
     ink against 96.5 at the rows' 17px */

.mnav-back {
  margin-left: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17.7px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* the card is the viewport for the two levels, which are stacked inside it -
     it clips, they scroll. Padding moved onto the panels, so the rules still
     inset 24 either side exactly as they did when this element carried px-6. */

.mnav-body {
  position: relative;
  min-height: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.mnav-panel {
  position: absolute;
  inset: 0px;
  overflow-y: auto;
  overscroll-behavior: contain;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  transition-property: transform,visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* A sub-level parks off the card's right edge and slides in over the root,
     which stays put underneath (it has to: the left half of the card shows it
     for the whole of the slide). Going back is the same transition in reverse.
     `visibility` is transitioned so it only flips at the END of the slide out -
     it steps rather than interpolating - which keeps the panel off AT and out
     of the tab order without display:none killing the animation. */

.mnav-panel:not([data-menu-list='root']):not([data-menu-current]) {
  visibility: hidden;
  --tw-translate-x: 100%;
  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));
}

/* py-17 + a 20px line box = the export's 54px text row; a row carrying the
     26px disc comes out at 60, which is exactly what it draws. The rule sits on
     every row, the last one included. */

.mnav-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: left;
  font-size: 17px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.mnav-row:hover {
  opacity: 0.7;
}

.mnav-go {
  display: flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.mnav-soon {
  font-size: 13.6px;
  text-transform: uppercase;
  line-height: 20px;
  color: rgb(1 4 11 / 0.45);
}

.mnav-group {
  padding-top: 27.5px;
}

.mnav-group + .mnav-group {
  padding-top: 35px;
}

/* same face, size and tracking as the desktop panel's label - both exports
     measure "BY FORMAT" at 108 and "BY RESEARCH AREA" at 185.5 - but ink/80
     here against the desktop's /55 */

.mnav-label {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.067em;
  color: rgb(1 4 11 / 0.8);
}

.mnav-label + ul {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mnav,
		.mnav-panel {
    transition-property: none;
  }
}

/* The 1300px frame with the mockup's 64px gutters is the xl target; the base
     values are home_mob.jpg's own 390px frame (16px gutters, its own type
     scale), and sm/lg interpolate between the two measured ends. */

.\!wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1300px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .\!wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 768px) {
  .\!wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .\!wrap {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1300px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 768px) {
  .wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .wrap {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.eyebrow {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

@media (max-width: 1024px) {
  .eyebrow {
    font-size: 10px;
  }
}

.h1 {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .h1 {
    font-size: 54px;
    line-height: 58px;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1024px) {
  .h1 {
    font-size: 64px;
    line-height: 68px;
  }
}

@media (min-width: 1280px) {
  .h1 {
    font-size: 80px;
    line-height: 84px;
  }
}

.h2 {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (max-width: 1024px) {
  .h2 {
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  .h2 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

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

@media (min-width: 1280px) {
  .h2 {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
}

/* headings inside the dark feature blocks and banners */

.h-block {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1024px) {
  .h-block {
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  .h-block {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1024px) {
  .h-block {
    font-size: 42px;
  }
}

/* pill button, white on light sections */

.\!btn {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}

.btn {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}

.btn-white {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.btn-dark {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 13 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* circular icon button */

.icon-btn {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

/* header action icons (search / menu / cart) sit in a filled 47px circle on
     mobile; lg: strips the circle back to a bare icon, matching the desktop
     header's plain nav icons. home_mob.jpg draws a translucent disc (fill 22
     over the bar's 12, i.e. ~4% white) with its 1px ring 3.5px INSIDE the
     edge, not on it - hence the ::before rather than a border on the box. */

.icon-circle {
  position: relative;
  display: flex;
  height: 47px;
  width: 47px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.04);
}

@media (min-width: 1024px) {
  .icon-circle {
    height: auto;
    width: auto;
    border-radius: 0px;
    background-color: transparent;
  }
}

.icon-circle::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 3.5px;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.05);
}

@media (min-width: 1024px) {
  .icon-circle::before {
    display: none;
  }
}

/* the light bar follows shop_mob.jpg instead, which draws a plain hairline
     ring on the circle's own edge and no fill - the two exports disagree here,
     so each skin keeps the circle its own export draws. */

[data-header='light'] .icon-circle {
  background-color: transparent;
}

[data-header='light'] .icon-circle::before {
  inset: 0px;
  border-color: rgb(1 4 11 / 0.1);
}

/* home_mob.jpg draws the count as a white disc with an ink numeral over the
     dark bar; shop_mob.jpg draws the inverse over the light one. */

.cart-badge {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

[data-header='light'] .cart-badge {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* small outlined pill used for dose / tab / payment chips */

.chip {
  display: inline-flex;
  height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-color: rgb(1 4 11 / 0.1);
  padding-left: 18px;
  padding-right: 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

/* a chip row that is a picker (the product card's pack size) marks its
     choice with aria-pressed; the flat chip stays a <span> and is unaffected */

.chip[aria-pressed] {
  cursor: pointer;
  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;
}

.chip[aria-pressed]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.chip[aria-pressed='true'] {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

/* research-area chip in the shop filter rail; the selected one is marked
     with aria-current so the state lives in the markup, not in a class */

.rail-chip {
  display: inline-flex;
  height: 36px;
  align-items: center;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  padding-left: 11px;
  padding-right: 11px;
  font-size: 16px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.rail-chip:hover {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.rail-chip[aria-current] {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* gallery thumbnail; the selected one is marked with aria-current so the
     state travels with the markup */

.thumb {
  display: flex;
  height: 4rem;
  width: 4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.thumb[aria-current] {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

/* selectable size / quantity option. The chosen one keeps its box size and
     gains a ring, so nothing shifts when the selection moves. */

.opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  font-size: 15px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.opt:hover {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.opt[aria-pressed='true'] {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

/* ----------------------------- build a stack ----------------------------- */

/* selected state on a stack-card / .stack-line row: a plain border swap,
     same convention as .opt / .rail-chip - the state lives in the attribute,
     not a swapped class */

[data-stack-item][data-stack-selected] {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

/* the qty control a stack-card grows into once added, and the same one
     each "Your Stack" line item uses - a single bordered pill rather than
     three separate buttons, so the ± controls share one hairline. */

.stepper {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.stepper button {
  display: flex;
  height: 100%;
  width: 33px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.stepper button:hover {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.stepper span {
  min-width: 34px;
  text-align: center;
  font-weight: 500;
  line-height: 1;
}

/* one of the 4-Pack slots in the "Your Stack" panel: dashed while empty,
     a solid ring once a vial fills it (state travels in data-filled, same
     attribute convention as everywhere else on this site). */

/* ---- "Your Stack" on phones, off build_stack_mob_1 / _2.jpg ----
     The panel leaves the grid and docks to the bottom edge as a 149px peek -
     grip, count, hint, the four slots and the running total - and swipes open
     to a sheet that starts 144px down the viewport, over a plain black/30
     scrim (the export shows the header sharply through it, so no blur). From
     lg it is the sticky sidebar column again, untouched. */

.stack-panel {
  border-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 40;
  display: flex;
  height: 149px;
  flex-direction: column;
  overflow: hidden;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 27.5px;
  padding-top: 0px;
  --tw-shadow: 0 -10px 30px rgba(1,4,11,0.1);
  --tw-shadow-colored: 0 -10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .stack-panel {
    position: sticky;
    top: 96px;
    z-index: auto;
    height: auto;
    overflow: visible;
    border-radius: 17px;
    padding-bottom: 22px;
    padding-top: 22px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.stack-panel[data-expanded] {
  height: calc(100dvh - 144px);
}

/* the grip is a full-width 26px hit area around the export's 90x6 bar */

.stack-grip {
  display: flex;
  height: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.stack-grip-bar {
  display: block;
  height: 6px;
  width: 90px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
}

.stack-scroll {
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1024px) {
  .stack-scroll {
    overflow: visible;
  }
}

.stack-scrim {
  position: fixed;
  inset: 0px;
  z-index: 30;
  background-color: rgb(0 0 0 / 0.3);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .stack-scrim {
    display: none;
  }
}

.stack-scrim:not([data-open]) {
  pointer-events: none;
}

.stack-scrim[data-open] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .stack-panel,
		.stack-scrim {
    transition-property: none;
  }
}

.stack-slot {
  display: flex;
  height: 43px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* a filled slot is a button: it shows the vial at rest and swaps it for a
     remove cross on hover (and on keyboard focus), which takes one vial back
     off that line. Specificity, not layer order, settles the hidden/block
     pair here - the swap rules are (0,2,2) against the base (0,1,0). */

.stack-slot[data-filled] {
  cursor: pointer;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.stack-slot-x {
  display: none;
}

.stack-slot[data-filled]:hover .stack-slot-vial,
	.stack-slot[data-filled]:focus-visible .stack-slot-vial {
  display: none;
}

.stack-slot[data-filled]:hover .stack-slot-x,
	.stack-slot[data-filled]:focus-visible .stack-slot-x {
  display: block;
}

/* FAQ disclosure */

.faq {
  overflow: hidden;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.faq-q {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 22.5px;
  padding-bottom: 22.5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .faq-q {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 19.5px;
    line-height: 26px;
  }
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-mark {
  display: inline-flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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: 250ms;
}

.faq[open] .faq-mark {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* the new chevron points down at rest (its own drawn orientation, no CSS
     rotation needed) and flips to point up once the panel is open;
     transitioned so it turns alongside the JS height animation instead of
     snapping ahead of it */

.faq-mark svg {
  transition: transform 250ms ease-in-out;
}

.faq[open] .faq-mark svg {
  transform: rotate(180deg);
}

/* the rule spans the whole card; only the copy is measured for line length */

.faq-a {
  border-top-width: 1px;
  border-color: rgba(240,240,240,1);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 27px;
  padding-top: 18px;
}

@media (min-width: 640px) {
  .faq-a {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 21px;
    padding-top: 21px;
  }
}

.faq-a p {
  max-width: 776px;
  font-size: 17px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .faq-a p {
    font-size: 17px;
    line-height: 22px;
  }
}

/* Breadcrumb pill. Everything but the current page reads as secondary, so
     the muted colour lives on the list and only the current item overrides it. */

.crumbs {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 11px;
  border-radius: 12px;
  padding-left: 11px;
  padding-right: 11px;
  font-size: 15px;
  color: rgb(1 4 11 / 0.55);
}

@media (min-width: 640px) {
  .crumbs {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.crumbs a:hover {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.crumbs [aria-current] {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* ------------------------------- search ------------------------------- */

/* The overlay panel is a frosted sheet: the dimmed page stays readable
     underneath, so it is a translucent white with a blurred backdrop. */

/* On phones the export drops the sheet entirely: the panel is the white
     screen itself. From sm up it is the frosted card again. */

.search-panel {
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-backdrop-blur:  ;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 640px) {
  .search-panel {
    border-radius: 16px;
    background-color: rgb(255 255 255 / 0.72);
    padding: 24px;
    --tw-backdrop-blur: blur(24px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

/* a chip row that scrolls on one line on phones and wraps from sm up, with
     a forward arrow parked on the right edge (same control as .lib-rail) */

.search-rail {
  position: relative;
}

.search-rail-next {
  position: absolute;
  right: 0px;
  top: 50%;
  display: flex;
  height: 26px;
  width: 26px;
  --tw-translate-y: -50%;
  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));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 640px) {
  .search-rail-next {
    display: none;
  }
}

.search-recent-chip {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  padding-left: 14.5px;
  padding-right: 14.5px;
  font-size: 16.5px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.search-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  line-height: 16px;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* category shortcut in the empty search panel */

.cat-chip {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: rgb(1 4 11 / 0.04);
  padding-left: 12px;
  padding-right: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.cat-chip:hover {
  background-color: rgb(1 4 11 / 0.08);
}

/* the round mark above an empty-result message. The hairline is the same
     gradient ring as .hero-pill (see below) rather than a flat border - see
     that comment for why it's a masked ::before instead of a plain border. */

.empty-mark {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: transparent;
  background-color: rgb(255 255 255 / 0.1);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-shadow: 0 8px 18px rgba(0,0,0,.06);
  --tw-shadow-colored: 0 8px 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.empty-mark::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
			90deg,
			rgb(255 255 255 / 0.05),
			rgb(255 255 255 / 0.36) 4.1%,
			rgb(255 255 255 / 0.9) 10%,
			rgb(255 255 255 / 0.9) 90%,
			rgb(255 255 255 / 0.36) 95.9%,
			rgb(255 255 255 / 0.05)
		);
  -webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------- research library --------------------------- */

/* category filter above the library grid; the selected one is marked with
     aria-current so the state lives in the markup, not in a class */

.lib-chip {
  display: inline-flex;
  height: 36px;
  align-items: center;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: rgb(1 4 11 / 0.05);
  padding-left: 15px;
  padding-right: 15px;
  font-size: 17px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.lib-chip:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}

.lib-chip[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.lib-chip[aria-current]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

.lib-eyebrow {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.044em;
  color: rgb(1 4 11 / 0.8);
}

/* research-area tag on a library card */

.lib-tag {
  display: inline-flex;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16.4px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .lib-tag {
    font-size: 17px;
  }
}

/* the library's category row: a white scrolling strip on phones */

.lib-rail {
  position: relative;
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

@media (min-width: 640px) {
  .lib-rail {
    margin-top: 1.5rem;
    overflow: visible;
    border-radius: 0px;
    background-color: transparent;
    padding: 0px;
  }
}

.lib-rail-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-right: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lib-rail-list::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .lib-rail-list {
    flex-wrap: wrap;
    overflow: visible;
    padding-right: 0px;
  }
}

.lib-rail-list > li {
  flex-shrink: 0;
}

.lib-rail-fade {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 74px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(255 255 255 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  --tw-gradient-to-position: 60%;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .lib-rail-fade {
    display: none;
  }
}

.lib-rail-next {
  position: absolute;
  right: 16px;
  top: 50%;
  display: flex;
  height: 26px;
  width: 26px;
  --tw-translate-y: -50%;
  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));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .lib-rail-next {
    display: none;
  }
}

/* --------------------------- library compound page --------------------- */

/* the export's cards sit on half-pixel bounds, so the bottom padding is
     half a pixel shy of the top */

.lib-card {
  border-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  padding-top: 25px;
}

@media (min-width: 640px) {
  .lib-card {
    padding: 2rem;
  }
}

.lib-h {
  font-size: 17.1px;
  font-weight: 500;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .lib-h {
    font-size: 18px;
  }
}

/* chip row inside a compound card: one scrolling line on phones, where the
     export also draws the chips smaller */

.lib-chips {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lib-chips::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .lib-chips {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.lib-chips > li {
  flex-shrink: 0;
}

.lib-chips .lib-chip {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 14.3px;
}

@media (min-width: 640px) {
  .lib-chips .lib-chip {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
  }
}

/* the export's body copy measures a touch narrower than the card, which is
     what puts the long paragraphs' line breaks where they are */

.lib-p {
  max-width: 690px;
  font-size: 16.5px;
  line-height: 20px;
  color: rgb(1 4 11 / 0.55);
}

@media (min-width: 640px) {
  .lib-p {
    font-size: 17px;
    --tw-text-opacity: 1;
    color: rgb(22 23 29 / var(--tw-text-opacity, 1));
  }
}

/* pulled-out paragraph inside a card */

.lib-note {
  display: block;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 19px;
  padding-top: 17px;
  font-size: 16.3px;
  line-height: 20px;
  color: rgb(1 4 11 / 0.8);
}

@media (min-width: 640px) {
  .lib-note {
    padding-bottom: 24px;
    padding-top: 24px;
    font-size: 17px;
  }
}

/* small black action pill with a chevron */

.lib-pill {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  padding-left: 11px;
  padding-right: 11px;
  font-size: 13px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  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;
}

.lib-pill:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 23 29 / var(--tw-bg-opacity, 1));
}

/* the compound page's own disclosure — lighter than the site-wide .faq */

/* phones use the home page .faq's measurements: a borderless card per
     question with a rule over the answer */

.lib-faq {
  overflow: hidden;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
  .lib-faq {
    border-radius: 14px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
  }
}

.lib-faq-q {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 22.5px;
  padding-bottom: 22.5px;
  font-size: 17.4px;
  font-weight: 500;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .lib-faq-q {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 21px;
    padding-bottom: 21px;
    font-size: 17px;
    line-height: 20px;
  }
}

.lib-faq-q::-webkit-details-marker {
  display: none;
}

.lib-faq-mark {
  display: inline-flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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: 250ms;
}

.lib-faq[open] .lib-faq-mark {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.lib-faq-mark svg {
  transition: transform 250ms ease-in-out;
}

.lib-faq[open] .lib-faq-mark svg {
  transform: rotate(180deg);
}

.lib-faq-a {
  border-top-width: 1px;
  border-color: rgba(240,240,240,1);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 27px;
  padding-top: 18px;
}

@media (min-width: 640px) {
  .lib-faq-a {
    border-width: 0px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32.5px;
    padding-top: 9.5px;
  }
}

.lib-faq-a p {
  font-size: 16.3px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .lib-faq-a p {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    --tw-text-opacity: 1;
    color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  }
}

/* ----------------------------- lab results ---------------------------- */

/* The COA table is one card with a hairline border; the header band is a
     shade off-white and every rule spans the full card width. */

/* border-separate, not collapse: a collapsed rule is shared between the rows
     it divides and so adds no height, which loses 1px of pitch per row. */

.coa-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  text-align: left;
  border-spacing: 0;
}

/* h-48 with border-box = a 47px band plus the 1px rule under it. A `tr` in a
     border-separate table paints its background but never its border, so both
     the tint and the rule have to live on the cells. */

.coa-th {
  height: 48px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(222 222 222 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
  vertical-align: middle;
  font-size: 10.3px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.1237em;
  color: rgb(1 4 11 / 0.55);
}

.coa-cell {
  height: 47px;
  vertical-align: middle;
  font-size: 14.2px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

/* the rule lives on the cells so it spans the full card width; the first
     body row butts against the thead's own darker rule and needs none */

.coa-table tbody tr + tr .coa-cell {
  height: 48px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 237 237 / var(--tw-border-opacity, 1));
}

/* the sort control: a stacked pair of triangles that collapses to a single
     one on the column currently sorted (state lives in th[aria-sort]) */

.coa-sort {
  margin-left: 4px;
  display: inline-flex;
  --tw-translate-y: -1px;
  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));
  vertical-align: middle;
  --tw-text-opacity: 1;
  color: rgb(155 155 160 / var(--tw-text-opacity, 1));
}

.coa-sort .sort-on {
  display: none;
}

[aria-sort] .coa-th-label {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

[aria-sort] .coa-sort {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

[aria-sort] .coa-sort .sort-off {
  display: none;
}

[aria-sort] .coa-sort .sort-on {
  display: block;
}

[aria-sort='descending'] .coa-sort .sort-on {
  transform: rotate(180deg);
}

/* "Identity" / "Purity" test chips: an outlined pill led by a tick */

.coa-pill {
  display: inline-flex;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 7px;
  padding-right: 5.5px;
  font-size: 13px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* "View" / "Verify" links in the COA column */

.coa-action {
  display: inline-flex;
  align-items: center;
  gap: 10.5px;
  white-space: nowrap;
  font-size: 11.9px;
  font-weight: 700;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.coa-action:hover {
  opacity: 0.6;
}

/* the export sets both marks a pixel below the text's optical centre */

.coa-action svg {
  --tw-translate-y: 1px;
  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));
}

/* search field and peptide filter above the table share one shell */

.coa-field {
  display: flex;
  height: 42px;
  align-items: center;
  border-radius: 13px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  font-size: 17px;
  color: rgb(1 4 11 / 0.55);
}

/* ---------------------------------------------------------------------
	   Phones: the table is drawn as one card per batch (lab_resuts_mob.jpg).
	   The header row goes, and each cell prints its own label from data-label
	   — a ::before, so the sort/filter code still reads the bare value out of
	   textContent. Everything here is undone at sm, where the table returns.
	   --------------------------------------------------------------------- */

@media (max-width: 639px) {
  .coa-table,
		.coa-table tbody {
    display: block;
  }

  .coa-table thead,
		.coa-table colgroup {
    display: none;
  }

  .coa-table tr {
    display: grid;
    grid-template-columns: 55% 45%;
    border-radius: 13px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 22px;
    padding-top: 24px;
  }

  .coa-table tr + tr {
    margin-top: 20px;
  }

  .coa-table .coa-cell {
    display: block;
    height: auto;
    border-width: 0px;
    vertical-align: top;
    font-size: 14.2px;
    line-height: 1;
  }

  /* the desktop row rule is more specific than the block above, so it has
		   to be undone by name or every card after the first keeps 48px cells */

  .coa-table tbody tr + tr .coa-cell {
    height: auto;
    border-top-width: 0px;
  }

  /* our real values are longer than the export's "12" placeholder; the pair
		   keeps one line and leans into the card's own padding */

  .coa-cell[data-label] {
    white-space: nowrap;
  }

  .coa-cell[data-label]::before {
    content: attr(data-label);
    margin-right: 8.5px;
    font-size: 10.3px;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.1237em;
    --tw-text-opacity: 1;
    color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  }

  /* name, then the two label rows, the chips and the actions */

  .coa-cell:nth-child(1) {
    grid-column: span 2 / span 2;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
    padding-bottom: 21.5px;
    line-height: 1;
  }

  .coa-cell:nth-child(2),
		.coa-cell:nth-child(3) {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
    padding-bottom: 17px;
    padding-top: 15.5px;
  }

  .coa-cell:nth-child(4),
		.coa-cell:nth-child(5) {
    padding-top: 15.5px;
  }

  .coa-cell:nth-child(6) {
    grid-column: span 2 / span 2;
    padding-top: 16.5px;
  }

  .coa-cell:nth-child(7) {
    grid-column: span 2 / span 2;
    padding-top: 27px;
  }

  /* View is a filled pill, Verify a select-style one */

  .coa-action {
    height: 48px;
    width: 100%;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    font-size: 12.2px;
    font-weight: 500;
  }

  .coa-action[data-coa-view] {
    --tw-bg-opacity: 1;
    background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .coa-action[data-coa-verify] {
    justify-content: space-between;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 13px;
    padding-right: 17.5px;
    font-size: 15.9px;
    font-weight: 400;
    color: rgb(1 4 11 / 0.8);
  }

  /* the lightbox caption's two links become the same pills */

  .coa-action[data-coa-doc-product] {
    --tw-bg-opacity: 1;
    background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
    font-size: 14.2px;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .coa-action[data-coa-doc-verify] {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
    font-size: 14.2px;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  }

  .coa-action[data-coa-doc-product] svg,
		.coa-action[data-coa-doc-verify] svg {
    display: none;
  }

  .coa-action svg {
    --tw-translate-y: 0px;
    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));
  }
}

/* ---- the Verify menu: one element, parked under whichever button opened it -- */

.coa-menu {
  position: fixed;
  z-index: 40;
  width: 157.5px;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 5px;
  --tw-shadow: 0 16px 40px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06);
  --tw-shadow-colored: 0 16px 40px var(--tw-shadow-color), 0 2px 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.coa-menu-item {
  display: flex;
  height: 41px;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 2px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

/* the rule sits between items, and the highlight swallows the one under it */

.coa-menu-item + .coa-menu-item {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
}

.coa-menu-item:hover,
	.coa-menu-item:focus-visible {
  border-radius: 7px;
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.coa-menu-item:hover + .coa-menu-item,
	.coa-menu-item:focus-visible + .coa-menu-item {
  border-color: transparent;
}

/* ---- lightbox paging control: a white slab with a grey disc in it ---------- */

.coa-nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  height: 56px;
  width: 74px;
  --tw-translate-y: -50%;
  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));
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 10px rgba(0,0,0,.10);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.coa-nav:hover {
  opacity: 0.9;
}

.coa-nav:disabled {
  pointer-events: none;
  opacity: 0.4;
}

@media (min-width: 768px) {
  .coa-nav {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.coa-nav-mark {
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* ------------------------------- about -------------------------------- */

/* the header floats over the hero render, and only takes a bar of its own
     once the page has scrolled past it */

[data-header='over'] .site-header {
  background-color: transparent;
  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: 200ms;
}

[data-header='over'][data-scrolled] .site-header {
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / var(--tw-bg-opacity, 1));
}

.ab-crumbs {
  display: flex;
  height: 22px;
  align-items: center;
  gap: 11px;
  font-size: 14.4px;
  color: rgb(255 255 255 / 0.7);
}

.ab-h1 {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ab-h1 {
    font-size: 42px;
    line-height: 46px;
  }
}

@media (min-width: 1024px) {
  .ab-h1 {
    font-size: 50px;
    line-height: 54px;
  }
}

@media (min-width: 1280px) {
  .ab-h1 {
    font-size: 56px;
    line-height: 59px;
  }
}

.ab-hero-sub {
  max-width: 560px;
  font-size: 17px;
  line-height: 20px;
  color: rgb(255 255 255 / 0.7);
}

/* Michroma, a touch larger and less tracked than the site-wide .eyebrow */

.ab-eyebrow {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 11.8px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.0765em;
  --tw-text-opacity: 1;
  color: rgb(155 155 160 / var(--tw-text-opacity, 1));
}

.ab-h2 {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ab-h2 {
    font-size: 36px;
  }
}

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

@media (min-width: 1280px) {
  .ab-h2 {
    font-size: 45.7px;
  }
}

/* the mission statement runs at display size with the eyebrow set into it */

.ab-lead {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ab-lead {
    font-size: 26px;
    line-height: 31px;
  }
}

@media (min-width: 1280px) {
  .ab-lead {
    font-size: 32px;
    line-height: 37px;
  }
}

.ab-lead-mark {
  margin-right: 25px;
  vertical-align: baseline;
}

/* "Why us" stacked cards. --top-offset is set per card by main.js
	   (150px under the 96px fixed header + 40px per card, the staircase). */

.ab-stack-card {
  position: sticky;
  margin-bottom: 40px;
  border-radius: 28px;
  border-top-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 32px;
  padding-top: 35.5px;
}

@media not all and (min-width: 640px) {
  .ab-stack-card {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-top: 24px;
  }
}

.ab-stack-card {
  top: var(--top-offset, 246px);
  transform-origin: 50% 0;
  will-change: transform;
  transition:
			transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
			background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
			border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ab-stack-card:last-child {
  margin-bottom: 0px;
}

/* covered by the next card: sinks into the deck. On this light page "darker" is
	   the export's own peek grey, and the top hairline is ink rather than white. */

.ab-stack-card[data-scaled] {
  transform: scale(0.95);
  border-color: rgb(1 4 11 / 0.06);
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .ab-stack-card {
    transition: none;
  }
}

.ab-step {
  font-size: 42px;
  line-height: 1;
  color: rgb(1 4 11 / 0.3);
}

.ab-card-h {
  font-size: 20px;
  line-height: 24px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* the export breaks this well short of the card edge */

.ab-card-p {
  max-width: 885px;
  font-size: 16.1px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

/* the two headline figures under the COA copy */

/* one of the four proof tiles beside the COA copy */

.ab-proof {
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 228 / var(--tw-bg-opacity, 1));
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 22.75px;
  padding-top: 25px;
}

.ab-proof-mark {
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.ab-proof-h {
  margin-top: 54.75px;
  font-size: 17.7px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.ab-proof-p {
  margin-top: 9.5px;
  font-size: 16.1px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

/* the last row of reviews is a taste of many, so the grid dissolves instead
     of stopping on a hard edge */

/* -------------------------------- blog --------------------------------- */

/* the article-count that trails a topic filter */

.bl-count {
  margin-left: 8px;
  font-size: 15px;
  color: rgb(1 4 11 / 0.55);
}

/* the export sets the *active* filter smaller than the inactive ones — 14.1px
     against 16.4px, confirmed by both ink width and cap height. Reproduced
     rather than normalised; see the open items in CLAUDE.md. */

.bl-filters .lib-chip[aria-current] {
  font-size: 15px;
}

/* ------------------------------- article ------------------------------- */

.ar-hero {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 13 / var(--tw-bg-opacity, 1));
}

@media (max-width: 1024px) {
  .ar-hero {
    height: auto;
  }
}

/* the topic pill sits on the render, so it is a translucent chip, not a solid */

/* Its hairline is a gradient, not a flat stroke: white at the top-left and
     bottom-right, and gone entirely at the top-right and bottom-left, where the
     ring simply stops. Measured off article.jpg and off the user's zoom of it,
     the stroke's alpha follows the direction the edge *faces*, not where it sits
     on the pill - both straight runs hold a flat 0.43 over their whole length
     while each cap sweeps the full pattern. That rules a plain linear-gradient
     out: on a 5:1 pill it would fade along the straight runs (the bottom run
     measured 0.26 to 0.99 under one, against the flat 0.43 drawn). So the ring
     is three background layers - one conic per cap, anchored on that cap's own
     centre, where the compass angle *is* the direction the edge faces, plus a
     flat fill for the straight middle - masked down to the 1px ring exactly the
     way .hero-pill is (see there for why it is a masked ::before, not a border).
     The pattern repeats every 180deg, so one repeating conic serves both caps:
     0deg faces up, 45deg is the dead notch (up-right on the right cap, and its
     twin at 225deg is down-left on the left cap), 135deg the white peak. */

.ar-topic {
  position: relative;
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: transparent;
  background-color: rgb(255 255 255 / 0.06);
  padding-left: 14px;
  padding-right: 14px;
  font-size: 15px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  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;
}

.ar-topic:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.ar-topic::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  --ar-ring:
			rgb(255 255 255 / 0.43) 0deg, rgb(255 255 255 / 0.06) 20deg,
			rgb(255 255 255 / 0.05) 60deg, rgb(255 255 255 / 0.22) 80deg,
			rgb(255 255 255 / 0.47) 90deg, rgb(255 255 255 / 0.68) 105deg,
			rgb(255 255 255 / 0.84) 130deg, rgb(255 255 255 / 0.84) 150deg,
			rgb(255 255 255 / 0.72) 165deg, rgb(255 255 255 / 0.43) 180deg;
  /* 19px is half this box's 38px height, i.e. each cap's own radius, so a
       tile that wide covers exactly one cap and none of the straight run. */
  background:
			repeating-conic-gradient(from 0deg at 100% 50%, var(--ar-ring)) left
				center / 19px 100% no-repeat,
			repeating-conic-gradient(from 0deg at 0% 50%, var(--ar-ring)) right
				center / 19px 100% no-repeat,
			linear-gradient(rgb(255 255 255 / 0.43) 0 0) center / calc(100% - 38px)
				100% no-repeat;
  -webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* same fallback as .hero-pill: with no mask compositing the ring fills in as
     a slab, so drop back to the flat hairline this replaced */

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .ar-topic {
    border-color: rgb(255 255 255 / 0.45);
  }

  .ar-topic::before {
    display: none;
  }
}

/* 48px / 34px is the 1300px export (a one-line title); below xl the title wraps, so it
	   gets a real line height instead of overlapping itself */

.ar-h1 {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 34px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ar-h1 {
    font-size: 38px;
    line-height: 42px;
  }
}

@media (min-width: 1024px) {
  .ar-h1 {
    font-size: 44px;
    line-height: 48px;
  }
}

@media (min-width: 1280px) {
  .ar-h1 {
    font-size: 48px;
    line-height: 34px;
  }
}

.ar-standfirst {
  max-width: 740px;
  font-size: 17px;
  line-height: 19.5px;
  color: rgb(255 255 255 / 0.7);
}

/* the article body is written as plain HTML, so the rhythm lives on the
     elements rather than a class per node */

.ar-prose {
  padding-top: 4.5px;
}

.ar-prose p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 20px;
  color: rgb(1 4 11 / 0.75);
}

.ar-prose p:first-child {
  margin-top: 0px;
}

.ar-prose h2 {
  margin-top: 25.5px;
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 28px;
  line-height: 32px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ar-prose h2 {
    font-size: 34px;
    line-height: 38px;
  }
}

@media (min-width: 1024px) {
  .ar-prose h2 {
    font-size: 42px;
  }
}

.ar-prose h2 + p {
  margin-top: 20.5px;
}

.ar-prose ul {
  margin-top: 24px;
}

.ar-prose ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(14px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(14px * var(--tw-space-y-reverse));
}

.ar-prose li {
  position: relative;
  padding-left: 17px;
  font-size: 16.2px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

.ar-prose li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 6px;
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

.ar-prose a {
  --tw-text-opacity: 1;
  color: rgb(26 109 255 / var(--tw-text-opacity, 1));
}

.ar-prose a:hover {
  text-decoration-line: underline;
}

/* contents rail: one hairline down the list, darkened beside the current item */

.ar-toc {
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 24.5px;
  padding-right: 24.5px;
  padding-bottom: 31px;
  padding-top: 25px;
}

/* one continuous hairline down the list; the current item overlays its own
     segment of it in ink, so the bar is exactly one line tall */

/* a heading scrolled to (contents link or #hash) stops below the 96px fixed header */

.ar-prose :is(h1, h2) {
  scroll-margin-top: 120px;
}

.ar-toc[hidden] {
  display: none;
}

.ar-toc-list {
  margin-top: 21.5px;
}

.ar-toc-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.ar-toc-list {
  border-left-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
}

.ar-toc-list a {
  margin-left: -1px;
  display: block;
  border-left-width: 1px;
  border-color: transparent;
  padding-left: 12.5px;
  font-size: 16.5px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.ar-toc-list a:hover {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.ar-toc-list a[aria-current] {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.card {
  border-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.\!section {
  margin-top: 120px;
}

.section {
  margin-top: 120px;
}

/* ------------------------------ form shell ------------------------------ */

/* Shared by checkout and the three auth pages — the exports draw the same
     32px-padded white card, 23px/500 heading, 12px label and 41px field on
     both, so they stay one vocabulary rather than a per-page fork. */

.form-card {
  border-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 32px;
}

.form-h {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.form-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 13px;
  line-height: 1;
  color: rgb(1 4 11 / 0.55);
}

/* the 4px of bottom padding is what lifts the value off the field's optical
     centre — the browser centres it in the content box, which the exports do
     not: they sit it ~2px high inside the same 41px shell */

.form-input {
  height: 42px;
  width: 100%;
  border-radius: 13px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 4px;
  font-size: 17px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

.form-input::-moz-placeholder {
  color: rgb(1 4 11 / 0.55);
}

.form-input::placeholder {
  color: rgb(1 4 11 / 0.55);
}

/* consent checkbox: a rounded square that fills in rather than drawing a
     tick, so the checked state reads at 16px without a glyph */

.form-check {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 19px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.form-box {
  margin-top: 4.5px;
  display: flex;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border-width: 1.5px;
  --tw-border-opacity: 1;
  border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
}

.form-box::after {
  height: 10px;
  width: 10px;
  border-radius: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}

.form-check:has(input:checked) .form-box {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.form-check:has(input:checked) .form-box::after {
  opacity: 1;
}

/* -------------------------------- checkout ------------------------------ */

/* delivery / payment radio row: a fixed 74px shell with the dot and the copy
     centred in it. The ring only thickens once checked. */

.co-opt {
  display: flex;
  height: 72px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
  padding-left: 15px;
  padding-right: 16px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.co-opt:has(input:checked) {
  border-width: 1.5px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  padding-left: 14.5px;
}

.co-opt:has(input:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

/* the export sits the dot 2px above the copy's centre */

.co-dot {
  position: relative;
  display: flex;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  --tw-translate-y: -2px;
  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));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1.5px;
  border-color: currentColor;
}

.co-dot::after {
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}

.co-opt:has(input:checked) .co-dot::after {
  opacity: 1;
}

.co-opt-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* the export sets the lone disabled title a touch above centre */

.co-opt:has(input:disabled) .co-opt-title {
  --tw-translate-y: -1.5px;
  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));
}

.co-opt-sub {
  margin-top: 0.25rem;
  font-size: 15px;
  line-height: 18px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* an emirate select keeps its hairline while open, since it sits on a white card
	   (checkout and the cabinet address form) */

.form-select.form-select[data-select][data-open] > button {
  border-color: rgb(1 4 11 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* order summary line item */

.co-line-name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: rgb(1 4 11 / 0.8);
}

.co-line-sub {
  margin-top: 10.5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: rgb(1 4 11 / 0.55);
}

/* totals: a rule under every row, Total included */

/* checkout_mob.jpg stacks each total - label, then the value under it, both
     left-aligned - where the desktop export puts them on one line */

.co-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  padding-bottom: 24px;
  padding-top: 24.5px;
  font-size: 17.5px;
  line-height: 1;
}

@media (min-width: 640px) {
  .co-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0px;
    padding-bottom: 19px;
    padding-top: 24.5px;
  }
}

.co-row:first-child {
  padding-top: 27px;
}

@media (min-width: 640px) {
  .co-row:first-child {
    padding-top: 16.5px;
  }
}

/* the mobile export draws no rule under Total; the desktop one does */

.co-row:last-child {
  border-bottom-width: 0px;
}

@media (min-width: 640px) {
  .co-row:last-child {
    border-bottom-width: 1px;
  }
}

.co-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 12px;
}

@media (min-width: 640px) {
  .co-trust-row {
    height: 16px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.co-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.2px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* ----------------------------- personal cabinet ------------------------- */

/* The five cabinet exports share one shell: a fixed 269px sidebar and a
     content pane, both starting at the same y. The sidebar is a fixed 580px
     tall (its Log out sits at the bottom of that, not of the content), and the
     pane only ever grows past it — hence min-height rather than a stretch. */

.acc-pane {
  border-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  display: flex;
  flex-direction: column;
  padding: 24px;
}

@media (min-width: 1024px) {
  .acc-pane {
    min-height: 580px;
    padding: 32px;
  }
}

/* Phones (cabinet_*_mob.jpg): the sidebar nav is a one-line chip rail on the
     page ground, with the library rail's 26px arrow. lg: puts the white card
     column back, untouched. */

.acc-rail {
  position: relative;
}

.acc-rail-fade {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 64px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(240 240 240 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 240 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #f0f0f0 var(--tw-gradient-to-position);
  --tw-gradient-to-position: 55%;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 1024px) {
  .acc-rail-fade {
    display: none;
  }
}

.acc-rail-next {
  position: absolute;
  right: 8px;
  top: 50%;
  display: flex;
  height: 26px;
  width: 26px;
  --tw-translate-y: -50%;
  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));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 1024px) {
  .acc-rail-next {
    display: none;
  }
}

.acc-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
  padding-right: 34px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.acc-nav::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .acc-nav {
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0px;
    overflow: visible;
    border-radius: 17px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 12px;
    padding-right: 12px;
  }
}

.acc-nav-item {
  display: flex;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: rgb(1 4 11 / 0.05);
  padding-left: 14px;
  padding-right: 14px;
  font-size: 17px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.acc-nav-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .acc-nav-item {
    height: 42px;
    gap: 10px;
    border-radius: 10px;
    background-color: transparent;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
  }

  .acc-nav-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 249 / var(--tw-bg-opacity, 1));
  }
}

.acc-nav-item[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.acc-nav-item[aria-current]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .acc-nav-item[aria-current] {
    background-color: rgb(1 4 11 / 0.05);
    --tw-text-opacity: 1;
    color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  }

  .acc-nav-item[aria-current]:hover {
    background-color: rgb(1 4 11 / 0.05);
  }
}

.acc-logout {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.acc-logout:hover {
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .acc-logout {
    font-weight: 500;
  }
}

/* Order / address row. From sm up it is the export's one 81px bordered shell
     with the action on the right; on phones cabinet_orders_mob.jpg stacks it
     into label/value rows 48px tall with a hairline between them, so the shell
     carries no vertical padding of its own and each row owns its height. */

.acc-row {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 23.5px;
}

@media (min-width: 640px) {
  .acc-row {
    height: 81px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

.acc-row-grp {
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .acc-row-grp {
    width: 145px;
    flex-shrink: 0;
  }
}

.acc-row-id {
  display: flex;
  height: 61.5px;
  align-items: center;
  border-bottom-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .acc-row-id {
    height: auto;
    border-width: 0px;
  }
}

.acc-row-cell {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 13px;
  border-bottom-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
}

@media (min-width: 640px) {
  .acc-row-cell {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    border-width: 0px;
  }
}

/* the export draws no rule under the last pair */

.acc-row-cell-last {
  border-bottom-width: 0px;
}

.acc-row-act {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .acc-row-act {
    display: contents;
  }
}

/* the grey counterpart to .btn-dark used for every cabinet action */

.acc-pill {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.acc-pill:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}

.acc-row-label {
  flex-shrink: 0;
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgb(1 4 11 / 0.55);
}

@media (max-width: 1024px) {
  .acc-row-label {
    font-family: Akzidenz-Grotesk, Helvetica Neue, Arial, sans-serif;
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  .acc-row-label {
    font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: none;
    letter-spacing: 0em;
  }
}

.acc-row-value {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (max-width: 1024px) {
  .acc-row-value {
    font-weight: 400;
  }
}

@media (min-width: 640px) {
  .acc-row-value {
    margin-top: 9px;
    display: block;
  }
}

.acc-row-status {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255,56,60,0.9);
}

@media (max-width: 1024px) {
  .acc-row-status {
    font-size: 15px;
    font-weight: 400;
  }
}

@media (min-width: 640px) {
  .acc-row-status {
    margin-top: 0.75rem;
    display: block;
  }
}

/* order detail list: label left, bold value right, hairline between rows */

.acc-dl-row {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
}

@media (min-width: 640px) {
  .acc-dl-row {
    height: auto;
    align-items: baseline;
    padding-top: 17px;
    padding-bottom: 17px;
  }
}

/* cabinet_orders_item_mob.jpg rules the block top as well as every row */

.acc-dl {
  border-top-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
}

@media (min-width: 640px) {
  .acc-dl {
    border-top-width: 0px;
  }
}

.acc-dt {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgb(1 4 11 / 0.55);
}

@media (max-width: 1024px) {
  .acc-dt {
    font-family: Akzidenz-Grotesk, Helvetica Neue, Arial, sans-serif;
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  .acc-dt {
    font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0em;
  }
}

.acc-dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .acc-dd {
    font-size: 17px;
  }
}

/* order-detail item card: the name owns a 61.5px row with a rule under it,
     then the count and the price share a 57.5px row */

.acc-item-name {
  display: flex;
  height: 61.5px;
  align-items: center;
  border-bottom-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .acc-item-name {
    height: auto;
    border-width: 0px;
  }
}

.acc-item-count {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgb(1 4 11 / 0.55);
}

@media (max-width: 1024px) {
  .acc-item-count {
    font-family: Akzidenz-Grotesk, Helvetica Neue, Arial, sans-serif;
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  .acc-item-count {
    font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0em;
  }
}

.acc-item-foot {
  display: flex;
  height: 57.5px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 12px;
}

@media (min-width: 640px) {
  .acc-item-foot {
    margin-top: 0.75rem;
    height: auto;
    align-items: baseline;
    padding-bottom: 0px;
  }
}

/* ---------------------------- info / legal page ------------------------- */

/* A prose template, so the rules hang off element selectors rather than a
     class per node — whoever writes the real policy copy writes plain
     h2/p/ul/li and the export's rhythm comes for free. */

.pol > * + * {
  margin-top: 15px;
}

.pol h1 {
  font-size: 31.7px;
  line-height: 35px;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .pol h1 {
    font-size: 42px;
    line-height: 46px;
  }
}

@media (min-width: 1280px) {
  .pol h1 {
    font-size: 54.4px;
    line-height: 59px;
  }
}

.pol h2 {
  margin-top: 23.5px;
  font-size: 24.5px;
  line-height: 28px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .pol h2 {
    margin-top: 26px;
    font-size: 34px;
    line-height: 38px;
  }
}

@media (min-width: 1280px) {
  .pol h2 {
    font-size: 40.1px;
    line-height: 42px;
  }
}

.pol p {
  font-size: 17px;
  line-height: 20px;
  color: rgb(1 4 11 / 0.8);
}

.pol h2 + p {
  margin-top: 11px;
}

@media (min-width: 640px) {
  .pol h2 + p {
    margin-top: 20px;
  }
}

.pol ul {
  margin-top: 23.5px;
}

.pol ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(14px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(14px * var(--tw-space-y-reverse));
}

/* the marker is a real dot rather than list-disc so its size and the gap to
     the text are both measurable */

.pol li {
  position: relative;
  padding-left: 17px;
  font-size: 16.2px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

.pol li::before {
  position: absolute;
  left: 0px;
  top: 6px;
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

/* ---- the rest of the WordPress / Gutenberg vocabulary --------------------
	   Shared by .pol (policy) and .ar-prose (the article body): one selector list, so a
	   block styled for one is styled for the other. h1, h2, p, ul and the dot above are
	   measured off policy.jpg; everything
	   below has no mockup and extends that scale, so any block the editor emits
	   (core/heading, list, quote, pullquote, table, image, separator, code,
	   preformatted, details, buttons, columns, embed, file) lands styled. */

:is(.pol, .ar-prose) h3,
	:is(.pol, .ar-prose) h4,
	:is(.pol, .ar-prose) h5,
	:is(.pol, .ar-prose) h6 {
  margin-top: 24px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) h3 {
  font-size: 22px;
  line-height: 26px;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) h3 {
    font-size: 26px;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  :is(.pol, .ar-prose) h3 {
    font-size: 30px;
    line-height: 34px;
  }
}

:is(.pol, .ar-prose) h4 {
  font-size: 19px;
  line-height: 24px;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) h4 {
    font-size: 21px;
    line-height: 26px;
  }
}

@media (min-width: 1280px) {
  :is(.pol, .ar-prose) h4 {
    font-size: 23px;
    line-height: 28px;
  }
}

:is(.pol, .ar-prose) h5 {
  font-size: 17px;
  line-height: 22px;
}

@media (min-width: 1280px) {
  :is(.pol, .ar-prose) h5 {
    font-size: 18px;
  }
}

:is(.pol, .ar-prose) h6 {
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 11.8px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 16px;
  letter-spacing: 0.0765em;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) :is(h3, h4, h5, h6) + p {
  margin-top: 12px;
}

:is(.pol, .ar-prose) :is(h1, h2, h3, h4, h5, h6) + :is(ul, ol) {
  margin-top: 16px;
}

/* inline */

.pol a {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgb(1 4 11 / 0.3);
  text-underline-offset: 3px;
  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;
}

.pol a:hover {
  text-decoration-color: rgb(1, 4, 11);
}

:is(.pol, .ar-prose) :is(strong, b) {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) :is(em, i, cite) {
  font-style: italic;
}

:is(.pol, .ar-prose) mark {
  border-radius: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 168 / var(--tw-bg-opacity, 1));
  padding-left: 2px;
  padding-right: 2px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) :is(code, kbd, samp) {
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88em;
}

:is(.pol, .ar-prose) kbd {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
}

:is(.pol, .ar-prose) :is(sub, sup) {
  font-size: 0.75em;
  line-height: 1;
}

:is(.pol, .ar-prose) small {
  font-size: 0.875em;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) abbr[title] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

:is(.pol, .ar-prose) :is(s, del) {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

/* lists: ol numbers replace the dot, and both nest */

:is(.pol, .ar-prose) ol {
  margin-top: 23.5px;
}

:is(.pol, .ar-prose) ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(14px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(14px * var(--tw-space-y-reverse));
}

:is(.pol, .ar-prose) ol {
  counter-reset: pol-ol;
}

:is(.pol, .ar-prose) ol > li {
  counter-increment: pol-ol;
  padding-left: 26px;
}

:is(.pol, .ar-prose) ol > li::before {
  top: 0px;
  height: auto;
  width: auto;
  border-radius: 0px;
  background-color: transparent;
  font-size: 16.2px;
  font-weight: 500;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  content: counter(pol-ol) '.';
}

:is(.pol, .ar-prose) li > :is(ul, ol) {
  margin-top: 12px;
}

:is(.pol, .ar-prose) li > :is(ul, ol) > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(10px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(10px * var(--tw-space-y-reverse));
}

/* a bullet list nested in any list gets a ring instead of a dot */

:is(.pol, .ar-prose) li > ul > li::before {
  top: 7px;
  height: 6px;
  width: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  background-color: transparent;
}

:is(.pol, .ar-prose) dl {
  margin-top: 23.5px;
  display: grid;
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 10px;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) dl {
    grid-template-columns: minmax(0,200px) 1fr;
  }
}

:is(.pol, .ar-prose) dt {
  font-size: 16.2px;
  font-weight: 500;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) dd {
  font-size: 16.2px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

/* alignment and size classes the editor puts on any block */

:is(.pol, .ar-prose) .has-text-align-left {
  text-align: left;
}

:is(.pol, .ar-prose) .has-text-align-center {
  text-align: center;
}

:is(.pol, .ar-prose) .has-text-align-right {
  text-align: right;
}

:is(.pol, .ar-prose) .has-small-font-size {
  font-size: 14px;
  line-height: 18px;
}

:is(.pol, .ar-prose) .has-medium-font-size {
  font-size: 18px;
  line-height: 24px;
}

:is(.pol, .ar-prose) .has-large-font-size {
  font-size: 22px;
  line-height: 28px;
}

:is(.pol, .ar-prose) .has-x-large-font-size {
  font-size: 28px;
  line-height: 34px;
}

:is(.pol, .ar-prose) .has-drop-cap {
  display: flow-root;
}

:is(.pol, .ar-prose) .has-drop-cap::first-letter {
  float: left;
  margin-right: 8px;
  margin-top: 2px;
  font-size: 64px;
  font-weight: 500;
  line-height: 0.85;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* quote / pullquote */

:is(.pol, .ar-prose) blockquote {
  margin-top: 28px;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 20px;
}

:is(.pol, .ar-prose) blockquote p {
  font-size: 20px;
  line-height: 26px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) blockquote > * + * {
  margin-top: 12px;
}

:is(.pol, .ar-prose) blockquote cite,
	:is(.pol, .ar-prose) .wp-block-pullquote cite {
  margin-top: 12px;
  display: block;
  font-size: 14px;
  font-style: normal;
  line-height: 18px;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) .wp-block-pullquote {
  margin-top: 32px;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) .wp-block-pullquote {
    padding-left: 48px;
    padding-right: 48px;
  }
}

:is(.pol, .ar-prose) .wp-block-pullquote blockquote {
  margin-top: 0px;
  border-width: 0px;
  padding: 0px;
}

:is(.pol, .ar-prose) .wp-block-pullquote p {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) .wp-block-pullquote p {
    font-size: 28px;
    line-height: 34px;
  }
}

/* media */

:is(.pol, .ar-prose) figure {
  margin-top: 28px;
}

:is(.pol, .ar-prose) :is(img, video) {
  height: auto;
  max-width: 100%;
  border-radius: 14px;
}

:is(.pol, .ar-prose) :is(iframe, embed) {
  max-width: 100%;
  border-radius: 14px;
}

:is(.pol, .ar-prose) .wp-block-embed__wrapper iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

:is(.pol, .ar-prose) figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 18px;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

:is(.pol, .ar-prose) .aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

:is(.pol, .ar-prose) .alignleft {
  margin-bottom: 12px;
  margin-right: 24px;
  margin-top: 6px;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) .alignleft {
    float: left;
    max-width: 50%;
  }
}

:is(.pol, .ar-prose) .alignright {
  margin-bottom: 12px;
  margin-left: 24px;
  margin-top: 6px;
}

@media (min-width: 640px) {
  :is(.pol, .ar-prose) .alignright {
    float: right;
    max-width: 50%;
  }
}

:is(.pol, .ar-prose)::after {
  clear: both;
  display: table;
  --tw-content: '';
  content: var(--tw-content);
}

/* table: the same white card + hairline rules as the site's COA table */

:is(.pol, .ar-prose) table {
  margin-top: 28px;
  width: 100%;
  border-collapse: separate;
  overflow: hidden;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: left;
  font-size: 15px;
  line-height: 20px;
  border-spacing: 0;
}

:is(.pol, .ar-prose) figure.wp-block-table {
  overflow-x: auto;
}

:is(.pol, .ar-prose) figure.wp-block-table table {
  margin-top: 0px;
}

:is(.pol, .ar-prose) :is(th, td) {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  vertical-align: top;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) thead th,
	:is(.pol, .ar-prose) tfoot td {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 10.3px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 16px;
  letter-spacing: 0.1237em;
  color: rgb(1 4 11 / 0.55);
}

:is(.pol, .ar-prose) thead th {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(222 222 222 / var(--tw-border-opacity, 1));
}

:is(.pol, .ar-prose) tbody tr + tr td,
	:is(.pol, .ar-prose) tbody tr + tr th {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 237 237 / var(--tw-border-opacity, 1));
}

:is(.pol, .ar-prose) tfoot td {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(222 222 222 / var(--tw-border-opacity, 1));
}

:is(.pol, .ar-prose) tbody th {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) .is-style-stripes tbody tr:nth-child(odd) :is(td, th) {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

:is(.pol, .ar-prose) .wp-block-table figcaption {
  text-align: center;
}

/* separator */

:is(.pol, .ar-prose) hr {
  margin-top: 36px;
  margin-bottom: 36px;
  border-width: 0px;
  border-top-width: 1px;
  border-color: rgb(1 4 11 / 0.1);
}

:is(.pol, .ar-prose) hr.is-style-wide {
  width: 100%;
}

:is(.pol, .ar-prose)
		hr:not(.is-style-wide):not(.is-style-dots).wp-block-separator {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

:is(.pol, .ar-prose) hr.is-style-dots {
  height: auto;
  border-width: 0px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1em;
  color: rgb(1 4 11 / 0.4);
}

:is(.pol, .ar-prose) hr.is-style-dots::before {
  content: '\00B7\00B7\00B7';
}

/* code / preformatted / verse */

:is(.pol, .ar-prose) pre {
  margin-top: 24px;
  overflow-x: auto;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 21px;
  color: rgb(255 255 255 / 0.9);
}

:is(.pol, .ar-prose) pre code {
  background-color: transparent;
  padding: 0px;
  font-size: 1em;
  color: inherit;
}

:is(.pol, .ar-prose) .wp-block-preformatted,
	:is(.pol, .ar-prose) .wp-block-verse {
  white-space: pre-wrap;
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 16.2px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

/* details (core/details) */

:is(.pol, .ar-prose) details {
  margin-top: 20px;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

:is(.pol, .ar-prose) summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

:is(.pol, .ar-prose) summary::-webkit-details-marker {
  display: none;
}

:is(.pol, .ar-prose) summary::after {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-content: '+';
  content: var(--tw-content);
}

:is(.pol, .ar-prose) details[open] summary::after {
  --tw-rotate: 45deg;
  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));
}

:is(.pol, .ar-prose) details > :not(summary) {
  margin-top: 12px;
}

/* buttons (core/buttons) */

:is(.pol, .ar-prose) .wp-block-buttons {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:is(.pol, .ar-prose) .wp-block-buttons.is-content-justification-center {
  justify-content: center;
}

:is(.pol, .ar-prose) .wp-block-buttons.is-content-justification-right {
  justify-content: flex-end;
}

:is(.pol, .ar-prose) .wp-block-button__link {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 13 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

:is(.pol, .ar-prose) .wp-block-button__link:hover {
  opacity: 0.8;
}

:is(.pol, .ar-prose) .is-style-outline .wp-block-button__link {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

/* file download (core/file) */

:is(.pol, .ar-prose) .wp-block-file {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

:is(.pol, .ar-prose) .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  height: 40px;
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 13 / var(--tw-bg-opacity, 1));
  padding-left: 18px;
  padding-right: 18px;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

/* columns / group */

:is(.pol, .ar-prose) .wp-block-columns {
  margin-top: 28px;
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  :is(.pol, .ar-prose) .wp-block-columns {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

:is(.pol, .ar-prose) .wp-block-column > :first-child,
	:is(.pol, .ar-prose) .wp-block-group > :first-child,
	:is(.pol, .ar-prose) blockquote > :first-child {
  margin-top: 0px;
}

:is(.pol, .ar-prose) .wp-block-column > * + *,
	:is(.pol, .ar-prose) .wp-block-group > * + * {
  margin-top: 15px;
}

:is(.pol, .ar-prose) .wp-block-group.has-background {
  border-radius: 20px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* --------------------------- footer legal prose -------------------------- */

/* Same idea as .pol above - element selectors, not a class per node - so
     whoever edits the footer's disclaimer can drop in plain p / h1-h6 / ul /
     ol / li with no classes. Scale is this block's own (15px/18px, muted),
     not .pol's page-template scale: there's no mockup for footer headings or
     lists, this is dev-convenience for whatever copy lands here next rather
     than a measured design. */

.footer-legal {
  font-size: 15px;
  line-height: 18px;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.footer-legal > * + * {
  margin-top: 18px;
}

.footer-legal h1,
	.footer-legal h2,
	.footer-legal h3,
	.footer-legal h4,
	.footer-legal h5,
	.footer-legal h6 {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.footer-legal h1 {
  font-size: 18px;
  line-height: 22px;
}

.footer-legal h2 {
  font-size: 17px;
  line-height: 21px;
}

.footer-legal h3,
	.footer-legal h4,
	.footer-legal h5,
	.footer-legal h6 {
  font-size: 15px;
  line-height: 18px;
}

.footer-legal ul > :not([hidden]) ~ :not([hidden]),
	.footer-legal ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8px * var(--tw-space-y-reverse));
}

.footer-legal li {
  position: relative;
  padding-left: 15px;
}

.footer-legal ul li::before {
  position: absolute;
  left: 0px;
  top: 6px;
  height: 5px;
  width: 5px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(108 109 113 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

.footer-legal ol {
  counter-reset: footer-legal;
}

.footer-legal ol li {
  counter-increment: footer-legal;
}

.footer-legal ol li::before {
  position: absolute;
  left: 0px;
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
  content: counter(footer-legal) '.';
}

.footer-legal a {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.footer-legal a:hover {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

/* ------------------------- editor content (WP-safe) ---------------------- */

/* Same element-selector idea as .pol/.footer-legal above, scoped to the
     product description card's own type (16px/20px body, 20px/22px h2). The
     card currently ships one fixed h2 + p + ul + p, hand-classed per node;
     this scope is what lets that same card take arbitrary Gutenberg block
     output later (any mix/order of h1-h6, p, ul, ol, li, a) with zero classes
     in the markup, the same way a real WP theme's post content works. */

/* product_mob.jpg sets this card's body at the site's mobile body size
     (16.3px on the same 20px leading); product.jpg's 17px comes back at sm.
     Size only at sm, so the leading above still holds. */

.editor-content {
  font-size: 16.2px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .editor-content {
    font-size: 17px;
  }
}

.editor-content > * + * {
  margin-top: 1.5rem;
}

/* a heading immediately followed by a paragraph sits tighter than the
     block-to-block rhythm above - matches the description card's own
     heading-to-intro gap */

.editor-content h1 + p,
	.editor-content h2 + p,
	.editor-content h3 + p,
	.editor-content h4 + p,
	.editor-content h5 + p,
	.editor-content h6 + p {
  margin-top: 10px;
}

/* a paragraph closing out a list (the card's own disclaimer line) gets a
     little extra air, same as .pol's h2 + p treatment */

.editor-content ul + p,
	.editor-content ol + p {
  margin-top: 26px;
}

.editor-content h1,
	.editor-content h2,
	.editor-content h3,
	.editor-content h4,
	.editor-content h5,
	.editor-content h6 {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.editor-content h1 {
  font-size: 24px;
  line-height: 28px;
}

.editor-content h2 {
  font-size: 20px;
  line-height: 22px;
}

.editor-content h3,
	.editor-content h4,
	.editor-content h5,
	.editor-content h6 {
  font-size: 17px;
  line-height: 20px;
}

.editor-content ul > :not([hidden]) ~ :not([hidden]),
	.editor-content ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.editor-content li {
  position: relative;
  padding-left: 17px;
}

/* a real dot rather than list-disc, matching .pol/.footer-legal so the
     marker's size and gap to the text are both measurable */

.editor-content ul li::before {
  position: absolute;
  left: 0px;
  top: 6px;
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

.editor-content ol {
  counter-reset: editor-content;
}

.editor-content ol li {
  counter-increment: editor-content;
}

.editor-content ol li::before {
  position: absolute;
  left: 0px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  content: counter(editor-content) '.';
}

.editor-content a {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.editor-content a:hover {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

/* ------------------------------ calculator ------------------------------
     calculator_1-4.jpg. One white card: a 446px form column and the grey
     result panel. The panel stretches to the form's height, with a floor per
     mode (the vial export is exactly as tall as its form, the other three
     draw a 572px panel). */

.calc {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

@media (min-width: 640px) {
  .calc {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .calc {
    display: grid;
    grid-template-columns: 446px minmax(0,1fr);
    gap: 32px;
    padding-bottom: 26px;
    padding-left: 32px;
    padding-right: 24px;
    padding-top: 24px;
  }
}

[data-calc] [data-calc-show][hidden] {
  display: none !important;
}

.calc-form {
  min-width: 0px;
}

@media (min-width: 1024px) {
  .calc-form {
    padding-top: 8px;
  }
}

.calc-tab {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  padding-left: 14px;
  padding-right: 14px;
  font-size: 16.6px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.calc-tab:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity, 1));
}

.calc-tab[aria-pressed='true'] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.calc-block {
  margin-top: 21.5px;
}

.calc-label {
  margin-bottom: 8px;
  display: block;
  font-size: 12.4px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

.calc-select {
  position: relative;
}

.calc-field {
  display: block;
  height: 42px;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 16.3px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-field::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

.calc-field::placeholder {
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

.calc-field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.calc-num {
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

/* a text input centres its line a few px low against the export; the
     selects' button triggers already sit right */

input.calc-field,
	output.calc-field {
  padding-bottom: 5px;
}

.calc-num:focus {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-chip {
  display: inline-flex;
  height: 42px;
  align-items: center;
  border-radius: 12px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 13px;
  padding-right: 13px;
  font-size: 16.3px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-chip::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

.calc-chip::placeholder {
  --tw-text-opacity: 1;
  color: rgb(112 113 117 / var(--tw-text-opacity, 1));
}

.calc-chip:hover {
  border-color: rgb(1 4 11 / 0.4);
}

.calc-chip:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.calc-chip[aria-pressed='true'],
	input.calc-chip:focus,
	input.calc-chip[data-active] {
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.calc-note {
  display: flex;
  min-height: 40px;
  align-items: center;
  border-radius: 12px;
  background-color: rgba(141,142,145,0.06);
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13.55px;
  line-height: 16px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-add {
  display: flex;
  height: 36px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  font-size: 14.6px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.calc-add:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .calc-add {
    width: 407px;
  }
}

.calc-part {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-part-remove {
  display: flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-part-remove:hover {
  opacity: 0.6;
}

.calc-convert {
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr);
  align-items: center;
}

.calc-convert-labelled {
  align-items: flex-end;
}

.calc-sign {
  justify-self: center;
  font-size: 18px;
  line-height: 1;
  color: rgb(1 4 11 / 0.8);
}

.calc-convert-labelled .calc-sign {
  margin-bottom: 15px;
}

.calc-panel {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 32px;
  padding-top: 33px;
  text-align: center;
}

@media (min-width: 640px) {
  .calc-panel {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  [data-calc][data-mode='vial'] .calc-panel {
    min-height: 436px;
  }

  [data-calc]:not([data-mode='vial']) .calc-panel {
    min-height: 572px;
  }

  /* the taller blend panel keeps its syringe high rather than centred */

  [data-calc][data-mode='blend'] .calc-syringe {
    margin-bottom: 81px;
  }
}

.calc-caption,
	.calc-sub {
  font-size: 14.5px;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(97 101 104 / var(--tw-text-opacity, 1));
}

.calc-result {
  margin-top: 15.5px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.calc-big {
  font-size: 67.5px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.calc-unit {
  font-size: 39px;
  line-height: 1;
}

.calc-sub {
  margin-top: 20.5px;
}

.calc-visual {
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}

.calc-syringe {
  margin-bottom: 39px;
  margin-top: 13px;
  height: auto;
  width: 100%;
  max-width: 521px;
  overflow: visible;
}

.calc-pen {
  margin-bottom: 22px;
  margin-left: 4px;
  height: auto;
  width: 100%;
  max-width: 463px;
  overflow: visible;
}

.calc-bottle {
  margin-bottom: 1.5rem;
  margin-top: 32px;
  height: auto;
  width: 83px;
  overflow: visible;
}

.calc-pen-digits {
  fill: #fff;
  font-family: Michroma, Eurostile, sans-serif;
  font-size: 13px;
}

.calc-scale-label {
  fill: #686b70;
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
  font-size: 11px;
}

.calc-syringes {
  display: flex;
  gap: 12px;
}

.calc-u {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 14px;
  padding-right: 14px;
  font-size: 16.7px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.calc-u:hover {
  background-color: rgb(255 255 255 / 0.6);
}

.calc-u[aria-pressed='true'] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.calc-foot {
  margin-top: 21.5px;
  font-size: 13px;
  line-height: 15px;
  color: rgb(1 4 11 / 0.55);
}

@media (min-width: 1024px) {
  .calc-foot {
    line-height: 1;
  }
}

/* the white fill every other custom select takes while open would erase
     this one's border on the white card */

.calc-select[data-select][data-open] > button {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* ---- the phone bottom sheet, off dropdown.jpg ----
     The page dims and blurs first, then the sheet slides up; closing runs the
     two in the other order, which is what the delays below do. */

.sel-sheet {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .sel-sheet {
    display: none;
  }
}

/* A closed sheet is display:none, but say it twice: an invisible full-screen
     scrim that still takes clicks is silent and total, and this file's layer
     order has bitten that way before (see the note above @layer utilities). */

.sel-sheet:not([data-open]) {
  pointer-events: none;
}

.sel-sheet[data-open] {
  pointer-events: auto;
}

.sel-scrim {
  position: absolute;
  inset: 0px;
  background-color: rgb(0 0 0 / 0.4);
  opacity: 0;
  --tw-backdrop-blur: blur(64px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.sel-sheet[data-open] .sel-scrim {
  opacity: 1;
}

/* closing: the dim holds until the sheet has gone */

.sel-sheet:not([data-open]) .sel-scrim {
  transition-delay: 200ms;
}

.sel-panel {
  position: relative;
  max-height: 85%;
  --tw-translate-y: 100%;
  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));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.sel-sheet[data-open] .sel-panel {
  --tw-translate-y: 0px;
  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));
  transition-delay: 150ms;
}

.sel-head {
  display: flex;
  height: 74px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
  padding-left: 24px;
  padding-right: 24px;
}

.sel-title {
  font-size: 21px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.sel-close {
  display: flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.sel-close:hover {
  opacity: 0.7;
}

.sel-opt {
  display: flex;
  height: 67px;
  width: 100%;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.sel-opt + .sel-opt {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .sel-scrim,
		.sel-panel {
    transition-property: none;
    transition-delay: 0s;
  }
}

.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;
}

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

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

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

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

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

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

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

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

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

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

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

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

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

.right-0 {
  right: 0px;
}

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

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

.right-\[17\.5px\] {
  right: 17.5px;
}

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

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

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

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

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

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

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

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

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

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

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

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

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

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

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

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

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

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-first {
  order: -9999;
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

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

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

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-\[10px\] {
  margin-left: 10px;
  margin-right: 10px;
}

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

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

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-\[2px\] {
  margin-left: -2px;
}

.-ml-\[4px\] {
  margin-left: -4px;
}

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

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

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

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

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

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

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

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

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-\[1\.5px\] {
  margin-left: 1.5px;
}

.ml-\[12px\] {
  margin-left: 12px;
}

.ml-\[5px\] {
  margin-left: 5px;
}

.ml-\[7px\] {
  margin-left: 7px;
}

.ml-auto {
  margin-left: auto;
}

.mr-\[10px\] {
  margin-right: 10px;
}

.mr-\[4px\] {
  margin-right: 4px;
}

.mr-\[5\.5px\] {
  margin-right: 5.5px;
}

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

.mt-1 {
  margin-top: 0.25rem;
}

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

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

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

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

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

.mt-\[10\.5px\] {
  margin-top: 10.5px;
}

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

.mt-\[11\.5px\] {
  margin-top: 11.5px;
}

.mt-\[111\.5px\] {
  margin-top: 111.5px;
}

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

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

.mt-\[12\.5px\] {
  margin-top: 12.5px;
}

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

.mt-\[13\.5px\] {
  margin-top: 13.5px;
}

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

.mt-\[14\.5px\] {
  margin-top: 14.5px;
}

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

.mt-\[15\.5px\] {
  margin-top: 15.5px;
}

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

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

.mt-\[16\.5px\] {
  margin-top: 16.5px;
}

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

.mt-\[17\.5px\] {
  margin-top: 17.5px;
}

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

.mt-\[18\.5px\] {
  margin-top: 18.5px;
}

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

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

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

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

.mt-\[2\.5px\] {
  margin-top: 2.5px;
}

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

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

.mt-\[22\.5px\] {
  margin-top: 22.5px;
}

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

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

.mt-\[23\.5px\] {
  margin-top: 23.5px;
}

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

.mt-\[24\.5px\] {
  margin-top: 24.5px;
}

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

.mt-\[25\.5px\] {
  margin-top: 25.5px;
}

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

.mt-\[26\.5px\] {
  margin-top: 26.5px;
}

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

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

.mt-\[29\.5px\] {
  margin-top: 29.5px;
}

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

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

.mt-\[31\.5px\] {
  margin-top: 31.5px;
}

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

.mt-\[32\.5px\] {
  margin-top: 32.5px;
}

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

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

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

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

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

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

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

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

.mt-\[41\.5px\] {
  margin-top: 41.5px;
}

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

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

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

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

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

.mt-\[56\.5px\] {
  margin-top: 56.5px;
}

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

.mt-\[6\.5px\] {
  margin-top: 6.5px;
}

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

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

.mt-\[7\.5px\] {
  margin-top: 7.5px;
}

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

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

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

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

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

.mt-\[8\.5px\] {
  margin-top: 8.5px;
}

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

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

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

.mt-\[9\.5px\] {
  margin-top: 9.5px;
}

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

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

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

.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;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[186\/142\] {
  aspect-ratio: 186/142;
}

.aspect-\[358\/248\] {
  aspect-ratio: 358/248;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-4 {
  height: 1rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

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

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

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

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

.h-\[17\.5px\] {
  height: 17.5px;
}

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

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

.h-\[21\%\] {
  height: 21%;
}

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

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

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

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

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

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

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

.h-\[3\.5px\] {
  height: 3.5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.h-\[80\%\] {
  height: 80%;
}

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

.h-\[9\.414px\] {
  height: 9.414px;
}

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

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

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

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

.min-h-0 {
  min-height: 0px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1 {
  width: 0.25rem;
}

.w-1\/4 {
  width: 25%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-20 {
  width: 5rem;
}

.w-4 {
  width: 1rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.w-full {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-w-frame {
  max-width: 1300px;
}

.max-w-full {
  max-width: 100%;
}

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

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

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}

.rotate-180 {
  --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));
}

.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));
}

.cursor-grab {
  cursor: grab;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

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

.resize {
  resize: both;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-\[100px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 100px minmax(0,1fr);
}

.grid-cols-\[238\.5px_1fr\] {
  grid-template-columns: 238.5px 1fr;
}

.flex-col {
  flex-direction: column;
}

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

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

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

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

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

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

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

.justify-end {
  justify-content: flex-end;
}

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

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

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

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

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

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

.gap-x-\[34\.5px\] {
  -moz-column-gap: 34.5px;
       column-gap: 34.5px;
}

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

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-\[12\.5px\] {
  row-gap: 12.5px;
}

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

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

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

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

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-\[12px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(12px * var(--tw-space-y-reverse));
}

.space-y-\[13\.5px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(13.5px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(13.5px * var(--tw-space-y-reverse));
}

.space-y-\[13px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(13px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(13px * var(--tw-space-y-reverse));
}

.space-y-\[14px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(14px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(14px * var(--tw-space-y-reverse));
}

.space-y-\[16px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.space-y-\[17px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(17px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(17px * var(--tw-space-y-reverse));
}

.space-y-\[19px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(19px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(19px * var(--tw-space-y-reverse));
}

.space-y-\[21px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(21px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(21px * var(--tw-space-y-reverse));
}

.space-y-\[3\.6px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3.6px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.6px * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-hair > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-divide-opacity, 1));
}

.divide-ink\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(1 4 11 / 0.1);
}

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

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

.justify-self-start {
  justify-self: start;
}

.overflow-hidden {
  overflow: hidden;
}

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

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.rounded {
  border-radius: 0.25rem;
}

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

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

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

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

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

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

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

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

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

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

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

.rounded-block {
  border-radius: 24px;
}

.rounded-card {
  border-radius: 16px;
}

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

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-tile {
  border-radius: 12px;
}

.rounded-t-\[17px\] {
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.rounded-t-block {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.border {
  border-width: 1px;
}

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

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}

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

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

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

.border-\[\#cfcfcf\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 207 207 / var(--tw-border-opacity, 1));
}

.border-\[\#d4d4d4\] {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-\[\#d5d5d5\] {
  --tw-border-opacity: 1;
  border-color: rgb(213 213 213 / var(--tw-border-opacity, 1));
}

.border-\[\#e1e1e1\] {
  --tw-border-opacity: 1;
  border-color: rgb(225 225 225 / var(--tw-border-opacity, 1));
}

.border-\[\#ededed\] {
  --tw-border-opacity: 1;
  border-color: rgb(237 237 237 / var(--tw-border-opacity, 1));
}

.border-\[\#f0f0f0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
}

.border-\[rgba\(255\2c 141\2c 40\2c 1\)\] {
  border-color: rgba(255,141,40,1);
}

.border-\[rgba\(52\2c 199\2c 89\2c 1\)\] {
  border-color: rgba(52,199,89,1);
}

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

.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.border-ink\/10 {
  border-color: rgb(1 4 11 / 0.1);
}

.border-ink\/5 {
  border-color: rgb(1 4 11 / 0.05);
}

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

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}

.bg-\[\#e0e0e0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e6e6e6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 230 / var(--tw-bg-opacity, 1));
}

.bg-\[rgba\(113\2c 114\2c 118\2c 1\)\] {
  background-color: rgba(113,114,118,1);
}

.bg-\[rgba\(141\2c 142\2c 145\2c 0\.12\)\] {
  background-color: rgba(141,142,145,0.12);
}

.bg-\[rgba\(155\2c 254\2c 123\2c 1\)\] {
  background-color: rgba(155,254,123,1);
}

.bg-\[rgba\(198\2c 197\2c 199\2c 0\.18\)\] {
  background-color: rgba(198,197,199,0.18);
}

.bg-\[rgba\(240\2c 240\2c 240\2c 1\)\] {
  background-color: rgba(240,240,240,1);
}

.bg-\[rgba\(255\2c 162\2c 162\2c 0\.18\)\] {
  background-color: rgba(255,162,162,0.18);
}

.bg-\[rgba\(55\2c 231\2c 72\2c 1\)\] {
  background-color: rgba(55,231,72,1);
}

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

.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}

.bg-black\/\[0\.02\] {
  background-color: rgb(0 0 0 / 0.02);
}

.bg-black\/\[0\.315\] {
  background-color: rgb(0 0 0 / 0.315);
}

.bg-black\/\[0\.32\] {
  background-color: rgb(0 0 0 / 0.32);
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

.bg-ink\/10 {
  background-color: rgb(1 4 11 / 0.1);
}

.bg-ink\/15 {
  background-color: rgb(1 4 11 / 0.15);
}

.bg-ink\/40 {
  background-color: rgb(1 4 11 / 0.4);
}

.bg-ink\/5 {
  background-color: rgb(1 4 11 / 0.05);
}

.bg-ink\/60 {
  background-color: rgb(1 4 11 / 0.6);
}

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

.bg-night {
  --tw-bg-opacity: 1;
  background-color: rgb(5 7 13 / var(--tw-bg-opacity, 1));
}

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

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

.bg-tile {
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / 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\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[\#8bff7d\] {
  --tw-gradient-from: #8bff7d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 255 125 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#e6e6e6\] {
  --tw-gradient-from: #e6e6e6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(230 230 230 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-page\/60 {
  --tw-gradient-to: rgb(240 240 240 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(240 240 240 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#36e646\] {
  --tw-gradient-to: #36e646 var(--tw-gradient-to-position);
}

.to-page {
  --tw-gradient-to: #f0f0f0 var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.bg-\[length\:100\%_436px\] {
  background-size: 100% 436px;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

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

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

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

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

.p-3 {
  padding: 0.75rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

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

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

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

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

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

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

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.px-\[3\.5px\] {
  padding-left: 3.5px;
  padding-right: 3.5px;
}

.px-\[32\.5px\] {
  padding-left: 32.5px;
  padding-right: 32.5px;
}

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

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

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

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

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

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

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

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

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

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

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

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

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

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

.\!pb-\[24px\] {
  padding-bottom: 24px !important;
}

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

.\!pr-\[24\.5px\] {
  padding-right: 24.5px !important;
}

.\!pt-\[26px\] {
  padding-top: 26px !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-9 {
  padding-bottom: 2.25rem;
}

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

.pb-\[1\.5px\] {
  padding-bottom: 1.5px;
}

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

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

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

.pb-\[16\.5px\] {
  padding-bottom: 16.5px;
}

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

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

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

.pb-\[19\.5px\] {
  padding-bottom: 19.5px;
}

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

.pb-\[2\.5px\] {
  padding-bottom: 2.5px;
}

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

.pb-\[22\.5px\] {
  padding-bottom: 22.5px;
}

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

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

.pb-\[24\.5px\] {
  padding-bottom: 24.5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pl-0 {
  padding-left: 0px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-\[13\.5px\] {
  padding-left: 13.5px;
}

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

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

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

.pl-\[19\.75px\] {
  padding-left: 19.75px;
}

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

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

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

.pr-10 {
  padding-right: 2.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

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

.pr-5 {
  padding-right: 1.25rem;
}

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

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

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

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

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

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

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

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

.pt-3 {
  padding-top: 0.75rem;
}

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

.pt-6 {
  padding-top: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pt-\[24\.5px\] {
  padding-top: 24.5px;
}

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

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

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

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

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

.pt-\[35\.5px\] {
  padding-top: 35.5px;
}

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

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

.pt-\[41\.5px\] {
  padding-top: 41.5px;
}

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

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

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

.pt-\[6\.5px\] {
  padding-top: 6.5px;
}

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

.pt-\[7\.5px\] {
  padding-top: 7.5px;
}

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

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

.pt-\[79\.505\%\] {
  padding-top: 79.505%;
}

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

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

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

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

.font-sans {
  font-family: "Neue Montreal", Helvetica Neue, Arial, sans-serif;
}

.font-tech {
  font-family: Michroma, Eurostile, sans-serif;
}

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

.text-\[11\.4px\] {
  font-size: 11.4px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

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

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

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

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

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

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

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

.text-\[14\.1px\] {
  font-size: 14.1px;
}

.text-\[14\.2px\] {
  font-size: 14.2px;
}

.text-\[14\.3px\] {
  font-size: 14.3px;
}

.text-\[14\.4px\] {
  font-size: 14.4px;
}

.text-\[14\.6px\] {
  font-size: 14.6px;
}

.text-\[14\.7px\] {
  font-size: 14.7px;
}

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

.text-\[15\.1px\] {
  font-size: 15.1px;
}

.text-\[15\.2px\] {
  font-size: 15.2px;
}

.text-\[15\.3px\] {
  font-size: 15.3px;
}

.text-\[15\.5px\] {
  font-size: 15.5px;
}

.text-\[15\.6px\] {
  font-size: 15.6px;
}

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

.text-\[16\.1px\] {
  font-size: 16.1px;
}

.text-\[16\.2px\] {
  font-size: 16.2px;
}

.text-\[16\.3px\] {
  font-size: 16.3px;
}

.text-\[16\.4px\] {
  font-size: 16.4px;
}

.text-\[16\.5px\] {
  font-size: 16.5px;
}

.text-\[16\.6px\] {
  font-size: 16.6px;
}

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

.text-\[17\.1px\] {
  font-size: 17.1px;
}

.text-\[17\.5px\] {
  font-size: 17.5px;
}

.text-\[17\.75px\] {
  font-size: 17.75px;
}

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

.text-\[18\.75px\] {
  font-size: 18.75px;
}

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

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

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

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

.text-\[23\.7px\] {
  font-size: 23.7px;
}

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

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

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

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

.text-\[32\.6px\] {
  font-size: 32.6px;
}

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

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

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

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

.text-\[8\.55px\] {
  font-size: 8.55px;
}

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

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

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

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

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

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

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

.leading-\[12px\] {
  line-height: 12px;
}

.leading-\[15\.5px\] {
  line-height: 15.5px;
}

.leading-\[15px\] {
  line-height: 15px;
}

.leading-\[16px\] {
  line-height: 16px;
}

.leading-\[18px\] {
  line-height: 18px;
}

.leading-\[19\.5px\] {
  line-height: 19.5px;
}

.leading-\[19px\] {
  line-height: 19px;
}

.leading-\[20px\] {
  line-height: 20px;
}

.leading-\[22px\] {
  line-height: 22px;
}

.leading-\[23px\] {
  line-height: 23px;
}

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[26px\] {
  line-height: 26px;
}

.leading-\[32px\] {
  line-height: 32px;
}

.leading-\[36px\] {
  line-height: 36px;
}

.leading-\[38px\] {
  line-height: 38px;
}

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

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

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}

.tracking-\[0\.006em\] {
  letter-spacing: 0.006em;
}

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

.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}

.tracking-\[0\.03em\] {
  letter-spacing: 0.03em;
}

.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}

.tracking-\[0\.055em\] {
  letter-spacing: 0.055em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-\[inherit\] {
  letter-spacing: inherit;
}

.tracking-normal {
  letter-spacing: 0em;
}

.text-\[\#f65050\] {
  --tw-text-opacity: 1;
  color: rgb(246 80 80 / var(--tw-text-opacity, 1));
}

.text-\[\#ff4c50\] {
  --tw-text-opacity: 1;
  color: rgb(255 76 80 / var(--tw-text-opacity, 1));
}

.text-\[rgba\(113\2c 114\2c 118\2c 1\)\] {
  color: rgba(113,114,118,1);
}

.text-\[rgba\(245\2c 245\2c 245\2c 1\)\] {
  color: rgba(245,245,245,1);
}

.text-\[rgba\(52\2c 199\2c 89\2c 1\)\] {
  color: rgba(52,199,89,1);
}

.text-body {
  --tw-text-opacity: 1;
  color: rgb(22 23 29 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-faint {
  --tw-text-opacity: 1;
  color: rgb(155 155 160 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.text-ink\/45 {
  color: rgb(1 4 11 / 0.45);
}

.text-ink\/55 {
  color: rgb(1 4 11 / 0.55);
}

.text-ink\/65 {
  color: rgb(1 4 11 / 0.65);
}

.text-ink\/70 {
  color: rgb(1 4 11 / 0.7);
}

.text-ink\/80 {
  color: rgb(1 4 11 / 0.8);
}

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

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

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

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

.opacity-0 {
  opacity: 0;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-75 {
  opacity: 0.75;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-\[0_24px_60px_rgba\(0\2c 0\2c 0\2c \.22\)\] {
  --tw-shadow: 0 24px 60px rgba(0,0,0,.22);
  --tw-shadow-colored: 0 24px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.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);
}

.blur {
  --tw-blur: blur(8px);
  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);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.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;
}

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

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

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* horizontal rails scroll without showing a bar */

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

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

/* @apply (not a raw animation shorthand) so the JIT scanner sees
     `animate-marquee` used and keeps the @keyframes it belongs to. */

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

  100% {
    transform: translateX(-50%);
  }
}

.marquee-track {
  animation: marquee 40s linear infinite;
}

/* the strip fades out at both ends rather than hard-clipping */

.marquee-mask {
  -webkit-mask-image: linear-gradient(
			to right,
			transparent,
			#000 80px,
			#000 calc(100% - 80px),
			transparent
		);
  mask-image: linear-gradient(
			to right,
			transparent,
			#000 80px,
			#000 calc(100% - 80px),
			transparent
		);
}

/* same loop, scaled down for a card-width strip (the area-card's compound
     list): the 80px fade above is sized for the full-page announcement bar
     and would eat most of a ~300px card, and 40s across a much shorter track
     reads as barely moving, so this pair gets its own tighter inset and a
     duration picked to match the announcement's on-screen speed rather than
     its wall-clock time. */

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

  100% {
    transform: translateX(-50%);
  }
}

.marquee-track-sm {
  animation: marquee 18s linear infinite;
}

.marquee-mask-sm {
  -webkit-mask-image: linear-gradient(
			to right,
			transparent,
			#000 24px,
			#000 calc(100% - 24px),
			transparent
		);
  mask-image: linear-gradient(
			to right,
			transparent,
			#000 24px,
			#000 calc(100% - 24px),
			transparent
		);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
		.marquee-track-sm {
    animation: none;
  }
}

/* darkens the hero's own render into the section's bg-night at the bottom
     edge, so the fixed header can stay readable once the page scrolls under
     it and the hero image gives way to the flat colour cleanly. Percentage
     stops are relative to this element's own box (21% of the hero), not the
     hero itself - requested at those exact numbers, not measured off a mockup. */

.hero-fade {
  background: linear-gradient(
			0deg,
			rgba(15, 15, 17, 1) 35.593%,
			rgba(15, 15, 17, 0) 100%
		);
}

/* every dark banner (home's two, the COA one, shop's and the product page's library
     banner): the ring render is transparent, the banner supplies the ink behind it, and this
     fades the render out to solid ink at the bottom - see partials/banner-art.html. The
     stops are the design's own, exactly as given. */

.banner-fade {
  background: linear-gradient(
			180deg,
			rgba(1, 4, 11, 0) 0%,
			rgba(1, 4, 11, 1) 100%
		);
}

/* ------------------------- hero proof pills ---------------------------- */

/* The hairline is a gradient rather than a flat stroke: barely there at the
     two round caps, white/80 across the middle of the top and bottom edges.
     border-image cannot follow a border-radius, so the ring is a ::before at
     inset -1px (= exactly the 1px border box) filled with the gradient and
     masked down to its own 1px padding ring. The border stays in the box as
     `transparent` so the pill's width and inner layout are untouched. */

.hero-pill {
  position: relative;
  border-width: 1px;
  border-color: transparent;
}

.hero-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  /* h-14 = 56px tall, rounded-full -> 28px radius: the ring holds white/40
       flat across the middle 80% of the cap, only easing to transparent in
       the outer 10% on each side - a mid stop just inside that zone (41% of
       the way through it, same ratio as the old fixed-px version) keeps the
       run a soft S-curve rather than a hard edge. Percentage stops (not a
       fixed px run) so the fade covers the same *share* of the pill on the
       narrow and wide cards alike. */
  background: linear-gradient(
			90deg,
			rgb(255 255 255 / 0.05),
			rgb(255 255 255 / 0.16) 4.1%,
			rgb(255 255 255 / 0.4) 10%,
			rgb(255 255 255 / 0.4) 90%,
			rgb(255 255 255 / 0.16) 95.9%,
			rgb(255 255 255 / 0.05)
		);
  -webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* without mask compositing the ring would fill in as a solid gradient slab,
     so fall all the way back to the flat hairline it replaced */

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .hero-pill {
    border-color: rgb(255 255 255 / 0.12);
  }

  .hero-pill::before {
    display: none;
  }

  .empty-mark {
    border-color: rgb(255 255 255 / 0.4);
  }

  .empty-mark::before {
    display: none;
  }
}

/* ------------------------- home format tabs ----------------------------- */

/* homepage.jpg draws the two idle tabs as a light-grey pill; the user asked
     for a near-black one instead (also used by the hero icon's own fill), so
     both states now sit on almost the same dark fill and are told apart by
     text opacity rather than a light/dark swap. State lives in aria-pressed,
     same convention as .opt / .rail-chip above. */

.tab-pill {
  display: inline-flex;
  height: 38px;
  align-items: center;
  border-radius: 9999px;
  background-color: rgb(1 4 11 / 0.05);
  padding-left: 16px;
  padding-right: 16px;
  font-size: 17px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

.tab-pill:hover {
  background-color: rgb(1 4 11 / 0.15);
}

@media (min-width: 1280px) {
  .tab-pill {
    height: 36px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.tab-pill[aria-pressed='true'] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* --------------------------- custom select ------------------------------ */

/* [data-select] wraps a native <select>; main.js hides it and builds a
     trigger (copying the select's own classes, so each page keeps its look)
     plus this listbox. The native select stays in the form and still fires
     `change`. Open state lives in [data-open] on the wrapper. */

[data-select][data-open] > svg {
  transform: translateY(-50%) rotate(180deg);
}

[data-select] > svg {
  transition: transform 200ms ease;
}

/* while open the trigger fills white. On the COA filter the rounded shell
     is the wrapper itself (the button inside is square), so that one paints
     the wrapper instead. */

[data-select][data-open]:not(.coa-field) > button,
	.coa-field[data-select][data-open] {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* The inline panel is desktop-only: below lg a custom select opens as a
     bottom sheet instead (see .sel-* below). `mobile:hidden` rather than a
     `lg:block` pair, because an author display rule at lg would beat the
     [hidden] the script toggles - the usual trap in this file. */

.select-panel {
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 30;
  margin-top: 8px;
  min-width: 100%;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.86);
  padding: 5px;
  --tw-shadow: 0 8px 28px rgba(1,4,11,0.1);
  --tw-shadow-colored: 0 8px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (max-width: 1024px) {
  .select-panel {
    display: none;
  }
}

.select-option {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  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;
}

/* hairline between rows, dropped next to the highlighted one so the grey
     pill never sits against a rule */

.select-option + .select-option::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0px;
  height: 1px;
  background-color: rgb(1 4 11 / 0.1);
}

.select-option[data-active]::before,
	.select-option[data-active] + .select-option::before {
  opacity: 0;
}

.select-option[data-active] {
  background-color: rgb(1 4 11 / 0.05);
}

.\[-webkit-text-stroke\:0\.3px_currentColor\] {
  -webkit-text-stroke: 0.3px currentColor;
}

.placeholder\:text-ink\/55::-moz-placeholder {
  color: rgb(1 4 11 / 0.55);
}

.placeholder\:text-ink\/55::placeholder {
  color: rgb(1 4 11 / 0.55);
}

.placeholder\:text-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.after\:h-2\.5::after {
  content: var(--tw-content);
  height: 0.625rem;
}

.after\:w-2\.5::after {
  content: var(--tw-content);
  width: 0.625rem;
}

.after\:rounded-\[2px\]::after {
  content: var(--tw-content);
  border-radius: 2px;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-ink::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

.after\:opacity-0::after {
  content: var(--tw-content);
  opacity: 0;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.last\:pb-\[24px\]:last-child {
  padding-bottom: 24px;
}

.hover\:bg-\[\#dcdcdc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#ffe0e0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 224 224 / var(--tw-bg-opacity, 1));
}

.hover\:bg-ink\/5:hover {
  background-color: rgb(1 4 11 / 0.05);
}

.hover\:bg-line:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}

.hover\:bg-tile:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(1 4 11 / var(--tw-text-opacity, 1));
}

.hover\:text-muted:hover {
  --tw-text-opacity: 1;
  color: rgb(108 109 113 / var(--tw-text-opacity, 1));
}

.hover\:opacity-60:hover {
  opacity: 0.6;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-85:hover {
  opacity: 0.85;
}

.hover\:shadow-\[0_8px_24px_rgba\(1\2c 4\2c 11\2c 0\.08\)\]:hover {
  --tw-shadow: 0 8px 24px rgba(1,4,11,0.08);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-ink:focus {
  --tw-border-opacity: 1;
  border-color: rgb(1 4 11 / var(--tw-border-opacity, 1));
}

.focus\:bg-ink\/5:focus {
  background-color: rgb(1 4 11 / 0.05);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.active\:bg-ink\/10:active {
  background-color: rgb(1 4 11 / 0.1);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.group:last-child .group-last\:-bottom-\[73px\] {
  bottom: -73px;
}

.group:last-child .group-last\:h-auto {
  height: auto;
}

.group:hover .group-hover\:bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(1 4 11 / var(--tw-bg-opacity, 1));
}

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

.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}

.peer:checked ~ .peer-checked\:after\:opacity-100::after {
  content: var(--tw-content);
  opacity: 1;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-40[aria-disabled="true"] {
  opacity: 0.4;
}

@media (max-width: 768px) {
  .phone\:hidden {
    display: none;
  }

  .phone\:w-full {
    width: 100%;
  }

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

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

  .phone\:gap-0 {
    gap: 0px;
  }

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

@media (min-width: 678px) and (max-width: 1024px) {
  .tablet\:hidden {
    display: none;
  }

  .tablet\:flex-row {
    flex-direction: row;
  }
}

@media (max-width: 1024px) {
  .mobile\:order-1 {
    order: 1;
  }

  .mobile\:order-2 {
    order: 2;
  }

  .mobile\:mt-0 {
    margin-top: 0px;
  }

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

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

  .mobile\:mt-8 {
    margin-top: 2rem;
  }

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

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

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

  .mobile\:hidden {
    display: none;
  }

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

  .mobile\:gap-5 {
    gap: 1.25rem;
  }

  .mobile\:gap-6 {
    gap: 1.5rem;
  }

  .mobile\:p-5 {
    padding: 1.25rem;
  }

  .mobile\:p-6 {
    padding: 1.5rem;
  }

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

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

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

  .mobile\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

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

  .mobile\:text-muted {
    --tw-text-opacity: 1;
    color: rgb(108 109 113 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 640px) {
  .sm\:inset-y-\[20px\] {
    top: 20px;
    bottom: 20px;
  }

  .sm\:left-auto {
    left: auto;
  }

  .sm\:right-2\.5 {
    right: 0.625rem;
  }

  .sm\:right-\[19px\] {
    right: 19px;
  }

  .sm\:top-2\.5 {
    top: 0.625rem;
  }

  .sm\:order-none {
    order: 0;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mx-\[2px\] {
    margin-left: 2px;
    margin-right: 2px;
  }

  .sm\:\!mt-\[17px\] {
    margin-top: 17px !important;
  }

  .sm\:-ml-1 {
    margin-left: -0.25rem;
  }

  .sm\:-mr-\[8px\] {
    margin-right: -8px;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

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

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

  .sm\:ml-0\.5 {
    margin-left: 0.125rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-1 {
    margin-top: 0.25rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

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

  .sm\:mt-2\.5 {
    margin-top: 0.625rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

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

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

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:mt-\[10\.5px\] {
    margin-top: 10.5px;
  }

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

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

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

  .sm\:mt-\[13\.5px\] {
    margin-top: 13.5px;
  }

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

  .sm\:mt-\[14\.5px\] {
    margin-top: 14.5px;
  }

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

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

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

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

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

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

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

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

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

  .sm\:mt-\[23\.5px\] {
    margin-top: 23.5px;
  }

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

  .sm\:mt-\[24\.5px\] {
    margin-top: 24.5px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:mt-\[6\.5px\] {
    margin-top: 6.5px;
  }

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

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

  .sm\:mt-\[8\.5px\] {
    margin-top: 8.5px;
  }

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

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:contents {
    display: contents;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-auto {
    aspect-ratio: auto;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

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

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

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

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

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

  .sm\:h-auto {
    height: auto;
  }

  .sm\:min-h-screen {
    min-height: 100vh;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

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

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

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

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

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

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

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

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

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

  .sm\:max-w-\[451\.5px\] {
    max-width: 451.5px;
  }

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

  .sm\:flex-none {
    flex: none;
  }

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

  .sm\:translate-x-0 {
    --tw-translate-x: 0px;
    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));
  }

  .sm\:translate-y-0 {
    --tw-translate-y: 0px;
    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));
  }

  .sm\:animate-none {
    animation: none;
  }

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

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

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

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

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

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

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

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

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

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

  .sm\:gap-\[16px\] {
    gap: 16px;
  }

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

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

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

  .sm\:gap-\[8px\] {
    gap: 8px;
  }

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

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

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

  .sm\:gap-y-0 {
    row-gap: 0px;
  }

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

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

  .sm\:space-y-\[13px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(13px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(13px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-\[17px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(17px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(17px * var(--tw-space-y-reverse));
  }

  .sm\:divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  }

  .sm\:divide-black\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(0 0 0 / 0.1);
  }

  .sm\:overflow-visible {
    overflow: visible;
  }

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

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

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

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

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

  .sm\:rounded-block {
    border-radius: 24px;
  }

  .sm\:rounded-card {
    border-radius: 16px;
  }

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

  .sm\:border-b-0 {
    border-bottom-width: 0px;
  }

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

  .sm\:border-hair {
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
  }

  .sm\:bg-\[\#f5f5f5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-black\/\[0\.32\] {
    background-color: rgb(0 0 0 / 0.32);
  }

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

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

  .sm\:p-8 {
    padding: 2rem;
  }

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

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

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

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

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .sm\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pb-9 {
    padding-bottom: 2.25rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:pr-0 {
    padding-right: 0px;
  }

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

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

  .sm\:pt-20 {
    padding-top: 5rem;
  }

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

  .sm\:pt-6 {
    padding-top: 1.5rem;
  }

  .sm\:pt-\[14\.5px\] {
    padding-top: 14.5px;
  }

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

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

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

  .sm\:pt-\[16\.5px\] {
    padding-top: 16.5px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:font-tech {
    font-family: Michroma, Eurostile, sans-serif;
  }

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

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

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

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

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

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

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

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

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

  .sm\:text-\[30\.5px\] {
    font-size: 30.5px;
  }

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

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

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

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

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

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

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

  .sm\:leading-\[18px\] {
    line-height: 18px;
  }

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

  .sm\:tracking-\[-0\.02em\] {
    letter-spacing: -0.02em;
  }

  .sm\:tracking-\[0\.006em\] {
    letter-spacing: 0.006em;
  }

  .sm\:tracking-\[0\.011em\] {
    letter-spacing: 0.011em;
  }

  .sm\:tracking-\[0\.012em\] {
    letter-spacing: 0.012em;
  }

  .sm\:tracking-\[0\.08em\] {
    letter-spacing: 0.08em;
  }

  .sm\:text-body {
    --tw-text-opacity: 1;
    color: rgb(22 23 29 / var(--tw-text-opacity, 1));
  }

  .sm\:text-ink {
    --tw-text-opacity: 1;
    color: rgb(1 4 11 / var(--tw-text-opacity, 1));
  }

  .sm\:shadow-\[inset_0_0_0_1px_\#dcdcdc\] {
    --tw-shadow: inset 0 0 0 1px #dcdcdc;
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .sm\:\[-webkit-mask-image\:none\] {
    -webkit-mask-image: none;
  }

  .sm\:\[mask-image\:none\] {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .group:last-child .sm\:group-last\:-bottom-14 {
    bottom: -3.5rem;
  }
}

@media (min-width: 768px) {
  .md\:left-auto {
    left: auto;
  }

  .md\:left-full {
    left: 100%;
  }

  .md\:right-auto {
    right: auto;
  }

  .md\:right-full {
    right: 100%;
  }

  .md\:ml-\[24px\] {
    margin-left: 24px;
  }

  .md\:mr-\[24px\] {
    margin-right: 24px;
  }

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

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

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:left-0 {
    left: 0px;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:left-auto {
    left: auto;
  }

  .lg\:right-0 {
    right: 0px;
  }

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

  .lg\:order-none {
    order: 0;
  }

  .lg\:col-start-4 {
    grid-column-start: 4;
  }

  .lg\:row-span-3 {
    grid-row: span 3 / span 3;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-11 {
    margin-top: 2.75rem;
  }

  .lg\:mt-3 {
    margin-top: 0.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

  .lg\:w-auto {
    width: auto;
  }

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

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

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

  .lg\:flex-none {
    flex: none;
  }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    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));
  }

  .lg\:translate-y-px {
    --tw-translate-y: 1px;
    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));
  }

  .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-\[440px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 440px minmax(0,1fr);
  }

  .lg\:grid-cols-\[768px_minmax\(0\2c 369px\)\] {
    grid-template-columns: 768px minmax(0,369px);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_570px\] {
    grid-template-columns: minmax(0,1fr) 570px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto_auto_auto_auto\] {
    grid-template-columns: minmax(0,1fr) auto auto auto auto;
  }

  .lg\:grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)_331px\] {
    grid-template-columns: repeat(3,minmax(0,1fr)) 331px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

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

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

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

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

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-\[16px\] {
    gap: 16px;
  }

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

  .lg\:gap-\[32px\] {
    gap: 32px;
  }

  .lg\:gap-\[34px\] {
    gap: 34px;
  }

  .lg\:gap-\[61px\] {
    gap: 61px;
  }

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

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

  .lg\:gap-y-0 {
    row-gap: 0px;
  }

  .lg\:gap-y-2 {
    row-gap: 0.5rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:rounded-none {
    border-radius: 0px;
  }

  .lg\:rounded-t-\[17px\] {
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
  }

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

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(227 227 227 / var(--tw-border-opacity, 1));
  }

  .lg\:bg-tile {
    --tw-bg-opacity: 1;
    background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
  }

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

  .lg\:p-0 {
    padding: 0px;
  }

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

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

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

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

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

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

  .lg\:pl-0 {
    padding-left: 0px;
  }

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

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

  .lg\:pr-10 {
    padding-right: 2.5rem;
  }

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

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

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

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

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

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

  .lg\:hover\:bg-\[rgba\(240\2c 240\2c 240\2c 1\)\]:hover {
    background-color: rgba(240,240,240,1);
  }
}

@media (min-width: 1280px) {
  .xl\:mt-1 {
    margin-top: 0.25rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:gap-6 {
    gap: 1.5rem;
  }

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

  .xl\:gap-\[16px\] {
    gap: 16px;
  }

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

  .xl\:space-y-\[16px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(16px * var(--tw-space-y-reverse));
  }

  .xl\:p-8 {
    padding: 2rem;
  }

  .xl\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

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

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

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

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

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

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

  .xl\:leading-\[1\.05\] {
    line-height: 1.05;
  }

  .xl\:leading-\[51px\] {
    line-height: 51px;
  }

  .xl\:leading-\[54px\] {
    line-height: 54px;
  }

  .xl\:leading-\[56px\] {
    line-height: 56px;
  }

  .xl\:leading-\[58px\] {
    line-height: 58px;
  }

  .xl\:leading-\[59px\] {
    line-height: 59px;
  }

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