@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap');

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

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: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}

/*
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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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 */
  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:-ms-input-placeholder, textarea:-ms-input-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;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}

*, ::before, ::after{
  --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%;
}

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

@media (min-width: 1024px){
  .admin-sticky-panel-lg{
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

@media (min-width: 1280px){
  .admin-sticky-panel-xl{
    position: -webkit-sticky;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* Secondary admin action (dossier action columns): a *visible* button, unlike
       the old bold-text-with-arrow links nobody could find. Primary actions stay
       filled BbButtons; tiny in-panel links stay plain tertiary text. */

.admin-action{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.admin-action:hover{
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.admin-action:disabled{
  opacity: 0.5;
}

/* The review Queue is worked on a phone as well as at the desk, so every
       control it offers needs a thumb-sized hit area below `sm` — 44px is the
       floor both platform guidelines settle on. From `sm` up it reverts to the
       compact desk sizing, where a pointer makes small targets fine. Applied to
       the control itself rather than a wrapper, so the whole 44px is tappable
       and not just the text inside it. */

.queue-tap{
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px){
  .queue-tap{
    min-height: 0px;
  }
}

/* Admin data tables on a phone. Seven columns inside a 360px viewport give every
       column ~50px, and the first thing to collapse is the one you came for — the
       product's name, truncated to "Coca-Co…" while "Tasters: 0" sits there in full.

       Below md a row stops being a row: the identity cell gets its own line, every
       other cell becomes a label/value pair beneath it, and the header row is hidden
       because each value now carries its own label. From md up it is an ordinary
       table again, untouched.

       Opt in per cell, so a table reads the same in markup as it does on screen:
         data-cell="primary"  → the identity cell (name, thumb) — own line, no label
         data-label="Rating"  → a meta cell — label left, value right
         data-cell="actions"  → the trailing button cell — own line, breathing room
       A cell marked with none of these still renders as its own line, so a missed
       one degrades to "readable" rather than "overlapping". */

@media (max-width: 767px) {
  .admin-table thead {
    display: none;
  }

  .admin-table tbody {
    display: block;
  }

  .admin-table tr {
    display: block;
    padding: 0.75rem 1rem;
  }

  .admin-table td {
    display: block;
    padding: 0.125rem 0 !important;
  }

  /* Label then value, both inline — NOT a flex row. A cell's value is often several
           nodes ("Chips" plus a muted "(Snack)"), and flex makes every one of them its own
           item: space-between then flung them to opposite ends and the row read
           "CATEGORY | Chips | (Snack)" as if those were three columns. Inline keeps a value
           whole however many tags it is made of. */

  .admin-table td[data-label] {
    display: block;
    /* A `text-right` utility on the desktop column would otherwise drag the label
               across with the value. */
    text-align: left !important;
  }

  .admin-table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 6.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    /* slate-400 */
  }

  .admin-table td[data-cell="primary"] {
    padding-bottom: 0.375rem !important;
  }

  .admin-table td[data-cell="actions"] {
    padding-top: 0.5rem !important;
  }

  /* The bulk-select checkbox is desk equipment: it exists to feed a toolbar of bulk
           actions that no one drives from a phone, and stacked it became a labelled row of
           its own reading "SELECT ☐" above every product. */

  .admin-table td[data-cell="select"] {
    display: none !important;
  }
}

/* Discovery carousels (SdCarousel) want a clean, mobile-feel horizontal
       slide with no scrollbar chrome. Hide it cross-browser; the strip still
       scrolls by drag/wheel/touch. */

.no-scrollbar {
  -ms-overflow-style: none;
  /* IE/old Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chromium/WebKit */
}

/* 2-line truncation for tile/card titles. Tailwind's `line-clamp-*` core
       utilities only ship in v3.3+; this project is pinned to 3.0.x, so the
       SdMumsTile (and SdMumsCard's `line-clamp-2`) need this hand-rolled rule. */

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: -webkit-sticky;
  position: sticky;
}

.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

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

.inset-x-8{
  left: 2rem;
  right: 2rem;
}

.top-4{
  top: 1rem;
}

.right-4{
  right: 1rem;
}

.top-0{
  top: 0px;
}

.right-0{
  right: 0px;
}

.bottom-0{
  bottom: 0px;
}

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

.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-full{
  top: 100%;
}

.left-0{
  left: 0px;
}

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

.z-\[100\]{
  z-index: 100;
}

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

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

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

.col-span-2{
  grid-column: span 2 / span 2;
}

.m-0{
  margin: 0px;
}

.m-px{
  margin: 1px;
}

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

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

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

.mt-16{
  margin-top: 4rem;
}

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

.mt-3{
  margin-top: 0.75rem;
}

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

.mb-1\.5{
  margin-bottom: 0.375rem;
}

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

.mr-1{
  margin-right: 0.25rem;
}

.mt-1\.5{
  margin-top: 0.375rem;
}

.mt-1{
  margin-top: 0.25rem;
}

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

.mt-4{
  margin-top: 1rem;
}

.ml-1{
  margin-left: 0.25rem;
}

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

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

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

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

.ml-2{
  margin-left: 0.5rem;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-0{
  margin-top: 0px;
}

.ml-3{
  margin-left: 0.75rem;
}

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

.mt-2\.5{
  margin-top: 0.625rem;
}

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

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

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

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

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

.mt-10{
  margin-top: 2.5rem;
}

.mt-12{
  margin-top: 3rem;
}

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

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

.ml-auto{
  margin-left: auto;
}

.-mb-px{
  margin-bottom: -1px;
}

.mb-2\.5{
  margin-bottom: 0.625rem;
}

.ml-1\.5{
  margin-left: 0.375rem;
}

.block{
  display: block;
}

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

.inline{
  display: inline;
}

.flex{
  display: flex;
}

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

.table{
  display: table;
}

.grid{
  display: grid;
}

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

.hidden{
  display: none;
}

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

.h-5{
  height: 1.25rem;
}

.h-\[80\%\]{
  height: 80%;
}

.h-full{
  height: 100%;
}

.h-12{
  height: 3rem;
}

.h-10{
  height: 2.5rem;
}

.h-44{
  height: 11rem;
}

.h-6{
  height: 1.5rem;
}

.h-\[85\%\]{
  height: 85%;
}

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

.h-11{
  height: 2.75rem;
}

.h-\[78\%\]{
  height: 78%;
}

.h-4{
  height: 1rem;
}

.h-8{
  height: 2rem;
}

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

.h-16{
  height: 4rem;
}

.h-9{
  height: 2.25rem;
}

.h-28{
  height: 7rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-1{
  height: 0.25rem;
}

.h-14{
  height: 3.5rem;
}

.h-80{
  height: 20rem;
}

.h-36{
  height: 9rem;
}

.h-2{
  height: 0.5rem;
}

.h-48{
  height: 12rem;
}

.h-40{
  height: 10rem;
}

.h-3{
  height: 0.75rem;
}

.h-32{
  height: 8rem;
}

.h-72{
  height: 18rem;
}

.h-64{
  height: 16rem;
}

.h-24{
  height: 6rem;
}

.h-20{
  height: 5rem;
}

.h-7{
  height: 1.75rem;
}

.max-h-72{
  max-height: 18rem;
}

.max-h-36{
  max-height: 9rem;
}

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

.max-h-\[1\.5rem\]{
  max-height: 1.5rem;
}

.max-h-8{
  max-height: 2rem;
}

.max-h-24{
  max-height: 6rem;
}

.max-h-48{
  max-height: 12rem;
}

.max-h-\[20rem\]{
  max-height: 20rem;
}

.max-h-28{
  max-height: 7rem;
}

.max-h-14{
  max-height: 3.5rem;
}

.max-h-9{
  max-height: 2.25rem;
}

.max-h-40{
  max-height: 10rem;
}

.max-h-64{
  max-height: 16rem;
}

.max-h-20{
  max-height: 5rem;
}

.max-h-44{
  max-height: 11rem;
}

.max-h-16{
  max-height: 4rem;
}

.max-h-10{
  max-height: 2.5rem;
}

.max-h-6{
  max-height: 1.5rem;
}

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

.min-h-\[2\.5em\]{
  min-height: 2.5em;
}

.min-h-\[1\.5rem\]{
  min-height: 1.5rem;
}

.min-h-\[1rem\]{
  min-height: 1rem;
}

.min-h-\[5rem\]{
  min-height: 5rem;
}

.min-h-\[4\.5rem\]{
  min-height: 4.5rem;
}

.min-h-screen{
  min-height: 100vh;
}

.w-full{
  width: 100%;
}

.w-5{
  width: 1.25rem;
}

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

.w-12{
  width: 3rem;
}

.w-10{
  width: 2.5rem;
}

.w-6{
  width: 1.5rem;
}

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

.w-40{
  width: 10rem;
}

.w-11{
  width: 2.75rem;
}

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

.w-4{
  width: 1rem;
}

.w-8{
  width: 2rem;
}

.w-60{
  width: 15rem;
}

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

.w-9{
  width: 2.25rem;
}

.w-14{
  width: 3.5rem;
}

.w-28{
  width: 7rem;
}

.w-52{
  width: 13rem;
}

.\!w-32{
  width: 8rem !important;
}

.w-80{
  width: 20rem;
}

.\!w-auto{
  width: auto !important;
}

.\!w-52{
  width: 13rem !important;
}

.w-2{
  width: 0.5rem;
}

.w-3{
  width: 0.75rem;
}

.w-16{
  width: 4rem;
}

.w-20{
  width: 5rem;
}

.w-44{
  width: 11rem;
}

.w-7{
  width: 1.75rem;
}

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

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

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

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

.max-w-md{
  max-width: 28rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-full{
  max-width: 100%;
}

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

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

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

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

.max-w-2xl{
  max-width: 42rem;
}

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

.max-w-xl{
  max-width: 36rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-lg{
  max-width: 32rem;
}

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

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

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

.flex-\[1\.4\]{
  flex: 1.4;
}

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

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

.shrink{
  flex-shrink: 1;
}

.grow{
  flex-grow: 1;
}

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

.rotate-90{
  --tw-rotate: 90deg;
  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));
}

@-webkit-keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping{
  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

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

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

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

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

.scroll-mt-4{
  scroll-margin-top: 1rem;
}

.columns-1{
  -moz-columns: 1;
       columns: 1;
}

.break-inside-avoid{
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

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

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

.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

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

.place-items-center{
  place-items: 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-end{
  justify-content: flex-end;
}

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

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

.gap-2{
  gap: 0.5rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-7{
  gap: 1.75rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-4{
  gap: 1rem;
}

.\!gap-2{
  gap: 0.5rem !important;
}

.gap-3\.5{
  gap: 0.875rem;
}

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

.gap-2\.5{
  gap: 0.625rem;
}

.gap-8{
  gap: 2rem;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-0{
  gap: 0px;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-y-1\.5{
  row-gap: 0.375rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-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-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-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

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

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity));
}

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

.overflow-hidden{
  overflow: hidden;
}

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

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

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded-card-lg{
  border-radius: 28px;
}

.rounded-pill{
  border-radius: 999px;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-card{
  border-radius: 22px;
}

.\!rounded-card-lg{
  border-radius: 28px !important;
}

.\!rounded-pill{
  border-radius: 999px !important;
}

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

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.\!rounded-lg{
  border-radius: 0.5rem !important;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

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

.\!border-0{
  border-width: 0px !important;
}

.border{
  border-width: 1px;
}

.\!border{
  border-width: 1px !important;
}

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

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

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

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

.border-r{
  border-right-width: 1px;
}

.border-ink\/10{
  border-color: rgb(42 37 32 / 0.1);
}

.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.\!border-slate-200{
  --tw-border-opacity: 1 !important;
  border-color: rgb(226 232 240 / var(--tw-border-opacity)) !important;
}

.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

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

.border-slate-900{
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity));
}

.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

.border-transparent{
  border-color: transparent;
}

.\!border-slate-900{
  --tw-border-opacity: 1 !important;
  border-color: rgb(15 23 42 / var(--tw-border-opacity)) !important;
}

.border-slate-700\/60{
  border-color: rgb(51 65 85 / 0.6);
}

.border-slate-100{
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity));
}

.border-amber-100{
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity));
}

.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity));
}

.border-emerald-100{
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity));
}

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

.bg-ink{
  --tw-bg-opacity: 1;
  background-color: rgb(42 37 32 / var(--tw-bg-opacity));
}

.bg-cream\/40{
  background-color: rgb(245 235 219 / 0.4);
}

.bg-sage{
  --tw-bg-opacity: 1;
  background-color: rgb(127 164 135 / var(--tw-bg-opacity));
}

.\!bg-paper{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.bg-berry{
  --tw-bg-opacity: 1;
  background-color: rgb(184 58 85 / var(--tw-bg-opacity));
}

.bg-peach{
  --tw-bg-opacity: 1;
  background-color: rgb(240 166 113 / var(--tw-bg-opacity));
}

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

.bg-cream{
  --tw-bg-opacity: 1;
  background-color: rgb(245 235 219 / var(--tw-bg-opacity));
}

.bg-energy-fg{
  --tw-bg-opacity: 1;
  background-color: rgb(194 69 54 / var(--tw-bg-opacity));
}

.\!bg-peach{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(240 166 113 / var(--tw-bg-opacity)) !important;
}

.\!bg-cream{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 235 219 / var(--tw-bg-opacity)) !important;
}

.\!bg-transparent{
  background-color: transparent !important;
}

.\!bg-ink{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(42 37 32 / var(--tw-bg-opacity)) !important;
}

.bg-peach-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(255 229 209 / var(--tw-bg-opacity));
}

.bg-sage-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(216 230 217 / var(--tw-bg-opacity));
}

.bg-plum-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 226 / var(--tw-bg-opacity));
}

.bg-butter-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(248 232 192 / var(--tw-bg-opacity));
}

.bg-ink\/10{
  background-color: rgb(42 37 32 / 0.1);
}

.bg-ink\/\[0\.06\]{
  background-color: rgb(42 37 32 / 0.06);
}

.bg-paper\/60{
  background-color: rgb(255 255 255 / 0.6);
}

.bg-energy-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(255 224 216 / var(--tw-bg-opacity));
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}

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

.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

.bg-sky-500{
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}

.bg-violet-500{
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

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

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

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

.bg-slate-900\/0{
  background-color: rgb(15 23 42 / 0);
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}

.bg-slate-900\/30{
  background-color: rgb(15 23 42 / 0.3);
}

.bg-slate-50\/60{
  background-color: rgb(248 250 252 / 0.6);
}

.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}

.bg-emerald-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
}

.bg-slate-500{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}

.bg-sky-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
}

.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
}

.bg-violet-100{
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
}

.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
}

.bg-fuchsia-100{
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity));
}

.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
}

.bg-rose-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
}

.bg-amber-50\/60{
  background-color: rgb(255 251 235 / 0.6);
}

.bg-emerald-50\/60{
  background-color: rgb(236 253 245 / 0.6);
}

.bg-slate-900\/40{
  background-color: rgb(15 23 42 / 0.4);
}

.\!bg-slate-900{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity)) !important;
}

.bg-energy-bg\/60{
  background-color: rgb(255 224 216 / 0.6);
}

.bg-sage-bg\/60{
  background-color: rgb(216 230 217 / 0.6);
}

.bg-cream\/30{
  background-color: rgb(245 235 219 / 0.3);
}

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

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

.p-8{
  padding: 2rem;
}

.\!p-6{
  padding: 1.5rem !important;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-3{
  padding: 0.75rem;
}

.p-3\.5{
  padding: 0.875rem;
}

.p-0{
  padding: 0px;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-1{
  padding: 0.25rem;
}

.\!p-1\.5{
  padding: 0.375rem !important;
}

.\!p-1{
  padding: 0.25rem !important;
}

.\!p-4{
  padding: 1rem !important;
}

.\!p-5{
  padding: 1.25rem !important;
}

.\!p-0{
  padding: 0px !important;
}

.\!p-3{
  padding: 0.75rem !important;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-6{
  padding: 1.5rem;
}

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

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

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

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

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

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

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

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

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

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

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

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

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

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

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

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

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.\!py-1\.5{
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.\!py-1{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

.pt-3\.5{
  padding-top: 0.875rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-2\.5{
  padding-top: 0.625rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.\!pl-5{
  padding-left: 1.25rem !important;
}

.\!pr-2{
  padding-right: 0.5rem !important;
}

.pb-16{
  padding-bottom: 4rem;
}

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

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

.pr-1{
  padding-right: 0.25rem;
}

.pr-2{
  padding-right: 0.5rem;
}

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

.pt-6{
  padding-top: 1.5rem;
}

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

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

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

.align-top{
  vertical-align: top;
}

.align-middle{
  vertical-align: middle;
}

.font-display{
  font-family: "Schibsted Grotesk", "Space Grotesk", -apple-system, sans-serif;
}

.font-body{
  font-family: "Schibsted Grotesk", "Inter Tight", system-ui, sans-serif;
}

.\!font-display{
  font-family: "Schibsted Grotesk", "Space Grotesk", -apple-system, sans-serif !important;
}

.\!font-body{
  font-family: "Schibsted Grotesk", "Inter Tight", system-ui, sans-serif !important;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

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

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

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

.\!text-2xl{
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

.\!text-sm{
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

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

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

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

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

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

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

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

.font-semibold{
  font-weight: 600;
}

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

.\!font-bold{
  font-weight: 700 !important;
}

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

.uppercase{
  text-transform: uppercase;
}

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

.italic{
  font-style: italic;
}

.leading-tight{
  line-height: 1.25;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-\[0\.95\]{
  line-height: 0.95;
}

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

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

.leading-5{
  line-height: 1.25rem;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-tightest{
  letter-spacing: -0.05em;
}

.\!tracking-tight{
  letter-spacing: -0.025em !important;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-normal{
  letter-spacing: 0em;
}

.text-ink{
  --tw-text-opacity: 1;
  color: rgb(42 37 32 / var(--tw-text-opacity));
}

.text-muted{
  --tw-text-opacity: 1;
  color: rgb(122 111 97 / var(--tw-text-opacity));
}

.text-cream{
  --tw-text-opacity: 1;
  color: rgb(245 235 219 / var(--tw-text-opacity));
}

.text-peach{
  --tw-text-opacity: 1;
  color: rgb(240 166 113 / var(--tw-text-opacity));
}

.text-plum{
  --tw-text-opacity: 1;
  color: rgb(138 93 122 / var(--tw-text-opacity));
}

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

.\!text-ink{
  --tw-text-opacity: 1 !important;
  color: rgb(42 37 32 / var(--tw-text-opacity)) !important;
}

.\!text-muted{
  --tw-text-opacity: 1 !important;
  color: rgb(122 111 97 / var(--tw-text-opacity)) !important;
}

.\!text-cream{
  --tw-text-opacity: 1 !important;
  color: rgb(245 235 219 / var(--tw-text-opacity)) !important;
}

.text-sage{
  --tw-text-opacity: 1;
  color: rgb(127 164 135 / var(--tw-text-opacity));
}

.text-butter-ink{
  --tw-text-opacity: 1;
  color: rgb(138 96 32 / var(--tw-text-opacity));
}

.text-current{
  color: currentColor;
}

.text-energy-fg{
  --tw-text-opacity: 1;
  color: rgb(194 69 54 / var(--tw-text-opacity));
}

.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.\!text-slate-400{
  --tw-text-opacity: 1 !important;
  color: rgb(148 163 184 / var(--tw-text-opacity)) !important;
}

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

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-transparent{
  color: transparent;
}

.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}

.text-emerald-600{
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-slate-200{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-sky-400{
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity));
}

.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-amber-200{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-violet-600{
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity));
}

.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity));
}

.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity));
}

.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity));
}

.text-rose-500{
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity));
}

.text-sky-600{
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity));
}

.text-sky-700{
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity));
}

.text-cyan-700{
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity));
}

.text-violet-700{
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity));
}

.text-fuchsia-700{
  --tw-text-opacity: 1;
  color: rgb(162 28 175 / var(--tw-text-opacity));
}

.text-teal-700{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity));
}

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

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

.no-underline{
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.\!no-underline{
  -webkit-text-decoration-line: none !important;
          text-decoration-line: none !important;
}

.decoration-dotted{
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
}

.accent-peach{
  accent-color: #F0A671;
}

.accent-slate-900{
  accent-color: #0f172a;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-0{
  opacity: 0;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-30{
  opacity: 0.3;
}

.shadow-card-lg{
  --tw-shadow: 0 12px 40px -12px rgba(42,37,32,0.18), 0 4px 8px -4px rgba(42,37,32,0.08);
  --tw-shadow-colored: 0 12px 40px -12px var(--tw-shadow-color), 0 4px 8px -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-card-lg{
  --tw-shadow: 0 12px 40px -12px rgba(42,37,32,0.18), 0 4px 8px -4px rgba(42,37,32,0.08) !important;
  --tw-shadow-colored: 0 12px 40px -12px var(--tw-shadow-color), 0 4px 8px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\!shadow-none{
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.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-card{
  --tw-shadow: 0 4px 24px -8px rgba(42,37,32,0.12), 0 2px 4px -2px rgba(42,37,32,0.05);
  --tw-shadow-colored: 0 4px 24px -8px 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);
}

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

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring-1{
  --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);
}

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

.ring-slate-900{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
}

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

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

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

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

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

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

html, body {
  margin: 0;
  padding: 0;
  background: #F5EBDB;
  color: #2A2520;
  font-family: 'Schibsted Grotesk', 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

body {
  color: #2A2520 !important;
}

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

/* FocusOnNavigate (App.razor) focuses the h1 after every navigation for screen
   readers — keep the focus, hide the browser's outline box around the heading. */

h1:focus {
  outline: none;
}

/* Sundae page surface — used by MainLayout */

.sd-surface {
  min-height: 100vh;
  background: #F5EBDB;
}

/* Legacy admin areas still set .background for the splash gradient. Keep it,
   but switch to a cream/peach tone so the unrethemed admin doesn't clash. */

.background {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #F5EBDB 0%, #FFE5D1 50%, #F8E8C0 100%);
}

/* Tone down legacy helper classes so any unrethemed markup looks intentional. */

.p-color {
  color: #F0A671;
}

.s-color {
  color: #7FA487;
}

/* Admin side panels: sticky next to a long list, capped to the viewport so the
   panel scrolls internally instead of pinning its overflow out of reach.
   One definition for all admin pages — -lg kicks in at lg (import pages whose
   grids split at lg), -xl at xl (data pages whose grids split at xl). */

/* Rotating accent word (SdRotatingWord) — a pure-CSS vertical "slot machine".
   A stack of N+1 rotors (last == first, for a seamless wrap) is translated by
   -1em per word. inline-grid stacks every rotor in ONE cell, so the span
   auto-sizes to the WIDEST word and the heading never reflows mid-cycle.
   We clip the off-slot rotors with clip-path:inset(0) rather than overflow:hidden
   ON PURPOSE: overflow:hidden makes a box's baseline its bottom margin edge, which
   divorces the visible word from the heading's baseline (it floats high). clip-path
   crops identically but leaves the natural baseline intact, so plain
   vertical-align:baseline seats the word on the surrounding text's baseline with no
   font-specific nudge — and descenders (the live words are "tasting"/"craving"/
   "sipping") render fully inside the 1.35em slot instead of being clipped.
   Left unlayered (after @layer components) so the reduced-motion override below
   reliably wins the cascade. */

.sd-rotating-word {
  /* Slot is taller than the glyph (1em) so each settled word has padding above
       and below — without it the neighbouring word's edge peeks into the slot, and
       it gives descenders room to sit inside the clip. Nudge this one value to give
       the rotation more/less breathing room; the keyframe steps track it via calc(). */
  --sd-slot: 1.35em;
  display: inline-grid;
  grid-template-columns: -webkit-max-content;
  grid-template-columns: max-content;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  height: var(--sd-slot);
  vertical-align: baseline;
}

.sd-rotating-word .sd-rotor-track {
  grid-area: 1 / 1;
  display: grid;
  grid-auto-rows: var(--sd-slot);
  -webkit-animation: sd-roll-3 6s infinite;
          animation: sd-roll-3 6s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
          animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.sd-rotating-word .sd-rotor {
  grid-area: auto / 1;
  line-height: var(--sd-slot);
  /* centre each word within its slot */
}

/* 3-word cycle: ~28% dwell on each word, a quick eased slide between.
   Each step is one slot-height (kept in sync with --sd-slot via calc). */

@-webkit-keyframes sd-roll-3 {
  0%,   28% {
    transform: translateY(0);
  }

  33%,  61% {
    transform: translateY(calc(var(--sd-slot) * -1));
  }

  66%,  94% {
    transform: translateY(calc(var(--sd-slot) * -2));
  }

  100%      {
    transform: translateY(calc(var(--sd-slot) * -3));
  }
}

@keyframes sd-roll-3 {
  0%,   28% {
    transform: translateY(0);
  }

  33%,  61% {
    transform: translateY(calc(var(--sd-slot) * -1));
  }

  66%,  94% {
    transform: translateY(calc(var(--sd-slot) * -2));
  }

  100%      {
    transform: translateY(calc(var(--sd-slot) * -3));
  }
}

/* Honour reduced-motion: freeze on the first word. */

@media (prefers-reduced-motion: reduce) {
  .sd-rotating-word .sd-rotor-track {
    -webkit-animation: none;
            animation: none;
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(42,37,32,0.15);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(42,37,32,0.25);
}

/* ── The chomp (2026-07-15 logo spec) — check-in success animation ─────────
   The mark pops in whole; at .55s both teeth marks land at once with a
   squash-and-recoil and two sprinkles fly out. Plays once. */

.sd-chomp {
  -webkit-animation: sd-chomp-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
          animation: sd-chomp-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@-webkit-keyframes sd-chomp-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

@keyframes sd-chomp-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.sd-chomp .bite {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  -webkit-animation: sd-chomp-bite 0.15s ease-out 0.55s forwards;
          animation: sd-chomp-bite 0.15s ease-out 0.55s forwards;
}

@-webkit-keyframes sd-chomp-bite {
  to {
    transform: scale(1);
  }
}

@keyframes sd-chomp-bite {
  to {
    transform: scale(1);
  }
}

.sd-chomp .dropbody {
  transform-box: fill-box;
  transform-origin: 55% 65%;
  -webkit-animation: sd-chomp-squash 0.3s ease-out 0.55s;
          animation: sd-chomp-squash 0.3s ease-out 0.55s;
}

@-webkit-keyframes sd-chomp-squash {
  35% {
    transform: scale(0.95, 0.93) rotate(-2deg);
  }

  70% {
    transform: scale(1.02, 1);
  }
}

@keyframes sd-chomp-squash {
  35% {
    transform: scale(0.95, 0.93) rotate(-2deg);
  }

  70% {
    transform: scale(1.02, 1);
  }
}

.sd-chomp .fly rect {
  opacity: 0;
  translate: -9px 5px;
  scale: 0.3;
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: sd-chomp-fly 0.4s ease-out 0.6s forwards;
          animation: sd-chomp-fly 0.4s ease-out 0.6s forwards;
}

@-webkit-keyframes sd-chomp-fly {
  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes sd-chomp-fly {
  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-chomp, .sd-chomp .dropbody, .sd-chomp .fly rect {
    -webkit-animation: none;
            animation: none;
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  .sd-chomp .bite {
    -webkit-animation: none;
            animation: none;
    transform: scale(1);
  }
}

.file\:mr-4::-webkit-file-upload-button{
  margin-right: 1rem;
}

.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}

.file\:rounded-pill::-webkit-file-upload-button{
  border-radius: 999px;
}

.file\:rounded-pill::file-selector-button{
  border-radius: 999px;
}

.file\:border-0::-webkit-file-upload-button{
  border-width: 0px;
}

.file\:border-0::file-selector-button{
  border-width: 0px;
}

.file\:bg-ink::-webkit-file-upload-button{
  --tw-bg-opacity: 1;
  background-color: rgb(42 37 32 / var(--tw-bg-opacity));
}

.file\:bg-ink::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(42 37 32 / var(--tw-bg-opacity));
}

.file\:px-4::-webkit-file-upload-button{
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-2\.5::-webkit-file-upload-button{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.file\:py-2\.5::file-selector-button{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.file\:py-2::-webkit-file-upload-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:font-display::-webkit-file-upload-button{
  font-family: "Schibsted Grotesk", "Space Grotesk", -apple-system, sans-serif;
}

.file\:font-display::file-selector-button{
  font-family: "Schibsted Grotesk", "Space Grotesk", -apple-system, sans-serif;
}

.file\:font-bold::-webkit-file-upload-button{
  font-weight: 700;
}

.file\:font-bold::file-selector-button{
  font-weight: 700;
}

.file\:text-cream::-webkit-file-upload-button{
  --tw-text-opacity: 1;
  color: rgb(245 235 219 / var(--tw-text-opacity));
}

.file\:text-cream::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(245 235 219 / var(--tw-text-opacity));
}

.placeholder\:text-muted::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(122 111 97 / var(--tw-text-opacity));
}

.placeholder\:text-muted:-ms-input-placeholder{
  --tw-text-opacity: 1;
  color: rgb(122 111 97 / var(--tw-text-opacity));
}

.placeholder\:text-muted::placeholder{
  --tw-text-opacity: 1;
  color: rgb(122 111 97 / var(--tw-text-opacity));
}

.placeholder\:text-slate-400::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.placeholder\:text-slate-400:-ms-input-placeholder{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.placeholder\:text-slate-400::placeholder{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.empty\:hidden:empty{
  display: none;
}

.focus-within\:text-ink:focus-within{
  --tw-text-opacity: 1;
  color: rgb(42 37 32 / var(--tw-text-opacity));
}

.hover\:z-\[60\]:hover{
  z-index: 60;
}

.hover\:border-slate-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity));
}

.hover\:border-slate-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity));
}

.hover\:\!border-slate-400:hover{
  --tw-border-opacity: 1 !important;
  border-color: rgb(148 163 184 / var(--tw-border-opacity)) !important;
}

.hover\:border-slate-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.hover\:bg-ink\/90:hover{
  background-color: rgb(42 37 32 / 0.9);
}

.hover\:bg-cream:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 235 219 / var(--tw-bg-opacity));
}

.hover\:bg-berry\/90:hover{
  background-color: rgb(184 58 85 / 0.9);
}

.hover\:bg-peach\/90:hover{
  background-color: rgb(240 166 113 / 0.9);
}

.hover\:bg-ink\/5:hover{
  background-color: rgb(42 37 32 / 0.05);
}

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

.hover\:\!bg-peach\/90:hover{
  background-color: rgb(240 166 113 / 0.9) !important;
}

.hover\:\!bg-ink\/5:hover{
  background-color: rgb(42 37 32 / 0.05) !important;
}

.hover\:\!bg-paper:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-ink\/90:hover{
  background-color: rgb(42 37 32 / 0.9) !important;
}

.hover\:bg-slate-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.hover\:bg-slate-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.hover\:bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.hover\:bg-peach-bg:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 229 209 / var(--tw-bg-opacity));
}

.hover\:text-ink:hover{
  --tw-text-opacity: 1;
  color: rgb(42 37 32 / var(--tw-text-opacity));
}

.hover\:text-slate-700:hover{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.hover\:text-slate-300:hover{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.hover\:text-emerald-900:hover{
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity));
}

.hover\:text-rose-600:hover{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity));
}

.hover\:text-slate-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.hover\:text-amber-700:hover{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.hover\:underline:hover{
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.hover\:no-underline:hover{
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.hover\:opacity-70:hover{
  opacity: 0.7;
}

.hover\:shadow-card-lg:hover{
  --tw-shadow: 0 12px 40px -12px rgba(42,37,32,0.18), 0 4px 8px -4px rgba(42,37,32,0.08);
  --tw-shadow-colored: 0 12px 40px -12px var(--tw-shadow-color), 0 4px 8px -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);
}

.hover\:file\:bg-ink\/90::-webkit-file-upload-button:hover{
  background-color: rgb(42 37 32 / 0.9);
}

.hover\:file\:bg-ink\/90::file-selector-button:hover{
  background-color: rgb(42 37 32 / 0.9);
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2: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(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\:ring-1: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(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\:ring-peach:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(240 166 113 / var(--tw-ring-opacity));
}

.focus\:ring-slate-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
}

.focus-visible\:ring-2:focus-visible{
  --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-visible\:ring-berry:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(184 58 85 / var(--tw-ring-opacity));
}

.focus-visible\:ring-peach:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(240 166 113 / var(--tw-ring-opacity));
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-cream:focus-visible{
  --tw-ring-offset-color: #F5EBDB;
}

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:text-slate-300:disabled{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.disabled\:no-underline:disabled{
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:opacity-40:disabled{
  opacity: 0.4;
}

.group:hover .group-hover\:block{
  display: block;
}

.group:hover .group-hover\:-translate-y-0\.5{
  --tw-translate-y: -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-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));
}

.group:hover .group-hover\:rotate-3{
  --tw-rotate: 3deg;
  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\:rotate-6{
  --tw-rotate: 6deg;
  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-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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-slate-900\/50{
  background-color: rgb(15 23 42 / 0.5);
}

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

.group:hover .group-hover\:underline{
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.group:hover .group-hover\:opacity-75{
  opacity: 0.75;
}

@media (min-width: 640px){
  .sm\:ml-3{
    margin-left: 0.75rem;
  }

  .sm\:ml-auto{
    margin-left: auto;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-24{
    height: 6rem;
  }

  .sm\:h-5{
    height: 1.25rem;
  }

  .sm\:h-44{
    height: 11rem;
  }

  .sm\:max-h-44{
    max-height: 11rem;
  }

  .sm\:max-h-20{
    max-height: 5rem;
  }

  .sm\:max-h-12{
    max-height: 3rem;
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:\!w-auto{
    width: auto !important;
  }

  .sm\:w-28{
    width: 7rem;
  }

  .sm\:w-5{
    width: 1.25rem;
  }

  .sm\:w-20{
    width: 5rem;
  }

  .sm\:w-56{
    width: 14rem;
  }

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

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

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

  .sm\:flex-none{
    flex: none;
  }

  .sm\: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));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_auto_1fr\]{
    grid-template-columns: 1fr auto 1fr;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-col{
    flex-direction: column;
  }

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

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

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

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\: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));
  }

  .sm\:self-auto{
    align-self: auto;
  }

  .sm\:truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sm\:p-4{
    padding: 1rem;
  }

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

  .sm\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .sm\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

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

  .sm\:py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .sm\:px-2\.5{
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

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

  .sm\:opacity-0{
    opacity: 0;
  }

  .group:hover .sm\:group-hover\:block{
    display: block;
  }

  .group:hover .sm\:group-hover\:opacity-100{
    opacity: 1;
  }
}

@media (min-width: 768px){
  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

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

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

  .md\:w-full{
    width: 100%;
  }

  .md\:max-w-\[28rem\]{
    max-width: 28rem;
  }

  .md\:max-w-\[18rem\]{
    max-width: 18rem;
  }

  .md\:max-w-0{
    max-width: 0rem;
  }

  .md\:columns-2{
    -moz-columns: 2;
         columns: 2;
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-\[220px_1fr\]{
    grid-template-columns: 220px 1fr;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .md\:truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:px-14{
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

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

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

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

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

@media (min-width: 1024px){
  .lg\:sticky{
    position: -webkit-sticky;
    position: sticky;
  }

  .lg\:top-0{
    top: 0px;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-screen{
    height: 100vh;
  }

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

  .lg\: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));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.5fr_1fr\]{
    grid-template-columns: 1.5fr 1fr;
  }

  .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.3fr_1fr\]{
    grid-template-columns: 1.3fr 1fr;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_24rem\]{
    grid-template-columns: 1fr 24rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-7{
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

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

@media (min-width: 1280px){
  .xl\:grid-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1fr_24rem\]{
    grid-template-columns: 1fr 24rem;
  }

  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1fr_26rem\]{
    grid-template-columns: 1fr 26rem;
  }
}