/* ============================================
   SignumEssentials v30 - Responsive Styles
   ============================================ */

/* ========================================
   BREAKPOINT REFERENCE
   ----------------------------------------
   Mobile:     < 640px
   Tablet:     640px - 1023px
   Desktop:    1024px - 1279px
   Large:      1280px - 1535px
   XL:         1536px+
   ======================================== */

/* ========================================
   MOBILE BASE (< 640px)
   ======================================== */

/* Typography Scale - Mobile */
@media (max-width: 639px) {
  :root {
    --text-hero: clamp(2.5rem, 10vw, 3.5rem);
    --text-display: clamp(2rem, 8vw, 2.75rem);
    --text-mega: clamp(3rem, 12vw, 4rem);
  }

  /* Compact section sizing - Mobile */
  .section {
    padding: 3rem 0;
  }

  .section .section-header {
    margin-bottom: 1.5rem;
  }

  .section .section-title {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
  }

  /* Container */
  .container {
    padding-inline: var(--space-4);
  }

  /* Hero Section */
  .hero {
    min-height: auto;
    padding-block: var(--space-20) var(--space-12);
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-title {
    font-size: var(--text-hero);
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
  }

  .hero-cta-group {
    flex-direction: column;
    gap: var(--space-3);
  }

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

  /* Floating orbs - simplified on mobile */
  .hero-orbs {
    display: none;
  }

  /* Problem Section */
  .problem-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .problem-chaos,
  .problem-clarity {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .problem-shield {
    display: none;
  }

  /* Features Grid */
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .feature-card {
    padding: var(--space-6);
  }


  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .testimonials-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .metric-item {
    padding: var(--space-4);
  }

  .metric-value {
    font-size: var(--text-2xl);
  }

  /* ROI Calculator */
  .roi-container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .roi-inputs,
  .roi-output {
    padding: var(--space-6);
  }

  /* Solutions */
  .solutions-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .solution-cta {
    flex-direction: column;
  }

  /* FAQ */
  .faq-accordion-wrap {
    max-width: 100%;
  }

  /* Trust interstitial */
  .trust-interstitial p {
    max-width: 100%;
  }

  /* CTA Section */
  .cta-section {
    padding-block: var(--space-16);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: left;
  }

  .footer-brand {
    order: -1;
    margin-bottom: var(--space-4);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Navigation */
  .navbar {
    padding-block: var(--space-3);
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-mobile-toggle {
    display: flex;
  }

  /* Mobile Menu */
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: var(--space-20) var(--space-6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--duration-500) var(--ease-out), visibility 0s var(--duration-500);
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .mobile-menu-link {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Section Spacing — tighter on mobile */
  .section {
    padding-block: var(--space-12);
  }

  /* Product feature sections — tighter since they repeat 5x */
  .product-feature {
    gap: var(--space-6);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  /* Buttons */
  .btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
  }

  /* Cards */
  .card {
    padding: var(--space-6);
  }

  /* Use Cases Section - Mobile */
  .usecases-all {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .usecases-all .usecase-card {
    grid-column: span 1 !important;
  }

  .usecase-card {
    padding: var(--space-6);
    padding-top: calc(var(--space-6) + 4px);
  }

  .industries-tags {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Stats Bar - Mobile */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .stats-value {
    font-size: var(--text-h2);
  }

  /* Challenge Cards - Mobile */
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .challenge-card {
    padding: var(--space-6);
  }

  .platform-panel {
    grid-template-columns: 1fr;
    padding: var(--space-6);
    gap: var(--space-6);
  }

  .platform-panel-visual {
    order: -1;
  }

  /* Problem Panels - Mobile */
  .problem-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .problem-arrow {
    width: 50px;
    height: 50px;
    transform: rotate(90deg);
    margin: 0 auto;
  }

  .problem-panel {
    padding: var(--space-6);
  }

  /* Law Page - Mobile */
  .law-defenses-grid {
    grid-template-columns: 1fr;
  }

  .law-map-header {
    display: none;
  }

  .law-map-row {
    grid-template-columns: 1fr;
  }

  .law-map-arrow {
    padding: var(--space-1);
    transform: rotate(90deg);
  }

  /* Law Timeline - Mobile (vertical) */
  .law-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0;
  }

  .law-timeline-line {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .law-timeline-item {
    flex-direction: row;
    gap: var(--space-3);
  }

  .law-timeline-label {
    align-items: flex-start;
  }

  .law-hero-section {
    padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-8);
  }

  .law-hero-title br {
    display: none;
  }

  .law-callout {
    padding: var(--space-4);
  }

  .law-defense-card {
    padding: var(--space-4);
  }

  /* Contact Page - Mobile */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact-left {
    padding-top: 0;
    text-align: center;
  }

  .contact-features {
    text-align: left;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-form-card {
    padding: var(--space-6);
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

}

/* ========================================
   TABLET (640px - 1023px)
   ======================================== */

@media (min-width: 640px) and (max-width: 1023px) {
  :root {
    --text-hero: clamp(3rem, 8vw, 4rem);
    --text-display: clamp(2.5rem, 6vw, 3.25rem);
  }

  .container {
    padding-inline: var(--space-8);
  }

  /* Hero */
  .hero {
    min-height: 90vh;
  }

  .hero-content {
    max-width: 80%;
  }

  /* Orbs - reduced */
  .hero-orb {
    width: 200px;
    height: 200px;
  }

  .hero-orb:nth-child(2),
  .hero-orb:nth-child(3) {
    display: none;
  }

  /* Problem */
  .problem-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .problem-shield {
    position: relative;
    width: 100%;
    height: 120px;
    margin-block: var(--space-6);
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Stats Bar - Tablet */
  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* Challenge Cards - Tablet */
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Platform Panels - Tablet */
  .platform-panel {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Problem Grid - Tablet */
  .problem-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
  }


  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ROI */
  .roi-container {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }

  /* Navigation - Tablet */
  .nav-left {
    gap: 1rem;
  }

  .nav-links {
    gap: 0;
  }

  .nav-link {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-2);
    white-space: nowrap;
  }

  .nav-logo-img {
    height: 28px;
  }

  /* Use Cases Section - Tablet: 2-2-1 layout */
  .usecases-all {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecases-all .usecase-card {
    grid-column: span 1 !important;
  }

  /* Trust Interstitial - Tablet */
  .trust-interstitial p {
    max-width: 85%;
  }

  /* FAQ - Tablet */
  .faq-accordion-wrap {
    max-width: 85%;
  }

  /* Challenge grid */
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Law Page - Tablet */
  .law-defenses-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .law-map-header {
    display: none;
  }

  .law-map-row {
    grid-template-columns: 1fr;
  }

  .law-map-arrow {
    padding: var(--space-1);
    transform: rotate(90deg);
  }

  .law-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0;
  }

  .law-timeline-line {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .law-timeline-item {
    flex-direction: row;
    gap: var(--space-3);
  }

  .law-timeline-label {
    align-items: flex-start;
  }

  /* Contact Page - Tablet */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-left {
    text-align: center;
    padding-top: 0;
  }

  .contact-features {
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ========================================
   DESKTOP (1024px - 1279px)
   ======================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 960px;
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }


  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

/* ========================================
   LARGE DESKTOP (1280px - 1535px)
   ======================================== */

@media (min-width: 1280px) and (max-width: 1535px) {
  .container {
    max-width: 1200px;
  }

}

/* ========================================
   EXTRA LARGE (1536px+)
   ======================================== */

@media (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }

  :root {
    --text-hero: 5rem;
    --text-display: 4rem;
    --text-mega: 7rem;
  }

  /* Hero */
  .hero-title {
    font-size: 5rem;
  }

  /* Features - 4 columns on XL */
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch */
  .magnetic-card::before {
    display: none;
  }

  .feature-card:hover {
    transform: none;
  }

  /* Larger touch targets */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .nav-link {
    padding: var(--space-3) var(--space-4);
  }

  /* Disable parallax on touch */
  .parallax-layer {
    transform: none !important;
  }

  /* Simplify animations */
  .hero-orb {
    animation-duration: 12s;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgba(0, 0, 0, 0.3);
    --border-default: rgba(0, 0, 0, 0.5);
  }

  .btn {
    border: 2px solid currentColor;
  }

  .card,
  .magnetic-card,
  .feature-card {
    border: 2px solid var(--border-default);
  }

  .text-gradient,
  .text-gradient-vivid,
  .text-gradient-aurora {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: inherit;
    color: var(--text-primary);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable smooth scroll */
  html {
    scroll-behavior: auto;
  }

  /* Show all animated elements immediately */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Disable floating elements */
  .hero-orb,
  .animate-float,
  .animate-float-gentle {
    animation: none !important;
    transform: none !important;
  }

  /* Disable parallax */
  .parallax-layer {
    transform: none !important;
  }

  /* Show static fallback */
  .hero-static-bg {
    display: block;
  }

  /* Simplify hover states */
  .btn:hover,
  .card:hover,
  .feature-card:hover {
    transform: none;
  }

  /* Disable gradient animations */
  .animate-gradient,
  .animate-aurora,
  .btn-aurora::before {
    animation: none !important;
  }
}


/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Hide interactive elements */
  .navbar,
  .hero-orbs,
  .cta-shapes,
  .mobile-menu,
  .btn-aurora,
  video,
  canvas {
    display: none !important;
  }

  /* Reset backgrounds */
  body,
  .section,
  .hero,
  .cta-section {
    background: white !important;
    color: black !important;
  }

  /* Show text properly */
  .text-gradient,
  .text-gradient-vivid,
  .text-gradient-aurora {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: black !important;
    color: black !important;
  }

  /* Page breaks */
  .section {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* Simplify cards */
  .card,
  .feature-card,
  .testimonial-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: white !important;
  }

  /* Show links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ========================================
   LANDSCAPE PHONE
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: var(--space-8);
  }

  .hero-title {
    font-size: var(--text-4xl);
  }

  .hero-subtitle {
    display: none;
  }

  .section {
    padding-block: var(--space-12);
  }
}

/* ========================================
   RETINA/HIGH DPI DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders */
  .card,
  .btn {
    border-width: 0.5px;
  }
}

/* ========================================
   SAFE AREA INSETS (NOTCHED DEVICES)
   ======================================== */

@supports (padding: max(0px)) {
  .navbar {
    padding-left: max(var(--space-6), env(safe-area-inset-left));
    padding-right: max(var(--space-6), env(safe-area-inset-right));
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .mobile-menu {
    padding-left: max(var(--space-6), env(safe-area-inset-left));
    padding-right: max(var(--space-6), env(safe-area-inset-right));
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }

  .footer {
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  }
}

/* ========================================
   FOCUS VISIBLE STYLES
   ======================================== */

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
  box-shadow: var(--glow-primary);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--accent-primary);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  z-index: 10000;
  transition: top var(--duration-200);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ========================================
   UTILITY RESPONSIVE CLASSES
   ======================================== */

/* Hide on mobile */
@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 640px) {
  .show-mobile-only { display: none !important; }
}

/* Show only on tablet */
@media (max-width: 639px), (min-width: 1024px) {
  .show-tablet-only { display: none !important; }
}

/* Show only on desktop */
@media (max-width: 1023px) {
  .show-desktop-only { display: none !important; }
}

/* Text alignment responsive */
@media (max-width: 639px) {
  .text-center-mobile { text-align: center !important; }
  .text-left-mobile { text-align: left !important; }
}

/* Flex direction responsive */
@media (max-width: 639px) {
  .flex-col-mobile { flex-direction: column !important; }
  .flex-row-mobile { flex-direction: row !important; }
}

/* Grid columns responsive */
@media (max-width: 639px) {
  .grid-cols-1-mobile { grid-template-columns: 1fr !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid-cols-2-tablet { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ========================================
   PRODUCT PAGE RESPONSIVE (v3)
   ======================================== */

/* Tablet */
@media (max-width: 1023px) {
  .product-hero {
    padding: calc(var(--navbar-height) + var(--space-12)) 0 var(--space-10);
  }

  .product-lifecycle {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) 0;
  }

  .product-lifecycle-connector {
    display: none;
  }

  .product-lifecycle-step {
    flex: 0 0 33.333%;
  }

  .product-feature,
  .product-feature-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-feature-reverse {
    direction: ltr;
  }

  .product-feature-visual {
    order: -1;
    max-width: 700px;
    margin: 0 auto;
  }

  /* Comparison table — tighter fit on tablet */
  .product-comparison-grid {
    min-width: 620px;
  }

  .product-comparison-cell,
  .product-comparison-header {
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-small);
  }

}

/* Mobile */
@media (max-width: 639px) {
  .product-hero {
    padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-8);
  }

  .product-hero-title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .product-hero-chips {
    gap: var(--space-2);
  }

  .product-hero-chip {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .product-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

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

  .product-lifecycle-step {
    flex: 0 0 50%;
  }

  .product-lifecycle-number {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  .product-feature-title {
    font-size: 1.35rem;
  }

  /* Comparison table — stacked card layout on mobile */
  .product-comparison-table {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    border-radius: 0;
  }

  .product-comparison-grid {
    display: flex;
    flex-direction: column;
    min-width: unset;
    gap: 0;
  }

  .product-comparison-header {
    display: none;
  }

  /* Capability name — group heading */
  .product-comparison-label {
    font-weight: var(--weight-bold);
    font-size: var(--text-body-sm);
    color: var(--text-primary);
    padding: var(--space-4) var(--space-4) var(--space-2);
    background: transparent;
    border-bottom: none;
    text-align: left;
  }

  /* Divider between capability groups */
  .product-comparison-cell + .product-comparison-label {
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
  }

  /* Each competitor entry — stack label above content */
  .product-comparison-cell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: var(--space-2) var(--space-4);
    border-bottom: none;
    line-height: 1.5;
  }

  .product-comparison-cell::before {
    content: attr(data-label);
    display: block;
    font-weight: var(--weight-semibold);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }

  /* Highlight = the product's row — stands out */
  .product-comparison-cell-highlight {
    background: rgba(124, 58, 237, 0.06);
    border-left: 3px solid #7c3aed;
    padding-left: calc(var(--space-4) - 3px);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0;
  }

  /* Browser mockup — prevent overflow on small screens */
  .product-hero-browser {
    max-width: 100%;
  }

  .product-hero-toolbar {
    padding: 8px 10px;
    overflow: hidden;
  }

  .product-hero-nav-btn { width: 24px; height: 24px; }

  .product-hero-url-bar { max-width: 100%; padding: 6px 12px; font-size: 12px; }

  .product-hero-url-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .product-hero-actions {
    display: none;
  }

  .product-hero-profile {
    width: 20px;
    height: 20px;
    margin-left: auto;
  }

  .product-timeline {
    padding-left: var(--space-8);
  }

  .product-screenshot-full {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    border-radius: var(--radius-lg);
  }

  /* CTA section — full-width buttons on mobile */
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* Accordion — tighter padding on mobile */
  .accordion-header {
    padding: var(--space-3) var(--space-4);
  }

  .accordion-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* Lifecycle description — slightly more readable */
  .product-lifecycle-description {
    font-size: 0.75rem;
    max-width: 140px;
  }
}