/* Font face declaration for local Outfit font */
@font-face {
  font-family: 'Outfit';
  src: url('assets/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 440;
  font-style: medium;
}

/* Color variables for consistent theming */
:root {
  --color-black: #28292A;
  --color-black-5: rgba(40, 41, 42, 0.05);
  --color-blue: #569AD3;
  --color-red: #ED6B4D;
  --color-red-5: rgba(237, 107, 77, 0.05);
  --color-light-gray: #FBFBFB;
  --color-dark-gray: #6E7072;
  --color-cigarette: #DC9646;
  --color-vapes: #47C6AC;
  --color-both: #C6CC15;
  --color-mid-gray: #D5D6D7;
  --color-green: #91DC29;
  --color-level-3: #82B77B;
  --color-level-2: #6FA9AA;
  --font-size-xlarge: 32px;
  --font-size-large: 28px;
  --font-size-medium: 24px;
  --font-size-small: 20px;
  --font-size-xsmall: 16px;
  --font-size-xxsmall: 12px;
  --icon-size-xlarge: 32px;
  --icon-size-large: 28px;
  --icon-size-medium: 24px;
  --icon-size-small: 20px;
  --icon-size-xsmall: 16px;
  --header-height: clamp(80px, 15vw, 140px); /* Approximate header height */
}

/* Reset default margins and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Apply Outfit Medium to all text elements */
body {
  font-family: 'Outfit', sans-serif;
  font-weight: 440; /* Medium */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main container */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Content area should grow to push footer down */
.content {
  flex: 1;
}

/* Header container with horizontal layout */
.header-container {
  display: flex;
  align-items: center;
  padding: clamp(20px, 5vw, 60px); /* 20px mobile, 60px desktop */
  background-color: var(--color-light-gray); /* Light gray background */
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-black-5); /* Using CSS variable */
  position: relative;
  z-index: 10; /* Higher than form */
}

/* Logo styling */
.logo {
  height: 40px; /* Fixed height for logo */
  width: auto;
  display: block;
}

/* Spacer between logo and get in touch */
.spacer {
  flex: 1;
}

/* Get in touch button hstack */
.get-in-touch-hstack {
  display: flex;
  align-items: center;
  gap: 8px; /* 8px spacing between text and icon */
  cursor: pointer;
}

/* Get in touch text */
.get-in-touch-text {
  color: var(--color-red);
  margin: 0;
  font-size: var(--font-size-large); /* 28px */
  white-space: nowrap;
}

/* Mail icon */
.mail-icon {
  height: var(--icon-size-large); /* 28px */
  width: auto;
}

/* Footer container with horizontal layout */
.footer-container {
  display: flex;
  align-items: center;
  padding: clamp(20px, 5vw, 60px); /* Same padding as header */
  background-color: var(--color-light-gray); /* Light gray background */
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--color-black-5); /* Top border instead of bottom */
  position: relative;
  z-index: 10; /* Higher than form */
  height: 60px; /* Desktop height */
}

/* Footer email text */
.footer-email {
  color: var(--color-mid-gray);
  font-size: var(--font-size-medium); /* Desktop font size */
  white-space: nowrap;
  margin: 0;
}

/* Footer W icon */
.footer-w-icon {
  height: var(--icon-size-medium); /* Desktop icon size */
  width: auto;
  display: block;
}

/* Build Your Plan section */
.build-plan-section {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Margin between beta text and button */
}

.beta-text {
  color: var(--color-blue);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0 0 0 24px; /* Top, right, bottom, left margins */
  align-self: flex-start; /* Left aligned */
}

/* Build Your Plan button */
.build-plan-button {
  background-color: var(--color-light-gray); /* Light gray background */
  border-radius: 12px;
  width: 100%; /* Full width within container */
  display: flex;
  align-items: center;
  margin-bottom: clamp(20px, 5vw, 60px); /* Bottom margin: 20px mobile, 60px desktop */
  cursor: pointer; /* Make the button clickable */
  transition: background-color 0.3s ease; /* Smooth transition for color changes */
}

.build-plan-button.active {
  background-color: color-mix(in srgb, var(--color-blue) 20%, transparent); /* Blue with 20% opacity */
}

/* Plan Builder Dropdown */
.plan-builder-dropdown {
  background-color: var(--color-light-gray); /* Light gray background */
  border-radius: 12px;
  width: 100%;
  margin-top: 8px; /* Reduced gap between button and dropdown */
  margin-bottom: 60px; /* Bottom margin for spacing */
  padding: 24px 24px 0px 24px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.plan-builder-dropdown.show {
  max-height: 5000px; /* Allow dropdown to expand */
  opacity: 1;
  transform: translateY(0);
}

/* Your Plan Section */
.your-plan-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0px !important;
  margin-bottom: 60px !important;
  padding-bottom: 24px !important; /* Add bottom padding to match top padding of dropdown */
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: all 0.3s ease !important;
}

/* Adjust Your Plan section margin when plan builder is hidden */
.plan-builder-dropdown:not(.show) + .your-plan-section {
  margin-top: -100px !important;
}

/* Your Plan Header HStack */
.your-plan-header-hstack {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Your Plan Header Icon */
.your-plan-header-icon {
  height: var(--icon-size-xlarge);
  width: auto;
  display: block;
}


.your-plan-section.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.your-plan-section.hidden {
  display: none !important;
}

.your-plan-header {
  color: var(--color-black);
  font-size: var(--font-size-xlarge);
  font-family: 'Outfit', sans-serif;
  font-weight: 440;
  margin: 0;
}

/* Your Plan Content Layout */
.your-plan-content-hstack {
  display: flex;
  gap: 60px;
  margin-top: 24px;
}

/* Your Plan VStacks */
.your-plan-left-vstack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 2; /* 2/3 of available width */
}

.your-plan-right-vstack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1; /* 1/3 of available width */
}

/* Your Plan Rectangles */
.your-plan-rectangle {
  background-color: color-mix(in srgb, var(--color-mid-gray) 20%, transparent);
  border-radius: 24px;
  position: relative; /* For absolute positioning of graph */
}

/* Math Graph Container */
.plot-rect {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%; /* 90% of 400px = 360px */
  background: transparent;
  overflow: visible; /* Allow curve to extend beyond boundaries */
}

/* The SVG fills the container */
.plot-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible; /* Allow curve to extend beyond boundaries */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth animation for viewBox changes */
  z-index: 101; /* Ensure curve appears above spending line (z-index: 100) */
}

/* Keep the curve stroke visually consistent when resized */
.non-scaling {
  vector-effect: non-scaling-stroke;
}

/* Ensure arms and labels maintain fixed dimensions */
#baseline-arm, #target-arm {
  vector-effect: non-scaling-stroke;
  stroke-width: 2px !important;
}

#baseline-label, #target-label, #target-level-label {
  font-size: var(--font-size-small) !important;
}

/* Hover circle styling (fixed size, not affected by SVG scaling) */
.hover-circle {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  border: 8px solid var(--color-blue);
  pointer-events: none;
  z-index: 1001;
  transform: translate(-50%, -50%); /* Center the circle on the point */
}

/* Graph arms styling (SVG-based, fixed size, not affected by SVG scaling) */
.graph-arm-svg {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Graph labels styling (CSS-based, fixed size, not affected by SVG scaling) */
.graph-label-css {
  position: absolute;
  font-size: var(--font-size-medium);
  color: var(--color-dark-gray);
  font-family: var(--font-family);
  font-weight: 500;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.graph-level-label-css {
  font-size: calc(var(--font-size-small));
  color: var(--color-mid-gray);
}

/* Arms and labels visible state */
.graph-arm-svg.visible,
.graph-label-css.visible,
.x-axis-label.visible {
  opacity: 1;
}

/* Arms and labels hidden on hover state */
.graph-arm-svg.hidden-on-hover,
.graph-label-css.hidden-on-hover,
.x-axis-label.hidden-on-hover {
  opacity: 0;
}

/* Right-aligned labels for target arm */
.graph-label-right {
  text-align: right;
  transform: translateX(-100%);
}

/* X-axis labels styling */
.x-axis-labels {
  position: absolute;
  width: 100%;
  height: 0; /* No height, just for positioning */
  bottom: -12px; /* Position 12px below the bottom edge of the graph */
  left: 0;
}

.x-axis-label {
  position: absolute;
  font-size: var(--font-size-medium);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
  display: none; /* Initially hidden */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.x-axis-label-left {
  left: 0;
  text-align: left;
}

.x-axis-label-right {
  right: 0;
  text-align: right;
}

.x-axis-hover-date {
  left: 0;
  text-align: center;
  transform: translateX(-50%); /* Center the label on the mouse position */
}

/* Curve tooltip styling */
.curve-tooltip {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5); /* White with 50% opacity */
  border: 1px solid var(--color-mid-gray);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--font-size-small);
  color: var(--color-dark-gray);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transform: translate(-50%, -100%); /* Center horizontally, position above */
  margin-bottom: 32px; /* 32px gap above the circle */
}

.curve-tooltip div {
  line-height: 1.2;
}

.curve-tooltip div:first-child {
  font-weight: 600;
  margin-bottom: 2px;
}

/* Graph label styling */
.graph-label {
  font-size: var(--font-size-small);
  fill: var(--color-dark-gray);
  font-family: var(--font-family);
  font-weight: 500;
  pointer-events: none;
}

.graph-level-label {
  font-size: calc(var(--font-size-small) * 0.9);
  fill: var(--color-mid-gray);
}

/* Left vstack rectangles have square corners */
.your-plan-left-vstack .your-plan-rectangle {
  border-radius: 0;
}

.your-plan-small-rectangle {
  height: 64px;
}

.your-plan-large-rectangle {
  height: 400px;
}

/* Left vstack small rectangle (top) - transparent background */
.your-plan-left-vstack .your-plan-small-rectangle {
  background-color: transparent;
}

/* Left vstack large rectangle (contains graph) - transparent background with bottom border */
.your-plan-left-vstack .your-plan-large-rectangle {
  background-color: transparent;
  border-bottom: 2px solid var(--color-black-5);
}

/* Right vstack large rectangle (bottom rectangle) - light gray background */
.your-plan-right-vstack .your-plan-large-rectangle {
  background-color: var(--color-light-gray);
  padding: 24px;
}

/* Hide current spending display container in bottom rectangle (keep for logic but make invisible) */
.your-plan-right-vstack .your-plan-large-rectangle > div:first-child {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Bottom Rectangle VStack */
.bottom-rectangle-vstack {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Graph Metrics HStack */
.graph-metrics-hstack {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex: 1 1 0;
}

/* Graph Metrics Spacer */
.graph-metrics-spacer {
  flex: 1;
}

/* Graph Metrics To Icon */
.graph-metrics-to-icon {
  width: 24px;
  height: 24px;
  opacity: 0.6;
}

/* White Metric Rectangles */
.white-metric-rectangle {
  width: 172px;
  height: 96px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Bottom Rectangle Spacer */
.bottom-rectangle-spacer {
  flex: 1;
}

/* New HStacks VStack */
.new-hstacks-vstack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* New HStacks */
.new-hstack-1,
.new-hstack-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
  min-height: 40px; /* Ensure containers maintain height even when content is hidden */
}


.new-hstack-1 {
  margin-top: 0px; /* Move hstacks down by reducing negative margin */
}

/* Nicotine and Costing Mode Content */
.nicotine-hstack-1-content,
.nicotine-hstack-2-content,
.costing-hstack-1-content,
.costing-hstack-2-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Hide nicotine content when in costing mode */
.costing-mode .nicotine-hstack-1-content,
.costing-mode .nicotine-hstack-2-content {
  display: none;
}

/* Hide costing content when in nicotine mode */
.nicotine-mode .costing-hstack-1-content,
.nicotine-mode .costing-hstack-2-content {
  display: none;
}

/* Hide reduce-metric icon in costing mode */
.costing-mode .costing-hstack-icon {
  display: none;
}

/* Costing hstack 2 sub-content */
.costing-hstack-2-total-cost,
.costing-hstack-2-savings {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Show total cost by default, hide savings */
.costing-hstack-2-savings {
  display: none;
}

/* When current spending is visible, show savings and hide total cost */
.spending-visible .costing-hstack-2-total-cost {
  display: none;
}

.spending-visible .costing-hstack-2-savings {
  display: flex;
}

/* Savings vstack styling */
.savings-vstack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Red text for savings amount */
.new-hstack-text-red {
  color: var(--color-red);
  font-size: var(--font-size-large);
  margin-left: 8px;
}

/* "vs current spending" text */
.savings-vs-text {
  color: var(--color-red);
  font-size: var(--font-size-small);
  opacity: 0.5;
}

.new-hstack-icon {
  width: 24px;
  height: auto;
  margin-left: 0px;
}

.new-hstack-2 .new-hstack-icon {
  width: 28px;
}


.new-hstack-text {
  font-size: var(--font-size-large);
  font-family: var(--font-family);
  font-weight: 500;
}

.new-hstack-text-gray {
  color: var(--color-mid-gray);
  font-size: var(--font-size-medium);
}

.new-hstack-text-dark {
  color: var(--color-dark-gray);
  font-size: var(--font-size-large);
  margin-left: 8px; /* Increase gap from mid gray text */
}

.costing-text-medium {
  font-size: var(--font-size-large);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 500;
}

.costing-text-large {
  font-size: var(--font-size-large);
  color: var(--color-dark-gray);
  font-family: var(--font-family);
  font-weight: 500;
}

.savings-vstack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.savings-amount {
  font-size: var(--font-size-large);
  color: var(--color-red);
  font-family: var(--font-family);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.costing-hstack-2-content.visible .savings-amount {
  opacity: 1;
  transform: translateY(0);
}

.savings-label {
  font-size: var(--font-size-small);
  color: var(--color-red);
  opacity: 0;
  font-family: var(--font-family);
  font-weight: 500;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.costing-hstack-2-content.visible .savings-label {
  opacity: 0.5;
  transform: translateY(0);
}


/* Three Rectangle VStack */
.three-rectangle-vstack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Individual Rectangles */
.rectangle-1,
.rectangle-2,
.rectangle-3 {
  background-color: var(--color-light-gray);
  border-radius: 28px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rectangle-1 {
  height: 112px;
}

.rectangle-2 {
  height: 156px;
  padding: 24px;
}

.rectangle-3 {
  height: 92px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Graph Metric Rectangles */
.graph-metric-rectangle {
  background-color: color-mix(in srgb, var(--color-mid-gray) 10%, transparent);
  border-radius: 0 0 16px 16px; /* Top-left: 0, Top-right: 0, Bottom-right: 16px, Bottom-left: 16px */
  height: 92px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Graph Metric Content */
.graph-metric-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Graph Metric Top Text */
.graph-metric-top-text {
  font-size: var(--font-size-small);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Graph Metric Bottom Text */
.graph-metric-bottom-text {
  font-size: var(--font-size-large);
  color: var(--color-dark-gray);
  font-family: var(--font-family);
  font-weight: 440;
}

/* Order Button */
.order-button {
  width: 100%;
  height: 76px;
  background-color: white;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  margin: 0;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.order-button:hover {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.order-button-hstack {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.order-button-vstack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}

.order-button-title-hstack {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-button-title {
  font-size: var(--font-size-large);
  color: var(--color-black);
  font-family: var(--font-family);
  font-weight: 500;
}

.order-button-arrow {
  height: 19px;
  width: auto;
  margin-top: 3px;
}

.order-button-subtitle {
  font-size: var(--font-size-small);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 400;
  transition: color 0.3s ease;
}

.order-button:hover .order-button-subtitle {
  color: var(--color-green);
}

.order-button-spacer {
  flex: 1;
}

.order-button-right-hstack {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.order-button-price {
  font-size: var(--font-size-large);
  color: var(--color-green);
  font-family: var(--font-family);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.order-button:hover .order-button-price {
  opacity: 1;
}

.order-button-icon {
  height: 44px;
  width: auto;
}

/* Your Plan Clickable Rectangle */
.your-plan-clickable-rectangle {
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Background colors based on selection */
.your-plan-clickable-rectangle.nicotine-selected {
  background-color: color-mix(in srgb, var(--color-blue) 20%, transparent);
}

.your-plan-clickable-rectangle.costing-selected {
  background-color: color-mix(in srgb, var(--color-green) 20%, transparent);
}

/* Your Plan White Rectangle */
.your-plan-white-rectangle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background-color: white;
  border-radius: 20px; /* Updated to match new design */
  transition: left 0.3s ease;
}

.your-plan-white-rectangle.right-aligned {
  left: calc(50%);
}

/* Your Plan Content Container */
.your-plan-content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 1;
  align-items: stretch;
}

/* Vertical spacer for centering */
.your-plan-vertical-spacer {
  flex: 1;
}

/* Horizontal content row */
.your-plan-content-row {
  display: flex;
  width: 100%;
  height: auto;
}

/* Left half content */
.your-plan-left-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right half content */
.your-plan-right-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content hstack */
.your-plan-inner-content-hstack {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Content text */
.your-plan-content-text {
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-large);
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

.nicotine-text {
  color: var(--color-blue);
  transition: color 0.3s ease;
}

.nicotine-text.costing-selected {
  color: white;
}

.costing-text {
  color: white;
  transition: color 0.3s ease;
}

.costing-text.costing-selected {
  color: var(--color-green);
}

/* Content icons */
.your-plan-content-icon {
  height: var(--icon-size-large);
  width: auto;
  display: block;
}

/* Your Plan Title */
.your-plan-title {
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-large);
  font-weight: 440;
  margin: 0;
  padding: 0px;
  position: relative;
  line-height: 1.2;
}

.your-plan-title-main {
  color: var(--color-dark-gray);
}

.your-plan-title-sub {
  color: var(--color-mid-gray);
}

.plan-headers {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Gap between plan sections */
}

.plan-header {
  color: var(--color-black);
  font-size: var(--font-size-large); /* 28px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap; /* Prevent text wrapping */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Current usage header color states */
.plan-header.current-usage-open {
  color: var(--color-black);
}

.plan-header.current-usage-closed {
  color: var(--color-mid-gray);
}

/* Target usage header color states */
.target-usage-header.target-usage-open {
  color: var(--color-black);
}

.target-usage-header.target-usage-closed {
  color: var(--color-mid-gray);
}

/* Plan Duration Header - completely separate from Target Usage */
.plan-duration-header {
  color: var(--color-mid-gray); /* Start gray (closed) */
  font-size: var(--font-size-large);
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Mobile adjustments for Plan Duration header */
@media (max-width: 768px) {
  .plan-duration-header {
    font-size: var(--font-size-medium);
  }
}

/* Plan Duration header color states - using data attributes */
/* Default state - gray */
.plan-duration-header {
  color: var(--color-mid-gray) !important;
}

/* When plan duration section is in editing state - black */
.target-usage-section[data-plan-duration-state="editing"] .plan-duration-header {
  color: var(--color-black) !important;
}

/* When plan duration section is in completed state - gray */
.target-usage-section[data-plan-duration-state="completed"] .plan-duration-header {
  color: var(--color-mid-gray) !important;
}

.plan-section {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Gap between header and question */
}

/* Current Nicotine Usage Header HStack */
.current-nicotine-header-hstack {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Hide the current nicotine tickbox initially */
#current-nicotine-tick-box {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* Show the current nicotine tickbox when it becomes active */
#current-nicotine-tick-box.active {
  opacity: 1;
  visibility: visible;
}

/* Current Nicotine Status Container (rectangle + edit button) */
.current-nicotine-status-container {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.current-nicotine-status-container.hidden {
  opacity: 0;
  visibility: hidden;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Status Rectangle */
  .status-rectangle {
    width: 180px;
    height: 52px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 12px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  @media (max-width: 768px) {
    .status-rectangle {
      font-size: var(--font-size-medium);
      height: 40px; /* Reduced from 52px by 12px */
    }
  }

/* Edit Button */
.edit-button {
  background: none;
  border: none;
  color: var(--color-mid-gray);
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
}

.edit-button:hover {
  color: var(--color-dark-gray);
  transform: translateY(-1px);
}

/* Mobile styles for edit button */
@media (max-width: 768px) {
  .edit-button {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
}

/* Confirm Button Container */
.confirm-button-container {
  display: flex;
  justify-content: flex-end; /* Right align the button */
  margin-top: 32px; /* Perfect spacing for 'cigarettes' selection */
  margin-bottom: 32px;
  transition: all 0.4s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Add extra top margin when 'vapes' or 'both' is selected */
  .confirm-button-container.vapes-or-both {
    margin-top: 64px; /* 32px + 32px for 'vapes' or 'both' selection */
  }
  
  .confirm-button-container.refillable-only {
    margin-top: 32px; /* 32px - 16px when only refillable is selected */
  }

.confirm-button-container.hidden {
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-15px) !important;
  pointer-events: none !important;
}

/* Confirm Button */
.confirm-button {
  width: 140px; /* Same width as capsule buttons */
  height: 32px; /* Same height as capsule buttons */
  background-color: transparent; /* No fill */
  border: 3px solid var(--color-green); /* Green stroke */
  border-radius: 16px; /* Half height for capsule shape */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.confirm-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.confirm-text {
  color: var(--color-dark-gray); /* Dark gray text color */
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Remove gap when elements are hidden */
.plan-section .cigarette-options-hstack.hidden,
.plan-section .quantity-options-hstack.hidden,
.plan-section .vape-options-hstack.hidden,
.plan-section .question-hstack.hidden,
.plan-section .bottle-type-hstack.hidden,
.plan-section .bottle-quantity-hstack.hidden,
.plan-section .pod-type-hstack.hidden,
.plan-section .pod-quantity-hstack.hidden {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-15px) !important;
  pointer-events: none !important;
}

/* Reset gap when plan section is in confirmed state */
.plan-section.confirmed {
  gap: 0 !important;
}

.question-hstack {
  display: flex;
  align-items: center;
  gap: 32px; /* Gap between question and buttons */
  margin-top: 16px; /* Space above the question hstack */
  transition: all 0.4s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.question-mobile-line1 {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.question-mobile-line2 {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Cigarette Options HStack */
.cigarette-options-hstack {
  display: flex;
  align-items: center;
  margin-top: 16px; /* Space from the question above */
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
  z-index: 5;
}

.cigarette-options-hstack.hidden {
  /* Handled by the central .plan-section rule above */
}

.cigarette-options-hstack.visible {
  display: flex; /* Restore flex display when visible */
  margin-top: 16px;
  padding: 0;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Individual spacing for elements */
.cigarette-text-vstack {
  margin-right: 32px; /* Space after text */
}

.pouch-vstack {
  margin-right: 0px; /* No space after pouch */
}

.carton-vstack {
  margin-left: 0px; /* No space before carton */
}

.tick-box {
  margin-left: 0px; /* No space before tick box */
}

/* Cigarette Text VStack */
.cigarette-text-vstack {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced gap between question and subtext */
}

.cigarette-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

.cigarette-subtext {
  color: var(--color-mid-gray);
  font-size: var(--font-size-small); /* 18px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Cigarette Option VStack */
.cigarette-option-vstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* Gap between box and text */
}

.cigarette-option-box {
  width: 180px;
  height: 160px;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cigarette-option-icon {
  display: block;
}

.cigarette-option-icon.pouch-icon {
  width: 132px;
  height: auto;
}

.cigarette-option-icon.carton-icon {
  width: auto;
  height: 101px;
}

.cigarette-option-text {
  color: var(--color-mid-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  text-align: center;
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Active states for pouch and carton */
.pouch-vstack.active .cigarette-option-text {
  color: var(--color-blue);
}

.carton-vstack.active .cigarette-option-text {
  color: var(--color-blue);
}

/* Active states for tick box */
.pouch-vstack.active ~ .tick-box,
.carton-vstack.active ~ .tick-box {
  border-color: var(--color-green);
  background-color: rgba(145, 220, 41, 0.5);
}

.pouch-vstack.active ~ .tick-box .tick-path,
.carton-vstack.active ~ .tick-box .tick-path {
  stroke-dashoffset: 0;
}

/* Quantity Options HStack */
.quantity-options-hstack {
  display: flex;
  align-items: center;
  margin-top: 16px; /* Space from the cigarette options above */
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
  z-index: 4;
}

.quantity-options-hstack.hidden {
  /* Handled by the central .plan-section rule above */
}

.quantity-options-hstack.visible {
  display: flex; /* Restore flex display when visible */
  margin-top: 16px;
  padding: 0;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Quantity Text VStack */
.quantity-text-vstack {
  display: flex;
  flex-direction: column;
  margin-right: 32px; /* Space after text */
}

.quantity-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Counter HStack */
.counter-hstack {
  display: flex;
  align-items: center;
  gap: 32px; /* Gap between capsules and tickbox */
}

/* Counter Capsules */
.counter-capsule {
  width: 100px;
  height: 32px;
  border: 3px solid var(--color-mid-gray);
  background-color: transparent;
  border-radius: 16px; /* Half height for capsule shape */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium);
  font-weight: 440;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.counter-capsule.minus-capsule,
.counter-capsule.plus-capsule {
  color: var(--color-mid-gray);
  border-color: var(--color-mid-gray);
}

.counter-capsule.middle-capsule {
  color: var(--color-mid-gray);
  border-color: var(--color-mid-gray);
  cursor: text; /* Clickable for typing */
  transition: border-color 0.3s ease; /* Smooth border color transition */
  text-align: center;
  outline: none; /* Remove default input outline */
  -webkit-appearance: none; /* Remove default styling on webkit browsers */
  -moz-appearance: none; /* Remove default styling on Firefox */
  appearance: none; /* Remove default styling */
}

.counter-capsule.minus-capsule:hover,
.counter-capsule.plus-capsule:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Vape Options HStack */
.vape-options-hstack {
  display: flex;
  align-items: center;
  margin-top: 16px; /* Space from the quantity options above (default for 'both' selection) */
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
  z-index: 3;
}

/* Reduce top margin when only 'vapes' is selected (not 'both') */
.vape-options-hstack.vapes-only,
.vape-options-hstack.visible.vapes-only {
  margin-top: 0px !important; /* No top margin when only vapes is selected */
}

.vape-options-hstack.hidden {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  pointer-events: none !important;
  display: none !important;
}

.vape-options-hstack.visible {
  display: flex; /* Restore flex display when visible */
  margin-top: 16px;
  padding: 0;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Vape Text VStack */
.vape-text-vstack {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced gap between question and subtext */
  margin-right: 32px; /* Space after text */
}

.vape-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

.vape-subtext {
  color: var(--color-mid-gray);
  font-size: var(--font-size-small); /* 18px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Vape Option VStack */
.vape-option-vstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* Gap between box and text */
}

.vape-option-box {
  width: 180px;
  height: 160px;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vape-option-icon {
  display: block;
}

.vape-option-icon.refillable-icon {
  width: auto;
  height: 110px;
}

.vape-option-icon.pod-based-icon {
  width: auto;
  height: 118px;
}

.vape-option-text {
  color: var(--color-mid-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  text-align: center;
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Active states for vape options */
.refillable-vstack.active .vape-option-text {
  color: var(--color-blue);
}

.pod-based-vstack.active .vape-option-text {
  color: var(--color-blue);
}

/* Active states for vape tick box */
.refillable-vstack.active ~ .tick-box,
.pod-based-vstack.active ~ .tick-box {
  border-color: var(--color-green);
  background-color: rgba(145, 220, 41, 0.5);
}

.refillable-vstack.active ~ .tick-box .tick-path,
.pod-based-vstack.active ~ .tick-box .tick-path {
  stroke-dashoffset: 0;
}

/* Bottle Type Question */
.bottle-type-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Strength HStack */
.strength-hstack {
  display: flex;
  align-items: center;
  gap: 8px; /* 8px spacing between elements */
}

.strength-label {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

.strength-unit {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Bottle Size HStack */
.bottle-size-hstack {
  display: flex;
  align-items: center;
  gap: 8px; /* 8px spacing between elements */
}

.bottle-size-label {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

.bottle-size-unit {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Bottle Input Fields */
.bottle-input {
  width: 100px;
  height: 32px;
  border: 3px solid var(--color-mid-gray);
  background-color: transparent;
  border-radius: 16px; /* Half height for capsule shape */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium);
  font-weight: 440;
  text-align: center;
  outline: none;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--color-mid-gray); /* Initial text color */
}

.bottle-input:focus {
  border-color: var(--color-dark-gray);
  color: var(--color-dark-gray);
}

/* Placeholder styling */
.bottle-input::placeholder {
  color: var(--color-mid-gray);
  opacity: 1; /* Ensure placeholder is visible */
}

/* Bottle Quantity Text VStack */
.bottle-quantity-text-vstack {
  display: flex;
  flex-direction: column;
}

.bottle-quantity-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap;
}

/* Bottle Counter HStack */
.bottle-counter-hstack {
  display: flex;
  align-items: center;
  gap: 32px; /* Gap between capsules and tickbox */
}

/* Bottle Counter Capsules */
.bottle-counter-capsule {
  width: 100px;
  height: 32px;
  border: 3px solid var(--color-mid-gray);
  background-color: transparent;
  border-radius: 16px; /* Half height for capsule shape */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium);
  font-weight: 440;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.bottle-counter-capsule.minus-capsule,
.bottle-counter-capsule.plus-capsule {
  color: var(--color-mid-gray);
  border-color: var(--color-mid-gray);
}

.bottle-counter-capsule.middle-capsule {
  color: var(--color-mid-gray);
  border-color: var(--color-mid-gray);
  cursor: text; /* Clickable for typing */
  text-align: center;
  outline: none; /* Remove default input outline */
}

  .bottle-counter-capsule.minus-capsule:hover,
  .bottle-counter-capsule.plus-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Bottle Type HStack */
  .bottle-type-hstack {
    display: flex;
    align-items: center;
    margin-top: 32px; /* Space from the vape options above */
    margin-bottom: 0px;
    gap: 32px; /* 32px spacing between elements */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Create stacking context */
    z-index: 5; /* Between pod type and pod quantity */
  }

  .bottle-type-hstack.hidden {
    margin: 0; /* Remove all margins when hidden */
    padding: 0; /* Also remove padding to be safe */
    height: 0; /* Collapse the element completely */
    overflow: hidden; /* Hide any content that might overflow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .bottle-type-hstack.visible {
    margin-top: 16px;
    padding: 0;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Bottle Quantity HStack */
  .bottle-quantity-hstack {
    display: flex;
    align-items: center;
    margin-bottom: 32px; /* Space from the bottle type above */
    gap: 32px; /* 32px spacing between question and counter */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Create stacking context */
    z-index: 3; /* Lower than bottle type section */
  }

  .bottle-quantity-hstack.hidden {
    margin: 0; /* Remove all margins when hidden */
    padding: 0; /* Also remove padding to be safe */
    height: 0; /* Collapse the element completely */
    overflow: hidden; /* Hide any content that might overflow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .bottle-quantity-hstack.visible {
    margin-top: 16px;
    padding: 0;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* Pod Type HStack */
  .pod-type-hstack {
    display: flex; /* Back to flex for horizontal layout */
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
    gap: 32px; /* 32px spacing between elements */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Create stacking context */
    z-index: 10; /* Higher than pod quantity section */
  }
  
  .pod-type-hstack.hidden {
    margin: 0; /* Remove all margins when hidden */
    padding: 0; /* Also remove padding to be safe */
    height: 0; /* Collapse the element completely */
    overflow: hidden; /* Hide any content that might overflow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .pod-type-hstack.visible {
    margin-top: 16px;
    padding: 0;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* Pod Type Question */
  .pod-type-question {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium); /* 24px on desktop */
    font-weight: 440;
    margin: 0;
    white-space: nowrap;
  }
  
  /* Pod Dropdown Container */
  .pod-dropdown-container {
    position: relative;
  }
  
  /* Pod Dropdown Capsule */
  .pod-dropdown-capsule {
    width: 140px;
    height: 32px;
    border: 3px solid var(--color-mid-gray);
    background-color: transparent;
    border-radius: 16px; /* Half height for capsule shape */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .pod-dropdown-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .pod-dropdown-capsule.selected {
    border-color: var(--color-dark-gray);
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
  }
  
  /* Pod Dropdown Triangle */
  .pod-dropdown-triangle {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform 0.3s ease;
    margin-left: 4px; /* 4px gap between text and arrow */
  }
  
  /* Rotate triangle when dropdown is open */
  .pod-dropdown-capsule.open .pod-dropdown-triangle {
    transform: rotate(180deg);
  }
  
  /* Rotate second dropdown triangle when open */
  .pod-other-capsule.open .pod-dropdown-triangle {
    transform: rotate(180deg);
  }
  
  /* Pod Dropdown List */
  .pod-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    background-color: white;
    border: 3px solid var(--color-mid-gray);
    border-radius: 12px;
    margin-top: 8px;
    padding: 8px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100; /* Higher than pod type section */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }
  
  .pod-dropdown-list.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Pod Dropdown Items */
  .pod-dropdown-item {
    padding: 8px 16px;
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium); /* 24px on desktop */
    font-weight: 440;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .pod-dropdown-item:hover {
    background-color: var(--color-light-gray);
  }
  
  /* Pod Other Container */
  .pod-other-container {
    position: relative;
  }
  
  /* Pod Other Capsule */
  .pod-other-capsule {
    width: 140px;
    height: 32px;
    border: 3px solid var(--color-mid-gray);
    background-color: transparent;
    border-radius: 16px; /* Half height for capsule shape */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
  }
  
  .pod-other-capsule.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .pod-other-capsule.selected {
    border-color: var(--color-dark-gray);
  }
  
  .pod-other-capsule.selected .pod-other-text {
    color: var(--color-dark-gray);
  }
  
  /* Selected option text styling */
  .pod-other-capsule.selected span {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
  }
  
  /* Pod Other Text */
  .pod-other-text {
    color: var(--color-mid-gray);
    font-size: var(--font-size-medium); /* 24px on desktop */
    font-weight: 440;
    margin: 0;
    transition: color 0.3s ease;
  }
  
  /* Pod Strength HStack */
  .pod-strength-hstack {
    display: none;
    align-items: center;
    gap: 8px; /* 8px spacing between elements */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: all 0.3s ease;
  }
  
  .pod-strength-hstack.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .pod-strength-label {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    white-space: nowrap;
  }
  

  
  .pod-strength-unit {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    white-space: nowrap;
  }
  
  /* Pod Size HStack */
  .pod-bottle-size-hstack {
    display: none;
    align-items: center;
    gap: 8px; /* 8px spacing between elements */
    margin-right: -32px; /* Reduce right space to align tickbox with other questions */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: all 0.3s ease;
  }
  
  .pod-bottle-size-hstack.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .pod-bottle-size-label {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    white-space: nowrap;
  }
  

  
  .pod-bottle-size-unit {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    white-space: nowrap;
  }
  
  /* Spacer - Pushes tickboxes to the right */
  .spacer {
    flex: 1;
    min-width: 16px;
  }
  
  /* Pod Type Tickbox - Uses Default Tickbox Behavior */
  #pod-type-tick-box {
    /* Inherits default .tick-box styles for consistent alignment */
  }
  

  
  /* Pod Second Dropdown List */
  .pod-second-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    background-color: white;
    border: 3px solid var(--color-mid-gray);
    border-radius: 12px;
    margin-top: 8px;
    padding: 8px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 101; /* Higher than first dropdown */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }
  
  .pod-second-dropdown-list.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Pod Second Dropdown Items */
  .pod-second-dropdown-item {
    padding: 8px 16px;
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium); /* 24px on desktop */
    font-weight: 440;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .pod-second-dropdown-item:hover {
    background-color: var(--color-light-gray);
  }
  
  /* Pod Quantity HStack */
  .pod-quantity-hstack {
    display: flex; /* Back to flex for horizontal layout */
    align-items: center;
    margin-bottom: 32px; /* Normal margin when visible */
    gap: 32px; /* 32px spacing between question and counter */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, margin 0.4s ease, height 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Create stacking context */
    z-index: 1; /* Lower than pod type section */
  }
  
  .pod-quantity-hstack.hidden {
    margin: 0; /* Remove all margins when hidden */
    padding: 0; /* Also remove padding to be safe */
    height: 0; /* Collapse the element completely */
    overflow: hidden; /* Hide any content that might overflow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .pod-quantity-hstack.visible {
    margin-top: 16px;
    padding: 0;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* Pod Quantity Text VStack */
  .pod-quantity-text-vstack {
    display: flex;
    flex-direction: column;
  }
  
  .pod-quantity-question {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium); /* 24px on desktop */
    font-weight: 440;
    margin: 0;
    white-space: nowrap;
  }
  
  /* Pod Counter HStack */
  .pod-counter-hstack {
    display: flex;
    align-items: center;
    gap: 32px; /* Gap between capsules and tickbox */
  }
  
  /* Pod Counter Capsules */
  .pod-counter-capsule {
    width: 100px;
    height: 32px;
    border: 3px solid var(--color-mid-gray);
    background-color: transparent;
    border-radius: 16px; /* Half height for capsule shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .pod-counter-capsule.minus-capsule,
  .pod-counter-capsule.plus-capsule {
    color: var(--color-mid-gray);
    border-color: var(--color-mid-gray);
  }
  
  .pod-counter-capsule.middle-capsule {
    color: var(--color-mid-gray);
    border-color: var(--color-mid-gray);
    cursor: text; /* Clickable for typing */
    text-align: center;
    outline: none; /* Remove default input outline */
  }
  
  .pod-counter-capsule.minus-capsule:hover,
  .pod-counter-capsule.plus-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Target Usage Section */
  .target-usage-section {
    margin-top: 0; /* No top margin initially */
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid var(--color-mid-gray);
    transition: margin-top 0.3s ease; /* Smooth transition */
  }
  
  /* Add top margin when an option is selected */
  .target-usage-section.has-selection {
    margin-top: -8px; /* Normal top margin when option is selected */
  }
  
  /* Hide Target Usage content elements initially */
  .target-usage-subtitle,
  .target-usage-recommendation,
  .target-usage-picker,
  .plan-duration-subtitle {
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Hide Target Usage content when not confirmed */
  .target-usage-subtitle.hidden,
  .target-usage-recommendation.hidden,
  .target-usage-picker.hidden,
  .plan-duration-subtitle.hidden {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-15px) !important;
    pointer-events: none !important;
  }
  
  .target-usage-header-hstack {
    display: flex;
    align-items: center;
    gap: 0;
  }
  
  .target-usage-header {
    color: var(--color-black);
    font-size: var(--font-size-large);
    font-weight: 440;
    margin: 0;
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  .target-usage-subtitle {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    margin: 8px 0 0 0;
  }
  
  .target-usage-recommendation {
    color: var(--color-mid-gray);
    font-size: var(--font-size-small);
    font-weight: 440;
    margin: 16px 0 0 0; /* Reduced from 40px to 16px */
  }

  /* Plan Duration Subtitle */
  .plan-duration-subtitle {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    margin: 16px 0 0 0;
  }

  /* Plan Duration Recommendation */
  .plan-duration-recommendation {
    color: var(--color-mid-gray);
    font-size: var(--font-size-small);
    font-weight: 440;
    margin: 16px 0 0 0;
  }

  /* Plan Duration Weeks Value */
  .plan-duration-weeks {
    color: var(--color-dark-gray);
  }

  /* Plan Duration Input Section */
  .plan-duration-input-hstack {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-top: 24px;
  }

  /* Left VStack - Duration Adjustment */
  .plan-duration-left-vstack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
  }

  /* Duration Capsules HStack */
  .plan-duration-capsules-hstack {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* Duration Capsules */
  .plan-duration-capsule {
    height: 40px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 20px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-gray);
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .plan-duration-capsule-small {
    width: 100px;
  }

  .plan-duration-capsule-medium {
    width: 160px;
  }

  /* Plan Duration Display Capsule - Red Text */
  #plan-duration-display {
    color: var(--color-red);
  }

  .plan-duration-capsule-full {
    width: 100%;
  }

  /* Plan Duration Slider */
  .plan-duration-slider-container {
    width: 100%;
    height: 40px;
    position: relative;
  }

  .plan-duration-slider-track {
    width: 100%;
    height: 40px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 20px;
    background-color: transparent;
    position: relative;
    cursor: pointer;
  }

  .plan-duration-slider-thumb {
    width: 100px;
    height: 40px;
    border: 3px solid var(--color-dark-gray);
    border-radius: 20px;
    background-color: white;
    position: absolute;
    top: -3px;
    left: -3px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-gray);
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
    z-index: 10;
  }

  .plan-duration-slider-thumb.snapping {
    transition: left 0.2s ease;
  }

  .plan-duration-slider-thumb:active {
    cursor: grabbing;
  }

  /* Plan Duration Slider Labels */
  .plan-duration-slider-min-label,
  .plan-duration-slider-max-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-mid-gray);
    font-size: var(--font-size-medium);
    font-family: 'Outfit', sans-serif;
    font-weight: 440;
    pointer-events: none;
    user-select: none;
  }

  .plan-duration-slider-min-label {
    left: 0; /* Align left edge with track's left edge */
    margin-left: 12px; /* 12px left margin */
  }

  .plan-duration-slider-max-label {
    right: 0; /* Align right edge with track's right edge */
    margin-right: 12px; /* 12px right margin */
  }

  /* Plus and Minus Button Styling */
  .plan-duration-minus,
  .plan-duration-plus {
    font-size: var(--font-size-large);
  }

  /* Right VStack - Specific Date */
  .plan-duration-right-vstack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
  }

  /* Date Label */
  .plan-duration-date-label {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    margin: 0;
    text-align: left;
  }

  /* Date Capsules HStack */
  .plan-duration-date-capsules-hstack {
    display: flex;
    gap: 24px;
  }

  /* Date Capsules */
  .plan-duration-date-capsule {
    height: 40px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 20px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-gray);
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
  }

  /* Month Container with Arrows */
  .plan-duration-month-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .plan-duration-month-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-mid-gray);
    font-size: var(--font-size-xlarge);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    user-select: none;
    padding: 12px;
    margin: -4px;
  }

  .plan-duration-month-container:hover .plan-duration-month-arrow {
    opacity: 1;
  }

  .plan-duration-month-arrow-left {
    left: 8px;
  }

  .plan-duration-month-arrow-right {
    right: 8px;
  }

  .plan-duration-month-text {
    pointer-events: none;
  }

  /* Day Container with Arrows */
  .plan-duration-day-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .plan-duration-day-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-mid-gray);
    font-size: var(--font-size-xlarge);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    user-select: none;
    padding: 12px;
    margin: -4px;
  }

  .plan-duration-day-container:hover .plan-duration-day-arrow {
    opacity: 1;
  }

  .plan-duration-day-arrow-left {
    left: 8px;
  }

  .plan-duration-day-arrow-right {
    right: 8px;
  }

  .plan-duration-day-text {
    pointer-events: none;
  }

  /* Year Container with Arrows */
  .plan-duration-year-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .plan-duration-year-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-mid-gray);
    font-size: var(--font-size-xlarge);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    user-select: none;
    padding: 12px;
    margin: -4px;
  }

  .plan-duration-year-container:hover .plan-duration-year-arrow {
    opacity: 1;
  }

  .plan-duration-year-arrow-left {
    left: 8px;
  }

  .plan-duration-year-arrow-right {
    right: 8px;
  }

  .plan-duration-year-text {
    pointer-events: none;
  }

  /* Plan Duration Confirm Button */
  .plan-duration-confirm-button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    margin-bottom: 24px;
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .plan-duration-confirm-button-container.hidden {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-15px) !important;
    pointer-events: none !important;
  }

  /* Plan Duration Status Container */
  .plan-duration-status-container {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
  }

  .plan-duration-status-container.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .plan-duration-status-rectangle {
    width: 180px;
    height: 52px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 12px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-gray);
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
  }

  #plan-duration-tick-box {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  #plan-duration-tick-box.active {
    opacity: 1;
    visibility: visible;
    border-color: var(--color-green);
    background-color: rgba(145, 220, 41, 0.5);
  }

  #plan-duration-tick-box .tick-path {
    stroke-dashoffset: 40; /* Start with path hidden */
  }

  #plan-duration-tick-box.active .tick-path {
    stroke-dashoffset: 0; /* Reveal full path */
  }
  
  .level-4-text {
    color: var(--color-dark-gray);
  }
  
  /* Target Usage Picker */
  .target-usage-picker {
    width: 100%;
    height: 132px;
    background-color: white;
    border-radius: 32px;
    margin-top: 60px;
    margin-bottom: 20px; /* Default 32px, changes to 72px when level selected */
    padding: 12px;
    box-sizing: border-box;
    transition: margin-bottom 0.3s ease; /* Smooth transition */
  }

  /* When a level is selected, increase bottom margin */
  .target-usage-picker.level-selected {
    margin-bottom: 72px;
  }

  /* Target Usage Header HStack */
  .target-usage-header-hstack {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* Target Usage Header */
  .target-usage-header {
    color: var(--color-black);
    font-size: var(--font-size-large);
    font-weight: 440;
    margin: 0;
    white-space: nowrap; /* Prevent text wrapping */
  }

  /* Hide the target usage tickbox initially */
  #target-usage-tick-box {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  /* Show the target usage tickbox when it becomes active */
  #target-usage-tick-box.active {
    opacity: 1;
    visibility: visible;
  }

  /* Target Usage Status Container (rectangle + edit button) */
  .target-usage-status-container {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
  }

  .target-usage-status-container.hidden {
    opacity: 0;
    visibility: hidden;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Target Usage Status Rectangle */
  .target-usage-status-rectangle {
    width: 180px;
    height: 52px;
    border: 3px solid var(--color-mid-gray);
    border-radius: 12px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-gray);
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-size-medium);
    font-weight: 440;
  }

  /* Target Usage Confirm Button Container */
  .target-usage-confirm-button-container {
    display: flex;
    justify-content: flex-end; /* Right align the button */
    margin-top: 8px;
    margin-bottom: 24px;
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .target-usage-confirm-button-container.hidden {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-15px) !important;
    pointer-events: none !important;
  }
  
  .target-usage-picker-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    position: relative; /* Create positioning context for absolute positioned children */
  }
  
  .target-usage-top-rectangle {
    height: 56px;
    background-color: var(--color-black-5);
    border-radius: 20px;
    position: relative;
  }
  
  .target-usage-levels-hstack {
    display: flex;
    height: 100%;
    gap: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .target-usage-level {
    flex: 1;
    height: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    position: relative;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    transition: all 0.3s ease, background 0.4s ease;
  }
  
  .level-text {
    font-size: var(--font-size-large);
    font-weight: 440;
    color: var(--color-dark-gray);
    text-align: right;
  }
  
  .level-unit {
    color: var(--color-mid-gray);
  }
  
  .target-usage-level.active .level-text {
    color: white;
  }
  
  .target-usage-level.active .level-unit {
    color: white;
  }
  
  .target-usage-level.level-1 {
    /* Gradient set dynamically via JavaScript */
  }
  
  .target-usage-level.level-2 {
    /* Gradient set dynamically via JavaScript */
  }
  
  .target-usage-level.level-3 {
    /* Gradient set dynamically via JavaScript */
  }
  
  .target-usage-level.level-4 {
    /* Gradient set dynamically via JavaScript */
    position: relative; /* Create positioning context for overlay */
  }

  /* Quit Level Text */
  .quit-level-text {
    color: var(--color-red);
    font-size: var(--font-size-medium);
    font-weight: 440;
    text-align: center;
    position: absolute;
    top: -52px; /* 52px gap above the level 4 rectangle */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 10; /* Ensure it appears above other elements */
    opacity: 0.3; /* 50% opacity by default */
    transition: opacity 0.3s ease; /* Smooth transition */
  }

  /* Quit Level Text when level 4 is selected */
  .quit-level-text.level-4-selected {
    opacity: 1; /* 100% opacity when level 4 is selected */
  }
  
  .target-usage-bottom-rectangle {
    height: 40px;
    background-color: var(--color-light-gray);
    border-radius: 20px;
    position: relative;
  }
  
  .target-usage-gradient-rectangle {
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, rgba(145, 220, 41, 0) 0%, var(--color-green) 100%);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .target-usage-gradient-rectangle.hidden {
    display: none;
  }
  
  .target-usage-progress-rectangle {
    height: 40px;
    background-color: var(--color-light-gray);
    border-radius: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 50%; /* Initial width - will be updated by JavaScript */
  }
  
  .target-usage-progress-rectangle.hidden {
    display: none;
  }
  
  .target-usage-slider {
    width: 120px;
    height: 40px; /* Keep original height - vstack extends below */
    background-color: transparent; /* Remove background since we're using vstack */
    border: none; /* Remove border since we're using vstack */
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    user-select: none;
    transition: none;
    z-index: 3;
  }
  
  .target-usage-slider:active {
    cursor: grabbing;
  }
  
  .target-usage-slider.hidden {
    display: none;
  }

  /* Target usage level labels */
  .target-usage-level-labels {
    display: flex;
    gap: 0;
    width: 100%;
    height: 40px; /* Same height as target-usage-bottom-rectangle */
    margin-top: 0; /* Top-aligned with target-usage-bottom-rectangle */
  }

  .level-label-box {
    flex: 1;
    display: flex;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    color: var(--color-mid-gray);
    font-size: var(--font-size-small);
  }

  /* Mobile adjustments for level labels */
  @media (max-width: 768px) {
    .level-label-box {
      font-size: var(--font-size-xsmall);
    }
    
    /* Hide "Level" text and show only numbers in mobile */
    .level-label-box:nth-child(1)::before { content: "1"; }
    .level-label-box:nth-child(2)::before { content: "2"; }
    .level-label-box:nth-child(3)::before { content: "3"; }
    .level-label-box:nth-child(4)::before { content: "4"; }
    
    .level-label-box {
      font-size: 0; /* Hide the original text */
    }
    
    .level-label-box::before {
      font-size: var(--font-size-xsmall);
      color: var(--color-mid-gray);
    }
  }

  
  .slider-vstack {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .slider-rectangle {
    width: 120px;
    height: 40px;
    background-color: var(--color-light-gray);
    border: 3px solid var(--color-green);
    border-radius: 20px 0 20px 20px; /* top-left, top-right, bottom-right, bottom-left */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease; /* Add transition for smooth color changes */
  }

  .slider-level-text {
    font-size: var(--font-size-medium);
    font-weight: 440;
    color: var(--color-green);
    user-select: none;
  }

  .slider-percentage-hstack {
    position: absolute;
    top: 68px; /* Position 40px below the slider rectangle (40px slider height + 40px gap) */
    right: 0; /* Right-align with the slider rectangle */
    display: flex;
    align-items: center;
    gap: 8px; /* 8px spacing between text and icon */
    user-select: none;
  }

  .slider-percentage-text {
    font-size: var(--font-size-medium); /* 24px */
    font-weight: 440;
    color: var(--color-mid-gray);
    text-align: right;
    white-space: nowrap;
  }

  .slider-percentage-value {
    font-size: var(--font-size-large); /* 28px */
    font-weight: 440;
    color: var(--color-blue);
  }

  .slider-reduce-icon {
    height: var(--icon-size-large); /* 28px */
    width: auto;
    display: block;
  }

  /* Hide mobile percentage text on desktop */
  .mobile-percentage-hstack {
    display: none;
  }
  
  /* Test Question Section */
  .test-question-hstack {
    display: flex;
    align-items: center;
    margin-top: 16px;
    gap: 32px;
  }
  
  .test-question {
    color: var(--color-dark-gray);
    font-size: var(--font-size-medium);
    font-weight: 440;
    margin: 0;
    white-space: nowrap;
  }
  
  .plan-question {
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium); /* 24px on desktop */
  font-weight: 440;
  margin: 0;
  white-space: nowrap; /* Prevent text wrapping */
}

.capsule-buttons {
  display: flex;
  gap: 32px; /* Gap between capsule buttons */
}

.capsule-button {
  width: 140px;
  height: 32px;
  border: 3px solid var(--color-mid-gray);
  background-color: white;
  color: var(--color-mid-gray);
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-medium);
  font-weight: 440;
  border-radius: 16px; /* Half height for capsule shape */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.capsule-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.capsule-button.active[data-type="cigarettes"] {
  border-color: var(--color-cigarette);
  background-color: rgba(220, 150, 70, 0.5); /* 50% opacity */
  color: white;
}

.capsule-button.active[data-type="vapes"] {
  border-color: var(--color-vapes);
  background-color: rgba(71, 198, 172, 0.5); /* 50% opacity */
  color: white;
}

.capsule-button.active[data-type="both"] {
  border-color: var(--color-both);
  background-color: rgba(198, 204, 21, 0.5); /* 50% opacity */
  color: white;
}

/* Tick Box */
.tick-box {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-mid-gray);
  background-color: white;
  border-radius: 50%; /* Perfect circle */
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Prevent shrinking */
  position: relative; /* For absolute positioning of tick mark */
  z-index: 1; /* Ensure proper stacking context */
}

.tick-box.active {
  border-color: var(--color-green);
  background-color: rgba(145, 220, 41, 0.5); /* 50% opacity green fill */
}

/* Tick Mark SVG */
.tick-mark {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; /* Much higher z-index to ensure it's above everything */
  pointer-events: none; /* Prevent interference with circle clicks */
  transform: translate(4px, -8px); /* Move 4px right, 8px up */
}

/* Tick Path Animation */
.tick-path {
  stroke: var(--color-black); /* Ensure black color */
  stroke-width: 3; /* Ensure 3px stroke width */
  stroke-dasharray: 40; /* Total path length for new coordinates */
  stroke-dashoffset: 40; /* Start with path hidden */
  transition: stroke-dashoffset 1s; /* Draw entire path with delay */
}

.tick-box.active .tick-path {
  stroke-dashoffset: 0; /* Reveal full path */
}

.build-plan-hstack {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
}

.build-plan-text {
  color: var(--color-black);
  margin: 0;
  font-size: var(--font-size-large); /* 28px on desktop */
  white-space: nowrap;
}

.spanner-icon {
  height: var(--icon-size-large); /* 28px on desktop */
  width: auto;
  display: block;
}

.cross-icon {
  height: var(--icon-size-large); /* 28px on desktop */
  width: auto;
  display: block;
  transform: rotate(45deg); /* Start as plus (cross rotated 45 degrees) */
  margin-right: 24px; /* Right margin of 24px */
  transition: transform 0.3s ease; /* Smooth rotation transition */
}

/* Content container with proper spacing from header */
.content-container {
  margin: clamp(20px, 5vw, 60px) clamp(20px, 5vw, 60px) 0 clamp(20px, 5vw, 60px); /* Top, right, bottom, left margins */
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap when form is hidden */
  transition: gap 0.3s ease; /* Smooth transition for gap changes */
}

/* When form is visible, add gap between form and button */
.content-container.has-form {
  gap: 60px; /* Spacing between form and button when visible */
}

/* Get in Touch Form */
.get-in-touch-form {
  background-color: var(--color-red-5); /* Red with 5% opacity */
  border-radius: 12px;
  width: 100%; /* Full width within container */
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.get-in-touch-form.show {
  transform: translateY(0);
  opacity: 1;
  max-height: 1000px; /* Allow form to expand but with a reasonable cap */
}

.form-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Gap between form fields and send button */
  padding: 24px;
}

.form-fields {
  width: 100%;
}

.form-field {
  margin-bottom: 20px;
}

.form-field:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  color: var(--color-red);
  opacity: 0.5; /* 50% opacity */
  font-size: var(--font-size-medium); /* 24px on desktop */
  margin-bottom: 8px;
  font-weight: 440;
}

.field-input {
  width: 100%;
  padding: 12px;
  border: none; /* Remove black border */
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-size-small);
  background-color: white;
  box-sizing: border-box;
}

.field-textarea {
  min-height: 100px;
  max-height: 600px; /* Cap the maximum height of the textarea */
  resize: vertical;
}



/* Send Button */
.send-button-hstack {
  display: flex;
  align-items: center;
  gap: 8px; /* Gap between text and icon */
  justify-content: flex-start; /* Left aligned */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.send-text {
  color: var(--color-red);
  margin: 0;
  font-size: var(--font-size-large); /* 28px on desktop */
  white-space: nowrap;
}

.send-icon {
  height: var(--icon-size-large); /* 28px on desktop */
  width: auto;
  display: block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  /* Reduce logo height on mobile */
  .logo {
    height: 24px; /* Smaller logo for mobile */
  }
  
  /* Change mail icon to medium size on mobile */
  .mail-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
  }
  
  /* Hide get in touch text on mobile */
  .get-in-touch-text {
    display: none;
  }
  
  /* Remove gap on mobile since there's no text */
  .get-in-touch-hstack {
    gap: 0;
  }
  
  /* Footer mobile adjustments */
  .footer-container {
    height: 40px !important; /* Mobile height */
  }
  
  .footer-email {
    font-size: var(--font-size-xsmall) !important; /* Mobile font size */
  }
  
  .footer-w-icon {
    height: var(--icon-size-xsmall) !important; /* Mobile icon size */
  }
  
  /* Build Your Plan button mobile adjustments */
  .build-plan-text {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }
  
  .spanner-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
  }
  
  .cross-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
  }
  
  /* Send button mobile adjustments */
  .send-text {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }
  
  .send-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
  }
  
  /* Field labels mobile adjustments */
  .field-label {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Beta text mobile adjustments */
  .beta-text {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Plan headers mobile adjustments */
  .plan-header {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }
  
  /* Current nicotine header mobile layout */
  .current-nicotine-header-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0px; /* Reduced gap to help fit text and tickbox on same row */
  }
  
  /* Mobile order for current nicotine header: text, spacer, tickbox (line 1), then status container (line 2) */
  .current-nicotine-header-hstack .plan-header { 
    order: 1; 
    margin: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
  }
  .current-nicotine-header-hstack .spacer { order: 2; }
  .current-nicotine-header-hstack .tick-box { 
    order: 3; 
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
  }
  .current-nicotine-header-hstack .current-nicotine-status-container { order: 4; }
  
  /* Fix order within status container: display box first, then edit button */
  .current-nicotine-status-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .current-nicotine-status-container .status-rectangle { 
    order: 1; 
    margin-top: 16px; /* Add top margin to display box in mobile */
    margin-bottom: 12px;
  }
  .current-nicotine-status-container .edit-button { 
    order: 2;
    margin-top: 16px;
    margin-bottom: 12px;
  }
  
  /* Set heights and margins to 0 for hidden elements */
  .current-nicotine-status-container.hidden,
  .current-nicotine-status-container.hidden *,
  #current-nicotine-tick-box.hidden {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Target usage mobile adjustments */
  .target-usage-header {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }
  
  /* Target usage header mobile layout */
  .target-usage-header-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0px; /* No gap to help fit text and tickbox on same row */
  }
  
  /* Mobile order for target usage header: text, spacer, tickbox (line 1), then status container (line 2) */
  .target-usage-header-hstack .target-usage-header { 
    order: 1; 
    margin: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
  }
  .target-usage-header-hstack .spacer { order: 2; }
  .target-usage-header-hstack .tick-box { 
    order: 3; 
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
  }
  .target-usage-header-hstack .target-usage-status-container { order: 4; }
  
  /* Fix order within target usage status container: display box first, then edit button */
  .target-usage-status-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .target-usage-status-container .target-usage-status-rectangle { 
    order: 1; 
    margin-top: 16px; /* Add top margin to display box in mobile */
    margin-bottom: 4px;
  }
  .target-usage-status-container .edit-button { 
    order: 2;
    margin-top: 16px;
    margin-bottom: 4px;
  }
  
  /* Mobile styles for target usage status rectangle */
  .target-usage-status-rectangle {
    font-size: var(--font-size-medium);
    height: 40px; /* Reduced from 52px by 12px */
  }
  
  /* Override inline font-size for text inside status rectangles in mobile */
  .status-rectangle span,
  .target-usage-status-rectangle span {
    font-size: var(--font-size-medium) !important;
  }
  
  /* Set heights and margins to 0 for hidden elements */
  .target-usage-status-container.hidden,
  .target-usage-status-container.hidden *,
  #target-usage-tick-box.hidden {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Plan duration header mobile layout - same as current/target usage */
  .target-usage-header-hstack:has(.plan-duration-status-container) {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0px; /* No gap to help fit text and tickbox on same row */
  }
  
  /* Mobile order for plan duration header: text, spacer, tickbox (line 1), then status container (line 2) */
  .target-usage-header-hstack:has(.plan-duration-status-container) .target-usage-header { 
    order: 1; 
    margin: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
  }
  .target-usage-header-hstack:has(.plan-duration-status-container) .spacer { order: 2; }
  .target-usage-header-hstack:has(.plan-duration-status-container) .tick-box { 
    order: 3; 
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
  }
  .target-usage-header-hstack:has(.plan-duration-status-container) .plan-duration-status-container { order: 4; }
  
  /* Fix order within plan duration status container: display box first, then edit button */
  .plan-duration-status-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .plan-duration-status-container .plan-duration-status-rectangle { 
    order: 1; 
    margin-top: 16px; /* Add top margin to display box in mobile */
    margin-bottom: 4px;
  }
  .plan-duration-status-container .edit-button { 
    order: 2;
    margin-top: 16px;
    margin-bottom: 4px;
  }
  
  /* Mobile styles for plan duration status rectangle */
  .plan-duration-status-rectangle {
    font-size: var(--font-size-medium);
    height: 40px; /* Reduced from 52px by 12px */
  }
  
  /* Override inline font-size for text inside plan duration status rectangle in mobile */
  .plan-duration-status-rectangle span {
    font-size: var(--font-size-medium) !important;
  }
  
  /* Set heights and margins to 0 for hidden plan duration elements */
  .plan-duration-status-container.hidden,
  .plan-duration-status-container.hidden *,
  #plan-duration-tick-box.hidden {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Reduce bottom margin of plan builder section in mobile */
  .plan-builder-dropdown {
    margin-bottom: 24px; /* Reduced from 60px to bring Your Plan section closer */
  }
  
  /* Adjust Your Plan section margin when plan builder is hidden - mobile version */
  .plan-builder-dropdown:not(.show) + .your-plan-section {
    margin-top: -44px !important; /* Reduced from -100px for mobile */
  }
  
  /* Plan duration mobile layout */
  .plan-duration-input-hstack {
    flex-direction: column; /* Stack vertically in mobile */
    align-items: stretch; /* Full width for both sections */
    gap: 40px; /* Reduced gap between minus/display/plus and slider */
  }
  
  .plan-duration-left-vstack,
  .plan-duration-right-vstack {
    flex: none; /* Remove flex: 1 to allow natural sizing */
    width: 100%; /* Full width for both sections */
  }
  
  /* Reduce gap between minus/display/plus capsules and slider in mobile */
  .plan-duration-left-vstack {
    gap: 12px; /* Reduced from 24px */
  }
  
  /* Plan duration text mobile adjustments */
  .plan-duration-recommendation {
    font-size: var(--font-size-xsmall); /* "Based upon your current and target usage..." text */
  }
  
  .plan-duration-date-label {
    font-size: var(--font-size-small); /* "Or select a specific date..." text */
  }
  
  /* Plan duration capsule text mobile adjustments */
  .plan-duration-capsule-medium {
    font-size: var(--font-size-small); /* Red text showing number of weeks */
  }
  
  /* Slider min/max labels mobile adjustments */
  .plan-duration-slider-min-label,
  .plan-duration-slider-max-label {
    font-size: var(--font-size-small); /* "Min" and "Max" text at slider ends */
  }
  
  /* Date capsule text mobile adjustments */
  .plan-duration-date-capsule {
    font-size: var(--font-size-small); /* Date values in capsules */
    flex: 1; /* Make capsules wider to reduce gaps */
  }
  
  /* Reduce gap between date capsules in mobile */
  .plan-duration-date-capsules-hstack {
    gap: 8px; /* Reduced from 24px */
  }
  
  /* Make arrows always visible in mobile (no hover) */
  .plan-duration-day-arrow,
  .plan-duration-month-arrow,
  .plan-duration-year-arrow {
    opacity: 1 !important;
  }
  
  /* Spread out arrows more in mobile */
  .plan-duration-day-arrow-left,
  .plan-duration-month-arrow-left,
  .plan-duration-year-arrow-left {
    left: 0px; /* Reduced from 8px */
  }
  
  .plan-duration-day-arrow-right,
  .plan-duration-month-arrow-right,
  .plan-duration-year-arrow-right {
    right: 0px; /* Reduced from 8px */
  }
  
  /* Always show savings made hstack in mobile */
  .costing-hstack-2-content {
    width: auto !important;
    opacity: 1 !important;
  }
  
  /* Always show savings content elements in mobile */
  .savings-amount {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  .savings-label {
    opacity: 0.5 !important;
    transform: translateY(0) !important;
  }
  
  .target-usage-subtitle {
    font-size: var(--font-size-small); /* 18px on mobile */
  }

  .target-usage-recommendation {
    font-size: var(--font-size-xsmall); /* 16px for mobile */
  }

  .plan-duration-subtitle {
    font-size: var(--font-size-small); /* 18px on mobile */
  }

  .plan-duration-minus,
  .plan-duration-plus {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }
  
  /* Target usage slider mobile adjustments */
  .target-usage-slider {
    width: 25%; /* Each level rectangle is 25% width (100% / 4 rectangles) */
  }

  .slider-rectangle {
    width: 100%; /* Full width of parent slider on mobile */
  }

  .slider-percentage-text {
    font-size: var(--font-size-small); /* 18px on mobile */
  }

  .slider-percentage-value {
    font-size: var(--font-size-medium); /* 24px on mobile */
  }

  .slider-reduce-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
  }

  /* Mobile: Hide the percentage text in the vstack */
  .slider-percentage-hstack {
    display: none !important;
  }

  /* Mobile-only percentage text below target-usage-picker */
  .mobile-percentage-hstack {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0px;
    margin-bottom: 16px; /* 16px bottom margin on mobile */
    padding-right: 12px; /* Align with target-usage-picker padding */
    position: fixed; /* Make it stationary in mobile */
    bottom: 160px; /* Position from bottom of screen */
    right: 24px; /* Position from right of screen */
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent background */
    padding: 8px 16px; /* Add padding for better visibility */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 1000; /* Ensure it's above other elements */
  }

  /* Hide mobile percentage text when hidden class is applied */
  .mobile-percentage-hstack.hidden {
    display: none !important;
  }

  /* Target usage confirm button mobile adjustments */
  .target-usage-confirm-button-container {
    margin-top: 72px; /* Add top margin in mobile */
    margin-bottom: 24px; /* Reduce bottom margin in mobile */
  }

  .mobile-percentage-text {
    font-size: var(--font-size-small); /* 18px on mobile */
    font-weight: 440;
    color: var(--color-mid-gray);
    text-align: right;
    white-space: nowrap;
  }

  .mobile-percentage-value {
    font-size: var(--font-size-medium); /* 24px on mobile */
    font-weight: 440;
    color: var(--color-blue);
  }

  .mobile-reduce-icon {
    height: var(--icon-size-medium); /* 24px on mobile */
    width: auto;
    display: block;
  }
  
  /* Level text mobile adjustments */
  .level-text {
    font-size: var(--font-size-small); /* 20px on mobile */
    text-align: center; /* Center text in mobile mode */
  }
  
  /* Center level content in mobile mode */
  .target-usage-level {
    justify-content: center; /* Center content instead of flex-end */
    padding-right: 0; /* Remove right padding */
  }
  
  /* Hide /day unit on mobile */
  .level-unit {
    display: none;
  }
  
  /* Slider level text mobile adjustments */
  .slider-level-text {
    font-size: var(--font-size-xsmall); /* 16px on mobile */
  }
  
  /* Plan question mobile adjustments */
  .plan-question {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Capsule buttons mobile adjustments */
  .capsule-button {
    font-size: var(--font-size-small); /* 18px on mobile */
    width: 120px; /* Reduced width on mobile (from 140px) */
    padding: 0 4px; /* Add 8px left and right padding for text */
  }
  
  .capsule-buttons {
    justify-content: space-between; /* Fill container width with flexible gaps */
    width: 100%; /* Ensure full width */
  }
  
  /* Cigarette options mobile adjustments */
  .cigarette-options-hstack {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  .cigarette-option-box {
    width: 140px;
    height: 120px;
  }
  
  .cigarette-option-icon.pouch-icon {
    width: 115px; /* Mobile height for pouch icon */
  }
  
  .cigarette-option-icon.carton-icon {
    height: 90px; /* Mobile height for carton icon */
  }
  
  /* Mobile question text adjustment */
  .cigarette-question {
    font-size: 0 !important; /* Hide the original text */
  }
  
  .cigarette-question::before {
    content: "How do you smoke?";
    font-size: var(--font-size-small) !important; /* Restore font size */
    color: var(--color-dark-gray);
    font-weight: 440;
    white-space: nowrap;
  }
  
  .cigarette-option-icon {
    width: 60px;
    height: 60px;
  }
  
  .cigarette-subtext {
    font-size: var(--font-size-xsmall); /* 16px for mobile */
  }
  
  /* Do you smoke question mobile layout using flexbox order */
  .question-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  /* Mobile order for "Do you smoke?": question, spacer, tickbox (line 1), then options (line 2) */
  .question-hstack .plan-question { order: 1; }
  .question-hstack .spacer { order: 2; }
  .question-hstack .tick-box { order: 3; }
  .question-hstack .capsule-buttons { order: 4; }
  
  /* Cigarette question mobile layout using flexbox order */
  .cigarette-options-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  /* Mobile order for cigarette options: text, spacer, tickbox (line 1), then pouch, carton (line 2) */
  .cigarette-options-hstack .cigarette-text-vstack { order: 1; }
  .cigarette-options-hstack .spacer { order: 2; }
  .cigarette-options-hstack .tick-box { order: 3; }
  .cigarette-options-hstack .pouch-vstack { order: 4; }
  .cigarette-options-hstack .carton-vstack { order: 5; }
  
  /* Vape question mobile layout using flexbox order */
  .vape-options-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  /* Mobile order for vape options: text, spacer, tickbox (line 1), then refillable, pod-based (line 2) */
  .vape-options-hstack .vape-text-vstack { order: 1; }
  .vape-options-hstack .spacer { order: 2; }
  .vape-options-hstack .tick-box { order: 3; }
  .vape-options-hstack .refillable-vstack { order: 4; }
  .vape-options-hstack .pod-based-vstack { order: 5; }
  
  .cigarette-option-text {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Quantity options mobile adjustments */
  .quantity-options-hstack {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  
  .quantity-question {
    font-size: var(--font-size-small); /* 18px on mobile */
    white-space: normal; /* Allow text wrapping */
    line-height: 1.3; /* Better line spacing for wrapped text */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
  }
  
  .counter-capsule {
    font-size: var(--font-size-small); /* 18px on mobile */
    width: 60px; /* Reduced width for mobile */
    height: 32px; /* Slightly reduced height */
  }
  
  .counter-hstack {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap between counter elements */
  }
  
  /* Vape options mobile adjustments - removed conflicting flex-direction: column */
  
  .vape-question {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  .vape-subtext {
    font-size: 14px; /* Smaller than small for mobile */
  }
  
  .vape-option-box {
    width: 140px;
    height: 120px;
  }
  
  .vape-option-icon.refillable-icon {
    height: 90px;
  }
  
  .vape-option-icon.pod-based-icon {
    height: 95px;
  }
  
  .vape-option-text {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Reduce margin for vape text vstack in mobile */
  .vape-text-vstack {
    margin-right: 16px; /* Reduced from 32px for mobile */
  }
  
  /* Bottle type mobile adjustments */
  .bottle-type-hstack {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  
  .bottle-type-question {
    font-size: var(--font-size-small); /* 18px on mobile */
    white-space: normal; /* Allow text wrapping */
    line-height: 1.3; /* Better line spacing for wrapped text */
    flex: 1 1 100%; /* Take full width and force wrapping */
    min-width: 0; /* Allow flex item to shrink below content size */
  }
  
  /* Force strength and bottle size elements to wrap to new lines */
  .strength-hstack,
  .bottle-size-hstack {
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
  }
  
  .strength-label,
  .strength-unit,
  .bottle-size-label,
  .bottle-size-unit {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  .bottle-input {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Bottle quantity mobile adjustments */
  .bottle-quantity-hstack {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  
  .bottle-quantity-question {
    font-size: var(--font-size-small); /* 18px on mobile */
    white-space: normal; /* Allow text wrapping */
    line-height: 1.3; /* Better line spacing for wrapped text */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
  }
  
  .bottle-counter-capsule {
    font-size: var(--font-size-small); /* 18px on mobile */
    width: 60px; /* Reduced width for mobile */
    height: 32px; /* Slightly reduced height */
  }
  
  .bottle-counter-hstack {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap between counter elements */
  }
  
  /* Pod type mobile adjustments */
  .pod-type-hstack {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
  
  /* Mobile order for pod type: question, spacer, tickbox (line 1), then all options (line 2+) */
  .pod-type-hstack .pod-type-question { order: 1; }
  .pod-type-hstack .spacer { order: 2; }
  .pod-type-hstack .tick-box { order: 3; }
  .pod-type-hstack .pod-dropdown-container { order: 4; }
  .pod-type-hstack .pod-other-container { order: 5; }
  .pod-type-hstack .pod-strength-hstack { order: 6; }
  .pod-type-hstack .pod-bottle-size-hstack { order: 7; }
  
  .pod-type-question {
    font-size: var(--font-size-small); /* 18px on mobile */
    white-space: normal; /* Allow text wrapping */
    line-height: 1.3; /* Better line spacing for wrapped text */
    flex: 1;
    min-width: calc(100% - 80px); /* Allow flex item to shrink below content size */
    max-width: calc(100%); /* Reserve more space for spacer and tickbox */
  }
  
  /* Force spacer and tickbox to stay on same line as question */
  .pod-type-hstack .spacer,
  .pod-type-hstack .tick-box {
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
  }
  
  /* Force all option elements to wrap to new lines */
  .pod-type-hstack .pod-dropdown-container,
  .pod-type-hstack .pod-other-container,
  .pod-type-hstack .pod-strength-hstack,
  .pod-type-hstack .pod-bottle-size-hstack {
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
  }
  
  .pod-dropdown-capsule,
  .pod-other-capsule {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  .pod-strength-label,
  .pod-strength-unit,
  .pod-pod-size-label,
  .pod-pod-size-unit {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  .pod-strength-input,
  .pod-pod-size-input {
    font-size: var(--font-size-small); /* 18px on mobile */
  }
  
  /* Pod quantity mobile adjustments */
  .pod-quantity-hstack {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  
  .pod-quantity-question {
    font-size: var(--font-size-small); /* 18px on mobile */
    white-space: normal; /* Allow text wrapping */
    line-height: 1.3; /* Better line spacing for wrapped text */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
  }
  
  .pod-counter-capsule {
    font-size: var(--font-size-small); /* 18px on mobile */
    width: 60px; /* Reduced width for mobile */
    height: 32px; /* Slightly reduced height */
  }
  
  .pod-counter-hstack {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap between counter elements */
  }
  
  /* Mobile adjustments for spacers */
  .spacer {
    min-width: 8px; /* Smaller minimum width on mobile */
  }
  
  /* Mobile tickbox opacity adjustments */
  /* Show tickboxes at 10% opacity before activation in mobile mode */
  .tick-box {
    opacity: 0.2;
    transition: opacity 0.3s ease, all 0.3s ease;
  }
  
  /* Show tickboxes at 100% opacity when activated in mobile mode */
  .tick-box.active {
    opacity: 1;
  }
  
  /* Mobile adjustments for plan sections */
  .plan-section {
    gap: 12px; /* Reduced gap on mobile */
  }
  
  /* Mobile adjustments for plan headers container */
  .plan-headers {
    gap: 12px; /* Reduced gap between sections on mobile */
  }
  
  /* Mobile adjustments for pod input hstacks */
  .pod-strength-hstack.show,
  .pod-bottle-size-hstack.show {
    display: flex; /* Ensure proper display on mobile */
  }
  
  /* Confirm button mobile adjustments */
  .confirm-text {
    font-size: var(--font-size-small); /* 18px on mobile */
  }

  /* Quit level text mobile adjustments */
  .quit-level-text {
    font-size: var(--font-size-small); /* 18px on mobile */
    top: -40px; /* 44px gap above the level 4 rectangle on mobile */
  }
  
  /* Level picker gradient mobile adjustments - solid fill instead of gradient */
  .target-usage-level.active {
    background: var(--color-blue) !important; /* Override JavaScript gradient for level 1 */
  }
  
  .target-usage-level.level-2.active {
    background: var(--color-level-2) !important; /* Override JavaScript gradient for level 2 */
  }
  
  .target-usage-level.level-3.active {
    background: var(--color-level-3) !important; /* Override JavaScript gradient for level 3 */
  }
  
  .target-usage-level.level-4.active {
    background: var(--color-green) !important; /* Override JavaScript gradient for level 4 */
  }

  /* Target usage picker mobile adjustments */
  .target-usage-picker {
    margin-top: 44px; /* 24px + 20px = 44px total margin on mobile */
    margin-bottom: 0px !important; /* Override desktop 72px with 16px on mobile */
  }

  /* Your Plan mobile adjustments */
  .your-plan-content-hstack {
    flex-direction: column;
    gap: 24px; /* Reduced gap on mobile */
    margin-top: 16px; /* Reduced gap between header and graph in mobile */
  }

  .your-plan-left-vstack,
  .your-plan-right-vstack {
    flex: 1; /* Equal width on mobile */
  }
  
  /* Increase gap between text and graph in mobile */
  .your-plan-left-vstack {
    gap: 20px; /* Increased from 24px to create more space between text and graph */
  }
  
  /* Make entire header text smaller in mobile */
  .your-plan-title {
    font-size: var(--font-size-small); /* Smaller font for entire header text */
  }
  
  /* Make graph arm labels smaller in mobile */
  #baseline-label, #target-label, #target-level-label {
    font-size: var(--font-size-xsmall) !important; /* Smaller font for graph arm labels */
  }
  
  .graph-level-label-css {
    font-size: var(--font-size-xsmall); /* Smaller font for graph level labels */
  }
  
  .graph-label {
    font-size: var(--font-size-xsmall); /* Smaller font for graph labels */
  }
  
  .graph-level-label {
    font-size: calc(var(--font-size-xsmall) * 0.9); /* Smaller font for graph level labels */
  }
  
  /* Graph arm height adjustments will be handled in JavaScript for mobile mode */
  
  /* Make x-axis date labels smaller in mobile */
  .x-axis-label {
    font-size: var(--font-size-small); /* Smaller font for date labels at bottom of graph */
  }
  
  /* Make nicotine/costing picker text and icons smaller in mobile */
  .your-plan-content-text {
    font-size: var(--font-size-small); /* Smaller font for 'Nicotine' and 'Costing' text */
  }
  
  .your-plan-content-icon {
    height: var(--icon-size-small); /* Smaller icons for nicotine.svg and costing.svg */
  }
  
  /* Reduce gap between text and icons in nicotine/costing picker */
  .your-plan-inner-content-hstack {
    gap: 8px; /* Reduced from 12px to 8px for tighter spacing */
  }
  
  /* Add top margin to nicotine/costing picker container */
  .your-plan-clickable-rectangle {
    margin-top: 32px; /* Add top margin to the picker container */
  }
  
  /* Reduce tooltip transparency in mobile for better visibility */
  .curve-tooltip {
    background-color: rgba(255, 255, 255, 0.9); /* Increased from 0.5 to 0.9 for better visibility */
  }

  .your-plan-small-rectangle {
    height: 48px; /* Slightly smaller on mobile */
  }

  /* Set default height for all large rectangles in mobile */
  .your-plan-large-rectangle {
    height: 300px; /* Default height for mobile */
  }
  
  /* Override height specifically for right vstack in mobile */
  .your-plan-right-vstack .your-plan-large-rectangle {
    height: 375px; /* Increased by 25% from 300px to 375px on mobile - only for right vstack */
  }
  
  /* Make current spending toggle elements smaller in mobile */
  .spending-toggle-text {
    font-size: var(--font-size-small) !important; /* Smaller font for "Current spending" text */
  }
  
  .spending-toggle-value {
    font-size: var(--font-size-small) !important; /* Smaller font for £0.00 value */
  }
  
  .spending-toggle-unit {
    font-size: var(--font-size-small) !important; /* Smaller font for "/week" text */
  }
  
  .spending-toggle-icon {
    width: var(--icon-size-medium) !important; /* Smaller icons for show/hide buttons */
    height: auto;
  }
  
  .spending-toggle-box {
    height: 36px !important; /* Reduced from 44px to 36px for smaller box */
  }
  
  .spending-toggle-box.visible {
    width: 84px !important; /* Reduced from 100px to 84px for smaller box */
    border-width: 2px !important; /* Reduced from 3px to 2px for thinner stroke */
  }
  
  /* Reduce gap between icon and text in mobile */
  .spending-toggle-hstack {
    gap: 4px !important; /* Reduced from 8px to 4px in mobile */
  }
  
  /* Graph metrics mobile adjustments */
  .graph-metric-top-text {
    font-size: var(--font-size-xsmall) !important; /* Smaller font for 'Baseline', 'Target Level X' */
  }
  
  .graph-metric-bottom-text {
    font-size: var(--font-size-small) !important; /* Smaller font for 'Xmg /day', '£X' */
  }
  
  /* New hstacks mobile adjustments */
  .new-hstack-text {
    font-size: var(--font-size-small) !important; /* Smaller font for hstack text */
  }
  
  .new-hstack-text-gray {
    font-size: var(--font-size-small) !important; /* Smaller font for gray text in mobile */
  }
  
          .new-hstack-text-dark {
            font-size: var(--font-size-small) !important; /* Smaller font for dark text in mobile */
          }
          
          .new-hstack-text-red {
            font-size: var(--font-size-small) !important; /* Smaller font for red text in mobile */
          }
          
          .savings-vs-text {
            font-size: var(--font-size-xsmall) !important; /* Smaller font for vs text in mobile */
          }
  
  .new-hstack-icon {
    width: var(--icon-size-small) !important; /* Smaller icons for hstacks */
    margin-left: -4px !important; /* Negative margin in mobile */
  }
  
  /* Mobile adjustments for rectangle-2 */
  .rectangle-2 {
    height: 120px !important; /* Reduced from 156px */
  }
  
  /* Mobile adjustments for hstack gap */
  .new-hstacks-vstack {
    gap: 12px !important; /* Reduced from 20px */
  }
  
  /* Mobile adjustments for white metric rectangles */
  .white-metric-rectangle {
    width: 140px !important; /* Reduced from 172px */
  }
  
  .new-hstack-2 .new-hstack-icon {
    width: var(--icon-size-small) !important; /* Smaller icons for hstack 2 */
  }
  
  /* Ensure icons are hidden in costing mode in mobile */
  .new-hstack-1 .new-hstack-icon[style*="width: 0"],
  .new-hstack-2 .new-hstack-icon[style*="width: 0"] {
    width: 0 !important;
    margin: 0 !important;
  }
  
  /* Costing mode text mobile adjustments */
  .costing-text-medium {
    font-size: var(--font-size-small) !important; /* Smaller font for 'Average bill', '/week', 'Savings made' */
  }
  
  .costing-text-large {
    font-size: var(--font-size-small) !important; /* Smaller font for '£X' values */
  }
  
  .savings-amount {
    font-size: var(--font-size-small) !important; /* Smaller font for savings amount */
  }
  
  .savings-label {
    font-size: var(--font-size-xsmall) !important; /* Smaller font for 'vs current spending' */
  }
  
  /* Investor Pitch mobile adjustments */
  .investor-pitch-title {
    font-size: var(--font-size-small) !important; /* Smaller font for mobile */
  }
  
  .investor-pitch-icon {
    display: none !important; /* Hide icon in mobile */
  }

}

/* Investor Pitch Section */
.investor-pitch-section {
  width: 100%;
  padding: 0 clamp(20px, 5vw, 60px); /* Match main screen padding: 20px mobile, 60px desktop */
  margin-top: 24px; /* Space from Your Plan section */
  margin-bottom: 60px; /* Space from Your Plan section */
  transition: all 0.3s ease;
}

.investor-pitch-rectangle {
  width: 100%;
  background-color: color-mix(in srgb, var(--color-blue) 20%, transparent);
  border-radius: 12px;
  padding: 12px; /* 12px gap around all edges */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Investor Pitch VStack */
.investor-pitch-vstack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
}

/* Investor Pitch Header HStack */
.investor-pitch-header-hstack {
  display: flex;
  align-items: center;
  padding: 0px 12px;
  width: 100%;
}

/* Investor Pitch Title */
.investor-pitch-title {
  font-size: var(--font-size-large);
  color: var(--color-blue);
  font-family: var(--font-family);
  font-weight: 500;
  margin: 0;
}

/* Investor Pitch Spacer */
.investor-pitch-spacer {
  flex: 1;
}

/* Investor Pitch Icon */
.investor-pitch-icon {
  height: var(--icon-size-large);
  width: auto;
  cursor: pointer; /* Show clickable cursor on hover */
}

/* Investor Pitch Video Container */
.investor-pitch-video-container {
  width: 100%;
  flex: 1;
}

/* Current Spending Toggle Styles */
.spending-toggle-hstack {
  position: absolute;
  top: -60px;
  right: 0px;
  display: none; /* Hidden by default, only show in costing mode */
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: auto;
}

.spending-toggle-icon {
  width: var(--icon-size-xlarge);
  height: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spending-toggle-text {
  font-size: var(--font-size-medium);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 500;
  white-space: nowrap;
}

.spending-toggle-box {
  width: 0;
  height: 44px;
  border: 0px solid var(--color-mid-gray);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.3s ease, border-width 0.3s ease;
  background: transparent;
}

.spending-toggle-box.visible {
  width: 100px;
  border-width: 3px;
}

.spending-toggle-value {
  font-size: var(--font-size-medium);
  color: var(--color-red);
  font-family: var(--font-family);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spending-toggle-value.visible {
  opacity: 1;
}

.spending-toggle-unit {
  font-size: var(--font-size-medium);
  color: var(--color-mid-gray);
  font-family: var(--font-family);
  font-weight: 500;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.spending-toggle-unit.visible {
  width: auto;
}

.spending-toggle-hstack.visible {
  display: flex;
}

/* Red spending line styles */
.spending-line {
  position: absolute;
  width: 100%;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  left: 0;
  right: 0;
  transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  overflow: visible;
}

/* Remove spinner arrows from number input in spending toggle */
.spending-toggle-box input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.spending-toggle-box input[type="number"]::-webkit-outer-spin-button,
.spending-toggle-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  margin: 0;
}