/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */

/* 
  NOTE: This is a condensed representation. A full Tailwind output is very long.
  The key is the updated :root variables and specific component/base styles.
  The utility classes will automatically use these new theme values.
*/

@layer properties;
@layer theme, base, components, utilities;

@layer theme {
  :root, :host {
    /* Font Variables (Kept Inter and Lora as they are good choices) */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: 'Lora', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* NEW Color Palette - Reiki Redesign */
    --color-brand-primary-lightest: oklch(95.18% 0.032 311.89); /* #F3F0FB */
    --color-brand-primary-light: oklch(85.6% 0.072 310.57);    /* #D9D1F7 */
    --color-brand-primary: oklch(63.16% 0.135 307.08);       /* #A086D3 */
    --color-brand-primary-dark: oklch(50.63% 0.118 304.51);  /* #7960A9 */
    --color-brand-primary-darker: oklch(39.63% 0.101 301.6); /* #5C4882 */

    --color-brand-secondary: oklch(83.14% 0.081 179.03);      /* #A8D8D1 */
    --color-brand-secondary-dark: oklch(69.91% 0.076 178.5); /* #7FAAA2 */

    --color-neutral-50: oklch(99.2% 0.002 309.25);    /* #FDFCFE */
    --color-neutral-100: oklch(97.09% 0.009 309.53);  /* #F7F5FA */
    --color-neutral-200: oklch(94.09% 0.016 309.73);  /* #EFEBF3 */
    --color-neutral-300: oklch(89.39% 0.019 309.51);  /* #E0DCE7 */
    --color-neutral-400: oklch(80.2% 0.026 306.39);   /* #C5BFD0 */
    --color-neutral-500: oklch(71.72% 0.026 305.77);  /* #AAA3B3 */
    --color-neutral-600: oklch(60.9% 0.027 304.22);   /* #8C8596 */
    --color-neutral-700: oklch(40.49% 0.026 301.28);  /* #595260 - Text */
    --color-neutral-800: oklch(32.02% 0.024 300.39);  /* #423B4A */
    --color-neutral-900: oklch(25.02% 0.023 299.27);  /* #332C39 - Headings */
    
    --color-white: oklch(100% 0 0); /* #FFFFFF */
    --color-black: oklch(0% 0 0);   /* #000000 */

    /* Referencing original color names for compatibility with existing HTML classes,
       but they now point to the new palette. */
    --color-green-500: var(--color-brand-secondary);      /* Was oklch(72.3% 0.219 149.579) */
    --color-green-600: var(--color-brand-secondary-dark); /* Was oklch(62.7% 0.194 149.214) */
    --color-purple-600: var(--color-brand-primary);     /* Was oklch(55.8% 0.288 302.321) */
    --color-gray-200: var(--color-neutral-200);         /* Was oklch(92.8% 0.006 264.531) */
    --color-gray-600: var(--color-neutral-600);         /* Was oklch(44.6% 0.03 256.802) */
    --color-gray-800: var(--color-neutral-800);         /* Was oklch(27.8% 0.033 256.848) */

    /* Spacing, Radius, Text sizes - largely kept from original for structural consistency,
       but can be tweaked for a different feel if desired. */
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.75; /* Increased for better readability */
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --blur-md: 12px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr { height: 0; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small { font-size: 80%; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
  :-moz-focusring { outline: auto; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1;
  }
  /* ... (rest of the standard base styles from your original CSS) ... */
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }


  /* NEW Redesigned Base Styles */
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-neutral-50); /* Off-white */
    font-family: var(--font-serif); /* Lora for body */
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed); /* 1.75 for spacious feel */
    color: var(--color-neutral-700); /* Dark Grayish Purple for text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    & *::selection {
      background-color: color-mix(in oklab, var(--color-brand-primary) 30%, transparent);
      color: var(--color-neutral-900); /* Ensure text is readable on selection */
    }
    &::selection {
      background-color: color-mix(in oklab, var(--color-brand-primary) 30%, transparent);
      color: var(--color-neutral-900);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans); /* Inter for headings */
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900); /* Very Dark Grayish Purple for headings */
    line-height: var(--leading-tight); /* Tighter line height for headings */
  }

  h1 {
    font-size: var(--text-4xl);
    @media (width >= 48rem) { font-size: var(--text-5xl); }
    @media (width >= 64rem) { font-size: var(--text-6xl); }
  }
  h2 {
    font-size: var(--text-3xl);
    @media (width >= 48rem) { font-size: var(--text-4xl); }
  }
  h3 {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    @media (width >= 48rem) { font-size: var(--text-2xl); } /* md:text-2xl already, can adjust if needed */
  }

  p {
    margin-bottom: calc(var(--spacing) * 6); /* Increased default bottom margin for paragraphs */
  }

  a:not(.btn) { /* Ensure .btn class is excluded */
    color: var(--color-brand-primary);
    text-decoration: none; /* Remove underline by default */
    font-weight: var(--font-weight-medium);
    transition: color var(--default-transition-duration) var(--default-transition-timing-function);
    
    &:hover {
      @media (hover: hover) {
        color: var(--color-brand-primary-dark);
        text-decoration: underline; /* Add underline on hover for clarity */
      }
    }
  }

  /* Basic form styling - will be enhanced by @tailwindcss/forms */
  [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
    border-color: var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding-top: 0.65rem; /* Slightly more padding */
    padding-bottom: 0.65rem;
    &:focus {
      border-color: var(--color-brand-primary);
      --tw-ring-color: var(--color-brand-primary);
      box-shadow: 0 0 0 1px var(--color-brand-primary);
    }
  }
  input::placeholder,textarea::placeholder {
    color: var(--color-neutral-500);
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(var(--color-neutral-500))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
  [type='checkbox'],[type='radio'] {
    color: var(--color-brand-primary);
    border-color: var(--color-neutral-400);
    border-radius: 0.25rem; /* Softer checkbox */
    &:focus {
        --tw-ring-color: var(--color-brand-primary);
         --tw-ring-offset-color: var(--color-white); /* Ensure offset is visible */
    }
  }
   [type='radio'] {
    border-radius: 100%;
  }
}

@layer components {
  .container {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-6xl); /* e.g., 72rem */
    padding-inline: calc(var(--spacing) * 4); /* 1rem */
    @media (width >= 40rem) { /* sm */
      padding-inline: calc(var(--spacing) * 6); /* 1.5rem */
    }
    @media (width >= 64rem) { /* lg */
      padding-inline: calc(var(--spacing) * 8); /* 2rem */
    }
  }

  .section-padding {
    padding-block: calc(var(--spacing) * 20); /* Increased padding */
    @media (width >= 48rem) { /* md */
      padding-block: calc(var(--spacing) * 28);
    }
  }
  .section-padding-sm {
    padding-block: calc(var(--spacing) * 14);
    @media (width >= 48rem) { /* md */
      padding-block: calc(var(--spacing) * 20);
    }
  }

  .btn {
    display: inline-flex; /* Use inline-flex for better icon alignment */
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg); /* 0.5rem */
    padding-inline: calc(var(--spacing) * 7); /* 1.75rem */
    padding-block: calc(var(--spacing) * 3.5); /* 0.875rem */
    font-size: var(--text-base);
    font-family: var(--font-sans);
    line-height: var(--text-base--line-height);
    --tw-font-weight: var(--font-weight-semibold); /* Slightly bolder buttons */
    font-weight: var(--font-weight-semibold);
    --tw-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-brand-primary) 25%, transparent); /* Softer shadow based on primary */
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms; /* Faster transition */
    --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 6px 15px -3px color-mix(in oklab, var(--color-brand-primary) 30%, transparent);
        transform: translateY(-1px); /* Subtle lift */
      }
    }
    &:focus-visible { /* Use focus-visible for better accessibility */
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, var(--color-brand-primary));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       --tw-ring-offset-width: 2px;
    }
  }

  .btn-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-white);
    border: 2px solid var(--color-brand-primary); /* Add border for consistency */
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-brand-primary-dark);
        border-color: var(--color-brand-primary-dark);
      }
    }
    &:focus-visible { --tw-ring-color: var(--color-brand-primary-dark); }
  }

  .btn-secondary {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-900); /* Darker text for better contrast on light teal */
    border: 2px solid var(--color-brand-secondary);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-brand-secondary-dark);
        border-color: var(--color-brand-secondary-dark);
        color: var(--color-white);
      }
    }
     &:focus-visible { --tw-ring-color: var(--color-brand-secondary-dark); }
  }

  .btn-outline {
    border-width: 2px;
    border-color: var(--color-brand-primary);
    background-color: transparent;
    color: var(--color-brand-primary);
    --tw-shadow: none; /* No shadow for outline buttons by default */
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, var(--color-brand-primary) 10%, transparent);
        color: var(--color-brand-primary-dark);
        border-color: var(--color-brand-primary-dark);
         --tw-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-brand-primary) 15%, transparent); /* Slight shadow on hover */
      }
    }
    &:focus-visible { --tw-ring-color: var(--color-brand-primary); }
  }
  
  .btn-outline-white {
    border-width: 2px;
    border-color: var(--color-white);
    background-color: transparent;
    color: var(--color-white);
    --tw-shadow: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
        color: var(--color-brand-primary-dark); /* Text becomes dark on white bg */
         --tw-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
    &:focus-visible { --tw-ring-color: var(--color-white); }
  }

  .card {
    border-radius: var(--radius-xl); /* 0.75rem */
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6); /* 1.5rem */
    --tw-shadow: 0 4px 12px -2px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(0,0,0,0.03); /* Softer, more subtle shadow */
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: box-shadow, transform; /* Add transform */
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    --tw-duration: 250ms; /* Slightly longer for card hover */
    
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 25px -5px rgba(92, 72, 130, 0.1), 0 5px 10px -3px rgba(92, 72, 130, 0.07); /* Use a color from palette for shadow tint */
        transform: translateY(-3px); /* Lift effect */
      }
    }
    @media (width >= 48rem) { /* md */
      padding: calc(var(--spacing) * 8); /* 2rem */
    }
  }
}

/* 
  @layer utilities will contain all the standard Tailwind utility classes.
  These classes will now use the new theme variables defined in @layer theme.
  For example, a class like `bg-brand-primary` in your HTML will now render
  with the new lavender color (--color-brand-primary).
  The actual definitions of these utility classes are standard and very lengthy,
  so they are omitted here for brevity but would be part of the full Tailwind output.
*/
@layer utilities {
  /* All Tailwind utility classes would be here, generated based on the config */
  /* This section is kept from the original user-provided CSS to ensure all utilities are available */
  /* ... (The very long list of utility classes from your original CSS) ... */
  /* For brevity, I'm not repeating the entire utility section. 
     Imagine the full utility section from your original CSS is here. 
     It will correctly use the new theme variables.
  */
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .relative { position: relative; }
    /* ... and so on for ALL utility classes from the original provided CSS ... */
    /* The crucial part is that these utilities will now use the new CSS variables defined in @layer theme */

  /* PASTE THE ENTIRE @layer utilities from your original CSS file here. */
  /* It's too long to include in this response, but it's essential. */
  /* The following is a highly abbreviated sample: */
    .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .top-0 { top: calc(var(--spacing) * 0); } .top-full { top: 100%; } .right-5 { right: calc(var(--spacing) * 5); } .right-6 { right: calc(var(--spacing) * 6); } .bottom-5 { bottom: calc(var(--spacing) * 5); } .bottom-6 { bottom: calc(var(--spacing) * 6); } .left-0 { left: calc(var(--spacing) * 0); } .z-10 { z-index: 10; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .mx-auto { margin-inline: auto; } 
    /* ... THIS MUST BE THE FULL UTILITIES SECTION FROM YOUR ORIGINAL CSS ... */
    /* The original CSS provided in the prompt has the full @layer utilities. That should be used here. */
    /* I will copy it from the prompt to make this complete. */

    .prose {
        color: var(--color-neutral-700); /* Updated prose body color */
        max-width: none;
    }
    .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25rem;
        line-height: var(--leading-relaxed); /* Use new relaxed line height */
    }
    .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-600); /* Updated lead color */
        font-size: 1.25em;
        line-height: 1.6;
        margin-top: 1.2em;
        margin-bottom: 1.2em;
    }
    .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-brand-primary); /* Updated link color */
        text-decoration: none;
        font-weight: 500;
    }
    .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
        color: var(--color-brand-primary-dark); /* Updated link hover color */
    }
    .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-800); /* Updated strong color */
        font-weight: 600;
    }
    .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        list-style-type: decimal;
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
    }
    .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        list-style-type: disc;
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
    }
    .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
        font-weight: 400;
        color: var(--color-neutral-500); /* Updated counter color */
    }
    .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
        color: var(--color-neutral-400); /* Updated bullet color */
    }
    .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        border-color: var(--color-neutral-200); /* Updated HR color */
        border-top-width: 1px; /* Ensure it's 1px */
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        font-weight: 500;
        font-style: italic;
        color: var(--color-neutral-700); /* Updated quote text color */
        border-inline-start-width: 0.25rem;
        border-inline-start-color: var(--color-brand-primary); /* Updated quote border color */
        quotes: "\201C""\201D""\2018""\2019";
        margin-top: 1.6em;
        margin-bottom: 1.6em;
        padding-inline-start: 1em;
    }
    .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-900); /* Updated heading color */
        font-weight: 800;
        font-size: 2.25rem;
        margin-top: 0;
        margin-bottom: 0.8888889em;
        line-height: 1.1;
    }
    .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) strong:not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        font-weight: 900;
        color: inherit;
    }
    .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-900);
        font-weight: 700;
        font-size: 1.875rem;
        margin-top: 2em;
        margin-bottom: 1em;
        line-height: 1.2; /* Adjusted for better rhythm */
    }
    .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-900);
        font-weight: 600;
        font-size: 1.5rem;
        margin-top: 1.6em;
        margin-bottom: 0.6em;
        line-height: 1.375;
    }
    .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-900);
        font-weight: 600;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        line-height: 1.5;
    }
    .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-800); /* Updated code text color */
        font-weight: 600;
        font-size: 0.875em;
        background-color: var(--color-neutral-100); /* Updated code background */
        padding: 0.125rem 0.25rem;
        border-radius: 0.25rem;
    }
     .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: none; } /* Removed backticks for cleaner look */
     .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: none; }
    .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-800); /* Updated pre text color */
        background-color: var(--color-neutral-100); /* Updated pre background */
        overflow-x: auto;
        font-weight: 400;
        font-size: 0.875em;
        line-height: 1.7142857;
        margin-top: 1.7142857em;
        margin-bottom: 1.7142857em;
        border-radius: var(--radius-md); /* Use theme radius */
        padding: 1em; /* Consistent padding */
    }
    .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        background-color: transparent;
        border-width: 0;
        border-radius: 0;
        padding: 0;
        font-weight: inherit;
        color: inherit;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
    }
    .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        color: var(--color-neutral-900); /* Updated table head color */
        border-bottom-color: var(--color-neutral-300); /* Updated border */
    }
    .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        border-bottom-color: var(--color-neutral-200); /* Updated border */
    }
    .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        font-family: var(--font-sans); /* Ensuring Inter from theme */
        color: var(--color-neutral-900);
        font-weight: 700;
    }
    /* ... (rest of the prose definitions if any, ensuring colors are mapped) ... */
    
    /* The rest of the .prose class and other utility classes from the original provided CSS: */
    /* For example: */
    .mt-1 { margin-top: calc(var(--spacing) * 1); }
    /* ... All other utilities from the original CSS file... */
    /* ... This section is critical for Tailwind to function correctly. */
    /* You must include the full @layer utilities from your original CSS here */
    /* I will copy the @layer utilities from the prompt below: */

    /* --- START OF COPIED @layer utilities FROM PROMPT --- */
      .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-full {
    top: 100%;
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  /* .container utility is defined in @layer components now */
  .mx-auto {
    margin-inline: auto;
  }
  /* .prose utility is defined above with new theme variables */
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-3\.5 {
    margin-right: calc(var(--spacing) * 3.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-auto {
    height: auto;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
  }
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  }
  .space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
  }
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  }
  .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }
  .space-x-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
  }
  .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
  }
  .space-x-7 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(var(--spacing) * 7) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-x-reverse)));
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: 9999px;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-brand-primary-dark {
    border-color: var(--color-brand-primary-dark);
  }
  .border-brand-primary-light {
    border-color: var(--color-brand-primary-light);
  }
  .border-brand-secondary-dark {
    border-color: var(--color-brand-secondary-dark);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200); /* Will map to new neutral-200 */
  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .border-neutral-700 {
    border-color: var(--color-neutral-700);
  }
  .border-transparent {
    border-color: transparent;
  }
  .bg-\[\#25D366\] { /* WhatsApp Green - specific color, keep as is */
    background-color: #25D366;
  }
  .bg-brand-primary {
    background-color: var(--color-brand-primary);
  }
  .bg-brand-primary-lightest {
    background-color: var(--color-brand-primary-lightest);
  }
  .bg-brand-secondary {
    background-color: var(--color-brand-secondary);
  }
  .bg-brand-secondary\/20 {
    background-color: color-mix(in oklab, var(--color-brand-secondary) 20%, transparent);
  }
  .bg-green-500 {
    background-color: var(--color-green-500); /* Will map to new brand-secondary */
  }
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/80 {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  .bg-white\/90 {
    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
  .object-cover {
    object-fit: cover;
  }
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .\!px-6 {
    padding-inline: calc(var(--spacing) * 6) !important;
  }
  .\!px-10 {
    padding-inline: calc(var(--spacing) * 10) !important;
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .\!py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5) !important;
  }
  .\!py-4 {
    padding-block: calc(var(--spacing) * 4) !important;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .\!text-3xl {
    font-size: var(--text-3xl) !important;
    line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
  }
  .\!text-4xl {
    font-size: var(--text-4xl) !important;
    line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
  }
  .\!text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .text-brand-primary {
    color: var(--color-brand-primary);
  }
  .text-brand-primary-dark {
    color: var(--color-brand-primary-dark);
  }
  .text-brand-primary-darker {
    color: var(--color-brand-primary-darker);
  }
  .text-brand-primary\/40 {
    color: color-mix(in oklab, var(--color-brand-primary) 40%, transparent);
  }
  .text-brand-secondary-dark {
    color: var(--color-brand-secondary-dark);
  }
  .text-brand-secondary-dark\/50 {
    color: color-mix(in oklab, var(--color-brand-secondary-dark) 50%, transparent);
  }
  .text-gray-600 {
    color: var(--color-gray-600); /* Will map to new neutral-600 */
  }
  .text-gray-800 {
    color: var(--color-gray-800); /* Will map to new neutral-800 */
  }
  .text-neutral-300 {
    color: var(--color-neutral-300);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .text-neutral-800 {
    color: var(--color-neutral-800);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .text-purple-600 {
    color: var(--color-purple-600); /* Will map to new brand-primary */
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-80 {
    opacity: 0.8; /* Corrected to decimal */
  }
  .opacity-90 {
    opacity: 0.9; /* Corrected to decimal */
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lifted { /* This is defined in tailwind.config.js and will use the new theme */
    --tw-shadow: 0 10px 25px -3px var(--tw-shadow-color, rgba(92, 72, 130, 0.1)), 0 4px 6px -2px var(--tw-shadow-color, rgba(92, 72, 130, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft { /* This is defined in tailwind.config.js and will use the new theme */
    --tw-shadow: 0 3px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, 0.06)), 0 8px 18px -2px var(--tw-shadow-color, rgba(0, 0, 0, 0.03));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .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-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-gentle { /* This is defined in tailwind.config.js */
    --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .group-hover\:translate-x-1:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
  }
  .group-hover\:bg-brand-primary\/20:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
      }
  }
  .group-hover\:text-brand-primary-dark:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-brand-primary-dark);
      }
  }
  .group-hover\:text-brand-primary-light:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-brand-primary-light);
      }
  }
  .group-hover\:text-brand-primary\/60:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: color-mix(in oklab, var(--color-brand-primary) 60%, transparent);
      }
  }
  .group-hover\:text-brand-secondary:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-brand-secondary);
      }
  }
  .group-hover\:underline:is(:where(.group):hover *) {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
  }
  .selection\:bg-brand-primary\/20 *::selection {
      background-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
  }
  .selection\:bg-brand-primary\/20::selection {
      background-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
  }
  .hover\:scale-105:hover {
      @media (hover: hover) {
        --tw-scale-x: 1.05; /* Corrected to decimal */
        --tw-scale-y: 1.05; /* Corrected to decimal */
        transform: scale(var(--tw-scale-x), var(--tw-scale-y)); /* Using transform for scale */
      }
  }
  .hover\:border-brand-primary\/70:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, var(--color-brand-primary) 70%, transparent);
      }
  }
  .hover\:bg-\[\#1DAE54\]:hover { /* Specific WhatsApp hover, keep as is */
      @media (hover: hover) {
        background-color: #1DAE54;
      }
  }
  .hover\:bg-brand-primary-dark:hover {
      @media (hover: hover) {
        background-color: var(--color-brand-primary-dark);
      }
  }
  .hover\:bg-brand-primary\/10:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, var(--color-brand-primary) 10%, transparent);
      }
  }
  .hover\:bg-brand-secondary-dark\/10:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, var(--color-brand-secondary-dark) 10%, transparent);
      }
  }
  .hover\:bg-green-600:hover {
      @media (hover: hover) {
        background-color: var(--color-green-600); /* Will map to new brand-secondary-dark */
      }
  }
  .hover\:text-brand-primary:hover {
      @media (hover: hover) {
        color: var(--color-brand-primary);
      }
  }
  .hover\:text-brand-primary-dark:hover {
      @media (hover: hover) {
        color: var(--color-brand-primary-dark);
      }
  }
  .hover\:text-brand-primary-light:hover {
      @media (hover: hover) {
        color: var(--color-brand-primary-light);
      }
  }
  .hover\:underline:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
  }
  .hover\:shadow-lg:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
  }
  .hover\:shadow-lifted:hover { /* Will use new theme shadow */
      @media (hover: hover) {
        --tw-shadow: 0 10px 25px -3px var(--tw-shadow-color, rgba(92, 72, 130, 0.1)), 0 4px 6px -2px var(--tw-shadow-color, rgba(92, 72, 130, 0.05));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
  }
  .focus\:ring-2:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-brand-primary:focus {
      --tw-ring-color: var(--color-brand-primary);
  }
  .focus\:outline-none:focus {
      outline: 2px solid transparent; /* Modern approach */
      outline-offset: 2px;
  }
  @media (width >= 40rem) { /* sm */
    .sm\:h-12 { height: calc(var(--spacing) * 12); }
    .sm\:w-auto { width: auto; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:flex-row { flex-direction: row; }
    .sm\:gap-6 { gap: calc(var(--spacing) * 6); }
    .sm\:\!text-5xl { font-size: var(--text-5xl) !important; line-height: var(--tw-leading, var(--text-5xl--line-height)) !important; }
    .sm\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
  }
  @media (width >= 48rem) { /* md */
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:\!text-4xl { font-size: var(--text-4xl) !important; line-height: var(--tw-leading, var(--text-4xl--line-height)) !important; }
    .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
    .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
    .md\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
  }
  @media (width >= 64rem) { /* lg */
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:mx-0 { margin-inline: calc(var(--spacing) * 0); }
    .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\:gap-12 { gap: calc(var(--spacing) * 12); }
    .lg\:gap-16 { gap: calc(var(--spacing) * 16); }
    .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
        margin-left: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
    }
    .lg\:text-left { text-align: left; }
    .lg\:\!text-6xl { font-size: var(--text-6xl) !important; line-height: var(--tw-leading, var(--text-6xl--line-height)) !important; }
    .lg\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
  }
    /* --- END OF COPIED @layer utilities FROM PROMPT --- */
}

/* The @property definitions ensure CSS custom properties are properly handled by browsers. Keep these as they are. */
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
/* ... (all other @property definitions from original CSS) ... */
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }

@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      /* ... (all other fallback properties from original CSS) ... */
      --tw-scale-z: 1;
    }
  }
}