/* Font @imports removed — fonts are now loaded via a single <link> in index.html for faster first paint */

:root {
  --pp-veg-icon: #3F6B4A;
  --pp-non-veg-icon: #A64A2E;
  --pp-overlay-bg: 0 0% 0%;
  --pp-white: 0 0% 100%;
  --pp-black: 0 0% 0%;
  --pp-header-h: 88px;
  --pp-hero-eyebrow-shadow: 0 1px 1px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.35);
  --pp-hero-text-shadow: 0 1px 1px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.35);
  --pp-mustard: 42 68% 51%;        /* #D6A32E */
  --pp-mustard-lit: 42 86% 63%;    /* #F2C14E — lit golden hover */
  --pp-mustard-hover: 42 72% 57%;  /* #E3B545 — lighter mustard for hover */
  --pp-mustard-pressed: 38 68% 45%;/* #C8951F — active/pressed gold */
  --pp-how-num: var(--pp-mustard);  /* big step numbers — mustard at 40% alpha */
  --pp-menu-backdrop: 20 50% 12%;  /* #2B1A10 — mobile menu backdrop tint */
  --pp-track-brown: 28 55% 18%;    /* #4A2E14 — Track Order button bg */
  --pp-wa-green: 142 70% 45%;      /* #25D366 — WhatsApp green */
  --pp-how-title-shadow: 0 1px 1px hsl(0 0% 0% / 0.45), 0 2px 8px hsl(0 0% 0% / 0.25);
  --pp-how-body-shadow: 0 1px 2px hsl(0 0% 0% / 0.45);
  --pp-dark-brown: 20 47% 12%;     /* #2B1A10 */
  --pp-deep-rust: 10 63% 29%;      /* #7A2F1C */
  --pp-brand-maroon: 10 82% 25%;   /* #6E1F0E — richer brand name maroon */
  --pp-paper: 48 100% 99%;         /* #FFFDF6 */
  --pp-white-dim: 0 0% 100%;
  --pp-capsule-shadow: 0 3px 0 hsl(var(--pp-deep-rust) / 0.45);
  --pp-slot-text-shadow: 0 2px 0 hsl(var(--pp-deep-rust) / 0.55);

  /* Meal card polaroid + pin */
  --pp-polaroid-frame: 40 62% 87%;  /* #F4E9C9 warm cream */
  --pp-pin-teal: 196 49% 23%;       /* #1E4B57 deep teal */
  --pp-pin-needle: 196 49% 23%;     /* same teal at low opacity for needle */
  --pp-hero-divider: 60 100% 99%;   /* #FFFDF6 paper white for hero divider line */
  /* ── Ingredient card tones (Part 2) ── */
  --pp-ing-chicken: 29 55% 65%;     /* #D9A774 */
  --pp-ing-eggs: 44 85% 75%;        /* #F5D98A */
  --pp-ing-paneer: 40 50% 93%;      /* #F7F1E3 */
  --pp-ing-pumpkin: 27 82% 63%;     /* #EE9B52 */
  --pp-ing-beetroot: 320 52% 36%;   /* #8E2C6B */
  --pp-ing-carrots: 101 24% 39%;    /* #5A8A3C */
  --pp-ing-gourd: 82 47% 65%;       /* #B7D17A */
  --pp-ing-quinoa: 34 28% 63%;      /* #CDB894 */
  --pp-ing-oats: 38 44% 80%;        /* #E6D8B8 */
  --pp-ing-fish: 205 51% 37%;       /* #2E6A8E */
  --pp-ing-coconut: 25 30% 36%;     /* #7B5A3C */
  --pp-ing-curd: 200 33% 87%;       /* #E4EEF2 */
  --pp-ing-fallback: 40 62% 93%;    /* #FBF3E4 */
  --pp-ing-dark: 20 35% 16%;        /* #2B1A10 */
  --pp-ing-paper: 60 100% 99%;      /* #FFFDF6 */
  /* ── No List section tokens ── */
  --pp-no-section-bg: 10 64% 37%;   /* #A64A2E brick — overridden per-section to #7A2F1C */
  --pp-no-maroon: 10 64% 28%;       /* #7A2F1C deep maroon */
  --pp-journal-bg: 10 64% 37%;      /* #A64A2E — journal page base, same as brick */
  --pp-journal-section-solid: 10 64% 28%; /* #7A2F1C — solid opaque section bg below hero */
  --pp-rust-alert: 14 72% 52%;           /* #FF7A52-ish — kitchen clock pulse dot */
  --pp-paper-header: 48 100% 99%;        /* #FFFDF6 — new light header bg */
  --pp-cream-section: 38 62% 93%;        /* #F6EAD7 — hero/cream section bg */
  --pp-card-warm: 40 62% 93%;            /* #FBF3E4 — warm card bg */
  --pp-teal-section: 196 49% 23%;        /* #1E4B57 — Pawly section bg */
  --pp-rust-section: 14 52% 41%;         /* #9B3622 — rust CTA section */
  --pp-line-warm: 38 45% 82%;            /* #E4D0B0 — warm divider line */
  --pp-ink2: 20 12% 28%;                 /* #5A4636 — secondary text */
  /* ── Admin panel extras ── */
  --ppa-overlay: 0 0% 0%;               /* modal backdrop — use at /0.4 */
  --ppa-btn-white: 0 0% 100%;           /* button text on dark bg */
  --ppa-blue: 210 100% 40%;             /* recoverable payment status */
  --ppa-blue-bg: 210 100% 95%;          /* recoverable payment status bg */


/* ── Kitchen hero text — paper title, mustard/paper subtitle on video ── */
.pp-kitchen-hero-title {
  color: hsl(var(--pp-paper));
  text-shadow: 0 2px 12px hsl(0 0% 0% / 0.55), 0 1px 2px hsl(0 0% 0% / 0.60);
}
/* Subtitle: first line mustard 600, second line paper 90%.
   Since we can't split React-owned text nodes, we style the whole block
   as paper 90% and rely on the animation hook to handle the first line
   separately if needed. The mustard line is achieved via a CSS first-line
   trick on the whitespace-pre-line paragraph. */
.pp-kitchen-hero-subtitle {
  color: hsl(var(--pp-paper) / 0.90);
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.60);
}
.pp-kitchen-hero-subtitle::first-line {
  color: hsl(var(--pp-mustard));
  font-weight: 600;
}

/* ── Kitchen "Who's eating?" panel — cream bg, dark brown text ── */
.pp-whos-eating-panel {
  background: hsl(var(--pp-cream-panel));
  border-bottom: 1px solid hsl(var(--pp-deep-rust) / 0.15);
}
.pp-whos-eating-input {
  background: hsl(var(--pp-paper));
  border: 1.5px solid hsl(var(--pp-deep-rust) / 0.35);
  border-radius: 14px;
  height: 52px;
  color: hsl(var(--pp-dark-brown));
  font-size: 16px;
  padding: 0 20px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.pp-whos-eating-input::-moz-placeholder {
  color: hsl(var(--pp-dark-brown) / 0.45);
}
.pp-whos-eating-input::placeholder {
  color: hsl(var(--pp-dark-brown) / 0.45);
}
.pp-whos-eating-input:focus {
  border-color: hsl(var(--pp-mustard));
  box-shadow: 0 0 0 3px hsl(var(--pp-mustard) / 0.35);
}
.pp-whos-eating-label {
  color: hsl(var(--pp-dark-brown));
  font-weight: 600;
  font-size: 13px;
}
.pp-dog-chip {
  background: hsl(var(--pp-paper));
  border: 1.5px solid rgba(122,47,28,0.35);
  color: hsl(var(--pp-dark-brown));
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
}
.pp-dog-chip-active {
  background: hsl(var(--pp-mustard));
  border-color: hsl(var(--pp-deep-rust));
  color: hsl(var(--pp-dark-brown));
  box-shadow: 0 0 14px hsl(var(--pp-mustard) / 0.35);
  transform: scale(1.04);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
}
.pp-dog-chip-icon {
  color: rgba(43,26,16,0.8);
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.pp-dog-chip-icon:hover,
.pp-dog-chip-icon:active {
  color: hsl(var(--pp-deep-rust));
}
.pp-add-dog-btn:hover,
.pp-add-dog-btn:active {
  background: hsl(var(--pp-deep-rust) / 0.08) !important;
}

/* ── Our Ingredients hero text — O3 visibility pass ── */
.pp-ing-hero-eyebrow {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: hsl(var(--pp-paper));
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.4);
  -webkit-font-smoothing: antialiased;
}
.pp-ing-hero-line1 {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.35);
  -webkit-font-smoothing: antialiased;
}
.pp-ing-hero-line2 {
  display: block;
  overflow: hidden;
  font-weight: 600;
  color: hsl(var(--pp-mustard-lit));
  text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.35);
  -webkit-font-smoothing: antialiased;
}
.pp-ing-hero-body {
  font-weight: 500;
  color: hsl(var(--pp-paper));
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.4);
  -webkit-font-smoothing: antialiased;
}
/* O3 hairline outlines — scoped to the Our Ingredients hero */
@supports (paint-order: stroke fill) {
  [data-pp-ing-hero] .pp-ing-hero-line1,
  [data-pp-ing-hero] .pp-ing-hero-line1 span {
    -webkit-text-stroke: 0.6px hsl(var(--pp-mustard-lit));
    paint-order: stroke fill;
  }
  [data-pp-ing-hero] .pp-ing-hero-line2,
  [data-pp-ing-hero] .pp-ing-hero-line2 span {
    -webkit-text-stroke: 0.6px hsl(var(--pp-paper));
    paint-order: stroke fill;
  }
  [data-pp-ing-hero] .pp-ing-hero-eyebrow,
  [data-pp-ing-hero] .pp-ing-hero-eyebrow span,
  [data-pp-ing-hero] .pp-ing-hero-body,
  [data-pp-ing-hero] .pp-ing-hero-body span {
    -webkit-text-stroke: 0.35px hsl(var(--pp-mustard-lit) / 0.85);
    paint-order: stroke fill;
  }
}

.pp-journal-hero-title {
  color: hsl(var(--pp-paper));
  text-shadow: 0 2px 12px hsl(0 0% 0% / 0.55);
}
.pp-journal-hero-subtitle {
  color: hsl(var(--pp-paper));
  opacity: 0.85;
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.60);
}
/* Sections below the hero — fully opaque, no ghost video bleed */
.pp-journal-section-solid {
  background: hsl(var(--pp-journal-section-solid));
}
.pp-journal-section-featured {
  background: hsl(var(--pp-journal-bg));
}
.pp-journal-section-grid {
  background: hsl(var(--pp-journal-bg));
}
.pp-journal-section-cta {
  background: hsl(var(--pp-journal-bg));
}  --pp-no-mustard: 40 65% 51%;      /* #D6A32E mustard */
  --pp-no-cream: 40 62% 93%;        /* #FBF3E4 cream card bg */
  --pp-no-dark: 20 35% 16%;         /* #2B1A10 dark brown text */
  --pp-no-paper: 60 100% 99%;       /* #FFFDF6 paper white */
  --pp-no-shadow: 10 52% 23%;       /* #5C2416 shadow colour */
  --pp-no-black: 0 0% 0%;           /* pure black for box-shadow spread */
  --pp-card-shadow-dark: 20 47% 12%; /* reuse dark-brown for card shadows */
  --pp-ink: 20 55% 15%;              /* #3B1A0A — very dark brown ink */
  --pp-cream-panel: 36 62% 90%;      /* #F6EAD7 — featured story cream panel */
  /* Journal card tones */
  --pp-jcard-sage: 101 24% 65%;      /* #A7C08F sage */
  --pp-jcard-sage-text: 20 47% 12%;  /* dark */
  --pp-jcard-teal: 196 49% 23%;      /* #1E4B57 teal */
  --pp-jcard-teal-text: 48 100% 99%; /* paper */
  --pp-jcard-pumpkin: 27 82% 63%;    /* #EE9B52 pumpkin */
  --pp-jcard-pumpkin-text: 20 47% 12%;
  --pp-jcard-beet: 330 52% 65%;      /* #D77A99 beet pink */
  --pp-jcard-beet-text: 20 47% 12%;
  --pp-jcard-ocean: 205 51% 37%;     /* #2E6A8E ocean */
  --pp-jcard-ocean-text: 48 100% 99%;
  --pp-jcard-cream: 40 62% 93%;      /* #FBF3E4 cream */
  --pp-jcard-cream-text: 20 47% 12%;

  /* Meal card body tones */
  --pp-tone-chicken: 22 57% 89%;    /* #F5E1D0 milky peach */
  --pp-tone-chicken-text: 20 47% 12%; /* #2B1A10 dark brown */
  --pp-tone-chicken-accent: 18 58% 40%; /* #A5582C */
  --pp-tone-garden: 122 18% 82%;    /* #DDEBDC milky mint */
  --pp-tone-garden-text: 20 47% 12%; /* #2B1A10 dark brown */
  --pp-tone-garden-accent: 133 27% 32%; /* #3E6B47 */
  --pp-tone-amber: 43 62% 88%;      /* #F5EBCF milky butter */
  --pp-tone-amber-text: 20 47% 12%; /* #2B1A10 dark brown */
  --pp-tone-amber-accent: 42 63% 33%; /* #8A6A1F */
  --pp-tone-velvet: 345 44% 89%;    /* #F2DAE0 milky rose */
  --pp-tone-velvet-text: 20 47% 12%; /* #2B1A10 dark brown */
  --pp-tone-velvet-accent: 337 35% 42%; /* #93455E */

  /* Batch 22 — solid brick ground: #A64A2E replaces washed paper */
  --paper-washed: #A64A2E;

  /* Hero scrim — #1C1A14 at 70% over video. Composite: #FFFDF6 text 11.59:1, #D6A32E 5.13:1 */
  --pp-hero-scrim: 43 14% 9%;

  /* Footer divider — paper-white at 12% on ink */
  --pp-footer-divider: 60 100% 98%;
  /* Footer copyright text — #B5AF9F muted on ink (7.95:1) */
  --pp-footer-copy: 40 10% 66%;

  /* Task 13.2 — display and handwritten font tokens */
  --font-display: 'Anton', sans-serif;
  --font-hand:    'Caveat', cursive;
}

*, ::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.18 | 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: var(--font-sans); /* 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: var(--font-mono); /* 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;
}
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  :root {
    /* ══════════════════════════════════════════════════════
       THEME: Mustard & Ink — Batch 14
       Ground paper:   #FFFDF6  near-white default
       Ground washed:  #F5F0E9  chestnut-tinted paper (Batch 19)
       Ground mustard: #D6A32E  feature colour
       Ground ink:     #1C1A14  deep band
       ══════════════════════════════════════════════════════ */

    /* ── Three section grounds ── */
    --ground-paper:   14 58% 41%;    /* #A64A2E brick (Batch 22) */
    --ground-mustard: 42 68% 51%;    /* #D6A32E mustard */
    --ground-ink:     43 14% 9%;     /* #1C1A14 deep ink */

    /* ── Text tokens (exact WCAG-measured values) ── */
    --text-on-paper:    43 14% 9%;   /* #1C1A14  17.09:1 on paper */
    --text-on-mustard:  43 14% 9%;   /* #1C1A14   7.57:1 on mustard */
    --text-on-ink:      60 100% 98%; /* #FFFDF6  17.09:1 on ink */
    /* Muted text */
    --muted-on-paper:   30 8% 25%;   /* #4A4437   9.49:1 on paper */
    --faint-on-paper:   30 6% 38%;   /* #6B6355   5.83:1 on paper */
    --muted-on-mustard: 30 13% 20%;  /* #3A342B   5.36:1 on mustard */
    --muted-on-ink:     40 10% 66%;  /* #B5AF9F   7.95:1 on ink */

    /* ── Accent ── */
    --mustard-deep:     38 78% 26%;  /* #7A5A0E — mustard-deep for text on paper (6.26:1) */

    /* ── Four meal colours ── */
    --meal-chicken-harvest: 14 58% 41%;  /* #A64A2E brick (non-veg) */
    --meal-garden-ribbon:   14 59% 34%;  /* #8C3B22 deep rust (non-veg) */
    --meal-amber-meadow:    138 27% 33%; /* #3F6B4A forest green (veg) */
    --meal-velvet-garden:   88 32% 36%;  /* #5E7A3C olive green (veg) */

    /* ── shadcn semantic tokens mapped to Mustard & Ink ── */
    /* Default page = brick ground (Batch 22) */
    --background: 14 58% 41%;         /* #A64A2E brick */
    --foreground: 60 100% 98%;        /* #FFFDF6 on brick — 5.67:1 */

    /* Card = cream #FBF3E4 with dark brown text */
    --card: 40 67% 93%;              /* #FBF3E4 card cream */
    --card-foreground: 22 47% 12%;   /* #2B1A10 dark brown */

    --popover: 40 67% 93%;
    --popover-foreground: 22 47% 12%;

    /* Primary button = mustard bg + dark text */
    --primary: 42 68% 51%;           /* #D6A32E mustard */
    --primary-foreground: 43 14% 10%; /* #1C1A14 dark text on mustard */

    /* Secondary = ink bg + light text */
    --secondary: 43 14% 9%;          /* #1C1A14 ink */
    --secondary-foreground: 60 100% 98%; /* #FFFDF6 */

    /* Muted = warm grey on paper */
    --muted: 48 30% 93%;             /* warm light grey */
    --muted-foreground: 30 8% 25%;   /* #4A4437 — 9.49:1 on paper */

    /* Accent = mustard-deep for icons/accents on paper */
    --accent: 38 78% 26%;            /* #7A5A0E mustard-deep */
    --accent-foreground: 60 100% 98%; /* #FFFDF6 */

    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 98%;

    /* Borders */
    --border: 43 14% 10%;            /* #1C1A14 at 14% — use /0.14 opacity */
    --input:  48 30% 93%;            /* warm light grey for inputs */
    --ring:   42 68% 51%;            /* mustard focus ring */

    /* ── Named palette tokens (single source of truth) ── */
    --pp-ground-paper:    14 58% 41%;   /* #A64A2E brick (Batch 22) */
    --pp-ground-mustard:  42 68% 51%;   /* #D6A32E */
    --pp-ground-ink:      43 14% 9%;    /* #1C1A14 */
    --pp-text-paper:      43 14% 9%;    /* #1C1A14  15.34:1 on #F5F0E9 */
    --pp-text-mustard:    43 14% 9%;    /* #1C1A14   7.57:1 on mustard */
    --pp-text-ink:        60 100% 98%;  /* #FFFDF6  17.09:1 on ink */
    --pp-muted-paper:     30 8% 25%;    /* #4A4437   8.8:1 on #F5F0E9 */
    --pp-faint-paper:     30 6% 38%;    /* #6B6355   5.4:1 on #F5F0E9 */
    --pp-muted-mustard:   30 13% 20%;   /* #3A342B   5.36:1 on mustard */
    --pp-muted-ink:       40 10% 66%;   /* #B5AF9F   7.95:1 on ink */
    --pp-line-paper:      43 14% 9%;    /* #1C1A14 at 14% */
    --pp-line-mustard:    43 14% 9%;    /* #1C1A14 at 22% */
    --pp-line-ink:        60 100% 98%;  /* #FFFDF6 at 18% */
    --pp-mustard-deep:    38 78% 26%;   /* #7A5A0E — 5.62:1 on #F5F0E9 */
    --pp-meal-ch:         14 58% 41%;   /* #A64A2E chicken-harvest brick */
    --pp-meal-gr:         14 59% 34%;   /* #8C3B22 garden-ribbon deep rust */
    --pp-meal-am:         138 27% 33%;  /* #3F6B4A amber-meadow forest green */
    --pp-meal-vg:         88 32% 36%;   /* #5E7A3C velvet-garden olive */

    /* Legacy tokens kept for backward compat — mapped to new system */
    --pp-ground:        43 14% 9%;      /* ink (was red) */
    --pp-field:         14 58% 41%;     /* brick (Batch 22) */
    --pp-type-dark:     60 100% 98%;    /* text on ink */
    --pp-type-light:    43 14% 9%;      /* text on paper */
    --pp-brass:         42 68% 51%;     /* mustard (was brass) */
    --pp-brass-on-dark: 42 68% 65%;     /* mustard lightened for text on ink — 7.57:1 */
    --pp-veg-code:      138 27% 33%;    /* forest green (amber-meadow) */
    --pp-veg-on-dark:   138 27% 55%;    /* lightened for text on ink */
    --pp-non-veg-code:  14 58% 41%;     /* brick (chicken-harvest) */
    --pp-card-dark:     43 14% 13%;     /* card on ink */

    --text-secondary: 30 8% 25%;       /* #4A4437 muted on paper */
    --text-muted:     30 6% 38%;       /* #6B6355 faint on paper */

    /* Chart colours */
    --chart-1: 42 68% 51%;
    --chart-2: 42 68% 40%;
    --chart-3: 138 27% 33%;
    --chart-4: 14 58% 41%;
    --chart-5: 43 14% 9%;

    /* Sidebar */
    --sidebar: 43 14% 9%;
    --sidebar-foreground: 60 100% 98%;
    --sidebar-primary: 42 68% 51%;
    --sidebar-primary-foreground: 43 14% 10%;
    --sidebar-accent: 43 14% 13%;
    --sidebar-accent-foreground: 60 100% 98%;
    --sidebar-border: 60 100% 98%;
    --sidebar-ring: 36 50% 48%;

    /* Typography */
    --font-sans:    "DM Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Playfair Display", Georgia, serif;
    --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
    --font-mono:    ui-monospace, "SF Mono", Monaco, Consolas, "Courier New", monospace;

    /* Typography Scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    /* Line Heights */
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   1.75;

    /* Border Radius */
    --radius:    0.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Spacing */
    --spacing-xs:  0.5rem;
    --spacing-sm:  0.75rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Transitions */
    --transition-fast:   150ms;
    --transition-base:   250ms;
    --transition-slow:   300ms;
    --transition-slower: 400ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow:       0 2px 4px -1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.08);
    --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
    --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.15);
    --shadow-hover: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.08);

    /* ── Brass Glow — used for buttons & highlights ── */
    --shadow-gold: 0 4px 16px rgba(214,163,46,0.35);
    --shadow-gold-lg: 0 6px 24px rgba(214,163,46,0.5);
  }

  * {
  border-color: hsl(var(--border));
}

  body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

  .pp-section-manifesto body,
.pp-section-goal body,
.pp-section-ingredients body,
.pp-section-trust body,
.pp-section-testimonials body,
.pp-concierge-bg body,
.pp-page-checkout body { color: #FFFDF6; }

  .pp-section-how body,
.pp-cta-band body,
.pp-footer-bg body,
.pp-page-founders body,
.pp-page-story body,
.pp-page-ingredients-full body,
.pp-page-faq body,
.pp-page-journal body,
.pp-page-article body,
.pp-page-auth body,
.pp-page-meal body,
.pp-page-profile body,
.pp-page-admin body,
.pp-page-thankyou body,
.pp-page-404 body,
.pp-page-privacy body,
.kitchen-page-bg body { color: #FFFDF6; }

  .pp-section-closing body,
.pp-concierge-bg body { color: #2B1A10; }

  .pp-section-hero body { color: #1C1A14; }

  
.pp-founders-card body {
  color: rgba(43,26,16,0.85);
  font-size: 16px;
  line-height: 1.7;
}

  
.pp-founders-values-block body {
  color: rgba(43,26,16,0.85);
}

  
.pp-founders-cta-card body {
  color: rgba(43,26,16,0.85);
}

  .pp-page-meal body,
.pp-page-profile body,
.pp-page-admin body { color: #FFFDF6; }

  .pp-page-privacy body,
.pp-page-admin body,
.pp-page-profile body { color: #FFFDF6; }

  .pp-auth-card body { color: #FFFDF6; }

  .pp-profile-card body,
.pp-admin-card body { color: #FFFDF6; }

  [data-cart-bar] body {
  color: #FFFDF6;
}

  .pp-page-meal.pp-meal-light body{color:#2B1A10}

  body {
    font-family: 'DM Sans', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  a, button, input, textarea, select {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

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

  .container {
    max-width: 1400px;
  }
}
.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 !important;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-12 {
  right: -3rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-8 {
  bottom: 2rem;
}
.bottom-\[-10\%\] {
  bottom: -10%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-10 {
  left: 2.5rem;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[-10\%\] {
  left: -10%;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-10 {
  right: 2.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-6 {
  right: 1.5rem;
}
.right-\[-10\%\] {
  right: -10%;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 2.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-\[-10\%\] {
  top: -10%;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[40\%\] {
  top: 40%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-m-2 {
  margin: -0.5rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.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;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.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-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.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;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-\[--cell-size\] {
  width: var(--cell-size);
  height: var(--cell-size);
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-44 {
  height: 11rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[--cell-size\] {
  height: var(--cell-size);
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[440px\] {
  height: 440px;
}
.h-\[44px\] {
  height: 44px;
}
.h-\[500px\] {
  height: 500px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[2000px\] {
  max-height: 2000px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[56px\] {
  min-height: 56px;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-\[80vh\] {
  min-height: 80vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[--cell-size\] {
  width: var(--cell-size);
}
.w-\[100px\] {
  width: 100px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[44px\] {
  width: 44px;
}
.w-\[500px\] {
  width: 500px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-11 {
  min-width: 2.75rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[--cell-size\] {
  min-width: var(--cell-size);
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[2rem\] {
  min-width: 2rem;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[900px\] {
  min-width: 900px;
}
.min-w-\[90px\] {
  min-width: 90px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.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-\[100px\] {
  max-width: 100px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[60px\] {
  max-width: 60px;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-screen-2xl {
  max-width: 1536px;
}
.max-w-screen-lg {
  max-width: 1024px;
}
.max-w-screen-md {
  max-width: 768px;
}
.max-w-screen-sm {
  max-width: 640px;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-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-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --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-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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));
}
.scale-\[1\.01\] {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[2\.2\] {
  --tw-scale-x: 2.2;
  --tw-scale-y: 2.2;
  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));
}
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) 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 ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s 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-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.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-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.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-14 {
  gap: 3.5rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[5px\] {
  gap: 5px;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.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-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-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));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border));
}
.divide-primary\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--primary) / 0.2);
}
.self-start {
  align-self: flex-start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-\[18px\] {
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-t-\[18px\] {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[\#25D366\]\/30 {
  border-color: rgb(37 211 102 / 0.3);
}
.border-\[hsl\(var\(--pp-brass\)\)\]\/30 {
  border-color: hsl(var(--pp-brass) / 0.3);
}
.border-\[hsl\(var\(--pp-veg-code\)\)\]\/30 {
  border-color: hsl(var(--pp-veg-code) / 0.3);
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-400\/20 {
  border-color: rgb(251 191 36 / 0.2);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-border {
  border-color: hsl(var(--border));
}
.border-border\/40 {
  border-color: hsl(var(--border) / 0.4);
}
.border-current {
  border-color: currentColor;
}
.border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}
.border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: hsl(var(--destructive) / 0.4);
}
.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 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-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-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-input {
  border-color: hsl(var(--input));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-primary {
  border-color: hsl(var(--primary));
}
.border-primary\/10 {
  border-color: hsl(var(--primary) / 0.1);
}
.border-primary\/15 {
  border-color: hsl(var(--primary) / 0.15);
}
.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}
.border-primary\/25 {
  border-color: hsl(var(--primary) / 0.25);
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-l-primary {
  border-left-color: hsl(var(--primary));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}
.bg-\[\#25D366\]\/10 {
  background-color: rgb(37 211 102 / 0.1);
}
.bg-\[hsl\(var\(--pp-brass\)\)\] {
  background-color: hsl(var(--pp-brass));
}
.bg-\[hsl\(var\(--pp-brass\)\)\]\/10 {
  background-color: hsl(var(--pp-brass) / 0.1);
}
.bg-\[hsl\(var\(--pp-brass\)\)\]\/5 {
  background-color: hsl(var(--pp-brass) / 0.05);
}
.bg-\[hsl\(var\(--pp-veg-code\)\)\] {
  background-color: hsl(var(--pp-veg-code));
}
.bg-\[hsl\(var\(--pp-veg-code\)\)\]\/10 {
  background-color: hsl(var(--pp-veg-code) / 0.1);
}
.bg-\[hsl\(var\(--pp-veg-code\)\)\]\/15 {
  background-color: hsl(var(--pp-veg-code) / 0.15);
}
.bg-accent {
  background-color: hsl(var(--accent));
}
.bg-accent\/10 {
  background-color: hsl(var(--accent) / 0.1);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/30 {
  background-color: rgb(251 191 36 / 0.3);
}
.bg-amber-400\/5 {
  background-color: rgb(251 191 36 / 0.05);
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.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-border {
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(var(--card));
}
.bg-card\/30 {
  background-color: hsl(var(--card) / 0.3);
}
.bg-card\/40 {
  background-color: hsl(var(--card) / 0.4);
}
.bg-card\/50 {
  background-color: hsl(var(--card) / 0.5);
}
.bg-card\/80 {
  background-color: hsl(var(--card) / 0.8);
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.bg-destructive\/20 {
  background-color: hsl(var(--destructive) / 0.2);
}
.bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: hsl(var(--foreground));
}
.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-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 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-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / 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-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-500\/5 {
  background-color: rgb(34 197 94 / 0.05);
}
.bg-green-900\/30 {
  background-color: rgb(20 83 45 / 0.3);
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  background-color: hsl(var(--muted));
}
.bg-muted\/10 {
  background-color: hsl(var(--muted) / 0.1);
}
.bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3);
}
.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: hsl(var(--muted) / 0.6);
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.bg-primary\/30 {
  background-color: hsl(var(--primary) / 0.3);
}
.bg-primary\/40 {
  background-color: hsl(var(--primary) / 0.4);
}
.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}
.bg-primary\/50 {
  background-color: hsl(var(--primary) / 0.5);
}
.bg-primary\/\[0\.03\] {
  background-color: hsl(var(--primary) / 0.03);
}
.bg-primary\/\[0\.04\] {
  background-color: hsl(var(--primary) / 0.04);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.bg-transparent {
  background-color: transparent;
}
.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\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.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-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[--cell-size\] {
  padding-left: var(--cell-size);
  padding-right: var(--cell-size);
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.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-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;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.font-mono {
  font-family: var(--font-mono);
}
.font-serif {
  font-family: var(--font-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-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-9xl {
  font-size: 8rem;
  line-height: 1;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[9px\] {
  font-size: 9px;
}
.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-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.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-6 {
  line-height: 1.5rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-\[0\.97\] {
  line-height: 0.97;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.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\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\<length\>\] {
  color: <length>;
}
.text-\[hsl\(var\(--pp-brass\)\)\] {
  color: hsl(var(--pp-brass));
}
.text-\[hsl\(var\(--pp-type-light\)\)\] {
  color: hsl(var(--pp-type-light));
}
.text-\[hsl\(var\(--pp-type-light\)\)\]\/40 {
  color: hsl(var(--pp-type-light) / 0.4);
}
.text-\[hsl\(var\(--pp-type-light\)\)\]\/70 {
  color: hsl(var(--pp-type-light) / 0.7);
}
.text-\[hsl\(var\(--pp-veg-code\)\)\] {
  color: hsl(var(--pp-veg-code));
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.text-amber-400\/80 {
  color: rgb(251 191 36 / 0.8);
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-500\/80 {
  color: rgb(245 158 11 / 0.8);
}
.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-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 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-card-foreground {
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-destructive\/60 {
  color: hsl(var(--destructive) / 0.6);
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.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-foreground {
  color: hsl(var(--foreground));
}
.text-foreground\/30 {
  color: hsl(var(--foreground) / 0.3);
}
.text-foreground\/40 {
  color: hsl(var(--foreground) / 0.4);
}
.text-foreground\/45 {
  color: hsl(var(--foreground) / 0.45);
}
.text-foreground\/50 {
  color: hsl(var(--foreground) / 0.5);
}
.text-foreground\/55 {
  color: hsl(var(--foreground) / 0.55);
}
.text-foreground\/60 {
  color: hsl(var(--foreground) / 0.6);
}
.text-foreground\/65 {
  color: hsl(var(--foreground) / 0.65);
}
.text-foreground\/70 {
  color: hsl(var(--foreground) / 0.7);
}
.text-foreground\/80 {
  color: hsl(var(--foreground) / 0.8);
}
.text-foreground\/90 {
  color: hsl(var(--foreground) / 0.9);
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 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-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / 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-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-input {
  color: hsl(var(--input));
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-primary\/30 {
  color: hsl(var(--primary) / 0.3);
}
.text-primary\/40 {
  color: hsl(var(--primary) / 0.4);
}
.text-primary\/50 {
  color: hsl(var(--primary) / 0.5);
}
.text-primary\/80 {
  color: hsl(var(--primary) / 0.8);
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.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-\[0_0_15px_hsl\(var\(--primary\)\/0\.15\)\] {
  --tw-shadow: 0 0 15px hsl(var(--primary)/0.15);
  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_hsl\(var\(--primary\)\/0\.3\)\] {
  --tw-shadow: 0 0 15px hsl(var(--primary)/0.3);
  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_20px_hsl\(var\(--primary\)\/0\.35\)\] {
  --tw-shadow: 0 4px 20px hsl(var(--primary)/0.35);
  --tw-shadow-colored: 0 4px 20px 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-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.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-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.ring-primary {
  --tw-ring-color: hsl(var(--primary));
}
.ring-primary\/30 {
  --tw-ring-color: hsl(var(--primary) / 0.3);
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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-\[100px\] {
  --tw-blur: blur(100px);
  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-\[120px\] {
  --tw-blur: blur(120px);
  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-xl {
  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  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);
}
.invert {
  --tw-invert: invert(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);
}
.sepia {
  --tw-sepia: sepia(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-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);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  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-100 {
  transition-duration: 100ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.fade-in-80 {
  --tw-enter-opacity: 0.8;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-100 {
  animation-duration: 100ms;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
  .animate-in {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }

  .fade-in {
    animation-name: fadeIn;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
.\[--cell-size\:2rem\] {
  --cell-size: 2rem;
}

/* Lenis handles smooth scrolling — native scroll-behavior is disabled to avoid conflict */
html {
  scroll-behavior: auto;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--paper-washed);
  /* Prevent rubber-band overscroll fighting with Lenis */
  overscroll-behavior: none;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  background-color: var(--paper-washed);
  overscroll-behavior: none;
}

/* Mobile: only clip overflow on the root — do NOT apply max-width:100vw to
   every element (*). That rule forces a layout recalculation on every DOM
   node on every scroll tick, which is the primary cause of scroll jank.
   The marquee track, carousels, and any element wider than the viewport
   need to overflow freely — clamping them to 100vw breaks their layout. */
@media (max-width: 768px) {
  /* Only box-sizing reset — safe and needed */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Backdrop blur is GPU-expensive on mobile — replace with solid fallback */
  .backdrop-blur-sm,
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   PREMIUM DESIGN SYSTEM — Paw's Pantry
   ══════════════════════════════════════════════════════ */

/* Scroll-reveal — CSS transition driven by IntersectionObserver adding .is-visible */
.pp-reveal {
  opacity: 0;
  transform: translateY(20px);  /* reduced from 28px — less paint area during transition */
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  /* will-change only while hidden — browser promotes layer just before transition,
     demotes after .is-visible is added and transition completes */
  will-change: opacity, transform;
}
.pp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* release compositor layer after animation */
}
.pp-reveal-left  { opacity:0; transform:translateX(-24px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.pp-reveal-right { opacity:0; transform:translateX(24px);  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.pp-reveal-left.is-visible, .pp-reveal-right.is-visible { opacity:1; transform:translateX(0); will-change: auto; }
.pp-delay-1 { transition-delay: 0.07s; }
.pp-delay-2 { transition-delay: 0.14s; }
.pp-delay-3 { transition-delay: 0.21s; }
.pp-delay-4 { transition-delay: 0.28s; }
.pp-delay-5 { transition-delay: 0.35s; }

/* ── Button fill-from-cursor (Task 3.2) ─────────────────────────────────────
   A ::before circle grows from the cursor entry point.
   JS sets --fx-x / --fx-y and toggles .is-fx to scale(1).
   Buttons need position:relative, overflow:hidden, isolation:isolate.
   ─────────────────────────────────────────────────────────────────────────── */
.pp-btn-gold,
.pp-btn-brick-primary,
.pp-btn-brick-secondary,
.pp-btn-wa,
.pp-back-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pp-btn-gold::before,
.pp-btn-brick-primary::before,
.pp-btn-brick-secondary::before,
.pp-btn-wa::before,
.pp-back-btn::before {
  content: '';
  position: absolute;
  width: 250%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
  z-index: -1;
  pointer-events: none;
}

/* Circle colours */
.pp-btn-gold::before        { background: hsl(var(--pp-mustard-lit)); }
.pp-btn-brick-primary::before  { background: #D6A32E; }
.pp-btn-brick-secondary::before { background: #D6A32E; }
.pp-btn-wa::before          { background: #128C7E; }
.pp-back-btn::before        { background: rgba(214,163,46,0.20); }

/* Filled state */
.pp-btn-gold.is-fx::before,
.pp-btn-brick-primary.is-fx::before,
.pp-btn-brick-secondary.is-fx::before,
.pp-btn-wa.is-fx::before,
.pp-back-btn.is-fx::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Text colour stays dark brown when ink fills gold button */
.pp-btn-gold.is-fx { color: hsl(var(--pp-dark-brown)) !important; }

/* ── Brand name / tagline (ppb-*) ────────────────────────────────────────── */
.ppb-name { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: -0.01em; }
.ppb-tag  { font-family: 'DM Sans', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; }

/* Metallic shine — background-clip technique */
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .ppb-name {
    color: transparent;
    background-image: linear-gradient(105deg,
      #6E1F0E 0%,
      #6E1F0E 46%,
      #FFF6D8 49%,
      #FFFFFF 50%,
      #FFF6D8 51%,
      #6E1F0E 54%,
      #6E1F0E 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .ppb-tag {
    color: transparent;
    background-image: linear-gradient(105deg,
      #FFFDF6 0%,
      #FFFDF6 46%,
      #F2C14E 49%,
      #FFFFFF 50%,
      #F2C14E 51%,
      #FFFDF6 54%,
      #FFFDF6 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Fallback: no background-clip support — plain solid colours */
@supports not (((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text)) {
  .ppb-name { color: #6E1F0E; }
  .ppb-tag  { color: #FFFDF6; }
}

/* Reduced motion: solid colours, no sweep */
@media (prefers-reduced-motion: reduce) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
    .ppb-name {
      background-image: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      color: #6E1F0E;
    }
    .ppb-tag {
      background-image: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      color: #FFFDF6;
    }
  }
}

/* ── Journal page ────────────────────────────────────────────────────────── */

/* Category marquee band */
.pp-journal-marquee-band {
  background: hsl(var(--pp-deep-rust));
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
}
.pp-journal-marquee-inner {
  display: inline-flex;
  gap: 0;
  will-change: transform;
}
.pp-journal-marquee-half { display: inline-flex; flex: none; }
.pp-journal-marquee-text {
  color: hsl(var(--pp-mustard));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 2rem;
  white-space: nowrap;
}

/* Featured story panel */
.pp-journal-featured-panel {
  background: hsl(var(--pp-cream-panel));
  border-radius: 24px;
  box-shadow: 0 10px 0 hsl(var(--pp-no-shadow)), 0 20px 40px hsl(var(--pp-no-shadow) / 0.18);
  overflow: visible;
}

/* Washi tape strip */
.pp-washi-tape {
  position: absolute;
  top: 12px;
  left: -8px;
  width: 80px;
  height: 22px;
  background: hsl(var(--pp-mustard) / 0.75);
  transform: rotate(8deg);
  z-index: 20;
  border-radius: 2px;
}

/* Rotating sticker */
.pp-sticker-ring {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 110px;
  height: 110px;
  z-index: 30;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pp-sticker-ring circle {
  fill: hsl(var(--pp-mustard));
}
.pp-sticker-ring text {
  fill: hsl(var(--pp-ink));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pp-sticker-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pp-sticker-paw {
  color: hsl(var(--pp-ink));
  opacity: 0.7;
}

/* Story card (scrapbook note card) */
.pp-story-card {
  border-radius: 18px;
  border: 2px solid hsl(var(--pp-no-shadow) / 0.55);
  box-shadow: 0 6px 0 hsl(var(--pp-no-shadow) / 0.40), 0 14px 28px hsl(var(--pp-no-shadow) / 0.22);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
  cursor: grab;
}
.pp-story-card:active { cursor: grabbing; }
.pp-story-card-photo {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.pp-story-card-polaroid {
  background: hsl(var(--pp-polaroid-frame));
  padding: 8px 8px 22px 8px;
  border-radius: 4px;
  box-shadow: 0 8px 18px hsl(var(--pp-no-shadow) / 0.28), 0 2px 4px hsl(var(--pp-no-shadow) / 0.18);
  margin-top: -18px;
  z-index: 10;
  width: calc(100% - 24px);
  transition: transform 0.35s ease;
}
.pp-story-card:hover .pp-story-card-polaroid,
.pp-story-card:focus-within .pp-story-card-polaroid {
  transform: rotate(0deg) translateY(-4px) !important;
}
.pp-story-card-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
}
.pp-story-card-img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.pp-story-card:hover .pp-story-card-img-wrap img {
  transform: scale(1.05);
}

/* Read sticker */
.pp-read-sticker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: hsl(var(--pp-mustard));
  color: hsl(var(--pp-ink));
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(20deg);
  transition: transform 0.25s ease, scale 0.25s ease;
  box-shadow: 0 3px 8px hsl(var(--pp-no-shadow) / 0.30);
  flex-shrink: 0;
}
.pp-story-card:hover .pp-read-sticker {
  transform: rotate(0deg);
  scale: 1.12;
}

/* Category chip */
.pp-cat-chip {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid hsl(var(--pp-mustard) / 0.55);
  background: hsl(var(--pp-mustard) / 0.15);
  color: hsl(var(--pp-mustard));
}

/* Filter chips */
.pp-filter-chip {
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid hsl(var(--pp-mustard) / 0.55);
  background: transparent;
  color: hsl(var(--pp-paper));
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.pp-filter-chip.active,
.pp-filter-chip:hover {
  background: hsl(var(--pp-mustard));
  color: hsl(var(--pp-ink));
  border-color: hsl(var(--pp-mustard));
}

/* Envelope CTA */
.pp-envelope-card {
  background: hsl(var(--pp-mustard));
  color: hsl(var(--pp-ink));
  border-radius: 0 0 24px 24px;
  position: relative;
  overflow: visible;
}
.pp-envelope-flap {
  /* Clean triangle via clip-path — no border overflow issues */
  width: 100%;
  height: 48px;
  background: hsl(var(--pp-mustard-pressed));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
}

/* Gold divider */
.pp-gold-rule {
  width: 52px; height: 1.5px;
  background: #D6A32E;
  margin: 0 auto;
}
.pp-gold-rule-wide {
  width: 100%; height: 1px;
  background: rgba(214,163,46,0.5);
}

/* Card depth is defined in the Batch 16 section below */

/* Image zoom on hover */
.pp-img-zoom { overflow: hidden; }
.pp-img-zoom img { transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.pp-img-zoom:hover img { transform: scale(1.06); }

/* Back to Kitchen button */
.pp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(214,163,46,0.40);
  background: rgba(214,163,46,0.05);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(214,163,46,0.80);
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
}
.pp-back-btn:hover {
  border-color: #D6A32E;
  background: rgba(214,163,46,0.14);
  color: #D6A32E;
  box-shadow: 0 0 18px rgba(214,163,46,0.45), 0 0 36px rgba(214,163,46,0.20);
  transform: translateY(-1px);
}
.pp-back-btn:active {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 0 28px rgba(214,163,46,0.65), 0 0 52px rgba(214,163,46,0.30);
}
.pp-back-btn svg {
  transition: transform 0.25s ease;
}
.pp-back-btn:hover svg {
  transform: translateX(-3px);
}

/* BackNav component — inline back link (all non-checkout pages) */
.pp-back-nav {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;   /* never stretch to fill a flex/grid container */
  width: -moz-fit-content;
  width: fit-content;       /* never grow to full width */
}
.pp-back-nav-icon {
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.pp-back-nav:hover .pp-back-nav-icon {
  box-shadow: 0 0 14px rgba(214,163,46,0.40), 0 0 28px rgba(214,163,46,0.18);
}
.pp-back-nav:active .pp-back-nav-icon {
  box-shadow: 0 0 22px rgba(214,163,46,0.65), 0 0 44px rgba(214,163,46,0.30);
}
.pp-back-nav:hover svg,
.pp-back-nav:active svg {
  transform: translateX(-2px);
  transition: transform 0.2s ease;
}

/* ══════════════════════════════════════════════════════
   CALENDAR DAY STATES — DeliveryScheduler
   All day-button states live here; component uses class names only.
   ══════════════════════════════════════════════════════ */

/* Shared calendar text tokens */
.pp-cal-label   { color: #1C1A14; }
.pp-cal-weekday { color: #6B7280; }

/* Past dates — clearly greyed, struck through, no pointer */
.pp-cal-past {
  color: #9CA3AF !important;
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Selected date — ink bg + paper ring */
.pp-cal-selected {
  background: #1C1A14 !important;
  color: #FFFDF6 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px #FFFDF6, 0 0 0 4px #D6A32E !important;
  transform: scale(1.08) !important;
}

/* Today (current date, not yet selected) — terracotta ring */
.pp-cal-today {
  color: #D6A32E !important;
  font-weight: 700 !important;
  border: 2px solid #D6A32E !important;
  background: transparent !important;
}

/* Tomorrow — gold fill with pulse animation */
@keyframes pp-cart-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.80; }
  50%       { transform: scale(1.22); opacity: 1;    filter: drop-shadow(0 0 5px rgba(214,163,46,0.55)); }
}

/* ── Persistent cart bar "View order" button ──────────────────────────────
   Inline style on the element sets color too, but this class wins over any
   section-scoped text-foreground / text-primary !important override.       */
.pp-cart-bar-btn {
  background: hsl(var(--pp-mustard)) !important;
  color: hsl(var(--pp-dark-brown)) !important;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.1s ease;
  position: relative;
  isolation: isolate;
}
.pp-cart-bar-btn:hover {
  background: hsl(var(--pp-mustard-hover)) !important;
  color: hsl(var(--pp-dark-brown)) !important;
}
.pp-cart-bar-btn:focus-visible {
  outline: 2px solid hsl(var(--pp-dark-brown));
  outline-offset: 2px;
  color: hsl(var(--pp-dark-brown)) !important;
}
/* Ensure any ::before fill layer sits behind the text */
.pp-cart-bar-btn::before {
  z-index: -1 !important;
}

@keyframes pp-gold-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(214,163,46,0.5), 0 0 18px 4px rgba(214,163,46,0.25); }
  50%       { box-shadow: 0 0 14px 4px rgba(214,163,46,0.7), 0 0 28px 6px rgba(214,163,46,0.35); }
}
.pp-cal-tomorrow {
  background: #D6A32E !important;
  color: #1C1A14 !important;
  font-weight: 700 !important;
  animation: pp-gold-pulse 2.5s ease-in-out infinite !important;
  transform: scale(1.08) !important;
}
.pp-cal-tomorrow:hover {
  background: #7A5A0E !important;
  color: #FFFDF6 !important;
  transform: scale(1.12) !important;
}

/* Normal future dates — dark readable text, gold hover */
.pp-cal-future {
  color: #1C1A14 !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.pp-cal-future:hover {
  background: rgba(214,163,46,0.15) !important;
  transform: scale(1.05) !important;
}

/* Emerald shadow for custom slot (avoids inline rgba literal) */
.pp-shadow-emerald {
  box-shadow: 0 0 15px 0 rgba(16,185,129,0.15);
}

/* ── Elevation tokens — Batch 22: chestnut shadows for brick ground ── */
:root {
  --elev-1: 0 1px 2px rgba(52,16,8,.18), 0 2px 8px rgba(52,16,8,.18);
  --elev-2: 0 4px 12px rgba(52,16,8,.28), 0 12px 28px rgba(52,16,8,.22);
  --elev-3: 0 12px 32px rgba(52,16,8,.38), 0 32px 64px rgba(52,16,8,.28);
  /* Header veil — mustard rgba(214,163,46) */
  --pp-header-veil: 42 68% 51%;
  /* Header hairline / dark mustard text — rgba(74,53,16) */
  --pp-header-dark: 38 64% 18%;
}

/* Apply elev-3 to modals, drawers, dropdowns */
[role="dialog"],
[data-radix-popper-content-wrapper],
.pp-cart-drawer { box-shadow: var(--elev-3) !important; }

/* Cart drawer — pure CSS open/close transitions (no GSAP dependency) */
/* Backdrop */
.pp-cart-backdrop--open { opacity: 1 !important; transition: opacity 0.35s ease; }
[style*="visibility: hidden"].fixed.inset-0.bg-black\/60 { opacity: 0; transition: opacity 0.35s ease; }

/* Panel slides in from the right */
.pp-cart-drawer {
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0, 0.15, 1),
              opacity 0.38s ease;
  opacity: 0;
}
.pp-cart-panel--open {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* Backdrop opacity when hidden vs open */
.fixed.inset-0.bg-black\/60 {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pp-cart-backdrop--open {
  opacity: 1 !important;
}

/* Primary button — mustard bg, dark text — all 5 states explicit */
.pp-btn-gold {
  border: 1.5px solid #F2C14E !important;
  color: hsl(var(--pp-dark-brown)) !important;
  background: hsl(var(--pp-mustard)) !important;
  box-shadow: 0 4px 0 #9C7418, 0 8px 18px rgba(0,0,0,0.25) !important;
  transition: all 0.3s ease !important;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Circle fill colour — lit gold on hover (overrides the dark #1C1A14 default) */
.pp-btn-gold::before { background: hsl(var(--pp-mustard-lit)) !important; }

.pp-btn-gold:hover {
  background: hsl(var(--pp-mustard-lit)) !important;
  border-color: hsl(var(--pp-mustard-lit)) !important;
  color: hsl(var(--pp-dark-brown)) !important;
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 0 0 4px hsl(var(--pp-mustard-lit) / 0.35), 0 10px 28px hsl(var(--pp-mustard) / 0.55) !important;
}
/* Arrow nudge on hover */
.pp-btn-gold:hover svg,
.pp-btn-gold:hover .lucide-arrow-right {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}
.pp-btn-gold:focus-visible {
  background: hsl(var(--pp-mustard-lit)) !important;
  border-color: hsl(var(--pp-mustard-lit)) !important;
  color: hsl(var(--pp-dark-brown)) !important;
  box-shadow: 0 0 0 4px hsl(var(--pp-mustard-lit) / 0.35), 0 10px 28px hsl(var(--pp-mustard) / 0.55), 0 0 0 3px hsl(var(--pp-dark-brown) / 0.16) !important;
}
.pp-btn-gold:active {
  background: hsl(var(--pp-mustard-pressed)) !important;
  border-color: hsl(var(--pp-mustard-pressed)) !important;
  color: hsl(var(--pp-dark-brown)) !important;
  transform: scale(1.02) translateY(0) !important;
  box-shadow: var(--elev-1) !important;
}
/* Mobile tap feedback */
@media (hover: none) {
  .pp-btn-gold:active {
    background: hsl(var(--pp-mustard-lit)) !important;
    border-color: hsl(var(--pp-mustard-lit)) !important;
    color: hsl(var(--pp-dark-brown)) !important;
    box-shadow: 0 0 0 4px hsl(var(--pp-mustard-lit) / 0.35) !important;
    transform: scale(1.02) translateY(0) !important;
  }
}
.pp-btn-gold:disabled, .pp-btn-gold[disabled] {
  background: hsl(var(--pp-mustard) / 0.55) !important;
  border-color: transparent !important;
  color: hsl(var(--pp-dark-brown) / 0.55) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════
   BRICK-GROUND BUTTONS (Batch 22) — #A64A2E sections
   Primary: #FFFDF6 fill, #A64A2E label
   Secondary: transparent, 1.5px #FFFDF6 border, #FFFDF6 label
   Disabled: rgba(255,253,246,.18) fill, rgba(255,253,246,.55) label
   ══════════════════════════════════════════════════════ */

/* Apply to any button sitting directly on a brick-ground section */
.pp-section-manifesto .pp-btn-brick-primary,
.pp-section-goal .pp-btn-brick-primary,
.pp-section-ingredients .pp-btn-brick-primary,
.pp-section-trust .pp-btn-brick-primary,
.pp-section-testimonials .pp-btn-brick-primary,
.pp-concierge-bg .pp-btn-brick-primary,
.pp-page-checkout .pp-btn-brick-primary,
.pp-btn-brick-primary {
  background: #FFFDF6 !important;
  color: #A64A2E !important;
  border: 1.5px solid #FFFDF6 !important;
  box-shadow: 0 1px 2px rgba(52,16,8,.18), 0 2px 8px rgba(52,16,8,.18) !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pp-btn-brick-primary:hover {
  background: #FFFFFF !important;
  color: #8C3B22 !important;
  border-color: #FFFFFF !important;
  transform: scale(1.04) translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(52,16,8,.28), 0 12px 28px rgba(52,16,8,.22) !important;
}
.pp-btn-brick-primary:focus-visible {
  background: #FFFFFF !important;
  color: #8C3B22 !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(52,16,8,.28), 0 0 0 3px rgba(255,253,246,.35) !important;
}
.pp-btn-brick-primary:active {
  background: #FFFDF6 !important;
  color: #A64A2E !important;
  border-color: #FFFDF6 !important;
  transform: scale(1.01) translateY(0) !important;
  box-shadow: 0 1px 2px rgba(52,16,8,.18) !important;
}
.pp-btn-brick-primary:disabled,
.pp-btn-brick-primary[disabled] {
  background: rgba(255,253,246,.18) !important;
  color: rgba(255,253,246,.55) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

.pp-btn-brick-secondary {
  background: transparent !important;
  color: #FFFDF6 !important;
  border: 1.5px solid #FFFDF6 !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pp-btn-brick-secondary:hover {
  background: rgba(255,253,246,.12) !important;
  color: #FFFDF6 !important;
  border-color: #FFFDF6 !important;
  transform: scale(1.04) translateY(-2px) !important;
}
.pp-btn-brick-secondary:focus-visible {
  background: rgba(255,253,246,.12) !important;
  color: #FFFDF6 !important;
  border-color: #FFFDF6 !important;
  box-shadow: 0 0 0 3px rgba(255,253,246,.25) !important;
}
.pp-btn-brick-secondary:active {
  background: rgba(255,253,246,.08) !important;
  color: #FFFDF6 !important;
  border-color: #FFFDF6 !important;
  transform: scale(1.01) translateY(0) !important;
}
.pp-btn-brick-secondary:disabled,
.pp-btn-brick-secondary[disabled] {
  background: rgba(255,253,246,.18) !important;
  color: rgba(255,253,246,.55) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════
   DARK PAGE BACKGROUNDS — each page has a unique shade
   All use noise texture + subtle gold radial glow
   ══════════════════════════════════════════════════════ */

/* Manifesto section — brick ground (Batch 22) */
.pp-section-manifesto {
  background-color: #A64A2E;
  color: #FFFDF6;
  position: relative;
  overflow: hidden;
}
.pp-section-manifesto::before {
  display: none;
}
.pp-section-manifesto > * { position: relative; z-index: 1; }
.pp-section-manifesto::after { display: none; }

/* Trust strip — brick ground (Batch 22) */
.pp-section-trust {
  background-color: #A64A2E;
  color: #FFFDF6;
  border-top: 1px solid rgba(255,253,246,0.22);
  border-bottom: 1px solid rgba(255,253,246,0.22);
}

/* Section 4 — Goal-based entry — brick ground (Batch 22) */
.pp-section-goal {
  background-color: #A64A2E;
  color: #FFFDF6;
  position: relative;
  overflow: hidden;
}
.pp-section-goal > * { position: relative; z-index: 1; }

/* Section 5 — Meals — brick ground (Batch 22) */
.pp-section-ingredients {
  background-color: #A64A2E;
  color: #FFFDF6;
  position: relative;
  overflow: hidden;
}
.pp-section-ingredients > * { position: relative; z-index: 1; }

/* Section 6 — How it works — deep rust */
.pp-section-how {
  background-color: #7A2F1C;
  border-top: 1px solid rgba(255,253,246,0.10);
  border-bottom: 1px solid rgba(255,253,246,0.10);
  color: #FFFDF6;
  position: relative;
  overflow: hidden;
}
.pp-section-how > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════
   SHARED 3D GRAIN TEXTURE MIXIN
   Applied to every dark page class below via the same
   three-layer noise stack + side shadows + vignette.
   Each page keeps its own base color.
   ══════════════════════════════════════════════════════ */

/* Shared grain layers — reused as a CSS custom property string */
/* (defined inline per class since CSS doesn't support mixin strings,
    but the values are identical across all pages) */

/* Noise texture fragment — disabled (owner requested no grain) */
.pp-noise::before {
  display: none;
}
.pp-noise > * { position: relative; z-index: 1; }

/* ── Shared vignette pseudo-element for all textured dark pages ── */
/* Pages WITH fixed background video: very faint edge vignette only */
.pp-page-founders::before,
.pp-page-story::before,
.pp-page-journal::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(92,36,22,0.08);
}
/* Pages WITHOUT fixed background video: keep stronger vignette */
.pp-page-ingredients-full::before,
.pp-page-article::before,
.pp-page-auth::before,
.pp-page-profile::before,
.pp-page-admin::before,
.pp-page-thankyou::before,
.pp-page-404::before,
.pp-page-privacy::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(92,36,22,0.28);
}


.pp-page-founders > *,
.pp-page-story > *,
.pp-page-ingredients-full > *,
.pp-page-journal > *,
.pp-page-article > *,
.pp-page-auth > *,
.pp-page-profile > *,
.pp-page-admin > *,
.pp-page-thankyou > *,
.pp-page-404 > *,
.pp-page-privacy > * { position: relative; z-index: 1; }

/* ── Per-page base colors + gold glow + grain layers ── */

/* Founders — solid brick #A64A2E, NO grain, NO noise */
.pp-page-founders {
  background-color: #A64A2E;
  background-image: none;
  position: relative; isolation: isolate;
}
/* Remove vignette pseudo-element for founders (video is fixed bg, brick is the fallback) */
.pp-page-founders::before { display: none; }

/* Our Story — transparent so fixed video shows through */
.pp-page-story {
  background-color: transparent;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Our Ingredients — solid brick, NO grain, NO noise (overrides shared rules above) */
.pp-page-ingredients-full {
  background-color: #A64A2E;
  background-image: none;
  position: relative; isolation: isolate;
}
/* Suppress the shared vignette pseudo-element for this page */
.pp-page-ingredients-full::before {
  display: none !important;
}

/* FAQ — deep rust */
.pp-page-faq {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Journal listing — transparent so fixed video shows through */
.pp-page-journal {
  background-color: transparent;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Journal article — deep rust */
.pp-page-article {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Login / Signup — deep rust */
.pp-page-auth {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Checkout — brick ground (Batch 22) */
.pp-page-checkout {
  background-color: #A64A2E;
  color: #FFFDF6;
  position: relative;
  isolation: isolate;
}

/* ── Meal Detail Page — deep rust surface ── */
.pp-page-meal {
  background-color: #7A2F1C;
  background-image: none;
  position: relative;
  isolation: isolate;
}

/* Fixed vignette — solid overlay */
.pp-page-meal::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(92,36,22,0.28);
}

/* All direct children sit above the pseudo-element layer */
.pp-page-meal > * { position: relative; z-index: 1; }
/* Profile — deep rust */
.pp-page-profile {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}
/* Admin — deep rust */
.pp-page-admin {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}
/* Thank You — deep rust */
.pp-page-thankyou {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}
/* 404 — deep rust */
.pp-page-404 {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}
/* Privacy Policy — deep rust */
.pp-page-privacy {
  background-color: #7A2F1C;
  background-image: none;
  position: relative; isolation: isolate;
}

/* Dark card — used across all dark pages */
.pp-dark-card {
  background: hsl(var(--card) / 0.94);
  border: 1px solid rgba(214,163,46,0.28);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.pp-dark-card:hover {
  background: hsl(var(--card) / 0.97);
  border-color: rgba(214,163,46,0.45);
  box-shadow: 0 8px 32px rgba(214,163,46,0.15);
}
/* Dark input fields — for ink-ground pages */
.pp-dark-input {
  background: rgba(255,253,246,0.06) !important;
  border-color: rgba(214,163,46,0.2) !important;
  color: #FFFDF6 !important;
}
.pp-dark-input::-moz-placeholder { color: rgba(255,253,246,0.35) !important; }
.pp-dark-input::placeholder { color: rgba(255,253,246,0.35) !important; }
.pp-dark-input:focus {
  border-color: rgba(214,163,46,0.55) !important;
  box-shadow: 0 0 0 3px rgba(214,163,46,0.12) !important;
  background: rgba(255,253,246,0.08) !important;
}
/* Dark label */
.pp-dark-label { color: rgba(255,253,246,0.75) !important; font-size: 0.8rem; }
/* Dark text helpers — for ink-ground sections */
.pp-dark-heading { color: #FFFDF6; }
.pp-dark-body    { color: rgba(255,253,246,0.72); }
.pp-dark-muted   { color: rgba(255,253,246,0.42); }
/* Dark separator */
.pp-dark-sep { background: rgba(214,163,46,0.18) !important; }
/* Dark tab trigger */
.pp-dark-tab[data-state="active"] {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}
.pp-dark-tab {
  color: rgba(255,253,246,0.6) !important;
  transition: color 0.2s ease;
}
.pp-dark-tab:hover { color: rgba(255,253,246,0.9) !important; }
/* Dark tabs list */
.pp-dark-tabs-list {
  background: rgba(255,253,246,0.06) !important;
  border: 1px solid rgba(214,163,46,0.15) !important;
}


/* ── Brick sections (Batch 22) — text tokens for #A64A2E ground ──
   headings/body → #FFFDF6 (5.67:1)
   secondary copy → #FFFDF6 at 82% opacity
   labels/eyebrows → #F3E3DC (4.62:1)
   text-primary (mustard) → #FFFDF6 (mustard fails on brick at 2.51:1)
   text-muted-foreground → rgba(255,253,246,0.82)
   hairlines → rgba(255,253,246,0.22)
   ── */

/* text-foreground on brick = #FFFDF6 */
.pp-section-manifesto .text-foreground,
.pp-section-goal .text-foreground,
.pp-section-ingredients .text-foreground,
.pp-section-trust .text-foreground,
.pp-section-testimonials .text-foreground,
.pp-concierge-bg .text-foreground,
.pp-page-checkout .text-foreground { color: #FFFDF6 !important; }

/* text-primary on brick/rust — mustard #D6A32E is the correct accent colour.
   On cream sections (Concierge, Closing) use mustard-deep for contrast. */
.pp-concierge-bg .text-primary { color: hsl(var(--pp-dark-brown)) !important; }

/* text-muted-foreground on brick → #FFFDF6 at 82% */
.pp-section-manifesto .text-muted-foreground,
.pp-section-goal .text-muted-foreground,
.pp-section-ingredients .text-muted-foreground,
.pp-section-trust .text-muted-foreground,
.pp-section-testimonials .text-muted-foreground,
.pp-concierge-bg .text-muted-foreground,
.pp-page-checkout .text-muted-foreground { color: rgba(255,253,246,0.82) !important; }

/* foreground/N opacity variants on brick → resolve to #FFFDF6 */
.pp-section-manifesto [class*="text-foreground/"],
.pp-section-goal [class*="text-foreground/"],
.pp-section-ingredients [class*="text-foreground/"],
.pp-section-trust [class*="text-foreground/"],
.pp-section-testimonials [class*="text-foreground/"],
.pp-concierge-bg [class*="text-foreground/"],
.pp-page-checkout [class*="text-foreground/"] { color: rgba(255,253,246,0.82) !important; }

/* ── Light-surface colour re-scope (Part 1a) ──────────────────────────────
   Any element with a cream/white/card background re-declares the foreground
   tokens so that child Tailwind classes (text-foreground, text-muted-foreground
   etc.) resolve to dark-brown instead of the global near-white.
   The deep-rust testimonial card (.pp-testimonial-rust) is excluded via :not().
   ─────────────────────────────────────────────────────────────────────────── */
.bg-card:not(.pp-testimonial-rust),
.bg-popover,
.bg-white,
.bg-secondary,
[class*="bg-[#FBF3E4]"],
[class*="bg-[#FFFDF6]"],
[class*="bg-[#F6EAD7]"],
.pp-light-surface {
  --foreground: 22 46% 12%;          /* #2B1A10 dark brown */
  --card-foreground: 22 46% 12%;
  --popover-foreground: 22 46% 12%;
  --muted-foreground: 22 25% 35%;
  color: hsl(22 46% 12%);
}

/* ── Paper form fields — WCAG-compliant inputs on light ground ── */
.pp-field {
  background: #ffffff;
  border: 1.5px solid hsl(var(--foreground) / 0.22);
  color: hsl(var(--foreground));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px hsl(var(--foreground) / 0.06);
}
.pp-field::-moz-placeholder { color: #8A8178; }
.pp-field::placeholder { color: #8A8178; }
.pp-field:focus {
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px hsl(var(--foreground) / 0.16), inset 0 1px 2px hsl(var(--foreground) / 0.06);
  outline: none;
}
.pp-field-label {
  color: hsl(var(--foreground));
  font-weight: 500;
}
.pp-field-error { border-color: hsl(var(--pp-meal-gr)) !important; }
.pp-field-error-msg { color: hsl(var(--pp-meal-gr)); font-size: 0.8rem; }

/* ── Card depth — warm shadows, translateY lift on hover ── */
/* Batch 22: shadows switch to warm chestnut rgba(52,16,8,.28) — ink shadows vanish on brick */
.pp-card {
  transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms cubic-bezier(.22,1,.36,1), border-color 0.3s ease;
  will-change: transform;
  box-shadow: 0 1px 2px rgba(52,16,8,.18), 0 2px 8px rgba(52,16,8,.18);
}
.pp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(52,16,8,.28), 0 12px 28px rgba(52,16,8,.22);
  border-color: rgba(255,253,246,0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  .pp-card:hover { transform: none; }
}
/* Muted on mustard at 70% opacity = 3.7:1 (FAIL). Fix: #3A342B = 5.36:1 (PASS) */
.bg-primary .text-muted-foreground,
.pp-hero-section .text-muted-foreground { color: #3A342B !important; }

/* ── Opacity-based foreground on deep-rust sections — resolve to #E8C9B8 (readable warm) ── */
.pp-section-how [class*="text-foreground/"],
.pp-section-closing [class*="text-foreground/"],
.pp-cta-band [class*="text-foreground/"],
.pp-footer-bg [class*="text-foreground/"],
.pp-page-founders [class*="text-foreground/"],
.pp-page-story [class*="text-foreground/"],
.pp-page-ingredients-full [class*="text-foreground/"],
.pp-page-faq [class*="text-foreground/"],
.pp-page-journal [class*="text-foreground/"],
.pp-page-article [class*="text-foreground/"],
.pp-page-auth [class*="text-foreground/"],
.pp-page-meal [class*="text-foreground/"],
.pp-page-profile [class*="text-foreground/"],
.pp-page-admin [class*="text-foreground/"],
.pp-page-thankyou [class*="text-foreground/"],
.pp-page-404 [class*="text-foreground/"],
.pp-page-privacy [class*="text-foreground/"],
.kitchen-page-bg [class*="text-foreground/"] { color: #E8C9B8 !important; }

/* Cream sections — foreground/N opacity variants → dark brown */
.pp-section-closing [class*="text-foreground/"],
.pp-concierge-bg [class*="text-foreground/"] { color: rgba(43,26,16,0.72) !important; }

/* ── Deep-rust sections — override Tailwind semantic tokens ── */
.pp-section-how .text-foreground,
.pp-cta-band .text-foreground,
.pp-footer-bg .text-foreground,
.pp-page-founders .text-foreground,
.pp-page-story .text-foreground,
.pp-page-ingredients-full .text-foreground,
.pp-page-faq .text-foreground,
.pp-page-journal .text-foreground,
.pp-page-article .text-foreground,
.pp-page-auth .text-foreground,
.pp-page-meal .text-foreground,
.pp-page-profile .text-foreground,
.pp-page-admin .text-foreground,
.pp-page-thankyou .text-foreground,
.pp-page-404 .text-foreground,
.pp-page-privacy .text-foreground,
.kitchen-page-bg .text-foreground { color: #FFFDF6 !important; }

/* Cream sections — text-foreground → dark brown */
.pp-section-closing .text-foreground,
.pp-concierge-bg .text-foreground { color: #2B1A10 !important; }

/* muted-foreground on deep rust = warm muted #E8C9B8 */
.pp-section-how .text-muted-foreground,
.pp-cta-band .text-muted-foreground,
.pp-footer-bg .text-muted-foreground,
.pp-page-founders .text-muted-foreground,
.pp-page-story .text-muted-foreground,
.pp-page-ingredients-full .text-muted-foreground,
.pp-page-faq .text-muted-foreground,
.pp-page-journal .text-muted-foreground,
.pp-page-article .text-muted-foreground,
.pp-page-auth .text-muted-foreground,
.pp-page-meal .text-muted-foreground,
.pp-page-profile .text-muted-foreground,
.pp-page-admin .text-muted-foreground,
.pp-page-thankyou .text-muted-foreground,
.pp-page-404 .text-muted-foreground,
.pp-page-privacy .text-muted-foreground,
.kitchen-page-bg .text-muted-foreground { color: #E8C9B8 !important; }

/* Cream sections — muted-foreground → muted brown */
.pp-section-closing .text-muted-foreground,
.pp-concierge-bg .text-muted-foreground { color: #6B4A36 !important; }

/* text-primary on deep rust = mustard #D6A32E */
.pp-section-how .text-primary,
.pp-cta-band .text-primary,
.pp-footer-bg .text-primary,
.pp-page-founders .text-primary,
.pp-page-story .text-primary,
.pp-page-ingredients-full .text-primary,
.pp-page-faq .text-primary,
.pp-page-journal .text-primary,
.pp-page-article .text-primary,
.pp-page-auth .text-primary,
.pp-page-meal .text-primary,
.pp-page-profile .text-primary,
.pp-page-admin .text-primary,
.pp-page-thankyou .text-primary,
.pp-page-404 .text-primary,
.pp-page-privacy .text-primary,
.kitchen-page-bg .text-primary { color: #D6A32E !important; }

/* Cream sections — text-primary → mustard-deep #7A5A0E */
.pp-section-closing .text-primary,
.pp-concierge-bg .text-primary { color: #7A5A0E !important; }

/* Mustard section — text-foreground stays dark */
.pp-section-hero .text-foreground { color: #1C1A14 !important; }

/* Scroll indicator */
@keyframes pp-scroll-bounce {
  0%,100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(7px); opacity: 0.3; }
}
.pp-scroll-dot { animation: pp-scroll-bounce 2s ease-in-out infinite; }

/* Ingredient card image zoom */
.pp-ingredient-img { transition: transform 0.65s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.pp-card:hover .pp-ingredient-img { transform: scale(1.07); }

/* Bowl image */
.pp-bowl-img {
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.pp-bowl-img:hover { transform: scale(1.03); }

/* Bowl wrapper — cream canvas for multiply blend + gentle outer gold glow */
.pp-bowl-wrap {
  background: #F6EAD7;
  box-shadow:
    0 0 40px 10px rgba(214,163,46,0.22),
    0 0 90px 28px rgba(214,163,46,0.11),
    0 0 160px 50px rgba(214,163,46,0.06);
}

/* Round bowl shape — strict 1:1 square so border-radius:50% is a perfect circle */
.pp-bowl-circle {
  width: min(480px, 86vw);
  height: min(480px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/* Inner vignette — crushes the white edge of the image, centre stays clear */
.pp-bowl-circle-vignette {
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(246,234,215,0.45) 62%,
    rgba(246,234,215,0.82) 76%,
    rgba(246,234,215,0.97) 88%,
    rgba(246,234,215,1)    100%
  );
}

/* (edge-fade removed — replaced by circular vignette) */

/* Trust strip */
.pp-trust-item { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease; }
.pp-trust-item:hover { transform: translateY(-3px); opacity: 1 !important; }

/* Testimonial cards — vibrant 3D alternating colours (Part 4c) */
.pp-testimonial {
  border-radius: 20px;
  border: 2px solid rgba(43,26,16,0.85);
  box-shadow: 0 8px 0 #5C2416, 0 18px 30px rgba(43,26,16,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.pp-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 0 #5C2416, 0 28px 40px rgba(43,26,16,0.40);
}
.pp-testimonial:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #5C2416, 0 8px 16px rgba(43,26,16,0.30);
}
/* Card 1 (3n+1): mustard */
.pp-testimonial:nth-child(3n+1) {
  background: #D6A32E !important;
  color: #2B1A10 !important;
}
.pp-testimonial:nth-child(3n+1) .pp-testi-tag {
  background: #7A2F1C !important;
  color: #FFFDF6 !important;
}
.pp-testimonial:nth-child(3n+1) .pp-testi-star { fill: #7A2F1C !important; }
.pp-testimonial:nth-child(3n+1) .pp-testi-author { color: #2B1A10 !important; }
.pp-testimonial:nth-child(3n+1) .pp-testi-breed { color: rgba(43,26,16,0.70) !important; }
.pp-testimonial:nth-child(3n+1) .pp-testi-quote { color: rgba(43,26,16,0.85) !important; }
.pp-testimonial:nth-child(3n+1) .pp-testi-divider { border-color: rgba(43,26,16,0.20) !important; }
/* Card 2 (3n+2): cream */
.pp-testimonial:nth-child(3n+2) {
  background: #FBF3E4 !important;
  color: #2B1A10 !important;
}
.pp-testimonial:nth-child(3n+2) .pp-testi-tag {
  background: #D6A32E !important;
  color: #2B1A10 !important;
}
.pp-testimonial:nth-child(3n+2) .pp-testi-star { fill: #D6A32E !important; }
.pp-testimonial:nth-child(3n+2) .pp-testi-author { color: #2B1A10 !important; }
.pp-testimonial:nth-child(3n+2) .pp-testi-breed { color: rgba(43,26,16,0.70) !important; }
.pp-testimonial:nth-child(3n+2) .pp-testi-quote { color: rgba(43,26,16,0.85) !important; }
.pp-testimonial:nth-child(3n+2) .pp-testi-divider { border-color: rgba(43,26,16,0.20) !important; }
/* Card 3 (3n+3): deep rust */
.pp-testimonial:nth-child(3n+3),
.pp-testimonial-rust {
  background: #7A2F1C !important;
  color: #FFFDF6 !important;
}
.pp-testimonial:nth-child(3n+3) .pp-testi-tag,
.pp-testimonial-rust .pp-testi-tag {
  background: #D6A32E !important;
  color: #2B1A10 !important;
}
.pp-testimonial:nth-child(3n+3) .pp-testi-star,
.pp-testimonial-rust .pp-testi-star { fill: #D6A32E !important; }
.pp-testimonial:nth-child(3n+3) .pp-testi-author,
.pp-testimonial-rust .pp-testi-author { color: #FFFDF6 !important; }
.pp-testimonial:nth-child(3n+3) .pp-testi-breed,
.pp-testimonial-rust .pp-testi-breed { color: rgba(255,253,246,0.70) !important; }
.pp-testimonial:nth-child(3n+3) .pp-testi-quote,
.pp-testimonial-rust .pp-testi-quote { color: rgba(255,253,246,0.90) !important; }
.pp-testimonial:nth-child(3n+3) .pp-testi-divider,
.pp-testimonial-rust .pp-testi-divider { border-color: rgba(255,253,246,0.20) !important; }

/* Hero scroll indicator — always white */
.pp-hero-scroll-ring { border: 1px solid rgba(28,26,23,0.3); }
.pp-hero-scroll-dot-inner { background: rgba(28,26,23,0.5); }

/* Hero text — on scrim (70% ink over video), text is light */
/* headline #FFFDF6 (11.59:1), accent #D6A32E (5.13:1), body #FFFDF6 at 82% */
.pp-hero-headline-text { color: #FFFDF6; text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30); }
/* Headline accent line (mustard "COOKED THIS MORNING.") — keep existing shadows; stroke replaced by O3 block below */
.pp-hero-headline-text .text-primary,
.pp-hero-headline-text .text-primary span {
  text-shadow: 0 1px 0 rgba(43,26,16,0.75), 0 2px 2px rgba(43,26,16,0.45), 0 3px 10px rgba(0,0,0,0.25);
}
@media (max-width: 639px) {
  .pp-hero-headline-text { font-size: clamp(2.6rem, 11.5vw, 3.6rem) !important; }
}
.pp-hero-sub-text      { color: rgba(255,253,246,0.82); }
.pp-hero-sub2-text     { color: rgba(255,253,246,0.55); }

/* Header base — mustard ground */
.pp-header-base {
  background: rgba(214, 163, 46, 0.97);
}

/* ── V3 video texture wrapper ── */
.pp-header-tex {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.pp-header-tex video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  filter: grayscale(1) sepia(0.6);
  mix-blend-mode: multiply;
  display: block;
}

/* Utility: white text shadow for readability on mustard header */
.pp-nav-shadow {
  text-shadow: 0 1px 2px hsl(var(--pp-no-shadow) / 0.45);
}

/* Header dark veil — mustard semi-transparent */
.pp-header-dark-veil {
  background: rgba(214, 163, 46, 0.82);
}

/* Hero Vimeo iframe — fills the section on every screen size
   Mobile (portrait): video is taller than wide, so drive by height
   Desktop (landscape): video is wider than tall, so drive by width            */

/* Hero section — header is sticky so it occupies its own row.
   Hero height = 100svh minus the header row.
   Content is flex-column centred (mobile: flex-start).
   Small fixed padding only — no double-counting the header height.          */
.pp-hero-section {
  height: calc(100svh - var(--pp-header-h, 88px));
  min-height: 480px;
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 24px;
  position: relative;
  z-index: 20;
}
@supports not (height: 100svh) {
  .pp-hero-section {
    height: calc(100vh - var(--pp-header-h, 88px));
  }
}
@media (max-width: 639px) {
  .pp-hero-section {
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 24px;
  }
}

/* Hero iframe — portrait mobile: scale up aggressively so the video fills
   the entire section with no black bars on any edge.
   We zoom the iframe to 150% of the section height so the video content
   covers the full area even on very short/wide portrait viewports.
   Desktop: unchanged max() formula.                                           */
.pp-hero-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  pointer-events: none;
  /* Mobile — drive by height, scaled up 1.5× to fill section edge-to-edge */
  height: calc(100dvh * 1.5);
  width: calc(100dvh * 1.5 * 16 / 9);
  min-width: 100vw;
  transform: translate(-50%, -50%);
}
@supports not (height: 100dvh) {
  .pp-hero-iframe {
    height: calc(100svh * 1.5);
    width: calc(100svh * 1.5 * 16 / 9);
  }
}
@media (min-width: 640px) {
  /* Desktop / landscape — width is the constraint, no scale-up needed */
  .pp-hero-iframe {
    width: max(100vw, calc(100vh * 16 / 9));
    height: max(100vh, calc(100vw * 9 / 16));
    min-width: unset;
  }
}

/* Hero eyebrow */
.pp-hero-eyebrow-style {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: hsl(var(--primary));
  opacity: 1;
  font-weight: 700;
  text-shadow: var(--pp-hero-eyebrow-shadow);
  margin-bottom: 10px;
  text-transform: uppercase;
}
@media (max-width: 639px) {
  .pp-hero-eyebrow-style {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}
/* Hero sub-line 1 */
.pp-hero-sub1-style {
  font-size: clamp(1rem, min(1.5vw, 2.4vh), 1.35rem);
  color: hsl(var(--pp-paper));
  font-weight: 500;
  text-shadow: var(--pp-hero-text-shadow);
  max-width: 40rem;
  margin-bottom: 6px;
  margin-top: 14px;
}
/* Hero sub-line 2 */
.pp-hero-sub2-style {
  font-size: clamp(0.88rem, min(1.2vw, 2vh), 1.1rem);
  color: hsl(var(--pp-paper));
  font-weight: 400;
  opacity: 1;
  text-shadow: var(--pp-hero-text-shadow);
  max-width: 40rem;
  margin-bottom: 0;
}
/* ── O3 "finest" hairline outlines — hero text only ──────────────────────────
   paint-order: stroke fill keeps the stroke BEHIND the fill so letter shapes
   are unchanged; only the faintest contrasting edge is visible.
   Fallback: browsers that don't support paint-order get no outline at all
   (no text-shadow ring — that would be thicker than intended).              */
@supports (paint-order: stroke fill) {
  /* Headline line 1 — white text, mustard outline */
  [data-pp-hero-text] .pp-hero-headline-text .pp-line-mask:not(.text-primary) .pp-line-inner,
  [data-pp-hero-text] .pp-hero-headline-text .pp-line-mask:not(.text-primary) span {
    -webkit-text-stroke: 0.6px #D6A32E;
    paint-order: stroke fill;
  }
  /* Headline line 2 — mustard text, white outline (replaces old dark 0.4px stroke) */
  [data-pp-hero-text] .pp-hero-headline-text .text-primary,
  [data-pp-hero-text] .pp-hero-headline-text .text-primary span {
    -webkit-text-stroke: 0.6px #FFFDF6;
    paint-order: stroke fill;
  }
  /* Eyebrow — mustard text, soft white outline */
  [data-pp-hero-text] .pp-hero-eyebrow-style,
  [data-pp-hero-text] .pp-hero-eyebrow-style span {
    -webkit-text-stroke: 0.35px rgba(255,253,246,0.85);
    paint-order: stroke fill;
  }
  /* Sub-line 1 — white text, soft mustard outline */
  [data-pp-hero-text] .pp-hero-sub1-style,
  [data-pp-hero-text] .pp-hero-sub1-style span {
    -webkit-text-stroke: 0.35px rgba(214,163,46,0.85);
    paint-order: stroke fill;
  }
  /* Sub-line 2 — white text, soft mustard outline */
  [data-pp-hero-text] .pp-hero-sub2-style,
  [data-pp-hero-text] .pp-hero-sub2-style span {
    -webkit-text-stroke: 0.35px rgba(214,163,46,0.85);
    paint-order: stroke fill;
  }
}
/* Hero CTA row spacing */
.pp-hero-cta-spacing { margin-top: 20px; }
@media (max-width: 639px) { .pp-hero-cta-spacing { margin-top: 16px; } }
/* Hero button size — desktop row, mobile stacked full-width */


/* Hero overlays removed — videos show at full opacity.
   Readability comes from text-shadow on the text itself only. */
.pp-hero-overlay {
  display: none;
}
.pp-hero-bottom-fade {
  display: none;
}
.pp-kitchen-hero-scrim {
  display: none;
}

/* ── Shared text-glow + text-shadow helpers for video pages ── */
.pp-text-glow { position: relative; isolation: isolate; }
/* ::before blob removed — no tint over videos */
/* Hero text container — font smoothing for crisp rendering */
[data-pp-hero-text] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Broad catch-all shadow removed — each element has its own crisp shadow */
.pp-video-text-shadow h1,
.pp-video-text-shadow h2,
.pp-video-text-shadow p {
  text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
}
/* Buttons and their children must NOT inherit hero text-shadow */
.pp-video-text-shadow .pp-btn-gold,
.pp-video-text-shadow .pp-btn-gold *,
.pp-video-text-shadow .pp-btn-wa,
.pp-video-text-shadow .pp-btn-wa * {
  text-shadow: none !important;
}
/* Long reading text panel over full-page videos */
.pp-text-panel {
  background: rgba(60,20,10,0.46);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* ── Kitchen page hero — scrim removed, text-shadow only ── */
/* Soft shadow on all text inside the kitchen hero content block */
.pp-kitchen-hero-text-shadow h1,
.pp-kitchen-hero-text-shadow p,
.pp-kitchen-hero-text-shadow span,
.pp-kitchen-hero-text-shadow div {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.6);
}

/* ── Split hero ── */
.pp-hero-left-bg {
  background: hsl(var(--background));
}
.pp-hero-left-glow {
  background: transparent;
}
.pp-hero-left-accent {
  background: rgba(214,163,46,0.5);
}
.pp-hero-sub { color: hsl(var(--foreground)/0.82); }
.pp-hero-sub2 { color: hsl(var(--foreground)/0.5); }
.pp-hero-video-left-fade {
  background: hsl(var(--background));
}

.kitchen-card-img-bg { background: rgba(255,253,246,0.03); }
.kitchen-disabled-btn-border { border-color: rgba(214,163,46,0.2); background: transparent; }

/* Kitchen page — solid backgrounds */
.kitchen-page-bg {
  background-color: #7A2F1C;
  background-image: none;
}
.kitchen-hero-bg {
  background-color: #7A2F1C;
  background-image: none;
}
.kitchen-section-alt {
  background-color: #7A2F1C;
  background-image: none;
}
.kitchen-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.18);
  transition: all 0.3s ease;
}
.kitchen-card:hover {
  background: rgba(255,253,246,0.07);
  border-color: rgba(214,163,46,0.45);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(214,163,46,0.15);
}
.kitchen-portion-btn {
  background: rgba(255,253,246,0.05);
  border: 1.5px solid rgba(214,163,46,0.2);
  color: rgba(255,253,246,0.7);
  border-radius: 0.75rem;
  padding: 0.6rem 0.5rem;
  transition: all 0.25s ease;
  cursor: pointer;
}
.kitchen-portion-btn:hover {
  border-color: rgba(214,163,46,0.55);
  background: rgba(214,163,46,0.08);
  color: #FFFDF6;
}
.kitchen-portion-btn.active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(214,163,46,0.4);
}
.kitchen-gold-rule {
  height: 1px;
  background: rgba(214,163,46,0.4);
}
.kitchen-stat-card {
  background: rgba(255,253,246,0.04);
  border: 1.5px solid rgba(214,163,46,0.2);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.kitchen-stat-card:hover {
  border-color: rgba(214,163,46,0.55);
  background: rgba(214,163,46,0.06);
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(214,163,46,0.18);
}
.kitchen-text-primary { color: #FFFDF6; }
.kitchen-text-secondary { color: rgba(255,253,246,0.65); }
.kitchen-text-muted { color: rgba(255,253,246,0.4); }
.kitchen-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(214,163,46,0.3);
  background: rgba(214,163,46,0.07);
  border-radius: 9999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: hsl(var(--primary));
}

/* Goal-based entry card — active state */
.pp-goal-card-active {
  border-color: hsl(var(--primary)/0.6) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary)/0.15), 0 16px 40px rgba(0,0,0,0.08);
}

/* ── Goal card tone system (Part 3b) ──────────────────────────────────────── */
/* Base 3D card shape — shared across all tones */
.pp-goal-card-tone {
  border: 2px solid rgba(43,26,16,0.85);
  border-radius: 20px;
  box-shadow: 0 8px 0 #5C2416, 0 18px 30px rgba(43,26,16,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pp-goal-card-tone:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 0 #5C2416, 0 24px 36px rgba(43,26,16,0.40);
}

/* Mustard — card 1: Active & Energetic */
[data-pp-goal-tone="mustard"] { background: #D6A32E; }
[data-pp-goal-tone="mustard"] .pp-goal-title { color: #2B1A10; }
[data-pp-goal-tone="mustard"] .pp-goal-body  { color: rgba(43,26,16,0.72); }
[data-pp-goal-tone="mustard"] .pp-goal-link  { color: #7A2F1C; }
[data-pp-goal-tone="mustard"] .pp-goal-chip  { background: rgba(214,163,46,0.9); border-color: rgba(43,26,16,0.3); }
[data-pp-goal-tone="mustard"] .pp-goal-chip-icon { color: #2B1A10; }

/* Rust — card 2: Senior Dog */
[data-pp-goal-tone="rust"] { background: #7A2F1C; }
[data-pp-goal-tone="rust"] .pp-goal-title { color: #FFFDF6; }
[data-pp-goal-tone="rust"] .pp-goal-body  { color: rgba(255,253,246,0.75); }
[data-pp-goal-tone="rust"] .pp-goal-link  { color: #D6A32E; }
[data-pp-goal-tone="rust"] .pp-goal-chip  { background: rgba(122,47,28,0.9); border-color: rgba(255,253,246,0.3); }
[data-pp-goal-tone="rust"] .pp-goal-chip-icon { color: #FFFDF6; }

/* Teal — card 3: Sensitive Stomach */
[data-pp-goal-tone="teal"] { background: #1E4B57; }
[data-pp-goal-tone="teal"] .pp-goal-title { color: #FFFDF6; }
[data-pp-goal-tone="teal"] .pp-goal-body  { color: rgba(255,253,246,0.75); }
[data-pp-goal-tone="teal"] .pp-goal-link  { color: #D6A32E; }
[data-pp-goal-tone="teal"] .pp-goal-chip  { background: rgba(30,75,87,0.9); border-color: rgba(255,253,246,0.3); }
[data-pp-goal-tone="teal"] .pp-goal-chip-icon { color: #FFFDF6; }

/* Cream — card 4: Picky Eater */
[data-pp-goal-tone="cream"] { background: #FBF3E4; }
[data-pp-goal-tone="cream"] .pp-goal-title { color: #2B1A10; }
[data-pp-goal-tone="cream"] .pp-goal-body  { color: rgba(43,26,16,0.72); }
[data-pp-goal-tone="cream"] .pp-goal-link  { color: #7A2F1C; }
[data-pp-goal-tone="cream"] .pp-goal-chip  { background: rgba(251,243,228,0.9); border-color: rgba(43,26,16,0.3); }
[data-pp-goal-tone="cream"] .pp-goal-chip-icon { color: #2B1A10; }

/* ── Philosophy ingredient cards — 3D tone system (Part 3) ── */
/* Base 3D shape — shared across all tones */
.pp-philosophy-card-3d {
  border: 2px solid rgba(43,26,16,0.85);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 0 #5C2416, 0 18px 30px rgba(43,26,16,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pp-philosophy-card-3d:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 0 #5C2416, 0 24px 36px rgba(43,26,16,0.40);
}
.pp-philosophy-card-3d:active {
  transform: translateY(2px);
  box-shadow: 0 6px 0 #5C2416, 0 12px 20px rgba(43,26,16,0.30);
}

/* ── Home philosophy cards — own text classes (do not share with Kitchen .pp-phil-title) ── */
.pp-pc-title{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(1.45rem,2.1vw,1.75rem);line-height:1.1;letter-spacing:-.01em}
.pp-pc-sub{margin:5px 0 0;font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pp-pc-body{margin:0;font-family:'DM Sans',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.65}
@media (max-width:639px){.pp-pc-body{font-size:15px}}

/* Cream — card 1: Whole Protein */
[data-pp-card-tone="cream"] { background: #FBF3E4; }
[data-pp-card-tone="cream"] .pp-pc-title { color: #7A2F1C; }
[data-pp-card-tone="cream"] .pp-pc-sub   { color: #A64A2E; }
[data-pp-card-tone="cream"] .pp-pc-body  { color: rgba(43,26,16,0.78); }
[data-pp-card-tone="cream"] .pp-phil-icon-circle { background: #7A2F1C; }
[data-pp-card-tone="cream"] .pp-phil-icon { color: #FBF3E4; }

/* Green — card 2: Garden Harvest */
[data-pp-card-tone="green"] { background: #2F4A2C; }
[data-pp-card-tone="green"] .pp-pc-title { color: #FFFDF6; }
[data-pp-card-tone="green"] .pp-pc-sub   { color: #F2C14E; }
[data-pp-card-tone="green"] .pp-pc-body  { color: rgba(255,253,246,0.82); }
[data-pp-card-tone="green"] .pp-phil-icon-circle { background: #F2C14E; }
[data-pp-card-tone="green"] .pp-phil-icon { color: #2F4A2C; }

/* Rust — card 3: Zero Compromise */
[data-pp-card-tone="rust"] { background: #7A2F1C; }
[data-pp-card-tone="rust"] .pp-pc-title { color: #F2C14E; }
[data-pp-card-tone="rust"] .pp-pc-sub   { color: #F6EAD7; }
[data-pp-card-tone="rust"] .pp-pc-body  { color: rgba(255,253,246,0.82); }
[data-pp-card-tone="rust"] .pp-phil-icon-circle { background: #FBF3E4; }
[data-pp-card-tone="rust"] .pp-phil-icon { color: #7A2F1C; }

/* How-it-works step dot pulse */
@keyframes pp-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary)/0.35); }
  50%       { box-shadow: 0 0 0 6px hsl(var(--primary)/0); }
}
.pp-step-dot { animation: pp-step-pulse 2.8s ease-in-out infinite; }

/* Final CTA band — deep rust */
.pp-cta-band {
  background-color: #7A2F1C;
  color: #FFFDF6;
  border-top: 1px solid rgba(255,253,246,0.12);
}
.pp-concierge-bg {
  background: #F6EAD7;
  color: #2B1A10;
  border-top: 1px solid rgba(43,26,16,0.12);
  border-bottom: 1px solid rgba(43,26,16,0.12);
}

/* Section 6 — Testimonials — brick ground (Batch 22) */
.pp-section-testimonials {
  background-color: #A64A2E;
  color: #FFFDF6;
  position: relative;
  overflow: hidden;
}
.pp-section-testimonials > * { position: relative; z-index: 1; }

/* Section 7 — Closing Hook — cream */
.pp-section-closing {
  background-color: #F6EAD7;
  color: #2B1A10;
  border-top: 1px solid rgba(43,26,16,0.10);
  position: relative;
  overflow: hidden;
}
.pp-section-closing > * { position: relative; z-index: 1; }

/* Header shimmer overlay */
.pp-header-shimmer {
  background: rgba(255,253,246,0.03);
  pointer-events: none;
}

/* WhatsApp button */
.pp-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 2rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  background: #25D366 !important;
  color: #fff !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pp-btn-wa:hover, .pp-btn-wa:focus {
  background: #20BA5A !important;
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(37,211,102,0.35) !important;
}
.pp-btn-wa:active { transform: scale(1.01) translateY(0) !important; }


/* Hero text shadow — soft rust, no heavy black */
.pp-hero-headline { text-shadow: 0 2px 18px rgba(60,20,10,0.55); }
.pp-hero-sub      { text-shadow: 0 2px 10px rgba(60,20,10,0.45); }
.pp-hero-sub2     { text-shadow: 0 2px 8px rgba(60,20,10,0.40); }
.pp-bowl-caption  { text-shadow: 0 2px 12px rgba(43,26,16,0.35); }
.pp-bowl-caption2 { text-shadow: 0 1px 6px rgba(43,26,16,0.25); }

/* Pull-quote card — deep rust panel on cream section */
.pp-quote-card {
  background: rgba(122,47,28,0.88);
  border: 1px solid rgba(214,163,46,0.28);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.pp-quote-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(92,36,22,0.45), 0 0 0 1px rgba(214,163,46,0.35);
  border-color: rgba(214,163,46,0.55) !important;
}
.pp-quote-card blockquote {
  color: rgba(255,253,246,0.92) !important;
}

/* ── Footer — burnt rust ground ── */
.pp-footer-bg {
  background-color: #5C2416;
  color: #FFFDF6;
  border-top: 1px solid rgba(255,253,246,0.14);
  position: relative;
}

/* Footer hover states — hover:text-foreground on ink resolves to ink-on-ink (invisible).
   Override to paper-white. */
.pp-footer-bg a:hover,
.pp-footer-bg button:hover { color: #FFFDF6 !important; }

/* Footer icon buttons — bg-card/30 on ink needs a visible border */
.pp-footer-bg .pp-social-btn {
  border-color: rgba(255,253,246,0.18) !important;
  background: rgba(255,253,246,0.05) !important;
}
.pp-footer-bg .pp-social-btn:hover {
  border-color: rgba(214,163,46,0.55) !important;
  background: rgba(255,253,246,0.08) !important;
}

/* ── Sub-page editorial body text ── */
.prose-editorial {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  font-weight: 300;
}
.prose-editorial p {
  line-height: 1.8;
  margin-bottom: 1.4em;
}
.prose-editorial h2 {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}

/* ── Sub-page hero consistent style ── */
.page-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D6A32E;
  margin-bottom: 1.25rem;
}
.page-hero-divider {
  width: 56px;
  height: 1.5px;
  background: #D6A32E;
  margin: 0 auto 1.5rem;
}

/* Animated Logo - Animals Come Alive */
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes logo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes logo-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

@keyframes logo-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(214,163,46,0.3)) brightness(1); }
  50% { filter: drop-shadow(0 4px 12px rgba(214,163,46,0.6)) brightness(1.1); }
}

@keyframes logo-happy-dance {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(1.1) rotate(-5deg); }
  20%  { transform: scale(1.05) rotate(5deg); }
  30%  { transform: scale(1.1) rotate(-3deg); }
  40%  { transform: scale(1.05) rotate(3deg); }
  50%  { transform: scale(1.08) rotate(0deg); }
  60%  { transform: scale(1.05) rotate(-2deg); }
  70%  { transform: scale(1.03) rotate(2deg); }
  80%  { transform: scale(1.02) rotate(-1deg); }
  90%  { transform: scale(1.01) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes steam-rise {
  0%   { opacity: 0.75; filter: blur(0px); }
  50%  { opacity: 0.85; filter: blur(2px); }
  100% { opacity: 0.75; filter: blur(0px); }
}

@keyframes steam-wave {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 0.9; }
}

@keyframes haze-pulse {
  0%, 100% { opacity: 0.6; filter: blur(8px); }
  50%       { opacity: 0.8; filter: blur(12px); }
}

@keyframes button-shake {
  0%, 100%              { transform: translateX(0) scale(1.05); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px) scale(1.05); }
  20%, 40%, 60%, 80%    { transform: translateX(8px) scale(1.05); }
}

@keyframes image-pop-shake {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(1.08) rotate(-2deg); }
  20%  { transform: scale(1.08) rotate(2deg); }
  30%  { transform: scale(1.08) rotate(-2deg); }
  40%  { transform: scale(1.08) rotate(2deg); }
  50%  { transform: scale(1.08) rotate(0deg); }
  100% { transform: scale(1.08) rotate(0deg); }
}

.logo-animated          { animation: logo-breathe 3s ease-in-out infinite; transition: transform 0.25s ease, filter 0.25s ease; }
.logo-animated:hover    { animation: none; transform: scale(1.18) !important; filter: contrast(1.02) brightness(1.08) drop-shadow(0 0 10px rgba(214,163,46,0.65)) drop-shadow(0 0 22px rgba(214,163,46,0.35)) !important; }
.logo-animated-pulse    { animation: logo-pulse 2.5s ease-in-out infinite; }
.logo-animated-wiggle   { animation: logo-wiggle 2s ease-in-out infinite; }
.logo-animated-bounce   { animation: logo-bounce 2s ease-in-out infinite; }
.logo-animated-glow     { animation: logo-glow 3s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.6; }
}

@keyframes scaleBreath {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes parallaxSlow {
  0%, 100% { transform: translateY(0px) scale(1.1); }
  50%       { transform: translateY(-15px) scale(1.12); }
}

@keyframes textBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25%       { transform: translateY(-8px) scale(1.05); }
  50%       { transform: translateY(-4px) scale(1.03); }
  75%       { transform: translateY(-6px) scale(1.04); }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(214,163,46,0.5), 0 0 20px rgba(214,163,46,0.3); }
  50%       { text-shadow: 0 0 20px rgba(214,163,46,0.8), 0 0 40px rgba(214,163,46,0.5), 0 0 60px rgba(214,163,46,0.3); }
}

@keyframes letterWave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}



@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up    { animation: fade-in-up 1s ease-out forwards; }
.animation-delay-300   { animation-delay: 0.3s; opacity: 0; }
.animation-delay-600   { animation-delay: 0.6s; opacity: 0; }

@keyframes video-fade-loop {
  0%   { opacity: 1; }
  98%  { opacity: 1; }
  99%  { opacity: 0.95; }
  100% { opacity: 1; }
}

/* Dark page reusable accent blocks */
.pp-dark-accent-block {
  background: hsl(var(--card) / 0.80);
  border: 1px solid rgba(214,163,46,0.25);
  border-radius: 0.5rem;
}
.pp-dark-values-block {
  background: hsl(var(--card) / 0.94);
  border: 1px solid rgba(214,163,46,0.28);
  border-radius: 1rem;
}
.pp-dark-icon-circle {
  background: rgba(214,163,46,0.12);
  border-radius: 9999px;
  padding: 0.75rem;
  display: inline-flex;
}
.pp-dark-cofounder-card {
  border: 1.5px dashed rgba(214,163,46,0.25);
  background: rgba(214,163,46,0.03);
  border-radius: 1rem;
}
.pp-dark-cofounder-avatar {
  background: rgba(255,253,246,0.04);
  border: 3px dashed rgba(214,163,46,0.25);
  border-radius: 9999px;
}
/* ══════════════════════════════════════════════════════════════════════════════
   OUR FOUNDERS PAGE — paper cards, polaroids, sticker, marquee, signatures
   All text on cream/paper cards uses dark brown, NOT the global dark-page tokens.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Paper card — intro card + founder cards */
.pp-founders-card {
  background: #FFFDF6;
  border: 1.5px solid rgba(122,47,28,0.18);
  border-radius: 1rem;
  transition: box-shadow 0.3s ease;
}
.pp-founders-card:hover {
  box-shadow: 0 8px 32px rgba(43,26,16,0.12);
}

/* Override the global dark-page text rules for elements INSIDE a founders card */
.pp-founders-card .pp-dark-heading,
.pp-founders-card h2,
.pp-founders-card h3 {
  color: #2B1A10 !important;
  font-weight: 700;
}
.pp-founders-card .pp-dark-body,
.pp-founders-card p,
.pp-founders-card .text-foreground,
.pp-founders-card [class*="text-foreground/"] {
  color: rgba(43,26,16,0.85) !important;
  font-size: 16px;
  line-height: 1.7;
}
/* Role line (text-primary inside card) */
.pp-founders-card .text-primary {
  color: #7A2F1C !important;
  font-weight: 600;
}

/* Value box — inside founder cards */
.pp-founders-value-box {
  background: #FFFDF6;
  border: 1.5px solid rgba(122,47,28,0.25);
  border-radius: 16px;
  padding: 1rem;
}
.pp-founders-value-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A2F1C;
  margin-bottom: 4px;
}
.pp-founders-value-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(43,26,16,0.85);
}
/* Mustard underline drawn by GSAP under each value label */
.pp-founders-value-underline {
  display: block;
  height: 2px;
  background: #D6A32E;
  border-radius: 2px;
  margin-top: 2px;
  transform-origin: left center;
  transform: scaleX(0);
}

/* Values block (Our Shared Values section) — paper bg */
.pp-founders-values-block {
  background: #FFFDF6;
  border: 1.5px solid rgba(122,47,28,0.18);
  border-radius: 1rem;
}
.pp-founders-values-block .pp-dark-heading,
.pp-founders-values-block h2,
.pp-founders-values-block h3 {
  color: #2B1A10 !important;
  font-weight: 700;
}
.pp-founders-values-block .pp-dark-body,
.pp-founders-values-block p,
.pp-founders-values-block .text-foreground,
.pp-founders-values-block [class*="text-foreground/"] {
  color: rgba(43,26,16,0.85) !important;
}

/* CTA card — paper bg */
.pp-founders-cta-card {
  background: #FFFDF6;
  border: 1.5px solid rgba(122,47,28,0.18);
  border-radius: 1rem;
}
.pp-founders-cta-card .pp-dark-heading,
.pp-founders-cta-card h3 {
  color: #2B1A10 !important;
  font-weight: 700;
}
.pp-founders-cta-card .pp-dark-body,
.pp-founders-cta-card p,
.pp-founders-cta-card .text-foreground,
.pp-founders-cta-card [class*="text-foreground/"] {
  color: rgba(43,26,16,0.85) !important;
}

/* Polaroid frame */
.pp-founders-polaroid {
  position: relative;
  display: inline-block;
  background: #FFFDF6;
  padding: 10px 10px 30px 10px;
  border-radius: 6px;
  box-shadow: 0 12px 26px rgba(43,26,16,0.35);
  /* tilt set per-card via inline style */
}
.pp-founders-polaroid img {
  display: block;
  width: 200px;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 25%;
     object-position: 50% 25%;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .pp-founders-polaroid img {
    width: 240px;
    height: 300px;
  }
}
/* Washi tape strip */
.pp-founders-washi {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  width: 80px;
  height: 18px;
  background: rgba(214,163,46,0.75);
  border-radius: 2px;
  pointer-events: none;
}
/* Scribble circle SVG wrapper */
.pp-founders-scribble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

/* Rotating sticker */
.pp-founders-sticker {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 84px;
  height: 84px;
  pointer-events: none;
  z-index: 2;
}
.pp-founders-sticker svg {
  width: 84px;
  height: 84px;
}

/* Handwritten signature */
.pp-founders-sig {
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  color: #7A2F1C;
  display: block;
  clip-path: inset(0 100% 0 0);
  /* animated to inset(0 0% 0 0) by GSAP */
  line-height: 1.1;
  margin-top: 2px;
}

/* Values marquee band */
.pp-founders-marquee-band {
  background: #7A2F1C;
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pp-founders-marquee-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.pp-founders-marquee-copy {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.pp-founders-marquee-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D6A32E;
  padding: 0 20px;
}

/* WhatsApp brand button — green is WhatsApp's own brand colour, not a palette colour */
.pp-whatsapp-btn {
  background-color: #25D366;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  color: #ffffff;
}
.pp-whatsapp-btn:hover {
  background-color: #20BA5A;
  box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}

.pp-dark-quote-block {
  background: rgba(0,0,0,0.35);
  border-left: 4px solid hsl(var(--primary));
  border-right: 4px solid hsl(var(--primary));
  border-radius: 0.5rem;
}
.pp-dark-story-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.18);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.pp-dark-story-card:hover {
  background: rgba(255,253,246,0.07);
  border-color: rgba(214,163,46,0.38);
  transform: scale(1.04);
}
/* Auth page card */
.pp-auth-card {
  background: rgba(255,253,246,0.05);
  border: 1px solid rgba(214,163,46,0.2);
  border-radius: 1.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Checkout step card — brick ground (Batch 22) */
.pp-checkout-card {
  background: rgba(255,253,246,0.08);
  border: 1px solid rgba(255,253,246,0.18);
  border-radius: 1rem;
}
/* Profile card */
.pp-profile-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.18);
  border-radius: 1rem;
}
/* Admin card */
.pp-admin-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.15);
  border-radius: 0.75rem;
}
/* Journal card */
.pp-journal-card {
  background: rgba(8, 6, 2, 0.82);
  border: 1px solid rgba(214,163,46,0.28);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}
.pp-journal-card:hover {
  background: rgba(8, 6, 2, 0.90);
  border-color: rgba(214,163,46,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(214,163,46,0.18);
}
/* Card title mustard underline grows on hover */
.pp-journal-card h3 {
  background-image: linear-gradient(hsl(var(--pp-mustard)), hsl(var(--pp-mustard)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
.pp-journal-card:hover h3 {
  background-size: 100% 2px;
}
/* Arrow icon nudges 4px right on card hover */
.pp-journal-card:hover .lucide-arrow-right {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}
/* Ingredient card */
.pp-ingredient-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.18);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.pp-ingredient-card:hover {
  background: rgba(255,253,246,0.08);
  border-color: rgba(214,163,46,0.45);
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(214,163,46,0.15);
}
/* Thank you card */
.pp-thankyou-card {
  background: rgba(255,253,246,0.05);
  border: 1px solid rgba(214,163,46,0.2);
  border-radius: 1rem;
  overflow: hidden;
}
/* Privacy card */
.pp-privacy-card {
  background: rgba(255,253,246,0.04);
  border: 1px solid rgba(214,163,46,0.15);
  border-radius: 0.75rem;
}
/* Step indicator active */
.pp-step-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.pp-step-inactive {
  background: rgba(255,253,246,0.12);
  color: rgba(255,253,246,0.55);
  border: 1px solid rgba(255,253,246,0.22);
}
.pp-step-done {
  background: rgba(214,163,46,0.2);
  color: hsl(var(--primary));
  border: 1px solid rgba(214,163,46,0.35);
}

/* Checkout, meal detail, profile, admin — dark overrides for all inner shadcn components */
/* NOTE: checkout is paper ground — no dark overrides needed for it */
.pp-page-meal, .pp-page-profile, .pp-page-admin {
  color: rgba(255,253,246,0.85);
}
.pp-page-meal .text-foreground,
.pp-page-profile .text-foreground,
.pp-page-admin .text-foreground { color: #FFFDF6 !important; }
.pp-page-meal .text-muted-foreground,
.pp-page-profile .text-muted-foreground,
.pp-page-admin .text-muted-foreground { color: rgba(255,253,246,0.5) !important; }
/* Dark card backgrounds — meal/profile/admin only */
.pp-page-meal [class*="bg-card"],
.pp-page-profile [class*="bg-card"],
.pp-page-admin [class*="bg-card"] { background: rgba(255,253,246,0.04) !important; }
.pp-page-meal [class*="border-border"],
.pp-page-profile [class*="border-border"],
.pp-page-admin [class*="border-border"] { border-color: rgba(214,163,46,0.18) !important; }
/* Dark inputs — meal/profile/admin only */
.pp-page-meal input, .pp-page-meal textarea, .pp-page-meal select,
.pp-page-profile input, .pp-page-profile textarea,
.pp-page-admin input, .pp-page-admin textarea {
  background: rgba(255,253,246,0.06) !important;
  border-color: rgba(214,163,46,0.22) !important;
  color: #FFFDF6 !important;
}
.pp-page-meal input::-moz-placeholder, .pp-page-profile input::-moz-placeholder, .pp-page-admin input::-moz-placeholder { color: rgba(255,253,246,0.3) !important; }
.pp-page-meal input::placeholder,
.pp-page-profile input::placeholder,
.pp-page-admin input::placeholder { color: rgba(255,253,246,0.3) !important; }
/* Dark tabs */
.pp-page-admin [role="tablist"] { background: rgba(255,253,246,0.06) !important; border: 1px solid rgba(214,163,46,0.15) !important; }
.pp-page-admin [role="tab"] { color: rgba(255,253,246,0.6) !important; }
.pp-page-admin [role="tab"][data-state="active"] { background: hsl(var(--accent)) !important; color: hsl(var(--accent-foreground)) !important; }
/* Dark separators — meal/profile/admin only */
.pp-page-meal [role="separator"],
.pp-page-profile [role="separator"],
.pp-page-admin [role="separator"] { background: rgba(214,163,46,0.18) !important; }

/* Privacy, admin, profile — dark card overrides for shadcn Card */
.pp-page-privacy .text-foreground,
.pp-page-admin .text-foreground,
.pp-page-profile .text-foreground { color: #FFFDF6 !important; }
.pp-page-privacy .text-muted-foreground,
.pp-page-admin .text-muted-foreground,
.pp-page-profile .text-muted-foreground { color: rgba(255,253,246,0.55) !important; }
.pp-page-privacy [class*="bg-card"],
.pp-page-privacy [class*="bg-background"] { background: rgba(255,253,246,0.04) !important; }
.pp-page-privacy [class*="border-border"] { border-color: rgba(214,163,46,0.18) !important; }
.pp-page-privacy h2 { color: #FFFDF6; }

/* Auth card — all inner text defaults to foreground */
.pp-auth-card { color: rgba(255,253,246,0.85); }
.pp-auth-card label { color: rgba(255,253,246,0.75) !important; }
.pp-auth-card input { background: rgba(255,253,246,0.07) !important; border-color: rgba(214,163,46,0.25) !important; color: #FFFDF6 !important; }
.pp-auth-card input::-moz-placeholder { color: rgba(255,253,246,0.3) !important; }
.pp-auth-card input::placeholder { color: rgba(255,253,246,0.3) !important; }
.pp-auth-card input:focus { border-color: rgba(214,163,46,0.55) !important; box-shadow: 0 0 0 3px rgba(214,163,46,0.12) !important; }
.pp-auth-card .text-muted-foreground { color: rgba(255,253,246,0.5) !important; }
.pp-auth-card .text-foreground { color: #FFFDF6 !important; }
.pp-auth-card h2, .pp-auth-card h3 { color: #FFFDF6; }
.pp-auth-card .separator { background: rgba(214,163,46,0.18) !important; }
/* Checkout / profile / admin dark inner text */
/* Profile / admin dark inner text */
.pp-profile-card, .pp-admin-card {
  color: rgba(255,253,246,0.85);
}
.pp-profile-card .text-muted-foreground,
.pp-admin-card .text-muted-foreground { color: rgba(255,253,246,0.5) !important; }
.pp-profile-card .text-foreground,
.pp-admin-card .text-foreground { color: #FFFDF6 !important; }

.pp-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(255,253,246,0.35);
  background: rgba(255,253,246,0.12);
  border-radius: 9999px;
  padding: 0.35rem 1.25rem;
  color: #F3E3DC;
}

.video-seamless-loop {
  animation: video-fade-loop 1s ease-in-out infinite;
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ── Our Story page — Groot watermark ─────────────────────────────────── */
/* Our Story page — hero title drop-shadow (replaces inline rgba literal) */
.pp-story-hero-title {
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.75), 0 8px 40px rgba(0,0,0,0.5);
}
/* Journal page — subtitle and section headings need strong contrast over the video */
.pp-journal-subtitle {
  text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 3px 18px rgba(0,0,0,0.8);
  font-weight: 600;
  color: #FFFDF6;
}
/* Eyebrow pill glow for journal hero */
.pp-journal-eyebrow-glow {
  box-shadow: 0 0 18px 2px hsl(var(--primary) / 0.45);
}
/* Section label glow (Featured Article, From Our Writers) */
.pp-journal-label-glow {
  /* Brighter gold: lightness raised from 55% → 72% so it pops over the dark video */
  color: hsl(42 70% 72%);
  /* Glow + dark backing shadow so it reads over any video frame */
  text-shadow:
    0 0 10px hsl(42 70% 72% / 0.85),
    0 0 22px hsl(42 70% 72% / 0.45),
    0 1px 4px rgba(0,0,0,0.95),
    0 2px 10px rgba(0,0,0,0.8);
  font-size: 1rem;
  font-weight: 700;
}
/* Latest Articles heading — bright over video */
.pp-journal-section-heading {
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.7);
}
/* Article grid cards — less transparent, more readable — definition is above in .pp-journal-card */
.pp-dark-story-card--bright {
  background: rgba(10,8,4,0.62);
  border: 1px solid rgba(214,163,46,0.55);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* ── Background music capsule ─────────────────────────────────────────── */

/* Ripple rings — pulse outward continuously */
@keyframes pp-ripple {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Sound-wave bars */
@keyframes pp-bar1 { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes pp-bar2 { 0%, 100% { height: 10px; } 50% { height: 4px; } }
@keyframes pp-bar3 { 0%, 100% { height: 6px; } 50% { height: 16px; } }

/* Playing glow */
@keyframes pp-music-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 10px 2px hsl(var(--primary) / 0.35); }
  50%       { box-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 0 22px 6px hsl(var(--primary) / 0.60); }
}

/* ── Capsule shell ── */
.pp-music-capsule {
  /* Docked at far-right edge — only ~10px sliver visible at rest */
  position: fixed;
  top: 6rem;           /* 96px — matches BackNav on the 3 hero pages */
  right: -6.6rem;      /* collapsed: most of capsule hidden off-screen */
  left: auto;
  z-index: 49;

  /* Capsule dimensions — height 2.75rem (44px) matches BackNav pill height */
  height: 2.75rem;
  width: 8rem;         /* full width when expanded */
  border-radius: 9999px;
  padding: 0 0.85rem 0 0.7rem;

  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;

  background: rgba(28, 26, 20, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid hsl(var(--primary) / 0.55);
  color: hsl(var(--primary) / 0.75);
  cursor: pointer;

  /* Smooth slide in/out */
  transition: right 0.35s cubic-bezier(0.34, 1.26, 0.64, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease;

  box-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 0 6px 1px hsl(var(--primary) / 0.18);
}

/* Expanded — slide fully into view, flush with right edge */
.pp-music-capsule[data-expanded="true"] {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

/* Playing glow */
.pp-music-capsule[data-playing="true"] {
  animation: pp-music-glow 2.2s ease-in-out infinite;
  border-color: hsl(var(--primary) / 0.85);
  color: hsl(var(--primary));
}

.pp-music-capsule:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: rgba(28, 26, 20, 0.98);
}

/* ── Ripple rings container ── */
.pp-music-ripple {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-music-ripple span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--primary) / 0.55);
  animation: pp-ripple 2s ease-out infinite;
}
.pp-music-ripple span:nth-child(2) {
  animation-delay: 1s;
}

/* ── Icon wrapper ── */
.pp-music-capsule-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  /* Sits on top of ripple — negative margin pulls it over the ripple area */
  margin-left: -1.75rem;
  position: relative;
  z-index: 1;
}

.pp-music-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* ── Label — hidden until expanded ── */
.pp-music-capsule-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
  pointer-events: none;
}
.pp-music-capsule[data-expanded="true"] .pp-music-capsule-label {
  opacity: 1;
  transform: translateX(0);
}

/* ── Sound-wave bars ── */
.pp-music-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}
.pp-music-bars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: hsl(var(--primary));
}
.pp-music-bars span:nth-child(1) { animation: pp-bar1 0.7s ease-in-out infinite; }
.pp-music-bars span:nth-child(2) { animation: pp-bar2 0.5s ease-in-out infinite; }
.pp-music-bars span:nth-child(3) { animation: pp-bar3 0.6s ease-in-out infinite; }

/* ── BackNav fixed-left alignment (Kitchen, Our Founders, Our Story) ── */
.pp-backnav-fixed {
  position: fixed;
  top: 6rem;           /* 96px — exactly matches capsule top */
  left: -6.6rem;       /* docked: most of capsule hidden off-screen, ~22px sliver peeks */
  z-index: 49;
  height: 2.75rem;     /* 44px — exactly matches capsule height */
  width: 8rem;         /* mirrors music capsule width */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* arrow icon sits at the RIGHT (visible) edge of the pill */
  padding: 0 0.7rem 0 0.85rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  background: rgba(28, 26, 20, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid hsl(var(--primary) / 0.35);
  border-left: none;
  color: hsl(var(--primary));
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pp-backnav-fixed:hover,
.pp-backnav-fixed:active {
  border-color: hsl(var(--primary));
  background: rgba(28, 26, 20, 0.98);
  box-shadow: 0 0 14px rgba(214,163,46,0.45);
}

/* ── Social media icon hover / click animation ─────────────────────────── */
@keyframes pp-social-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.pp-social-btn {
  transition: transform 0.18s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.pp-social-btn:hover {
  transform: scale(1.22);
  box-shadow: 0 0 10px 2px hsl(var(--primary) / 0.35);
}
.pp-social-btn:active {
  animation: pp-social-pop 0.32s ease forwards;
}

/* ── Custom scrollbars, site-wide ─────────────────────────────────────────
   Replaces the default plain grey browser scrollbar with something that
   matches the dark/gold brand — applies everywhere a scrollbar appears
   (the checkout order summary, dashboard panels, any overflow area),
   not just one specific spot. Covers both Chrome/Safari/Edge (the
   ::-webkit- rules) and Firefox (the scrollbar-color/width properties). */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--primary) / 0.55) hsl(var(--card));
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--card));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.55);
  border-radius: 999px;
  border: 2px solid hsl(var(--card));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.80);
  background-clip: padding-box;
}

/* ── Animated background glows ─────────────────────────────────────────────── */
.pp-animated-bg { position: relative; isolation: isolate; }

.pp-animated-bg::before,
.pp-animated-bg::after {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: transform;
}

.pp-animated-bg::before {
  background-image:
    radial-gradient(38vmax 38vmax at 22% 28%, hsl(var(--primary) / 0.14), transparent 65%),
    radial-gradient(30vmax 30vmax at 78% 18%, hsl(var(--primary) / 0.08), transparent 68%);
  animation: pp-drift-a 48s ease-in-out infinite alternate;
}

.pp-animated-bg::after {
  background-image:
    radial-gradient(34vmax 34vmax at 72% 76%, hsl(var(--primary) / 0.10), transparent 66%),
    radial-gradient(26vmax 26vmax at 18% 82%, hsl(25 70% 50% / 0.07), transparent 70%);
  animation: pp-drift-b 64s ease-in-out infinite alternate;
}

@keyframes pp-drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes pp-drift-b {
  from { transform: translate3d(3%, 2%, 0) scale(1.05); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-animated-bg::before,
  .pp-animated-bg::after { animation: none; }
}

@media (max-width: 767px) {
  .pp-animated-bg::before,
  .pp-animated-bg::after { animation: none; }
}

/* ── Header background video (Batch 20) ── */
/* Fills the thin sticky bar; saturate(0.35) keeps it as faint grain under the mustard veil */
.pp-header-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
  filter: saturate(0.35);
  will-change: transform;
}

/* ── Hero background video (Batch 21) ── */
/* Replaces the Vimeo iframe; object-fit:cover handles 16:9→any-aspect cropping */
.pp-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
  transform: translateZ(0);
  isolation: isolate;
}

/* ══════════════════════════════════════════════════════
   PART 2 — Header: solid mustard, no video, no backdrop-filter
   ══════════════════════════════════════════════════════ */
.pp-header-base {
  background: rgba(214,163,46,0.97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Noise texture on header — disabled */
.pp-header-base::after {
  display: none;
}

/* ══════════════════════════════════════════════════════
   PART 3 — Music capsule: 44px round button, bottom-left
   ══════════════════════════════════════════════════════ */
.pp-music-capsule {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: 16px !important;
  bottom: calc(16px + var(--pp-bottom-bar, 0px)) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  justify-content: center !important;
  background: #D6A32E !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  color: #2B1A10 !important;
  box-shadow: 0 4px 14px rgba(92,36,22,0.35) !important;
  overflow: hidden !important;
  animation: none !important;
  transition: width 0.35s cubic-bezier(0.34,1.26,0.64,1), border-radius 0.35s ease, box-shadow 0.25s ease !important;
}
.pp-music-capsule[data-expanded="true"] {
  width: 8rem !important;
  border-radius: 9999px !important;
  right: auto !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  border-right: none !important;
  justify-content: flex-start !important;
  padding: 0 0.85rem 0 0.7rem !important;
}
.pp-music-capsule[data-playing="true"] {
  animation: pp-music-glow-warm 2.2s ease-in-out infinite !important;
}
@keyframes pp-music-glow-warm {
  0%, 100% { box-shadow: 0 4px 14px rgba(92,36,22,0.35), 0 0 10px 2px rgba(214,163,46,0.35); }
  50%       { box-shadow: 0 4px 18px rgba(92,36,22,0.45), 0 0 22px 6px rgba(214,163,46,0.60); }
}
.pp-music-capsule:hover {
  background: #C4922A !important;
  box-shadow: 0 6px 20px rgba(92,36,22,0.45) !important;
}
.pp-music-capsule .pp-music-ripple span {
  border-color: rgba(43,26,16,0.35) !important;
}
.pp-music-capsule .pp-music-bars span {
  background: #2B1A10 !important;
}
.pp-music-capsule-label {
  color: #2B1A10 !important;
}

/* ══════════════════════════════════════════════════════
   PART 4 — Bottom bar CSS var + floating button spacing
   ══════════════════════════════════════════════════════ */
:root {
  --pp-bottom-bar: 0px;
  /* Deep rust overlay for search/modal backdrops */
  --pp-deep-rust: 14 59% 30%;
  /* Burnt rust for footer / preloader */
  --pp-burnt-rust: 14 59% 23%;
  /* Preloader panel colours */
  --pp-preloader-bg: 14 55% 29%;      /* maroon #7A2F1C */
  --pp-preloader-panel-front: 14 55% 29%; /* maroon #7A2F1C */
  --pp-preloader-panel-back: 42 68% 51%;  /* mustard #D6A32E */
  --pp-preloader-gold: 42 87% 63%;        /* bright golden #F2C14E */
  --pp-preloader-mustard: 38 68% 51%;     /* mustard #D6A32E */
  --pp-preloader-paper: 46 100% 98%;      /* paper #FFFDF6 */
  --pp-preloader-glow: 42 87% 63%;        /* glow colour same as gold */
  /* Paper white */
  --pp-paper: 48 100% 99%;            /* #FFFDF6 */
  /* Mustard */
  --pp-mustard: 42 68% 51%;           /* #D6A32E */
  --pp-hazard-red: 0 64% 32%;         /* #8B1E1E */
  --pp-hazard-ring: 0 60% 38%;        /* #C0392B */
  --pp-dark-brown: 20 47% 12%;        /* #2B1A10 */
  --pp-cream: 36 67% 93%;             /* #F6EAD7 */
  /* Dark brown */
  --pp-dark-brown: 22 47% 12%;        /* #2B1A10 */
}
body {
  padding-bottom: var(--pp-bottom-bar);
}

/* Chat bubble — above bar */
.pp-chat-widget-bubble {
  bottom: calc(16px + var(--pp-bottom-bar, 0px)) !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
}

/* ChatWidget outer wrapper — safe-area-aware bottom-right positioning */
/* Targets the fixed wrapper rendered by ChatWidget.tsx (bottom-6 right-6 z-50) */
.fixed.bottom-6.right-6.z-50 {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--pp-bottom-bar, 0px)) !important;
  right: 16px !important;
}
@media (min-width: 640px) {
  .fixed.bottom-6.right-6.z-50 {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}

/* FAB — above music button */
.pp-fab-default-pos {
  bottom: calc(72px + var(--pp-bottom-bar, 0px)) !important;
  left: 16px !important;
}

/* Hide floating buttons while scrolling down — JS adds .pp-scroll-hide */
@media (max-width: 1023px) {
  .pp-chat-widget-bubble.pp-scroll-hide {
    transform: translateY(90px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }
  .pp-music-capsule.pp-scroll-hide {
    transform: translateX(-90px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }
  .pp-fab-default-pos.pp-scroll-hide {
    transform: translateX(-90px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }
}

/* ══════════════════════════════════════════════════════
   PART 5 — SplitText word fix: words never break mid-word
   ══════════════════════════════════════════════════════ */
.pp-split-word {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* SplitText line-mask clip fix: give each mask line breathing room so
   tall letters (Anton ascenders/descenders) are never cut at top or bottom */
.pp-split-line {
  padding-block: 0.08em !important;
  margin-block: -0.08em !important;
  overflow: visible !important;
}

/* Hero headline line-inner mask (explicit .pp-line-inner / .pp-line-mask) */
.pp-line-mask,
.pp-line-inner {
  padding-top: 0.1em !important;
  margin-top: -0.1em !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════
   PART 8 — Goal card doodles: visible by default; JS sets autoAlpha 0 on init
   ══════════════════════════════════════════════════════ */
[data-pp-goal-doodles] {
  display: block;
  pointer-events: none;
}
[data-pp-doodle] {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   PART 11 — How It Works mobile: step numbers above title
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pp-how-step {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  [data-pp-how-step-num] {
    position: static !important;
    transform: none !important;
    font-size: clamp(3rem, 18vw, 5rem) !important;
    color: rgba(214,163,46,0.30) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── Preloader steam wisp animation ── */
@keyframes pp-steam {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.65; }
  70%  { opacity: 0.35; transform: translateY(-12px) scaleX(1.15); }
  100% { opacity: 0; transform: translateY(-22px) scaleX(0.8); }
}

/* ══════════════════════════════════════════════════════
   PART 12 — Persistent Cart Bar: deep rust + paper text
   ══════════════════════════════════════════════════════ */
[data-cart-bar] {
  background: #7A2F1C !important;
  border-top-color: rgba(214,163,46,0.25) !important;
  color: #FFFDF6 !important;
}
[data-cart-bar] p {
  color: #FFFDF6 !important;
}
[data-cart-bar] .text-primary,
[data-cart-bar] [class*="text-primary"] {
  color: #D6A32E !important;
}
[data-cart-bar] .text-foreground {
  color: #FFFDF6 !important;
}
[data-cart-bar] [class*="text-foreground/"] {
  color: rgba(255,253,246,0.72) !important;
}

/* ══════════════════════════════════════════════════════
   PART 13 — 404 Treat Game: SnapBanner keyframes
   ══════════════════════════════════════════════════════ */
@keyframes pp-snap-scrim-in {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pp-snap-slash-in {
  0%   { transform: rotate(-7deg) scaleX(0); opacity: 0; }
  30%  { transform: rotate(-7deg) scaleX(1); opacity: 1; }
  75%  { transform: rotate(-7deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-7deg) scaleX(1); opacity: 0; }
}
@keyframes pp-snap-word-top {
  0%   { opacity: 0; transform: translateX(-0.5vw); }
  25%  { opacity: 1; transform: translateX(-0.5vw); }
  55%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes pp-snap-word-bottom {
  0%   { opacity: 0; transform: translateX(0.5vw); }
  25%  { opacity: 1; transform: translateX(0.5vw); }
  55%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes pp-snap-sub-in {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  65%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.pp-snap-banner {
  animation-duration: 2.4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.pp-snap-scrim {
  position: absolute;
  inset: 0;
  background: hsl(var(--pp-burnt-rust) / 0.55);
  animation: pp-snap-scrim-in 2.4s ease-in-out forwards;
}
.pp-snap-slash {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 6px;
  background: hsl(var(--pp-mustard));
  transform-origin: left center;
  animation: pp-snap-slash-in 2.4s ease-in-out forwards;
  box-shadow: 0 0 18px hsl(var(--pp-mustard) / 0.7);
}
.pp-snap-words {
  position: relative;
  z-index: 2;
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1;
  color: hsl(var(--pp-paper));
  text-align: center;
  overflow: hidden;
  height: 1.1em;
  letter-spacing: 0.04em;
}
.pp-snap-word-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  clip-path: inset(0 0 50% 0);
  animation: pp-snap-word-top 2.4s ease-in-out forwards;
}
.pp-snap-word-bottom {
  position: absolute;
  top: 0; left: 0; right: 0;
  clip-path: inset(50% 0 0 0);
  animation: pp-snap-word-bottom 2.4s ease-in-out forwards;
}
.pp-snap-sub {
  position: relative;
  z-index: 2;
  margin-top: 0.75rem;
  font-family: sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  color: hsl(var(--pp-paper));
  letter-spacing: 0.06em;
  animation: pp-snap-sub-in 2.4s ease-in-out forwards;
}

/* ── Critter preview page chrome ── */
.pp-critter-preview-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 2px solid hsl(var(--pp-mustard) / 0.4);
  margin-bottom: 0;
}
.pp-critter-preview-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--pp-mustard) / 0.15);
}
.pp-critter-preview-label {
  width: 160px;
  font-size: 0.78rem;
  font-family: monospace;
  opacity: 0.7;
  flex-shrink: 0;
  color: hsl(var(--pp-dark-brown));
}
.pp-critter-preview-tile {
  border-radius: 12px;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 80px;
}
.pp-critter-tile-light   { background: hsl(var(--pp-paper)); border: 1px solid hsl(var(--pp-mustard) / 0.3); }
.pp-critter-tile-dark    { background: hsl(var(--pp-brand-maroon)); }
.pp-critter-tile-mustard { background: hsl(var(--pp-mustard)); }
.pp-critter-badge {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 6px;
}
.pp-critter-badge-light   { background: hsl(var(--pp-paper)); border: 1px solid hsl(var(--pp-mustard) / 0.4); }
.pp-critter-badge-dark    { background: hsl(var(--pp-brand-maroon)); }
.pp-critter-badge-mustard { background: hsl(var(--pp-mustard)); }

/* ═══════════════════════════════════════════════════════════════════════
   CRITTER ANIMATIONS
   All transforms/opacity only — GPU-friendly.
   data-paused="true" → animation-play-state: paused (set by IntersectionObserver).
   @media (prefers-reduced-motion) → static final pose only.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared pause mechanism ── */
.pp-critter[data-paused="true"] * {
  animation-play-state: paused !important;
}

/* ── Reduced motion: kill all critter animations ── */
@media (prefers-reduced-motion: reduce) {
  .pp-critter * { animation: none !important; }
}

/* ══════════════════════════════════════════════════════
   1. RunningDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-leg-fl {
  0%, 100% { transform: rotate(-30deg); }
  50%       { transform: rotate(30deg); }
}
@keyframes pp-leg-fr {
  0%, 100% { transform: rotate(30deg); }
  50%       { transform: rotate(-30deg); }
}
@keyframes pp-leg-rl {
  0%, 100% { transform: rotate(20deg); }
  50%       { transform: rotate(-20deg); }
}
@keyframes pp-leg-rr {
  0%, 100% { transform: rotate(-20deg); }
  50%       { transform: rotate(20deg); }
}
@keyframes pp-tail-wave {
  0%, 100% { transform: rotate(-10deg); }
  50%       { transform: rotate(20deg); }
}
.pp-critter-running-dog .pp-leg-fl { animation: pp-leg-fl 0.4s ease-in-out infinite; transform-origin: 50px 52px; transform-box: fill-box; }
.pp-critter-running-dog .pp-leg-fr { animation: pp-leg-fr 0.4s ease-in-out infinite; transform-origin: 62px 53px; transform-box: fill-box; }
.pp-critter-running-dog .pp-leg-rl { animation: pp-leg-rl 0.4s ease-in-out infinite; transform-origin: 72px 52px; transform-box: fill-box; }
.pp-critter-running-dog .pp-leg-rr { animation: pp-leg-rr 0.4s ease-in-out infinite; transform-origin: 82px 51px; transform-box: fill-box; }
.pp-critter-running-dog .pp-critter-tail { animation: pp-tail-wave 0.5s ease-in-out infinite; transform-origin: 32px 30px; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   2. BouncingBall
   ══════════════════════════════════════════════════════ */
@keyframes pp-ball-bounce-anim {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  80%       { transform: translateY(28px) scaleY(0.75) scaleX(1.2); }
  90%       { transform: translateY(28px) scaleY(0.75) scaleX(1.2); }
}
@keyframes pp-ball-shadow-anim {
  0%, 100% { transform: scaleX(0.6); opacity: 0.1; }
  80%, 90% { transform: scaleX(1.2); opacity: 0.25; }
}
.pp-critter-bouncing-ball .pp-ball-bounce { animation: pp-ball-bounce-anim 1.2s cubic-bezier(.36,.07,.19,.97) infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-bouncing-ball .pp-ball-shadow { animation: pp-ball-shadow-anim 1.2s cubic-bezier(.36,.07,.19,.97) infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   3. RockingBone
   ══════════════════════════════════════════════════════ */
@keyframes pp-bone-rock-anim {
  0%, 100% { transform: rotate(-18deg); }
  50%       { transform: rotate(18deg); }
}
.pp-critter-rocking-bone .pp-bone-rock { animation: pp-bone-rock-anim 2s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   4. PawPrintTrail
   ══════════════════════════════════════════════════════ */
@keyframes pp-paw-stamp-anim {
  0%   { opacity: 0; transform: scale(0) rotate(var(--paw-rot, 0deg)); }
  15%  { opacity: 1; transform: scale(1.1) rotate(var(--paw-rot, 0deg)); }
  30%  { opacity: 1; transform: scale(1) rotate(var(--paw-rot, 0deg)); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1) rotate(var(--paw-rot, 0deg)); }
}
.pp-critter-paw-trail .pp-paw-stamp {
  animation: pp-paw-stamp-anim 2.4s ease-in-out infinite;
  opacity: 0;
  transform-box: fill-box;
}

/* ══════════════════════════════════════════════════════
   5. WaggingDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-wag-anim {
  0%, 100% { transform: rotate(-35deg); }
  50%       { transform: rotate(35deg); }
}
@keyframes pp-head-tilt-anim {
  0%, 60%, 100% { transform: rotate(0deg); }
  70%            { transform: rotate(12deg); }
  80%            { transform: rotate(-6deg); }
  90%            { transform: rotate(8deg); }
}
.pp-critter-wagging-dog .pp-dog-tail-wag  { animation: pp-wag-anim 0.35s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.pp-critter-wagging-dog .pp-dog-head-tilt { animation: pp-head-tilt-anim 4s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   6. SniffingDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-sniff-head-anim {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
@keyframes pp-scent-rise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-14px) scaleX(1.3); }
}
.pp-critter-sniffing-dog .pp-sniff-head { animation: pp-sniff-head-anim 1s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-sniffing-dog .pp-scent-1 { animation: pp-scent-rise 1.8s ease-out infinite; animation-delay: 0s; transform-box: fill-box; }
.pp-critter-sniffing-dog .pp-scent-2 { animation: pp-scent-rise 1.8s ease-out infinite; animation-delay: 0.4s; transform-box: fill-box; }
.pp-critter-sniffing-dog .pp-scent-3 { animation: pp-scent-rise 1.8s ease-out infinite; animation-delay: 0.8s; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   7. SpinningBiscuit
   ══════════════════════════════════════════════════════ */
@keyframes pp-biscuit-spin-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pp-crumb-pop {
  0%, 60%  { opacity: 0; transform: scale(0) translate(0, 0); }
  70%       { opacity: 1; transform: scale(1.2) translate(var(--cx, 0px), var(--cy, 0px)); }
  100%      { opacity: 0; transform: scale(0.8) translate(var(--cx, 0px), var(--cy, 0px)); }
}
.pp-critter-spinning-biscuit .pp-biscuit-spin { animation: pp-biscuit-spin-anim 3s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-spinning-biscuit .pp-crumb-1 { animation: pp-crumb-pop 3s ease-out infinite; animation-delay: 0s;    --cx: -6px; --cy: -6px; transform-box: fill-box; }
.pp-critter-spinning-biscuit .pp-crumb-2 { animation: pp-crumb-pop 3s ease-out infinite; animation-delay: 0.75s; --cx: 6px;  --cy: -6px; transform-box: fill-box; }
.pp-critter-spinning-biscuit .pp-crumb-3 { animation: pp-crumb-pop 3s ease-out infinite; animation-delay: 1.5s;  --cx: 6px;  --cy: 6px; transform-box: fill-box; }
.pp-critter-spinning-biscuit .pp-crumb-4 { animation: pp-crumb-pop 3s ease-out infinite; animation-delay: 2.25s; --cx: -6px; --cy: 6px; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   8. SleepingDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-breathe-anim {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.04); }
}
@keyframes pp-z-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-18px) scale(1); }
}
.pp-critter-sleeping-dog .pp-sleep-breathe { animation: pp-breathe-anim 3s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-sleeping-dog .pp-z-1 { animation: pp-z-float 3s ease-out infinite; animation-delay: 0s; transform-box: fill-box; }
.pp-critter-sleeping-dog .pp-z-2 { animation: pp-z-float 3s ease-out infinite; animation-delay: 0.6s; transform-box: fill-box; }
.pp-critter-sleeping-dog .pp-z-3 { animation: pp-z-float 3s ease-out infinite; animation-delay: 1.2s; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   9. SteamingBowl
   ══════════════════════════════════════════════════════ */
@keyframes pp-steam-rise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  20%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-20px) scaleX(1.4); }
}
.pp-critter-steaming-bowl .pp-steam-1 { animation: pp-steam-rise 2s ease-out infinite; animation-delay: 0s; transform-box: fill-box; }
.pp-critter-steaming-bowl .pp-steam-2 { animation: pp-steam-rise 2s ease-out infinite; animation-delay: 0.5s; transform-box: fill-box; }
.pp-critter-steaming-bowl .pp-steam-3 { animation: pp-steam-rise 2s ease-out infinite; animation-delay: 1s; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   10. FrisbeeArc
   ══════════════════════════════════════════════════════ */
@keyframes pp-frisbee-fly-anim {
  0%   { transform: translateX(-50px) translateY(30px) rotate(-10deg); }
  50%  { transform: translateX(0px)   translateY(-10px) rotate(5deg); }
  100% { transform: translateX(50px)  translateY(30px) rotate(15deg); }
}
.pp-critter-frisbee-arc .pp-frisbee-fly { animation: pp-frisbee-fly-anim 2.4s ease-in-out infinite alternate; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   11. DiggingDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-dig-paw-l-anim {
  0%, 100% { transform: rotate(-20deg) translateY(0); }
  50%       { transform: rotate(20deg) translateY(4px); }
}
@keyframes pp-dig-paw-r-anim {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50%       { transform: rotate(-20deg) translateY(4px); }
}
@keyframes pp-dirt-fly {
  0%, 50%  { opacity: 0; transform: translate(0, 0) scale(0); }
  60%       { opacity: 1; transform: translate(var(--dx, -8px), var(--dy, -8px)) scale(1.2); }
  100%      { opacity: 0; transform: translate(var(--dx, -14px), var(--dy, -14px)) scale(0.8); }
}
.pp-critter-digging-dog .pp-dig-paw-l { animation: pp-dig-paw-l-anim 0.5s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-digging-dog .pp-dig-paw-r { animation: pp-dig-paw-r-anim 0.5s ease-in-out infinite; animation-delay: 0.25s; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-digging-dog .pp-dirt-1 { animation: pp-dirt-fly 1s ease-out infinite; animation-delay: 0s;    --dx: -12px; --dy: -10px; transform-box: fill-box; }
.pp-critter-digging-dog .pp-dirt-2 { animation: pp-dirt-fly 1s ease-out infinite; animation-delay: 0.25s; --dx: -8px;  --dy: -16px; transform-box: fill-box; }
.pp-critter-digging-dog .pp-dirt-3 { animation: pp-dirt-fly 1s ease-out infinite; animation-delay: 0.5s;  --dx: -16px; --dy: -8px; transform-box: fill-box; }
.pp-critter-digging-dog .pp-dirt-4 { animation: pp-dirt-fly 1s ease-out infinite; animation-delay: 0.75s; --dx: -6px;  --dy: -12px; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   12. ButterflyChase
   ══════════════════════════════════════════════════════ */
@keyframes pp-butterfly-orbit-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pp-butterfly-flutter-anim {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.3); }
}
@keyframes pp-pup-watch-anim {
  0%   { transform: rotate(-15deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}
.pp-critter-butterfly-chase .pp-butterfly-orbit  { animation: pp-butterfly-orbit-anim 4s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-butterfly-chase .pp-butterfly-flutter { animation: pp-butterfly-flutter-anim 0.3s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-butterfly-chase .pp-pup-watch         { animation: pp-pup-watch-anim 4s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   13. WaterBowl
   ══════════════════════════════════════════════════════ */
@keyframes pp-ripple-expand {
  0%   { transform: scale(0.2); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.pp-critter-water-bowl .pp-ripple-1 { animation: pp-ripple-expand 2s ease-out infinite; animation-delay: 0s; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-water-bowl .pp-ripple-2 { animation: pp-ripple-expand 2s ease-out infinite; animation-delay: 0.5s; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-water-bowl .pp-ripple-3 { animation: pp-ripple-expand 2s ease-out infinite; animation-delay: 1s; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   14. RollingBall
   ══════════════════════════════════════════════════════ */
@keyframes pp-ball-roll-anim {
  0%   { transform: translateX(-44px); }
  100% { transform: translateX(44px); }
}
@keyframes pp-roll-stripe-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.pp-critter-rolling-ball .pp-ball-roll   { animation: pp-ball-roll-anim 2s ease-in-out infinite alternate; transform-box: fill-box; }
.pp-critter-rolling-ball .pp-roll-stripe { animation: pp-roll-stripe-anim 1s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   15. TreatJar
   ══════════════════════════════════════════════════════ */
@keyframes pp-lid-pop-anim {
  0%, 60%, 100% { transform: translateY(0); }
  70%            { transform: translateY(-10px) rotate(-5deg); }
  80%            { transform: translateY(-8px) rotate(3deg); }
  90%            { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes pp-treat-pop-anim {
  0%, 60%  { opacity: 0; transform: translateY(0) scale(0); }
  70%       { opacity: 1; transform: translateY(-18px) scale(1.1); }
  85%       { opacity: 1; transform: translateY(-14px) scale(1); }
  100%      { opacity: 0; transform: translateY(-10px) scale(0.8); }
}
.pp-critter-treat-jar .pp-lid-pop   { animation: pp-lid-pop-anim 3s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pp-critter-treat-jar .pp-treat-pop { animation: pp-treat-pop-anim 3s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   16. TailChaser
   ══════════════════════════════════════════════════════ */
@keyframes pp-tail-spin-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.pp-critter-tail-chaser .pp-tail-spin { animation: pp-tail-spin-anim 1.2s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ══════════════════════════════════════════════════════
   17. PeekingDog
   ══════════════════════════════════════════════════════ */
@keyframes pp-peek-anim {
  0%, 30%, 100% { transform: translateY(0); }
  10%            { transform: translateY(-12px); }
  20%            { transform: translateY(-10px); }
}
@keyframes pp-blink-anim {
  0%, 88%, 100% { opacity: 1; }
  90%, 96%      { opacity: 0; }
}
@keyframes pp-eye-closed-anim {
  0%, 88%, 100% { opacity: 0; }
  90%, 96%      { opacity: 1; }
}
.pp-critter-peeking-dog .pp-peek-head  { animation: pp-peek-anim 4s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.pp-critter-peeking-dog .pp-eye-open   { animation: pp-blink-anim 4s ease-in-out infinite; }
.pp-critter-peeking-dog .pp-eye-closed { animation: pp-eye-closed-anim 4s ease-in-out infinite; }

/* ===== HOME HERO ONLY: very thin black hairline on the 4 hero text pieces =====
   Scoped to [data-pp-home-hero-hairline], which exists only on the Home hero.
   Replaces the older white / mustard outlines on these 4 pieces only. */
[data-pp-home-hero-hairline] .pp-hero-eyebrow-style,
[data-pp-home-hero-hairline] .pp-hero-eyebrow-style span,
[data-pp-home-hero-hairline] .pp-hero-headline-text,
[data-pp-home-hero-hairline] .pp-hero-headline-text span,
[data-pp-home-hero-hairline] .pp-hero-headline-text .text-primary,
[data-pp-home-hero-hairline] .pp-hero-headline-text .text-primary span,
[data-pp-home-hero-hairline] .pp-hero-sub1-style,
[data-pp-home-hero-hairline] .pp-hero-sub1-style span,
[data-pp-home-hero-hairline] .pp-hero-sub2-style,
[data-pp-home-hero-hairline] .pp-hero-sub2-style span{
  -webkit-text-stroke:0.7px #000 !important;
  paint-order:stroke fill;
}

/* ===================== MEAL DETAIL PAGES — light theme, wall stickers, glass UI ===================== */
.pp-meal-light{--meal-bg:#F5E1D0;--meal-acc:#A5582C;--pp-ink:#2B1A10}
.pp-meal-light[data-meal="chicken"]{--meal-bg:#F5E1D0;--meal-acc:#A5582C}
.pp-meal-light[data-meal="garden"] {--meal-bg:#DDEBDC;--meal-acc:#3E6B47}
.pp-meal-light[data-meal="amber"]  {--meal-bg:#F5EBCF;--meal-acc:#8A6A1F}
.pp-meal-light[data-meal="velvet"] {--meal-bg:#F2DAE0;--meal-acc:#93455E}
.pp-page-meal.pp-meal-light{background-color:var(--meal-bg) !important;background-image:none !important;color:var(--pp-ink)}
.pp-page-meal.pp-meal-light::before{display:none !important}
.pp-page-meal.pp-meal-light .text-foreground{color:#2B1A10 !important}
.pp-page-meal.pp-meal-light [class*="text-foreground/"]{color:rgba(43,26,16,.78) !important}
.pp-page-meal.pp-meal-light .text-muted-foreground{color:rgba(43,26,16,.62) !important}
.pp-page-meal.pp-meal-light .text-primary,
.pp-page-meal.pp-meal-light [class*="text-primary/"]{color:var(--meal-acc) !important}
.pp-wall{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pp-sticker{position:absolute;color:#fff;opacity:.85;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 1px 0 rgba(43,26,16,.06));transform:rotate(var(--r,0deg));clip-path:inset(0 100% 0 0);animation:pp-paint .9s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:var(--d,0s)}
.pp-sticker svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes pp-paint{to{clip-path:inset(0 0 0 0)}}
.pp-sticker.is-wiggle{clip-path:none;animation:pp-wiggle .6s ease}
@keyframes pp-wiggle{0%,100%{transform:rotate(var(--r))}25%{transform:rotate(calc(var(--r) - 10deg)) scale(1.08)}60%{transform:rotate(calc(var(--r) + 7deg))}}
@media (max-width:700px){.pp-sticker.pp-hide-sm{display:none}}
.pp-page-meal.pp-meal-light > *:not(.pp-wall){position:relative;z-index:1}
.pp-meal-light .pp-glass{background:rgba(255,253,246,.62) !important;border:1px solid rgba(255,255,255,.85) !important;backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 10px 30px rgba(43,26,16,.10), inset 0 1px 0 rgba(255,255,255,.9)}
.pp-meal-light .pp-card{border-radius:22px !important}
.pp-meal-light .pp-shine{position:relative;overflow:hidden;isolation:isolate}
.pp-meal-light .pp-shine::after{content:'';position:absolute;inset:-2px;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.pp-meal-light .pp-shine:hover::after,.pp-meal-light .pp-shine.is-tap::after{transform:translateX(120%)}
.pp-meal-light .pp-shine > *{position:relative;z-index:1}
.pp-meal-light .pp-polaroid{position:relative;background:#FFFDF6;padding:14px 14px 54px;border-radius:6px;transform:rotate(-2deg);box-shadow:0 16px 34px rgba(43,26,16,.22),0 3px 6px rgba(43,26,16,.14);transition:transform .45s cubic-bezier(.3,1.4,.5,1);max-width:560px;margin:10px auto 0}
.pp-meal-light .pp-polaroid:hover{transform:rotate(0deg) translateY(-6px)}
.pp-meal-light .pp-polaroid-pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--meal-acc);box-shadow:0 3px 6px rgba(0,0,0,.3), inset 0 -3px 0 rgba(0,0,0,.2);z-index:3}
.pp-meal-light .pp-polaroid-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--meal-acc)}
.pp-meal-light .pp-tile{border-radius:16px !important;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pp-meal-light .pp-tile:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 28px rgba(43,26,16,.16), inset 0 1px 0 #fff}
.pp-meal-light .pp-btn-acc{background:var(--meal-acc) !important;color:#fff !important;border:0 !important;border-radius:999px !important;min-height:56px;box-shadow:0 5px 0 rgba(0,0,0,.28),0 12px 22px rgba(43,26,16,.2) !important;transition:transform .15s ease, box-shadow .15s ease}
.pp-meal-light .pp-btn-acc:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.28) !important}
.pp-tabs{display:flex;flex-direction:column;gap:12px}
.pp-tab{border-radius:18px !important;transition:box-shadow .3s}
.pp-tab.is-open{box-shadow:0 14px 34px rgba(43,26,16,.16), inset 0 1px 0 #fff, inset 4px 0 0 var(--meal-acc,#A5582C) !important}
.pp-tab-h{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;border:0;background:transparent;cursor:pointer;text-align:left;font-weight:700;font-size:1.02rem;color:#2B1A10}
.pp-tab-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--meal-acc,#A5582C);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.pp-tab.is-open .pp-tab-ic{transform:rotate(-8deg) scale(1.08)}
.pp-tab-t{flex:1}
.pp-tab-chev{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);color:#2B1A10;transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .25s,color .25s}
.pp-tab.is-open .pp-tab-chev{transform:rotate(180deg);background:var(--meal-acc,#A5582C);color:#fff}
.pp-tab-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.pp-tab.is-open .pp-tab-b{grid-template-rows:1fr}
.pp-tab-b > div{overflow:hidden}
.pp-tab-in{padding:0 20px 18px 70px;line-height:1.6;opacity:0;transform:translateY(-6px);transition:opacity .35s .1s, transform .35s .1s}
.pp-tab.is-open .pp-tab-in{opacity:1;transform:none}
@media (max-width:560px){.pp-tab-in{padding-left:20px}}
.pp-meal-light .pp-chip{border-radius:16px !important;min-height:52px;cursor:pointer;border:1px solid rgba(255,255,255,.85) !important;background:rgba(255,253,246,.62) !important;color:#2B1A10 !important;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(43,26,16,.08);transform:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1), background .25s, color .25s, box-shadow .25s}
.pp-meal-light .pp-chip:hover{transform:translateY(-3px)}
.pp-meal-light .pp-chip *{color:inherit !important}
.pp-meal-light .pp-chip.is-on{background:var(--meal-acc) !important;color:#fff !important;border-color:transparent !important;transform:translateY(-2px) scale(1.04);box-shadow:0 5px 0 rgba(0,0,0,.25),0 12px 22px rgba(43,26,16,.2), inset 0 1px 0 rgba(255,255,255,.35);animation:pp-chip-pop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes pp-chip-pop{0%{transform:scale(.92)}60%{transform:scale(1.08)}100%{transform:translateY(-2px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pp-sticker{animation:none;clip-path:none}.pp-meal-light .pp-chip.is-on{animation:none}}
.pp-meal-light .pp-meal-trust > * > *{background:rgba(255,253,246,.62);border:1px solid rgba(255,255,255,.85);border-radius:999px;backdrop-filter:blur(10px)}
/* =================== end meal detail theme =================== */

/* ===== Kitchen dog panel: dog tag + chips ===== */
.pp-dogcard{position:relative;max-width:760px;margin:0 auto;background:#FFFDF6;border:2px solid rgba(43,26,16,.85);border-radius:26px;box-shadow:0 8px 0 #7A2F1C,0 18px 34px rgba(43,26,16,.18);padding:34px 30px 30px;display:grid;grid-template-columns:1fr;gap:26px;align-items:center;text-align:center}
.pp-dogcard .pp-dogform{text-align:left}
.pp-dogcard .pp-kick{margin:0 auto}
@media (max-width:760px){.pp-dogcard{padding:26px 18px 24px;gap:10px}}
.pp-kick{font-family:'Caveat',cursive;font-weight:700;font-size:1.5rem;color:#A64A2E !important;margin:0;transform:rotate(-2deg);display:inline-block}
.pp-dog-title{margin:2px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08;color:#7A2F1C !important;cursor:pointer}
.pp-dog-title span{display:inline-block;opacity:0;transform:translateY(18px) rotate(4deg);animation:pp-dog-rise .6s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes pp-dog-rise{to{opacity:1;transform:none}}
.pp-dog-sub{margin:12px 0 20px;font-size:1.08rem;font-weight:600;color:rgba(43,26,16,.85) !important}
.pp-dog-sub b{color:#A64A2E}
.pp-dogform{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.pp-dogform-full{grid-column:1/-1}
@media (max-width:420px){.pp-dogform{grid-template-columns:1fr}}
.pp-dog-label{display:block;white-space:nowrap;font-weight:800;font-size:.9rem;color:#7A2F1C !important;margin:0 0 6px}
.pp-dog-label small{font-weight:600;color:rgba(43,26,16,.6)}
.pp-dog-input{width:100%;height:56px;border-radius:16px;border:2px solid rgba(122,47,28,.45);background:#fff;padding:0 16px;font-size:1.05rem;font-weight:700;color:#2B1A10;outline:none;transition:border-color .2s,box-shadow .2s}
.pp-dog-input::-moz-placeholder{color:rgba(43,26,16,.45);font-weight:500}
.pp-dog-input::placeholder{color:rgba(43,26,16,.45);font-weight:500}
.pp-dog-input:focus{border-color:#D6A32E;box-shadow:0 0 0 4px rgba(214,163,46,.35)}
.pp-dog-btn{width:100%;height:58px;border:2px solid rgba(43,26,16,.85);border-radius:16px;background:#7A2F1C;color:#fff;font-size:1.08rem;font-weight:800;box-shadow:0 5px 0 #3E1409;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pp-dog-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #3E1409}
.pp-dog-btn:disabled{opacity:.8;cursor:not-allowed}
.pp-whos-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#7A2F1C !important}
.pp-whos-ic{width:30px;height:30px;border-radius:50%;background:#D6A32E;display:grid;place-items:center;color:#7A2F1C;box-shadow:0 3px 0 #9C7418}
.pp-dchip{position:relative;display:inline-flex;align-items:center;gap:10px;height:52px;padding-left:14px;border-radius:999px;border:2px solid rgba(43,26,16,.85) !important;background:#FFFDF6 !important;color:#2B1A10 !important;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 4px 0 rgba(43,26,16,.35);transition:transform .2s}
.pp-dchip:hover{transform:translateY(-2px)}
.pp-dchip-hole{width:14px;height:14px;border-radius:50%;border:3px solid currentColor;opacity:.5}
.pp-dchip-kg{font-size:.82rem;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(122,47,28,.12);color:#7A2F1C}
.pp-dchip.is-on{background:#7A2F1C !important;color:#fff !important;box-shadow:0 4px 0 #3E1409;animation:pp-chip-pop2 .5s cubic-bezier(.3,1.7,.5,1)}
.pp-dchip.is-on .pp-dchip-kg{background:#D6A32E;color:#2B1A10}
.pp-dchip.is-on .pp-dchip-hole{opacity:1;border-color:#F2C14E}
@keyframes pp-chip-pop2{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}}
.pp-addchip{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 10px;border-radius:999px;border:2px solid rgba(43,26,16,.85) !important;background:#D6A32E !important;color:#2B1A10 !important;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 4px 0 #9C7418}
.pp-addchip b{width:32px;height:32px;border-radius:50%;background:#FFFDF6;display:grid;place-items:center;font-size:1.3rem;line-height:1;border:2px solid rgba(43,26,16,.85)}
.pp-addchip:active,.pp-dchip:active{transform:translateY(3px)}
@media (prefers-reduced-motion:reduce){.pp-dog-title span{animation:none;opacity:1;transform:none}}

/* ===== Kitchen: hero subtitle shine ===== */
@media (prefers-reduced-motion:reduce){.pp-promise,.pp-phil-title span{animation:none;opacity:1;transform:none}}
/* ===== Kitchen: Our Promise ===== */
.pp-promise{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;background:#7A2F1C;color:#F2C14E !important;font-weight:800;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 4px 0 #3E1409;animation:pp-promise-pop .6s cubic-bezier(.3,1.7,.5,1) both;margin-bottom:6px}
@keyframes pp-promise-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.pp-phil-title{margin:22px 0 14px;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.05;color:#7A2F1C !important;cursor:pointer}
.pp-phil-title span{display:inline-block;opacity:0;transform:translateY(22px);animation:pp-dog-rise .7s cubic-bezier(.3,1.4,.5,1) forwards}
.pp-phil-desc{max-width:720px;margin:0 auto 36px;font-size:clamp(1.05rem,2.2vw,1.22rem);line-height:1.65;font-weight:600;color:rgba(43,26,16,.85) !important}
.pp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto 44px}
@media (max-width:640px){.pp-stats{grid-template-columns:1fr}}
.pp-stat{background:#FFFDF6;border:2px solid rgba(43,26,16,.85);border-radius:20px;box-shadow:0 6px 0 #7A2F1C;padding:22px 14px;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.pp-stat:hover{transform:translateY(-4px)}
.pp-stat-v{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:3.2rem;line-height:1.2;height:1.2em;overflow:hidden;display:flex;justify-content:center;color:#D6A32E !important;-webkit-text-stroke:.6px rgba(122,47,28,.55)}
.pp-stat-l{margin-top:10px;font-weight:800;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:#2B1A10 !important}
.pp-stat-s{margin-top:4px;font-size:.88rem;font-weight:600;color:rgba(43,26,16,.62) !important}
.pp-roll{display:inline-block;height:1.2em;line-height:1.2;overflow:hidden;vertical-align:top;cursor:pointer}
.pp-roll-col{display:flex;flex-direction:column;align-items:center}
.pp-roll-col span{display:block;height:1.2em;line-height:1.2}
@media (prefers-reduced-motion:reduce){.pp-promise,.pp-phil-title span{animation:none;opacity:1;transform:none}}

/* ===== Fixed header: layered mustard over the header video ===== */
html{scroll-padding-top:calc(var(--pp-header-h, 88px) + 12px)}
header.pp-header-base{overflow:hidden;transition:box-shadow .3s ease}
header.pp-header-base.pp-header-scrolled{box-shadow:0 6px 18px rgba(43,26,16,.28)}
.pp-header-tex video{opacity:1 !important;mix-blend-mode:normal !important;filter:grayscale(1) sepia(.6) !important}
.pp-header-tex::after{content:'';position:absolute;inset:0;background:rgba(214,163,46,.85);pointer-events:none}
.pp-header-tex{z-index:0}
header.pp-header-base > *:not(.pp-header-tex){position:relative;z-index:1}

/* Dog card: simple single column, no tag */
.pp-dogcard{grid-template-columns:1fr !important;max-width:760px !important;text-align:center !important}
.pp-dogcard .pp-dogform{text-align:left}
.pp-dogcard .pp-kick{margin:0 auto}

/* Home hero: bigger eyebrow + bigger delivery line (sub-line 1 removed) */
[data-pp-hero-text] .pp-hero-eyebrow-style{font-size:0.86rem !important}
[data-pp-hero-text] .pp-hero-sub2-style{
  font-size:clamp(1rem, min(1.5vw, 2.4vh), 1.3rem) !important;
  font-weight:500 !important;
  margin-top:16px !important;
  max-width:42rem;
  line-height:1.45;
}
@media (max-width:639px){
  [data-pp-hero-text] .pp-hero-eyebrow-style{font-size:12.5px !important}
  [data-pp-hero-text] .pp-hero-sub2-style{font-size:15.5px !important;margin-top:12px !important}
}

.pp-added{position:relative;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:18px;background:#FFFDF6;border:2px solid var(--acc);color:var(--acc);overflow:hidden}
.pp-added-ck{flex:none;width:30px;height:30px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.pp-added-ck svg{width:18px;height:18px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:0}
.pp-added-tx{flex:1;min-width:0;font-weight:800;font-size:.95rem;line-height:1.25}
.pp-added-tx small{display:block;font-weight:700;font-size:.78rem;opacity:.8}
.pp-added-ic{flex:none;width:42px;height:42px;border-radius:12px;border:2px solid rgba(43,26,16,.85);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 rgba(43,26,16,.45);transition:transform .15s}
.pp-added-ic:active{transform:translateY(3px);box-shadow:none}
.pp-added-ic.is-cart{background:#D6A32E;color:#2B1A10}
.pp-added-ic.is-del{background:#FFFDF6;color:#B3261E}
.pp-added.is-new{animation:pp-added-pop .7s cubic-bezier(.3,1.7,.5,1), pp-added-glow 1.6s ease-out .2s 2}
.pp-added.is-new .pp-added-ck svg{stroke-dashoffset:24;animation:pp-added-draw .5s .25s ease-out forwards}
.pp-added.is-new::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);transform:translateX(-120%);animation:pp-added-shine 1s .3s ease-out forwards;pointer-events:none}
@keyframes pp-added-pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:none}}
@keyframes pp-added-glow{0%{box-shadow:0 0 0 0 rgba(165,88,44,.55)}100%{box-shadow:0 0 0 14px rgba(165,88,44,0)}}
@keyframes pp-added-draw{to{stroke-dashoffset:0}}
@keyframes pp-added-shine{to{transform:translateX(120%)}}
.pp-added-confirm{margin-top:10px;padding:12px 14px;border-radius:16px;background:#FFF1EE;border:2px solid #B3261E;color:#2B1A10;font-weight:700;font-size:.92rem;animation:pp-added-pop .4s cubic-bezier(.3,1.5,.5,1)}
.pp-added-confirm-row{display:flex;gap:8px;margin-top:10px}
.pp-added-confirm-row button{flex:1;height:42px;border-radius:12px;border:2px solid rgba(43,26,16,.85);font-weight:800;font-size:.9rem;cursor:pointer}
.pp-added-confirm-row .is-yes{background:#B3261E;color:#fff}
.pp-added-confirm-row .is-no{background:#FFFDF6;color:#2B1A10}
@media (prefers-reduced-motion:reduce){.pp-added.is-new,.pp-added.is-new::after,.pp-added.is-new .pp-added-ck svg{animation:none;stroke-dashoffset:0}}

.pp-merge{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.pp-merge, .pp-merge *{text-shadow:none}
.pp-mg-kick{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);color:#FFFDF6 !important;text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.45) !important;letter-spacing:.02em;opacity:0}
.pp-mg-stage{position:relative;height:clamp(64px,11vw,92px);width:min(100%,720px);margin:10px 0 6px}
.pp-mg-cap{position:absolute;top:50%;left:50%;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:2px solid #2B1A10;font-weight:800;font-size:clamp(.8rem,1.9vw,1rem);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 0 #2B1A10;opacity:0;color:#FFFDF6 !important}
.pp-mg-cap i{width:14px;height:14px;border:2px solid currentColor;border-radius:3px;display:grid;place-items:center}
.pp-mg-cap i::after{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pp-mg-farm{background:#A64A2E}
.pp-mg-plant{background:#3E6B47}
.pp-mg-one{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;white-space:nowrap;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2rem,6.4vw,4rem);line-height:1;color:#F2C14E !important;-webkit-text-stroke:1px #4A1208;paint-order:stroke fill;text-shadow:0 3px 0 #4A1208,0 10px 26px rgba(0,0,0,.55) !important}
.pp-mg-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#F2C14E;opacity:0;box-shadow:0 0 12px #F2C14E}
.pp-mg-line2{position:relative;margin-top:8px;font-family:'Caveat',cursive;font-weight:700;font-size:clamp(1.35rem,3.4vw,2.1rem);line-height:1.2;color:#FFFDF6 !important;text-shadow:0 2px 3px rgba(0,0,0,.65),0 0 20px rgba(0,0,0,.45) !important;clip-path:inset(0 100% 0 0);max-width:min(100%,720px)}
.pp-mg-ul{display:block;width:min(70%,420px);height:14px;margin:2px auto 0;overflow:visible}
.pp-mg-ul path{fill:none;stroke:#F2C14E;stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.pp-mg-kick{font-size:clamp(1.25rem,3vw,1.7rem) !important;-webkit-text-stroke:.9px #8A6A1F;paint-order:stroke fill}
.pp-mg-line2{font-size:clamp(1.6rem,4vw,2.5rem) !important;-webkit-text-stroke:.9px #8A6A1F;paint-order:stroke fill}
.pp-mg-one{color:#FFD95A !important;-webkit-text-stroke:1.2px #000 !important;paint-order:stroke fill;
  text-shadow:0 0 18px rgba(255,217,90,.45),0 8px 22px rgba(0,0,0,.5) !important}

/* ===== Checkout theme (pp-co) ===== */
.pp-co{--co-bg:#9B3622;--co-drop:#4A1A0E;--co-maroon:#7A2F1C;--co-maroon2:#6E1F0E;--co-brick:#A64A2E;--co-mustard:#D6A32E;--co-gold:#F2C14E;--co-paper:#FFFDF6;--co-card:#FBF3E4;--co-ink:#2B1A10;--co-line:#E6D5B8;--co-muted:#6B5646;--co-green:#3E6B47;--co-red:#B3261E;
  background:var(--co-bg);background-image:none;color:var(--co-ink);font-family:'DM Sans',system-ui,sans-serif;position:relative;isolation:isolate;overflow-x:clip}
.pp-co-wrap{max-width:1140px;margin:0 auto;padding:28px 16px 80px}
.pp-co-head{text-align:center;margin-bottom:22px}
.pp-co-eyebrow{display:inline-flex;align-items:center;gap:6px;font:800 11.5px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--co-gold);background:rgba(242,193,78,.14);border:1.5px solid var(--co-mustard);border-radius:999px;padding:5px 14px}
.pp-co-title{font:800 clamp(1.9rem,4.4vw,2.8rem)/1.1 'Playfair Display',Georgia,serif;color:var(--co-paper);margin:12px 0 4px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.pp-co-sub{color:#F6D9B8;margin:0;font-size:15px}
/* step bar */
.pp-co-steps{display:flex;align-items:flex-start;justify-content:center;margin:22px auto 26px;max-width:640px;list-style:none;padding:0}
.pp-co-steps li{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.pp-co-steps li:not(:last-child)::after{content:'';position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);height:3px;border-radius:3px;background:rgba(255,253,246,.28);transition:background .4s}
.pp-co-steps li.is-done:not(:last-child)::after{background:var(--co-gold)}
.pp-co-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 15px 'DM Sans',sans-serif;border:2px solid var(--co-ink);background:rgba(255,253,246,.16);color:var(--co-paper);transition:all .25s}
.pp-co-steps li.is-done .pp-co-dot{background:var(--co-paper);color:var(--co-maroon)}
.pp-co-steps li.is-cur .pp-co-dot{background:var(--co-gold);color:var(--co-ink);box-shadow:0 3px 0 var(--co-ink),0 0 0 5px rgba(242,193,78,.3);transform:translateY(-2px)}
.pp-co-steps small{margin-top:8px;font:800 11px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#F6D9B8}
.pp-co-steps li.is-cur small,.pp-co-steps li.is-done small{color:var(--co-gold)}
/* layout */
.pp-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start}
.pp-co-grid>*{min-width:0}
@media(max-width:1023px){.pp-co-grid{grid-template-columns:1fr}}
/* cards */
.pp-co-card{min-width:0;background:var(--co-paper);border:2px solid var(--co-ink);border-radius:20px;box-shadow:0 6px 0 var(--co-drop),0 18px 30px rgba(0,0,0,.18);overflow:hidden;color:var(--co-ink)}
.pp-co-card-h{display:flex;align-items:center;gap:12px;padding:20px 24px 14px;border-bottom:1.5px dashed var(--co-line)}
.pp-co-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--co-card);border:1.5px solid var(--co-ink);display:grid;place-items:center;color:var(--co-maroon)}
.pp-co-card-h h2{margin:0;font:700 1.45rem/1.15 'Playfair Display',Georgia,serif;color:var(--co-maroon2)}
.pp-co-card-h p{margin:2px 0 0;font-size:13.5px;color:var(--co-muted)}
.pp-co-card-b{min-width:0;padding:22px 24px 24px}
@media(max-width:560px){.pp-co-card-h,.pp-co-card-b{padding-left:16px;padding-right:16px}}
.pp-co-sep{border:0;border-top:1.5px dashed var(--co-line);margin:22px 0 18px}
/* fields */
.pp-co-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pp-co-fields .is-full{grid-column:1/-1}
@media(max-width:560px){.pp-co-fields{grid-template-columns:1fr}}
.pp-co-label{display:block;font:800 11.5px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--co-maroon);margin-bottom:7px}
.pp-co-label em{font-style:normal;color:var(--co-brick)}
.pp-co-label .pp-co-opt{text-transform:none;letter-spacing:0;color:var(--co-muted);font-weight:500}
.pp-co-in{width:100%;height:50px;border:1.5px solid #D9C6A8;border-radius:12px;background:#fff;padding:0 14px;font:500 16px 'DM Sans',sans-serif;color:var(--co-ink);outline:none;transition:border-color .2s,box-shadow .2s}
textarea.pp-co-in{height:auto;min-height:88px;padding:12px 14px;resize:vertical}
.pp-co-in::-moz-placeholder{color:#A8957F}
.pp-co-in::placeholder{color:#A8957F}
.pp-co-in:focus{border-color:var(--co-maroon);box-shadow:0 0 0 4px rgba(122,47,28,.12)}
.pp-co .field-error{border-color:var(--co-red)!important;box-shadow:0 0 0 4px rgba(179,38,30,.12)!important}
.pp-co-hint{font-size:12.5px;color:var(--co-muted);margin-top:6px}
.pp-co-hint.is-bad{color:var(--co-red);font-weight:700}
.pp-co-hint .is-ok{color:var(--co-green);font-weight:700}
/* chips */
.pp-co-chips{display:flex;flex-wrap:wrap;gap:10px}
.pp-co-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--co-ink);background:var(--co-paper);border-radius:999px;padding:10px 18px;font-weight:700;color:var(--co-ink);box-shadow:0 2px 0 var(--co-ink);transition:all .15s;cursor:pointer}
.pp-co-chip.is-on{background:var(--co-maroon);color:var(--co-paper);box-shadow:0 3px 0 var(--co-ink);transform:translateY(-1px)}
/* pet name rows */
.pp-co-pet{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 12px;border:1.5px solid var(--co-line);border-radius:14px;background:#fff;margin-top:10px}
.pp-co-pet img{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--co-ink);-o-object-fit:cover;object-fit:cover}
.pp-co-pet small{display:block;font-size:12.5px;color:var(--co-muted)}
.pp-co-pet .text-primary{color:var(--co-maroon)!important;font-weight:800}
.pp-co-pet input{color:var(--co-maroon)!important;border-color:var(--co-maroon)!important}
/* buttons */
.pp-co-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1.5px dashed var(--co-line)}
@media(max-width:560px){.pp-co-actions{flex-direction:column-reverse}.pp-co-actions .pp-co-btn-gold,.pp-co-actions .pp-co-btn-maroon{width:100%}}
.pp-co-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;border:2px solid var(--co-ink);font:800 15px 'DM Sans',sans-serif;letter-spacing:.02em;transition:transform .12s,box-shadow .12s;cursor:pointer;text-decoration:none}
.pp-co-btn-gold{background:var(--co-gold);color:var(--co-ink);box-shadow:0 4px 0 var(--co-ink)}
.pp-co-btn-maroon{background:var(--co-maroon);color:var(--co-paper);box-shadow:0 4px 0 var(--co-ink)}
.pp-co-btn-gold:hover,.pp-co-btn-maroon:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--co-ink)}
.pp-co-btn-gold:active,.pp-co-btn-maroon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--co-ink)}
.pp-co-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.pp-co-btn-ghost{background:transparent;color:var(--co-maroon);border-color:transparent;padding:0 8px;box-shadow:none}
.pp-co-btn-ghost:hover{text-decoration:underline}
.pp-co-btn-wide{width:100%}
/* order summary sidebar */
.pp-co-sum{position:sticky;top:calc(var(--pp-header-h, 72px) + 16px)}
.pp-co-sum-h{background:var(--co-maroon);color:var(--co-paper);padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.pp-co-sum-h h3{margin:0;font:700 1.25rem 'Playfair Display',Georgia,serif;color:var(--co-paper)}
.pp-co-pill{font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;background:var(--co-gold);color:var(--co-ink);border-radius:999px;padding:4px 10px;border:1.5px solid var(--co-ink)}
.pp-co-sum-list{max-height:48vh;overflow-y:auto;padding:6px 12px}
.pp-co-sum-del{padding:12px 20px;border-top:1.5px dashed var(--co-line);display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.pp-co-sum-del small{font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--co-muted)}
.pp-co-sum-del .r{text-align:right}.pp-co-sum-del .r b{display:block}.pp-co-sum-del .r span{display:block;color:var(--co-brick);font-weight:800;font-size:12.5px}.pp-co-sum-del .r em{display:block;font-style:normal;color:var(--co-muted);font-size:12px}
.pp-co-tot{padding:14px 20px;display:grid;gap:7px;font-size:14.5px;border-top:1.5px dashed var(--co-line)}
.pp-co-tot>div{display:flex;justify-content:space-between}
.pp-co-free{color:var(--co-green);font-weight:800}
.pp-co-nudge{font-size:12.5px;color:#8A6A1F;font-weight:700}
.pp-co-grand{margin:4px 12px 14px;border-radius:14px;background:var(--co-card);border:1.5px solid var(--co-ink);padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.pp-co-grand b{font:800 1.6rem 'Playfair Display',Georgia,serif;color:var(--co-maroon2)}
.pp-co-grand small{display:block;font-size:12px;color:var(--co-muted)}
.pp-co-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.pp-co-trust div{background:var(--co-paper);border:1.5px solid var(--co-ink);box-shadow:0 3px 0 var(--co-drop);border-radius:12px;padding:10px 6px;text-align:center;font:700 11.5px/1.3 'DM Sans',sans-serif;color:var(--co-muted)}
.pp-co-trust svg{display:block;margin:0 auto 4px;color:var(--co-maroon)}
/* step change animation */
.pp-co-pane{animation:ppCoIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ppCoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-co-pane{animation:none}}
/* small screens: empty cart + payment safety */
.pp-co-mini{min-height:100vh;display:grid;place-items:center;padding:30px 16px}
.pp-co-mini .pp-co-card{max-width:460px;width:100%;text-align:center;padding:34px 26px}
.pp-co-mini h2{font:800 1.9rem/1.15 'Playfair Display',Georgia,serif;color:var(--co-maroon2);margin:14px 0 8px}
.pp-co-mini p{color:var(--co-muted);margin:0 0 18px}
.pp-co-bigic{width:84px;height:84px;margin:0 auto;border-radius:50%;border:2px solid var(--co-ink);display:grid;place-items:center;box-shadow:0 4px 0 var(--co-ink);background:var(--co-card);color:var(--co-maroon)}
.pp-co-warn{font:800 1.15rem 'DM Sans',sans-serif;color:var(--co-red)!important;background:#FDECEA;border:1.5px solid var(--co-red);border-radius:12px;padding:10px}
.pp-co-ref{text-align:left;background:var(--co-card);border:1.5px solid var(--co-ink);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.pp-co-ref small{font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--co-muted)}
.pp-co-ref b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:14px;word-break:break-all;color:var(--co-maroon2)}
/* floating back button */
.pp-co-back{position:fixed;top:calc(var(--pp-header-h, 72px) + 12px);left:14px;z-index:50;width:42px;height:42px;border-radius:50%;border:2px solid var(--co-ink,#2B1A10);background:#FFFDF6;color:#7A2F1C;box-shadow:0 3px 0 #2B1A10;display:grid;place-items:center;transition:transform .15s}
.pp-co-back:hover{transform:translateY(-2px)}
@media(max-width:560px){.pp-co-back{width:38px;height:38px;left:10px}}
/* ===== end checkout theme ===== */

/* ===== Checkout Step 3 — scheduler ===== */
.pp-ds{display:grid;gap:0}
.pp-ds-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.pp-ds-nav{display:flex;gap:6px}
.pp-ds-nav button{width:32px;height:32px;border-radius:50%;border:1.5px solid #2B1A10;background:#FFFDF6;color:#7A2F1C;font-weight:800;box-shadow:0 2px 0 #2B1A10;display:grid;place-items:center;cursor:pointer}
.pp-ds-nav button:active{transform:translateY(2px);box-shadow:none}
.pp-ds-dates{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pp-ds-date{flex:0 0 70px;scroll-snap-align:start;position:relative;border:1.5px solid #2B1A10;border-radius:14px;background:#FFFDF6;padding:9px 4px;text-align:center;box-shadow:0 3px 0 #2B1A10;transition:transform .15s,background .15s;cursor:pointer}
.pp-ds-date span{display:block;font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B5646}
.pp-ds-date b{display:block;font:800 1.45rem/1.05 'Playfair Display',Georgia,serif;color:#6E1F0E}
.pp-ds-date i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font:800 9px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;background:#7A2F1C;color:#FFFDF6;border-radius:999px;padding:1px 7px;white-space:nowrap}
.pp-ds-date i.is-tom{background:#D6A32E;color:#2B1A10}
.pp-ds-date:hover{transform:translateY(-1px)}
.pp-ds-date.is-on{background:#F2C14E;transform:translateY(-2px)}
.pp-ds-date.is-on b{color:#2B1A10}
.pp-ds-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.pp-ds-slots{grid-template-columns:1fr}}
.pp-ds-slot{border:1.5px solid #2B1A10;border-radius:14px;padding:12px 14px;background:#FFFDF6;text-align:left;box-shadow:0 3px 0 #2B1A10;transition:all .15s;cursor:pointer;color:#2B1A10}
.pp-ds-slot b{display:flex;align-items:center;gap:6px;font-size:15px}
.pp-ds-slot .t{display:block;font-weight:800;font-size:13.5px;color:#A64A2E;margin-top:2px}
.pp-ds-slot small{display:block;font-size:12px;color:#6B5646;margin-top:2px}
.pp-ds-slot .un{display:inline-block;margin-top:5px;font:800 9.5px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid #6B5646;border-radius:999px;padding:1px 7px;color:#6B5646}
.pp-ds-slot.is-on{background:#7A2F1C;color:#FFFDF6;transform:translateY(-1px)}
.pp-ds-slot.is-on .t{color:#F2C14E}.pp-ds-slot.is-on small{color:#F6D9B8}
.pp-ds-slot.is-custom.is-on{background:#3E6B47}
.pp-ds-slot:disabled{opacity:.42;box-shadow:none;cursor:not-allowed}
.pp-ds-note{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.45}
.pp-ds-note svg{flex:none;margin-top:1px}
.pp-ds-note.is-info{background:#FBF3E4;border:1.5px dashed #D2B98F;color:#6B5646}
.pp-ds-note.is-info svg{color:#7A2F1C}
.pp-ds-note.is-amber{background:#FFF3D1;border:1.5px solid #D6A32E;color:#6B4A0F}
.pp-ds-note.is-green{background:#E6F0E4;border:1.5px solid #3E6B47;color:#2E5236}
.pp-ds-cnt{display:flex;justify-content:space-between;font-size:12px;color:#6B5646;margin-top:6px}
.pp-ds-cnt .need{color:#B3261E;font-weight:700}
.pp-ds-gap{height:18px}
/* ===== end scheduler ===== */

/* ===== Checkout Step 4 — review & pay ===== */
.pp-rv{display:grid;gap:10px}
.pp-rv-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1.5px solid #E6D5B8;border-radius:14px;padding:12px 14px;background:#fff}
.pp-rv-row small{display:block;font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7A2F1C}
.pp-rv-row p{margin:2px 0 0;font-size:14.5px;color:#2B1A10}
.pp-rv-row .mu{color:#6B5646;font-size:13px}
.pp-rv-row .sl{font-weight:800;color:#A64A2E}
.pp-rv-edit{border:0;background:none;padding:0;font-weight:800;font-size:13px;color:#A64A2E;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
.pp-rv-items{display:block}
.pp-rv-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px dashed #E6D5B8}
.pp-rv-item:last-child{border-bottom:0}
.pp-rv-item img{width:44px;height:44px;border-radius:10px;border:1.5px solid #2B1A10;-o-object-fit:cover;object-fit:cover}
.pp-rv-item b{display:block;font-size:14.5px;color:#2B1A10}
.pp-rv-item span.m{display:block;font-size:12.5px;color:#6B5646}
.pp-rv-item .p{font-weight:800;color:#2B1A10}
.pp-rv-costs{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1.5px dashed #E6D5B8;font-size:14px;color:#2B1A10}
.pp-rv-costs>div{display:flex;justify-content:space-between}
.pp-rv-total{border-top:1.5px solid #2B1A10;padding-top:8px;margin-top:2px;font-weight:800;font-size:16px;color:#6E1F0E}
.pp-pay,.pp-pay *{box-sizing:border-box}
.pp-pay{min-width:0;max-width:100%;margin-top:18px;border:2px solid #2B1A10;border-radius:16px;padding:18px;background:linear-gradient(180deg,#FFF8E6,#FFFDF6)}
.pp-pay-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pp-pay-top small{font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7A2F1C}
.pp-pay-amt{font:800 2rem 'Playfair Display',Georgia,serif;color:#6E1F0E;line-height:1.1}
.pp-pay-ssl{display:inline-flex;align-items:center;gap:5px;font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#3E6B47;background:#E6F0E4;border:1.5px solid #3E6B47;border-radius:999px;padding:3px 10px}
.pp-pay-title{font:700 1.15rem 'Playfair Display',Georgia,serif;color:#6E1F0E;margin:16px 0 10px}
.pp-pay-methods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.pp-pay-m{grid-column:span 2;min-width:0;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border:1.5px solid #2B1A10;border-radius:12px;background:#fff;font:800 10.5px/1.2 'DM Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#2B1A10;text-align:center;box-shadow:0 2px 0 #2B1A10;transition:all .15s;cursor:pointer;overflow-wrap:normal}
.pp-pay-m:nth-child(4),.pp-pay-m:nth-child(5){grid-column:span 3;flex-direction:row;min-height:60px;gap:10px}
.pp-pay-m:nth-child(4) svg,.pp-pay-m:nth-child(5) svg{width:24px;height:24px}
.pp-pay-m:nth-child(4)>span,.pp-pay-m:nth-child(5)>span{flex:none}
.pp-pay-m svg{width:28px;height:28px}
.pp-pay-m.is-on{background:#F2C14E;box-shadow:0 3px 0 #2B1A10;transform:translateY(-2px)}
@media(min-width:700px){.pp-pay-methods{grid-template-columns:repeat(5,minmax(0,1fr))}.pp-pay-m,.pp-pay-m:nth-child(4),.pp-pay-m:nth-child(5){grid-column:auto;flex-direction:column;min-height:88px}}
.pp-pay-panel{min-width:0;margin-top:14px;border:1.5px solid #E6D5B8;border-radius:14px;background:#fff;padding:14px;animation:ppCoIn .35s cubic-bezier(.2,.8,.2,1)}
.pp-pay-panel h4{margin:0 0 4px;font:800 14px 'DM Sans',sans-serif;color:#6E1F0E}
.pp-pay-panel p{margin:0 0 12px;font-size:13px;color:#6B5646}
.pp-pay-apps{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pp-pay-apps span{font:800 11px 'DM Sans',sans-serif;border:1.5px solid #E6D5B8;border-radius:999px;padding:4px 10px;color:#6B5646;background:#FBF3E4}
.pp-pay-card{position:relative;max-width:320px;aspect-ratio:1.586;border-radius:16px;border:2px solid #2B1A10;padding:16px 18px;color:#FFFDF6;background:linear-gradient(135deg,#7A2F1C,#A64A2E 60%,#D6A32E);box-shadow:0 5px 0 #2B1A10;display:flex;flex-direction:column;justify-content:space-between;margin:4px 0 12px}
.pp-pay-card.is-debit{background:linear-gradient(135deg,#2B1A10,#3E6B47 70%,#8FB08F)}
.pp-pay-card .chipc{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#F2C14E,#D6A32E);border:1px solid rgba(0,0,0,.3)}
.pp-pay-card .num{font:700 1.1rem ui-monospace,Menlo,monospace;letter-spacing:.12em}
.pp-pay-card .row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pp-pay-card .tag{position:absolute;top:14px;right:16px;font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,253,246,.2);border-radius:999px;padding:3px 9px}
.pp-pay-nets{display:flex;gap:6px;flex-wrap:wrap}
.pp-pay-nets span{font:800 11px 'DM Sans',sans-serif;letter-spacing:.06em;border:1.5px solid #E6D5B8;border-radius:6px;padding:4px 8px;background:#fff;color:#6B5646}
.pp-pay-secure{min-width:0;display:flex;gap:10px;align-items:flex-start;background:#E6F0E4;border:1.5px solid #3E6B47;border-radius:12px;padding:10px 12px;font-size:13px;color:#2E5236;margin-top:12px}
.pp-pay-secure svg{flex:none;margin-top:1px}
.pp-pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:1fr;margin-bottom:12px}
@media(min-width:700px){.pp-pay-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:440px){.pp-pay-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
.pp-pay-opt{min-width:0;display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid #2B1A10;border-radius:12px;background:#FFFDF6;font-weight:800;font-size:13px;line-height:1.25;text-align:left;box-shadow:0 2px 0 #2B1A10;transition:all .15s;cursor:pointer;color:#2B1A10;min-height:58px;overflow-wrap:normal;word-break:normal;hyphens:none}
.pp-pay-opt .lg{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font:800 10px 'DM Sans',sans-serif;flex:none;border:1px solid rgba(0,0,0,.15)}
.pp-pay-opt.is-on{background:#7A2F1C;color:#FFFDF6;transform:translateY(-1px)}
@media(max-width:440px){.pp-pay-opt{min-height:52px}}
.pp-pay-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1.5px dashed #E6D5B8;font-size:11.5px;color:#6B5646}
.pp-pay-foot span{font-weight:700}
.pp-pay-other{display:block;margin:10px auto 0;border:0;background:none;font-size:12.5px;font-weight:700;color:#A64A2E;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ===== end review & pay ===== */

/* ===== Bank / wallet brand colours (used only as inline style background on logo chips) ===== */
:root {
  --bank-sbi:   210 63% 45%;
  --bank-hdfc:  214 100% 28%;
  --bank-icici: 357 60% 44%;
  --bank-axis:  325 74% 34%;
  --bank-kotak: 0 84% 53%;
  --bank-pnb:   357 57% 39%;
  --wallet-amazonpay: 37 100% 50%;
  --wallet-phonepe:   271 62% 40%;
  --wallet-mobikwik:  218 100% 50%;
  --wallet-freecharge: 22 88% 55%;
  --wallet-airtel:    0 100% 45%;
  --wallet-payzapp:   214 100% 28%;
}
/* ===== end bank/wallet colours ===== */

/* ===== Thank-you page (pp-ty) ===== */
.pp-ty{background:#9B3622;background-image:none;min-height:100vh;color:#2B1A10;font-family:'DM Sans',system-ui,sans-serif;position:relative;isolation:isolate;overflow-x:clip}
.pp-ty-wrap{max-width:1000px;margin:0 auto;padding:30px 16px 70px}
.pp-ty-hero{position:relative;background:#FFFDF6;border:2px solid #2B1A10;border-radius:26px;box-shadow:0 8px 0 #4A1A0E,0 22px 40px rgba(0,0,0,.2);padding:40px 24px 30px;text-align:center;overflow:hidden}
.pp-ty-hero::before{content:'';position:absolute;inset:0 0 auto 0;height:10px;background:repeating-linear-gradient(90deg,#7A2F1C 0 22px,#F2C14E 22px 44px)}
.pp-ty-groot{position:absolute;right:18px;bottom:0;z-index:2}
@media(max-width:760px){.pp-ty-groot{position:relative;right:auto;display:flex;justify-content:center;margin:0 auto 6px}}
.pp-ty-check{position:relative;width:92px;height:92px;margin:6px auto 12px;cursor:pointer}
.pp-ty-check .ring{position:relative;width:92px;height:92px;border-radius:50%;background:#F2C14E;border:3px solid #2B1A10;display:grid;place-items:center;color:#2B1A10;box-shadow:0 4px 0 #2B1A10}
.pp-ty-check [data-pp-thankyou-glow]{position:absolute;inset:-8px;border-radius:50%;background:rgba(242,193,78,.35);filter:blur(10px)}
.pp-ty-eye{font:800 12px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#3E6B47}
.pp-ty-h1{font:800 clamp(1.9rem,5vw,3.1rem)/1.08 'Playfair Display',Georgia,serif;color:#6E1F0E;margin:8px 0 6px}
.pp-ty-h1 em{font-style:italic;color:#A64A2E}
.pp-ty-lead{font-size:clamp(1rem,2.2vw,1.12rem);color:#6B5646;margin:0 auto 18px;max-width:520px}
.pp-ty-lead b{color:#7A2F1C}
.pp-ty-ord{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;background:#FBF3E4;border:1.5px solid #2B1A10;border-radius:14px;padding:10px 12px 10px 16px;max-width:100%}
.pp-ty-ord small{font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6B5646}
.pp-ty-ord b{font:800 1.02rem ui-monospace,Menlo,monospace;color:#6E1F0E;word-break:break-all}
.pp-ty-copy{border:1.5px solid #2B1A10;background:#FFFDF6;border-radius:9px;padding:6px 10px;font-weight:800;font-size:12.5px;color:#7A2F1C;cursor:pointer}
.pp-ty-meta{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:600px;font-size:13.5px;color:#6B5646}
.pp-ty-meta b{color:#2B1A10}
.pp-ty-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:820px){.pp-ty-tri{grid-template-columns:1fr}}
.pp-ty-ic{background:#FFFDF6;border:2px solid #2B1A10;border-radius:18px;box-shadow:0 5px 0 #4A1A0E;padding:18px}
.pp-ty-ic .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pp-ty-ic .hd span{width:36px;height:36px;border-radius:10px;background:#F2C14E;border:1.5px solid #2B1A10;display:grid;place-items:center;color:#2B1A10}
.pp-ty-ic h4{margin:0;font:800 11.5px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7A2F1C}
.pp-ty-big{font:700 1.3rem/1.2 'Playfair Display',Georgia,serif;color:#6E1F0E;margin:0}
.pp-ty-ic p{margin:4px 0 0;font-size:14px;color:#6B5646}
.pp-ty-slot{display:block;margin-top:6px;font-weight:800;color:#A64A2E;font-size:14px}
.pp-ty-note{margin-top:8px;background:#FBF3E4;border:1.5px dashed #D2B98F;border-radius:10px;padding:8px 10px;font-size:13px;color:#2B1A10}
.pp-ty-paid{display:inline-flex;align-items:center;gap:6px;background:#E3EFE2;color:#3E6B47;border:1.5px solid #3E6B47;border-radius:999px;padding:3px 10px;font:800 11.5px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;vertical-align:4px}
.pp-ty-mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;word-break:break-all;color:#2B1A10}
.pp-ty-sec{margin-top:26px}
.pp-ty-sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px 12px}
.pp-ty-sect h3{margin:0;font:700 1.45rem 'Playfair Display',Georgia,serif;color:#FFFDF6}
.pp-ty-sect button{border:0;background:none;font-weight:800;font-size:13px;color:#F2C14E;cursor:pointer}
.pp-ty-tl{background:#FFFDF6;border:2px solid #2B1A10;border-radius:18px;box-shadow:0 5px 0 #4A1A0E;padding:22px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0}
.pp-ty-tl li{text-align:center;position:relative}
.pp-ty-tl li:not(:last-child)::after{content:'';position:absolute;top:21px;left:calc(50% + 26px);right:calc(-50% + 26px);height:3px;background:repeating-linear-gradient(90deg,#D2B98F 0 8px,transparent 8px 14px)}
.pp-ty-tl li.is-done:not(:last-child)::after{background:#7A2F1C}
.pp-ty-tl .n{width:44px;height:44px;margin:0 auto;border-radius:50%;border:2px solid #2B1A10;display:grid;place-items:center;background:#FFFDF6;color:#6B5646}
.pp-ty-tl li.is-done .n{background:#3E6B47;color:#fff}
.pp-ty-tl li.is-next .n{background:#F2C14E;color:#2B1A10;animation:ppTyPulse 2s infinite}
@keyframes ppTyPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,193,78,.7)}50%{box-shadow:0 0 0 9px rgba(242,193,78,0)}}
.pp-ty-tl b{display:block;margin-top:8px;font-size:14px;color:#2B1A10}
.pp-ty-tl small{display:block;font-size:12.5px;color:#6B5646;line-height:1.35}
@media(max-width:620px){.pp-ty-tl{grid-template-columns:1fr;gap:0;padding:16px}.pp-ty-tl li{display:grid;grid-template-columns:44px 1fr;gap:12px;text-align:left;padding-bottom:18px}.pp-ty-tl li:last-child{padding-bottom:0}.pp-ty-tl li:not(:last-child)::after{top:46px;bottom:0;left:21px;right:auto;width:3px;height:auto;background:repeating-linear-gradient(180deg,#D2B98F 0 8px,transparent 8px 14px)}.pp-ty-tl li.is-done:not(:last-child)::after{background:#7A2F1C}.pp-ty-tl b{margin-top:2px}.pp-ty-tl .n{margin:0}}
.pp-ty-tbl{background:#FFFDF6;border:2px solid #2B1A10;border-radius:18px;overflow:hidden;box-shadow:0 5px 0 #4A1A0E}
.pp-ty-dog{padding:10px 18px;background:#FBF3E4;border-bottom:1.5px dashed #E6D5B8;font:800 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7A2F1C}
.pp-ty-tr{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 18px;border-bottom:1.5px dashed #E6D5B8}
.pp-ty-tr img{width:50px;height:50px;border-radius:12px;border:1.5px solid #2B1A10;-o-object-fit:cover;object-fit:cover}
.pp-ty-tr b{display:block;color:#2B1A10}.pp-ty-tr small{color:#6B5646;font-size:13px}
.pp-ty-tag{font:800 10.5px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#FBF3E4;border:1.5px solid #E6D5B8;border-radius:999px;padding:3px 9px;color:#7A2F1C;white-space:nowrap}
.pp-ty-tr .p{font-weight:800;min-width:70px;text-align:right;color:#2B1A10}
@media(max-width:560px){.pp-ty-tr{grid-template-columns:auto 1fr auto}.pp-ty-tag{display:none}}
.pp-ty-tt{padding:14px 18px;display:grid;gap:6px;background:#FBF3E4}
.pp-ty-tt>div{display:flex;justify-content:space-between;font-size:14.5px;color:#2B1A10}
.pp-ty-tt .g{border-top:1.5px solid #2B1A10;padding-top:10px;margin-top:4px;font:800 1.2rem 'DM Sans',sans-serif;color:#6E1F0E}
.pp-ty-free{color:#3E6B47;font-weight:800}
.pp-ty-help{background:#7C2E1D;color:#FFFDF6;border:2px solid #2B1A10;border-radius:18px;padding:18px 20px;box-shadow:0 5px 0 #4A1A0E;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
@media(max-width:700px){.pp-ty-help{grid-template-columns:1fr}}
.pp-ty-help h3{margin:0;font:700 1.35rem 'Playfair Display',Georgia,serif;color:#F2C14E}
.pp-ty-help p{margin:4px 0 0;font-size:14px;color:#F6D9B8}
.pp-ty-hbs{display:flex;gap:10px;flex-wrap:wrap}
.pp-ty-hb{display:flex;align-items:center;gap:10px;background:rgba(255,253,246,.08);border:1.5px solid rgba(242,193,78,.5);border-radius:12px;padding:10px 14px;color:#FFFDF6;text-decoration:none;font-weight:700}
.pp-ty-hb:hover{background:rgba(255,253,246,.16)}
.pp-ty-hb small{display:block;font-weight:500;color:#F6D9B8;font-size:12px}
.pp-ty-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.pp-ty-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;border:2px solid #2B1A10;font:800 15px 'DM Sans',sans-serif;cursor:pointer;transition:transform .12s,box-shadow .12s}
.pp-ty-btn:hover{transform:translateY(-2px)}
.pp-ty-btn.gold{background:#F2C14E;color:#2B1A10;box-shadow:0 4px 0 #4A1A0E}
.pp-ty-btn.paper{background:#FFFDF6;color:#7A2F1C;box-shadow:0 4px 0 #4A1A0E}
@media(max-width:560px){.pp-ty-btn{width:100%}}
.pp-ty-foot{text-align:center;margin-top:22px;font-size:13px;color:#F6D9B8}
.pp-ty-foot b{color:#F2C14E}
.pp-ty-in{animation:ppCoIn .5s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.pp-ty-in,.pp-ty-tl li.is-next .n{animation:none}}
@media print{
  .pp-ty{background:#fff}.pp-ty-help,.pp-ty-act,.pp-ty-groot,.pp-ty-copy,header,footer,nav{display:none!important}
  .pp-ty-sect h3{color:#6E1F0E}.pp-ty-hero,.pp-ty-ic,.pp-ty-tl,.pp-ty-tbl{box-shadow:none}
}
/* ===== end thank-you ===== */

/* ===== Thank-you inline-style tokens ===== */
:root {
  --ty-green:  134 28% 33%;   /* #3E6B47 — custom slot colour */
  --ty-dark:   20 28% 12%;    /* #2B1A10 — address name bold  */
}
/* ===== end thank-you inline-style tokens ===== */

/* ===== Our Ingredients — animated hero text (pp-oi) ===== */
.pp-oi{position:relative;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.pp-oi .oi-eye{display:inline-flex;align-items:center;gap:12px;margin:0;font:800 clamp(12px,1.4vw,15px) 'DM Sans',system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:#FFFDF6;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.pp-oi .oi-eye .rule{display:block;width:clamp(26px,5vw,56px);height:2px;background:#F2C14E;box-shadow:0 1px 2px rgba(0,0,0,.6);transform:scaleX(0)}
.pp-oi .oi-eye .rule.l{transform-origin:right}.pp-oi .oi-eye .rule.r{transform-origin:left}
.pp-oi .oi-eye .ch{display:inline-block;opacity:0}
.pp-oi .oi-eye .ch.sp{width:.34em}
.pp-oi .oi-h1{margin:18px 0 10px;font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.06;letter-spacing:-.01em}
.pp-oi .oi-l1{position:relative;display:inline-block;font-size:clamp(2.2rem,6.4vw,4.6rem);color:#FFFDF6}
.pp-oi .oi-l1 .frost,.pp-oi .oi-l1 .clear{display:block;white-space:nowrap}
.pp-oi .oi-l1 .frost{filter:blur(9px);opacity:0;color:#F6EAD7}
.pp-oi .oi-l1 .clear{position:absolute;inset:0;clip-path:inset(-40% 100% -60% -10%);-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.45)}
.pp-oi .oi-l1 .edge{position:absolute;top:-6%;bottom:-6%;width:3px;left:0;opacity:0;border-radius:3px;background:linear-gradient(180deg,transparent,#FFF6D8 20%,#fff 50%,#FFF6D8 80%,transparent);box-shadow:0 0 18px 6px rgba(255,236,170,.55)}
.pp-oi .oi-l2{position:relative;display:block;margin-top:.12em;font-size:clamp(2.4rem,7vw,5rem);font-style:italic;font-weight:700;white-space:nowrap}
.pp-oi .l2w{display:inline-block}
.pp-oi .oi-l2 .ch{display:inline-block;color:#FFD95A;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;text-shadow:0 2px 0 #3a1a08,0 0 18px rgba(255,217,90,.45),0 10px 26px rgba(0,0,0,.5);opacity:0;transform-origin:50% 90%}
.pp-oi .oi-l2 .ch.sp{width:.26em}
.pp-oi .oi-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.pp-oi .oi-sparks svg{position:absolute;left:-17px;top:-17px;width:34px;height:34px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.pp-oi .oi-div{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 16px}
.pp-oi .oi-div i{display:block;height:2px;width:clamp(40px,8vw,70px);background:#FFFDF6;transform:scaleX(0);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.pp-oi .oi-div i:first-child{transform-origin:right}.pp-oi .oi-div i:last-child{transform-origin:left}
.pp-oi .oi-div svg{width:22px;height:22px;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.pp-oi .oi-body{max-width:640px;margin:0 auto;font:500 clamp(1.02rem,2vw,1.25rem)/1.6 'DM Sans',system-ui,sans-serif;color:#FFFDF6;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.45);opacity:0}
.pp-oi .oi-hl{position:relative;white-space:nowrap;font-weight:800;color:#2B1A10;text-shadow:none;padding:0 .18em;z-index:0}
.pp-oi .oi-hl-bg{position:absolute;inset:.08em -.05em .02em;background:#F2C14E;border-radius:.3em .5em .35em .45em;z-index:-1;transform:scaleX(0);transform-origin:left;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pp-oi .oi-ul{position:relative;white-space:nowrap;font-family:'Caveat',cursive;font-size:1.3em;color:#FFD95A}
.pp-oi .oi-ul svg{position:absolute;left:-4%;bottom:-.28em;width:108%;height:.5em;overflow:visible}
.pp-oi .oi-ul path{fill:none;stroke:#F2C14E;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* reduced motion: everything simply shown */
.pp-oi.is-static .ch,.pp-oi.is-static .oi-body,.pp-oi.is-static .oi-div svg{opacity:1!important}
.pp-oi.is-static .oi-l1 .clear{clip-path:none!important}
.pp-oi.is-static .rule,.pp-oi.is-static .oi-div i,.pp-oi.is-static .oi-hl-bg{transform:none!important}
.pp-oi.is-static .oi-ul path{stroke-dashoffset:0!important}

/* ===== Our Ingredients — fixed doodle wall (cards slide over it) ===== */
.pp-oi-wall{position:relative;clip-path:inset(0)}
.pp-oi-wall::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFDF6%22%20stroke-opacity%3D%22.17%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2840%2030%29%20rotate%28-18%2032%2032%29%20scale%281%29%22%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2226%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2216%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2240%22%20cy%3D%2216%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2226%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cpath%20d%3D%22M34%2032c-9%200-16%2010-16%2016%200%205%204%207%208%207%203%200%205-2%208-2s5%202%208%202c4%200%208-2%208-7%200-6-7-16-16-16z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28230%2060%29%20rotate%2820%2032%2032%29%20scale%281%29%22%3E%3Cpath%20d%3D%22M16%2022a6%206%200%201%201%208-7l24%2024a6%206%200%201%201%207%208%206%206%200%201%201-8%207L23%2030a6%206%200%201%201-7-8z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28420%2025%29%20rotate%28-6%2032%2032%29%20scale%281.1%29%22%3E%3Cpath%20d%3D%22M8%2034h48l-5%2016H13z%22%2F%3E%3Cpath%20d%3D%22M14%2034c2-7%208-10%2018-10s16%203%2018%2010%22%2F%3E%3Cpath%20d%3D%22M24%2042h16%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2229%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2227%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%2230%22%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28120%20190%29%20rotate%280%2032%2032%29%20scale%280.9%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2220%22%2F%3E%3Cpath%20d%3D%22M14%2024c10%202%2016%2010%2016%2026M50%2040c-10-2-16-10-16-26%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28330%20200%29%20rotate%2812%2032%2032%29%20scale%281%29%22%3E%3Cpath%20d%3D%22M14%2026a7%207%200%200%201%2012-5h12a7%207%200%201%201%200%2012%207%207%200%201%201%200%2012H26a7%207%200%201%201-12-7%207%207%200%200%201%200-12z%22%20transform%3D%22translate%280%20-2%29%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2231%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2227%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2232%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2236%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28490%20210%29%20rotate%28-10%2032%2032%29%20scale%280.75%29%22%3E%3Cpath%20d%3D%22M32%2050S12%2038%2012%2024a10%2010%200%200%201%2020-4%2010%2010%200%200%201%2020%204c0%2014-20%2026-20%2026z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2830%20340%29%20rotate%280%2032%2032%29%20scale%280.85%29%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2218%22%2F%3E%3Cpath%20d%3D%22M24%2028l2%202M36%2024l2%202M40%2036l2%202M28%2038l2%202M32%2032l1%201%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%20330%29%20rotate%28-12%2032%2032%29%20scale%281.05%29%22%3E%3Cpath%20d%3D%22M10%2040c6-6%2010%206%2016%200s10%206%2016%200%2010%206%2016%200%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2234%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%2250%22%20y%3D%2234%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M6%2046l-2%208M10%2046v8M54%2046v8M58%2046l2%208%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28400%20360%29%20rotate%284%2032%2032%29%20scale%281%29%22%3E%3Cpath%20d%3D%22M10%2030%2032%2012l22%2018%22%2F%3E%3Cpath%20d%3D%22M15%2027v25h34V27%22%2F%3E%3Cpath%20d%3D%22M26%2052V40a6%206%200%200%201%2012%200v12%22%2F%3E%3Cpath%20d%3D%22M28%2022h8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28100%20470%29%20rotate%28-8%2032%2032%29%20scale%280.9%29%22%3E%3Cpath%20d%3D%22M8%2032c10-14%2030-14%2040%200-10%2014-30%2014-40%200z%22%2F%3E%3Cpath%20d%3D%22M48%2032l10-9v18z%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28300%20470%29%20rotate%2810%2032%2032%29%20scale%280.95%29%22%3E%3Cpath%20d%3D%22M20%2044c-6%200-10-5-8-10l6-14c2-4%208-4%2010%200l2%205%202-5c2-4%208-4%2010%200l6%2014c2%205-2%2010-8%2010z%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2232%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2232%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M29%2038c2%202%204%202%206%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28480%20480%29%20rotate%2822%2032%2032%29%20scale%280.8%29%22%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2226%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2216%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2240%22%20cy%3D%2216%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2226%22%20rx%3D%225%22%20ry%3D%227%22%2F%3E%3Cpath%20d%3D%22M34%2032c-9%200-16%2010-16%2016%200%205%204%207%208%207%203%200%205-2%208-2s5%202%208%202c4%200%208-2%208-7%200-6-7-16-16-16z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:560px 560px;background-repeat:repeat}
@media(max-width:640px){.pp-oi-wall::after{background-size:420px 420px}}
.pp-oi-wall>*{position:relative;z-index:1}

/* ===== Our Ingredients — cards roll over onto the page ===== */
.pp-ing-grid{perspective:1100px}
.pp-ing-card-wrap{transform-style:preserve-3d}
.pp-oi-roll-pending{opacity:0}
/* ===== end our-ingredients ===== */

/* ===== Wellbeing Journal hero (pp-jr / pp-jw / pp-jh) ===== */
.pp-jw{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60vmax 45vmax at 50% 78%,rgba(255,214,150,.20),transparent 70%),
  radial-gradient(120vmax 80vmax at 50% 40%,transparent 55%,rgba(40,10,4,.28) 100%),#A64A2E}
.pp-jw-pol{position:absolute;left:50%;top:0;width:min(760px,88vw,calc((100vh - 170px) * 1.5));
  transform:translate(-50%,100vh) rotate(-2.2deg);transform-origin:50% 50%;will-change:transform}
.pp-jw-frame{background:#FFFDF6;padding:clamp(8px,1.4vw,14px) clamp(8px,1.4vw,14px) clamp(34px,5vw,58px);border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.06),0 18px 40px rgba(30,8,2,.45),0 40px 80px rgba(30,8,2,.25)}
.pp-jw-frame img{display:block;width:100%;height:auto;aspect-ratio:1672/941;-o-object-fit:cover;object-fit:cover;border-radius:1px;filter:saturate(1.02) contrast(1.02)}
.pp-jw-cap{position:absolute;left:0;right:0;bottom:clamp(6px,1.1vw,14px);text-align:center;font:700 clamp(1.05rem,2.3vw,1.7rem) 'Caveat',cursive;color:#6E1F0E}
.pp-jw-tape{position:absolute;top:-14px;width:clamp(70px,11vw,120px);height:clamp(22px,3vw,32px);background:rgba(242,193,78,.78);
  box-shadow:0 2px 4px rgba(0,0,0,.18);backdrop-filter:blur(1px);
  -webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0),repeating-linear-gradient(180deg,#000 0 4px,transparent 4px 6px);
  -webkit-mask-composite:source-over}
.pp-jw-tape.l{left:-18px;transform:rotate(-38deg)}.pp-jw-tape.r{right:-18px;transform:rotate(36deg)}
.pp-jw-stk{position:absolute;width:var(--s);height:var(--s);transform:translate(-50%,-50%) rotate(var(--r));filter:drop-shadow(0 3px 0 rgba(43,12,4,.28)) drop-shadow(0 8px 12px rgba(30,8,2,.30))}
.pp-jw-stk svg{width:100%;height:100%;display:block;overflow:visible}
@media(max-width:760px){.pp-jw-stk.dk{display:none}.pp-jw-stk{width:calc(var(--s) * .66);height:calc(var(--s) * .66);left:var(--mx)!important;top:var(--my)!important}}
.pp-jh{position:relative;max-width:860px;margin:0 auto;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pp-jh-eye{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;padding:8px 18px;border-radius:999px;
  border:1.5px solid rgba(242,193,78,.55);background:rgba(43,26,16,.18);font:800 clamp(11.5px,1.35vw,14px) 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F2C14E;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.pp-jh-eye svg{width:18px;height:18px;flex:none}
.pp-jh-eye{opacity:0;transform-origin:50% 50%}.pp-jh-eye .it{display:inline-block;opacity:0;white-space:nowrap}.pp-jh-eye svg{opacity:0}
.pp-jh-eye .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#F2C14E;opacity:0}
.pp-jh-title{margin:22px 0 0;font-family:'Playfair Display',Georgia,serif;line-height:1.02}
.pp-jh-the{display:block;font:italic 600 clamp(1.1rem,2.4vw,1.6rem) 'Playfair Display',serif;letter-spacing:.3em;text-transform:uppercase;color:#F6D9B8;opacity:0;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pp-jh-main{display:block;font-size:clamp(2.6rem,8vw,5.6rem);font-weight:800;letter-spacing:-.015em;white-space:nowrap;margin-top:.04em}
.pp-jh-main .ch{display:inline-block;color:#FFFDF6;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 3px 0 rgba(43,12,4,.55),0 12px 28px rgba(0,0,0,.35);opacity:0}
.pp-jh-main .j .ch{color:#FFD95A;font-style:italic;-webkit-text-stroke:1.2px #000;text-shadow:0 3px 0 #3a1a08,0 0 18px rgba(255,217,90,.35),0 12px 28px rgba(0,0,0,.4)}
.pp-jh-main .sp{width:.24em}
.pp-jh-flourish{position:relative;display:block;width:min(560px,86%);height:clamp(26px,4vw,40px);margin:4px auto 0;overflow:visible}
.pp-jh-flourish path{fill:none;stroke:#F2C14E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.pp-jh-pen{position:absolute;left:0;top:0;width:34px;height:34px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.pp-jh-seal{position:relative;width:clamp(46px,6vw,58px);height:clamp(46px,6vw,58px);margin:4px auto 14px;opacity:0}
.pp-jh-seal .wax{position:absolute;inset:0;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 35% 30%,#B0452B,#7A2F1C 55%,#5a1e10);box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,200,160,.35),0 4px 8px rgba(0,0,0,.4)}
.pp-jh-seal .wax::before{content:'';position:absolute;inset:14%;border-radius:50%;border:1.5px solid rgba(255,210,170,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.pp-jh-seal svg{position:absolute;inset:24%;width:52%;height:52%;fill:#F2C14E;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.pp-jh-seal .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(242,193,78,.8);opacity:0}
.pp-jh-sub{max-width:640px;margin:0 auto;font:500 clamp(1.02rem,2vw,1.25rem)/1.65 'DM Sans',sans-serif;color:#FFFDF6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pp-jh-sub .w{display:inline-block;opacity:0}
.pp-jh-sub .hand{display:inline-block;font:700 1.45em/1 'Caveat',cursive;color:#FFD95A;text-shadow:0 1px 1px rgba(0,0,0,.6);clip-path:inset(-20% 100% -30% 0);white-space:nowrap}
.pp-jh.is-static,.pp-jh.is-static *{opacity:1!important;clip-path:none!important;transform:none!important;filter:none!important}.pp-jh.is-static .pp-jh-pen,.pp-jh.is-static .ring{opacity:0!important}
/* hero shell: transparent section, the wall is fixed but clipped to this section */
.pp-jr-hero{position:relative;background:transparent;clip-path:inset(0);min-height:170vh}
.pp-jr-hero .pp-jw{z-index:0}
.pp-jr-inner{position:relative;z-index:1;padding:clamp(28px,5vh,56px) 16px 0}
.pp-jh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp-jh-pen{position:absolute}
/* the section after the hero rolls up over the wall */
.pp-jr-cover{position:relative;z-index:2;border-radius:28px 28px 0 0;box-shadow:0 -18px 40px rgba(30,8,2,.35)}
@media (prefers-reduced-motion:reduce){.pp-jw-stk{animation:none}}
/* ===== end journal hero ===== */

/* ===== Journal article page (pp-art) ===== */
.pp-art{background:#A64A2E;color:#FFFDF6;font-family:'DM Sans',system-ui,sans-serif;overflow-x:clip}
.pp-art-head{max-width:1080px;margin:0 auto;padding:clamp(28px,5vw,56px) 20px 0}
.pp-art-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.pp-art-back{display:inline-flex;align-items:center;gap:8px;color:#F6D9B8;font-weight:700;font-size:14px;text-decoration:none;opacity:0}
.pp-art-back i{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(246,217,184,.6);display:grid;place-items:center;font-style:normal;transition:.2s}
.pp-art-back:hover i{background:#F2C14E;color:#2B1A10;border-color:#F2C14E}
.pp-art-cat{display:inline-flex;align-items:center;gap:6px;font:800 11.5px 'DM Sans';letter-spacing:.16em;text-transform:uppercase;color:#2B1A10;background:#F2C14E;border:1.5px solid #2B1A10;border-radius:999px;padding:5px 12px;box-shadow:0 2px 0 #2B1A10;opacity:0}
.pp-art-title{margin:0;max-width:900px;font:800 clamp(2.1rem,5.6vw,4.2rem)/1.06 'Playfair Display',Georgia,serif;letter-spacing:-.01em;cursor:pointer}
.pp-art-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.pp-art-title .w>span{display:inline-block;color:#FFFDF6;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 3px 0 rgba(43,12,4,.5);transform:translateY(110%)}
.pp-art-title .w.g>span{color:#FFD95A;font-style:italic}
.pp-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;color:#F6D9B8;font-size:14.5px}
.pp-art-meta>*{opacity:0}
.pp-art-av{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#FFFDF6}
.pp-art-av b{width:40px;height:40px;border-radius:50%;background:#FFFDF6;color:#7A2F1C;border:2px solid #2B1A10;display:grid;place-items:center;font:800 14px 'DM Sans';box-shadow:0 2px 0 #2B1A10}
.pp-art-av small{display:block;font-weight:500;color:#F6D9B8;font-size:12.5px}
.pp-art-meta span{display:inline-flex;align-items:center;gap:6px}
/* photo — "gallery mat" that opens like a shutter */
.pp-art-photo{max-width:1180px;margin:clamp(26px,4vw,44px) auto 0;padding:0 20px}
.pp-art-mat{position:relative;background:#FFFDF6;padding:clamp(8px,1.2vw,14px);border-radius:26px;border:2px solid #2B1A10;box-shadow:0 10px 0 #4A1A0E,0 30px 60px rgba(30,8,2,.35)}
.pp-art-mat::after{content:'';position:absolute;inset:clamp(8px,1.2vw,14px);border-radius:16px;box-shadow:inset 0 0 0 1.5px rgba(214,163,46,.9);pointer-events:none}
.pp-art-frame{overflow:hidden;border-radius:16px;aspect-ratio:16/9;clip-path:inset(0 50% 0 50% round 16px)}
.pp-art-frame img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.18)}
.pp-art-capt{margin:14px 6px 0;font:700 1.2rem 'Caveat',cursive;color:#F6D9B8;text-align:right;opacity:0}
/* body */
.pp-art-wrap{max-width:1180px;margin:clamp(34px,5vw,60px) auto 0;padding:0 20px 70px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:960px){.pp-art-wrap{grid-template-columns:1fr;gap:0}.pp-art-side{display:none}}
.pp-art-side{position:sticky;top:calc(var(--pp-header-h,72px) + 24px)}
.pp-art-toc{background:rgba(43,12,4,.18);border:1.5px solid rgba(242,193,78,.45);border-radius:18px;padding:16px}
.pp-art-toc h4,.pp-art-toc .pp-art-toc-h{margin:0 0 10px;font:800 11px 'DM Sans';letter-spacing:.18em;text-transform:uppercase;color:#F2C14E}
.pp-art-toc a{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:10px;color:#F6D9B8;text-decoration:none;font-size:13.5px;line-height:1.35;transition:.2s;cursor:pointer}
.pp-art-toc a i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(242,193,78,.6);font:800 10px/15px 'DM Sans';text-align:center;font-style:normal;color:#F2C14E}
.pp-art-toc a:hover{background:rgba(255,253,246,.08)}
.pp-art-toc a.on{background:#F2C14E;color:#2B1A10;font-weight:800}.pp-art-toc a.on i{background:#2B1A10;border-color:#2B1A10;color:#F2C14E}
.pp-art-share{margin-top:14px;display:flex;gap:8px}
.pp-art-share button{flex:1;height:42px;border-radius:12px;border:1.5px solid #2B1A10;background:#FFFDF6;color:#7A2F1C;font-weight:800;font-size:13px;box-shadow:0 3px 0 #2B1A10;cursor:pointer}
.pp-art-paper{position:relative;background:#FBF3E4;color:#2B1A10;border:2px solid #2B1A10;border-radius:26px;box-shadow:0 10px 0 #4A1A0E,0 24px 50px rgba(30,8,2,.28);padding:clamp(24px,5vw,56px) clamp(20px,5vw,60px)}
.pp-art-paper::before{content:'';position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:120px;height:10px;border-radius:0 0 10px 10px;background:#F2C14E;border:2px solid #2B1A10;border-top:0}
.pp-art-body{font-size:clamp(1.02rem,1.6vw,1.13rem);line-height:1.8;color:#3D2A1E}
.pp-art-body>p:first-of-type::first-letter{float:left;font:800 4.6em/.82 'Playfair Display',serif;color:#7A2F1C;margin:.06em .12em 0 0;padding:.08em .12em .04em;background:#F2C14E;border:2px solid #2B1A10;border-radius:14px;box-shadow:0 3px 0 #2B1A10}
.pp-art-body p{margin:0 0 1.2em}
.pp-art-body h2{position:relative;margin:1.9em 0 .7em;padding-left:40px;font:700 clamp(1.4rem,2.6vw,1.9rem)/1.2 'Playfair Display',serif;color:#6E1F0E;scroll-margin-top:calc(var(--pp-header-h,72px) + 30px)}
.pp-art-body h2::before{content:'';position:absolute;left:0;top:.12em;width:28px;height:28px;border-radius:50%;background:#F2C14E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A2F1C'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3.5 0-6.5 4-6.5 6.5 0 2 1.6 3 3.3 3 1.3 0 2-.7 3.2-.7s1.9.7 3.2.7c1.7 0 3.3-1 3.3-3C18.5 15 15.5 11 12 11z'/%3E%3C/svg%3E") center/62% no-repeat;border:1.5px solid #2B1A10}
.pp-art-body h2::after{content:'';position:absolute;left:40px;bottom:-8px;height:3px;width:64px;border-radius:3px;background:#D6A32E;transform:scaleX(var(--ul,0));transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .2s}
.pp-art-body h2.in{--ul:1}
.pp-art-body strong{color:#6E1F0E}
.pp-art .pp-rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.pp-art .pp-rv.in{opacity:1;transform:none}
/* author card */
.pp-art-author{margin-top:2.2em;display:flex;gap:16px;align-items:center;background:#FFFDF6;border:1.5px solid #2B1A10;border-radius:18px;padding:16px 18px;box-shadow:0 4px 0 #2B1A10}
.pp-art-author b.av{flex:none;width:58px;height:58px;border-radius:50%;background:#7A2F1C;color:#F2C14E;display:grid;place-items:center;font:800 1.2rem 'Playfair Display';border:2px solid #2B1A10}
.pp-art-author small{display:block;font:800 10.5px 'DM Sans';letter-spacing:.16em;text-transform:uppercase;color:#A64A2E}
.pp-art-author strong{font:700 1.15rem 'Playfair Display';color:#2B1A10}
.pp-art-author p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:#6B5646}
.pp-art-mshare{display:none;margin-top:16px;gap:8px}
@media(max-width:960px){.pp-art-mshare{display:flex}.pp-art-mshare button{flex:1;height:44px;border-radius:12px;border:1.5px solid #2B1A10;background:#F2C14E;color:#2B1A10;font-weight:800;box-shadow:0 3px 0 #2B1A10}}
/* related */
.pp-art-rel{background:#7C2E1D;padding:clamp(44px,6vw,70px) 20px;border-top:2px solid #2B1A10}
.pp-art-rel h2{max-width:1180px;margin:0 auto 26px;font:700 clamp(1.7rem,3.4vw,2.4rem) 'Playfair Display',serif;color:#FFFDF6;display:flex;align-items:center;gap:14px}
.pp-art-rel h2::after{content:'';flex:1;height:2px;background:rgba(242,193,78,.5)}
.pp-art-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1100px}
@media(max-width:900px){.pp-art-grid{grid-template-columns:1fr;max-width:520px}}
.pp-art-card{display:flex;flex-direction:column;background:#FFFDF6;color:#2B1A10;border:2px solid #2B1A10;border-radius:20px;overflow:hidden;box-shadow:0 6px 0 #2B1A10;text-decoration:none;transition:transform .25s,box-shadow .25s;transform-origin:50% 100%}
.pp-art-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 12px 0 #2B1A10}
.pp-art-card .im{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid #2B1A10}
.pp-art-card .im img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s}
.pp-art-card:hover .im img{transform:scale(1.07)}
.pp-art-card .tag{position:absolute;left:12px;top:12px;font:800 10.5px 'DM Sans';letter-spacing:.12em;text-transform:uppercase;background:#F2C14E;border:1.5px solid #2B1A10;border-radius:999px;padding:3px 10px}
.pp-art-card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pp-art-card h3{margin:0 0 6px;font:700 1.2rem/1.25 'Playfair Display',serif}
.pp-art-card p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:#6B5646;flex:1}
.pp-art-card .go{font-weight:800;font-size:13.5px;color:#A64A2E}
.pp-art-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp-art-toc a span{min-width:0}
/* reduced motion: show everything */
.pp-art-head.is-static .pp-art-back,.pp-art-head.is-static .pp-art-cat,.pp-art-head.is-static .pp-art-meta>*,.pp-art-photo.is-static .pp-art-capt{opacity:1}
.pp-art-head.is-static .pp-art-title .w>span{transform:none}
.pp-art-photo.is-static .pp-art-frame{clip-path:none}.pp-art-photo.is-static .pp-art-frame img{transform:none}
@media (prefers-reduced-motion:reduce){.pp-art .pp-rv{opacity:1;transform:none;transition:none}.pp-art-body h2::after{transition:none}}
/* ===== end journal article ===== */
/* ===== journal article — toc buttons + share links ===== */
.pp-art-toc button{display:flex;gap:10px;align-items:flex-start;width:100%;padding:7px 8px;border:0;border-radius:10px;background:transparent;color:#F6D9B8;text-align:left;font:inherit;font-size:13.5px;line-height:1.35;cursor:pointer;transition:.2s}
.pp-art-toc button i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(242,193,78,.6);font:800 10px/15px 'DM Sans',sans-serif;text-align:center;font-style:normal;color:#F2C14E}
.pp-art-toc button:hover{background:rgba(255,253,246,.08)}
.pp-art-toc button.on{background:#F2C14E;color:#2B1A10;font-weight:800}
.pp-art-toc button.on i{background:#2B1A10;border-color:#2B1A10;color:#F2C14E}
.pp-art-share a,.pp-art-mshare a{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none}
.pp-art-share a{height:42px;border-radius:12px;border:1.5px solid #2B1A10;background:#FFFDF6;color:#7A2F1C;font-weight:800;font-size:13px;box-shadow:0 3px 0 #2B1A10}
.pp-art-mshare a{height:44px;border-radius:12px;border:1.5px solid #2B1A10;background:#F2C14E;color:#2B1A10;font-weight:800;box-shadow:0 3px 0 #2B1A10}
/* ===== end journal article toc buttons + share links ===== */
/* ===== Header nav: two-colour roll + current page ===== */
.pp-navroll{position:relative}
.pp-navroll .pp-roll-a{color:#FFFDF6;text-shadow:0 1px 2px rgba(60,20,5,.45)}
.pp-navroll .pp-roll-b{color:#6E1F0E;text-shadow:0 1px 0 rgba(255,240,200,.35)}
.pp-navroll svg{color:#FFFDF6;transition:color .3s}
.pp-navroll.is-active .pp-roll-a{color:#6E1F0E !important;text-shadow:0 1px 0 rgba(255,240,200,.35)}
.pp-navroll.is-active .pp-roll-b{color:#FFFDF6 !important;text-shadow:0 1px 2px rgba(60,20,5,.45)}
.pp-navroll.is-active svg{color:#6E1F0E}
.pp-navroll::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:#6E1F0E;transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pp-navroll.is-active::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.pp-navroll::after{transition:none}}
/* ===== end header nav ===== */
/* ===== Our Story — personal-note scroll story ===== */
/* ============ OUR STORY — scroll story (pp-os) ============ */
.pp-os-page{background:#6E1F0E;color:#FFFDF6;font-family:'DM Sans',system-ui,sans-serif;overflow-x:clip}
.pp-os{position:relative;height:calc(var(--beats) * 100vh + 40vh)}
.pp-os-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#E9E6E1}
.pp-os-video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 30%;object-position:50% 30%;background:#E9E6E1}
/* warm edges so white text/cards sit comfortably, face stays clear in the middle */
.pp-os-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(60,18,6,.55) 0%,rgba(60,18,6,.0) 32%,rgba(60,18,6,0) 68%,rgba(60,18,6,.55) 100%),linear-gradient(0deg,rgba(60,18,6,.35),transparent 30%)}

.pp-os-beat{position:absolute;z-index:2;top:calc(50% + var(--pp-header-h,72px) / 2);width:min(390px,31vw);transform:translateY(-50%);pointer-events:none;opacity:0;visibility:hidden}
.pp-os-beat.l{left:clamp(20px,4vw,64px)}.pp-os-beat.r{right:clamp(20px,4vw,64px)}
.pp-os-beat.on{opacity:1;visibility:visible;pointer-events:auto}
.pp-os-card{position:relative;padding:26px 26px 24px;border-radius:22px;background:rgba(58,20,8,.72);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  border:1.5px solid rgba(242,193,78,.45);box-shadow:0 20px 50px rgba(20,6,2,.45)}
.pp-os-card::before{content:'';position:absolute;left:26px;top:-1.5px;width:64px;height:3px;border-radius:3px;background:#F2C14E}
.pp-os-num{font:800 11px 'DM Sans';letter-spacing:.24em;text-transform:uppercase;color:#F2C14E;margin:0 0 10px}
.pp-os-h{margin:0 0 12px;font:700 clamp(1.55rem,2.4vw,2.1rem)/1.15 'Playfair Display',Georgia,serif;color:#FFFDF6}
.pp-os-h em{font-style:italic;color:#FFD95A}
.pp-os-p{margin:0;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.65;color:#F6E7D6}
.pp-os-p b{color:#FFD95A;font-weight:700}
.pp-os-h .w,.pp-os-p .ln{display:inline-block}
/* title beat */
.pp-os-title .pp-os-eye{font:800 12.5px 'DM Sans';letter-spacing:.34em;text-transform:uppercase;color:#F2C14E;margin:0 0 8px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pp-os-title h1,.pp-os-title .pp-os-title-h1{margin:0;font:800 clamp(3rem,6vw,5.2rem)/.98 'Playfair Display',Georgia,serif;color:#FFFDF6;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 3px 0 rgba(43,12,4,.5),0 10px 30px rgba(0,0,0,.45)}
.pp-os-title h1 .w,.pp-os-title .pp-os-title-h1 .w{display:inline-block}
.pp-os-title .sub{margin:14px 0 0;font:700 clamp(1.5rem,2.4vw,2rem)/1.1 'Caveat',cursive;color:#FFD95A;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.pp-os-title .rule{display:block;width:70px;height:3px;border-radius:3px;background:#F2C14E;margin:16px 0 0}
.pp-os-hint{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font:700 12px 'DM Sans';letter-spacing:.14em;text-transform:uppercase;color:#F6D9B8}
.pp-os-hint i{width:22px;height:34px;border:2px solid #F6D9B8;border-radius:12px;position:relative}
.pp-os-hint i::after{content:'';position:absolute;left:50%;top:6px;width:4px;height:7px;border-radius:2px;background:#F2C14E;transform:translateX(-50%);animation:ppOsWheel 1.6s infinite}
@keyframes ppOsWheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
/* ingredients chips */
.pp-os-chips{display:grid;gap:8px;margin-top:14px}
.pp-os-chip{display:flex;gap:10px;align-items:flex-start;background:rgba(255,253,246,.08);border:1px solid rgba(242,193,78,.35);border-radius:12px;padding:9px 11px;font-size:14px;line-height:1.4;color:#F6E7D6}
.pp-os-chip b{display:block;color:#FFD95A;font-size:13px;letter-spacing:.04em}
.pp-os-chip span.e{font-size:18px;line-height:1}
/* quote beat */
.pp-os-quote{margin:0;font:700 clamp(1.5rem,2.3vw,2rem)/1.25 'Playfair Display',serif;font-style:italic;color:#FFD95A}
.pp-os-quote::before{content:'"';display:block;font:800 4rem/.6 'Playfair Display',serif;color:#F2C14E;margin-bottom:6px}
.pp-os-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:50px;padding:0 22px;border-radius:14px;border:2px solid #2B1A10;background:#F2C14E;color:#2B1A10;font:800 15px 'DM Sans';text-decoration:none;box-shadow:0 4px 0 #2B1A10}
.pp-os-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2B1A10}
/* progress dots */
.pp-os-dots{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px}
.pp-os-dots button{width:9px;height:9px;padding:0;border-radius:999px;border:1.5px solid #FFFDF6;background:transparent;cursor:pointer;transition:all .35s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pp-os-dots button.on{width:28px;background:#F2C14E;border-color:#F2C14E}

/* phone / tablet: video on top, story card sits below the face */
@media (max-width:1023px){
  .pp-os-stage{background:#6E1F0E}
  .pp-os-video{height:66%;-o-object-position:50% 22%;object-position:50% 22%;background-position:center 0}
  .pp-os-stage::after{background:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(110,31,14,.0) 56%,#6E1F0E 66%)}
  .pp-os-beat,.pp-os-beat.l,.pp-os-beat.r{left:14px;right:14px;width:auto;top:auto;bottom:calc(46px + env(safe-area-inset-bottom));transform:none}
  .pp-os-card{padding:18px 18px 16px;background:rgba(58,20,8,.86)}
  .pp-os-h{font-size:1.45rem}
  .pp-os-p{font-size:.98rem;line-height:1.55}
  .pp-os-title h1,.pp-os-title .pp-os-title-h1{font-size:3rem}
  .pp-os-title{text-align:center}.pp-os-title .rule{margin:12px auto 0}
  .pp-os-chips{grid-template-columns:1fr 1fr;gap:6px}.pp-os-chip span:last-child{font-size:0}.pp-os-chip b{font-size:12.5px!important;margin:0}.pp-os-chip{font-size:12.5px;padding:7px 8px}.pp-os-chip b{font-size:12px}
  .pp-os-dots{bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ============ maroon closing section (scrolls over) ============ */
.pp-os-end{position:relative;z-index:2;background:#6E1F0E;padding:clamp(56px,8vw,96px) 20px;border-radius:32px 32px 0 0;margin-top:-40vh;box-shadow:0 -20px 50px rgba(20,6,2,.4)}
.pp-os-end h2{margin:0 0 30px;text-align:center;font:700 clamp(1.9rem,4vw,2.8rem) 'Playfair Display',serif;color:#FFFDF6}
.pp-os-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1100px}
@media(max-width:860px){.pp-os-grid{grid-template-columns:1fr;max-width:480px}}
.pp-os-hl{background:#FBF3E4;color:#2B1A10;border:2px solid #2B1A10;border-radius:22px;box-shadow:0 7px 0 #2B1A10;padding:26px 22px;text-align:center;transform-origin:50% 100%}
.pp-os-hl .ic{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#F2C14E;border:2px solid #2B1A10;display:grid;place-items:center;font-size:26px;box-shadow:0 3px 0 #2B1A10}
.pp-os-hl h3{margin:0 0 8px;font:700 1.3rem 'Playfair Display',serif;color:#6E1F0E}
.pp-os-hl p{margin:0;font-size:15px;line-height:1.55;color:#5A4636}
.pp-os-endcta{text-align:center;margin-top:36px}

/* ===== personal-note restyle ===== */
.pp-os-card{background:#FBF3E4;color:#3A2418;border:0;border-radius:4px 4px 6px 6px;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:34px 28px 26px;transform:rotate(var(--tilt,-1.2deg));
  background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(122,47,28,.10) 29px 30px),linear-gradient(90deg,transparent 22px,rgba(214,70,60,.22) 22px 23px,transparent 23px);
  background-position:0 58px,0 0;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 30px rgba(30,8,2,.35),0 30px 60px rgba(30,8,2,.2)}
.pp-os-beat.r .pp-os-card{--tilt:1.4deg}
.pp-os-card::before{left:50%;top:-12px;width:110px;height:26px;border-radius:2px;transform:translateX(-50%) rotate(-3deg);background:rgba(242,193,78,.8);box-shadow:0 2px 3px rgba(0,0,0,.15)}
.pp-os-num{font:600 1.25rem/1 'Caveat',cursive;letter-spacing:0;text-transform:none;color:#A64A2E;margin:0 0 6px}
.pp-os-h{font:700 clamp(2rem,3vw,2.6rem)/1.05 'Caveat',cursive;color:#6E1F0E}
.pp-os-h em{font-style:normal;color:#6E1F0E;background:linear-gradient(transparent 58%,rgba(242,193,78,.75) 58% 92%,transparent 92%);padding:0 .1em}
.pp-os-p{font:400 clamp(1.02rem,1.25vw,1.12rem)/1.75 'Lora',Georgia,serif;color:#3A2418}
.pp-os-p b{color:#6E1F0E;font-weight:600;font-style:italic}
.pp-os-chip{background:#FFFDF6;border:1px dashed rgba(122,47,28,.35);color:#3A2418;font-family:'Lora',serif}
.pp-os-chip b{color:#6E1F0E;font-family:'DM Sans',sans-serif}
.pp-os-quote{font:700 clamp(1.9rem,2.8vw,2.4rem)/1.15 'Caveat',cursive;font-style:normal;color:#6E1F0E}
.pp-os-quote::before{color:#D6A32E}
.pp-os-sign{margin:16px 0 0;font:600 1.6rem/1 'Caveat',cursive;color:#A64A2E;text-align:right}
.pp-os-sign small{display:block;font:italic 400 13px 'Lora',serif;color:#6B5646;margin-top:4px}
.pp-os-paw{position:absolute;right:16px;bottom:12px;width:34px;height:34px;opacity:.16;transform:rotate(-18deg)}
/* title as a letter opening */
.pp-os-title .pp-os-eye{font:600 1.4rem 'Caveat',cursive;letter-spacing:0;text-transform:none;color:#FFD95A}
.pp-os-title .sub{font:italic 500 clamp(1.2rem,1.8vw,1.45rem)/1.3 'Lora',serif;color:#FFFDF6}
.pp-os-title .dear{display:block;margin-top:18px;font:700 clamp(1.7rem,2.4vw,2.1rem) 'Caveat',cursive;color:#FFD95A;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.pp-os-hint{font:600 1.15rem 'Caveat',cursive;letter-spacing:0;text-transform:none}
/* handwriting reveal */
.pp-os-ink{display:inline-block;clip-path:inset(-10% 100% -20% 0)}
/* closing cards as pinned notes */
.pp-os-hl{background:#FBF3E4;border:0;border-radius:4px;box-shadow:0 14px 30px rgba(20,6,2,.4);position:relative;transform:rotate(var(--tilt,0))}
.pp-os-hl:nth-child(1){--tilt:-1.5deg}.pp-os-hl:nth-child(2){--tilt:1deg}.pp-os-hl:nth-child(3){--tilt:-.8deg}
.pp-os-hl::before{content:'';position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8795F,#A64A2E 60%,#6E1F0E);box-shadow:0 3px 4px rgba(0,0,0,.35)}
.pp-os-hl h3{font:700 1.8rem 'Caveat',cursive}
.pp-os-hl p{font-family:'Lora',serif;color:#3A2418}
.pp-os-hl .ic{background:transparent;border:0;box-shadow:none;font-size:30px;margin-bottom:4px;height:auto}
.pp-os-end h2{font:700 clamp(2.4rem,5vw,3.4rem) 'Caveat',cursive;color:#FFD95A}
@media (max-width:1023px){.pp-os-card{padding:26px 18px 18px;background-position:0 50px,0 0}.pp-os-h{font-size:1.9rem}.pp-os-p{font-size:.98rem;line-height:1.6}.pp-os-quote{font-size:1.8rem}}

.pp-os-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.pp-os-hint i::after{animation:none}}
/* ===== end our story ===== */

/* ===== Our Founders — portrait gallery (pp-fd) ===== */
.pp-fd{--gold:#D6A32E;--gold2:#F2C14E;--maroon:#6E1F0E;--wine:#4E1308;--paper:#F6EAD7;--ink:#2B1A10;position:relative;overflow:clip}

/* ---- HERO: velvet room with a following spotlight ---- */
.pp-fd-hero{position:relative;min-height:calc(100vh - var(--pp-header-h,72px));min-height:calc(100svh - var(--pp-header-h,72px));display:grid;place-items:center;text-align:center;padding:40px 20px 70px;
  background:radial-gradient(420px 320px at var(--mx,50%) var(--my,40%),rgba(242,193,78,.18),transparent 70%),radial-gradient(120% 90% at 50% 0%,#8A2E17 0%,#6E1F0E 45%,#4E1308 100%)}
.pp-fd-hero::before{content:'';position:absolute;inset:18px;border:1px solid rgba(214,163,46,.35);border-radius:4px;pointer-events:none}
.pp-fd-hero::after{content:'';position:absolute;inset:26px;border:1px solid rgba(214,163,46,.18);border-radius:2px;pointer-events:none}
.pp-fd-orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold2);font:600 12.5px 'DM Sans';letter-spacing:.42em;text-transform:uppercase}
.pp-fd-orn i{display:block;width:clamp(30px,6vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--gold2))}
.pp-fd-orn i:last-child{transform:scaleX(-1)}
.pp-fd-title{margin:18px 0 6px;font:700 clamp(3rem,9vw,7rem)/.95 'Playfair Display',Georgia,serif;letter-spacing:-.02em;perspective:600px}
.pp-fd-title .c{display:inline-block;transform-origin:50% 100%;background:linear-gradient(180deg,#FFF6DD 0%,#F2C14E 55%,#B8801E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.pp-fd-sign{font:400 clamp(2.2rem,5vw,3.6rem)/1 'Pinyon Script',cursive;color:#FFFDF6;margin:6px 0 0;opacity:.95}
.pp-fd-sub{margin:18px auto 0;max-width:560px;font:italic 500 clamp(1.05rem,1.8vw,1.3rem)/1.5 'Playfair Display',serif;color:#F6D9B8}
.pp-fd-duo{position:relative;display:flex;justify-content:center;gap:0;margin-top:34px;height:clamp(170px,24vw,240px)}
.pp-fd-mini{width:clamp(120px,16vw,170px);aspect-ratio:3/4;border-radius:999px 999px 10px 10px;padding:6px;background:linear-gradient(145deg,#F7DE8E,#B8801E 45%,#F2C14E 70%,#8E5F12);box-shadow:0 18px 36px rgba(0,0,0,.45)}
.pp-fd-mini>div{width:100%;height:100%;border-radius:999px 999px 6px 6px;overflow:hidden;background:#3a1a10}
.pp-fd-mini img,.pp-fd-ph{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.pp-fd-mini.a{transform:rotate(-6deg) translateX(14px)}.pp-fd-mini.b{transform:rotate(6deg) translateX(-14px);margin-top:14px}
.pp-fd-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font:600 11px 'DM Sans';letter-spacing:.3em;text-transform:uppercase;color:#F6D9B8;display:flex;flex-direction:column;align-items:center;gap:8px}
.pp-fd-scroll i{width:1px;height:38px;background:linear-gradient(var(--gold2),transparent);animation:fdDrop 1.8s infinite}
@keyframes fdDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- PAPER BODY with a gold thread drawn on scroll ---- */
.pp-fd-body{position:relative;background:var(--paper);color:var(--ink);padding:clamp(60px,8vw,110px) 20px clamp(40px,6vw,80px)}
.pp-fd-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.pp-fd-thread path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:.75}
.pp-fd-intro{position:relative;z-index:1;max-width:760px;margin:0 auto clamp(60px,8vw,110px);text-align:center;font:500 clamp(1.25rem,2.4vw,1.75rem)/1.5 'Playfair Display',serif;color:#4A2A1A}
.pp-fd-intro em{font-style:italic;color:#A64A2E}
.pp-fd-intro::before{content:'';display:block;width:44px;height:44px;margin:0 auto 18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D6A32E'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3.5 0-6.5 4-6.5 6.5 0 2 1.6 3 3.3 3 1.3 0 2-.7 3.2-.7s1.9.7 3.2.7c1.7 0 3.3-1 3.3-3C18.5 15 15.5 11 12 11z'/%3E%3C/svg%3E") center/contain no-repeat}
.pp-fd-row{position:relative;z-index:1;max-width:1120px;margin:0 auto clamp(80px,10vw,140px);display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.pp-fd-row.rev{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.pp-fd-row.rev .pp-fd-portrait{order:2}
@media(max-width:860px){.pp-fd-row,.pp-fd-row.rev{grid-template-columns:1fr}.pp-fd-row.rev .pp-fd-portrait{order:0}.pp-fd-portrait{width:100%;max-width:340px;margin:0 auto 20px}.pp-fd-thread{display:none}}
/* gilded arch portrait with 3D tilt + iris reveal + sheen */
.pp-fd-portrait{position:relative;width:100%;perspective:900px}
.pp-fd-frame{position:relative;aspect-ratio:4/5;border-radius:999px 999px 14px 14px;padding:10px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(145deg,#F7DE8E 0%,#B8801E 30%,#F2C14E 55%,#8E5F12 80%,#E9C66B 100%);box-shadow:0 30px 60px rgba(43,12,4,.35),0 8px 16px rgba(43,12,4,.25)}
.pp-fd-frame .in{position:relative;width:100%;height:100%;border-radius:999px 999px 8px 8px;overflow:hidden;background:#3a1a10;box-shadow:inset 0 0 0 2px rgba(78,19,8,.6)}
.pp-fd-frame .pic{position:absolute;inset:0;clip-path:circle(0% at 50% 45%)}
.pp-fd-frame .pic img,.pp-fd-frame .pic .pp-fd-ph{transform:scale(1.15)}
.pp-fd-frame .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,250,230,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none;mix-blend-mode:soft-light}
.pp-fd-plate{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);padding:8px 18px;border-radius:6px;background:linear-gradient(180deg,#F7DE8E,#C9952A);color:#3A1A08;font:700 11px 'DM Sans';letter-spacing:.28em;text-transform:uppercase;box-shadow:0 6px 14px rgba(43,12,4,.3);white-space:nowrap}
.pp-fd-ring{position:absolute;right:-26px;top:18%;width:112px;height:112px;animation:fdSpin 18s linear infinite}
.pp-fd-row.rev .pp-fd-ring{right:auto;left:-26px}
.pp-fd-ring .pp-fd-ring-ini{font:700 16px 'Playfair Display',serif;letter-spacing:0}
.pp-fd-ring text{font:800 9.6px 'DM Sans';letter-spacing:2px;fill:#6E1F0E}
@keyframes fdSpin{to{transform:rotate(360deg)}}
@media(max-width:560px){.pp-fd-ring{width:92px;height:92px;right:-8px}.pp-fd-row.rev .pp-fd-ring{left:-8px}}
/* text side */
.pp-fd-role{display:inline-flex;align-items:center;gap:10px;font:700 12px 'DM Sans';letter-spacing:.3em;text-transform:uppercase;color:#A64A2E}
.pp-fd-role::before{content:'';width:34px;height:1.5px;background:#A64A2E}
.pp-fd-name{margin:8px 0 18px;font:400 clamp(3.2rem,6.6vw,5.4rem)/1.05 'Pinyon Script',cursive;color:var(--maroon);letter-spacing:0;padding:.05em .1em .12em 0;clip-path:inset(-20% 100% -30% 0)}
.pp-fd-sig{font:400 clamp(1.9rem,3.6vw,2.6rem)/1 'Pinyon Script',cursive;color:#B8801E;margin:0 0 18px}
.pp-fd-lead{margin:0 0 14px;font:italic 500 clamp(1.15rem,1.8vw,1.35rem)/1.55 'Playfair Display',serif;color:#3A2418;border-left:3px solid var(--gold);padding-left:16px}
.pp-fd-bio{margin:0;font-size:clamp(1rem,1.3vw,1.08rem);line-height:1.8;color:#5A4232}
.pp-fd-rv{opacity:0;transform:translateY(16px)}
/* mission / passion flip cards */
.pp-fd-flips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:480px){.pp-fd-flips{grid-template-columns:1fr}}
.pp-fd-flip{display:block;width:100%;perspective:900px;height:150px;cursor:pointer;background:none;border:0;padding:0;text-align:left;font:inherit}
.pp-fd-flip .cd{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.2,.4,1)}
.pp-fd-flip:hover .cd,.pp-fd-flip.on .cd{transform:rotateY(180deg)}
.pp-fd-flip .f,.pp-fd-flip .b{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:18px;display:flex;flex-direction:column;justify-content:center}
.pp-fd-flip .f{background:var(--maroon);color:#FFFDF6;border:1px solid rgba(214,163,46,.6);box-shadow:inset 0 0 0 5px var(--maroon),inset 0 0 0 6px rgba(214,163,46,.45)}
.pp-fd-flip .f b{font:600 1.5rem 'Playfair Display',serif;color:var(--gold2)}
.pp-fd-flip .f small{margin-top:6px;font:600 11px 'DM Sans';letter-spacing:.2em;text-transform:uppercase;color:#F6D9B8}
.pp-fd-flip .b{transform:rotateY(180deg);background:#FFFDF6;border:1px solid var(--gold);color:#3A2418;font:italic 500 1rem/1.5 'Playfair Display',serif}
.pp-fd-flip .b::before{content:'';width:26px;height:2px;background:var(--gold);margin-bottom:10px}

/* ---- VALUES: gold medallions that spin in ---- */
.pp-fd-values{position:relative;background:radial-gradient(120% 90% at 50% 0%,#7E2512,#5A170A);padding:clamp(70px,9vw,110px) 20px;text-align:center}
.pp-fd-values h2{margin:10px 0 44px;font:700 clamp(2.2rem,4.6vw,3.4rem) 'Playfair Display',serif;color:#FFFDF6}
.pp-fd-meds{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,50px);perspective:1000px}
@media(max-width:760px){.pp-fd-meds{grid-template-columns:1fr;max-width:340px}}
.pp-fd-med{transform-style:preserve-3d}
.pp-fd-coin{position:relative;width:132px;height:132px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FFF1C2,#F2C14E 35%,#C9952A 70%,#8E5F12);box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 -6px 10px rgba(120,70,10,.5),inset 0 4px 8px rgba(255,250,220,.7)}
.pp-fd-coin::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1.5px dashed rgba(110,31,14,.45)}
.pp-fd-coin svg{width:48px;height:48px;color:#6E1F0E;filter:drop-shadow(0 1px 0 rgba(255,240,200,.6))}
.pp-fd-med h3{margin:0 0 8px;font:600 1.6rem 'Playfair Display',serif;color:var(--gold2)}
.pp-fd-med p{margin:0 auto;max-width:260px;font-size:15px;line-height:1.6;color:#F6D9B8}
/* ---- CTA ---- */
.pp-fd-cta{background:var(--paper);color:var(--ink);padding:clamp(70px,9vw,110px) 20px;text-align:center}
.pp-fd-cta h2{margin:0 0 10px;font:700 clamp(2.2rem,4.6vw,3.4rem) 'Playfair Display',serif;color:var(--maroon)}
.pp-fd-cta p{max-width:620px;margin:0 auto 26px;font:italic 500 1.2rem/1.6 'Playfair Display',serif;color:#5A4232}
.pp-fd-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;background:var(--maroon);color:#FFFDF6;font:700 15px 'DM Sans';letter-spacing:.06em;text-decoration:none;overflow:hidden;box-shadow:0 10px 24px rgba(110,31,14,.35)}
.pp-fd-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(242,193,78,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.pp-fd-btn:hover::after{transform:translateX(120%)}
.pp-fd-btn span{position:relative;z-index:1}
.pp-fd-ph{display:grid;place-items:center;font:600 3rem 'Playfair Display',serif;color:#F2C14E;background:radial-gradient(circle at 50% 35%,#8A4A2A,#3a1a10)}
@media (prefers-reduced-motion:reduce){.pp-fd-ring,.pp-fd-scroll i{animation:none}}
.pp-fd-title{cursor:pointer}
.pp-fd-intro{opacity:0}
.pp-fd-body.is-static .pp-fd-intro,.pp-fd-body.is-static .pp-fd-rv{opacity:1;transform:none}
.pp-fd-body.is-static .pp-fd-name{clip-path:none}.pp-fd-body.is-static .pic{clip-path:none}.pp-fd-body.is-static .pic>*{transform:none}
/* ===== end founders ===== */

/* ===== Ink-fill effect on all main buttons ===== */
.pp-co-btn-gold, .pp-co-btn-maroon, .pp-ty-btn, .pp-os-cta, .pp-fd-btn,
.pp-art-share a, .pp-art-share button, .pp-art-mshare a, .pp-art-mshare button {
  position: relative; overflow: hidden; isolation: isolate;
}
.pp-co-btn-gold::before, .pp-co-btn-maroon::before, .pp-ty-btn::before, .pp-os-cta::before, .pp-fd-btn::before,
.pp-art-share a::before, .pp-art-share button::before, .pp-art-mshare a::before, .pp-art-mshare button::before {
  content: ''; position: absolute; width: 250%; aspect-ratio: 1; border-radius: 50%;
  left: var(--fx-x, 50%); top: var(--fx-y, 50%);
  transform: translate(-50%, -50%) scale(0); transition: transform .5s ease;
  z-index: -1; pointer-events: none;
}
.pp-co-btn-gold.is-fx::before, .pp-co-btn-maroon.is-fx::before, .pp-ty-btn.is-fx::before, .pp-os-cta.is-fx::before, .pp-fd-btn.is-fx::before,
.pp-art-share a.is-fx::before, .pp-art-share button.is-fx::before, .pp-art-mshare a.is-fx::before, .pp-art-mshare button.is-fx::before {
  transform: translate(-50%, -50%) scale(1);
}
/* fill colours */
.pp-co-btn-gold::before, .pp-ty-btn.gold::before, .pp-os-cta::before, .pp-art-mshare a::before, .pp-art-mshare button::before { background: #FFD95A; }
.pp-co-btn-maroon::before, .pp-fd-btn::before { background: #A64A2E; }
.pp-ty-btn.paper::before, .pp-art-share a::before, .pp-art-share button::before { background: #F2C14E; }
/* disabled buttons don't fill */
.pp-co-btn:disabled::before { display: none; }
/* ===== end ink-fill ===== */

/* ===== Home hero — live kitchen ticket (pp-ht) ===== */
.pp-ht{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-ht-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0 0 14px;padding:7px 16px 7px 12px;border-radius:999px;
  background:rgba(20,10,5,.55);border:1px solid rgba(214,163,46,.65);box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.pp-ht-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#ff5a36;box-shadow:0 0 0 0 rgba(255,90,54,.7);animation:ppHtLive 1.6s infinite}
@keyframes ppHtLive{70%{box-shadow:0 0 0 8px rgba(255,90,54,0)}100%{box-shadow:0 0 0 0 rgba(255,90,54,0)}}
.pp-ht-flaps{display:inline-flex;flex-wrap:wrap;perspective:400px;font:800 clamp(11px,1.25vw,14px)/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#F2C14E;text-shadow:none}
.pp-ht-fword{display:inline-flex;white-space:nowrap}
.pp-ht-flap{display:inline-block;min-width:.66em;text-align:center;transform-origin:50% 50%}
.pp-ht-flap.sp{min-width:.5em}
.pp-ht-h1{perspective:700px}
.pp-ht-l1,.pp-ht-l2{display:block}
.pp-ht-word{display:inline-block;white-space:nowrap}
.pp-ht-ch{display:inline-block;transform-origin:50% 0}
.pp-ht-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);z-index:2}
.pp-ht-paw{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;fill:hsl(var(--pp-brand-maroon));pointer-events:none;z-index:3}
.pp-ht-bubble{position:absolute;left:18px;top:-6px;font-size:18px;pointer-events:none;z-index:3}
.pp-ht-wa-pulse{animation:ppHtWaPulse 1.4s ease-out 0.6s 1}
@keyframes ppHtWaPulse{0%{box-shadow:0 0 0 0 hsl(var(--pp-wa-green)/.6)}100%{box-shadow:0 0 0 14px hsl(var(--pp-wa-green)/0)}}
@media (max-width:640px){.pp-ht-pill{padding:6px 12px 6px 10px;gap:8px}.pp-ht-flaps{letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.pp-ht-dot{animation:none}}
/* ===== end hero ticket ===== */

/* ═══════════════════════════════════════════════════════════════════════
   PP-CTA — one shared shape for every primary call-to-action.
   Shape/size/shadow/motion live here; colour comes ONLY from a
   .pp-cta--{variant} class (sets the --cta-* tokens).
   Reference: home hero pill. Must stay at the END of globals.css.
   ═══════════════════════════════════════════════════════════════════════ */
.pp-cta {
  --cta-bg: hsl(var(--pp-mustard));
  --cta-fg: hsl(var(--pp-dark-brown));
  --cta-border: #F2C14E;
  --cta-ledge: #9C7418;
  --cta-fill: #F2C14E;
  --cta-soft: 0 8px 18px rgba(43,26,16,.22);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  height: 54px !important;
  min-height: 0 !important;
  min-width: 240px;
  padding: 0 32px !important;
  border: 1.5px solid var(--cta-border) !important;
  border-radius: 9999px !important;
  background: var(--cta-bg) !important;
  color: var(--cta-fg) !important;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 var(--cta-ledge), var(--cta-soft) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.pp-cta:hover,
.pp-cta:focus-visible {
  background: var(--cta-bg) !important;
  border-color: var(--cta-border) !important;
  color: var(--cta-fg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cta-ledge), 0 14px 26px rgba(43,26,16,.28) !important;
}
.pp-cta:focus-visible { outline: 3px solid #FFFDF6; outline-offset: 2px; }
.pp-cta:focus:not(:focus-visible):not(:hover) {
  transform: none !important;
  box-shadow: 0 4px 0 var(--cta-ledge), var(--cta-soft) !important;
}
.pp-cta:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cta-ledge) !important;
  transition-duration: .08s !important;
}
.pp-cta::before {
  content: '';
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  width: 250%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cta-fill) !important;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s ease;
  z-index: -1;
  pointer-events: none;
}
.pp-cta.is-fx::before { transform: translate(-50%, -50%) scale(1); }
.pp-cta .lucide-arrow-right { transition: transform .2s ease; }
.pp-cta:hover .lucide-arrow-right { transform: translateX(4px); }
.pp-cta:disabled,
.pp-cta[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.pp-cta:disabled::before { display: none; }
@media (max-width: 639px) {
  .pp-cta {
    height: 50px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    width: 100%;
    min-width: 0;
  }
}
.pp-cta-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.pp-cta-row--start { margin-inline: 0; }
.pp-cta-row--fill  { width: 100%; }
.pp-cta-row--fill .pp-cta { min-width: 0; }
.pp-cta-row .pp-cta { width: 100%; }
@media (max-width: 639px) {
  .pp-cta-row { grid-auto-flow: row; grid-auto-columns: auto; width: 100%; gap: 12px; }
}
.pp-cta--gold     { --cta-bg: hsl(var(--pp-mustard)); --cta-fg: hsl(var(--pp-dark-brown)); --cta-border: #F2C14E; --cta-ledge: #9C7418; --cta-fill: #F2C14E; }
.pp-cta--gold-lit { --cta-bg: #F2C14E; --cta-fg: #2B1A10; --cta-border: #2B1A10; --cta-ledge: #2B1A10; --cta-fill: #FFD95A; }
.pp-cta--wa       { --cta-bg: #25D366; --cta-fg: #FFFFFF; --cta-border: #1EBE5A; --cta-ledge: #128C4A; --cta-fill: #128C7E; }
.pp-cta--maroon   { --cta-bg: #7A2F1C; --cta-fg: #FFFDF6; --cta-border: #7A2F1C; --cta-ledge: #3E1409; --cta-fill: #A64A2E; }
.pp-cta--brick    { --cta-bg: #A64A2E; --cta-fg: #FFFDF6; --cta-border: #A64A2E; --cta-ledge: #5C2416; --cta-fill: #8C3B22; }
.pp-cta--paper    { --cta-bg: #FFFDF6; --cta-fg: #7A2F1C; --cta-border: #2B1A10; --cta-ledge: #4A1A0E; --cta-fill: #F2C14E; }
.pp-cta--track    { --cta-bg: hsl(var(--pp-track-brown)); --cta-fg: #FFFDF6; --cta-border: hsl(var(--pp-track-brown)); --cta-ledge: #24160A; --cta-fill: #6B4420; }
.pp-cta--compact  { padding: 0 14px !important; min-width: 0; }
.pp-cta--ghost    { --cta-bg: transparent; --cta-fg: #FFFDF6; --cta-border: rgba(214,163,46,.6); --cta-ledge: rgba(0,0,0,.25); --cta-fill: rgba(214,163,46,.22); }
@media (prefers-reduced-motion: reduce) {
  .pp-cta, .pp-cta::before { transition: none !important; }
  .pp-cta:hover, .pp-cta:focus-visible, .pp-cta:active { transform: none !important; }
}

/* Lenis + touch smoothness */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], label, summary { touch-action: manipulation; }

/* Allow vertical pan on the page root so iOS doesn't block Lenis touch events */
html, body { touch-action: pan-y; }

/* ── Performance: GPU layer hints for elements that animate frequently ───────
   Only applied during active animation via JS (useLenis promotes fixed/sticky).
   Static elements must NOT have permanent will-change — it wastes GPU memory. */

/* ── Performance: contain layout+style on heavy standalone sections ──────────
   This tells the browser each section is a self-contained layout root.
   Changes inside one section cannot affect layout outside it, so the browser
   can skip re-layout of the rest of the page when a section's content changes
   (e.g. reveal animation, image load). Safe because these sections have no
   absolutely-positioned children that escape their bounds.                   */
.pp-section-manifesto,
.pp-section-goal,
.pp-section-ingredients,
.pp-section-how,
.pp-section-trust {
  contain: layout style;
}

/* ── Performance: content-visibility removed — it causes a layout-recalc
   flash when the section enters the viewport, which manifests as a visible
   scroll stutter. The GPU savings are not worth the jank on mobile.        */
/* .pp-cta-band { content-visibility: auto; } — intentionally disabled */

/* ── Performance: remove will-change from static/non-animating elements ─────
   will-change creates a compositor layer even when nothing is moving.
   Keep it only on elements that are actively animating (header, page-transition
   curtains, preloader panels, marquees). The img-zoom, ingredient-img, card
   and bowl-img transitions are hover-only — the browser promotes the layer on
   hover automatically; a permanent will-change wastes GPU memory at rest.    */
.pp-img-zoom img { will-change: auto; }
.pp-ingredient-img { will-change: auto; }
.pp-card { will-change: auto; }
.pp-bowl-img { will-change: auto; }

/* ── How It Works safety net: until the desktop scroll animation is running
   (data-pp-how-ready set by useHowItWorks), desktop shows the stacked list. ── */
@media (min-width: 1024px) {
  .pp-section-how:not([data-pp-how-ready]) .pp-how-desktop { display: none !important; }
  .pp-section-how:not([data-pp-how-ready]) .pp-how-mobile  { display: block !important; }
}

/* ── Home hero headline: letters wait hidden until their drop-in starts (no flash of
   the full headline followed by a jump). Safety: if the script never runs, show them. ── */
.pp-ht:not(.pp-ht-go) .pp-ht-ch{opacity:0;animation:ppHtShowFallback 0s 4s forwards}
@keyframes ppHtShowFallback{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pp-ht .pp-ht-ch{opacity:1 !important;animation:none !important}}

/* RollText structural rules — CSS-driven roll */
.pp-roll { display: inline-flex; align-items: center; }
.pp-roll-letter {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15em;
  vertical-align: bottom;
}
.pp-roll-inner {
  display: block;
  /* will-change removed — creates a compositor layer for every nav letter
     permanently, wasting GPU memory. The browser promotes automatically
     during the CSS transition (hover) and demotes after. */
  transform: translate3d(0, 0, 0);
}
.pp-roll-row {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  white-space: pre;
}
@media (prefers-reduced-motion: reduce) {
  .pp-roll-inner { transition: none !important; transform: none !important; }
}

/* ============================================================
   Letter roll — CSS driven. Works without JavaScript.
   Nav colours still come from the .pp-navroll rules already
   present in this file. CTA rows inherit the button's colour.
   ============================================================ */

.pp-roll,
.pp-cta-roll-wrap {
  display: inline-flex;
  align-items: center;
}

.pp-roll-letter,
.pp-cta-roll-letter {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15em;
  vertical-align: bottom;
}

.pp-roll-inner,
.pp-cta-roll-inner {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.pp-roll-row,
.pp-cta-roll-row {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  white-space: pre;
}

/* CTA rows keep the button's own colour — motion only, no colour change. */
.pp-cta-roll-row--a,
.pp-cta-roll-row--b {
  color: inherit;
}

/* Hover / focus / tap roll */
[data-roll-trigger]:hover .pp-roll-inner,
[data-roll-trigger]:focus-visible .pp-roll-inner,
.pp-roll:hover .pp-roll-inner,
.pp-roll.pp-roll-auto .pp-roll-inner,
.pp-cta:hover .pp-cta-roll-inner,
.pp-cta:focus-visible .pp-cta-roll-inner,
.pp-cta.pp-cta-roll-auto .pp-cta-roll-inner {
  transform: translate3d(0, -50%, 0);
}

/* Reduced motion: no auto-replay, no transition. Text stays readable. */
@media (prefers-reduced-motion: reduce) {
  .pp-roll-inner,
  .pp-cta-roll-inner {
    transition: none;
  }
  .pp-roll.pp-roll-auto .pp-roll-inner,
  .pp-cta.pp-cta-roll-auto .pp-cta-roll-inner {
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================================
   Nav roll colour repair.
   `color: unset` on an inherited property means `inherit`, so the
   earlier .nav-link rule forced BOTH rows to #FFFFFF and the roll
   was invisible. These win on specificity and restore the two
   colours. Also adds :active so a tap rolls on touch devices.
   ============================================================ */

.nav-link.pp-navroll .pp-roll-a{color:#FFFDF6 !important;text-shadow:0 1px 2px rgba(60,20,5,.45) !important}
.nav-link.pp-navroll .pp-roll-b{color:#6E1F0E !important;text-shadow:0 1px 0 rgba(255,240,200,.35) !important}
.nav-link.pp-navroll.is-active .pp-roll-a{color:#6E1F0E !important;text-shadow:0 1px 0 rgba(255,240,200,.35) !important}
.nav-link.pp-navroll.is-active .pp-roll-b{color:#FFFDF6 !important;text-shadow:0 1px 2px rgba(60,20,5,.45) !important}

[data-roll-trigger]:active .pp-roll-inner,
.pp-roll:active .pp-roll-inner,
.pp-cta:active .pp-cta-roll-inner{transform:translate3d(0,-50%,0) !important}

/* ============================================================
   Roll wrapper fix.
   The old .pp-roll rule (line 4147) sets overflow:hidden and
   height:1.2em on the wrapper itself. That clips ALL children
   to one row height so the second row is never visible and the
   roll appears to do nothing. The wrapper must be overflow:visible
   so only each .pp-roll-letter clips its own two rows.
   ============================================================ */
.pp-roll {
  overflow: visible !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* CTA letter roll (safe version): React's own label stays in the button but is shrunk to 0,
   the animated letters are shown instead. See src/lib/anim/useCTARoll.ts */
.pp-cta [data-cta-roll-host][data-cta-roll-host], .pp-cta[data-cta-roll-host][data-cta-roll-host] { font-size: 0 !important; }
.pp-cta [data-cta-roll-host][data-cta-roll-host] > *, .pp-cta[data-cta-roll-host][data-cta-roll-host] > * { font-size: var(--pp-cta-fs, 16px) !important; }

/* ============================================================
   My Pantry member area CSS variables (--pm-*)
   APPEND ONLY — never remove or rename existing variables.
   ============================================================ */
:root {
  /* Palette */
  --pm-gold:          43 55% 48%;     /* #C49A2A warm gold accent */
  --pm-gold-lit:      43 70% 60%;     /* lighter gold for hover */
  --pm-ivory:         48 60% 97%;     /* #FDFAF3 warm ivory background */
  --pm-cream:         44 50% 94%;     /* #F5EDD8 card background */
  --pm-ink:           20 30% 15%;     /* #2E1F12 deep brown text */
  --pm-ink2:          20 20% 40%;     /* #7A6355 secondary text */
  --pm-muted:         20 15% 60%;     /* #A89080 muted text */
  --pm-line:          40 30% 85%;     /* #E8DECE hairline borders */
  --pm-card-shadow:   20 40% 10%;     /* shadow base */
  --pm-dark-overlay:  0 0% 0%;        /* for rgba overlays */
  --pm-white:         0 0% 100%;
  --pm-good:          142 50% 35%;    /* green for up-to-date */
  --pm-good-bg:       142 40% 93%;
  --pm-warn:          38 90% 45%;     /* amber for soon */
  --pm-warn-bg:       38 80% 93%;
  --pm-bad:           5 70% 45%;      /* red for overdue */
  --pm-bad-bg:        5 60% 93%;
  /* Tab bar */
  --pm-tab-h:         64px;           /* bottom tab bar height on mobile */
  --pm-sidebar-w:     220px;          /* left sidebar width on desktop */

  /* ── Noir Atelier design system (--na-*) ─────────────────────────────────── */
  /* Backgrounds */
  --na-bg:            #14100C;        /* deep espresso page background */
  --na-surface:       #1E1712;        /* raised card surface */
  --na-surface-2:     #2A2018;        /* elevated surface / hover */
  /* Gold palette */
  --na-gold:          #C69A48;        /* primary gold */
  --na-gold-light:    #E9C77F;        /* lighter gold / button top */
  --na-gold-pale:     #F3DFAE;        /* very pale gold / active icon */
  --na-gold-deep:     #8C6520;        /* deep gold / button bottom edge */
  /* Text */
  --na-text:          #F4ECDD;        /* primary text — passes 4.5:1 on --na-bg */
  --na-muted:         #BFA978;        /* muted text — passes 4.5:1 on --na-bg */
  /* Status */
  --na-coral:         #F0A48A;        /* overdue / warning */
  --na-mint:          #9FD8B4;        /* ok / healthy */
  /* Borders — expressed as HSL channels so components can do hsl(var(--na-border-gold) / .18) */
  --na-border-gold:   38 55% 69%;     /* #E2C27E gold border base */
  /* Overlay / glow helpers (HSL channels for hsl(var / opacity) usage) */
  --na-bg-hsl:        20 24% 7%;      /* #14100C as HSL channels */
  --na-surface-hsl:   22 22% 10%;     /* #1E1712 as HSL channels */
  --na-surface2-hsl:  24 20% 14%;     /* #2A2018 as HSL channels */
  --na-gold-hsl:      38 49% 53%;     /* #C69A48 as HSL channels */
  --na-black-hsl:     0 0% 0%;        /* pure black for shadows */
  --na-btn-dark:      22 30% 8%;      /* #1B140E — dark text on gold buttons */

  /* ── Grand Salon design system (--gs-*) ─────────────────────────────────── */
  /* Backgrounds */
  --gs-ivory:         #FBF6EC;        /* page background */
  --gs-card:          #FFFDF8;        /* card surface */
  --gs-line:          #E9DCC1;        /* hairline border */
  --gs-espresso:      #2B1D14;        /* dark feature surface */
  --gs-espresso-2:    #3A2819;        /* darker feature surface */
  /* Gold */
  --gs-gold:          #C69A48;        /* primary gold */
  --gs-gold-pale:     #F3DFAE;        /* pale gold */
  --gs-gold-deep:     #9C7428;        /* deep gold / button bottom edge */
  --gs-gold-text:     #7A5718;        /* gold text on ivory — passes 4.5:1 */
  /* Text */
  --gs-ink:           #2B1D14;        /* primary text on ivory */
  --gs-muted:         #6B5A4A;        /* muted text on ivory */
  /* Status */
  --gs-red:           #A33A2A;        /* overdue */
  --gs-amber-bg:      #FBE7D4;        /* soon background */
  --gs-amber-text:    #8A3B12;        /* soon text */
  --gs-green-bg:      #DDF1E4;        /* ok background */
  --gs-green-text:    #1E5B3A;        /* ok text */
  --gs-whatsapp-hsl:  142 70% 38%;    /* WhatsApp green — for icon/bg tints */
  /* HSL channels for opacity usage */
  --gs-gold-hsl:      38 49% 53%;     /* #C69A48 */
  --gs-ink-hsl:       22 35% 13%;     /* #2B1D14 */
  --gs-espresso-hsl:  22 35% 13%;     /* #2B1D14 */
  --gs-ivory-hsl:     40 67% 95%;     /* #FBF6EC */
  --gs-line-hsl:      38 38% 83%;     /* #E9DCC1 */
  /* Shadow helpers — HSL channels for hsl(var / opacity) usage */
  --gs-shadow-ink:    22 35% 13%;     /* espresso shadow base */
  --gs-btn-edge:      38 32% 73%;     /* #D9C9A8 — ivory button bottom edge */
}

/* ── A4: Grand Salon unified input style ──────────────────────────────────────
 * Scoped under .gs-root so the site's rust/orange styles never leak in.
 * Applies to: <input>, <select>, <textarea>, and the .gs-input utility class.
 * 16px font-size prevents iPhone auto-zoom on focus.
 * Gold focus ring (--gs-gold) at 2px offset.
 * Placeholder colour passes 4.5:1 on the ivory card background.
 * ─────────────────────────────────────────────────────────────────────────── */
.gs-root input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.gs-input-raw),
.gs-root select:not(.gs-input-raw),
.gs-root textarea:not(.gs-input-raw),
.gs-root .gs-input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: var(--gs-card) !important;
  color: var(--gs-ink) !important;
  border: 1px solid var(--gs-line) !important;
  border-radius: 14px !important;
  height: 52px;
  padding: 0 14px !important;
  font-size: 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  width: 100%;
  box-sizing: border-box;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.gs-root textarea:not(.gs-input-raw) {
  height: auto;
  padding: 14px !important;
  resize: vertical;
}
.gs-root input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.gs-input-raw):focus,
.gs-root select:not(.gs-input-raw):focus,
.gs-root textarea:not(.gs-input-raw):focus,
.gs-root .gs-input:focus {
  border-color: var(--gs-gold) !important;
  box-shadow: 0 0 0 2px hsl(var(--gs-gold-hsl) / .25) !important;
}
.gs-root input::-moz-placeholder, .gs-root textarea::-moz-placeholder {
  color: var(--gs-muted) !important;
  opacity: 1 !important;
}
.gs-root input::placeholder,
.gs-root textarea::placeholder {
  color: var(--gs-muted) !important;
  opacity: 1 !important;
}
/* Shadcn Input override inside .gs-root */
.gs-root .gs-input-wrap input,
.gs-root .gs-input-wrap [data-slot="input"] {
  background: var(--gs-card) !important;
  color: var(--gs-ink) !important;
  border: 1px solid var(--gs-line) !important;
  border-radius: 14px !important;
  height: 52px !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.gs-root .gs-input-wrap input:focus,
.gs-root .gs-input-wrap [data-slot="input"]:focus {
  border-color: var(--gs-gold) !important;
  box-shadow: 0 0 0 2px hsl(var(--gs-gold-hsl) / .25) !important;
}

/* GsButton spinner */
@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

/* Care profile toggle thumb shadow */
--gs-toggle-shadow: 0 1px 3px hsl(var(--gs-shadow-ink) / .4);

/* ── Part 4 additions (APPEND ONLY) ──────────────────────────────────────── */

/* 2.6 — Allergy note chip in checkout cart lines */
.pp-allergy-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gs-gold-text);          /* #7A5718 — passes 4.5:1 on amber-50 */
  background: hsl(var(--gs-gold-hsl) / .12);
  border: 1px solid hsl(var(--gs-gold-hsl) / .35);
  border-radius: 6px;
  padding: 4px 8px;
}
@keyframes gs-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.gs-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--gs-line-hsl) / .5) 25%,
    hsl(var(--gs-line-hsl) / .9) 50%,
    hsl(var(--gs-line-hsl) / .5) 75%
  );
  background-size: 200% 100%;
  animation: gs-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gs-shimmer { animation: none; background: hsl(var(--gs-line-hsl) / .5); }
}

/* 4.4 — Toasts always at the TOP, above the dock (z-index 300) */
[data-sonner-toaster] {
  --offset: 16px !important;
  top: calc(56px + 8px + env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  z-index: 300 !important;
}

/* 4.3 — Contrast: "MEALS LEFT" chip and muted placeholders must pass 4.5:1 */
.gs-root .gs-meals-left-chip {
  background: hsl(var(--gs-gold-hsl) / .18);
  color: var(--gs-gold-text); /* #7A5718 — passes 4.5:1 on ivory */
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid hsl(var(--gs-gold-hsl) / .35);
}

/* 4.5 — Long dog names: wrap gracefully in hero and chips */
.gs-root .gs-pet-name-hero {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.gs-root .gs-dog-chip {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .gs-root .gs-dog-chip {
    max-width: 120px;
    font-size: 12px;
  }
}

/* 4.1 — Tab transition: fade + slide (handled by motion/react in JS,
   but provide a CSS fallback for reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .gs-tab-content { transition: none !important; animation: none !important; }
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}
.placeholder\:text-\[hsl\(var\(--pp-type-light\)\)\]\/40::-moz-placeholder {
  color: hsl(var(--pp-type-light) / 0.4);
}
.placeholder\:text-\[hsl\(var\(--pp-type-light\)\)\]\/40::placeholder {
  color: hsl(var(--pp-type-light) / 0.4);
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --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));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.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\:scale-110:hover {
  --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));
}
.hover\:scale-\[1\.02\]:hover {
  --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));
}
.hover\:border-\[hsl\(var\(--pp-brass\)\)\]:hover {
  border-color: hsl(var(--pp-brass));
}
.hover\:border-destructive\/20:hover {
  border-color: hsl(var(--destructive) / 0.2);
}
.hover\:border-emerald-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-500\/30:hover {
  border-color: rgb(16 185 129 / 0.3);
}
.hover\:border-primary:hover {
  border-color: hsl(var(--primary));
}
.hover\:border-primary\/20:hover {
  border-color: hsl(var(--primary) / 0.2);
}
.hover\:border-primary\/30:hover {
  border-color: hsl(var(--primary) / 0.3);
}
.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}
.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: hsl(var(--primary) / 0.6);
}
.hover\:bg-\[\#20BA5A\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(32 186 90 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[hsl\(var\(--pp-brass\)\)\]:hover {
  background-color: hsl(var(--pp-brass));
}
.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}
.hover\:bg-card\/30:hover {
  background-color: hsl(var(--card) / 0.3);
}
.hover\:bg-card\/50:hover {
  background-color: hsl(var(--card) / 0.5);
}
.hover\:bg-destructive\/10:hover {
  background-color: hsl(var(--destructive) / 0.1);
}
.hover\:bg-destructive\/30:hover {
  background-color: hsl(var(--destructive) / 0.3);
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 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-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/30:hover {
  background-color: hsl(var(--muted) / 0.3);
}
.hover\:bg-muted\/40:hover {
  background-color: hsl(var(--muted) / 0.4);
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-primary-foreground\/20:hover {
  background-color: hsl(var(--primary-foreground) / 0.2);
}
.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}
.hover\:bg-primary\/20:hover {
  background-color: hsl(var(--primary) / 0.2);
}
.hover\:bg-primary\/5:hover {
  background-color: hsl(var(--primary) / 0.05);
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-primary\/\[0\.02\]:hover {
  background-color: hsl(var(--primary) / 0.02);
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}
.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}
.hover\:text-primary:hover {
  color: hsl(var(--primary));
}
.hover\:text-primary\/80:hover {
  color: hsl(var(--primary) / 0.8);
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-75:hover {
  opacity: 0.75;
}
.hover\:shadow-\[0_0_15px_hsl\(var\(--primary\)\/0\.5\)\]:hover {
  --tw-shadow: 0 0 15px hsl(var(--primary)/0.5);
  --tw-shadow-colored: 0 0 15px 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-\[0_6px_28px_hsl\(var\(--primary\)\/0\.5\)\]:hover {
  --tw-shadow: 0 6px 28px hsl(var(--primary)/0.5);
  --tw-shadow-colored: 0 6px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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-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-\[hsl\(var\(--pp-brass\)\)\]:focus {
  border-color: hsl(var(--pp-brass));
}
.focus\:border-transparent:focus {
  border-color: transparent;
}
.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}
.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-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-gray-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: hsl(var(--primary));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}
.active\:text-primary:active {
  color: hsl(var(--primary));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.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\:rotate-12 {
  --tw-rotate: 12deg;
  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-150 {
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
  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-\[2\.8\] {
  --tw-scale-x: 2.8;
  --tw-scale-y: 2.8;
  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-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.group:hover .group-hover\:bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}
.group:hover .group-hover\:text-primary {
  color: hsl(var(--primary));
}
.group\/idn:hover .group-hover\/idn\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}
.group:active .group-active\:scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:active .group-active\:border-primary\/70 {
  border-color: hsl(var(--primary) / 0.7);
}
.group:active .group-active\:bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(var(--background));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\: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);
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --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));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --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));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --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));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --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));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.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));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  background-color: hsl(var(--primary));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  background-color: hsl(var(--accent));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  background-color: hsl(var(--primary));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  background-color: hsl(var(--primary));
}
.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
  background-color: hsl(var(--accent));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(var(--secondary));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(var(--muted-foreground));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: hsl(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: hsl(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: hsl(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: hsl(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-\[hsl\(var\(--pp-deep-rust\)\)\][data-state="active"] {
  color: hsl(var(--pp-deep-rust));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --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);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
  .data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .data-\[state\=visible\]\:animate-in[data-state="visible"] {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }

  .data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
    animation-name: fadeIn;
  }

  .data-\[state\=visible\]\:fade-in[data-state="visible"] {
    animation-name: fadeIn;
  }
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(var(--accent));
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  border-color: hsl(var(--ring));
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: hsl(var(--ring) / 0.5);
}
@media (min-width: 640px) {

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

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

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

  .sm\:h-60 {
    height: 15rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

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

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

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:rounded-lg {
    border-radius: var(--radius);
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

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

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

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

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

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

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

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

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

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

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

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

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

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

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

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

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

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

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

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

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

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

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-14 {
    gap: 3.5rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

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

  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

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

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

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

  .md\:pb-40 {
    padding-bottom: 10rem;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .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-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .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;
  }
}
@media (min-width: 1024px) {

  .lg\:static {
    position: static;
  }

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

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

  .lg\:gap-16 {
    gap: 4rem;
  }

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

  .lg\:gap-20 {
    gap: 5rem;
  }

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

  .lg\:p-12 {
    padding: 3rem;
  }

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

  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

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

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

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

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}
@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

  .xl\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }

  .xl\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
@media (prefers-color-scheme: dark) {

  .dark\:border-destructive {
    border-color: hsl(var(--destructive));
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\*\]\:list-item>* {
  display: list-item;
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  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));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}
.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(var(--foreground));
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  color: hsl(var(--muted-foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --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));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
@media(hover:hover) {

  .\[\@media\(hover\:hover\)\]\:opacity-0 {
    opacity: 0;
  }

  .group\/chip:hover .\[\@media\(hover\:hover\)\]\:group-hover\/chip\:opacity-100 {
    opacity: 1;
  }
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}