@media (max-width: 1200px) {

     /* 0. Global */
     .container {
         padding: 0 var(--space-lg);
     }

     /* 7. Craving */
     .craving {
         padding-top: 120px;
     }

     /* .newcomers .owl-carousel .owl-nav button {
         background-color: #fff;
         border-radius: 50%;
         padding: 9px !important;
         border: 1px solid #00000030;
     }

     .newcomers .owl-carousel .owl-nav button.owl-prev {
         left: -22px;
     }

     .newcomers .owl-carousel .owl-nav button.owl-next {
         right: -22px;
     } */
      .sec__title,.become-cook__header h2, .cooks-header h2,.faq-left h2,.become-cook__header h2, .hiw-header h2,.craving-copy h2, .testimonials-header h2{
        font-size: 36px;
      }
      .newcomers__card-title, .become-cook__subtitle, .trust-badge-heading, .craving-copy p,.craving-card h4, .feature-item{
        font-size: 20px;
      }
      .faq__cat, .faq__q-text,.cook-card-name{
        font-size: 20px;
      }
      .hero-content h1{
        font-size: 64px;
      }
      
 }

 /* ========================================================================== 992px — tablet landscape ========================================================================== */
 @media (max-width: 992px) {

     /* 1. Navigation */
     .navbar .nav-links {
         gap: var(--space-sm);
     }

     /* 2. Hero */
     .hero-content h1 {
         font-size: 56px;
     }

     /* 3. Trust bar */
     .trust-bar-icon {
         width: 48px;
         height: 48px;
         padding: 9px;
     }

     .trust-bar-carousel .item p strong,
     .trust-bar-carousel .item p span {
         font-size: 16px;
     }

     .cook-card-name {
         font-size: 16px;
     }

     .cook-card-meta {
         font-size: 14px;
     }

     .cooks-header h2 {
         font-size: 38px;
     }

     /* 5. Trust badges */
     .trust-badges-grid {
         gap: var(--space-md);
     }

     .trust-badge-heading {
         font-size: 20px;
     }

     .trust-badge-icon {
         width: 48px;
         height: 48px;
     }

     .trust-badge-heading {
         font-size: 18px;
     }

     .trust-badge-text {
         font-size: 15px;
     }

     .check-list li {
         font-size: 14px;
     }

     /* 6. How it works */
     .hiw-header h2 {
         font-size: 38px;
     }

     /* 7. Craving */
     .craving-top {
         gap: var(--space-sm);
     }

     .craving-copy h2 {
         font-size: 36px;
     }

     .craving-copy p {
         font-size: 18px;
     }

     .craving-feature img {
         min-width: 220px;
         height: 200px;
         bottom: 16px;
     }

     /* 8. CTA banner */
     .cta-frame {
         height: 410px;
     }

     .cta-card {
         width: 420px;
         padding: var(--space-md);
     }

     .cta-card h2 {
         font-size: 30px;
     }

     .card-icon {
         width: 72px;
         height: 72px;

         padding: 16px;
     }

     .craving-card h4 {
         font-size: 20px;
     }

     .card-price {
         font-size: 16px;
     }

     .card-desc {
         font-size: 14px;
     }

     /* 9. FAQ */
     .faq-section {
         padding-top: 140px;
         padding-bottom: 70px;
     }

     .faq-left h2 {
         font-size: 38px;
     }

     .faq-q {
         font-size: 20px;
     }

     /* 10. Become a cook */
     .become-cook__header h2 {
         font-size: 38px;
     }

     .become-cook__subtitle {
         font-size: 18px;
     }

     /* 11. Footer */
     .footer-link-groups {
         gap: var(--space-xl);
     }

     .how-it-works .spin-bowl {
         width: 490px;
         height: 490px;
         top: -98px;
     }

     .modal-title.fs-5 {
         font-size: 24px !important;
     }

     .modal-body>p {
         font-size: 16px;
     }

     .phone-wrap {
         height: auto;
     }

     .faq__grid {
         grid-template-columns: 1fr;
     }

     .faq__sidebar {
         flex-direction: row;
         flex-wrap: wrap;
         gap: 4px 20px;
         margin-bottom: 8px;
     }

     .faq__title {
         font-size: 28px;
     }
     .sec__title, .become-cook__header h2, .cooks-header h2, .faq-left h2, .become-cook__header h2, .hiw-header h2, .craving-copy h2, .testimonials-header h2{
        font-size: 32px;
     }
     .newcomers__card-title,.faq__tab,.waitlist-card__title, .become-cook__subtitle, .trust-badge-heading, .craving-copy p,.faq__cat, .faq__q-text,.cook-card-name, .craving-card h4, .feature-item{
        font-size: 18px;
     }
 }

 /* ========================================================================== 900px — step / craving / form grid collapse points (kept separate since the source CSS uses 900px, not 992px, for these) ========================================================================== */
 @media (max-width: 900px) {

     /* 6. How it works */


     .pill-line {
         gap: var(--space-sm);
     }

     .pill-item {
         white-space: normal;
     }

     /* 7. Craving */

     .craving-feature img {
         position: absolute;
         width: 100%;
         max-width: 220px;
         height: auto;
         aspect-ratio: 1.3 / 1;

     }

     /* 10. Become a cook */
     .become-cook__panel {
         grid-template-columns: 1fr;
         gap: var(--space-lg);
     }

     .become-cook__media img {
         aspect-ratio: 16 / 10;
     }

     .become-cook__deco {
         right: 12px;
         top: -20px;
         width: 70px;
     }

     .feature-item {
         font-size: 20px;
     }
 }

 /* ========================================================================== 860px — FAQ grid collapse point (source CSS specific breakpoint) ========================================================================== */
 @media (max-width: 860px) {
     .faq-grid {
         grid-template-columns: 1fr;
         gap: var(--space-md);
     }

     .chili-deco {
         display: none;
     }

     .phone-wrap {
         max-width: 320px;
         margin: 0 auto;
         height: auto;
     }
 }

 /* ========================================================================== 780px — CTA banner collapse point (source CSS specific breakpoint) ========================================================================== */
 @media (max-width: 780px) {
     .cta-frame {
         aspect-ratio: auto;
         flex-wrap: wrap;
     }

     .cta-card {
         position: static;
         width: 100%;
         margin-top: -40px;
         z-index: 2;
         padding: var(--space-md);
         border-radius: 0;
     }

     .cta-card p {
         max-width: none;
     }

     .cta-badges {
         flex-wrap: wrap;
     }

     .store-badge {
         width: auto;
         flex: 1 1 140px;
     }

     .how-it-works .spin-bowl {
         display: none;
     }

     .how-it-works {
         padding-top: 80px;
     }
 }

 /* ========================================================================== 768px — tablet portrait ========================================================================== */
 @media (max-width: 768px) {
     .steps-grid {
         grid-template-columns: 1fr;
         gap: var(--space-sm);
     }

     .testimonials .become-cook__deco {
         top: -10% !important;
     }

     /* 0. Global */
     .container {
         padding: 0 var(--space-md);
     }

     section,
     .cooks,
     .how-it-works,
     .faq-section,
     .become-cook {
         padding-top: var(--space-xl);
         padding-bottom: var(--space-xl);
     }

     .btn {
         font-size: 18px;
         padding: 10px 22px;
     }

     /* 1. Navigation */
     .navbar {
         padding: var(--space-sm) 0;
     }

     .navbar .nav-links {
         display: none;
     }

     .navbar .nav-toggle {
         display: inline-flex;
     }

     .navbar.is-open .nav-links {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: var(--color-white);
         padding: var(--space-md);
         gap: var(--space-sm);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     }

     .navbar .nav-actions {
         gap: var(--space-xs);
     }

     .navbar .nav-actions .btn {
         width: auto;
         font-size: 14px;
         padding: 8px 16px;
     }

     .feature-item {
         font-size: 18px;
     }

     /* 2. Hero */
     .hero {
         min-height: 80vh;
         padding-bottom: var(--space-lg);
     }

     .hero-content {
         padding: 0 var(--space-md);
     }

     .hero-content h1 {
         font-size: 34px;
         margin-bottom: var(--space-sm);
     }

     .hero-content p {
         font-size: 15px;
         margin-bottom: var(--space-sm);
     }

     .store-badges .badge {
         padding: 6px 16px;
     }

     .store-badges .badge span strong {
         font-size: 14px;
     }

     .store-badges .badge span small {
         font-size: 10px;
     }

     /* 3. Trust bar */
     .trust-bar {
         padding: 8px 0;
     }

     .trust-bar-carousel .item {
         gap: var(--space-xs);
         padding: 16px 0;
     }

     .trust-bar-icon {
         width: 56px;
         height: 56px;
         padding: 12px;
         font-size: 16px;
     }

     .trust-bar-carousel .item p strong,
     .trust-bar-carousel .item p span {
         font-size: 15px;
     }

     /* 4. Cooks */
     .cooks-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     /* 4. Cooks */
     .cooks-header {
         flex-direction: column;
         align-items: flex-start;
         gap: var(--space-sm);
     }

     .cooks-header h2 {
         font-size: 30px;
     }

     .cook-card-name {
         font-size: 18px;
     }

     .cook-card-meta,
     .cook-card-tags {
         font-size: 15px;
     }

     .diet-tags {
         gap: var(--space-xs);
     }

     .diet-tag {
         font-size: 12px;
         padding: 6px 12px;
     }

     /* 5. Trust badges */
     .trust-badges-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: var(--space-lg) var(--space-md);
     }




     /* 6. How it works */
     .hiw-header {
         margin-bottom: var(--space-lg);
     }

     .hiw-header h2 {
         font-size: 30px;
     }

     .step-head h3 {
         font-size: 17px;
     }

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

     .check-list li {
         font-size: 15px;
     }

     .notif-card {
         max-width: 150px;
         padding: 6px 10px;
     }

     /* 7. Craving */
     .craving-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: var(--space-sm);
     }

     .craving-copy h2 {
         font-size: 28px;
     }

     .card-icon {
         width: 72px;
         height: 72px;
         padding: 18px 16px;
         margin: var(--space-sm) auto 24px;
     }

     .craving-card h4 {
         font-size: 19px;
     }

     .card-price {
         font-size: 16px;
     }

     /* 9. FAQ */
     .faq-section {
         padding-top: 80px;
     }

     .faq-left h2 {
         font-size: 30px;
         margin-bottom: var(--space-md);
     }

     .faq-answer p {
         font-size: 16px;
     }

     .see-all,
     .learn-more {
         font-size: 18px;
     }

     /* 10. Become a cook */
     .become-cook__form-wrap h3 {
         font-size: 20px;
     }

     .become-cook__form-intro {
         font-size: 16px;
         margin-bottom: var(--space-lg);
     }


     .footer-link-col h4,
     .footer-brand a.email {
         font-size: 16px;
     }

     .footer-link-col a {
         font-size: 14px;
     }

     .footer-link-col li {
         margin-bottom: 0;
     }

     .footer-columns {
         gap: var(--space-sm);
     }

     .footer-bottom-row span,
     .footer-bottom-row a {
         font-size: 14px;
     }

     .cooks-header .cooks-link {
         font-size: 16px;
     }

     .hero {
         padding-top: 60px !important;
         margin-top: -60px !important;
     }

     .site-header .container {
         height: auto !important;
         padding-top: 10px !important;
         padding-bottom: 10px !important;
     }

     .site-header .logo img {
         width: 110px !important;
     }

     .form-row {
         grid-template-columns: 1fr;
     }

     .craving-feature img {
         right: 0;
         bottom: 140px;
     }

     .craving-feature {
         position: static;
     }
     .newcomers{
            padding: 48px 10px 64px;
     }
     .newcomers .owl-carousel .owl-nav button.owl-prev{
        left: -30px;
     }
      .newcomers .owl-carousel .owl-nav button.owl-next{
        right: -30px;
     }
     .sec__title, .become-cook__header h2, .cooks-header h2, .faq-left h2, .become-cook__header h2, .hiw-header h2, .craving-copy h2, .testimonials-header h2{
        font-size: 24px;
     }
     .newcomers__card-title,.waitlist-card__title, .faq__tab,.become-cook__subtitle, .trust-badge-heading, .craving-copy p, .faq__cat, .faq__q-text, .cook-card-name, .craving-card h4, .feature-item{
        font-size: 14px;
     }
     .sec-heading{
        margin-bottom: 30px;
     }
     .faq__cat{
           padding: 10px 0;
     }
     .faq__q{
        padding: 15px 0;
     }
     .waitlist-card{
        padding: 20px;
     }
 }

 /* ========================================================================== 700px — craving grid horizontal-scroll point (source CSS specific) ========================================================================== */
 @media (max-width: 700px) {
     .craving-grid {
         grid-template-columns: repeat(1, minmax(150px, 1fr));

     }

     .craving-card {
         min-width: 150px;
     }
 }

 @media (max-width: 600px) {
     .newcomers__title {
         font-size: 26px;
     }

     .newcomers__nav-btn {
         right: 4px;
     }
 }

 /* ========================================================================== 576px — large mobile ========================================================================== */
 @media (max-width: 576px) {

     /* 4. Cooks */
     .cooks-grid {
         grid-template-columns: 1fr;
     }

 }

 /* ========================================================================== 560px — become-a-cook form collapse point (source CSS specific) ========================================================================== */
 @media (max-width: 560px) {
     .become-cook {
         padding: var(--space-sm) 0;
     }

     .site-footer__top {
         padding: var(--space-sm) 0 var(--space-xl);
     }

     .become-cook__header h2 {
         font-size: 26px;
     }

     .cook-form .form-row {
         grid-template-columns: 1fr;
         gap: var(--space-sm);
     }

     .btn-apply {
         width: 100%;
         justify-content: center;
     }
 }

 /* ========================================================================== 480px — small mobile ========================================================================== */
 @media (max-width: 480px) {

     /* 0. Global */
     .container {
         padding: 0 var(--space-sm);
     }

     .btn {
         font-size: 16px;
         padding: 10px 18px;
         width: 100%;
     }

     /* 1. Navigation */
     .navbar .logo-badge {
         width: 36px;
         height: 36px;
     }

     .navbar .nav-actions .btn-outline {
         display: none;
         /* keep only the primary CTA visible on very small screens */
     }

     /* 2. Hero */
     .hero {
         min-height: 90vh;
         padding-top: 100px;
     }

     .hero-content h1 {
         font-size: 28px;
     }

     .store-badges {
         align-items: flex-start;
         gap: var(--space-xs);
     }

     .store-badges .badge {
         width: 100%;
     }

     /* 3. Trust bar */
     .trust-bar-carousel .item {
         flex-direction: column;
         align-items: flex-start;
         gap: 6px;
     }

     .trust-bar-icon {
         width: 48px;
         height: 48px;
     }

     /* 4. Cooks */
     .cooks-header h2 {
         font-size: 24px;
     }

     .diet-tags {
         justify-content: flex-start;
     }

     /* 5. Trust badges */
     .trust-badges-grid {
         grid-template-columns: 1fr;
     }

     .trust-badge {
         padding: 12px 0;
     }

     /* 6. How it works */
     .hiw-header h2 {
         font-size: 26px;
     }

     .how-it-works {
         padding: var(--space-xl) 0;
     }

     .notif-card.top {
         top: -10px;
         right: 8px;
     }

     .notif-card.bottom {
         bottom: -10px;
         right: -4px;
     }

     .pill-line {
         align-items: flex-start;
         gap: var(--space-sm);
     }

     /* 7. Craving */
     .craving-copy h2 {
         font-size: 24px;
     }

     .craving-copy {
         flex: 1;
     }

     .craving-top {
         flex-direction: column;
         gap: var(--space-sm);
         align-items: flex-start;
     }

     .craving-feature {
         align-items: flex-start;
         width: 100%;
         position: relative;
         height: auto;
     }

     .craving-feature img {
         position: absolute;
         width: 100%;
         max-width: 220px;
         height: auto;
         aspect-ratio: 1.3 / 1;
         right: 0;
         bottom: 158px;
     }

     .cta-card h2 {
         font-size: 24px;
     }

     .cta-card p {
         font-size: 13px;
     }

     .cta-banner {
         padding: var(--space-xl) 0;
     }

     .cta-badges {
         flex-direction: column;
     }

     .store-badge {
         flex: 1 1 auto;
         width: 100%;
     }

     /* 9. FAQ */
     .faq-left h2 {
         font-size: 27px;
     }

     .faq-q {
         font-size: 16px;
     }

     .faq-section {
         padding: var(--space-md) 0;
     }

     .phone-wrap {
         height: auto;
     }

     .phone-content {
         font-size: 14px;
     }

     /* 11. Footer */
     .follow-us {
         font-size: 18px;
     }

     .social-row a {
         width: 40px;
         height: 40px;
     }

     .footer-link-groups {
         flex-direction: column;
         gap: var(--space-md);
     }

     .footer-brand__logo img {
         width: 120px;
     }

     .footer-bottom-row .legal {
         display: flex;
         flex-wrap: wrap;
         gap: 4px 8px;
     }

     .footer-bottom-row .legal a {
         padding-left: 0;
         border-left: none;
     }

     .modal-title.fs-5 {
         font-size: 20px !important;
     }

     .modal-body>p {
         font-size: 14px;
     }

     .become-cook__form-intro {
         max-width: 100%;
     }

 }

 /* ========================================================================== 420px — footer link column gap tweak (source CSS specific) ========================================================================== */
 @media (max-width: 420px) {
     .footer-link-groups {
         gap: var(--space-md) var(--space-lg);
     }

     .craving-feature img {
         bottom: 180px;
     }
 }

 /* ========================================================================== 375px — extra-small mobile safety net ========================================================================== */
 @media (max-width: 375px) {
     .hero-content h1 {
         font-size: 24px;
     }

     .cta-card h2 {
         font-size: 20px;
     }

     .become-cook__header h2,
     .faq-left h2,
     .hiw-header h2 {
         font-size: 22px;
     }
 }