:root {

  --primary: #2a5c82;
  --secondary: #5ba4e6;
  --secondary: #31d2f7; /* Light blue from darts for PainPoint */
  --background: #c5c5c5;
  --text: var(--primary);


  --primary: #2A374D;    /* Deep navy */
  --primary: #003d4d; 
  --primary: #4a254d;
  --primary: #0a2342; /* midnight navy */
  --secondary: #4A90E2;  /* Friendly blue */
  --accent: #00C1B3;     /* Modern teal */
  /* --accent: #FF6B6B;   */
  --accent: #f03a17;   /* Tomato red, also darts for PainPoint */
  --bright-background: #FFFFFF; /* Clean white */
  --muted: #718096;      /* Gray for secondary text */


  --primary: #2A3F5F;    /* Deep navy blue: Authority, trust, professionalism */
  --secondary: #3A5A7F;  /* Softened navy (hover): Subtle contrast for interactions */
  --background: #F8F9FA; /* Off-white: Clean, calm, reduces eye strain */
  --accent: #2EC4B6;     /* Vibrant teal: Energy, health, draws attention to CTAs */
  --success: #28A745;    /* Green (optional): Positive feedback, confirmations */
  --error: #DC3545;      /* Red (optional): Errors/warnings */
  --text-primary: #2D3436;/* Near-black: Readable body text */
  --text-secondary: #6C757D; /* Gray: Subtle labels/descriptions */



  --primary: #1A535C;     /* Deep teal: Trustworthy, professional, pairs beautifully with coral */
  --secondary: #4ECDC4;   /* Soft turquoise (hover): Fresh contrast for interactions */
  --background: #F7FFF7;  /* Warm off-white: Subtle green tint for calm, supports readability */
  --accent: #FF6B6B;      /* Your coral drawing color: Vibrant focus for CTAs and anatomy marks */
  --success: #4CAF50;     /* Green: Positive feedback (e.g., "Diagnosis Complete") */
  --error: #EF476F;       /* Pink-red: Errors/warnings (harmonizes with coral) */
  --text-primary: #2D3436;/* Near-black: High contrast for body text */
  --text-secondary: #556E7A; /* Muted teal-gray: Secondary text/icons */



}

html {
  overflow-x: hidden;
  /* contain: paint; */
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


a {
  color: var(--secondary);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--secondary);
  color: var(--background);
}


input[type="checkbox"] {
  accent-color: var(--primary);
}

h1 {
  color: var(--text-primary);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

body {
    display: flex;
    flex-direction: column;
  font-family: "Segoe UI", system-ui, sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  /* background-color: #f8f9fa; */
  /* background-color: #f8f9fa; */

}


body::before {
  content: "";
  position: absolute;
  background-attachment: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-image: url(assets/what-the-hex.png); */
  /* background-color: #f8f9fa; */
  mask-image: linear-gradient(to bottom, black, transparent 50%);
  z-index: 0;
  opacity: 0.4;
  background-color: var(--secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(165,960,483)'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%234ECDC4'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='533' height='444.2' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.14'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E<!-- Credits for this one goes to SVGBackgrounds.com. I used the Subtle Prism SVG. Check out their nice backgrounds and SVGs :)  -->");
  background-attachment: fixed;
  background-size: cover;
  pointer-events: none;
  /* display: none; */
}


.background-container {
  z-index: 0;
  position: relative;
}

.background-container:first-of-type, .header-line {
  height: clamp(0em, 10vw, 14vh);
}

.header-line {
  display: none;
    position: sticky;
    width: 100vw;
    height: 0;
    border-bottom: solid 1px var(--background);
    z-index: 99;
    top: 4em;
    /* padding-top: 4em; */
}

.footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 100em;
    margin: auto;
    padding-top: 1em;
}

main {
  position: relative;
  z-index: 1;  
}

.text-container {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
  z-index: 1;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  gap: 2rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.header {
  /* grid-column: 1 / -1; */
  text-align: center;
  /* margin-bottom: 2rem; */
  z-index: 100;
  padding: 1rem 0;
  text-align: center;
  background: linear-gradient(180deg, #000000ab, transparent);
  backdrop-filter: blur(16px);
  position: fixed;
  width: 100%;
  height: 4em;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.04, 0.97);
}

.app-name {
  color: var(--primary);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.description-container {
  width: 100%;
  backdrop-filter: blur(16px);
  z-index: 2;
  position: relative;
}

.app-description {
  padding-bottom: 2em;
}

.above-the-fold {
  z-index: 5;
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.tagline {
  font-size: 1.2rem;
  color: var(--text);
  /* max-width: 800px; */
  margin: 0 auto;
  padding-top: 3em;
  border-top: solid 1px var(--background);
  width: 100%;
}

.panel-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    flex-wrap: wrap;
}




.cosmic-pattern {
  position: relative;
  background: var(--background);
}

.cosmic-pattern::before, .cosmic-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 50%);
  z-index: 0;
  opacity: 0.4;
  background-color: var(--secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(165,960,483)'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%234ECDC4'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='533' height='444.2' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.14'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E<!-- Credits for this one goes to SVGBackgrounds.com. I used the Subtle Prism SVG. Check out their nice backgrounds and SVGs :)  -->");
  background-attachment: fixed;
  background-size: cover;
  pointer-events: none;
  background-blend-mode: multiply;
  filter: blur(6px);
  /* animation: gridScroll 10s ease infinite alternate; */

}

.cosmic-pattern::after {
  mask-image: linear-gradient(to top, black, transparent 50%) !important;
}

.gradient-heading {
  font: 800 2.5rem / 1.2 'Playfair Display', serif;
  background: linear-gradient(45deg, var(--primary), #4cccc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  min-height: 3.5em;
  margin: 2rem 0;
  h3 {
      font-size: 1em;
      font-weight: 200;
  }
}

.solution-badge {
    background: var(--background);
    padding: 1rem;
    border-radius: 16px;
    backdrop-filter: blur(6px);
}
        

.solution-badge::before {
    content: "→ ";
}
.hologram {
  position: relative;
  background: #ffffff94;
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(26, 84, 92, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.hologram::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%);
  border-radius: 18px;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.4;
}

.hologram:hover {
  transform: translateY(-5px);
}

.profile-container {
  display: flex;
  column-gap: 1em;
  flex-wrap: nowrap;
  /* flex-direction: row-reverse; */
  align-items: center;
}

.hologram-content {
  display: flex;
  column-gap: 1em;
  flex-wrap: nowrap;
  flex-direction: column;
  /* align-items: flex-start; */
}

.founder-bio {
  /* max-width: 25em; */
  text-align: end;
}

.avatar-container {
  max-width: min-content;
  max-height: min-content;
}

.floating-avatar {
  display: none;
  height: 120px;
width: 110px;
border-radius: 16px;
object-position: 100%;
object-fit: cover;
transform: translateZ(30px);
opacity: .8;
/* mask-image: linear-gradient(90deg, black, transparent); */
}

/* .avatar-glow {
  position: absolute;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle at 50% 50%, 
    rgba(76, 204, 196, 0.2) 0%, 
    transparent 60%
  );
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
} */

.structure-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.structure-card {
  padding: 1.5rem;
  background: var(--bright-background);
  border-radius: 12px;
  border: 1px solid rgba(26, 84, 92, 0.1);
  transition: all 0.3s ease;
}

.structure-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(26, 84, 92, 0.1);
}

.structure-card[data-depth="surface"] {
  border-left: 4px solid #4cccc4;
}

.anatomy-map {
  position: relative;
  margin: 4rem 0;
}

.map-visual {
  position: absolute;
  width: 40%;
  height: 400px;
  right: 0;
  perspective: 1000px;
}

.nerve-path {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('nerve-pattern.svg');
  opacity: 0.1;
  animation: float3D 12s ease-in-out infinite;
}

@keyframes float3D {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(10px, 5px, 20px) rotate(3deg); }
  66% { transform: translate3d(-5px, 10px, -10px) rotate(-2deg); }
}

@media (max-width: 768px) {
  .gradient-heading {
    font-size: 2.5rem;
  }
  
  .container {
    padding: 1rem;
    flex-direction: column;
  }
  
  .map-visual {
    display: none;
  }
}



.anatomap-panel {
  max-width: fit-content;
}

.canvas-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}

#bodyCanvas {
  width: 100%;
  touch-action: none;
  max-height: 80vh;
  transform: translateZ(0);
  cursor: crosshair;
}

.input-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.form-headline {
  color: var(--primary) !important;
  font-size: 1.4rem;
  font-weight: 700 !important;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

textarea {
  min-height: 120px;
  resize: vertical;
  transition: inherit !important;
}


#mainInput::placeholder {
  color: #666;
  opacity: 1; /* Firefox fix */
}




.checkbox-group {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

button {
  padding: 0.75rem 1.5rem;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  background-color: var(--secondary);
}

@media (max-width: 768px) {
  .container {
    /* grid-template-columns: 1fr; */
    padding: 1rem;
  }

  #bodyCanvas {
    /*height: 400px;*/
  }
}

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  body {
      font-family: 'Inter', system-ui, sans-serif;
      background-color: var(--background);
      color: var(--text);
      line-height: 1.6;
  }

  /* .header {
      background: var(--primary);
      padding: 1rem 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  } */

  .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
  }

  /* Main Content */
  .hero {
      text-align: center;
      padding: 4rem 2rem;
      background: linear-gradient(45deg, var(--primary), #1A2639);
      color: white;
  }

  .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      font-weight: 600;
  }

  .hero p {
      color: rgba(255,255,255,0.9);
      max-width: 600px;
      margin: 0 auto;
  }

  .disclaimer-bar-warn {
      /* display: none; */
      background: #FFF3E0;
      padding: 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: var(--accent);
      border-bottom: 1px solid #FFCCBC;
      z-index: 100;
  }




  .panel {
      position: relative;
      background: var(--bright-background);
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: 1px solid rgba(0,0,0,0.05);
  }

  .input-group label {
      font-weight: 500;
      color: var(--primary);
      margin-bottom: 0.5rem;
  }


  input[type="checkbox"] {
      width: fit-content;
  }

  

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Inter', system-ui, sans-serif;
  }

  body {
      background: var(--background);
      color: var(--text);
      line-height: 1.6;
      min-height: 100vh;
  }

  .main-title {
      font-size: 2.8rem;
      color: var(--primary);
      margin-bottom: 1rem;
      line-height: 1.2;
  }


  .cta-section {
      text-align: center;
      padding: 2rem 5%;
      /* margin: 3rem 0; */
      background: linear-gradient(15deg, var(--primary), #1A2639);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      h1, h2, h3 {
        color: var(--background);
        margin: 1rem;    
      }
  }

  .cta-button {
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 1rem 2rem;
      font-size: 1.2rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin: auto;
  }

  .scroll-button {
    transform: translateY(0);
    transition: all 0.8s ease, background-color 0.2s ease;
    background-color: var(--secondary);
    background: transparent;
    backdrop-filter: blur(6px) brightness(0.7);
    border-style: solid;
    border-width: 2px;
    border-color: var(--secondary);
    font-size: 1.5em;
  }

  button#submitBtn {
      transform: translateY(0);
      transition: all 0.8s ease, background-color 0.2s ease;
      background-color: var(--secondary);
      background: transparent;
      background: var(--primary);
      backdrop-filter: blur(6px) brightness(0.7);
      border-style: solid;
      border-width: 2px;
      border-color: var(--secondary);
      font-size: 1.5em;
      margin-top: 1em;
  }

  .cta-button, .scroll-button {
    margin: .8rem 0;
  }

  .scroll-button:hover, #submitBtn:hover {
    background-color: #ffffffbf;
    box-shadow: 0 0 40px 40px var(--secondary) inset;
  }

  .value-item {
    background: var(--bright-background);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    max-width: 48em;
    list-style: inside;
  }

  .feature-list {
    display: flex;
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    gap: 1.5rem;
    padding: 2rem 5%;
    padding-bottom: 10em;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .feature-card {
      background: #ffffff9c;
      border-radius: 16px;
      backdrop-filter: blur(16px);
      padding: 2rem;
      text-align: center;
      transition: transform 0.3s ease;
      /* border: 1px solid rgba(0,0,0,0.05); */
      border-width: medium;
      border: var(--primary);
      border-style: solid;
      max-width: 23em;
      min-width: 16vw;
  }

  .feature-card:hover {
      transform: translateY(-5px);
  }

  .fold-fader, .fold-fader-top {
    text-align: center;
    margin-top: 3rem;
    width: 100%;
    height: clamp(13em, 10vw, 18em);
    background: linear-gradient(0deg, #1a283a, transparent);
    color: white;
    padding: 1.5rem;
    bottom: 0;
    position: absolute;
    border-bottom: var(--primary) solid;
    pointer-events: none;
    /* display: none; */
  }

  .fold-fader-top {
    top: 0;
    bottom: inherit;
    background: linear-gradient(180deg, #1a283a, transparent);
    z-index: 1;
    border-bottom: none;
    margin: 0;
    padding: 0;
    display: none;
  }
  .preview-section {
      text-align: center;
      padding: 4rem 5%;
      background: linear-gradient(15deg, var(--primary), #1A2639);
      color: white;
      overflow: hidden;
  }

  .disclaimer {
      background: var(--bright-background);
      padding: 1rem;
      /* margin: 1.5rem 0; */
      border-radius: 12px;
      box-shadow: 0 2px 15px rgba(0,0,0,0.05);
      text-align: center;
  }

  footer {
      background: var(--text);
      color: white;
      padding: 2rem 5%;
      margin-top: 4rem;
  }



/* demo animation */

.process-visualization {
position: relative;
width: 256px;
height: 512px;
margin: 2rem auto;
}

#previewCanvas, #squiggleCanvas {
position: absolute;
left: 0;
transition: opacity 0.5s;
border-radius: 16px;
transform: translateZ(0);
}

.demo-structures-container {
position: absolute;
/* left: clamp(155px, 20vw, 312px); */
top: 50%;
text-align: left;
transform: translate(clamp(182px, 20vw, 312px), -50%);
width: 180px;
padding: 1rem;
/* background: var(--primary); */
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
backdrop-filter: blur(16px);
}

.llm-visual {
position: absolute;
/* bottom: -60px; */
left: 50%;
transform: translateX(-50%);
opacity: 0;
}

.structure-name {
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
list-style-position: inside;
text-indent: -1.5em;
padding-left: 1.5em;
margin-top: 0.4em;
&::marker {
color: var(--accent);
}
}

.preview-cta-button {
opacity: 0;
transform: translateY(0);
transition: all 0.8s ease, background-color 0.2s ease;
background-color: var(--secondary);
background: transparent;
backdrop-filter: blur(6px) brightness(0.7);
border-style: solid;
border-width: 2px;
border-color: var(--secondary);
font-size: 1.5em;
}

.preview-cta-button:hover {
/* background-color: var(--primary); */
background-color: #ffffffbf;
box-shadow: 0 0 40px 40px var(--secondary) inset;
}


.replay-button {
  opacity: 0;
  position: absolute;
  transform: translateY(0);
  transition: all 0.8s ease, background-color 0.2s ease, opacity 1.2s ease;
  background-color: var(--secondary);
  background: transparent;
  backdrop-filter: blur(6px) brightness(0.7);
  border-style: solid;
  border-width: 2px;
  border-color: var(--background);
  border-radius: 50%;
  height: 1em;
  width: 1em;
  font-weight: inherit;
  padding: 1em;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  }

.replay-button:hover {
  transform: rotate(-90deg);
}



@keyframes particle-flow {
0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
100% { transform: translate(200px, 50px) scale(0); opacity: 0; }
}

@keyframes process-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes processing-glow {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}

@keyframes flicker-border {
0% { box-shadow: inset 0 0 0px 0px var(--accent); }
1% { box-shadow: inset 0 0 2px 1.2px var(--accent); }
5%, 50% { box-shadow: inset 0 0 1px 0.5px var(--accent); }
10%, 80% { box-shadow: inset 0 0 3px 1.5px var(--accent); }
15%, 70% { box-shadow: inset 0 0 2.5px 1.25px var(--accent); }
20%, 60% { box-shadow: inset 0 0 2px 1px var(--accent); }
2.5%, 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5%, 47.5%, 52.5%, 57.5%, 62.5%, 67.5%, 72.5%, 77.5%, 82.5%, 87.5% { box-shadow: inset 0 0 1.6px 0.8px var(--accent); }
85% { box-shadow: inset 0 0 2.4px 1.2px var(--accent); }
100% { box-shadow: inset 0 0 0px 0px var(--accent); }
}

.user-input-container, .demo-structures-container {
backdrop-filter: blur(16px);
border: 1px solid #ffffff0d;
text-align: left;
font-size:0.9rem;
line-height:1.3;
background: #00000078;
transition: opacity .5s ease-in-out, transform .2s ease-in-out;
h4 {
color: var(--accent);
color: var(--secondary);
}
}

/* Add user input container styling */
.user-input-container {
position: absolute;
/* right: clamp(124px, 20vw, 312px); */
/* top: 20%; */
/* transform: translateY(-50%); */
transform: translate(clamp(-120px, -20vw, -60px), -20%);
width: 180px;
padding: 1rem;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
backdrop-filter: blur(16px);
}

.diagnosis-text {
position: relative;
bottom: -56px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--background), transparent);
padding: 0.5rem 1rem;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: all 1.6s ease-out, opacity 3s ease-out;
mask: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
backdrop-filter: blur(16px);
color: var(--text-primary);
text-align: left;
line-height: normal;
}


/* LLM processing animation */
.llm-processing {
display: inline-block;
position: absolute;
background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
border-radius: 24px;
padding: 1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.llm-processing::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 24px;
background: linear-gradient(45deg, 
rgba(99, 102, 241, 0.1) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(99, 102, 241, 0.1) 100%
);
animation: processing-glow 2s infinite;
}



.user-input-container div {
font-size: 0.9rem;
line-height: 1.4;
/* color: #666; */
font-style: italic;
}

.diagnosis-text {

font-size: 1.05rem;
}

.diagnosis-text div {
font-weight: 600;
letter-spacing: -0.3px;
}


.step-indicator {
position: absolute;
bottom: -125px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2rem;
padding: 1rem 1.33rem;
background: var(--background);
border-radius: 50px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
z-index: 10;
width: 356px;
border-width: medium;
border: var(--primary);
border-style: solid;
justify-content: flex-end;
overflow: hidden;
transition: all 1s cubic-bezier(0.35, -0.06, 0.46, 1.12);
}

.step {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0.3;
transition: all 0.3s ease;
transform: scale(0.9);
}

.step.active {
opacity: 1;
transform: scale(1);
}

.step-icon {
font-size: 1.5rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}

.step-label {
font-size: 0.8rem;
font-weight: 500;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Loading animation for step 3 */
.step[data-step="3"].active:not(.completed) .step-icon {
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}


/* .structure-name {
font-weight: 500;
color: #2d3748;
} */

/* Header & nav container */
/* .header {
background-color: #333;
padding: 1rem;
position: relative;
} */
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
position: relative;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.logo-svg {
position: absolute;

width: 3.5em;
left: calc(4em - clamp(54px, 5vw, 26em));


height: auto;
margin-right: 1rem;
transition: all 0.3s ease;
top: calc(10px - 1rem);
overflow: visible;
& path {
  /* fill: var(--background);
  stroke: var(--primary);
  stroke-width: 12px; */

  /* fill: var(--accent); */
  stroke: var(--bright-background);
  stroke-width: 8px;
  transition: fill 1s ease;
}
}

.isTop .logo-svg {
width: clamp(4em, 10vw, 11em);
left: calc(4em - clamp(54px, 5vw, 26em));
}

.isTop .logo-txt {
margin-left: clamp(2.6em, 12vw, 5em);
}

.logo-txt {
color: var(--bright-background);
transition: all 0.3s ease;
text-decoration: none !important;
font-size: 1.5rem;
font-weight: bold;
margin-left: 1.5em;
margin-left: clamp(2.4em, 12vw, 1em);
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */

}

/* Hidden checkbox to control the mobile menu */
.nav-toggle {
display: none;
}

/* Hamburger icon */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
z-index: 2; /* Ensure it's above the menu */
}
.hamburger span {
height: 3px;
width: 30px;
background: var(--background);
margin: 2px 0;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Menu styles */
.header-nav {
display: flex;
align-items: center;
gap: 2rem;
}
.header-nav a {
color: var(--bright-background);
text-decoration: none;
font-size: 1rem;
transition: all 0.4s ease, color 0.1s ease;
}

.header-nav { visibility: hidden; }

.header-nav > * { visibility: visible; }

.header-nav > * { transition: opacity 350ms ease-in-out 100ms; }

.header-nav:hover > * {
opacity: 0.4;
filter: blur(1px);
/* transform: scale(1.05); */
}

.header-nav > *:hover { 
opacity: 1;
filter: blur(0px);
transform: scale(1);
color: white!important;
}

/* Above: styles of siblings on hover. Below: styles of the hovered element */
.header-nav a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: var(--bright-background);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.4s ease, color 0.1s ease;
}

/* Original text container */
.header-nav a span {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Clone text that slides up */
.header-nav a::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
  transition: transform 0.2s ease;
  color: var(--bright-background);
  pointer-events: none;
}

/* Hover effects */
.header-nav a:hover span {
  transform: translateY(-100%);
  opacity: 0;
}

.header-nav a:hover::after {
  transform: translateY(0);
}




/* Mobile styles */
@media (max-width: 768px) {
/* Show the hamburger on small screens */
.hamburger {
  display: flex;
}
/* Position the nav menu absolutely for fading in/out */
.header-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
/* When the hidden checkbox is checked, show the menu */
.nav-toggle:checked ~ .header-nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Change header height when nav-toggle is checked */
.header:has(#nav-toggle:checked) {
  height: 240px;
}

/* Animate the hamburger into a cross */
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
}

@media (max-width: 636px) {
.header {
    border-bottom: solid 1px var(--background);
}
}


.response-container {
  padding: 0;
  /* margin-top: 15px; */
  border-radius: 8px;
  /* background: var(--bright-background); */
  /* border: 2px solid var(--background); */
  /* min-height: 100px; */
  overflow: hidden;
}

.response-stream {
  white-space: pre-wrap;
  line-height: 1.6;
  position: relative;
  max-height: 0em;
  opacity: 0;
  visibility: hidden;
}

.response-stream.visible {
  max-height: 200em;
  opacity: 1;
  visibility: visible;
}

@keyframes chunkAppear {
from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter:blur(0px) }
}

.response-chunk {
opacity: 0;
filter: blur(6px);
transform: translateY(10px);
animation: chunkAppear 0.4s ease-out forwards;
margin-bottom: 1.2rem;
}

.typing-cursor {
display: inline-block;
width: 2px;
background: currentColor;
margin-left: 2px;
animation: cursorBlink 1s infinite;
}

@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}


div#output {
  max-width: 62rem;
  padding: 2rem;
  margin: auto;
}


.error {
  color: var(--error);
  padding: 10px;
  background: #ffeef0;
  border-radius: 4px;
}

[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.hidden { display: none; }
.typing-indicator::after {
content: "▌";
animation: blink 1s infinite;
}

@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}


/* AI Output */
.condition-header {
color: #2c3e50;
font-size: 1.2em;
margin: 15px 0 10px 0;
border-bottom: 2px solid var(--text-primary);
padding-bottom: 5px;
}

.recommendation-header {
color: #27ae60;
font-size: 1.2em;
margin: 15px 0 10px 0;
border-bottom: 2px solid var(--secondary);
padding-bottom: 5px;
}

.thinking-section {
background-color: #f9f9f9;
padding: 10px;
border-radius: 5px;
border-left: 4px solid var(--primary);
margin-top: 20px;
}

/* Confidence Display */
.confidence-meter {
margin: 1rem 0;
padding: 0.5rem;
background: #f8fafc;
border-radius: 0.5rem;
}

.confidence-bar {
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
position: relative;
}

.confidence-progress {
height: 100%;
background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
transition: width 0.5s ease;
}

.confidence-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.9em;
}

.confidence-badge {
background: #3b82f6;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
margin-left: 0.5rem;
}


/* Chat Interface */

/* Chat Interface Styles */
.chat-container {
margin-top: 2rem;
border-top: 1px solid #e2e8f0;
padding-top: 1.5rem;
}

.chat-history {
/* max-height: 60vh; */
overflow-y: auto;
background: var(--background);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1rem;
}

.chat-input {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: center;
}

#followupInput {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
resize: vertical;
min-height: 100px;
}

/* .chat-history {
max-height: 50vh;
overflow-y: auto;
margin-bottom: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1rem;
} */

.chat-message {
margin: 0.5rem 0;
padding: 0.75rem;
border-radius: 0.5rem;
animation: messageAppear 0.3s ease;
}

.chat-message.user {
background: var(--bright-background);
border: 1px solid #e2e8f0;
margin-left: 20%;
}

.chat-message.ai {
background: var(--bright-background);
border: 1px solid #e2e8f0;
border-radius: 12px 12px 12px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



/* .user-message {
background: #fff;
border: 1px solid #e2e8f0;
margin-left: 20%;
} */

.ai-message {
background: #3b82f61a;
margin-right: 20%;
}

.message-header {
font-size: 1em;
color: #64748b;
margin-bottom: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
font-weight: bold;
}

.message-content {
line-height: 1.6;
}

span.message-time {
  float: right;
}

svg.msg-logo-svg {
  width: 5.5em;
  height: auto;
  margin-right: 1rem;
  overflow: visible;
  vertical-align: middle;
}


/* Scroll Helper */
.scroll-helper {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 20px;
z-index: 2;
background: var(--primary);
backdrop-filter: blur(16px);
/* background: linear-gradient(270deg, var(--background), transparent); */
opacity: 0.3;
border-radius: 0 10px 10px 0;
justify-content: center;
}

.scroll-helper.left { left: 0; }
.scroll-helper.right { right: 0; }

/* Text Animation */
@keyframes textReveal {
from {
opacity: 0;
filter: blur(4px);
transform: translateY(10px);
}
to {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}

@keyframes messageAppear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* .response-text {
animation: textReveal 0.6s ease forwards;
} */

.copy-btn {
position: relative;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0 1rem;
}
.copy-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
display: none;
}
.copy-btn:hover .copy-tooltip {
display: block;
}
.disabled {
opacity: 0.6;
pointer-events: none;
}
.hidden {
display: none !important;
}


/* Submit Button Container */
.submit-container {
text-align: center;
position: sticky;
bottom: 20px;
z-index: 10;
height: min-content;
display: flex
;
}

#loadingSpinner {
display: none;
}

#paymentOptions {
position: fixed;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
display: flex;
z-index: 15;
/* display: block!important; */
}

.pricing-table {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}



/* Pricing Section Styles */
.pricing-section {
/* visibility: hidden; */
/* border-top: solid 1px var(--background); */
/* max-height: 0; */
/* opacity: 0; */
/* filter: blur(16px); */
/* transition: visibility 1s, opacity 1s ease, filter 1.6s ease, max-height 1.6s ease; */
/* overflow: hidden; */
padding: 0;
background: transparent;
/* backdrop-filter: blur(16px); */
}

#pricing-wrapper, #about-wrapper {
visibility: hidden;
position: relative;
overflow: hidden;
backdrop-filter: blur(16px);
border-top: solid 1px var(--background);
padding: 0;
max-height: 0;
transition: all 1.6s ease;
max-height: 0;
opacity: 0;
filter: blur(16px);
transition: visibility 1s, opacity 1s ease, filter 1.4s ease, max-height 1.6s ease;
}

#pricing-wrapper[open] { 
max-height: 2500px;
opacity: 1;
filter: blur(0px);
visibility: visible;
}

#about-wrapper[open] { 
  max-height: 5000px;
  opacity: 1;
  filter: blur(0px);
  visibility: visible;
}


.pricing-section.visible {
display: block;
}

.pricing-header {
text-align: center;
margin: 2rem 0;
color: var(--text-primary);
/* visibility: hidden; */
}

.pricing-cards {
display: flex;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.price-card {
background: var(--background);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
position: relative;
min-width: 25em;
transition: transform 0.3s ease;
}

.price-card:hover {
transform: translateY(-5px);
}

.popular {
border: 2px solid var(--primary);

opacity: 0.8;
pointer-events: none;
cursor: not-allowed;
position: relative;
}

.popular::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background: #ffffff38;
backdrop-filter: blur(3px);
color: white;
padding: 5px 10px;
border-radius: 16px;
font-size: 1.6rem;
text-align: center;
z-index: 999;
}

.popular::after {
content: "Currently not available";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
background: rgb(0, 0, 0);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 1.6rem;
text-align: center;
z-index: 9999;
}



.popular-badge {
position: absolute;
top: -15px;
right: 20px;
background: var(--primary);
color: var(--background);
padding: 5px 15px;
border-radius: 15px;
font-size: 0.9rem;
font-weight: bold;
border: solid 2px var(--background);
}

.card-header {
padding: 2rem;
background: var(--primary);
color: white;
border-radius: 15px 15px 0 0;
}

.price {
font-size: 2.5rem;
margin: 1rem 0;
font-weight: bold;
}

.price span {
font-size: 1rem;
font-weight: normal;
}


.payment-toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
animation: slideIn 0.3s ease-out;
z-index: 1000;
}


@keyframes slideIn {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}



.features {
padding: 1.5rem;
list-style: none;
}

.features li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.payment-options {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}

.payment-btn {
font-size: 1.2rem;
}

.stripe-btn {
background: var(--accent);
color: white;
border: none;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background-color 0.3s ease;
}

.stripe-btn:hover {
background: var(--secondary);
}

.paypal-btn-container {
min-height: 40px; /* Prevent layout shift */
margin-top: 0.5rem;
}

.security-note {
text-align: center;
margin-top: 2rem;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

/* Font Awesome Icons */
.fab {
font-size: 1.2rem;
}


.loading-spinner {
display: none;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

.loading-spinner.visible {
display: inline-block !important;
}


/* Mobile Optimization */
@media (max-width: 768px) {
.canvas-wrapper {
position: relative;
margin: 0 -1rem;
}

#bodyCanvas {
touch-action: pan-x;
}

.scroll-helper {
width: 30px;
display: flex;
}
}




.usage-card {
  background: var(--bright-background);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usage-count {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--secondary);
}

.usage-expiry {
  color: var(--muted);
  font-size: 0.9rem;
}

/* #usageStatus {
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: sticky;
    top: 1em;
    width: max-content;
    font-weight: 600;
    padding: 0.2em 0.5em;
    z-index: 10;
    background: #ffffff9c;
    border-radius: 12px;
    backdrop-filter: blur(16px);
    border-width: medium;
    border: var(--primary);
    border-style: solid;
} */

.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}