:root{
  /* Meal Mingle App Color Palette */
  --background-white: #FFFFFF;
  --accent-green: #224541;     /* Primary brand color */
  --dark-green: #1F3A33;       /* Darker variant */
  --primary-orange: #224541;   /* Secondary accent - now green */
  
  /* Neutrals */
  --dark-gray: #1C1C1E;        /* Primary text */
  --medium-gray: #6E6E73;      /* Secondary text */
  --light-gray: #F5F5F7;       /* Light fills */
  --card-border: #E5E5EA;      /* Borders */
  --hairline: #D1D1D6;         /* Dividers */
  
  /* Status Colors */
  --success: #224541;          /* Green for success states */
  --error: #FF3B30;            /* Red for errors */
  --warning: #FF9500;          /* Orange for warnings */
  
  /* Legacy mappings for existing styles */
  --brand: var(--accent-green);
  --brand-2: var(--accent-green);
  --ink: var(--dark-gray);
  --muted: var(--medium-gray);
  --tertiary: #8A8A8E;
  --bg: var(--background-white);
  --card: var(--light-gray);
  --ring: var(--card-border);
  --divider: var(--hairline);
  --blue: #0A84FF;
  --danger: var(--error);
  --radius: 16px;
  --shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink); 
  background:var(--bg);
  -webkit-font-smoothing: antialiased;
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}

/* Buttons */
.btn{
  display:inline-flex;gap:.5rem;align-items:center; 
  padding:16px 24px;border-radius:999px;border:none;
  background-color:var(--accent-green);
  color:white;font-weight:600;font-size:16px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all 0.2s ease;
}
.btn:hover{background-color:var(--dark-green);transform:translateY(-1px);}
.btn.outline{
   background: rgba(34, 69, 65, 0.05);
  color:#374151;
  border-radius:999px;
  padding:12px 24px;
  font-weight:500;
  border:1px solid rgba(34, 69, 65, 0.1);
}
.btn.outline:hover{
  background:rgba(34, 69, 65, 0.15);
  transform:translateY(-1px);
  color:#1f2937;
}
.btn-full{
  border-radius:999px;
  width:100%;
  justify-content:center;
}

/* Tags */
.tag{
  display:inline-block;font-weight:600;color:var(--medium-gray);
  background:var(--light-gray);border:0.5px solid var(--card-border);
  padding:6px 12px;border-radius:20px;font-size:12px;
  text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Inter',sans-serif;
}
.tag.primary{
  background-color:var(--accent-green);
  color:white;
  border:none;
}
.tag-full{
  width:50%;
  text-align:center;
  display:block;
}
.tag-header{
  background:rgba(255,255,255,0.1);border:0.5px solid rgba(255,255,255,0.2);color:white;
  padding:6px 12px;border-radius:20px;font-size:12px;
  text-transform:uppercase;letter-spacing:1.5px;
  font-family:'Inter',sans-serif;
}

/* Header */
header{
  position:sticky;top:0;z-index:30;background:#ffffffcc;
  backdrop-filter:blur(10px); border-bottom:0.5px solid var(--ring);
}
nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.nav{display:flex;gap:1.25rem;align-items:center}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:500;color:var(--ink);font-family:'GFS Didot',serif;font-size:1.5rem;}
.logo-img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.nav a{color:var(--ink);font-weight:600}

/* Hero */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:60px 0 40px;
  background:linear-gradient(135deg, var(--brand) 0%, #2A4A40 100%);
  color:white;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px}
.hero h1{
  font-family:'GFS Didot',serif;
  font-size:clamp(2rem,3.2vw,3.5rem);line-height:1.15;
  margin:.35rem 0 .6rem;font-weight:500;letter-spacing:-.02em
}
.hero p{color:#E5E5EA;max-width:540px;font-size:18px;font-weight:400;}
.store-row{display:flex;gap:.6rem;margin-top:1rem}
.store-badge{
  height: 56px;border-radius:12px;border:0.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1);padding:36px 10px;font-weight:500;
  display:flex;align-items:center;gap:.5rem;color:white;
}
.store-img{height:56px;width:auto;}
.hero-phones{
  position:relative;display:flex;justify-content:center;align-items:center;gap:20px;padding:24px
}
.phone{
  width:min(240px,45%); aspect-ratio:10/21; border-radius:36px; background:#0a0a0a;
  box-shadow:var(--shadow); position:relative; overflow:hidden; border:10px solid #0a0a0a;
  transform:rotate(-6deg);
}
.phone:nth-child(2){transform:rotate(6deg); z-index:2}
.phone img{width:100%;height:100%;object-fit:cover}

/* Social Media Logos */
.social-logo{
  position:absolute;width:68px;height:68px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.3s ease;z-index:3;
  opacity:0;transform:scale(0.5);
  animation:socialFadeIn 0.8s ease-out forwards;
}
.social-logo:hover{
  transform:scale(1.15) translateY(-2px);
}
.social-logo img{width:68px;height:68px;object-fit:contain;}
.social-instagram{bottom:15%;left:12%;animation:socialFadeIn 0.8s ease-out 0.2s forwards, float1 3s ease-in-out 1s infinite;}
.social-tiktok{bottom:8%;left:38%;animation:socialFadeIn 0.8s ease-out 0.8s forwards, float4 2.8s ease-in-out 1.6s infinite;}
.social-pinterest{bottom:20%;right:25%;animation:socialFadeIn 0.8s ease-out 0.6s forwards, float3 3.5s ease-in-out 1.4s infinite;}
.social-facebook{bottom:5%;right:5%;animation:socialFadeIn 0.8s ease-out 1.2s forwards, float2 2.5s ease-in-out 2s infinite;}

@keyframes socialFadeIn{
  to{opacity:1;transform:scale(1);}
}
@keyframes float1{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-8px) rotate(2deg);}
}
@keyframes float2{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(-3deg);}
}
@keyframes float3{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-6px) rotate(1deg);}
}
@keyframes float4{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-10px) rotate(-2deg);}
}

/* Sections */
.section{padding:72px 0}
.section h2{
  font-family:'GFS Didot',serif;
  font-size:26px;font-weight:500;letter-spacing:-.01em;
  margin:.2rem 0 .6rem;color:var(--ink);
}
.lead{color:var(--muted);max-width:620px;font-size:16px;font-weight:100;line-height:1.6;}

/* Split layout */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}
.card-media{
  background:linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  padding:24px;border-radius:16px;border:0.5px solid var(--card-border); 
  position:relative;
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
}
.img-mock{width:100%;border-radius:16px;border:0.5px solid var(--ring);box-shadow:var(--shadow)}

/* Mini features */
.mini-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:22px}
.mini{
  background:linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  border:0.5px solid var(--card-border);border-radius:16px;padding:16px;
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
}
.mini b{display:block;margin-bottom:.35rem;color:var(--ink);font-weight:600;}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.pricing-toggle{
  display:flex;
  justify-content:center;
  margin:2rem 0;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block;
  }
  
  .pricing-toggle {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
  }
  
  .pricing-toggle-container {
    background: white;
    border: 0.5px solid var(--ring);
    border-radius: 999px;
    padding: 4px;
    display: flex;
    gap: 4px;
  }
  
  .toggle-btn {
    padding: 8px 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
  }
  
  .toggle-btn.active {
    background-color: var(--accent-green);
    color: white;
  }
  
  .mobile-table {
    width: 100%;
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
    border-radius: 16px;
    border: 0.5px solid var(--card-border);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
  }
  
  .mobile-row {
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  }
  
  .mobile-row:last-child {
    border-bottom: none;
  }
  
  .mobile-header {
    background: white;
    font-weight: 600;
    color: var(--ink);
  }
  
  .mobile-feature {
    font-size: 14px;
    color: var(--ink);
  }
  
  .mobile-free, .mobile-pro {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
  }
  
  .mobile-free {
    color: #94a3b8;
  }
  
  .mobile-pro {
    color: var(--accent-green);
    background: rgba(34, 69, 65, 0.05) !important;
    margin: -12px -16px;
    padding: 12px 16px;
  }
  
  .mobile-free:contains('✓'), .mobile-pro:contains('✓') {
    text-shadow: 1px 1px 0px rgba(34, 69, 65, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, var(--accent-green) 0%, #1a3a35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .pricing-comparison {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .plan-column, .feature-column {
    display: none;
  }
  
  .plan-summary {
    width: 100%;
  }
  
  .mobile-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
}
.pricing-toggle-container{
  background:white;
  border:0.5px solid var(--ring);
  border-radius:999px;
  padding:4px;
  display:flex;
  gap:50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  width:fit-content;
  margin:0 auto;
}
.toggle-btn{
  padding:10px 60px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s ease-in-out;
  font-size:14px;
}
.toggle-btn.active{
  background-color:var(--accent-green);
  color:white;
}
.plan{
  background:linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  border:0.5px solid var(--card-border);border-radius:16px;padding:22px;
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
}
.plan:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.plan.selected{
  border:2px solid var(--accent-green);
  background:linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  box-shadow:0 8px 20px rgba(34, 69, 65, 0.2), 0 4px 8px rgba(0,0,0,0.08);
}
.plan.selected .tag{
  background-color:var(--accent-green);
  color:white;
}
.price{font-size:2rem;font-weight:700;color:var(--ink);margin:.4rem 0;}
.feature{margin:.8rem 0;font-size:16px;font-weight:400;}
.mini-icon{font-size:1.5rem;margin-bottom:.5rem;}
.mini-subtitle{font-weight:600;color:var(--ink);margin-bottom:.35rem;}
.plan-indicator{
  position:absolute;
  top:12px;
  right:12px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--ring);
  background:white;
  transition:all 0.15s ease-in-out;
}
.plan.selected .plan-indicator{
  border-color:var(--accent-green);
  background-color:var(--accent-green);
}
.plan.selected .plan-indicator::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:white;
}
.plan-features{margin-top:.6rem;}
.plan-button{margin-top:24px;}
.plan-button-free{margin-top:4rem;}
.save-badge{
  font-size:0.8rem;
  background:#00C851;
  color:white;
  font-weight:600;
  margin-top:8px;
  margin-left:12px;
  padding:4px 8px;
  border-radius:12px;
  display:inline-block;
}

.pricing-comparison {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1.5fr 0.6fr 1.2fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  border: 0.5px solid var(--card-border);
  border-radius: 16px;
  padding: 0px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .pricing-comparison {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .pricing-comparison .plan:first-child {
    order: 3;
  }
  
  .pricing-comparison .plan-column {
    display: none;
  }
  
  .pricing-comparison .feature-column {
    order: 1;
    display: flex;
    flex-direction: column;
  }
  
  .pricing-comparison .plan:last-child {
    order: 4;
  }
  
  .pricing-toggle {
    order: 2;
  }
  
  .feature-label {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: 12px 0;
  }
  
  .feature-label::after {
    content: attr(data-free);
    justify-self: center;
    color: #94a3b8;
  }
  
  .feature-label::before {
    content: attr(data-pro);
    justify-self: center;
    color: var(--accent-green);
    font-weight: 600;
  }
}

.plan-summary {
  border-radius: 18px;
  padding: 16px 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-summary .plan-button,
.plan-summary .plan-button-free {
  margin-top: auto;
}

.plan-summary.selected {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

.plan-column {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.feature-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.feature-label {
  color: #0f172a;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.9rem;
  font-weight: 600;
}

.plan-value {
  text-align: center;
  border-radius: 999px;
  padding: 10px;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.pricing-row:last-child {
  border-bottom: none;
}

.feature-label {
  color: #0f172a;
}

.plan-value {
  text-align: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: #ffffff;
}

.plan-value-pro {
  font-weight: 600;
}

.plan-value.is-yes {
  background: rgba(34, 69, 65, 0.05);
  color: var(--accent-green);
  font-size: 18px;
  font-weight: 600;
  text-indent: -9999px;
}

.plan-value.is-yes::before {
  content: '✓';
  text-indent: 0;
  display: block;
  text-align: center;
  text-shadow: 1px 1px 0px rgba(34, 69, 65, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, var(--accent-green) 0%, #1a3a35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-value.is-no {
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  font-weight: 600;
  text-indent: -9999px;
}

.plan-value.is-no::before {
  content: '−';
  text-indent: 0;
  display: block;
  text-align: center;
}


/* FAQ */
.faq{max-width:900px;margin:0 auto}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.faq-col{}
@media (max-width:768px){.faq-grid{grid-template-columns:1fr}}
details{
  border:0.5px solid var(--card-border);border-radius:16px;padding:14px 16px;
  background:linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 55%, #F5F5F5 100%);
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 -1px 1px rgba(255, 255, 255, 0.9);
}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:600;list-style:none;color:var(--ink);font-size:17px;}
summary::-webkit-details-marker{display:none}
.faq-section{padding-top:28px;}
.faq-details{margin-top:16px;}
.faq-answer{margin-top:.6rem;}

/* === Footer (Flavorish-style) === */
footer {
  border-top: 1px solid var(--ring);
  background:#f5f5f7;
  padding: 56px 0 72px;     /* generous top/bottom space */
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.1fr 1.1fr; /* brand, links, contact, legal */
  gap: 48px 80px;           /* row x column gap */
  align-items: start;
}

.footer-brand .logo { font-size: 28px; }
.footer-tagline { 
  margin-top: 10px; 
  color: var(--muted);
  line-height: 1.6; 
  max-width: 420px;
}

.footer-badge-row { margin-top: 16px; }


.footer-social img { 
  height:40px; width:auto; 
  display:block; 
}

.foot-head {                 /* section titles: Links / Contact Us / Legal */
  display:block;
  font-weight:700;
  font-size: 18px;          /* matches screenshot scale */
  margin: 0 0 16px;
  color: var(--ink);
}

.footer-links a {
  display:block;            /* stack each link */
  margin: 12px 0;           /* even vertical rhythm */
  color: var(--muted);
  line-height: 1.5;
}
.footer-links a:hover { text-decoration: underline; }

.footer-contact a {
  display:block;
  margin: 12px 0;
  color: var(--ink);
  line-height: 1.5;
  white-space: nowrap;
}

.footer-copyright {
  margin-top: 40px;
  color: var(--tertiary);
  text-align: left;         /* like the reference */
  font-size: 14px;
}

/* responsive */
@media (max-width: 960px){
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 560px){
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-head { font-size:22px; }
}
.muted{color:var(--tertiary)}

/* Utility Classes */
.text-center{text-align:center;}
.mt-22{margin-top:22px;}
.pt-40{padding-top:40px;}
.pt-28{padding-top:28px;}

/* Responsive */
@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr}
  .mini-feats{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .hero-phones{order:-1}
  .social-logo{width:56px;height:56px;}
  .social-logo img{width:56px;height:56px;}
}
@media (max-width:560px){
  .nav{display:none}
  .mini-feats{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .hero h1{font-size:1.8rem;}
  .section h2{font-size:22px;}
}
/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: var(--ink);
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  width: min(90%, 640px);
  padding: 14px 18px;
  font-size: 0.95rem;
  z-index: 9999;
  transition: opacity .3s ease;
}
.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cookie-banner a {
  color: var(--brand);
  text-decoration: underline;
}
.cookie-banner .btn.small {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background .2s ease;
}
.cookie-banner .btn.small:hover {
  background: var(--brand-hover, #0d6f56);
}
.cookie-banner.hidden {
  opacity: 0;
  pointer-events: none;
}