*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff8ef;color:#17120e;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}button{font:inherit}.wrap{width:min(1200px,calc(100% - 56px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,248,239,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.08)}.nav{min-height:66px;display:flex;align-items:center;gap:26px}.brand,.footer-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.03em}.brand img,.footer-brand img{width:34px;height:34px;border-radius:8px}.nav-links{display:flex;gap:30px;margin-left:auto}.nav-links a{font-size:14px;font-weight:750;color:#66748a}.nav-actions{display:flex;align-items:center;gap:12px}.language{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#fff}.language select{border:0;background:transparent;outline:0;font-weight:800;color:#17120e}.store-badge{border:0;background:transparent;padding:0;cursor:default}.store-badge img{height:52px;width:auto}.store-badge--nav img{height:38px}.store-badge--hero img{height:58px}.hero{position:relative;overflow:hidden;min-height:760px;background:#fff8ef}.food-layer{position:absolute;inset:auto;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:cover}.food-layer--hero{inset:0;background-image:linear-gradient(90deg,rgba(255,248,239,.99) 0%,rgba(255,248,239,.95) 40%,rgba(255,248,239,.66) 63%,rgba(255,248,239,.18) 100%),url("food-hero.png");background-position:center right}.hero-grid{position:relative;z-index:2;min-height:760px;display:grid;grid-template-columns:minmax(0,1fr) 520px;align-items:center;gap:70px;padding:80px 0}.tag{display:inline-flex;align-items:center;gap:8px;background:rgba(224,120,32,.11);border:1px solid rgba(224,120,32,.20);color:#e07820;border-radius:999px;padding:8px 15px;font-weight:900;font-size:13px;margin:0 0 24px}.tag--center{margin-inline:auto}.hero h1,.section-head h2,.copy-side h3,.final-cta h2{margin:0;font-weight:950;letter-spacing:-.06em}.hero h1{font-size:clamp(48px,5.5vw,76px);line-height:1.02}.hero h1 span{color:#e07820}.lead{max-width:620px;color:#5d6b80;font-size:20px;line-height:1.65;margin:24px 0}.pills{display:flex;flex-wrap:wrap;gap:10px;max-width:650px}.pills span{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:9px 15px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.05)}.store-badge--hero{margin-top:22px}.note{margin:18px 0 0;max-width:600px;color:#5d6b80;font-size:14px;line-height:1.55}.hero-phones{position:relative;min-height:560px}.iphone{position:relative;width:280px;padding:10px;border-radius:42px;background:linear-gradient(145deg,#050505,#1b1b1b 45%,#050505);box-shadow:0 30px 78px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 0 5px #050505}.iphone:before{content:"";position:absolute;z-index:3;left:50%;top:10px;transform:translateX(-50%);width:92px;height:25px;border-radius:0 0 16px 16px;background:#050505}.screen{overflow:hidden;border-radius:32px;background:#fff}.screen img{width:100%}.iphone--front{position:absolute;left:22px;top:96px;z-index:3;transform:rotate(-2deg)}.iphone--back{position:absolute;right:10px;top:70px;z-index:2;transform:rotate(7deg);opacity:.97}.how,.screenshots{position:relative;background:#fff;padding:96px 0}.narrow{max-width:980px}.section-head{text-align:center;margin-bottom:58px}.section-head h2{font-size:clamp(36px,4vw,56px);line-height:1.06}.section-head p:not(.tag){max-width:760px;margin:18px auto 0;color:#66748a;font-size:18px;line-height:1.65}.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:center}.step{min-height:250px;text-align:center;background:#fff8ef;border:1px solid rgba(0,0,0,.07);border-radius:28px;padding:34px 28px}.step-icon{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 18px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:22px;box-shadow:0 8px 24px rgba(0,0,0,.06);font-size:30px}.step-icon.mic{color:#e4372c}.step h3{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}.step p{margin:0;color:#66748a;line-height:1.6}.arrow{font-size:24px;font-weight:900;color:#e07820}.features{position:relative;overflow:hidden;background:#fff8ef;padding:98px 0 70px}.food-layer--recipes{right:-90px;top:190px;width:580px;height:580px;background-image:radial-gradient(circle,rgba(255,248,239,0) 0,rgba(255,248,239,.18) 60%,rgba(255,248,239,.92) 100%),url("food-recipes.png");opacity:.72}.food-layer--leftovers{left:-105px;top:850px;width:560px;height:560px;background-image:radial-gradient(circle,rgba(255,248,239,0) 0,rgba(255,248,239,.18) 60%,rgba(255,248,239,.92) 100%),url("food-leftovers.png");opacity:.70}.food-layer--planner{right:-100px;bottom:70px;width:570px;height:570px;background-image:radial-gradient(circle,rgba(255,248,239,0) 0,rgba(255,248,239,.16) 60%,rgba(255,248,239,.92) 100%),url("food-planner.png");opacity:.72}.features .wrap,.final-cta .wrap{position:relative;z-index:2}.feature{display:grid;grid-template-columns:360px minmax(0,1fr);gap:90px;align-items:center;margin-bottom:92px;position:relative;z-index:2}.feature--reverse{grid-template-columns:minmax(0,1fr) 360px}.phone-side{display:flex;justify-content:center}.phone-side .iphone{width:258px}.copy-side h3{font-size:clamp(32px,3.5vw,46px);line-height:1.08}.copy-side p{color:#66748a;font-size:18px;line-height:1.7;margin:20px 0}.copy-side ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.copy-side li{position:relative;padding-left:33px;font-weight:800}.copy-side li:before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e07820;color:#fff;font-size:13px}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;align-items:end}.gallery figure{margin:0;text-align:center}.iphone--small{width:180px;margin-inline:auto;padding:7px;border-radius:32px}.iphone--small:before{width:58px;height:17px;top:7px;border-radius:0 0 10px 10px}.iphone--small .screen{border-radius:24px}.gallery figcaption{margin-top:14px;font-weight:850;color:#66748a}.faq{background:#fff8ef;padding:96px 0}.faq-wrap{max-width:960px}.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq-list details{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.04);overflow:hidden}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:21px 22px;font-weight:850}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:#e07820;font-size:22px}.faq-list p{margin:0;padding:0 22px 21px;color:#66748a;line-height:1.6}.support{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}.support a{height:46px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);font-weight:850;color:#1479e8}.support a:nth-child(n+2){color:#17120e}.final-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,#e8801c,#d96f10);color:#fff;text-align:center;padding:78px 0}.food-layer--final{right:-90px;bottom:-125px;width:500px;height:500px;background-image:radial-gradient(circle,rgba(232,128,28,0) 0,rgba(232,128,28,.20) 58%,rgba(232,128,28,.92) 100%),url("food-final.png");opacity:.45}.final-cta h2{font-size:clamp(36px,4vw,56px);line-height:1.05}.final-cta p{font-size:18px;margin:16px auto 24px;opacity:.90}.footer{background:#17120e;color:rgba(255,255,255,.72);padding:28px 0}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer-brand{color:#fff}.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-weight:750}@media(max-width:1050px){.nav{height:auto;min-height:66px;padding:12px 0;flex-wrap:wrap}.nav-links{order:3;width:100%;margin-left:0;justify-content:center}.hero-grid{grid-template-columns:1fr;text-align:center}.hero-copy{display:flex;flex-direction:column;align-items:center}.hero-phones{width:min(520px,100%);margin:0 auto}.steps{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}.feature,.feature--reverse{grid-template-columns:1fr;text-align:center;gap:36px}.feature--reverse .copy-side{order:2}.feature--reverse .phone-side{order:1}.copy-side ul{max-width:560px;margin-inline:auto;text-align:left}.gallery{grid-template-columns:repeat(2,1fr)}.faq-list{grid-template-columns:1fr}}@media(max-width:640px){.wrap{width:min(100% - 28px,1200px)}.nav-actions{width:100%;justify-content:center}.store-badge--nav{display:none}.nav-links{gap:18px}.hero-grid{padding:58px 0 30px}.hero h1{font-size:46px}.hero-phones{min-height:455px}.iphone--front{width:215px;left:50%;margin-left:-126px;top:110px}.iphone--back{width:190px;right:50%;margin-right:-142px;top:98px}.food-layer--hero{opacity:.28}.food-layer--recipes,.food-layer--leftovers,.food-layer--planner,.food-layer--final{opacity:.13;width:420px;height:420px}.gallery{grid-template-columns:1fr}.footer-inner{justify-content:center;text-align:center}.footer-links{justify-content:center}}

/* =========================================================
   FOOD VISIBILITY FIX V2
   Bigger, clearer food imagery, especially in the hero.
   Keeps the same 6-page structure and same HTML.
   ========================================================= */

/* Hero: make food clearly visible, not hidden */
.food-layer--hero {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.98) 0%,
      rgba(255,248,239,.92) 34%,
      rgba(255,248,239,.54) 56%,
      rgba(255,248,239,.10) 82%,
      rgba(255,248,239,0) 100%),
    url("food-hero.png") !important;
  background-position: center right !important;
  background-size: cover !important;
  opacity: 1 !important;
}

/* Add visible food presence behind/around the phone area without covering phones */
.hero:before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 640px;
  height: 640px;
  background: url("food-final.png") center/cover no-repeat;
  opacity: .72;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 55% 55%, #000 0%, #000 55%, transparent 82%);
  mask-image: radial-gradient(circle at 55% 55%, #000 0%, #000 55%, transparent 82%);
}

.hero-copy,
.hero-phones {
  position: relative;
  z-index: 3;
}

/* Recipes: pasta must be readable and large */
.food-layer--recipes {
  right: -40px !important;
  top: 105px !important;
  width: 760px !important;
  height: 760px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,248,239,0) 0%, rgba(255,248,239,.03) 52%, rgba(255,248,239,.68) 83%, rgba(255,248,239,.95) 100%),
    url("food-recipes.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: .95 !important;
}

/* Leftovers: salmon/ingredients visible */
.food-layer--leftovers {
  left: -45px !important;
  top: 735px !important;
  width: 760px !important;
  height: 760px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,248,239,0) 0%, rgba(255,248,239,.04) 52%, rgba(255,248,239,.68) 83%, rgba(255,248,239,.95) 100%),
    url("food-leftovers.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: .92 !important;
}

/* Planner: grocery bag and ingredients visible */
.food-layer--planner {
  right: -50px !important;
  bottom: -20px !important;
  width: 780px !important;
  height: 780px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,248,239,0) 0%, rgba(255,248,239,.04) 55%, rgba(255,248,239,.68) 84%, rgba(255,248,239,.95) 100%),
    url("food-planner.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: .92 !important;
}

/* Give text a little protection only where food is strong */
.copy-side {
  position: relative;
  z-index: 4;
}

.copy-side:before {
  content: "";
  position: absolute;
  inset: -22px -28px;
  background: rgba(255,248,239,.72);
  border-radius: 28px;
  filter: blur(10px);
  z-index: -1;
}

/* Keep phones above food */
.phone-side,
.hero-phones,
.gallery {
  position: relative;
  z-index: 5;
}

/* CTA: visible food, no white bars */
.final-cta .food-layer--final,
.food-layer--final {
  right: -70px !important;
  bottom: -110px !important;
  width: 620px !important;
  height: 620px !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(232,128,28,0) 0%, rgba(232,128,28,.04) 55%, rgba(232,128,28,.45) 82%, rgba(232,128,28,.90) 100%),
    url("food-final.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .75 !important;
}

@media(max-width:1050px) {
  .hero:before {
    opacity: .28;
  }
  .food-layer--recipes,
  .food-layer--leftovers,
  .food-layer--planner {
    opacity: .28 !important;
  }
  .copy-side:before {
    background: rgba(255,248,239,.86);
  }
}

@media(max-width:640px) {
  .hero:before {
    display:none;
  }
  .food-layer--hero {
    opacity: .35 !important;
  }
}


/* =========================================================
   V3 CLEAN FIX — no pasted-photo rectangles, cleaner hero,
   centered pills/App Store, orange CTA clean.
   ========================================================= */

/* Hero title: keep “detta o scritta” after the comma when possible */
.hero h1 {
  max-width: 760px !important;
  font-size: clamp(46px, 4.9vw, 68px) !important;
  line-height: 1.02 !important;
}

/* Better alignment of hero pills and App Store badge */
.hero-copy {
  max-width: 760px;
}

.pills {
  justify-content: center !important;
  margin-left: 0 !important;
}

.store-badge--hero {
  display: flex !important;
  justify-content: center !important;
  width: min(650px, 100%) !important;
  margin-top: 24px !important;
}

.note {
  max-width: 650px !important;
}

/* Keep hero composition balanced on desktop */
.hero-grid {
  grid-template-columns: minmax(0, 1fr) 520px !important;
}

/* Base for photo layers: real food must blend, never appear as rectangular blocks */
.food-layer {
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

/* Hero food: full-section background, blended under the cream, no hard vertical rectangle */
.food-layer--hero {
  inset: 0 !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.99) 0%,
      rgba(255,248,239,.94) 36%,
      rgba(255,248,239,.68) 58%,
      rgba(255,248,239,.28) 78%,
      rgba(255,248,239,.06) 100%),
    url("food-hero.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Remove extra hero pseudo food if previous version added it */
.hero:before {
  display: none !important;
}

/* Recipes food: large and visible, but feathered at every edge */
.food-layer--recipes {
  right: -90px !important;
  top: 115px !important;
  width: 790px !important;
  height: 790px !important;
  background-image: url("food-recipes.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .80 !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 60% 50%, #000 0%, #000 46%, rgba(0,0,0,.72) 58%, transparent 78%) !important;
  mask-image:
    radial-gradient(ellipse at 60% 50%, #000 0%, #000 46%, rgba(0,0,0,.72) 58%, transparent 78%) !important;
}

/* Leftovers food: visible but not boxed */
.food-layer--leftovers {
  left: -95px !important;
  top: 720px !important;
  width: 780px !important;
  height: 780px !important;
  background-image: url("food-leftovers.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .76 !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 42% 52%, #000 0%, #000 46%, rgba(0,0,0,.72) 58%, transparent 78%) !important;
  mask-image:
    radial-gradient(ellipse at 42% 52%, #000 0%, #000 46%, rgba(0,0,0,.72) 58%, transparent 78%) !important;
}

/* Planner food: visible but softly merged */
.food-layer--planner {
  right: -115px !important;
  bottom: -20px !important;
  width: 800px !important;
  height: 800px !important;
  background-image: url("food-planner.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .78 !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 60% 58%, #000 0%, #000 45%, rgba(0,0,0,.70) 58%, transparent 79%) !important;
  mask-image:
    radial-gradient(ellipse at 60% 58%, #000 0%, #000 45%, rgba(0,0,0,.70) 58%, transparent 79%) !important;
}

/* Remove the visible “panel” effect behind copy that created vertical blocks */
.copy-side:before {
  display: none !important;
}

/* Create readability with subtle text shadow only, not boxes */
.copy-side,
.hero-copy {
  text-shadow: 0 1px 0 rgba(255,248,239,.55);
}

/* Keep text and phones above photo layers */
.hero-copy,
.hero-phones,
.copy-side,
.phone-side,
.section-head,
.gallery,
.faq-wrap {
  position: relative;
  z-index: 5 !important;
}

/* Screenshots section: add more breathing room so titles do not get cut by viewport edges */
.screenshots {
  padding-top: 118px !important;
}

/* CTA: user requested clean orange, no pasted side photo */
.final-cta {
  background: linear-gradient(180deg, #e8801c 0%, #d96f10 100%) !important;
}

.final-cta .food-layer,
.food-layer--final,
.final-cta:before,
.final-cta:after {
  display: none !important;
}

/* Slightly improve nav badge alignment */
.store-badge--nav img {
  height: 40px !important;
}

/* Mobile/tablet: reduce photo strength to keep legibility */
@media (max-width: 1050px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero h1 {
    max-width: 900px !important;
  }

  .food-layer--recipes,
  .food-layer--leftovers,
  .food-layer--planner {
    opacity: .26 !important;
    width: 620px !important;
    height: 620px !important;
  }

  .food-layer--hero {
    opacity: .72 !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 42px !important;
  }

  .food-layer--hero {
    opacity: .32 !important;
  }

  .food-layer--recipes,
  .food-layer--leftovers,
  .food-layer--planner {
    opacity: .12 !important;
  }
}

/* =========================================================
   SOFT EDGE FADE FIX
   The recipe and planner food photos must melt into the beige
   page background with no hard vertical cut.
   Everything else stays unchanged.
   ========================================================= */

.food-layer--recipes {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,1) 0%,
      rgba(255,248,239,.98) 10%,
      rgba(255,248,239,.92) 18%,
      rgba(255,248,239,.74) 28%,
      rgba(255,248,239,.46) 40%,
      rgba(255,248,239,.18) 54%,
      rgba(255,248,239,0) 68%),
    radial-gradient(ellipse at 70% 50%,
      rgba(255,248,239,0) 0%,
      rgba(255,248,239,0) 42%,
      rgba(255,248,239,.12) 62%,
      rgba(255,248,239,.46) 78%,
      rgba(255,248,239,.88) 100%),
    url("food-recipes.png") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: left top, left top, center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.food-layer--planner {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,1) 0%,
      rgba(255,248,239,.98) 10%,
      rgba(255,248,239,.92) 18%,
      rgba(255,248,239,.74) 28%,
      rgba(255,248,239,.46) 40%,
      rgba(255,248,239,.18) 54%,
      rgba(255,248,239,0) 68%),
    radial-gradient(ellipse at 70% 58%,
      rgba(255,248,239,0) 0%,
      rgba(255,248,239,0) 42%,
      rgba(255,248,239,.12) 62%,
      rgba(255,248,239,.46) 78%,
      rgba(255,248,239,.88) 100%),
    url("food-planner.png") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: left top, left top, center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* =========================================================
   REFINEMENT V2
   - soften the horizontal hero cut so the iPhone bottom fades out
   - keep recipe/planner food softer at the edge but more visible
   ========================================================= */

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,248,239,0) 0%,
    rgba(255,248,239,.18) 22%,
    rgba(255,249,241,.48) 48%,
    rgba(255,252,247,.82) 74%,
    rgba(255,255,255,1) 100%
  );
  z-index: 4;
}

.food-layer--recipes {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.98) 0%,
      rgba(255,248,239,.92) 7%,
      rgba(255,248,239,.74) 14%,
      rgba(255,248,239,.46) 24%,
      rgba(255,248,239,.20) 36%,
      rgba(255,248,239,0) 50%),
    radial-gradient(ellipse at 72% 50%,
      rgba(255,248,239,0) 0%,
      rgba(255,248,239,0) 48%,
      rgba(255,248,239,.10) 66%,
      rgba(255,248,239,.32) 82%,
      rgba(255,248,239,.72) 100%),
    url("food-recipes.png") !important;
  opacity: .90 !important;
}

.food-layer--planner {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.98) 0%,
      rgba(255,248,239,.92) 7%,
      rgba(255,248,239,.74) 14%,
      rgba(255,248,239,.46) 24%,
      rgba(255,248,239,.20) 36%,
      rgba(255,248,239,0) 50%),
    radial-gradient(ellipse at 72% 58%,
      rgba(255,248,239,0) 0%,
      rgba(255,248,239,0) 48%,
      rgba(255,248,239,.10) 66%,
      rgba(255,248,239,.32) 82%,
      rgba(255,248,239,.72) 100%),
    url("food-planner.png") !important;
  opacity: .90 !important;
}

@media (max-width: 1050px) {
  .hero::after {
    height: 110px;
  }
}

@media (max-width: 640px) {
  .hero::after {
    height: 80px;
  }
}

/* =========================================================
   HERO FADE POSITION FIX
   Keep the iPhone fully visible; start the fade underneath it.
   ========================================================= */

.hero::after {
  height: 120px !important;
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 42%,
    rgba(255,255,255,.32) 68%,
    rgba(255,255,255,.72) 86%,
    rgba(255,255,255,1) 100%
  ) !important;
}

.hero-grid,
.hero-copy,
.hero-phones {
  position: relative;
  z-index: 6 !important;
}

@media (max-width: 1050px) {
  .hero::after {
    height: 96px !important;
  }
}

@media (max-width: 640px) {
  .hero::after {
    height: 72px !important;
  }
}

/* =========================================================
   HERO HEIGHT FIX
   The hero section was still too short and clipped the iPhone.
   Keep the phone fully visible, then fade below it.
   ========================================================= */

.hero {
  min-height: 900px !important;
}

.hero-grid {
  min-height: 900px !important;
  padding-bottom: 140px !important;
}

.hero-phones {
  min-height: 680px !important;
}

.hero::after {
  height: 110px !important;
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 40%,
    rgba(255,255,255,.26) 66%,
    rgba(255,255,255,.66) 84%,
    rgba(255,255,255,1) 100%
  ) !important;
}

.hero-grid,
.hero-copy,
.hero-phones {
  position: relative;
  z-index: 6 !important;
}

@media (max-width: 1050px) {
  .hero {
    min-height: auto !important;
  }

  .hero-grid {
    min-height: auto !important;
    padding-bottom: 90px !important;
  }

  .hero-phones {
    min-height: 520px !important;
  }

  .hero::after {
    height: 90px !important;
  }
}

@media (max-width: 640px) {
  .hero-grid {
    padding-bottom: 70px !important;
  }

  .hero-phones {
    min-height: 470px !important;
  }

  .hero::after {
    height: 70px !important;
  }
}

/* =========================================================
   MICROPHONE + HERO FOOD POLISH
   - replace the two generic mic symbols with the red recording mic
   - reveal more food in the hero background while keeping the layout identical
   ========================================================= */

.pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mic-icon {
  display: inline-block;
  flex: 0 0 auto;
}

.mic-icon--pill {
  width: 18px;
  height: 18px;
}

.step-icon.mic {
  font-size: 0 !important;
  color: inherit !important;
}

.mic-icon--step {
  width: 34px;
  height: 34px;
}

.food-layer--hero {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.98) 0%,
      rgba(255,248,239,.92) 24%,
      rgba(255,248,239,.72) 40%,
      rgba(255,248,239,.42) 56%,
      rgba(255,248,239,.15) 72%,
      rgba(255,248,239,0) 100%),
    url("food-hero.png") !important;
  background-position: center right !important;
  background-size: cover !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .mic-icon--pill {
    width: 16px;
    height: 16px;
  }

  .mic-icon--step {
    width: 30px;
    height: 30px;
  }
}

/* =========================================================
   MICROPHONE STYLE UPDATE + STRONGER HERO FOOD
   Match the user's preferred circular recording mic and show more food.
   ========================================================= */

.mic-icon--pill {
  width: 22px !important;
  height: 22px !important;
}

.mic-icon--step {
  width: 44px !important;
  height: 44px !important;
}

.food-layer--hero {
  background-image:
    linear-gradient(90deg,
      rgba(255,248,239,.96) 0%,
      rgba(255,248,239,.84) 18%,
      rgba(255,248,239,.58) 34%,
      rgba(255,248,239,.28) 50%,
      rgba(255,248,239,.10) 66%,
      rgba(255,248,239,0) 100%),
    url("food-hero.png") !important;
  background-position: center right !important;
  background-size: cover !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .mic-icon--pill {
    width: 20px !important;
    height: 20px !important;
  }

  .mic-icon--step {
    width: 40px !important;
    height: 40px !important;
  }
}