:root{
  --indigo:#2F2B4A;
  --saffron:#F4A300;
  --turquoise:#2BA6A6;
  --warm:#FBF8F3;
  --muted:#6B6B78;
  --ash:#E7E6E3;
  --radius:12px;
  --max-width:1200px;
  --transition: all 0.3s ease;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:var(--warm);color:var(--indigo);-webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
header{display:flex;align-items:center;justify-content:space-between;padding:2px 0;background:rgba(251,248,243,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--ash);position:sticky;top:0;z-index:40}
.brand{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand div{font-size:13px;color:var(--muted);font-weight:500;line-height:1.3}
.brand .logo{width:158px;height:158px;border-radius:12px;background:linear-gradient(135deg,var(--turquoise),var(--indigo));display:flex;align-items:center;justify-content:center;color:white;font-weight:800}

/* Logo image - Increased by another 50% for maximum visibility (158px height) */
.site-logo{
  width:158px;
  height:158px;
  object-fit:cover;
  display:block;
  border-radius:12px;
  image-rendering:optimizeQuality;
  will-change:auto;
}
nav{display:flex;align-items:center;flex-wrap:wrap}
nav a{margin-left:16px;font-weight:600;color:var(--indigo)}
.cta{background:linear-gradient(90deg,var(--saffron),#d89100);color:white;padding:10px 16px;border-radius:10px;font-weight:700}

/* remove underlines from all links across the site and keep accessible focus */
a, a:link, a:visited {
  text-decoration: none;
  color: inherit; /* use surrounding text color unless a specific color is set */
}

/* ensure nav links keep the intended color and no underline */
nav a, header nav a {
  text-decoration: none;
  color: var(--indigo);
}

/* keep hover styles but still no underline */
a:hover, a:active, a:focus {
  text-decoration: none;
}

/* visible focus ring for keyboard users */
a:focus-visible {
  outline: 3px solid rgba(43,166,166,0.18);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Responsive logo sizing - Increased by another 50% while maintaining responsiveness */
@media (max-width: 768px) {
  .brand .logo,
  .site-logo {
    width:137px;
    height:137px;
  }
}

@media (max-width: 480px) {
  .brand .logo,
  .site-logo {
    width:116px;
    height:116px;
  }
}

@media (max-width: 420px) {
  .brand .logo,
  .site-logo {
    width:105px;
    height:105px;
  }
}

/* ensure CTA buttons keep their white text color (global anchor rules should not override button styles) */
.cta, .cta:link, .cta:visited {
  color: white;
  text-decoration: none;
}
.hero{display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center;padding:40px 0}
.hero h2{font-family:'Playfair Display',serif;font-size:36px;margin:0 0 10px}
.lead{color:var(--muted);font-size:17px;line-height:1.6}
.hero-img{border-radius:var(--radius);overflow:hidden;max-width:100%;box-shadow:0 8px 32px rgba(47,43,74,0.12)}
.hero-img img{width:100%;height:auto;display:block;object-fit:cover}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.path{background:white;border-radius:var(--radius);padding:16px;border:1px solid var(--ash);transition:var(--transition)}
.path:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(47,43,74,0.06)}
.mats{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.mat{background:white;border-radius:var(--radius);padding:14px;border:1px solid var(--ash);flex:1;min-width:220px}
.badge{padding:6px 10px;border-radius:8px;color:white;font-weight:800;display:inline-block;margin-bottom:8px}
.white{background:#cfcfcf;color:var(--indigo)}
.green{background:#2CA58D}
.blue{background:#3E8ED0}
.purple{background:#6D4C89}
.gold{background:#F4A300}
.pricing{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.card{background:white;border-radius:var(--radius);padding:18px;border:1px solid var(--ash);min-width:260px;flex:1;transition:var(--transition)}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,0.05)}
.price{font-size:26px;font-weight:800;color:var(--indigo);margin:10px 0}
ul{color:var(--muted);padding-left:18px}
.bonus{background:linear-gradient(90deg,#fff8f0,#fff4e6);padding:10px;border-radius:8px;border:1px solid #fde6c9;color:#6b3b00;font-weight:700;margin-top:10px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.footer{background:#f7f7f7;padding:28px;text-align:center;color:var(--muted)}
/* Comprehensive Mobile Responsive Design */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .paths{grid-template-columns:repeat(2,1fr)}
  .container{padding:20px}
}

@media(max-width:768px){
  .container{padding:16px}
  
  /* Header improvements */
  header{padding:2px 0}
  .brand{gap:8px}
  
  /* Navigation improvements */
  nav a{margin-left:12px;font-size:14px}
  .cta{padding:8px 12px;font-size:14px}
  
  /* Hero section improvements */
  .hero{padding:24px 0;gap:20px}
  .hero h2{font-size:28px}
  .lead{font-size:16px}
  
  /* Hero image mobile optimization */
  .hero-img{margin-top:16px}
  
  /* Card improvements */
  .pricing{flex-direction:column}
  .card{min-width:auto}
  .mats{flex-direction:column}
  .mat{min-width:auto}
}

@media(max-width:640px){
  .paths{grid-template-columns:1fr}
  
  /* Mobile navigation - hide main nav, keep CTA */
  nav a:not(.cta){display:none}
  nav .cta{margin-left:0}
  
  /* Header adjustments for mobile */
  header{flex-wrap:wrap;gap:10px;padding:2px 0}
  .brand{justify-content:center;width:100%}
  nav{width:100%;justify-content:center;margin-top:8px}
  
  /* Improved mobile typography */
  .hero h2{font-size:24px;line-height:1.2}
  .lead{font-size:15px;line-height:1.5}
  
  /* Better card spacing on mobile */
  .card-grid{grid-template-columns:1fr;gap:12px}
  .paths{gap:12px}
  
  /* Footer improvements */
  .footer{padding:20px;font-size:14px}
}

@media(max-width:480px){
  .container{padding:12px}
  
  /* Very small screen adjustments */
  .hero{padding:16px 0;gap:16px}
  .hero h2{font-size:20px}
  .lead{font-size:14px}
  
  /* Hero image very small mobile */
  .hero-img{margin-top:12px}
  
  /* Smaller padding for cards */
  .card, .path, .mat{padding:12px}
  
  /* Price text adjustment */
  .price{font-size:22px}
  
  /* CTA button adjustments */
  .cta{padding:6px 10px;font-size:13px}
}

/* Landscape phone orientation */
@media(max-width:768px) and (orientation:landscape){
  .hero{grid-template-columns:1fr 1fr;gap:20px}
  .hero h2{font-size:22px}
}

/* Ensure images are responsive */
img{max-width:100%;height:auto}

/* Improve touch targets for mobile */
@media(max-width:768px){
  a, button, .cta{min-height:44px;display:inline-flex;align-items:center}
}

/* small-screen logo sizing handled above */