/* purgecss start ignore */

/* ! tailwindcss v3.2.4 | 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.
*/

html {
  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: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
}

/*
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. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
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-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: 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,
[type='button'],
[type='reset'],
[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;
}

/*
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] {
  display: none;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

*, ::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-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:  ;
}

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

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

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

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-checkbox,.form-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

.form-checkbox {
  border-radius: 0px;
}

.form-radio {
  border-radius: 100%;
}

.form-checkbox:focus,.form-radio:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.form-checkbox:checked,.form-radio:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.form-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

.form-checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(hr):not(:where([class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
  vertical-align: top;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(video):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(figure):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(li):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
  padding-left: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
  padding-right: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
  padding-left: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
  padding-right: 0;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.2em;
}

.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.2em;
}

.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.2em;
}

.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.2em;
}

.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.8333333em;
  margin-bottom: 0.8333333em;
}

.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

.btn {
  /* Coral base, not gray: theme templates always pair .btn with a
           modifier, so bare .btn only occurs in legacy catalog/CMS content —
           it should read as the one action color (I2c legend rules 1/2). */
  display: flex;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .btn {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.btn svg {
  display: inline-flex;
}

.btn span {
  vertical-align: middle;
}

.btn:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
}

/* Suppress the vendor outline only for pointer focus; keyboard focus
           (:focus-visible) must keep the sitewide 3px gold ring (theming.css,
           legend rule 7 / WCAG 2.4.7). A bare &:focus (0,2,0) would outrank and
           erase that ring on keyboard focus. */

.btn:focus:not(:focus-visible) {
  border-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* I2c: coral is the only action color — gold is never a button (legend rules 1/2).
       coral-600 (#C23C1C), not coral-500: white-on-coral-500 at this 16px bold size is
       ~3.33:1, under rule 9's ≥18.66px-bold allowance; coral-600 clears 5.31:1 at any
       size (a11y audit). Hover darkens further via brightness, no new hex. */

.btn-primary {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: brightness(1.12);
}

.btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(19 52 68 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --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);
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 236 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: none;
}

.btn-secondary:focus {
  border-color: transparent;
}

.btn-size-sm {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.actions-toolbar .primary button {
  /* Coral base, not gray: theme templates always pair .btn with a
           modifier, so bare .btn only occurs in legacy catalog/CMS content —
           it should read as the one action color (I2c legend rules 1/2). */
  display: flex;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .actions-toolbar .primary button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .actions-toolbar .primary button {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.actions-toolbar .primary button svg {
  display: inline-flex;
}

.actions-toolbar .primary button span {
  vertical-align: middle;
}

.actions-toolbar .primary button:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
}

.actions-toolbar .primary button:focus:not(:focus-visible) {
  border-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.actions-toolbar .primary button {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.actions-toolbar .primary button:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: brightness(1.12);
}

:where(#hyva-checkout-main) .actions-toolbar .primary button {
  border-width: 2px;
}

:where(#hyva-checkout-main) .actions-toolbar .primary button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) .actions-toolbar .primary button:not(.btn-secondary) {
  border-color: transparent;
}


.pdp-buy .actions-toolbar .primary button {
  flex: 1;
}

.pdp-reviewform .review-form .actions-toolbar .primary button {
  display: inline-flex;
  border-radius: 0.375rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  width: auto;
  margin-top: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}


.pdp-mobilebuy .actions-toolbar .primary button {
  margin-left: auto;
}

.input-group > :not(:last-child, button,.actions-toolbar .primary button) {
  border-right-width: 0px;
}

.checkout-summary .checkout-nav .actions-toolbar .primary button {
  width: 100%;
}

:where(#hyva-checkout-main) .btn {
  border-width: 2px;
}

:where(#hyva-checkout-main) .btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) .btn:not(.btn-secondary) {
  border-color: transparent;
}

#category-view-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.toolbar-products .modes-mode {
  height: 1.5rem;
  width: 1.5rem;
}

.toolbar-products .modes-mode span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.toolbar-products .modes-mode.mode-grid {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>');
}

.toolbar-products .modes-mode.mode-list {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>');
}

.price-including-tax + .price-excluding-tax {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.price-including-tax + .price-excluding-tax:before {
  content: attr(data-label) ': ';
}

.price-excluding-tax,
.price-including-tax {
  white-space: nowrap;
}

.price-excluding-tax .price, .price-including-tax .price {
  /* I2c legend rule 6: mono + tabular-nums for every measured value, incl. prices. */
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1.625;
}

.pdp-reviewform .review-form > fieldset > legend .price-excluding-tax .price,.pdp-reviewform .review-form > fieldset > legend  .price-including-tax .price {
  color: #133444;
}

.price-excluding-tax {
  display: block;
}

[data-content-type$='block'] .price-excluding-tax p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .price-excluding-tax.filter {
}

.price-container.price-tier_price {
  display: flex;
  gap: 0.25rem;
}

.price-container.price-tier_price > .price-including-tax + .price-excluding-tax:before {
  content: '(' attr(data-label) ': ';
}

.price-container.price-tier_price > .price-including-tax + .price-excluding-tax:after {
  content: ')';
}

/* Keep file for backwards compatibility */

#customer-login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  #customer-login-container {
    flex-direction: row;
  }
}

#customer-login-container > .card {
  padding: 2rem;
}

#customer-login-container .form-login .actions-toolbar {
  flex-wrap: wrap;
  gap: 1rem;
}

.account a.btn-secondary,
    .account button.btn-secondary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.account .order-details-items {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.account .order-details-items .order-items > div:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}

.account .column.main ul li {
  list-style-position: inside;
  list-style-type: disc;
}

/**
 * different styles can be found at https://tailwindcss-forms.vercel.app/
 **/

.form-input,
.form-email,
.form-select,
.form-multiselect,
.form-textarea {
  min-height: 44px;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-input:focus, .form-email:focus, .form-select:focus, .form-multiselect:focus, .form-textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 131 107 / var(--tw-border-opacity));
  --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);
  --tw-ring-color: rgb(240 92 59 / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}

@media (min-width: 768px) {
  .hyva_checkout-index-index .field-email {
    grid-column: span 12 / span 12;
  }
}

.page.messages {
  position: sticky;
  top: 0px;
  z-index: 20;
}

.page.messages .messages
    section#messages {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  .page.messages .messages
    section#messages {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .page.messages .messages
    section#messages {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .page.messages .messages
    section#messages {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .page.messages .messages
    section#messages {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .page.messages .messages
    section#messages {
    max-width: 1536px;
  }
}

.page.messages .messages
    section#messages {
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#review-form > .page.messages .messages
    section#messages, #customer-review-list > .page.messages .messages
    section#messages {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.message {
  margin-bottom: 0.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  padding: 0.5rem;
  padding-left: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
  --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);
}

.pdp-reviewform .review-form > fieldset > legend .message {
  color: #133444;
}

.message.error {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.message.success {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.message.info,
    .message.notice {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.message.warning {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

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

.product-item .price-container {
  display: block;
}

[data-content-type$='block'] .product-item .price-container p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .product-item .price-container.filter {
}

.product-item .price-container .price {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.product-item .price-container .price-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.product-item .special-price .price-container .price-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.product-item .special-price .price {
  font-weight: 700;
}

.product-item .old-price .price-container {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .product-item .old-price .price-container {
  color: #133444;
}

.product-item .old-price .price-container .price {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend .product-item .old-price .price-container .price {
  color: #133444;
}

.card.product {
  border-radius: 0.125rem;
  --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);
}

@media (min-width: 768px) {
  #filters-content .filter-current {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

#filters-content .filter-current .filter-label {
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend #filters-content .filter-current .filter-label {
  color: #133444;
}

#active-filtering-heading button {
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
  padding-bottom: 1rem;
}

#active-filtering-heading button > strong {
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend #active-filtering-heading button > strong {
  color: #133444;
}

@media (min-width: 768px) {
  #active-filtering-heading button > strong {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

#active-filtering-heading button > span {
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
}

.catalog-product-view .price-final_price .price-from .price-container, .catalog-product-view .price-final_price .price-to .price-container {
  margin-bottom: 1rem;
  display: block;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

[data-content-type$='block'] .catalog-product-view .price-final_price .price-from .price-container p:last-child,[data-content-type$='block']  .catalog-product-view .price-final_price .price-to .price-container p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .catalog-product-view .price-final_price .price-from .price-container.filter,.category-view .sidebar  .catalog-product-view .price-final_price .price-to .price-container.filter {
}

.catalog-product-view .price-final_price .price-from .price-container .price-label, .catalog-product-view .price-final_price .price-to .price-container .price-label {
  display: block;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

[data-content-type$='block'] .catalog-product-view .price-final_price .price-from .price-container .price-label p:last-child,[data-content-type$='block']  .catalog-product-view .price-final_price .price-to .price-container .price-label p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .catalog-product-view .price-final_price .price-from .price-container .price-label.filter,.category-view .sidebar  .catalog-product-view .price-final_price .price-to .price-container .price-label.filter {
}

.catalog-product-view .price-final_price .price-from .price-container .price, .catalog-product-view .price-final_price .price-to .price-container .price {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(31 41 55 / var(--tw-text-opacity));
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .catalog-product-view .price-final_price .price-from .price-container .price,.pdp-reviewform .review-form > fieldset > legend  .catalog-product-view .price-final_price .price-to .price-container .price {
  color: #133444;
}

.catalog-product-view .price-final_price .price-from .price-container .price, .catalog-product-view .price-final_price .price-to .price-container .price {
  font-variant-numeric: tabular-nums;
}

.catalog-product-view .price-final_price .price-from .price-including-tax + .price-excluding-tax, .catalog-product-view .price-final_price .price-to .price-including-tax + .price-excluding-tax {
  margin-top: 0.25rem;
}

.catalog-product-view .price-final_price .price-from .price-including-tax + .price-excluding-tax .price, .catalog-product-view .price-final_price .price-to .price-including-tax + .price-excluding-tax .price {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
}

.catalog-product-view .price-final_price .price-from .old-price .price-container .price,
                    .catalog-product-view .price-final_price .price-from .old-price .price-container .price-label,
                    .catalog-product-view .price-final_price .price-to .old-price .price-container .price,
                    .catalog-product-view .price-final_price .price-to .old-price .price-container .price-label {
  display: inline;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.catalog-product-view .price-container {
  align-items: center;
  gap: 0.625rem;
}

.catalog-product-view .price-container .final-price .price-wrapper {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
}

.catalog-product-view .price-container .final-price .price-label {
  display: none;
}

.pdp-demo-dialog input.catalog-product-view .price-container .final-price .price-label {
  display: none;
}

/* Was-price above the effective (usually "Free") price: struck and
           quiet so the final price reads as the price. */

.catalog-product-view .price-container .old-price .price-wrapper {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(122 139 152 / var(--tw-text-opacity));
  text-decoration-line: line-through;
}

.catalog-product-view blockquote {
  margin-top: 2rem;
  display: block;
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(239 241 243 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

[data-content-type$='block'] .catalog-product-view blockquote p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .catalog-product-view blockquote.filter {
}

.catalog-product-view blockquote p {
  font-weight: 400;
  font-style: normal;
  line-height: 1.375;
}

.catalog-product-view blockquote p:before, .catalog-product-view blockquote p:after {
  content: "";
}

/* PDP tab strip (.product-details-tabs / .product-detail-tab-title /
   .product-detail-tab-content, plus their @screen lg chevron rule) removed in
   Phase 8 with product-sections.phtml. Nothing emits those classes any more —
   the detailed_info sections are anchored bands now, styled by
   product-page-exhibit.css. The rules nested inside them went with them:
   `.list-release-notes ul` (that class is still emitted by the module's
   release_container/documentation_container templates, but both blocks are
   removed from this page in Phase 7 and the rule only ever applied inside a
   tab panel; the ledger's own bullets come from `.pdp-ledger .pdp-body ul`
   in product-page-exhibit.css), the `.prose { mx-auto }` re-centering (each
   band owns its own measure) and the `.message.error/.warning` flattening. */

.product-options-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  padding: 1rem;
}

.product-options-wrapper h2 {
  display: none;
}

.pdp-demo-dialog input.product-options-wrapper h2 {
  display: none;
}

.product-options-wrapper .mb-6, .product-options-wrapper .last\:mb-6:last-child {
  margin-bottom: 0px;
}

#review-form,
#customer-review-list {
  padding-top: 0px;
  padding-bottom: 0px;
}

#review-form > .card, #customer-review-list > .card {
  padding-left: 0px;
  padding-right: 0px;
}

#review-form > .container, #customer-review-list > .container {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* KEPT IN PHASE 8, deliberately.
   These float-based rules are superseded ON THE PDP by the
   `.pdp-overview-body .features` grid in product-page-exhibit.css, which
   out-specifies them (extra class) and explicitly "undo"es the float and the
   even-row tint. They are NOT scoped to .catalog-product-view, though, and
   `.features` / `.trusted-brands` are authored markup that lives in CMS pages
   and blocks — content that exists only in the database, so its absence from
   this repo proves nothing. Deleting these would silently restyle whatever
   non-PDP pages use them. Re-check against a content export before removing;
   if nothing outside product descriptions uses `.features`, this whole block
   and the matching "undo" rules in product-page-exhibit.css can go together. */

.features {
  margin-top: 2rem;
}

.features .trusted-brands {
  padding: 0;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
}

.features .trusted-brands li {
  display: inline-block;
  float: none;
  width: 49%;
  max-width: 175px;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.features .trusted-brands li:before {
  display: none !important;
}

.features .trusted-brands img {
  float: none;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border-width: 0px;
}

.features > div h1,
    .features > div h2,
    .features > div h3,
    .features > div h4 {
  margin-top: 0px;
  transform: none;
}

.features img {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
}

.features ul li {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.features.nomargin {
  margin: 0px;
}

@media (min-width: 768px) {
  .features img {
    max-width: 40%;
    float: right;
    margin-top: 3rem;
    margin-bottom: 0px;
    margin-left: 2rem;
  }

  .features > div {
    padding: 2rem;
  }

  .features > div:nth-child(even) {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 250 / var(--tw-bg-opacity));
  }

  .features > div:nth-child(even) img {
    float: left;
    margin-left: 0px;
    margin-right: 2rem;
  }
}

/* PDP "Exhibit" component layer (Phase 0 scaffold — see file header). */

/**
 * PDP "Exhibit" component layer.
 *
 * This is the styling home for the redesigned product detail page ("The
 * Exhibit" concept — see docs/pdp-rollout-plan.md). All class rules for the
 * new PDP land here in later phases, under the `pdp-*` class prefix, to keep
 * them clearly scoped and easy to strip out if the concept is reverted.
 *
 * `components/product-page.css` (the existing PDP styles) stays in place and
 * in use until the Phase 8 cleanup, when the old PDP markup/classes are
 * finally removed and this file becomes the sole PDP stylesheet. Phase 8
 * outcome: the tab-strip rules there are gone; the price/options/review-id
 * rules and the unscoped `.features` float layout stay (see the note above
 * `.features` in that file for why).
 *
 * Ported from docs/design-concepts/concept-pdp-exhibit.html (the <style>
 * block), every class renamed under the pdp- prefix. Tokens are NOT redefined
 * here — all color/font references resolve through tailwind.config.js
 * (coral/gold/moss/night/porcelain/ink/on-night, font-display/sans/mono).
 * Concept-var translation: --dark→night, --dark-deep→night.deep,
 * --dark-edge→night.edge, --wall-shadow→porcelain.shadow, --on-dark→on-night,
 * #C23C1C→coral.600, #8F5A0C→gold.700. The concept's trycard/rcard surface
 * #0F1D29 is a literal hex in the concept (no token) and stays literal.
 *
 * LITERAL rgba() CONVENTION. `theme()` returns an opaque hex, so any color
 * that needs an alpha channel has to be written as a literal triplet. Those
 * triplets are not arbitrary — each is a token's hex expanded to decimal.
 * Read them against this table rather than treating them as magic numbers,
 * and update both sides if a token ever moves:
 *
 *     rgba(11, 27, 40, a)    = #0B1B28 = night.DEFAULT
 *     rgba(19, 52, 68, a)    = #133444 = ink.DEFAULT (brand slate)
 *     rgba(23, 122, 74, a)   = #177A4A = moss.DEFAULT
 *     rgba(240, 92, 59, a)   = #F05C3B = coral.DEFAULT
 *     rgba(248, 249, 250, a) = #F8F9FA = porcelain.DEFAULT
 *     rgba(249, 162, 27, a)  = #F9A21B = gold.DEFAULT
 *     rgba(233, 237, 240, a) = #E9EDF0 = on-night.DEFAULT
 *
 * Plain `rgba(0, 0, 0, a)` and `rgba(255, 255, 255, a)` are shadow/highlight
 * scrims, not tokens, and carry no mapping.
 *
 * A11y downshifts beyond the literal translation: concept var(--coral) on
 * the small-size text of .pdp-rail-demo/.pdp-mb-demo went to coral.600
 * (coral-500 fails 4.5:1 on light at those sizes); concept var(--gold) on
 * .pdp-claim .pdp-num-mark went to gold.700 (small text on porcelain).
 *
 * REUSED from elsewhere in the theme instead of re-porting (templates should
 * use these classes directly):
 *   - .mk-container            (marketing.css)  — concept .wrap
 *   - .mk-eyebrow              (marketing.css)  — concept .section-head > .label
 *                                                 / .hero-eyebrow (label + tick)
 *   - .mk-btn / .mk-btn-primary / .mk-btn-ghost (marketing.css) — concept
 *                                                 .btn / .btn--ghost
 *   - sitewide :focus-visible ring (theming.css) — 3px gold, 3px offset, on
 *     every interactive element, incl. all pdp-* interactives. Its night
 *     override (vivid gold instead of gold-700) matches an explicit selector
 *     list that includes .pdp-band--night/.pdp-band--night-deep — any new
 *     night-surface class must be added there too. Only concept-specific
 *     focus treatments (e.g. the option input's gold border) are re-stated
 *     here.
 *   - sitewide prefers-reduced-motion duration clamp (theming.css); the
 *     PDP-specific opacity/transform resets layer on top at the end of this
 *     file.
 *
 * Modifier classes replacing the concept's inline styles (for the template
 * phases):
 *   - .pdp-band--flush-top     — concept style="padding-top:0" on a band
 *   - .pdp-band--flush-bottom  — concept style="padding-bottom:0" on a band
 *
 * State classes (added by the Phase-7 JS): `js` on <html>, `.is-pinned` on
 * the rail/mobile bar, `.is-current` on rail-nav links, `.in-view` on
 * reveal targets, `aria-current` on plate thumbs, `data-state` on the
 * resolver verdict. They stay unprefixed because they only ever apply
 * chained to / inside a pdp-* selector.
 *
 * NOTE: the concept's breakpoints (63rem / 40rem max-width blocks at the end
 * of this file) were authored and only ever viewed at 1440px — they are
 * unproven and pending the Phase 8 responsive QA pass. Rules in those blocks
 * targeting concept-only chrome (.site-nav, .switcher) or layout that later
 * phases build with Tailwind utilities (.hero-grid) were dropped.
 */

/* Rail height drives the license panel's sticky offset and the anchor
   scroll offset. New pdp-scoped custom property (not a design token). */

:root {
  --pdp-rail-h: 3.75rem;
}

/* Anchor jumps from the sticky rail must clear the rail itself. */

html {
  scroll-padding-top: calc(var(--pdp-rail-h) + 1rem);
}

/* ============================================================
   THE PLATE — white mat, hairline, deep shadow. Everything on
   the page depends on media reading correctly on the night wall.
   (concept 297–329)
   ============================================================ */

.pdp-exhibit {
  position: relative;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* Gallery light cone over the plate. The conic wedge still carries alpha where
   the box ends (its apex is above the box), so the top edge used to slice it
   into a hard line visible behind the hero fact rail (QA follow-up, seen live).
   The mask fades the whole layer in over the top third instead of letting the
   box boundary cut it. */

.pdp-exhibit::before {
  content: "";
  position: absolute;
  inset: -20% -18% 12%;
  background:
        radial-gradient(52% 62% at 50% 8%, rgba(249, 162, 27, 0.15) 0%, rgba(249, 162, 27, 0) 66%),
        conic-gradient(from 168deg at 50% -12%, transparent 40%, rgba(233, 237, 240, 0.05) 50%, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%);
  pointer-events: none;
}

.pdp-plate {
  position: relative;
  background: #fff;
  padding: clamp(0.85rem, 2vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 34px 64px -24px rgba(0, 0, 0, 0.75);
}

/* No product media at all. gallery.phtml stamps `gallery-placeholder` on the
   gallery root when the collection is empty (the same test that makes the
   vendor template fall back to the store placeholder). The placeholder is a
   ~380px logo; matted on a full white plate it reads as the hero's subject and
   dominates the night wall. Strip the mat entirely so the logo floats in the
   hero's light cone (.pdp-exhibit::before stays — that glow is what keeps the
   bare state looking intentional rather than unstyled). */

.pdp-plate:has(.gallery-placeholder) {
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* ---- GALLERY STAGE INSIDE THE PLATE (QA P3) ----
   The hyva-ui gallery sizes its stage from `--gallery-ratio`, which the template
   computes as product_page_image_medium width/height — 700x700 from Hyvä's root
   theme, i.e. a square. The concept's plate is 3:2 (concept .plate-img stand-ins
   are viewBox="0 0 900 620"), and every product image here is a Magento admin
   screenshot or box art: landscape, and never safe to crop. Restate the ratio on
   the stage element itself — the template sets the custom property in an inline
   `style` on the #gallery ancestor, so a declaration on the stage wins over the
   inherited value without touching the vendor template's mechanism, and the
   fullscreen spacer above it keeps the source ratio.

   Doing this in CSS rather than by re-declaring product_page_image_medium in
   etc/view.xml keeps every cached image URL (and the img width/height attributes,
   hence the LCP aspect reservation) exactly where they are. */

.pdp-plate .gallery-stage {
  --gallery-ratio: 3 / 2;
}

/* The x-for figures already carry `object-contain`. This static one does not: it
   is the only gallery image in the server HTML (the LCP element — see the Phase 8
   note in gallery.phtml), it carries the 700x700 medium dimensions as width/height
   attributes, and with no object-fit it paints at the initial `fill`, stretching a
   landscape screenshot into a square until Alpine hydrates and hides it. */

.pdp-plate .gallery-stage-initial img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.pdp-plate-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E3E6E9;
  background: #fff;
}

.pdp-plate-caption {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #9FB0BC;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.pdp-plate-caption .pdp-n {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  color: #F9A21B;
  flex: none;
}

.pdp-plate-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.pdp-plate-thumbs button {
  width: 68px;
  height: 50px;
  padding: 3px;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8);
  transition: outline-color 0.15s ease, transform 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
  overflow: hidden;
}

.pdp-plate-thumbs button:hover {
  transform: translateY(-2px);
}

.pdp-plate-thumbs button[aria-current="true"] {
  outline-color: #F9A21B;
}

/* Concept used inline SVG stand-ins; production thumbs are <img>. */

.pdp-plate-thumbs button img,
.pdp-plate-thumbs button svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Lighter plate variant for porcelain bands and the related cards.
   (concept 586–606, .plate--light) */

.pdp-plate--light {
  background: #fff;
  border: 1px solid #E3E6E9;
  box-shadow: 0 18px 40px -22px rgba(11, 27, 40, 0.45);
}

/* ============================================================
   BAND / SECTION SCAFFOLDING + TYPE PRIMITIVES
   (concept .band/.section-head/.label/.display/.num/.reveal —
   only what has no mk-* equivalent; see docblock for reuse)
   ============================================================ */

.pdp-band {
  padding-block: clamp(3.5rem, 8vh, 6rem);
}

.pdp-band--light {
  background: #F8F9FA;
}

.pdp-band--tint {
  background: #EFF1F3;
}

.pdp-band--night {
  background: #0B1B28;
  color: #E9EDF0;
}

.pdp-band--night-deep {
  background: #081722;
  color: #E9EDF0;
}

/* Inline-style replacements (see docblock). */

.pdp-band--flush-top {
  padding-top: 0;
}

.pdp-band--flush-bottom {
  padding-bottom: 0;
}

/* Night-band ink adjustments (concept .on-night …). */

.pdp-band--night .pdp-label,
.pdp-band--night-deep .pdp-label {
  color: #9FB0BC;
}

.pdp-band--night h2,
.pdp-band--night h3,
.pdp-band--night-deep h2,
.pdp-band--night-deep h3 {
  color: #fff;
}

/* Display type primitive (concept .display). mk-h1/mk-h2 carry their own
   scales; this is the raw face for pdp-scale headings. Section-head H2s are
   the same face — they only add their own size and top margin (below), so
   they compose here rather than restating the five declarations. */

.pdp-display,
.pdp-section-head h2 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-wrap: balance;
}

/* Plain museum label, no tick (concept .label). For the label + tribar tick
   pairing (section heads, hero eyebrow) reuse .mk-eyebrow instead. */

.pdp-label {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: 0.22em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7A8B98;
}

/* Measured values: mono + tabular-nums (concept .mono/.num). */

.pdp-num,
.pdp-mono {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.pdp-section-head {
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

/* Face inherited from the .pdp-display rule above; only scale differs. */

.pdp-section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-top: 0.9rem;
}

.pdp-section-head p {
  color: #40596B;
  max-width: 34rem;
  margin-top: 0.9rem;
}

.pdp-band--night .pdp-section-head p,
.pdp-band--night-deep .pdp-section-head p {
  color: #9FB0BC;
}

/* Ghost button on a night surface. marketing.css keys its night variant to
   `.mk-surface-night .mk-btn-ghost`, and the PDP night surfaces deliberately do
   NOT carry .mk-surface-night (the hero because that class would flat-fill over
   its gradient — see the hero note below; the bands because bands.phtml emits
   its own surface classes). So the light default (`border-ink text-ink`) was the
   only rule matching, and the related band's ghost CTA measured 1.39:1 on
   night-deep. Restated here against the PDP surface classes — the same explicit
   selector-list mechanism the ink rules above use, and the same one theming.css
   uses for the night focus ring. Any new PDP night-surface class must be added
   to all three lists.
   Specificity: (0,2,0) / (0,3,0) on hover, over marketing.css's (0,1,0) /
   (0,2,0) — wins regardless of import order. */

.pdp-hero .mk-btn-ghost,
.pdp-band--night .mk-btn-ghost,
.pdp-band--night-deep .mk-btn-ghost {
  --tw-border-opacity: 1;
  border-color: rgb(233 237 240 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.pdp-hero .mk-btn-ghost:hover,
.pdp-band--night .mk-btn-ghost:hover,
.pdp-band--night-deep .mk-btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Scroll-reveal scaffolding (concept .reveal/.stagger). The `js` class and
   .in-view toggling arrive with the Phase-7 IntersectionObserver; without JS
   everything stays visible. */

.js .pdp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .pdp-reveal.in-view {
  opacity: 1;
  transform: none;
}

/* QA P1 (gallery fullscreen dialog trapped). .pdp-stagger used to run via a
   plain CSS `animation` (pdp-rise, fill-mode forwards) that started as soon
   as the element was inserted, independent of pdp-behavior.phtml's
   IntersectionObserver. A CSS animation's timeline is not that robust —
   backgrounded tabs, bfcache restores and similar interruptions can leave it
   never firing/completing, in which case the element is stuck holding its
   un-animated base declaration (`transform: translateY(18px)`) indefinitely.
   `.pdp-exhibit.pdp-stagger` (product-detail-page.phtml) is the gallery's
   direct ancestor, so a stuck non-none `transform` there makes it a CSS
   containing block for any `position: fixed` descendant — the gallery's
   fullscreen dialog (gallery.phtml `.gallery-stage`) — trapping the "fixed"
   overlay inside the gallery column instead of the viewport.

   Unified onto the SAME deterministic in-view + transition gate as
   .pdp-reveal above: pdp-behavior.phtml's IntersectionObserver now also
   toggles `.in-view` on `.pdp-stagger` targets (or adds it immediately under
   reduced motion / no-observer support), so the end state is only ever
   reached by an explicit class add, never left for an animation timeline to
   finish on its own. Ending at `transform: none` (not `translateY(0)`)
   matters even though both render identically: only the literal `none`
   keyword releases the containing block, so any stagger target that is ever
   an ancestor of a `position: fixed` element resolves cleanly. */

.js .pdp-stagger {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .pdp-stagger.in-view {
  opacity: 1;
  transform: none;
}

.js .pdp-stagger:nth-child(1) {
  transition-delay: 0.05s;
}

.js .pdp-stagger:nth-child(2) {
  transition-delay: 0.13s;
}

.js .pdp-stagger:nth-child(3) {
  transition-delay: 0.21s;
}

.js .pdp-stagger:nth-child(4) {
  transition-delay: 0.29s;
}

.js .pdp-stagger:nth-child(5) {
  transition-delay: 0.37s;
}

.js .pdp-license {
  opacity: 0;
  animation: pdp-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;
}

@keyframes pdp-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   NIGHT HERO (concept 256–276)

   The hero is NOT a .pdp-band: its background is the light-cone
   radial gradient that bottoms out at night-deep, so the tess
   strip below it (emitted by bands.phtml from the wrapper's
   `top_surface="night-deep"` argument) meets a matching tone.

   It deliberately does not carry .mk-surface-night: that class
   would paint a flat bg-night over this gradient (marketing.css
   is imported after this file). The two ink rules the hero needs
   from it are restated below instead.
   ============================================================ */

.pdp-hero {
  background:
        radial-gradient(90% 70% at 22% 0%, #14293A 0%, #0B1B28 48%,
        #081722 100%);
  color: #E9EDF0;
  padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(3.5rem, 8vh, 5.5rem);
  overflow: hidden;
}

.pdp-hero h1 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

.pdp-hero .mk-eyebrow {
  color: #9FB0BC;
  margin-bottom: 1.4rem;
}

.pdp-hero-dek {
  font-size: 1.2rem;
  line-height: 1.55;
  color: #9FB0BC;
  max-width: 34rem;
  margin-top: 1.5rem;
}

/* ============================================================
   HERO FACT RAIL (concept 281–293)
   ============================================================ */

.pdp-factrail {
  margin-top: 2.25rem;
  border-top: 1px solid #12283A;
  border-bottom: 1px solid #12283A;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.pdp-factrail > div {
  padding: 1rem 1rem 1rem 0;
  border-right: 1px solid #12283A;
}

.pdp-factrail > div:last-child {
  border-right: 0;
}

.pdp-factrail dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9FB0BC;
}

.pdp-factrail dd {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: #fff;
  margin-top: 0.35rem;
}

/* The rating and latest-release facts link to their bands (#reviews /
   #releases); the bare <a> inherits the cell's ink, so give it a hover/focus
   underline as the discoverable affordance. */

.pdp-factrail dd a:hover,
.pdp-factrail dd a:focus-visible {
  /* color: inherit beats the generic navy a:hover — navy is invisible on
       the night hero; these links stay the cell's white ink. */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pdp-factrail dd .pdp-sub {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-size: 0.76rem;
  color: #9FB0BC;
  margin-top: 0.2rem;
}

/* The sub line is sans by default (it is prose), but rule 5 wants mono +
   tabular-nums on every measured value — the release date lives in a sub. */

.pdp-factrail dd .pdp-sub.pdp-mono {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.pdp-factrail .pdp-stars {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #F9A21B;
  letter-spacing: 0.1em;
}

/* ============================================================
   LICENSE PANEL (concept 333–392)
   ============================================================ */

.pdp-license {
  position: sticky;
  top: calc(var(--pdp-rail-h) + 1.25rem);
  background: #F8F9FA;
  color: #133444;
  box-shadow: 0 30px 60px -20px rgba(11, 27, 40, 0.35);
  border-top: 4px solid #F05C3B;
}

.pdp-license-body {
  padding: clamp(1.5rem, 3vw, 2rem);
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pdp-price {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #133444;
  line-height: 1;
}

.pdp-price-terms {
  font-size: 0.9rem;
  color: #40596B;
}

.pdp-price-sub {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: #40596B;
}

.pdp-includes {
  list-style: none;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.55rem;
}

.pdp-includes li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Moss face-pair tick. */

.pdp-includes li::before {
  content: "";
  flex: none;
  margin-top: 0.42em;
  width: 11px;
  height: 7px;
  background:
        linear-gradient(to bottom right, #177A4A 49.5%, transparent 50%) left / 5.5px 7px no-repeat,
        linear-gradient(to top left, #177A4A 49.5%, transparent 50%) right / 5.5px 7px no-repeat;
}

.pdp-opts {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.pdp-opt-text label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}

.pdp-opt-text .pdp-req {
  color: #F05C3B;
}

.pdp-opt-help {
  display: block;
  font-size: 0.82rem;
  color: #40596B;
  margin-bottom: 0.5rem;
  line-height: 1.45;
}

.pdp-opt-text input[type="text"] {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  width: 100%;
  font-size: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #E3E6E9;
  background: #fff;
  color: #133444;
}

.pdp-opt-text input[type="text"]:focus {
  border-color: #F9A21B;
}

.pdp-opt-check {
  padding: 0.9rem 1rem;
  background: #EFF1F3;
  border-left: 3px solid #E3E6E9;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  transition: border-color 0.15s ease;
}

.pdp-opt-check:has(input:checked) {
  border-color: #F9A21B;
}

.pdp-opt-check input {
  margin-top: 0.35rem;
  accent-color: #F05C3B;
  width: 1.05rem;
  height: 1.05rem;
}

.pdp-opt-check .pdp-opt-title {
  font-weight: 600;
  font-size: 0.94rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Bridging to the blocks the panel reuses ----------
   The panel renders Hyvä's own price, options and add-to-cart blocks rather
   than reimplementing them (the form POST has to keep working), so a few
   rules translate their stock treatment into the concept's.
   (docs/pdp-rollout-plan.md Phase 4) */

/* product-page.css paints the PDP price gold-700/text-2xl — that was the old
   buy box. In the panel the price is the ink display number. Matching
   specificity (4 classes); this file is imported after product-page.css. */

.catalog-product-view .pdp-price-row .final-price .price-wrapper {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  color: #133444;
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Zero custom options: product-form.phtml still emits the form, with its own
   mb-6. Left alone that is an orphan gap between price and button. Rhythm
   comes from .pdp-opts / .pdp-buy instead. */

.pdp-license #product_addtocart_form {
  margin-bottom: 0;
}

/* The vendor options wrapper stands in for the concept's .pdp-opts. */

.pdp-license .product-options-wrapper {
  margin-top: 1.5rem;
}

.pdp-license .product-options-wrapper > .fieldset > h2 {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend .pdp-license .product-options-wrapper > .fieldset > h2 {
  color: #133444;
}

.pdp-license .product-options-wrapper > .fieldset > h2 {
  font-variant-caps: all-small-caps;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  color: #40596B;
  margin-bottom: 0.75rem;
}

/* Option help text, appended after each option by OptionNotePlugin. */

.pdp-license .product-options-wrapper .pdp-opt-help {
  margin: 0.35rem 0 0;
}

/* Qty + add-to-cart row; the button itself is .mk-btn.mk-btn-primary. */

.pdp-buy {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.pdp-buy input[type="number"] {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  width: 4.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  border: 1px solid #E3E6E9;
  background: #fff;
  color: #133444;
}

/* Both button vocabularies land here: .mk-btn is the marketing button, .btn
   .btn-primary is what Hyvä's own addtocart.phtml emits (already coral-600,
   so it is reused rather than overridden — see button.css). */

.pdp-buy .mk-btn,
.pdp-buy .btn {
  flex: 1;
}

/* ---------- Pre-purchase actions (concept 394–427) ----------
   For a technical buyer landing on a four-figure extension, "read the manual"
   and "get a demo login" are higher-intent than Add to Cart — they are how the
   evaluation actually starts. Full-width tiles directly under the button,
   each with an icon and a line saying what it gets you. They stay outlined
   rather than filled so coral keeps one filled CTA. */

.pdp-pre-actions {
  border-top: 1px solid #E3E6E9;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 0.65rem;
}

.pdp-pre-actions > .pdp-label {
  display: block;
  margin-bottom: 0.15rem;
}

.pdp-pre-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #E3E6E9;
  border-left: 3px solid #F05C3B;
  color: #133444;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.pdp-pre-action:hover {
  border-color: #F05C3B;
  box-shadow: 0 10px 22px -14px rgba(240, 92, 59, 0.75);
  transform: translateY(-1px);
}

.pdp-pre-action .pdp-pa-icon {
  width: 26px;
  height: 26px;
  color: #F05C3B;
  flex: none;
}

.pdp-pre-action .pdp-pa-label {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: block;
}

.pdp-pre-action .pdp-pa-sub {
  font-size: 0.82rem;
  color: #40596B;
  line-height: 1.4;
  display: block;
  margin-top: 0.1rem;
}

.pdp-pre-action .pdp-pa-go {
  width: 20px;
  height: 20px;
  color: #F05C3B;
  flex: none;
  transition: transform 0.16s ease;
}

.pdp-pre-action:hover .pdp-pa-go {
  transform: translateX(3px);
}

/* ---------- Rail demo button + mobile demo (concept 431–448) ----------
   The demo travels with the price, because it is the other thing a visitor
   might want at any scroll depth. */

.pdp-rail-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #C23C1C;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  box-shadow: inset 0 0 0 2px #F05C3B;
  transition: background 0.16s ease, color 0.16s ease;
}

.pdp-rail-demo:hover {
  background: #F05C3B;
  color: #fff;
}

.pdp-rail-demo svg {
  width: 17px;
  height: 17px;
}

/* Mobile bar: the demo keeps a place even at 4rem tall. */

.pdp-mobilebuy .pdp-mb-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #C23C1C;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  margin-left: auto;
}

.pdp-mobilebuy .pdp-mb-demo svg {
  width: 17px;
  height: 17px;
}

/* ============================================================
   TRY-BEFORE-YOU-BUY BAND (concept 452–478)
   ============================================================ */

.pdp-tryband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.pdp-trycard {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: #0F1D29;
  /* literal in the concept — no token */
  border: 1px solid #12283A;
  border-top: 3px solid #F05C3B;
  color: #E9EDF0;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pdp-trycard:hover {
  border-color: #F9A21B;
  border-top-color: #F05C3B;
  transform: translateY(-3px);
  box-shadow: 0 24px 46px -28px rgba(0, 0, 0, 0.9);
}

.pdp-trycard .pdp-tc-icon {
  width: 34px;
  height: 34px;
  color: #F9A21B;
}

.pdp-trycard h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: #fff;
}

.pdp-trycard p {
  color: #9FB0BC;
  font-size: 0.96rem;
}

.pdp-trycard .pdp-tc-go {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  margin-top: auto;
  padding-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #F05C3B;
  font-weight: 700;
}

.pdp-trycard .pdp-tc-go svg {
  width: 20px;
  height: 20px;
  transition: transform 0.18s ease;
}

.pdp-trycard:hover .pdp-tc-go svg {
  transform: translateX(4px);
}

/* ============================================================
   STORE-WIDE VALUE STRIP (concept 528–536)
   ============================================================ */

.pdp-claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: #E3E6E9;
}

.pdp-claim {
  background: #F8F9FA;
  padding: 1.75rem 1.5rem;
}

.pdp-claim .pdp-num-mark {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  color: #8F5A0C;
  letter-spacing: 0.12em;
}

.pdp-claim h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-size: 1.2rem;
  margin: 0.75rem 0 0.6rem;
}

.pdp-claim p {
  font-size: 0.94rem;
  color: #40596B;
  line-height: 1.55;
}

/* ============================================================
   COMPATIBILITY RESOLVER (concept 538–563)
   ============================================================ */

.pdp-resolver {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.pdp-resolver-panel {
  background: #F8F9FA;
  border: 1px solid #E3E6E9;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.pdp-resolver-panel > .pdp-label {
  display: block;
  margin-bottom: 1.1rem;
}

.pdp-selects {
  display: grid;
  gap: 0.9rem;
}

.pdp-selects label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A8B98;
  margin-bottom: 0.3rem;
}

/* QA P3: long-hand `background-color`, NOT the `background` shorthand, and the
   chevron gutter restated in the padding.

   @tailwindcss/forms' base layer both sets `appearance: none` on `select` and
   draws the replacement chevron itself, as a `background-image` data URI with
   `background-position: right .5rem center`, `background-size: 1.5em` and
   `padding-right: 2.5rem`. This rule is (0,1,1) and outranks that bare `select`
   rule, so the `background` shorthand was resetting background-image to none and
   `padding` was reclaiming the gutter — leaving two appearance-stripped controls
   with no arrow at all, indistinguishable from text inputs. Overriding only the
   colour and only the three other padding sides keeps the plugin's arrow, which
   is what every other styled select in the theme shows. */

.pdp-selects select {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  width: 100%;
  font-size: 0.95rem;
  padding: 0.65rem 2.5rem 0.65rem 0.7rem;
  border: 1px solid #E3E6E9;
  background-color: #fff;
  color: #133444;
}

.pdp-verdict {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid #177A4A;
  background: rgba(23, 122, 74, 0.07);
}

.pdp-verdict[data-state="no"] {
  border-color: #F05C3B;
  background: rgba(240, 92, 59, 0.08);
}

.pdp-verdict[data-state="maybe"] {
  border-color: #F9A21B;
  background: rgba(249, 162, 27, 0.1);
}

.pdp-verdict-head {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.pdp-verdict[data-state="yes"] .pdp-verdict-head {
  color: #177A4A;
}

.pdp-verdict[data-state="no"] .pdp-verdict-head {
  color: #C23C1C;
}

.pdp-verdict[data-state="maybe"] .pdp-verdict-head {
  color: #8F5A0C;
}

.pdp-verdict p {
  font-size: 0.9rem;
  color: #40596B;
  margin-top: 0.4rem;
}

table.pdp-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

/* Concept had this as an inline style on the caption (concept line 1131). */

table.pdp-spec caption {
  text-align: left;
  padding-bottom: 0.9rem;
}

table.pdp-spec th,
table.pdp-spec td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid #E3E6E9;
  vertical-align: top;
}

table.pdp-spec th {
  width: 12rem;
  font-weight: 600;
  color: #133444;
}

table.pdp-spec td {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: #40596B;
}

table.pdp-spec tr:last-child th,
table.pdp-spec tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   PROOF / REVIEWS (concept 565–581)
   ============================================================ */

.pdp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.pdp-quote {
  background: #F8F9FA;
  border-top: 3px solid #F9A21B;
  padding: 1.5rem;
}

.pdp-quote .pdp-stars {
  color: #F9A21B;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

/* The `background: none` group is an undo, not a design choice: product-page.css
   paints every `.catalog-product-view blockquote` as a porcelain-deep rounded
   panel (that rule serves authored CMS/description quotes and stays). Inside the
   .pdp-quote card that lands a grey box inside a porcelain box. Same specificity
   as that rule — (0,1,1) each — so this wins only because product-page.css is
   imported first; keep the import order in tailwind-source.css. */

.pdp-quote blockquote {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0.8rem 0 1rem;
  text-wrap: pretty;
}

.pdp-quote figcaption {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  color: #7A8B98;
}

.pdp-reviews {
  display: grid;
  gap: 1px;
  background: #E3E6E9;
  border-block: 1px solid #E3E6E9;
}

.pdp-review {
  background: #F8F9FA;
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}

.pdp-review .pdp-meta .pdp-stars {
  color: #F9A21B;
  letter-spacing: 0.12em;
}

.pdp-review .pdp-meta .pdp-who {
  font-weight: 600;
  margin-top: 0.4rem;
}

.pdp-review .pdp-meta .pdp-when {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  color: #7A8B98;
}

.pdp-review h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.pdp-review p {
  color: #40596B;
  font-size: 0.96rem;
}

.pdp-review p + p {
  margin-top: 0.7rem;
}

/* Write-a-review disclosure. Not in the concept — the concept never sited the review
   form at all. It renders in the reviews band when the product has reviews and in the
   proof band's empty state when it does not (see review_container.phtml's truth table),
   collapsed in both places: writing a review is a rare action and an open form is a
   large form-shaped hole in a reading page. Native <details>, so no JS and no CSP
   exception. */

.pdp-reviewform {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid #E3E6E9;
}

.pdp-reviewform > summary {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 0.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* ink.faint (#7A8B98) is only 3.33:1 on the porcelain card this disclosure
       sits in, and at 0.82rem/13.1px it needs 4.5:1. ink.soft is 6.9:1 there
       (hover still steps up to full ink). */
  color: #40596B;
}

.pdp-reviewform > summary::-webkit-details-marker {
  display: none;
}

.pdp-reviewform > summary::after {
  content: "+";
  margin-left: 0.6rem;
  color: #8F5A0C;
}

.pdp-reviewform[open] > summary::after {
  content: "\2212";
}

.pdp-reviewform > summary:hover {
  color: #133444;
}

/* ---------- The form INSIDE the disclosure (QA ledger P3) ----------
   The form is Hyvä's stock `Magento_Review::form.phtml` and stays stock: it
   carries the GraphQL submit mutation, the reCaptcha wiring and the rating
   radio group, and forking ~360 lines of vendor template to change a heading
   and a button class is a maintenance bill with no upside. Everything here is
   therefore scoped under `.pdp-reviewform`, which is the disclosure this theme
   puts around it (proof.phtml / review_container.phtml) — the same template
   keeps its stock chrome anywhere else it renders.

   The vendor's own utilities (`card`, `px-6`, `text-xl`, `mt-3`) are UNDONE
   here rather than removed for that same reason. Utilities are emitted after
   this component layer (see tailwind-source.css import order), so every undo
   below has to out-specify them — hence the `#review-form` / two-class
   selectors. Do not "simplify" them down to one class.

   Focus rings are NOT restated: theming.css already gives
   `.pdp-reviewform .form-input:focus-visible` the 3px/3px gold ring, and the
   generic `:focus-visible` rule covers the radios and the submit button. */

/* Vendor wrapper: `mx-auto py-6` centering + the `.card` panel. Neither is
   wanted — the disclosure IS the panel. A reading measure is imposed instead,
   so the fields do not stretch the full band width. */

.pdp-reviewform > #review-form {
  margin: 0;
  padding: 0.4rem 0.2rem 1.6rem;
  max-width: 34rem;
}

.pdp-reviewform #review-form > .card {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Duplicate heading (QA ledger P3). The vendor emits "Write Your Own Review"
   unconditionally, immediately under a <summary> that already says "Write a
   review" / "Write the first review". Suppressed here rather than in a
   template override because the heading is the ONLY thing an override would
   change — see the note above. It is a plain <div>, not a heading element, so
   nothing is removed from the accessibility tree that the summary does not
   already supply. `.text-xl` identifies it; `> .card >` keeps this off the
   guest-branch <div> the vendor gives the same id to. */

.pdp-reviewform #review-form > .card > .text-xl {
  display: none;
}

/* "You're reviewing: <product>" — the vendor's <legend>. Museum-label mono,
   matching .pdp-label, with the product name stepping up to full ink. */

.pdp-reviewform .review-form > fieldset > legend {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  padding: 0;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  color: #40596B;
}

.pdp-reviewform .review-form > fieldset > legend .font-semibold {
  color: #133444;
}

.pdp-reviewform #product-review-table legend {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #40596B;
}

/* Rating radios. gold.700, not the gold.DEFAULT the display stars use: these
   are an interactive control, so 1.4.11 wants 3:1 against the porcelain band
   and gold.DEFAULT does not clear it. The vendor toggles `fill-current` on the
   chosen star, so one color drives both the outline and the filled state. */

.pdp-reviewform .rating-summary {
  display: flex;
  gap: 0.15rem;
  color: #8F5A0C;
}

/* Fields. Same treatment as the buy box's quantity input: white on the
   porcelain band, hairline border, square. */

.pdp-reviewform .form-input {
  background: #fff;
  border: 1px solid #E3E6E9;
  border-radius: 0;
  color: #133444;
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  margin-top: 0.7rem;
}

/* The vendor labels the fields with sr-only <label>s and placeholders, so the
   placeholder IS the visible label and needs 4.5:1 — ink.faint (3.5:1 on
   white) would not do. */

.pdp-reviewform .form-input::-moz-placeholder {
  color: #40596B;
  opacity: 1;
}

.pdp-reviewform .form-input::placeholder {
  color: #40596B;
  opacity: 1;
}

/* Submit. The vendor emits `.btn .btn-primary`, which is already the coral
   fill the marketing primary uses (button.css), so only mk-btn's GEOMETRY is
   restated — a full-bleed flex block is wrong inside a 34rem form. */

.pdp-reviewform .review-form .btn {
  display: inline-flex;
  border-radius: 0.375rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  width: auto;
  margin-top: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}

/* `.text-green` / `.text-red` are vendor utilities with no token behind them in
   this build (the palette names its greens `moss` and its reds `coral`), so
   they compile to nothing and the submit feedback would render as body ink.
   Map them to the tokens that mean the same thing. */

.pdp-reviewform .review-form .text-green {
  color: #0F5E39;
}

.pdp-reviewform .review-form .text-red {
  color: #C23C1C;
}

.pdp-empty {
  background: #EFF1F3;
  border-left: 3px solid #E3E6E9;
  padding: 1.25rem 1.4rem;
  color: #40596B;
  font-size: 0.95rem;
}

/* ============================================================
   OVERVIEW — feature rows (concept 586–606; .pdp-plate--light
   itself lives with the plates at the top of the file)
   ============================================================ */

.pdp-features-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid #E3E6E9;
}

.pdp-features-row:first-child {
  border-top: 0;
}

.pdp-features-row:nth-child(even) .pdp-features-media {
  order: -1;
}

.pdp-features-row h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-bottom: 0.9rem;
}

.pdp-features-row p {
  color: #40596B;
  margin-bottom: 0.8rem;
}

.pdp-features-row p:last-child {
  margin-bottom: 0;
}

.pdp-features-row b {
  color: #133444;
}

.pdp-features-media {
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
}

/* Concept used inline SVG stand-ins; production media are <img>. */

.pdp-features-media img,
.pdp-features-media svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E3E6E9;
}

/* ============================================================
   OVERVIEW — AUTHORED .features CONTENT (concept 586–606)

   The rules above describe the concept's own markup. These do the
   real job: they put the SAME layout onto the `.features` blocks
   already authored in every product description, without anyone
   re-authoring a single product (plan Phase 6; binding map's
   Overview row — "rendered verbatim, the template contributes
   layout only").

   Authored shape, unchanged since Luma:

       <div class="features">
         <div> <h3>…</h3> <p>…</p> … <img> </div>   <- one row
         <div> … </div>
       </div>

   product-page.css floats the img right (and left on even rows) and
   paints even rows with a tinted, rounded panel. Here each row
   becomes the concept's two-column grid instead: every non-media
   child stacks in one column and the image spans the full height of
   the other, sides alternating by row, image on a light plate
   (rule 4 — media never sits bare on a wall).

   SPECIFICITY. The old rules survive until Phase 8 deletes them, and
   product-page.css is imported BEFORE this file, so both order and
   specificity favour these. Every selector here is scoped by
   `.pdp-overview-body` (the description block's wrapper class, set in
   catalog_product_view.xml), which adds a class to each old selector's
   count and therefore always wins — no !important anywhere. That
   scoping is also why these rules cannot leak onto `.features` blocks
   authored into other CMS pages.

   PHASE 8 outcome: product-page.css's `.features` rules were KEPT.
   They are unscoped and `.features` is authored CMS markup that may
   also live on non-PDP pages (DB content, not visible from this
   repo), so removing them could not be proven safe. The "undo"
   overrides below therefore stay too. If a content export ever shows
   `.features` is product-description-only, both go together.

   The media child is matched in several shapes because authored markup
   varies: a bare <img> or <picture>, either one wrapped in <p> or <a>,
   or a <figure>. (<picture> was missing until deployed QA — most real
   descriptions wrap media in it, so most rows fell straight through to
   the legacy float layout.) A row with no image at all stays
   single-column rather than leaving half the row empty. :has() is
   required for that and is why these are hand-written CSS, not Tailwind
   utilities.

   SPECIFICITY, part 2 — why every compound inside a :has() below is
   written as `> :where(…)`. :has() takes the specificity of its most
   specific argument, so the original `:has(> img, > p > img, …)`
   contributed two type selectors: the catch-all "everything goes in
   column 1" rule computed (0,2,3) and BEAT the media rules at (0,2,2),
   forcing bare <img>/<figure> media into the text column (the <p>/<a>
   shapes only appeared to work, by source-order tie). :where() zeroes
   its argument, so the row matcher and the catch-all sit at (0,2,1) and
   every media rule at (0,2,2) wins for every shape. The even-row mirror
   is the same arithmetic one pseudo-class higher: (0,3,1) vs (0,3,2).
   NOTE the combinators stay OUTSIDE the :where(): a relative selector
   (`> img`) is only legal in :has(), not in :where(), so `:where(> img)`
   would invalidate the whole rule. */

.pdp-overview-body .features {
  margin-top: 0;
}

.pdp-overview-body .features > div {
  /* undo: product-page.css @screen md padding + even-row tint panel */
  padding: clamp(2rem, 5vh, 3.5rem) 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid #E3E6E9;
}

.pdp-overview-body .features > div:first-child {
  border-top: 0;
  padding-top: 0;
}

/* A row whose only content is a heading is a caption for the rows that follow,
   not a row of its own. Full band chrome turned it into a ~157px ruled empty
   box. Keep it as a heading with breathing room above and no rule of its own —
   the next row's border-top is what separates it from the content below.
   :where() again so this stays at (0,2,1) and simply overrides the base
   `> div` rule (also (0,2,1)) by source order. It deliberately does not
   out-rank the :first-child rule above it ((0,3,1)) — a heading-only row
   in first position keeps that rule's padding-top:0. */

.pdp-overview-body .features > div:has(> :where(h3:only-child)) {
  padding: clamp(1.25rem, 3vh, 2rem) 0 0;
  border-top: 0;
}

/* Row gap is 0 on purpose: the text children are flat siblings (CMS markup has
   no wrapper div), so each one is its own implicit grid row, and the media must
   span them all. `grid-row: 1 / -1` cannot do that — negative lines resolve
   against the EXPLICIT grid only, so with no explicit rows it collapses to a
   single row and every paragraph lands BELOW the image (QA follow-up, seen live
   on Subscriptions). The media instead spans a fixed 40 rows; the surplus rows
   are empty and zero-height, which is only safe because row-gap is 0 — any row
   gap would multiply across the phantom rows. Vertical rhythm inside the text
   column comes from the prose margins, which the band already sets. */

.pdp-overview-body .features > div:has(> :where(img, picture, figure), > :where(p, a) > :where(img, picture)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  -moz-column-gap: clamp(1.5rem, 4vw, 3.5rem);
       column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 0;
  align-items: center;
}

/* Text side: every child lands in column 1, one grid row each. */

.pdp-overview-body .features > div:has(> :where(img, picture, figure), > :where(p, a) > :where(img, picture)) > * {
  grid-column: 1;
}

/* Media side: column 2, spanning every text row (see the span note above) so it
   centres against the copy. */

.pdp-overview-body .features > div > img,
.pdp-overview-body .features > div > picture,
.pdp-overview-body .features > div > p:has(> :where(img, picture)),
.pdp-overview-body .features > div > a:has(> :where(img, picture)),
.pdp-overview-body .features > div > figure {
  grid-column: 2;
  grid-row: 1 / span 40;
  align-self: center;
  margin: 0;
}

/* Odd rows put the media right, even rows put it left (concept 586–606). */

.pdp-overview-body .features > div:nth-child(even):has(> :where(img, picture, figure),
    > :where(p, a) > :where(img, picture)) > * {
  grid-column: 2;
}

.pdp-overview-body .features > div:nth-child(even) > img,
.pdp-overview-body .features > div:nth-child(even) > picture,
.pdp-overview-body .features > div:nth-child(even) > p:has(> :where(img, picture)),
.pdp-overview-body .features > div:nth-child(even) > a:has(> :where(img, picture)),
.pdp-overview-body .features > div:nth-child(even) > figure {
  grid-column: 1;
  grid-row: 1 / span 40;
}

/* The plate (rule 4) — the .pdp-plate--light values, restated on the image
   itself because the authored markup has no element to carry that class and
   adding one would mean rewriting content. Scoped to
   the row's own media child on purpose: `.features .trusted-brands img` is a
   logo strip, not product media, and must keep its bare treatment. */

.pdp-overview-body .features > div > img,
.pdp-overview-body .features > div > p > img,
.pdp-overview-body .features > div > a > img,
.pdp-overview-body .features > div > picture img,
.pdp-overview-body .features > div > p > picture img,
.pdp-overview-body .features > div > a > picture img,
.pdp-overview-body .features > div > figure img {
  /* undo: product-page.css float-right/float-left, 40% cap, border-night */
  float: none;
  max-width: 100%;
  margin: 0;
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
  background: #fff;
  border: 1px solid #E3E6E9;
  box-shadow: 0 18px 40px -22px rgba(11, 27, 40, 0.45);
}

/* <picture> is an inline wrapper by default; as a grid item it has to fill its
   track or the plated <img> inside it centres at intrinsic width. */

.pdp-overview-body .features > div > picture,
.pdp-overview-body .features > div > p > picture,
.pdp-overview-body .features > div > a > picture {
  display: block;
  width: 100%;
}

/* Safety net for shapes the lists above do not name (an <img> nested deeper
   than one wrapper, e.g. <p><a><img>). Those still match product-page.css's
   `@screen md .features img` and would float right at a 40% cap inside the
   grid. Undo just the float layout — the plate treatment stays limited to the
   named shapes on purpose. `.trusted-brands` is excluded because it is a logo
   strip, not product media; the exclusion is wrapped in :where() so :not() adds
   no specificity and this rule stays at (0,2,1), below the (0,2,2) plate rules
   above it. */

.pdp-overview-body .features img:not(:where(.trusted-brands img)) {
  float: none;
  max-width: 100%;
  margin-block: 0;
  margin-inline: 0;
}

/* ============================================================
   LICENSING / SUPPORT / INSTALL COLUMNS (concept 609–629)
   ============================================================ */

.pdp-cols3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* auto-fit collapses the tracks it cannot fill, so a band that renders only one
   column gets a single track the full width of the container and its 0.96rem
   copy runs a 100+ character measure. Cap a lone column at the same measure the
   section-head deck uses; two or more columns are unaffected. */

.pdp-cols3 > :only-child {
  max-width: 34rem;
}

.pdp-cols3 h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}

.pdp-cols3 p,
.pdp-cols3 li {
  color: #9FB0BC;
  font-size: 0.96rem;
}

.pdp-cols3 ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.pdp-cols3 ul li {
  padding-left: 1.1rem;
  position: relative;
}

.pdp-cols3 ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #F9A21B;
}

/* Text links in the licensing columns. Coral is Add to Cart only (rule 1) and gold is
   not an action color (rule 2), so these are on-night ink with a gold underline on
   hover — the same restraint the try cards use. */

.pdp-cols3 a {
  color: #E9EDF0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: #12283A;
  transition: text-decoration-color 0.18s ease;
}

.pdp-cols3 a:hover {
  text-decoration-color: #F9A21B;
}

pre.pdp-code {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  margin-top: 1rem;
  background: #081722;
  border: 1px solid #12283A;
  border-left: 3px solid #F9A21B;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  color: #E9EDF0;
  line-height: 1.7;
}

pre.pdp-code .pdp-c {
  color: #9FB0BC;
}

/* ============================================================
   RELEASE LEDGER (concept 631–652)
   ============================================================ */

.pdp-ledger {
  border-top: 1px solid #E3E6E9;
}

.pdp-ledger details {
  border-bottom: 1px solid #E3E6E9;
}

.pdp-ledger summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 5.5rem 8.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.95rem 0.5rem 0.95rem 0;
  transition: background 0.15s ease;
}

.pdp-ledger summary::-webkit-details-marker {
  display: none;
}

.pdp-ledger summary:hover,
.pdp-ledger details[open] summary {
  background: rgba(19, 52, 68, 0.03);
}

.pdp-ledger .pdp-ver {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pdp-ledger .pdp-date {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  grid-column: 2;
  font-size: 0.86rem;
  color: #7A8B98;
  font-variant-numeric: tabular-nums;
}

/* Both cells are placed explicitly rather than by source order: release_date is
   nullable, so a row without one emits no .pdp-date at all (see the template) and
   auto-placement would otherwise slide its .pdp-head up into the date's 8.5rem
   track, breaking the column the other 41 rows read down. A ledger's whole value
   is that the columns line up; one row's blank date column is the correct
   rendering of a missing date, an unlabelled fragment in the wrong column is not. */

.pdp-ledger .pdp-head {
  grid-column: 3;
  font-size: 0.98rem;
}

.pdp-ledger .pdp-tag {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.5rem;
  border: 1px solid #E3E6E9;
  color: #7A8B98;
  white-space: nowrap;
}

/* Gold hairline flags feature releases (a sanctioned gold-highlight use). */

.pdp-ledger .pdp-tag--feat {
  border-color: #F9A21B;
  color: #8F5A0C;
}

.pdp-ledger .pdp-body {
  padding: 0 0.5rem 1.2rem 5.5rem;
}

.pdp-ledger .pdp-body ul {
  margin-left: 1.1rem;
  color: #40596B;
  font-size: 0.94rem;
}

/* Expand-all bar: sits between the section head and the ledger, right-aligned
   over the ledger's own measure. .pdp-ledger-toggle reuses .pdp-label's mono
   small-caps face (paired in the markup, not a color/weight override here) and
   adds only the interactive affordances a plain label doesn't need. */

.pdp-ledger-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.pdp-ledger-toggle {
  cursor: pointer;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pdp-ledger-toggle:hover,
.pdp-ledger-toggle:focus-visible {
  color: #133444;
  border-bottom-color: #F9A21B;
}

/* ============================================================
   RELATED + CTA BAND (concept 654–679)
   ============================================================ */

.pdp-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* A product with a single related item: auto-fit collapses the empty tracks,
   and the lone card inflated to the full container measure — a ~500px artwork
   upscaled past 1400px (seen live on CyberSource). Cap and center just that
   card. The cap must NOT go on the track max: auto-fit computes its column
   count from a definite track max, so minmax(14rem, 26rem) squeezed a 4-card
   row down to 2 columns. */

.pdp-related > :only-child {
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}

.pdp-rcard {
  background: #0F1D29;
  /* literal in the concept — no token */
  border: 1px solid #12283A;
  padding: 1.25rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.pdp-rcard:hover {
  border-color: #F9A21B;
  transform: translateY(-3px);
}

/* Mini plate for the related-card art. */

.pdp-rcard .pdp-rart {
  display: block;
  background: #fff;
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.9);
}

.pdp-rcard .pdp-rart img,
.pdp-rcard .pdp-rart svg {
  display: block;
  width: 100%;
  height: auto;
}

.pdp-rcard .pdp-rname {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  margin-top: 0.45rem;
}

.pdp-rcard .pdp-rmeta {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  color: #9FB0BC;
}

.pdp-rcard .pdp-rprice {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  color: #F9A21B;
  margin-top: auto;
  padding-top: 0.4rem;
}

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

.pdp-ctaband h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
}

.pdp-ctaband p {
  color: #9FB0BC;
  max-width: 34rem;
  margin: 1rem auto 2rem;
}

.pdp-ctaband .pdp-acts {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   STICKY RAIL (concept 484–522)
   ============================================================ */

/* Hidden state is visibility:hidden, not transform alone. A translated-away
   fixed bar still takes focus, and because it is fixed the browser cannot
   scroll it into view — eight tab stops used to land on nothing. visibility
   is transitioned with a delay equal to the slide so the bar stays paintable
   for the whole slide-out and only then goes non-interactive; on the way in
   it flips with no delay. (prefers-reduced-motion: theming.css clamps
   transition-delay to 0, so both states just snap — no dead interactive
   window.) */

.pdp-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: rgba(248, 249, 250, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #E3E6E9;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}

.pdp-rail.is-pinned {
  transform: none;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

/* The pinned rail covers the sticky .page-header (z 40, rail z 55), so it has
   to be at LEAST as tall as the header or the header's bottom edge shows as a
   dark sliver under it. The header is min-h-[4.25rem] + 1px border today but
   it wraps at narrow widths, so the height is measured at runtime by
   pdp-behavior.phtml into --pdp-header-h; the fallback here is the unwrapped
   69px for the no-JS/pre-measure case. The rail is never visible unpinned, so
   growing it to the header's height has no other visual consequence. */

.pdp-rail .mk-container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: max(var(--pdp-rail-h), var(--pdp-header-h, 4.3125rem));
}

/* Shrink priority. The wrap is capped, so the rail runs out of room at every
   large viewport, not just narrow ones — a viewport media query is the wrong
   lever. Instead the name yields first (flex-shrink 6, ellipsised): it is the
   least useful thing in the rail and the title is never far away. The nav
   shrinks after it (shrink 1) and then scrolls; only the two actions are
   fixed. The nav USED to be flex:0 0 auto on the assumption that nothing ever
   had to scroll — that was wrong: with six bands below ~437px the nav simply
   overflowed .mk-container, its own overflow-x never engaged (scrollWidth ===
   clientWidth), and the last item was unreachable. */

.pdp-rail-name {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 6 auto;
  min-width: 0;
  max-width: 15rem;
}

/* flex-shrink 1 + min-width 0 is what makes overflow-x: auto mean anything:
   the nav can now be narrower than its content, so it scrolls instead of
   pushing out of the container. margin-inline: auto still centres it while
   there IS free space (auto margins only absorb positive free space), and
   scroll-padding keeps a partially scrolled item from sitting flush. */

.pdp-rail-nav {
  display: flex;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  margin-inline: auto;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 0.25rem;
  scrollbar-width: none;
}

/* The nav's children are a real <ul>/<li> list for AT item counts;
   display: contents lifts the <a>s back up as the flex items so the
   layout above is unchanged. Anchors keep their own focus/hit styling. */

.pdp-rail-nav ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-rail-nav li {
  display: contents;
}

.pdp-rail-nav::-webkit-scrollbar {
  display: none;
}

.pdp-rail-nav a {
  font-size: 0.86rem;
  font-weight: 600;
  color: #40596B;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Gold underline: highlight, never action (sanctioned gold use). */

.pdp-rail-nav a:hover,
.pdp-rail-nav a.is-current {
  color: #133444;
  border-color: #F9A21B;
}

.pdp-rail-buy {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pdp-rail-buy .pdp-num {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ============================================================
   MOBILE BUY BAR (concept 681–695)
   ============================================================ */

/* Bar height. Everything that has to sit clear of the bar (the page's bottom
   padding, the third-party chat launcher) keys off this. pdp-behavior.phtml
   overwrites it with the measured height once the bar is displayed; the
   value here is the no-JS fallback and matches the bar as authored. */

:root {
  --pdp-mobilebuy-h: 4.5rem;
}

/* visibility: see the .pdp-rail note above — same off-canvas tab-stop bug,
   same fix. translateY(120%) is a longer travel than the rail's, but the
   delay only has to outlast the transition, not the distance. */

.pdp-mobilebuy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: rgba(248, 249, 250, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #E3E6E9;
  padding: 0.7rem clamp(1.25rem, 5vw, 4rem);
  display: none;
  align-items: center;
  gap: 1rem;
  transform: translateY(120%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}

.pdp-mobilebuy.is-pinned {
  transform: none;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.pdp-mobilebuy .pdp-num {
  font-weight: 700;
  font-size: 1.1rem;
}

.pdp-mobilebuy .mk-btn,
.pdp-mobilebuy .btn {
  margin-left: auto;
}

/* ============================================================
   DEMO-LOGIN MODAL (ParadoxLabs_Download demo-modal.phtml)

   The concept has no modal, so there is nothing to port: this is the
   Exhibit vocabulary applied to a dialog that already existed. A
   credentials form is not a band — it gets the plate's surface (white
   over porcelain, hairline, the plate's own deep shadow), the display
   face on its heading, the museum label and the coral mk-btn, and
   stops there. Restraint is the point; the page behind it is the
   exhibit, this is a form.

   Selectors are scoped to .pdp-demo-dialog and target elements rather
   than classes so the dotdigital form markup keeps its existing class
   names (.form, .form-input) and its focus-trap wiring untouched.
   ============================================================ */

.pdp-demo-scrim {
  /* night at ~80%, replacing the stock gray-900/75: the PDP's own wall
       colour is what should be behind a dialog opened from it. */
  background: rgba(11, 27, 40, 0.8);
}

.pdp-demo-dialog {
  background: #F8F9FA;
  border: 1px solid #E3E6E9;
  /* The one accent: the same gold top edge the staged panels use, so the
       dialog reads as part of this page and not as a browser chrome dialog. */
  border-top: 3px solid #F9A21B;
  box-shadow: 0 34px 64px -24px rgba(0, 0, 0, 0.75);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.pdp-demo-dialog .pdp-label {
  margin-bottom: 0.35rem;
}

.pdp-demo-dialog h3 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.2;
  color: #133444;
}

.pdp-demo-dialog h3 + p {
  margin-top: 0.3rem;
  font-size: 0.95rem;
}

.pdp-demo-dialog form {
  margin-top: 1.6rem;
}

/* Same field idiom as the compatibility resolver's .pdp-selects labels —
   small caps rather than the sitewide sentence-case form label. */

.pdp-demo-dialog label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A8B98;
  margin-bottom: 0.3rem;
}

/* The required marker is authored as <em>; coral is the only accent that
   carries meaning, and it must not italicise a single glyph. */

.pdp-demo-dialog label em {
  font-style: normal;
  color: #C23C1C;
  margin-left: 0.2rem;
}

.pdp-demo-dialog input[type="text"],
.pdp-demo-dialog input[type="email"] {
  width: 100%;
  font-size: 0.95rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #E3E6E9;
  border-radius: 0;
  background-color: #fff;
  color: #133444;
}

/* The honeypot (`input#hideit`) is `.hidden`; the rule above would otherwise
   have no effect on it, but keep it explicitly out of the box model anyway. */

.pdp-demo-dialog input.hidden {
  display: none;
}

/* ============================================================
   RESPONSIVE (concept 718–736)

   UNPROVEN: the concept was authored and only ever eyeballed at
   1440px. These blocks are ported as written, pending the Phase 8
   responsive QA pass. Concept-only chrome rules (.site-nav,
   .switcher) and the .hero-grid stack (built with Tailwind
   utilities in the template phases) were dropped from them.
   ============================================================ */

/* The exact complement of the hero grid's [@media(min-width:63rem)]: variants
   in product-detail-page.phtml — every viewport matches exactly one of the two.
   This was `max-width: 62.9375rem` to avoid overlapping at the 63rem boundary;
   that shaved a real hole instead. Viewports strictly between 62.9375rem and
   63rem (1007–1008px — reachable with fractional device pixel ratios and 150%
   Windows scaling) matched NEITHER, so the desktop rail buy widget rendered
   over a single-column page with no mobile buy bar. `not all and (min-width: …)`
   is exhaustive by construction and cannot drift from the template's value
   again — if that variant moves, move this with it. */

@media not all and (min-width: 63rem) {
  .pdp-license {
    position: static;
  }

  .pdp-resolver {
    grid-template-columns: 1fr;
  }

  .pdp-features-row {
    grid-template-columns: 1fr;
  }

  .pdp-features-row:nth-child(even) .pdp-features-media {
    order: 0;
  }

  /* Authored .features rows collapse to one column: media below the copy on
       every row, both sides included (the alternation only means anything when
       there are two columns to alternate between). Row gap comes back here —
       the media is grid-row auto below, so the desktop span's phantom rows
       don't exist and the gap is what separates copy from media. */

  .pdp-overview-body .features > div:has(> :where(img, picture, figure), > :where(p, a) > :where(img, picture)) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .pdp-overview-body .features > div:has(> :where(img, picture, figure), > :where(p, a) > :where(img, picture)) > *,
    .pdp-overview-body .features > div:nth-child(even):has(> :where(img, picture, figure),
        > :where(p, a) > :where(img, picture)) > * {
    grid-column: 1;
  }

  .pdp-overview-body .features > div > img,
    .pdp-overview-body .features > div > picture,
    .pdp-overview-body .features > div > p:has(> :where(img, picture)),
    .pdp-overview-body .features > div > a:has(> :where(img, picture)),
    .pdp-overview-body .features > div > figure,
    .pdp-overview-body .features > div:nth-child(even) > img,
    .pdp-overview-body .features > div:nth-child(even) > picture,
    .pdp-overview-body .features > div:nth-child(even) > p:has(> :where(img, picture)),
    .pdp-overview-body .features > div:nth-child(even) > a:has(> :where(img, picture)),
    .pdp-overview-body .features > div:nth-child(even) > figure {
    grid-column: 1;
    grid-row: auto;
  }

  .pdp-review {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .pdp-rail-buy {
    display: none;
  }

  .pdp-mobilebuy {
    display: flex;
  }

  /* Tap targets. The rail nav's 0.3rem padding gives a 32px hit area, under
       the 44px minimum. A fixed min-height with the anchor as a centred flex
       box is used rather than more block padding so the number is exact and
       independent of the inherited line-height; 44px still clears the ~61-69px
       bar, so nothing about the bar's own height moves. */

  .pdp-rail-nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Reserve the bar's own height at the end of the page. The padding goes on
       the footer's night band rather than on body/main so the reserved strip
       is dark like the footer above it — body padding would show a porcelain
       band under the footer whenever the bar is slid out. */

  .catalog-product-view .page-footer > .mk-surface-night {
    padding-bottom: calc(var(--pdp-mobilebuy-h) + 1rem);
  }

  /* Zendesk. The messenger launcher is an iframe the widget injects at
       z-index 2147483000 — it is not in this repo and cannot be out-stacked,
       so the only fix is to move it. There is no Zendesk snippet template in
       the theme or in app/code (the tag is injected outside the codebase), so
       a zE('messenger:set', 'zIndex'/offset) call has nowhere to live that we
       control; styling the iframe element from the parent document is the
       robust option, and it degrades to "no offset" rather than to an error
       if the widget is ever removed. !important because the widget sets the
       launcher's position inline. Scoped to the PDP body class + the mobile
       breakpoint so it never moves the launcher on any other page.

       The offset is unconditional on the PDP rather than tied to
       .pdp-mobilebuy.is-pinned: a launcher that hops up and down as the bar
       pins is worse than one that simply sits a little higher on product
       pages. */

  .catalog-product-view iframe#launcher-frame {
    bottom: calc(var(--pdp-mobilebuy-h) + 0.75rem) !important;
  }
}

@media (max-width: 40rem) {
  .pdp-ledger summary {
    grid-template-columns: 1fr auto;
    row-gap: 0.25rem;
  }

  .pdp-ledger .pdp-head {
    grid-column: 1 / -1;
  }

  .pdp-ledger .pdp-body {
    padding-left: 0.5rem;
  }

  /* Two columns, pinned. auto-fit still resolves to 3-5 tracks between ~30
       and 40rem, and the last-row border reset below is nth-child arithmetic
       that only holds for a known column count. Pinning it also keeps the
       fact cells legible instead of squeezing five 7.5rem tracks into a phone.
    */

  .pdp-factrail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-factrail > div {
    border-right: 0;
    border-bottom: 1px solid #12283A;
  }

  /* Last row only. .pdp-factrail already draws its own closing border-bottom,
       so a cell border there stacks against it and renders as a double rule.
       :last-child covers the right-hand cell (and a lone odd cell);
       :nth-last-child(2):nth-child(odd) is the left-hand cell of a full last
       row — on an odd count that cell is on the right of the row above, so the
       :nth-child(odd) test correctly skips it. The border-right reset at the
       top of this component is a separate rule and stays. */

  .pdp-factrail > div:last-child,
    .pdp-factrail > div:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* ============================================================
   REDUCED MOTION (concept 738–742)

   theming.css already carries the sitewide universal
   animation/transition duration clamp and scroll-behavior reset;
   these are the PDP-specific opacity/transform end-states so
   reveal targets are simply visible with no travel.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js .pdp-reveal,
    .js .pdp-stagger,
    .js .pdp-license {
    opacity: 1;
    transform: none;
  }
}

.wishlist-widget .price-box .price-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.wishlist-widget .price-box .old-price {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.modal {
  /*
   * TODO: add tailwind classes used for the cart and modal styles.
   * This will make the modal and off-canvas styles theme specific and more adjustable.
   */
}

.backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: flex;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.25;
}

.snap {
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.snap::-webkit-scrollbar {
  display: none;
}

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

body {
  overflow-y: scroll;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.page-main {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.columns {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

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

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

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

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

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

.columns {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

#review-form > .columns, #customer-review-list > .columns {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.columns {
  grid-template-rows: auto minmax(0, 1fr);
}

.columns .main {
  order: 2;
}

.columns .sidebar {
  order: 3;
}

.product-main-full-width .columns {
  max-width: none;
}

.page-main-full-width .columns {
  max-width: none;
  padding-left: 0px;
  padding-right: 0px;
}

.page-with-filter .columns .sidebar-main {
  order: 1;
}

@media (min-width: 640px) {
  .page-layout-2columns-left .columns, .page-layout-2columns-right .columns, .page-layout-3columns .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-layout-2columns-left .columns .main, .page-layout-2columns-right .columns .main, .page-layout-3columns .columns .main {
    grid-column: span 2 / span 2;
  }

  .page-layout-2columns-left .columns .sidebar, .page-layout-2columns-right .columns .sidebar, .page-layout-3columns .columns .sidebar {
    order: 3;
  }

  .page-with-filter .columns .sidebar-main {
    order: 1;
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 768px) {
  .page-layout-2columns-left .columns, .page-layout-2columns-right .columns, .page-layout-3columns .columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-layout-2columns-left .columns .main, .page-layout-2columns-right .columns .main, .page-layout-3columns .columns .main {
    grid-row: span 2 / span 2;
  }

  .page-layout-2columns-left .columns .sidebar, .page-layout-2columns-right .columns .sidebar, .page-layout-3columns .columns .sidebar {
    grid-column: span 1 / span 1;
  }

  .page-layout-2columns-left .columns .main, .page-layout-3columns .columns .main {
    grid-column-start: 2 !important;
  }

  .page-layout-2columns-left .columns .sidebar, .page-layout-3columns .columns .sidebar {
    order: 1;
  }

  .page-layout-2columns-left .columns .sidebar ~ .sidebar-additional, .page-layout-3columns .columns .sidebar ~ .sidebar-additional {
    order: 3;
  }

  .page-layout-2columns-right .sidebar-main, .page-layout-2columns-right.page-with-filter .sidebar-main {
    order: 3;
  }
}

@media (min-width: 1024px) {
  .page-layout-2columns-left .columns, .page-layout-2columns-right .columns, .page-layout-3columns .columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-layout-2columns-left .columns .main, .page-layout-2columns-right .columns .main {
    grid-column: span 3 / span 3;
  }

  .page-layout-3columns .columns .sidebar-additional {
    grid-column-start: 4;
  }
}

.product-image-container {
  width: 100% !important;
}

.product-image-container img {
  width: 100%;
}

.swatch-attribute .swatch-attribute-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.swatch-attribute .swatch-attribute-options .swatch-option {
  margin: 0.25rem;
  display: flex;
  justify-content: center;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-width: 40px;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

/* Gold keyboard-focus ring, sitewide (legend rule 7): 3px solid gold, 3px
   offset, on every interactive element. Gold is highlight-only — this is one
   of its sanctioned uses. */

/* Floating night chrome (concept .site-head): sticky must sit on the layout
   wrapper — its child #header's containing block is this wrapper itself, so
   sticky on the child has no room to travel and never floats. */

.page-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Gold focus ring (legend rule 7). Spec gold-500 fails WCAG 1.4.11 non-text
   contrast on light surfaces (~1.95:1 on porcelain), so light surfaces use
   gold-700 (5.8:1) and night surfaces keep the vivid spec gold (8.4:1 on
   night). Ramp steps only — no invented colors. */

:focus-visible {
  outline: 3px solid #8F5A0C;
  outline-offset: 3px;
}

.mk-surface-night :focus-visible,
.mk-hero-stage :focus-visible,
.bg-night :focus-visible,
.bg-night\/95 :focus-visible,
.bg-night-deep :focus-visible,
.pdp-band--night :focus-visible,
.pdp-band--night-deep :focus-visible,
.pdp-hero :focus-visible {
  outline-color: #F9A21B;
}

/* Keyboard QA P2 E5 / E7: @tailwindcss/forms' own :focus rule beats the
   bare `:focus-visible` rule above on specificity (an unclassed `select` is
   (0,1,1), .form-select/.form-input are (0,2,0) — both outrank the (0,1,0)
   `:focus-visible` alone), so these controls show the plugin's stock blue
   ring (bare selects) or the sitewide coral form ring (.form-select /
   .form-input) instead of the gold keyboard ring. Match/exceed the
   plugin's specificity for exactly the affected controls rather than
   reworking .form-input/.form-select sitewide — checkout and contact forms
   keep their existing coral ring on purpose. */

#pdp-compat-platform:focus-visible,
#pdp-compat-version:focus-visible,
#limiter:focus-visible,
.limiter-options:focus-visible,
.pdp-reviewform .form-input:focus-visible,
.pdp-demo-dialog .form-input:focus-visible {
  outline: 3px solid #8F5A0C;
  outline-offset: 3px;
  border-color: #8F5A0C;
  box-shadow: none;
}

/* …except the two light surfaces that sit ON the night hero — the license
   panel (porcelain) and the plate mat (white). Vivid gold fails 1.4.11 there,
   so they keep the light-surface gold-700 ring. */

.pdp-hero .pdp-license :focus-visible,
.pdp-hero .pdp-plate :focus-visible,
.pdp-hero .pdp-plate-thumbs :focus-visible {
  outline-color: #8F5A0C;
}

/* Full prefers-reduced-motion opt-out (legend rule 8), ported verbatim from
   concept-i2c-nightgallery.html lines 999-1013. This is the sitewide
   universal-selector catch-all that neutralizes every animation/transition
   added anywhere in the I2c rollout (mk-dot pulse, hover transitions, card
   lifts, etc.) — component-scoped opt-outs (e.g. the hero-mark's, in
   hero.css) layer on top of this for cases needing more than a duration
   clamp (opacity/clip-path/display resets). */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
    *::before,
    *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
}

#cart-drawer {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

[x-cloak] {
  display: none !important;
}

.input {
  margin-right: 0.5rem;
  width: auto;
  border-radius: 0.25rem;
  border-width: 1px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .input {
    margin-right: 1rem;
  }
}

@media (min-width: 1024px) {
  .input {
    margin-right: 0px;
  }
}

@media (min-width: 1280px) {
  .input {
    margin-right: 1rem;
  }
}

.input-light {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.input-light:focus {
  --tw-border-opacity: 1;
  border-color: rgb(240 92 59 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.input[type='checkbox'], .input[type='radio'] {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.card {
  border-radius: 0.125rem;
}

.card-interactive:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.duration-200 {
  transition-duration: 200ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.transition {
  transition: transform 250ms ease, color 250ms ease;
}

.transform-180 {
  transform: rotate(-180deg);
}

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

body {
  /* Ink (slate #133444), not black — set in theming.css; text-black here
       (loaded after theming.css) was overriding it site-wide. */
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0em;
}

h1,h2,h3,h4,h5,h6 {
  /* I2c: commerce headings (PDP/category/cart/account titles) pick up the display
       family via these shared tags — mirrors .mk-h1/.mk-h2/.mk-h3 in marketing.css. */
  margin-bottom: 0.5rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend h1,.pdp-reviewform .review-form > fieldset > legend h2,.pdp-reviewform .review-form > fieldset > legend h3,.pdp-reviewform .review-form > fieldset > legend h4,.pdp-reviewform .review-form > fieldset > legend h5,.pdp-reviewform .review-form > fieldset > legend h6 {
  color: #133444;
}

h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform #review-form > .card > h3 {
  display: none;
}

@media (min-width: 768px) {
  h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

/**
 * Layout
 */

/* Rows */

[data-content-type='row'] {
  box-sizing: border-box;
}

[data-content-type='row'] > div {
  margin-bottom: 0.625rem;
  padding: 0.625rem;
}

[data-content-type='row'][data-appearance='contained'] {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  [data-content-type='row'][data-appearance='contained'] {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  [data-content-type='row'][data-appearance='contained'] {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  [data-content-type='row'][data-appearance='contained'] {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  [data-content-type='row'][data-appearance='contained'] {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  [data-content-type='row'][data-appearance='contained'] {
    max-width: 1536px;
  }
}

#review-form > [data-content-type='row'][data-appearance='contained'], #customer-review-list > [data-content-type='row'][data-appearance='contained'] {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

[data-content-type='row'][data-appearance='contained'] {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

[data-content-type='row'][data-appearance='contained'] [data-element='inner'] {
  box-sizing: border-box;
  background-attachment: scroll !important;
}

[data-content-type='row'][data-appearance='full-bleed'] {
  background-attachment: scroll !important;
}

[data-content-type='row'][data-appearance='full-width'] {
  background-attachment: scroll !important;
}

[data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
    max-width: 1536px;
  }
}

#review-form > [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner, #customer-review-list > [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Column Groups (both needed for pagebuider backwards compatibiliy) */

[data-content-type='column-group'], [data-content-type='column-line'] {
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  [data-content-type='column-group'], [data-content-type='column-line'] {
    flex-wrap: nowrap;
  }
}

/* Columns */

[data-content-type='column'] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-attachment: scroll !important;
  flex-basis: 100%;
}

@media (min-width: 768px) {
  [data-content-type='column'] {
    flex-basis: auto
  }
}

/* Tabs/Tab Item */

[data-content-type='tabs'] .tabs-navigation {
  margin-bottom: -1px;
  display: block;
  padding: 0px;
  --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);
}

[data-content-type$='block'] [data-content-type='tabs'] .tabs-navigation p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar [data-content-type='tabs'] .tabs-navigation.filter {
}

[data-content-type='tabs'] .tabs-navigation li.tab-header {
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: -1px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-width: 1px;
  border-bottom-width: 0px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

[data-content-type='tabs'] .tabs-navigation li.tab-header:first-child {
  margin-left: 0px;
}

[data-content-type='tabs'] .tabs-navigation li.tab-header.active {
  z-index: 20;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border-bottom: 1px solid white;
}

[data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title {
  position: relative;
  display: block;
  cursor: pointer;
  white-space: normal;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend [data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title {
  color: #133444;
}

[data-content-type$='block'] [data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar [data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title.filter {
}

[data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title span {
  font-weight: 600;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend [data-content-type='tabs'] .tabs-navigation li.tab-header a.tab-title span {
  color: #133444;
}

[data-content-type='tabs'] .tabs-content {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0.125rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
  --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);
}

[data-content-type='tabs'] .tabs-content [data-content-type='tab-item'] {
  box-sizing: border-box;
  padding: 2rem;
  min-height: inherit;
  background-attachment: scroll !important;
}

[data-content-type='tabs'].tab-align-left .tabs-content {
  border-top-left-radius: 0 !important;
}

[data-content-type='tabs'].tab-align-right .tabs-content {
  border-top-right-radius: 0 !important;
}

/**
 * Elements
 */

/* Text */

[data-content-type='text'] {
  overflow-wrap: break-word;
}

/* Heading */

[data-content-type='heading'] {
  overflow-wrap: break-word;
}

/* Buttons/Button Item */

[data-content-type='buttons'] {
  max-width: 100%;
}

[data-content-type='buttons'] [data-content-type='button-item'] {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  max-width: 100%;
}

[data-content-type='buttons'] [data-content-type='button-item'] [data-element='link'],
        [data-content-type='buttons'] [data-content-type='button-item'] [data-element='empty_link'] {
  max-width: 100%;
  overflow-wrap: break-word;
}

[data-content-type='buttons'] [data-content-type='button-item'] [data-element='empty_link'] {
  cursor: default;
}

[data-content-type='buttons'] [data-content-type='button-item'] a,
        [data-content-type='buttons'] [data-content-type='button-item'] button,
        [data-content-type='buttons'] [data-content-type='button-item'] div {
  display: inline-block;
  --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);
}

[data-content-type='buttons'] [data-content-type='button-item'] a.pagebuilder-button-link, [data-content-type='buttons'] [data-content-type='button-item'] button.pagebuilder-button-link, [data-content-type='buttons'] [data-content-type='button-item'] div.pagebuilder-button-link {
  box-sizing: border-box;
}

[data-content-type='buttons'] [data-content-type='button-item'] a:hover, [data-content-type='buttons'] [data-content-type='button-item'] button:hover, [data-content-type='buttons'] [data-content-type='button-item'] div:hover {
  text-decoration-line: none;
}

a.pagebuilder-button-primary, button.pagebuilder-button-primary, div.pagebuilder-button-primary {
  /* Coral base, not gray: theme templates always pair .btn with a
           modifier, so bare .btn only occurs in legacy catalog/CMS content —
           it should read as the one action color (I2c legend rules 1/2). */
  display: flex;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  a.pagebuilder-button-primary, button.pagebuilder-button-primary, div.pagebuilder-button-primary {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  a.pagebuilder-button-primary, button.pagebuilder-button-primary, div.pagebuilder-button-primary {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

a.pagebuilder-button-primary svg, button.pagebuilder-button-primary svg, div.pagebuilder-button-primary svg {
  display: inline-flex;
}

a.pagebuilder-button-primary span, button.pagebuilder-button-primary span, div.pagebuilder-button-primary span {
  vertical-align: middle;
}

a.pagebuilder-button-primary:hover, button.pagebuilder-button-primary:hover, div.pagebuilder-button-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
}

a.pagebuilder-button-primary:focus:not(:focus-visible), button.pagebuilder-button-primary:focus:not(:focus-visible), div.pagebuilder-button-primary:focus:not(:focus-visible) {
  border-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

a.pagebuilder-button-primary, button.pagebuilder-button-primary, div.pagebuilder-button-primary {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

a.pagebuilder-button-primary:hover, button.pagebuilder-button-primary:hover, div.pagebuilder-button-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: brightness(1.12);
}

:where(#hyva-checkout-main) a.pagebuilder-button-primary,:where(#hyva-checkout-main)  button.pagebuilder-button-primary,:where(#hyva-checkout-main)  div.pagebuilder-button-primary {
  border-width: 2px;
}

:where(#hyva-checkout-main) a.pagebuilder-button-primary:disabled,:where(#hyva-checkout-main)  button.pagebuilder-button-primary:disabled,:where(#hyva-checkout-main)  div.pagebuilder-button-primary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) a.pagebuilder-button-primary:not(.btn-secondary),:where(#hyva-checkout-main)  button.pagebuilder-button-primary:not(.btn-secondary),:where(#hyva-checkout-main)  div.pagebuilder-button-primary:not(.btn-secondary) {
  border-color: transparent;
}


.pdp-buy a.pagebuilder-button-primary,
.pdp-buy  button.pagebuilder-button-primary,
.pdp-buy  div.pagebuilder-button-primary {
  flex: 1;
}

.pdp-reviewform .review-form a.pagebuilder-button-primary,.pdp-reviewform .review-form  button.pagebuilder-button-primary,.pdp-reviewform .review-form  div.pagebuilder-button-primary {
  display: inline-flex;
  border-radius: 0.375rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  width: auto;
  margin-top: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}


.pdp-mobilebuy a.pagebuilder-button-primary,
.pdp-mobilebuy  button.pagebuilder-button-primary,
.pdp-mobilebuy  div.pagebuilder-button-primary {
  margin-left: auto;
}

.input-group > :not(:last-child, button,a.pagebuilder-button-primary),.input-group > :not(:last-child, button, button.pagebuilder-button-primary),.input-group > :not(:last-child, button, div.pagebuilder-button-primary) {
  border-right-width: 0px;
}

.checkout-summary .checkout-nav a.pagebuilder-button-primary,.checkout-summary .checkout-nav  button.pagebuilder-button-primary,.checkout-summary .checkout-nav  div.pagebuilder-button-primary {
  width: 100%;
}

a.pagebuilder-button-secondary, button.pagebuilder-button-secondary, div.pagebuilder-button-secondary {
  /* Coral base, not gray: theme templates always pair .btn with a
           modifier, so bare .btn only occurs in legacy catalog/CMS content —
           it should read as the one action color (I2c legend rules 1/2). */
  display: flex;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  a.pagebuilder-button-secondary, button.pagebuilder-button-secondary, div.pagebuilder-button-secondary {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  a.pagebuilder-button-secondary, button.pagebuilder-button-secondary, div.pagebuilder-button-secondary {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

a.pagebuilder-button-secondary svg, button.pagebuilder-button-secondary svg, div.pagebuilder-button-secondary svg {
  display: inline-flex;
}

a.pagebuilder-button-secondary span, button.pagebuilder-button-secondary span, div.pagebuilder-button-secondary span {
  vertical-align: middle;
}

a.pagebuilder-button-secondary:hover, button.pagebuilder-button-secondary:hover, div.pagebuilder-button-secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
}

a.pagebuilder-button-secondary:focus:not(:focus-visible), button.pagebuilder-button-secondary:focus:not(:focus-visible), div.pagebuilder-button-secondary:focus:not(:focus-visible) {
  border-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

a.pagebuilder-button-secondary, button.pagebuilder-button-secondary, div.pagebuilder-button-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(19 52 68 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --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);
}

a.pagebuilder-button-secondary:hover, button.pagebuilder-button-secondary:hover, div.pagebuilder-button-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 236 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: none;
}

a.pagebuilder-button-secondary:focus, button.pagebuilder-button-secondary:focus, div.pagebuilder-button-secondary:focus {
  border-color: transparent;
}

:where(#hyva-checkout-main) a.pagebuilder-button-secondary,:where(#hyva-checkout-main)  button.pagebuilder-button-secondary,:where(#hyva-checkout-main)  div.pagebuilder-button-secondary {
  border-width: 2px;
}

:where(#hyva-checkout-main) a.pagebuilder-button-secondary:disabled,:where(#hyva-checkout-main)  button.pagebuilder-button-secondary:disabled,:where(#hyva-checkout-main)  div.pagebuilder-button-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) a.pagebuilder-button-secondary:not(.btn-secondary),:where(#hyva-checkout-main)  button.pagebuilder-button-secondary:not(.btn-secondary),:where(#hyva-checkout-main)  div.pagebuilder-button-secondary:not(.btn-secondary) {
  border-color: transparent;
}

.account aa.pagebuilder-button-secondary,
    .account buttona.pagebuilder-button-secondary,.account a button.pagebuilder-button-secondary,
    .account button button.pagebuilder-button-secondary,.account a div.pagebuilder-button-secondary,
    .account button div.pagebuilder-button-secondary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}


.pdp-buy a.pagebuilder-button-secondary,
.pdp-buy  button.pagebuilder-button-secondary,
.pdp-buy  div.pagebuilder-button-secondary {
  flex: 1;
}

.pdp-reviewform .review-form a.pagebuilder-button-secondary,.pdp-reviewform .review-form  button.pagebuilder-button-secondary,.pdp-reviewform .review-form  div.pagebuilder-button-secondary {
  display: inline-flex;
  border-radius: 0.375rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  width: auto;
  margin-top: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}


.pdp-mobilebuy a.pagebuilder-button-secondary,
.pdp-mobilebuy  button.pagebuilder-button-secondary,
.pdp-mobilebuy  div.pagebuilder-button-secondary {
  margin-left: auto;
}

.input-group > :not(:last-child, button,a.pagebuilder-button-secondary),.input-group > :not(:last-child, button, button.pagebuilder-button-secondary),.input-group > :not(:last-child, button, div.pagebuilder-button-secondary) {
  border-right-width: 0px;
}

.checkout-summary .checkout-nav a.pagebuilder-button-secondary,.checkout-summary .checkout-nav  button.pagebuilder-button-secondary,.checkout-summary .checkout-nav  div.pagebuilder-button-secondary {
  width: 100%;
}

/* I2c: link styled as a CTA — coral is the only action color, gold is never a button/link. */

.pagebuilder-button-link {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
}

/* HTML Code */

[data-content-type='html'] {
  overflow-wrap: break-word;
}

/**
 * Media
 */

/* Image */

[data-content-type='image'] {
  box-sizing: border-box;
}

[data-content-type='image'] > [data-element='link'],
    [data-content-type='image'] > [data-element='link'] img {
  border-radius: inherit;
}

[data-content-type='image'] .pagebuilder-mobile-hidden {
  display: none;
}

.pdp-demo-dialog input[data-content-type='image'] .pagebuilder-mobile-hidden {
  display: none;
}

@media (min-width: 768px) {
  [data-content-type='image'] .pagebuilder-mobile-hidden {
    display: block;
  }

  [data-content-type='image'] .pagebuilder-mobile-only {
    display: none;
  }
}

[data-content-type='image'] figcaption {
  overflow-wrap: break-word;
}

/* Video */

[data-content-type='video'] {
  font-size: 0;
}

[data-content-type='video'] .pagebuilder-video-inner {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
}

[data-content-type='video'] .pagebuilder-video-container {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  padding-top: 56.25%;
}

[data-content-type='video'] iframe,
    [data-content-type='video'] video {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
}

/* Banner */

[data-content-type='banner'] > [data-element='link'], [data-content-type='banner'] > [data-element='empty_link'] {
  color: inherit;
  text-decoration: inherit;
}

[data-content-type='banner'] > [data-element='link']:hover, [data-content-type='banner'] > [data-element='empty_link']:hover {
  color: inherit;
  text-decoration: inherit;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper {
  box-sizing: border-box;
  overflow-wrap: break-word;
  background-clip: padding-box;
  border-radius: inherit;
  background-attachment: scroll !important;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-overlay {
  position: relative;
  box-sizing: border-box;
  padding: 2rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 250ms ease, color 250ms ease;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-overlay.pagebuilder-poster-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
  max-width: none;
}

@media (min-width: 768px) {
  [data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
    max-width: 36rem;
  }
}

[data-content-type='banner'] .pagebuilder-banner-wrapper.jarallax .video-overlay {
  z-index: 0;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper [data-element='content'] {
  overflow: auto;
  min-height: 50px;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-banner-button {
  margin: 0px;
  margin-top: 1.25rem;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  text-align: inherit;
}

[data-content-type='banner'] .pagebuilder-banner-wrapper .pagebuilder-poster-content {
  width: 100%;
}

[data-content-type='banner'][data-appearance='collage-centered'] .pagebuilder-banner-wrapper .pagebuilder-overlay {
  margin-left: auto;
  margin-right: auto;
}

[data-content-type='banner'][data-appearance='collage-left'] .pagebuilder-banner-wrapper .pagebuilder-overlay {
  margin-right: auto;
}

[data-content-type='banner'][data-appearance='collage-right'] .pagebuilder-banner-wrapper .pagebuilder-overlay {
  margin-left: auto;
}

/* Slider */

[data-content-type='slider'] {
  visibility: hidden;
  position: relative;
}

[data-content-type='slider'].glider-initialized {
  visibility: visible;
}

[data-content-type='slider'] [data-role='glider-content'] {
  overflow-y: hidden;
}

[data-content-type='slider'] a.button {
  color: initial;
  padding: 10px;
  text-decoration: none;
}

[data-content-type='slider'] .carousel-nav {
  position: absolute;
  bottom: 0px;
  margin-bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Slide */

[data-content-type='slide'] {
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1.25rem;
  min-height: inherit;
}

[data-content-type='slide'] > [data-element='link'],
    [data-content-type='slide'] > [data-element='empty_link'] {
  color: inherit;
  min-height: inherit;
  text-decoration: inherit;
}

[data-content-type='slide'] > [data-element='link']:hover, [data-content-type='slide'] > [data-element='empty_link']:hover {
  color: inherit;
  text-decoration: inherit;
}

[data-content-type='slide'] + [data-content-type='slide'] {
  height: 0px;
  min-height: 0px;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper {
  box-sizing: border-box;
  overflow-wrap: break-word;
  border-radius: inherit;
  min-height: inherit;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .jarallax-viewport-element {
  position: absolute;
  top: 0px;
  z-index: 50;
  height: 100%;
  width: 0.125rem;
  left: -15000vw;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax .video-overlay {
  -webkit-transform: unset;
  z-index: 1;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax .pagebuilder-overlay {
  position: relative;
  z-index: 20;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax [id*='jarallax-container'] > div,
                [data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax [id*='jarallax-container'] > img,
                [data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax [id*='jarallax-container'] > video,
                [data-content-type='slide'] .pagebuilder-slide-wrapper.jarallax [id*='jarallax-container'] > iframe {
  margin: auto !important;
  transform: none !important;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-overlay {
  box-sizing: border-box;
  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;
  border-radius: inherit;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-overlay.pagebuilder-poster-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
  max-width: none;
}

@media (min-width: 768px) {
  [data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
    max-width: 32rem;
  }
}

[data-content-type='slide'] .pagebuilder-slide-wrapper [data-element='content'] {
  overflow: auto;
  min-height: 50px;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-slide-button {
  margin: 0px;
  margin-top: 1.25rem;
  max-width: 100%;
  overflow-wrap: break-word;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  text-align: inherit;
}

[data-content-type='slide'] .pagebuilder-slide-wrapper .pagebuilder-poster-content {
  width: 100%;
}

[data-content-type='slide'][data-appearance='collage-centered'] .pagebuilder-slide-wrapper .pagebuilder-overlay {
  margin-left: auto;
  margin-right: auto;
}

[data-content-type='slide'][data-appearance='collage-left'] .pagebuilder-slide-wrapper .pagebuilder-overlay {
  margin-right: auto;
}

[data-content-type='slide'][data-appearance='collage-right'] .pagebuilder-slide-wrapper .pagebuilder-overlay {
  margin-left: auto;
}

/* Map */

[data-content-type='map'] {
  box-sizing: border-box;
  height: 18rem;
}

/**
 * Add Content
 */

/* Block */

[data-content-type$='block'] .block p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

/* Dynamic Block */

[data-content-type='dynamic_block'] [data-content-type='image'] img {
  display: inline;
}

[data-content-type='dynamic_block'] .block-banners .banner-item-content,
    [data-content-type='dynamic_block'] .block-banners-inline .banner-item-content {
  margin-bottom: auto;
}

/* Products */

[data-content-type='products'][data-appearance='carousel'] [data-role='glider-content'] {
  grid-template-columns: repeat(100, calc(50% - 1rem));
}

@media (min-width: 768px) {
  [data-content-type='products'][data-appearance='carousel'] [data-role='glider-content'] {
    grid-template-columns: repeat(100, calc(33% - 1rem))
  }
}

@media (min-width: 1024px) {
  [data-content-type='products'][data-appearance='carousel'] [data-role='glider-content'] {
    grid-template-columns: repeat(100, calc(25% - 1rem))
  }
}

/**
 * Glider
 */

.glider-contain {
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.glider {
  overflow-y: hidden;
}

.glider.draggable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}

.glider.draggable .glider-slide img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.glider.drag {
  cursor: grabbing;
}

.glider::-webkit-scrollbar {
  height: 0px;
  opacity: 0;
}

.glider .glider-track {
  z-index: 10;
  margin: 0px;
  display: flex;
  width: 100%;
  padding: 0px;
}

.glider-slide {
  margin: 0.5rem;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-content: center;
  justify-content: center;
  min-width: 150px;
}

.glider-slide img {
  max-width: 100%;
}

.glider-hide {
  opacity: 0;
}

.glider-prev.disabled, .glider-next.disabled {
  cursor: default;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
  opacity: 0.25;
}

.glider-dot {
  margin: 0.25rem;
  display: block;
  height: 0.75rem;
  width: 0.75rem;
  cursor: pointer;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  opacity: 0.25;
  --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);
}

[data-content-type$='block'] .glider-dot p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .glider-dot.filter {
}

.glider-dot.active {
  opacity: 1;
}

@media (max-width: 36em) {
  .glider::-webkit-scrollbar {
    height: 0.25rem;
    width: 0.5rem;
    -webkit-appearance: none;
            appearance: none;
    opacity: 1;
  }

  .glider::-webkit-scrollbar-thumb {
    opacity: 1;
    border-radius: 99px;
    background-color: rgba(156, 156, 156, .25);
    box-shadow: 0 0 1px rgba(255, 255, 255, .25);
  }
}

[data-show-arrows='false'] .glider-prev,
    [data-show-arrows='false'] .glider-next {
  display: none;
}

.pdp-demo-dialog input[data-show-arrows='false'] .glider-prev,.pdp-demo-dialog input
    [data-show-arrows='false'] .glider-next {
  display: none;
}

[data-show-dots='false'] .glider-dots {
  display: none;
}

.pdp-demo-dialog input[data-show-dots='false'] .glider-dots {
  display: none;
}

/**
 * Marketing design system — I2c "Atelier — Night Gallery"
 * (docs/design-concepts/concept-i2c-nightgallery.html; rollout: docs/i2c-rollout-plan.md).
 *
 * All classes are mk- prefixed to avoid vendor collisions. Color/type tokens
 * come from tailwind.config.js (coral/gold/slate/night/porcelain/grey, ink/on-night).
 *
 * Type roles: measured values = mono (tabular-nums) · claims = sans · headings = display.
 * Gold usage: base gold for >=18px/600 text on night; gold-300 for small
 * text on night; gold-700 on light surfaces. Coral is the only action color
 * (buttons/links); coral-300 on night, coral-600 small text on light.
 * Signal green = status only.
 */

/* ============ Layout & surfaces ============ */

/*
 * Full-bleed marketing shell. Hyvä's .columns wrapper caps width (max-w and
 * auto margins) and pads the main column, which boxes the mk-surface-* bands
 * inside gutters. On marketing pages we release that wrapper so the colored
 * bands span the viewport; .mk-container restores the centered inner measure.
 */

.marketing-page .page-main,
.marketing-page .columns,
.marketing-page .column.main {
  margin: 0px;
  width: 100%;
  max-width: 100%;
  padding: 0px;
}

.mk-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Catalog-backed marketing pages (/extensions/) keep the category's own
   description/CMS blocks, which sit in columns.top with no container of their
   own — the full-bleed release above would otherwise run them edge to edge.
   Vertical rhythm comes from the surrounding mk-section bands, so the
   category-page.css py-4 is dropped rather than left as dead space. */

.marketing-page #category-view-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Prose column. Preflight zeroes paragraph margins, so without this rhythm
   multi-paragraph copy (the /about/ "beats") reads as one unbroken wall. */

.mk-prose {
  max-width: 42rem;
}

/* When the reading column IS the container, mk-container's mx-auto would
   center it — leaving prose sections indented relative to every other
   section on the page. Keep the container on the 6xl grid and narrow the
   children instead, so prose starts at the same left edge as headings. */

.mk-container.mk-prose {
  max-width: 72rem;
}

.mk-container.mk-prose > * {
  max-width: 42rem;
}

.mk-prose > p + p,
.mk-prose > ul,
.mk-prose > ol {
  margin-top: 1rem;
}

.mk-prose > p + h2,
.mk-prose > p + h3,
.mk-prose > ul + p,
.mk-prose > ol + p {
  margin-top: 1.5rem;
}

/* Gallery-room rhythm (concept sections run clamp(3.5rem,9vh,6.5rem) to
   clamp(4rem,10vh,7rem)): real sections are shorter than the concept's, so
   they need the concept's air to read as rooms rather than strips. */

.mk-section {
  padding-block: clamp(4rem, 9vh, 6.5rem);
}

.mk-section-tight {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

/* Porcelain canvas — the dominant light surface (never cream). */

.mk-surface-light {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}

/* Deeper porcelain for banded depth. */

.mk-surface-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
}

/*
 * Night set-piece — the only dark band (header/hero/stats/rescue/footer share it).
 */

.mk-surface-night {
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-surface-night :focus-visible {
  outline-color: #F9A21B;
}

.mk-surface-night h1,
.mk-surface-night h2,
.mk-surface-night h3 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Inline links on night go coral (the only action color). coral-300 (#F5836B)
   clears 4.5:1 on #0B1B28 where coral-500 does not; buttons keep their own text
   color (a broad `a` rule here would otherwise outrank .mk-btn-primary). The
   :not() is wrapped in :where() so it contributes zero specificity — without
   that, this ambient rule's (class+class+type) specificity silently outranks
   more specific descendant component rules nested inside a night surface
   (e.g. .mk-fcols a, .mk-telemetry-row a), making their own color/hover
   declarations dead code depending on whether they happen to be nested inside
   a .mk-surface-night ancestor on a given page. */

.mk-surface-night a:where(:not(.mk-btn)) {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

.mk-split {
  display: grid;
  align-items: flex-start;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .mk-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Asymmetric split: wide prose column + narrow stat rail. The rail child
       sticks so short-side content stays in view against long prose. */

  .mk-split.mk-split--rail {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  }

  .mk-split--rail > .mk-split-rail {
    position: sticky;
    top: 6rem;
  }
}

/* ============ Typography ============ */

/* Display headings — the concept's .display primitive: display face, tight
   leading (0.98), slight negative tracking. */

.mk-h1 {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The home set-piece runs at the concept's full hero scale (concept line 289). */

.mk-hero-stage .mk-h1 {
  font-size: clamp(2.9rem, 7.5vw, 5.2rem);
}

/* Concept section-h2 scale (clamp 1.8-2.6rem, weight 700): headlines must
   clearly outrank the 1.11rem leads — the old 1.5rem floor read as body copy. */

.mk-h2 {
  margin-bottom: 1rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* h3 is a small subhead — keep a readable leading rather than 0.98. */

.mk-h3 {
  margin-bottom: 0.5rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-h3 {
  color: #133444;
}

.mk-h3 {
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.mk-surface-night .mk-h1,
.mk-surface-night .mk-h2,
.mk-surface-night .mk-h3 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Gallery selection — gold wash on night-deep ink (concept ::selection). */

::-moz-selection {
  background: #F9A21B;
  color: #081722;
}

::selection {
  background: #F9A21B;
  color: #081722;
}

/* Every measured value is tabular (legend rule 6): versions, dates, stats,
   prices, compat lines line up column-true. */

.mk-num,
.mk-price,
.mk-stat-fig,
.mk-stat-src,
.mk-feeditem-date,
.mk-metric,
.mk-eol-ver,
.mk-eol-note,
.mk-intake-phone,
.mk-kicker,
.mk-tiername,
.mk-telemetry-row {
  font-variant-numeric: tabular-nums;
}

/* Museum-label eyebrow — the connective tissue of the page. Body face in
   all-small-caps with wide tracking, led by the tribar face-pair tick (gold +
   coral triangles) rather than the retired amber rule.
   text-ink-faint measures 3.33:1 on porcelain — fails the 4.5:1 AA floor for this
   small (13px) text. Stepped to text-ink-soft (6.97:1) instead of tuning a new
   color (a11y audit, rollout plan Task 18). */

.mk-eyebrow {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-eyebrow {
  color: #133444;
}

.mk-eyebrow {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
}

.mk-eyebrow::before {
  content: "";
  flex: none;
  width: 14px;
  height: 9px;
  background:
        linear-gradient(to bottom right, #F9A21B 49.5%, transparent 50%) left / 7px 9px no-repeat,
        linear-gradient(to top left, #F05C3B 49.5%, transparent 50%) right / 7px 9px no-repeat;
}

.mk-surface-night .mk-eyebrow {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* Breadcrumb links in the eyebrow ("About · Careers") inherit the eyebrow's
   own color, so they are indistinguishable from the trail around them at
   1.00:1. Underline rather than recolor — the eyebrow reads as one muted
   label, and coral here would outshout the h1 under it. */

.mk-eyebrow a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.mk-lead {
  max-width: 48rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 1.11rem;
  line-height: 1.65;
}

.mk-surface-night .mk-lead {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-muted {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.mk-surface-night .mk-muted {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* TODO/CONFIRM flag chip — coral is the TODO-flag color (legend rule 1). Mono
   small-caps, dashed coral hairline, coral-tint fill; whole-unit nowrap so a
   multi-word flag never breaks mid-chip. coral-600 text clears 4.5:1 on light. */

.mk-chip {
  display: inline-block;
  white-space: nowrap;
  border-radius: 0.125rem;
  vertical-align: baseline;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
  font-variant-caps: all-small-caps;
  font-size: 0.72rem;
  letter-spacing: 0;
  padding: 0.1rem 0.42rem;
  background: rgba(240, 92, 59, 0.09);
  border: 1px dashed rgba(240, 92, 59, 0.5);
}

.mk-surface-night .mk-chip {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  background: rgba(240, 92, 59, 0.16);
  border-color: rgba(240, 92, 59, 0.5);
}

/* Live/confirmed status — solid hairline (not the dashed TODO look), signal
   green. Darker green on light for contrast (#177A4A: 5.08:1 on porcelain,
   a11y audit — #1E9A5E measured 3.41:1, under the 4.5:1 AA threshold);
   signal on night. */

.mk-chip-live {
  color: #177A4A;
  background: rgba(53, 208, 127, 0.12);
  border: 1px solid rgba(53, 208, 127, 0.45);
}

.mk-surface-night .mk-chip-live {
  --tw-text-opacity: 1;
  color: rgb(53 208 127 / var(--tw-text-opacity));
}

/* ============ Buttons ============ */

.mk-btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  text-align: center;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  padding: 0.66rem 1.3rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, color 0.15s ease;
}

.mk-btn:hover {
  text-decoration-line: none;
}

.mk-btn:active {
  transform: translateY(0);
}

/* Primary — coral is the ONLY action color: solid coral fill, white text.
   Same on every surface (gold is never a button). coral-600 (#C23C1C), not
   coral-500: white-on-coral-500 at .mk-btn's 15px bold is ~3.33:1, under
   rule 9's ≥18.66px-bold allowance for the 500 fill; coral-600 clears 5.31:1
   at any size (a11y audit). Hover darkens further via brightness, no new hex. */

.mk-btn-primary,
.mk-surface-night .mk-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}

.mk-btn-primary:hover,
.mk-surface-night .mk-btn-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(194, 60, 28, 0.55);
}

/* Ghost — neutral secondary: ink outline on light, on-night outline on night;
   hover fills the hairline tone rather than any accent. */

.mk-btn-ghost {
  --tw-border-opacity: 1;
  border-color: rgb(19 52 68 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.mk-surface-night .mk-btn-ghost {
  --tw-border-opacity: 1;
  border-color: rgb(233 237 240 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 236 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.mk-surface-night .mk-btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Mono inline action link ("→ Store Rescue") — coral is the only action color.
   coral-600 (#C23C1C) for small text on light (5.31:1); coral-300 on night.

   Underlined by default: set in running copy, coral-600 is only 2.47:1 against
   ink (1.38:1 against ink-soft) and coral-300 only 2.14:1 against on-night, so
   hue alone is not a distinguishing feature — WCAG 1.4.1, which axe reports as
   link-in-text-block. Standalone CTAs sit alone on their line with no prose to
   be confused with, so they opt out via .m-cta below. */

.m {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.m:hover {
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* Standalone CTA link — the link IS the line ("See the full record →"). Keeps
   the clean rule and picks the underline up on hover. Doubled-up selector so it
   also outranks .mk-stat-src a, which underlines source-line citations. */

.m.m-cta {
  text-decoration-line: none;
}

.m.m-cta:hover {
  text-decoration-line: underline;
}

.mk-surface-night .m {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

.mk-surface-night .m:hover {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* ============ Hero ============ */

.mk-hero {
  padding-top: 4rem;
  padding-bottom: 4.6rem;
}

@media (min-width: 1024px) {
  .mk-hero {
    padding-top: 5.5rem;
    padding-bottom: 0.5rem;
  }
}

.mk-hero {
  position: relative;
  overflow: hidden;
}

/* Leaf heros are light — porcelain radial wash under the night header, ported
   verbatim from the concept's .hero rule (concept-i2c-nightgallery.html line
   270). Never cream (rule 4) — #FDFDFE is a near-white lead-in, not a tint.
   The wash ends at porcelain-DEEP, so it flows seamlessly into a following
   mk-surface-tint section; pages whose first section is plain
   mk-surface-light must add mk-hero--to-light or they show a tone seam at
   the hero's bottom edge. */

.mk-hero.mk-surface-light {
  background: radial-gradient(120% 90% at 50% 0%, #FDFDFE 0%, #F8F9FA 55%,
        #EFF1F3 100%);
}

.mk-hero.mk-surface-light.mk-hero--to-light {
  background: radial-gradient(120% 90% at 50% 0%, #FDFDFE 0%, #F8F9FA 60%,
        #F8F9FA 100%);
}

/* Hero content sits above the watermark. */

.mk-hero > .mk-container {
  position: relative;
  z-index: 10;
}

.mk-hero-acts {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* ============ Cards & pathways ============ */

.mk-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-card p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-card.filter {
}

.mk-card {
  box-shadow: 0 1px 2px rgba(16, 32, 46, 0.04), 0 10px 26px -20px rgba(16, 32, 46, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Amber→coral top-accent revealed on hover for linked cards. */

a.mk-card::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, #F9A21B, #F05C3B);
  transition: opacity 0.18s ease;
}

a.mk-card:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  text-decoration-line: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(16, 32, 46, 0.06), 0 22px 44px -22px rgba(16, 32, 46, 0.6);
}

a.mk-card:hover::after {
  opacity: 1;
}

.mk-card p {
  font-size: 0.93rem;
}

.mk-surface-night .mk-card {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-surface-night .mk-card :focus-visible {
  outline-color: #F9A21B;
}

.mk-surface-night .mk-card {
  box-shadow: 0 12px 30px -24px rgba(4, 10, 18, 0.9);
}

.mk-surface-night a.mk-card:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  box-shadow: 0 22px 46px -24px rgba(4, 10, 18, 0.95);
}

.mk-go {
  margin-top: 0.75rem;
  display: block;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-go p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-go.filter {
}

.mk-go {
  font-size: 0.8rem;
  /* The line is a bare URL: one unbreakable token that a narrow card silently
       clips against .mk-card's overflow-hidden. Wrap it instead. */
  overflow-wrap: anywhere;
}

.mk-surface-night .mk-go {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
}

.mk-pathway {
  display: block;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-pathway :focus-visible {
  outline-color: #F9A21B;
}

[data-content-type$='block'] .mk-pathway p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-pathway.filter {
}

.mk-pathway {
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 12px 30px -24px rgba(4, 10, 18, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
        background-color 0.18s ease;
}

.mk-pathway:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  text-decoration-line: none;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -22px rgba(4, 10, 18, 0.95);
}

.mk-pathway .mk-h3 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* The card is an <a>, so its <p> inherits the anchor color — coral-300 from the
   night-surface link rule (top of file) — and the generic a:hover then shifts
   that to an unreadable dark, blanking the body on hover. Pin the body color so
   it stays put across states. (Light-surface cards keep their text-ink-soft via
   the card's own class, so scope this to night.) */

.mk-surface-night .mk-pathway p {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

.mk-kicker {
  margin-bottom: 0.5rem;
  display: block;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-kicker p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-kicker.filter {
}

.mk-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.mk-surface-light .mk-pathway,
.mk-surface-tint .mk-pathway {
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.mk-surface-light .mk-pathway .mk-h3,
.mk-surface-tint .mk-pathway .mk-h3 {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.mk-surface-light .mk-pathway .mk-kicker,
.mk-surface-tint .mk-pathway .mk-kicker {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.mk-surface-light .mk-pathway:hover,
.mk-surface-tint .mk-pathway:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

/* ============ Trust stack (partner/tooling colophon) ============ */

/* Dogfood grid card — same paper chrome and hover lift as .mk-card, plus a
   fixed-height logo plate up top so mixed-aspect partner marks (wide Nexcess,
   the tall stacked Hyvä badge) sit on one baseline across the row. Light
   surfaces only; the section never renders on night. */

.mk-stack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  box-shadow: 0 1px 2px rgba(16, 32, 46, 0.04), 0 10px 26px -20px rgba(16, 32, 46, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Amber→coral top-accent revealed on hover for linked cards (matches a.mk-card). */

a.mk-stack-card::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, #F9A21B, #F05C3B);
  transition: opacity 0.18s ease;
}

a.mk-stack-card:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  text-decoration-line: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(16, 32, 46, 0.06), 0 22px 44px -22px rgba(16, 32, 46, 0.6);
}

a.mk-stack-card:hover::after {
  opacity: 1;
}

.mk-stack-card p {
  font-size: 0.93rem;
}

.mk-stack-card .mk-h3 {
  margin-bottom: 0.375rem;
}

/* Logo plate: fixed height, left-aligned, contain-fit so no mark deforms. The
   dark stacked Hyvä badge renders as its own dark tile against the paper card —
   intentional, it's the vendor's on-dark lockup. */

.mk-stack-logo {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  height: 2.75rem;
}

.mk-stack-logo img {
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left;
     object-position: left;
  max-width: 75%;
  max-height: 2.75rem;
}

/* ============ Stats (never without a date-stamp) ============ */

.mk-stat-fig {
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
}

.mk-stat-fig::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 3px;
  width: 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #F9A21B, #F05C3B);
}

.mk-stat-label {
  margin-top: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
  font-size: 0.95rem;
}

.mk-stat-src {
  margin-top: 0.5rem;
  display: block;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-stat-src p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-stat-src.filter {
}

.mk-stat-src {
  font-size: 0.72rem;
}

/* The source line's links carry an underline, not just a hue. Gold on night
   clears 10:1 against the band, but only 1.3:1 against the surrounding
   on-night-soft source text (coral-600 vs ink-faint is 1.5:1 on light) — color
   alone is not a distinguishing feature, which is what axe/Lighthouse flag as
   link-in-text-block (WCAG 1.4.1). */

.mk-stat-src a {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Stats default to night ink; on light/tint surfaces step to ink so figures
   don't vanish white-on-porcelain (found live on /extensions/ hero). */

.mk-surface-light .mk-stat-fig,
.mk-surface-tint .mk-stat-fig {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.mk-surface-light .mk-stat-label,
.mk-surface-tint .mk-stat-label {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.mk-surface-light .mk-stat-src,
.mk-surface-tint .mk-stat-src {
  --tw-text-opacity: 1;
  color: rgb(122 139 152 / var(--tw-text-opacity));
}

.mk-surface-light .mk-stat-src a,
.mk-surface-tint .mk-stat-src a {
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
}

/* ============ Checklist ============ */

.mk-checklist {
  margin: 0px;
  max-width: 48rem;
  list-style-type: none;
  padding: 0px;
}

.mk-checklist li {
  position: relative;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 0.7rem 0 0.7rem 2rem;
}

.mk-surface-night .mk-checklist li {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
}

.mk-checklist li::before {
  content: "";
  position: absolute;
  border-radius: 0.125rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  left: 0.2rem;
  top: 1.05rem;
  width: 9px;
  height: 9px;
}

/* ============ Process strip (numbered: real sequences only) ============ */

.mk-process {
  margin: 0px;
  display: grid;
  list-style-type: none;
  gap: 1.5rem;
  padding: 0px;
  counter-reset: mk-step;
}

@media (min-width: 768px) {
  .mk-process {
    grid-template-columns: repeat(var(--mk-steps, 3), 1fr);
  }
}

.mk-process-2 {
  --mk-steps: 2;
}

.mk-process-3 {
  --mk-steps: 3;
}

.mk-process-4 {
  --mk-steps: 4;
}

.mk-process-5 {
  --mk-steps: 5;
}

.mk-process li {
  counter-increment: mk-step;
  position: relative;
  padding-top: 2.4rem;
}

.mk-process li::before {
  content: counter(mk-step, decimal-leading-zero);
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-size: 0.8rem;
}

.mk-surface-night .mk-process li::before {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
}

.mk-process li::after {
  content: "";
  position: absolute;
  left: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(249 162 27 / var(--tw-bg-opacity));
  top: 1.55rem;
  width: 2.2rem;
  height: 2px;
}

.mk-process .mk-h3 {
  font-size: 1.02rem;
}

.mk-process p {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.92rem;
}

.mk-surface-night .mk-process p {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* ============ FAQ (native details) ============ */

.mk-faq {
  max-width: 48rem;
}

.mk-faq details {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
}

.mk-surface-night .mk-faq details {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
}

.mk-faq summary {
  position: relative;
  cursor: pointer;
  list-style-type: none;
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend .mk-faq summary {
  color: #133444;
}

.mk-faq summary {
  padding: 1rem 2rem 1rem 0;
}

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

.mk-faq summary::after {
  content: "+";
  position: absolute;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  right: 0.3rem;
  top: 0.9rem;
  font-size: 1.1rem;
}

.mk-faq details[open] summary::after {
  content: "\2013";
}

.mk-faq .mk-faq-a {
  max-width: 42rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  padding: 0 0 1.1rem;
}

.mk-surface-night .mk-faq .mk-faq-a {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

/* ============ Engineering Notes ledger (native details) ============ */

/* Notes are closed tickets, so they render as a log ledger rather than a card
   grid: one paper panel, hairline-divided <details> entries. Collapsed rows
   scan by date/title/tags; the template ships the newest entry open. */

.mk-notelog {
  max-width: 56rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  box-shadow: 0 1px 2px rgba(16, 32, 46, 0.04), 0 10px 26px -20px rgba(16, 32, 46, 0.55);
}

.mk-notelog details + details,
.mk-notelog .mk-note-row + .mk-note-row {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
}

.mk-notelog summary,
.mk-note-row {
  position: relative;
  display: flex;
  cursor: pointer;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.25rem;
  padding: 1.05rem 3rem 1.05rem 1.5rem;
  transition: background-color 0.15s ease;
}

.mk-notelog summary:hover,
.mk-notelog details[open] summary,
a.mk-note-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
  text-decoration-line: none;
}

.mk-notelog summary::-webkit-details-marker {
  display: none;
}

.mk-notelog summary::after,
.mk-note-row::after {
  content: "+";
  position: absolute;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  right: 1.15rem;
  top: 0.95rem;
  font-size: 1.1rem;
}

.mk-notelog details[open] summary::after {
  content: "\2013";
}

/* Teaser rows navigate to the full ledger rather than expanding in place. */

.mk-note-row::after {
  content: "\2192";
}

.mk-note-date {
  white-space: nowrap;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.mk-notelog .mk-note-title {
  margin-bottom: 0px;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  font-size: 1.02rem;
}

/* Neutral taxonomy chip — grey hairline mono, deliberately NOT .mk-chip (the
   coral CONFIRM flag) so tags never read as TODO markers. */

.mk-note-tag {
  display: inline-block;
  white-space: nowrap;
  border-radius: 0.125rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  vertical-align: baseline;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-variant-caps: all-small-caps;
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
}

.mk-note-body {
  padding: 1.15rem 1.5rem 1.35rem;
}

.mk-note-dl {
  display: grid;
  row-gap: 0.75rem;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

@media (min-width: 768px) {
  .mk-note-dl {
    grid-template-columns: 8.5rem 1fr;
  }
}

/* Field micro-labels share the gold mono role of .mk-go / the FAQ marker —
   highlight, never action. */

.mk-note-dl dt {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  padding-top: 0.1rem;
}

.mk-note-dl dd {
  max-width: 46rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.93rem;
}

/* The measurement line is the receipt — full ink, a shade heavier. */

.mk-note-dl dd.mk-note-measure {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

/* Night-surface variants (proof/managed hub teasers), matching .mk-card night. */

.mk-surface-night .mk-notelog {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.mk-surface-night .mk-notelog :focus-visible {
  outline-color: #F9A21B;
}

.mk-surface-night .mk-notelog {
  box-shadow: 0 12px 30px -24px rgba(4, 10, 18, 0.9);
}

.mk-surface-night .mk-notelog details + details,
.mk-surface-night .mk-notelog .mk-note-row + .mk-note-row {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
}

.mk-surface-night .mk-notelog summary:hover,
.mk-surface-night .mk-notelog details[open] summary,
.mk-surface-night a.mk-note-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
}

.mk-surface-night .mk-notelog summary::after,
.mk-surface-night .mk-note-row::after {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
}

.mk-surface-night .mk-note-date,
.mk-surface-night .mk-note-tag {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.mk-surface-night .mk-note-tag {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
}

.mk-surface-night .mk-notelog .mk-note-title {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-surface-night .mk-note-dl dt {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
}

.mk-surface-night .mk-note-dl dd {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

/* ============ SayNoCallout — ONE per page ============ */

.mk-sayno {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
  border-left: 4px solid #F05C3B;
  padding: 1.9rem 2rem;
  max-width: 52rem;
}

.mk-sayno .mk-eyebrow {
  margin-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
}

/* On a tint band the default porcelain-deep fill equals the surface, so the
   callout's card reads as bodyless. Lift it to paper with the same frame/shadow
   as .mk-card (keeping the coral left spine untouched) so it reads as raised. */

.mk-surface-tint .mk-sayno {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border-top: 1px solid #EDECED;
  border-right: 1px solid #EDECED;
  border-bottom: 1px solid #EDECED;
  box-shadow: 0 1px 2px rgba(16, 32, 46, 0.04), 0 10px 26px -20px rgba(16, 32, 46, 0.55);
}

.mk-surface-night .mk-sayno {
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.mk-surface-night .mk-sayno :focus-visible {
  outline-color: #F9A21B;
}

.mk-surface-night .mk-sayno p {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

/* ============ CTA band ============ */

.mk-ctaband {
  position: relative;
  overflow: hidden;
  background:
        radial-gradient(90% 130% at 100% 0%, rgba(249, 162, 27, 0.14), rgba(249, 162, 27, 0) 55%),
        linear-gradient(118deg, #0B1B28 0%, #081722 100%);
}

.mk-ctaband-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.mk-ctaband .mk-h2 {
  margin: 0px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  max-width: 34rem;
}

/* ============ Feed / note cards ============ */

.mk-feed {
  display: grid;
  gap: 0.875rem;
}

/* Changelog/feed row — chips (dates, tags) are nowrap units; the row wraps them
   as whole units with a sane row-gap instead of letting a tag break awkwardly
   at narrow widths (recorded changelog-tag nit). */

.mk-feeditem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.875rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  row-gap: 0.5rem;
  padding: 1rem 1.1rem;
}

.mk-surface-night .mk-feeditem {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.mk-surface-night .mk-feeditem :focus-visible {
  outline-color: #F9A21B;
}

.mk-feeditem-date {
  flex: none;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.74rem;
  min-width: 6.2rem;
}

/* Content block claims the rest of the row so date+title align side-by-side
   on every item (desc or not); the 20rem basis lets it wrap under the date
   only at narrow widths. */

.mk-feeditem > div {
  flex: 1 1 20rem;
  min-width: 0;
}

.mk-surface-night .mk-feeditem-date {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.mk-feeditem-title {
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend .mk-feeditem-title {
  color: #133444;
}

.mk-feeditem-desc {
  margin-top: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.9rem;
}

.mk-surface-night .mk-feeditem-desc {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* ============ Tables (plans / cost anchor / compare) ============ */

.mk-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.mk-tbl th,
.mk-tbl td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 0.9rem;
}

.mk-tbl thead th {
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(19 52 68 / var(--tw-border-opacity));
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.mk-tbl .mk-rowlbl {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-tbl .mk-rowlbl {
  color: #133444;
}

.mk-tbl .mk-num {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

.mk-tbl .mk-tiername {
  font-weight: 600;
  text-transform: none;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-tbl .mk-tiername {
  color: #133444;
}

.mk-tbl .mk-tiername {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.mk-tbl .mk-price {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-size: 1.15rem;
}

/* Stacked-card collapse on small screens */

@media (max-width: 719px) {
  .mk-tbl-stack thead {
    display: none;
  }

  .pdp-demo-dialog input.mk-tbl-stack thead {
    display: none;
  }

  .mk-tbl-stack tr {
    margin-bottom: 1rem;
    display: block;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(237 236 237 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

  [data-content-type$='block'] .mk-tbl-stack tr p:last-child {
    margin-bottom: 1rem;
    margin-top: 0px;
  }

  .category-view .sidebar .mk-tbl-stack tr.filter {
  }

  .mk-tbl-stack tr {
    padding: 0.4rem 0.9rem;
  }

  .mk-tbl-stack td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(237 236 237 / var(--tw-border-opacity));
    padding: 0.6rem 0;
  }

  .mk-tbl-stack td:last-child {
    border-bottom-width: 0px;
  }

  .mk-tbl-stack td::before {
    content: attr(data-l);
    font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(64 89 107 / var(--tw-text-opacity));
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding-top: 0.15rem;
  }
}

/* ============ Telemetry bar (signature element) ============ */

.mk-telemetry {
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(8 23 34 / var(--tw-bg-opacity));
}

.mk-telemetry :focus-visible {
  outline-color: #F9A21B;
}

.mk-telemetry-row {
  display: flex;
  flex-wrap: wrap;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  gap: 0.4rem 2.2rem;
  padding: 0.85rem 0;
  font-size: 0.8rem;
}

/* Coral is the action color for text links (legend rule 1); brightens to
   white on hover. Signal green stays reserved for the live/stale dot. */

.mk-telemetry-row a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

.mk-telemetry-row a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.mk-dot {
  flex: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(53 208 127 / var(--tw-bg-opacity));
  width: 7px;
  height: 7px;
  animation: mk-pulse 2.6s ease-in-out infinite;
}

.mk-dot-stale {
  --tw-bg-opacity: 1;
  background-color: rgb(159 176 188 / var(--tw-bg-opacity));
  animation: none;
}

@keyframes mk-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.mk-telemetry-note {
  display: none;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.pdp-demo-dialog input.mk-telemetry-note {
  display: none;
}

@media (max-width: 719px) {
  .mk-telemetry-row {
    gap: 0.35rem 1.5rem;
  }

  .mk-telemetry-row a:nth-child(n+3) {
    display: none;
  }

  .pdp-demo-dialog input.mk-telemetry-row a:nth-child(n+3) {
    display: none;
  }

  .mk-telemetry-note {
    margin-left: 0.375rem;
    display: inline;
  }
}

/* ============ Availability signal ============ */

.mk-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-avail :focus-visible {
  outline-color: #F9A21B;
}

.mk-avail {
  font-size: 0.83rem;
  padding: 0.55rem 0.9rem;
}

.mk-avail .mk-dot {
  width: 8px;
  height: 8px;
}

/* ============ Email capture (Patch Alerts only) ============ */

.mk-capture {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-capture :focus-visible {
  outline-color: #F9A21B;
}

.mk-capture {
  padding: 2.2rem;
}

.mk-capture .mk-h3 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-size: 1.3rem;
}

.mk-capture form {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mk-capture input {
  flex: 1 1 0%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(8 23 34 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mk-capture input :focus-visible {
  outline-color: #F9A21B;
}

.mk-capture input {
  min-width: 14rem;
  padding: 0.65rem 0.9rem;
  font: inherit;
}

.mk-capture input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.mk-capture input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* ============ Intake panels (rescue + contact) ============ */

.mk-intake {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border-left: 4px solid #F05C3B;
  padding: 1.8rem;
}

/* The rail encodes urgency, not just decoration: coral is the alarm hue and
   belongs to /managed/rescue/, where the panel IS the emergency. The general
   contact intake is the same component doing calmer work, so it takes gold —
   the highlight/accent-stroke role (see the token legend in tailwind.config.js)
   — which keeps coral meaningful when a visitor sees both panels. */

.mk-intake--gold {
  border-left-color: #F9A21B;
}

.mk-intake-phone {
  display: inline-block;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  margin: 0.2rem 0 0.1rem;
}

.mk-intake form {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.mk-intake label {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-intake label {
  color: #133444;
}

.mk-intake label {
  font-size: 0.83rem;
}

.mk-intake input,
.mk-intake textarea,
.mk-intake select {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.94rem;
}

/* ============ Contact router ============ */

.mk-router {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mk-router {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mk-route {
  display: block;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-route p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-route.filter {
}

.mk-route {
  padding: 1.4rem;
}

a.mk-route:hover {
  --tw-border-opacity: 1;
  border-color: rgb(249 162 27 / var(--tw-border-opacity));
  text-decoration-line: none;
}

.mk-route-hot {
  border-left: 4px solid #F05C3B;
}

/* ============ Split panels (good/bad compare) ============ */

.mk-panelbox {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 1.6rem;
}

.mk-panelbox-good {
  border-top: 3px solid #35D07F;
}

.mk-panelbox-bad {
  border-top: 3px solid #F05C3B;
}

/* :not(.mk-checklist) scoping: .mk-checklist (below) is a complete marker
   system of its own (border rhythm + gold square ::before). Fit's panels
   nest a .mk-checklist inside .mk-panelbox, and without the guard these
   plain-list rules and .mk-checklist's rules both match the same <li>,
   compositing an em dash inside the gold square instead of one clean
   marker. Plain <ul> lists (e.g. migrations/should-you-leave) still get
   the em dash here. */

.mk-panelbox ul:not(.mk-checklist) {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.mk-panelbox ul:not(.mk-checklist) > li {
  position: relative;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.95rem;
}

.mk-panelbox ul:not(.mk-checklist) > li:last-child {
  border-bottom-width: 0px;
}

.mk-panelbox ul:not(.mk-checklist) > li::before {
  content: "\2014";
  position: absolute;
  left: 0px;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

/* ============ EOL timeline ============ */

.mk-eol {
  display: grid;
  gap: 0.65rem;
  font-size: 0.9rem;
}

.mk-eol-row {
  display: grid;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  grid-template-columns: 11rem 1fr;
}

.mk-eol-ver {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
}

.mk-eol-bar {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
  height: 12px;
}

.mk-eol-bar i {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 9999px;
}

.mk-eol-ok i {
  --tw-bg-opacity: 1;
  background-color: rgb(53 208 127 / var(--tw-bg-opacity));
}

.mk-eol-warn i {
  --tw-bg-opacity: 1;
  background-color: rgb(249 162 27 / var(--tw-bg-opacity));
}

.mk-eol-past i {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.mk-eol-note {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.72rem;
}

@media (max-width: 600px) {
  .mk-eol-row {
    grid-template-columns: 1fr;
  }

  .mk-eol-bar {
    order: 3;
  }
}

/* ============ Case study / extension cards ============ */

.mk-cs-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.mk-cs-card-body {
  padding: 1.4rem;
}

.mk-metric {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-size: 1.5rem;
}

.mk-cs-strip {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mk-cs-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mk-cs-strip-item {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.mk-cs-strip-item :focus-visible {
  outline-color: #F9A21B;
}

.mk-cs-strip-item {
  padding: 1.5rem;
}

.mk-cs-strip .mk-metric {
  --tw-text-opacity: 1;
  color: rgb(251 190 90 / var(--tw-text-opacity));
  font-size: 1.6rem;
}

.mk-cs-strip-ctx {
  margin-top: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  font-size: 0.92rem;
}

.mk-slot {
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  padding: 1.5rem;
  font-size: 0.9rem;
}

.mk-surface-light .mk-slot,
.mk-surface-tint .mk-slot {
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

/* ============ Case study index list ============ */

/*
 * The /proof/case-studies/ index: a ledger of hairline-divided rows, each
 * with a uniform "plate" on the right — a photo (cover), a chart (contained
 * on paper), or a stat specimen when a study has no image yet. The plate is
 * the only fixed dimension (19rem x 16:10) so every row lines up.
 */

.mk-studylist {
  /* Constrained measure: the ledger reads as one column of text + plates,
       not content marooned at opposite edges of a wide container. */
  max-width: 64rem;
}

.mk-studylist > * + * {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
}

.mk-study-row {
  /* relative: the title link stretches over the whole row (see .mk-h3
       a::after), making the full card clickable with a single tab stop. */
  position: relative;
  display: grid;
  align-items: center;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 1rem;
  padding: 1.9rem 0;
}

@media (min-width: 768px) {
  .mk-study-row {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}

.mk-study-kicker {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* Row typographic scale: kicker whispers, title leads, the metric is a
   specimen caption under it, body settles into a soft reading measure. */

.mk-study-row .mk-study-kicker {
  margin-bottom: 0.6rem;
}

.mk-study-row .mk-h3 {
  font-size: 1.45rem;
  margin-bottom: 0.35rem;
}

.mk-study-row .mk-h3 a {
  text-decoration-line: none;
}

.mk-study-row .mk-h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.mk-study-row:hover .mk-h3 a {
  text-decoration-line: underline;
  text-decoration-color: #C23C1C;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* The explicit links sit above the stretched title link. */

.mk-study-row .mk-study-cta a,
.mk-study-row .mk-study-row-media {
  position: relative;
  z-index: 1;
}

.mk-study-row .mk-metric {
  font-size: 1rem;
}

.mk-study-desc {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 36rem;
  margin-top: 0.65rem;
}

.mk-study-cta {
  margin-top: 0.85rem;
  font-size: 0.9rem;
}

.mk-study-row-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

[data-content-type$='block'] .mk-study-row-media p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-study-row-media.filter {
}

.mk-study-row-media {
  aspect-ratio: 16 / 10;
  transition: border-color 0.3s ease;
}

.mk-study-row:hover .mk-study-row-media {
  --tw-border-opacity: 1;
  border-color: rgb(143 90 12 / var(--tw-border-opacity));
}

.mk-study-row-media img {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mk-study-row:hover .mk-study-row-media img {
  transform: scale(1.03);
}

/* Charts sit whole on the paper plate rather than cropping. */

.mk-study-row-media--fit img {
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.75rem;
}

.mk-study-row-media--stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

.mk-study-row-media--stat:hover {
  text-decoration-line: none;
}

.mk-study-row-media--stat {
  padding: 1rem 1.4rem;
}

.mk-study-row-media--stat .mk-metric {
  font-size: 1.9rem;
}

/* ============ Extension detail on catalog tiles ============ */

/*
 * /extensions/ renders the real category PLP, not a bespoke card grid, so these
 * dress the standard Hyvä product tile (Magento_Catalog product/list/item.phtml)
 * rather than a marketing component. Measured values, so mono per the type roles.
 */

.mk-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.8rem;
}

/* ============ Vignettes (rescue) ============ */

.mk-vign {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.mk-vign :focus-visible {
  outline-color: #F9A21B;
}

.mk-vign {
  font-size: 0.85rem;
  line-height: 1.7;
  padding: 1.3rem;
}

.mk-vign b {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* ============ Content figures ============ */

/* Aspect-boxed, rounded, object-cover fill (set the ratio with an aspect-*
   utility on the figure, e.g. aspect-[16/9]). */

.mk-figure {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
}

[data-content-type$='block'] .mk-figure p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-figure.filter {
}

.mk-figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mk-figure figcaption {
  margin-top: 0.5rem;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
  font-size: 0.72rem;
}

/* Portrait not shot yet. Holds the card's photo slot so names and roles stay
   on one baseline across a row — an empty slot drops that card's text to the
   top and the row reads as broken. Initials, never a stock substitute. */

.mk-figure--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  aspect-ratio: 1 / 1;
}

.mk-figure--pending span {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(122 139 152 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-figure--pending span {
  color: #133444;
}

.mk-figure--pending span {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

/* Full-bleed cinematic image band (edge-to-edge, responsive height). */

.mk-figure-band {
  display: block;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.mk-figure-band :focus-visible {
  outline-color: #F9A21B;
}

[data-content-type$='block'] .mk-figure-band p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-figure-band.filter {
}

.mk-figure-band img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: clamp(11rem, 32vw, 24rem);
}

/* ============ Self-assessment ============ */

.mk-assess {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.8rem;
}

.mk-assess fieldset {
  border-width: 0px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 1.1rem 0;
}

.mk-assess legend {
  font-weight: 600;
}

.pdp-reviewform .review-form > fieldset > legend .mk-assess legend {
  color: #133444;
}

.mk-assess legend {
  padding: 0 0 0.5rem;
}

.mk-assess-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mk-assess-opts label {
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding: 0.42rem 0.95rem;
  font-size: 0.88rem;
}

.mk-assess-opts input {
  pointer-events: none;
  position: absolute;
  opacity: 0;
}

.mk-assess-opts label:has(input:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mk-assess-opts label:has(input:checked) :focus-visible {
  outline-color: #F9A21B;
}

.mk-assess-opts label:focus-within {
  outline: 2px solid #F9A21B;
  outline-offset: 2px;
}

.mk-result {
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
  padding: 1.5rem;
}

.mk-result-verdict {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

/* ============ Sitewide chrome: header, nav, footer ============ */

/* Ported from prototype .site-header / .nav / .navdrop / .storedown /
   .drawer / .site-footer / .fcols / .fbottom — see docs/paradoxlabs-prototype-v2.html */

.mk-logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  gap: 0.55rem;
}

.mk-logo:hover {
  text-decoration-line: none;
}

.mk-logo img {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 100%;
}

[data-content-type$='block'] .mk-logo img p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-logo img.filter {
}

.mk-nav {
  align-items: center;
  -moz-column-gap: 1.55rem;
       column-gap: 1.55rem;
}

/* Nav links carry a reserved-space transparent bottom border at rest so the
   gold hover underline (legend rule 2: gold = nav underlines) never shifts
   layout — matches the concept .site-nav a treatment. */

.mk-nav-link {
  border-bottom-width: 2px;
  border-color: transparent;
  font-weight: 500;
  color: rgb(233 237 240 / 0.8);
  text-decoration-line: none;
  font-size: 0.93rem;
  padding: 0.4rem 0.2rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mk-nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  border-color: #F9A21B;
}

.mk-nav-link[aria-current="page"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  box-shadow: 0 2px 0 #F9A21B;
}

.mk-navdrop {
  position: relative;
}

/* Was a <details><summary>; now an Alpine hover-intent <button> (open state via
   aria-expanded, not the [open] attribute). Reset the button chrome and keep the
   summary's original look/caret. */

.mk-navdrop-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.3rem;
  border-width: 0px;
  background-color: transparent;
  font-weight: 500;
  color: rgb(233 237 240 / 0.8);
  font-size: 0.93rem;
  padding: 0.4rem 0.2rem;
  transition: color 0.15s ease;
}

.mk-navdrop-summary::-webkit-details-marker {
  display: none;
}

.mk-navdrop-summary::after {
  content: "";
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
  border-color: currentColor;
  width: 7px;
  height: 7px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.mk-navdrop-summary[aria-expanded="true"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Caret flips to point up while the panel is open. */

.mk-navdrop-summary[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateX(-2px);
}

/* Dropdown panel: night-deep with night-edge hairlines (Task 8 step 2). */

.mk-navdrop-panel {
  position: absolute;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(8 23 34 / var(--tw-bg-opacity));
}

.mk-navdrop-panel :focus-visible {
  outline-color: #F9A21B;
}

.mk-navdrop-panel {
  top: calc(100% + 12px);
  left: -1rem;
  min-width: 19rem;
  padding: 0.5rem;
  box-shadow: 0 18px 40px rgba(4, 10, 18, 0.5);
}

/* Group headings are links too (see .mk-navdrop-group-heading) and must keep
   their eyebrow scale, so they opt out here. The :not() sits inside :where() so
   it contributes zero specificity — matching the .mk-surface-night convention
   above, and keeping this rule at (0,1,1) so .mk-navdrop-foot a still wins. */

.mk-navdrop-panel a:where(:not(.mk-navdrop-group-heading)) {
  display: block;
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
  text-decoration-line: none;
}

[data-content-type$='block'] .mk-navdrop-panel a:where(:not(.mk-navdrop-group-heading)) p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-navdrop-panel a:where(:not(.mk-navdrop-group-heading)).filter {
}

.mk-navdrop-panel a:where(:not(.mk-navdrop-group-heading)) {
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
}

.mk-navdrop-panel a:where(:not(.mk-navdrop-group-heading)):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.mk-navdrop-panel small {
  display: block;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

[data-content-type$='block'] .mk-navdrop-panel small p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-navdrop-panel small.filter {
}

.mk-navdrop-panel small {
  font-size: 0.74rem;
}

/* Right-anchored variant for dropdowns near the right end of the nav (About),
   so a wide panel opens inward instead of overflowing the viewport edge. */

.mk-navdrop-panel--end {
  left: auto;
  right: -1rem;
}

/* Multi-group panels (Services: ongoing care vs. project work) go two-up so a
   nine-item panel stays one screenful instead of a ~500px column. 34rem clears
   the nav's left offset inside the lg breakpoint (1024px) with room to spare. */

.mk-navdrop-panel--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.35rem;
  min-width: 34rem;
}

/* Run label, and the link to that run's overview page (Migrations overview,
   About ParadoxLabs, the two Services columns). Renders as a <p> instead when
   the overview page is launch-gated, so both element types are styled here. */

.mk-navdrop-group-heading {
  display: block;
  border-radius: 0.25rem;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  text-decoration-line: none;
}

[data-content-type$='block'] .mk-navdrop-group-heading p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-navdrop-group-heading.filter {
}

.mk-navdrop-group-heading {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 0.55rem 0.8rem 0.3rem;
}

/* Same hover as the items below it — every clickable row in the panel should
   behave identically, or the heading reads as decoration and never gets tried. */

a.mk-navdrop-group-heading:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
}

/* Drawer variant: the mobile accordion indents its links to pl-8, so the run
   labels line up with them. Explicit modifier rather than pl-8/pr-5 utilities
   on the element — those only win over the shorthand above by import order. */

.mk-navdrop-group-heading--drawer {
  padding: 0.9rem 1.25rem 0.35rem 2rem;
}

/* Panel footer row ("All services →"): spans every column, coral because it is
   an action link, hairline-separated from the groups above it. */

.mk-navdrop-foot {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}

.mk-navdrop-foot a {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  font-size: 0.82rem;
}

.mk-navdrop-foot a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 40 58 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

/* The alarm link — coral per the legend's "alarm link" rule, never gold. */

.mk-storedown {
  white-space: nowrap;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: none;
  font-size: 0.82rem;
}

.mk-storedown:hover {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* Drawer variant of the alarm link. In the mobile menu it sits below every nav
   item — often below the fold — so bare 0.82rem mono text reads as fine print.
   Outlined, not filled: still unmistakably an action, still subordinate to the
   solid-coral .mk-btn primaries on the page behind it. */

.mk-storedown-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(245 131 107 / 0.6);
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: none;
  font-size: 0.85rem;
  padding: 0.7rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mk-storedown-btn:hover {
  --tw-border-opacity: 1;
  border-color: rgb(245 131 107 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: none;
  background-color: rgb(245 131 107 / 0.12);
}

/* ============ Footer ============ */

/* Concept .foot-grid: brand block shares the grid (2fr-equivalent via span),
   link columns get room to breathe — max 4 tracks, never the old 7-up squeeze. */

.mk-fcols {
  display: grid;
  gap: 2.5rem 1.75rem;
  padding: 3.5rem 0 2.5rem;
  grid-template-columns: repeat(2, 1fr);
}

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

@media (min-width: 900px) {
  .mk-fcols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mk-fbrand {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .mk-fbrand {
    grid-column: span 2;
  }
}

.mk-fbrand p {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  margin: 0;
  max-width: 20rem;
  font-size: 0.85rem;
  line-height: 1.55;
}

.mk-fbrand .mk-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  gap: 0.4rem 1.6rem;
  font-size: 0.76rem;
  margin-top: 1.1rem;
}

/* Footer column heads — museum label treatment (concept .foot-grid h4): body
   face, all-small-caps, wide tracking. No lead-tick — the concept's foot-grid
   heads run plain; the tribar glyph is reserved for section eyebrows. */

.mk-fcols h2 {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.pdp-reviewform .review-form > fieldset > legend .mk-fcols h2 {
  color: #133444;
}

.mk-fcols h2 {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

/* Column links only — :not(.mk-flogo) keeps these higher-specificity rules
   off the brand lockup, whose own .mk-flogo flex layout must win now that the
   brand cell lives inside the grid. */

.mk-fcols a:not(.mk-flogo),
.mk-fcols span.mk-fplain {
  display: block;
  text-decoration-line: none;
}

[data-content-type$='block'] .mk-fcols a:not(.mk-flogo) p:last-child,[data-content-type$='block'] 
.mk-fcols span.mk-fplain p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-fcols a:not(.mk-flogo).filter,.category-view .sidebar 
.mk-fcols span.mk-fplain.filter {
}

.mk-fcols a:not(.mk-flogo),
.mk-fcols span.mk-fplain {
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.26rem 0;
}

/* Footer nav links follow the concept's .foot-grid treatment verbatim: quiet
   on-night-soft at rest, gold on hover (chrome highlight, like nav underlines
   — see concept lines 914-916). A footer full of coral reads as alarm; the
   single alarm link keeps coral via .mk-falarm. */

.mk-fcols a:not(.mk-flogo) {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  transition: color 0.15s ease;
}

.mk-fcols span.mk-fplain {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.mk-fcols a:not(.mk-flogo):hover {
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.mk-fcols a.mk-falarm {
  /* coral-300, not coral-500: 0.82rem on night-deep needs 4.5:1 (5.9 vs 4.0) */
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  font-size: 0.82rem;
}

.mk-fcols a.mk-falarm:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Single legal bar (concept .foot-legal): one hairline-topped row instead of
   the old stacked fbottom + legal-nav + address bands. */

.mk-flegal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 0 2.5rem;
  font-size: 0.78rem;
}

.mk-flegal a {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  text-decoration-line: none;
  transition: color 0.15s ease;
}

.mk-flegal a:hover {
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
}

.mk-flegal-org {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.25rem;
}

.mk-flegal-links {
  display: flex;
  flex-wrap: wrap;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  gap: 0.5rem 1.25rem;
}

/* Footer mark — the brand's staged three-color form (grey/coral/gold), not
   the animated hero-mark. Geometry ported verbatim from
   concept-i2c-nightgallery.html lines 1467-1471 (footer brand SVG). */

.mk-flogo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.mk-flogo:hover {
  text-decoration-line: none;
}

/* Joint shadows (every mark instance: hero exhibit, footer lockup): the
   logo's inside-corner gradient triangles burn into the leg colors rather
   than greying over them. Blend on the GROUP — browsers don't reliably blend
   svg child polygons directly (their opacity attribute isolates them). */

.mark-joints {
  mix-blend-mode: color-burn;
}

.mk-flogo-mark {
  display: block;
  flex: none;
}

[data-content-type$='block'] .mk-flogo-mark p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .mk-flogo-mark.filter {
}

.mk-flogo-mark {
  width: 24px;
  height: 28px;
  /* The impossible object: a quick full swish (soft start/stop), then still
       for a while. Segment easing applies to the 0→10% turn; the rest of the
       14s cycle holds. Neutralized by the reduced-motion catch-all. */
  animation: mk-mark-spin 14s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  /* Pivot on the triangle's circumcenter, not the box center: the three
       outer vertices of the mark are equidistant (~269 viewBox units) from
       (1728.9, 327.65) = 39.34% across, 50% down. Box-center rotation wobbles
       because the right tip extends further than the flat left edge. */
  transform-origin: 39.34% 50%;
}

@keyframes mk-mark-spin {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(1turn);
  }

  100% {
    transform: rotate(1turn);
  }
}

/* ============ Tessellation separators (mk-tess) ============
 * The signature I2c motif marking every light<->dark surface transition. A
 * centered SVG strip of 25 apex-up triangle tiles authored at 3000x60 (120x60
 * each) so tiles are NEVER stretched and always line up; the strip is scaled
 * uniformly (never stretched) below ~1072px and crops at the edges rather than
 * deforming — see the --mk-tess-h note on .mk-tess. Exactly one
 * accent triangle per strip (gold OR coral, never both), offset a fixed tile
 * count from the centerline. Backing color = the dark side of the transition,
 * set via a --to-* class (never an inline style; CSP). Geometry + treatment
 * ported from concept-i2c-nightgallery.html lines 438-458, 1088-1094, 1157-1163.
 */

/* Narrow viewports get the strip scaled DOWN uniformly rather than cropped
   harder. The SVG is 3000x60 with a matching viewBox, so overriding its width
   and height at a fixed 50:1 ratio is a pure uniform scale: tiles stay
   equilateral and aligned, the accent's tile-count offset from the centerline
   stays proportional (it is measured in user units, which scale with
   everything else), the tile fill still bleeds a full tile-row past the bottom
   edge, and no rule below needs to know the size. At 375px the old fixed 60px
   strip showed three ~120px teeth in a 116px-tall band; the seam has to read as
   a texture, not as three mountains.
   --mk-tess-h is continuous (a clamp, not a breakpoint step) on purpose: this
   file has already been bitten once by a fractional gap between a max-width and
   a min-width rule. It holds the authored 60px from 1072px up, so every desktop
   placement is byte-identical to what shipped. */

.mk-tess {
  --mk-tess-h: clamp(30px, 5.6vw, 60px);
  position: relative;
  height: calc(var(--mk-tess-h) + clamp(2.75rem, 6vh, 4.25rem));
  width: 100%;
  overflow: hidden;
}

.mk-tess svg {
  /* the global img,svg { max-width:100% } would letterbox/shrink the strip */
  max-width: none;
  height: var(--mk-tess-h);
  width: calc(var(--mk-tess-h) * 50);
  /* the SVG's own 3000:60 aspect */
  position: absolute;
  bottom: -1px;
  /* overlap the next section so no seam gap shows */
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

/* Backing (above-the-strip) color + tile (below-the-strip, overlapped) fill,
   keyed off `to`. Every in-page .mk-surface-night section is night.DEFAULT
   (only the footer is night.deep), so the night backing/tile below match that. */

.mk-tess--to-night {
  background: #0B1B28;
}

.mk-tess--to-night .mk-tess-tile {
  fill: #EFF1F3;
}

.mk-tess--to-light {
  background: #EFF1F3;
}

.mk-tess--to-light .mk-tess-tile {
  fill: #0B1B28;
}

/* Light above, night-deep below — the one placement (sitewide footer) that
   overlaps the footer's night-deep band instead of a night.DEFAULT set-piece. */

.mk-tess--to-light-deep {
  background: #EFF1F3;
}

.mk-tess--to-light-deep .mk-tess-tile {
  fill: #081722;
}

/* Night-deep above — the mirror of --to-light-deep, for coming back OUT of a
   night-deep band (the /proof/ telemetry strip) into a light section. */

.mk-tess--to-night-deep {
  background: #081722;
}

.mk-tess--to-night-deep .mk-tess-tile {
  fill: #EFF1F3;
}

/* Light-on-light variants — the squiggle between two light-family sections.
   --to-porcelain backs with true porcelain (mk-surface-light above); the
   --tiles-* overrides re-fill the tiles for the surface BELOW and must stay
   after the --to-* rules so the same-specificity override wins. */

.mk-tess--to-porcelain {
  background: #F8F9FA;
}

.mk-tess--to-porcelain .mk-tess-tile {
  fill: #EFF1F3;
}

.mk-tess--tiles-light .mk-tess-tile {
  fill: #F8F9FA;
}

.mk-tess--tiles-light-deep .mk-tess-tile {
  fill: #EFF1F3;
}

.mk-tess--tiles-night .mk-tess-tile {
  fill: #0B1B28;
}

.mk-tess--tiles-night-deep .mk-tess-tile {
  fill: #081722;
}

/* Accent triangles fade vivid (at the point) -> transparent (at the wide base)
   via a per-accent SVG linearGradient built in tess.phtml. The gradient stops
   pull their COLOR from these classes, so the token system stays the single
   source of truth; the fade SHAPE (offsets + stop-opacity) lives in the SVG.
   Primary vs. minor is distinguished by shape alone — both run at full opacity,
   so nothing composites to mud over navy the way a flat translucent fill did.
   Three hues (gold, coral, money-green) each with a lighter scatter variant. */

.mk-tess-stop--gold {
  stop-color: #F9A21B;
}

.mk-tess-stop--gold-soft {
  stop-color: #FBB040;
}

.mk-tess-stop--coral {
  stop-color: #F05C3B;
}

.mk-tess-stop--coral-soft {
  stop-color: #F5836B;
}

.mk-tess-stop--green {
  stop-color: #177A4A;
}

.mk-tess-stop--green-soft {
  stop-color: #6ECFA1;
}

/* On light-on-light strips the relief is subtle, so the accents (which no
   longer dissolve into a dark backing) would shout — damp the whole accent.
   tess.phtml stamps --soft when both backing and tile fill are light-family. */

.mk-tess--soft .mk-tess-accent {
  fill-opacity: 0.8;
}

.mk-tess--soft .mk-tess-accent--minor {
  fill-opacity: 0.55;
}

/**
 * Night-gallery hero set-piece + house-mark assembly animation.
 *
 * Ported from docs/design-concepts/concept-i2c-nightgallery.html: the base hero
 * (lines 269-436) merged with the decided night variant (lines 934-969). The
 * mark keyframes/delays and the reveal system are copied VERBATIM (lines
 * 331-406 and 464-474) and gated on the `.js` root class + a full
 * prefers-reduced-motion opt-out (lines 1000-1015). The mark component
 * (component/hero-mark.phtml) emits .hero-mark / .beam / .mfill / .mark-sheen;
 * its trigger script adds `js` to <html> and toggles .is-assembled.
 *
 * Night hero flush to the top: the band sits on the same night surface as the
 * header with no cut line — an explicit iteration decision (rollout plan Task 7).
 */

/* ---- Night hero band, flush to the header above ---- */

.mk-hero-stage {
  position: relative;
  /* pull the band up behind the sticky header so the top edge matches it */
  margin-top: -4.25rem;
  padding: calc(clamp(4rem, 10vh, 7rem) + 4.25rem) 0 0;
  overflow: hidden;
  background:
        radial-gradient(120% 90% at 50% 34%,
            #10293C 0%,
            #0B1B28 55%,
            #081722 100%);
}

.mk-hero-stage .mk-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.mk-hero-copy {
  max-width: 36rem;
}

/* The set-piece headline is the page's largest type — the concept's hero scale
   (lines 286-293), a full step above the section h2s. The single coral accent
   word is the one action-color highlight in the headline; coral-300 clears the
   night backing where coral-500 would not. */

.mk-hero-stage .mk-eyebrow {
  margin-bottom: 1.75rem;
}

.mk-hero-stage .mk-h1 {
  font-size: clamp(2.9rem, 7.5vw, 5.2rem);
  margin-bottom: 1.6rem;
}

.mk-hero-stage .mk-h1 .mk-hero-accent {
  color: #F5836B;
}

/* ---- The exhibit: the mark staged on a plinth under gallery light ---- */

.mk-hero-exhibit {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 3rem 0 0;
  margin: 0;
}

/* Cone of gold light from above — pure gradient, no images. */

.mk-hero-exhibit::before {
  content: "";
  position: absolute;
  /* box large enough that the glow fades out before its edges */
  inset: -60% -60% -10%;
  background:
        radial-gradient(38% 34% at 50% 42%,
            rgba(249, 162, 27, 0.2) 0%,
            rgba(249, 162, 27, 0) 68%);
  pointer-events: none;
}

.mk-mark-frame {
  position: relative;
  width: min(310px, 62vw);
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.55));
}

.mk-mark-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Scroll swirl: the hero-mark script drives --mark-swirl with inertial spin —
   scroll deltas kick angular velocity, friction coasts it to rest. Pivot on
   the triangle's circumcenter — 39.34%/50%, same math as the footer mark —
   because the right tip extends further than the flat left edge. Reduced
   motion never sets the variable, so this resolves to 0deg. The sheen band
   lives inside the svg (clipped by the mark's own polygons), so it rotates
   with the mark automatically — no sibling sync needed. */

.hero-mark {
  transform: rotate(var(--mark-swirl, 0deg));
  transform-origin: 39.34% 50%;
}

/* Grab-to-spin affordance. touch-action:pan-y lets the browser keep vertical
   swipes as a page scroll while the drag handler (hero-mark.phtml) claims the
   horizontal/tangential ones to spin the mark; gated to motion-on + JS to
   mirror that handler, so reduced-motion / no-JS keep native pinch-zoom and
   scrolling on the mark. user-select guards against selecting the plinth
   caption mid-fling. */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-mark {
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
}

/* Only fine pointers have a cursor to show the grab affordance. */

@media (hover: hover) and (pointer: fine) {
  .hero-mark {
    cursor: grab;
  }

  .hero-mark.is-grabbed {
    cursor: grabbing;
  }
}

/* Draw-in: outlines trace first, then each leg's color GROWS from its far end
   toward the joint — coral sweeps leftward, gold climbs upward, white slides
   downward — so color flows around the loop. clip-path inset() resolves
   against each polygon's fill-box. */

/* Beams are clipped to their own polygon (hero-mark.phtml), so the centered
   stroke is halved to its inner side — hence 5 here to keep ~2.5 visible. */

.hero-mark .beam {
  fill: none;
  stroke: #9FB0BC;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Each tracing beam is drawn in its own leg's EXACT final fill color, so the
   outline reads as the finished mark drawing itself in — not a foreign
   wireframe, and no seam when the beam sits over the grown fill before erasing.
   Values mirror the polygon fills in hero-mark.phtml (#EDECED / #F05C3B /
   #F9A21B). */

.hero-mark .beam-1 {
  stroke: #EDECED;
}

.hero-mark .beam-2 {
  stroke: #F05C3B;
}

.hero-mark .beam-3 {
  stroke: #F9A21B;
}

.js .hero-mark .mfill-2 {
  -webkit-clip-path: inset(0 0 0 100%);
          clip-path: inset(0 0 0 100%);
}

/* coral: sweeps leftward */

.js .hero-mark .mfill-3 {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
}

/* gold: climbs upward */

.js .hero-mark .mfill-1 {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}

/* white: slides downward */

.js .hero-mark.is-assembled .beam {
  animation:
        beam-trace 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        beam-erase 0.3s ease forwards;
}

.js .hero-mark.is-assembled .beam-2 {
  animation-delay: 0.1s, 2.7s;
}

.js .hero-mark.is-assembled .beam-3 {
  animation-delay: 0.35s, 2.7s;
}

.js .hero-mark.is-assembled .beam-1 {
  animation-delay: 0.6s, 2.7s;
}

.js .hero-mark.is-assembled .mfill {
  animation: fill-grow 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.js .hero-mark.is-assembled .mfill-2 {
  animation-delay: 0.9s;
}

.js .hero-mark.is-assembled .mfill-3 {
  animation-delay: 1.45s;
}

.js .hero-mark.is-assembled .mfill-1 {
  animation-delay: 2.0s;
}

@keyframes beam-trace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes beam-erase {
  to {
    stroke-opacity: 0;
  }
}

@keyframes fill-grow {
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

/* Joint shadows (logo-verbatim inside-corner gradients): hidden during the
   draw-in so they don't float over empty outlines, fading in as the last leg
   finishes growing (fills complete ~2.65s; sheen fires at 3.1s). */

.js .hero-mark .mark-joints {
  opacity: 0;
}

.js .hero-mark.is-assembled .mark-joints {
  animation: joint-fade 0.8s ease 2.6s both;
}

@keyframes joint-fade {
  to {
    opacity: 1;
  }
}

/* Light sweep across the assembled mark. The band is a slanted parallelogram
   INSIDE the svg, clipped by the mark's exact polygons (hero-mark.phtml) —
   replaces the concept's eyeballed percentage-hexagon overlay, whose top
   point sat at 36% while the mark's apex is at 17.9%. Translations are in
   svg user units; parked clear of the mark (x 1130-1430 vs mark 1557+) at
   rest, sweeping fully past its right edge (1994) when assembled. */

.mark-sheen-band {
  transform: translateX(-320px);
}

.js .hero-mark.is-assembled .mark-sheen-band {
  animation: sheen 1.1s ease-out 3.1s 1 both;
}

@keyframes sheen {
  from {
    transform: translateX(-320px);
  }

  to   {
    transform: translateX(760px);
  }
}

/* ---- The plinth ---- */

.mk-plinth {
  margin-top: -0.75rem;
  width: min(340px, 68vw);
  text-align: center;
}

.mk-plinth-top {
  height: 16px;
  background: linear-gradient(180deg, #16344A 0%, #0E2334 100%);
  border: 1px solid #12283A;
  border-bottom: none;
}

.mk-plinth-body {
  padding: 1.1rem 1.25rem 1.3rem;
  background: linear-gradient(180deg,
        #0B1B28 0%,
        #081722 100%);
  border: 1px solid #12283A;
  box-shadow: 0 30px 60px -20px rgba(11, 27, 40, 0.35);
}

.mk-plinth-body .mk-plinth-label {
  display: block;
  color: #9FB0BC;
}

.mk-plinth-body .mk-plinth-label b {
  color: #E9EDF0;
  font-weight: 600;
}

.mk-plinth-body .mk-plinth-caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #9FB0BC;
}

/* ============================================================
   REVEAL SYSTEM — IntersectionObserver adds .in-view (verbatim)
   ============================================================ */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

.js .reveal[data-delay="1"] {
  transition-delay: 0.12s;
}

.js .reveal[data-delay="2"] {
  transition-delay: 0.24s;
}

.js .reveal[data-delay="3"] {
  transition-delay: 0.36s;
}

/* ============================================================
   RESPONSIVE — single column under 900px
   ============================================================ */

@media (max-width: 900px) {
  .mk-hero-stage {
    margin-top: 0;
    padding-top: clamp(4rem, 10vh, 7rem);
  }

  .mk-hero-stage .mk-container {
    grid-template-columns: 1fr;
  }

  .mk-hero-copy {
    order: 1;
  }

  .mk-hero-exhibit {
    order: 0;
    padding-top: 1rem;
  }
}

/* ============================================================
   REDUCED MOTION — full opt-out (verbatim, lines 1010-1013)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js .hero-mark .beam {
    stroke-opacity: 0;
    animation: none;
  }

  .js .hero-mark .mfill {
    -webkit-clip-path: none !important;
            clip-path: none !important;
    animation: none;
  }

  .js .mark-sheen-band {
    animation: none !important;
    display: none;
  }

  .js .hero-mark .mark-joints {
    opacity: 1;
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Last: rules backported from the Tailwind-v4 parent theme that this v3 build
   cannot import. See the docblock in that file. */

/**
 * Backport of vendor Hyvä base component CSS that our build cannot consume.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The parent theme (hyva-themes/magento2-default-theme 1.5.2) builds with
 * Tailwind v4: its `web/tailwind/tailwind-source.css` uses `@import "tailwindcss"`,
 * `@theme`, `--spacing()` and `var(--color-*)` tokens. This child theme still
 * builds with Tailwind v3 (see package.json) and its `tailwind-source.css`
 * imports only its OWN `components/*.css` — the parent's component layer is
 * never compiled into `web/css/styles.css`.
 *
 * Magento's view-file fallback does not help here: the Tailwind build is a Node
 * build, not a Magento fallback lookup. So every class the parent defines in its
 * component layer, but this theme does not redefine, renders unstyled — while the
 * parent's *templates* (which we do inherit) keep emitting those classes.
 *
 * Audited gap (parent component classes with no definition in this theme),
 * confirmed against the rendered DOM of a product page:
 *   .snap-track .snap-pager .snap-marker  → present and unstyled; backported below
 *   .rating-summary                       → present and unstyled on the review
 *                                           form (display: block, black stars);
 *                                           backported below
 *   .input-group                          → parent search-form template emits it,
 *                                           but it does not appear in our rendered
 *                                           markup. Left alone: a faithful backport
 *                                           would also need the parent's v4 form
 *                                           token set (--form-radius, --form-stroke,
 *                                           --form-active-color).
 *   .field .form-input-addon .form-swatch .page-product-bundle .weee
 *                                         → not emitted by any live template; skipped
 *
 * The visible symptom was every product slider (related products, upsells,
 * recently viewed, PageBuilder carousels) collapsing to a full-width vertical
 * stack, because `.snap-track` fell back to `display: block`.
 *
 * Rules below are the parent's, translated from Tailwind v4 to v3:
 *   `--spacing(n)`         → the literal rem value (n * 0.25rem)
 *   `var(--color-primary)` → our `primary` token (coral)
 *   `var(--color-slate-*)` → our token equivalents
 *   nested `@media`        → hoisted out, so no nesting plugin is required
 *
 * DELETE THIS FILE when the theme is migrated to Tailwind v4 and picks up the
 * parent component layer directly.
 *
 * ---------------------------------------------------------------------------
 * AUDIT 2026-08-24 — Magento_Catalog/templates/product/view/gallery.phtml
 * (copied from vendor/hyva-themes/hyva-ui/components/gallery/B-fancy, part of
 * the PDP "Exhibit" rollout Phase 0). Checked every class in the copied
 * template against this theme's Tailwind v3 build:
 *   - all utility classes are core Tailwind v3 (incl. arbitrary values like
 *     `aspect-[var(--gallery-ratio)]`, `w-[var(--gallery-width)]`, and the
 *     arbitrary variant `[@media(pointer:coarse)]:hidden` — all supported by
 *     the installed tailwindcss 3.2.4) or already-defined theme tokens
 *     (`primary`, `.snap`, `.backdrop` in components/slider.css and
 *     components/modal.css respectively). Nothing needed backporting here.
 *   - the template's `--gallery-ratio` / `--gallery-width` / `--thumb-size`
 *     custom properties are set via inline `style="..."` attributes computed
 *     per-request from view.xml image-dimension config — not static values,
 *     so they cannot be moved into this stylesheet. This is a known exception
 *     to this theme's own no-inline-style CSP convention (see the rule
 *     documented in components/marketing.css: "never an inline style; CSP"),
 *     not merely a vendor quirk. Flagged in-template (see the CSP NOTE PHP
 *     comment in gallery.phtml, ahead of the markup so it never renders to
 *     the page) and left for a later PDP phase to resolve.
 *   - the component also needs `web/tailwind/utilities/mask-overflow.css`
 *     (copied from the same hyva-ui variant and imported in
 *     tailwind-source.css). That file is native Tailwind v3 (`@layer
 *     utilities`, `theme()`), not a v4→v3 backport, so it was not added here.
 * Verified by running the production build and grepping the compiled
 * web/css/styles.css for the classes above — all present.
 */

/* ---------- Sliders: components/slider.css in the parent ---------- */

.snap-track {
  --snap-cols: 1;
  --snap-gap: 1rem;
  --snap-size: calc(
        (100% - var(--snap-gap) * (var(--snap-cols) - 1)) / var(--snap-cols)
    );
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--snap-size);
  gap: var(--snap-gap);
  padding-block: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.snap-track > * {
  scroll-snap-align: start;
}

.snap-track::-webkit-scrollbar {
  display: none;
}

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

.snap-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
}

.snap-marker {
  flex-shrink: 0;
  block-size: 1rem;
  inline-size: 1rem;
  border-width: 1px;
  border-radius: 1rem;
  transition-duration: 300ms;
  transition-property: border-color, background-color;
  --tw-border-opacity: 1;
  border-color: rgb(122 139 152 / var(--tw-border-opacity));
}

.snap-marker[aria-current="true"] {
  inline-size: 1.75rem;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(240 92 59 / var(--tw-bg-opacity));
}

@media (prefers-reduced-motion: no-preference) {
  .snap-marker {
    transition-property: inline-size, border-color, background-color;
    will-change: inline-size;
  }
}

/* ---------- Ratings: components/rating-summary.css in the parent ----------
   Two of the five parent templates that emit this class are overridden in this
   theme and carry their own utilities; the review form and the customer review
   list are not, and rely on this rule for layout and star color. */

.rating-summary {
  display: flex;
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
}

/* purgecss end ignore */

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

.\!visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.-inset-4 {
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  left: -1rem;
}

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

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

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-2 {
  bottom: 0.5rem;
}

.right-2 {
  right: 0.5rem;
}

.left-2 {
  left: 0.5rem;
}

.left-0 {
  left: 0px;
}

.top-full {
  top: 100%;
}

.bottom-4 {
  bottom: 1rem;
}

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

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

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

.-top-1\.5 {
  top: -0.375rem;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-top-1 {
  top: -0.25rem;
}

.-right-1 {
  right: -0.25rem;
}

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

.top-2 {
  top: 0.5rem;
}

.right-8 {
  right: 2rem;
}

.right-3 {
  right: 0.75rem;
}

.bottom-auto {
  bottom: auto;
}

.bottom-\[calc\(theme\(spacing\.5\)_\/_2_-_2px\)\] {
  bottom: calc(1.25rem / 2 - 2px);
}

.-left-2 {
  left: -0.5rem;
}

.-right-2\.5 {
  right: -0.625rem;
}

.right-4 {
  right: 1rem;
}

.-top-3 {
  top: -0.75rem;
}

.isolate {
  isolation: isolate;
}

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

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

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

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

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

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

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

.z-\[80\] {
  z-index: 80;
}

.order-3 {
  order: 3;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-last {
  order: 9999;
}

.col-span-full {
  grid-column: 1 / -1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.clear-left {
  clear: left;
}

.m-auto {
  margin: auto;
}

.-m-4 {
  margin: -1rem;
}

.-m-3 {
  margin: -0.75rem;
}

.m-4 {
  margin: 1rem;
}

.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 0.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

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

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

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

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

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

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

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

.mb-0 {
  margin-bottom: 0px;
}

.mr-4 {
  margin-right: 1rem;
}

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

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

.mt-1 {
  margin-top: 0.25rem;
}

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

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

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

.ml-6 {
  margin-left: 1.5rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.-mb-0\.5 {
  margin-bottom: -0.125rem;
}

.-mb-0 {
  margin-bottom: -0px;
}

.-mr-4 {
  margin-right: -1rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

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

.mt-4 {
  margin-top: 1rem;
}

.ml-auto {
  margin-left: auto;
}

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

.mr-auto {
  margin-right: auto;
}

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

.mt-3 {
  margin-top: 0.75rem;
}

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

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

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

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

.mr-3 {
  margin-right: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

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

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-0 {
  margin-top: 0px;
}

.ml-3 {
  margin-left: 0.75rem;
}

.-ml-px {
  margin-left: -1px;
}

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

.mt-\[1\.6rem\] {
  margin-top: 1.6rem;
}

.mt-\[1\.2rem\] {
  margin-top: 1.2rem;
}

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

.mt-\[2rem\] {
  margin-top: 2rem;
}

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

.mt-\[1\.8rem\] {
  margin-top: 1.8rem;
}

.mt-\[\.8rem\] {
  margin-top: .8rem;
}

.mt-\[1\.4rem\] {
  margin-top: 1.4rem;
}

.mb-\[\.2rem\] {
  margin-bottom: .2rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-\[1\.3rem\] {
  margin-top: 1.3rem;
}

.mt-\[\.6rem\] {
  margin-top: .6rem;
}

.mt-\[2\.2rem\] {
  margin-top: 2.2rem;
}

.mt-\[2\.5rem\] {
  margin-top: 2.5rem;
}

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

.box-content {
  box-sizing: content-box;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.table-caption {
  display: table-caption;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.aspect-\[var\(--gallery-ratio\)\] {
  aspect-ratio: var(--gallery-ratio);
}

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

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-full {
  height: 100%;
}

.h-9 {
  height: 2.25rem;
}

.h-auto {
  height: auto;
}

.h-16 {
  height: 4rem;
}

.h-screen {
  height: 100vh;
}

.h-12 {
  height: 3rem;
}

.h-\[4\.25rem\] {
  height: 4.25rem;
}

.h-11 {
  height: 2.75rem;
}

.h-3 {
  height: 0.75rem;
}

.h-48 {
  height: 12rem;
}

.h-10 {
  height: 2.5rem;
}

.h-14 {
  height: 3.5rem;
}

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

.h-64 {
  height: 16rem;
}

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

.h-\[1\.125rem\] {
  height: 1.125rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-96 {
  height: 24rem;
}

.h-2 {
  height: 0.5rem;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-\[min\(1024px\2c \(100\%_-_2rem\)\)\] {
  max-height: min(1024px,(100% - 2rem));
}

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

.max-h-screen {
  max-height: 100vh;
}

.max-h-\[90svh\] {
  max-height: 90svh;
}

.min-h-\[4\.25rem\] {
  min-height: 4.25rem;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-a11y {
  min-height: 44px;
}

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

.w-3\/4 {
  width: 75%;
}

.w-full {
  width: 100%;
}

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-auto {
  width: auto;
}

.w-9 {
  width: 2.25rem;
}

.w-\[var\(--gallery-width\)\] {
  width: var(--gallery-width);
}

.w-screen {
  width: 100vw;
}

.w-20 {
  width: 5rem;
}

.w-16 {
  width: 4rem;
}

.w-1\/4 {
  width: 25%;
}

.w-12 {
  width: 3rem;
}

.w-11 {
  width: 2.75rem;
}

.w-14 {
  width: 3.5rem;
}

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

.w-64 {
  width: 16rem;
}

.w-3 {
  width: 0.75rem;
}

.w-10 {
  width: 2.5rem;
}

.w-0 {
  width: 0px;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-32 {
  width: 8rem;
}

.w-56 {
  width: 14rem;
}

.w-44 {
  width: 11rem;
}

.w-60 {
  width: 15rem;
}

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

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

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

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

.w-\[1\.125rem\] {
  width: 1.125rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-52 {
  width: 13rem;
}

.w-24 {
  width: 6rem;
}

.min-w-40 {
  min-width: 10rem;
}

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

.min-w-48 {
  min-width: 12rem;
}

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

.max-w-6xl {
  max-width: 72rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-\[min\(1280px\2c \(100\%_-_2rem\)\)\] {
  max-width: min(1280px,(100% - 2rem));
}

.max-w-md {
  max-width: 28rem;
}

.max-w-prose {
  max-width: 65ch;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-4xl {
  max-width: 56rem;
}

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

.max-w-\[15ch\] {
  max-width: 15ch;
}

.max-w-\[42rem\] {
  max-width: 42rem;
}

.max-w-\[44rem\] {
  max-width: 44rem;
}

.max-w-\[46rem\] {
  max-width: 46rem;
}

.max-w-\[52rem\] {
  max-width: 52rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-screen-lg {
  max-width: 1024px;
}

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

.max-w-sm {
  max-width: 24rem;
}

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

.flex-none {
  flex: none;
}

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

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

.shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

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

.table-auto {
  table-layout: auto;
}

.origin-top-right {
  transform-origin: top right;
}

.origin-top-left {
  transform-origin: top left;
}

.origin-bottom-left {
  transform-origin: bottom left;
}

.-translate-x-1 {
  --tw-translate-x: -0.25rem;
  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));
}

.translate-x-full {
  --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));
}

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

.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  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-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));
}

.-translate-x-full {
  --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));
}

.-translate-y-full {
  --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));
}

.-translate-y-8 {
  --tw-translate-y: -2rem;
  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-full {
  --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));
}

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

.translate-x-8 {
  --tw-translate-x: 2rem;
  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-20 {
  --tw-translate-y: 5rem;
  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-x-20 {
  --tw-translate-x: -5rem;
  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-20 {
  --tw-translate-y: -5rem;
  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-x-20 {
  --tw-translate-x: 5rem;
  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-12 {
  --tw-translate-y: 3rem;
  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));
}

.rotate-45 {
  --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));
}

.rotate-0 {
  --tw-rotate: 0deg;
  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));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}

.scale-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  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));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-wait {
  cursor: wait;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

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

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

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

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

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

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

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

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

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[1\.5fr_1fr\] {
  grid-template-columns: 1.5fr 1fr;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

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

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

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

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

.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-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

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

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

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

.gap-8 {
  gap: 2rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-y-16 {
  row-gap: 4rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.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-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

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

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * 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));
}

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

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

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

.justify-self-end {
  justify-self: end;
}

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

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

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

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

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

.overflow-y-clip {
  overflow-y: clip;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.overscroll-y-contain {
  overscroll-behavior-y: contain;
}

.overscroll-x-contain {
  overscroll-behavior-x: contain;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.whitespace-pre-line {
  white-space: pre-line;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded {
  border-radius: 0.25rem;
}

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

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

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

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

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

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

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

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

.border-l {
  border-left-width: 1px;
}

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

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

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

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

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

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-night {
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
}

.border-night-deep\/60 {
  border-color: rgb(8 23 34 / 0.6);
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(240 92 59 / var(--tw-border-opacity));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

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

.border-night-edge {
  --tw-border-opacity: 1;
  border-color: rgb(18 40 58 / var(--tw-border-opacity));
}

.border-night-edge\/70 {
  border-color: rgb(18 40 58 / 0.7);
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity));
}

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

.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

.border-container-lighter {
  --tw-border-opacity: 1;
  border-color: rgb(248 249 250 / var(--tw-border-opacity));
}

.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
}

.border-container-darker {
  --tw-border-opacity: 1;
  border-color: rgb(11 27 40 / var(--tw-border-opacity));
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.bg-container-lighter {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}

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

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-night-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(8 23 34 / var(--tw-bg-opacity));
}

.bg-night\/95 {
  background-color: rgb(11 27 40 / 0.95);
}

.bg-gold-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(143 90 12 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

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

.bg-night {
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

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

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

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

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

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(240 92 59 / var(--tw-bg-opacity));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

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

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-gray-200\/60 {
  background-color: rgb(229 231 235 / 0.6);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

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

.bg-\[\#262626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

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

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}

.bg-container-darker {
  --tw-bg-opacity: 1;
  background-color: rgb(11 27 40 / var(--tw-bg-opacity));
}

.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}

.bg-opacity-100 {
  --tw-bg-opacity: 1;
}

.bg-opacity-90 {
  --tw-bg-opacity: 0.9;
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.from-black\/10 {
  --tw-gradient-from: rgb(0 0 0 / 0.1);
  --tw-gradient-to: rgb(0 0 0 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.fill-current {
  fill: currentColor;
}

.fill-black\/20 {
  fill: rgb(0 0 0 / 0.2);
}

.stroke-white\/75 {
  stroke: rgb(255 255 255 / 0.75);
}

.stroke-current {
  stroke: currentColor;
}

.stroke-white {
  stroke: #fff;
}

.stroke-2 {
  stroke-width: 2;
}

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

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

.object-scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.p-4 {
  padding: 1rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-0 {
  padding: 0px;
}

.p-8 {
  padding: 2rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-6 {
  padding: 1.5rem;
}

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

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

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

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

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

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

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

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

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

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

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

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

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

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

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

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

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

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

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

.pl-6 {
  padding-left: 1.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

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

.pt-6 {
  padding-top: 1.5rem;
}

.pb-\[var\(--thumb-size\)\] {
  padding-bottom: var(--thumb-size);
}

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

.pl-8 {
  padding-left: 2rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

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

.pl-4 {
  padding-left: 1rem;
}

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

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

.pl-5 {
  padding-left: 1.25rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-\[2\.5rem\] {
  padding-bottom: 2.5rem;
}

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

.pb-\[2rem\] {
  padding-bottom: 2rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

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

.pr-9 {
  padding-right: 2.25rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

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

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

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

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

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

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

.font-display {
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
}

.font-sans {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[\.55em\] {
  font-size: .55em;
}

.text-\[\.8rem\] {
  font-size: .8rem;
}

.text-\[\.88rem\] {
  font-size: .88rem;
}

.text-\[\.85rem\] {
  font-size: .85rem;
}

.text-\[\.92rem\] {
  font-size: .92rem;
}

.text-\[\.9rem\] {
  font-size: .9rem;
}

.text-\[\.84rem\] {
  font-size: .84rem;
}

.text-\[1\.25rem\] {
  font-size: 1.25rem;
}

.text-\[1\.35rem\] {
  font-size: 1.35rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

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

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

.font-semibold {
  font-weight: 600;
}

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

.font-extrabold {
  font-weight: 800;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-tight {
  line-height: 1.25;
}

.leading-6 {
  line-height: 1.5rem;
}

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

.leading-7 {
  line-height: 1.75rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

.leading-normal {
  line-height: 1.5;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

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

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.text-coral-600 {
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

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

.text-on-night {
  --tw-text-opacity: 1;
  color: rgb(233 237 240 / var(--tw-text-opacity));
}

.text-ink-faint {
  --tw-text-opacity: 1;
  color: rgb(122 139 152 / var(--tw-text-opacity));
}

.text-grey {
  --tw-text-opacity: 1;
  color: rgb(237 236 237 / var(--tw-text-opacity));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(240 92 59 / var(--tw-text-opacity));
}

.text-primary\/50 {
  color: rgb(240 92 59 / 0.5);
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-on-night-soft {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

.text-coral-300 {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-current {
  color: currentColor;
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity));
}

.text-inherit {
  color: inherit;
}

.text-primary-darker {
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-\[\#00d061\] {
  --tw-text-opacity: 1;
  color: rgb(0 208 97 / var(--tw-text-opacity));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(239 241 243 / var(--tw-text-opacity));
}

.text-secondary-darker {
  --tw-text-opacity: 1;
  color: rgb(227 230 233 / var(--tw-text-opacity));
}

.text-gold-700 {
  --tw-text-opacity: 1;
  color: rgb(143 90 12 / var(--tw-text-opacity));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

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

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

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-75 {
  opacity: 0.75;
}

.mix-blend-darken {
  mix-blend-mode: darken;
}

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

.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-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -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);
}

.shadow-none {
  --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);
}

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

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

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

.-outline-offset-2 {
  outline-offset: -2px;
}

.outline-offset-0 {
  outline-offset: 0px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.outline-primary {
  outline-color: #F05C3B;
}

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

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}

.ring-blue-500\/50 {
  --tw-ring-color: rgb(59 130 246 / 0.5);
}

.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 {
  --tw-backdrop-blur: blur(8px);
  -webkit-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);
          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);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-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);
          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);
}

.backdrop-filter {
  -webkit-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);
          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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  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-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-none {
  transition-property: none;
}

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

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* This class only exists for backwards compatibility, */

/* The default is applied in tailwind.config.js since Hyvä 1.2.0 */

.mask-overflow {
  --tw-mask-dir: to right;
  --tw-mask-size: 2rem;
  --tw-mask-color: 0 0 0;
  /* rgb color keys */
  --tw-mask-start: rgb(var(--tw-mask-color) / 0%);
  --tw-mask-end: rgb(var(--tw-mask-color) / 0%);
  --tw-mask: linear-gradient(
            var(--tw-mask-dir),
            var(--tw-mask-start),
            rgb(var(--tw-mask-color)) var(--tw-mask-size),
            rgb(var(--tw-mask-color)) calc(100% - var(--tw-mask-size)),
            var(--tw-mask-end)
        );
  -webkit-mask-image: var(--tw-mask);
  mask-image: var(--tw-mask);
}

.mask-overflow-start {
  --tw-mask-end: rgb(var(--tw-mask-color));
}

.mask-overflow-end {
  --tw-mask-start: rgb(var(--tw-mask-color));
}

.mask-dir-y {
  --tw-mask-dir: to bottom;
}

.mask-overflow {
  --tw-mask-dir: to right;
  --tw-mask-size: 2rem;
  --tw-mask-color: 0 0 0;
  /* rgb color keys */
  --tw-mask-start: rgb(var(--tw-mask-color) / 0%);
  --tw-mask-end: rgb(var(--tw-mask-color) / 0%);
  --tw-mask: linear-gradient(
            var(--tw-mask-dir),
            var(--tw-mask-start),
            rgb(var(--tw-mask-color)) var(--tw-mask-size),
            rgb(var(--tw-mask-color)) calc(100% - var(--tw-mask-size)),
            var(--tw-mask-end)
        );
  -webkit-mask-image: var(--tw-mask);
  mask-image: var(--tw-mask);
}

.mask-overflow-start {
  --tw-mask-end: rgb(var(--tw-mask-color));
}

.mask-overflow-end {
  --tw-mask-start: rgb(var(--tw-mask-color));
}

.mask-dir-y {
  --tw-mask-dir: to bottom;
}

.\[wire\:select\] {
  wire: select;
}

.\[wire\:model\] {
  wire: model;
}

.\[--line-before\:\#0000\] {
  --line-before: #0000;
}

.\[--line-after\:theme\(colors\.primary\.DEFAULT\)\] {
  --line-after: #F05C3B;
}

.\[--line-before\:theme\(colors\.primary\.DEFAULT\)\] {
  --line-before: #F05C3B;
}

.\[wire\:auto-save\] {
  wire: auto-save;
}

.\[wire\:model\.defer\] {
  wire: model.defer;
}

.page-footer{
}

.bg-footer-background {
  background-repeat: no-repeat;
  background-size: 100vh;
  background-position-x: center;
  background-position-y: -500px;
}

/* ============================================================================
 * Footer scope — everything below is pinned under <footer class="page-footer">.
 *
 * marketing.css (owned by a parallel agent) defines the shared mk-fcols /
 * mk-flogo / mk-telemetry* / mk-stat* / mk-metric primitives, which are ALSO
 * used by product reviews, the customer dashboard and the on-page telemetry
 * bars (home, /proof/ hub). Nothing here may change their global look, so
 * every rule is scoped to .page-footer and only nudges the footer instance.
 * ========================================================================== */

/* ---- Task 1: slim the sitemap band -----------------------------------------
 * Trimmed link lists (columns.phtml) do the heavy lifting; these footer-scoped
 * nudges tighten the vertical rhythm without touching the shared .mk-fcols
 * primitive (specificity beats marketing.css's bare .mk-fcols selectors). */

.page-footer .mk-fcols {
  padding-top: 2.75rem;
  padding-bottom: 2rem;
}

.page-footer .mk-fcols a:not(.mk-flogo),
.page-footer .mk-fcols span.mk-fplain {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* ---- Task 3: telemetry as a museum-specimen proof band ----------------------
 * Restyles the shared mk-telemetry strip ONLY inside the footer: crisp tabular
 * figures that stand out, quiet small-caps labels + provenance captions that
 * blend into the night-gallery footer (rather than the loud coral ticker the
 * same component keeps on marketing pages). */

/* Top air for the plaque header (padding, not margin, so it can't collapse up
   out of the night band above the telemetry strip). */

.page-footer .mk-ftele {
  padding-top: 1.75rem;
}

/* The reused .mk-eyebrow titles the strip like a plaque header; trim its 1rem
   base margin so it sits tight above the specimen row. */

.page-footer .mk-ftele .mk-eyebrow {
  margin-bottom: 0.7rem;
}

/* A touch more air than the ticker's 0.85rem so the figures read as a row of
   labels, aligned on a common baseline. */

.page-footer .mk-ftele .mk-telemetry-row {
  align-items: baseline;
  gap: 0.5rem 2.4rem;
  padding: 1.05rem 0;
}

/* Quiet at rest, gold on hover — mirrors the footer nav convention
   (.mk-fcols a): a strip full of coral reads as alarm, so coral stays reserved
   for the single rescue link elsewhere in the footer. */

.page-footer .mk-ftele .mk-telemetry-row a {
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
  gap: 0.55rem;
  transition: color 0.15s ease;
}

.page-footer .mk-ftele .mk-telemetry-row a:hover,
.page-footer .mk-ftele .mk-telemetry-row a:hover .mk-ftele-fig,
.page-footer .mk-ftele .mk-telemetry-row a:hover .mk-ftele-lbl {
  --tw-text-opacity: 1;
  color: rgb(249 162 27 / var(--tw-text-opacity));
  text-decoration-line: none;
}

/* The specimen figure: white mono tabular, the value that catches the eye. */

.page-footer .mk-ftele .mk-ftele-fig {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-right: 0.5rem;
}

/* The specimen label: quiet, sits beside the figure. */

.page-footer .mk-ftele .mk-ftele-lbl {
  --tw-text-opacity: 1;
  color: rgb(159 176 188 / var(--tw-text-opacity));
}

/* Reveal the provenance/date caption in the footer (marketing.css hides it on
   desktop for the on-page ticker) — a stat here always shows its date-stamp. */

.page-footer .mk-ftele .mk-telemetry-note {
  display: inline;
  margin-left: 0.15rem;
  font-size: 0.72rem;
  opacity: 0.85;
}

/* ---- Task 4: pin the brand-name color across states ------------------------
 * At rest the ambient `.mk-surface-night a:where(:not(.mk-btn))` coral rule
 * (0,1,1) outranks .mk-flogo's own text-white (0,1,0); on hover a vendor
 * `a:hover` leaks a blue that clashes with the night band. Anchor the name
 * white in every state — the tri-color mark beside it carries the motion. */

.page-footer .mk-flogo,
.page-footer .mk-flogo:hover,
.page-footer .mk-flogo:focus,
.page-footer .mk-flogo:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.page-header {
}

/* Checkout keeps the sitewide night chrome (the old coral/bg-primary band
   predates I2c — chrome is night, coral is actions only). */

.hyva_checkout-index-index #header {
  border-color: rgb(8 23 34 / 0.6);
  background-color: rgb(11 27 40 / 0.95);
}

.hyva_checkout-index-index #header :focus-visible {
  outline-color: #F9A21B;
}

.page-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.page-main {
  flex-grow: 1;
}

a:hover {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

header a:hover {
  --tw-text-opacity: 1;
  color: rgb(245 131 107 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.table-row-items > div.table-row-item {
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
}

.table-row-items > div.table-row-item:nth-child(2n + 1) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}

.cms-home .columns {
  margin: 0px;
  max-width: 100%;
  padding: 0px;
}

.cms-home .columns .pagebuilder-column-line {
  gap: 2.5rem;
}

.cms-banner {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

.cms-page-view,
.cms-home {
  /* clip, not hidden: overflow-x-hidden makes body a scroll container and
       silently kills the sticky header on exactly these pages. clip gives the
       same horizontal protection without breaking position: sticky. */
  overflow-x: clip;
}

.cms-page-view .page-main, .cms-home .page-main {
  margin-bottom: 0px;
}

.cms-page-view .page-main .column.main ul li, .cms-home .page-main .column.main ul li {
  list-style-position: inside;
  list-style-type: disc;
}

.blog-post-view #blog_search_mini_form, .blog-page-list #blog_search_mini_form {
  display: flex;
  align-items: center;
}

.blog-post-view #blog_search_mini_form .field.search, .blog-page-list #blog_search_mini_form .field.search {
  margin-top: 0px;
}

.blog-post-view #blog_search_mini_form .label, .blog-page-list #blog_search_mini_form .label {
  display: none;
}

.pdp-demo-dialog input.blog-post-view #blog_search_mini_form .label,.pdp-demo-dialog input .blog-page-list #blog_search_mini_form .label {
  display: none;
}

.blog-post-view #blog_search_mini_form #blog_search, .blog-page-list #blog_search_mini_form #blog_search {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.blog-post-view .block-content .item, .blog-page-list .block-content .item {
  gap: 0.5rem;
}

.blog-post-view .page-main .column.main ul li {
  list-style-position: inside;
  list-style-type: disc;
}

.blog-post-view .post-header {
  display: flex;
  gap: 1rem;
}

.blog-post-view .post-bottom .nextprev-link span {
  font-weight: 700;
}

.blog-post-view .post-bottom .post-nextprev {
  display: flex;
}

.blog-post-view .post-featured-image {
  margin-bottom: 2rem;
}

.blog-post-view .post-description {
  margin-bottom: 1rem;
}

.blog-post-view .post-description p {
  margin-bottom: 1rem;
}

.blog-page-list .post-read-more .action {
  /* Coral base, not gray: theme templates always pair .btn with a
           modifier, so bare .btn only occurs in legacy catalog/CMS content —
           it should read as the one action color (I2c legend rules 1/2). */
  display: flex;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(194 60 28 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .blog-page-list .post-read-more .action {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .blog-page-list .post-read-more .action {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.blog-page-list .post-read-more .action svg {
  display: inline-flex;
}

.blog-page-list .post-read-more .action span {
  vertical-align: middle;
}

.blog-page-list .post-read-more .action:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  filter: brightness(1.12);
}

.blog-page-list .post-read-more .action:focus:not(:focus-visible) {
  border-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.blog-page-list .post-read-more .action {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(19 52 68 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --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);
}

.blog-page-list .post-read-more .action:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 236 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  filter: none;
}

.blog-page-list .post-read-more .action:focus {
  border-color: transparent;
}

:where(#hyva-checkout-main) .blog-page-list .post-read-more .action {
  border-width: 2px;
}

:where(#hyva-checkout-main) .blog-page-list .post-read-more .action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) .blog-page-list .post-read-more .action:not(.btn-secondary) {
  border-color: transparent;
}

.blog-page-list .post-read-more .action {
  width: -moz-fit-content;
  width: fit-content;
}

.account a.blog-page-list .post-read-more .action,
    .account button.blog-page-list .post-read-more .action {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}


.pdp-buy .blog-page-list .post-read-more .action {
  flex: 1;
}

.pdp-reviewform .review-form .blog-page-list .post-read-more .action {
  display: inline-flex;
  border-radius: 0.375rem;
  font-family: Futura, "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  font-weight: 700;
  width: auto;
  margin-top: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(11, 27, 40, 0.2);
}


.pdp-mobilebuy .blog-page-list .post-read-more .action {
  margin-left: auto;
}

.input-group > :not(:last-child, button,.blog-page-list .post-read-more .action) {
  border-right-width: 0px;
}

.checkout-summary .checkout-nav .blog-page-list .post-read-more .action {
  width: 100%;
}

.blog-page-list .post-item {
  margin-bottom: 2rem;
}

.category-view .sidebar .block.filter {
}

.account-nav ul li a, .account-nav ul li strong {
  display: flex;
  justify-content: space-between;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

.account-nav ul li a:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.account-nav ul li strong {
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.actions-toolbar {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 236 237 / var(--tw-border-opacity));
  padding-top: 1rem;
}

.actions-toolbar a.back {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.paradoxlabs-download-my-account-list-latest-version .code {
  background: #262626;
  color: #00d061;
}

.block-dashboard-addresses .card:not(h2) {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

body > div > div.grecaptcha-badge {
  display: none;
}

.pdp-demo-dialog inputbody > div > div.grecaptcha-badge {
  display: none;
}

body > div > div.grecaptcha-badge {
  height: 0px !important;
  width: 0px !important;
}

.order-items > div:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(239 241 243 / var(--tw-bg-opacity));
}

.order-links {
  display: block;
}

[data-content-type$='block'] .order-links p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar .order-links.filter {
}

.order-links {
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.order-links li {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.order-links li.current {
  flex-grow: 1;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.order-links li a {
  text-decoration-line: underline;
}

.order-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

form .field, fieldset .field {
  margin-top: 0.25rem;
}

/* Reserve space for single line form validation messages */

form .field.field-reserved, fieldset .field.field-reserved {
  margin-bottom: 1.75rem;
}

form .field.field-reserved ul:last-of-type, fieldset .field.field-reserved ul:last-of-type {
  margin-bottom: -1.5rem;
  padding-bottom: 0.25rem;
}

form .field.field-reserved ul, fieldset .field.field-reserved ul {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

form label, fieldset label {
  margin-bottom: 0.5rem;
  display: block;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

[data-content-type$='block'] form label p:last-child,[data-content-type$='block']  fieldset label p:last-child {
  margin-bottom: 1rem;
  margin-top: 0px;
}

.category-view .sidebar form label.filter,.category-view .sidebar  fieldset label.filter {
}

form .field.choice, fieldset .field.choice {
  display: flex;
  align-items: center;
}

form .field.choice input, fieldset .field.choice input {
  margin-right: 1rem;
}

form .field.choice label, fieldset .field.choice label {
  margin-bottom: 0px;
}

form .field.field-error .messages, fieldset .field.field-error .messages {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
  max-width: -moz-fit-content;
  max-width: fit-content;
}

form legend, fieldset legend {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.pdp-reviewform #review-form > .card > form legend,.pdp-reviewform #review-form > .card >  fieldset legend {
  display: none;
}

form legend + br, fieldset legend + br {
  display: none;
}

.pdp-demo-dialog inputform legend + br,.pdp-demo-dialog input fieldset legend + br {
  display: none;
}

fieldset ~ fieldset {
  margin-top: 2rem;
}

.form-checkbox,
.form-radio {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

/* For backwards compatibility */

.flex-columns-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex-columns-wrapper {
    flex-direction: row;
  }
}

[wire\:loading],
[wire\:loading\.delay],
[wire\:loading\.inline-block],
[wire\:loading\.inline],
[wire\:loading\.block],
[wire\:loading\.flex],
[wire\:loading\.table],
[wire\:loading\.grid],
[wire\:loading\.inline-flex] {
  display: none;
}

[wire\:loading\.delay\.shortest],
[wire\:loading\.delay\.shorter],
[wire\:loading\.delay\.short],
[wire\:loading\.delay\.long],
[wire\:loading\.delay\.longer],
[wire\:loading\.delay\.longest] {
  display: none;
}

[wire\:offline] {
  display: none;
}

[wire\:dirty]:not(textarea):not(input):not(select) {
  display: none;
}

input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
  animation-duration: 50000s;
  animation-name: livewireautofill;
}

@keyframes livewireautofill {
  from {
  }
}

#livewire-error iframe {
  background-color: rgb(255 255 255) !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
}

:where(#hyva-checkout-main) .form-input,
    :where(#hyva-checkout-main) .form-email,
    :where(#hyva-checkout-main) .form-select,
    :where(#hyva-checkout-main) .form-multiselect,
    :where(#hyva-checkout-main) .form-textarea {
  color: #334155;
  border-color: #cbd5e1;
}

:where(#hyva-checkout-main) .form-checkbox,
    :where(#hyva-checkout-main) .form-radio {
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  cursor: pointer;
}

:where(#hyva-checkout-main) .form-checkbox:disabled,
    :where(#hyva-checkout-main) .form-radio:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(#hyva-checkout-main) .form-checkbox {
  border-radius: 0.25rem;
}

.input-group {
  position: relative;
  display: flex;
  gap: 0px;
  border-radius: 0.375rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-color: #cbd5e1;
}

.input-group:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(245 131 107 / var(--tw-border-opacity));
  --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);
  --tw-ring-color: rgb(240 92 59 / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}

.input-group > :not(:first-child) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.input-group > :not(:last-child, button, .btn) {
  border-right-width: 0px;
}

/* From here on these styles are Checkout specific */

:where(#hyva-checkout-main) .input-group :where(.form-input-addon) {
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  border-color: inherit;
}

:where(#hyva-checkout-main) .input-group :where(.form-input-addon):first-child {
  border-right-width: 0px;
  padding-left: 0.75rem;
}

:where(#hyva-checkout-main) .input-group :where(.form-input-addon):last-child {
  border-left-width: 0px;
  padding-right: 0.75rem;
}

:where(#hyva-checkout-main) .input-group
        > :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ) {
  --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);
}

:where(#hyva-checkout-main) .input-group
        > :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ):focus {
  --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(0px + 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);
}

:where(#hyva-checkout-main) .input-group
        > :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ) {
  border-color: inherit;
}

:where(#hyva-checkout-main) .input-group
        > :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ):not(:first-child) {
  padding-left: 0.5rem;
}

:where(#hyva-checkout-main) .input-group
        > :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ):not(:last-child) {
  padding-right: 0.5rem;
}

:where(#hyva-checkout-main) .input-group
        > :where(.form-input-addon)
        + :where(
            input:not([type="radio"], [type="checkbox"], [type="range"]),
            select,
            textarea
        ) {
  border-left-width: 0px;
}

:where(.step-layout-3columns) .btn-place-order {
  width: 100%;
}

.checkout-nav {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
}

.checkout-nav .checkout-nav-main,
    .checkout-nav .checkout-nav-secondary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .area-main .checkout-nav {
    flex-direction: row;
  }

  .area-main .checkout-nav .checkout-nav-main,
    .area-main .checkout-nav .checkout-nav-secondary {
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
  }

  .area-main .checkout-nav .checkout-nav-main {
    justify-content: space-between;
  }

  .area-main .checkout-nav .checkout-nav-main > button:only-child {
    margin-left: auto;
  }
}

.checkout-summary > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.checkout-summary {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
  padding: 1.5rem;
}

.checkout-summary .checkout-nav .btn {
  width: 100%;
}

:where(#hyva-checkout-main) .breadcrumbs .item {
  display: inline-flex;
  align-items: center;
}

:where(#hyva-checkout-main) .breadcrumbs .item.active > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

:where(#hyva-checkout-main) .breadcrumbs .item.active {
  font-weight: 700;
}

:where(#hyva-checkout-main) .breadcrumbs .item.locked {
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

:where(#hyva-checkout-main) .breadcrumbs .item.completed {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

:where(#hyva-checkout-main) [x-cloak] {
  display: none !important;
}

.checkout-default:where(:has(#hyva-checkout-main)) .columns,
    .checkout-default:where(:has(#hyva-checkout-main)) .page.messages .messages {
  max-width: 1024px;
}

/**
 * ! Not intended for use in the HTML
 * This only intended to add support for TailwindCSS v3 colors to TailwindCSS v2
 */

.before\:h-3::before {
  content: var(--tw-content);
  height: 0.75rem;
}

.before\:w-3::before {
  content: var(--tw-content);
  width: 0.75rem;
}

.before\:shrink-0::before {
  content: var(--tw-content);
  flex-shrink: 0;
}

.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px;
}

.before\:bg-green-500::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.before\:bg-red-500::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.first\:\[--line-before\:\#0000\]:first-child {
  --line-before: #0000;
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

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

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

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

.last\:border-transparent:last-child {
  border-color: transparent;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.last\:\[--line-after\:\#0000\]:last-child {
  --line-after: #0000;
}

.odd\:bg-white:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.even\:bg-container-lighter:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}

.even\:bg-gray-100:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.even\:bg-gray-50:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.open\:flex[open] {
  display: flex;
}

.invalid\:ring-2:invalid {
  --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(2px + 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);
}

.invalid\:ring-red-500:invalid {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}

.focus-within\:ring-1:focus-within {
  --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(1px + 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);
}

.focus-within\:ring-2:focus-within {
  --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(2px + 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);
}

.focus-within\:ring-indigo-500:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}

.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
}

.focus-within\:ring-offset-gray-100:focus-within {
  --tw-ring-offset-color: #f3f4f6;
}

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(240 92 59 / var(--tw-border-opacity));
}

.hover\:bg-night-edge\/40:hover {
  background-color: rgb(18 40 58 / 0.4);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:text-ink-soft:hover {
  --tw-text-opacity: 1;
  color: rgb(64 89 107 / var(--tw-text-opacity));
}

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

.hover\:text-coral-600:hover {
  --tw-text-opacity: 1;
  color: rgb(194 60 28 / var(--tw-text-opacity));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(19 52 68 / var(--tw-text-opacity));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.hover\:text-yellow-500:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(240 92 59 / var(--tw-text-opacity));
}

.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity));
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.hover\:text-secondary-darker:hover {
  --tw-text-opacity: 1;
  color: rgb(227 230 233 / var(--tw-text-opacity));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}

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

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-75:hover {
  opacity: 0.75;
}

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

.hover\:shadow-primary\/30:hover {
  --tw-shadow-color: rgb(240 92 59 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

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

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

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

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.focus\:border-blue-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

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

.focus\:p-2:focus {
  padding: 0.5rem;
}

.focus\:text-primary:focus {
  --tw-text-opacity: 1;
  color: rgb(240 92 59 / var(--tw-text-opacity));
}

.focus\:shadow-primary\/30:focus {
  --tw-shadow-color: rgb(240 92 59 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}

.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.active\:text-gray-500:active {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.active\:text-gray-700:active {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.active\:ring-0:active {
  --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(0px + 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);
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-75:disabled {
  opacity: 0.75;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group[open] .group-open\: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));
}

.group:hover .group-hover\:-translate-x-0\.5 {
  --tw-translate-x: -0.125rem;
  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));
}

.group:hover .group-hover\:-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));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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));
}

.group:hover .group-hover\:scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  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));
}

.group:hover .group-hover\:bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.group:hover .group-hover\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.group:hover .group-hover\:opacity-75 {
  opacity: 0.75;
}

.group:focus .group-focus\:border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.group:disabled .group-disabled\:invisible {
  visibility: hidden;
}

.group:disabled .group-disabled\:flex {
  display: flex;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-\[current\=page\]\:font-medium[aria-current=page] {
  font-weight: 500;
}

.aria-\[current\=step\]\:font-bold[aria-current=step] {
  font-weight: 700;
}

.group[aria-expanded="true"] .group-aria-expanded\: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));
}

.group[aria-expanded="true"] .group-aria-expanded\:text-inherit {
  color: inherit;
}

.data-\[expanded\=true\]\:mb-3[data-expanded=true] {
  margin-bottom: 0.75rem;
}

.data-\[open\=true\]\:block[data-open=true] {
  display: block;
}

.data-\[expanded\=true\]\:h-auto[data-expanded=true] {
  height: auto;
}

.data-\[active\]\:border-primary[data-active] {
  --tw-border-opacity: 1;
  border-color: rgb(240 92 59 / var(--tw-border-opacity));
}

.data-\[expanded\=true\]\:mask-none[data-expanded=true] {
  -webkit-mask-image: none;
  mask-image: none;
}

[dir="rtl"] .rtl\: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));
}

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

@media print {
  .print\:ml-5 {
    margin-left: 1.25rem;
  }

  .print\:mt-0 {
    margin-top: 0px;
  }

  .print\:flex {
    display: flex;
  }

  .print\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 640px) {
  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-3 {
    order: 3;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:m-0 {
    margin: 0px;
  }

  .sm\:-mt-3 {
    margin-top: -0.75rem;
  }

  .sm\:mr-8 {
    margin-right: 2rem;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:ml-3 {
    margin-left: 0.75rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:ml-6 {
    margin-left: 1.5rem;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-72 {
    height: 18rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:table-fixed {
    table-layout: fixed;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

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

  .sm\:justify-end {
    justify-content: flex-end;
  }

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

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

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .sm\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .sm\:overflow-hidden {
    overflow: hidden;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-16 {
    padding: 4rem;
  }

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

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

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

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

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

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:duration-700 {
    transition-duration: 700ms;
  }

  .sm\:\[--snap-cols\:2\] {
    --snap-cols: 2;
  }

  .sm\:\[\&_\.label-street\.sr-only\]\:not-sr-only .label-street.sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .sm\:\[\&_\.label-street\.sr-only\]\:invisible .label-street.sr-only {
    visibility: hidden;
  }

  .sm\:\[\&_\.label-street\.sr-only\]\:mb-2 .label-street.sr-only {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 768px) {
  .md\: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;
  }

  .md\:visible {
    visibility: visible;
  }

  .md\:right-5 {
    right: 1.25rem;
  }

  .md\:order-2 {
    order: 2;
  }

  .md\:order-1 {
    order: 1;
  }

  .md\:order-3 {
    order: 3;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

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

  .md\:col-start-2 {
    grid-column-start: 2;
  }

  .md\:row-span-2 {
    grid-row: span 2 / span 2;
  }

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

  .md\:row-start-2 {
    grid-row-start: 2;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mr-5 {
    margin-right: 1.25rem;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

  .md\:mr-0 {
    margin-right: 0px;
  }

  .md\:-mt-1 {
    margin-top: -0.25rem;
  }

  .md\:ml-auto {
    margin-left: auto;
  }

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

  .md\:-mr-1 {
    margin-right: -0.25rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:h-96 {
    height: 24rem;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-2\/6 {
    width: 33.333333%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-24 {
    width: 6rem;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-4\/6 {
    width: 66.666667%;
  }

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

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-2\/4 {
    width: 50%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-\[50vw\] {
    width: 50vw;
  }

  .md\:max-w-xs {
    max-width: 20rem;
  }

  .md\:max-w-sm {
    max-width: 24rem;
  }

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

  .md\:-translate-x-1\/3 {
    --tw-translate-x: -33.333333%;
    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));
  }

  .md\:cursor-text {
    cursor: text;
  }

  .md\:select-text {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-\[42\%_minmax\(0px\2c 1fr\)\] {
    grid-template-columns: 42% minmax(0px,1fr);
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .md\:flex-col-reverse {
    flex-direction: column-reverse;
  }

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

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

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

  .md\:justify-start {
    justify-content: flex-start;
  }

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

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .md\:gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

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

  .md\:justify-self-start {
    justify-self: start;
  }

  .md\:justify-self-end {
    justify-self: end;
  }

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

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

  .md\:p-0 {
    padding: 0px;
  }

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

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

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

  .md\:pl-5 {
    padding-left: 1.25rem;
  }

  .md\:pl-6 {
    padding-left: 1.5rem;
  }

  .md\:pr-4 {
    padding-right: 1rem;
  }

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

  .md\:text-start {
    text-align: start;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:\[--snap-cols\:2\] {
    --snap-cols: 2;
  }

  .md\:\[\&_label\.sr-only\]\:not-sr-only label.sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .md\:\[\&_label\.sr-only\]\:invisible label.sr-only {
    visibility: hidden;
  }

  .md\:\[\&_label\.sr-only\]\:mb-2 label.sr-only {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\: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;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:sticky {
    position: sticky;
  }

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

  .lg\:inset-y-auto {
    top: auto;
    bottom: auto;
  }

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

  .lg\:bottom-4 {
    bottom: 1rem;
  }

  .lg\:right-4 {
    right: 1rem;
  }

  .lg\:left-4 {
    left: 1rem;
  }

  .lg\:left-0 {
    left: 0px;
  }

  .lg\:right-auto {
    right: auto;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:bottom-auto {
    bottom: auto;
  }

  .lg\:top-\[var\(--msrp-block-offset\)\] {
    top: var(--msrp-block-offset);
  }

  .lg\:left-\[var\(--msrp-inline-offset\)\] {
    left: var(--msrp-inline-offset);
  }

  .lg\:top-4 {
    top: 1rem;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:order-first {
    order: -9999;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:mt-3 {
    margin-top: 0.75rem;
  }

  .lg\:ml-2 {
    margin-left: 0.5rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:ml-5 {
    margin-left: 1.25rem;
  }

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

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row {
    display: table-row;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-36 {
    height: 9rem;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-56 {
    width: 14rem;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:w-36 {
    width: 9rem;
  }

  .lg\:max-w-xs {
    max-width: 20rem;
  }

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

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

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

  .lg\:table-auto {
    table-layout: auto;
  }

  .lg\:-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));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0px\2c 1fr\)_26rem\] {
    grid-template-columns: minmax(0px,1fr) 26rem;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

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

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

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:rounded-md {
    border-radius: 0.375rem;
  }

  .lg\:rounded-sm {
    border-radius: 0.125rem;
  }

  .lg\:p-px {
    padding: 1px;
  }

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

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

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

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

  .lg\:py-48 {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

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

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pl-\[var\(--thumb-size\)\] {
    padding-left: var(--thumb-size);
  }

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

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

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

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

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

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

  .lg\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:mask-dir-y {
    --tw-mask-dir: to bottom;
  }

  .lg\:\[--snap-cols\:3\] {
    --snap-cols: 3;
  }

  .lg\:data-\[overflow\]\:hidden[data-overflow] {
    display: none;
  }
}

@media (min-width: 1280px) {
  .xl\:inset-x-0 {
    left: 0px;
    right: 0px;
  }

  .xl\:bottom-8 {
    bottom: 2rem;
  }

  .xl\:right-8 {
    right: 2rem;
  }

  .xl\:left-8 {
    left: 2rem;
  }

  .xl\:bottom-auto {
    bottom: auto;
  }

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

  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:mt-0 {
    margin-top: 0px;
  }

  .xl\:block {
    display: block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:w-1\/4 {
    width: 25%;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:-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));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

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

  .xl\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .xl\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

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

  .xl\:border-none {
    border-style: none;
  }

  .xl\:p-12 {
    padding: 3rem;
  }

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

  .xl\:pl-14 {
    padding-left: 3.5rem;
  }

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

  .xl\:pl-16 {
    padding-left: 4rem;
  }

  .xl\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .xl\:\[--snap-cols\:4\] {
    --snap-cols: 4;
  }

  .xl\:focus-within\:relative:focus-within {
    position: relative;
  }
}

@media (min-width: 1536px) {
  .\32xl\:w-96 {
    width: 24rem;
  }

  .\32xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .\32xl\:\[--snap-cols\:5\] {
    --snap-cols: 5;
  }
}

@media (min-width:63rem) {
  .\[\@media\(min-width\:63rem\)\]\:grid-cols-\[minmax\(0\2c 1\.15fr\)_minmax\(0\2c 0\.85fr\)\] {
    grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  }

  .\[\@media\(min-width\:63rem\)\]\:gap-16 {
    gap: 4rem;
  }
}

@media (pointer:coarse) {
  .\[\@media\(pointer\:coarse\)\]\:hidden {
    display: none;
  }
}