/* Final responsive layer: mobile is a first-class layout, not a scaled desktop. */
html { scroll-padding-top: 84px; }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }
.mobile-menu-toggle { display: none; }

/* Keep the full information architecture available on small screens without
   forcing every desktop navigation item into the header. */
@media (min-width: 1280px) {
  /* The German labels are longer; keep the full desktop IA inside the viewport. */
  html[dir="ltr"] header .primary-nav,
  html[dir="rtl"] header .primary-nav { gap: 14px; }
  html[dir="ltr"] header .primary-nav a,
  html[dir="rtl"] header .primary-nav a { font-size: 13px; }
}

html[dir="rtl"] .hero .hero-copy h1 em,
html[dir="rtl"] .hero .hero-copy h1 br:last-of-type { display: block !important; }

#intake .intake-step > h3.intake-subheading {
  display: block;
  margin: 30px 0 14px;
  padding-top: 22px;
  border-top: 1px solid #ffffff17;
  color: #dfbe72;
  font-size: 18px;
  line-height: 1.45;
}
#intake .intake-step > h3.intake-subheading:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 700px) {
  :root { --cl-scroll-offset: 84px; }
  html { scroll-padding-top: 84px; }
  body { font-size: 16px; line-height: 1.65; }
  main [id] { scroll-margin-top: 84px; }

  header {
    position: sticky !important;
    top: 0;
    z-index: 40;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    background: #080b0cf5 !important;
    border-bottom: 1px solid #ffffff1c !important;
    box-shadow: 0 8px 28px #0005;
  }
  header .brand { min-width: 0; flex: 1 1 auto; gap: 8px; font-size: 14px !important; }
  header .brand-icon { width: 36px; height: 36px; flex: 0 0 36px; font-size: 15px; }
  header .brand small { margin-top: 3px; font-size: 8px !important; letter-spacing: 1.5px; white-space: nowrap; }
  header .header-actions { display: flex !important; align-items: center; gap: 7px !important; margin: 0 !important; flex: 0 0 auto; }
  header .header-actions .header-cta { display: none !important; }
  header #language { width: auto; max-width: 84px; min-height: 42px; padding: 8px 9px; font-size: 13px; }

  .mobile-menu-toggle {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #8f774844;
    border-radius: 9px;
    background: #171c1b;
    color: #f0d494;
    font-size: 12px;
    line-height: 1;
  }
  .mobile-menu-icon { display: grid; gap: 4px; width: 17px; }
  .mobile-menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  header .primary-nav,
  html[dir="ltr"] header .primary-nav { display: none !important; }
  header .primary-nav.is-open,
  html[dir="ltr"] header .primary-nav.is-open {
    position: absolute !important;
    inset-inline: 12px;
    top: calc(100% + 8px);
    z-index: 45;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: auto;
    padding: 10px;
    border: 1px solid #d1ad5d55;
    border-radius: 14px;
    background: #111716f7;
    box-shadow: 0 18px 48px #000b;
    backdrop-filter: blur(18px);
  }
  header .primary-nav.is-open a,
  header .primary-nav.is-open a:nth-child(n) {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 10px 11px;
    border: 1px solid #ffffff14;
    border-radius: 9px;
    color: #f4f2e9;
    background: #ffffff06;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
  }
  header .primary-nav.is-open a:active,
  header .primary-nav.is-open a:focus-visible { border-color: #e4c57d; background: #d8b76a18; }

  .wrap { width: calc(100% - 32px) !important; max-width: none !important; }
  .hero.wrap {
    width: 100% !important;
    min-height: 0 !important;
    padding: 42px 16px 38px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    overflow: hidden;
  }
  .hero-coach-photo { height: 100% !important; object-position: 62% center !important; }
  .hero .hero-copy,
  html[dir="rtl"] .hero .hero-copy { width: 100% !important; grid-column: 1 !important; align-self: start; }
  .hero .hero-copy .eyebrow { max-width: 100%; margin-bottom: 20px; font-size: 10px; line-height: 1.8; letter-spacing: .13em; }
  .hero .hero-copy h1,
  html[dir="ltr"] .hero .hero-copy h1,
  html[lang="de"] .hero .hero-copy h1 {
    max-width: 100%;
    margin: 14px 0 20px;
    font-size: clamp(2.2rem, 11.5vw, 3.65rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }
  html[dir="rtl"] .hero .hero-copy h1 {
    font-family: Cairo, Arial, sans-serif !important;
    font-size: clamp(2.1rem, 12vw, 3.5rem) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    text-align: start;
  }
  .hero .hero-copy h1 br:last-of-type { display: block !important; }
  .hero .hero-copy h1 em { display: block !important; font-size: .86em; line-height: 1.18; }
  .hero .hero-copy > p { max-width: 40rem; margin-top: 0; font-size: 16px !important; line-height: 1.75; }
  .hero .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px !important; margin-top: 24px; }
  .hero .hero-actions > * { width: 100%; min-height: 52px; justify-content: center; }
  .hero .hero-primary { min-width: 0; padding: 14px 18px; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .hero-proof > div { min-width: 0; padding: 10px 4px; }
  .hero-proof strong { font-size: 19px !important; }
  .hero-proof span { font-size: 10px !important; line-height: 1.35; }
  .hero .phone-shell { display: none !important; }

  .feature-strip.wrap {
    width: calc(100% - 32px) !important;
    margin: 0 auto 24px !important;
    padding: 5px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  .feature-strip a { min-width: 0; min-height: 114px; padding: 15px 9px !important; gap: 8px !important; }
  .feature-strip a > span { width: 100%; min-width: 0; }
  .feature-strip strong { font-size: 12px !important; line-height: 1.35; overflow-wrap: anywhere; }
  .feature-strip small { font-size: 11px !important; line-height: 1.4; }
  .feature-strip a > i:not(.feature-arrow) .ui-icon { width: 23px; height: 23px; }

  .program-section { width: 100% !important; padding: 8px 16px 28px !important; }
  .program-section .section-head { display: block !important; margin-bottom: 20px; }
  .program-section .section-head h2 { font-size: 23px !important; line-height: 1.25; letter-spacing: .05em; }
  .program-section .section-head > p { max-width: none; margin-top: 12px; font-size: 15px; line-height: 1.7; }
  .goal-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 24px; }
  .goal-grid .goal,
  .goal-grid .goal:hover { min-height: 138px; padding: 17px 17px 17px 39% !important; }
  html[dir="rtl"] .goal-grid .goal { padding: 17px 39% 17px 17px !important; }
  .goal-photo { width: 35% !important; }
  .goal-grid .goal strong { font-size: 18px !important; line-height: 1.4; }
  .goal-grid .goal small { font-size: 13px !important; line-height: 1.55; }
  .pricing-comparison { grid-template-columns: 1fr !important; gap: 18px; padding: 18px 12px !important; border-radius: 14px; }
  .pricing-intro { display: none !important; }
  .pricing-comparison .plans { grid-template-columns: 1fr !important; gap: 16px; }
  .pricing-comparison .plans .plan { min-width: 0; padding: 22px 18px !important; }
  .pricing-comparison .plan-top { flex-direction: row; justify-content: space-between; gap: 10px; text-align: start; }
  .pricing-comparison .plan-top h3 { font-size: 20px; }
  .pricing-comparison .price { font-size: 43px !important; text-align: start; }
  .pricing-comparison .plans ul { min-height: 0; margin: 12px 0 18px; padding: 13px 0 !important; }
  .pricing-comparison .plans li { font-size: 14px !important; line-height: 1.55; margin: 7px 0; }
  .pricing-comparison .plans button { min-height: 52px; font-size: 15px; }
  .purchase-route { align-items: flex-start; margin-top: 16px !important; padding: 15px !important; gap: 10px; }
  .purchase-route .icon-tile { display: none; }
  .purchase-route p { font-size: 13px; line-height: 1.6; }

  .proof-section.wrap { width: calc(100% - 32px) !important; padding: 16px 0 28px; }
  .proof-section > h2 { font-size: 20px; line-height: 1.3; letter-spacing: .05em; }
  .results-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .centered-film.wrap { width: calc(100% - 32px) !important; margin: 18px auto 34px; }
  .centered-film > h2 { font-size: 25px; line-height: 1.25; margin-bottom: 16px; }
  .centered-film .hero-film { border-radius: 12px; }
  .centered-film .hero-film video { aspect-ratio: 16 / 9; }

  .starter-highlight { grid-template-columns: 1fr !important; gap: 26px; margin-bottom: 42px; }
  .starter-visual { height: 290px !important; transform: none; }
  .starter-content { min-width: 0; }
  .starter-content h2 { font-size: 33px !important; line-height: 1.25; }
  .starter-content > p { font-size: 16px; line-height: 1.75; }
  .starter-metrics { gap: 8px; margin: 22px 0; padding-block: 18px; }
  .starter-metrics strong { font-size: 27px; }
  .starter-metrics span { font-size: 11px; line-height: 1.4; }
  .starter-features { display: grid; gap: 9px; margin-bottom: 22px; font-size: 14px; }

  .instant-programs { padding-block: 28px 34px; }
  .instant-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .instant-card { padding: 20px; }
  .instant-card h3 { font-size: 24px; }
  .instant-card > p { min-height: 0; font-size: 15px; line-height: 1.65; }
  .instant-card ul { grid-template-columns: 1fr; margin: 18px 0 20px; padding: 15px 0; }

  .recipe-section.wrap { padding-block: 28px 18px; }
  .recipes-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .recipe-card { min-width: 0; }
  .recipe-image img { height: 190px; }
  .recipe-copy { padding: 12px 18px 18px; }
  .free-recipes { grid-template-columns: 1fr !important; gap: 18px; padding: 19px !important; margin-block: 30px; }
  .free-recipes img { max-height: 205px; }
  .free-recipes h2 { font-size: 28px; line-height: 1.25; }
  .free-recipes p { font-size: 15px; line-height: 1.75; }
  .free-recipes .button { width: 100%; min-height: 52px; }
  .recipe-languages { gap: 12px; }

  .smart-tools { padding-block: 30px 34px; }
  .smart-tools > .wrap > .section-head { display: block; margin-bottom: 20px; }
  .smart-tools .section-head h2 { font-size: 30px !important; line-height: 1.25; }
  .smart-tools .section-head > p { margin-top: 12px; font-size: 15px; line-height: 1.7; }
  .tools-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .tool-card { padding: 20px !important; border-radius: 16px; }
  .tool-title h3 { font-size: 24px; line-height: 1.3; }
  .tool-title p { font-size: 15px; line-height: 1.7; }
  .form-grid { grid-template-columns: 1fr !important; gap: 12px; margin: 20px 0 16px; }
  .form-grid .span-two { grid-column: auto !important; }
  .form-grid label { gap: 6px; font-size: 14px; }
  .form-grid input, .form-grid select { min-height: 52px; font-size: 16px; }
  .calculator-card form > .button { min-height: 54px; }
  .calorie-result { margin-top: 16px; padding: 18px; }
  .calorie-result > strong b { font-size: 39px; }
  .calorie-result > div { gap: 12px; align-items: baseline; }
  .calorie-result p { font-size: 13px; line-height: 1.65; }
  .calorie-next-step { margin-top: 16px; padding-top: 16px; border-top: 1px solid #806839; }
  .calorie-next-step strong { display: block; color: #f0dba6; font-size: 17px; line-height: 1.45; }
  .calorie-next-step p { margin: 5px 0 12px; font-size: 13px; line-height: 1.6; }
  .calorie-next-step .button { width: 100%; min-height: 50px; }
  .camera-drop { min-height: 150px; padding: 18px; }
  .scanner-card .scanner-status { margin-top: 12px; font-size: 13px; line-height: 1.6; }
  .scanner-card #analyze-food { display: block; min-height: 50px; margin-top: 12px; }
  .scanner-privacy { gap: 9px; margin-top: 14px; }
  .scanner-privacy p { font-size: 13px; line-height: 1.6; }

  .faq { grid-template-columns: 1fr !important; gap: 22px; padding-block: 38px; }
  .faq h2 { font-size: 32px !important; }
  .faq summary { font-size: 17px; line-height: 1.5; }
  .faq details p { font-size: 15px; line-height: 1.75; }
  .bottom-cta { margin-bottom: 28px; padding: 38px 16px 46px; }
  .bottom-cta h2 { font-size: 36px !important; line-height: 1.25; }
  footer { display: grid; gap: 14px; padding-block: 28px; }
  footer > div { flex-wrap: wrap; gap: 12px; }
  footer > small { text-align: start; line-height: 1.6; }

  #recovery-offer { left: 12px; right: 12px; bottom: 92px; max-width: none; padding: 18px; }
  #recovery-offer strong { font-size: 20px; line-height: 1.35; }
  #recovery-offer p { font-size: 13px; line-height: 1.6; }
  .whatsapp-contact { right: 13px; bottom: 14px; padding: 11px 13px; }
  .whatsapp-contact span { display: none; }
  .support-launcher { right: 13px !important; bottom: 76px !important; }
}

@media (max-width: 390px) {
  header { padding-inline: 10px !important; }
  header .brand { font-size: 13px !important; }
  header .brand small { font-size: 7px !important; }
  header #language { max-width: 70px; padding-inline: 6px; font-size: 12px; }
  .mobile-menu-toggle { padding-inline: 8px; }
  .mobile-menu-toggle > [data-menu-label] { display: none; }
  .hero.wrap { padding-inline: 14px !important; }
  .hero .hero-copy h1 { font-size: clamp(2rem, 11vw, 3rem) !important; }
  html[dir="rtl"] .hero .hero-copy h1 { font-size: clamp(1.95rem, 11.5vw, 3rem) !important; }
  .feature-strip a { min-height: 106px; padding-inline: 7px !important; }
  .feature-strip strong { font-size: 11px !important; }
  .feature-strip small { font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-icon i { transition: none; }
}