/* ---------------------------------------------
       MASTER BRAND TOKENS – THICK CLINICAL
    --------------------------------------------- */
    :root {
      /* Master brand & /* Sub-brand: THICK Sports Performance Medicine */
      --tc-bg: #0c0d0f;          /* Graphite Black */
      --tc-surface: #1a1d22;     /* Clinical Slate */
      --tc-dppc: #2F3A44;     /* Deep blue gray */
      --tc-surface-soft: #14161a;
      --tc-bone: #eceae7;        /* Polished Bone */
      --tc-bone-soft: #d8d5cf;
      --tc-gold: #d5c7a3;        /* Champagne Gold */
      --tc-gold-highlight: #E2D6B6;        /* Highlight Gold */
      --tc-gold-darker: #62532C;        /* Darker Gold */
      --tc-gold-dark: #b39157;        /* Dark Gold (TONED Cream) */
      --tc-gold-border: #B4A078;        /* Border Gold */
      --tc-border-subtle: #262a32;
      --spm-cyan: #20e0ff;
      --spm-red: #ef4940;
      --spm-red-gold: rgba(213,163,163,1.00);

      /* Sub-brand: TONED */
      --toned-bg: #f6f3f0;
      --toned-ink: #3d3b45;
      --toned-rose-gold: #D5B4A3;
      --toned-rose: #cfa7b8;
      --toned-gold: #d39ca7;

      /* Sub-brand: TONED (Purple) */
      --toned-purple: #4B2E5A;
      --toned-purple-surface: #5C3B6E;
      --toned-purple-shadow: #2A1B33;
      --toned-bone: #ECEAE7;
      --toned-stone: #DDD7CC;
		
		
	  /*Clinic.php Colors*/	
  --clinic-bg: rgb(26, 29, 34);
  --clinic-surface: rgb(32, 36, 42);
  --clinic-text: rgb(236, 234, 231);
  --clinic-text-soft: rgb(200, 195, 190);
  --clinic-gold: rgb(213, 199, 163);
  --clinic-gold-hover: rgb(226, 214, 182);
  --clinic-shadow-light: rgba(236, 234, 231, 0.08);
  --clinic-shadow-dark: rgba(0, 0, 0, 0.8);
  --clinic-shadow-inset-light: rgba(236, 234, 231, 0.05);
  --clinic-shadow-inset-dark: rgba(0, 0, 0, 0.55);

  /* Global type scale: reduce all text ~10% */
  --tc-font-scale: 0.9;

  /* Shared effect tokens */
  --engrave: inset 0 0 1px 2px rgba(var(--light), calc(0.5 * var(--light-mod)));
    }

/* =========================
   THICK Clinical - Combined Theme System
   ========================= */

/* =========================
   Base Theme Variables
   ========================= */
.theme {
  --color-active: rgb(213, 199, 163);
  --color-active-hover: rgb(226, 214, 182);
  --color-active-pressed: rgb(98, 83, 44);
}

/* =========================
   Light Theme (Foundations)
   ========================= */
.theme.theme-light,
.theme.theme_color_tc.theme-light {
  --tc-bone: #eceae7;
  --color-bg-default: rgb(236, 234, 231);
  --light: 255, 255, 255;
  --shadow: 180, 175, 170;
  --light-mod: 0.3;
  --shadow-mod: 0.15;
  
  /* Light theme specific colors */
  --button-text-color: #616161;
  --button-clicked-text: rgb(80, 75, 70);
  --card-border: rgb(180, 175, 170);
  --card-border-initial: rgb(160, 155, 150);
  --card-text-color: rgb(80, 75, 70);
  --card-text-initial: rgb(70, 65, 60);
  --card-shadow-inset-light: 0.2;
  --card-shadow-inset-shadow: 0.5;
  --button-shadow-light: 0.8;
  --button-shadow-shadow: 0.3;
  --wave-light-mod: 1.2;
  --wave-shadow-mod: 0.6;
  --wave-shadow-mod-alt: 0.5;
  --wave-shadow-mod-alt2: 0.4;
}

/* =========================
   Dark Theme (Index)
   ========================= */
.theme.theme-dark,
.theme.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) {
  --color-bg-default: rgb(26, 29, 34);
  --light: 236, 234, 231;
  --shadow: 0, 0, 0;
  --light-mod: 0.08;
  --shadow-mod: 2;
  
  /* Dark theme specific colors */
  --button-text-color: var(--color-active-hover);
  --button-clicked-text: rgb(26, 29, 34);
  --card-border: rgb(50, 42, 30);
  --card-border-initial: rgb(55, 42, 38);
  --card-text-color: rgb(50, 42, 30);
  --card-text-initial: rgb(55, 42, 38);
  --card-shadow-inset-light: 0.05;
  --card-shadow-inset-shadow: 0.55;
  --button-shadow-light: 0.05;
  --button-shadow-shadow: 0.6;
  --wave-light-mod: 1;
  --wave-shadow-mod: 0.4;
  --wave-shadow-mod-alt: 0.3;
  --wave-shadow-mod-alt2: 0.2;
	color: aliceblue;
}

/* =========================
   Cream Theme (TONED)
   ========================= */
.theme.theme-cream,
.theme.theme_color_tc.theme-cream {
  --color-active: #b39157;
  --color-active-hover: #c6a56c;
  --color-active-pressed: #7a5d33;

  --tc-bone: #f7f4ed;
  --tc-bone-warm: #e7dfd2;
  --color-bg-default: #f7f4ed;
  --light: 255, 255, 255;
  --shadow: 180, 175, 170;
  --light-mod: 0.35;
  --shadow-mod: 0.18;

  /* Cream theme specific colors */
  --button-text-color: #1f1f1f;
  --button-clicked-text: #1f1f1f;
  --card-border: rgba(179,145,87,0.35);
  --card-border-initial: rgba(179,145,87,0.55);
  --card-text-color: #1f1f1f;
  --card-text-initial: #1f1f1f;
  --card-shadow-inset-light: 0.25;
  --card-shadow-inset-shadow: 0.45;
  --button-shadow-light: 0.7;
  --button-shadow-shadow: 0.25;
  --wave-light-mod: 1.15;
  --wave-shadow-mod: 0.55;
  --wave-shadow-mod-alt: 0.45;
  --wave-shadow-mod-alt2: 0.35;
}

/* =========================
   DPPC Theme (DPPC)
   ========================= */
.theme.theme-dppc,
.theme.theme_color_tc.theme-dppc {
  /* Keep gold accents (active/hover) */
  --color-active: #b39157;
  --color-active-hover: #c6a56c;
  --color-active-pressed: #7a5d33;

  /* Soft clinical white */
  --tc-bone: #F5F6F4;
  --tc-bone-warm: #E7E9E4;
  --color-bg-default: #F5F6F4;
  --light: 255, 255, 255;
  --shadow: 180, 175, 170;
  --light-mod: 0.35;
  --shadow-mod: 0.18;

  /* DPPC ink */
  --button-text-color: #1E1F21;
  --button-clicked-text: #1E1F21;
  --card-border: rgba(179,145,87,0.35);
  --card-border-initial: rgba(179,145,87,0.55);
  --card-text-color: #1E1F21;
  --card-text-initial: #1E1F21;
  --card-shadow-inset-light: 0.25;
  --card-shadow-inset-shadow: 0.45;
  --button-shadow-light: 0.7;
  --button-shadow-shadow: 0.25;
  --wave-light-mod: 1.15;
  --wave-shadow-mod: 0.55;
  --wave-shadow-mod-alt: 0.45;
  --wave-shadow-mod-alt2: 0.35;
}

/* =========================
   TONED Purple Theme (TONED)
   ========================= */
.theme.theme-toned,
.theme.theme_color_tc.theme-toned {
  --color-active: #D5C7A3;
  --color-active-hover: #E2D6B6;
  --color-active-pressed: #62532C;

  --color-bg-default: #4B2E5A;
  --tc-bone: #ECEAE7;
  --tc-bone-soft: rgba(236,234,231,0.78);

  --button-text-color: #ECEAE7;
  --button-clicked-text: #2A1B33;

  --card-border: rgba(213,199,163,0.28);
  --card-border-initial: rgba(213,199,163,0.45);
  --card-text-color: #ECEAE7;
  --card-text-initial: #ECEAE7;

  /* Neumorphic shadow tuning (dark-ish) */
  --light: 236, 234, 231;
  --shadow: 0, 0, 0;
  --light-mod: 0.08;
  --shadow-mod: 2;
  --card-shadow-inset-light: 0.05;
  --card-shadow-inset-shadow: 0.55;
  --button-shadow-light: 0.06;
  --button-shadow-shadow: 0.65;
  --wave-light-mod: 1;
  --wave-shadow-mod: 0.4;
  --wave-shadow-mod-alt: 0.3;
  --wave-shadow-mod-alt2: 0.2;
}

/* =========================
   Base Styles
   ========================= */
html, body { 
  height: 100%; 
  min-height: 100vh;
}

body {
  margin: 0;
  background:
    linear-gradient(
      120deg,
      rgba(var(--shadow), calc(0 * var(--shadow-mod))) 30%,
      rgba(var(--shadow), calc(0.2 * var(--shadow-mod)))
    ),
    linear-gradient(var(--color-bg-default), var(--color-bg-default));
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  /* Make font scaling apply to ALL inherited text */
  font-size: calc(1rem * var(--tc-font-scale));
  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================================
   Body copy font: Fiona Regular (exclude headings)
   Applies to paragraphs, lists, and other body text.
   ========================================= */
:where(p, ul, ol, li, dl, dt, dd, blockquote, figcaption) {
  font-family: "Antic Didone", serif;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 0.1em;
	line-height: 150%;
}

/* Keep native heading sizing (unscaled) */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; letter-spacing: 1px;}
h3 { font-size: 1.17rem; letter-spacing: 1px; }
h4 { font-size: 1rem; letter-spacing: 1px; }
h5 { font-size: 0.83rem; letter-spacing: 1px; }
h6 { font-size: 0.67rem; letter-spacing: 1px; }

/* =========================================
   Heading fonts (secondary): Miller Banner
   Apply to h2 and below (leave h1 alone).
   ========================================= */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: "miller-banner", serif;
  font-weight: 400;
  font-style: normal;
}
/* =========================================
   Links, no style
   ========================================= */
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

/* =========================================
   Font utility classes (Miller Banner families)
   Note: these assume the fonts are loaded elsewhere (e.g. webfont service).
   ========================================= */
.font-miller-banner { font-family: "miller-banner", serif; font-weight: 400; font-style: normal; }
.font-miller-banner-italic { font-family: "miller-banner", serif; font-weight: 400; font-style: italic; }
.font-miller-banner-bold { font-family: "miller-banner", serif; font-weight: 700; font-style: normal; }
.font-miller-banner-bold-italic { font-family: "miller-banner", serif; font-weight: 700; font-style: italic; }

.font-miller-banner-ex-compressed { font-family: "miller-banner-ex-compressed", sans-serif; font-weight: 400; font-style: normal; }
.font-miller-banner-ex-compressed-italic { font-family: "miller-banner-ex-compressed", sans-serif; font-weight: 400; font-style: italic; }
.font-miller-banner-ex-compressed-bold { font-family: "miller-banner-ex-compressed", sans-serif; font-weight: 700; font-style: normal; }
.font-miller-banner-ex-compressed-bold-italic { font-family: "miller-banner-ex-compressed", sans-serif; font-weight: 700; font-style: italic; }

.font-miller-banner-compressed { font-family: "miller-banner-compressed", sans-serif; font-weight: 400; font-style: normal; }
.font-miller-banner-compressed-italic { font-family: "miller-banner-compressed", sans-serif; font-weight: 400; font-style: italic; }
.font-miller-banner-compressed-bold { font-family: "miller-banner-compressed", sans-serif; font-weight: 700; font-style: normal; }
.font-miller-banner-compressed-bold-italic { font-family: "miller-banner-compressed", sans-serif; font-weight: 700; font-style: italic; }

.font-miller-banner-ex-condensed { font-family: "miller-banner-ex-condensed", sans-serif; font-weight: 400; font-style: normal; }
.font-miller-banner-ex-condensed-italic { font-family: "miller-banner-ex-condensed", sans-serif; font-weight: 400; font-style: italic; }
.font-miller-banner-ex-condensed-bold { font-family: "miller-banner-ex-condensed", sans-serif; font-weight: 700; font-style: normal; }
.font-miller-banner-ex-condensed-bold-italic { font-family: "miller-banner-ex-condensed", sans-serif; font-weight: 700; font-style: italic; }

.font-miller-banner-condensed { font-family: "miller-banner-condensed", sans-serif; font-weight: 400; font-style: normal; }
.font-miller-banner-condensed-italic { font-family: "miller-banner-condensed", sans-serif; font-weight: 400; font-style: italic; }
.font-miller-banner-condensed-bold { font-family: "miller-banner-condensed", sans-serif; font-weight: 700; font-style: normal; }
.font-miller-banner-condensed-bold-italic { font-family: "miller-banner-condensed", sans-serif; font-weight: 700; font-style: italic; }

/* Cream theme gradient background */
body.theme-cream,
body.theme.theme-cream,
body.theme_color_tc.theme-cream {
  background:
    linear-gradient(120deg,
      rgba(247,244,237,0.96) 0%,
      rgba(231,223,210,0.86) 55%,
      rgba(247,244,237,0.93) 100%
    ),
    linear-gradient(to bottom, #f7f4ed 0%, #e7dfd2 100%);
  background-attachment: fixed;
}

/* DPPC theme gradient background */
body.theme-dppc,
body.theme.theme-dppc,
body.theme_color_tc.theme-dppc {
  background:
    linear-gradient(120deg,
      rgba(245,246,244,0.96) 0%,
      rgba(231,233,228,0.86) 55%,
      rgba(245,246,244,0.93) 100%
    ),
    linear-gradient(to bottom, #F5F6F4 0%, #E7E9E4 100%);
  background-attachment: fixed;
}

/* TONED purple gradient background */
body.theme-toned,
body.theme.theme-toned,
body.theme_color_tc.theme-toned {
  background:
    linear-gradient(120deg,
      rgba(42,27,51,0.45) 0%,
      rgba(75,46,90,0.92) 55%,
      rgba(92,59,110,0.85) 100%
    ),
    linear-gradient(to bottom, #2A1B33 0%, #4B2E5A 70%, #5C3B6E 100%);
  background-attachment: fixed;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* =========================
   Button Styles
   ========================= */
.button {
  --button-content-color: var(--color-active);

  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;

  width: auto;
  border: none;
  border-radius: 23px;
  box-sizing: border-box;
  background: var(--color-bg-default);
  outline: none;
  cursor: pointer;
  transition: background 0.5s ease-in, box-shadow 0.5s ease-in 0.25s;
}

/* Light theme button sizing */
.theme-light .button {
  min-height: 46px;
  height: auto;
  padding: 12px 24px;
  box-shadow:
    3px 3px 6px rgba(var(--shadow), var(--button-shadow-shadow)),
    -3px -3px 6px rgba(var(--light), var(--button-shadow-light));
}

/* Dark theme button sizing */
.theme-dark .button,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button {
  height: 46px;
  padding: 0 24px;
  box-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.6),
    -3px -3px 6px rgba(255, 255, 255, 0.05);
}

/* Cream theme button sizing */
.theme-cream .button,
.theme_color_tc.theme-cream .button,
.theme-dppc .button,
.theme_color_tc.theme-dppc .button {
  min-height: 46px;
  height: auto;
  padding: 12px 24px;
  box-shadow:
    3px 3px 6px rgba(var(--shadow), var(--button-shadow-shadow)),
    -3px -3px 6px rgba(var(--light), var(--button-shadow-light));
}

/* TONED purple button sizing */
.theme-toned .button,
.theme_color_tc.theme-toned .button {
  min-height: 46px;
  height: auto;
  padding: 12px 24px;
  box-shadow:
    3px 3px 6px rgba(var(--shadow), var(--button-shadow-shadow)),
    -3px -3px 6px rgba(var(--light), var(--button-shadow-light));
}

.button::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  backdrop-filter: blur(0.68px);
  pointer-events: none;
}

.button::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 99em;
  background:
    radial-gradient(
      circle at 80% 80%,
      rgba(var(--light), calc(0.9 * var(--light-mod))) 25%,
      rgba(var(--shadow), calc(0.28 * var(--shadow-mod)))
    );
  opacity: 0;
  filter: blur(8.1px);
}

.button__play {
  position: relative;
  z-index: 2;
  transform: scale(1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: calc(9pt * var(--tc-font-scale));
  color: var(--button-text-color);
  text-shadow:
    0 0 4px rgba(198, 165, 108, 0.2),
    0 0 8px rgba(226, 214, 182, 0.1),
    0 0 0px var(--button-content-color),
    inset 0 0 0px var(--button-content-color);
  transition: color 0.5s ease-in, text-shadow 0.5s ease-in;
}

/* Non-active button text opacity */
.button:not(.is-clicked) .button__play {
  opacity: 0.6;
}

/* Cream theme button text shadow */
.theme-cream .button__play,
.theme_color_tc.theme-cream .button__play,
.theme-dppc .button__play,
.theme_color_tc.theme-dppc .button__play {
  text-shadow:
    
    0 0 4px rgba(198, 165, 108, 0.2),
    0 0 8px rgba(198, 165, 108, 0.1),
    0 0 0px var(--button-content-color),
    inset 0 0 0px var(--button-content-color);
}

/* TONED purple button text shadow (gold only) */
.theme-toned .button__play,
.theme_color_tc.theme-toned .button__play {
  text-shadow:
    0 0 4px rgba(198, 165, 108, 0.2),
    0 0 8px rgba(226, 214, 182, 0.1),
    0 0 0px var(--button-content-color),
    inset 0 0 0px var(--button-content-color);
}

/* Light theme button text layout */
.theme-light .button__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}

/* Cream theme button text layout */
.theme-cream .button__play,
.theme_color_tc.theme-cream .button__play,
.theme-dppc .button__play,
.theme_color_tc.theme-dppc .button__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}

/* TONED purple button text layout */
.theme-toned .button__play,
.theme_color_tc.theme-toned .button__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}

.button__play span {
  display: block;
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  margin-top: 4px;
  color: var(--button-text-color);
  opacity: 0.85;
}

.button__waves {
  opacity: 0;
  pointer-events: none;
}

.button__waves,
.button__waves::before,
.button__waves::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 99em;
  transform: translate(-50%, -50%) scale(1) translateZ(0);
  will-change: transform, opacity;
}

.button__waves::before,
.button__waves::after {
  content: "";
}

/* Light theme wave shadows */
.theme-light .button__waves::before,
.theme-light .button__waves::after {
  box-shadow:
    inset -7px -10.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset 7px 10.5px 10px -5px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset 5px 7.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset -10px -15px 6px -16px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset -10px -15px 20px -10px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt) * var(--shadow-mod))),
    -5px -7.5px 8px -1px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    6px 9px 6px -9px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    6.5px 10px 10px -6px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt2) * var(--shadow-mod)));
}

/* Cream theme wave shadows */
.theme-cream .button__waves::before,
.theme-cream .button__waves::after,
.theme_color_tc.theme-cream .button__waves::before,
.theme_color_tc.theme-cream .button__waves::after,
.theme-dppc .button__waves::before,
.theme-dppc .button__waves::after,
.theme_color_tc.theme-dppc .button__waves::before,
.theme_color_tc.theme-dppc .button__waves::after {
  box-shadow:
    inset -7px -10.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset 7px 10.5px 10px -5px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset 5px 7.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset -10px -15px 6px -16px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset -10px -15px 20px -10px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt) * var(--shadow-mod))),
    -5px -7.5px 8px -1px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    6px 9px 6px -9px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    6.5px 10px 10px -6px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt2) * var(--shadow-mod)));
}

/* Dark theme wave shadows */
.theme-dark .button__waves::before,
.theme-dark .button__waves::after,
.theme_color_tc:not(.theme-light) .button__waves::before,
.theme_color_tc:not(.theme-light) .button__waves::after {
  box-shadow:
    inset -7px -10.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset 7px 10.5px 10px -5px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset 5px 7.5px 10px -5px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    inset -10px -15px 6px -16px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    inset -10px -15px 20px -10px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt) * var(--shadow-mod))),
    -5px -7.5px 8px -1px rgba(var(--light), calc(var(--wave-light-mod) * var(--light-mod))),
    6px 9px 6px -9px rgba(var(--shadow), calc(var(--wave-shadow-mod) * var(--shadow-mod))),
    6.5px 10px 10px -6px rgba(var(--shadow), calc(var(--wave-shadow-mod-alt2) * var(--shadow-mod)));
}

/* Button States */
.button.is-pressed::after {
  animation: ButtonInnerShadowAnimation 0.8s ease both;
}

.button.is-pressed .button__play {
  animation: PlayMainAnimation 0.8s ease;
}

.button.is-pressed .button__waves {
  animation: WaveMainAnimation 2s linear both;
}

.button.is-pressed .button__waves::before {
  animation: WaveBeforeAnimation 1.1s 0.1s linear both;
}

.button.is-pressed .button__waves::after {
  animation: WaveBeforeAnimation 0.9s 0.55s linear both;
}

.button.is-clicked {
  background: var(--color-active-hover);
  transition: background 0.5s ease-in, box-shadow 0.5s ease-in 0.25s;
}

/* Light theme clicked state */
.theme-light .button.is-clicked {
  box-shadow:
    0 0 20px rgba(226, 214, 182, 0.6),
    0 0 40px rgba(226, 214, 182, 0.4),
    3px 3px 6px rgba(var(--shadow), 0.2),
    -3px -3px 6px rgba(var(--light), 0.8);
}

/* Dark theme clicked state */
.theme-dark .button.is-clicked,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-clicked {
  box-shadow:
    0 0 20px rgba(226, 214, 182, 0.6),
    0 0 40px rgba(226, 214, 182, 0.4),
    3px 3px 6px rgba(0, 0, 0, 0.6),
    -3px -3px 6px rgba(255, 255, 255, 0.05);
}

/* Cream theme clicked state */
.theme-cream .button.is-clicked,
.theme_color_tc.theme-cream .button.is-clicked,
.theme-dppc .button.is-clicked,
.theme_color_tc.theme-dppc .button.is-clicked {
  box-shadow:
    
    0 0 20px rgba(198, 165, 108, 0.5),
    0 0 40px rgba(198, 165, 108, 0.3),
    3px 3px 6px rgba(var(--shadow), 0.2),
    -3px -3px 6px rgba(var(--light), 0.7);
}

/* TONED purple clicked state (gold only) */
.theme-toned .button.is-clicked,
.theme_color_tc.theme-toned .button.is-clicked {
  box-shadow:
    0 0 20px rgba(226, 214, 182, 0.55),
    0 0 40px rgba(226, 214, 182, 0.33),
    3px 3px 6px rgba(0, 0, 0, 0.6),
    -3px -3px 6px rgba(236, 234, 231, 0.05);
}

.button.is-clicked .button__play {
  color: var(--button-clicked-text);
  text-shadow: none;
  transition: color 0.5s ease-in, text-shadow 0.5s ease-in;
}

.theme-light .button.is-clicked .button__play span {
  color: var(--button-clicked-text);
  opacity: 0.9;
}

.theme-dark .button.is-clicked .button__play span,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-clicked .button__play span {
  color: var(--button-clicked-text);
  opacity: 1;
}

.theme-cream .button.is-clicked .button__play span,
.theme_color_tc.theme-cream .button.is-clicked .button__play span,
.theme-dppc .button.is-clicked .button__play span,
.theme_color_tc.theme-dppc .button.is-clicked .button__play span {
  color: var(--button-clicked-text);
  opacity: 0.9;
}

.theme-toned .button.is-clicked .button__play span,
.theme_color_tc.theme-toned .button.is-clicked .button__play span {
  color: var(--button-clicked-text);
  opacity: 0.95;
}

/* Gold border for next options buttons */
.tc-next-btn-gold {
  border: 2px solid rgba(180, 160, 120, 0.6);
}

.tc-next-btn-gold.is-clicked {
  border-color: rgba(213, 199, 163, 0.8);
}

/* =========================
   Animations
   ========================= */
@keyframes ButtonInnerShadowAnimation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes PlayMainAnimation {
  50% {
    --button-content-color: var(--color-active-pressed);
    transform: scale(0.94);
    text-shadow:
      0 0 8px rgba(213, 199, 163, 0.18),
      0 0 14px rgba(213, 199, 163, 0.10);
  }
}

/* Cream theme button animation shadow */
.theme-cream .button.is-pressed .button__play,
.theme_color_tc.theme-cream .button.is-pressed .button__play,
.theme-dppc .button.is-pressed .button__play,
.theme_color_tc.theme-dppc .button.is-pressed .button__play {
  animation: PlayMainAnimationCream 0.8s ease;
}

@keyframes PlayMainAnimationCream {
  50% {
    --button-content-color: var(--color-active-pressed);
    transform: scale(0.94);
    text-shadow:
      
      0 0 8px rgba(179, 145, 87, 0.18),
      0 0 14px rgba(179, 145, 87, 0.10);
  }
}

@keyframes WaveMainAnimation {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0.8; }
}

.theme-dark .button.is-pressed .button__waves,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-pressed .button__waves {
  animation: WaveMainAnimationDark 2s linear both;
}

@keyframes WaveMainAnimationDark {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes WaveBeforeAnimation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  30% { opacity: 0.8; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

.theme-dark .button.is-pressed .button__waves::before,
.theme-dark .button.is-pressed .button__waves::after,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-pressed .button__waves::before,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-pressed .button__waves::after {
  animation: WaveBeforeAnimationDark 1.1s 0.1s linear both;
}

.theme-dark .button.is-pressed .button__waves::after,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .button.is-pressed .button__waves::after {
  animation: WaveBeforeAnimationDark 0.9s 0.55s linear both;
}

@keyframes WaveBeforeAnimationDark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  30% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

/* =========================
   THICK Clinical Cards
   ========================= */
.tc-cards {
  margin: 0px auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.theme-dark .tc-cards,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-cards {
  margin: 0px auto;
}

.tc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 30px;
  border-radius: 30px;
  position: relative;
  width: auto;
  background: transparent;
  border: 0.5px solid var(--card-border);
  box-shadow:
    inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
    inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light));
}

.tc-bubble:first-of-type .tc-card {
  border: 3.5px solid var(--card-border-initial);
  border-radius: 25px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 36px;
  padding-right: 36px;
}

.tc-card.illuminating {
  animation: borderGlow 1.5s cubic-bezier(0.1, 0, 0.1, 1) forwards;
}

.tc-bubble:first-of-type .tc-card.illuminating {
  animation: borderGlowRoseGold 1.5s cubic-bezier(0.1, 0, 0.1, 1) forwards;
}

/* TONED purple: prevent rose glow on first bubble */
.theme-toned .tc-bubble:first-of-type .tc-card.illuminating,
.theme_color_tc.theme-toned .tc-bubble:first-of-type .tc-card.illuminating {
  animation: borderGlowTonedInitial 1.5s cubic-bezier(0.1, 0, 0.1, 1) forwards;
}

@keyframes borderGlow {
  from {
    border-color: var(--card-border);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 0px rgba(198, 165, 108, 0),
      0 0 0px rgba(198, 165, 108, 0);
  }
  to {
    border-color: var(--color-active);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 3px rgba(198, 165, 108, 0.3),
      0 0 6px rgba(198, 165, 108, 0.2);
  }
}

/* Cream theme border glow */
.theme-cream .tc-card.illuminating,
.theme_color_tc.theme-cream .tc-card.illuminating,
.theme-dppc .tc-card.illuminating,
.theme_color_tc.theme-dppc .tc-card.illuminating {
  animation: borderGlowCream 1.5s cubic-bezier(0.1, 0, 0.1, 1) forwards;
}

@keyframes borderGlowCream {
  from {
    border-color: var(--card-border);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 0px rgba(198, 165, 108, 0),
      0 0 0px rgba(198, 165, 108, 0);
  }
  to {
    border-color: var(--color-active);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 3px rgba(198, 165, 108, 0.3),
      0 0 6px rgba(198, 165, 108, 0.2);
  }
}

@keyframes borderGlowRoseGold {
  from {
    border-color: var(--card-border-initial);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 0px rgba(198, 165, 108, 0),
      0 0 0px rgba(198, 165, 108, 0);
  }
  to {
    border-color: var(--color-active);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 3px rgba(198, 165, 108, 0.3),
      0 0 6px rgba(198, 165, 108, 0.2);
  }
}

@keyframes borderGlowTonedInitial {
  from {
    border-color: var(--card-border-initial);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 0px rgba(198, 165, 108, 0),
      0 0 0px rgba(198, 165, 108, 0);
  }
  to {
    border-color: var(--color-active);
    box-shadow:
      inset 3px 3px 7px rgba(var(--shadow), var(--card-shadow-inset-shadow)),
      inset -3px -3px 7px rgba(var(--light), var(--card-shadow-inset-light)),
      0 0 3px rgba(198, 165, 108, 0.3),
      0 0 6px rgba(198, 165, 108, 0.2);
  }
}

.tc-card--inset {
  padding-top: 15px;
  padding-bottom: 15px;
}

.tc-card__text {
  text-align: center;
  color: var(--card-text-color);
  text-shadow: none;
  position: relative;
  font-size: calc(1.3em - (1.1pt * var(--tc-font-scale)));
}

.tc-bubble:first-of-type .tc-card .tc-card__text {
  color: var(--card-text-initial);
  text-transform: uppercase;
  font-size: calc(1.1em + (2.2pt * var(--tc-font-scale)));
  font-weight: 600;
}

.tc-card__text.illuminating::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color-active-hover);
  text-shadow:
    0 0 3px rgba(198, 165, 108, 0.3),
    0 0 6px rgba(198, 165, 108, 0.2);
  overflow: hidden;
  white-space: normal;
  clip-path: inset(0 100% 0 0);
  animation: revealText 1.5s cubic-bezier(0.1, 0, 0.1, 1) forwards;
}

/* Cream theme illuminating text */
.theme-cream .tc-card__text.illuminating::before,
.theme_color_tc.theme-cream .tc-card__text.illuminating::before,
.theme-dppc .tc-card__text.illuminating::before,
.theme_color_tc.theme-dppc .tc-card__text.illuminating::before {
  color: var(--color-active-hover);
  text-shadow:
    0 0 3px rgba(198, 165, 108, 0.3),
    0 0 6px rgba(198, 165, 108, 0.2);
}

.tc-bubble:first-of-type .tc-card .tc-card__text.illuminating::before {
  color: var(--color-active);
  text-shadow:
    0 0 3px rgba(198, 165, 108, 0.3),
    0 0 6px rgba(198, 165, 108, 0.2);
}

/* TONED purple: use gold illuminating text on first bubble */
.theme-toned .tc-bubble:first-of-type .tc-card .tc-card__text.illuminating::before,
.theme_color_tc.theme-toned .tc-bubble:first-of-type .tc-card .tc-card__text.illuminating::before {
  color: var(--color-active);
  text-shadow:
    0 0 3px rgba(198, 165, 108, 0.3),
    0 0 6px rgba(198, 165, 108, 0.2);
}

@keyframes revealText {
  from { 
    clip-path: inset(0 100% 0 0);
  }
  to { 
    clip-path: inset(0 0% 0 0);
  }
}

.tc-card__icon:empty {
  display: none;
}

/* =========================
   Layout
   ========================= */
.tc-flow {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.theme-light .tc-flow {
  align-items: flex-start;
  gap: 50px;
}

.theme-dark .tc-flow,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-flow {
  gap: 50px;
}

.theme-cream .tc-flow,
.theme_color_tc.theme-cream .tc-flow,
.theme-dppc .tc-flow,
.theme_color_tc.theme-dppc .tc-flow {
  align-items: flex-start;
  gap: 50px;
}

.theme-toned .tc-flow,
.theme_color_tc.theme-toned .tc-flow {
  align-items: flex-start;
  gap: 50px;
}

/* Layout invariant:
   Keep flow children full-width (stretch) so content doesn't "hug" left
   when the viewport gets narrow. Constrain/align individual children instead. */
.theme .tc-flow {
  align-items: stretch;
}

.tc-bubble {
  width: 100%;
}

.tc-options {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  box-sizing: border-box;
}

.tc-hidden {
  display: none;
}

/* =========================
   Light Theme Specific Components
   ========================= */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 0px;
  flex-wrap: wrap;
}

/* =========================
   DPPC: Top nav buttons (button-container)
   Active tab uses slate background + slate glow + aliceblue text
   ========================= */
.theme-dppc .button-container .button.is-clicked,
.theme_color_tc.theme-dppc .button-container .button.is-clicked {
  background: #2F3A44;
  box-shadow:
    0 0 20px rgba(47, 58, 68, 0.60),
    0 0 40px rgba(47, 58, 68, 0.40),
    3px 3px 6px rgba(var(--shadow), 0.2),
    -3px -3px 6px rgba(var(--light), 0.7);
}

.theme-dppc .button-container .button.is-clicked .button__play,
.theme_color_tc.theme-dppc .button-container .button.is-clicked .button__play {
  color: aliceblue;
  text-shadow: none;
}

.theme-dppc .button-container .button.is-clicked .button__play span,
.theme_color_tc.theme-dppc .button-container .button.is-clicked .button__play span {
  color: aliceblue;
  opacity: 0.95;
}

/* DPPC (dppc.php only): Careflow pulse arrows (between steps)
   Arrow glyph uses DPPC slate */
.theme-dppc .tc-careflow > .tc-pulse-arrow svg,
.theme_color_tc.theme-dppc .tc-careflow > .tc-pulse-arrow svg {
  fill: #2F3A44;
  opacity: 0.95;
}

/* DPPC (dppc.php only): Hero arrow */
.theme-dppc .clinic-hero-arrow svg,
.theme_color_tc.theme-dppc .clinic-hero-arrow svg {
  fill: #2F3A44;
  opacity: 0.95;
}

.tc-card-content {
  width: 100%;
  max-width: 800px;
  text-align: left;
}

.tc-card-content h1 {
  font-size: 2rem;
  font-weight: 700;
  color: rgb(80, 75, 70);
  margin: 0 0 0.5em 0;
  text-align: center;
}

.tc-card-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(100, 95, 90);
  margin: 0 0 1em 0;
  text-align: center;
}

.tc-card-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(80, 75, 70);
  margin: 0 0 0.75em 0;
}

.tc-card-content p {
  color: rgb(80, 75, 70);
  line-height: 1.6;
  margin: 0 0 1em 0;
}

.tc-card-content ul {
  color: rgb(80, 75, 70);
  line-height: 1.8;
  margin: 0 0 1.5em 0;
  padding-left: 1.5em;
}

.tc-card-content li {
  margin-bottom: 0.5em;
}

.tc-card-raised {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 30px;
  border-radius: 30px;
  position: relative;
  width: auto;
  background: var(--color-bg-default);
  box-shadow: 
    -8px -4px 8px 0px rgba(var(--light), 0.8),
    8px 4px 12px 0px rgba(var(--shadow), 0.3),
    4px 4px 4px 0px rgba(var(--shadow), 0.2) inset,
    -4px -4px 4px 0px rgba(var(--light), 0.8) inset;
}

.tc-card-raised-lite {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 25px 10px;
  border-radius: 15px;
  position: relative;
  width: auto;
  background: var(--color-bg-default);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), 0.6),
    6px 3px 9px 0px rgba(var(--shadow), 0.2),
    3px 3px 3px 0px rgba(var(--shadow), 0.15) inset,
    -3px -3px 3px 0px rgba(var(--light), 0.6) inset;
}

.tc-header-bubble {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 15px;
  background: var(--color-bg-default);
  backdrop-filter: blur(15px);
  box-shadow: 
    inset 0 0 20px rgba(255, 255, 255, 0.192),
    inset 0 0 5px rgba(255, 255, 255, 0.274),
    0 5px 5px rgba(0, 0, 0, 0.164);
  margin: 0 0 1.5em 0;
  font-size: 1.2em;
  font-weight: 600;
  color: rgb(80, 75, 70);
  text-align: center;
  transition: 0.5s;
}

.tc-next-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
  width: 100%;
}

.tc-next-options .button {
  width: 100%;
}

.tc-footer {
  width: 100%;
  background: var(--color-bg-default);
  padding: 60px 40px 40px;
  margin-top: 0px;
  box-sizing: border-box;
  box-shadow:
    inset 0 8px 12px rgba(var(--shadow), 0.25),
    inset 0 4px 6px rgba(var(--shadow), 0.15);
}

.tc-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.tc-footer-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(80, 75, 70);
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tc-footer-section p,
.tc-footer-section a {
  font-size: 0.95em;
  color: rgb(100, 95, 90);
  line-height: 1.8;
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.tc-footer-section a:hover {
  color: var(--color-active);
}

.tc-footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--shadow), 0.2);
  text-align: center;
  color: rgb(100, 95, 90);
  font-size: 0.9em;
}

/* =========================
   Dark Theme Card Styling
   ========================= */
.theme-dark .tc-cards,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-cards {
  position: relative;
}

.theme-dark .tc-card-content,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content {
  color: var(--tc-bone);
}

.theme-dark .tc-card-content h1,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content h1 {
  color: var(--color-active-hover);
  text-shadow: 0 0 8px rgba(198, 165, 108, 0.2);
}

.theme-dark .tc-card-content h2,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content h2 {
  color: var(--tc-bone-soft);
  text-shadow: 0 0 4px rgba(236, 234, 231, 0.1);
}

.theme-dark .tc-card-content h3,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content h3 {
  color: var(--color-active-hover);
  text-shadow: 0 0 6px rgba(226, 214, 182, 0.15);
}

.theme-dark .tc-card-content p,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content p {
  color: var(--tc-bone-soft);
  line-height: 1.7;
}

.theme-dark .tc-card-content ul,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content ul {
  color: var(--tc-bone-soft);
}

.theme-dark .tc-card-content li,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content li {
  color: var(--tc-bone-soft);
}

.theme-dark .tc-card-content li strong,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-content li strong {
  color: var(--color-active-hover);
  font-weight: 600;
}

.theme-dark .tc-card-raised-lite,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-raised-lite {
  background: var(--tc-surface);
  border: 1px solid rgba(213, 199, 163, 0.15);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.6)),
    6px 3px 9px 0px rgba(0, 0, 0, 0.8),
    3px 3px 3px 0px rgba(0, 0, 0, 0.4) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.6)) inset,
    0 0 0 0px rgba(198, 165, 108, 0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-dark .tc-card-raised-lite:hover,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-card-raised-lite:hover {
  border-color: rgba(213, 199, 163, 0.3);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.6)),
    6px 3px 9px 0px rgba(0, 0, 0, 0.8),
    3px 3px 3px 0px rgba(0, 0, 0, 0.4) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.6)) inset,
    0 0 12px 0px rgba(226, 214, 182, 0.15);
}

/* =========================
   TONED Purple Card Styling
   ========================= */
.theme-toned .tc-card-content,
.theme_color_tc.theme-toned .tc-card-content {
  color: var(--tc-bone);
}

.theme-toned .tc-card-content h1,
.theme_color_tc.theme-toned .tc-card-content h1 {
  color: var(--color-active-hover);
  text-shadow: 0 0 8px rgba(226, 214, 182, 0.18);
}

.theme-toned .tc-card-content h2,
.theme_color_tc.theme-toned .tc-card-content h2 {
  color: var(--tc-bone-soft);
  text-shadow: 0 0 4px rgba(236, 234, 231, 0.08);
}

.theme-toned .tc-card-content h3,
.theme_color_tc.theme-toned .tc-card-content h3 {
  color: var(--color-active-hover);
  text-shadow: 0 0 6px rgba(226, 214, 182, 0.12);
}

.theme-toned .tc-card-content p,
.theme_color_tc.theme-toned .tc-card-content p {
  color: var(--tc-bone-soft);
  line-height: 1.7;
}

.theme-toned .tc-card-content ul,
.theme_color_tc.theme-toned .tc-card-content ul {
  color: var(--tc-bone-soft);
}

.theme-toned .tc-card-content li,
.theme_color_tc.theme-toned .tc-card-content li {
  color: var(--tc-bone-soft);
}

.theme-toned .tc-card-content li strong,
.theme_color_tc.theme-toned .tc-card-content li strong {
  color: var(--color-active-hover);
  font-weight: 600;
}

.theme-toned .tc-card-raised-lite,
.theme_color_tc.theme-toned .tc-card-raised-lite {
  background: var(--toned-purple-surface);
  border: 1px solid rgba(213, 199, 163, 0.18);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.55)),
    6px 3px 9px 0px rgba(0, 0, 0, 0.85),
    3px 3px 3px 0px rgba(0, 0, 0, 0.45) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.55)) inset,
    0 0 0 0px rgba(198, 165, 108, 0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-toned .tc-card-raised-lite:hover,
.theme_color_tc.theme-toned .tc-card-raised-lite:hover {
  border-color: rgba(213, 199, 163, 0.32);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.55)),
    6px 3px 9px 0px rgba(0, 0, 0, 0.85),
    3px 3px 3px 0px rgba(0, 0, 0, 0.45) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.55)) inset,
    0 0 12px 0px rgba(226, 214, 182, 0.14);
}

/* =========================
   Cream Theme Card Styling
   ========================= */
/* Cream theme ink rules */
.theme-cream .tc-card-content h1,
.theme-cream .tc-card-content h2,
.theme-cream .tc-card-content h3,
.theme_color_tc.theme-cream .tc-card-content h1,
.theme_color_tc.theme-cream .tc-card-content h2,
.theme_color_tc.theme-cream .tc-card-content h3 {
  color: #1f1f1f;
  text-shadow: none;
}

.theme-cream strong,
.theme-cream dt,
.theme-cream .clinic-faq-question,
.theme_color_tc.theme-cream strong,
.theme_color_tc.theme-cream dt,
.theme_color_tc.theme-cream .clinic-faq-question {
  color: #1f1f1f;
}

.theme-cream .tc-card-content,
.theme_color_tc.theme-cream .tc-card-content {
  color: #1f1f1f;
}

.theme-cream .tc-card-content h1,
.theme_color_tc.theme-cream .tc-card-content h1 {
  color: #1f1f1f;
}

.theme-cream .tc-card-content h2,
.theme_color_tc.theme-cream .tc-card-content h2 {
  color: #1f1f1f;
}

.theme-cream .tc-card-content h3,
.theme_color_tc.theme-cream .tc-card-content h3 {
  color: #1f1f1f;
}

.theme-cream .tc-card-content p,
.theme_color_tc.theme-cream .tc-card-content p {
  color: #1f1f1f;
  line-height: 1.6;
}

.theme-cream .tc-card-content ul,
.theme_color_tc.theme-cream .tc-card-content ul {
  color: #1f1f1f;
}

.theme-cream .tc-card-content li,
.theme_color_tc.theme-cream .tc-card-content li {
  color: #1f1f1f;
}

.theme-cream .tc-card-content li strong,
.theme_color_tc.theme-cream .tc-card-content li strong {
  color: var(--color-active);
  font-weight: 600;
}

.theme-cream .tc-card-raised-lite,
.theme_color_tc.theme-cream .tc-card-raised-lite,
.theme-dppc .tc-card-raised-lite,
.theme_color_tc.theme-dppc .tc-card-raised-lite {
  background: var(--color-bg-default);
  border: 1px solid rgba(198, 165, 108, 0.3);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), 0.5),
    6px 3px 9px 0px rgba(var(--shadow), 0.3),
    3px 3px 3px 0px rgba(var(--shadow), 0.2) inset,
    -3px -3px 3px 0px rgba(var(--light), 0.6) inset;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-cream .tc-card-raised-lite:hover,
.theme_color_tc.theme-cream .tc-card-raised-lite:hover,
.theme-dppc .tc-card-raised-lite:hover,
.theme_color_tc.theme-dppc .tc-card-raised-lite:hover {
  border-color: rgba(213, 180, 163, 0.5);
  box-shadow: 
    -6px -3px 6px 0px rgba(var(--light), 0.6),
    6px 3px 9px 0px rgba(var(--shadow), 0.2),
    3px 3px 3px 0px rgba(var(--shadow), 0.15) inset,
    -3px -3px 3px 0px rgba(var(--light), 0.6) inset,
    0 0 12px 0px rgba(198, 165, 108, 0.2);
}

/* =========================
   THICK Concierge – Dark Theme Card
   Add this near your existing "Dark Theme Card Styling" block
   ========================= */

.tc-concierge-card {
  position: relative;
}

.theme-dark .tc-concierge-card .tc-card-raised-lite,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-concierge-card .tc-card-raised-lite {
  /* Slightly different from standard cards so it reads as a distinct layer */
  background: var(--tc-surface-soft);
  border: 1px solid rgba(213, 180, 163, 0.22);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.55)),
    6px 3px 12px 0px rgba(0, 0, 0, 0.85),
    3px 3px 3px 0px rgba(0, 0, 0, 0.45) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.55)) inset,
    0 0 18px 0px rgba(213, 180, 163, 0.08);
}

.theme-dark .tc-concierge-card .tc-card-raised-lite:hover,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .tc-concierge-card .tc-card-raised-lite:hover {
  border-color: rgba(213, 180, 163, 0.35);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.55)),
    6px 3px 12px 0px rgba(0, 0, 0, 0.85),
    3px 3px 3px 0px rgba(0, 0, 0, 0.45) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.55)) inset,
    0 0 22px 0px rgba(213, 180, 163, 0.14);
}

.theme-toned .tc-concierge-card .tc-card-raised-lite,
.theme_color_tc.theme-toned .tc-concierge-card .tc-card-raised-lite {
  /* Distinct layer for TONED purple */
  background: var(--toned-purple-shadow);
  border: 1px solid rgba(213, 199, 163, 0.22);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.5)),
    6px 3px 12px 0px rgba(0, 0, 0, 0.88),
    3px 3px 3px 0px rgba(0, 0, 0, 0.5) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.5)) inset,
    0 0 18px 0px rgba(226, 214, 182, 0.08);
}

.theme-toned .tc-concierge-card .tc-card-raised-lite:hover,
.theme_color_tc.theme-toned .tc-concierge-card .tc-card-raised-lite:hover {
  border-color: rgba(213, 199, 163, 0.36);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), calc(0.08 * 0.5)),
    6px 3px 12px 0px rgba(0, 0, 0, 0.88),
    3px 3px 3px 0px rgba(0, 0, 0, 0.5) inset,
    -3px -3px 3px 0px rgba(var(--light), calc(0.08 * 0.5)) inset,
    0 0 22px 0px rgba(226, 214, 182, 0.14);
}

.theme-cream .tc-concierge-card .tc-card-raised-lite,
.theme_color_tc.theme-cream .tc-concierge-card .tc-card-raised-lite,
.theme-dppc .tc-concierge-card .tc-card-raised-lite,
.theme_color_tc.theme-dppc .tc-concierge-card .tc-card-raised-lite {
  background: var(--color-bg-default);
  border: 1px solid rgba(213, 180, 163, 0.4);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), 0.55),
    6px 3px 12px 0px rgba(var(--shadow), 0.18),
    3px 3px 3px 0px rgba(var(--shadow), 0.12) inset,
    -3px -3px 3px 0px rgba(var(--light), 0.55) inset,
    0 0 18px 0px rgba(213, 180, 163, 0.1);
}

.theme-cream .tc-concierge-card .tc-card-raised-lite:hover,
.theme_color_tc.theme-cream .tc-concierge-card .tc-card-raised-lite:hover,
.theme-dppc .tc-concierge-card .tc-card-raised-lite:hover,
.theme_color_tc.theme-dppc .tc-concierge-card .tc-card-raised-lite:hover {
  border-color: rgba(213, 180, 163, 0.55);
  box-shadow:
    -6px -3px 6px 0px rgba(var(--light), 0.55),
    6px 3px 12px 0px rgba(var(--shadow), 0.18),
    3px 3px 3px 0px rgba(var(--shadow), 0.12) inset,
    -3px -3px 3px 0px rgba(var(--light), 0.55) inset,
    0 0 22px 0px rgba(213, 180, 163, 0.18);
}

.tc-concierge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 820px) {
  .tc-concierge-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

.tc-concierge-kicker {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--color-active-hover);
  margin: 0 0 10px 0;
}

.theme-cream .tc-concierge-kicker,
.theme_color_tc.theme-cream .tc-concierge-kicker {
  color: var(--color-active);
}

.tc-concierge-note {
  margin-top: 14px;
  font-size: 0.7em;
  line-height: 1.65;
  color: var(--tc-bone-soft);
  opacity: 0.95;
}

.theme-cream .tc-concierge-note,
.theme_color_tc.theme-cream .tc-concierge-note {
  color: #1f1f1f;
  opacity: 0.9;
}

.tc-concierge-list h4 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-active-hover);
	 letter-spacing: 1px;
}

.theme-cream .tc-concierge-list h4,
.theme_color_tc.theme-cream .tc-concierge-list h4 {
  color: var(--color-active);
}

.tc-concierge-list ul {
  margin: 0;
  padding-left: 1.2em;
}

.tc-concierge-list li {
  margin-bottom: 0.55em;
}

/* =========================
   Clinic Buttons - Base Styles
   ========================= */
.clinic-btn-primary,
.clinic-btn-ghost {
  border: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: calc(14px * var(--tc-font-scale));
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
  position: relative;
}

.clinic-btn-primary:hover {
  transform: translateY(1px);
}

.clinic-btn-primary:active {
  transform: translateY(2px);
}

.clinic-btn-ghost:hover {
  transform: translateY(1px);
}

.clinic-btn-ghost:active {
  transform: translateY(2px);
}

/* =========================
   Clinic Buttons - Dark Theme (Default)
   ========================= */
.theme-dark .clinic-btn-primary,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .clinic-btn-primary {
  background: var(--tc-surface);
  color: var(--color-active);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    4px 4px 8px rgba(0, 0, 0, 0.8),
    -4px -4px 8px rgba(236, 234, 231, 0.08);
}

.theme-dark .clinic-btn-primary:hover,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .clinic-btn-primary:hover {
  color: var(--color-active-hover);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    2px 2px 4px rgba(0, 0, 0, 0.8),
    -2px -2px 4px rgba(236, 234, 231, 0.08);
}

.theme-dark .clinic-btn-primary:active,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .clinic-btn-primary:active {
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.55),
    inset -3px -3px 6px rgba(236, 234, 231, 0.05);
}

.theme-dark .clinic-btn-ghost,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .clinic-btn-ghost {
  background: var(--tc-surface);
  color: var(--tc-bone-soft);
  border: 1px solid rgba(213, 199, 163, 0.2);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05);
}

.theme-dark .clinic-btn-ghost:hover,
.theme_color_tc:not(.theme-light):not(.theme-cream):not(.theme-toned):not(.theme-dppc) .clinic-btn-ghost:hover {
  color: var(--color-active);
  border-color: rgba(213, 199, 163, 0.4);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    2px 2px 4px rgba(0, 0, 0, 0.8),
    -2px -2px 4px rgba(236, 234, 231, 0.08);
}

/* =========================
   Clinic Buttons - TONED Purple Theme
   ========================= */
.theme-toned .clinic-btn-primary,
.theme_color_tc.theme-toned .clinic-btn-primary {
  background: var(--toned-purple-shadow);
  color: var(--color-active);
  border: 1px solid rgba(213, 199, 163, 0.22);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    4px 4px 8px rgba(0, 0, 0, 0.88),
    -4px -4px 8px rgba(236, 234, 231, 0.06);
}

.theme-toned .clinic-btn-primary:hover,
.theme_color_tc.theme-toned .clinic-btn-primary:hover {
  color: var(--color-active-hover);
  border-color: rgba(213, 199, 163, 0.34);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    2px 2px 4px rgba(0, 0, 0, 0.88),
    -2px -2px 4px rgba(236, 234, 231, 0.06);
}

.theme-toned .clinic-btn-primary:active,
.theme_color_tc.theme-toned .clinic-btn-primary:active {
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.62),
    inset -3px -3px 6px rgba(236, 234, 231, 0.05);
}

.theme-toned .clinic-btn-ghost,
.theme_color_tc.theme-toned .clinic-btn-ghost {
  background: var(--toned-purple-shadow);
  color: var(--tc-bone-soft);
  border: 1px solid rgba(213, 199, 163, 0.18);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.58),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05);
}

.theme-toned .clinic-btn-ghost:hover,
.theme_color_tc.theme-toned .clinic-btn-ghost:hover {
  color: var(--color-active-hover);
  border-color: rgba(213, 199, 163, 0.3);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.58),
    inset -2px -2px 4px rgba(236, 234, 231, 0.05),
    2px 2px 4px rgba(0, 0, 0, 0.88),
    -2px -2px 4px rgba(236, 234, 231, 0.06);
}

.theme-toned .clinic-btn-ghost:active,
.theme_color_tc.theme-toned .clinic-btn-ghost:active {
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.62),
    inset -3px -3px 6px rgba(236, 234, 231, 0.05);
}

/* =========================
   Clinic Buttons - Light Theme
   ========================= */
.theme-light .clinic-btn-primary,
.theme_color_tc.theme-light .clinic-btn-primary {
  background: var(--color-bg-default);
  color: var(--tc-gold-border);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.3),
    inset -2px -2px 4px rgba(var(--light), 0.8),
    4px 4px 8px rgba(var(--shadow), 0.2),
    -4px -4px 8px rgba(var(--light), 0.8);
}

.theme-light .clinic-btn-primary:hover,
.theme_color_tc.theme-light .clinic-btn-primary:hover {
  color: var(--tc-gold);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.3),
    inset -2px -2px 4px rgba(var(--light), 0.8),
    2px 2px 4px rgba(var(--shadow), 0.2),
    -2px -2px 4px rgba(var(--light), 0.8);
}

.theme-light .clinic-btn-primary:active,
.theme_color_tc.theme-light .clinic-btn-primary:active {
  box-shadow:
    inset 3px 3px 6px rgba(var(--shadow), 0.3),
    inset -3px -3px 6px rgba(var(--light), 0.8);
}

.theme-light .clinic-btn-ghost,
.theme_color_tc.theme-light .clinic-btn-ghost {
  background: var(--color-bg-default);
  color: rgb(100, 95, 90);
  border: 1px solid rgba(213, 199, 163, 0.3);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.2),
    inset -2px -2px 4px rgba(var(--light), 0.6);
}

.theme-light .clinic-btn-ghost:hover,
.theme_color_tc.theme-light .clinic-btn-ghost:hover {
  color: var(--color-active);
  border-color: rgba(213, 199, 163, 0.5);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.2),
    inset -2px -2px 4px rgba(var(--light), 0.6),
    2px 2px 4px rgba(var(--shadow), 0.15),
    -2px -2px 4px rgba(var(--light), 0.7);
}

.theme-light .clinic-btn-ghost:active,
.theme_color_tc.theme-light .clinic-btn-ghost:active {
  box-shadow:
    inset 3px 3px 6px rgba(var(--shadow), 0.2),
    inset -3px -3px 6px rgba(var(--light), 0.6);
}

/* =========================
   Clinic Buttons - Cream/Toned Theme
   ========================= */
.theme-cream .clinic-btn-primary,
.theme_color_tc.theme-cream .clinic-btn-primary,
.theme-dppc .clinic-btn-primary,
.theme_color_tc.theme-dppc .clinic-btn-primary {
  background: var(--color-bg-default);
  color: var(--color-active);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.4),
    inset -2px -2px 4px rgba(var(--light), 0.7),
    4px 4px 8px rgba(var(--shadow), 0.35),
    -4px -4px 8px rgba(var(--light), 0.7);
}

.theme-cream .clinic-btn-primary:hover,
.theme_color_tc.theme-cream .clinic-btn-primary:hover,
.theme-dppc .clinic-btn-primary:hover,
.theme_color_tc.theme-dppc .clinic-btn-primary:hover {
  color: var(--color-active-hover);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.25),
    inset -2px -2px 4px rgba(var(--light), 0.7),
    2px 2px 4px rgba(var(--shadow), 0.18),
    -2px -2px 4px rgba(var(--light), 0.7);
}

.theme-cream .clinic-btn-primary:active,
.theme_color_tc.theme-cream .clinic-btn-primary:active,
.theme-dppc .clinic-btn-primary:active,
.theme_color_tc.theme-dppc .clinic-btn-primary:active {
  box-shadow:
    inset 3px 3px 6px rgba(var(--shadow), 0.25),
    inset -3px -3px 6px rgba(var(--light), 0.7);
}

.theme-cream .clinic-btn-ghost,
.theme_color_tc.theme-cream .clinic-btn-ghost,
.theme-dppc .clinic-btn-ghost,
.theme_color_tc.theme-dppc .clinic-btn-ghost {
  background: var(--color-bg-default);
  color: #1f1f1f;
  border: 1px solid rgba(213, 180, 163, 0.4);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.4),
    inset -2px -2px 4px rgba(var(--light), 0.6);
}

.theme-cream .clinic-btn-ghost:hover,
.theme_color_tc.theme-cream .clinic-btn-ghost:hover,
.theme-dppc .clinic-btn-ghost:hover,
.theme_color_tc.theme-dppc .clinic-btn-ghost:hover {
  color: var(--color-active);
  border-color: rgba(213, 180, 163, 0.6);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.6),
    inset -2px -2px 4px rgba(var(--light), 0.6),
    2px 2px 4px rgba(var(--shadow), 0.45),
    -2px -2px 4px rgba(var(--light), 0.65);
}

.theme-cream .clinic-btn-ghost:active,
.theme_color_tc.theme-cream .clinic-btn-ghost:active,
.theme-dppc .clinic-btn-ghost:active,
.theme_color_tc.theme-dppc .clinic-btn-ghost:active {
  box-shadow:
    inset 3px 3px 6px rgba(var(--shadow), 0.2),
    inset -3px -3px 6px rgba(var(--light), 0.6);
}

/* =========================
   Final CTA Bar
   ========================= */
.clinic-final-cta {
  background: var(--clinic-surface);
  padding: 40px;
  text-align: center;
  margin-top: 60px;
  box-shadow:
    inset 0 8px 12px rgba(var(--shadow), 0.25),
    inset 0 4px 6px rgba(var(--shadow), 0.15);
  border-top: 1px solid rgba(213, 199, 163, 0.1);
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.theme-light .clinic-final-cta,
.theme_color_tc.theme-light .clinic-final-cta {
  background: var(--color-bg-default);
  box-shadow:
    inset 0 4px 8px rgba(var(--shadow), 0.2),
    0 -4px 12px rgba(var(--shadow), 0.15);
  border-top: 1px solid rgba(213, 199, 163, 0.2);
}

.theme-toned .clinic-final-cta,
.theme_color_tc.theme-toned .clinic-final-cta {
  background: var(--toned-purple-shadow);
  box-shadow:
    inset 0 8px 12px rgba(0, 0, 0, 0.38),
    inset 0 4px 6px rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(213, 199, 163, 0.22);
}

.theme-cream .clinic-final-cta,
.theme_color_tc.theme-cream .clinic-final-cta,
.theme-dppc .clinic-final-cta,
.theme_color_tc.theme-dppc .clinic-final-cta {
  background: var(--color-bg-default);
  box-shadow:
    inset 0 4px 8px rgba(var(--shadow), 0.18),
    0 -4px 12px rgba(var(--shadow), 0.12);
  border-top: 1px solid rgba(198, 165, 108, 0.3);
}

.clinic-final-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.clinic-final-cta-small {
  font-size: calc(11px * var(--tc-font-scale));
  color: var(--clinic-text-soft);
  opacity: 0.7;
  margin-top: 12px;
  line-height: 1.5;
}

.theme-light .clinic-final-cta-small,
.theme_color_tc.theme-light .clinic-final-cta-small {
  color: rgb(100, 95, 90);
  opacity: 0.8;
}

.theme-toned .clinic-final-cta-small,
.theme_color_tc.theme-toned .clinic-final-cta-small {
  color: var(--tc-bone-soft);
  opacity: 0.78;
}

.theme-cream .clinic-final-cta-small,
.theme_color_tc.theme-cream .clinic-final-cta-small,
.theme-dppc .clinic-final-cta-small,
.theme_color_tc.theme-dppc .clinic-final-cta-small {
  color: #1f1f1f;
  opacity: 0.75;
}

/* =========================
   Sections Styles
   ========================= */

/* Hero Section */
.clinic-hero {
  display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  position: relative; /* anchor hero-local absolute elements (e.g., arrow) */
  max-width: 1200px;
  height: 65vh; /* Default: landscape / desktop */
  margin: 0 auto 30px;
  text-align: center;
}

.hero-spm {
  background-image: url("../images/spm_hero.webp"); 
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: right top;
	padding: 80px 40px;
}
.hero-dppc {
  background-image: url("../images/dppc_hero.webp"); 
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: center top;
	padding: 80px 40px;
}

/* Portrait orientation (phones + tablets held vertical) */
@media (orientation: portrait) {
  .clinic-hero {
    height: 50vh;
  }
}

/* Explicit mobile fallback (small screens, any orientation) */
@media (max-width: 768px) {
  .clinic-hero {
    height: 50vh;
  }
}

.clinic-hero .clinic-hero-headline {
  /* Responsive type: prevents overflow/cropping in narrow Chromium viewports */
  font-size: clamp(34px, 7.2vw, 56px);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 24px 0;
  color: var(--clinic-text);
  text-shadow: 0 0 20px rgba(213, 199, 163, 0.1);
  line-height: 1.12;

  /* Wrapping safeguards (handles non-breaking hyphens & long words) */
  max-width: min(40ch, 100%);
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Hero arrow: bottom-center without breaking tc-pulse-arrow hover transforms */
.clinic-hero .clinic-hero-arrow{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
}
.clinic-hero .clinic-hero-arrow:hover{
  transform: translateX(-50%) translateY(-1px);
}
.clinic-hero .clinic-hero-arrow:active{
  transform: translateX(-50%) translateY(0);
}

.clinic-hero-subhead {
  font-size: calc(20px * var(--tc-font-scale));
  color: var(--clinic-text-soft);
  margin: 0 0 48px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.clinic-hero-ctas {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.clinic-hero-microcopy {
  font-size: calc(12px * var(--tc-font-scale));
  color: var(--clinic-text-soft);
  margin: 8px 0;
  opacity: 0.8;
}

.clinic-hero-tiny {
  font-size: calc(11px * var(--tc-font-scale));
  color: var(--clinic-text-soft);
  opacity: 0.6;
  margin-top: 12px;
}

/* =========================
   TONED: Hero Carousel (scoped)
   Only applies to .clinic-hero--carousel
   ========================= */

.clinic-hero.clinic-hero--carousel {
  position: relative;
  width: 100%;
  max-width: none;      /* full-bleed */
  padding: 0;           /* overlay handles spacing */
  overflow: hidden;
}

/* Keep "same height as current hero" by defaulting to your existing hero sizing.
   If your base .clinic-hero already sets height:40vh, you can omit these two lines.
   If not, uncomment:
*/
/*
.clinic-hero.clinic-hero--carousel { height: 40vh; min-height: 420px; }
*/

.clinic-hero--carousel .clinic-hero-carousel {
  position: absolute;
  inset: 0;
}

.clinic-hero--carousel .clinic-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0;
  transform: scale(1.09);
  transition: opacity 3600ms ease, transform 5000ms ease;
}

.clinic-hero--carousel .clinic-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Readability overlay */
.clinic-hero--carousel .clinic-hero-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 45%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

/* Text overlay layer */
.clinic-hero--carousel .clinic-hero-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}

/* Dots */
.clinic-hero--carousel .clinic-hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

.clinic-hero--carousel .clinic-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(213,199,163,0.55);
  background: rgba(213,199,163,0.18);
  cursor: pointer;
  padding: 0;
}

.clinic-hero--carousel .clinic-hero-dot.is-active {
  background: rgba(213,199,163,0.85);
  border-color: rgba(213,199,163,0.85);
}

@media (max-width: 720px) {
  .clinic-hero--carousel .clinic-hero-overlay { padding: 60px 20px; }
  /* If your h1 sizing is global, don’t touch it here */
}



/* Section Container */
.clinic-section {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.clinic-section-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 40px 0;
  color: var(--clinic-text);
  text-align: center;
}

/* Utility Bar */
.clinic-utility-bar {
  background: var(--clinic-surface);
  padding: 12px 0px 12px 20px;
	display: flow-root;
  box-shadow: 0 8px 6px -6px black;
  border-bottom: 1px solid rgba(213, 199, 163, 0.1);
}

.clinic-utility-bar a {
  color: var(--clinic-text-soft);
  text-decoration: none;
  font-size: calc(13px * var(--tc-font-scale));
  font-weight: 500;
  transition: color 0.3s ease;
}

.clinic-utility-bar a:hover {
  color: var(--clinic-gold);
}

.clinic-utility-right {
  display: flex;
  gap: 20px;
}

/* =========================
   Utility Bar - Light Theme
   ========================= */
.theme-light .clinic-utility-bar,
.theme_color_tc.theme-light .clinic-utility-bar {
  background: var(--color-bg-default);
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.40);
  border-bottom: 1px solid rgba(213, 199, 163, 0.2);
}

.theme-toned .clinic-utility-bar,
.theme_color_tc.theme-toned .clinic-utility-bar {
  background: var(--toned-purple-shadow);
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(213, 199, 163, 0.22);
}

.theme-cream .clinic-utility-bar,
.theme_color_tc.theme-cream .clinic-utility-bar,
.theme-dppc .clinic-utility-bar,
.theme_color_tc.theme-dppc .clinic-utility-bar {
  background: var(--color-bg-default);
  box-shadow: 0 4px 8px -4px rgba(var(--shadow), 0.22);
  border-bottom: 1px solid rgba(179, 145, 87, 0.22);
}

.theme-light .clinic-utility-bar a,
.theme_color_tc.theme-light .clinic-utility-bar a {
  color: rgb(100, 95, 90);
}

.theme-toned .clinic-utility-bar a,
.theme_color_tc.theme-toned .clinic-utility-bar a {
  color: var(--tc-bone-soft);
}

.theme-cream .clinic-utility-bar a,
.theme_color_tc.theme-cream .clinic-utility-bar a,
.theme-dppc .clinic-utility-bar a,
.theme_color_tc.theme-dppc .clinic-utility-bar a {
  color: rgba(31, 31, 31, 0.78);
}

.theme-light .clinic-utility-bar a:hover,
.theme_color_tc.theme-light .clinic-utility-bar a:hover {
  color: var(--color-active);
}

.theme-toned .clinic-utility-bar a:hover,
.theme_color_tc.theme-toned .clinic-utility-bar a:hover {
  color: var(--color-active-hover);
}

.theme-cream .clinic-utility-bar a:hover,
.theme_color_tc.theme-cream .clinic-utility-bar a:hover,
.theme-dppc .clinic-utility-bar a:hover,
.theme_color_tc.theme-dppc .clinic-utility-bar a:hover {
  color: var(--color-active);
}

/* Two Column Lists */
.clinic-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 20px 0 40px;
}

.clinic-list-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--clinic-gold);
  margin-bottom: 20px;
}

.clinic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.clinic-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(213, 199, 163, 0.1);
  color: var(--clinic-text-soft);
}

.clinic-list li:last-child {
  border-bottom: none;
}

/* FAQ Accordion */
.clinic-faq {
  max-width: 800px;
  margin: 30px auto 50px;
}

.clinic-faq-item {
  margin-bottom: 16px;
}

.clinic-faq-question {
  background: var(--clinic-surface);
  padding: 20px;
  cursor: pointer;
  border-radius: 12px;
  font-family: "miller-banner", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--clinic-text);
  box-shadow:
    inset 2px 2px 4px var(--clinic-shadow-inset-dark),
    inset -2px -2px 4px var(--clinic-shadow-inset-light);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
	 letter-spacing: 1px;
}

.clinic-faq-question:hover {
  color: var(--tc-gold-border);
}

.clinic-faq-question::after {
  content: "+";
  font-size: calc(24px * var(--tc-font-scale));
  color: var(--tc-gold-border);
}

.clinic-faq-item.active .clinic-faq-question::after {
  content: "-";
}

.clinic-faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--clinic-text-soft);
}

.clinic-faq-item.active .clinic-faq-answer {
  padding: 20px;
  max-height: 1500px;
}

/* === SPM: How Care Works (dark theme) === */
.tc-careflow{
  display:flex;
    flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(213,199,163,.10);
}

/* Portrait: stack into a column */
@media (orientation: portrait){
  .tc-careflow{
    flex-direction:column;
  align-items:stretch;
  }
  .tc-flow-step{
    align-self: unset !important;
  }
}

.tc-flow-step{
  flex:1;
  padding:18px 16px;
  border:1px solid rgba(213,199,163,.10);
  border-radius:14px;
  background:rgba(12,13,15,.20);
  min-width:0;
  flex-grow: 1;
  align-self: stretch;
}

.tc-flow-kicker{
  font-size: calc(12px * var(--tc-font-scale));
  letter-spacing:.08em;
  opacity:.78;
  text-transform:uppercase;
  margin-bottom:8px;
}

.tc-flow-title{
  margin:0 0 10px 0;
  font-size: 15px;
  letter-spacing:.02em;
}

.tc-flow-list{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
}

.tc-flow-list li{
  padding:7px 0;
  border-top:1px solid rgba(213,199,163,.07);
  opacity:.92;
}

.tc-flow-list li:first-child{
  border-top:none;
  padding-top:0;
}

.tc-flow-tag{
  font-size: calc(12px * var(--tc-font-scale));
  opacity:.65;
}

/* =========================
   Care Flow - Light Theme
   ========================= */
.theme-light .tc-careflow,
.theme_color_tc.theme-light .tc-careflow {
  border-top: 1px solid rgba(213, 199, 163, 0.2);
	width: 100%;
}

.theme-light .tc-flow-step,
.theme_color_tc.theme-light .tc-flow-step {
  background: var(--color-bg-default);
  border: 1px solid rgba(213, 199, 163, 0.3);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.15),
    inset -2px -2px 4px rgba(var(--light), 0.6),
    2px 2px 6px rgba(var(--shadow), 0.1),
    -2px -2px 6px rgba(var(--light), 0.7);
}

.theme-light .tc-flow-kicker,
.theme_color_tc.theme-light .tc-flow-kicker {
  color: var(--color-active);
  opacity: 0.85;
}

.theme-light .tc-flow-title,
.theme_color_tc.theme-light .tc-flow-title {
  color: var(--color-active);
}

.theme-light .tc-flow-list,
.theme_color_tc.theme-light .tc-flow-list {
  color: rgb(80, 75, 70);
}

.theme-light .tc-flow-list li,
.theme_color_tc.theme-light .tc-flow-list li {
  color: rgb(80, 75, 70);
  border-top: 1px solid rgba(213, 199, 163, 0.85);
  opacity: 0.9;
}

.theme-light .tc-flow-tag,
.theme_color_tc.theme-light .tc-flow-tag {
  color: rgb(100, 95, 90);
  opacity: 0.75;
}

/* =========================
   Care Flow - Cream Theme (TONED)
   ========================= */
.theme-cream .tc-careflow,
.theme_color_tc.theme-cream .tc-careflow,
.theme-dppc .tc-careflow,
.theme_color_tc.theme-dppc .tc-careflow {
  border-top: 1px solid rgba(179, 145, 87, 0.22);
  width: 100%;
}

.theme-cream .tc-flow-step,
.theme_color_tc.theme-cream .tc-flow-step,
.theme-dppc .tc-flow-step,
.theme_color_tc.theme-dppc .tc-flow-step {
  background: var(--color-bg-default);
  border: 1px solid rgba(179, 145, 87, 0.4);
  box-shadow:
    inset 3px 3px 4px rgba(var(--shadow), 0.34),
    inset -3px -3px 6px rgba(var(--light), 0.75),
    3px 3px 4px rgba(var(--shadow), 0.32),
    -3px -3px 6px rgba(var(--light), 0.55);
}

.theme-cream .tc-flow-kicker,
.theme_color_tc.theme-cream .tc-flow-kicker,
.theme-dppc .tc-flow-kicker,
.theme_color_tc.theme-dppc .tc-flow-kicker {
  color: var(--color-active);
  opacity: 0.86;
}

.theme-cream .tc-flow-title,
.theme_color_tc.theme-cream .tc-flow-title,
.theme-dppc .tc-flow-title,
.theme_color_tc.theme-dppc .tc-flow-title {
  color: #1f1f1f;
}

.theme-cream .tc-flow-list,
.theme_color_tc.theme-cream .tc-flow-list,
.theme-dppc .tc-flow-list,
.theme_color_tc.theme-dppc .tc-flow-list {
  color: #1f1f1f;
}

.theme-cream .tc-flow-list li,
.theme_color_tc.theme-cream .tc-flow-list li,
.theme-dppc .tc-flow-list li,
.theme_color_tc.theme-dppc .tc-flow-list li {
  color: #1f1f1f;
  border-top: 1px solid rgba(179, 145, 87, 0.45);
  opacity: 0.9;
}

.theme-cream .tc-flow-tag,
.theme_color_tc.theme-cream .tc-flow-tag,
.theme-dppc .tc-flow-tag,
.theme_color_tc.theme-dppc .tc-flow-tag {
  color: rgba(31, 31, 31, 0.72);
  opacity: 0.85;
}

.theme-cream .tc-flow-footnote,
.theme_color_tc.theme-cream .tc-flow-footnote,
.theme-dppc .tc-flow-footnote,
.theme_color_tc.theme-dppc .tc-flow-footnote {
  color: rgba(31, 31, 31, 0.78);
  border-top: 1px solid rgba(179, 145, 87, 0.16);
}

.tc-flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-width:34px;
  opacity:.35;
  font-size: calc(18px * var(--tc-font-scale));
  user-select:none;
}

.tc-flow-footnote{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(213,199,163,.10);
  font-size: calc(12.5px * var(--tc-font-scale));
  opacity:.75;
}

/* responsive */
@media (max-width: 920px){
  .tc-flow{
    flex-direction:column;
  }
  .tc-flow-arrow{
    width:100%;
    min-width:0;
    height:22px;
  }
}

/* Example inline container (optional) */
.inline-row{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* =========================================
   TC Pulse Arrow (isolated, dark-theme)
   Uses existing theme tokens:
   --color-bg-default, --clinic-shadow-*, --color-active-hover, etc.
   ========================================= */

.tc-pulse-arrow{
  -webkit-tap-highlight-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  /* inline-friendly */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 999px;

  /* dark surface */
  background: var(--clinic-surface);

  box-shadow:
    inset 0 0 0 1px rgba(213, 199, 163, 0.18),
    0.4rem 0.4rem 0.9rem var(--clinic-shadow-dark),
    -0.4rem -0.4rem 0.9rem var(--clinic-shadow-light);

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.tc-pulse-arrow::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;

  /* pulse ring */
  box-shadow:
    0 0 0 1px rgba(213, 199, 163, 0.18),
    0.35rem 0.35rem 0.8rem rgba(0, 0, 0, 0.55),
    -0.35rem -0.35rem 0.8rem rgba(236, 234, 231, 0.05);

  animation: tc-waves 2.8s linear infinite;
  pointer-events: none;
}

.tc-pulse-arrow svg{
  transform: rotate(90deg);
  width: 24px;
  height: 24px;
  fill: var(--color-active-hover);
  opacity: 0.9;
}

.tc-pulse-arrow:hover{
  transform: translateY(-1px);
}

.tc-pulse-arrow:focus-visible{
  outline: 2px solid var(--color-active);
  outline-offset: 4px;
}

.tc-pulse-arrow:active{
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 1px rgba(213, 199, 163, 0.24),
    inset 0.3rem 0.3rem 0.6rem var(--clinic-shadow-inset-dark),
    inset -0.3rem -0.3rem 0.6rem var(--clinic-shadow-inset-light);
}

@keyframes tc-waves{
  0%{ transform: scale(1); opacity: 0.95; }
  70%{ opacity: 0.35; }
  100%{ transform: scale(2); opacity: 0; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tc-pulse-arrow::after{ animation: none; opacity: 0.6; transform: scale(1.15); }
}

/* Arrow direction: right in landscape, down in portrait */
@media (orientation: portrait){
  .tc-pulse-arrow svg{
    transform: rotate(90deg);
  }
}
@media (orientation: portrait){
  .tc-pulse-arrow{
    margin: 2px auto;
  }
}

/* =========================
   Pulse Arrow - Light Theme
   ========================= */
.theme-light .tc-pulse-arrow,
.theme_color_tc.theme-light .tc-pulse-arrow {
  background: var(--color-bg-default);
  box-shadow:
    inset 0 0 0 1px rgba(213, 199, 163, 0.3),
    0.4rem 0.4rem 0.9rem rgba(var(--shadow), 0.2),
    -0.4rem -0.4rem 0.9rem rgba(var(--light), 0.8);
}

.theme-light .tc-pulse-arrow::after,
.theme_color_tc.theme-light .tc-pulse-arrow::after {
  box-shadow:
    0 0 0 1px rgba(213, 199, 163, 0.3),
    0.35rem 0.35rem 0.8rem rgba(var(--shadow), 0.15),
    -0.35rem -0.35rem 0.8rem rgba(var(--light), 0.6);
}

.theme-light .tc-pulse-arrow svg,
.theme_color_tc.theme-light .tc-pulse-arrow svg {
  fill: var(--tc-gold-border);
  opacity: 0.85;
}

.theme-light .tc-pulse-arrow:active,
.theme_color_tc.theme-light .tc-pulse-arrow:active {
  box-shadow:
    inset 0 0 0 1px rgba(213, 199, 163, 0.4),
    inset 0.3rem 0.3rem 0.6rem rgba(var(--shadow), 0.2),
    inset -0.3rem -0.3rem 0.6rem rgba(var(--light), 0.6);
}

/* =========================
   Pulse Arrow - Cream Theme (TONED)
   ========================= */
.theme-cream .tc-pulse-arrow,
.theme_color_tc.theme-cream .tc-pulse-arrow,
.theme-dppc .tc-pulse-arrow,
.theme_color_tc.theme-dppc .tc-pulse-arrow {
  background: rgba(247, 244, 237, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(179, 145, 87, 0.32),
    0.4rem 0.4rem 0.9rem rgba(var(--shadow), 0.22),
    -0.4rem -0.4rem 0.9rem rgba(var(--light), 0.72);
}

.theme-cream .tc-pulse-arrow::after,
.theme_color_tc.theme-cream .tc-pulse-arrow::after,
.theme-dppc .tc-pulse-arrow::after,
.theme_color_tc.theme-dppc .tc-pulse-arrow::after {
  box-shadow:
    0 0 0 1px rgba(179, 145, 87, 0.30),
    0.35rem 0.35rem 0.8rem rgba(var(--shadow), 0.16),
    -0.35rem -0.35rem 0.8rem rgba(var(--light), 0.58);
}

.theme-cream .tc-pulse-arrow.tc-pulse-arrow--darkwaves::after,
.theme_color_tc.theme-cream .tc-pulse-arrow.tc-pulse-arrow--darkwaves::after,
.theme-dppc .tc-pulse-arrow.tc-pulse-arrow--darkwaves::after,
.theme_color_tc.theme-dppc .tc-pulse-arrow.tc-pulse-arrow--darkwaves::after {
  /* Keep cream button, but use dark-theme wave ring */
  box-shadow:
    0 0 0 1px rgba(213, 199, 163, 0.18),
    0.35rem 0.35rem 0.8rem rgba(0, 0, 0, 0.55);
}

.theme-cream .tc-pulse-arrow.tc-pulse-arrow--darkwaves,
.theme_color_tc.theme-cream .tc-pulse-arrow.tc-pulse-arrow--darkwaves,
.theme-dppc .tc-pulse-arrow.tc-pulse-arrow--darkwaves,
.theme_color_tc.theme-dppc .tc-pulse-arrow.tc-pulse-arrow--darkwaves {
  /* Remove the light-side glow for this one button */
  box-shadow:
    inset 0 0 0 1px rgba(179, 145, 87, 0.32),
    0.4rem 0.4rem 0.9rem rgba(var(--shadow), 0.22);
}

.theme-cream .tc-pulse-arrow svg,
.theme_color_tc.theme-cream .tc-pulse-arrow svg,
.theme-dppc .tc-pulse-arrow svg,
.theme_color_tc.theme-dppc .tc-pulse-arrow svg {
  fill: var(--color-active);
  opacity: 0.95;
}

.theme-cream .tc-pulse-arrow:active,
.theme_color_tc.theme-cream .tc-pulse-arrow:active,
.theme-dppc .tc-pulse-arrow:active,
.theme_color_tc.theme-dppc .tc-pulse-arrow:active {
  box-shadow:
    inset 0 0 0 1px rgba(179, 145, 87, 0.42),
    inset 0.3rem 0.3rem 0.6rem rgba(var(--shadow), 0.22),
    inset -0.3rem -0.3rem 0.6rem rgba(var(--light), 0.62);
}

/* === Clinic DL (How Care Works – Dark Theme) === */
.clinic-dl {
  margin: 0;
  padding: 0;
}

.clinic-dl dt {
  margin-top: 18px;
  padding-top: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-active-hover);
  border-top: 1px solid rgba(213, 199, 163, 0.12);
  font-size: calc(18px * var(--tc-font-scale));
}

.clinic-dl dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.clinic-dl dd {
  margin: 6px 0 0 0;
  padding-left: 14px;
  font-size: calc(12pt * var(--tc-font-scale));
  line-height: 1.45;
  color: rgba(236, 234, 231, 0.75);
  border-left: 2px solid rgba(213, 199, 163, 0.15);
}

/* Optional: tighten on small screens */
@media (max-width: 640px) {
  .clinic-dl dt {
    font-size: calc(17px * var(--tc-font-scale));
  }

  .clinic-dl dd {
    font-size: calc(14.5px * var(--tc-font-scale));
  }
}

/* =========================
   FAQ - Light Theme
   ========================= */
.theme-light .clinic-faq-question,
.theme_color_tc.theme-light .clinic-faq-question {
  background: var(--color-bg-default);
  color: rgb(80, 75, 70);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.2),
    inset -2px -2px 4px rgba(var(--light), 0.6);
}

.theme-light .clinic-faq-question:hover,
.theme_color_tc.theme-light .clinic-faq-question:hover {
  color: var(--tc-gold-border);
}

.theme-light .clinic-faq-answer,
.theme_color_tc.theme-light .clinic-faq-answer {
  color: rgb(80, 75, 70);
}

/* =========================
   FAQ - Cream Theme (TONED)
   ========================= */
.theme-cream .clinic-faq-question,
.theme_color_tc.theme-cream .clinic-faq-question,
.theme-dppc .clinic-faq-question,
.theme_color_tc.theme-dppc .clinic-faq-question {
  background: var(--color-bg-default);
  color: #1f1f1f;
  border: 1px solid rgba(179, 145, 87, 0.26);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.14),
    inset -2px -2px 4px rgba(var(--light), 0.68),
    2px 2px 6px rgba(var(--shadow), 0.12),
    -2px -2px 6px rgba(var(--light), 0.55);
}

.theme-cream .clinic-faq-question:hover,
.theme_color_tc.theme-cream .clinic-faq-question:hover,
.theme-dppc .clinic-faq-question:hover,
.theme_color_tc.theme-dppc .clinic-faq-question:hover {
  color: var(--color-active);
  border-color: rgba(179, 145, 87, 0.36);
  box-shadow:
    inset 2px 2px 4px rgba(var(--shadow), 0.14),
    inset -2px -2px 4px rgba(var(--light), 0.68),
    2px 2px 6px rgba(var(--shadow), 0.10),
    -2px -2px 6px rgba(var(--light), 0.55),
    0 0 12px rgba(198, 165, 108, 0.18);
}

.theme-cream .clinic-faq-question::after,
.theme_color_tc.theme-cream .clinic-faq-question::after,
.theme-dppc .clinic-faq-question::after,
.theme_color_tc.theme-dppc .clinic-faq-question::after {
  color: var(--color-active);
}

.theme-cream .clinic-faq-answer,
.theme_color_tc.theme-cream .clinic-faq-answer,
.theme-dppc .clinic-faq-answer,
.theme_color_tc.theme-dppc .clinic-faq-answer {
  color: rgba(31, 31, 31, 0.85);
}

/* =========================
   Clinic DL - Light Theme
   ========================= */
.theme-light .clinic-dl dt,
.theme_color_tc.theme-light .clinic-dl dt {
  color: var(--tc-surface);
  border-top: 1px solid rgba(213, 199, 163, 0.55);
}

.theme-light .clinic-dl dd,
.theme_color_tc.theme-light .clinic-dl dd {
  color: rgba(56,53,49,1.00);
  border-left: 2px solid rgba(213, 199, 163, 0.6);
}

/* =========================
   Clinic DL - Cream Theme (TONED)
   ========================= */
.theme-cream .clinic-dl dt,
.theme_color_tc.theme-cream .clinic-dl dt {
  color: #1f1f1f;
  border-top: 1px solid rgba(179, 145, 87, 0.35);
}

.theme-cream .clinic-dl dd,
.theme_color_tc.theme-cream .clinic-dl dd {
  color: rgba(31, 31, 31, 0.78);
  border-left: 2px solid rgba(179, 145, 87, 0.35);
}

.theme-cream .clinic-dl dd a,
.theme_color_tc.theme-cream .clinic-dl dd a {
  color: #b39157;
  text-decoration-color: rgba(179, 145, 87, 0.35);
}

.theme-cream .clinic-dl dd a:hover,
.theme_color_tc.theme-cream .clinic-dl dd a:hover {
  color: #c6a56c;
  text-decoration-color: rgba(198, 165, 108, 0.5);
}

/* DPPC: Clinic DL text tweaks (keep gold accents elsewhere) */
.theme-dppc .clinic-dl dt,
.theme_color_tc.theme-dppc .clinic-dl dt {
  color: #1E1F21;
  border-top: 1px solid rgba(179, 145, 87, 0.35);
}

.theme-dppc .clinic-dl dd,
.theme_color_tc.theme-dppc .clinic-dl dd {
  color: rgba(31, 31, 31, 0.78);
  border-left: 2px solid rgba(179, 145, 87, 0.35);
}

.theme-dppc .clinic-dl dd a,
.theme_color_tc.theme-dppc .clinic-dl dd a {
  color: #2F3A44;
  text-decoration-color: rgba(179, 145, 87, 0.35);
}

.theme-dppc .clinic-dl dd a:hover,
.theme_color_tc.theme-dppc .clinic-dl dd a:hover {
  color: #c6a56c;
  text-decoration-color: rgba(198, 165, 108, 0.5);
}

/* =========================
   THICK Concierge – list hierarchy + readability
   ========================= */

/* Remove native disclosure markers */
.tc-concierge-list details > summary::-webkit-details-marker { display: none; }
.tc-concierge-list details > summary::marker { content: ""; }

/* Chevron rotation only */
.tc-concierge-list summary .tc-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}
.tc-concierge-list details[open] summary .tc-chev {
  transform: rotate(180deg);
}

/* Top-level list spacing only */
.tc-concierge-list > ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
}

/* =========================
   Nested sublist styling
   ========================= */

.tc-concierge-sublist {
  margin-top: 10px;
  margin-left: 2px;

  /* More left, less right */
  padding: 10px 10px 10px 22px;

  /* Visual separation */
  border-left: 1px solid rgba(213, 199, 163, 0.25);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;

  /* Typography */
  font-size: 0.95em;
  line-height: 1.35;
  opacity: 0.9;

  /* Kill default bullets */
  list-style: none;
}

/* Dash bullets */
.tc-concierge-sublist > li {
  position: relative;
  margin: 6px 0;
  padding-left: 12px;
}

.tc-concierge-sublist > li::before {
  content: "-";
  position: absolute;
  left: 0;
  opacity: 0.6;
}

/* Improve summary hit area */
.tc-concierge-list summary {
  cursor: pointer;
}


/* =========================
   THICK Concierge + SPM DL – <details>/<summary> polish (canonical)
   ========================= */

/* 1) Remove native disclosure markers (all browsers) */
.tc-concierge-list details > summary::-webkit-details-marker,
.tc-dl-details details > summary::-webkit-details-marker {
  display: none;
}
.tc-concierge-list details > summary::marker,
.tc-dl-details details > summary::marker {
  content: "";
}

/* 2) Rotate ONLY the chevron span (prevents flipping wrapper text) */
.tc-concierge-list summary .tc-chev,
.tc-dl-details summary .tc-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}
.tc-concierge-list details[open] summary .tc-chev,
.tc-dl-details details[open] summary .tc-chev {
  transform: rotate(180deg);
}

/* 3) Concierge: improve scannability for top-level list only */
.tc-concierge-list > ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4) Nested sublists (Concierge + Includes): dash bullets + subtle panel */
.tc-concierge-sublist {
  margin-top: 10px;
  margin-left: 2px;

  /* More left, less right */
  padding: 10px 10px 10px 22px;

  /* Visual separation */
  border-left: 1px solid rgba(213, 199, 163, 0.25);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;

  /* Readability */
  font-size: 0.95em;
  line-height: 1.35;
  opacity: 0.9;

  /* Kill default bullets */
  list-style: none;
}

.tc-concierge-sublist > li {
  position: relative;
  margin: 6px 0;
  padding-left: 12px;
}
.tc-concierge-sublist > li::before {
  content: "-";
  position: absolute;
  left: 0;
  opacity: 0.6;
}

/* 5) Tighten nested list gap slightly when used inside details */
.tc-concierge-list details ul {
  margin-top: 10px;
}

/* 6) Make summaries clickable (Concierge + Includes lists) */
.tc-concierge-list summary {
  cursor: pointer;
}

/* 7) SPM <dl> details: force Concierge-style inline chevron behavior
      (prevents flex/right-justified chevrons and preserves dl rhythm) */
.tc-dl-details details > summary {
  display: inline;
  list-style: none;
  cursor: pointer;
}

/* 8) SPM <dl> detail body panel (matches sublist visual language) */
.tc-detail-body {
  margin-top: 10px;
  margin-left: 2px;
  padding: 10px 10px 10px 22px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  font-size: 0.95em;
  line-height: 1.35;
  opacity: 1;
  color: #B39157;
}

/* =========================
   DPPC theme: text color overrides
   - Replace gold text (#b39157) with slate (#2F3A44) where explicitly set
   - Replace ink (#1f1f1f) with graphite (#1E1F21) where explicitly set
   ========================= */

.theme-dppc .tc-detail-body,
.theme_color_tc.theme-dppc .tc-detail-body {
  color: #2F3A44;
}

.theme-dppc .clinic-btn-ghost,
.theme_color_tc.theme-dppc .clinic-btn-ghost {
  color: #1E1F21;
}

.theme-dppc .clinic-final-cta-small,
.theme_color_tc.theme-dppc .clinic-final-cta-small {
  color: #1E1F21;
}

.theme-dppc .tc-flow-title,
.theme_color_tc.theme-dppc .tc-flow-title,
.theme-dppc .tc-flow-list,
.theme_color_tc.theme-dppc .tc-flow-list,
.theme-dppc .tc-flow-list li,
.theme_color_tc.theme-dppc .tc-flow-list li {
  color: #1E1F21;
}

.theme-dppc .clinic-faq-question,
.theme_color_tc.theme-dppc .clinic-faq-question {
  color: #1E1F21;
}