/* --- CUSTOM CSS VARIABLES (HERZENA RED & DARK THEME) --- */
:root {
  --he-bg: #090D16;
  --he-bg-alt: #0C1220;
  --he-surface: #141C2F;
  --he-surface-nested: #1E293B;
  --he-tone: #E11D48;
  --he-tone-hover: #F43F5E;
  --he-ink: #F3F4F6;
  --he-ink-muted: #9CA3AF;
  --he-gradient: linear-gradient(135deg, #E11D48 0%, #9F1239 100%);
  --he-font-display: 'Montserrat', sans-serif;
  --he-font-body: 'Inter', sans-serif;
  
  /* Preset Soft Boundaries */
  --he-radius: 14px;
  
  /* Raised Shadow Properties */
  --he-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  
  /* Heading Case Setting */
  --he-heading-case: uppercase;
}

/* Base Body Flow */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.he-main-frame {
  flex: 1;
}

/* Custom Safe Layout Boundary (Replaces Banned .container) */
.he-inner-bound {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* STICKY SPLIT PRODUCT LAYOUT (PRESET A) */
.he-item-split {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .he-item-split {
    flex-direction: row;
    gap: 3rem;
  }
  .he-sticky-visual {
    width: 41.666667%; /* 5/12 portion */
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }
  .he-detail-flow {
    width: 58.333333%; /* 7/12 portion */
  }
}

/* Responsive Grid layout without grid/row/col banned classes */
.he-feedback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .he-feedback-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Minor Utility Resets and Animations to secure high UX */
.he-trigger-action {
  transition: transform 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.he-trigger-action:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.he-trigger-action:active {
  transform: translateY(0);
}