@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

@layer tailwind-base, typography;

/* Shared fullscreen mosaic — used by airport.html, personas.html, and any other
   JSON-manifest-driven section landing page that wants the fullscreen hero grid.

   Theme per page via CSS custom properties set inline on the .fs-mosaic element:
     --mosaic-cols              (default 3)   columns on large viewports
     --mosaic-cols-md           (default same as --mosaic-cols) columns on tablet
     --mosaic-cols-sm           (default 2)   columns on mobile
     --mosaic-cols-xs           (default 1)   columns on small mobile
     --mosaic-rows              (default 2)   row-height divisor on large viewports
     --mosaic-rows-md           (default same as --mosaic-rows)
     --mosaic-rows-sm           (default 2.5) row-height divisor on mobile
     --mosaic-rows-xs           (default same as --mosaic-rows-sm)
     --mosaic-bg-a              primary grid / filler-odd bg color
     --mosaic-bg-b              filler-even bg color
     --mosaic-title-grad-a      title-card gradient start
     --mosaic-title-grad-b      title-card gradient end
     --mosaic-title-grad-hover-a  title-card gradient start (hover)
     --mosaic-title-grad-hover-b  title-card gradient end   (hover)
     --mosaic-subscribe-grad-a  subscribe-card gradient start
     --mosaic-subscribe-grad-b  subscribe-card gradient end

   Add .fs-mosaic--easter-egg to opt in to the subscribe-card pulse-glow animation
   and the surrounding-tile dim-and-green-shift effect.
*/

.fs-mosaic {
    display: grid;
    grid-template-columns: repeat(var(--mosaic-cols, 3), 1fr);
    grid-auto-rows: calc((100vh - 4.5rem) / var(--mosaic-rows, 2));
    gap: 0;
    background: var(--mosaic-bg-a, #1a582e);
    overflow: clip;
}

.fs-mosaic__tile {
    position: relative;
    overflow: hidden;
    display: block;
}

.fs-mosaic__tile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    transition: transform 0.4s ease, filter 0.8s ease;
}

.fs-mosaic__tile:hover img {
    transform: scale(1.08);
}

.fs-mosaic__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fs-mosaic__tile:hover .fs-mosaic__overlay {
    opacity: 1;
}

.fs-mosaic__tile-title {
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.fs-mosaic__tile-summary {
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    line-height: 1.4;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Title card */

.fs-mosaic__title {
    background:
        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        linear-gradient(135deg, var(--mosaic-title-grad-a, #1a582e) 0%, var(--mosaic-title-grad-b, #3c8d4f) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem;
    gap: 0.5rem;
    color: white;
    transition: background 0.6s ease, box-shadow 0.4s ease;
}

.fs-mosaic__title:hover {
    background:
        radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, var(--mosaic-title-grad-hover-a, #164a27) 0%, var(--mosaic-title-grad-hover-b, #347d45) 100%);
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.06);
}

.fs-mosaic__title h1 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: bold;
    line-height: 1.1;
    margin: 0;
}

.fs-mosaic__title p {
    font-size: clamp(0.75rem, 1.05vw, 0.95rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Subscribe card */

.fs-mosaic__subscribe {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, var(--mosaic-subscribe-grad-a, rgba(42, 107, 122, 0.95)) 0%, var(--mosaic-subscribe-grad-b, rgba(74, 145, 153, 0.95)) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 0.75rem;
    color: white;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    transition: transform 0.4s ease;
}

.fs-mosaic__subscribe h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    opacity: 0;
    animation: fs-mosaic-fadeInUp 0.6s ease-out 0.3s forwards;
}

.fs-mosaic__subscribe .subscribe-tagline {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    line-height: 1.4;
    opacity: 0;
    color: rgba(255, 255, 255, 0.9);
    animation: fs-mosaic-fadeInUp 0.6s ease-out 0.5s forwards;
}

.fs-mosaic__subscribe .subscribe-cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: white;
    color: var(--mosaic-title-grad-a, #1a582e);
    font-weight: bold;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    border-radius: 0.4rem;
    text-decoration: none;
    transition: all 0.2s ease;
    opacity: 0;
    animation: fs-mosaic-fadeInUp 0.6s ease-out 0.7s forwards;
    position: relative;
}

.fs-mosaic__subscribe .subscribe-cta:hover {
    background: #f0f0e6;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Filler cells to complete the last row */

.fs-mosaic__filler:nth-child(odd) {
    background: var(--mosaic-bg-a, #1a582e);
}

.fs-mosaic__filler:nth-child(even) {
    background: var(--mosaic-bg-b, #2a6b7a);
}

@keyframes fs-mosaic-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   Easter egg: subscribe card pulse-glow + rotating rays + surrounding dim
   Opt in per-page by adding .fs-mosaic--easter-egg on the grid element.
   ========================================================================= */

.fs-mosaic--easter-egg .fs-mosaic__subscribe:hover {
    z-index: 20;
    transform: scale(1.05);
    animation: fs-mosaic-pulse-glow 2s ease-in-out infinite alternate;
}

.fs-mosaic--easter-egg .fs-mosaic__subscribe .subscribe-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300vmax;
    height: 300vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.05) 0deg 8deg,
        transparent 8deg 28deg
    );
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 1s ease;
}

.fs-mosaic--easter-egg .fs-mosaic__subscribe:hover .subscribe-cta::after {
    opacity: 1;
    animation: fs-mosaic-spin-glory 25s linear infinite;
}

.fs-mosaic--easter-egg:has(.fs-mosaic__subscribe:hover) .fs-mosaic__tile img {
    filter: brightness(0.7) saturate(1.4) hue-rotate(15deg);
}

@keyframes fs-mosaic-spin-glory {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fs-mosaic-pulse-glow {
    from {
        box-shadow:
            0 0 30px 5px rgba(60, 141, 79, 0.6),
            0 0 80px 25px rgba(60, 141, 79, 0.35),
            0 0 160px 60px rgba(60, 141, 79, 0.2),
            0 0 300px 120px rgba(26, 88, 46, 0.08);
    }
    to {
        box-shadow:
            0 0 40px 10px rgba(60, 141, 79, 0.7),
            0 0 100px 35px rgba(60, 141, 79, 0.45),
            0 0 200px 80px rgba(60, 141, 79, 0.25),
            0 0 400px 160px rgba(26, 88, 46, 0.12);
    }
}

/* =========================================================================
   Responsive breakpoints
   ========================================================================= */

/* Tablet */

@media (max-width: 1024px) {
    .fs-mosaic {
        grid-template-columns: repeat(var(--mosaic-cols-md, var(--mosaic-cols, 3)), 1fr);
        grid-auto-rows: calc((100vh - 4.5rem) / var(--mosaic-rows-md, var(--mosaic-rows, 2)));
    }
}

/* Mobile: overlays always visible, summary hidden */

@media (max-width: 768px) {
    .fs-mosaic {
        grid-template-columns: repeat(var(--mosaic-cols-sm, 2), 1fr);
        grid-auto-rows: calc((100vh - 4.5rem) / var(--mosaic-rows-sm, 2.5));
    }

    .fs-mosaic__overlay {
        opacity: 1;
    }

    .fs-mosaic__tile-summary {
        display: none;
    }
}

/* Small mobile */

@media (max-width: 480px) {
    .fs-mosaic {
        grid-template-columns: repeat(var(--mosaic-cols-xs, 1), 1fr);
        grid-auto-rows: calc((100vh - 4.5rem) / var(--mosaic-rows-xs, var(--mosaic-rows-sm, 2.5)));
    }
}

@layer tailwind-base {
  *, ::before, ::after{
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
    }
  ::backdrop{
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
    }
  /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
}

.\!container{
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

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

@media (min-width: 640px){

    .\!container{
        max-width: 640px !important;
    }

    .container{
        max-width: 640px;
    }
}

@media (min-width: 768px){

    .\!container{
        max-width: 768px !important;
    }

    .container{
        max-width: 768px;
    }
}

@media (min-width: 1300px){

    .\!container{
        max-width: 1300px !important;
    }

    .container{
        max-width: 1300px;
    }
}

@media (min-width: 1536px){

    .\!container{
        max-width: 1536px !important;
    }

    .container{
        max-width: 1536px;
    }
}

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

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

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    color: var(--tw-prose-links);
    text-decoration: underline;
    font-weight: 500;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    color: var(--tw-prose-headings);
    font-weight: 600;
    margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    font-weight: 500;
    font-style: italic;
    color: var(--tw-prose-quotes);
    border-inline-start-width: 0.25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
}

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

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

.prose :where(h1):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    font-weight: 900;
    color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    font-weight: 800;
    color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    font-weight: 700;
    color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    font-weight: 700;
    color: inherit;
}

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

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

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

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-weight: 500;
    font-family: inherit;
    color: var(--tw-prose-kbd);
    box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
    font-size: 0.875em;
    border-radius: 0.3125rem;
    padding-top: 0.1875em;
    padding-inline-end: 0.375em;
    padding-bottom: 0.1875em;
    padding-inline-start: 0.375em;
}

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

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

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

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

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

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

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

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

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

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

.prose :where(pre):not(:where([class~="not-prose"],[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-inline-end: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *))::before{
    content: none;
}

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

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

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

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

.prose :where(tbody tr):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)){
    border-bottom-width: 0;
}

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

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

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

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    text-align: start;
}

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

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

.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-kbd: #111827;
    --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
    --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-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --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(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 0;
    margin-bottom: 0;
}

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

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

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

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

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

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

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

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

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

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

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 0.5em;
    padding-inline-start: 1.625em;
}

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

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

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

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

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

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

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

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

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

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

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

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

.prose-lg{
    font-size: 1.125rem;
    line-height: 1.7777778;
}

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

.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 1.2222222em;
    line-height: 1.4545455;
    margin-top: 1.0909091em;
    margin-bottom: 1.0909091em;
}

.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.6666667em;
    margin-bottom: 1.6666667em;
    padding-inline-start: 1em;
}

.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 2.6666667em;
    margin-top: 0;
    margin-bottom: 0.8333333em;
    line-height: 1;
}

.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 1.6666667em;
    margin-top: 1.8666667em;
    margin-bottom: 1.0666667em;
    line-height: 1.3333333;
}

.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 1.3333333em;
    margin-top: 1.6666667em;
    margin-bottom: 0.6666667em;
    line-height: 1.5;
}

.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.7777778em;
    margin-bottom: 0.4444444em;
    line-height: 1.5555556;
}

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

.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
}

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

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

.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8888889em;
    border-radius: 0.3125rem;
    padding-top: 0.2222222em;
    padding-inline-end: 0.4444444em;
    padding-bottom: 0.2222222em;
    padding-inline-start: 0.4444444em;
}

.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8888889em;
}

.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8666667em;
}

.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.875em;
}

.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8888889em;
    line-height: 1.75;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.375rem;
    padding-top: 1em;
    padding-inline-end: 1.5em;
    padding-bottom: 1em;
    padding-inline-start: 1.5em;
}

.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    padding-inline-start: 1.5555556em;
}

.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    padding-inline-start: 1.5555556em;
}

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

.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    padding-inline-start: 0.4444444em;
}

.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    padding-inline-start: 0.4444444em;
}

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

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

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

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

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

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

.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
}

.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 1.3333333em;
}

.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 0.6666667em;
    padding-inline-start: 1.5555556em;
}

.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    margin-top: 3.1111111em;
    margin-bottom: 3.1111111em;
}

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

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

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

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

.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8888889em;
    line-height: 1.5;
}

.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    padding-inline-end: 0.75em;
    padding-bottom: 0.75em;
    padding-inline-start: 0.75em;
}

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

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

.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    padding-top: 0.75em;
    padding-inline-end: 0.75em;
    padding-bottom: 0.75em;
    padding-inline-start: 0.75em;
}

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

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

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

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

.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
    font-size: 0.8888889em;
    line-height: 1.5;
    margin-top: 1em;
}

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

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

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

.visible{
    visibility: visible;
}

.invisible{
    visibility: hidden;
}

.collapse{
    visibility: collapse;
}

.static{
    position: static;
}

.fixed{
    position: fixed;
}

.absolute{
    position: absolute;
}

.relative{
    position: relative;
}

.sticky{
    position: sticky;
}

.inset-0{
    inset: 0px;
}

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

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

.-bottom-24{
    bottom: -6rem;
}

.-left-20{
    left: -5rem;
}

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

.-right-4{
    right: -1rem;
}

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

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

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

.bottom-0{
    bottom: 0px;
}

.bottom-1{
    bottom: 0.25rem;
}

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

.bottom-3{
    bottom: 0.75rem;
}

.bottom-4{
    bottom: 1rem;
}

.bottom-8{
    bottom: 2rem;
}

.left-0{
    left: 0px;
}

.left-1{
    left: 0.25rem;
}

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

.left-3{
    left: 0.75rem;
}

.left-4{
    left: 1rem;
}

.right-0{
    right: 0px;
}

.right-1{
    right: 0.25rem;
}

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

.right-10{
    right: 2.5rem;
}

.right-2{
    right: 0.5rem;
}

.right-3{
    right: 0.75rem;
}

.right-4{
    right: 1rem;
}

.right-6{
    right: 1.5rem;
}

.right-8{
    right: 2rem;
}

.top-0{
    top: 0px;
}

.top-1{
    top: 0.25rem;
}

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

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

.top-10{
    top: 2.5rem;
}

.top-2{
    top: 0.5rem;
}

.top-3{
    top: 0.75rem;
}

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

.top-4{
    top: 1rem;
}

.top-6{
    top: 1.5rem;
}

.isolate{
    isolation: isolate;
}

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

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

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

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

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

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

.order-1{
    order: 1;
}

.order-2{
    order: 2;
}

.m-0{
    margin: 0px;
}

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

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

.my-10{
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.my-12{
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.my-16{
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.my-2{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-8{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

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

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

.\!mt-0{
    margin-top: 0px !important;
}

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

.mb-0\.5{
    margin-bottom: 0.125rem;
}

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

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

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

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

.mb-14{
    margin-bottom: 3.5rem;
}

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

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

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

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

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

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

.mb-7{
    margin-bottom: 1.75rem;
}

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

.ml-0\.5{
    margin-left: 0.125rem;
}

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

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

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

.ml-6{
    margin-left: 1.5rem;
}

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

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

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

.mr-1\.5{
    margin-right: 0.375rem;
}

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

.mr-3{
    margin-right: 0.75rem;
}

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

.mr-6{
    margin-right: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.\!block{
    display: block !important;
}

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

.grid{
    display: grid;
}

.contents{
    display: contents;
}

.list-item{
    display: list-item;
}

.hidden{
    display: none;
}

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

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

.h-0{
    height: 0px;
}

.h-1{
    height: 0.25rem;
}

.h-10{
    height: 2.5rem;
}

.h-12{
    height: 3rem;
}

.h-16{
    height: 4rem;
}

.h-20{
    height: 5rem;
}

.h-24{
    height: 6rem;
}

.h-3{
    height: 0.75rem;
}

.h-3\.5{
    height: 0.875rem;
}

.h-32{
    height: 8rem;
}

.h-36{
    height: 9rem;
}

.h-4{
    height: 1rem;
}

.h-40{
    height: 10rem;
}

.h-48{
    height: 12rem;
}

.h-5{
    height: 1.25rem;
}

.h-56{
    height: 14rem;
}

.h-6{
    height: 1.5rem;
}

.h-60{
    height: 15rem;
}

.h-64{
    height: 16rem;
}

.h-7{
    height: 1.75rem;
}

.h-72{
    height: 18rem;
}

.h-8{
    height: 2rem;
}

.h-80{
    height: 20rem;
}

.h-96{
    height: 24rem;
}

.h-\[40vh\]{
    height: 40vh;
}

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

.h-\[75vh\]{
    height: 75vh;
}

.h-full{
    height: 100%;
}

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

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

.min-h-0{
    min-height: 0px;
}

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

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

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

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

.w-0{
    width: 0px;
}

.w-10{
    width: 2.5rem;
}

.w-11{
    width: 2.75rem;
}

.w-12{
    width: 3rem;
}

.w-16{
    width: 4rem;
}

.w-2\/3{
    width: 66.666667%;
}

.w-20{
    width: 5rem;
}

.w-24{
    width: 6rem;
}

.w-3{
    width: 0.75rem;
}

.w-3\.5{
    width: 0.875rem;
}

.w-3\/4{
    width: 75%;
}

.w-32{
    width: 8rem;
}

.w-36{
    width: 9rem;
}

.w-4{
    width: 1rem;
}

.w-40{
    width: 10rem;
}

.w-48{
    width: 12rem;
}

.w-5{
    width: 1.25rem;
}

.w-56{
    width: 14rem;
}

.w-6{
    width: 1.5rem;
}

.w-60{
    width: 15rem;
}

.w-7{
    width: 1.75rem;
}

.w-8{
    width: 2rem;
}

.w-80{
    width: 20rem;
}

.w-auto{
    width: auto;
}

.w-full{
    width: 100%;
}

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

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

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

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

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

.max-w-4xl{
    max-width: 56rem;
}

.max-w-5xl{
    max-width: 64rem;
}

.max-w-6xl{
    max-width: 72rem;
}

.max-w-7xl{
    max-width: 80rem;
}

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

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

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

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

.max-w-prose{
    max-width: 65ch;
}

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

.max-w-xs{
    max-width: 20rem;
}

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

.flex-none{
    flex: none;
}

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

.shrink{
    flex-shrink: 1;
}

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

.grow{
    flex-grow: 1;
}

.border-collapse{
    border-collapse: collapse;
}

.origin-center{
    transform-origin: center;
}

.-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-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-x-16{
    --tw-translate-x: 4rem;
    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));
}

.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-\[-15deg\]{
    --tw-rotate: -15deg;
    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 pulse{

    50%{
        opacity: .5;
    }
}

.animate-pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse{

    50%{
        opacity: .5;
    }
}

.animate-pulse-slow{
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{

    to{
        transform: rotate(360deg);
    }
}

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

.cursor-default{
    cursor: default;
}

.cursor-ew-resize{
    cursor: ew-resize;
}

.cursor-pointer{
    cursor: pointer;
}

.cursor-zoom-in{
    cursor: zoom-in;
}

.cursor-zoom-out{
    cursor: zoom-out;
}

.touch-none{
    touch-action: none;
}

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

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

.resize-y{
    resize: vertical;
}

.resize{
    resize: both;
}

.list-inside{
    list-style-position: inside;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.justify-end{
    justify-content: flex-end;
}

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

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

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

.gap-1{
    gap: 0.25rem;
}

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

.gap-10{
    gap: 2.5rem;
}

.gap-12{
    gap: 3rem;
}

.gap-16{
    gap: 4rem;
}

.gap-2{
    gap: 0.5rem;
}

.gap-3{
    gap: 0.75rem;
}

.gap-4{
    gap: 1rem;
}

.gap-5{
    gap: 1.25rem;
}

.gap-6{
    gap: 1.5rem;
}

.gap-8{
    gap: 2rem;
}

.gap-x-10{
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
}

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

.gap-x-14{
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
}

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

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

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

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

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

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

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

.gap-y-10{
    row-gap: 2.5rem;
}

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

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

.gap-y-7{
    row-gap: 1.75rem;
}

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

.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-x-3 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-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-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-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-10 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

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

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

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

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

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

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

.text-wrap{
    text-wrap: wrap;
}

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

.rounded{
    border-radius: 0.25rem;
}

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

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

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

.rounded-none{
    border-radius: 0px;
}

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

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

.rounded-r-lg{
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.border{
    border-width: 1px;
}

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

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

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

.border-y{
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.border-y-4{
    border-top-width: 4px;
    border-bottom-width: 4px;
}

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

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

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

.border-b-\[16px\]{
    border-bottom-width: 16px;
}

.border-b-\[3px\]{
    border-bottom-width: 3px;
}

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

.border-l-4{
    border-left-width: 4px;
}

.border-l-8{
    border-left-width: 8px;
}

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

.border-l-\[3px\]{
    border-left-width: 3px;
}

.border-l-\[6px\]{
    border-left-width: 6px;
}

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

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

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

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

.border-t-\[16px\]{
    border-top-width: 16px;
}

.border-dashed{
    border-style: dashed;
}

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

.border-amber-300{
    --tw-border-opacity: 1;
    border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

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

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

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

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

.border-blue-200{
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-300{
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-400{
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-500{
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600{
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-blue-700{
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.border-blue-800{
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.border-cyan-200{
    --tw-border-opacity: 1;
    border-color: rgb(165 243 252 / var(--tw-border-opacity, 1));
}

.border-cyan-300{
    --tw-border-opacity: 1;
    border-color: rgb(103 232 249 / var(--tw-border-opacity, 1));
}

.border-cyan-400{
    --tw-border-opacity: 1;
    border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.border-cyan-500{
    --tw-border-opacity: 1;
    border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}

.border-cyan-600{
    --tw-border-opacity: 1;
    border-color: rgb(8 145 178 / var(--tw-border-opacity, 1));
}

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

.border-emerald-300{
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

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

.border-forest-dark{
    --tw-border-opacity: 1;
    border-color: rgb(26 88 46 / var(--tw-border-opacity, 1));
}

.border-forest-light{
    --tw-border-opacity: 1;
    border-color: rgb(112 190 121 / var(--tw-border-opacity, 1));
}

.border-forest-light\/30{
    border-color: rgb(112 190 121 / 0.3);
}

.border-forest-light\/50{
    border-color: rgb(112 190 121 / 0.5);
}

.border-forest-light\/60{
    border-color: rgb(112 190 121 / 0.6);
}

.border-forest-primary{
    --tw-border-opacity: 1;
    border-color: rgb(60 141 79 / var(--tw-border-opacity, 1));
}

.border-forest-primary\/20{
    border-color: rgb(60 141 79 / 0.2);
}

.border-forest-primary\/30{
    border-color: rgb(60 141 79 / 0.3);
}

.border-forest-primary\/40{
    border-color: rgb(60 141 79 / 0.4);
}

.border-forest-teal{
    --tw-border-opacity: 1;
    border-color: rgb(42 107 122 / var(--tw-border-opacity, 1));
}

.border-forest-teal\/70{
    border-color: rgb(42 107 122 / 0.7);
}

.border-gray-100{
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400{
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-500{
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-600{
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-gray-700{
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-green-200{
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300{
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-400{
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-green-500{
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-500\/50{
    border-color: rgb(34 197 94 / 0.5);
}

.border-green-600{
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-green-700{
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}

.border-indigo-400{
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.border-indigo-500{
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.border-indigo-600{
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}

.border-lime-300{
    --tw-border-opacity: 1;
    border-color: rgb(190 242 100 / var(--tw-border-opacity, 1));
}

.border-neutral-200{
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}

.border-neutral-gray{
    --tw-border-opacity: 1;
    border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
}

.border-neutral-text\/20{
    border-color: rgb(51 51 51 / 0.2);
}

.border-orange-200{
    --tw-border-opacity: 1;
    border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-orange-300{
    --tw-border-opacity: 1;
    border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

.border-orange-500{
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.border-orange-600{
    --tw-border-opacity: 1;
    border-color: rgb(234 88 12 / var(--tw-border-opacity, 1));
}

.border-orange-700{
    --tw-border-opacity: 1;
    border-color: rgb(194 65 12 / var(--tw-border-opacity, 1));
}

.border-purple-200{
    --tw-border-opacity: 1;
    border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-400{
    --tw-border-opacity: 1;
    border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.border-purple-500{
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-purple-600{
    --tw-border-opacity: 1;
    border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}

.border-purple-700{
    --tw-border-opacity: 1;
    border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}

.border-red-200{
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

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

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

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

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

.border-red-700{
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

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

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

.border-stone-200{
    --tw-border-opacity: 1;
    border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-stone-300{
    --tw-border-opacity: 1;
    border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}

.border-stone-400{
    --tw-border-opacity: 1;
    border-color: rgb(168 162 158 / var(--tw-border-opacity, 1));
}

.border-stone-500{
    --tw-border-opacity: 1;
    border-color: rgb(120 113 108 / var(--tw-border-opacity, 1));
}

.border-stone-600{
    --tw-border-opacity: 1;
    border-color: rgb(87 83 78 / var(--tw-border-opacity, 1));
}

.border-stone-700{
    --tw-border-opacity: 1;
    border-color: rgb(68 64 60 / var(--tw-border-opacity, 1));
}

.border-teal-200{
    --tw-border-opacity: 1;
    border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}

.border-teal-300{
    --tw-border-opacity: 1;
    border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));
}

.border-teal-400{
    --tw-border-opacity: 1;
    border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}

.border-teal-600{
    --tw-border-opacity: 1;
    border-color: rgb(13 148 136 / var(--tw-border-opacity, 1));
}

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

.border-violet-200{
    --tw-border-opacity: 1;
    border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}

.border-violet-300{
    --tw-border-opacity: 1;
    border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}

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

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

.border-white\/10{
    border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15{
    border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20{
    border-color: rgb(255 255 255 / 0.2);
}

.border-white\/40{
    border-color: rgb(255 255 255 / 0.4);
}

.border-white\/50{
    border-color: rgb(255 255 255 / 0.5);
}

.border-yellow-300{
    --tw-border-opacity: 1;
    border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}

.border-yellow-400{
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.border-yellow-500{
    --tw-border-opacity: 1;
    border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}

.border-yellow-600{
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
}

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

.border-l-blue-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-l-cyan-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.border-l-green-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-l-indigo-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.border-l-purple-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.border-l-red-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-l-yellow-400{
    --tw-border-opacity: 1;
    border-left-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

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

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

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

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

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

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

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

.bg-black\/20{
    background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/40{
    background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50{
    background-color: rgb(0 0 0 / 0.5);
}

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

.bg-black\/80{
    background-color: rgb(0 0 0 / 0.8);
}

.bg-blue-100{
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

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

.bg-blue-50\/50{
    background-color: rgb(239 246 255 / 0.5);
}

.bg-blue-700{
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

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

.bg-cyan-50{
    --tw-bg-opacity: 1;
    background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}

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

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

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

.bg-forest-dark{
    --tw-bg-opacity: 1;
    background-color: rgb(26 88 46 / var(--tw-bg-opacity, 1));
}

.bg-forest-dark\/40{
    background-color: rgb(26 88 46 / 0.4);
}

.bg-forest-light\/10{
    background-color: rgb(112 190 121 / 0.1);
}

.bg-forest-light\/20{
    background-color: rgb(112 190 121 / 0.2);
}

.bg-forest-light\/25{
    background-color: rgb(112 190 121 / 0.25);
}

.bg-forest-light\/30{
    background-color: rgb(112 190 121 / 0.3);
}

.bg-forest-light\/40{
    background-color: rgb(112 190 121 / 0.4);
}

.bg-forest-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(60 141 79 / var(--tw-bg-opacity, 1));
}

.bg-forest-primary\/10{
    background-color: rgb(60 141 79 / 0.1);
}

.bg-forest-primary\/15{
    background-color: rgb(60 141 79 / 0.15);
}

.bg-forest-primary\/20{
    background-color: rgb(60 141 79 / 0.2);
}

.bg-forest-primary\/40{
    background-color: rgb(60 141 79 / 0.4);
}

.bg-forest-teal{
    --tw-bg-opacity: 1;
    background-color: rgb(42 107 122 / var(--tw-bg-opacity, 1));
}

.bg-forest-teal\/10{
    background-color: rgb(42 107 122 / 0.1);
}

.bg-forest-teal\/20{
    background-color: rgb(42 107 122 / 0.2);
}

.bg-forest-teal\/40{
    background-color: rgb(42 107 122 / 0.4);
}

.bg-forest-teal\/80{
    background-color: rgb(42 107 122 / 0.8);
}

.bg-gray-100{
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300{
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-600{
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200{
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/50{
    background-color: rgb(240 253 244 / 0.5);
}

.bg-green-600{
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-green-600\/20{
    background-color: rgb(22 163 74 / 0.2);
}

.bg-indigo-100{
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

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

.bg-neutral-200{
    --tw-bg-opacity: 1;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.bg-neutral-300{
    --tw-bg-opacity: 1;
    background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}

.bg-neutral-50{
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-neutral-gray{
    --tw-bg-opacity: 1;
    background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}

.bg-neutral-gray\/30{
    background-color: rgb(238 238 238 / 0.3);
}

.bg-neutral-gray\/40{
    background-color: rgb(238 238 238 / 0.4);
}

.bg-neutral-light{
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 230 / var(--tw-bg-opacity, 1));
}

.bg-neutral-sidebar{
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.bg-orange-100{
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200{
    --tw-bg-opacity: 1;
    background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}

.bg-orange-50{
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

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

.bg-purple-50{
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100{
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200{
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-50\/50{
    background-color: rgb(254 242 242 / 0.5);
}

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

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

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

.bg-stone-100{
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}

.bg-stone-400{
    --tw-bg-opacity: 1;
    background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
}

.bg-stone-50{
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-500{
    --tw-bg-opacity: 1;
    background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
}

.bg-stone-600{
    --tw-bg-opacity: 1;
    background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
}

.bg-stone-700{
    --tw-bg-opacity: 1;
    background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
}

.bg-stone-800{
    --tw-bg-opacity: 1;
    background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
}

.bg-stone-900{
    --tw-bg-opacity: 1;
    background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

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

.bg-teal-50{
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}

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

.bg-violet-50{
    --tw-bg-opacity: 1;
    background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

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

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

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

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

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

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

.bg-yellow-100{
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-200{
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}

.bg-yellow-400{
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50{
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-600{
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.bg-opacity-20{
    --tw-bg-opacity: 0.2;
}

.bg-opacity-30{
    --tw-bg-opacity: 0.3;
}

.bg-opacity-40{
    --tw-bg-opacity: 0.4;
}

.bg-opacity-60{
    --tw-bg-opacity: 0.6;
}

.bg-opacity-80{
    --tw-bg-opacity: 0.8;
}

.bg-gradient-to-b{
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br{
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-amber-50{
    --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-600{
    --tw-gradient-from: #d97706 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(217 119 6 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/45{
    --tw-gradient-from: rgb(0 0 0 / 0.45) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/80{
    --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/85{
    --tw-gradient-from: rgb(0 0 0 / 0.85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/90{
    --tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50{
    --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500{
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600{
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-dark{
    --tw-gradient-from: #1a582e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(26 88 46 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-dark\/40{
    --tw-gradient-from: rgb(26 88 46 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(26 88 46 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-dark\/50{
    --tw-gradient-from: rgb(26 88 46 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(26 88 46 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-dark\/65{
    --tw-gradient-from: rgb(26 88 46 / 0.65) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(26 88 46 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-light\/10{
    --tw-gradient-from: rgb(112 190 121 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(112 190 121 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-light\/20{
    --tw-gradient-from: rgb(112 190 121 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(112 190 121 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-light\/30{
    --tw-gradient-from: rgb(112 190 121 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(112 190 121 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-light\/60{
    --tw-gradient-from: rgb(112 190 121 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(112 190 121 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-primary{
    --tw-gradient-from: #3c8d4f var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(60 141 79 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-primary\/10{
    --tw-gradient-from: rgb(60 141 79 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(60 141 79 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-primary\/20{
    --tw-gradient-from: rgb(60 141 79 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(60 141 79 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-primary\/5{
    --tw-gradient-from: rgb(60 141 79 / 0.05) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(60 141 79 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-teal{
    --tw-gradient-from: #2a6b7a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(42 107 122 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-forest-teal\/20{
    --tw-gradient-from: rgb(42 107 122 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(42 107 122 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-50{
    --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-500{
    --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-50{
    --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500{
    --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600{
    --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-50{
    --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500{
    --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-100{
    --tw-gradient-from: #ffedd5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-50{
    --tw-gradient-from: #fff7ed var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-50{
    --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500{
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-600{
    --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-50{
    --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-500{
    --tw-gradient-from: #64748b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-50{
    --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-500{
    --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-50{
    --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-black\/20{
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/40{
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/45{
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/60{
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-forest-dark\/65{
    --tw-gradient-to: rgb(26 88 46 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(26 88 46 / 0.65) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-forest-dark\/70{
    --tw-gradient-to: rgb(26 88 46 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(26 88 46 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-forest-dark\/90{
    --tw-gradient-to: rgb(26 88 46 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(26 88 46 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-forest-teal\/5{
    --tw-gradient-to: rgb(42 107 122 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(42 107 122 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-forest-teal\/85{
    --tw-gradient-to: rgb(42 107 122 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(42 107 122 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-amber-50{
    --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}

.to-amber-800{
    --tw-gradient-to: #92400e var(--tw-gradient-to-position);
}

.to-black\/0{
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
}

.to-black\/65{
    --tw-gradient-to: rgb(0 0 0 / 0.65) var(--tw-gradient-to-position);
}

.to-blue-50{
    --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-700{
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-cyan-50{
    --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
}

.to-cyan-500{
    --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}

.to-cyan-600{
    --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}

.to-emerald-50{
    --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
}

.to-emerald-700{
    --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}

.to-forest-dark{
    --tw-gradient-to: #1a582e var(--tw-gradient-to-position);
}

.to-forest-dark\/70{
    --tw-gradient-to: rgb(26 88 46 / 0.7) var(--tw-gradient-to-position);
}

.to-forest-light\/10{
    --tw-gradient-to: rgb(112 190 121 / 0.1) var(--tw-gradient-to-position);
}

.to-forest-light\/20{
    --tw-gradient-to: rgb(112 190 121 / 0.2) var(--tw-gradient-to-position);
}

.to-forest-primary{
    --tw-gradient-to: #3c8d4f var(--tw-gradient-to-position);
}

.to-forest-primary\/10{
    --tw-gradient-to: rgb(60 141 79 / 0.1) var(--tw-gradient-to-position);
}

.to-forest-primary\/20{
    --tw-gradient-to: rgb(60 141 79 / 0.2) var(--tw-gradient-to-position);
}

.to-forest-teal{
    --tw-gradient-to: #2a6b7a var(--tw-gradient-to-position);
}

.to-forest-teal\/10{
    --tw-gradient-to: rgb(42 107 122 / 0.1) var(--tw-gradient-to-position);
}

.to-forest-teal\/20{
    --tw-gradient-to: rgb(42 107 122 / 0.2) var(--tw-gradient-to-position);
}

.to-forest-teal\/5{
    --tw-gradient-to: rgb(42 107 122 / 0.05) var(--tw-gradient-to-position);
}

.to-forest-teal\/60{
    --tw-gradient-to: rgb(42 107 122 / 0.6) var(--tw-gradient-to-position);
}

.to-gray-700{
    --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}

.to-green-50{
    --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);
}

.to-indigo-50{
    --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-indigo-600{
    --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-lime-500{
    --tw-gradient-to: #84cc16 var(--tw-gradient-to-position);
}

.to-orange-200{
    --tw-gradient-to: #fed7aa var(--tw-gradient-to-position);
}

.to-orange-50{
    --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.to-pink-50{
    --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}

.to-pink-500{
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.to-purple-600{
    --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-red-50{
    --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position);
}

.to-slate-50{
    --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
}

.to-slate-700{
    --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}

.to-transparent{
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-yellow-50{
    --tw-gradient-to: #fefce8 var(--tw-gradient-to-position);
}

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

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

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

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

.object-center-bottom{
    -o-object-position: center 75%;
       object-position: center 75%;
}

.object-center-top{
    -o-object-position: center 25%;
       object-position: center 25%;
}

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

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

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

.p-0\.5{
    padding: 0.125rem;
}

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

.p-10{
    padding: 2.5rem;
}

.p-12{
    padding: 3rem;
}

.p-2{
    padding: 0.5rem;
}

.p-3{
    padding: 0.75rem;
}

.p-4{
    padding: 1rem;
}

.p-5{
    padding: 1.25rem;
}

.p-6{
    padding: 1.5rem;
}

.p-8{
    padding: 2rem;
}

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

.px-0\.5{
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

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

.px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.py-9{
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

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

.pb-10{
    padding-bottom: 2.5rem;
}

.pb-12{
    padding-bottom: 3rem;
}

.pb-14{
    padding-bottom: 3.5rem;
}

.pb-20{
    padding-bottom: 5rem;
}

.pb-24{
    padding-bottom: 6rem;
}

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

.pb-5{
    padding-bottom: 1.25rem;
}

.pb-6{
    padding-bottom: 1.5rem;
}

.pl-12{
    padding-left: 3rem;
}

.pl-3{
    padding-left: 0.75rem;
}

.pl-4{
    padding-left: 1rem;
}

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

.pl-6{
    padding-left: 1.5rem;
}

.pl-8{
    padding-left: 2rem;
}

.pr-12{
    padding-right: 3rem;
}

.pr-14{
    padding-right: 3.5rem;
}

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

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

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

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

.pt-28{
    padding-top: 7rem;
}

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

.pt-32{
    padding-top: 8rem;
}

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

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

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

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

.pt-\[28vh\]{
    padding-top: 28vh;
}

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

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

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

.font-serif{
    font-family: "Source Serif 4", serif;
}

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

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

.text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
}

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

.text-6xl{
    font-size: 3.75rem;
    line-height: 1;
}

.text-8xl{
    font-size: 6rem;
    line-height: 1;
}

.text-\[0\.65rem\]{
    font-size: 0.65rem;
}

.text-\[0\.6rem\]{
    font-size: 0.6rem;
}

.text-\[0\.7rem\]{
    font-size: 0.7rem;
}

.text-\[1\.6rem\]{
    font-size: 1.6rem;
}

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

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

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

.text-\[7rem\]{
    font-size: 7rem;
}

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

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

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

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

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

.font-black{
    font-weight: 900;
}

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

.font-extrabold{
    font-weight: 800;
}

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

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

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

.uppercase{
    text-transform: uppercase;
}

.lowercase{
    text-transform: lowercase;
}

.italic{
    font-style: italic;
}

.not-italic{
    font-style: normal;
}

.ordinal{
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.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-10{
    line-height: 2.5rem;
}

.leading-\[0\.85\]{
    line-height: 0.85;
}

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

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

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

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

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

.leading-snug{
    line-height: 1.375;
}

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

.tracking-\[0\.18em\]{
    letter-spacing: 0.18em;
}

.tracking-\[0\.22em\]{
    letter-spacing: 0.22em;
}

.tracking-\[0\.2em\]{
    letter-spacing: 0.2em;
}

.tracking-\[0\.35em\]{
    letter-spacing: 0.35em;
}

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

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

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

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

.tracking-widest{
    letter-spacing: 0.1em;
}

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

.text-amber-300{
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

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

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

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

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

.text-amber-900{
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-amber-950{
    --tw-text-opacity: 1;
    color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}

.text-blue-500{
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600{
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700{
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800{
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-blue-900{
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-blue-950{
    --tw-text-opacity: 1;
    color: rgb(23 37 84 / var(--tw-text-opacity, 1));
}

.text-cyan-600{
    --tw-text-opacity: 1;
    color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}

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

.text-cyan-900{
    --tw-text-opacity: 1;
    color: rgb(22 78 99 / var(--tw-text-opacity, 1));
}

.text-cyan-950{
    --tw-text-opacity: 1;
    color: rgb(8 51 68 / var(--tw-text-opacity, 1));
}

.text-emerald-50\/95{
    color: rgb(236 253 245 / 0.95);
}

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

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

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

.text-emerald-950{
    --tw-text-opacity: 1;
    color: rgb(2 44 34 / var(--tw-text-opacity, 1));
}

.text-forest-dark{
    --tw-text-opacity: 1;
    color: rgb(26 88 46 / var(--tw-text-opacity, 1));
}

.text-forest-dark\/25{
    color: rgb(26 88 46 / 0.25);
}

.text-forest-dark\/40{
    color: rgb(26 88 46 / 0.4);
}

.text-forest-light{
    --tw-text-opacity: 1;
    color: rgb(112 190 121 / var(--tw-text-opacity, 1));
}

.text-forest-light\/50{
    color: rgb(112 190 121 / 0.5);
}

.text-forest-light\/60{
    color: rgb(112 190 121 / 0.6);
}

.text-forest-primary{
    --tw-text-opacity: 1;
    color: rgb(60 141 79 / var(--tw-text-opacity, 1));
}

.text-forest-primary\/50{
    color: rgb(60 141 79 / 0.5);
}

.text-forest-primary\/70{
    color: rgb(60 141 79 / 0.7);
}

.text-forest-primary\/80{
    color: rgb(60 141 79 / 0.8);
}

.text-forest-teal{
    --tw-text-opacity: 1;
    color: rgb(42 107 122 / var(--tw-text-opacity, 1));
}

.text-forest-teal\/40{
    color: rgb(42 107 122 / 0.4);
}

.text-fuchsia-600{
    --tw-text-opacity: 1;
    color: rgb(192 38 211 / var(--tw-text-opacity, 1));
}

.text-gray-500{
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-400{
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500{
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600{
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800{
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900{
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-green-950{
    --tw-text-opacity: 1;
    color: rgb(5 46 22 / var(--tw-text-opacity, 1));
}

.text-indigo-600{
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-700{
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-indigo-900{
    --tw-text-opacity: 1;
    color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.text-indigo-950{
    --tw-text-opacity: 1;
    color: rgb(30 27 75 / var(--tw-text-opacity, 1));
}

.text-lime-100{
    --tw-text-opacity: 1;
    color: rgb(236 252 203 / var(--tw-text-opacity, 1));
}

.text-lime-300{
    --tw-text-opacity: 1;
    color: rgb(190 242 100 / var(--tw-text-opacity, 1));
}

.text-neutral-600{
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

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

.text-neutral-text\/30{
    color: rgb(51 51 51 / 0.3);
}

.text-neutral-text\/60{
    color: rgb(51 51 51 / 0.6);
}

.text-neutral-text\/65{
    color: rgb(51 51 51 / 0.65);
}

.text-neutral-text\/70{
    color: rgb(51 51 51 / 0.7);
}

.text-neutral-text\/80{
    color: rgb(51 51 51 / 0.8);
}

.text-neutral-text\/85{
    color: rgb(51 51 51 / 0.85);
}

.text-neutral-text\/90{
    color: rgb(51 51 51 / 0.9);
}

.text-orange-600{
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700{
    --tw-text-opacity: 1;
    color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800{
    --tw-text-opacity: 1;
    color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-orange-900{
    --tw-text-opacity: 1;
    color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

.text-orange-950{
    --tw-text-opacity: 1;
    color: rgb(67 20 7 / var(--tw-text-opacity, 1));
}

.text-pink-500{
    --tw-text-opacity: 1;
    color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-pink-600{
    --tw-text-opacity: 1;
    color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-purple-500{
    --tw-text-opacity: 1;
    color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600{
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700{
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-900{
    --tw-text-opacity: 1;
    color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}

.text-purple-950{
    --tw-text-opacity: 1;
    color: rgb(59 7 100 / var(--tw-text-opacity, 1));
}

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

.text-red-700{
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800{
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900{
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-red-950{
    --tw-text-opacity: 1;
    color: rgb(69 10 10 / var(--tw-text-opacity, 1));
}

.text-rose-300{
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

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

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

.text-sky-950{
    --tw-text-opacity: 1;
    color: rgb(8 47 73 / var(--tw-text-opacity, 1));
}

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

.text-stone-100{
    --tw-text-opacity: 1;
    color: rgb(245 245 244 / var(--tw-text-opacity, 1));
}

.text-stone-100\/90{
    color: rgb(245 245 244 / 0.9);
}

.text-stone-200\/90{
    color: rgb(231 229 228 / 0.9);
}

.text-stone-300{
    --tw-text-opacity: 1;
    color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}

.text-stone-400{
    --tw-text-opacity: 1;
    color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.text-stone-50{
    --tw-text-opacity: 1;
    color: rgb(250 250 249 / var(--tw-text-opacity, 1));
}

.text-stone-500{
    --tw-text-opacity: 1;
    color: rgb(120 113 108 / var(--tw-text-opacity, 1));
}

.text-stone-600{
    --tw-text-opacity: 1;
    color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-stone-700{
    --tw-text-opacity: 1;
    color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

.text-teal-300{
    --tw-text-opacity: 1;
    color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.text-teal-600{
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

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

.text-teal-900{
    --tw-text-opacity: 1;
    color: rgb(19 78 74 / var(--tw-text-opacity, 1));
}

.text-teal-950{
    --tw-text-opacity: 1;
    color: rgb(4 47 46 / var(--tw-text-opacity, 1));
}

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

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

.text-violet-900{
    --tw-text-opacity: 1;
    color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}

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

.text-white\/45{
    color: rgb(255 255 255 / 0.45);
}

.text-white\/50{
    color: rgb(255 255 255 / 0.5);
}

.text-white\/55{
    color: rgb(255 255 255 / 0.55);
}

.text-white\/60{
    color: rgb(255 255 255 / 0.6);
}

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

.text-white\/75{
    color: rgb(255 255 255 / 0.75);
}

.text-white\/80{
    color: rgb(255 255 255 / 0.8);
}

.text-white\/85{
    color: rgb(255 255 255 / 0.85);
}

.text-white\/90{
    color: rgb(255 255 255 / 0.9);
}

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

.text-white\/\[0\.07\]{
    color: rgb(255 255 255 / 0.07);
}

.text-yellow-200{
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.text-yellow-700{
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800{
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.text-yellow-900{
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}

.text-yellow-950{
    --tw-text-opacity: 1;
    color: rgb(66 32 6 / var(--tw-text-opacity, 1));
}

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

.underline-offset-2{
    text-underline-offset: 2px;
}

.placeholder-neutral-text\/50::-moz-placeholder{
    color: rgb(51 51 51 / 0.5);
}

.placeholder-neutral-text\/50::placeholder{
    color: rgb(51 51 51 / 0.5);
}

.placeholder-white\/50::-moz-placeholder{
    color: rgb(255 255 255 / 0.5);
}

.placeholder-white\/50::placeholder{
    color: rgb(255 255 255 / 0.5);
}

.accent-forest-primary{
    accent-color: #3c8d4f;
}

.opacity-0{
    opacity: 0;
}

.opacity-100{
    opacity: 1;
}

.opacity-15{
    opacity: 0.15;
}

.opacity-20{
    opacity: 0.2;
}

.opacity-25{
    opacity: 0.25;
}

.opacity-30{
    opacity: 0.3;
}

.opacity-50{
    opacity: 0.5;
}

.opacity-55{
    opacity: 0.55;
}

.opacity-60{
    opacity: 0.6;
}

.opacity-70{
    opacity: 0.7;
}

.opacity-75{
    opacity: 0.75;
}

.opacity-80{
    opacity: 0.8;
}

.opacity-85{
    opacity: 0.85;
}

.opacity-90{
    opacity: 0.9;
}

.opacity-95{
    opacity: 0.95;
}

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

.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-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{
    outline-style: solid;
}

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

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

.ring-blue-500{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

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

.blur-2xl{
    --tw-blur: blur(40px);
    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);
}

.drop-shadow{
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    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);
}

.drop-shadow-2xl{
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
    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);
}

.drop-shadow-lg{
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    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);
}

.grayscale{
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
    --tw-backdrop-blur: blur(8px);
    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);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

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

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

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

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

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

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

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

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

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

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

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

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

.ease-linear{
    transition-timing-function: linear;
}

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

/* Article text styling */

.article-text {
    font-family: "Source Serif 4", serif;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75; /* 28px */
    margin-top: 2.75rem; /* 44px */
    margin-bottom: -0.5rem; /* -8px */
    color: #333333;
    letter-spacing: -0.06px;
    word-break: break-word;
    overflow-wrap: break-word;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.article-text.section-end {
    margin-bottom: 0.75rem; /* 12px */
}

/* Article summary (subtitle) styling */

.article-summary {
    font-family: "Source Serif 4", serif;
    font-size: 1.5rem; /* 24px - base size (text-2xl) */
    line-height: 1.625; /* leading-relaxed */
    font-weight: 400;
    color: #525252; /* text-neutral-text */
}

/* Responsive sizing for article summary */

@media (min-width: 768px) {
    .article-summary {
        font-size: 1.875rem; /* 30px (text-3xl) */
    }
}

/* Page-level styling for article pages */

body.page-article {
    background-color: #fafaf9; /* bg-neutral-light - off-white throughout */
}

body.page-article > article {
    position: relative;
}

/* Typography wrapper - Hero section */

.typography-hero {
    padding-top: 8rem; /* pt-32 */
    padding-bottom: 3rem; /* pb-12 */
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
}

.typography-hero h1 {
    font-size: 3rem; /* text-5xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-bottom: 2rem; /* mb-8 */
    line-height: 1.1; /* leading-tight */
}

@media (min-width: 768px) {
    .typography-hero h1 {
        font-size: 4.5rem; /* text-7xl */
    }
}

/* Typography wrapper - Main article content */

.typography-article {
    padding-bottom: 6rem; /* pb-24 */
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
}

@layer typography {

.typography-article p {
    font-family: "Source Serif 4", serif;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75; /* 28px */
    margin-top: 2.75rem; /* 44px */
    color: #333333;
    letter-spacing: -0.06px;
    word-break: break-word;
    overflow-wrap: break-word;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.typography-article h3 + p,
.typography-article h4 + p,
.typography-article h5 + p {
    margin-top: 1rem;
}

.typography-article p:first-child {
    margin-top: 0; /* No top margin on first paragraph */
}

.typography-article a {
    color: #2D6B4D; /* forest-primary */
    text-decoration: underline;
    font-weight: 600;
}

.typography-article a:hover {
    color: #1a582e; /* forest-dark */
}

.typography-article h2 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-top: 3rem; /* pt-12 */
    margin-bottom: 2rem; /* mb-8 */
    line-height: 1.2; /* Tighter line height */
}

@media (min-width: 768px) {
    .typography-article h2 {
        font-size: 3rem; /* text-5xl */
    }
}

.typography-article h3 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-top: 2rem; /* pt-8 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.typography-article h4 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.typography-article h5 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.typography-article ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
    list-style: none;
}

.typography-article li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-family: "Source Serif 4", serif;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75;
}

.typography-article li::before {
    content: "▸";
    color: #2D6B4D; /* forest-primary */
    font-weight: 700;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.typography-article figure {
    margin-top: 3rem; /* my-12 */
    margin-bottom: 3rem;
}

.typography-article figure img {
    width: 100%;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.typography-article figcaption {
    text-align: left;
    font-style: italic;
    color: #6B7280; /* gray-500 */
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.typography-article figcaption a {
    color: #2D6B4D; /* forest-primary */
    text-decoration: underline;
}

.typography-article figcaption a:hover {
    color: #1a582e; /* forest-dark */
}

/* Aside paragraphs get tighter spacing than body paragraphs.
   Lives in the typography layer so unlayered aside-specific rules
   (quote, crosslink, boxed, standard) can override it. */
.typography-article aside p {
    margin-top: 0.75rem;
}

}

/* end @layer typography */

/* Figure pair - side by side square images */

.figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    align-items: start;
}

.figure-pair figure {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.figure-pair figure a {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.figure-pair figure img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.figure-pair figure a:hover img {
    transform: scale(1.05);
}

.figure-pair figcaption {
    flex-grow: 0;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .figure-pair {
        grid-template-columns: 1fr;
    }
}

/* Wildlife grid overrides */

.typography-article .wildlife-grid figure {
    margin: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.typography-article .wildlife-grid figure img {
    border-radius: 0;
    box-shadow: none;
}

.typography-article .wildlife-grid figcaption {
    text-align: left;
}

.wildlife-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

.wildlife-photo--cotinga {
    -o-object-position: 50% 35%;
       object-position: 50% 35%;
    transform: scale(1.1);
    transform-origin: center;
}

.wildlife-attribution {
    margin-top: 0.75rem;
    font-style: italic;
}

/* Typography wrapper - Resources section */

.typography-resources {
    padding-bottom: 6rem; /* pb-24 */
    padding-top: 3rem; /* pt-12 */
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
    border-top: 2px solid #e5e5e5; /* border-t-2 border-neutral-200 */
}

.typography-resources h2 {
    font-size: 2rem; /* text-3xl */
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    margin-bottom: 2rem;
    margin-top: 0;
}

.typography-resources h3 {
    font-family: Inter, sans-serif !important;
    font-size: 1.25rem !important; /* text-xl */
    font-weight: 600 !important;
    color: #1a582e !important; /* forest-dark */
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Category wrappers - space-y-12 equivalent */

.typography-resources > div {
    margin-top: 3rem;
}

.typography-resources > div:first-of-type {
    margin-top: 0;
}

/* Resource links - use !important to override inherited typography-article styles */

.typography-resources > div > div > a {
    font-family: Inter, sans-serif !important;
    color: #3c8d4f !important; /* forest-primary */
    text-decoration: underline !important;
    font-size: 1.125rem !important; /* text-lg / 18px */
    line-height: 1.75rem !important; /* text-lg line-height */
    font-weight: 600 !important; /* font-semibold */
    display: block;
}

.typography-resources > div > div > a:hover {
    color: #1a582e !important; /* forest-dark */
}

/* Resource descriptions - use !important to override inherited typography-article styles */

.typography-resources > div > div > p {
    font-family: Inter, sans-serif !important;
    color: #333333 !important; /* neutral-text */
    font-size: 1rem !important; /* text-base / 16px */
    line-height: 1.5 !important;
    margin-top: 0.25rem !important; /* mt-1 */
    margin-bottom: 0 !important;
}

/* Resource items - space-y-6 equivalent */

.typography-resources > div > div {
    margin-bottom: 1.5rem;
}

.typography-resources > div > div:last-child {
    margin-bottom: 0;
}

/* Intro text before resource lists */

.typography-resources > p {
    font-family: Inter, sans-serif;
    color: #333333; /* neutral-text */
    margin-bottom: 1rem;
}

/* Callout boxes - aside.standard (only within typography-article) */

.typography-article aside.standard {
    border-left: 8px solid;
    border-radius: 0 0.5rem 0.5rem 0; /* rounded-r-lg */
    padding: 1.75rem 2.5rem 1.875rem;
    margin-top: 3rem; /* my-12 */
    margin-bottom: 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    font-family: Inter, sans-serif;
}

.typography-article aside.standard h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 1rem; /* mb-4 */
}

.typography-article aside.standard h4 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
}

.typography-article aside.standard h5 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Header with icon and caption */

.typography-article aside.standard .header-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.typography-article aside.standard .header-icon-wrapper .icon-circle {
    flex-shrink: 0;
    border-radius: 50%;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typography-article aside.standard.green-blue .header-icon-wrapper .icon-circle {
    background-color: rgba(60, 141, 79, 0.1); /* forest-primary with 10% opacity */
    color: #3c8d4f; /* set color on container for icon to inherit */
}

.typography-article aside.standard.red .header-icon-wrapper .icon-circle {
    background-color: rgba(220, 38, 38, 0.1); /* red-600 with 10% opacity */
    color: #dc2626; /* set color on container for icon to inherit */
}

.typography-article aside.standard.green .header-icon-wrapper .icon-circle {
    background-color: rgba(22, 163, 74, 0.1); /* green-600 with 10% opacity */
    color: #16a34a; /* green-600 */
}

.typography-article aside.standard .header-icon-wrapper .icon-circle svg {
    width: 32px;
    height: 32px;
    color: inherit;
}

.typography-article aside.standard .header-icon-wrapper .icon-circle i {
    color: inherit;
}

.typography-article aside.standard .header-icon-wrapper .header-text h3,
.typography-article aside.standard .header-icon-wrapper .header-text h4,
.typography-article aside.standard .header-icon-wrapper .header-text h5 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    padding-top: 0;
}

.typography-article aside.standard .header-icon-wrapper .header-text p {
    font-family: Inter, sans-serif;
    font-size: 1.125rem; /* text-lg */
    color: #333333; /* text-neutral-text */
    margin: 0;
    padding: 0;
}

.typography-article aside.standard ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.typography-article aside li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem; /* space-y-3 */
    font-family: Inter, sans-serif;
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75; /* Leading for better readability */
}

.typography-article aside.standard li::before {
    content: "▸";
    font-weight: 400;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* Red theme for aside.standard */

.typography-article aside.standard.red {
    background-color: #fef2f2; /* bg-red-50 */
    border-left-color: #dc2626; /* border-red-600 */
}

.typography-article aside.standard.red h3,
.typography-article aside.standard.red h4,
.typography-article aside.standard.red h5 {
    color: #7f1d1d; /* text-red-900 */
}

.typography-article aside.standard.red li {
    color: #111827; /* text-gray-900 */
}

.typography-article aside.standard.red li::before {
    color: #dc2626; /* text-red-600 */
}

.typography-article aside.standard.red li.special {
    color: #dc2626; /* text-red-600 - for icon */
}

.typography-article aside.standard.red li.special i {
    color: inherit;
}

.typography-article aside.standard.red li.special span {
    color: #111827; /* text-gray-900 - restore default text color */
}

/* Green-blue theme for aside.standard */

.typography-article aside.standard.green-blue {
    background: linear-gradient(to right, rgba(112, 190, 121, 0.3), rgba(42, 107, 122, 0.2)); /* gradient from forest-light to forest-teal */
    border-left-color: #3c8d4f; /* forest-primary */
}

.typography-article aside.standard.green-blue h3,
.typography-article aside.standard.green-blue h4,
.typography-article aside.standard.green-blue h5 {
    color: #1a582e; /* text-forest-dark */
}

.typography-article aside.standard.green-blue li {
    color: #333333; /* text-neutral-text */
}

.typography-article aside.standard.green-blue li.special {
    color: #3c8d4f; /* forest-primary - for icon */
}

.typography-article aside.standard.green-blue li.special i {
    color: inherit;
}

.typography-article aside.standard.green-blue li.special span {
    color: #333333; /* text-neutral-text - restore default text color */
}

/* Purple theme for aside.standard - questions, thought experiments */

.typography-article aside.standard.purple {
    background: linear-gradient(135deg, rgba(243, 232, 255, 0.8), rgba(224, 231, 255, 0.8)); /* purple-100 to indigo-100 */
    border-left-color: #7c3aed; /* violet-600 */
}

.typography-article aside.standard.purple h3,
.typography-article aside.standard.purple h4,
.typography-article aside.standard.purple h5 {
    color: #4c1d95; /* violet-900 */
}

.typography-article aside.standard.purple p {
    color: #333333;
}

.typography-article aside.standard.purple li {
    color: #333333;
}

.typography-article aside.standard.purple li::before {
    color: #7c3aed; /* violet-600 */
}

/* Economy Quiz styling */

.typography-article .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.typography-article .quiz-option {
    display: block;
    width: 100%;
    padding: 0.875rem 1.25rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #4c1d95; /* violet-900 */
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(124, 58, 237, 0.3); /* violet-600 with opacity */
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.typography-article .quiz-option:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #7c3aed; /* violet-600 */
    transform: translateX(4px);
}

.typography-article .quiz-option:active {
    transform: translateX(2px);
}

.typography-article .quiz-option.selected {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
}

.typography-article .quiz-option.selected.correct {
    background: #16a34a;
    border-color: #16a34a;
    animation: quiz-correct 0.4s ease;
}

.typography-article .quiz-option.selected.correct::after {
    content: '\f00c'; /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 0.75rem;
    font-size: 1.1rem;
}

.typography-article .quiz-option.selected.incorrect {
    background: #dc2626;
    border-color: #dc2626;
    animation: quiz-incorrect 0.4s ease;
}

.typography-article .quiz-option.selected.incorrect::after {
    content: '\f00d'; /* fa-xmark */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 0.75rem;
    font-size: 1.1rem;
}

@keyframes quiz-correct {
    0% { transform: scale(1); }
    30% { transform: scale(1.04); }
    60% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.typography-article .quiz-option.reveal-correct {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    animation: quiz-reveal-pulse 0.5s ease;
}

.typography-article .quiz-option.reveal-correct::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 0.75rem;
    font-size: 1.1rem;
    color: #16a34a;
}

@keyframes quiz-reveal-pulse {
    0% { border-color: rgba(22, 163, 74, 0); }
    100% { border-color: #16a34a; }
}

@keyframes quiz-incorrect {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    90% { transform: translateX(2px); }
}

/* Amber-themed quiz options */

.typography-article aside.amber .quiz-option {
    color: #78350f; /* amber-900 */
    border-color: rgba(217, 119, 6, 0.3); /* amber-600 with opacity */
}

.typography-article aside.amber .quiz-option:hover {
    border-color: #d97706; /* amber-600 */
}

.typography-article aside.amber .quiz-option.selected {
    background: #d97706;
    color: white;
    border-color: #d97706;
}

/* Economy Pie Chart styling */

.typography-article .economy-chart-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

/* Chart switcher buttons */

.typography-article .chart-switcher {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.typography-article .chart-switch-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 0.5rem;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.typography-article .chart-switch-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.typography-article .chart-switch-btn.active {
    background: #3c8d4f;
    border-color: #3c8d4f;
    color: white;
}

.typography-article .chart-switch-btn.active:hover {
    background: #2d6b3b;
    border-color: #2d6b3b;
}

.typography-article .economy-chart-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    justify-content: center;
}

.typography-article .economy-pie {
    position: relative;
    width: 380px;
    height: 380px;
    flex-shrink: 0;
}

.typography-article .economy-pie svg {
    width: 100%;
    height: 100%;
}

.typography-article .economy-pie .pie-slice {
    transition: d 0.5s ease-out, transform 0.15s ease, opacity 0.15s ease;
}

.typography-article .economy-legend {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.typography-article .legend-section {
    margin-bottom: 1rem;
}

.typography-article .legend-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.typography-article .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.typography-article .legend-items {
    margin-left: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #4b5563;
    line-height: 1.5;
}

.typography-article .legend-item {
    display: flex;
    justify-content: space-between;
    padding: 0.0625rem 0;
}

.typography-article .legend-item span:last-child {
    font-weight: 500;
    color: #374151;
    transition: color 0.3s ease;
}

/* Value change flash animations */

.typography-article .legend-item span.flash-increase {
    animation: flashGreen 1.2s ease-out;
}

.typography-article .legend-item span.flash-decrease {
    animation: flashRed 1.2s ease-out;
}

@keyframes flashGreen {
    0% { color: #374151; }
    15% { color: #16a34a; font-weight: 700; }
    50% { color: #16a34a; font-weight: 600; }
    100% { color: #374151; font-weight: 500; }
}

@keyframes flashRed {
    0% { color: #374151; }
    15% { color: #dc2626; font-weight: 700; }
    50% { color: #dc2626; font-weight: 600; }
    100% { color: #374151; font-weight: 500; }
}

/* Legend section total flash */

.typography-article .section-total {
    transition: color 0.3s ease;
}

.typography-article .section-total.flash-increase {
    animation: flashGreenTitle 1.2s ease-out;
}

.typography-article .section-total.flash-decrease {
    animation: flashRedTitle 1.2s ease-out;
}

@keyframes flashGreenTitle {
    0% { color: #1f2937; }
    15% { color: #16a34a; }
    50% { color: #16a34a; }
    100% { color: #1f2937; }
}

@keyframes flashRedTitle {
    0% { color: #1f2937; }
    15% { color: #dc2626; }
    50% { color: #dc2626; }
    100% { color: #1f2937; }
}

/* Pie chart tooltip */

.typography-article .pie-tooltip {
    position: absolute;
    background: rgba(31, 41, 55, 0.95);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    white-space: nowrap;
}

.typography-article .pie-tooltip.visible {
    opacity: 1;
}

/* ============================================================
   SITADA Charts
   ============================================================ */

/* Shared tooltip (appended to body) */

.sitada-tooltip {
    position: fixed;
    background: rgba(31, 41, 55, 0.95);
    color: white;
    padding: 0.4rem 0.7rem;
    border-radius: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 9999;
    white-space: nowrap;
}

.sitada-tooltip.visible {
    opacity: 1;
}

/* Chart container */

.typography-article .sitada-chart-container {
    margin: 2rem 0;
    padding: 1.25rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

.typography-article .sitada-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pie chart */

.typography-article .sitada-pie-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
}

.typography-article .sitada-pie-svg-wrap {
    width: 340px;
    height: 340px;
    flex-shrink: 0;
}

.typography-article .sitada-pie-svg-wrap svg {
    width: 100%;
    height: 100%;
}

/* Legend (shared for pie) */

.typography-article .sitada-legend {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.typography-article .sitada-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: #374151;
}

.typography-article .sitada-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.typography-article .sitada-legend-text {
    flex: 1;
}

.typography-article .sitada-legend-val {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

/* Stacked bar chart */

.typography-article .sitada-stacked-svg {
    min-width: 580px;
    height: auto;
}

/* Area chart */

.typography-article .sitada-area-svg {
    min-width: 580px;
    height: auto;
}

/* Stacked bar / line legend (inline) */

.typography-article .sitada-stack-legend,
.typography-article .sitada-line-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #4b5563;
}

.typography-article .sitada-stack-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Horizontal bar chart */

.typography-article .sitada-hbar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.typography-article .sitada-hbar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.typography-article .sitada-hbar-label {
    width: 180px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: #374151;
    text-align: right;
}

.typography-article .sitada-hbar-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 22px;
}

.typography-article .sitada-hbar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    cursor: pointer;
}

.typography-article .sitada-hbar-fill:hover {
    opacity: 0.8;
}

.typography-article .sitada-hbar-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

/* Canton profile chart */

.typography-article .sitada-canton-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.typography-article .sitada-canton-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.typography-article .sitada-canton-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Inter', sans-serif;
}

.typography-article .sitada-canton-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.typography-article .sitada-canton-total {
    font-size: 0.8125rem;
    color: #6b7280;
}

.typography-article .sitada-canton-bars {
    display: flex;
    gap: 2px;
    height: 24px;
    border-radius: 3px;
    overflow: hidden;
}

.typography-article .sitada-canton-bar-fill {
    height: 100%;
    cursor: pointer;
    transition: opacity 0.15s;
}

.typography-article .sitada-canton-bar-fill:hover {
    opacity: 0.75;
}

/* Line chart */

.typography-article .sitada-line-svg {
    min-width: 580px;
    height: auto;
}

/* Responsive */

@media (max-width: 640px) {
    .typography-article .sitada-stacked-svg,
    .typography-article .sitada-line-svg,
    .typography-article .sitada-area-svg {
        min-width: 0;
        width: 100%;
    }

    .typography-article .sitada-hbar-label {
        width: 120px;
        font-size: 0.75rem;
    }

    .typography-article .sitada-pie-svg-wrap {
        width: 280px;
        height: 280px;
    }

    .typography-article .sitada-legend {
        min-width: 160px;
    }
}

/* Amber theme for aside.standard - warnings, early stages, caution */

.typography-article aside.standard.amber {
    background-color: #fffbeb; /* amber-50 */
    border-left-color: #d97706; /* amber-600 */
}

.typography-article aside.standard.amber h3,
.typography-article aside.standard.amber h4,
.typography-article aside.standard.amber h5 {
    color: #92400e; /* amber-800 */
}

.typography-article aside.standard.amber p {
    color: #333333;
}

.typography-article aside.standard.amber li {
    color: #333333;
}

.typography-article aside.standard.amber li::before {
    color: #d97706; /* amber-600 */
}

/* Green theme for aside.standard - growth, mid stages, positive */

.typography-article aside.standard.green {
    background-color: #f0fdf4; /* green-50 */
    border-left-color: #16a34a; /* green-600 */
}

.typography-article aside.standard.green h3,
.typography-article aside.standard.green h4,
.typography-article aside.standard.green h5 {
    color: #166534; /* green-800 */
}

.typography-article aside.standard.green p {
    color: #333333;
}

.typography-article aside.standard.green li {
    color: #333333;
}

.typography-article aside.standard.green li::before {
    color: #16a34a; /* green-600 */
}

.typography-article aside.standard.green .aside-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #16a34a;
    color: white;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s;
}

.typography-article aside.standard.green .aside-button:hover {
    background-color: #15803d;
}

/* Icons inside aside headings */

.typography-article aside.standard h3 i,
.typography-article aside.standard h3 svg,
.typography-article aside.standard h4 i,
.typography-article aside.standard h4 svg,
.typography-article aside.standard h5 i,
.typography-article aside.standard h5 svg {
    margin-right: 0.75rem;
    color: inherit;
}

.typography-article aside.standard h3 svg,
.typography-article aside.standard h4 svg,
.typography-article aside.standard h5 svg {
    width: 1.5rem;
    height: 1.5rem;
    display: inline;
    vertical-align: middle;
}

/* Special list items with custom icons (no auto-arrow) */

.typography-article aside.standard li.special::before {
    content: none;
}

.typography-article aside.standard li.special {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.typography-article aside.standard li.special i {
    font-size: 1.25rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.375rem;
}

/* Quote boxes - aside.quote (only within typography-article) */

.typography-article aside.quote {
    border-radius: 1rem; /* rounded-2xl */
    padding: 2rem; /* p-8 */
    margin-top: 3rem; /* my-12 */
    margin-bottom: 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    font-family: Inter, sans-serif;
}

/* Thin dark gray border on the default (white) quote asides */

.typography-article aside.quote:not(.green):not(.blue):not(.gray) {
    border: 1px solid #4b5563; /* gray-600 */
}

.typography-article aside.quote p:first-child {
    font-family: Inter, sans-serif; /* Override typography-article */
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.75rem; /* mb-3 */
    line-height: 1.4; /* Tighter line spacing */
}

.typography-article aside.quote p:last-child {
    font-family: Inter, sans-serif; /* Override typography-article */
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 0;
}

/* Green theme for aside.quote */

.typography-article aside.quote.green {
    background-color: #1a582e; /* bg-forest-dark */
    color: white;
}

.typography-article aside.quote.green p:first-child {
    color: white; /* Ensure quote text is white */
}

.typography-article aside.quote.green p:last-child {
    color: #90d89a; /* Brighter green */
}

/* Blue theme for aside.quote */

.typography-article aside.quote.blue {
    background-color: #1e3a5f; /* Deep blue */
    color: white;
}

.typography-article aside.quote.blue p:first-child {
    color: white;
}

.typography-article aside.quote.blue p:last-child {
    color: #7dd3fc; /* Light sky blue */
}

/* Gray theme for aside.quote */

.typography-article aside.quote.gray {
    background-color: #374151;
    color: white;
}

.typography-article aside.quote.gray p:first-child {
    color: white;
}

.typography-article aside.quote.gray p:last-child {
    color: #d1d5db;
}

/* Crosslink callouts - aside.crosslink (only within typography-article) */

.typography-article aside.crosslink {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: center;
    background-color: #fafaf9;
    border: 2px solid #3c8d4f;
    border-radius: 0.75rem;
    padding: 2rem 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    font-family: Inter, sans-serif;
}

.typography-article aside.crosslink i,
.typography-article aside.crosslink svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 3px solid #3c8d4f;
    border-radius: 50%;
    color: #3c8d4f;
    font-size: 2.25rem;
    flex-shrink: 0;
}

.typography-article aside.crosslink svg {
    width: 5rem;
    height: 5rem;
    padding: 1rem;
    box-sizing: border-box;
}

.typography-article aside.crosslink > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.typography-article aside.crosslink h4 {
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a582e;
    margin: 0 !important;
    padding: 0;
}

.typography-article aside.crosslink p {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #555555;
    margin: 0 !important;
    padding: 0;
}

.typography-article aside.crosslink a {
    color: #3c8d4f;
    font-weight: 600;
    text-decoration: underline;
}

.typography-article aside.crosslink a:hover {
    color: #1a582e;
}

/* Decorative divider with icon - div.divider-tree (only within typography-article) */

.typography-article .divider-tree {
    display: flex;
    align-items: center;
    margin: 6rem 0;
}

.typography-article .divider-tree::before,
.typography-article .divider-tree::after {
    content: "";
    flex-grow: 1;
    border-top: 4px solid #3c8d4f; /* forest-primary */
}

.typography-article .divider-tree i,
.typography-article .divider-tree svg {
    font-size: 4rem;
    color: #3c8d4f; /* forest-primary */
    margin: 0 2rem;
}

/* Boxed callouts - aside.boxed (only within typography-article) */

.typography-article aside.boxed {
    border: 2px solid;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 2rem 2.5rem 2.5rem 2.5rem;
    margin-top: 3rem; /* my-12 */
    margin-bottom: 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    font-family: Inter, sans-serif;
}

.typography-article aside.boxed h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem; /* mb-6 */
}

.typography-article aside.boxed h4 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.typography-article aside.boxed h5 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Gray theme for aside.boxed */

.typography-article aside.boxed.gray {
    background-color: white; /* bg-white */
    border-color: #d4d4d4; /* border-neutral-300 */
}

.typography-article aside.boxed.gray h3,
.typography-article aside.boxed.gray h4,
.typography-article aside.boxed.gray h5 {
    color: #171717; /* text-neutral-900 */
}

/* Green-blue theme for aside.boxed */

.typography-article aside.boxed.green-blue {
    background: linear-gradient(to right, rgba(112, 190, 121, 0.3), rgba(42, 107, 122, 0.2)); /* gradient from forest-light to forest-teal */
    border-color: #3c8d4f; /* forest-primary */
}

.typography-article aside.boxed.green-blue h3,
.typography-article aside.boxed.green-blue h4,
.typography-article aside.boxed.green-blue h5 {
    color: #1a582e; /* text-forest-dark */
}

.typography-article aside.boxed.green-blue p {
    color: #333333; /* text-neutral-text */
}

/* Blue theme for aside.boxed */

.typography-article aside.boxed.blue {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15), rgba(42, 107, 122, 0.15));
    border-color: #2563eb; /* blue-600 */
}

.typography-article aside.boxed.blue h3,
.typography-article aside.boxed.blue h4,
.typography-article aside.boxed.blue h5 {
    color: #1e40af; /* blue-800 */
}

.typography-article aside.boxed.blue p {
    color: #333333; /* text-neutral-text */
}

/* =============================================================================
   TABLE STYLES
   Standard table formats for use within typography-article sections.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Data Tables (table.data)
   For displaying structured data with headers - timelines, statistics, etc.
   ----------------------------------------------------------------------------- */

.typography-article table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.typography-article table.data caption {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    text-align: left;
    padding: 1.5rem 1.5rem 1rem;
    background-color: #fafaf9; /* neutral-light */
    border-bottom: 2px solid #1a582e;
}

.typography-article table.data thead {
    background-color: #f5f5f4; /* neutral-100 */
}

.typography-article table.data th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #1a582e; /* forest-dark */
    border-bottom: 2px solid #1a582e;
}

.typography-article table.data td {
    padding: 1rem 1.25rem;
    color: #333333; /* neutral-text */
    border-bottom: 1px solid #e5e5e5; /* neutral-200 */
    vertical-align: top;
}

.typography-article table.data tbody tr:last-child td {
    border-bottom: none;
}

.typography-article table.data tbody tr:hover {
    background-color: #fafaf9; /* neutral-light */
}

/* First column emphasis */

.typography-article table.data td:first-child {
    font-weight: 600;
    color: #1a582e; /* forest-dark */
}

/* Responsive wrapper for horizontal scroll */

.typography-article .table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.typography-article .table-wrapper table.data {
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Comparison Tables (table.comparison)
   For side-by-side comparisons with good/bad or A/B columns.
   ----------------------------------------------------------------------------- */

.typography-article table.comparison {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    background-color: #fafaf9; /* neutral-light */
    border-radius: 0.5rem;
    overflow: hidden;
}

.typography-article table.comparison caption {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    text-align: left;
    padding: 1.5rem 1.5rem 1rem;
}

.typography-article table.comparison thead th {
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 2px solid #d4d4d4; /* neutral-300 */
}

/* Row header (category/aspect name) */

.typography-article table.comparison thead th:first-child {
    text-align: left;
    color: #525252; /* neutral-text */
    width: 20%;
}

/* Column headers for comparison sides */

.typography-article table.comparison thead th.positive {
    text-align: left;
    color: #166534; /* green-800 */
    background-color: rgba(60, 141, 79, 0.1); /* forest-primary 10% */
    border-left: 1px solid #d4d4d4;
}

.typography-article table.comparison thead th.negative {
    text-align: left;
    color: #991b1b; /* red-800 */
    background-color: rgba(220, 38, 38, 0.1); /* red-600 10% */
    border-left: 1px solid #d4d4d4;
}

.typography-article table.comparison thead th.neutral {
    text-align: left;
    color: #525252; /* neutral-text */
    background-color: rgba(82, 82, 82, 0.1);
    border-left: 1px solid #d4d4d4;
}

.typography-article table.comparison tbody tr {
    border-bottom: 1px solid #d4d4d4; /* neutral-300 */
}

.typography-article table.comparison tbody tr:last-child {
    border-bottom: none;
}

/* Base cell styling */

.typography-article table.comparison td {
    padding: 0.75rem 1.25rem;
    vertical-align: top;
    line-height: 1.6;
}

/* Row category label */

.typography-article table.comparison td:first-child {
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    color: #1a582e; /* forest-dark */
    font-size: 1.125rem;
    vertical-align: top;
    background-color: white;
}

/* Comparison cells */

.typography-article table.comparison td.positive,
.typography-article table.comparison td.negative,
.typography-article table.comparison td.neutral {
    padding: 0.75rem 1.25rem;
    vertical-align: top;
    line-height: 1.6;
    border-left: 1px solid #d4d4d4;
}

.typography-article table.comparison td.positive {
    background-color: rgba(60, 141, 79, 0.05);
}

.typography-article table.comparison td.negative {
    background-color: rgba(220, 38, 38, 0.05);
}

.typography-article table.comparison td.neutral {
    background-color: rgba(82, 82, 82, 0.05);
}

/* Strong text within comparison cells */

.typography-article table.comparison td strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* -----------------------------------------------------------------------------
   Reference Tables (table.reference)
   For simple key-value pairs - codes, definitions, quick lookups.
   ----------------------------------------------------------------------------- */

.typography-article table.reference {
    width: auto;
    border-collapse: collapse;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
}

.typography-article table.reference caption {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a582e; /* forest-dark */
    text-align: left;
    padding-bottom: 0.75rem;
}

.typography-article table.reference td {
    padding: 0.5rem 1rem 0.5rem 0;
    vertical-align: top;
}

.typography-article table.reference td:first-child {
    font-weight: 600;
    color: #1a582e; /* forest-dark */
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}

.typography-article table.reference td:last-child {
    color: #333333; /* neutral-text */
}

/* =============================================================================
   ICON LISTS
   Styled lists with icons or numbered badges for use within typography-article.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Numbered List (ol.numbered-list)
   Sequential steps or criteria with circular number badges.
   ----------------------------------------------------------------------------- */

.typography-article ol.numbered-list {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    counter-reset: numbered-list;
}

.typography-article ol.numbered-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #333333;
}

.typography-article ol.numbered-list li:last-child {
    margin-bottom: 0;
}

.typography-article ol.numbered-list li::before {
    counter-increment: numbered-list;
    content: counter(numbered-list);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #3c8d4f; /* forest-primary */
    color: white;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typography-article ol.numbered-list li strong {
    color: #1a582e; /* forest-dark */
}

/* -----------------------------------------------------------------------------
   Icon List (ul.icon-list)
   Bullet points with FontAwesome icons. Apply theme class for colors.
   ----------------------------------------------------------------------------- */

.typography-article ul.icon-list {
    list-style: none;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
}

.typography-article ul.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #333333;
}

.typography-article ul.icon-list li:last-child {
    margin-bottom: 0;
}

/* FontAwesome replaces <i> with <svg>, so target both */

.typography-article ul.icon-list li i,
.typography-article ul.icon-list li svg {
    flex-shrink: 0;
    margin-top: 0.25rem;
    font-size: 1.25rem;
}

.typography-article ul.icon-list li svg {
    width: 1.25rem;
    height: 1.25rem;
}

.typography-article ul.icon-list li strong {
    color: #1a582e; /* forest-dark */
}

/* Green theme - success, positive points, recommendations */

.typography-article ul.icon-list.green {
    background-color: #dcfce7; /* green-100 */
}

.typography-article ul.icon-list.green li i,
.typography-article ul.icon-list.green li svg {
    color: #16a34a; /* green-600 */
}

/* Blue theme - information, legal arguments */

.typography-article ul.icon-list.blue {
    background-color: #eff6ff; /* blue-50 */
}

.typography-article ul.icon-list.blue li i,
.typography-article ul.icon-list.blue li svg {
    color: #2563eb; /* blue-600 */
}

/* Red theme - warnings, problems */

.typography-article ul.icon-list.red {
    background-color: #fef2f2; /* red-50 */
}

.typography-article ul.icon-list.red li i,
.typography-article ul.icon-list.red li svg {
    color: #dc2626; /* red-600 */
}

/* Neutral theme - general information */

.typography-article ul.icon-list.neutral {
    background-color: #fafaf9; /* neutral-light */
}

.typography-article ul.icon-list.neutral li i,
.typography-article ul.icon-list.neutral li svg {
    color: #1a582e; /* forest-dark */
}

/* Icon lists inside asides - remove background since aside provides it */

.typography-article aside ul.icon-list,
.typography-article aside ul.icon-list.green,
.typography-article aside ul.icon-list.blue,
.typography-article aside ul.icon-list.red,
.typography-article aside ul.icon-list.neutral {
    background-color: transparent;
    padding: 0;
    margin: 1rem 0 0 0;
}

/* Remove default arrow for icon-list items inside aside (they have icons) */

.typography-article aside.standard ul.icon-list li::before {
    content: none;
}

/* Icon colors inherit from aside theme - override any icon-list theme */

/* FontAwesome replaces <i> with <svg>, so we need to target both */

.typography-article aside.standard.green-blue ul.icon-list li i,
.typography-article aside.standard.green-blue ul.icon-list li svg,
.typography-article aside.standard.green-blue ul.icon-list.neutral li i,
.typography-article aside.standard.green-blue ul.icon-list.neutral li svg {
    color: #3c8d4f; /* forest-primary */
}

.typography-article aside.standard.red ul.icon-list li i,
.typography-article aside.standard.red ul.icon-list li svg,
.typography-article aside.standard.red ul.icon-list.neutral li i,
.typography-article aside.standard.red ul.icon-list.neutral li svg {
    color: #dc2626; /* red-600 */
}

/* TOC Sidebar positioning */

#toc-sidebar {
    display: none;
}

body.page-article .typography-toc {
    display: none;
}

@media (min-width: 1024px) {
    /* Old article mode - only apply sticky positioning if NOT using new page-article mode */
    body:not(.page-article) #toc-sidebar {
        display: block;
        position: sticky;
        top: 2rem; /* lg:top-8 */
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    /* New article mode - typography-toc section, let JavaScript handle positioning */
    body.page-article .typography-toc {
        display: block;
        /* JavaScript will set position, left, top, width dynamically */
        background: white;
        border: 2px solid #3c8d4f; /* forest-primary */
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        overflow-y: auto;
    }
}

/* Navigation scroll effect */

.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: #e5e7eb !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Dark mode support for nav scroll effect */

.dark .nav-scrolled {
    background-color: rgba(17, 24, 39, 0.85) !important;
    border-bottom-color: #374151 !important;
}

.toc-link {
    display: block;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s, font-weight 0.2s;
    line-height: 1.3;
}

.toc-link:hover {
    color: #1F4D36;
}

.toc-link.current {
    font-weight: bold;
    color: #1F4D36;
}

.toc-h3-link.toc-h3-current::before {
    content: '\203a';
    margin-right: 0.25rem;
    font-weight: bold;
}

/* Custom minimal scrollbar for TOC - subtle but visible */

aside .lg\:overflow-y-auto,
aside [class*="overflow-y-auto"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(209, 213, 219, 0.3) transparent;
    transition: scrollbar-color 0.2s;
}

aside:hover .lg\:overflow-y-auto,
aside:hover [class*="overflow-y-auto"] {
    scrollbar-color: rgba(107, 114, 128, 0.7) transparent;
}

aside .lg\:overflow-y-auto::-webkit-scrollbar,
aside [class*="overflow-y-auto"]::-webkit-scrollbar {
    width: 5px;
}

aside .lg\:overflow-y-auto::-webkit-scrollbar-track,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-track {
    background: transparent;
}

aside .lg\:overflow-y-auto::-webkit-scrollbar-thumb,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
    background-color: rgba(209, 213, 219, 0.3);
    border-radius: 2px;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

aside:hover .lg\:overflow-y-auto::-webkit-scrollbar-thumb,
aside:hover [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.7);
}

aside .lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.9) !important;
}

@keyframes highlight {
    0% {
        background-color: rgba(255, 255, 0, 0);
    }
    50% {
        background-color: rgba(255, 255, 0, 0.3);
    }
    100% {
        background-color: rgba(255, 255, 0, 0);
    }
}

.ripple-effect {
    position: relative;
    animation: highlight 2s ease-out;
}

/* compensate for navbar */

h1, h2, h3 {
    scroll-margin-top: 120px;
}

/* Simple Hero Slideshow */

.slideshow-dot.active {
    opacity: 1;
}

.slideshow-progress-bar {
    transform-origin: left;
}

/* Navigation theme variants */

#hero-slideshow.nav-theme-light .slideshow-dot {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
}

#hero-slideshow.nav-theme-light .slideshow-dot:hover,
#hero-slideshow.nav-theme-light .slideshow-dot.active {
    background-color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

#hero-slideshow.nav-theme-light #slideshow-prev,
#hero-slideshow.nav-theme-light #slideshow-next {
    opacity: 0.8 !important;
}

#hero-slideshow.nav-theme-light #slideshow-prev:hover,
#hero-slideshow.nav-theme-light #slideshow-next:hover {
    opacity: 1 !important;
}

#hero-slideshow.nav-theme-light #slideshow-prev span,
#hero-slideshow.nav-theme-light #slideshow-next span {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
}

#hero-slideshow.nav-theme-light #slideshow-prev:hover span,
#hero-slideshow.nav-theme-light #slideshow-next:hover span {
    background-color: rgba(255, 255, 255, 1) !important;
}

#hero-slideshow.nav-theme-dark .slideshow-dot {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

#hero-slideshow.nav-theme-dark .slideshow-dot:hover,
#hero-slideshow.nav-theme-dark .slideshow-dot.active {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

#hero-slideshow.nav-theme-dark #slideshow-prev,
#hero-slideshow.nav-theme-dark #slideshow-next {
    opacity: 0.8 !important;
}

#hero-slideshow.nav-theme-dark #slideshow-prev:hover,
#hero-slideshow.nav-theme-dark #slideshow-next:hover {
    opacity: 1 !important;
}

#hero-slideshow.nav-theme-dark #slideshow-prev span,
#hero-slideshow.nav-theme-dark #slideshow-next span {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

#hero-slideshow.nav-theme-dark #slideshow-prev:hover span,
#hero-slideshow.nav-theme-dark #slideshow-next:hover span {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Audio button pulse animation */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Mobile responsive navigation */

@media (max-width: 640px) {
    /* Hide audio controls on mobile */
    .hero-audio-controls {
        display: none !important;
    }
}

/* Navigation arrows at bottom for all screen sizes */

button#slideshow-prev,
button#slideshow-next {
    position: absolute !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease !important;
    bottom: 8px !important;
    height: 48px !important;
    width: 48px !important;
    padding: 4px !important;
}

button#slideshow-prev:hover,
button#slideshow-next:hover {
    opacity: 1 !important;
}

button#slideshow-prev {
    left: 8px !important;
}

button#slideshow-next {
    right: 8px !important;
}

button#slideshow-prev span.inline-flex,
button#slideshow-next span.inline-flex {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    transition: background-color 0.3s ease !important;
}

button#slideshow-prev:hover span.inline-flex,
button#slideshow-next:hover span.inline-flex {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 768px) {
    /* Make dots more visible on mobile */
    .slideshow-dot {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Adaptive headline width based on screen size */

@media (min-width: 769px) and (max-width: 1200px) {
    #hero-slideshow h1 {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    #hero-slideshow h1 {
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1601px) {
    #hero-slideshow h1 {
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Viewport height responsive scaling */

@media (max-height: 800px) {
    #hero-slideshow h1 {
        font-size: 3.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Scale ALL images in hero slideshow */
    #hero-slideshow img {
        width: 16rem !important;
        height: 16rem !important;
        margin-bottom: 2rem !important;
    }

    /* Scale emoji icons */
    #hero-slideshow .text-8xl {
        font-size: 4rem !important;
        margin-bottom: 1.5rem !important;
    }

    #hero-slideshow p {
        font-size: 1.125rem !important;
        margin-bottom: 2rem !important;
    }

    #hero-slideshow .max-w-7xl {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

@media (max-height: 700px) {
    #hero-slideshow h1 {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
    }

    /* Scale ALL images in hero slideshow */
    #hero-slideshow img {
        width: 14rem !important;
        height: 14rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Scale emoji icons */
    #hero-slideshow .text-8xl {
        font-size: 3.5rem !important;
        margin-bottom: 1rem !important;
    }

    #hero-slideshow p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    #hero-slideshow .max-w-7xl {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

@media (max-height: 600px) {
    #hero-slideshow h1 {
        font-size: 2.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Scale ALL images in hero slideshow */
    #hero-slideshow img {
        width: 12rem !important;
        height: 12rem !important;
        margin-bottom: 1rem !important;
    }

    /* Scale emoji icons */
    #hero-slideshow .text-8xl {
        font-size: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    #hero-slideshow p {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    #hero-slideshow .max-w-7xl {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #hero-slideshow .flex.gap-6 {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    #hero-slideshow button,
    #hero-slideshow a {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* Drop cap styling */

.drop-cap::first-letter {
    float: left;
    font-size: 3.75rem;
    line-height: 3rem;
    font-weight: 700;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
}

/* Read to Me - highlight currently reading paragraph */

.rtm-reading {
    background-color: rgba(135, 207, 235, 0.15);
    border-left: 4px solid #1F4D36;
    padding-left: 1rem;
    transition: background-color 0.3s ease, border-left 0.3s ease, padding-left 0.3s ease;
}

/* Read to Me - elegant speed slider styling */

#rtm-speed {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
}

#rtm-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1F4D36;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#rtm-speed::-webkit-slider-thumb:hover {
    background: #2D6B4D;
    transform: scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#rtm-speed::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1F4D36;
    cursor: pointer;
    border: none;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#rtm-speed::-moz-range-thumb:hover {
    background: #2D6B4D;
    transform: scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#rtm-speed::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, #B8D4C8 0%, #1F4D36 50%, #B8D4C8 100%);
    border-radius: 4px;
}

#rtm-speed::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, #B8D4C8 0%, #1F4D36 50%, #B8D4C8 100%);
    border-radius: 4px;
}

/* Mobile species browser bounce animation */

@keyframes bounce-x {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* Sidebar positioning - always sticky, no scrollbar */

.sidebar-position {
    position: sticky;
    top: calc(var(--nav-height, 4rem) + 1rem);
    align-self: start;
}

/* Sidebar content container */

.sidebar-scroll-container {
    max-height: none;
    overflow-y: visible;
}

/* Sidebar section - accordion body hidden when collapsed */

.sidebar-section.collapsed .accordion-body {
    display: none;
}

/* Sidebar section - accordion body visible when expanded */

.sidebar-section.expanded .accordion-body {
    display: inline;
}

/* Interactive accordion headers are clickable */

.accordion-interactive .accordion-header {
    cursor: pointer;
}

.accordion-interactive .accordion-header:hover {
    text-decoration: underline;
}

/* Container queries for responsive article cards */

.manifest-section {
    container-type: inline-size;
    container-name: manifest;
}

/* Card grid: 1 column on mobile, 2 columns on small screens and up */

.manifest-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .manifest-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* When container is wide enough (>900px), show 3 columns */

@container manifest (min-width: 900px) {
    .manifest-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Article badges - bold design */

.article-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    padding: 0.25rem 0.5rem; /* 4px 8px */
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    line-height: 1;
    border-radius: 0; /* sharp corners */
    white-space: nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem; /* 8px spacing below badge */
    border: 1px solid currentColor;
}

/* Badge themes */

.article-badge.ecotourism {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* emerald gradient */
    color: #ffffff;
}

.article-badge.ecotourism:hover {
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
}

.article-badge.science {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); /* blue gradient */
    color: #ffffff;
}

.article-badge.science:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

.article-badge.policy {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); /* purple gradient */
    color: #ffffff;
}

.article-badge.policy:hover {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
}

.article-badge.take-action {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* amber gradient */
    color: #ffffff;
}

.article-badge.take-action:hover {
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

.article-badge.legal {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%); /* slate gradient */
    color: #ffffff;
}

.article-badge.legal:hover {
    box-shadow: 0 6px 16px rgba(100, 116, 139, 0.5);
    transform: translateY(-2px);
}

.article-badge.biodiversity {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); /* teal gradient */
    color: #ffffff;
}

.article-badge.biodiversity:hover {
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.5);
    transform: translateY(-2px);
}

.article-badge.history {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%); /* amber-brown gradient */
    color: #ffffff;
}

.article-badge.history:hover {
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.5);
    transform: translateY(-2px);
}

.article-badge.data {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); /* cyan gradient */
    color: #ffffff;
}

.article-badge.data:hover {
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.5);
    transform: translateY(-2px);
}

.article-badge.ecology {
    background: linear-gradient(135deg, #65a30d 0%, #4d7c0f 100%); /* lime gradient */
    color: #ffffff;
}

.article-badge.ecology:hover {
    box-shadow: 0 6px 16px rgba(101, 163, 13, 0.5);
    transform: translateY(-2px);
}

.article-badge.guide {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); /* orange gradient */
    color: #ffffff;
}

.article-badge.guide:hover {
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.5);
    transform: translateY(-2px);
}

.article-badge.investigation {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); /* rose gradient */
    color: #ffffff;
}

.article-badge.investigation:hover {
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.5);
    transform: translateY(-2px);
}

/* Badge icon */

.article-badge i {
    font-size: 0.75rem; /* 12px */
}

/* Fun bounce animation for TOC when pushed by footer */

@keyframes tocBounce {
    0% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.05) rotate(-2deg);
    }
    30% {
        transform: scale(0.98) rotate(1deg);
    }
    45% {
        transform: scale(1.03) rotate(-1deg);
    }
    60% {
        transform: scale(0.99) rotate(0.5deg);
    }
    75% {
        transform: scale(1.01) rotate(-0.3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ========================================
   BOLD DESIGN SYSTEM
   Sharp corners, bold borders, color inversion hovers
   ======================================== */

/* Bold card base - use with Tailwind utilities */

.card-bold {
    border-radius: 0;
    border: 1px solid #1a582e; /* forest-dark */
    box-shadow: none;
    transition: all 0.2s ease;
}

.card-bold:hover {
    background-color: #1a582e;
}

.card-bold:hover .card-title,
.card-bold:hover .card-summary {
    color: white;
}

/* Bold button base */

.btn-bold {
    border-radius: 0;
    border: 1px solid #1a582e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.btn-bold-primary {
    background-color: #1a582e;
    color: white;
}

.btn-bold-primary:hover {
    background-color: #2a6b7a; /* forest-teal */
    border-color: #2a6b7a;
}

/* Stat card for sidebar */

.stat-card {
    border-radius: 0;
    border: 1px solid;
    padding: 0.75rem;
    text-align: center;
}

.stat-card .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   TAXONOMY BROWSER
   D3.js radial tree visualization
   ======================================== */

/* Page-level styles for taxonomy browser */

.page-taxonomy-browser {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hero hidden for taxonomy browser - full viewport canvas */

.taxonomy-hero {
    display: none;
}

/* Full-screen browser section */

.taxonomy-browser-section {
    display: flex;
    flex-direction: column;
    position: relative;
}

#taxonomy-browser {
    height: calc(100vh - 64px);
    min-height: 400px;
    background: linear-gradient(135deg, #f8faf8 0%, #e8f5e9 100%);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    #taxonomy-browser {
        height: calc(100vh - 64px);
        min-height: 500px;
    }
}

/* Sidebar panel with instructions and legend */

.taxonomy-sidebar {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: white;
    border: 2px solid var(--forest-primary);
    border-radius: 0.5rem;
    padding: 1rem 2.5rem 1rem 1rem;
    max-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
    font-family: var(--font-inter);
}

.taxonomy-sidebar.hidden {
    display: none;
}

.taxonomy-sidebar-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.taxonomy-sidebar-close:hover {
    background: #f3f4f6;
    color: var(--forest-dark);
}

.taxonomy-sidebar-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.taxonomy-sidebar-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.taxonomy-sidebar-section h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--forest-dark);
    margin: 0 0 0.75rem 0;
}

.taxonomy-sidebar-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.taxonomy-sidebar-section li {
    font-size: 0.8rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.taxonomy-sidebar-section li:last-child {
    margin-bottom: 0;
}

.taxonomy-sidebar-section li strong {
    color: var(--forest-dark);
}

.taxonomy-sidebar-note p {
    font-size: 0.75rem;
    font-style: italic;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

.taxonomy-sidebar-note a {
    color: var(--forest-primary);
    text-decoration: underline;
}

.taxonomy-sidebar-note a:hover {
    color: var(--forest-dark);
}

/* Sidebar collapsed state */

.taxonomy-sidebar.collapsed {
    display: none;
}

/* Sidebar toggle button (visible when sidebar is collapsed) */

.taxonomy-sidebar-toggle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 44px;
    height: 44px;
    background: var(--forest-primary);
    border: 2px solid var(--forest-dark);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 21;
    transition: all 0.2s ease;
}

.taxonomy-sidebar-toggle:hover {
    background: var(--forest-dark);
    transform: scale(1.1);
}

.taxonomy-sidebar-toggle.hidden {
    display: none;
}

/* Search section */

.taxonomy-search-section {
    padding-bottom: 0.75rem !important;
}

.taxonomy-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#taxonomy-search-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-family: var(--font-inter);
    color: #374151;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#taxonomy-search-input:focus {
    outline: none;
    border-color: var(--forest-primary);
    box-shadow: 0 0 0 3px rgba(60, 141, 79, 0.15);
}

#taxonomy-search-input::-moz-placeholder {
    color: #9ca3af;
}

#taxonomy-search-input::placeholder {
    color: #9ca3af;
}

.taxonomy-search-clear {
    position: absolute;
    right: 0.375rem;
    width: 20px;
    height: 20px;
    border: none;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.taxonomy-search-clear:hover {
    background: #d1d5db;
    color: #374151;
}

.taxonomy-search-results-count {
    margin-top: 0.375rem;
    font-size: 0.7rem;
    color: #6b7280;
    min-height: 1em;
}

.taxonomy-search-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
}

.taxonomy-search-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--forest-primary);
    cursor: pointer;
}

@media (max-width: 767px) {
    .taxonomy-sidebar {
        max-width: 180px;
        padding: 0.75rem 2rem 0.75rem 0.75rem;
    }

    .taxonomy-sidebar-section h3 {
        font-size: 0.8rem;
    }

    .taxonomy-sidebar-section li {
        font-size: 0.75rem;
    }
}

.taxonomy-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: var(--forest-dark);
}

.taxonomy-svg {
    display: block;
    cursor: grab;
}

.taxonomy-svg:active {
    cursor: grabbing;
}

/* Links (tree branches) */

.taxonomy-link {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 1.5px;
    stroke-opacity: 0.6;
}

/* Node styling by type */

.taxonomy-node circle {
    stroke: white;
    stroke-width: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.taxonomy-node-root circle {
    fill: var(--forest-dark);
    stroke-width: 3px;
}

.taxonomy-node-order circle {
    fill: #2563eb;
}

.taxonomy-node-family circle {
    fill: #7c3aed;
}

.taxonomy-node-subfamily circle {
    fill: #db2777;
}

.taxonomy-node-genus circle {
    fill: #ea580c;
}

.taxonomy-node-species circle {
    fill: var(--forest-primary);
    cursor: pointer;
}

.taxonomy-node-species:hover circle {
    fill: #22c55e;
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
}

/* Labels */

.taxonomy-label {
    font-family: var(--font-inter);
    font-size: 11px;
    fill: #374151;
    pointer-events: none;
}

.taxonomy-label-bg {
    stroke: white;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.taxonomy-label-root {
    font-size: 14px;
    font-weight: 700;
    fill: var(--forest-dark);
}

.taxonomy-label-order {
    font-size: 12px;
    font-weight: 600;
    fill: #1e40af;
}

.taxonomy-label-family {
    font-size: 11px;
    font-weight: 600;
    fill: #5b21b6;
}

.taxonomy-label-subfamily {
    font-size: 10px;
    fill: #9d174d;
}

.taxonomy-label-genus {
    font-size: 10px;
    fill: #9a3412;
}

.taxonomy-label-species {
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    fill: var(--forest-dark);
}

/* Collapsed nodes */

.taxonomy-node-collapsed circle {
    stroke: var(--forest-dark);
    stroke-width: 3px;
    stroke-dasharray: 3, 2;
}

.taxonomy-node-expandable {
    cursor: pointer;
}

.taxonomy-leaf-count {
    font-family: var(--font-inter);
    font-size: 9px;
    font-weight: 700;
    fill: white;
    pointer-events: none;
}

/* Zoom controls with slider - positioned top left near sidebar */

.taxonomy-zoom-controls {
    position: absolute;
    top: 1rem;
    left: 280px; /* Near but not adjacent to sidebar (240px + gap) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    z-index: 15;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.taxonomy-zoom-btn {
    width: 32px;
    height: 32px;
    border: 2px solid var(--forest-dark);
    background: white;
    color: var(--forest-dark);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.taxonomy-zoom-btn:hover {
    background: var(--forest-dark);
    color: white;
}

.taxonomy-reset-btn {
    margin-top: 0.25rem;
    border-style: dashed;
}

/* X-Y pad for zoom (Y) and pan (X) */

.taxonomy-xy-pad {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #eceeed 0%, #d0d6d4 50%, #b0b8b5 100%);
    border: 2px solid #6b7d78;
    border-radius: 8px;
    position: relative;
    cursor: crosshair;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

.taxonomy-xy-pad::before,
.taxonomy-xy-pad::after {
    content: '';
    position: absolute;
    background: rgba(107, 125, 120, 0.4);
}

/* Vertical center line */

.taxonomy-xy-pad::before {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}

/* Horizontal center line */

.taxonomy-xy-pad::after {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.taxonomy-xy-thumb {
    width: 16px;
    height: 16px;
    background: #1a582e;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 5;
    /* Start centered */
    left: 50%;
    top: 50%;
}

.taxonomy-xy-thumb:active {
    cursor: grabbing;
}

/* Adjust zoom controls position when sidebar is collapsed */

.taxonomy-browser-section:has(.taxonomy-sidebar.collapsed) .taxonomy-zoom-controls {
    left: 60px;
}

/* Graph container with rotation ring */

.taxonomy-graph-container {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
}

/* SVG rotation ring overlay */

.taxonomy-rotation-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

/* The ring shape - stroke creates the band */

.rotation-ring-shape {
    fill: none;
    pointer-events: stroke;
    cursor: ns-resize;
    transition: stroke 0.15s ease;
}

.rotation-ring-shape:hover {
    stroke: transparent !important;
}

.rotation-ring-shape.rotating {
    stroke: transparent !important;
    cursor: grabbing;
}

/* Band outline ellipses */

.rotation-ring-outline {
    fill: none;
    stroke: #b91c1c;
    stroke-width: 0.4;
    pointer-events: none;
    transition: stroke 0.15s ease;
}

.rotation-ring-shape:hover ~ .rotation-ring-outline,
.rotation-ring-shape.rotating ~ .rotation-ring-outline {
    stroke: #ea580c;
}

/* Tick marks radiating from center */

.rotation-ring-ticks line {
    stroke: #b91c1c;
    stroke-width: 1;
    transition: stroke 0.15s ease;
}

.rotation-ring-shape:hover ~ .rotation-ring-ticks line,
.rotation-ring-shape.rotating ~ .rotation-ring-ticks line {
    stroke: #ea580c;
    stroke-width: 1;
}

.rotation-ring-arrows path {
    fill: #a21d1d;
    opacity: 0.25;
    transition: fill 0.15s ease, opacity 0.15s ease;
    pointer-events: none;
}

.rotation-ring-shape:hover ~ .rotation-ring-arrows path,
.rotation-ring-shape.rotating ~ .rotation-ring-arrows path {
    fill: #ea580c;
    opacity: 0.6;
}

/* Ensure taxonomy-browser fills the container */

.taxonomy-graph-container #taxonomy-browser {
    flex: 1;
    min-height: 0;
}

/* Legend - inside sidebar */

.taxonomy-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.taxonomy-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #374151;
}

.taxonomy-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
}

/* Colors matching JS levelColors - site palette */

.taxonomy-legend-dot.root {
    background: #1a582e;
    border-color: #0f3d1e;
}

.taxonomy-legend-dot.order {
    background: #3c8d4f;
    border-color: #2a6638;
}

.taxonomy-legend-dot.family {
    background: #70be79;
    border-color: #4fa058;
}

.taxonomy-legend-dot.subfamily {
    background: #5ab8a8;
    border-color: #3d9688;
}

.taxonomy-legend-dot.genus {
    background: #4a9199;
    border-color: #346a70;
}

.taxonomy-legend-dot.species {
    background: #2a6b7a;
    border-color: #1c4a54;
}

/* Annotation highlights */

.note-highlight {
    background: rgba(255, 237, 120, 0.5);
    border-bottom: 2px solid #f59e0b;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 2px;
}

.note-highlight:hover {
    background: rgba(255, 237, 120, 0.75);
}

.note-highlight--flash {
    animation: highlight-flash 1.5s ease-out;
}

@keyframes highlight-flash {
    0%, 50% { background: rgba(251, 191, 36, 0.6); }
    100% { background: rgba(255, 237, 120, 0.5); }
}

/* Add note trigger button */

.notes-trigger {
    position: absolute;
    width: 28px;
    height: 28px;
    border: none;
    background: #1a582e;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 90;
    transition: background 0.15s ease, transform 0.15s ease;
}

.notes-trigger:hover {
    background: #145024;
    transform: scale(1.1);
}

.notes-trigger.hidden {
    display: none;
}

/* Inline notes popup */

.notes-popup {
    position: absolute;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    z-index: 100;
    font-family: Inter, system-ui, sans-serif;
}

.notes-popup.hidden {
    display: none;
}

.notes-popup__content {
    padding: 1rem;
}

.notes-popup__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transform: rotate(45deg);
    left: calc(50% - 6px);
}

.notes-popup.arrow-bottom .notes-popup__arrow {
    bottom: -7px;
    border-top: none;
    border-left: none;
}

.notes-popup.arrow-top .notes-popup__arrow {
    top: -7px;
    border-bottom: none;
    border-right: none;
}

.notes-popup__quote {
    font-size: 0.85rem;
    font-style: italic;
    color: #1a582e;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.notes-popup__text {
    font-size: 0.95rem;
    color: #1f2937;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.notes-popup__textarea {
    width: 100%;
    min-height: 4.5rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.75rem;
}

.notes-popup__textarea:focus {
    outline: none;
    border-color: #3c8d4f;
    box-shadow: 0 0 0 3px rgba(60, 141, 79, 0.15);
}

.notes-popup__actions {
    display: flex;
    gap: 0.5rem;
}

.notes-popup__btn {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notes-popup__btn:hover {
    background: #f9fafb;
}

.notes-popup__btn--primary {
    background: #1a582e;
    border-color: #1a582e;
    color: #ffffff;
}

.notes-popup__btn--primary:hover {
    background: #145024;
}

.notes-popup__btn--danger {
    color: #dc2626;
    border-color: #fecaca;
}

.notes-popup__btn--danger:hover {
    background: #fef2f2;
}

.notes-popup__form.hidden,
.notes-popup__view.hidden {
    display: none;
}

/* Bottom notes section - inherits from typography-article */

.typography-notes.hidden {
    display: none;
}

.typography-notes #notes-section-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.notes-list-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.notes-list-item:last-child {
    border-bottom: none;
}

.notes-list-item__content {
    flex: 1;
    min-width: 0;
}

.notes-list-item__quote {
    font-style: italic;
    color: #1a582e;
    margin-bottom: 0.5rem;
}

.notes-list-item__text {
    margin-bottom: 0.5rem;
}

.notes-list-item__jump {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3c8d4f;
    cursor: pointer;
}

.notes-list-item__jump:hover {
    color: #1a582e;
    text-decoration: underline;
}

.notes-list-item__delete {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 1.25rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-list-item__delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

@media (max-width: 640px) {
    .notes-popup {
        width: calc(100vw - 24px);
        left: 12px !important;
    }
    .typography-notes {
        padding: 0 1rem;
    }
}

/* ============================================================================
   My Notes Page
   ============================================================================ */

.my-notes-page {
    padding-top: 8rem;
    padding-bottom: 6rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.my-notes-header {
    margin-bottom: 3rem;
}

.my-notes-header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #1a582e;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .my-notes-header h1 {
        font-size: 4rem;
    }
}

.my-notes-subtitle {
    font-family: "Source Serif 4", serif;
    font-size: 1.25rem;
    color: #525252;
    line-height: 1.6;
}

.my-notes-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.my-notes-empty.hidden {
    display: none;
}

.my-notes-empty__icon {
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

.my-notes-empty p {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.my-notes-empty__hint {
    font-size: 0.95rem !important;
    color: #6b7280 !important;
}

/* Notes page export button */

.notes-page-export {
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-end;
}

.notes-page-export__btn {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    background: #1a582e;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notes-page-export__btn:hover {
    background: #145024;
}

/* Notes page cards */

.my-notes-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.notes-page-card {
    display: flex;
    gap: 1.5rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.notes-page-card__thumb {
    flex-shrink: 0;
    width: 160px;
    height: auto;
    min-height: 120px;
}

.notes-page-card__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.notes-page-card__content {
    flex: 1;
    padding: 1.25rem 1.5rem 1.25rem 0;
    min-width: 0;
}

.notes-page-card__title {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.notes-page-card__title a {
    color: #1a582e;
    text-decoration: none;
}

.notes-page-card__title a:hover {
    text-decoration: underline;
}

.notes-page-card__note {
    padding: 0.75rem 0;
    border-top: 1px solid #f3f4f6;
}

.notes-page-card__note:first-of-type {
    border-top: none;
    padding-top: 0;
}

.notes-page-card__quote {
    font-family: "Source Serif 4", serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #1a582e;
    margin-bottom: 0.35rem;
    line-height: 1.5;
}

.notes-page-card__text {
    font-family: "Source Serif 4", serif;
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.notes-page-card__meta {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    color: #9ca3af;
}

@media (max-width: 640px) {
    .notes-page-card {
        flex-direction: column;
    }
    .notes-page-card__thumb {
        width: 100%;
        height: 140px;
    }
    .notes-page-card__content {
        padding: 1rem 1.25rem 1.25rem;
    }
}

/* Note layout: content left, icons right */

.notes-page-card__note {
    display: flex;
    gap: 1rem;
}

.notes-page-card__note-content {
    flex: 1;
    min-width: 0;
}

.notes-page-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.notes-page-card__note:hover .notes-page-card__actions {
    opacity: 1;
}

.notes-page-card__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-page-card__icon-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.notes-page-card__icon-btn--danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Edit mode text buttons */

.notes-page-card__action-btn {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-page-card__action-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.notes-page-card__action-btn--primary {
    background: #3c8d4f;
    border-color: #3c8d4f;
    color: white;
}

.notes-page-card__action-btn--primary:hover {
    background: #1a582e;
    border-color: #1a582e;
}

/* Edit mode styles */

.notes-page-card__edit-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    margin-top: 0.5rem;
}

.notes-page-card__edit-textarea:focus {
    outline: none;
    border-color: #3c8d4f;
    box-shadow: 0 0 0 3px rgba(60, 141, 79, 0.1);
}

.notes-page-card__edit-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* =========================================================================
   Personas Conexiones — relationship graph
   ========================================================================= */

.page-personas-conexiones {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f3f7f4;
}

.conexiones-hero {
    padding: 4.5rem 1.5rem 1.25rem;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
}

.conexiones-hero h1 {
    font-family: var(--font-source-serif), serif;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 700;
    color: #0f3d1e;
    line-height: 1.15;
    margin: 0 0 0.6rem;
}

.conexiones-hero p {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    color: #2a3b30;
    margin: 0;
}

.conexiones-section {
    flex: 1;
    position: relative;
}

#personas-conexiones {
    width: 100%;
    height: calc(100vh - 12rem);
    min-height: 540px;
    background:
        radial-gradient(circle at 30% 25%, rgba(90, 184, 168, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(60, 141, 79, 0.07) 0%, transparent 60%),
        linear-gradient(135deg, #f6faf6 0%, #eaf3eb 100%);
    border-top: 1px solid #d8e4da;
    border-bottom: 1px solid #d8e4da;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .conexiones-hero {
        padding: 3.5rem 1rem 1rem;
    }
    #personas-conexiones {
        height: calc(100vh - 10rem);
        min-height: 460px;
    }
}

.conexiones-hint {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #cfd9d0;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.78rem;
    color: #2a3b30;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    max-width: 18rem;
    z-index: 5;
}

.conexiones-hint strong {
    color: #0f3d1e;
    font-weight: 600;
}

.conexiones-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #1a582e;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.95rem;
}

.conexiones-error {
    padding: 2rem;
    text-align: center;
    color: #8b3a3a;
    font-family: Inter, system-ui, sans-serif;
}

/* Tooltip — appended to body, positioned by JS */

.conexiones-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 22rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #2a6b7a;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #1a1a1a;
    pointer-events: none;
}

.conexiones-tooltip__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f3d1e;
    margin-bottom: 0.25rem;
}

.conexiones-tooltip__article {
    font-weight: 500;
    font-style: italic;
    color: #2a6b7a;
}

/* SVG graph styles (d3 implementation) */

.conexiones-svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.conexiones-svg:active {
    cursor: grabbing;
}

.conexiones-edge {
    fill: none;
    stroke: #5ab8a8;
    stroke-width: 1.5;
    stroke-opacity: 0.55;
    transition: stroke 200ms ease, stroke-width 200ms ease, stroke-opacity 200ms ease;
}

.conexiones-edge.hovered {
    stroke: #1a582e;
    stroke-width: 3;
    stroke-opacity: 1;
}

.conexiones-edge.faded {
    stroke-opacity: 0.08;
}

.conexiones-edge-label {
    font-family: Inter, system-ui, sans-serif;
    font-size: 9.5px;
    pointer-events: all;
    cursor: default;
    transition: opacity 200ms ease;
}

.conexiones-edge-hit {
    cursor: default;
    pointer-events: stroke;
}

.conexiones-edge-label.faded {
    opacity: 0.18;
}

.conexiones-edge-label-bg {
    fill: #ffffff;
    fill-opacity: 0.92;
    stroke: rgba(42, 107, 122, 0.15);
    stroke-width: 0.5;
    transition: fill 200ms ease, stroke 200ms ease;
}

.conexiones-edge-label.hovered .conexiones-edge-label-bg {
    fill: #ffffff;
    fill-opacity: 1;
    stroke: #1a582e;
    stroke-width: 1;
}

.conexiones-edge-label-text {
    fill: #0f3d1e;
    font-weight: 500;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
}

.conexiones-edge-label.hovered .conexiones-edge-label-text {
    font-weight: 700;
}

.conexiones-node {
    transition: opacity 200ms ease;
}

.conexiones-node.faded {
    opacity: 0.22;
}

.conexiones-node-bg {
    fill: #1a582e;
}

.conexiones-node-image {
    stroke: #2a6b7a;
    stroke-width: 3;
    transition: stroke 200ms ease, stroke-width 200ms ease, r 200ms ease;
}

.conexiones-node.hovered .conexiones-node-image {
    stroke: #3c8d4f;
    stroke-width: 5;
}

.conexiones-node.pinned .conexiones-node-image {
    stroke: #e89a3c;
    stroke-width: 5;
    filter: drop-shadow(0 0 6px rgba(232, 154, 60, 0.45));
}

.conexiones-node.pinned.hovered .conexiones-node-image {
    stroke: #e89a3c;
    stroke-width: 6;
}

.conexiones-tooltip--clickable {
    cursor: pointer;
}

.conexiones-tooltip--clickable:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(42, 107, 122, 0.45);
}

.conexiones-node-label {
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: #0f3d1e;
    paint-order: stroke;
    stroke: #f3f7f4;
    stroke-width: 4;
    stroke-linejoin: round;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
}

.conexiones-node-year {
    font-family: Inter, system-ui, sans-serif;
    font-size: 9px;
    font-weight: 500;
    fill: #5a7062;
    paint-order: stroke;
    stroke: #f3f7f4;
    stroke-width: 3;
    stroke-linejoin: round;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
    letter-spacing: 0.04em;
}

.conexiones-ring {
    stroke: rgba(42, 107, 122, 0.18);
    stroke-width: 1.5;
    stroke-dasharray: 2 5;
}

.conexiones-spine {
    stroke: rgba(42, 107, 122, 0.25);
    stroke-width: 1.2;
}

.conexiones-tooltip__pair {
    font-size: 0.78rem;
    color: #2a6b7a;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.conexiones-tooltip__body {
    color: #2a3b30;
}

.conexiones-tooltip__hint {
    font-size: 0.78rem;
    color: #2a6b7a;
    font-style: italic;
    margin-top: 0.25rem;
}

/* =========================================================================
   Personas Conexiones — mosaic feature card on /personas.html
   ========================================================================= */

.fs-mosaic__connections {
    background:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
        linear-gradient(135deg, #2a6b7a 0%, #4a9199 60%, #5ab8a8 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.6rem;
    gap: 0.55rem;
    color: white;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease, transform 0.4s ease;
}

/* Place the connections card diagonally offset from the Portraits title:
   one row down (row 2) and on the opposite side of the grid (col 3 on
   the 4-col desktop layout, col 2 on the 3-col tablet layout). Articles
   auto-flow around it via grid-auto-flow: row dense. On mobile we let it
   flow naturally. */

@media (min-width: 1025px) {
    #personas-mosaic {
        grid-auto-flow: row dense;
    }
    #personas-mosaic .fs-mosaic__connections {
        grid-row: 2;
        grid-column: 3;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #personas-mosaic {
        grid-auto-flow: row dense;
    }
    #personas-mosaic .fs-mosaic__connections {
        grid-row: 2;
        grid-column: 2;
    }
}

.fs-mosaic__connections::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,0.55) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 22%, rgba(255,255,255,0.45) 0 3px, transparent 4px),
        radial-gradient(circle at 18% 78%, rgba(255,255,255,0.5) 0 3px, transparent 4px),
        radial-gradient(circle at 80% 82%, rgba(255,255,255,0.4) 0 3px, transparent 4px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0 3px, transparent 4px),
        linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,0.18) 49.5%, rgba(255,255,255,0.18) 50.5%, transparent 50.5%),
        linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,0.13) 49.5%, rgba(255,255,255,0.13) 50.5%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,0.1) 49.7%, rgba(255,255,255,0.1) 50.3%, transparent 50.3%);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.fs-mosaic__connections:hover::before {
    opacity: 1;
}

.fs-mosaic__connections:hover {
    background:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, #1f5560 0%, #3d7d85 60%, #4ea596 100%);
}

.fs-mosaic__connections h2,
.fs-mosaic__connections p,
.fs-mosaic__connections .conexiones-cta {
    position: relative;
    z-index: 1;
}

.fs-mosaic__connections h2 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.fs-mosaic__connections p {
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.fs-mosaic__connections .conexiones-cta {
    margin-top: 0.4rem;
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 4px;
}

/* /legal search: "new" marker on cards that the most recent depth-slider
   widen brought into view. Persistent — stays until the next slider commit
   (cleared in search.js applyDepth when depth shrinks or a fresh search
   replaces the set). */

.legal-card-new {
    border-left-color: #d97706 !important;
    background-color: rgb(255, 251, 235);
}

.legal-new-pill {
    position: absolute;
    top: 0;
    right: 0;
    background: #d97706;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    z-index: 5;
    pointer-events: none;
}

/* Timeline rows are too thin for a pill — just shift the dot color. */

.cf-tl-doc.legal-card-new {
    background-color: rgb(255, 251, 235);
}

.cf-tl-doc.legal-card-new > span:first-child {
    box-shadow: 0 0 0 2px #d97706;
}

/* ============================================================
   front2.html — prototype front page styles
   Contemporary, IN YOUR FACE, RAD. Forest greens hard. No cream.
   ============================================================ */

/* Suppress horizontal scroll caused by the full-bleed `margin: calc(50% - 50vw)`
   pattern — 100vw includes scrollbar width, 100% does not, so without this the
   page gains a tiny horizontal scroll equal to the scrollbar width. */

html:has(body.front2),
body.front2 {
    overflow-x: clip;
}

/* ----- Nav owned by front2 -----
   Drop About / Contact / Search / Donate (CTAs cover them — donate appears
   3x elsewhere). The nav becomes a confident header strip with a saffron
   underline + tagline-as-sticker treatment. */

.front2 nav .nav-link-about,
.front2 nav .nav-link-contact,
.front2 nav .nav-link-search,
.front2 nav .nav-link-layout {
    display: none !important;
}

/* Subtle dark hairline so the nav has a defined edge but doesn't compete
   with the saffron sticker treatments below. */

.front2 nav#main-nav {
    border-bottom: 1px solid rgba(26, 88, 46, 0.2);
}

/* Logo + name typography: confident weight, brand color, slight letter-tighten. */

.front2 nav#main-nav a[href="/"] {
    align-items: center;
    gap: 0.65rem;
}

.front2 nav#main-nav a[href="/"] > span {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a582e;
}

/* Tagline lives beside the logo as a quiet editorial subtitle. No sticker,
   no chip — just brand typography (Inter, small caps, forest-teal) with a
   thin vertical hairline as separator. Breakpoint raised to 1300px so the
   nav-search bar (md+) has comfortable room from 1024–1299. Below 1300 the
   wordmark stands alone; at 1300+ the tagline rejoins next to the wordmark. */

.front2 .front2-nav-tagline {
    display: none;
}

@media (min-width: 1300px) {
    .front2 .front2-nav-tagline {
        display: inline-flex;
        align-items: center;
        margin-left: 0.95rem;
        padding-left: 0.95rem;
        border-left: 1px solid rgba(42, 107, 122, 0.35);
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #2a6b7a;
        line-height: 1.25;
        max-width: 22rem;
        white-space: normal;
    }
}

/* ----- Site-search nav link (front2-only) -----
   Quiet icon link rather than an inline input — sits next to the lang
   switcher and routes to /search.html. The label hides at narrow widths
   so only the magnifier shows; reappears at lg+ when there's room. */

.front2-nav-search-link {
    display: none;
}

.front2 nav .front2-nav-search-link {
    align-items: center;
    gap: 0.4rem;
    color: #1a582e;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.front2 nav .front2-nav-search-link svg {
    width: 1.05rem;
    height: 1.05rem;
}

.front2 nav .front2-nav-search-link:hover {
    color: #2a6b7a;
}

@media (min-width: 768px) {
    .front2 nav .front2-nav-search-link {
        display: inline-flex;
    }
}

/* Label hidden below lg so only the magnifier shows; reveals at lg+. */

.front2 nav .front2-nav-search-link__label {
    display: none;
}

@media (min-width: 1024px) {
    .front2 nav .front2-nav-search-link__label {
        display: inline;
    }
}

/* Language toggle: lift its visual presence so it owns the right side now
   that Donate is gone. */

.front2 nav#main-nav #languageLabel,
.front2 nav#main-nav #currentLanguage {
    color: #1a582e;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Hero band padding — explicit so Tailwind JIT misses don't smoosh the
   magazine cover up against the sticky nav. */

.front2 .front2-hero-pad {
    padding-top: 2.25rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .front2 .front2-hero-pad {
        padding-top: 5rem;
        padding-bottom: 1.75rem;
    }
}

@media (min-width: 1300px) {
    .front2 .front2-hero-pad {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }
}

/* CTA strip needs to sit above the feature card's drop shadow so the
   chips don't get tinted by the shadow falloff. */

.front2 .front2-cta-strip {
    position: relative;
    z-index: 1;
}

/* ----- Featured tile (magazine cover) ----- */

.front2 .front2-featured,
.front2 .front2-featured-skeleton {
    /* Layered shadow stack — contact + key + ambient — tinted toward
       forest-dark so it reads as native to the palette, not a foreign
       gray smear. The cream wash above brightens the bg from the top,
       so the directional key shadow biases downward to match the
       implied overhead light. */
    box-shadow:
        0 2px 4px rgba(8, 18, 12, 0.55),
        0 14px 28px rgba(8, 18, 12, 0.42),
        0 36px 80px rgba(8, 18, 12, 0.32);
}

.front2 .front2-featured-title {
    overflow-wrap: anywhere;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

/* Hot saffron accent pill — used for FEATURED, SPOTLIGHT, count chips, and
   any other "look here" small badge. Flat label treatment (no shadow / no
   border) so it doesn't read as a button. */

.front2 .front2-pill-accent {
    display: inline-block;
    padding: 0.3rem 0.625rem;
    background-color: #fbbf24; /* saffron */
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (min-width: 768px) {
    .front2 .front2-pill-accent {
        font-size: 0.72rem;
        padding: 0.375rem 0.7rem;
    }
}

.front2 .front2-pill-count {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    background-color: #fbbf24;
    color: #1a1a1a;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (min-width: 768px) {
    .front2 .front2-pill-count { font-size: 0.7rem; }
}

/* ----- CTA chips (2D sticker style, carrying the FEATURED badge treatment) -----
   Each chip is a brutalist colored sticker: saturated bg, hard black border,
   forest-dark hard offset shadow. Colors cycle through a contemporary palette
   so the row reads as a row of stamps, not bland green pills. */

.front2 .front2-cta-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    background-color: #fbbf24; /* default = saffron, overridden per-position */
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    text-decoration: none;
    min-height: 3.25rem;
    box-shadow: 4px 4px 0 #1a582e;
    transition: transform 0.15s ease-out, box-shadow 0.18s ease-out;
}

.front2 .front2-cta-chip:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1a582e;
}

/* Restrained palette: only the two hardest-action chips (Donate, Report a
   Crime) get accent treatment. Rest are white so the row reads tasteful. */

.front2 .front2-cta-strip a { background-color: #ffffff; }

/* Donate: CF logo blown up as background with a dark forest wash + white
   text. Label is huge so DONATE physically fills the chip top-to-bottom. */

.front2 .front2-cta-strip a:nth-child(6n + 1) {
    background-color: #1a582e;
    background-image:
        linear-gradient(135deg, rgba(20, 63, 33, 0.7) 0%, rgba(26, 88, 46, 0.82) 100%),
        url('/assets/cflogo-Bkm74fSz.webp');
    background-size: cover, 240%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #ffffff;
    padding: 0.35rem 0.85rem;
    justify-content: center;
}

.front2 .front2-cta-strip a:nth-child(6n + 1) .front2-cta-label {
    flex: none;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-align: center;
}

@media (min-width: 768px) {
    .front2 .front2-cta-strip a:nth-child(6n + 1) .front2-cta-label {
        font-size: 2.4rem;
    }
}

.front2 .front2-cta-strip a:nth-child(6n + 1) .front2-cta-arrow {
    display: none;
}

.front2 .front2-cta-strip a:nth-child(6n + 3) { background-color: #ef4444; color: #ffffff; }

/* coral — report a crime */

.front2 .front2-cta-bar {
    /* Was an accent bar — dropped in the sticker redesign. */
    display: none;
}

.front2 .front2-cta-label {
    flex: 1;
    min-width: 0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 0.82rem;
    line-height: 1.05;
}

.front2 .front2-cta-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
    transition: transform 0.15s ease-out, opacity 0.15s;
}

.front2 .front2-cta-chip:hover .front2-cta-arrow {
    transform: translateX(3px);
    opacity: 1;
}

@media (max-width: 767px) {
    .front2 .front2-cta-chip {
        padding: 0.8rem 0.85rem;
        min-height: 3rem;
        box-shadow: 3px 3px 0 #1a582e;
    }
    .front2 .front2-cta-chip:hover { box-shadow: 4px 4px 0 #1a582e; }
    .front2 .front2-cta-label { font-size: 0.75rem; }
    .front2 .front2-cta-arrow { display: none; }
}

/* ----- Section wrappers: stripes + per-stripe canopy bg -----
   Each stripe owns its own forest-canopy background and its own filter
   treatment. No fixed page-wide bg, no backdrop-filter chain. The hero
   carries the posterized treatment; each subsequent stripe sets its own
   look. Browser caches /img/forest-canopy.jpg — multiple references = one
   download. */

/* Hero: scoped posterize bg with cream-wash overlay. The filter sits on
   the wrapper div so it's applied atomically before the <img> ever paints
   (which avoids the unfiltered → filtered flash that happened with the
   old fixed-bg + backdrop-filter setup). */

.front2 .front2-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #143f21;
}

.front2 .front2-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/assets/forest-canopy-dC5GDtzx.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: grayscale(1) contrast(1.5) url(#front2-posterize);
}

.front2 .front2-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(240, 240, 230, 0.9) 10%, rgba(245, 250, 245, 0.4) 90%);
}

.front2 .front2-hero__content {
    position: relative;
    z-index: 2;
}

/* Full-bleed mixin for the colored stripes that follow the hero. */

.front2 .front2-news-stripe,
.front2 .front2-collections-filter,
.front2 .front2-topics-stripe {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 5;
    overflow: hidden;
    isolation: isolate;
}

/* Shared bg-layer rules: ::before paints the canopy image (pinned to the
   viewport so it stays put while the colored stripes scroll past — each
   stripe acts as a window onto the same canopy), ::after paints the
   stripe's color tint, content rides above with z-index: 2. */

.front2 .front2-news-stripe::before,
.front2 .front2-collections-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/assets/forest-canopy-dC5GDtzx.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Mobile fallback: background-attachment: fixed is unreliable on iOS and
   often falls back to scroll silently. Force scroll explicitly so the
   image still renders. */

@media (max-width: 1023px) {
    .front2 .front2-hero__bg,
    .front2 .front2-news-stripe::before,
    .front2 .front2-collections-filter::before {
        background-attachment: scroll;
    }
}

.front2 .front2-news-stripe::after,
.front2 .front2-collections-filter::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.front2 .front2-news-stripe > *,
.front2 .front2-collections-filter > * {
    position: relative;
    z-index: 2;
}

/* News stripe: B&W canopy + teal tint over it. */

.front2 .front2-news-stripe {
    border-top: 4px solid #70be79;
    border-bottom: 4px solid #70be79;
    background-color: #143f21; /* fallback for when image is loading */
}

.front2 .front2-news-stripe::before {
    filter: grayscale(1) contrast(1.15);
}

.front2 .front2-news-stripe::after {
    background-color: rgba(42, 107, 122, 0.93);
}

/* News cards: image-fill tile with badge top-left and title overlay bottom.
   Compact (aspect-ratio rather than h+body) so the row reads as a punchy band
   of imagery, not boxes of summary text. */

.front2 .front2-news-card {
    aspect-ratio: 4 / 3;
}

.front2 .front2-news-card__badge {
    margin-bottom: 0;
    font-size: 0.625rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ----- Legal corpus promo stripe -----
   Brunca-amber band sitting between News (teal) and Collections (forest-
   dark). Amber is the accent color the /legal page itself uses (loader
   core, search highlights), so the stripe both differentiates from the
   surrounding cool greens and previews the destination palette. The whole
   band is one <a>; the NEW stamp is positioned absolutely so it breaks
   out into the left page gutter on wide viewports; body content respects
   the same max-w-7xl + px-4/sm:px-6/lg:px-8 grid as every other card. */

.front2 a.front2-legal-stripe {
    display: block;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 5;
    background-color: #b45309;
    border-top: 2px solid #1c1917;
    border-bottom: 2px solid #1c1917;
    color: #fef3c7;
    text-decoration: none;
    transition: background-color 0.3s ease;
    overflow: hidden;
}

.front2 a.front2-legal-stripe:hover {
    background-color: #9a4708;
}

/* NEW stamp — cream sticker with amber text, charcoal border + shadow.
   Default (mobile/narrow): inline above the title. At ≥80rem viewport
   (the breakpoint where max-w-7xl actually constrains the body), it
   absolute-positions to the left of the content box, breaking out into
   the page gutter as a press stamp. */

.front2 .front2-legal-stripe__new {
    display: inline-flex;
    align-items: center;
    background-color: #fef3c7;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem 0.42rem;
    border: 2px solid #1c1917;
    box-shadow: 3px 3px 0 #1c1917;
    transform: rotate(-3deg);
    margin-bottom: 1rem;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.front2 a.front2-legal-stripe:hover .front2-legal-stripe__new {
    transform: rotate(-8deg) scale(1.06);
}

@media (min-width: 90rem) {
    /* Only break out into the page gutter once the viewport is wide enough
       that max-w-7xl actually leaves room beside the content box. Below
       this, NEW stays inline above the title. */
    .front2 .front2-legal-stripe__new {
        position: absolute;
        top: 1.85rem;
        right: 100%;
        margin-right: 1.5rem;
        margin-bottom: 0;
    }
}

.front2 .front2-legal-stripe__title {
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fef3c7;
    margin: 0 0 0.6rem 0;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(28, 25, 23, 0.18);
}

.front2 .front2-legal-stripe__intro {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(254, 243, 199, 0.95);
    margin: 0 0 0.5rem 0;
    max-width: 56rem;
}

.front2 .front2-legal-stripe__count {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(254, 243, 199, 0.78);
    margin: 0 0 1.4rem 0;
}

.front2 .front2-legal-stripe__count strong {
    color: #fef3c7;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    background-color: rgba(28, 25, 23, 0.22);
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
}

/* CTA — solid charcoal pill with cream type sitting below the body. The
   whole stripe is the link; the CTA is the visible affordance, not a
   separate target. Hover (anywhere on the stripe) inverts it to cream-
   on-amber and offsets it with a hard charcoal drop-shadow. */

.front2 .front2-legal-stripe__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.5rem;
    background-color: #1c1917;
    color: #fef3c7;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 2px solid #1c1917;
    transition: background-color 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
    white-space: nowrap;
}

.front2 a.front2-legal-stripe:hover .front2-legal-stripe__cta {
    background-color: #fef3c7;
    color: #1c1917;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #1c1917;
}

.front2 .front2-legal-stripe__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.front2 a.front2-legal-stripe:hover .front2-legal-stripe__arrow {
    transform: translateX(4px);
}

/* Collections: full-color canopy + green tint. No filter on the bg image
   so the forest renders in its native colors; the tint sits on top. */

.front2 .front2-collections-filter {
    background-color: #143f21; /* fallback for when image is loading */
}

.front2 .front2-collections-filter::before {
    /* No filter — full color canopy. */
}

.front2 .front2-collections-filter::after {
    background-color: rgba(26, 88, 46, 0.55);
}

/* Topics stripe: solid forest-dark — bento needs full opacity so the colored
   tiles read clean against a single backdrop, not a busy bg-image bleed. */

.front2 .front2-topics-stripe {
    background-color: #1a582e;
    border-top: 4px solid #70be79;
    border-bottom: 4px solid #70be79;
}

/* Mission stripe: white smoked glass — bright (high contrast against the
   dark stripes around it) but the bg image still bleeds through softly,
   keeping image continuity. */

.front2 .front2-mission-stripe {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-top: 6px solid #70be79;
    border-bottom: 6px solid #1a582e;
    color: #1a582e;
}

/* ----- Mission positioning blocks (3-col grid) ----- */

.front2 .front2-mission-block {
    border-left: 4px solid #1a582e;
    padding-left: 1.25rem;
}

.front2 .front2-mission-block__head {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 800;
    color: #143f21;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .front2 .front2-mission-block__head { font-size: 1.4rem; }
}

@media (min-width: 1024px) {
    .front2 .front2-mission-block__head { font-size: 1.6rem; }
}

.front2 .front2-mission-block__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(20, 63, 33, 0.78);
}

/* ----- Mission action strip ----- */

.front2 .front2-mission-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 1.4rem;
    background-color: #ffffff;
    color: #1a582e;
    border: 2px solid #1a582e;
    text-decoration: none;
    min-height: 7.5rem;
    transition: transform 0.15s ease-out, box-shadow 0.18s ease-out;
}

.front2 a.front2-mission-tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1a582e;
}

.front2 .front2-mission-tile--donate {
    background-color: #1a582e;
    background-image:
        linear-gradient(135deg, rgba(20, 63, 33, 0.7) 0%, rgba(26, 88, 46, 0.82) 100%),
        url('/assets/cflogo-Bkm74fSz.webp');
    background-size: cover, 200%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #ffffff;
    border-color: #1a582e;
}

.front2 a.front2-mission-tile--donate:hover {
    box-shadow: 6px 6px 0 #70be79;
}

.front2 .front2-mission-tile__verb {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

@media (min-width: 768px) {
    .front2 .front2-mission-tile__verb { font-size: 2.5rem; }
}

.front2 .front2-mission-tile__detail {
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.85;
    font-weight: 500;
}

.front2 .front2-mission-tile--follow {
    cursor: default;
}

.front2 .front2-mission-tile__socials {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.front2 .front2-mission-tile__socials a {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a582e;
    border: 2px solid #1a582e;
    background-color: transparent;
    font-size: 1.05rem;
    line-height: 1;
    transition: background-color 0.18s, color 0.18s, transform 0.15s;
    text-decoration: none;
}

.front2 .front2-mission-tile__socials a:hover {
    background-color: #1a582e;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ----- Newsletter form inside the Follow tile -----
   Sits between the FOLLOW verb and the social icon row. Tile already has
   a forest-dark border + white bg, so the form stays low-chrome: hairline
   input + flat forest-dark submit button. Email is positioned as the
   primary follow channel; socials are the alternative below. */

.front2 .front2-mission-tile--follow {
    gap: 0.85rem;
}

.front2 .front2-mission-tile__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.front2 .front2-mission-tile__email {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(20, 63, 33, 0.4);
    border-right: 0;
    color: #1a1a1a;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.front2 .front2-mission-tile__email::-moz-placeholder {
    color: rgba(26, 26, 26, 0.4);
}

.front2 .front2-mission-tile__email::placeholder {
    color: rgba(26, 26, 26, 0.4);
}

.front2 .front2-mission-tile__email:focus {
    border-color: #1a582e;
}

.front2 .front2-mission-tile__email-submit {
    flex: none;
    width: 2.4rem;
    background-color: #1a582e;
    color: #ffffff;
    border: 1px solid #1a582e;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.front2 .front2-mission-tile__email-submit:hover {
    background-color: #143f21;
}

.front2 .front2-mission-tile__turnstile {
    flex: 1 0 100%;
    margin-top: 0.6rem;
}

.front2 .front2-mission-tile__newsletter-success {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a582e;
}

.front2 .front2-mission-tile__newsletter-success.hidden {
    display: none;
}

.front2 .front2-mission-tile__newsletter-success i {
    color: #1a582e;
}

/* ----- Collections wall ----- */

.front2 .front2-collections-wall {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    grid-auto-rows: 1fr;
}

@media (min-width: 640px) {
    .front2 .front2-collections-wall {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .front2 .front2-collections-wall {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 2x1 spotlight: twice as wide as a normal tile, same height.
       Less weight than the prior 2x2 so the page-top featured tile
       can dominate. */
    .front2 .front2-collection-spotlight {
        grid-column: span 2;
    }
}

.front2 .front2-collection-card {
    aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
    /* Spotlight is 2:1 portrait of two normal tiles' width; aspect-ratio
       is automatic from the grid sizing. */
    .front2 .front2-collection-spotlight {
        aspect-ratio: 2 / 1;
    }
}

/* ----- Topics bento (contemporary) ----- */

.front2 .front2-topics-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    grid-auto-flow: dense;
}

@media (min-width: 640px) {
    .front2 .front2-topics-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .front2 .front2-topics-bento {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        grid-auto-rows: minmax(11rem, auto);
    }
}

/* Tile sizing per tier */

.front2 .front2-topic-tile-lg { /* top topic — 2x2 dominant */ }

.front2 .front2-topic-tile-md { /* second tier — 1x2 vertical */ }

.front2 .front2-topic-tile-sm { /* small — 1x1 */ }

@media (min-width: 1024px) {
    .front2 .front2-topic-tile-lg {
        grid-column: span 2;
        grid-row: span 2;
    }
    .front2 .front2-topic-tile-md {
        grid-row: span 2;
    }
}

/* Tile structure */

.front2 .front2-topic-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    text-decoration: none;
    border: 2px solid transparent;
    overflow: hidden;
    min-height: 11rem;
    transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

@media (min-width: 768px) {
    .front2 .front2-topic-tile { padding: 1.5rem; }
}

@media (min-width: 1024px) {
    .front2 .front2-topic-tile-lg { padding: 2rem 2.25rem; }
}

.front2 .front2-topic-tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(26, 88, 46, 0.3);
}

/* Rock Salt: chunky chalky handwriting numerals — graffiti vibe over the
   sober tile palette. Slight rotation for sticker-ish personality. */

.front2 .front2-topic-tile__count {
    position: absolute;
    top: 0.5rem;
    right: 0.85rem;
    font-family: 'Rock Salt', 'Source Serif 4', serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.02em;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-4deg);
    transform-origin: center;
}

@media (min-width: 768px) {
    .front2 .front2-topic-tile__count {
        font-size: 2rem;
        top: 0.65rem;
        right: 1rem;
    }
}

@media (min-width: 1024px) {
    .front2 .front2-topic-tile-lg .front2-topic-tile__count {
        font-size: 4.5rem;
        top: 0.85rem;
        right: 1.5rem;
    }
    .front2 .front2-topic-tile-md .front2-topic-tile__count {
        font-size: 2.75rem;
    }
}

.front2 .front2-topic-tile__name {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
}

.front2 .front2-topic-tile__name h3 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    /* Tight tracking lets long words like BIODIVERSIDAD (13 chars) fit
       without breaking. The display weight already feels confident; the
       compression makes it feel deliberately compact rather than cramped. */
    letter-spacing: -0.045em;
}

/* Per-tier font-size clamps with viewport scaling; tuned so the longest
   English/Spanish topic names (BIODIVERSITY / BIODIVERSIDAD,
   INVESTIGATION / INVESTIGACIÓN) don't wrap mid-word in their tile. */

@media (min-width: 1024px) {
    .front2 .front2-topic-tile-lg .front2-topic-tile__name h3 {
        font-size: clamp(2.5rem, 4.6vw, 4.5rem);
        line-height: 0.88;
    }
    .front2 .front2-topic-tile-md .front2-topic-tile__name h3 {
        font-size: clamp(1.4rem, 2.2vw, 2rem);
        line-height: 0.92;
    }
    .front2 .front2-topic-tile-sm .front2-topic-tile__name h3 {
        font-size: clamp(1.25rem, 1.6vw, 1.6rem);
        line-height: 0.95;
    }
}

/* Mobile/tablet: slightly looser tracking so smaller sizes stay readable. */

@media (max-width: 1023px) {
    .front2 .front2-topic-tile__name h3 {
        letter-spacing: -0.035em;
    }
}

.front2 .front2-topic-tile__cta {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.6;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.front2 .front2-topic-tile:hover .front2-topic-tile__cta {
    opacity: 1;
    transform: translateX(3px);
}

/* Tile palettes — rotates among 4 to give the wall rhythm. */

.front2 .front2-topic-pal-light {
    background-color: #70be79;            /* forest-light */
    color: #1a582e;
    border-color: #4a8a52;
}

.front2 .front2-topic-pal-light:hover { border-color: #1a582e; }

.front2 .front2-topic-pal-teal {
    background-color: #2a6b7a;            /* forest-teal */
    color: #ffffff;
    border-color: #1f5360;
}

.front2 .front2-topic-pal-teal:hover { border-color: #70be79; }

.front2 .front2-topic-pal-dark {
    background-color: #143f21;            /* darker than forest-dark */
    color: #ffffff;
    border-color: #1f5933;
}

.front2 .front2-topic-pal-dark:hover { border-color: #70be79; }

.front2 .front2-topic-pal-white {
    background-color: #ffffff;
    color: #1a582e;
    border-color: #d4d4cf;
}

.front2 .front2-topic-pal-white:hover { border-color: #2a6b7a; }

/* ----- Footer stripe -----
   Pinned (background-attachment: fixed) Osa forest ridge so the closing
   image stays put while the stripes slide past it. Different image from
   the page-top forest so the page reads bookended. */

.front2 .front2-footer-stripe {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 5;
    overflow: hidden;
    border-top: 4px solid #70be79;
    background-color: #143f21;
    background-image:
        linear-gradient(to bottom, rgba(20, 63, 33, 0.68) 0%, rgba(10, 36, 18, 0.82) 100%),
        url('/assets/osa-forest-ridge-Dulu-bn0.jpg');
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
}

/* Mobile fallback: background-attachment: fixed is unreliable on iOS; fall
   back to scroll so the image still shows, just not pinned. */

@media (max-width: 1023px) {
    .front2 .front2-footer-stripe {
        background-attachment: scroll, scroll;
    }
}

.front2 .front2-footer-headline {
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    overflow-wrap: break-word;
}

/* Dominant donate CTA — CF logo blown up as background with a dark forest
   wash so white text reads. Confident, on-brand, no shouty yellow. */

.front2 .front2-footer-donate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    background-color: #1a582e;
    background-image:
        linear-gradient(135deg, rgba(20, 63, 33, 0.72) 0%, rgba(26, 88, 46, 0.86) 100%),
        url('/assets/cflogo-Bkm74fSz.webp');
    background-size: cover, 175%;
    background-position: center, center;
    background-repeat: no-repeat;
    color: #ffffff;
    border: 3px solid #70be79;
    padding: 1.75rem;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    min-height: 12rem;
}

@media (min-width: 768px) {
    .front2 .front2-footer-donate {
        padding: 2.25rem;
        min-height: 14rem;
        background-size: cover, 200%;
    }
}

.front2 .front2-footer-donate:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 #70be79;
}

.front2 .front2-footer-donate > * {
    position: relative;
    z-index: 1;
}

.front2 .front2-footer-donate__kicker {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #70be79;
    margin-bottom: 0.5rem;
}

.front2 .front2-footer-donate__body {
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    margin-bottom: 1.25rem;
    max-width: 32rem;
}

@media (min-width: 768px) {
    .front2 .front2-footer-donate__body {
        font-size: 1.1rem;
    }
}

.front2 .front2-footer-donate__action {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: auto;
}

.front2 .front2-footer-donate__btn {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: #ffffff;
}

@media (min-width: 768px) {
    .front2 .front2-footer-donate__btn {
        font-size: 2.5rem;
    }
}

.front2 .front2-footer-donate__arrow {
    font-size: 2rem;
    font-weight: 900;
    color: #70be79;
    line-height: 1;
    transition: transform 0.18s ease-out;
}

.front2 .front2-footer-donate:hover .front2-footer-donate__arrow {
    transform: translateX(6px);
    color: #ffffff;
}

/* Secondary newsletter copy + form — white on dark, no chance of contrast fail. */

.front2 .front2-footer-news__kicker {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #70be79;
    margin-bottom: 0.5rem;
}

.front2 .front2-footer-news__body {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1rem;
}

.front2 .front2-footer-stripe form,
.front2 .front2-footer-stripe__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.front2 .front2-footer-stripe__input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.95rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.front2 .front2-footer-stripe__input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.front2 .front2-footer-stripe__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.front2 .front2-footer-stripe__input:focus {
    outline: none;
    border-color: #70be79;
    background-color: rgba(255, 255, 255, 0.16);
}

.front2 .front2-footer-stripe__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    padding: 0.875rem 1.25rem;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.front2 .front2-footer-stripe__submit:hover {
    background-color: #ffffff;
    color: #1a582e;
    transform: translateY(-1px);
}

/* ----- /browse.html generic lander -----
   Editorial mosaic: compact dark-forest header band over a full-bleed,
   image-fill grid. Halfway between a card list and the personas-style
   fullscreen mosaic — title/badge always visible on tiles, summary fades
   in on hover. First article in a collection is promoted to a 2x2 hero. */

.front2 .browse-header-stripe {
    background-color: #1a582e;
    border-bottom: 4px solid #70be79;
    position: relative;
    z-index: 5;
}

.front2 .browse-header-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #70be79;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    margin-bottom: 1.25rem;
}

.front2 .browse-header-back:hover {
    color: #ffffff;
    transform: translateX(-2px);
}

.front2 .browse-header-kicker {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #70be79;
    margin-bottom: 0.6rem;
}

.front2 .browse-header-title {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    overflow-wrap: break-word;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.front2 .browse-header-count {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #70be79;
    margin: 0 0 0.65rem 0;
}

.front2 .browse-header-intro {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* Mosaic grid wrapper — full-bleed forest-dark band that the tiles sit on,
   with a thin 2px gap between tiles so the bg color shows through as a
   gallery seam. */

.front2 .browse-mosaic-wrapper {
    position: relative;
    z-index: 5;
    background-color: #1a582e;
    min-height: 60vh;
}

.front2 .browse-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 2px;
    background-color: #1a582e;
}

/* Base tile: image-fill, dark scrim, badge top-left, title bottom. */

.front2 .browse-mosaic__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #143f21;
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
}

.front2 .browse-mosaic__tile--hero {
    grid-column: span 2;
    grid-row: span 2;
}

.front2 .browse-mosaic__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
    z-index: 0;
}

.front2 .browse-mosaic__tile:hover .browse-mosaic__img {
    transform: scale(1.06);
    filter: brightness(0.92);
}

.front2 .browse-mosaic__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

/* Hover-only top scrim so the badge keeps contrast even after the image scales */

.front2 .browse-mosaic__tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}

/* Deep bottom scrim that fades in on hover so the expanded summary stays
   readable. Pulls darkness much higher up the tile than the resting scrim,
   covering the area where the summary slides in. */

.front2 .browse-mosaic__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.78) 30%,
        rgba(0, 0, 0, 0.5) 55%,
        rgba(0, 0, 0, 0.18) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.front2 .browse-mosaic__tile:hover::after,
.front2 .browse-mosaic__tile--hero::after {
    opacity: 1;
}

.front2 .browse-mosaic__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
}

/* Play affordance for video / slideshow tiles. Sits centered under the title
   block so it reads as the primary action without obscuring the bottom text. */

.front2 .browse-mosaic__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.front2 .browse-mosaic__play-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.front2 .browse-mosaic__tile:hover .browse-mosaic__play-circle {
    transform: scale(1.1);
    background-color: rgba(225, 29, 72, 0.92);
}

.front2 .browse-mosaic__play-circle svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 3px;
}

.front2 .browse-mosaic__tile--hero .browse-mosaic__play-circle {
    width: 4.75rem;
    height: 4.75rem;
}

.front2 .browse-mosaic__tile--hero .browse-mosaic__play-circle svg {
    width: 1.9rem;
    height: 1.9rem;
}

.front2 .browse-mosaic__badge .article-badge {
    margin-bottom: 0;
    font-size: 0.625rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.front2 .browse-mosaic__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 1rem 1.1rem 1.05rem;
    color: #ffffff;
}

.front2 .browse-mosaic__title {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.front2 .browse-mosaic__tile--hero .browse-mosaic__title {
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Summary: hidden by default on desktop, slides in on hover */

.front2 .browse-mosaic__summary {
    margin-top: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.3s ease,
                margin-top 0.3s ease;
}

.front2 .browse-mosaic__tile:hover .browse-mosaic__summary {
    max-height: 9rem;
    opacity: 1;
}

/* Hero tile keeps summary always visible (it has the room) */

.front2 .browse-mosaic__tile--hero .browse-mosaic__summary {
    max-height: none;
    opacity: 1;
    margin-top: 0.85rem;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    max-width: 38rem;
}

.front2 .browse-mosaic__meta {
    margin-top: 0.7rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.front2 .browse-mosaic__date {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.front2 .browse-mosaic__collection {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #70be79;
}

.front2 .browse-mosaic__collection::before {
    content: '·';
    margin-right: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Empty / 404 state inside the grid */

.front2 .browse-mosaic__empty {
    grid-column: 1 / -1;
    padding: 5rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* Skeleton tiles in the initial markup */

.front2 .browse-mosaic__tile.animate-pulse {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ----- Special card (metadata-driven widget tiles) -----
   Newsletter signup, connections-graph link, species-browser link. They sit
   inline in the mosaic but read as a distinct surface: solid forest-light
   accent strip, body always visible (no hover-only reveal), and either an
   image background or a gradient + icon fallback. */

.front2 .browse-mosaic__tile--special {
    background: linear-gradient(135deg, #1a582e 0%, #143f21 100%);
}

.front2 .browse-mosaic__tile--special::before,
.front2 .browse-mosaic__tile--special::after {
    display: none;
}

.front2 .browse-mosaic__special-fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.08);
    font-size: 8rem;
    pointer-events: none;
}

.front2 .browse-mosaic__tile--special .browse-mosaic__img {
    opacity: 0.55;
}

.front2 .browse-mosaic__tile--special:hover .browse-mosaic__img {
    opacity: 0.7;
}

.front2 .browse-mosaic__body--special {
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.25rem 1.25rem;
}

.front2 .browse-mosaic__tile--special .browse-mosaic__summary {
    max-height: none;
    opacity: 1;
    margin-top: 0.6rem;
}

.front2 .browse-mosaic__special-kicker {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #70be79;
    margin-bottom: 0.4rem;
}

/* Newsletter card form */

.front2 .browse-mosaic__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 0.9rem;
}

.front2 .browse-mosaic__email {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 0;
    color: #1a1a1a;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.front2 .browse-mosaic__email::-moz-placeholder {
    color: rgba(26, 26, 26, 0.4);
}

.front2 .browse-mosaic__email::placeholder {
    color: rgba(26, 26, 26, 0.4);
}

.front2 .browse-mosaic__email:focus {
    border-color: #70be79;
}

.front2 .browse-mosaic__email-submit {
    flex: none;
    width: 2.4rem;
    background-color: #70be79;
    color: #143f21;
    border: 1px solid #70be79;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.front2 .browse-mosaic__email-submit:hover {
    background-color: #8fd198;
}

.front2 .browse-mosaic__turnstile {
    flex: 1 0 100%;
    margin-top: 0.6rem;
}

.front2 .browse-mosaic__newsletter-success {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #70be79;
}

.front2 .browse-mosaic__newsletter-success.hidden {
    display: none;
}

/* Responsive: drop columns gracefully so each tile stays a comfortable size.
   The hero spans 2x2 down to the 3-col layout, then collapses to a 2x1 banner
   at tablet, then to a single full-width tile on phones. */

@media (max-width: 1024px) {
    .front2 .browse-mosaic {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .front2 .browse-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }
    .front2 .browse-mosaic__tile--hero {
        grid-column: span 2;
        grid-row: span 1;
    }
    .front2 .browse-mosaic__tile--hero .browse-mosaic__title {
        font-size: clamp(1.4rem, 3.2vw, 2rem);
    }
}

@media (max-width: 480px) {
    .front2 .browse-mosaic {
        grid-template-columns: 1fr;
    }
    .front2 .browse-mosaic__tile,
    .front2 .browse-mosaic__tile--hero {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
    .front2 .browse-mosaic__tile--hero .browse-mosaic__title {
        font-size: 1.5rem;
    }
    /* On touch devices, surface the summary as a clamped 2-line teaser
       instead of relying on hover. */
    .front2 .browse-mosaic__summary {
        max-height: 4rem;
        opacity: 0.95;
        margin-top: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.placeholder\:font-normal::-moz-placeholder{
    font-weight: 400;
}

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

.placeholder\:text-forest-dark\/30::-moz-placeholder{
    color: rgb(26 88 46 / 0.3);
}

.placeholder\:text-forest-dark\/30::placeholder{
    color: rgb(26 88 46 / 0.3);
}

.placeholder\:text-neutral-text\/40::-moz-placeholder{
    color: rgb(51 51 51 / 0.4);
}

.placeholder\:text-neutral-text\/40::placeholder{
    color: rgb(51 51 51 / 0.4);
}

.placeholder\:text-white\/35::-moz-placeholder{
    color: rgb(255 255 255 / 0.35);
}

.placeholder\:text-white\/35::placeholder{
    color: rgb(255 255 255 / 0.35);
}

.after\:absolute::after{
    content: var(--tw-content);
    position: absolute;
}

.after\:inset-0::after{
    content: var(--tw-content);
    inset: 0px;
}

.after\:content-\[\'\'\]::after{
    --tw-content: '';
    content: var(--tw-content);
}

.hover\:-translate-y-1:hover{
    --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));
}

.hover\:scale-105:hover{
    --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));
}

.hover\:border-forest-dark:hover{
    --tw-border-opacity: 1;
    border-color: rgb(26 88 46 / var(--tw-border-opacity, 1));
}

.hover\:border-forest-light:hover{
    --tw-border-opacity: 1;
    border-color: rgb(112 190 121 / var(--tw-border-opacity, 1));
}

.hover\:border-forest-primary:hover{
    --tw-border-opacity: 1;
    border-color: rgb(60 141 79 / var(--tw-border-opacity, 1));
}

.hover\:border-green-400:hover{
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

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

.hover\:border-white\/40:hover{
    border-color: rgb(255 255 255 / 0.4);
}

.hover\:bg-forest-dark:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(26 88 46 / var(--tw-bg-opacity, 1));
}

.hover\:bg-forest-dark\/10:hover{
    background-color: rgb(26 88 46 / 0.1);
}

.hover\:bg-forest-dark\/90:hover{
    background-color: rgb(26 88 46 / 0.9);
}

.hover\:bg-forest-light:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(112 190 121 / var(--tw-bg-opacity, 1));
}

.hover\:bg-forest-light\/20:hover{
    background-color: rgb(112 190 121 / 0.2);
}

.hover\:bg-forest-light\/30:hover{
    background-color: rgb(112 190 121 / 0.3);
}

.hover\:bg-forest-light\/40:hover{
    background-color: rgb(112 190 121 / 0.4);
}

.hover\:bg-forest-light\/70:hover{
    background-color: rgb(112 190 121 / 0.7);
}

.hover\:bg-forest-primary:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(60 141 79 / var(--tw-bg-opacity, 1));
}

.hover\:bg-forest-primary\/90:hover{
    background-color: rgb(60 141 79 / 0.9);
}

.hover\:bg-forest-teal:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(42 107 122 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-500:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-900:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-white\/10:hover{
    background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover{
    background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/80:hover{
    background-color: rgb(255 255 255 / 0.8);
}

.hover\:bg-yellow-300:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}

.hover\:text-amber-900:hover{
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover{
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover{
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-900:hover{
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.hover\:text-forest-dark:hover{
    --tw-text-opacity: 1;
    color: rgb(26 88 46 / var(--tw-text-opacity, 1));
}

.hover\:text-forest-light:hover{
    --tw-text-opacity: 1;
    color: rgb(112 190 121 / var(--tw-text-opacity, 1));
}

.hover\:text-forest-primary:hover{
    --tw-text-opacity: 1;
    color: rgb(60 141 79 / var(--tw-text-opacity, 1));
}

.hover\:text-forest-teal:hover{
    --tw-text-opacity: 1;
    color: rgb(42 107 122 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover{
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover{
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover{
    --tw-text-opacity: 1;
    color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-neutral-text:hover{
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-900:hover{
    --tw-text-opacity: 1;
    color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-900:hover{
    --tw-text-opacity: 1;
    color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover{
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-900:hover{
    --tw-text-opacity: 1;
    color: rgb(19 78 74 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-yellow-100:hover{
    --tw-text-opacity: 1;
    color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-900:hover{
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:shadow-2xl:hover{
    --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);
}

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

.hover\:shadow-md:hover{
    --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);
}

.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-xl:hover{
    --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);
}

.focus\:border-forest-primary:focus{
    --tw-border-opacity: 1;
    border-color: rgb(60 141 79 / var(--tw-border-opacity, 1));
}

.focus\:border-forest-teal:focus{
    --tw-border-opacity: 1;
    border-color: rgb(42 107 122 / var(--tw-border-opacity, 1));
}

.focus\:border-green-400:focus{
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

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

.focus\:bg-white\/15:focus{
    background-color: rgb(255 255 255 / 0.15);
}

.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-forest-primary\/30:focus{
    --tw-ring-color: rgb(60 141 79 / 0.3);
}

.focus\:ring-gray-200:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}

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

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

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

.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\: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-\[1\.02\]{
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    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-\[1\.03\]{
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    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-\[1\.04\]{
    --tw-scale-x: 1.04;
    --tw-scale-y: 1.04;
    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\:border-green-400{
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-gray-400{
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-red-600{
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

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

.group:hover .group-hover\:bg-white\/50{
    background-color: rgb(255 255 255 / 0.5);
}

.group:hover .group-hover\:bg-opacity-30{
    --tw-bg-opacity: 0.3;
}

.group:hover .group-hover\:text-\[\#003087\]{
    --tw-text-opacity: 1;
    color: rgb(0 48 135 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-\[\#243a5e\]{
    --tw-text-opacity: 1;
    color: rgb(36 58 94 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-forest-primary{
    --tw-text-opacity: 1;
    color: rgb(60 141 79 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-forest-teal{
    --tw-text-opacity: 1;
    color: rgb(42 107 122 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-green-300{
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-green-400{
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-stone-700{
    --tw-text-opacity: 1;
    color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-white\/90{
    color: rgb(255 255 255 / 0.9);
}

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

.group:hover .group-hover\:ring-2{
    --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);
}

.group:hover .group-hover\:ring-forest-primary{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(60 141 79 / var(--tw-ring-opacity, 1));
}

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

.group:focus .group-focus\:ring-4{
    --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(4px + 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);
}

.group:focus .group-focus\:ring-white{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px){

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

    .sm\:col-span-3{
        grid-column: span 3 / span 3;
    }

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

    .sm\:inline{
        display: inline;
    }

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

    .sm\:w-24{
        width: 6rem;
    }

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

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

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

    .sm\:gap-5{
        gap: 1.25rem;
    }

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

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

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

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

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

@media (min-width: 768px){

    .md\:sticky{
        position: sticky;
    }

    .md\:left-5{
        left: 1.25rem;
    }

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

    .md\:top-24{
        top: 6rem;
    }

    .md\:top-5{
        top: 1.25rem;
    }

    .md\:order-none{
        order: 0;
    }

    .md\:col-span-12{
        grid-column: span 12 / span 12;
    }

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

    .md\:col-span-4{
        grid-column: span 4 / span 4;
    }

    .md\:col-span-5{
        grid-column: span 5 / span 5;
    }

    .md\:col-span-7{
        grid-column: span 7 / span 7;
    }

    .md\:col-span-8{
        grid-column: span 8 / span 8;
    }

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

    .md\:mb-14{
        margin-bottom: 3.5rem;
    }

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

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

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

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

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

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

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

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

    .md\:mt-48{
        margin-top: 12rem;
    }

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

    .md\:block{
        display: block;
    }

    .md\:flex{
        display: flex;
    }

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

    .md\:hidden{
        display: none;
    }

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

    .md\:h-32{
        height: 8rem;
    }

    .md\:h-40{
        height: 10rem;
    }

    .md\:h-60{
        height: 15rem;
    }

    .md\:h-80{
        height: 20rem;
    }

    .md\:h-9{
        height: 2.25rem;
    }

    .md\:h-96{
        height: 24rem;
    }

    .md\:h-\[26rem\]{
        height: 26rem;
    }

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

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

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

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

    .md\:w-9{
        width: 2.25rem;
    }

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

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

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

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

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

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

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

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

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

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

    .md\:gap-10{
        gap: 2.5rem;
    }

    .md\:gap-12{
        gap: 3rem;
    }

    .md\:gap-14{
        gap: 3.5rem;
    }

    .md\:gap-16{
        gap: 4rem;
    }

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

    .md\:gap-20{
        gap: 5rem;
    }

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

    .md\:gap-5{
        gap: 1.25rem;
    }

    .md\:gap-6{
        gap: 1.5rem;
    }

    .md\:gap-8{
        gap: 2rem;
    }

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

    .md\:border-8{
        border-width: 8px;
    }

    .md\:border-l{
        border-left-width: 1px;
    }

    .md\:border-l-8{
        border-left-width: 8px;
    }

    .md\:border-stone-300{
        --tw-border-opacity: 1;
        border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
    }

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

    .md\:p-0{
        padding: 0px;
    }

    .md\:p-10{
        padding: 2.5rem;
    }

    .md\:p-12{
        padding: 3rem;
    }

    .md\:p-14{
        padding: 3.5rem;
    }

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

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

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

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

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

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

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

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

    .md\:py-14{
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

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

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

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

    .md\:py-28{
        padding-top: 7rem;
        padding-bottom: 7rem;
    }

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

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

    .md\:pb-24{
        padding-bottom: 6rem;
    }

    .md\:pb-28{
        padding-bottom: 7rem;
    }

    .md\:pb-36{
        padding-bottom: 9rem;
    }

    .md\:pb-6{
        padding-bottom: 1.5rem;
    }

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

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

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

    .md\:pt-36{
        padding-top: 9rem;
    }

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

    .md\:pt-40{
        padding-top: 10rem;
    }

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

    .md\:pt-\[34vh\]{
        padding-top: 34vh;
    }

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

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

    .md\:text-4xl{
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

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

    .md\:text-6xl{
        font-size: 3.75rem;
        line-height: 1;
    }

    .md\:text-7xl{
        font-size: 4.5rem;
        line-height: 1;
    }

    .md\:text-\[1\.75rem\]{
        font-size: 1.75rem;
    }

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

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

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

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

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

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

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

    .md\:text-blue-700{
        --tw-text-opacity: 1;
        color: rgb(29 78 216 / var(--tw-text-opacity, 1));
    }

    .md\:hover\:bg-transparent:hover{
        background-color: transparent;
    }

    .md\:hover\:text-blue-700:hover{
        --tw-text-opacity: 1;
        color: rgb(29 78 216 / var(--tw-text-opacity, 1));
    }
}

@media (min-width: 1300px){

    .lg\:sticky{
        position: sticky;
    }

    .lg\:top-8{
        top: 2rem;
    }

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

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

    .lg\:block{
        display: block;
    }

    .lg\:h-96{
        height: 24rem;
    }

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

    .lg\:h-\[32rem\]{
        height: 32rem;
    }

    .lg\:max-h-\[calc\(100vh-4rem\)\]{
        max-height: calc(100vh - 4rem);
    }

    .lg\:w-64{
        width: 16rem;
    }

    .lg\:w-\[32rem\]{
        width: 32rem;
    }

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

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

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

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

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

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

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

    .lg\:gap-6{
        gap: 1.5rem;
    }

    .lg\:gap-8{
        gap: 2rem;
    }

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

    .lg\:p-10{
        padding: 2.5rem;
    }

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

    .lg\:px-10{
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

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

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

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

    .lg\:text-4xl{
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

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

    .lg\:text-6xl{
        font-size: 3.75rem;
        line-height: 1;
    }

    .lg\:text-7xl{
        font-size: 4.5rem;
        line-height: 1;
    }

    .lg\:text-8xl{
        font-size: 6rem;
        line-height: 1;
    }

    .lg\:text-9xl{
        font-size: 8rem;
        line-height: 1;
    }

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

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

.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *){
    --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));
}

.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 1;
}

@media (prefers-color-scheme: dark){

    .dark\:border-gray-700{
        --tw-border-opacity: 1;
        border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    }

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

    .dark\:hover\:bg-gray-700:hover{
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    }

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

@media (min-width: 768px){

    @media (prefers-color-scheme: dark){

        .md\:dark\:text-blue-500{
            --tw-text-opacity: 1;
            color: rgb(59 130 246 / var(--tw-text-opacity, 1));
        }

        .md\:dark\:hover\:bg-transparent:hover{
            background-color: transparent;
        }

        .md\:dark\:hover\:text-blue-500:hover{
            --tw-text-opacity: 1;
            color: rgb(59 130 246 / var(--tw-text-opacity, 1));
        }
    }
}

/* ==============================
   Campaign pages

   These rules are unlayered, so they automatically beat the
   typography defaults in @layer typography (style.css).
   No .campaign class or :not() exclusions needed.
   ============================== */

/* Demand list */
.campaign-demands {
    margin: 3rem 0;
}

.campaign-demand {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0 1.25rem;
    align-items: baseline;
    padding: 2rem 0;
    border-top: 1px solid rgba(26, 88, 46, 0.12);
}

.campaign-demand:last-child {
    border-bottom: 1px solid rgba(26, 88, 46, 0.12);
}

.campaign-demand-number {
    font-family: "Source Serif 4", serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #3c8d4f;
}

.campaign-demand h3 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a582e;
    margin: 0 0 0.5rem;
}

.campaign-demand p {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* Petition widget */
.campaign-petition {
    margin: 3rem 0;
}

.campaign-petition-votes {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.campaign-petition-vote-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.campaign-petition-vote-btn--up {
    background: #1a582e;
    color: #fff;
    border-color: #1a582e;
}

.campaign-petition-vote-btn--up:hover {
    background: #3c8d4f;
    border-color: #3c8d4f;
}

.campaign-petition-vote-btn--down {
    background: transparent;
    color: #666;
    border-color: #d1d5db;
}

.campaign-petition-vote-btn--down:hover {
    background: #fef2f2;
    color: #991b1b;
    border-color: #991b1b;
}

/* Vote tally */
.campaign-petition-tally {
    margin-bottom: 1.25rem;
}

.campaign-petition-bar {
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    background: #e5e7eb;
}

.campaign-petition-bar-up {
    background: #3c8d4f;
    transition: width 0.4s;
}

.campaign-petition-bar-down {
    background: #dc2626;
    transition: width 0.4s;
}

.campaign-petition-counts {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
}

.campaign-petition-count {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    color: #666;
}

.campaign-petition-count i,
.campaign-petition-count svg {
    margin-right: 0.25rem;
}

.campaign-petition-fine-print {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.75rem;
}

/* Email verification */
.campaign-petition-email {
    display: flex;
}

.campaign-petition-email input {
    flex: 1;
    padding: 1rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.05rem;
    border: 2px solid rgba(26, 88, 46, 0.2);
    border-right: none;
    color: #1a582e;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.campaign-petition-email input:focus {
    border-color: #3c8d4f;
}

.campaign-petition-email input::-moz-placeholder {
    color: #aaa;
}

.campaign-petition-email input::placeholder {
    color: #aaa;
}

.campaign-petition-email button {
    padding: 1rem 1.5rem;
    background: #1a582e;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.campaign-petition-email button:hover {
    background: #3c8d4f;
}

/* Confirmation */
.campaign-petition-confirm {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid rgba(60, 141, 79, 0.3);
    padding: 1.25rem 1.5rem;
}

.campaign-petition-confirm i,
.campaign-petition-confirm svg {
    font-size: 1.5rem;
    color: #3c8d4f;
    flex-shrink: 0;
}

.campaign-petition-confirm-title {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a582e;
    margin: 0;
}

.campaign-petition-confirm-sub {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.85rem;
    color: #333;
    margin: 0.15rem 0 0;
}

/* Fundraising card */
.campaign-fund-card {
    border: 2px solid rgba(26, 88, 46, 0.15);
    margin: 0 0 3rem;
}

.campaign-fund-header {
    background: #1a582e;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.campaign-fund-header i,
.campaign-fund-header svg {
    color: #fff;
    font-size: 1.15rem;
}

.campaign-fund-header h2 {
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.campaign-fund-body {
    padding: 1.5rem;
}

.campaign-fund-body h3 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a582e;
    margin: 0 0 0.75rem;
}

.campaign-fund-body p {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: #333;
    margin: 0;
}

.campaign-fund-progress {
    border-top: 1px solid rgba(26, 88, 46, 0.1);
    padding: 1.25rem 1.5rem;
    background: rgba(60, 141, 79, 0.04);
}

.campaign-fund-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.campaign-fund-progress-header span {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a582e;
}

.campaign-fund-bar {
    width: 100%;
    height: 0.5rem;
    background: #e5e7eb;
    overflow: hidden;
}

.campaign-fund-bar-fill {
    height: 100%;
    background: #3c8d4f;
    transition: width 0.4s;
}

.campaign-fund-progress-note {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    color: #666;
    margin: 0.5rem 0 0;
}

/* Research questions */
.campaign-questions {
    margin: 2rem 0 3rem;
}

.campaign-question {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0 1rem;
    align-items: start;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(26, 88, 46, 0.08);
}

.campaign-question:last-child {
    border-bottom: 1px solid rgba(26, 88, 46, 0.08);
}

.campaign-question i,
.campaign-question svg {
    font-size: 1.1rem;
    color: #3c8d4f;
    margin-top: 0.15rem;
}

.campaign-question h4 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1a582e;
    margin: 0 0 0.35rem;
}

.campaign-question p {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #333;
    margin: 0;
}

/* Three-step process */
.campaign-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}

@media (max-width: 640px) {
    .campaign-steps {
        grid-template-columns: 1fr;
    }
}

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

.campaign-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #1a582e;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
}

.campaign-step h4 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1a582e;
    margin: 0 0 0.25rem;
}

.campaign-step p {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Donate CTA */
.campaign-donate-btn {
    display: block;
    max-width: 28rem;
    margin: 0 auto 0.75rem;
    padding: 1.1rem 2rem;
    background: #1a582e;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}

.campaign-donate-btn:hover {
    background: #3c8d4f;
    color: #fff;
}

.campaign-donate-btn i,
.campaign-donate-btn svg {
    margin-right: 0.5rem;
}

.campaign-donate-note {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    color: #999;
    text-align: center;
    margin: 0 0 3rem;
}
@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translateX(25%)}to{opacity:1;transform:translateX(0)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translateX(13%)}to{transform:scale(1) translateY(-45%) translateX(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px 0 rgba(0,0,0,.25);position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);animation:notyf-fadeoutdown .3s forwards;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translateX(0)}.notyf__toast--disappear .notyf__message{animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translateX(13%);z-index:5;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;animation:notyf-fadeinleft .3s forwards;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:rgba(0,0,0,.25);border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:rgba(0,0,0,.15)}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px 0 rgba(0,0,0,.13);width:100%}.notyf__dismiss{width:56px}}