/* ==========================================================================
   Home page only (src/pages/index.html).
   Class names are prefixed by the section they belong to, so nothing here
   can leak into another page.
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero{padding:60px 0 56px}
.home-hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
@media(max-width:900px){.home-hero__grid{grid-template-columns:1fr;gap:32px}}
.home-hero__title{margin-bottom:20px}
.home-hero__accent{font-family:var(--script);font-size:1em;color:var(--terra);
  display:inline-block;line-height:.9}
.home-hero__lede{font-size:1.13rem;color:var(--ink2);max-width:44ch;margin-bottom:28px}
.home-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.home-hero__shot{margin:0}
.home-hero__shot img{width:100%;height:auto;display:block;max-width:560px;margin:0 auto;background:transparent}
.home-hero__eyebrow{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:600;margin:0 0 14px}

/* ---------- "One pack, four cubes" explainer ---------- */
.pack-explainer{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  background:var(--tint);border-radius:18px;padding:30px 38px}
@media(max-width:820px){.pack-explainer{grid-template-columns:1fr;gap:20px;padding:26px;text-align:center}}
.pack-explainer__art{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;justify-content:center}
.pack-explainer__art svg{flex:0 0 auto}
@media(max-width:560px){.pack-explainer__art{gap:6px}.pack-explainer__cubes{gap:2px}.pack-explainer__cubes svg{width:28px;height:28px}.pack-explainer__art>svg{width:52px;height:52px}.pack-explainer__sign{font-size:1.2rem}}
@media(max-width:360px){.pack-explainer__cubes svg{width:24px;height:24px}.pack-explainer__art>svg{width:46px;height:46px}}
/* Note: these two come after the media queries above on purpose, so the
   sign and cube spacing stay the same size on phones (as in the original). */
.pack-explainer__sign{font-family:var(--disp);font-size:1.5rem;color:var(--soft)}
.pack-explainer__cubes{display:flex;gap:3px}
.pack-explainer__text h3{margin-bottom:6px}
.pack-explainer__text p{margin:0;font-size:.96rem;color:var(--ink2);max-width:46ch}

/* ---------- Page sections ---------- */
.home-section{padding:70px 0}
.home-section+.home-section{border-top:1px solid var(--rule)}
.home-section.home-section--flush{border-top:none;padding-top:8px}
.box-builder__head{max-width:52ch;margin-bottom:40px}
.flavours__heading{font-family:var(--brand);font-weight:400;font-size:clamp(2.2rem,5.4vw,3.4rem);
  letter-spacing:.04em;text-transform:uppercase;color:var(--logo-brown);line-height:1;margin:0 0 36px}
.box-builder__head p{color:var(--ink2);margin-top:14px;font-size:1.04rem}

/* ---------- Flavour cards ---------- */
.flavours__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.flavours__grid{grid-template-columns:1fr;gap:30px}}
.flavour-card{background:var(--tint);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.flavour-card__body{padding:28px 24px 26px;display:flex;flex-direction:column;flex:1}
.flavour-card__mascot{display:flex;justify-content:center;margin:-6px 0 10px}
.flavour-card__mascot img{width:120px;height:120px;display:block}
.flavour-card__tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.flavour-card__name{font-family:var(--script);font-weight:600;font-size:2.4rem;line-height:1.05;
  letter-spacing:.008em;color:var(--terra);margin-bottom:8px}
.flavour-card__sub{font-size:.92rem;color:var(--ink2);font-weight:500;margin-bottom:12px}
.flavour-card p{font-size:.94rem;color:var(--ink2)}
.flavour-card__ingredients{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
.flavour-card__ing-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.flavour-card__ingredients p{font-size:.85rem;color:var(--ink2);line-height:1.6;margin:0 0 12px}
.flavour-card__diet{display:flex;gap:6px;flex-wrap:wrap}
.flavour-card__diet span.flavour-card__diet-warn{border-color:var(--terra);color:var(--terra)}
.flavour-card__soon{font-size:.85rem;color:var(--soft);font-style:italic;margin:0}
.flavour-card__diet span{font-size:.7rem;letter-spacing:.05em;padding:4px 10px;border-radius:999px;
  background:var(--paper);color:var(--ink2);border:1px solid var(--rule)}
.flavour-card__arabic{color:var(--soft);font-weight:400}
@media(min-width:861px){@supports (grid-template-rows:subgrid){
  .flavours__grid{grid-template-rows:repeat(6,auto);row-gap:0}
  .flavour-card{display:grid;grid-row:span 6;grid-template-rows:subgrid}
  .flavour-card__body{grid-row:1/-1;display:grid;grid-template-rows:subgrid;row-gap:0}
  .flavour-card__ingredients{margin-top:0;display:flex;flex-direction:column}
  .flavour-card__ingredients .flavour-card__diet{margin-top:auto}
}}

/* ---------- Box builder: delivery schedule ---------- */
.box-schedule{display:flex;gap:34px;flex-wrap:wrap;background:var(--tint);border-radius:16px;
  padding:20px 24px;margin-bottom:28px}
.box-schedule[hidden]{display:none}
.box-schedule__col label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);margin-bottom:10px}
.box-schedule select{border:1.5px solid var(--rule);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:10px 16px;font-family:inherit;font-size:.9rem;min-width:190px}
.box-schedule select:focus{outline:none;border-color:var(--terra)}
.box-schedule__note{flex-basis:100%;font-size:.84rem;color:var(--ink2);margin:6px 0 0;
  padding-top:14px;border-top:1px solid var(--rule);max-width:56ch}
.box-summary__schedule{font-size:.84rem;color:var(--ink2);background:var(--paper);border-radius:12px;
  padding:12px 14px;margin:16px 0 0;line-height:1.5}
.box-summary__schedule b{color:var(--ink)}

/* ---------- Box builder: layout and soupscription toggle ---------- */
.box-builder__layout{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
@media(max-width:960px){.box-builder__layout{grid-template-columns:1fr;gap:32px}}
.box-builder__toggle{display:inline-flex;background:var(--tint);border-radius:999px;padding:5px;margin-bottom:12px;gap:4px}
.box-builder__toggle button{border:none;background:none;color:var(--ink2);padding:11px 22px;border-radius:999px;
  font-size:.93rem;font-weight:500;transition:background .16s,color .16s}
.box-builder__toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.box-builder__toggle-note{font-size:.88rem;color:var(--soft);margin-bottom:24px}
.box-picker__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.box-picker__head h3{font-size:1.25rem;margin-bottom:2px}
.box-picker__head p{margin:0;font-size:.88rem;color:var(--soft)}

/* Flavour name images at each size they appear on this page */
.flavour-card__name .flavour-name-img{height:24px}
.box-picker-row__name .flavour-name-img{height:19px;margin:4px 0 5px}
.box-art__name .flavour-name-img{height:14px;margin:3px 0 3px}

/* Empty slots in the box line-up */
.box-art__pack.box-art__pack--ghost{width:24px;height:24px;border:1.4px dashed rgba(58,46,34,.35);background:transparent}
.box-art__count.box-art__count--ghost{font-size:.78rem;color:var(--soft);white-space:normal;text-align:right;max-width:110px;line-height:1.3}

/* ---------- "Freezer to bowl" band ---------- */
.home-section.home-section--compact{padding:44px 0}
.how-to{text-align:center;max-width:780px;margin:0 auto}
.how-to h2{font-size:clamp(1.4rem,3vw,1.8rem);margin-bottom:10px}
.how-to__steps{color:var(--ink2);font-size:1rem;margin:0;text-wrap:balance}
.how-to__steps i{font-style:normal;color:var(--terra);margin:0 6px}

/* ---------- Savings track (subscriber discount tiers) ---------- */
.savings-track__rail{position:relative;height:58px;margin:6px 8px 0}
.savings-track__line{position:absolute;left:0;right:0;top:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--rule) 0,var(--rule) 86%,transparent 100%)}
.savings-track__fill{position:absolute;left:0;top:24px;height:3px;background:var(--terra);border-radius:3px;transition:width .25s}
.savings-track__stop{position:absolute;top:18px;transform:translateX(-50%);text-align:center}
.savings-track__stop i{display:block;width:15px;height:15px;border-radius:50%;background:var(--paper);border:2px solid var(--rule);margin:0 auto}
.savings-track__stop.is-reached i{background:var(--terra);border-color:var(--terra)}
.savings-track__stop span{display:block;font-size:.72rem;color:var(--soft);margin-top:4px;white-space:nowrap;line-height:1.25}
.savings-track__stop b{font-family:var(--disp);font-size:.9rem;color:var(--ink2)}
.savings-track__marker{position:absolute;top:-4px;transform:translateX(-50%);background:var(--terra);color:#fff;font-size:.7rem;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap;transition:left .25s}
.savings-track__message{font-size:.9rem;font-weight:500;color:var(--ink);margin-top:16px}
.savings-track{background:var(--tint);border-radius:14px;padding:14px 16px;margin:0 0 20px}

/* ---------- Flavour picker rows ---------- */
.ingredients-toggle{margin-top:6px}
.ingredients-toggle summary{font-size:.78rem;color:var(--terra);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px}
.ingredients-toggle summary::-webkit-details-marker{display:none}
.ingredients-toggle summary::after{content:"+";font-size:.95rem;line-height:1}
.ingredients-toggle[open] summary::after{content:"\2212"}
.ingredients-toggle p{font-size:.8rem;color:var(--ink2);line-height:1.55;margin:6px 0 0;max-width:46ch}
.ingredients-toggle em{color:var(--soft);font-style:normal;font-size:.76rem}
.box-picker-row.box-picker-row--soon{opacity:.62}
.box-picker-row__soon-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--rule);border-radius:999px;padding:6px 12px;white-space:nowrap}
.box-picker-row.box-picker-row--addon{background:none;border:1.5px dashed var(--rule)}
.box-picker-row__optional{font-family:var(--ui);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);vertical-align:middle;margin-left:6px}
.box-picker-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--tint);border-radius:16px;padding:14px 18px;margin-bottom:12px}
.box-picker-row__thumb{width:64px;flex:0 0 64px}
.box-picker-row__name{font-family:var(--script);font-weight:600;font-size:1.85rem;line-height:1.15;
  letter-spacing:.008em;color:var(--terra)}
.box-picker-row__meta{font-size:.84rem;color:var(--soft)}
.qty-stepper{display:flex;align-items:center;gap:5px}
.qty-stepper button{width:36px;height:36px;border-radius:50%;border:none;background:var(--paper);
  color:var(--ink);font-size:1.15rem;display:grid;place-items:center;line-height:1;
  transition:background .15s,color .15s}
.qty-stepper button:hover:not(:disabled){background:var(--terra);color:#fff}
.qty-stepper button:disabled{opacity:.3;cursor:not-allowed}
.qty-stepper__count{min-width:32px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.box-builder__layout>*,.box-picker-row>*{min-width:0}
.box-picker-row__name{overflow-wrap:break-word}
@media(max-width:480px){.box-picker-row{gap:10px;padding:12px 12px}.box-picker-row__thumb{width:50px;flex-basis:50px}.box-picker-row__name{font-size:1.45rem;overflow-wrap:normal;word-break:keep-all}}

/* ---------- Box summary (right-hand panel) ---------- */
.box-summary{background:var(--tint);border-radius:18px;padding:28px;position:sticky;top:84px}
.early-sub-flag{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin-bottom:20px}
.early-sub-flag[hidden]{display:none}
.early-sub-flag strong{display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--terra);margin-bottom:5px}
.early-sub-flag span{font-size:.85rem;line-height:1.5;color:var(--ink2)}
.early-sub-flag a{display:inline-block;margin-top:9px;color:var(--terra);font-size:.8rem;
  text-decoration:underline;text-underline-offset:3px}
.early-sub-flag a::after{content:" \2192"}
.early-sub-flag a:hover{color:var(--ink)}
.box-summary h3{margin-bottom:4px}
.box-summary__caption{font-size:.85rem;color:var(--soft);margin-bottom:20px}

/* The box line-up drawing inside the summary */
.box-art{margin:0 0 18px}
.box-art__box{position:relative;border:2px solid var(--ink);border-radius:14px;background:var(--paper);margin-top:4px}
.box-art__lineup{display:flex;flex-direction:column}
.box-art__row{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:56px}
.box-art__row+.box-art__row{border-top:1.2px dashed rgba(58,46,34,.28)}
.box-art__main{flex:1;min-width:0}
.box-art__name{font-family:var(--script);font-size:1.3rem;line-height:1.1;color:var(--ink)}
.box-art__packs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.box-art__pack{display:grid;grid-template-columns:1fr 1fr;gap:1px;width:24px;padding:2px;border:1px solid rgba(58,46,34,.3);border-radius:5px;background:#fff}
.box-art__pack svg{width:100%;height:auto;display:block}
.box-art__count{font-size:.8rem;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.box-art__count b{font-family:var(--disp);font-size:1.15rem;color:var(--ink)}
.box-art__row--toppings .box-art__name{font-family:var(--brand);font-size:1rem;letter-spacing:.02em;color:var(--crouton);text-transform:uppercase}
.box-art__bag{display:block;width:22px}
.box-art__bag svg{display:block;width:22px;height:auto}
.box-art__bag.is-new{animation:box-art-drop .34s cubic-bezier(.3,.9,.4,1) backwards}
.box-art__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:9px;border-top:1.5px dashed rgba(58,46,34,.3);font-size:.85rem;color:var(--ink2)}
.box-art__total b{font-family:var(--disp);font-size:1.1rem;color:var(--ink)}
.box-art__pack.is-new{animation:box-art-drop .34s cubic-bezier(.3,.9,.4,1) backwards}
@keyframes box-dock-hop{0%{transform:none}35%{transform:translateY(-8px)}70%{transform:none}85%{transform:translateY(-2px)}100%{transform:none}}
.box-dock__chip.is-hopping{animation:box-dock-hop .5s ease-out}
.box-dock__chip{position:relative;display:inline-block;width:40px;height:40px;margin-right:2px}
.box-dock__chip img{width:40px;height:40px;display:block}
.box-dock__chip i{position:absolute;right:-2px;bottom:0;font-style:normal;background:var(--ink);color:#fff;font-size:.62rem;font-weight:600;border-radius:999px;padding:0 5px;line-height:1.5}
.box-dock__empty{font-size:.78rem;color:var(--soft)}

.box-art svg{width:100%;height:auto}
@keyframes box-art-drop{from{transform:translateY(-22px);opacity:0}to{transform:none;opacity:1}}
.box-art .is-new{animation:box-art-drop .34s cubic-bezier(.3,.9,.4,1) backwards}

/* Price rows */
.box-summary__mix{list-style:none;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--rule)}
.box-summary__mix[hidden]{display:none}
.box-summary .box-summary__mix{display:none!important}
.box-summary__mix li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.92rem;color:var(--ink2)}
.box-summary__mix-dot{width:13px;height:13px;border-radius:3px;flex:0 0 13px}
.box-summary__mix-count{margin-left:auto;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.box-summary__row[hidden]{display:none}
.box-summary__row{display:flex;justify-content:space-between;padding:8px 0;font-size:.95rem;color:var(--ink2)}
.box-summary__row.box-summary__row--total{border-top:1px solid var(--rule);margin-top:10px;padding-top:16px;
  font-family:var(--disp);font-size:1.7rem;font-weight:700;color:var(--ink)}
.box-summary__saving{color:var(--sage);font-weight:600}
.box-summary__per-serving{font-size:.84rem;color:var(--soft);text-align:right;margin-top:-2px}
.box-summary__nudge{font-size:.87rem;color:var(--terra);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.box-summary__cta{width:100%;text-align:center;margin-top:20px}
.box-summary__cta:disabled{background:var(--tint2);color:var(--soft);cursor:not-allowed}

/* ---------- Founder story ---------- */
.home-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
@media(max-width:860px){.home-story{grid-template-columns:1fr;gap:28px}}
.home-story>*{min-width:0}
.home-story__photo{width:100%;height:auto;display:block;border-radius:18px}
.home-story h2{margin-bottom:18px}
.home-story p{font-size:1.05rem;color:var(--ink2)}
.home-story__byline{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);margin-top:20px}

/* ---------- Customer messages ---------- */
.home-reviews{overflow:hidden}
.home-reviews h2{margin-bottom:10px}
.home-reviews__sub{color:var(--ink2);margin-bottom:34px}
.home-reviews__marquee{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.home-reviews__track{display:flex;gap:16px;width:max-content;animation:home-reviews-slide 46s linear infinite}
/* Pause on hover only where there is a real mouse. On phones a tap "sticks" as hover and stopped the reviews. */
@media (hover:hover) and (pointer:fine){.home-reviews__marquee:hover .home-reviews__track{animation-play-state:paused}}
@keyframes home-reviews-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Phones, tablets and reduced motion: no moving strip, just a row you swipe through. */
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .home-reviews__track{animation:none;overflow-x:auto;width:100%;padding:0 4px 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;
    box-sizing:border-box;padding:0 20px 10px;scroll-padding:0 20px}
  .home-reviews__marquee{mask-image:none;-webkit-mask-image:none}
}
.review-card{background:var(--tint);border-radius:16px;padding:22px 24px;width:330px;flex:0 0 330px}
.review-card p{font-family:var(--disp);font-size:1.02rem;line-height:1.5;color:var(--ink);margin:0 0 12px}
.review-card__who{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.review-card{scroll-snap-align:start;margin:0}}
@media (max-width:480px){.review-card{width:78vw;flex-basis:78vw}} /* the next card peeks in, so people know to swipe */

/* ---------- Early subscribers and waitlist form ---------- */
.early-subs{background:var(--tint);color:var(--ink);border-radius:22px;padding:52px 48px}
@media(max-width:700px){.early-subs{padding:34px 26px}}
.early-subs h2{color:var(--ink);margin-bottom:16px}
.early-subs__lede{font-size:1.13rem;color:var(--ink2);max-width:50ch;margin-bottom:28px}
.early-subs__perks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0 26px}
@media(max-width:700px){.early-subs__perks{grid-template-columns:1fr}}
.early-subs__perk{font-size:.95rem;color:var(--ink2);padding-left:22px;position:relative}
.early-subs__perk::before{content:"✦";position:absolute;left:0;color:var(--terra)}
.early-subs__note{text-align:left;margin-top:14px;color:var(--soft)}
.early-subs__cta{display:inline-block}

/* Story details: the FITO name line and the Made in Dubai badge */
.home-story__name-line{margin-top:4px}
.home-story__acronym{font-family:var(--brand);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.12em;color:var(--logo-brown);white-space:nowrap}
.home-story__acronym b{color:var(--terra);font-weight:400}
.home-story__badge{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;margin-top:22px}

/* ---------- Key facts strip ---------- */
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);
  border-radius:14px;background:var(--tint);overflow:hidden;margin:22px auto 0;max-width:620px}
.home-stats__item{padding:14px 12px;text-align:center}
.home-stats__item+.home-stats__item{border-left:1px solid var(--rule)}
.home-stats__item b{display:block;font-family:var(--disp);font-size:1.35rem;line-height:1;color:var(--terra);font-weight:600}
.home-stats__item span{display:block;margin-top:6px;font-size:.78rem;color:var(--ink2);line-height:1.4}
@media(max-width:480px){.home-stats__item{padding:12px 6px}.home-stats__item b{font-size:1.15rem}.home-stats__item span{font-size:.72rem}}

/* ---------- Mobile "your box" dock ---------- */
.box-dock{display:none}
@media(max-width:960px){
  .box-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:12px;
    background:var(--paper-fixed);border-top:1px solid var(--rule);box-shadow:0 -10px 28px -14px rgba(58,46,34,.35);
    padding:8px 14px calc(8px + env(safe-area-inset-bottom));transform:translateY(110%);
    transition:transform .25s cubic-bezier(.4,0,.2,1)}
  .box-dock.is-visible{transform:none}
  .box-dock__art{flex:0 0 auto;max-width:140px;height:48px;display:flex;align-items:center;overflow:hidden}
  .box-dock__art svg{max-width:100%;max-height:100%;width:auto;height:auto}
  .box-dock__text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .box-dock__text b{font-family:var(--disp);font-size:1rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .box-dock__text span{font-size:.8rem;color:var(--soft)}
  .box-dock__btn{border:none;background:var(--terra);color:#fff;border-radius:999px;padding:11px 18px;font-weight:500;font-size:.9rem;white-space:nowrap}
}