/* Shared mobile body typography; headings, UI labels and legal notes keep their hierarchy. */
@media (max-width:700px){
  :root{--mobile-body-size:17px;--mobile-body-color:#fff}
  .header .brand img{width:140px}
  .hero-copy h1,
  .plan-copy h2,
  .features-heading h2,
  .stories-heading h2{
    font-size:46px;
    line-height:1.08;
    letter-spacing:-.025em;
  }
  .plan-copy p,
  .plan-copy .plan-principle,
  .section-heading p,
  .feature li,
  .burger-copy>p:last-child,
  .recipes-heading p,
  .stories-heading p,
  .story-period,
  .story-summary,
  .download>p{
    font-size:var(--mobile-body-size);
    line-height:1.6;
    color:var(--mobile-body-color);
  }
  .hero-copy>p{display:none}
  .hero-copy>p.hero-description-mobile{display:block;font-size:17px;line-height:1.6;color:#fff;max-width:340px;margin:16px auto 0}
  .hero-copy{z-index:2}
  .hero-copy .button{bottom:auto;top:calc(100svh - 164px);font-size:20px;padding:19px 32.5px;min-height:62.5px}
  .header>.language{display:none}
  .footer-language{display:flex;align-self:center;justify-self:center;margin:18px auto 0}
  .features-heading h2{font-size:32.2px;color:#b38bff}
  .feature li{color:#b8aac4}
  .feature li::before{display:none}
  .hero-copy .text-link,
  .hero>.slogan{display:none}
  /* Reserve separate space for the heading, phone and download action. */
  /* Include the full tilted device while keeping the following section's spacing. */
  .hero{height:max(100svh,calc(clamp(310px,40svh,350px) + clamp(218.21px,31.625svh,275px)*2.1641 + 8px));min-height:568px}
  .hero .phone{top:clamp(310px,40svh,350px);bottom:auto;width:clamp(218.21px,31.625svh,275px);right:calc(50% - clamp(109.105px,15.8125svh,137.5px))}
  .story-controls{margin:0 auto 18px}
  .story-controls h3{margin:0}
  .story-photo-sarka{object-position:96% center}
  .story-photo-jan{object-position:97% center}
  .burger-stage{height:auto;min-height:0;display:flex;flex-direction:column;padding:50px 22px 32px;gap:0}
  .burger-art{position:relative;left:auto;top:auto;flex:none;width:100%;height:480px;margin-top:18px;--piece:clamp(215px,68vw,300px);--table-contact:88%;overflow:hidden}
  .burger-caption{position:static;width:100%;margin-top:14px}
  .plan-copy{position:relative;isolation:isolate}
  .plan-copy::before{content:"";position:absolute;inset:-30px -24px -28px;z-index:-1;pointer-events:none;background:linear-gradient(#100d13d9 0%,#100d13d9 82%,transparent 100%)}
  .plan-visual{overflow:visible}
  .plan-meal{width:calc(100% - 32px);left:16px;transform-origin:center}
  .hero-photo{object-position:center bottom}
  .hero::before{background-position:center bottom}
}