/* =============================================================
   Stichbook — redesigned home page (new.html), under review.
   Built from Figma "Stichbook - Original" (usYmGmmdKBeijQtnqW4ctS),
   frame 1491:3438 "Final Version" (1440 wide). Kept apart from
   styles.css so the live pages don't change; once new.html replaces
   index.html this can absorb what it needs.
   Sizes are the Figma values at 1440; where a value was changed for
   the web, the comment says so. Vanilla CSS, no frameworks.
   The top bar and the footer are in chrome.css, which every page shares.
============================================================= */

:root {
  --ink:      #171717;   /* Typography/900 */
  --ink-700:  #404040;   /* Typography/700 */
  --ink-600:  #525252;   /* Typography/600 */
  --ink-50:   #fafafa;   /* Typography/50 */
  --line:     #e5e5e5;   /* Typography/200 */
  --page:     #f3f7ff;   /* the tint every light section sits on */
  --night:    #000711;   /* the dark sections and the footer */
  --blue:     #0053e2;
  --green:    #008455;

  /* Latin in Inter; Gujarati and Hindi fall through to the script fonts. */
  --f-body: "Inter", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, sans-serif;
  --f-head: "Inter", "Baloo Bhai 2", "Baloo 2", system-ui, sans-serif;

  /* Figma's "line-height: normal" for Inter. Pinned so Gujarati / Hindi fallbacks don't stretch it. */
  --lh-normal: 1.21;

  --wrap: 1040px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.pre  { white-space: pre-line; }
[hidden] { display: none !important; }

/* ---------- Type ---------- */
.h-xl, .h-lg {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: var(--lh-normal);
}
.h-xl { font-size: clamp(40px, 4.6vw, 66px); }
.h-lg { font-size: clamp(32px, 3.34vw, 48px); }

/* ---------- Pill button ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: 100px;
  background: var(--blue); color: #fff;
  font-weight: 600; font-size: 16px; line-height: var(--lh-normal); text-align: center; white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pill:hover { background: #0047c2; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 83, 226, .35); }
.pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pill--block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--night);
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Not in Figma: a soft shade behind the copy so the white text stays readable over the bright parts of the video. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 7, 17, 0) 55%, rgba(0, 7, 17, .45) 100%);
}


.hero-copy {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(671px + 96px);
  padding: 0 48px 48px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.hero-text { display: flex; flex-direction: column; gap: 16px; }
.hero-title {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: clamp(40px, 4.45vw, 64px);
  line-height: var(--lh-normal);
  letter-spacing: -1.92px;
}
.hero-body { max-width: 539px; font-weight: 500; font-size: 16px; line-height: 23px; }

/* ---------- Trusted by ---------- */
.trust {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 100px 0;
}
.trust-label { font-size: 14px; font-weight: 500; line-height: var(--lh-normal); text-align: center; padding: 0 var(--gutter); }
.marquee {
  width: 100%; max-width: 1008px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.marquee-track { display: flex; gap: 48px; width: max-content; }
.marquee-track img { width: 48px; height: 48px; object-fit: cover; flex: none; }
.marquee.is-running .marquee-track { animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 24px)); } }

/* ---------- Phone mockups ---------- */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  width: 493px; max-width: 100%;
  aspect-ratio: 493 / 736;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #dfe7f5;
}
.shot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone { position: relative; width: 65%; aspect-ratio: 974 / 1946; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The screen sits inside the bezel, clipped by the Figma screen mask (rounded corners + island). */
.phone-screen {
  position: absolute;
  left: 5.24%; top: 2.1%; width: 89.12%; height: 96.19%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Figma: 14.385 / 7.193 / 38.36 — rounded to whole pixels. */
.stat-card {
  position: absolute; left: 50%; top: 73%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 38px;
  padding: 24px;
  background: #fff; border-radius: 12px;
  filter: drop-shadow(0 -2px 7.5px rgba(0, 0, 0, .15));
  white-space: nowrap;
}
.stat { display: flex; flex-direction: column; gap: 7px; }
.stat-label { font-size: 14px; font-weight: 500; line-height: var(--lh-normal); color: var(--ink-600); }
.stat-row { display: flex; align-items: center; gap: 7px; }
.stat-num { font-size: 24px; font-weight: 700; letter-spacing: -1.2px; line-height: var(--lh-normal); }
.stat-num.is-blue { color: var(--blue); }
.stat-num.is-green, .stat-delta { color: var(--green); }
.stat-delta { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; }
.stat-sep { width: 1px; height: 33px; object-fit: fill; }

/* ---------- Features ---------- */
.features { padding: 100px 0 160px; }
.features .wrap { display: flex; flex-direction: column; gap: 160px; }
.feature { display: flex; align-items: center; gap: 100px; }
.feature--flip { flex-direction: row-reverse; }
.feature-copy {
  flex: 1 1 447px; max-width: 447px;
  display: flex; flex-direction: column; gap: 40px;
}
.ticks { display: flex; flex-direction: column; gap: 24px; }
.ticks li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 18px; font-weight: 500; line-height: 24px;
}
.ticks li::before {
  content: ""; flex: none; width: 24px; height: 24px;
  background: url(../assets/v2/ic-check-blue.svg) no-repeat center / 24px 24px;
}

/* ---------- Workforce (dark band) ---------- */
.team { background: var(--night); color: var(--ink-50); padding: 160px 0; }
.team .wrap { display: flex; flex-direction: column; gap: 100px; }
.team-head { max-width: 671px; display: flex; flex-direction: column; gap: 16px; }
.team-head .h-xl { letter-spacing: -1.92px; line-height: 1.045; }   /* Figma 66 / 69 */
.team-sub { max-width: 452px; font-size: 18px; font-weight: 500; line-height: 23px; }
/* Scroll runway: the row sticks in the middle of the screen while the page scrolls
   one --team-step per tab, then lets go. */
.team-scroll { --team-step: 70vh; height: calc(781px + 2 * var(--team-step)); }
.team-row {
  position: sticky; top: max(24px, calc(50vh - 390px));
  display: flex; gap: 60px; align-items: stretch;
}

/* The tab list is a short vertical carousel: the active item sits in the middle,
   its neighbours fade out at the top and bottom edges, as in Figma. */
.team-list {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 28%, #000 76%, transparent 98%);
          mask-image: linear-gradient(180deg, transparent 4%, #000 28%, #000 76%, transparent 98%);
}
.team-track {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: 120px;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.team-item {
  display: flex; flex-direction: column; gap: 16px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  opacity: .3; transition: opacity .4s ease;
}
.team-item:hover { opacity: .6; }
.team-item.is-active { opacity: 1; }
.team-item:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.team-item-title { font-family: var(--f-head); font-weight: 700; font-size: 48px; line-height: var(--lh-normal); }
.team-item-body { max-width: 404px; font-size: 24px; line-height: 31px; }
.team-shots { position: relative; flex: none; width: 490px; aspect-ratio: 490 / 781; }
.shot--team {
  position: absolute; inset: 0; width: 100%; background: #fff;
  opacity: 0; transform: scale(.985);
  transition: opacity .5s ease, transform .5s ease;
}
.shot--team.is-active { opacity: 1; transform: none; }
.shot--team .phone { width: 70.4%; }

/* ---------- Click. Save. Done. ---------- */
/* The section takes the photo's own shape (2400 × 1747), so the whole photo shows at every
   width — a fixed height cropped the top and bottom off on wide screens. */
.scan { position: relative; overflow: hidden; color: #fff; background: var(--night); }
.scan-img { width: 100%; height: auto; aspect-ratio: 2400 / 1747; }
.scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 53.05%, rgba(0, 0, 0, .85) 74.425%);
}
.scan-copy {
  position: absolute; z-index: 2; left: 62px; bottom: 48px;
  width: 591px; max-width: calc(100% - 2 * var(--gutter));
  display: flex; flex-direction: column; gap: 16px;
  font-weight: 500;
}
.scan-title { font-family: var(--f-head); font-weight: 500; font-size: clamp(40px, 4.6vw, 66px); line-height: var(--lh-normal); }
.scan-body { display: flex; flex-direction: column; gap: 12px; font-size: 24px; line-height: var(--lh-normal); }
/* Not in Figma: the sample panel photo the old home page and the store listings offered, so anyone can try the scan without a machine. */
.scan-sample { align-self: flex-start; margin-top: 8px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; opacity: .85; }
.scan-sample:hover { opacity: 1; }
.scan-sample:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* ---------- Pricing ---------- */
.trial { padding: 160px 0; }
.trial .wrap { display: flex; flex-direction: column; gap: 100px; }
.trial-head { display: flex; flex-direction: column; gap: 16px; }
.trial-head .h-xl { max-width: 693px; }
.trial-sub { max-width: 657px; font-weight: 500; font-size: 16px; line-height: 24px; }

.price-card {
  display: flex; align-items: stretch; gap: 60px;
  padding: 48px;
  background: #fff; border-radius: 16px;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .08));
}
.calc { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 60px; }
.calc-block { display: flex; flex-direction: column; gap: 24px; }
.calc-q { font-size: 20px; font-weight: 600; line-height: var(--lh-normal); }

.stepper { display: flex; align-items: center; gap: 24px; }
.step {
  flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
  transition: transform .1s ease, background-color .15s ease;
}
.step:active { transform: scale(.94); }
.step:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.step--minus:hover { background: var(--page); }
.step--plus { background: var(--blue); }
.step--plus:hover { background: #0047c2; }
.step:disabled { opacity: .4; cursor: default; }
.step-field {
  display: flex; align-items: center; gap: 24px;
  height: 56px; padding: 0 32px;
  border: 1px solid var(--line); border-radius: 8px;
  white-space: nowrap; min-width: 0;
}
.step-field:focus-within { border-color: var(--blue); }
.step-input {
  width: 2ch; max-width: 3ch; padding: 0; border: 0; background: none; outline: none;
  font-size: 24px; font-weight: 600; line-height: var(--lh-normal); text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc-sum { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; border-radius: 16px; background: var(--page); }
.calc-total { font-size: 24px; line-height: var(--lh-normal); }
.calc-total b { font-size: 56px; font-weight: 700; color: var(--blue); }
.calc-rate { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid #dbe4fb; color: var(--ink-700); line-height: 1.4; }
.calc-rate b { color: var(--ink); font-weight: 700; }
.calc-note { font-size: 14px; color: var(--ink-600); }

/* What the plan includes, and the button. The price itself is stated once, under the calculator. */
.price-side {
  flex: none; width: 400px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 32px;
  background: var(--page); border-radius: 16px;
}
.price-list { display: flex; flex-direction: column; gap: 24px; line-height: var(--lh-normal); }
.price-list > p { font-size: 20px; font-weight: 600; }
.checks { display: flex; flex-direction: column; gap: 16px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: .1em;
  background: url(../assets/v2/ic-check-green.svg) no-repeat center / 16px 16px;
}

/* ---------- FAQ ---------- */
.faq { padding: 80px 0 160px; }
.faq .wrap { display: flex; align-items: flex-start; gap: 100px; }
.faq-title { flex: none; width: 387px; }
.faq-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.faq-list details { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-list details:first-child { border-top: 0; padding-top: 0; }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 60px;
  font-size: 20px; font-weight: 600; line-height: var(--lh-normal);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Figma shows every item open with the chevron pointing up; a closed item points it down. */
.faq-list summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: .2em;
  background: url(../assets/v2/ic-chevron.svg) no-repeat center / 16px 16px;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
/* Figma: line-height normal (19px). 24px here — long answers were hard to read that tight. */
.faq-list details p { margin-top: 12px; padding-right: 76px; color: var(--ink-700); font-size: 16px; line-height: 24px; }

/* ---------- Closing call to action ---------- */
.closer {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 60px;
  padding-top: 120px;
  background: var(--night); color: var(--ink-50);
  overflow: hidden;
}
.closer-head {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(671px + 2 * var(--gutter)); padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center;
}
.closer-title { max-width: 522px; letter-spacing: -1.92px; }
.closer-body { max-width: 330px; margin-top: -16px; font-size: 16px; line-height: 23px; }
/* Edge to edge at any width, as in Figma; on very wide screens the height stops growing and the photo crops top and bottom. */
.closer-media { position: relative; width: 100%; aspect-ratio: 1440 / 1024; max-height: 1200px; }
.closer-media img { width: 100%; height: 100%; object-fit: cover; }
/* The photo melts into the night colour at the top and the bottom. */
.closer-media::before, .closer-media::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.closer-media::before { top: 0; height: 10%; background: linear-gradient(180deg, var(--night) 25%, rgba(0, 7, 17, 0) 100%); }
.closer-media::after  { bottom: 0; height: 37%; background: linear-gradient(180deg, rgba(0, 7, 17, 0) 0%, var(--night) 99%); }


/* ---------- Screen animations ----------
   A .screen-fx layer sits exactly over a .phone-screen, clipped by the same mask.
   Children are placed in the screenshot's own pixels (--x, --y, --w, --h against
   --sw × --sh), and text is sized in cqw (1cqw = 1% of the screen's width), so the
   layer scales with the phone. Everything runs on one 8s loop while the layer has
   .is-playing (js/v2.js); paused, or with reduced motion, it shows nothing and the
   screenshot stands alone.
   Building blocks: .fx-cover hides part of the screen in its background colour and
   lifts at --at% (things "load in"); .fx-bar empties a progress bar and refills it;
   .fx-show appears at --at%; .fx-num redraws a number over the screenshot so it can
   count ([data-count], js); .fx-pill / .fx-btn draw a selected button; .fx-finger
   taps. The fx-c / fx-b / fx-s / fx-h keyframes below are generated from new.html. */
.screen-fx {
  position: absolute;
  left: 5.24%; top: 2.1%; width: 89.12%; height: 96.19%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  container-type: size;
  pointer-events: none;
  --fx-loop: 8s;
}
.screen-fx > * {
  position: absolute;
  left: calc(var(--x) / var(--sw) * 100%);
  top: calc(var(--y) / var(--sh) * 100%);
  width: calc(var(--w) / var(--sw) * 100%);
  height: calc(var(--h) / var(--sh) * 100%);
  opacity: 0;
  animation: var(--fx-name, none) var(--fx-loop) ease-in-out infinite both paused;
}
.screen-fx * { animation-play-state: paused; }
.screen-fx.is-playing > *, .screen-fx.is-playing * { animation-play-state: running; }
.screen-fx.fx-reset > *, .screen-fx.fx-reset * { animation: none !important; }
.fx-clock { --x: 0; --y: 0; --w: 0; --h: 0; --fx-name: fx-clock; }
@keyframes fx-clock { from { opacity: 0; } to { opacity: 0; } }

.fx-cover { background: var(--bg); z-index: 2; }   /* above the bars, so an unloaded row hides its bar too */
.fx-bar { background: #d4d4d4; border-radius: 99px; transform-origin: right center; }
.fx-num {
  display: flex; align-items: center; justify-content: var(--j, flex-start); gap: 2.4cqw;
  background: var(--bg); color: var(--c);
  font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: var(--fs); line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fx-num i { font-style: normal; font-weight: 500; color: var(--ink); font-size: .85em; }

/* A selected choice pill or button, drawn over the screenshot's plain one. Figma pill: 17px Inter on a 615-wide screen. */
.fx-pill, .fx-btn {
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--blue); color: #fff;
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 2.76cqw; white-space: nowrap;
}
.fx-btn { font-size: 3.1cqw; box-shadow: 0 1.2cqw 3cqw rgba(0, 83, 226, .35); }
.fx-btn-label, .fx-btn-done { position: absolute; }
.fx-btn-done { opacity: 0; animation: fx-done var(--fx-loop) ease infinite both; }
.fx-btn-label { animation: fx-label var(--fx-loop) ease infinite both; }
@keyframes fx-label { 0%, 75% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes fx-done  { 0%, 75% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* The tap target: a soft fingertip that moves between taps and presses on each. */
.fx-finger {
  --x: 0; --y: 0; --w: 64; --h: 64;
  margin: calc(-32 / var(--sw) * 100%) 0 0 calc(-32 / var(--sw) * 100%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: .5cqw solid rgba(255, 255, 255, .95);
  box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .25);
  z-index: 5;
}

/* Today's attendance dot breathes. */
.fx-ping { border-radius: 50%; border: .5cqw solid #12b76a; opacity: 1; animation: fx-ping 1.8s ease-out infinite; }
@keyframes fx-ping { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* Hajari: tap 1 day (Ramesh), ½ Day (Dharmesh), 1.5 day (Gopal). Save Hajari turns on with
   the first tap, is pressed at the end and shows Saved. */
.fx-hajari .fx-t1 { --fx-name: fx-on-14; }
.fx-hajari .fx-t2 { --fx-name: fx-on-32; }
.fx-hajari .fx-t3 { --fx-name: fx-on-50; }
.fx-hajari .fx-t4 { --fx-name: fx-save; }
.fx-hajari .fx-finger { --fx-name: fx-finger-hajari; }
@keyframes fx-on-14 { 0%, 13% { opacity: 0; transform: scale(.9); } 16%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes fx-on-32 { 0%, 31% { opacity: 0; transform: scale(.9); } 34%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes fx-on-50 { 0%, 49% { opacity: 0; transform: scale(.9); } 52%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes fx-save  { 0%, 14% { opacity: 0; transform: none; } 17%, 66% { opacity: 1; transform: none; } 68% { transform: scale(.93); } 71%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes fx-finger-hajari {
  0%       { opacity: 0; left: calc(307 / 615 * 100%); top: calc(640 / 1326 * 100%); transform: none; }
  6%       { opacity: 1; }
  12%      { left: calc(307 / 615 * 100%); top: calc(552 / 1326 * 100%); transform: none; }
  14%      { transform: scale(.78); }
  17%      { transform: none; }
  30%      { left: calc(202 / 615 * 100%); top: calc(737 / 1326 * 100%); transform: none; }
  32%      { transform: scale(.78); }
  35%      { transform: none; }
  48%      { left: calc(412 / 615 * 100%); top: calc(923 / 1326 * 100%); transform: none; }
  50%      { transform: scale(.78); }
  53%      { transform: none; }
  66%      { left: calc(510 / 615 * 100%); top: calc(1178 / 1326 * 100%); transform: none; }
  68%      { transform: scale(.78); }
  71%      { transform: none; opacity: 1; }
  78%, 100% { left: calc(510 / 615 * 100%); top: calc(1178 / 1326 * 100%); opacity: 0; }
}

/* Production: every row starts blank with the app's camera button. Tap it on Machine 1, the
   camera finds the screen (box turns green), the photo is read, the details come back, Save,
   and back on the list Machine 1 fills, then the other machines one by one, then the averages.
   Mirrors the Android app (ProductionScreen.kt / ScanCamera.kt). 12s loop; sizes are
   screenshot pixels on the 573-wide screen (1cqw = 5.73px). */
.fx-production { --fx-loop: 12s; }
.fx-blank { display: flex; align-items: center; justify-content: flex-end; padding-right: 3.5cqw; color: var(--blue); }
.fx-blank svg { width: 5.6cqw; height: 5.6cqw; }
.fx-finger-prod { --fx-name: fx-finger-prod; }
@keyframes fx-finger-prod {
  0%        { opacity: 0; left: calc(512 / 573 * 100%); top: calc(430 / 1234 * 100%); transform: none; }
  4%        { opacity: 1; left: calc(512 / 573 * 100%); top: calc(430 / 1234 * 100%); }
  8%        { left: calc(512 / 573 * 100%); top: calc(317 / 1234 * 100%); transform: none; }
  9%        { transform: scale(.78); }
  10.5%     { transform: none; opacity: 1; left: calc(512 / 573 * 100%); top: calc(317 / 1234 * 100%); }
  12%, 16%  { opacity: 0; left: calc(286 / 573 * 100%); top: calc(1110 / 1234 * 100%); transform: none; }
  19%       { opacity: 1; left: calc(286 / 573 * 100%); top: calc(1080 / 1234 * 100%); transform: none; }
  20.5%     { transform: scale(.78); }
  22%       { transform: none; opacity: 1; left: calc(286 / 573 * 100%); top: calc(1080 / 1234 * 100%); }
  23.5%, 38% { opacity: 0; left: calc(470 / 573 * 100%); top: calc(1190 / 1234 * 100%); transform: none; }
  41%       { opacity: 1; left: calc(470 / 573 * 100%); top: calc(1146 / 1234 * 100%); transform: none; }
  43%       { transform: scale(.78); }
  44.5%     { transform: none; opacity: 1; left: calc(470 / 573 * 100%); top: calc(1146 / 1234 * 100%); }
  46%, 100% { opacity: 0; left: calc(470 / 573 * 100%); top: calc(1146 / 1234 * 100%); transform: none; }
}

/* Camera (ScanCamera.kt): black, 3:4 preview, guide box with the outside dimmed, hint pill, shutter.
   The preview (slip-viewfinder.jpg, made from assets/sample-slip.jpeg) is the whole machine screen
   with its bezel and the machine out of focus around it, as a phone held in front of it sees it. The
   hand drifts, settles, the box locks onto the full screen and turns green, and the photo is taken. */
.fx-cam { --fx-name: fx-cam; background: #000; overflow: hidden; z-index: 3; }
@keyframes fx-cam { 0%, 11% { opacity: 0; } 12.5%, 23.5% { opacity: 1; } 25%, 100% { opacity: 0; } }
.fx-cam-x { position: absolute; left: calc(30 / 573 * 100%); top: calc(70 / 1234 * 100%); color: #fff; font-size: 5cqw; line-height: 1; }
.fx-cam-view { position: absolute; left: 0; right: 0; top: calc(150 / 1234 * 100%); height: calc(764 / 1234 * 100%); overflow: hidden; }
.fx-cam-view img { width: 100%; height: 100%; object-fit: cover; animation: fx-cam-zoom var(--fx-loop) ease-out infinite both; }
@keyframes fx-cam-zoom {
  0%, 12%   { transform: translate(4%, -5%) scale(1.16) rotate(-2deg); }
  14.5%     { transform: translate(-1.5%, 1.5%) scale(1.04) rotate(.8deg); }
  16.5%     { transform: translate(.5%, -.4%) scale(1.01) rotate(-.2deg); }
  18%, 100% { transform: none; }
}
.fx-cam-box {
  position: absolute; left: 5%; right: 5%; top: 22.6%; height: 46.8%;   /* the machine screen in slip-viewfinder.jpg, plus a little room */
  border: .55cqw solid rgba(255, 255, 255, .7); border-radius: 1.6cqw;
  box-shadow: 0 0 0 200cqw rgba(0, 0, 0, .35);
  animation: fx-cam-box var(--fx-loop) ease infinite both;
}
@keyframes fx-cam-box { 0%, 17.5% { border-color: rgba(255, 255, 255, .7); border-width: .55cqw; } 18.5%, 100% { border-color: #16a34a; border-width: .9cqw; } }
/* The camera's thirds grid. */
.fx-cam-grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.33% - .1cqw), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(33.33% + .1cqw), transparent 0, transparent calc(66.66% - .1cqw), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(66.66% + .1cqw), transparent 0),
    linear-gradient(180deg, transparent calc(33.33% - .1cqw), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(33.33% + .1cqw), transparent 0, transparent calc(66.66% - .1cqw), rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) calc(66.66% + .1cqw), transparent 0);
}
.fx-cam-hint { position: absolute; left: 0; right: 0; top: calc(180 / 1234 * 100%); display: grid; justify-items: center; }
.fx-cam-hint span {
  grid-area: 1 / 1; padding: 1.7cqw 3.2cqw; border-radius: 3.5cqw;
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 2.6cqw; font-weight: 500; white-space: nowrap;
}
.fx-cam-hint span:first-child { animation: fx-label var(--fx-loop) ease infinite both; animation-name: fx-hint-a; }
.fx-cam-hint span:last-child  { animation: fx-hint-b var(--fx-loop) ease infinite both; }
@keyframes fx-hint-a { 0%, 17.5% { opacity: 1; } 18.5%, 100% { opacity: 0; } }
@keyframes fx-hint-b { 0%, 17.5% { opacity: 0; } 18.5%, 100% { opacity: 1; } }
.fx-cam-shutter {
  position: absolute; left: calc(50% - 9.6cqw); top: calc(calc(1080 / 1234 * 100%) - 9.6cqw); width: 19.2cqw; height: 19.2cqw;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: fx-shutter var(--fx-loop) ease infinite both;
}
.fx-cam-shutter span { width: 14.8cqw; height: 14.8cqw; border-radius: 50%; background: rgba(255, 255, 255, .5); animation: fx-shutter-in var(--fx-loop) ease infinite both; }
@keyframes fx-shutter { 0%, 17.5% { background: rgba(255, 255, 255, .3); } 18.5%, 100% { background: #16a34a; } }
@keyframes fx-shutter-in { 0%, 17.5% { background: rgba(255, 255, 255, .5); transform: none; } 18.5%, 20% { background: #fff; transform: none; } 21% { transform: scale(.85); } 22%, 100% { background: #fff; transform: none; } }
.fx-cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fx-flash var(--fx-loop) ease infinite both; }
@keyframes fx-flash { 0%, 21% { opacity: 0; } 21.6% { opacity: .9; } 23.5%, 100% { opacity: 0; } }

/* "Reading photo…" while the slip is read. */
.fx-read { --fx-name: fx-read; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); z-index: 4; }
@keyframes fx-read { 0%, 23% { opacity: 0; } 24%, 29.5% { opacity: 1; } 31%, 100% { opacity: 0; } }
.fx-read > span {
  display: flex; align-items: center; gap: 3cqw; padding: 4.2cqw 5.6cqw; border-radius: 2.8cqw;
  background: #fff; color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 3.2cqw; font-weight: 500;
}
.fx-read i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: .7cqw solid #dbe4fb; border-top-color: var(--blue); animation: fx-spin .8s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* Machine details after the scan: fields arrive one by one, then Save (red when there is a change, green while saving). */
.fx-detail {
  --fx-name: fx-detail; z-index: 2;
  background: linear-gradient(180deg, #d6e6ff 0, #eef0f7 21%);
  font-family: "Inter", system-ui, sans-serif; color: var(--ink);
}
@keyframes fx-detail { 0%, 23% { opacity: 0; transform: none; } 24%, 46% { opacity: 1; transform: none; } 48.5% { opacity: 1; transform: translateX(100%); } 49%, 100% { opacity: 0; transform: translateX(100%); } }
.fx-d-head { position: absolute; left: calc(22 / 573 * 100%); top: calc(84 / 1234 * 100%); display: flex; align-items: center; gap: 3.2cqw; }
.fx-d-back { width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 6cqw; line-height: 1; padding-bottom: .8cqw; }
.fx-d-head b { display: block; font-size: 4.4cqw; line-height: 1.2; }
.fx-d-head small { display: block; font-size: 2.8cqw; color: var(--ink-500, #737373); }
.fx-d-ok {
  position: absolute; left: calc(22 / 573 * 100%); top: calc(168 / 1234 * 100%);
  padding: 1.4cqw 2.8cqw; border-radius: 99px; background: #e3f6ec; color: #027a48; font-size: 2.6cqw; font-weight: 600;
  animation: fx-d-in var(--fx-loop) ease infinite both;
}
.fx-d-card {
  position: absolute; left: calc(22 / 573 * 100%); right: calc(22 / 573 * 100%); top: calc(222 / 1234 * 100%);
  display: flex; flex-direction: column; padding: 1cqw 3.5cqw 3.5cqw; border-radius: 2.8cqw; background: #fff;
}
.fx-d-row { display: flex; justify-content: space-between; align-items: center; height: 9.2cqw; border-bottom: .18cqw solid #f0f0f0; font-size: 3cqw; color: var(--ink-600); }
.fx-d-row b { color: var(--ink); font-size: 3.2cqw; animation: fx-d-in var(--fx-loop) ease infinite both; animation-delay: calc(var(--d) * var(--fx-loop) * .012); }
@keyframes fx-d-in { 0%, 30% { opacity: 0; transform: translateY(.6cqw); } 31.5%, 100% { opacity: 1; transform: none; } }
/* The photo just taken, whole: the full machine screen, not a crop. */
.fx-d-card img { width: 100%; height: auto; aspect-ratio: 900 / 617; margin: 2.5cqw 0 1cqw; border-radius: 2cqw; object-fit: cover; }
.fx-d-save {
  position: absolute; right: calc(22 / 573 * 100%); top: calc(1120 / 1234 * 100%); height: 9.2cqw; padding: 0 5.6cqw; border-radius: 99px;
  display: grid; place-items: center; color: #fff; font-size: 2.65cqw; font-weight: 600;
  animation: fx-d-save var(--fx-loop) ease infinite both;
}
.fx-d-save span { grid-area: 1 / 1; }
.fx-d-save span:first-child { animation: fx-save-a var(--fx-loop) ease infinite both; }
.fx-d-save span:last-child  { animation: fx-save-b var(--fx-loop) ease infinite both; }
@keyframes fx-d-save { 0%, 42.5% { background: #dc2626; transform: none; } 43% { transform: scale(.94); } 43.5%, 100% { background: #16a34a; transform: none; } }
@keyframes fx-save-a { 0%, 43% { opacity: 1; } 43.5%, 100% { opacity: 0; } }
@keyframes fx-save-b { 0%, 43% { opacity: 0; } 43.5%, 100% { opacity: 1; } }

/* "Saved — syncing in the background" back on the list. */
.fx-toast {
  --fx-name: fx-toast; z-index: 2;
  display: flex; align-items: center; justify-content: center; border-radius: 2cqw;
  background: #171717; color: #fff; font-family: "Inter", system-ui, sans-serif; font-size: 2.65cqw; font-weight: 500;
}
@keyframes fx-toast { 0%, 47% { opacity: 0; transform: translateY(40%); } 49%, 58% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: none; } }

/* The average card under the phone waits until every machine is in. */
.shot:has(.fx-production.is-playing) .stat-card { animation: fx-card-prod 12s ease-in-out infinite both; }
@keyframes fx-card-prod { 0% { opacity: 1; translate: 0 0; } 2%, 77% { opacity: 0; translate: 0 18px; } 81%, 100% { opacity: 1; translate: 0 0; } }

/* Salary: the summary loads and Net Payable counts up, then a finger scrolls the slip down
   through all seven days under "Days (7)", it holds, and goes back to the top for the next loop.
   Inside .fx-page every box is in screenshot pixels as cqw (604 wide: 1px = 100/604 cqw), so it
   moves as one piece with the scroll. 1938 tall in all; 1212 shows above the tab bar. */
.fx-salary { --fx-loop: 10s; }
.fx-scroller { opacity: 1; overflow: hidden; z-index: 1; }
.fx-page {
  position: absolute; left: 0; top: 0; width: 100cqw; height: calc(1938 / 604 * 100cqw);
  animation: fx-scroll var(--fx-loop) ease-in-out infinite both;
}
@keyframes fx-scroll {
  0%, 44%   { transform: none; }
  62%, 84%  { transform: translateY(calc(-726 / 604 * 100cqw)); }
  94%, 100% { transform: none; }
}
.fx-page > * {
  position: absolute;
  left: calc(var(--x) / 604 * 100cqw); top: calc(var(--y) / 604 * 100cqw);
  width: calc(var(--w) / 604 * 100cqw); height: calc(var(--h) / 604 * 100cqw);
  opacity: 0;
  animation: var(--fx-name, none) var(--fx-loop) ease-in-out infinite both;
}
.fx-page > .fx-page-shot { left: 0; top: 0; width: 100cqw; height: calc(1301 / 604 * 100cqw); max-width: none; opacity: 1; }
.fx-days {
  opacity: 1 !important;
  display: flex; flex-direction: column; gap: calc(12 / 604 * 100cqw);
  padding: calc(6 / 604 * 100cqw) calc(24 / 604 * 100cqw) 0;
  background: #eef0f7;
  font-family: "Inter", system-ui, sans-serif; color: var(--ink);
}
.fx-day {
  flex: none; height: calc(111 / 604 * 100cqw);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(24 / 604 * 100cqw);
  background: #fff; border-radius: calc(24 / 604 * 100cqw);
}
.fx-day > span { display: flex; flex-direction: column; gap: 1.2cqw; }
.fx-day > span b { font-size: 3.65cqw; font-weight: 500; line-height: 1.2; }
.fx-day i, .fx-day em { font-style: normal; font-size: 3.15cqw; font-weight: 500; line-height: 1.2; }
.fx-day i { color: #039855; }
.fx-day em { color: #d92d20; }
.fx-day > b { font-size: 3.65cqw; font-weight: 700; }
.fx-day > b.is-off { color: #a3a3a3; }
/* The status bar is a strip of the same screenshot, held still above the scrolling slip. */
.fx-status { opacity: 1; z-index: 2; background: url(../assets/v2/screen-salary.png) top center / 100% auto no-repeat; }
.fx-finger-salary { --fx-name: fx-finger-salary; }
@keyframes fx-finger-salary {
  0%, 40%  { opacity: 0; left: calc(300 / 604 * 100%); top: calc(1080 / 1301 * 100%); transform: none; }
  43%      { opacity: 1; left: calc(300 / 604 * 100%); top: calc(1080 / 1301 * 100%); transform: scale(.85); }
  60%      { opacity: 1; left: calc(300 / 604 * 100%); top: calc(380 / 1301 * 100%); transform: scale(.85); }
  64%, 100% { opacity: 0; left: calc(300 / 604 * 100%); top: calc(380 / 1301 * 100%); transform: none; }
}

/* Reports (14s): tap August and the machines load in; then open the filters with the chevron
   (From / To and By Machine · By Karigar · Table), tap By Karigar and the list becomes karigar-wise.
   .fx-r-page redraws everything under the filter row in screenshot pixels (--u = 1px of 564). */
.fx-reports { --fx-loop: 14s; --u: calc(100cqw / 564); }
@keyframes fx-s-14 { 0%, 7.5% { opacity: 0; transform: scale(.92); } 9.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fx-c-16-21 { 0%, 8.5% { opacity: 0; } 9.5%, 12% { opacity: 1; } 13.7%, 100% { opacity: 0; } }
@keyframes fx-c-16-24 { 0%, 8.5% { opacity: 0; } 9.5%, 13.7% { opacity: 1; } 15.4%, 100% { opacity: 0; } }
@keyframes fx-c-16-27 { 0%, 8.5% { opacity: 0; } 9.5%, 15.4% { opacity: 1; } 17.1%, 100% { opacity: 0; } }
@keyframes fx-c-16-30 { 0%, 8.5% { opacity: 0; } 9.5%, 17.1% { opacity: 1; } 18.9%, 100% { opacity: 0; } }
@keyframes fx-c-16-33 { 0%, 8.5% { opacity: 0; } 9.5%, 18.9% { opacity: 1; } 20.6%, 100% { opacity: 0; } }
@keyframes fx-c-16-36 { 0%, 8.5% { opacity: 0; } 9.5%, 20.6% { opacity: 1; } 22.3%, 100% { opacity: 0; } }
.fx-finger-reports { --fx-name: fx-finger-reports; }
@keyframes fx-finger-reports {
  0%       { opacity: 0; left: calc(367 / 564 * 100%); top: calc(330 / 1215 * 100%); transform: none; }
  3.5%     { opacity: 1; }
  7%       { left: calc(367 / 564 * 100%); top: calc(183 / 1215 * 100%); transform: none; }
  8%       { transform: scale(.78); }
  9.7%     { transform: none; opacity: 1; }
  13.7%    { left: calc(367 / 564 * 100%); top: calc(183 / 1215 * 100%); opacity: 0; }
  24%      { opacity: 0; left: calc(492 / 564 * 100%); top: calc(340 / 1215 * 100%); transform: none; }
  26%      { opacity: 1; }
  29%      { left: calc(492 / 564 * 100%); top: calc(248 / 1215 * 100%); transform: none; }
  30%      { transform: scale(.78); }
  31.5%    { transform: none; left: calc(492 / 564 * 100%); top: calc(248 / 1215 * 100%); }
  38%      { left: calc(282 / 564 * 100%); top: calc(448 / 1215 * 100%); transform: none; }
  40%      { transform: scale(.78); }
  41.5%    { transform: none; opacity: 1; }
  45%, 100% { left: calc(282 / 564 * 100%); top: calc(448 / 1215 * 100%); opacity: 0; }
}
/* The chevron turns up while the filters are open. */
.fx-r-chev { --fx-name: fx-r-open; z-index: 3; background: #fff; border-radius: 99px; }
.fx-r-chev::after {
  content: ""; position: absolute; left: 50%; top: 58%; width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border: solid #171717; border-width: calc(3 * var(--u)) 0 0 calc(3 * var(--u)); transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes fx-r-open { 0%, 30.5% { opacity: 0; } 31.5%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.fx-r-page {
  --fx-name: fx-r-open; z-index: 3; overflow: hidden;
  display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: 0 calc(22 * var(--u));
  background: #eef0f7; font-family: "Inter", system-ui, sans-serif; color: #171717;
}
.fx-r-page > * { flex: none; }
.fx-r-panel {
  display: flex; flex-direction: column; gap: calc(20 * var(--u)); overflow: hidden;
  padding: 0 calc(26 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff;
  animation: fx-r-panel var(--fx-loop) ease-in-out infinite both;
}
@keyframes fx-r-panel {
  0%, 31%   { height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(-20 * var(--u)); }
  35%, 100% { height: calc(208 * var(--u)); padding-top: calc(26 * var(--u)); padding-bottom: calc(26 * var(--u)); margin-bottom: 0; }
}
.fx-r-dates { display: flex; gap: calc(20 * var(--u)); flex: none; }
.fx-r-dates > span {
  flex: 1; height: calc(72 * var(--u)); padding: 0 calc(18 * var(--u)); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  border: calc(2 * var(--u)) solid #e5e5e5; border-radius: calc(16 * var(--u));
  font-size: calc(20 * var(--u)); font-weight: 600;
}
.fx-r-dates small { font-size: calc(15 * var(--u)); font-weight: 400; color: #737373; }
.fx-r-seg {
  position: relative; flex: none; display: flex; height: calc(64 * var(--u));
  border-radius: 99px; background: #f0f1f5; font-size: calc(19 * var(--u)); font-weight: 600;
}
.fx-r-seg > span { position: relative; flex: 1; display: grid; place-items: center; }
.fx-r-seg > i {
  position: absolute; left: 0; top: 0; width: calc(100% / 3); height: 100%; border-radius: 99px; background: #000;
  animation: fx-r-seg var(--fx-loop) ease-in-out infinite both;
}
@keyframes fx-r-seg { 0%, 40.5% { transform: none; } 43%, 100% { transform: translateX(100%); } }
.fx-r-seg > span:nth-of-type(1) { animation: fx-r-on var(--fx-loop) ease infinite both; }
.fx-r-seg > span:nth-of-type(2) { animation: fx-r-off var(--fx-loop) ease infinite both; }
@keyframes fx-r-on  { 0%, 41.5% { color: #fff; } 42.5%, 100% { color: #171717; } }
@keyframes fx-r-off { 0%, 41.5% { color: #171717; } 42.5%, 100% { color: #fff; } }
.fx-r-sum {
  display: flex; justify-content: space-between; height: calc(106 * var(--u)); padding: 0 calc(22 * var(--u));
  border-radius: calc(22 * var(--u)); background: #fff; font-size: calc(19 * var(--u)); color: #737373;
}
.fx-r-sum span { display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u)); }
.fx-r-sum b { font-size: calc(28 * var(--u)); color: #0053e2; }
.fx-r-swap { display: grid !important; }
.fx-r-swap > span { grid-area: 1 / 1; }
.fx-r-swap > span:first-child, .fx-r-mach { animation: fx-r-out var(--fx-loop) ease infinite both; }
.fx-r-swap > span:last-child, .fx-r-kar { animation: fx-r-in var(--fx-loop) ease infinite both; }
@keyframes fx-r-out { 0%, 41.5% { opacity: 1; transform: none; } 43.5%, 100% { opacity: 0; transform: translateY(calc(-12 * var(--u))); } }
@keyframes fx-r-in  { 0%, 42.5% { opacity: 0; transform: translateY(calc(16 * var(--u))); } 45%, 100% { opacity: 1; transform: none; } }
.fx-r-list { display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.fx-r-kar { margin-top: calc(-1 * (5 * 116 + 4 * 22 + 20) * var(--u)); }
.fx-r-row {
  display: flex; align-items: center; gap: calc(22 * var(--u)); height: calc(116 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: calc(22 * var(--u)); background: #fff;
}
.fx-r-row > i {
  flex: none; width: calc(54 * var(--u)); height: calc(36 * var(--u)); display: grid; place-items: center;
  border-radius: calc(8 * var(--u)); background: #e8edf8; color: #0053e2; font-style: normal; font-size: calc(19 * var(--u)); font-weight: 600;
}
.fx-r-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.fx-r-row > span:nth-child(2) b { font-size: calc(21 * var(--u)); font-weight: 500; white-space: nowrap; }
.fx-r-row small { font-size: calc(16.5 * var(--u)); color: #525252; white-space: nowrap; }
.fx-r-total { display: flex; flex-direction: column; align-items: flex-end; gap: calc(12 * var(--u)); padding-right: calc(28 * var(--u)); position: relative; }
.fx-r-total::after {
  content: ""; position: absolute; right: calc(2 * var(--u)); top: calc(9 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border: solid #171717; border-width: calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0 0; transform: rotate(45deg);
}
.fx-r-total b { font-size: calc(22 * var(--u)); font-weight: 700; }
.fx-r-total s {
  display: block; width: calc(105 * var(--u)); height: calc(6 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, var(--c) calc(var(--f) * 100%), #e5e5e5 0);
}

/* Upad: tap + on Bhavesh Gohil, a sheet slides up, ₹5,000 is typed and saved. Sheet sizes are
   screenshot pixels ÷ 6.15 (the screen is 615 wide). */
.fx-dim { background: rgba(0, 7, 17, .4); --fx-name: fx-dim; }
@keyframes fx-dim { 0%, 14% { opacity: 0; } 18%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
.fx-sheet {
  --fx-name: fx-sheet;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 2.6cqw 5.2cqw 0;
  background: #fff; border-radius: 4.5cqw 4.5cqw 0 0;
  box-shadow: 0 -2cqw 6cqw rgba(0, 0, 0, .18);
  font-family: "Inter", system-ui, sans-serif; color: var(--ink);
}
@keyframes fx-sheet { 0%, 14% { opacity: 0; transform: translateY(100%); } 15% { opacity: 1; } 19%, 46% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(100%); } 51%, 100% { opacity: 0; transform: translateY(100%); } }
.fx-sheet-grip { align-self: center; width: 9.8cqw; height: 1cqw; border-radius: 1cqw; background: #d4d4d4; margin-bottom: 3.6cqw; }
.fx-sheet-title { font-size: 4.2cqw; font-weight: 700; line-height: 5.2cqw; }
.fx-sheet-sub { margin-top: 1cqw; font-size: 2.9cqw; line-height: 3.9cqw; color: var(--ink-600); }
.fx-sheet-label { margin-top: 3.6cqw; font-size: 2.6cqw; line-height: 3.25cqw; color: var(--ink-600); }
.fx-sheet-field {
  display: flex; align-items: center;
  margin-top: 1.3cqw; height: 10.4cqw; padding: 0 3.6cqw;
  border: .35cqw solid var(--blue); border-radius: 2.3cqw;
  font-size: 4.9cqw; font-weight: 700;
}
.fx-type { display: inline-block; clip-path: inset(0 100% 0 0); animation: fx-type var(--fx-loop) steps(5, end) infinite both; }
@keyframes fx-type { 0%, 26% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
.fx-caret { width: .4cqw; height: 6cqw; margin-left: .5cqw; background: var(--blue); animation: fx-caret var(--fx-loop) linear infinite both; }
@keyframes fx-caret { 0%, 21% { opacity: 0; } 22%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
.fx-sheet-chips { display: flex; gap: 1.6cqw; margin-top: 3.25cqw; }
.fx-sheet-chips span {
  height: 7.2cqw; padding: 0 3.6cqw; display: flex; align-items: center;
  border: .25cqw solid var(--line); border-radius: 99px; font-size: 2.6cqw; font-weight: 600;
}
.fx-sheet-chips .is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fx-sheet-save {
  margin-top: 4.55cqw; height: 9.75cqw; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-size: 3.25cqw; font-weight: 600;
  animation: fx-press var(--fx-loop) ease infinite both;
}
@keyframes fx-press { 0%, 42% { transform: none; } 44% { transform: scale(.95); } 47%, 100% { transform: none; } }
.fx-finger-upad { --fx-name: fx-finger-upad; }
@keyframes fx-finger-upad {
  0%       { opacity: 0; left: calc(540 / 615 * 100%); top: calc(1010 / 1326 * 100%); transform: none; }
  6%       { opacity: 1; }
  11%      { left: calc(537 / 615 * 100%); top: calc(873 / 1326 * 100%); transform: none; }
  12.5%    { transform: scale(.78); }
  15%      { transform: none; }
  21%      { left: calc(307 / 615 * 100%); top: calc(974 / 1326 * 100%); transform: none; }
  22.5%    { transform: scale(.78); }
  25%      { transform: none; }
  40%      { left: calc(307 / 615 * 100%); top: calc(1128 / 1326 * 100%); transform: none; }
  44%      { transform: scale(.78); }
  47%      { transform: none; opacity: 1; }
  52%, 100% { left: calc(307 / 615 * 100%); top: calc(1128 / 1326 * 100%); opacity: 0; }
}

/* Generated timing keyframes (fx-c cover, fx-b bar, fx-s show, fx-h hold). */
@keyframes fx-b-52 { 0% { opacity: 0; transform: none; } 2%, 52% { opacity: 1; transform: none; } 62%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-57 { 0% { opacity: 0; transform: none; } 2%, 57% { opacity: 1; transform: none; } 67%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-61 { 0% { opacity: 0; transform: none; } 2%, 61% { opacity: 1; transform: none; } 71%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-65 { 0% { opacity: 0; transform: none; } 2%, 65% { opacity: 1; transform: none; } 75%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-69 { 0% { opacity: 0; transform: none; } 2%, 69% { opacity: 1; transform: none; } 79%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-73 { 0% { opacity: 0; transform: none; } 2%, 73% { opacity: 1; transform: none; } 83%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-b-77 { 0% { opacity: 0; transform: none; } 2%, 77% { opacity: 1; transform: none; } 87%, 100% { opacity: 1; transform: scaleX(0); } }
@keyframes fx-c-1-50 { 0%, 0% { opacity: 0; } 2%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes fx-c-1-55 { 0%, 0% { opacity: 0; } 2%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes fx-c-1-59 { 0%, 0% { opacity: 0; } 2%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes fx-c-1-63 { 0%, 0% { opacity: 0; } 2%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes fx-c-1-67 { 0%, 0% { opacity: 0; } 2%, 67% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes fx-c-1-71 { 0%, 0% { opacity: 0; } 2%, 71% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes fx-c-1-75 { 0%, 0% { opacity: 0; } 2%, 75% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes fx-c-1-78 { 0%, 0% { opacity: 0; } 2%, 78% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes fx-c-2-10 { 0%, 1% { opacity: 0; } 3%, 10% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes fx-c-2-14 { 0%, 1% { opacity: 0; } 3%, 14% { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes fx-c-2-18 { 0%, 1% { opacity: 0; } 3%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes fx-c-2-21 { 0%, 1% { opacity: 0; } 3%, 21% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes fx-c-2-22 { 0%, 1% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes fx-c-2-24 { 0%, 1% { opacity: 0; } 3%, 24% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes fx-c-2-27 { 0%, 1% { opacity: 0; } 3%, 27% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes fx-c-2-30 { 0%, 1% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes fx-h-2 { 0% { opacity: 0; } 3%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes fx-s-52 { 0%, 51% { opacity: 0; transform: scale(.92); } 54%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fx-s-54 { 0%, 53% { opacity: 0; transform: scale(.92); } 56%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- Lottie slots ----------
   Any [data-anim] block can take a Lottie file (see assets/v2/anim/animations.json).
   Once it has loaded, the static picture underneath is hidden. */
.anim-layer { position: absolute; inset: 0; z-index: 3; }
.anim-layer svg { display: block; }
.has-anim > :not(.anim-layer):not(.scan-copy) { visibility: hidden; }
.scan.has-anim::after { display: none; }

/* ---------- Scroll reveal (only when JS runs and motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee.is-running .marquee-track { animation: none; }
  .team-track, .shot--team { transition: none; }
  .screen-fx { display: none; }
}

/* ---------- Responsive ----------
   Figma has only the 1440 desktop frame. Below it, sizes step down to the
   values listed in the hand-off notes. */
@media (max-width: 1100px) {
  .feature, .team-row { gap: 48px; }
  .price-card { gap: 40px; padding: 40px; }
  .price-side { width: 340px; }
  .faq .wrap { gap: 56px; }
  .faq-title { width: 300px; }
}

@media (max-width: 860px) {
  .hero-copy { padding: 0 var(--gutter) 40px; gap: 24px; }
  .hero-title { letter-spacing: -1.2px; }

  .trust { padding: 64px 0; gap: 28px; }
  .marquee-track { gap: 32px; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 16px)); } }

  .features { padding: 64px 0 96px; }
  .features .wrap { gap: 96px; }
  .feature, .feature--flip { flex-direction: column; align-items: center; gap: 32px; }
  .feature-copy { flex: none; max-width: none; width: 100%; gap: 28px; }
  .ticks { gap: 16px; }
  .ticks li { font-size: 16px; }

  .team { padding: 96px 0; }
  .team .wrap { gap: 48px; }
  .team-head .h-xl { letter-spacing: -1.2px; line-height: 1.1; }
  .team-sub { font-size: 16px; }
  /* No pinning and no tabs on a phone: each title is followed by its own phone, one after
     another — Upad, Hajari, Salary. The list and the shot stack step aside (display: contents)
     so the three titles and three shots can interleave by `order`. Each phone plays as it
     scrolls into view (js/v2.js). */
  .team-scroll { height: auto; }
  .team-row { position: static; flex-direction: column; align-items: stretch; gap: 24px; }
  .team-list, .team-track, .team-shots { display: contents; }
  .team-item { opacity: 1; cursor: default; }
  .team-item:hover { opacity: 1; }
  .team-item-title { font-size: 28px; }
  .team-item-body { font-size: 18px; line-height: 26px; }
  .team-item[data-key="upad"]   { order: 1; }
  .shot--team[data-panel="upad"]   { order: 2; }
  .team-item[data-key="hajari"] { order: 3; }
  .shot--team[data-panel="hajari"] { order: 4; }
  .team-item[data-key="salary"] { order: 5; }
  .shot--team[data-panel="salary"] { order: 6; }
  .team-item:not([data-key="upad"]) { margin-top: 40px; }
  .shot--team {
    position: relative; inset: auto; align-self: center;
    width: 100%; max-width: 490px; aspect-ratio: 490 / 781;
    opacity: 1; transform: none;
  }

  /* On a phone the photo is too short to carry the text, so the text goes under it and the
     photo fades into the dark band instead of being cropped. */
  .scan { display: flex; flex-direction: column; padding-bottom: 48px; }
  .scan::after { bottom: auto; aspect-ratio: 2400 / 1747; background: linear-gradient(180deg, rgba(0, 7, 17, 0) 60%, var(--night) 100%); }
  .scan-copy { position: relative; left: auto; bottom: auto; width: auto; margin: 0 var(--gutter); gap: 12px; }
  .scan-body { font-size: 18px; line-height: 1.4; gap: 8px; }

  .trial { padding: 96px 0; }
  .trial .wrap { gap: 48px; }
  .price-card { flex-direction: column; align-items: stretch; padding: 24px; gap: 32px; }
  .calc { gap: 40px; }
  .calc-q { font-size: 18px; }
  .stepper { gap: 16px; }
  .step-field { flex: 1; justify-content: center; padding: 0 16px; gap: 12px; }
  .calc-total b { font-size: 44px; }
  .price-side { width: auto; padding: 24px; }

  .faq { padding: 48px 0 96px; }
  .faq .wrap { flex-direction: column; gap: 40px; }
  .faq-title { width: auto; }
  .faq-list summary { gap: 24px; font-size: 18px; }
  .faq-list details p { padding-right: 0; }

  .closer { padding-top: 96px; gap: 24px; }
  .closer-title { letter-spacing: -1.2px; }
  .closer-media { aspect-ratio: 4 / 5; }
  .closer-media img { object-position: 52% 50%; }

}

@media (max-width: 640px) {
  .stat-card { gap: 16px; padding: 14px 16px; top: auto; bottom: 10%; }
  .stat-label, .stat-delta { font-size: 12px; }
  .stat-num { font-size: 19px; letter-spacing: -.6px; }
  .stat-sep { height: 28px; }
}

/* ---------- WhatsApp + trial dock ----------
   Desktop: a round WhatsApp button fixed bottom right. Phones: a bar along the bottom with the
   trial button and WhatsApp side by side; the page gets room underneath so the footer isn't hidden. */
.dock { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 10px; }
.dock-trial { display: none; }
.dock-wa {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .15s ease;
}
.dock-wa:hover { transform: scale(1.06); }
.dock-wa:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }
@media (max-width: 860px) {
  .dock {
    left: 0; right: 0; bottom: 0; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .dock-trial { display: inline-flex; flex: 1; min-width: 0; }
  .dock-wa { width: 48px; height: 48px; box-shadow: none; }
  .dock-wa svg { width: 26px; height: 26px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}