/* =============================================================
   Diet MSP - styles.css
   Palette: cream #F5E9D2, brand-red #C8392C, brand-blue #1E466E
   Type:    Alfa Slab One (display), Playfair Italic (accent),
            Pacifico (script), Inter (body/UI)
   ============================================================= */

:root{
  --cream:#F5E9D2;
  --cream-2:#FBF3E1;
  --cream-3:#EFE2C5;
  --red:#C8392C;
  --red-dark:#A22A1F;
  --blue:#1E466E;
  --blue-dark:#143049;
  --ink:#1B1410;
  --ink-2:#3A2E26;
  --rule:#D7C39A;
  --shadow:0 1px 0 rgba(27,20,16,.04), 0 12px 32px -16px rgba(27,20,16,.18);
  --shadow-lift:0 2px 0 rgba(27,20,16,.05), 0 20px 48px -20px rgba(27,20,16,.28);
  --radius:14px;
  --radius-sm:8px;
  --maxw:1180px;
  --gutter:clamp(20px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* Subtle paper grain - SVG noise overlay at ~6% */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
  background-repeat:repeat;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--red); }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* =============== STICKY HEADER =============== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,233,210,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--rule);
  box-shadow:0 8px 24px -16px rgba(27,20,16,.18);
  background:rgba(245,233,210,.96);
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px var(--gutter);
  display:flex; align-items:center; gap:32px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--ink); flex:0 0 auto;
}
.brand:hover{ color:var(--ink); }
.brand-can{
  width:38px; height:auto;
  filter:drop-shadow(0 2px 6px rgba(27,20,16,.18));
}
.brand-wordmark{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:22px;
  letter-spacing:.02em;
  color:var(--red);
  line-height:1;
  padding-top:2px;
}
.brand-dot{ color:var(--blue); }

.primary-nav{ margin-left:auto; }
.primary-nav ul{
  display:flex; gap:30px;
  margin:0; padding:0; list-style:none;
}
.primary-nav a{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:14px; letter-spacing:.04em;
  color:var(--ink);
  padding:6px 0;
  position:relative;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.primary-nav a:hover{ color:var(--red); }
.primary-nav a:hover::after{ transform:scaleX(1); }

.header-cta{
  background:var(--red);
  color:var(--cream);
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:13px; letter-spacing:.05em;
  padding:10px 18px;
  border-radius:999px;
  box-shadow:0 6px 14px -6px rgba(200,57,44,.6);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.header-cta:hover{
  background:var(--red-dark);
  color:var(--cream);
  transform:translateY(-1px);
  box-shadow:0 10px 18px -8px rgba(200,57,44,.7);
}

/* Mobile menu button */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:transparent; border:0; cursor:pointer;
  width:42px; height:36px; padding:8px;
}
.nav-toggle span{
  display:block; height:2px; background:var(--ink);
  margin:5px 0; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none;
  background:var(--cream-2);
  border-bottom:1px solid var(--rule);
  padding:8px var(--gutter) 20px;
}
.mobile-nav a{
  display:block;
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:18px; letter-spacing:.02em;
  color:var(--ink);
  padding:14px 0;
  border-bottom:1px dashed var(--rule);
}
.mobile-nav a:last-child{ border-bottom:0; }
.mobile-nav .mobile-cta{
  margin-top:14px;
  background:var(--red); color:var(--cream);
  text-align:center;
  padding:14px 20px;
  border-radius:999px;
}

/* =============== HERO =============== */
.hero{
  position:relative;
  padding:64px 0 80px;
  overflow:hidden;
}
.hero-grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.hero-copy{ position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:12px; letter-spacing:.18em;
  color:var(--red);
  background:var(--cream-2);
  border:1px solid var(--rule);
  padding:6px 14px;
  border-radius:999px;
  margin:0 0 22px;
}
.starburst{
  width:12px; height:12px; fill:var(--red);
}
.hero h1{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:clamp(34px, 5.4vw, 60px);
  line-height:1.04;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0 0 18px;
}
.hero h1 em{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic; font-weight:700;
  color:var(--red);
}
.hero .lede{
  font-size:clamp(20px, 2.2vw, 24px);
  margin:0 0 18px;
  color:var(--ink-2);
}
.hero .lede .script{
  font-family:'Pacifico', cursive;
  font-size:1.4em; line-height:1; color:var(--red);
  display:inline-block; transform:translateY(2px);
  margin-right:6px;
}
.hero .sub{
  font-size:17px; max-width:54ch;
  color:var(--ink-2);
  margin:0 0 32px;
}
.hero-ctas{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:14px; letter-spacing:.05em;
  padding:14px 26px;
  border-radius:999px;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--red); color:var(--cream);
  box-shadow:0 10px 20px -10px rgba(200,57,44,.65);
}
.btn-primary:hover{
  background:var(--red-dark); color:var(--cream);
  transform:translateY(-1px);
  box-shadow:0 14px 24px -12px rgba(200,57,44,.75);
}
.btn-ghost{
  color:var(--blue); padding:14px 6px;
}
.btn-ghost:hover{ color:var(--red); }
.btn-wide{ padding:16px 32px; }

.hero-can{
  position:relative;
  display:flex; justify-content:center; align-items:center;
}
.hero-can::before{
  content:""; position:absolute;
  width:78%; height:78%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(200,57,44,.18), rgba(200,57,44,0) 70%);
  filter:blur(6px);
  z-index:0;
}
.hero-can img{
  position:relative; z-index:1;
  width:min(420px, 100%);
  filter:drop-shadow(0 30px 40px rgba(27,20,16,.32));
  transform:rotate(-4deg);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform:rotate(-4deg) translateY(0); }
  50%{ transform:rotate(-4deg) translateY(-10px); }
}

.hero-stripe{
  position:absolute; left:0; right:0; bottom:0; height:8px;
  background:repeating-linear-gradient(90deg,
    var(--red) 0 28px, var(--cream) 28px 36px, var(--blue) 36px 64px, var(--cream) 64px 72px);
  opacity:.85;
}

/* =============== SECTION HEAD =============== */
.section-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 48px;
}
.kicker{
  font-family:'Pacifico', cursive;
  color:var(--red);
  font-size:22px; line-height:1;
  margin:0 0 8px;
}
.kicker-light{ color:var(--cream); }
section h2{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:clamp(28px, 3.6vw, 40px);
  line-height:1.1;
  color:var(--ink);
  margin:0 0 14px;
  position:relative;
  display:inline-block;
}
section h2::after{
  content:""; display:block; margin:14px auto 0;
  width:64px; height:3px; background:var(--red); border-radius:2px;
}
.section-sub{
  color:var(--ink-2); font-size:17px;
  margin:0;
}

/* =============== SERVICES =============== */
.services{ padding:96px 0; }
.card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.card{
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--red);
}
.card-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--red); color:var(--cream);
  margin-bottom:18px;
  box-shadow:0 8px 18px -10px rgba(200,57,44,.7);
}
.card-icon svg{ width:24px; height:24px; }
.card h3{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:20px; margin:0 0 8px; color:var(--ink);
}
.card p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }

/* =============== HOW =============== */
.how{
  padding:96px 0;
  background:var(--cream-3);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  position:relative;
}
.steps{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  position:relative;
}
.steps::before{
  content:""; position:absolute;
  top:32px; left:11%; right:11%;
  border-top:2px dashed var(--red);
  opacity:.55;
  z-index:0;
}
.step{
  position:relative;
  text-align:center;
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:36px 24px 28px;
  box-shadow:var(--shadow);
  z-index:1;
}
.step-num{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--red); color:var(--cream);
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -8px rgba(200,57,44,.7);
  border:3px solid var(--cream);
}
.step h3{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:20px; margin:8px 0 8px; color:var(--ink);
}
.step p{ margin:0; color:var(--ink-2); font-size:15px; }

/* =============== COMPARE =============== */
.compare{ padding:96px 0; }
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:980px;
  margin:0 auto;
}
.compare-col{
  border-radius:var(--radius);
  padding:8px 8px 32px;
  background:var(--cream-2);
  border:1px solid var(--rule);
  box-shadow:var(--shadow);
}
.compare-col.compare-diet{
  background:linear-gradient(180deg, #fff8e6, var(--cream-2));
  border-color:var(--red);
  box-shadow:var(--shadow-lift);
}
.compare-head{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:18px; letter-spacing:.04em;
  text-align:center;
  padding:14px;
  border-radius:10px;
  margin-bottom:14px;
}
.compare-reg .compare-head{ background:var(--ink); color:var(--cream-2); }
.compare-diet .compare-head{ background:var(--red); color:var(--cream); }
.compare-col ul{
  list-style:none; padding:0 24px; margin:0;
}
.compare-col li{
  padding:14px 0 14px 30px;
  border-bottom:1px dashed var(--rule);
  font-size:16px;
  color:var(--ink-2);
  position:relative;
}
.compare-col li:last-child{ border-bottom:0; }
.compare-reg li::before{
  content:"\00d7"; /* x mark */
  position:absolute; left:0; top:12px;
  font-family:'Alfa Slab One', Georgia, serif;
  color:var(--ink); font-size:18px;
}
.compare-diet li::before{
  content:""; position:absolute; left:0; top:18px;
  width:16px; height:16px;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.2 9.8L24 12l-9.8 2.2L12 24l-2.2-9.8L0 12l9.8-2.2z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.2 9.8L24 12l-9.8 2.2L12 24l-2.2-9.8L0 12l9.8-2.2z'/></svg>") no-repeat center / contain;
}
.compare-col li em{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic; color:var(--ink);
}

/* =============== PRICING =============== */
.pricing{
  padding:96px 0;
  background:var(--cream-3);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.price-card{
  max-width:520px;
  margin:0 auto;
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:40px 36px 36px;
  box-shadow:var(--shadow-lift);
  text-align:center;
  position:relative;
}
.price-card::before{
  content:""; position:absolute; top:-1px; left:24px; right:24px;
  height:4px; background:var(--red); border-radius:0 0 4px 4px;
}
.price-label{
  font-family:'Pacifico', cursive;
  color:var(--blue);
  font-size:18px; margin:0 0 6px;
}
.price-figure{
  font-family:'Alfa Slab One', Georgia, serif;
  color:var(--red);
  line-height:1; margin:6px 0 8px;
  display:flex; align-items:baseline; justify-content:center; gap:4px;
}
.price-currency{ font-size:30px; color:var(--ink); }
.price-amount{ font-size:72px; }
.price-period{ font-size:22px; color:var(--ink-2); letter-spacing:.02em; }
.price-note{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  color:var(--ink-2);
  margin:0 0 22px;
}
.price-list{
  list-style:none; padding:0; margin:0 0 28px;
  text-align:left;
  border-top:1px dashed var(--rule);
}
.price-list li{
  padding:12px 0 12px 26px;
  border-bottom:1px dashed var(--rule);
  position:relative;
  color:var(--ink-2);
  font-size:15px;
}
.price-list li::before{
  content:""; position:absolute; left:0; top:16px;
  width:14px; height:14px; background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.4-1.4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.4-1.4z'/></svg>") no-repeat center / contain;
}
.price-fine{
  margin:16px 0 0;
  font-size:13px; color:var(--ink-2);
  font-style:italic;
}

/* =============== CONTACT =============== */
.contact{
  padding:96px 0;
  background:var(--blue);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 60%);
  pointer-events:none;
}
.contact .section-head h2,
.contact h2{ color:var(--cream); }
.contact h2::after{ background:var(--cream); }
.contact .contact-lede{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:20px;
  color:rgba(245,233,210,.85);
  margin:0 0 36px;
  max-width:640px;
}
.contact-inner{ text-align:center; }
.contact-inner > * { margin-left:auto; margin-right:auto; }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:8px;
  text-align:left;
}
.contact-card{
  display:block;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(245,233,210,.18);
  border-radius:var(--radius);
  padding:22px 22px 24px;
  color:var(--cream);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-card:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--cream);
  color:var(--cream);
  transform:translateY(-2px);
}
.contact-card-static:hover{ transform:none; cursor:default; }
.contact-card-label{
  display:block;
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:12px; letter-spacing:.16em;
  color:rgba(245,233,210,.65);
  margin-bottom:8px;
}
.contact-card-value{
  display:block;
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:20px;
  line-height:1.25;
  color:var(--cream);
}

/* =============== FOOTER =============== */
.site-footer{ background:var(--red); color:var(--cream); }
.footer-inner{
  display:grid;
  grid-template-columns:1.2fr 2fr;
  gap:48px;
  padding:64px var(--gutter) 32px;
}
.footer-brand{
  display:flex; gap:16px; align-items:flex-start;
}
.footer-can{ width:64px; height:auto; flex:0 0 auto; }
.footer-mark{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:22px; color:var(--cream); margin:0;
  letter-spacing:.02em;
}
.footer-mark span{ color:rgba(245,233,210,.6); }
.footer-tag{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:14px;
  color:rgba(245,233,210,.78);
  margin:6px 0 0;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.footer-cols .footer-head{
  font-family:'Alfa Slab One', Georgia, serif;
  font-size:13px; letter-spacing:.14em;
  margin:0 0 12px;
  color:var(--cream);
}
.footer-cols a{
  display:block;
  color:rgba(245,233,210,.82);
  padding:5px 0;
  font-size:14px;
}
.footer-cols a:hover{ color:var(--cream); }
.footer-addr{
  margin:8px 0 0;
  color:rgba(245,233,210,.7);
  font-size:13px;
  font-style:italic;
}
.footer-bar{
  border-top:1px solid rgba(245,233,210,.18);
  background:var(--red-dark);
}
.footer-bar-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--gutter);
  font-size:13px;
  color:rgba(245,233,210,.75);
  gap:16px;
}
.footer-script{
  font-family:'Pacifico', cursive;
  font-size:16px;
  color:var(--cream);
}

/* =============== RESPONSIVE =============== */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-can{ order:-1; }
  .hero-can img{ width:min(260px, 60%); }
  .card-grid{ grid-template-columns:repeat(2, 1fr); }
  .steps{ grid-template-columns:1fr; gap:42px; }
  .steps::before{ display:none; }
  .compare-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .footer-cols{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 760px){
  .primary-nav, .header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .site-header[aria-expanded] .mobile-nav,
  .mobile-nav:not([hidden]){ display:block; }
  section{ padding:64px 0 !important; }
  .footer-cols{ grid-template-columns:1fr; gap:18px; }
  .footer-bar-inner{ flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (max-width: 480px){
  .brand-wordmark{ font-size:18px; }
  .card-grid{ grid-template-columns:1fr; }
  .price-amount{ font-size:60px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}