.guide-header {
     background-color: #f9fafb;
     padding: 60px 0;
     position: relative;
     clip-path: polygon(0 0, 100% 0, 100% 65%, 0% 100%);
 }


 .guide-title {
     font-size: 3rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: #0f172a;
 }

 .guide-subtitle {
     font-size: 1.25rem;
     color: #475569;
     margin-bottom: 2rem;
     max-width: 650px;
 }

 .download-link {
     display: inline-flex;
     align-items: center;
     font-size: 18px;
     font-weight: 500;
     color: #eb9c2f;
     /* your purple */
     text-decoration: none;
 }

 .download-link:hover {
     color: #000;
 }

 .HoverArrow {
     margin-left: 6px;
     transition: transform 0.3s ease;
 }

 .HoverArrow__linePath {
     stroke-dasharray: 7;
     /* length of line */
     stroke-dashoffset: 7;
     /* hidden by default */
     transition: stroke-dashoffset 0.3s ease;
 }

 .download-link:hover .HoverArrow__linePath {
     stroke-dashoffset: 4;
     /* reveals the line */
     color: #000;
 }

 .download-link:hover .HoverArrow {
     transform: translateX(2px);
     /* slide arrow right */
     color: #000;
 }

 .learn-more {
     display: inline-flex;
     align-items: baseline;
     font-size: 18px;
     font-weight: 500;
     color: #eb9c2f;
     /* gold-ish */
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .learn-more:hover {
     color: #000;
 }

 .HoverArrow {
     margin-left: 6px;
     transition: transform 0.3s ease;
 }

 .HoverArrow__linePath {
     stroke-dasharray: 7;
     /* length of line */
     stroke-dashoffset: 7;
     /* hidden by default */
     transition: stroke-dashoffset 0.3s ease;
 }

 .learn-more:hover .HoverArrow__linePath {
     stroke-dashoffset: 4;
     /* partially reveal line */
 }

 .learn-more:hover .HoverArrow {
     transform: translateX(2px);
     /* slide arrow right */
 }



 /* Right card */
 .guide-card {
     background: #fff;
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }

 .guide-card-title {
     font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
     color: #111827;
 }

 .guide-card p {
     font-size: 0.95rem;
     color: #475569;
     margin-bottom: 1rem;
 }

 /* Card */
 .guide-card {
     background: #fff;
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }

 .guide-card-title {
     display: flex;
     align-items: center;
     font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
     color: #111827;
 }

 .guide-card-title::before {
     content: "⬢";
     /* placeholder for icon */
     font-size: 1rem;
     margin-right: 0.5rem;
     color: #EFA63E;
 }

 .guide-card p {
     font-size: 0.95rem;
     color: #475569;
     margin-bottom: 1rem;
 }


 .guide-breadcrumb {
     font-size: 1rem;
     color: #6c757d;
     margin-bottom: 1rem;
 }

 .guide-breadcrumb a {
     color: #EFA63E;
     text-decoration: none;
     font-weight: 600;

 }

 .guide-breadcrumb a:hover {
     /* text-decoration: underline; */
     color: #000;
     font-weight: 600;
 }

 .guide-title {
     font-size: 3rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .guide-subtitle {
     font-size: 1.25rem;
     color: #6c757d;
     max-width: 700px;
     margin-bottom: 2rem;
 }

 .guide-meta {
     display: flex;
     gap: 2rem;
     font-size: 0.875rem;
     color: #6c757d;
     margin-bottom: 2rem;
 }

 /* Content styling */
 .guide-content {
     padding: 60px 0;
     min-height: 500px;
 }

 .guide-section {
     margin-bottom: 4rem;
 }

 .guide-section-title {
     font-size: 2rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: #f39e27;
 }

 .guide-section-subtitle {
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: 1rem;
     color: #EFA63E;
 }

 .guide-paragraph {
     margin-bottom: 1.5rem;
     font-size: 1.125rem;
 }

 .guide-highlight {
     background-color: #f8f9fa;
     border-left: 4px solid #EFA63E;
     padding: 1.5rem;
     margin: 2rem 0;
     border-radius: 0 4px 4px 0;
 }

 .guide-feature-list {
     list-style-type: none;
     padding-left: 0;
 }

 .guide-feature-list li {
     padding: 0.5rem 0;
     position: relative;
     padding-left: 1.5rem;
 }

 .guide-feature-list li:before {
     content: "•";
     color: #EFA63E;
     font-weight: bold;
     position: absolute;
     left: 0;
 }

 .guide-image {
     width: 100%;
     border-radius: 8px;
     margin: 2rem 0;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 /* Loading state */
 .loading {
     text-align: center;
     padding: 4rem 0;
 }

 .spinner {
     width: 40px;
     height: 40px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #EFA63E;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 1rem;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Navigation cards */
 .guide-nav {
     background-color: #f8f9fa;
     padding: 60px 0;
 }

 .guide-nav-title {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 2rem;
     text-align: center;
 }

 .guide-nav-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
 }

 .guide-nav-card {
     background: white;
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     text-decoration: none;
     color: inherit;
     display: block;
     cursor: pointer;
 }

 .guide-nav-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     text-decoration: none;
     color: inherit;
 }

 .guide-nav-card h3 {
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
     color: #EFA63E;
 }

 .guide-nav-card p {
     color: #6c757d;
     margin-bottom: 0;
 }

 /* Error state */
 .error-state {
     text-align: center;
     padding: 4rem 0;
     color: #6c757d;
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .guide-title {
         font-size: 2.25rem;
     }

     .guide-section-title {
         font-size: 1.75rem;
     }

     .guide-nav-cards {
         grid-template-columns: 1fr;
     }
 }

 .guide-header .container {
     max-width: 50%;
     /* take full width */
     padding-left: 40px;
     padding-right: 40px;
     margin-bottom: 100px;
 }

 @media (max-width: 768px) {
     .guide-header .container {
         max-width: 100%;
     }

     .guide-subtitle {
         margin-bottom: 0;
     }

     .guide-title {
         margin-bottom: 0.5rem;
     }
 }