/* The home page, in both languages (/ and /en/). Shared tokens are in site.css.

   Deliberately short: the hero says what BiteIt does, and everything under it
   is one idea per section. Motion is there to make the page feel alive, not to
   carry information — with reduced motion on, every element is simply shown. */

/* ---------- hero ---------- */

.hero { background: var(--hero); color: #FBF7F0; padding-bottom: 52px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; padding-top: 16px; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 12px; }
}
.hero .pill { background: rgba(251, 247, 240, .14); color: #FBF7F0; }
.hero h1 {
  font-size: clamp(44px, 6.8vw, 74px); line-height: 1.18; margin: 18px 0 0;
  letter-spacing: -.01em; font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--mint); }
.lede { font-size: 19px; color: rgba(251, 247, 240, .86); margin: 18px 0 0; max-width: 31em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Google's own "Get it on Google Play" badge, shown as supplied — Google's brand
   rules ask for the official badge rather than a home-made button. */
.play-badge { display: inline-flex; border-radius: 9px; transition: transform .2s ease, box-shadow .2s ease; }
.play-badge img { height: 48px; width: auto; }
.play-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.cta-row { align-items: center; }
/* The App Store, not out yet: a badge in the same shape, colours and hover as
   the Play one, so the pair reads as a set. Apple's guidelines reserve its own
   badge and logo for apps that are on the App Store — swap in Apple's official
   badge the day the iOS app is. */
.store-soon {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 11px;
  border-radius: 9px; background: #000; border: 1px solid #A6A6A6; color: #fff;
  cursor: default; user-select: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.store-soon:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.store-soon svg { fill: currentColor; flex: none; margin-top: -2px; }
.store-soon span { display: grid; line-height: 1.1; text-align: left; }
.store-soon small { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.store-soon b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.btn-line { border-color: rgba(251, 247, 240, .4); color: #FBF7F0; }
.btn-line:hover { border-color: #FBF7F0; background: rgba(251, 247, 240, .08); }
.cta-note { font-size: 15px; color: rgba(251, 247, 240, .68); margin: 16px 0 0; }
.cta-note a { color: inherit; }

/* Every button lifts a little under the pointer. */
.btn:not(.btn-soon):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }

/* The scan: the photo, the scanner's frame and labels, the guess crossed out,
   and the real number. Positions are percentages of the square so it scales
   from a phone to a desktop without moving off the food. Colours here are
   fixed rather than tokens — it is a picture of the app, and the app's card is
   white in either theme. */
.scan { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.scan .plate {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 34px 80px -10px rgba(0, 0, 0, .45), 0 0 0 10px rgba(251, 247, 240, .06);
}
.scan .plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.scan:hover .plate img { transform: scale(1.05) rotate(-2deg); }
.corner { position: absolute; width: 12%; aspect-ratio: 1; border: 0 solid rgba(251, 247, 240, .92); transition: transform .5s ease; }
.corner.tl { left: 1%; top: 1%; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 18px; }
.corner.tr { right: 1%; top: 1%; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 18px; }
.corner.bl { left: 1%; bottom: 1%; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 18px; }
.corner.br { right: 1%; bottom: 1%; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 18px; }
.scan:hover .corner.tl { transform: translate(-6px, -6px); }
.scan:hover .corner.tr { transform: translate(6px, -6px); }
.scan:hover .corner.bl { transform: translate(-6px, 6px); }
.scan:hover .corner.br { transform: translate(6px, 6px); }
.beam {
  position: absolute; left: 4%; right: 4%; top: 30%; height: 3px; border-radius: 2px;
  background: var(--beam); box-shadow: 0 0 14px 4px rgba(159, 227, 196, .6);
  animation: sweep 4.8s ease-in-out infinite alternate;
}
.beam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 60px;
  background: linear-gradient(to top, rgba(159, 227, 196, .22), transparent);
}
@keyframes sweep { from { top: 22%; } to { top: 74%; } }
.tag {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #fff; color: #101A15; font-size: clamp(13px, 1.7vw, 16px); font-weight: 600; line-height: 1;
  padding: 7px 12px 7px 9px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.tag::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0E7C5A;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(14, 124, 90, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(14, 124, 90, 0); } }
.guess {
  position: absolute; left: -3%; top: 5%; transform: rotate(-6deg);
  background: #FFF1C2; color: #3B2F12; font-family: var(--hand); font-weight: 600;
  font-size: clamp(20px, 3.2vw, 30px); line-height: 1.3; padding: 6px 18px 4px;
  border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
/* Crossed out by hand: the line is drawn after the note lands. */
.struck { position: relative; display: inline-block; }
.struck::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 52%; height: 3px; border-radius: 2px;
  background: #D9674A; transform: rotate(-8deg); transform-origin: left center;
}
.result {
  position: absolute; right: -2%; bottom: 0; width: min(64%, 310px);
  background: #fff; color: #101A15; border-radius: 22px; padding: 14px 20px 16px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
}
.result small { display: block; font-size: 15px; font-weight: 700; color: #0E7C5A; }
.result .kcal { font-size: 20px; font-weight: 600; line-height: 1.15; }
.result .kcal b { font-size: clamp(40px, 6vw, 54px); font-weight: 700; color: #0E7C5A; letter-spacing: -.01em; }
.result .what { font-size: 14.5px; color: #4A5A52; margin-top: 4px; line-height: 1.4; }
.result .macros { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.result .macros div { font-size: 13px; color: #4A5A52; line-height: 1.3; }
.result .macros b { display: block; font-size: 15px; color: #101A15; }
.result .macros i { display: block; height: 5px; border-radius: 3px; margin-top: 6px; background: #E3ECE6; overflow: hidden; }
.result .macros i::after {
  content: ""; display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 3px;
  transform-origin: left; animation: grow 1s cubic-bezier(.2, .7, .2, 1) 1.9s both;
}
@keyframes grow { from { transform: scaleX(0); } }
/* On a phone the card would sit on the rice label, so it hangs below the plate. */
@media (max-width: 600px) {
  .scan { margin-bottom: 15%; }
  .result { bottom: -15%; }
  .guess { left: 1%; }
  .hero .btn-line { display: none; }
}
@media (max-width: 420px) {
  .result { width: 72%; padding: 12px 14px 14px; }
  .result .macros { gap: 6px; }
  .tag { padding: 6px 10px 6px 8px; }
}

/* The entrance: copy first, then the plate, then what the scanner found,
   then the guess, crossed out, then the real number. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes plate-in { from { opacity: 0; transform: scale(.92) rotate(-8deg); } }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) rotate(-14deg); } }
@keyframes strike { from { transform: rotate(-8deg) scaleX(0); } }
@keyframes float { to { transform: translateY(-8px); } }
@keyframes fade { from { opacity: 0; } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4) { animation-delay: .42s; }
.hero-copy > :nth-child(5) { animation-delay: .52s; }
.scan .plate { animation: plate-in 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
.corner { animation: fade .6s ease .7s both; }
.tag { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.tag:nth-of-type(1) { animation-delay: .95s; }
.tag:nth-of-type(2) { animation-delay: 1.1s; }
.tag:nth-of-type(3) { animation-delay: 1.25s; }
.guess { animation: drop .6s cubic-bezier(.3, 1.4, .5, 1) 1.35s both; }
.struck::after { animation: strike .45s ease-out 1.95s both; }
.result { animation: rise .7s cubic-bezier(.2, .7, .2, 1) 1.65s both, float 4.5s ease-in-out 2.5s infinite alternate; }

/* ---------- the dish ribbon ---------- */

.ribbon {
  background: var(--deep); color: rgba(251, 247, 240, .9); overflow: hidden;
  border-top: 1px solid rgba(251, 247, 240, .08);
}
@media (prefers-color-scheme: dark) { .ribbon { background: #083B2B; } }
.ribbon .track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.ribbon:hover .track { animation-play-state: paused; }
.ribbon ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ribbon li {
  display: flex; align-items: center; gap: 22px; padding: 16px 0 16px 22px;
  font-size: 19px; font-weight: 600; white-space: nowrap; transition: color .2s ease;
}
.ribbon li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--beam); opacity: .7; }
.ribbon li:hover { color: var(--mint); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */

.band { padding: 104px 0; }
.band.alt { background: var(--sunk); }
.band.first { padding-top: 64px; }
@media (max-width: 600px) { .band { padding: 72px 0; } .band.first { padding-top: 48px; } }

.sec-title { font-size: clamp(30px, 4.6vw, 46px); margin: 0 0 52px; letter-spacing: -.005em; max-width: 20em; }
.sec-title.center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-title em, .closing h2 em { font-style: normal; color: var(--brand); }

/* Scroll reveal. Only hidden while script is running, so a page without it
   still shows everything. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- how it works: the phone demo ---------- */

.sec-sub { color: var(--sub); font-size: 19px; margin: -36px 0 48px; max-width: 36em; }

.demo { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.demo .sec-title { margin-bottom: 10px; }
.demo-sub { color: var(--sub); font-size: 19px; margin: 0 0 40px; }
/* On a phone: title, the stage, then the steps that drive it. */
@media (max-width: 899px) {
  .demo { gap: 28px; }
  .demo-copy { display: contents; }
  .demo .sec-title { order: 1; margin-bottom: -18px; }
  .demo .demo-sub { order: 2; margin: 0; }
  .demo .stage { order: 3; }
  .demo .steps-demo { order: 4; }
}

/* The steps: a timeline. Numbers on a rail, a ring that fills around the
   active one while it is on screen, and only the active step's text open. */
.steps-demo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.steps-demo::before {
  content: ""; position: absolute; left: 29px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(var(--line), var(--line)); border-radius: 2px;
}
.step {
  position: relative; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start;
  background: transparent; border: 0; border-radius: 18px; padding: 10px 12px 10px 0;
}
.step .n { position: relative; display: grid; place-items: center; width: 60px; height: 60px; }
.step .n em {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-style: normal;
  background: var(--ground); border: 2px solid var(--line); color: var(--faint);
  font-size: 21px; font-weight: 700; line-height: 1;
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.step:hover .n em { border-color: var(--brand); color: var(--brand); }
.step.on .n em { background: var(--brand); border-color: var(--brand); color: var(--brand-in); transform: scale(1.04); }
.step .ring { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
.step .ring circle { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; opacity: .55; }
.step.on.running .ring circle { animation: ring var(--every, 4.5s) linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.step .txt { padding-top: 13px; }
.step .txt b { display: block; font-size: 22px; line-height: 1.35; color: var(--faint); transition: color .3s ease; }
.step:hover .txt b, .step.on .txt b { color: var(--ink); }
.step .detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.step .detail > span { overflow: hidden; color: var(--sub); }
.step.on .detail { grid-template-rows: 1fr; }
.step.on .detail > span { padding-top: 6px; }

/* The stage: the phone on a panel in the hero's green, with callouts that
   say what the current screen just did. */
.stage { position: relative; display: grid; place-items: center; padding: 28px 0; }
.stage-bg {
  position: absolute; inset: 9% 2%; border-radius: 36px; overflow: hidden; background: var(--hero);
  box-shadow: 0 30px 70px -30px rgba(4, 30, 20, .55);
}
.stage-bg::before, .stage-bg::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid rgba(251, 247, 240, .12);
}
.stage-bg::before { width: 82%; aspect-ratio: 1; }
.stage-bg::after { width: 130%; aspect-ratio: 1; border-color: rgba(251, 247, 240, .07); }
.phone {
  width: min(270px, 64vw); padding: 9px; border-radius: 44px; background: #0B0F0D; position: relative; z-index: 1;
  box-shadow: 0 0 0 2px #2A302D inset, 0 40px 80px -24px rgba(0, 0, 0, .6);
  animation: float 5s ease-in-out infinite alternate;
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: #050706; box-shadow: 0 0 0 2px #151a18; z-index: 2;
}
.screen { position: relative; border-radius: 35px; overflow: hidden; aspect-ratio: 540 / 1110; background: #FBF7F0; }
.shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.shot.on { opacity: 1; transform: none; }
.callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.co {
  position: absolute; top: var(--y); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #fff; color: #101A15; border-radius: 14px; padding: 9px 14px 9px 11px;
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(12px) scale(.94);
  transition: opacity .35s ease, transform .55s cubic-bezier(.3, 1.5, .5, 1);
}
.co.l { left: var(--x); }
.co.r { right: var(--x); }
.co.on { opacity: 1; transform: none; transition-delay: .25s; }
.co svg { flex: none; fill: none; stroke: #0E7C5A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.co b { color: #0E7C5A; font-weight: 700; }
.co.big { font-size: 15.5px; padding: 11px 16px 11px 12px; }
.co.big b { font-size: 21px; }
@media (max-width: 480px) {
  .co { font-size: 12.5px; padding: 7px 11px 7px 9px; }
  .co.big { font-size: 13px; padding: 8px 12px 8px 10px; }
  .co.big b { font-size: 17px; }
}

/* ---------- type it instead ---------- */

.typed { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .typed { grid-template-columns: 1fr 1fr; gap: 64px; } }
.typed .sec-title { margin-bottom: 18px; }
.typed .sec-sub { margin: 0; }
.chat { display: grid; gap: 14px; background: var(--sunk); border-radius: 28px; padding: 26px; }
.chat .me {
  justify-self: end; max-width: 92%; margin: 0; background: var(--brand); color: var(--brand-in);
  border-radius: 22px 22px 6px 22px; padding: 12px 18px; font-size: 17px; line-height: 1.6;
}
.chat.ready:not(.done) .me::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.parsed { background: var(--paper); border-radius: 20px; padding: 6px 18px; }
.parsed .it, .parsed .sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; }
.parsed .it { border-bottom: 1px solid var(--hair); }
.parsed .it span { font-weight: 600; }
.parsed small { font-weight: 400; color: var(--faint); font-size: 15px; margin-left: 6px; }
.parsed .it b { font-weight: 600; color: var(--sub); }
.parsed .sum b { font-size: 26px; color: var(--brand); }
.parsed .sum span { font-weight: 700; }
.chat.ready .parsed > div { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.chat.done .parsed > div { opacity: 1; transform: none; }
.chat.done .parsed > div:nth-child(2) { transition-delay: .12s; }
.chat.done .parsed > div:nth-child(3) { transition-delay: .24s; }
.chat.done .parsed > div:nth-child(4) { transition-delay: .4s; }

/* ---------- features ---------- */

/* A list, not a wall of boxes: icon beside the words, a hairline above each.
   On a phone that is six short rows instead of six tall cards. */
.feats { display: grid; grid-template-columns: 1fr; column-gap: 56px; }
@media (min-width: 700px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat, .point { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-content: start; }
.feat { border-top: 1px solid var(--line); padding: 26px 0 30px; }
.feat .ic, .point .ic { grid-row: span 2; }
.feat h3, .point h3 { font-size: 19px; margin: 7px 0 3px; line-height: 1.45; }
.feat p, .point p { margin: 0; color: var(--sub); font-size: 16.5px; }
.ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--brand-sk); color: var(--brand); transition: background .25s ease, color .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic.glyph { font-size: 22px; font-weight: 700; line-height: 1; padding-top: 3px; }
.feat:hover .ic, .point:hover .ic { background: var(--brand); color: var(--brand-in); transform: rotate(-8deg); }
@media (max-width: 699px) { .feat { padding: 20px 0 22px; } }

/* ---------- privacy ---------- */

/* What we promise on the left, the three promises as one panel on the right. */
.vault { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .vault { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }
.vault .sec-title { margin-bottom: 16px; }
.vault .sec-sub { margin: 0; }
.points { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 4px 28px; }
.point { padding: 24px 0; }
.point + .point { border-top: 1px solid var(--hair); }
@media (max-width: 480px) { .points { padding: 2px 20px; } .point { padding: 20px 0; } }
.more { margin: 28px 0 0; font-weight: 600; }
.more a { text-decoration: none; display: inline-block; transition: transform .25s ease; }
.more a:hover { transform: translateX(4px); }

/* ---------- questions ---------- */

.home-faq details { border-bottom: 1px solid var(--line); }
.home-faq summary { font-size: 19px; padding: 20px 0; transition: color .2s ease; }
.home-faq summary:hover { color: var(--brand); }
.home-faq summary::before { transition: transform .3s ease; }
.home-faq details[open] summary::before { transform: rotate(180deg); }
.home-faq details[open] .answer { animation: rise .4s ease both; }

/* ---------- price ---------- */

.plans { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
@media (min-width: 700px) { .plans { grid-template-columns: 1fr 1fr; } }
/* How to pay, above the plans: the wallets people here actually use, each
   with its own logo on a white tile (bKash's white logo on its own pink).
   White in dark mode too, the way payment logos are always shown. */
.pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: -30px auto 34px; text-align: center; }
.pay > span { color: var(--sub); font-size: 16px; font-weight: 500; }
.pay ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pay li {
  display: grid; place-items: center; height: 34px; padding: 0 10px; border-radius: 9px;
  background: #fff; border: 1px solid rgba(16, 26, 21, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pay li:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(16, 26, 21, .45); }
.pay img { display: block; height: 19px; width: auto; }
.pay .bkash { background: #E2136E; border-color: #E2136E; padding: 0 10px; }
.pay .bkash img { height: 21px; }
.pay .rocket img { height: 23px; }

.plan {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px 20px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .25s ease;
}
/* The card that looks chosen is the one you're on. With nothing pointed at
   that's yearly, the recommended plan; hover or tab to the other and the ring
   and the filled Buy button move with you, so two cards never look picked at
   once. The ring is an inset shadow on a 1px border, so it costs no layout. */
.plan.best, .plan:is(:hover, :focus-within) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.plan:is(:hover, :focus-within) { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--brand), var(--shadow); }
.plans:has(.plan:is(:hover, :focus-within)) .plan:not(:hover, :focus-within) { border-color: var(--line); box-shadow: none; }
.plan-buy { display: flex; width: 100%; margin-top: 16px; }
.plan:is(:hover, :focus-within) .plan-buy { background: var(--brand); color: var(--brand-in); border-color: var(--brand); }
.plans:has(.plan:is(:hover, :focus-within)) .plan:not(:hover, :focus-within) .plan-buy { background: transparent; color: var(--ink); border-color: var(--line); filter: none; }
.plan .badge {
  position: absolute; top: -15px; left: 20px; background: var(--brand); color: var(--brand-in);
  font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 3px 12px; line-height: 1.6;
}
.plan .label { font-size: 15px; font-weight: 600; color: var(--faint); margin: 0; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; min-height: 26px; }
.plan .amt { font-size: 36px; font-weight: 700; line-height: 1.2; margin: 4px 0 0; letter-spacing: -.01em; }
.plan .amt small { font-size: 15px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.plan .fine { font-size: 15.5px; color: var(--sub); margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* The font's own strike-through, so it lands right whichever font renders —
   thin and red over brighter text, so the old price stays readable under it. */
.plan .fine s {
  color: var(--sub); font-weight: 600; padding: 0 1px;
  text-decoration: line-through; text-decoration-color: var(--over);
  text-decoration-thickness: 1.5px; text-decoration-skip-ink: none;
}
.plan .fine b { color: var(--brand); font-weight: 700; font-size: 18px; }
.plan .perk {
  display: inline-block; margin: 0; padding: 2px 11px; line-height: 1.6; white-space: nowrap;
  border-radius: 999px; background: var(--brand-sk); color: var(--brand); font-size: 13px; font-weight: 700;
}

/* ---------- closing ---------- */

.closing { background: var(--hero); color: #FBF7F0; text-align: center; padding: 96px 0 100px; overflow: hidden; }
.closing .mark { height: 52px; width: auto; margin: 0 auto 22px; animation: bob 3.6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-6px) rotate(5deg); } }
.closing h2 { font-size: clamp(40px, 7vw, 72px); line-height: 1.2; margin: 0; }
.closing h2 em { color: var(--mint); }
.closing .cta-row { justify-content: center; }
.closing .cta-note { max-width: 34em; margin: 18px auto 0; }

/* Two app screens fill the band's sides on wide screens, tilted and cropped
   by its bottom edge. Decoration only; hidden where they would crowd the copy. */
.closing { position: relative; }
.closing .wrap { position: relative; z-index: 1; }
.closing-art { display: none; }
@media (min-width: 1100px) {
  .closing-art { display: block; position: absolute; inset: 0; pointer-events: none; }
}
.cphone {
  position: absolute; bottom: -150px; width: 230px; padding: 8px; border-radius: 40px; background: #0B0F0D;
  box-shadow: 0 0 0 2px #2A302D inset, 0 40px 80px -20px rgba(0, 0, 0, .5);
}
.cphone .screen { border-radius: 32px; }
.cphone img { display: block; width: 100%; height: auto; }
.cphone.l { left: max(32px, calc(50% - 600px)); transform: rotate(-10deg); animation: drift-l 6s ease-in-out infinite alternate; }
.cphone.r { right: max(32px, calc(50% - 600px)); transform: rotate(10deg); animation: drift-r 6s ease-in-out 1s infinite alternate; }
@keyframes drift-l { to { transform: rotate(-10deg) translateY(-14px); } }
@keyframes drift-r { to { transform: rotate(10deg) translateY(-14px); } }

/* ---------- footer ---------- */

.foot-min { padding: 36px 0 44px; }
.foot-min .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.foot-min nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; }
.foot-min nav a { color: var(--sub); text-decoration: none; }
.foot-min nav a:hover { color: var(--brand); }
.foot-min .note {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); color: var(--faint); font-size: 14.5px;
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}
.foot-min .note a { color: inherit; }
@media (max-width: 640px), (pointer: coarse) {
  .foot-min nav { gap: 0 20px; }
  .foot-min nav a, .more a { display: inline-flex; align-items: center; min-height: 44px; }
  .more { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .beam { animation: none; top: 52%; }
  .ribbon .track { animation: none; }
  .cphone { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .plan:is(:hover, :focus-within) { transform: none; }
}

/* ---------- phone scale ---------- */

/* Everything on the home page at phone size: smaller type, tighter bands
   and a smaller phone in the demo. */
@media (max-width: 600px) {
  .band { padding: 52px 0; }
  .band.first { padding-top: 36px; }
  .sec-title { font-size: 26px; margin-bottom: 24px; }
  .sec-sub { font-size: 16px; margin: -12px 0 28px; }

  .hero { padding-bottom: 36px; }
  .hero-grid { gap: 28px; padding-top: 4px; }
  .hero h1 { font-size: 36px; margin-top: 14px; }
  .lede { font-size: 16px; margin-top: 12px; }
  .cta-row { margin-top: 20px; gap: 10px; }
  .play-badge img { height: 42px; }
  .store-soon { height: 42px; padding: 0 14px 0 10px; gap: 7px; }
  .store-soon svg { width: 21px; height: 21px; }
  .store-soon b { font-size: 17px; }
  .store-soon small { font-size: 10px; }
  .scan { width: min(90%, 330px); }
  .guess { font-size: 19px; padding: 4px 14px 2px; }
  .tag { font-size: 12px; padding: 6px 10px 6px 8px; }
  .result { padding: 10px 14px 12px; border-radius: 18px; }
  .result small { font-size: 12.5px; }
  .result .kcal { font-size: 16px; }
  .result .kcal b { font-size: 34px; }
  .result .what { font-size: 12.5px; }
  .result .macros div { font-size: 11.5px; }
  .result .macros b { font-size: 13px; }
  .ribbon li { font-size: 16px; padding: 12px 0 12px 18px; gap: 18px; }

  .demo { gap: 20px; }
  .demo .sec-title { margin-bottom: -12px; }
  .demo-sub { font-size: 16px; }
  .stage { padding: 14px 0; }
  .phone { width: min(214px, 57vw); }
  .steps-demo::before { left: 23px; top: 30px; bottom: 30px; }
  .step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 6px 8px 6px 0; }
  .step .n { width: 48px; height: 48px; }
  .step .n em { width: 38px; height: 38px; font-size: 17px; }
  .step .ring { width: 100%; height: 100%; }
  .step .txt { padding-top: 10px; }
  .step .txt b { font-size: 18px; }
  .step .detail > span { font-size: 15.5px; }

  .typed { gap: 24px; }
  .typed .sec-title { margin-bottom: 12px; }
  .chat { padding: 16px; border-radius: 22px; gap: 12px; }
  .chat .me { font-size: 15.5px; padding: 10px 14px; }
  .parsed { padding: 4px 14px; border-radius: 16px; }
  .parsed .it, .parsed .sum { padding: 8px 0; font-size: 15.5px; }
  .parsed .sum b { font-size: 22px; }

  .feat { padding: 16px 0 18px; }
  .feat, .point { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .ic { width: 40px; height: 40px; border-radius: 12px; }
  .ic svg { width: 20px; height: 20px; }
  .feat h3, .point h3 { font-size: 17px; margin-top: 6px; }
  .feat p, .point p { font-size: 15px; }
  .vault { gap: 24px; }
  .vault .sec-title { margin-bottom: 12px; }
  .points { border-radius: 20px; }
  .point { padding: 16px 0; }

  .plan { padding: 20px 18px 16px; border-radius: 18px; }
  .plan .amt { font-size: 30px; }
  .pay { margin: -8px auto 26px; gap: 8px 10px; }
  .pay > span { font-size: 15px; }
  .pay ul { gap: 6px; }
  .pay li { height: 30px; padding: 0 8px; border-radius: 8px; }
  .pay img { height: 16px; }
  .pay .bkash img { height: 18px; }
  .pay .rocket img { height: 20px; }

  .home-faq summary { font-size: 16.5px; padding: 15px 0; }

  .closing { padding: 60px 0 64px; }
  .closing .mark { height: 42px; margin-bottom: 16px; }
  .closing h2 { font-size: 32px; }

  .foot-min { padding: 28px 0 36px; }
}

/* The line above the plans: paying is all it takes, nobody has to switch
   premium on by hand. Only true while the uddoktapay function grants and
   emails on its own (WEB-PURCHASE.md in the app repo). */
.instant {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 680px;
  margin: -14px auto 22px; padding: 10px 14px; border-radius: 12px;
  background: var(--brand-sk); color: var(--ink); font-size: 15px; line-height: 1.6;
}
.instant svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: var(--brand); }