/* ==========================================================================
   Cookify — shared styles
   Desktop canvas is 1440px wide (exact match to the design artboards).
   Below 1440 the canvas is scaled (see js in each page); ≤1023 tablet and
   ≤767 mobile layouts are proposed restacks (the PDF has no mobile artboards).
   ========================================================================== */

@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Black.woff2') format('woff2');   font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'ArialWeb'; src: url('../fonts/Arial.woff2') format('woff2');        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ArialWeb'; src: url('../fonts/ArialBold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.woff2') format('woff2');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.woff2') format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('../fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('../fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('../fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* brand */
  --c-red:        #e41b22;   /* fills, buttons */
  --c-red-text:   #e51b23;   /* red headings */
  --c-red-dark:   #8f0b13;   /* footer */
  --c-red-btn-tx: #c4151c;   /* text on white button in red section */
  --c-grad-a:     #e41a22;   /* gradient start (top-left) */
  --c-grad-b:     #b80f17;   /* gradient end (bottom-right) */
  --c-pink:       #fff7f7;   /* soft boxes */
  --c-pink-2:     #fff4f4;   /* soft section bands */
  --c-white:      #ffffff;
  /* text */
  --t-111: #111111; --t-171: #171717; --t-222: #222222; --t-333: #333333;
  --t-444: #444444; --t-4a:  #4a4a4a; --t-555: #555555; --t-000: #000000;
  /* type */
  --f-head: 'Gilroy', 'Arial', sans-serif;
  --f-body: 'ArialWeb', 'Arial', 'Helvetica Neue', sans-serif;
  /* layout */
  --canvas: 1440px;
  --gutter: 70px;
  --r-box: 30px;     /* soft boxes */
  --r-card: 20px;    /* white cards */
  --r-btn: 16px;     /* primary buttons */
  --shadow-card: 0 3px 12px rgba(0,0,0,.09);
  --grad-red: linear-gradient(to bottom right, var(--c-grad-a), var(--c-grad-b));
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--c-white); color: var(--t-111); font-family: var(--f-body); line-height: 1.2; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

/* ---------- canvas ---------- */
.site-canvas { position: relative; width: var(--canvas); margin: 0 auto; overflow: clip; background: var(--c-white); }
.container { position: relative; width: 100%; padding: 0 var(--gutter); }

/* ---------- type helpers ---------- */
.h-head { font-family: var(--f-head); font-weight: 900; color: var(--c-red-text); line-height: 1.2; }
/* Chrome positions Gilroy-Black with its win metrics (ascent 1.006) instead of hhea (0.773): nudge black text up 0.102em so baselines match the design */
.h-head, .gb { position: relative; top: -0.102em; }
.h-arial { font-family: var(--f-body); font-weight: 700; line-height: 1.2; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 28px; border-radius: var(--r-btn);
       font-family: var(--f-body); font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; }
.btn--primary { background: var(--c-red); color: var(--c-white); }
.btn--outline { background: var(--c-white); color: var(--c-red-text); border: 2px solid var(--c-red); }
.btn--white   { background: var(--c-white); color: var(--c-red-btn-tx); font-family: var(--f-head); font-size: 18.3px; }

/* ---------- header ---------- */
.site-header { position: relative; height: 126px; background: var(--c-white); }
.site-header .logo { position: absolute; left: 79.6px; top: 43px; width: 218px; height: 62px; }
.site-header .logo svg, .site-header .logo img { width: 100%; height: 100%; }
.site-nav { position: absolute; left: 537.5px; top: 64px; font-weight: 700; font-size: 16px; color: var(--t-171); }
.site-nav ul { display: flex; }
.site-nav li + li { margin-left: 40px; }
.site-nav li:nth-child(2) { margin-left: 60.6px; }
.site-nav li:nth-child(3) { margin-left: 41.1px; }
.site-nav li:nth-child(4) { margin-left: 38.9px; }
.site-nav li:nth-child(5) { margin-left: 38.9px; }
.site-header .btn-download { position: absolute; left: 1190px; top: 43.8px; width: 180px; height: 54px; border-radius: 15px; font-size: 17px; padding: 0; }
.nav-toggle { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--c-red-dark); color: var(--c-white); height: 344.7px; position: relative; }
.site-footer .container { padding: 0 75px; }
.footer-brand { position: absolute; left: 75px; top: 50.5px; }
.footer-brand .name { font-weight: 700; font-size: 42px; line-height: 1.2; }
.footer-brand .tag { font-size: 17px; line-height: 1.2; margin-top: 18.3px; }
.footer-cols { position: absolute; top: 73.1px; left: 430px; display: flex; }
.footer-col { width: 270px; }
.footer-col:nth-child(3) { width: 240px; }
.footer-col h4 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.footer-col ul { margin-top: 20.3px; }
.footer-col li { font-size: 16px; line-height: 1.2; }
.footer-col li + li { margin-top: 10.8px; }
/* social column display modes (Site Settings → Footer): labels only is the design default — icons off.
   Icons are inline brand SVGs (fill: currentColor); --soc-color / --soc-color-hover come from Site Settings color pickers. */
.footer-col--social { color: var(--soc-color, inherit); }
.social-list[data-mode="icons"] a,
.social-list[data-mode="icons+labels"] a { display: inline-flex; align-items: center; gap: 8px; }
.social-list[data-mode="icons"] a svg,
.social-list[data-mode="icons+labels"] a svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.social-list[data-mode="icons"] a { opacity: .9; }
.social-list[data-mode="icons"] a:hover { opacity: 1; }
.social-list[data-layout="row"] { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.social-list[data-layout="row"] li + li { margin-top: 0; }
.footer-col--social a:hover { color: var(--soc-color-hover, inherit); }
.footer-line { position: absolute; left: 70px; right: 70px; top: 259px; height: 1px; background: rgba(255,255,255,.22); }
.footer-bottom { position: absolute; left: 75px; right: 75px; top: 285.8px; display: flex; justify-content: space-between; font-size: 15px; line-height: 1.2; }

/* ---------- section helpers ---------- */
.soft-box { background: var(--c-pink); border-radius: var(--r-box); }
.card { background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.grad-band { background: var(--grad-red); color: var(--c-white); }

/* red gradient circle with white glyph (About / FAQ / Legal page icons) */
.icon-circle { width: 103px; height: 103px; border-radius: 50%; background: var(--grad-red); display: flex; align-items: center; justify-content: center; }
.icon-circle svg { width: 63px; height: 63px; }

/* .soc-net = build-time marker for social network extraction (tools/gen_theme.py); never visible */
.soc-net { display: none; }

/* store badges — same width (205px), each at its intrinsic aspect => equal visible bodies, one row */
.store-badges { display: flex; align-items: center; }
.store-badges .apple { width: 205px; }
.store-badges .google { margin-left: 2.5px; }
.store-badges img { width: 205px; max-width: 100%; height: auto; }

/* ==========================================================================
   HOME (index.html)
   ========================================================================== */
.hero { --hero-img: url('../img/hero-bg.jpg'); position: relative; height: 720px; background: var(--hero-img) no-repeat 0 0 / 1440px 720px; }  /* --hero-img is overridden inline by the CMS */
.hero__inner { position: relative; padding: 101.7px 0 0 80px; }
.hero__title { font-family: var(--f-head); color: var(--t-111); }
.hero__title .l1 { display: block; font-weight: 700; font-size: 52.6px; line-height: 1.2; }
.hero__title .l2 { display: block; font-weight: 900; font-size: 79.3px; line-height: 1.2; color: var(--c-red-text); margin-top: -2.5px; }
.hero__lead { max-width: 660px; margin: 27.9px 0 0 2px; font-size: 20px; line-height: 1.2; color: var(--t-4a); }
.hero__actions { display: flex; margin-top: 40.9px; }
.hero__actions .btn { height: 60px; padding-top: 2px; }
.hero__actions .btn--primary { width: 220px; }
.hero__actions .btn--outline { width: 250px; margin-left: 20px; }
.hero__features { display: flex; margin: 107.7px 0 0 -42.5px; }
.feature { width: 175px; text-align: center; }
.feature__icon { width: 56px; height: 56px; margin: 0 auto; }
.feature__label { margin-top: 7.8px; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--t-000); }

/* ---------- home hero slider (slide 2 reuses the home-chef hero copy) ---------- */
.hero-slider { background: none; }
/* image area is an inset rounded card (28px desktop): text column keeps its design position */
.hero-slider__bg { position: absolute; inset: 20px; z-index: 0; overflow: hidden; border-radius: 28px; }
.hero-slider__bgimg { position: absolute; inset: 0; }
.hero-slider__bgimg--home { background: var(--hero-img) no-repeat 0 0 / 1440px 720px; }
.hero-slider__bgimg--chef { background: var(--hero-img) no-repeat 0 -66.4px / 1440px 720px; }
.hero-slider__viewport { position: relative; z-index: 1; touch-action: pan-y; }
/* slides share one grid cell, so the hero is as tall as its tallest slide (no jumps);
   clip only sideways so button shadows and rising words are never cut */
html.motion .hero-slider__viewport { display: grid; overflow-x: clip; }
html.motion .hero-slide { grid-area: 1 / 1; min-width: 0; }
html.motion .hero-slider.is-dragging, html.motion .hero-slider.is-dragging a { user-select: none; -webkit-user-select: none; }
html.motion .hero-slider a, html.motion .hero-slider img { -webkit-user-drag: none; }
/* no JS: a single static hero (slide 1) */
html:not(.motion) .hero-slide + .hero-slide,
html:not(.motion) .hero-slider__bgimg + .hero-slider__bgimg { display: none; }
.hero-slider .hero__features { position: relative; margin: 107.7px 0 0 37.5px; }

.story { margin: 50px 70px 0; height: 390px; position: relative; }
.story__text { padding: 32.8px 0 0 45px; width: 640px; }
.story__title { font-size: 49.8px; }
.story__p { margin-top: 24.6px; font-family: var(--f-head); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--t-333); width: 455px; }
.story__p + .story__p { margin-top: 39.4px; width: 430px; }
.story__quote { margin-top: 32.9px; font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--t-222); width: 470px; }
.story__media { position: absolute; top: 50px; left: 690px; width: 560px; height: 270px; }
.story__media .ph { position: absolute; overflow: hidden; border-radius: 24px; }
.story__media .ph img { position: absolute; max-width: none; }
.story__media .ph--main { left: 0; top: 0; width: 350px; height: 270px; }
.story__media .ph--main img { left: -41.8px; top: -146.1px; width: 427.6px; height: 435.2px; }
.story__media .ph--a { left: 370px; top: 0; width: 190px; height: 125px; }
.story__media .ph--a img { left: -20px; top: -13.7px; width: 241.3px; height: 158.7px; }
.story__media .ph--b { left: 370px; top: 145px; width: 190px; height: 125px; }
.story__media .ph--b img { left: -53.7px; top: -49.3px; width: 274.2px; height: 177.3px; }

.why { position: relative; padding-top: 43.6px; }
.why__soup { position: absolute; left: 82px; top: -18.1px; width: 207.4px; height: 163.1px; }
.why__tomato { position: absolute; left: 1259px; top: 29.6px; width: 149.9px; height: 145.7px; }
.why__title { font-size: 58.3px; text-align: center; }
.why__sub { text-align: center; margin-top: -3.5px; font-family: var(--f-head); font-size: 19px; line-height: 1.2; color: var(--t-333); }
.why__cards { display: flex; justify-content: space-between; margin: 35.6px 70px 0; }
.why-card { width: 310.7px; height: 361.5px; text-align: center; padding-top: 38.7px; }
.why-card__icon { width: 120px; height: 122px; margin: 0 auto; }
.why-card__icon svg { width: 100%; height: 100%; }
.why-card__title { margin-top: 0.4px; font-weight: 700; font-size: 24.1px; line-height: 1.2; color: var(--t-000); }
.why-card__text { margin: 35.8px auto 0; width: 250px; font-size: 19px; line-height: 1.2; color: var(--t-555); }
.why-card:nth-child(2) .why-card__text { width: 260px; }
.why-card:nth-child(3) .why-card__text { width: 280px; }
.why-card:nth-child(4) .why-card__text { width: 300px; }

.how { position: relative; margin-top: 40px; height: 570px; background: var(--c-pink-2); }
.how__title { position: absolute; left: 0; width: 1093px; text-align: center; top: 62.2px; font-size: 47.5px; }
.how__phones { position: absolute; left: 926.4px; top: 0; width: 513.6px; height: 570px; overflow: hidden; }
.how__phones img { position: absolute; left: -68.9px; top: 0; width: 681.6px; height: 632.4px; max-width: none; }
.how__steps { position: absolute; left: 0; top: 217.2px; width: 1093px; }
.how__line { position: absolute; z-index: 0; left: 166.4px; top: 61.3px; width: 760px; height: 3px; transform-origin: left center;
             background-image: repeating-linear-gradient(to right, var(--c-red) 0 10px, transparent 10px 22px); }
.step { position: absolute; top: 0; width: 240px; text-align: center; z-index: 1; }
.step--1 { left: 46.4px; } .step--2 { left: 426.4px; } .step--3 { left: 806.4px; }
.step--3 .step__text { width: 200px; }
.step__icon { position: relative; width: 113px; height: 119px; margin: 0 auto; }
.step__icon img { width: 100%; height: 100%; }
.step__num { position: absolute; left: 1.4px; top: 1.6px; width: 38px; height: 38px; line-height: 38px; text-align: center; color: var(--c-white); font-weight: 700; font-size: 17px; }
.step__title { margin-top: 22px; font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--t-000); }
.step__text { margin: 9px auto 0; width: 235px; font-size: 16px; line-height: 1.2; color: var(--t-555); }

.cta-chefs { position: relative; height: 471px; margin-top: 29.2px; }
.cta-chefs__photo { position: absolute; left: 75px; top: 60.8px; width: 470px; height: 350px; border-radius: 24px; overflow: hidden; }
.cta-chefs__photo img { position: absolute; left: -167.1px; top: -377.4px; width: 983.7px; height: 734.5px; max-width: none; }
.cta-chefs__body { position: absolute; left: 620px; top: 88.5px; }
.cta-chefs__title { font-weight: 700; font-size: 50px; line-height: 1.2; }
.cta-chefs__sub { margin-top: 15.8px; font-weight: 700; font-size: 28px; line-height: 1.2; }
.cta-chefs__text { margin-top: 29.9px; font-size: 19px; line-height: 1.2; width: 740px; }
.cta-chefs__btn { margin-top: 57.4px; width: 280px; height: 60px; border-radius: 17px; }

.trust { position: relative; height: 300px; }
.trust__shield { position: absolute; left: 56px; top: 43.2px; width: 171px; height: 197px; }
.trust__body { position: absolute; left: 250px; top: 98.3px; width: 690px; }
.trust__title { font-size: 32px; }
.trust__text { margin-top: 3.5px; font-size: 18px; line-height: 1.2; color: var(--t-444); }
.trust__btn { position: absolute; left: 1050px; top: 120px; width: 300px; height: 60px; border-radius: 13px; font-size: 16px; }

.download { position: relative; height: 431px; color: var(--c-white); }
.download__phones { position: absolute; left: 0; top: -55.3px; width: 433.6px; height: 512.1px; overflow: hidden; }
.download__phones img { position: absolute; left: -89.7px; top: -10.8px; width: 612.3px; height: 568.1px; max-width: none; }
.download__body { position: absolute; left: 430px; top: 92.8px; }
.download__title { font-weight: 700; font-size: 52px; line-height: 60px; }
.download__text { margin-top: 21px; font-size: 20px; line-height: 30px; }
.download__badges { margin-top: 24.3px; height: 61.5px; }
.download__hat { position: absolute; left: 1121px; top: 96px; width: 234px; height: 221px; }
.download__hat svg { width: 100%; height: 100%; }

/* ==========================================================================
   ABOUT (about.html)
   ========================================================================== */
.about-intro { position: relative; margin: 113px 70px 0; padding-top: 51.8px; }
.about-intro .icon-circle { position: absolute; left: 584px; top: 0; z-index: 1; }
.about-intro__box { height: 390px; padding-top: 83.7px; text-align: center; border-radius: 24px; }
.about-title { font-size: 45px; }
.about-sub { margin-top: 14.7px; font-family: var(--f-head); font-weight: 700; font-size: 24.3px; line-height: 1.2; color: var(--t-333); }
.about-p { margin: 0 auto; max-width: 1180px; font-family: var(--f-head); font-weight: 400; font-size: 24.3px; line-height: 1.2; color: var(--t-333); }
.about-p + .about-p { margin-top: 29.2px; }

.about-vision { position: relative; margin: 56.2px 32.4px 0 32.4px; padding-top: 51.7px; }
.about-vision .icon-circle { position: absolute; left: 636.6px; top: 0; z-index: 1; }
.about-vision__card { height: 285.6px; padding-top: 73.1px; text-align: center; border-radius: 24px; box-shadow: 0 3px 10px rgba(0,0,0,.07); }
.about-vision .about-p { max-width: 1190px; }
.about-vision .about-sub { font-weight: 400; margin-top: 5.1px; }
.about-vision .about-p { margin-top: 29.1px; }

.about-mission { position: relative; margin: 27.7px 70px 0; padding-top: 49.1px; }
.about-mission .icon-circle { position: absolute; left: 599px; top: 0; z-index: 1; }
.about-mission__box { height: 249.2px; padding-top: 77.7px; text-align: center; border-radius: 24px; }
.about-mission .about-p { margin-top: 8.2px; }

.believe { position: relative; margin-top: 35.7px; height: 471px; }
.believe__body { position: absolute; left: 95.5px; top: 66.8px; width: 800px; }
.believe__title { font-weight: 700; font-size: 50px; line-height: 1.2; }
.believe__lead { margin-top: 15.8px; font-weight: 700; font-size: 28px; line-height: 1.2; width: 800px; }
.believe__line { margin: 25.2px 0 0 1px; width: 783px; height: 1px; background: rgba(255,255,255,.5); }
.believe__list { margin-top: 16.8px; width: 780px; font-size: 19px; line-height: 1.2; }
.believe__list li + li { margin-top: 22.8px; }
.believe__list b { font-weight: 700; }
.believe__mark { position: absolute; left: 1041px; top: 38.4px; width: 296px; height: 299px; }
.believe__mark img { width: 100%; height: 100%; }
.believe__btn { position: absolute; left: 1082.4px; top: 355.3px; width: 220px; height: 60px; border-radius: 15px; background: var(--c-white); color: var(--c-red-text); font-family: var(--f-body); font-size: 18px; }

/* ---------- interaction states ---------- */
.btn { transition: background-color .2s, color .2s, box-shadow .2s, transform .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(228,27,34,.22); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--primary:hover { background: #c9151c; }
.btn--outline:hover { background: var(--c-red); color: var(--c-white); }
.btn--white:hover { background: #fff3f3; }
.believe__btn:hover, .faq-contact:hover { box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.site-nav a { position: relative; padding-bottom: 4px; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-red); transform: scaleX(0); transition: transform .2s; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--c-red-text); }
.footer-col a:hover, .footer-bottom a:hover { text-decoration: underline; }
.lang-switch { position: absolute; left: 1118px; top: 57px; font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--t-171); padding: 4px 8px; border-radius: 8px; }
.lang-switch:hover { color: var(--c-red-text); background: var(--c-pink); }
:focus-visible { outline: 3px solid rgba(228,27,34,.55); outline-offset: 3px; border-radius: 6px; }


/* ==========================================================================
   FOR HOME CHEFS (for-home-chefs.html)
   ========================================================================== */
.chef-hero { --hero-img: url('../img/chef-hero-bg.jpg'); position: relative; height: 653.6px; background: var(--hero-img) no-repeat 0 -66.4px / 1440px 720px; }
.chef-hero__inner { padding: 80.7px 0 0 80px; }
.chef-hero__title { font-family: var(--f-head); font-weight: 900; color: var(--t-111); }
.chef-hero__title .l1 { display: block; font-size: 62px; line-height: 1.2; }
.chef-hero__title .l2 { display: block; font-size: 117.8px; line-height: 1.2; color: var(--c-red-text); margin-top: -13.6px; }
.chef-hero__sub { margin: -11.5px 0 0 2px; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--t-4a); }
.chef-hero__lead { margin: 24px 0 0 2px; width: 600px; font-size: 20px; line-height: 1.2; color: var(--t-4a); }
.chef-hero__btn { margin-top: 28px; width: 322.6px; height: 60px; padding-top: 2px; }
.chef-hero__features { position: absolute; left: 0; top: 532px; width: 720px; height: 60px; }
.chef-feature { position: absolute; top: 0; display: flex; }
.chef-feature img { display: block; }
.chef-feature__label { position: absolute; top: 8.8px; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--t-000); white-space: nowrap; }
.chef-feature--1 { left: 88px; } .chef-feature--1 img { width: 51px; height: 56px; }        .chef-feature--1 .chef-feature__label { left: 55.3px; }
.chef-feature--2 { left: 276px; top: 4px; } .chef-feature--2 img { width: 55px; height: 48px; } .chef-feature--2 .chef-feature__label { left: 61.3px; top: 4.8px; }
.chef-feature--3 { left: 496px; top: 2px; } .chef-feature--3 img { width: 51px; height: 51px; } .chef-feature--3 .chef-feature__label { left: 62.9px; top: 6.8px; }

.why-join { padding-top: 61.6px; }
.why-join__title { font-size: 88.9px; text-align: center; }
.why-join__cards { display: flex; margin: 33.6px 0 0 64.6px; }
.join-card { width: 249.9px; height: 290.7px; padding-top: 32.5px; text-align: center; border-radius: 20px; }
.join-card + .join-card { margin-left: 15.3px; }
.join-card__icon { width: 98px; height: 98px; margin: 0 auto; }
.join-card__title { margin-top: -0.9px; font-weight: 700; font-size: 19.4px; line-height: 1.2; color: var(--t-000); }
.join-card__text { margin: 26.4px auto 0; font-size: 15.3px; line-height: 1.2; color: var(--t-555); }
.join-card:nth-child(1) .join-card__text { width: 190px; }
.join-card:nth-child(2) .join-card__text { width: 215px; }
.join-card:nth-child(3) .join-card__text { width: 225px; }
.join-card:nth-child(4) .join-card__text { width: 200px; }
.join-card:nth-child(5) .join-card__text { width: 215px; }

.get-started { position: relative; margin-top: 67.4px; height: 451.7px; background: var(--c-pink-2); overflow: hidden; }
.get-started__blob { position: absolute; left: 952px; top: 0; width: 488px; height: 453px; }
.get-started__phones { position: absolute; left: 952.6px; top: 0; width: 487.4px; height: 451.7px; overflow: hidden; }
.get-started__phones img { position: absolute; left: -95.1px; top: -67.5px; width: 681.6px; height: 632.5px; max-width: none; }
.get-started__title { position: absolute; left: 93.9px; top: 35px; font-family: var(--f-head); font-weight: 700; font-size: 53.4px; line-height: 1.2; color: var(--t-000); white-space: nowrap; }
.get-started__title em { font-style: normal; font-weight: 900; color: var(--c-red-text); }
.get-started__steps { position: absolute; left: 0; top: 177.1px; width: 800px; }
.get-started__line { position: absolute; z-index: 0; left: 105px; top: 16.9px; width: 600px; height: 2.9px; transform-origin: left center;
                     background-image: repeating-linear-gradient(to right, var(--c-red) 0 9.65px, transparent 9.65px 21.23px); }
.gstep { position: absolute; top: 0; width: 150px; text-align: center; z-index: 1; }
.gstep--1 { left: 30px; } .gstep--2 { left: 180px; } .gstep--3 { left: 330px; } .gstep--4 { left: 480px; } .gstep--5 { left: 630px; }
.gstep__num { display: block; width: 36.6px; height: 36.6px; margin: 0 auto; border-radius: 50%; background: var(--c-red); color: var(--c-white); font-weight: 700; font-size: 16.4px; line-height: 36.6px; text-align: center; }
.gstep__title { margin-top: 8.5px; font-weight: 700; font-size: 18.7px; line-height: 1.2; color: var(--t-000); }
.gstep__text { margin: 16.8px auto 0; font-size: 14.8px; line-height: 1.2; color: var(--t-555); }
.gstep .gstep__text { width: 140px; }

.more-than { position: relative; margin-top: 17.7px; height: 453px; background: linear-gradient(to right, #ffffff, #fff4f4); overflow: hidden; }
.more-than__body { position: absolute; left: 83px; top: 46.8px; }
.more-than__title { font-family: var(--f-head); font-weight: 700; font-size: 53.4px; line-height: 1.2; color: var(--t-000); }
.more-than__title em { display: block; font-style: normal; font-weight: 900; color: var(--c-red-text); margin-top: 3.7px; }
.more-than__underline { margin: 3.5px 0 0 1px; width: 325px; height: 7px; }
.more-than__p { margin: 18.7px 0 0 -1px; font-size: 20px; line-height: 1.2; color: var(--t-4a); }
.more-than__tags { position: relative; margin-top: 50.3px; height: 36px; }
.more-than__tags li { position: absolute; top: 0; display: flex; align-items: center; font-weight: 700; font-size: 18.7px; line-height: 1.2; color: var(--t-000); }
.more-than__tags li img { display: block; }
.more-than__tags li:nth-child(1) { left: 1px; } .more-than__tags li:nth-child(1) img { width: 35px; height: 35px; margin-right: 3.4px; }
.more-than__tags li:nth-child(2) { left: 141px; } .more-than__tags li:nth-child(2) img { width: 39px; height: 36px; margin-right: 1.4px; }
.more-than__tags li:nth-child(3) { left: 281px; top: 2px; } .more-than__tags li:nth-child(3) img { width: 42px; height: 31px; margin-right: 0.4px; }
.more-than__p2 { margin-top: 30px; }
.feedback { position: absolute; left: 720px; top: 69px; width: 720px; height: 303px; }
.feedback__blob { position: absolute; left: 61px; top: 0; width: 659px; height: 303px; }
.feedback__title { position: absolute; left: 176.1px; top: 30.7px; font-family: var(--f-head); font-weight: 900; font-size: 65px; line-height: 1.2; color: var(--c-white); }
.feedback__star { position: absolute; left: 0; top: 85px; width: 133px; height: 133px; border-radius: 50%; background: var(--grad-red); }
.feedback__star img { position: absolute; left: 30.4px; top: 29.3px; width: 73px; height: 69px; }
.feedback__heart { position: absolute; left: 465.5px; top: 24.8px; width: 151px; height: 143px; }
.feedback__heart img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: drop-shadow(0 5px 10px rgba(0,0,0,.28)); }
.review { position: absolute; left: 161.7px; top: 108px; width: 450.9px; height: 153.1px; border-radius: 16px; background: #f6f6f6; box-shadow: 0 4px 14px rgba(0,0,0,.14); font-family: 'Poppins', var(--f-body); color: #191919; }
.review__avatar { position: absolute; left: 14.4px; top: 27.5px; width: 40px; height: 40px; }
.review__name { position: absolute; left: 68.2px; top: 22.1px; font-weight: 600; font-size: 19px; line-height: 1.2; white-space: nowrap; }
.review__meta { position: absolute; left: 68.2px; top: 48.1px; font-weight: 500; font-size: 8.1px; line-height: 1.2; white-space: nowrap; }
.review__stars { position: absolute; left: 67.8px; top: 63px; width: 86.5px; height: 14.5px; }
.review__quote { position: absolute; left: 68.2px; top: 86.8px; font-weight: 400; font-size: 11.4px; line-height: 1.2; white-space: nowrap; }
.review__thumb { position: absolute; left: 67.8px; top: 112px; width: 19.5px; height: 17.5px; }

.download--chefs { margin-top: 23px; overflow: hidden; }
.download--chefs .download__body { top: 59.1px; }
.download--chefs .download__title { line-height: 62.4px; }
.download--chefs .download__sub { margin-top: 18.6px; font-weight: 700; font-size: 24.7px; line-height: 1.2; }
.download--chefs .download__badges { margin-top: 23.7px; }
.download__arrow { position: absolute; left: 830px; top: 70px; width: 259px; height: 160px; }
.download__bowl { position: absolute; left: 992.5px; top: 78.8px; width: 526px; height: 526px; }
.download--chefs .download__hat { top: 96.6px; }


/* ==========================================================================
   FAQ & SUPPORT (faq.html)
   ========================================================================== */
.faq-intro, .contact-intro { position: relative; margin: 113px 70px 0; padding-top: 51.8px; }
.faq-intro .icon-circle, .contact-intro .icon-circle { position: absolute; left: 584px; top: 0; z-index: 1; }
.faq-intro__box, .contact-intro__box { height: 257.7px; padding-top: 79.1px; text-align: center; border-radius: 24px; }
.faq-intro .about-sub, .contact-intro .about-sub { margin-top: 19.3px; }

.faq-group { margin: 15.4px 61.9px 0 32.4px; padding: 0 0 0 88.9px; border-radius: 24px; }
.faq-group--white { box-shadow: 0 3px 10px rgba(0,0,0,.07); background: var(--c-white); }
.faq-group--pink { background: var(--c-pink); box-shadow: 0 3px 10px rgba(0,0,0,.05); }
.faq-group--head { height: 285.7px; padding-top: 68.5px; }
.faq-group--head.faq-group--pink { height: 362.2px; margin-top: 31.3px; }
.faq-group--single { height: 188.3px; padding-top: 34.8px; }
.faq-group--pay { padding-top: 46.9px; } /* the design places this one question lower */
.faq-group--pink + .faq-group--pink { margin-top: 17.4px; }
.faq-group--support { margin-top: 17.4px; position: relative; }
.faq-group__title { font-size: 45px; text-align: center; margin-left: -59.4px; }
.faq-group--head .faq-item { margin-top: 9.7px; }
.faq-item__q { display: flex; align-items: flex-start; font-family: var(--f-head); font-weight: 700; font-size: 24.3px; line-height: 1.2; color: var(--t-333); cursor: default; }
.faq-item__q img { width: 23px; height: 23px; margin: 5.2px 7.5px 0 0.7px; }
.faq-item__a { margin-top: 29.2px; font-family: var(--f-head); font-weight: 400; font-size: 24.3px; line-height: 1.2; color: var(--t-333); width: 1200px; }
.faq-item__a--w1000 { width: 1000px; }
.faq-item__a--w990 { width: 990px; }
.faq-item__a--w1250 { width: 1250px; }
.faq-contact { position: absolute; left: 1156.6px; top: 167.9px; width: 159.4px; height: 60px; border-radius: 16px; font-size: 18px; }
.faq-end { height: 48.2px; }

/* ==========================================================================
   LEGAL CENTER (legal.html)
   ========================================================================== */
.legal { position: relative; margin: 113px 70px 0; padding-top: 51.8px; }
.legal .icon-circle { position: absolute; left: 584px; top: 0; z-index: 1; }
.legal__box { height: 811.7px; padding: 79.1px 0 0 64.3px; border-radius: 24px; position: relative; }
.legal__title { font-size: 45px; text-align: center; margin-left: -64.3px; }
.legal__sub { margin-top: 19.3px; font-family: var(--f-head); font-weight: 700; font-size: 24.3px; line-height: 1.2; color: var(--t-333); }
.legal__lead { font-family: var(--f-head); font-weight: 400; font-size: 24.3px; line-height: 1.2; color: var(--t-333); width: 800px; }
.legal__list { margin-top: 14.6px; }
.legal-item { position: relative; height: 119.6px; border-top: 1px solid var(--c-red); width: 1167.2px; }
.legal-item:last-child { height: auto; }
.legal-item h3 { font-family: var(--f-head); font-weight: 700; font-size: 24.3px; line-height: 1.2; color: var(--t-333); }
.legal-item p { font-family: var(--f-head); font-weight: 400; font-size: 24.3px; line-height: 1.2; color: var(--t-333); width: 780px; }
.legal-item:nth-child(1) h3 { padding-top: 13.5px; }
.legal-item:nth-child(2) h3 { padding-top: 10.3px; }
.legal-item:nth-child(3) h3 { padding-top: 7.5px; }
.legal-item:nth-child(4) h3 { padding-top: 4.2px; }
.legal-item .btn { position: absolute; left: 846.7px; top: 27.5px; width: 322.6px; height: 60px; border-radius: 16px; font-size: 18px; }
.legal-item:nth-child(3) .btn { top: 27.9px; }
.legal-item:nth-child(4) .btn { top: 31.9px; }
.legal-end { height: 48px; }
/* these tops were measured with corrected Gilroy-Black metrics, so no baseline nudge */
.faq-intro .about-title, .contact-intro .about-title, .faq-group__title, .legal__title { top: 0; }

/* accordion */
.faq-item__q button { display: flex; align-items: flex-start; width: 100%; text-align: inherit; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.faq-item__chev { margin-left: auto; margin-top: 8px; width: 14px; height: 14px; border-right: 3px solid var(--c-red); border-bottom: 3px solid var(--c-red); transform: rotate(45deg); transition: transform .25s; flex: none; }
.faq-item__q button[aria-expanded="false"] .faq-item__chev { transform: rotate(-45deg); margin-top: 12px; }
.faq-item__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.faq-item__panel > * { overflow: hidden; }
.faq-item.is-closed .faq-item__panel { grid-template-rows: 0fr; }
.faq-item.is-closed .faq-item__panel > * { min-height: 0; margin-top: 0; }
.faq-group--single.is-closed { height: auto; padding-bottom: 34.8px; }
.faq-group--head:has(.is-closed) { height: auto; padding-bottom: 46px; }


/* ==========================================================================
   LEGAL DOCUMENT TEMPLATE (legal/*.html) — Terms, Privacy, Guidelines
   ========================================================================== */
.legal-doc { padding: 0 70px 60px; }
.legal-doc__head { position: relative; margin-top: 113px; padding-top: 51.8px; }
.legal-doc__head .icon-circle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; }
.legal-doc__headbox { padding: 79px 64px 44px; text-align: center; border-radius: 24px; }
.legal-doc__title { font-size: 45px; }
.legal-doc__updated { margin-top: 14px; font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--t-555); }
.legal-doc__intro { margin: 12px auto 0; max-width: 900px; font-family: var(--f-head); font-size: 22px; line-height: 1.35; color: var(--t-333); }
.legal-doc__layout { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; margin-top: 30px; }
.legal-doc__toc { position: sticky; top: 24px; padding: 28px 28px 24px; border-radius: 24px; }
.legal-doc__toc li { font-family: var(--f-head); font-size: 17px; line-height: 1.3; }
.legal-doc__toc li + li { margin-top: 12px; }
.legal-doc__toc a { display: flex; gap: 10px; color: var(--t-333); }
.legal-doc__toc a:hover, .legal-doc__toc a.is-active { color: var(--c-red-text); }
.legal-doc__body { padding: 52px 64px 60px; border-radius: 24px; font-family: var(--f-head); color: var(--t-333); font-size: 19px; line-height: 1.55; }
.legal-doc__body h2 { font-size: 28px; font-weight: 900; line-height: 1.25; color: var(--c-red-text); margin: 44px 0 14px; scroll-margin-top: 24px; }
.legal-doc__body h2:first-child { margin-top: 0; }
.legal-doc__body h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--t-111); margin: 26px 0 8px; }
.legal-doc__body p + p { margin-top: 12px; }
.legal-doc__body ul, .legal-doc__body ol { margin: 10px 0 14px; padding-left: 26px; list-style: disc; }
.legal-doc__body ol { list-style: decimal; }
.legal-doc__body li + li { margin-top: 6px; }
.legal-doc__body a { color: var(--c-red-text); text-decoration: underline; }
.legal-doc__body .note { margin-top: 32px; padding: 20px 24px; border-radius: 16px; background: var(--c-pink); font-size: 17px; }
.legal-doc__body .placeholder { color: #a33; background: #fff1f1; border: 1px dashed #e9a3a6; padding: 2px 8px; border-radius: 6px; font-size: .85em; }

@media (max-width: 1023px) {
  .legal-doc { padding: 0 var(--gutter) 40px; }
  .legal-doc__head { margin-top: 64px; padding-top: 42px; }
  .legal-doc__headbox { padding: 60px 24px 28px; }
  .legal-doc__title { font-size: 32px; }
  .legal-doc__intro { font-size: 18px; }
  .legal-doc__layout { grid-template-columns: 1fr; gap: 20px; }
  .legal-doc__toc { position: static; padding: 22px 22px 18px; }
  .legal-doc__body { padding: 28px 22px 32px; font-size: 17px; }
  .legal-doc__body h2 { font-size: 23px; margin-top: 32px; }
}

/* ==========================================================================
   BLOG (posts, archives, search) — no artboard in the design; built from the legal-document components
   ========================================================================== */
.blog-index { padding: 0 70px 60px; }
.blog__head { position: relative; margin-top: 113px; padding-top: 51.8px; }
.blog__head .icon-circle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; }
.blog__headbox { padding: 79px 64px 44px; text-align: center; border-radius: 24px; }
.blog__title { font-size: 45px; }
.blog__meta { margin-top: 14px; font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--t-555); }
.blog__meta a { color: var(--c-red-text); }
.blog__intro { margin: 12px auto 0; max-width: 900px; font-family: var(--f-head); font-size: 22px; line-height: 1.35; color: var(--t-333); }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
.post-card__thumb { display: block; aspect-ratio: 16 / 10; background: var(--c-pink); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 28px; font-family: var(--f-head); }
.post-card__date { font-size: 15px; font-weight: 700; color: var(--t-555); }
.post-card__title { margin-top: 8px; font-size: 23px; font-weight: 900; line-height: 1.25; color: var(--c-red-text); }
.post-card__title a { color: inherit; }
.post-card__excerpt { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--t-333); }
.post-card .btn { margin-top: auto; align-self: flex-start; margin-top: 20px; height: 48px; padding: 0 22px; font-size: 16px; border-radius: 14px; }
.blog__empty { padding: 52px 64px; border-radius: 24px; font-family: var(--f-head); font-size: 19px; color: var(--t-333); margin-top: 30px; text-align: center; }
.blog__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; font-family: var(--f-head); font-weight: 700; }
.blog__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--c-white); color: var(--t-333); box-shadow: var(--shadow-card); }
.blog__pagination .page-numbers.current, .blog__pagination a.page-numbers:hover { background: var(--c-red); color: var(--c-white); }
.blog__pagination .dots { box-shadow: none; }
.article { padding: 0 70px 60px; }
.article__layout { max-width: 1000px; margin: 30px auto 0; }
.article__figure { margin: 0 0 30px; border-radius: 24px; overflow: hidden; }
.article__figure img { display: block; width: 100%; height: auto; }
.article__body { padding: 52px 64px 60px; border-radius: 24px; }
.article__body img { max-width: 100%; height: auto; border-radius: 16px; }
.article__body blockquote { margin: 24px 0; padding: 20px 28px; border-inline-start: 4px solid var(--c-red); background: var(--c-pink); border-radius: 12px; }
.article__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.article__tags a { padding: 6px 14px; border-radius: 999px; background: var(--c-pink); color: var(--c-red-text); text-decoration: none; }
.article__nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.article__nav a { color: var(--c-red-text); }
.article__nav a + a { text-align: end; }

@media (max-width: 1023px) {
  .blog-index, .article { padding: 0 var(--gutter) 40px; }
  .blog__head { margin-top: 64px; padding-top: 42px; }
  .blog__headbox { padding: 60px 24px 28px; }
  .blog__title { font-size: 32px; }
  .blog__intro { font-size: 18px; }
  .blog__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .article__body { padding: 28px 22px 32px; font-size: 17px; }
  .article__body h2 { font-size: 23px; margin-top: 32px; }
}
@media (max-width: 767px) {
  .blog__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   CONTACT (contact.html)
   Intro reuses the .faq-intro idiom (shared rules live in 30-faq-legal.css).
   Every form rule is scoped under .contact-form so nothing can leak — the
   markup mirrors Fluent Forms' own DOM/classes (ff-el-group, ff-el-form-control,
   ff-btn-submit, ff-message-success, .error.text-danger, .ff-el-is-error),
   so this one sheet styles both the static page and the WP Fluent form.
   ========================================================================== */

/* ---------- intro: same idiom as .faq-intro; the contact copy is longer, so
   let the box grow past the shared fixed height instead of overflowing ---------- */
.contact-intro__box { height: auto; min-height: 257.7px; padding-bottom: 40px; }

/* ---------- main grid: aside (440px) + form card ---------- */.contact-grid { margin: 32px 70px 0; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 40px; align-items: start; }
.contact-aside { grid-column: 1; grid-row: 1; display: grid; gap: 24px; align-content: start; min-width: 0; }
.contact-form { grid-column: 2; grid-row: 1; min-width: 0; background: var(--c-white); border-radius: var(--r-box); box-shadow: var(--shadow-card); padding: 44px 48px 48px; }
.contact-end { height: 48px; }

.contact-form__title { font-size: 34px; }
.contact-form__lead { margin-top: 10px; font-size: 17px; line-height: 1.4; color: var(--t-555); }

/* ---------- aside cards ---------- */
.contact-card { padding: 28px 30px; border-radius: var(--r-box); }
.contact-card__title { font-family: var(--f-head); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--c-red-text); margin-bottom: 14px; }
.contact-card__text { font-size: 17px; line-height: 1.5; color: var(--t-444); }
.contact-mail { color: var(--c-red-text); font-weight: 700; font-size: 18px; word-break: break-all; }
.contact-mail:hover { text-decoration: underline; }
.contact-faq-link { color: var(--c-red-text); font-weight: 700; }
.contact-faq-link:hover { text-decoration: underline; }

.contact-socials { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-soc { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-red); color: var(--c-white); display: flex; align-items: center; justify-content: center; transition: background-color .2s, box-shadow .2s, transform .15s; }
.contact-soc svg { width: 22px; height: 22px; fill: currentColor; }
.contact-soc:hover { background: #c9151c; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(228,27,34,.22); }

.contact-app__label { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--t-333); margin: 0 0 10px; }
.contact-app__badges + .contact-app__label { margin-top: 18px; }
.contact-app__badges { display: flex; align-items: center; gap: 10px; }
.contact-app__badges a { display: block; }
.contact-app__badges img { width: 150px; max-width: 100%; height: auto; }

/* ---------- Fluent Forms mirror ---------- */
.contact-form .fluentform { margin-top: 28px; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form .ff_screen_reader_title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form .ff-el-group { margin-bottom: 20px; }
.contact-form .ff-t-container { display: flex; gap: 20px; }
.contact-form .ff-t-cell { flex: 1 1 0; min-width: 0; }
.contact-form .ff-el-input--label { display: block; margin-bottom: 8px; }
.contact-form .ff-el-input--label label { font-family: var(--f-head); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--t-333); }
.contact-form .ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--c-red); }
.contact-form .ff-el-form-control { display: block; width: 100%; height: 54px; padding: 0 16px; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--t-111); background: var(--c-white); border: 1px solid #e6e6e6; border-radius: 12px; }
.contact-form textarea.ff-el-form-control { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; }
.contact-form .ff-el-form-control:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(228,27,34,.15); }
.contact-form select.ff-el-form-control { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e41b22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px; }
.contact-form .ff_submit_btn_wrapper { margin: 28px 0 0; }
.contact-form .ff-text-left { text-align: left; }
/* :not(.ff_btn_no_style) outranks Fluent Forms' own inline button rule (form.fluent_form_N .ff-btn-submit:not(...)), so the design red wins over its var(--fluentform-primary) */
.contact-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) { height: 60px; padding: 0 40px; border: 0; border-radius: var(--r-btn); background: var(--c-red); color: var(--c-white); font-family: var(--f-body); font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .15s; }
.contact-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover { background: #c9151c; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(228,27,34,.22); }
.contact-form .ff-el-is-error .ff-el-form-control { border-color: var(--c-red); }
.contact-form .ff-el-is-error .error.text-danger { color: var(--c-red); font-size: 13px; line-height: 1.4; margin-top: 6px; }
.contact-form .ff-message-success { background: #eef9f0; border: 1px solid #35a45b; color: #166534; border-radius: 12px; padding: 15px 18px; margin-top: 10px; font-size: 16px; line-height: 1.5; }


/* ==========================================================================
   MOTION — "steam clears".
   Home cooking is steam and warmth, so every entrance comes out of a soft
   blur into focus (opacity + blur + a short rise), the same way steam lifts
   off a plate. Headings resolve word by word, photos pull into focus, soft
   panels settle, icons pop. Scroll-linked moments (connector lines, phones,
   decor drift, red bands opening) follow the Lenis-eased scroll directly.
   JS (site.js) only adds classes: .rv-* marks what to animate, .is-in plays it.
   Hidden states exist only under html.motion (inline head script), so no-JS
   visitors and the block editor always see everything.
   Property ownership (so effects never fight): reveals use opacity/filter +
   the `translate`/`scale` properties; scroll motion writes `translate`/`rotate`
   on decor only (those never get a reveal); idle loops animate `transform`.
   ========================================================================== */

:root {
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-io: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --steam-blur: 12px;
  --steam-rise: 34px;
}

/* ---------- smooth wheel scrolling (Lenis, desktop fine pointers; see site.js) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- first paint: the page fades in once the script has tagged it
   (a 2.5s failsafe shows it anyway if the script never runs) ---------- */
@keyframes ck-failsafe { to { opacity: 1; } }
html.motion .site-canvas { transition: opacity .45s ease-out; }
html.motion:not(.motion-ready) .site-canvas { opacity: 0; animation: ck-failsafe 0s linear 2.5s forwards; }

/* ---------- entrances ---------- */
/* steam: blocks of copy, buttons, cards */
html.motion .rv-steam { opacity: 0; filter: blur(var(--steam-blur)); translate: 0 var(--steam-rise);
  transition: opacity 1s var(--e-out), filter 1.1s var(--e-out), translate 1.2s var(--e-out);
  transition-delay: var(--d, 0s); }
html.motion .rv-steam.is-in { opacity: 1; filter: none; translate: none; }

/* words: headings resolve word by word (Arabic words are kept whole) */
html.motion .rv-words .w { display: inline-block; opacity: 0; filter: blur(10px); translate: 0 .42em;
  transition: opacity .9s var(--e-out), filter 1s var(--e-out), translate 1.1s var(--e-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms); }
html.motion .rv-words.is-in .w { opacity: 1; filter: none; translate: none; }

/* focus: photos come into focus from a slight zoom */
html.motion .rv-focus { opacity: 0; filter: blur(18px); scale: 1.06;
  transition: opacity 1.1s var(--e-out), filter 1.4s var(--e-out), scale 1.6s var(--e-out);
  transition-delay: var(--d, 0s); }
html.motion .rv-focus.is-in { opacity: 1; filter: none; scale: 1; }

/* panel: soft rounded boxes settle into place (no blur on big surfaces) */
html.motion .rv-panel { opacity: 0; scale: .955; translate: 0 24px;
  transition: opacity .9s var(--e-out), scale 1.2s var(--e-out), translate 1.2s var(--e-out);
  transition-delay: var(--d, 0s); }
html.motion .rv-panel.is-in { opacity: 1; scale: 1; translate: none; }

/* pop: icon circles and badges land with a little spring */
html.motion .rv-pop { opacity: 0; scale: .4; filter: blur(6px);
  transition: opacity .5s var(--e-out), scale .8s var(--e-spring), filter .6s var(--e-out);
  transition-delay: var(--d, 0s); }
html.motion .rv-pop.is-in { opacity: 1; scale: 1; filter: none; }

/* drop: the red icon circle that sits on top of a panel drops in onto it */
html.motion .rv-drop { opacity: 0; translate: 0 -40px; scale: .7;
  transition: opacity .6s var(--e-out), translate .9s var(--e-spring), scale .9s var(--e-spring);
  transition-delay: var(--d, 0s); }
html.motion .rv-drop.is-in { opacity: 1; translate: none; scale: 1; }

/* side: review card slides in from the reading-end side */
html.motion .rv-side { opacity: 0; filter: blur(10px); translate: 60px 0;
  transition: opacity 1s var(--e-out), filter 1.1s var(--e-out), translate 1.2s var(--e-out);
  transition-delay: var(--d, 0s); }
html.motion .rv-side.is-in { opacity: 1; filter: none; translate: none; }

/* haze: decor and phone mockups fade out of a blur (their movement comes from the scroll loop) */
html.motion .rv-haze { opacity: 0; filter: blur(14px); transition: opacity 1.2s var(--e-out), filter 1.4s var(--e-out); transition-delay: var(--d, 0s); }
html.motion .rv-haze.is-in { opacity: 1; filter: none; }

/* draw: underlines / divider lines draw across */
html.motion .rv-draw { scale: 0 1; transform-origin: left center; transition: scale 1.2s var(--e-io); transition-delay: var(--d, 0s); }
html.motion .rv-draw.is-in { scale: 1 1; }

/* only pay for layers while something is still waiting to play */
html.motion .rv-steam:not(.is-done), html.motion .rv-focus:not(.is-done), html.motion .rv-words:not(.is-done) .w { will-change: opacity, filter, translate; }

/* steps: circles pop in sequence as the connector line reaches them (JS adds .is-in) */
html.motion .how__steps .step, html.motion .get-started__steps .gstep { opacity: 0; filter: blur(8px); translate: 0 26px;
  transition: opacity .7s var(--e-out), filter .8s var(--e-out), translate .9s var(--e-out); }
html.motion .how__steps .step.is-in, html.motion .get-started__steps .gstep.is-in { opacity: 1; filter: none; translate: none; }
html.motion .step__num, html.motion .gstep__num { scale: 0; transition: scale .7s var(--e-spring) .25s; }
html.motion .step.is-in .step__num, html.motion .gstep.is-in .gstep__num { scale: 1; }
/* connector lines are scroll-linked (JS writes the transform) */
html.motion .how__line, html.motion .get-started__line { transform: scaleX(0); }

/* ---------- idle life (compositor-only `transform` loops) ---------- */
@keyframes ck-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ck-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ck-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.1); } 35% { transform: scale(.98); } }
html.motion .why__soup, html.motion .download__bowl { animation: ck-bob 6s ease-in-out infinite; }
html.motion .why__tomato { animation: ck-bob 5s ease-in-out -1.5s infinite; }
html.motion .trust__shield, html.motion .believe__mark { animation: ck-bob 7s ease-in-out -2s infinite; }
html.motion .download__hat { animation: ck-sway 8s ease-in-out infinite; transform-origin: 50% 90%; }
html.motion .feedback__heart { animation: ck-beat 2.8s ease-in-out infinite; transform-origin: 50% 60%; }
html.motion .feedback__star img { animation: ck-sway 5s ease-in-out infinite; }

/* ---------- hover & press ---------- */
.btn { translate: 0 0; }
.btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.18);
  transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--e-out); pointer-events: none; }
.btn--outline::before, .btn--white::before { background: rgba(228,27,34,.08); }
.btn:hover::before { transform: scaleX(1); }
.btn { transition: background-color .25s, color .25s, box-shadow .4s var(--e-out), translate .4s var(--e-out), scale .2s var(--e-out); }
.btn:hover { transform: none; translate: var(--mx, 0px) calc(-3px + var(--my, 0px)); box-shadow: 0 14px 30px rgba(228,27,34,.28); }
.btn:active { transform: none; scale: .97; translate: var(--mx, 0px) 0px; }
.card, .post-card { transition: translate .6s var(--e-out), box-shadow .6s var(--e-out), opacity 1s var(--e-out), filter 1.1s var(--e-out); }
.card:hover, .post-card:hover { translate: 0 -8px; box-shadow: 0 22px 44px rgba(0,0,0,.12); }
.why-card__icon, .join-card__icon { transition: transform .7s var(--e-spring); }
.card:hover .why-card__icon, .card:hover .join-card__icon { transform: translateY(-6px) rotate(-10deg) scale(1.06); }
.ph img, .cta-chefs__photo img { transition: transform 1.2s var(--e-out); }
.ph:hover img, .cta-chefs__photo:hover img { transform: scale(1.06); }
html[dir="rtl"] .cta-chefs__photo:hover img { transform: scaleX(-1) scale(1.06); }
.feature__icon, .chef-feature img { transition: transform .7s var(--e-spring); }
.feature:hover .feature__icon, .chef-feature:hover img { transform: translateY(-5px) scale(1.08); }
.social-list a, .contact-soc, .store-badges a, .contact-app__badges a { transition: transform .5s var(--e-spring), color .2s; }
.social-list a { display: inline-block; }
.social-list a:hover, .store-badges a:hover, .contact-app__badges a:hover { transform: translateY(-4px); }
.contact-soc:hover { transform: translateY(-4px) rotate(-8deg); }
.faq-item__panel { transition: grid-template-rows .5s var(--e-out); }
.faq-item__chev { transition: transform .4s var(--e-out); }

/* ---------- home hero slider ---------- */
/* image layers: on entry the photo pulls into focus, then drifts (Ken Burns) */
@keyframes ck-bg-in { 0% { opacity: 0; filter: blur(16px); scale: 1.14; } 22% { opacity: 1; filter: blur(0); scale: 1.02; } 100% { opacity: 1; filter: blur(0); scale: 1.08; } }
@keyframes ck-bg-out { from { opacity: 1; filter: blur(0); scale: 1.08; } to { opacity: 0; filter: blur(10px); scale: 1.1; } }
html.motion .hero-slider__bgimg { opacity: 0; transition: translate .6s var(--e-out); }
html.motion .hero-slider__bgimg.is-active { opacity: 1; animation: ck-bg-in 7.5s var(--e-out) both; }
html.motion .hero-slider__bgimg.is-leaving { animation: ck-bg-out .9s var(--e-io) both; }
html.motion .hero-slider.is-dragging .hero-slider__bgimg { transition: none; }

/* text: outgoing words steam away upward, then the incoming slide resolves */
html.motion .hero-slide { visibility: hidden; pointer-events: none; }
html.motion .hero-slide.is-active, html.motion .hero-slide.is-leaving { visibility: visible; }
html.motion .hero-slide.is-active { pointer-events: auto; }
html.motion .hero-slide .w { display: inline-block; opacity: 0; filter: blur(10px); translate: 0 .5em; }
html.motion .hero-slide .hs-b { opacity: 0; filter: blur(10px); translate: 0 26px; }
html.motion .hero-slide.is-in .w, html.motion .hero-slide.is-in .hs-b { opacity: 1; filter: none; translate: none;
  transition: opacity .9s var(--e-out), filter 1s var(--e-out), translate 1.1s var(--e-out); }
html.motion .hero-slide.is-in .w { transition-delay: calc(var(--hd, 0s) + var(--i, 0) * 55ms); }
html.motion .hero-slide.is-in .hs-b { transition-delay: calc(var(--hd, 0s) + var(--bd, 0s)); }
html.motion .hero-slide.is-leaving .w, html.motion .hero-slide.is-leaving .hs-b { opacity: 0; filter: blur(8px); translate: 0 -.4em;
  transition: opacity .45s var(--e-io), filter .45s var(--e-io), translate .5s var(--e-io); transition-delay: calc(var(--i, 0) * 12ms); }
html.motion .hero-slide.is-leaving .hs-b { translate: 0 -18px; }
html.motion .hero-slide .hero__inner { transition: translate .6s var(--e-out), opacity .6s var(--e-out); }
html.motion .hero-slider.is-dragging .hero-slide .hero__inner { transition: none; }
html.motion .hero-slider__viewport { cursor: grab; }
html.motion .hero-slider.is-dragging .hero-slider__viewport { cursor: grabbing; }

/* ---------- reduced motion: everything visible and still ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion .rv-steam, html.motion .rv-words .w, html.motion .rv-focus, html.motion .rv-panel, html.motion .rv-pop,
  html.motion .rv-drop, html.motion .rv-side, html.motion .rv-draw, html.motion .rv-haze,
  html.motion .how__steps .step, html.motion .get-started__steps .gstep, html.motion .step__num, html.motion .gstep__num {
    opacity: 1; filter: none; translate: none; scale: none; transition: none; }
  html.motion .how__line, html.motion .get-started__line { transform: none; }
  html.motion .why__soup, html.motion .download__bowl, html.motion .why__tomato, html.motion .trust__shield, html.motion .believe__mark,
  html.motion .download__hat, html.motion .feedback__heart, html.motion .feedback__star img { animation: none; }
  html.motion .hero-slider__bgimg.is-active, html.motion .hero-slider__bgimg.is-leaving { animation: none; }
  html.motion .hero-slider__bgimg { transition: opacity .6s ease; }
  html.motion .hero-slide .w, html.motion .hero-slide .hs-b { opacity: 1; filter: none; translate: none; }
  html.motion .hero-slide.is-leaving { visibility: hidden; }
  .btn::before { display: none; }
  .btn:hover, .btn:active, .card:hover, .post-card:hover { translate: none; scale: none; }
  .ph:hover img, .cta-chefs__photo:hover img, .card:hover .why-card__icon, .card:hover .join-card__icon,
  .feature:hover .feature__icon, .chef-feature:hover img, .social-list a:hover, .store-badges a:hover,
  .contact-app__badges a:hover, .contact-soc:hover { transform: none; }
  html[dir="rtl"] .cta-chefs__photo:hover img { transform: scaleX(-1); }
}


/* ==========================================================================
   RESPONSIVE — PROPOSAL
   The PDF only has 1440px artboards. 1024–1439: the canvas is scaled with
   `zoom` (site.js). ≤1023 (tablet) and ≤767 (mobile) below are proposed
   restacks of each desktop section: same colors, radii, fonts and order.
   ========================================================================== */

@media (max-width: 1023px) {
  :root { --gutter: 32px; }
  .site-canvas { width: 100%; }
  .site-canvas, .site-canvas * { max-width: 100%; }
  img { height: auto; }

  /* ---- header: logo + hamburger + button ---- */
  .site-header { height: 84px; display: flex; align-items: center; padding: 0 var(--gutter); }
  .site-header .logo { position: static; width: 140px; height: 40px; flex: none; }
  .site-header .btn-download { position: static; margin-left: auto; width: auto; height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
  .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: 12px; order: 3; }
  .nav-toggle span { display: block; width: 24px; height: 3px; margin: 0 auto; border-radius: 2px; background: var(--c-red); }
  .site-nav { position: absolute; left: 0; right: 0; top: 84px; z-index: 20; background: var(--c-white); box-shadow: 0 10px 20px rgba(0,0,0,.08); display: none; }
  body.nav-open .site-nav { display: block; }
  .site-nav ul { display: block; padding: 8px var(--gutter) 16px; }
  .site-nav li, .site-nav li:nth-child(n) { margin: 0; }
  .site-nav a { display: block; padding: 12px 0; border-bottom: 1px solid #f1f1f1; font-size: 17px; }

  /* ---- footer ---- */
  .site-footer { height: auto; padding: 40px var(--gutter) 28px; }
  .footer-brand { position: static; }
  .footer-brand .name { font-size: 34px; }
  .footer-brand .tag { margin-top: 8px; }
  .footer-cols { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
  .footer-col, .footer-col:nth-child(3) { width: auto; }
  .footer-col ul { margin-top: 12px; }
  .footer-line { position: static; margin: 32px 0 16px; }
  .footer-bottom { position: static; flex-wrap: wrap; gap: 8px; }

  /* ---- shared ---- */
  .btn { height: 54px; font-size: 16px; padding: 0 22px; }
  :root { --steam-blur: 8px; --steam-rise: 22px; } /* lighter entrances on tablets/phones */
  .grad-band, .download { height: auto; }
  .icon-circle { width: 84px; height: 84px; }
  .icon-circle svg, .icon-circle img { width: 50px; height: 50px; }

  /* ================= HOME ================= */
  .hero { height: auto; background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.35) 100%), var(--hero-img) no-repeat right top / cover; }
  .hero__inner { padding: 48px var(--gutter) 40px; }
  .hero__title .l1 { font-size: 38px; }
  .hero__title .l2 { font-size: 56px; margin-top: 0; }
  .hero__lead { max-width: 560px; margin: 18px 0 0; font-size: 18px; }
  .hero__actions { margin-top: 28px; flex-wrap: wrap; gap: 14px; }
  .hero__actions .btn { width: auto; min-width: 200px; margin: 0; padding-top: 0; }
  .hero__actions .btn--outline { margin-left: 0; }
  .hero__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 0; }
  .feature { width: auto; }
  .hero-slider { background: none; }
  .hero-slider__bg { inset: var(--gutter); border-radius: 20px; }
  /* content sits inside the rounded image card, never on its edge */
  .hero-slider { padding-bottom: calc(var(--gutter) + 32px); }
  .hero-slider .hero__inner { padding: 48px calc(var(--gutter) + 24px) 0; }
  .hero-slider .hero__features { margin: 40px calc(var(--gutter) + 24px) 0; }
  /*rtl:begin:ignore*/ /* AR mirrors the whole layer with scaleX(-1) instead */
  .hero-slider__bgimg--home, .hero-slider__bgimg--chef { background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.35) 100%), var(--hero-img) no-repeat right top / cover; }
  /*rtl:end:ignore*/

  .story { margin: 32px var(--gutter) 0; height: auto; padding: 32px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; border-radius: 24px; }
  .story__text { padding: 0; width: auto; }
  .story__title { font-size: 36px; }
  .story__p, .story__p + .story__p, .story__quote { width: auto; }
  .story__p { margin-top: 16px; font-size: 17px; }
  .story__p + .story__p { margin-top: 16px; }
  .story__quote { margin-top: 20px; font-size: 21px; }
  .story__media { position: static; width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .story__media .ph { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; }
  .story__media .ph--main { grid-column: 1 / 3; aspect-ratio: 350 / 270; }
  .story__media .ph img { position: static; width: 100%; height: 100%; object-fit: cover; }
  /* same crop as desktop (hands + pan only), scaled to the box */
  .story__media .ph--main img { position: absolute; left: -11.94%; top: -54.11%; width: 122.17%; height: 161.19%; object-fit: fill; }

  .why { padding: 40px var(--gutter) 0; }
  .why__soup, .why__tomato { display: none; }
  .why__title { font-size: 40px; }
  .why__sub { margin-top: 4px; }
  .why__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 0; }
  .why-card { width: auto; height: auto; padding: 28px 22px 32px; }
  .why-card__icon { width: 96px; height: 98px; }
  .why-card__title { font-size: 21px; }
  .why-card__text, .why-card:nth-child(n) .why-card__text { width: auto; margin-top: 16px; font-size: 17px; }

  .how { height: auto; padding: 44px var(--gutter) 48px; }
  .how__title { position: static; width: auto; font-size: 36px; }
  .how__phones { position: static; width: 100%; max-width: 480px; height: auto; margin: 24px auto 0; overflow: visible; }
  .how__phones img { position: static; width: 100%; height: auto; }
  .how__steps { position: static; width: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
  .how__line { display: none; }
  .step, .step--1, .step--2, .step--3 { position: static; width: auto; }
  .step__text, .step--3 .step__text { width: auto; }

  .cta-chefs { margin-top: 0; padding: 44px var(--gutter); display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; }
  .cta-chefs__photo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 470 / 350; }
  /* same crop as desktop (no face), scaled to the box */
  .cta-chefs__photo img { left: -35.55%; top: -107.83%; width: 209.3%; height: 209.86%; }
  .cta-chefs__body { position: static; }
  .cta-chefs__title { font-size: 36px; }
  .cta-chefs__sub { font-size: 21px; margin-top: 10px; }
  .cta-chefs__text { width: auto; margin-top: 16px; font-size: 17px; }
  .cta-chefs__btn { margin-top: 28px; width: auto; }

  .trust { height: auto; padding: 40px var(--gutter); display: grid; grid-template-columns: auto 1fr; gap: 24px 28px; align-items: center; }
  .trust__shield { position: static; width: 120px; height: auto; }
  .trust__body { position: static; width: auto; }
  .trust__title { font-size: 26px; }
  .trust__text { font-size: 17px; }
  .trust__btn { position: static; grid-column: 1 / -1; justify-self: start; width: auto; }

  .download { padding: 44px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; overflow: hidden; }
  .download__phones { position: static; width: 100%; height: auto; overflow: visible; }
  .download__phones img { position: static; width: 100%; height: auto; }
  .download__body { position: static; }
  .download__title { font-size: 36px; line-height: 1.15; }
  .download__text { font-size: 18px; line-height: 1.4; margin-top: 14px; }
  .download__hat { display: none; }
  .store-badges { flex-wrap: wrap; gap: 10px; }
  .store-badges .google { margin: 0; }
  .download__badges { height: auto; align-items: flex-start; }

  /* ================= ABOUT ================= */
  .about-intro, .about-mission, .faq-intro, .contact-intro, .legal { margin: 64px var(--gutter) 0; padding-top: 42px; }
  .about-vision { margin: 48px var(--gutter) 0; padding-top: 42px; }
  .about-intro .icon-circle, .about-vision .icon-circle, .about-mission .icon-circle, .faq-intro .icon-circle, .contact-intro .icon-circle, .legal .icon-circle { left: 50%; transform: translateX(-50%); }
  .about-intro__box, .about-vision__card, .about-mission__box, .faq-intro__box, .contact-intro__box { height: auto; padding: 64px 28px 36px; }
  .about-title, .faq-group__title, .legal__title { font-size: 34px; }
  .about-sub { font-size: 20px; }
  .about-p, .about-vision .about-p { font-size: 19px; max-width: none; }
  .about-p + .about-p { margin-top: 20px; }
  .believe { height: auto; margin-top: 40px; padding: 44px var(--gutter); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
  .believe__body { position: static; width: auto; }
  .believe__title { font-size: 34px; }
  .believe__lead, .believe__line, .believe__list { width: auto; }
  .believe__lead { font-size: 21px; }
  .believe__list { font-size: 17px; }
  .believe__mark { position: static; width: 200px; height: auto; justify-self: center; }
  .believe__btn { position: static; grid-column: 1 / -1; justify-self: start; width: auto; }

  /* ================= FOR HOME CHEFS ================= */
  .chef-hero { height: auto; background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.35) 100%), var(--hero-img) no-repeat right top / cover; }
  .chef-hero__inner { padding: 44px var(--gutter) 28px; }
  .chef-hero__title .l1 { font-size: 40px; }
  .chef-hero__title .l2 { font-size: 72px; margin-top: -6px; }
  .chef-hero__sub { margin-top: 4px; }
  .chef-hero__lead { width: auto; max-width: 560px; margin-top: 16px; font-size: 18px; }
  .chef-hero__btn { width: auto; padding-top: 0; }
  .chef-hero__features { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 0 var(--gutter) 40px; }
  .chef-feature, .chef-feature--1, .chef-feature--2, .chef-feature--3 { position: static; align-items: center; gap: 10px; }
  .chef-feature__label, .chef-feature--1 .chef-feature__label, .chef-feature--2 .chef-feature__label, .chef-feature--3 .chef-feature__label { position: static; }

  .why-join { padding: 40px var(--gutter) 0; }
  .why-join__title { font-size: 44px; }
  .why-join__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; }
  .join-card, .join-card + .join-card { width: auto; height: auto; margin: 0; padding: 28px 18px 30px; }
  .join-card__text, .join-card:nth-child(n) .join-card__text { width: auto; }

  .get-started { height: auto; margin-top: 44px; padding: 40px var(--gutter) 44px; }
  .get-started__blob { display: none; }
  .get-started__phones { position: static; width: 100%; max-width: 420px; height: auto; margin: 24px auto 0; overflow: visible; }
  .get-started__phones img { position: static; width: 100%; height: auto; }
  .get-started__title { position: static; font-size: 36px; white-space: normal; }
  .get-started__steps { position: static; width: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; margin-top: 32px; }
  .get-started__line { display: none; }
  .gstep { position: static; width: auto; }
  .gstep .gstep__text { width: auto; }

  .more-than { height: auto; margin-top: 0; padding: 44px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .more-than__body { position: static; }
  .more-than__title { font-size: 36px; }
  .more-than__underline { width: 220px; height: 5px; }
  .more-than__p { font-size: 18px; }
  .more-than__tags { margin-top: 24px; height: auto; display: flex; flex-wrap: wrap; gap: 12px 28px; }
  .more-than__tags li, .more-than__tags li:nth-child(n) { position: static; }
  .more-than__p2 { margin-top: 20px; }
  .feedback { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; height: auto; aspect-ratio: 720 / 303; justify-self: end; }
  .feedback__blob { left: 8.5%; width: 91.5%; height: 100%; }
  .feedback__title { left: 24.5%; top: 10%; font-size: clamp(28px, 9vw, 65px); }
  .feedback__star { width: 18.5%; height: auto; aspect-ratio: 1; top: 28%; }
  .feedback__star img { left: 23%; top: 22%; width: 55%; height: auto; }
  .feedback__heart { left: 64.6%; top: 8%; width: 21%; height: auto; aspect-ratio: 151 / 143; }
  .review { left: 22.5%; top: 36%; width: 62.6%; height: auto; aspect-ratio: 450.9 / 153.1; }
  .review__avatar { left: 3.2%; top: 18%; width: 8.9%; height: auto; }
  .review__name { left: 15.1%; top: 14.4%; font-size: clamp(11px, 2.6vw, 19px); }
  .review__meta { left: 15.1%; top: 31.4%; font-size: clamp(6px, 1.1vw, 8.1px); }
  .review__stars { left: 15%; top: 41%; width: 19.2%; height: auto; }
  .review__quote { left: 15.1%; top: 56.7%; font-size: clamp(7px, 1.55vw, 11.4px); }
  .review__thumb { left: 15%; top: 73%; width: 4.3%; height: auto; }
  .download--chefs { margin-top: 0; }
  .download__arrow, .download__bowl { display: none; }
  .download--chefs .download__body { top: auto; }
  .download--chefs .download__title { line-height: 1.15; }
  .download--chefs .download__sub { font-size: 20px; }

  /* ================= FAQ / LEGAL ================= */
  .faq-group { margin: 14px var(--gutter) 0; padding: 26px 24px 28px; }
  .faq-group--head, .faq-group--single, .faq-group--head.faq-group--pink { height: auto; padding-top: 26px; }
  .faq-group--head { padding-top: 32px; }
  .faq-group--head.faq-group--pink { margin-top: 28px; }
  .faq-group__title { margin: 0 0 12px; }
  .faq-item__q { font-size: 20px; }
  .faq-item__q img { width: 20px; height: 20px; margin-top: 2px; }
  .faq-item__a, .faq-item__a--w1000, .faq-item__a--w990, .faq-item__a--w1250 { width: auto; margin-top: 14px; font-size: 18px; }
  .faq-contact { position: static; display: inline-flex; margin-top: 20px; width: auto; }
  .legal__box { height: auto; padding: 64px 24px 24px; }
  .legal__title { margin-left: 0; }
  .legal__sub { margin-top: 12px; font-size: 20px; }
  .legal__lead { width: auto; font-size: 19px; }
  .legal-item { width: auto; height: auto; padding: 14px 0 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; }
  .legal-item h3, .legal-item:nth-child(n) h3 { padding-top: 0; font-size: 20px; }
  .legal-item p { width: auto; font-size: 18px; grid-column: 1; }
  .legal-item .btn, .legal-item:nth-child(n) .btn { position: static; width: auto; grid-column: 2; grid-row: 1 / 3; }
  .legal-end, .faq-end, .contact-end { height: 40px; }
}

/* ================= CONTACT ================= */
/* ≤1023 tablet: single column — form first, aside after it. */
@media (max-width: 1023px) {
  .contact-grid { margin: 28px var(--gutter) 0; grid-template-columns: 1fr; }
  .contact-form { grid-column: 1; grid-row: 1; padding: 32px 28px 36px; }
  .contact-aside { grid-column: 1; grid-row: 2; }
  html[dir="rtl"] .contact-form__title, html[dir="rtl"] .contact-card__title, html[dir="rtl"] .contact-app__label,
  html[dir="rtl"] .contact-form .ff-el-input--label label, html[dir="rtl"] .contact-form .ff-el-form-control,
  html[dir="rtl"] .contact-form .ff-btn-submit, html[dir="rtl"] .contact-form__lead,
  html[dir="rtl"] .contact-card__text, html[dir="rtl"] .contact-mail,
  html[dir="rtl"] .contact-intro .about-sub, html[dir="rtl"] .contact-intro .about-p { font-family: var(--f-ar); }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .hero, .chef-hero { background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.75)), var(--hero-img); }
  .hero-slider { background: none; }
  .hero-slider__bgimg--home, .hero-slider__bgimg--chef { background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.75)), var(--hero-img); }
  .hero__title .l1 { font-size: 30px; }
  .hero__title .l2 { font-size: 42px; }
  .hero__lead { font-size: 16px; }
  .hero__actions .btn { width: 100%; }
  .step__title br, .gstep__title br, .join-card__title br, .why-card__title br, .chef-feature__label br, .feature__label br, .story__p br, .about-p br, .believe__list br, .legal-item p br, .legal__lead br, .faq-item__a br, .chef-hero__lead br { display: none; }
  .hero__features { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .story { grid-template-columns: 1fr; padding: 24px 18px; }
  .story__title { font-size: 30px; }
  .why__cards, .how__steps, .why-join__cards, .get-started__steps, .footer-cols { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .why__title, .how__title, .why-join__title, .get-started__title, .more-than__title, .cta-chefs__title, .download__title, .believe__title { font-size: 30px; }
  .how__steps { gap: 28px; }
  /* vertical connector: draws down the icon column as the stacked steps scroll in */
  .how__steps, .get-started__steps { position: relative; left: auto; top: auto; }
  html.motion .how__line, html.motion .get-started__line { transform: scaleY(0); }
  .how__line, .get-started__line { display: block; top: 12px; bottom: 12px; width: 3px; height: auto;
    background-image: repeating-linear-gradient(to bottom, var(--c-red) 0 10px, transparent 10px 22px);
    transform-origin: top center; }
  .how__line { left: 43px; }
  .get-started__line { left: 17px; }
  .how__steps .step, .get-started__steps .gstep { position: relative; left: auto; top: auto; z-index: 1; }
  .step { display: grid; grid-template-columns: 90px 1fr; gap: 4px 16px; text-align: left; align-items: center; }
  .step__icon { grid-row: 1 / 3; width: 90px; height: 95px; }
  .step__num { width: 30px; height: 30px; line-height: 30px; font-size: 14px; left: 1px; top: 1px; }
  .step__title { margin-top: 0; font-size: 20px; }
  .step__text { margin: 0; width: auto; }
  .cta-chefs, .trust, .download, .believe, .more-than { grid-template-columns: 1fr; }
  .cta-chefs__photo { max-width: 420px; }
  .trust { text-align: left; }
  .trust__shield { width: 96px; }
  .download__phones { max-width: 300px; margin: 0 auto; }
  .believe__mark { width: 150px; }
  .gstep { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; text-align: left; align-items: center; }
  .gstep__num { grid-row: 1 / 3; margin: 0; }
  .gstep__title { margin-top: 0; }
  .gstep__text { margin: 0; width: auto; }
  .feedback { justify-self: stretch; max-width: none; }
  .chef-hero__title .l1 { font-size: 32px; }
  .chef-hero__title .l2 { font-size: 54px; margin-top: -4px; }
  .chef-hero__btn { width: 100%; }
  .faq-item__q { font-size: 18px; }
  .faq-item__a, .faq-item__a--w1000, .faq-item__a--w990, .faq-item__a--w1250 { font-size: 16px; }
  .legal-item { grid-template-columns: 1fr; }
  .legal-item .btn, .legal-item:nth-child(n) .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .about-p, .about-vision .about-p, .legal__lead { font-size: 17px; }

  /* ================= CONTACT (mobile) ================= */
  .contact-form { padding: 28px 20px 32px; }
  .contact-form__title { font-size: 28px; }
  .contact-form .ff-t-container { flex-direction: column; gap: 0; }
  .contact-form .ff_submit_btn_wrapper { margin-top: 24px; }
  .contact-form .ff-btn-submit { width: 100%; padding: 0 20px; }
  .contact-card { padding: 24px 20px; }
  .contact-app__badges { flex-wrap: wrap; }
}