/* =========================================
   Support Page Styles
   ========================================= */

/* =========================================
   Features Grid Section
   ========================================= */
.features-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px;
}

@media (max-width: 768px) {
   .features-grid {
      grid-template-columns: 1fr;
   }
}

.feature-card {
   background: white;
   border-radius: 16px;
   padding: 32px;
   transition: all 0.3s ease;
   border: 1px solid #e2e8f0;
}

.feature-card:hover {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   transform: translateY(-4px);
   border-color: #ff5000;
}

.feature-icon {
   width: 56px;
   height: 56px;
   background-color: #fff7ed;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   color: #ff5000;
}

.feature-card:hover .feature-icon {
   background-color: #ff5000;
   color: white;
}

.feature-title {
   font-size: 20px;
   font-weight: 600;
   color: #0f172a;
   margin-bottom: 12px;
   line-height: 1.3;
}

.feature-desc {
   font-size: 16px;
   color: #475569;
   line-height: 1.625;
   margin: 0;
}

/* =========================================
   Solutions Section
   ========================================= */
.solutions-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px;
}

@media (max-width: 768px) {
   .solutions-grid {
      grid-template-columns: 1fr;
   }
}

.solution-card {
   background: white;
   border-radius: 16px;
   padding: 40px;
   transition: all 0.3s ease;
   border: 1px solid #e2e8f0;
   position: relative;
}

.solution-card:hover {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   transform: translateY(-4px);
   border-color: #ff5000;
}

.solution-icon {
   width: 56px;
   height: 56px;
   background-color: #fff7ed;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   color: #ff5000;
   transition: all 0.3s ease;
}

.solution-card:hover .solution-icon {
   background-color: #ff5000;
   color: white;
}

.solution-title {
   font-size: 20px;
   font-weight: 600;
   color: #0f172a;
   margin-bottom: 16px;
   line-height: 1.3;
}

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

.solution-list li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 12px;
   font-size: 15px;
   color: #475569;
   line-height: 1.6;
}

.solution-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 6px;
   width: 18px;
   height: 18px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff5000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   flex-shrink: 0;
}

/* =========================================
   Benefits Grid (3 Cards)
   ========================================= */
.benefits-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

@media (max-width: 1024px) {
   .benefits-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 640px) {
   .benefits-grid {
      grid-template-columns: 1fr;
   }
}

.benefit-card {
   background: white;
   border-radius: 16px;
   padding: 32px 24px;
   text-align: center;
   border: 2px solid #f1f5f9;
   transition: all 0.3s ease;
}

.benefit-card:hover {
   border-color: #ff5000;
   transform: translateY(-4px);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px;
}

.benefit-icon--green {
   background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.benefit-icon--orange {
   background: linear-gradient(135deg, #ff5000 0%, #ea580c 100%);
}

.benefit-icon--blue {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.benefit-title {
   font-size: 16px;
   font-weight: 700;
   color: #0f172a;
   margin: 0 0 8px 0;
}

.benefit-desc {
   font-size: 14px;
   color: #64748b;
   margin: 0;
   line-height: 1.5;
}

/* =========================================
   Hero Section Overrides
   ========================================= */
.hero--support {
   min-height: auto;
   padding-top: 140px;
   padding-bottom: 100px;
   background: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
   position: relative;
   overflow: hidden;
}

.hero__grid-pattern {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 40px 40px;
   z-index: 1;
   pointer-events: none;
}

.hero__orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   z-index: 1;
   opacity: 0.4;
   pointer-events: none;
}

.hero__orb--1 {
   top: -10%;
   left: -5%;
   width: 400px;
   height: 400px;
   background: #2b5af4;
   /* Primary Accent */
}

.hero__orb--2 {
   bottom: -10%;
   right: -5%;
   width: 300px;
   height: 300px;
   background: #ff5000;
   /* Orange Accent */
   opacity: 0.2;
}

.hero__grid-single {
   grid-template-columns: 1fr;
   gap: 0;
}

.hero__content-left {
   text-align: left;
   margin: 0;
   max-width: 800px;
}

.badges-list {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 32px;
}

.hero__badge-item {
   margin-bottom: 0;
}

.text-gradient-orange {
   background: linear-gradient(to right, #ff5000, #ff8c00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hero__desc-support {
   font-size: 20px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.8);
   max-width: 700px;
   margin-bottom: 24px;
}

.hero__actions-start {
   justify-content: flex-start;
}

.hero__trust-line {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   margin-top: 24px;
   line-height: 1.6;
}

/* =========================================
   Section Helper Classes
   ========================================= */
.section__header-support {
   text-align: center;
   max-width: 768px;
   margin: 0 auto 24px;
}

.section__header-wide {
   max-width: 900px;
}

.section__subtitle-support {
   font-size: 18px;
   line-height: 1.6;
   color: #475569;
   margin-top: 24px;
}

.mt-64 {
   margin-top: 64px;
}

.mt-80 {
   margin-top: 80px;
}

/* =========================================
   Summary Block
   ========================================= */
.summary-container {
   margin-top: 64px;
   text-align: center;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

.summary-box {
   background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
   border-radius: 16px;
   padding: 32px;
   border: 1px solid #fed7aa;
}

/* =========================================
   ITS vs Support Comparison
   ========================================= */
.toggle-wrapper {
   display: flex;
   justify-content: center;
   margin-top: 32px;
}

.toggle-pill {
   background: #f1f5f9;
   padding: 8px;
   border-radius: 99px;
   display: inline-flex;
   gap: 8px;
}

.toggle-option {
   padding: 10px 24px;
   border-radius: 99px;
   font-size: 14px;
   font-weight: 600;
   color: #64748b;
   cursor: default;
   transition: all 0.3s ease;
}

.toggle-option--active {
   background: white;
   color: #0f172a;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.comparison-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px;
}

@media (max-width: 768px) {
   .comparison-grid {
      grid-template-columns: 1fr;
   }
}

.compare-card {
   background: white;
   border-radius: 20px;
   padding: 40px;
   border: 1px solid #e2e8f0;
   transition: all 0.3s ease;
}

.compare-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.compare-card--its {
   border-top: 4px solid #3b82f6;
}

.compare-card--artil {
   border-top: 4px solid #ff5000;
}

.compare-card__header {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid #f1f5f9;
}

.icon-box {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.icon-box--blue-soft {
   background: #eff6ff;
   color: #3b82f6;
}

.icon-box--orange-soft {
   background: #fff7ed;
   color: #ff5000;
}

.compare-card__title {
   font-size: 18px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.4;
   margin: 0;
}

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

.check-list li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 16px;
   font-size: 15px;
   color: #475569;
   line-height: 1.6;
}

.check-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 6px;
   width: 18px;
   height: 18px;
   background-size: contain;
   background-repeat: no-repeat;
}

.check-list--blue li::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff5000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.check-list--orange li::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff5000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.list-summary {
   font-weight: 600;
   color: #0f172a !important;
   margin-top: 24px;
   padding-top: 16px;
   border-top: 1px dashed #e2e8f0;
}

.comparison-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 32px;
}

.callout-box {
   display: flex;
   align-items: center;
   gap: 16px;
   background: white;
   padding: 24px 32px;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   max-width: 100%;
}

/* Fix visibility for outline button on light bg */
.btn-outline-dark {
   background-color: white;
   border: 2px solid #e2e8f0;
   color: #475569;
   font-weight: 600;
}

.btn-outline-dark:hover {
   border-color: #ff5000;
   color: #ff5000;
   background-color: #fff7ed;
}


.callout-icon {
   color: #3b82f6;
   flex-shrink: 0;
}

.callout-text {
   font-size: 16px;
   color: #475569;
   margin: 0;
   line-height: 1.6;
}

.cta-actions {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
}

@media (max-width: 640px) {
   .callout-box {
      flex-direction: column;
      text-align: center;
   }

   .cta-actions {
      width: 100%;
      flex-direction: column;
   }

   .btn {
      width: 100%;
      justify-content: center;
   }
}

/* =========================================
   Toggle Interactive Styles
   ========================================= */
.toggle-option {
   cursor: pointer;
}

/* Grayscale State for Inactive Cards */
.card--grayscale {
   filter: grayscale(100%);
   opacity: 0.6;
   border-color: #e2e8f0 !important;
   border-top-color: #cbd5e1 !important;
   transform: scale(0.98);
}

.card--grayscale:hover {
   transform: none;
   box-shadow: none;
}

.card--grayscale .icon-box {
   background: #f1f5f9;
   color: #94a3b8;
}

.card--grayscale .check-list li::before {
   filter: grayscale(100%);
   opacity: 0.5;
}

/* Smooth transition for filter */
.compare-card {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   Support Process Section (Refined)
   ========================================= */
.section--dark {
   background: #0f172a;
   position: relative;
   overflow: hidden;
}

/* Background ambient glow */
.section--dark::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15), transparent 60%);
   pointer-events: none;
}

.process-roadmap {
   max-width: 900px;
   margin: 80px auto 0;
   display: flex;
   flex-direction: column;
   gap: 40px;
   padding-left: 0;
}

/* Removed Vertical Line (.process-roadmap::before) */

.roadmap-step {
   padding: 0;
}

/* Step Content Card */
.step-content {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px;
   padding: 40px 40px 40px 60px;
   /* Extra left padding for marker */
   position: relative;
   transition: all 0.3s ease;
   /* overflow: hidden; REMOVED */
}

.step-content:hover {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 80, 0, 0.3);
   transform: translateY(-4px);
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

/* Step Marker (Circle Overlap) */
.step-marker {
   position: absolute;
   left: -28px;
   top: -28px;
   /* On the corner vertex */
   width: 56px;
   height: 56px;
   background: #0f172a;
   border: none;
   /* Removed border */
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.1);
}

.step-number {
   font-size: 20px;
   font-weight: 800;
   color: #ff5000;
}

.step-title {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 32px;
   color: white;
}

/* Step Grid Layout */
.step-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: 48px;
}

.step-subtitle {
   font-size: 14px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.1em;
   margin-bottom: 20px;
   padding-left: 14px;
   position: relative;
}

.step-subtitle::before {
   content: '';
   position: absolute;
   left: 0;
   top: 7px;
   width: 6px;
   height: 6px;
   background: #3b82f6;
   border-radius: 50%;
}

.step-block--why .step-subtitle::before {
   background: #10b981;
}

.step-block--focus .step-subtitle::before {
   background: #f59e0b;
}

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

.step-list li {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.8) !important;
   margin-bottom: 12px;
   padding-left: 24px;
   position: relative;
   line-height: 1.5;
}

.step-list li::before {
   content: '•';
   position: absolute;
   left: 4px;
   color: #ff5000;
}

/* Custom List Icons */
.step-list--check li::before {
   content: '✓';
   color: #22c55e;
   font-weight: bold;
   left: 0;
}

.step-list--arrow li::before {
   content: '→';
   color: #ff5000;
   font-weight: bold;
   left: 0;
}

/* Secondary Block (Why/Focus) - Cleaner No BG */
.step-grid>div:last-child {
   background: transparent;
   border: none;
   padding: 0;
   margin: 0;
}

@media (max-width: 768px) {
   .step-grid {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .step-content {
      padding: 32px 24px;
      /* Reduced padding mobile */
   }

   .step-marker {
      display: none;
   }

   .step-number {
      font-size: 18px;
   }
}

/* Visual Anchor */
.process-anchor {
   text-align: center;
   max-width: 600px;
   margin: 80px auto 0;
}

.process-anchor p {
   font-size: 18px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.6);
   margin: 0;
}

/* =========================================
   SLA Accordion Section
   ========================================= */
/* Styles moved to assets/css/components/accordions.css */

/* Priority Grid inside Accordion */
.priority-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 16px;
}

.priority-card {
   background: white;
   padding: 16px;
   border-radius: 8px;
   border: 1px solid #e2e8f0;
   font-size: 14px;
}

.priority-badge {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 99px;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 12px;
}

.priority-card--p1 {
   border-top: 3px solid #ef4444;
}

.priority-card--p1 .priority-badge {
   background: #fef2f2;
   color: #ef4444;
}

.priority-card--p2 {
   border-top: 3px solid #f59e0b;
}

.priority-card--p2 .priority-badge {
   background: #fffbeb;
   color: #f59e0b;
}

.priority-card--p3 {
   border-top: 3px solid #3b82f6;
}

.priority-card--p3 .priority-badge {
   background: #eff6ff;
   color: #3b82f6;
}

.priority-card ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.priority-card li {
   position: relative;
   padding-left: 14px;
   margin-bottom: 8px;
   line-height: 1.4;
   color: #64748b;
}

.priority-card li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: #cbd5e1;
}

@media (max-width: 768px) {
   .priority-grid {
      grid-template-columns: 1fr;
   }
}

/* Info Box */
.info-box {
   background: linear-gradient(to bottom, #ffffff, #f8fafc);
   padding: 16px;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   border-left: 4px solid #ff5000;
}

/* Text List (Plain bullets) */
.text-list {
   margin: 0;
   padding-left: 20px;
   color: #475569;
}

.text-list li {
   margin-bottom: 8px;
}

/* Process Steps (Arrow flow) */
.process-steps {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   background: white;
   padding: 12px;
   border-radius: 8px;
   border: 1px solid #e2e8f0;
}

.p-step {
   font-weight: 600;
   color: #0f172a;
   font-size: 14px;
}

.p-arrow {
   color: #94a3b8;
}

/* Comparison Row */
.comparison-row {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   padding: 16px;
}

.comp-bad {
   margin-bottom: 8px;
   color: #64748b;
}

.comp-good {
   font-weight: 600;
   color: #0f172a;
   margin-top: 16px;
}

/* =========================================
   Tabs Section (Typical Tasks)
   ========================================= */
.section--tabs {
   padding-bottom: 80px;
}

.tabs-wrapper {
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
}

/* Tabs Navigation */
.tabs-nav {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 40px;
   background: #f1f5f9;
   padding: 6px;
   border-radius: 16px;
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.tab-btn {
   padding: 12px 24px;
   background: transparent;
   border: none;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   color: #64748b;
   cursor: pointer;
   transition: all 0.3s ease;
}

.tab-btn:hover {
   color: #0f172a;
   background: rgba(255, 255, 255, 0.5);
}

.tab-btn--active {
   background: white !important;
   color: #ff5000 !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Tabs Content */
.tab-panel {
   display: none;
   animation: fadeIn 0.4s ease;
}

.tab-panel--active {
   display: block;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.tab-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 48px;
   background: white;
   padding: 48px;
   border-radius: 24px;
   border: 1px solid #e2e8f0;
   box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
}

.tab-heading {
   font-size: 28px;
   font-weight: 800;
   color: #0f172a;
   margin-bottom: 8px;
}

.tab-desc {
   font-size: 18px;
   color: #64748b;
   margin-bottom: 32px;
}

.tab-subheading {
   font-size: 14px;
   text-transform: uppercase;
   color: #94a3b8;
   letter-spacing: 0.1em;
   font-weight: 700;
   margin-bottom: 16px;
}

.tab-extra .info-box {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

@media (max-width: 768px) {
   .tabs-nav {
      flex-direction: column;
      width: 100%;
      gap: 4px;
   }

   .tab-btn {
      width: 100%;
      text-align: center;
   }

   .tab-grid {
      grid-template-columns: 1fr;
      padding: 24px;
      gap: 32px;
   }
}

/* =========================================
   Principles Section (Values)
   ========================================= */
.principles-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   margin-top: 48px;
}

@media (max-width: 768px) {
   .principles-grid {
      grid-template-columns: 1fr;
   }
}

.principle-card {
   background: white;
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
   border: 1px solid #e2e8f0;
   position: relative;
   overflow: hidden;
}

.principle-card:hover {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   transform: translateY(-4px);
   border-color: #cbd5e1;
}

/* Card Header */
.principle-header {
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid #f1f5f9;
   display: flex;
   align-items: center;
   gap: 16px;
}

.principle-num {
   font-size: 20px;
   font-weight: 700;
   color: white;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   flex-shrink: 0;
   margin-bottom: 0;
   font-family: var(--nv-fallback-ff);
}

/* Gradients for numbers */
.principle-num--blue {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.principle-num--orange {
   background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.principle-num--emerald {
   background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.principle-num--violet {
   background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.principle-title {
   font-size: 18px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.4;
   margin: 0;
}

/* Card Body */
.principle-body {
   flex-grow: 1;
   margin-bottom: 24px;
}

.principle-intro {
   font-size: 15px;
   color: #0f172a;
   font-weight: 600;
   margin-bottom: 16px;
   font-style: italic;
}

.principle-body .check-list li {
   font-size: 14px;
   margin-bottom: 8px;
   padding-left: 24px;
}

.principle-body .check-list li::before {
   top: 3px;
   /* Adjust check icon position for smaller font */
}

/* Card Footer */
.principle-footer {
   background: #f8fafc;
   margin: 0 -24px -24px;
   padding: 16px 24px;
   border-top: 1px solid #f1f5f9;
}

.principle-label {
   display: block;
   font-size: 12px;
   text-transform: uppercase;
   color: #94a3b8;
   font-weight: 700;
   letter-spacing: 0.05em;
   margin-bottom: 4px;
}

.principle-footer p {
   margin: 0;
   font-size: 14px;
   color: #475569;
   font-weight: 500;
}

@media (max-width: 1280px) {
   .principles-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 640px) {
   .principles-grid {
      grid-template-columns: 1fr;
   }
}