/* =========================================================
   FOODLY — premium food delivery landing page
   1. Tokens          6. Hero            11. Promo
   2. Reset/base      7. Ticker          12. App experience
   3. Layout          8. Stats           13. Spread
   4. Typography      9. Categories      14. Quotes
   5. Components     10. How / Rest      15. Download / CTA / Footer
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#12100F;
  --ink-2:#4A423E;
  --ink-3:#6E6560;
  --paper:#FFFFFF;
  --cream:#FFF7EF;
  --sand:#FAF6F1;
  --orange:#F4511E;
  --orange-hot:#FF6A00;
  --ember:#D93A06;
  --peach:#FFB067;
  --peach-soft:#FFE0C2;

  --line:rgba(18,16,15,.14);
  --line-soft:rgba(18,16,15,.075);
  --line-ink:rgba(255,247,239,.16);

  --shell-w:1320px;
  --shell-hero:1560px;
  --pad:clamp(20px,5vw,56px);

  --f-display:"Bricolage Grotesque","Syne","Space Grotesk",system-ui,sans-serif;
  --f-text:"DM Sans","Manrope",system-ui,-apple-system,sans-serif;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --t:.32s var(--e);

  --nav-h:74px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
cite{font-style:normal}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 18px;background:var(--ink);color:var(--cream);
  font-size:14px;font-weight:500;transform:translateY(-160%);transition:transform .25s var(--e);
}
.skip-link:focus{transform:none}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:90;pointer-events:none;background:transparent}
.progress__bar{display:block;height:100%;width:0;background:var(--ember);transform-origin:0 50%}

/* ---------- 3. LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell-w);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,8.5vw,124px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}

/* ---------- 4. TYPOGRAPHY ---------- */
.sechead{margin-bottom:clamp(34px,4.4vw,60px)}
.sechead--split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sechead__title{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"wdth" 94,"opsz" 60;
  font-size:clamp(2.1rem,4.4vw,3.7rem);
  line-height:.98;
  letter-spacing:-.032em;
}

.eyebrow{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;
  font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow__dot{width:6px;height:6px;background:var(--orange);flex:none}
.eyebrow--onOrange{color:rgba(18,16,15,.72)}
.eyebrow--onOrange .eyebrow__dot{background:var(--ink)}
.eyebrow--onInk{color:rgba(255,247,239,.6)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--ember);
  padding-bottom:3px;border-bottom:1px solid currentColor;
  transition:gap var(--t),color var(--t);
}
.link-arrow:hover{gap:13px;color:var(--ink)}
span.hero__line {
    font-size: 88px !important;
}
/* ---------- 5. COMPONENTS ---------- */
/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:2px;border:1px solid transparent;
  font-family:var(--f-text);font-size:14.5px;font-weight:500;letter-spacing:.005em;
  line-height:1;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.btn__ico{transition:transform var(--t)}
.btn:hover .btn__ico{transform:translateX(4px)}
.btn--sm{padding:12px 19px;font-size:13.5px}
.btn--lg{padding:19px 34px;font-size:15.5px}

.btn--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--solid:hover{background:var(--ember);border-color:var(--ember);transform:translateY(-2px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(18,16,15,.42)}
.btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translateY(-2px)}

.btn--light{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--light:hover{background:var(--paper);border-color:var(--paper);transform:translateY(-2px)}

/* store badges */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 20px 11px;border-radius:2px;border:1px solid;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.store__txt{display:flex;flex-direction:column;line-height:1.15}
.store__sub{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.72}
.store__name{font-family:var(--f-display);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.store--dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.store--dark:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.store--light{background:transparent;color:var(--cream);border-color:var(--line-ink)}
.store--light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-2px)}

/* reveal — hidden only when JS can bring it back (see the .js flag in <head>) */
.js .reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .72s var(--e-out) var(--d,0ms),transform .72s var(--e-out) var(--d,0ms);
  margin-top: 25px;
}

/* cursor */
.cursor{position:fixed;inset:0;z-index:120;pointer-events:none;display:none}
.cursor__ring,.cursor__dot{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor__ring{width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(18,16,15,.4);transition:width .25s var(--e),height .25s var(--e),margin .25s var(--e),border-color .25s var(--e),background .25s var(--e)}
.cursor__dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--ink)}
.cursor.is-active .cursor__ring{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:var(--ember);background:rgba(217,58,6,.08)}
.cursor.on-dark .cursor__ring{border-color:rgba(255,247,239,.5)}
.cursor.on-dark .cursor__dot{background:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .35s var(--e),border-color .35s var(--e)}
.nav::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .35s var(--e)}
.nav--scrolled{background:rgba(255,247,239,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav--scrolled::after{background:var(--line-soft)}
.nav__inner{display:flex;align-items:center;gap:clamp(20px,3vw,46px);height:var(--nav-h)}

.logo{display:inline-flex;align-items:center;gap:10px}
.logo__mark{display:grid;place-items:center;width:30px;height:30px;background:var(--ember);color:var(--cream);flex:none}
.logo__word{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 92;font-size:20px;letter-spacing:.005em;text-transform:uppercase}
.logo--light{color:var(--cream)}
.logo--light .logo__mark{background:var(--orange)}

.nav__links{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-right:auto}
.nav__link{position:relative;font-size:14px;font-weight:450;padding-block:6px;color:rgba(18,16,15,.82);transition:color var(--t)}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--ink);transition:width .3s var(--e)}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{width:100%}

.nav__actions{display:flex;align-items:center;gap:14px}
.nav__login{font-size:14px;font-weight:450;color:rgba(18,16,15,.82);transition:color var(--t)}
.nav__login:hover{color:var(--ember)}
.nav__burger{display:none;padding:6px;margin-right:-6px}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--cream);display:flex;flex-direction:column;overflow-y:auto}
.mmenu[hidden]{display:none}
.mmenu__head{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);flex:none}
.mmenu__close{padding:6px;margin-right:-6px;color:var(--cream)}
.mmenu__nav{display:flex;flex-direction:column;justify-content:center;flex:1;gap:6px;padding-block:24px}
.mmenu__nav a{
  font-family:var(--f-display);font-weight:600;font-variation-settings:"wdth" 94;
  font-size:clamp(2rem,9vw,3rem);line-height:1.16;letter-spacing:-.03em;
  padding-block:8px;border-bottom:1px solid var(--line-ink);
  opacity:0;transform:translateY(14px);
}
.mmenu.is-open .mmenu__nav a{opacity:1;transform:none;transition:opacity .5s var(--e-out) var(--i,0ms),transform .5s var(--e-out) var(--i,0ms)}
.mmenu__nav a:last-child{border-bottom:0}
.mmenu__foot{padding-block:24px 40px;flex:none}
.mmenu__foot .btn{width:100%}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  overflow-x:clip;
  padding-top:var(--nav-h);
  background:linear-gradient(118deg,#FDB271 0%,#FDA458 32%,#FD9B49 62%,#FC8B3C 100%);
}
.hero .shell{max-width:var(--shell-hero)}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(24px,3.4vw,60px);
  min-height:min(880px,calc(100svh - var(--nav-h)));
  padding-block:clamp(48px,6vw,84px);
}
.hero__copy{position:relative;z-index:2;max-width:660px}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(2.75rem,7vw,6.1rem);
  line-height:.9;
  letter-spacing:-.034em;
  text-transform:uppercase;
  margin:0 0 26px;
}
.hero__line{display:block;font-weight:800;font-variation-settings:"wdth" 90,"opsz" 96}
.hero__line--thin{font-weight:300;font-variation-settings:"wdth" 100,"opsz" 96;letter-spacing:-.028em}

.hero__lede{max-width:44ch;font-size:1.06rem;color:rgba(18,16,15,.78);margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.hero__trust{margin-top:clamp(34px,4.5vw,52px);padding-top:22px;border-top:1px solid rgba(18,16,15,.2)}
.hero__trustLine{font-size:14px;color:rgba(18,16,15,.78);margin-bottom:12px}
.hero__trustLine strong{font-weight:600;color:var(--ink)}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px}
.hero__facts li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(18,16,15,.8)}
.hero__facts svg{color:var(--ember)}

.hero__media{
  position:relative;z-index:1;
  margin-right:calc(-1 * (var(--pad) + max(0px,(100vw - var(--shell-hero)) / 2)));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%);
  mask-image:linear-gradient(90deg,transparent 0,#000 17%);
}
.hero__media img{
  width:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}

/* hero decoration */
.hero__ring{
  position:absolute;left:-260px;top:50%;width:660px;height:660px;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
  transform:translateY(-50%);pointer-events:none;z-index:0;
}
.hero__dots{
  position:absolute;left:clamp(12px,3vw,44px);bottom:38px;width:132px;height:96px;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.4px,transparent 1.5px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(105deg,#000,transparent);
  mask-image:linear-gradient(105deg,#000,transparent);
}

/* hero load-in — same progressive-enhancement guard */
.js .hero__el{opacity:0;transform:translateY(22px)}
body.is-ready .hero__el{
  opacity:1;transform:none;
  transition:opacity .85s var(--e-out) var(--hd,0ms),transform .85s var(--e-out) var(--hd,0ms);
}

/* ---------- 7. TICKER ---------- */
.ticker{background:var(--ink);color:var(--cream);overflow:hidden;padding-block:15px}
.ticker__track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center}
.ticker__set span{
  font-family:var(--f-display);font-weight:500;font-variation-settings:"wdth" 96;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.ticker__sep{display:block;width:5px;height:5px;background:var(--orange);margin-inline:26px;flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 8. STATS ---------- */
.stats{background:var(--cream)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:clamp(26px,3vw,40px) clamp(16px,2vw,30px) 6px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat__num{
  font-family:var(--f-display);font-weight:300;font-variation-settings:"wdth" 96,"opsz" 96;
  font-size:clamp(2.4rem,5vw,4.3rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.stat__label{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 9. CATEGORIES ---------- */
.cats{background:var(--paper)}
.cats__scroll{overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
.cats__scroll::-webkit-scrollbar{display:none}
.cats__row{display:flex;min-width:min-content;border-top:1px solid var(--line)}
.cat{
  flex:1 0 auto;min-width:128px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:26px 16px 24px;
  border-right:1px solid var(--line-soft);
  border-top:2px solid transparent;margin-top:-1px;
  color:var(--ink-2);
  scroll-snap-align:start;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.cat:last-child{border-right:0}
.cat span{font-size:13.5px;font-weight:450;letter-spacing:.01em}
.cat__ico{width:28px;height:28px;transition:transform .35s var(--e)}
.cat:hover{color:var(--ink);background:var(--sand)}
.cat:hover .cat__ico{transform:translateY(-3px)}
.cat[aria-pressed="true"]{color:var(--ember);border-top-color:var(--orange)}

/* ---------- 10a. HOW IT WORKS ---------- */
.how{background:var(--sand)}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.step{padding:clamp(30px,3.4vw,44px) clamp(20px,2.6vw,40px) 0;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step__num{
  font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 88,"opsz" 96;
  font-size:clamp(3.4rem,6.4vw,5.6rem);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.3px rgba(18,16,15,.3);
  margin-bottom:clamp(24px,3vw,40px);
  transition:-webkit-text-stroke-color .4s var(--e),color .4s var(--e);
}
.step:hover .step__num{-webkit-text-stroke-color:var(--ember)}
.step__ico{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);color:var(--ember);margin-bottom:20px;transition:background var(--t),color var(--t),border-color var(--t)}
.step:hover .step__ico{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.step__title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;margin-bottom:9px}
.step__text{font-size:.95rem;color:var(--ink-3);max-width:34ch;padding-bottom:8px}

/* ---------- 10b. RESTAURANTS ---------- */
.rest{background:var(--cream)}
.rest__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{display:flex;flex-direction:column;background:var(--paper);transition:background var(--t)}
.card__media{position:relative;aspect-ratio:4/3;background:var(--ground,#FFE3C6);overflow:hidden;display:grid;place-items:center}
.card__mark{display:grid;place-items:center;transition:transform .55s var(--e)}
.card__mark svg{width:clamp(112px,13vw,152px);height:auto}
.card:hover .card__mark{transform:scale(1.035)}
.card__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--paper);color:var(--ink);
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 10px;
}
.card__fav{
  position:absolute;top:14px;right:14px;z-index:2;
  display:grid;place-items:center;width:32px;height:32px;
  background:var(--paper);color:var(--ink-2);
  transition:color var(--t),background var(--t);
}
.card:hover .card__fav{color:var(--ember)}
.card__body{padding:22px clamp(18px,2vw,26px) 24px;display:flex;flex-direction:column;flex:1}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card__name{font-family:var(--f-display);font-weight:600;font-size:1.16rem;letter-spacing:-.022em;line-height:1.24}
.card__go{color:var(--ink-3);opacity:0;transform:translate(-4px,4px);transition:opacity .3s var(--e),transform .3s var(--e),color .3s var(--e)}
.card:hover .card__go{opacity:1;transform:none;color:var(--ember)}
.card__cuisine{display:block;font-size:13.5px;color:var(--ink-3);margin-top:5px}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;margin-top:16px;font-size:13px;color:var(--ink-2)}
.card__meta > span{display:inline-flex;align-items:center;gap:6px}
.card__meta i{font-style:normal;color:var(--ink-3)}
.card__meta .ico-star{color:var(--orange-hot)}
.card__meta svg{color:var(--ink-3)}
.card__meta .ico-star{color:var(--orange-hot)}
.card__loc{
  display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- 11. PROMO ---------- */
.promo{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(500px,42vw,700px);background:linear-gradient(105deg,#FFB04C 0%,#FF9835 55%,#F0702A 100%);overflow:hidden}
.promo__bg{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%);mask-image:linear-gradient(90deg,transparent 0,#000 36%)}
.promo__inner{width:100%;padding-block:clamp(52px,6vw,88px)}
.promo__copy{max-width:min(560px,48%)}
.promo__title{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 90,"opsz" 96;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:18px;
}
.promo__lede{font-size:1.02rem;color:rgba(18,16,15,.8);max-width:42ch}

/* ---------- 12. APP EXPERIENCE ---------- */
.appx{background:var(--cream)}
.appx__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(30px,5vw,86px);align-items:center}
.appx__media img{width:100%}
.feats{margin-top:clamp(10px,2vw,20px)}
.feat{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line);transition:transform .35s var(--e)}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat:hover{transform:translateX(5px)}
.feat__ico{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);color:var(--ember);transition:background var(--t),color var(--t),border-color var(--t)}
.feat:hover .feat__ico{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.feat__title{font-family:var(--f-display);font-weight:600;font-size:1.12rem;letter-spacing:-.02em;margin-bottom:5px}
.feat__text{font-size:.94rem;color:var(--ink-3);max-width:46ch}

/* ---------- 13. SPREAD ---------- */
.spread{background:var(--paper)}
.spread__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,70px);align-items:end}
.spread__media{display:block;overflow:hidden;background:var(--paper)}
.spread__media img{width:100%;transition:transform .8s var(--e)}
.spread__fig:hover .spread__media img{transform:scale(1.02)}
.spread__cap{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.spread__cap h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.024em;margin-bottom:8px}
.spread__cap p{font-size:.95rem;color:var(--ink-3);max-width:46ch}

/* ---------- 14. QUOTES ---------- */
.quotes{background:var(--sand)}
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.quote{padding:clamp(28px,3vw,42px) clamp(20px,2.4vw,38px) 0;border-right:1px solid var(--line)}
.quote:last-child{border-right:0}
.quote__mark{
  display:block;font-family:var(--f-display);font-weight:700;font-size:3.6rem;line-height:.5;
  color:var(--orange);margin-bottom:22px;
}
.quote__text{font-family:var(--f-display);font-weight:400;font-size:1.16rem;line-height:1.44;letter-spacing:-.016em;margin-bottom:22px}
.quote__stars{display:flex;gap:3px;color:var(--orange-hot);margin-bottom:16px}
.quote__by{display:flex;flex-direction:column;gap:3px;padding-bottom:6px}
.quote__by cite{font-size:14px;font-weight:500}
.quote__by span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 15a. DOWNLOAD ---------- */
.dl{background:var(--ink);color:var(--cream);padding-block:clamp(64px,8vw,116px);overflow:hidden}
.dl__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,74px);align-items:center}
.dl__title{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 90,"opsz" 96;
  font-size:clamp(2.1rem,5vw,3.9rem);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:18px;
}
.dl__lede{font-size:1.02rem;color:rgba(255,247,239,.72);max-width:40ch}
.dl__pills{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.dl__pills li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,247,239,.66)}
.dl__pills svg{color:var(--orange-hot)}
.dl__media img{width:100%}

/* ---------- 15b. FINAL CTA ---------- */
.cta{background:var(--ember);color:var(--cream);padding-block:clamp(72px,10vw,148px);text-align:center}
.cta__inner{display:flex;flex-direction:column;align-items:center}
.cta__title{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 92,"opsz" 96;
  font-size:clamp(3.1rem,13vw,10rem);line-height:.84;letter-spacing:-.022em;text-transform:uppercase;
  margin-bottom:22px;
}
.cta__lede{font-size:1.06rem;color:rgba(255,247,239,.86);max-width:34ch;margin-bottom:36px}

/* ---------- 15c. FOOTER ---------- */
.foot{background:#0B0A0A;color:var(--cream);padding-top:clamp(56px,7vw,92px);overflow:hidden}
.foot__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:clamp(36px,5vw,72px);padding-bottom:clamp(40px,5vw,68px)}
.foot__tag{margin:22px 0 26px;font-size:.95rem;color:rgba(255,247,239,.6);max-width:34ch}
.foot__social{display:flex;gap:10px}
.foot__social a{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line-ink);color:rgba(255,247,239,.8);
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.foot__social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink);transform:translateY(-2px)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.foot__col h3{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,247,239,.45);margin-bottom:18px}
.foot__col li+li{margin-top:11px}
.foot__col a{font-size:14.5px;color:rgba(255,247,239,.82);transition:color var(--t)}
.foot__col a:hover{color:var(--orange-hot)}
.foot__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding-block:24px;border-top:1px solid var(--line-ink);
  font-size:13px;color:rgba(255,247,239,.5);
}
.foot__bottom ul{display:flex;gap:22px}
.foot__bottom a{transition:color var(--t)}
.foot__bottom a:hover{color:var(--cream)}
.foot__wordmark{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 92,"opsz" 96;
  font-size:clamp(4.5rem,20vw,17rem);line-height:.72;letter-spacing:-.018em;text-transform:uppercase;
  color:#151313;text-align:center;margin:0;
  padding-inline:var(--pad);
  user-select:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* laptop */
@media (max-width:1200px){
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.88fr)}
  .rest__grid{grid-template-columns:repeat(2,1fr)}
}

/* tablet */
@media (max-width:1023px){
  .nav__links,.nav__login{display:none}
  .nav__burger{display:block}
  .nav__inner{justify-content:space-between}
  .logo{margin-right:auto}

  .hero__inner{
    grid-template-columns:1fr;
    gap:clamp(30px,5vw,48px);
    min-height:0;
    padding-block:clamp(44px,7vw,72px) 0;
  }
  .hero__copy{max-width:640px}
  .hero__media{
    margin-inline:calc(-1 * var(--pad));
    margin-bottom:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%);
    mask-image:linear-gradient(180deg,transparent 0,#000 11%);
  }
  .hero__media img{-webkit-mask-image:none;mask-image:none}
  .hero__ring{left:-320px;width:520px;height:520px;top:34%}
  .hero__dots{display:none}

  .appx__grid{grid-template-columns:1fr;gap:clamp(32px,5vw,48px)}
  .appx__media{max-width:520px;margin-inline:auto;order:2}
  .appx__copy{order:1}

  .dl__grid{grid-template-columns:1fr;gap:clamp(32px,5vw,48px)}
  .dl__media{max-width:640px}

  .foot__top{grid-template-columns:1fr;gap:44px}
}

/* small tablet / large phone */
@media (max-width:860px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+3){border-bottom:0}

  .how__grid{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding-bottom:30px}
  .step:last-child{border-bottom:0}
  .step__text{max-width:52ch}

  .spread__grid{grid-template-columns:1fr;gap:44px}
  .spread__media{max-width:480px}

  .quotes__grid{grid-template-columns:1fr}
  .quote{border-right:0;border-bottom:1px solid var(--line);padding-bottom:30px}
  .quote:last-child{border-bottom:0}

  .promo{background:linear-gradient(150deg,#FFB04C 0%,#FF9835 60%,#F58033 100%)}
  .promo{min-height:0;display:flex;flex-direction:column}
  .promo__bg{
    order:2;
    position:static;height:auto;width:calc(100% + var(--pad) * 2);max-width:none;
    margin:30px calc(-1 * var(--pad)) 0;
    -webkit-mask-image:none;mask-image:none;
  }
  .promo__inner{order:1;padding-bottom:0}
  .promo__copy{max-width:none}
}

/* phone */
@media (max-width:640px){
  :root{--nav-h:66px}

  .rest__grid{grid-template-columns:1fr}
  .card__media{aspect-ratio:16/10}

  .hero__title{font-size:clamp(2.5rem,10.5vw,3.6rem)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__facts{flex-direction:column;gap:9px}

  .sechead--split{align-items:flex-start;flex-direction:column;gap:18px}

  .cat{min-width:112px;padding:22px 12px 20px}

  .stores{gap:10px}
  .store{flex:1 1 auto;justify-content:center}

  .cta__lede{font-size:1rem}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .foot__bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:380px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .foot__cols{grid-template-columns:1fr}
}

/* ---------- MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.hero__el{opacity:1 !important;transform:none !important}
  .ticker__track{animation:none}
  .cursor{display:none !important}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- anchor offset + cursor init ---------- */
#how,#restaurants,#features,#download{scroll-margin-top:calc(var(--nav-h) + 12px)}
.cursor{opacity:0;transition:opacity .3s var(--e)}

/* =========================================================
   LANDING PAGE COMPONENTS  (index.html — sales page)
   ========================================================= */

/* the sales headline is longer than the demo hero, so cap it tighter */
.hero__title--tight{font-size:clamp(2.4rem,5.4vw,4.5rem)}

/* ---------- feature grid ---------- */
.feat2{background:var(--paper)}
.feat2__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.f2{background:var(--paper);padding:30px clamp(18px,1.8vw,26px) 32px;transition:background var(--t)}
.f2:hover{background:var(--cream)}
.f2__ico{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);color:var(--ember);margin-bottom:18px;transition:background var(--t),color var(--t),border-color var(--t)}
.f2:hover .f2__ico{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.f2 h3{font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.018em;margin-bottom:7px}
.f2 p{font-size:.92rem;color:var(--ink-3)}

/* ---------- packages ---------- */
.packs{background:var(--cream)}
.packs__note{max-width:32ch;font-size:14px;color:var(--ink-3)}
.packs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pack{position:relative;display:flex;flex-direction:column;background:var(--paper);padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,32px) clamp(28px,2.6vw,36px)}
.pack--hero{background:var(--ink);color:var(--cream)}
.pack__badge{position:absolute;top:0;right:0;background:var(--orange);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}
.pack__name{font-family:var(--f-display);font-weight:600;font-size:1.45rem;letter-spacing:-.025em}
.pack__for{margin-top:7px;font-size:.9rem;color:var(--ink-3)}
.pack--hero .pack__for{color:rgba(255,247,239,.62)}
.pack__price{display:flex;align-items:baseline;gap:9px;margin:24px 0 0;font-family:var(--f-display);font-weight:300;font-variation-settings:"wdth" 96,"opsz" 96;font-size:clamp(2.1rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.03em}
.pack__price--talk{font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:400}
.pack__from{font-family:var(--f-text);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pack--hero .pack__from{color:rgba(255,247,239,.55)}
.pack__list{flex:1;margin:24px 0 26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.pack--hero .pack__list{border-top-color:var(--line-ink)}
.pack__list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-2)}
.pack--hero .pack__list li{color:rgba(255,247,239,.82)}
.pack__list svg{flex:none;margin-top:4px;color:var(--ember)}
.pack--hero .pack__list svg{color:var(--orange-hot)}
.pack__cta{width:100%}
.pack--hero .btn--solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.pack--hero .btn--solid:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{background:var(--sand)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq__aside{margin-top:18px;max-width:32ch;font-size:.93rem;color:var(--ink-3)}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:21px 0;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.018em;
  transition:color var(--t);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--ember)}
.faq__item summary::after{
  content:"";width:12px;height:12px;flex:none;
  background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat;
  transition:background-size .3s var(--e);
}
.faq__item[open] summary{color:var(--ember)}
.faq__item[open] summary::after{background-size:12px 1.6px,1.6px 0}
.faq__body{padding-bottom:22px;max-width:62ch}
.faq__body p{font-size:.95rem;color:var(--ink-3)}

/* ---------- quote section ---------- */
.quote-sec{background:linear-gradient(120deg,#FDB271 0%,#FDA458 38%,#FC8F3F 100%);padding-block:clamp(60px,8vw,112px)}
.quote-sec__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:start}
.quote-sec__title{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 90,"opsz" 96;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:18px;
}
.quote-sec__lede{max-width:44ch;color:rgba(18,16,15,.78)}
.quote-sec__points{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.quote-sec__points li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(18,16,15,.84)}
.quote-sec__points svg{flex:none;color:var(--ember)}
.quote-sec__direct{margin-top:30px;padding-top:24px;border-top:1px solid rgba(18,16,15,.22);display:flex;flex-wrap:wrap;gap:12px 28px}
.direct{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:500;padding-bottom:3px;border-bottom:1px solid rgba(18,16,15,.32);transition:color var(--t),border-color var(--t)}
.direct:hover{color:var(--ember);border-color:var(--ember)}

/* ---------- quote form ---------- */
.quote-sec__formwrap{background:var(--paper);border:1px solid rgba(18,16,15,.1);padding:clamp(22px,2.6vw,34px)}
.qform__row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.field label span{color:var(--ember)}
.field input,.field select,.field textarea{
  font-family:var(--f-text);font-size:15px;color:var(--ink);
  padding:13px 14px;border:1px solid var(--line);border-radius:2px;background:var(--sand);
  transition:border-color var(--t),background var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember);background:var(--paper)}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field__err{font-size:12.5px;color:#B3261E}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#B3261E;background:#FDF3F2}
.qform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform__submit{width:100%;margin-top:6px}
.qform__fine{margin-top:14px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.qform__status{margin-top:14px;font-size:14px;padding:12px 14px;display:none}
.qform__status.is-ok{display:block;background:#EAF6EC;color:#1B5E20;border:1px solid #B7DFBD}
.qform__status.is-bad{display:block;background:#FDECEA;color:#B3261E;border:1px solid #F3C4BF}

/* ---------- slim footer ---------- */
.foot--slim{padding-top:clamp(46px,6vw,74px)}
.foot__slim{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;gap:clamp(26px,4vw,56px);align-items:start;padding-bottom:clamp(30px,4vw,50px)}
.foot--slim .foot__tag{margin:20px 0 0;max-width:40ch}
.foot__contact{display:flex;flex-direction:column;gap:13px}
.foot__contact a{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,247,239,.82);transition:color var(--t)}
.foot__contact a:hover{color:var(--orange-hot)}
.foot--slim .foot__social{margin-top:2px}

/* ---------- process: four steps ---------- */
.how__grid--4{grid-template-columns:repeat(4,1fr)}

/* ---------- landing responsive ---------- */
@media (max-width:1023px){
  .feat2__grid{grid-template-columns:repeat(2,1fr)}
  .how__grid--4{grid-template-columns:repeat(2,1fr)}
  .how__grid--4 .step{border-bottom:1px solid var(--line)}
  .how__grid--4 .step:nth-child(2n){border-right:0}
  .how__grid--4 .step:nth-child(n+3){border-bottom:0}
  .faq__grid{grid-template-columns:1fr;gap:30px}
  .quote-sec__grid{grid-template-columns:1fr;gap:36px}
  .packs__grid{grid-template-columns:1fr}
  .foot__slim{grid-template-columns:1fr 1fr;gap:34px}
  .foot--slim .foot__brand{grid-column:1 / -1}
}
@media (max-width:860px){
  .how__grid--4{grid-template-columns:1fr}
  .how__grid--4 .step{border-right:0;border-bottom:1px solid var(--line)}
  .how__grid--4 .step:last-child{border-bottom:0}
}
@media (max-width:640px){
  .feat2__grid{grid-template-columns:1fr}
  .qform__row{grid-template-columns:1fr;gap:0}
  .foot__slim{grid-template-columns:1fr;gap:28px}
  .quote-sec__direct{flex-direction:column;gap:12px}
  .direct{align-self:flex-start}
}

/* the sales CTA is long; on phones the burger + hero CTA carry it */
@media (max-width:640px){
  .nav__cta{display:none}
}

/* =========================================================
   FULL-BANNER HERO (landing page only)
   The banner is shown complete and untouched — no crop, no
   mask, no tint, no opacity layer over it. The section
   background is a horizontal gradient sampled pixel-for-pixel
   from the banner's own top row, so the strip behind the fixed
   nav continues the artwork with no visible seam.
   ========================================================= */
.hero--banner{
  position:relative;
  padding-top:var(--nav-h);
  background:linear-gradient(90deg,
    #FAA25F 0%,   #FDA159 5.2%,  #FDA156 15.6%, #FD9D4E 26%,
    #FC9846 36.4%,#FD913C 46.8%, #FD933D 57.2%, #FD8E3B 67.6%,
    #FC8B3A 78%,  #FC883C 85.8%, #FC8238 91%,   #FC7D35 96.3%,
    #F6803E 100%);
}
/* align the copy with the nav rather than the wider demo hero shell */
.hero--banner .shell{max-width:var(--shell-w)}
.hero__banner{display:block;width:100%;height:auto}

/* ---- desktop: copy sits inside the banner's own empty left area ---- */
@media (min-width:1180px){
  .hero--banner .hero__over{
    position:absolute;left:0;right:0;top:var(--nav-h);bottom:0;
    display:flex;align-items:center;
    pointer-events:none;              /* never block the artwork */
  }
  .hero--banner .hero__over .shell{width:100%}
  .hero--banner .hero__copy{
    max-width:min(505px,40.5vw);      /* stays clear of the pizza, pin and phones */
    pointer-events:auto;
  }
  .hero--banner .eyebrow{margin-bottom:14px}
  .hero--banner .hero__title{font-size:clamp(5.4rem,3.6vw,3.25rem);line-height:.92;margin-bottom:20px}
  .hero--banner .hero__lede{font-size:clamp(.95rem,1.05vw,1.02rem);max-width:none;margin-bottom:26px}
  .hero--banner .hero__trust{margin-top:26px;padding-top:18px}
  .hero--banner .hero__facts{gap:9px 22px;font-size:13px}
}

/* ---- narrower screens: stack, banner still complete ---- */
@media (max-width:1179px){
  .hero--banner{display:flex;flex-direction:column;padding-top:0}
  .hero--banner .hero__over{order:1}
  .hero--banner .hero__banner{order:2}
  .hero--banner .hero__over .shell{
    padding-top:calc(var(--nav-h) + clamp(26px,5vw,44px));
    padding-bottom:clamp(28px,5vw,46px);
  }
  .hero--banner .hero__copy{max-width:620px}
  .hero--banner .hero__title{font-size:clamp(2.3rem,5.6vw,3.4rem)}
}
@media (max-width:640px){
  .hero--banner .hero__title{font-size:clamp(2.05rem,8.4vw,2.9rem)}
}

/* =========================================================
   1. BIGGER HERO TYPE
   The copy box is measured against the banner itself: 45vw is
   where the pizza / pin / phones begin, minus wherever the
   shell edge falls, so the type can grow without ever running
   into the artwork.
   ========================================================= */
@media (min-width:1180px){
  .hero--banner{--shell-left:max(var(--pad), (100vw - var(--shell-w))/2 + var(--pad))}
  .hero--banner .hero__copy{max-width:calc(45vw - var(--shell-left) - 12px)}
  .hero--banner .hero__title{font-size:clamp(2.4rem,4.5vw,4.2rem);line-height:.9;margin-bottom:22px}
  .hero--banner .hero__lede{font-size:clamp(1rem,1.12vw,1.09rem);margin-bottom:28px}
  .hero--banner .hero__facts{font-size:13.5px}
}

/* =========================================================
   2. SHOWCASE SECTIONS (the split "real screens" pair)
   ========================================================= */
.showcase{background:var(--paper)}
.showcase--alt{background:var(--cream)}
.showcase__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,78px);align-items:center;
}
.showcase .sechead{margin-bottom:20px}
.showcase__media img{width:100%}
.showcase__media--tall{max-width:390px;margin-inline:auto}
.showcase__lede{font-size:1.02rem;color:var(--ink-3);max-width:44ch;margin-bottom:26px}
.ticks{display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.ticks li{display:flex;align-items:flex-start;gap:11px;font-size:.96rem;color:var(--ink-2)}
.ticks svg{flex:none;margin-top:4px;color:var(--ember)}
@media (max-width:900px){
  .showcase__grid{grid-template-columns:1fr;gap:34px}
  .showcase__copy{order:1}
  .showcase__media{order:2}
  .showcase__media--tall{max-width:320px}
}

/* =========================================================
   3. THEME TOGGLE
   ========================================================= */
.theme-toggle{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:2px;color:inherit;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.theme-toggle:hover{border-color:currentColor}
.theme-toggle__i{grid-area:1/1}
.theme-toggle__i--sun{display:none}
[data-theme="dark"] .theme-toggle__i--sun{display:block}
[data-theme="dark"] .theme-toggle__i--moon{display:none}

/* =========================================================
   4. DARK THEME  (default on this page)
   --ink and --cream keep their values on purpose: they are the
   "dark surface / light-on-dark text" pair that solid buttons,
   the ticker and the footer are built from. Only the page
   surfaces and the body text flip.
   ========================================================= */
[data-theme="dark"]{
  --paper:#141417;
  --sand:#0D0D0F;
  --ink-2:rgba(243,240,237,.80);
  --ink-3:rgba(243,240,237,.56);
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);
  --ember:#FF7A3D;
  color-scheme:dark;
}
[data-theme="dark"] body{background:#0D0D0F;color:#F3F0ED}

/* --- section surfaces (alternating, and matched to the image composites) --- */
[data-theme="dark"] .stats,
[data-theme="dark"] .showcase,
[data-theme="dark"] .feat2,
[data-theme="dark"] .packs,
[data-theme="dark"] .quotes{background:#0D0D0F}
[data-theme="dark"] .appx,
[data-theme="dark"] .showcase--alt,
[data-theme="dark"] .how,
[data-theme="dark"] .faq{background:#141417}
[data-theme="dark"] .foot{background:#08080A}

/* --- buttons --- */
[data-theme="dark"] .btn--solid{background:var(--orange);color:#12100F;border-color:var(--orange)}
[data-theme="dark"] .btn--solid:hover{background:#FF7A3D;border-color:#FF7A3D;color:#12100F}
[data-theme="dark"] .btn--ghost{color:#F3F0ED;border-color:rgba(255,255,255,.32)}
[data-theme="dark"] .btn--ghost:hover{background:#F3F0ED;color:#12100F;border-color:#F3F0ED}
[data-theme="dark"] .btn--light{background:#F3F0ED;color:#12100F;border-color:#F3F0ED}
[data-theme="dark"] .btn--light:hover{background:#fff;border-color:#fff}
[data-theme="dark"] .link-arrow:hover{color:#F3F0ED}

/* --- the hero stays exactly as it is: orange art, dark type --- */
[data-theme="dark"] .hero--banner{
  --ink:#12100F;--ink-2:#4A423E;--ink-3:#6E6560;
  --cream:#FFF7EF;--paper:#FFFFFF;--ember:#D93A06;
  --line:rgba(18,16,15,.14);--line-soft:rgba(18,16,15,.075);
  color:#12100F;
}
[data-theme="dark"] .hero--banner .btn--solid{background:#12100F;color:#FFF7EF;border-color:#12100F}
[data-theme="dark"] .hero--banner .btn--solid:hover{background:#D93A06;border-color:#D93A06;color:#FFF7EF}
[data-theme="dark"] .hero--banner .btn--ghost{color:#12100F;border-color:rgba(18,16,15,.42)}
[data-theme="dark"] .hero--banner .btn--ghost:hover{background:#12100F;color:#FFF7EF;border-color:#12100F}

/* --- nav: dark-on-orange over the hero, light once it gets a bar --- */
[data-theme="dark"] .nav:not(.nav--scrolled){
  --ink:#12100F;--cream:#FFF7EF;--ember:#D93A06;--line:rgba(18,16,15,.24);
  color:#12100F;
}
[data-theme="dark"] .nav:not(.nav--scrolled) .btn--solid{background:#12100F;color:#FFF7EF;border-color:#12100F}
[data-theme="dark"] .nav:not(.nav--scrolled) .btn--solid:hover{background:#D93A06;border-color:#D93A06;color:#FFF7EF}
[data-theme="dark"] .nav--scrolled{background:rgba(13,13,15,.9);color:#F3F0ED}
[data-theme="dark"] .nav--scrolled::after{background:rgba(255,255,255,.1)}
[data-theme="dark"] .nav--scrolled .nav__link,
[data-theme="dark"] .nav--scrolled .nav__login{color:rgba(243,240,237,.82)}
[data-theme="dark"] .nav--scrolled .nav__link::after{background:#F3F0ED}
[data-theme="dark"] .nav--scrolled .nav__link:hover,
[data-theme="dark"] .nav--scrolled .nav__login:hover{color:#fff}
[data-theme="dark"] .mmenu{background:#08080A}

/* --- components --- */
[data-theme="dark"] .f2:hover{background:#1C1C21}
[data-theme="dark"] .pack--hero{background:#1F1F25}
[data-theme="dark"] .step__num{-webkit-text-stroke-color:rgba(255,255,255,.3)}
[data-theme="dark"] .step:hover .step__num{-webkit-text-stroke-color:var(--ember)}
[data-theme="dark"] .cursor__ring{border-color:rgba(255,255,255,.42)}
[data-theme="dark"] .cursor__dot{background:#F3F0ED}
[data-theme="dark"] .store--dark{background:#F3F0ED;color:#12100F;border-color:#F3F0ED}
[data-theme="dark"] .store--dark:hover{background:transparent;color:#F3F0ED;border-color:rgba(255,255,255,.32)}

/* =========================================================
   BRAND BAND — the podium banner, shown complete.
   Same treatment as the hero: no crop, no tint, no overlay.
   The section background is a horizontal gradient sampled
   from the banner's own top row, so when the layout stacks
   the join above the image is invisible.
   ========================================================= */
.band{
  position:relative;overflow:hidden;color:#12100F;
  background:linear-gradient(90deg,
    #FF8F2F 0%,  #FE902E 9%,  #FF9531 20%, #FF932E 32%, #FF8F29 43%,
    #FF8522 55%, #FF711F 67%, #FF5F21 78%, #EF4E1A 90%, #CB3F0E 100%);
}
.band .shell{max-width:var(--shell-w)}
.band__bg{display:block;width:100%;height:auto}
.band__title{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 90,"opsz" 96;
  font-size:clamp(2rem,3.9vw,3.5rem);line-height:.94;letter-spacing:-.03em;
  text-transform:uppercase;margin-bottom:18px;
}
.band__lede{color:rgba(18,16,15,.8);max-width:46ch;margin-bottom:26px}
.ticks--onOrange li{color:rgba(18,16,15,.86)}
.ticks--onOrange svg{color:#12100F}

/* desktop: copy sits in the banner's own empty left area */
@media (min-width:1180px){
  .band{--shell-left:max(var(--pad), (100vw - var(--shell-w))/2 + var(--pad))}
  .band__over{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
  .band__over .shell{width:100%}
  .band__copy{max-width:calc(50vw - var(--shell-left) - 16px);pointer-events:auto}
}

/* narrower: stack, banner still complete */
@media (max-width:1179px){
  .band{display:flex;flex-direction:column}
  .band__over{order:1}
  .band__bg{order:2}
  .band__over .shell{padding-block:clamp(38px,6vw,60px)}
  .band__copy{max-width:620px}
}

/* the band keeps its orange art and dark type in either theme */
[data-theme="dark"] .band{
  --ink:#12100F;--ink-2:#4A423E;--ink-3:#6E6560;
  --cream:#FFF7EF;--paper:#FFFFFF;--ember:#D93A06;
  --line:rgba(18,16,15,.14);--line-soft:rgba(18,16,15,.075);
  color:#12100F;
}
[data-theme="dark"] .band .btn--solid{background:#12100F;color:#FFF7EF;border-color:#12100F}
[data-theme="dark"] .band .btn--solid:hover{background:#D93A06;border-color:#D93A06;color:#FFF7EF}

/* =========================================================
   ORANGE FEATURE SECTIONS (dark theme)
   "The full picture" and "Get started" run on orange so the
   dark page has warm anchors that echo the hero and the brand
   band. Both pin the light token set, so everything inside —
   headings, form fields, buttons — reads as dark-on-orange
   without needing its own colour rules.
   ========================================================= */
[data-theme="dark"] .dl,
[data-theme="dark"] .quote-sec{
  --ink:#12100F;--ink-2:#4A423E;--ink-3:#6E6560;
  --cream:#FFF7EF;--paper:#FFFFFF;--sand:#FAF6F1;--ember:#D93A06;
  --line:rgba(18,16,15,.14);--line-soft:rgba(18,16,15,.075);
  color:#12100F;
}

/* flat orange: the phone render is composited on this exact
   value, so the image sits on it with no visible edge */
[data-theme="dark"] .dl{background:#FC9646}
[data-theme="dark"] .dl .eyebrow--onInk{color:rgba(18,16,15,.7)}
[data-theme="dark"] .dl .eyebrow--onInk .eyebrow__dot{background:#12100F}
[data-theme="dark"] .dl__lede{color:rgba(18,16,15,.8)}
[data-theme="dark"] .dl__pills li{color:rgba(18,16,15,.82)}
[data-theme="dark"] .dl__pills svg{color:#D93A06}
[data-theme="dark"] .dl .btn--light{background:#12100F;color:#FFF7EF;border-color:#12100F}
[data-theme="dark"] .dl .btn--light:hover{background:#D93A06;border-color:#D93A06;color:#FFF7EF}

/* the quote section keeps its warm gradient in both themes;
   only the submit button needs pulling back to ink */
[data-theme="dark"] .quote-sec .btn--solid{background:#12100F;color:#FFF7EF;border-color:#12100F}
[data-theme="dark"] .quote-sec .btn--solid:hover{background:#D93A06;border-color:#D93A06;color:#FFF7EF}

/* =========================================================
   BRAND LOGO
   Split out of the supplied "both logo" sheet into two
   transparent PNGs — the counters are knocked out, so each
   variant sits on any surface within its own theme.
   Light variant on light surfaces, dark variant on dark ones.
   ========================================================= */
.logo__img{display:block;width:auto;height:26px}
.mmenu .logo__img{height:26px}
.foot .logo__img{height:28px}

/* Over the hero the nav is transparent and the artwork behind it
   is orange, where an orange logo would disappear. The rest of
   the nav already reads in ink there, so the logo does too — and
   returns to full colour the moment the bar appears. */
.nav .logo__img{transition:filter .35s var(--e)}
.nav:not(.nav--scrolled) .logo__img{filter:brightness(0)}

@media (max-width:640px){
  .logo__img{height:24px}
}

/* =========================================================
   DARK QUOTE FORM (dark theme)
   The section around it stays orange; only the card flips to a
   dark panel. Scoped to .quote-sec__formwrap so the copy column
   beside it keeps reading dark-on-orange.
   ========================================================= */
[data-theme="dark"] .quote-sec__formwrap{
  background:#141417;
  border-color:rgba(255,255,255,.12);
  color:#F3F0ED;
}
[data-theme="dark"] .quote-sec__formwrap .field label{color:rgba(243,240,237,.76)}
[data-theme="dark"] .quote-sec__formwrap .field label span{color:#FF7A3D}

[data-theme="dark"] .quote-sec__formwrap .field input,
[data-theme="dark"] .quote-sec__formwrap .field select,
[data-theme="dark"] .quote-sec__formwrap .field textarea{
  background-color:#0D0D0F;
  border-color:rgba(255,255,255,.15);
  color:#F3F0ED;
}
[data-theme="dark"] .quote-sec__formwrap .field input:focus,
[data-theme="dark"] .quote-sec__formwrap .field select:focus,
[data-theme="dark"] .quote-sec__formwrap .field textarea:focus{
  background-color:#08080A;
  border-color:#FF7A3D;
}
[data-theme="dark"] .quote-sec__formwrap .field input::placeholder,
[data-theme="dark"] .quote-sec__formwrap .field textarea::placeholder{color:rgba(243,240,237,.38)}

/* the chevron is baked into a data URI, so it needs a light one here.
   background-repeat/position are restated because the colour rules
   above use background-color only — keep them in sync if edited. */
[data-theme="dark"] .quote-sec__formwrap .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BDB8B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

[data-theme="dark"] .quote-sec__formwrap .field__err{color:#FF8A73}
[data-theme="dark"] .quote-sec__formwrap .field.is-bad input,
[data-theme="dark"] .quote-sec__formwrap .field.is-bad select,
[data-theme="dark"] .quote-sec__formwrap .field.is-bad textarea{border-color:#FF8A73;background-color:#1A0F0C}

[data-theme="dark"] .quote-sec__formwrap .qform__fine{color:rgba(243,240,237,.5)}
[data-theme="dark"] .quote-sec__formwrap .qform__status.is-ok{background:#102314;color:#8FD69B;border-color:#23482C}
[data-theme="dark"] .quote-sec__formwrap .qform__status.is-bad{background:#2A1310;color:#FF9E8C;border-color:#5A2A22}

/* an ink button would vanish on the dark card — the brand orange
   carries the primary action here, as it does elsewhere in dark */
[data-theme="dark"] .quote-sec__formwrap .btn--solid{background:var(--orange);color:#12100F;border-color:var(--orange)}
[data-theme="dark"] .quote-sec__formwrap .btn--solid:hover{background:#FF7A3D;border-color:#FF7A3D;color:#12100F}

/* ==================== CHAT WIDGET ==================== */
.chat-widget{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;pointer-events:none
}
.chat-widget[hidden]{display:none}
.chat-widget__overlay{
  position:absolute;inset:0;background:rgba(18,16,15,.7);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--e)
}
.chat-widget.is-open .chat-widget__overlay{opacity:1}
.chat-widget__panel{
  position:relative;width:100%;max-width:520px;max-height:90vh;
  background:var(--paper);color:var(--ink);border-radius:4px;
  box-shadow:0 40px 80px -20px rgba(18,16,15,.4);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(30px) scale(.96);opacity:0;transition:transform .35s var(--e),opacity .35s var(--e)
}
.chat-widget.is-open .chat-widget__panel{transform:none;opacity:1}
.chat-widget__header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--line);flex:none
}
.chat-widget__title{
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em
}
.chat-widget__close{
  display:grid;place-items:center;width:36px;height:36px;border-radius:2px;
  color:var(--ink-3);background:transparent;transition:background var(--t),color var(--t)
}
.chat-widget__close:hover{background:var(--sand);color:var(--ink)}
.chat-widget__body{flex:1;overflow:hidden;min-height:0}
.chat-widget__frame{width:100%;height:100%;min-height:480px;border:0;background:var(--paper)}
@media (max-width:640px){
  .chat-widget{padding:0;align-items:flex-end;justify-content:flex-end}
  .chat-widget__panel{max-width:100%;max-height:100vh;border-radius:0}
  .chat-widget__panel{transform:translateX(100%)}
  .chat-widget.is-open .chat-widget__panel{transform:none}
  .chat-widget__overlay{background:rgba(18,16,15,.5)}
}

.bdw-wa-btn {
  /* fallbacks, used only if a page's .main-btn didn't set them */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* colour overrides */
  background: #25d366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.5) !important;
  animation: none !important;
  padding: 10px 25px;
}
.bdw-wa-btn::before { display: none !important; }
.bdw-wa-btn:hover {
  background: #1ebe5d !important;
  color: #ffffff !important;
}
.bdw-wa-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}