/* =====================================================
   main-style.css — Mobile-first marketing layout
   Optimized and organized with clear sections
   
   TABLE OF CONTENTS:
   1) Root variables
   2) Base styles
   3) Layout helpers & buttons
   4) Hero section
   5) Tailored section (why choose)
   6) Benefits section
   7) Comparison section
   8) FAQ section
   9) Pricing section
   10) CTA section
   11) Animations
   12) Media queries (consolidated)
   13) Footer
   14) Navbar styles
   15) Nav CTA button styles
   16) Utility overrides
   ===================================================== */

/* 1) Root variables */
:root{
  --brand:#6B2737; /* primary maroon */
  --brand-600:#541F2D;
  --accent:#10b981; /* green */
  --text:#111827; /* gray-900 */
  --muted:#6b7280; /* gray-500 */
  --bg:#ffffff;
  --bg-soft:#f9fafb;
  --border:#e5e7eb;
  --card:#ffffff;
  --shadow-md:0 8px 20px rgba(0,0,0,.08);
  --shadow-lg:0 20px 40px rgba(0,0,0,.10);
  --radius:12px;
  --hero-bg:url('https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1600');
  --compare-bg:url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1600');
  --tailored-bg:url('https://images.pexels.com/photos/374074/pexels-photo-374074.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

/* 2) Base */
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
/* Prevent FOUC for Alpine.js controlled elements */
[x-cloak]{display:none !important}

/* 3) Layout helpers */
.hero-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.section-heading{margin-bottom:40px;}
.section-heading h2{font-size:1.75rem;font-weight:800;letter-spacing:-.01em}
.section-heading p{color:var(--muted);margin-top:.5rem}
.center{text-align:center}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);}

/* Buttons */
.btn-primary{background:#456990;color:#fff;padding:12px 28px;border-radius:10px;font-weight:600;display:inline-flex;gap:.5rem;align-items:center;border:2px solid #456990;transition:all .2s}
.btn-primary:hover{background:#3B5C83;transform:translateY(-2px);box-shadow:0 10px 20px rgba(69,105,144,.30)}
.btn-secondary{background:transparent;color:var(--text);padding:12px 28px;border-radius:10px;font-weight:600;display:inline-flex;gap:.5rem;align-items:center;border:2px solid var(--text);transition:all .2s}
.btn-secondary:hover{background:var(--text);color:#fff}

/* 4) Hero */
.simple-hero,.hero-section{position:relative;min-height:70vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden;color:var(--text);}
.simple-hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.92) 100%),
  var(--hero-bg);
background-size:cover;background-position:center;z-index:0;transform:translateY(var(--hero-parallax,0px));will-change:transform}
.simple-hero-grid,.hero-grid{display:grid;grid-template-columns:1fr;gap:42px;align-items:center;position:relative;z-index:1}
.hero-content{order:2}
.hero-title{font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:16px;color: #6B2737;}
.hero-subtitle{font-size:18px;color:var(--muted);line-height:1.65;margin-bottom:22px;color: #6B2737;}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;color:#374151;font-size:13px;margin-bottom:10px}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.hero-visual{order:1;display:flex;justify-content:center;position:relative}
.hero-portrait{width:100%;max-width:500px;height:auto;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.20));position:relative;z-index:0}
/* UI tweak: add a subtle frame behind the hero portrait so non-transparent PNGs look great */
.hero-portrait-frame{border-radius:16px;padding:12px;display:inline-block}
.hero-portrait{display:block;border-radius:12px}
/* Hero blob behind portrait */
.hero-visual::before{content:"";position:absolute;z-index:0;left:55%;top:45%;width:220px;height:220px;transform:translate(-50%,-50%) rotate(10deg);border-radius:60% 40% 58% 42% / 45% 55% 45% 55%;background:
  radial-gradient(120px 120px at 35% 35%, rgba(59,130,246,.35), rgba(59,130,246,0) 65%),
  linear-gradient(135deg, rgba(37,99,235,.30), rgba(16,185,129,.22));
filter:saturate(1.1)}
/* Hand-drawn curly arrow (top-left, outside photo) */
.hero-visual::after{content:"";position:absolute;z-index:2;transform:rotate(45deg);width:80px;height:80px;opacity:.95;pointer-events:none;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120' fill='none'%3E%3Cpath d='M10 90 C 40 20, 100 20, 130 75' stroke='%232563eb' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M140 70 L130 92 L120 75' fill='%232563eb'/%3E%3C/svg%3E");}

/* Hero bullets */
.hero-points{display:flex;flex-direction:column;gap:.6rem;margin-top:12px}
.hero-points li{display:flex;gap:.5rem;align-items:flex-start;color:#1f2937}
.point-icon{width:20px;height:20px;color:var(--brand);margin-top:2px}

/* 5) Tailored section */
.tailored-section{position:relative;padding:72px 0;background:var(--bg-soft);overflow:hidden}
.tailored-section::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.96) 100%),
  var(--tailored-bg);
background-size:cover;background-position:center;transform:translateY(var(--tailored-parallax,0px));will-change:transform;z-index:0}
.tailored-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:24px}
.tailored-list{list-style:none;display:grid;gap:.6rem;margin-top:12px}
.tailored-list li{display:flex;align-items:center;gap:.5rem;color:#111827;font-weight:600}
.list-icon{width:18px;height:18px;color:var(--brand)}
.list-text{display:inline}
.goal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:50px}
.goal-tag{background:#eff6ff;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:#1f2937}
.tailored-panel .panel-card{padding:30px;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-md)}
.panel-list{list-style:none;display:grid;gap:.6rem;margin-top:10px}
.panel-list li{display:flex;align-items:center;gap:.5rem;color:#1f2937}
.panel-bullet{width:16px;height:16px;color:var(--brand)}
.panel-link{display:inline-block;margin-top:12px;font-weight:700}
.panel-link:hover{text-decoration:underline}

/* 6) Benefits */
.benefits-section{padding:100px 64px; background:#fff}
.benefits-grid{display:grid;gap:14px;grid-template-columns:1fr}
.benefit-card{padding:18px;border-radius:12px;border:1px solid var(--border);background:#fff}
.benefit-card h3{font-weight:700;margin-bottom:4px}
.benefit-card p{color:#4b5563;font-size:15px}
.benefit-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;margin-bottom:8px}

/* 7) Comparison */
.comparison-section{position:relative;padding:80px 0;background:var(--bg-soft);overflow:hidden}
.comparison-section .section-heading h2{font-size:1.875rem}
.comparison-section::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.95) 100%),
  var(--compare-bg);
background-size:cover;background-position:center;transform:translateY(var(--compare-parallax,0px));will-change:transform;z-index:0}
.comparison-grid{position:relative;z-index:1;display:grid;gap:16px;grid-template-columns:1fr;align-items: start;margin-bottom:40px;}
.comparison-card{border-radius:16px;border:1px solid var(--border);background:#fff;padding:30px;box-shadow:var(--shadow-md)}
.comparison-card.is-advanced{border-color:#bfdbfe}
.comparison-card.is-traditional{border-color:#fecaca}
.comparison-header{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.comparison-header h3{font-weight:800;letter-spacing:-.01em}
.comparison-header p{color:#6b7280}
.comparison-icons{display:flex;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.icon-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:999px;font-size:13px;color:#374151;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.icon-pill svg{width:20px;height:20px}
.comparison-badge{font-size:12px;padding:3px 8px;border-radius:8px;border:1px solid var(--border);align-self:flex-start}
.comparison-badge.good{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.comparison-badge.caution{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.comparison-illustration{margin:8px 0 10px;border:1px dashed var(--border);border-radius:12px;min-height:180px;display:grid;place-items:center;background:linear-gradient(135deg,#f3f4f6,#fff);overflow:hidden}
.comparison-illustration img{display:block;width:100%;height:auto;border-radius:12px}
.illustration-placeholder{color:#6b7280;font-size:13px}
.comparison-list{list-style:none;display:grid;gap:.5rem;margin-top:10px}
.comparison-list li{display:flex;gap:.5rem;align-items:flex-start}
.comparison-list.positive .comparison-icon{color:#16a34a}
.comparison-list.negative .comparison-icon{color:#ef4444}
.comparison-icon{width:20px;height:20px;margin-top:2px}
.comparison-footnote{position:relative;z-index:1;display:grid;gap:12px;margin-top:14px;text-align: center;}

/* 8) FAQ (modern accordion styling) */
.faq-section{padding:100px 0;background:var(--bg-soft)}
/* Centered, single-column FAQ with constrained width */
.faq-grid{display:grid;gap:12px;grid-template-columns:1fr;max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--border);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.03)}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'▾';font-size:16px;color:#6b7280;transition:transform .2s ease}
.faq-item[open] summary{border-bottom:1px solid var(--border)}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .faq-a{padding:14px 18px;color:#4b5563;animation:faqFade .18s ease both}

/* 9) Pricing */
.pricing-section{position:relative;padding:64px 0;background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%)}
.pricing-grid{display:grid;gap:16px;grid-template-columns:1fr}
.pricing-card{position:relative;border:1px solid var(--border);border-radius:16px;background:#fff;padding:50px 30px;box-shadow:var(--shadow-md)}
.pricing-card.featured{border-color:#bfdbfe;box-shadow:var(--shadow-lg);background:linear-gradient(180deg,#ffffff 0%, #f0f7ff 100%);padding-top:50px}
.pricing-card.featured::before{content:'Most popular';position:absolute;top:12px;right:12px;transform:none;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:6px 10px;font-size:12px;font-weight:700;border-radius:9999px;box-shadow:0 6px 12px rgba(37,99,235,.25);letter-spacing:.02em;z-index:1}
.pricing-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pricing-title{font-weight:800}
.pricing-price{font-weight:800;font-size:1.5rem;color:var(--brand)}
.pricing-description{color:var(--muted);margin:8px 0 10px}
.pricing-list{list-style:none;display:grid;gap:.5rem;margin-top:8px}
.pricing-list li{display:flex;align-items:center;gap:.5rem}
.pricing-icon{width:18px;height:18px;color:var(--brand)}
.pricing-link{display:inline-block;margin-top:12px;font-weight:700}

/* 10) CTA - modern radial background */
.cta-section{position:relative;padding:100px 0;background:
  radial-gradient(800px 800px at 80% -10%, #3b82f6 0%, #1d4ed8 40%, #0b1536 100%);
color:#f8fafc}
.cta-container{text-align:center;max-width:900px;margin:0 auto;padding:0 24px}
.cta-title{font-size:28px;font-weight:800;color:#ffffff}
.cta-subtitle{margin-top:8px;color:#e5e7eb}
/* CTA button override for dark background */
.cta-button{background:#ffffff;color:#0f172a;padding:12px 24px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;border:0;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .15s ease}
.cta-button:hover{transform:translateY(-2px);color: #f0f7ff;}

/* 10) Animations */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal-visible{opacity:1;transform:none}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes faqFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ========================================
   12) MEDIA QUERIES (CONSOLIDATED)
   Mobile-first breakpoints:
   - 640px: Small tablets
   - 768px: iPads/tablets (navbar switch point)
   - 1024px: Desktop/laptop
   ======================================== */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .simple-hero::before,
  .comparison-section::before,
  .tailored-section::before { transform: none !important; }
  .reveal { transition: none !important; }
}

/* Mobile-only styles (max-width: 767px) */
@media (max-width: 767px) {
  /* Navbar (mobile) — hamburger + dropdown panel */
  /* Make hamburger clearly visible */
  .mobile-menu-toggle { 
    display: inline-flex !important; 
    color: #111827 !important; 
    background: #ffffff !important; 
    border: 1px solid #e5e7eb !important; 
    border-radius: 10px !important; 
    padding: 8px !important; 
  }
  /* Visual feedback when open via aria-expanded */
  .mobile-menu-toggle[aria-expanded="true"] { background: #f3f4f6 !important; border-color: #d1d5db !important; }
  /* Compact spacing for mobile */
  .nav-inner { height: 72px !important; }
  .navbar-container { padding: 0 16px !important; }
  
  /* Switch to mobile nav on small screens only */
  .nav-menu { display: none !important; }
  .nav-cta { display: none !important; }
  
  /* Mobile dropdown visibility (when Alpine adds .active) */
  .mobile-nav { display: none; background: #ffffff; border-top: 1px solid #e5e7eb; }
  .mobile-nav.active { display: block; }
  /* Stack links in a column with spacing */
  .mobile-nav-links { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
  .mobile-nav-links a { display: block; width: 100%; color: #111827 !important; padding: 10px 12px; border-radius: 10px; }
  .mobile-nav-links a:hover { background: #f3f4f6; }

  .simple-hero, .hero-section { padding-top: 50px; }
  .benefits-section { padding-left:0; padding-right: 0; }

}

/* Media (min-width: 640px) — headings, benefits */
@media (min-width: 640px){
  /* Sections: headings, benefits */
  .section-heading h2{font-size:2rem}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
}

/* Media (min-width: 768px) — hero, tailored, comparison, faq, pricing, navbar */
@media (min-width: 768px){
  /* Hero */
  .simple-hero-grid,.hero-grid{grid-template-columns:1.3fr 1fr;gap:56px}
  .hero-content{order:1}
  .hero-visual{order:2;justify-content:flex-end}
  .hero-visual::before{width:260px;height:260px;left:58%;top:45%;transform:translate(-50%,-50%) rotate(8deg)}
  .hero-visual::after{width:100px;height:100px;right:-34px;top:0}
  /* Tailored */
  .tailored-grid{grid-template-columns:1.1fr .9fr}
  /* Comparison */
  .comparison-grid{grid-template-columns:1fr 1fr}
  .comparison-illustration{min-height:220px}
  .comparison-section .section-heading h2{font-size:2.25rem}
  /* FAQ: keep single-column for readability on tablet */
  /* .faq-grid remains 1 column (set in base styles) */
  /* Pricing */
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  
  /* ===== NAVBAR DESKTOP STYLES (768px+) ===== */
  /* Container adjustments */
  .navbar-container { padding: 0 24px !important; }
  .glass-nav { padding: 0 20px !important; }
  .nav-logo img { height: 72px !important; width: auto !important; }
  
  
  .nav-menu a {font-size: 18px !important;padding: 9px 14px !important;font-weight: 700;}
  
  
  /* iPad-optimized CTA button */
  .nav-cta-button {
    padding: 12px 28px !important;
    font-size: 15px !important;
    height: 44px !important;
  }
  
  /* Hide mobile dropdown nav on desktop */
  .mobile-nav, .mobile-nav.active { display: none !important; }
}

/* Media (min-width: 1024px) — hero text, grids, comparison, navbar */
@media (min-width: 1024px){
  /* Hero text scale */
  .hero-title{font-size:56px;margin-bottom:10px}
  .hero-subtitle{font-size:20px}
  .hero-visual::before{width:320px;height:320px;left:60%;top:45%}
  .hero-visual::after{width:120px;height:120px;right:-42px;top:0}
  /* Grid expansions */
  .benefits-grid{grid-template-columns:repeat(4,1fr)}
  /* Comparison */
  .comparison-illustration{min-height:260px}
  .comparison-section .section-heading h2{font-size:2.75rem}
  /* Pricing */
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  
  /* ===== NAVBAR DESKTOP ENHANCED (1024px+) ===== */
  /* Larger containers */
  .navbar-container { padding: 0 32px !important; }
  .glass-nav { padding: 0 24px !important; }
  .nav-logo img { height: 80px !important; width: auto !important; }
  
  /* Enhanced desktop navigation spacing */
  .nav-menu { 
    gap: 40px !important; 
  }
  
  /* Larger CTA button on desktop */
  .nav-cta-button {
    padding: 16px 36px !important;
    font-size: 17px !important;
    height: 48px !important;
  }
}

/* 13) Footer (light structural helpers) */
.site-footer{background:#fff !important;padding-top:60px;padding-bottom:60px}
footer .footer-cta-title{font-weight:800}

/* Remove all dark backgrounds and star elements */
.cosmic-hero,
.hero-background,
.star-canvas,
.hero-stars,
.stars,
.planet,
.hero-planet-main,
.hero-planet-violet,
.planet--violet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========================================
   14) NAVBAR STYLES
   Navbar is desktop-first; mobile styles only apply below 768px
   - Default: Desktop menu visible; hamburger hidden
   - <768px: Mobile menu with hamburger
   ======================================== */

/* Main Header Container */
header {
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    padding: 12px 0 !important;
}

/* Remove old backdrop */
.nav-backdrop {
    display: none !important;
}

/* Main Navigation Container */
.navbar-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    position: relative !important;
}

/* Glass Nav Effect */
.glass-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
}

/* Nav Inner Wrapper */
.nav-inner {
    display: flex !important;
    height: 80px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo Styles */
.nav-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.nav-logo img {
    height: 64px !important;
    width: 64px !important;
    object-fit: contain !important;
}

/* Desktop-first navbar defaults: ensure desktop nav is never hidden */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}
/* Ensure desktop link color is dark and readable */
.nav-menu a {
    color: #111827 !important;
    opacity: 1 !important;
}
.nav-menu a:hover {
    color: #1d4ed8 !important;
}
.nav-cta {
    display: block;
}
.mobile-menu-toggle {
    display: none;
}

/* ========================================
   15) NAV CTA BUTTON STYLES
   High contrast CTAs for navbar
   ======================================== */

/* Desktop Nav CTA Button */
.nav-cta-button,
a.nav-cta-button,
.glass-nav .nav-cta-button,
header .nav-cta-button,
.nav-cta-button:link,
.nav-cta-button:visited {
    background: 456990;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 48px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
    border: none !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

.nav-cta-button:hover,
a.nav-cta-button:hover,
.glass-nav .nav-cta-button:hover,
header .nav-cta-button:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important;
}

.nav-cta-button:focus,
a.nav-cta-button:focus {
    outline: 3px solid rgba(37, 99, 235, 0.5) !important;
    outline-offset: 2px !important;
    color: #ffffff !important;
}

/* Override any inherited text colors */
.glass-nav a.nav-cta-button {
    color: #ffffff !important;
}

/* Mobile Nav CTA Button */
.mobile-nav-button {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    width: 100% !important;
    margin-top: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
    border: none !important;
    letter-spacing: 0.01em !important;
}

.mobile-nav-button:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
}

/* ========================================
   16) UTILITY OVERRIDES
   ======================================== */

/* Ensure hero title is not missing */
h1 {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   Process icons alignment fixes (override Vite CSS)
   ======================================== */
/* Normalize icon sizing inside the wrapper */
.process-steps-grid .step-icon-wrapper svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Micro vertical alignment tweak for later steps where artwork has more bottom weight */
@media (min-width: 1024px) {
  .process-steps-grid .process-step-card:nth-child(3) .step-icon-wrapper svg,
  .process-steps-grid .process-step-card:nth-child(4) .step-icon-wrapper svg,
  .process-steps-grid .process-step-card:nth-child(5) .step-icon-wrapper svg {
    transform: translateY(-1px);
  }
}